/* ============================================================
   SEESONWEDDING — hệ thống giao diện
   Nền trang: video chạy nền, phủ một lớp voan TRẮNG MỜ (không dùng
   màu hồng/tím nữa). Panel trắng bo tròn lớn, chip hình viên thuốc,
   nút đen, bóng đổ mềm màu trung tính.
   Mobile-first.
   ============================================================ */

/* ---------- 1. TOKEN ---------- */
:root {
  /* dải trắng - xám trung tính dùng cho voan phủ lên video nền */
  --g0: #F7F7F8;   /* trắng ngà */
  --g1: #FFFFFF;
  --g2: #FBFBFC;
  --g3: #FFFFFF;
  --g4: #F2F2F4;
  --g5: #E9E9ED;   /* xám rất nhạt */

  --surface: #FFFFFF;
  --surface-2: #F4F4F6;      /* nền ảnh trong thẻ */
  --surface-3: #EBEBEF;

  /* --ink là "màu tương phản mạnh": vừa là màu CHỮ trên nền trang,
     vừa là màu NỀN của nút/chip đậm. --on-ink là màu chữ nằm TRÊN nền đó.
     Cặp này là thứ làm dark mode chạy được: sang nền tối thì --ink hoá sáng
     và --on-ink hoá tối, nút vẫn tự động ngược màu với nền, không phải
     viết lại một dòng quy tắc nào. */
  --ink: #16161A;
  --on-ink: #FFFFFF;
  /* Chữ phụ và đường kẻ nằm TRÊN nền --ink (thẻ giá "Phổ Biến").
     Bắt buộc phải là token: ghi cứng rgba(255,255,255,…) thì sang chủ đề tối
     thẻ này lật thành nền SÁNG mà chữ vẫn trắng — mất hút hoàn toàn. */
  --on-ink-soft: rgba(255,255,255,.6);
  --on-ink-strong: rgba(255,255,255,.9);
  --on-ink-line: rgba(255,255,255,.14);
  --ink-soft: #202028;       /* --ink hover, đậm hơn một nấc */
  --ink-2: #3A3A42;
  --muted: #8A8A93;
  --placeholder: #A9A9B2;
  --line: rgba(22,22,26,.08);
  --line-2: rgba(22,22,26,.05);
  /* Vàng đồng trầm, dùng rất tiết chế. Chọn đúng sắc độ này vì nó đạt
     tương phản 5.0:1 CẢ HAI CHIỀU — làm chữ trên nền trắng, và làm nền
     cho chữ trắng (badge "Được chọn nhiều nhất") — nên không chỗ nào bị mờ. */
  --accent: #8A6A2F;

  --sans: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "SF Pro Text",
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;

  --wrap: 1280px;
  --gut: 18px;

  --r-panel: 30px;           /* bo góc panel lớn */
  --r-card: 18px;            /* bo góc thẻ */
  --r-pill: 999px;

  /* bóng đổ trung tính (trước đây ám tím) */
  --sh-panel: 0 30px 80px -28px rgba(18,18,24,.30), 0 4px 14px -6px rgba(18,18,24,.12);
  --sh-soft: 0 10px 30px -14px rgba(18,18,24,.22);
  --sh-pill: 0 4px 14px -4px rgba(18,18,24,.16);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --header-h: 68px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

@media (min-width: 768px) { :root { --gut: 34px; --header-h: 84px; } }
@media (min-width: 1400px) { :root { --gut: 48px; } }


/* ---------- 1b. CHỦ ĐỀ TỐI ----------
   Chỉ đổi GIÁ TRỊ của token, không viết lại quy tắc nào. Nhờ cặp
   --ink / --on-ink ở trên mà nút, chip, thẻ giá "Phổ Biến"... tự lật màu.

   Chủ đề luôn được chốt bằng thuộc tính data-theme trên <html>, do một
   đoạn script chạy NGAY trong <head> đặt vào trước khi trang kịp vẽ:
     - khách đã từng bấm nút  -> lấy lựa chọn đã lưu trong máy
     - chưa bấm bao giờ       -> lấy theo cài đặt sáng/tối của hệ điều hành

   Làm ở <head> chứ không đợi main.js là để tránh "chớp trắng": trang tối mà
   vẽ nền trắng trước rồi mới đổi thì đập vào mắt rất khó chịu.

   Vì script luôn đặt data-theme nên CSS chỉ cần lo đúng một nhánh dưới đây,
   không phải viết thêm bản @media (prefers-color-scheme). Đánh đổi: máy tắt
   JavaScript sẽ luôn thấy giao diện sáng — vẫn đọc tốt, chấp nhận được. */
:root[data-theme="dark"] {
  --g0: #101014;
  --g1: #14141A;
  --g2: #101014;
  --g3: #16161C;
  --g4: #0E0E13;
  --g5: #08080B;

  --surface: #17171D;        /* panel */
  --surface-2: #1F1F26;      /* nền ảnh trong thẻ, ô input */
  --surface-3: #2A2A33;

  /* đảo cặp tương phản: chữ hoá sáng, nút hoá sáng-nền/tối-chữ */
  --ink: #F2F2F5;
  --on-ink: #16161A;
  --ink-soft: #E2E2E8;
  --ink-2: #C6C6D0;
  --muted: #9A9AA6;
  --placeholder: #6E6E7A;
  --line: rgba(255,255,255,.13);
  --line-2: rgba(255,255,255,.07);

  /* vàng đồng phải sáng hơn hẳn mới đọc được trên nền tối:
     #C9A227 đạt tương phản 7.4:1 với --surface, bản #8A6A2F chỉ 2.4:1 */
  --accent: #C9A227;

  /* thẻ "Phổ Biến" lật thành nền sáng -> chữ phụ trên nó phải hoá tối */
  --on-ink-soft: rgba(22,22,26,.62);
  --on-ink-strong: rgba(22,22,26,.9);
  --on-ink-line: rgba(22,22,26,.16);

  /* trên nền tối, bóng đổ mềm gần như vô hình -> đẩy đậm và thêm viền sáng
     rất nhẹ để panel vẫn tách khỏi nền */
  --sh-panel: 0 30px 80px -28px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.05);
  --sh-soft: 0 10px 30px -14px rgba(0,0,0,.6);
  --sh-pill: 0 4px 14px -4px rgba(0,0,0,.5);
}

:root[data-theme="dark"] .bgtint {
  /* voan ĐEN thay cho voan trắng, cùng một cách phân bố:
     đậm trên/dưới nơi nhiều chữ, nhạt ở giữa cho video còn thở */
  background:
    linear-gradient(180deg,
      rgba(8,8,11,.94) 0%,
      rgba(8,8,11,.70) 26%,
      rgba(8,8,11,.62) 50%,
      rgba(8,8,11,.76) 76%,
      rgba(8,8,11,.96) 100%),
    linear-gradient(170deg,
      var(--g0) 0%, var(--g1) 30%, var(--g2) 55%, var(--g4) 80%, var(--g5) 100%);
  opacity: .62;
}
@media (max-width: 767px) { :root[data-theme="dark"] .bgtint { opacity: .72; } }

:root[data-theme="dark"] .bgvid__v {
  /* nền tối thì video phải dịu lại, không thì sáng chói hơn cả nội dung */
  filter: saturate(.94) contrast(1.02) brightness(.72);
}
/* vignette dùng multiply trên nền tối sẽ bịt đen hết -> tắt */
:root[data-theme="dark"] .bgvig { opacity: 0; }

/* nhãn "chưa xác nhận" (công cụ nội bộ) cũng cần bản nền tối */
:root[data-theme="dark"] .todo-flag {
  background: rgba(201,162,39,.16); border-color: #C9A227; color: #E8C55C;
}
:root[data-theme="dark"] .field input:invalid:not(:placeholder-shown) { border-color: #E8706B; }

/* Đĩa trắng sau logo mạng xã hội GIỮ NGUYÊN màu trắng ở cả hai chủ đề:
   logo TikTok/Threads màu đen, bỏ nền trắng đi là mất hút trên nền tối. */
:root[data-theme="dark"] .choice--brand .brand { background: #fff; }

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--g0); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
body {
  margin: 0;
  /* PHẢI trong suốt: nền của body được vẽ SAU các lớp z-index âm,
     nếu tô màu ở đây thì lớp phim nền bị che mất. */
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.02em; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--ink); color: var(--on-ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: var(--on-ink); padding: 10px 16px; border-radius: var(--r-pill);
  transition: top .2s;
}
.skip-link:focus { top: 12px; }


/* ---------- NỀN VIDEO + CHÂN MÁY THEO CUỘN ----------
   .bgvid       khung cố định, cắt gọn mọi thứ tràn ra ngoài
   .bgvid__rig  "chân máy": nơi duy nhất nhận transform từ JS
                (dolly vào, tilt dọc, drift ngang, roll nghiêng)
   .bgvid__v    thẻ video, phủ kín khung, nhoè nhẹ theo tốc độ cuộn
   .bgtint      voan TRẮNG MỜ phủ lên — giữ chữ trong panel luôn đọc rõ
   .bgvig       vignette: tối nhẹ 4 góc cho ra chất phim

   Chân máy cố tình rộng hơn khung nhìn (inset âm) để lúc rê/nghiêng
   không bao giờ lộ mép trắng. */
.bgvid {
  position: fixed; inset: 0; z-index: -3; overflow: hidden;
  background: #0E0E12;              /* nền lót lúc video chưa kịp vẽ */
  contain: layout paint;
}
.bgvid__rig {
  /* rộng hơn khung nhìn 6% mỗi phía: đủ chỗ nghiêng/giật mà không bao giờ
     lộ mép trắng. Rig lo scale + roll; việc rê khung hình do .bgvid__v lo. */
  position: absolute; inset: -6%;
  transform: scale(1.0);
  transform-origin: 50% 45%;
  will-change: transform;
  backface-visibility: hidden;
}

/* KHÔNG dùng object-fit: cover.
   Lý do: cover cắt phần thừa NGAY BÊN TRONG thẻ video, nên dù có transform
   thẻ đi đâu cũng không lộ thêm được khung hình nào — chỉ hở mép.
   Thay vào đó cho thẻ video to đúng bằng kích thước "cover" thật rồi canh giữa;
   phần thừa tràn ra ngoài và bị .bgvid cắt. Lúc đó translate thẻ video = rê máy
   quay thật qua phần khung hình đang bị giấu, mà vẫn chạy trên compositor. */
.bgvid__v {
  position: absolute; top: 50%; left: 50%;
  min-width: 100%; min-height: 100%;
  width: auto; height: auto;
  max-width: none;                  /* ghi đè img,video{max-width:100%} ở reset */
  transform: translate3d(-50%, -50%, 0);
  /* hơi giảm tương phản + tăng chút màu: video lùi ra sau, chữ nổi lên trước */
  filter: saturate(1.06) contrast(.96) brightness(1.04);
  will-change: transform, filter;
  backface-visibility: hidden;
  pointer-events: none;
}

.bgtint {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  /* voan trắng: đậm ở trên và dưới (nơi có header/footer và nhiều chữ),
     nhạt ở giữa để video vẫn thở. Không còn màu hồng/tím. */
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.92) 0%,
      rgba(255,255,255,.66) 26%,
      rgba(255,255,255,.58) 50%,
      rgba(255,255,255,.72) 76%,
      rgba(255,255,255,.94) 100%),
    linear-gradient(170deg,
      var(--g0) 0%, var(--g1) 30%, var(--g2) 55%, var(--g4) 80%, var(--g5) 100%);
  opacity: .34;
  will-change: opacity;
}
/* trên điện thoại phủ đậm hơn cho chữ trong panel luôn rõ */
@media (max-width: 767px) { .bgtint { opacity: .46; } }

.bgvig {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(120% 82% at 50% 42%,
    rgba(12,12,16,0) 38%, rgba(12,12,16,.10) 72%, rgba(12,12,16,.24) 100%);
  mix-blend-mode: multiply;
  opacity: .5;
}

/* Máy yếu / tiết kiệm dữ liệu / người tắt hiệu ứng: đứng yên, không nhoè. */
@media (prefers-reduced-motion: reduce) {
  .bgvid__rig { transform: none !important; }
  .bgvid__v { transform: translate3d(-50%, -50%, 0) !important; filter: none !important; }
}

/* ---------- 3. TIỆN ÍCH ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.wrap-narrow { max-width: 780px; }

/* PANEL — khối trắng bo tròn lớn, thành phần chính của giao diện.
   Mọi .wrap nằm trong .section tự thành panel, không cần thêm thẻ nào. */
.section > .wrap,
.page-top > .wrap,
.footer > .wrap,
.panel {
  background: var(--surface);
  border-radius: var(--r-panel);
  box-shadow: var(--sh-panel);
  width: calc(100% - var(--gut) * 2);
  max-width: calc(var(--wrap) - var(--gut) * 2);
  margin-inline: auto;
  padding: 28px 20px;
}
@media (min-width: 768px) {
  .section > .wrap, .page-top > .wrap, .footer > .wrap, .panel { padding: 46px 42px; }
}
@media (min-width: 1100px) {
  .section > .wrap, .page-top > .wrap, .footer > .wrap, .panel { padding: 56px 54px; }
}
/* các khối nối liền nhau thì bỏ bo góc ở cạnh tiếp giáp cho liền mạch */
.section { padding: 8px 0; }
@media (min-width: 768px) { .section { padding: 11px 0; } }
.page-top { padding: calc(var(--header-h) + 20px) 0 0; }
.page-top + .section { padding-top: 11px; }

.section { position: relative; }

.section-head { max-width: 660px; margin-bottom: 28px; }
.section-head h2 { font-size: clamp(27px, 5.4vw, 44px); line-height: 1.08; font-weight: 700; letter-spacing: -.035em; }
.section-head p { color: var(--muted); margin-top: 13px; }

.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 13px;
}
.display { font-family: var(--serif); font-weight: 400; line-height: 1.08; letter-spacing: -.02em; }
.mega { font-family: var(--sans); font-weight: 700; line-height: 1.03; letter-spacing: -.035em; }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------- 4. NÚT ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 28px;
  font-size: 15px; font-weight: 600;
  border: 0; border-radius: var(--r-pill);
  background: var(--ink); color: var(--on-ink);
  cursor: pointer; text-align: center;
  box-shadow: var(--sh-pill);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease), background .3s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -8px rgba(18,18,24,.32); }
.btn:active { transform: translateY(0); }
.btn--light { background: var(--surface); color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn--ghost:hover { background: var(--surface); box-shadow: var(--sh-pill); }
.btn--accent, .btn--pink { background: var(--accent); color: #fff; }  /* --pink: tên cũ, giữ cho khỏi vỡ trang cũ */
.btn--wide { width: 100%; }
.btn--lg { min-height: 58px; font-size: 16px; padding: 17px 34px; }

.link-underline {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 600; color: var(--ink);
  padding-bottom: 3px; border-bottom: 1.5px solid var(--ink);
  transition: gap .35s var(--ease-out), color .3s, border-color .3s;
}
.link-underline:hover { gap: 14px; color: var(--accent); border-color: var(--accent); }
.link-underline i { font-style: normal; }

/* ---------- 5. CHIP LỌC (thành phần đặc trưng của video) ---------- */
.chips {
  display: flex; gap: 10px; flex-wrap: nowrap;
  overflow-x: auto; overflow-y: hidden;
  padding: 4px 2px 12px;
  scrollbar-width: none; -ms-overflow-style: none;
  scroll-snap-type: x proximity;
}
.chips::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .chips { flex-wrap: wrap; overflow: visible; } }

.chip {
  flex: 0 0 auto; scroll-snap-align: start;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 11px 22px;
  border: 0; border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink);
  font-size: 15px; font-weight: 500; white-space: nowrap; cursor: pointer;
  box-shadow: var(--sh-pill);
  transition: background .3s var(--ease), color .3s var(--ease),
              transform .25s var(--ease-out), box-shadow .3s;
}
.chip:hover { transform: translateY(-2px); }
/* chip nằm trong panel trắng -> dùng nền xám nhạt cho tách khối */
.section > .wrap .chip, .panel .chip { background: var(--surface-2); box-shadow: none; }
.section > .wrap .chip:hover, .panel .chip:hover { background: var(--surface-3); }
.section > .wrap .chip[aria-pressed="true"], .panel .chip[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.chip__x {
  display: none; width: 17px; height: 17px; border-radius: 50%;
  align-items: center; justify-content: center;
  background: rgba(255,255,255,.24); font-size: 11px; line-height: 1;
}
.chip[aria-pressed="true"] .chip__x { display: inline-flex; }
.chip__n { font-size: 13px; opacity: .48; font-weight: 500; }

/* ---------- 6. HEADER ---------- */
.header {
  position: fixed; inset: 12px 0 auto 0; z-index: 100;
  display: flex; align-items: center; pointer-events: none;
  transition: transform .45s var(--ease);
}
.header.is-hidden { transform: translateY(calc(-100% - 24px)); }
.header__inner {
  width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.header__inner > * { pointer-events: auto; }

.header__logo {
  display: inline-flex; align-items: center;
  background: var(--surface); border-radius: var(--r-pill);
  padding: 10px 20px; box-shadow: var(--sh-pill);
}
.header__logo img { height: 20px; width: auto; }
@media (min-width: 768px) { .header__logo img { height: 24px; } }
/* Hai bản logo, hiện đúng một bản theo chủ đề: bản chữ đen cho nền sáng,
   bản chữ trắng cho nền tối. Không đổi thì nền tối sẽ nuốt mất logo. */
.header__logo .logo-light { display: none; }
:root[data-theme="dark"] .header__logo .logo-dark { display: none; }
:root[data-theme="dark"] .header__logo .logo-light { display: block; }

/* NÚT ĐỔI SÁNG/TỐI — cùng hình tròn với nút menu cho đồng bộ.
   Hai biểu tượng chồng lên nhau, hiện cái tương ứng với chủ đề ĐANG dùng. */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex: none; padding: 0;
  background: var(--surface); border: 0; border-radius: 50%;
  box-shadow: var(--sh-pill); cursor: pointer; color: var(--ink);
  transition: background .3s var(--ease), transform .3s var(--ease-out);
}
.theme-toggle:hover { transform: translateY(-2px); }
.theme-toggle svg { width: 20px; height: 20px; display: block; fill: currentColor; }
.theme-toggle .i-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: block; }

.header__nav {
  display: none; align-items: center; gap: 4px;
  background: var(--surface); border-radius: var(--r-pill);
  padding: 6px; box-shadow: var(--sh-pill);
}
.header__nav a {
  font-size: 14px; font-weight: 500; color: var(--ink);
  padding: 10px 20px; border-radius: var(--r-pill);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.header__nav a:hover { background: var(--surface-2); }
.header__nav a[aria-current="page"] { background: var(--ink); color: var(--on-ink); }
.header__cta { display: none; }
@media (min-width: 960px) {
  .header__nav { display: flex; }
  .header__cta { display: inline-flex; min-height: 48px; font-size: 14px; padding: 13px 26px; }
}
/* Menu 6 mục (Giới thiệu · Dịch vụ · Bộ ảnh · Váy cưới · Bảng giá · Liên hệ) —
   ở dải 960–1279px, logo + 6 mục + nút chủ đề + nút Đặt lịch dễ chạm mép, nên
   bóp đệm ngang lại thay vì để menu xuống hàng. Từ 1280px trở lên giữ rộng rãi. */
@media (min-width: 960px) and (max-width: 1279px) {
  .header__nav { gap: 2px; padding: 5px; }
  .header__nav a { padding: 9px 11px; font-size: 13.5px; }
}

.header__burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 48px; height: 48px; padding: 0 13px;
  background: var(--surface); border: 0; border-radius: 50%;
  box-shadow: var(--sh-pill); cursor: pointer;
}
.header__burger span {
  display: block; height: 1.8px; width: 100%; background: var(--ink); border-radius: 2px;
  transition: transform .4s var(--ease), opacity .25s var(--ease);
}
@media (min-width: 960px) { .header__burger { display: none; } }
body.menu-open .header__burger span:nth-child(1) { transform: translateY(6.8px) rotate(45deg); }
body.menu-open .header__burger span:nth-child(2) { opacity: 0; }
body.menu-open .header__burger span:nth-child(3) { transform: translateY(-6.8px) rotate(-45deg); }

/* menu điện thoại — panel trắng bo tròn trượt xuống */
.menu {
  position: fixed; inset: 12px 12px auto 12px; z-index: 95;
  background: var(--surface); border-radius: var(--r-panel);
  box-shadow: var(--sh-panel);
  padding: calc(var(--header-h) + 10px) 24px 24px;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(-14px) scale(.98);
  transform-origin: top center;
  transition: opacity .4s var(--ease-out), transform .45s var(--ease-out), visibility .4s;
  max-height: calc(100svh - 24px); overflow-y: auto;
}
body.menu-open .menu { opacity: 1; visibility: visible; transform: none; }
body.menu-open { overflow: hidden; }
.menu__links a {
  display: flex; align-items: center; gap: 12px;
  font-size: 26px; font-weight: 600; letter-spacing: -.025em;
  padding: 15px 0; border-bottom: 1px solid var(--line-2);
}
.menu__links em { font-style: normal; font-size: 12px; color: var(--muted); font-weight: 500; }
.menu__foot { margin-top: 22px; }
.menu__foot .btn { width: 100%; margin-bottom: 10px; }
.menu__contact { font-size: 14px; color: var(--muted); line-height: 1.9; }
@media (min-width: 960px) { .menu { display: none; } }

/* ---------- 7. HERO ---------- */
.hero {
  position: relative;
  min-height: 100svh; min-height: 100dvh;
  display: flex; align-items: center;
  padding: calc(var(--header-h) + 24px) 0 30px;
}
.hero__inner { position: relative; z-index: 3; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }

.hero__word {
  font-family: var(--sans); font-weight: 700; text-transform: uppercase;
  font-size: clamp(48px, 15.2vw, 210px);
  line-height: .9; letter-spacing: -.05em;
  white-space: nowrap;
  margin: 6px 0 10px; padding-bottom: .05em;
  color: var(--ink);
}
.hero__word.is-split { overflow: hidden; }
.hero__word .l { display: inline-block; will-change: transform; }
html.js .hero__word.is-split .l { animation: letterUp 1s var(--ease-out) both; }
@keyframes letterUp {
  from { transform: translateY(112%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { html.js .hero__word.is-split .l { animation: none; } }

.hero__sub {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--surface); border-radius: var(--r-pill);
  padding: 9px 18px; box-shadow: var(--sh-pill);
  font-size: 13px; font-weight: 600; color: var(--ink);
  margin: 0 0 14px;
}
.hero__sub i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.hero__line { font-size: clamp(16px, 3.6vw, 20px); color: var(--ink-2); max-width: 32ch; margin: 0 0 24px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
@media (max-width: 520px) { .hero__actions .btn { width: 100%; } }
@media (min-width: 1000px) { .hero__lead { max-width: 52%; } }

/* thẻ ảnh nổi — khối trắng bo tròn, y kiểu thẻ sản phẩm trong video */
.hero__card { position: relative; margin: 26px auto 0; max-width: 290px; will-change: transform; }
@media (min-width: 1000px) {
  .hero__card {
    position: absolute; z-index: 4; margin: 0;
    right: var(--gut); top: 50%; transform: translateY(-46%);
    width: auto; max-width: none;
  }
}
.hero__card figure {
  margin: 0; position: relative; overflow: hidden;
  background: var(--surface); border-radius: var(--r-panel);
  box-shadow: var(--sh-panel); padding: 12px 12px 4px;
}
.hero__stack {
  position: relative; width: 100%; aspect-ratio: 3/4; border-radius: 20px;
  overflow: hidden; background: var(--surface-2);
}
@media (min-width: 1000px) { .hero__stack { width: min(34svh, 290px); } }
.hero__stack .hero__slide { position: absolute; inset: 0; }
.hero__card img { width: 100%; height: 100%; object-fit: cover; }
.hero__card figcaption { padding: 14px 8px 12px; font-size: 14px; font-weight: 600; }
.hero__card figcaption em { display: block; font-style: normal; color: var(--muted); font-weight: 500; font-size: 13px; margin-top: 2px; }

.hero__cue {
  position: absolute; z-index: 3; left: var(--gut); bottom: 20px;
  display: none; align-items: center; gap: 10px; font-size: 12px; font-weight: 500; color: var(--ink-2);
}
.hero__cue i { display: block; width: 46px; height: 1.5px; background: rgba(22,22,26,.22); position: relative; overflow: hidden; border-radius: 2px; }
.hero__cue i::after {
  content: ""; position: absolute; inset: 0; background: var(--ink);
  transform: translateX(-100%); animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue { 0% { transform: translateX(-100%); } 55%,100% { transform: translateX(100%); } }
@media (min-width: 1000px) { .hero__cue { display: flex; } }

/* ảnh chạy luân phiên bên trong thẻ nổi */
.hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__slide { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity 1.6s var(--ease); will-change: opacity; }
.hero__slide.is-active { opacity: 1; }
.hero__slide img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
  animation: kenburns 24s linear both;
}
@keyframes kenburns { from { transform: scale(1.03); } to { transform: scale(1.16); } }
@media (prefers-reduced-motion: reduce) { .hero__slide img { animation: none; } }


/* ---------- 8. BĂNG CHỮ CHẠY ---------- */
.marquee {
  position: relative; overflow: hidden;
  background: var(--surface); border-radius: var(--r-pill);
  box-shadow: var(--sh-soft); padding: 13px 0;
}
.marquee__track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span {
  display: inline-flex; align-items: center; gap: 20px; padding-right: 20px;
  font-size: clamp(13px, 1.9vw, 17px); font-weight: 600; letter-spacing: -.01em;
  color: var(--ink); white-space: nowrap;
}
.marquee__track b { color: var(--accent); }
.marquee__track u { text-decoration: none; color: var(--muted); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---------- 9. CÂU TUYÊN NGÔN ---------- */
.statement p {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(23px, 4.4vw, 46px); line-height: 1.22; letter-spacing: -.015em;
  color: var(--ink); margin: 0;
}
.statement .w { display: inline-block; opacity: .2; transition: opacity .5s var(--ease); }
.statement .w.on { opacity: 1; }
.statement em { font-style: italic; color: var(--accent); }

/* ---------- 10. DANH SÁCH DỊCH VỤ ---------- */
.svc { border-top: 1px solid var(--line); }
.svc__row {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: baseline;
  padding: 22px 0; border-bottom: 1px solid var(--line);
  position: relative; border-radius: var(--r-card);
  transition: padding .45s var(--ease-out), background .4s var(--ease);
}
@media (min-width: 768px) {
  .svc__row { grid-template-columns: 70px 1fr auto; gap: 20px; padding: 26px 12px; align-items: center; }
  .svc__row:hover { padding-left: 26px; background: var(--surface-2); }
}
.svc__n { font-size: 13px; font-weight: 600; color: var(--muted); }
.svc__t { font-size: clamp(18px, 3.4vw, 28px); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; }
.svc__d { grid-column: 1 / -1; color: var(--muted); font-size: 14px; margin: 6px 0 0; max-width: 62ch; }
@media (min-width: 768px) { .svc__d { grid-column: 2; } }
.svc__go { display: none; }
@media (min-width: 768px) {
  .svc__go {
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
    background: var(--surface-2); font-size: 17px;
    transition: transform .45s var(--ease-out), background .3s, color .3s;
  }
  .svc__row:hover .svc__go { transform: translateX(6px); background: var(--ink); color: var(--on-ink); }
}
.svc__peek {
  position: fixed; top: 0; left: 0; z-index: 60;
  width: 250px; aspect-ratio: 3/4; overflow: hidden; border-radius: var(--r-card);
  pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.92);
  transition: opacity .35s var(--ease), transform .5s var(--ease-out);
  box-shadow: var(--sh-panel); display: none;
}
@media (hover: hover) and (pointer: fine) and (min-width: 1000px) { html.js .svc__peek { display: block; } }
.svc__peek.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.svc__peek img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 11. THẺ BỘ ẢNH ---------- */
.albums { display: grid; gap: 20px; }
@media (min-width: 620px) { .albums { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .albums { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.album-card {
  display: block; background: var(--surface-2); border-radius: var(--r-card);
  padding: 9px 9px 14px;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease),
              background .4s var(--ease), opacity .45s var(--ease);
}
.album-card:hover { transform: translateY(-6px); background: var(--surface); box-shadow: var(--sh-panel); }
.album-card__media { position: relative; overflow: hidden; border-radius: 12px; background: var(--surface-3); aspect-ratio: 4 / 5; }
.album-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.album-card:hover .album-card__media img { transform: scale(1.05); }
.album-card__count {
  position: absolute; right: 10px; top: 10px; z-index: 2;
  background: rgba(255,255,255,.93); color: var(--ink);
  font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: var(--r-pill);
  box-shadow: var(--sh-pill);
}
.album-card__body { padding: 13px 7px 0; }
.album-card__meta { font-size: 13px; color: var(--muted); font-weight: 500; }
.album-card h3 { font-size: 18px; font-weight: 600; letter-spacing: -.025em; margin: 5px 0 6px; line-height: 1.25; }
.album-card__desc { font-size: 14px; color: var(--muted); margin: 0; }

/* thẻ bị lọc ra: mờ và thu nhỏ rồi biến mất — chuyển động như trong video */
.album-card.is-out { opacity: 0; transform: scale(.94); pointer-events: none; }
.albums.is-filtering .album-card { transition-duration: .42s; }

@media (min-width: 620px) {
  .albums--featured > .album-card:first-child { grid-column: 1 / -1; }
  .albums--featured > .album-card:first-child .album-card__media { aspect-ratio: 16 / 8; }
  .albums--featured > .album-card:first-child h3 { font-size: clamp(21px, 3vw, 30px); }
}

.empty-note { display: none; color: var(--muted); padding: 30px 4px; font-size: 15px; }
.empty-note.is-shown { display: block; }

/* ---------- 12. GALLERY ---------- */
.gallery { columns: 2; column-gap: 12px; }
@media (min-width: 720px) { .gallery { columns: 3; column-gap: 16px; } }
@media (min-width: 1100px) { .gallery { columns: 4; column-gap: 18px; } }
.shot {
  break-inside: avoid; margin: 0 0 12px;
  display: block; width: 100%; padding: 0; border: 0;
  background: var(--surface-2); border-radius: var(--r-card);
  cursor: zoom-in; position: relative; overflow: hidden;
  transition: transform .4s var(--ease-out), box-shadow .4s;
}
@media (min-width: 720px) { .shot { margin-bottom: 16px; } }
.shot:hover { transform: translateY(-4px); box-shadow: var(--sh-panel); }
.shot img { width: 100%; height: auto; }

/* ---------- 13. LIGHTBOX ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(28,16,36,.72);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  display: none; align-items: center; justify-content: center; touch-action: pan-y;
}
.lightbox.is-open { display: flex; }
.lightbox__img { max-width: 92vw; max-height: 84svh; object-fit: contain; border-radius: var(--r-card); user-select: none; }
.lightbox__btn {
  position: absolute; z-index: 2;
  width: 50px; height: 50px; display: grid; place-items: center;
  background: var(--surface); border: 0; border-radius: 50%;
  color: var(--ink); font-size: 21px; line-height: 1; cursor: pointer;
  box-shadow: var(--sh-pill); transition: transform .3s var(--ease-out);
}
.lightbox__btn:hover { transform: scale(1.08); }
.lightbox__close { top: 18px; right: 18px; }
.lightbox__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__prev:hover, .lightbox__next:hover { transform: translateY(-50%) scale(1.08); }
@media (max-width: 620px) { .lightbox__prev, .lightbox__next { display: none; } }
.lightbox__counter {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--surface); color: var(--ink);
  padding: 8px 18px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600;
  box-shadow: var(--sh-pill);
}

/* ---------- 14. SỐ LIỆU / QUY TRÌNH ---------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.stat { background: var(--surface-2); border-radius: var(--r-card); padding: 22px 20px; }
.stat__num { font-size: clamp(28px, 5.6vw, 44px); font-weight: 700; letter-spacing: -.035em; line-height: 1; }
.stat__num sub { font-size: .4em; vertical-align: baseline; color: var(--muted); font-weight: 600; }
.stat__label { font-size: 13px; color: var(--muted); margin-top: 8px; }

.steps { display: grid; gap: 12px; }
@media (min-width: 780px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { background: var(--surface-2); border-radius: var(--r-card); padding: 24px 22px 26px; transition: background .4s var(--ease); }
.step:hover { background: var(--surface-3); }
.step__n {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--ink); color: var(--on-ink); font-size: 13px; font-weight: 600; margin-bottom: 14px;
}
.step h3 { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.step p { font-size: 14px; color: var(--muted); margin: 0; }

/* ---------- 15. REVIEW ---------- */
.quotes { display: grid; gap: 14px; }
@media (min-width: 700px) { .quotes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .quotes { grid-template-columns: repeat(3, 1fr); } }
.quote {
  display: flex; flex-direction: column;
  background: var(--surface-2); border-radius: var(--r-card); padding: 24px 22px;
  transition: background .4s var(--ease), transform .4s var(--ease-out);
}
.quote:hover { background: var(--surface-3); transform: translateY(-3px); }

/* NGÔI SAO — vẽ bằng SVG thay cho ký tự ★.
   Ký tự ★ mỗi hệ máy hiện một kiểu, to nhỏ tuỳ font và thường mảnh, mờ.
   SVG thì máy nào cũng đúng một hình, phóng bao nhiêu cũng sắc nét. */
.stars, .quote__stars, .gscore__stars {
  display: inline-flex; align-items: center; gap: 3px;
  color: #E8A317; line-height: 0;
}
.stars svg, .quote__stars svg, .gscore__stars svg {
  width: 1em; height: 1em; fill: currentColor; display: block;
  /* viền tối rất nhẹ cho sao tách khỏi nền sáng, nhìn rõ hơn hẳn */
  filter: drop-shadow(0 1px 1px rgba(120,80,0,.22));
}
.quote__stars { font-size: 22px; margin-bottom: 14px; }
.gscore__stars { font-size: 19px; }
@media (min-width: 700px) { .quote__stars { font-size: 24px; } }

.quote__text { font-size: 15px; line-height: 1.62; color: var(--ink-2); margin: 0 0 18px; flex: 1; }

/* KHÁCH — ảnh đại diện + tên, ngăn với phần trích dẫn bằng một đường mảnh */
.quote__who {
  display: flex; align-items: center; gap: 12px;
  padding-top: 15px; border-top: 1px solid var(--line);
}
.quote__avatar {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  object-fit: cover; background: var(--surface-3);
  box-shadow: 0 0 0 1px var(--line), var(--sh-pill);
}
/* Chưa có ảnh thật thì hiện chữ cái đầu của tên — KHÔNG mượn ảnh người khác. */
.quote__avatar--ini {
  display: grid; place-items: center;
  font-size: 17px; font-weight: 700; letter-spacing: .02em;
  color: var(--ink-2); background: var(--surface-3);
}
.quote__id { display: flex; flex-direction: column; min-width: 0; }
.quote__name { font-size: 15px; font-weight: 600; }
.quote__meta { font-size: 13px; color: var(--muted); margin-top: 2px; }
.quote__media { aspect-ratio: 4/5; overflow: hidden; border-radius: 12px; margin-bottom: 16px; }
.quote__media img { width: 100%; height: 100%; object-fit: cover; }

.gscore {
  display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--surface-2); border-radius: var(--r-pill); padding: 14px 26px;
  transition: background .35s var(--ease), transform .35s var(--ease-out);
}
.gscore:hover { background: var(--surface-3); transform: translateY(-2px); }
.gscore__num { font-size: 32px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.gscore__txt { font-size: 14px; color: var(--muted); font-weight: 500; }

/* ---------- 16. BẢNG GIÁ ---------- */
.plans { display: grid; gap: 16px; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, 1fr); align-items: start; } }
.plan {
  background: var(--surface-2); border-radius: var(--r-card);
  padding: 28px 24px 26px; display: flex; flex-direction: column;
  transition: background .4s var(--ease), transform .4s var(--ease-out), box-shadow .4s;
}
.plan:hover { background: var(--surface-3); transform: translateY(-4px); }
.plan--hot { background: var(--ink); color: var(--on-ink); box-shadow: var(--sh-soft); }
.plan--hot:hover { background: var(--ink-soft); }
.plan--hot .plan__kicker, .plan--hot .plan__summary, .plan--hot .plan__from { color: var(--on-ink-soft); }
.plan--hot .plan__list { border-color: var(--on-ink-line); }
.plan--hot .plan__list li { color: var(--on-ink-strong); }
.plan--hot .plan__list li::before { border-color: var(--on-ink); }
.plan--hot .btn { background: var(--on-ink); color: var(--ink); }
.plan__tag {
  align-self: flex-start; background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: var(--r-pill); margin-bottom: 16px;
}
.plan__kicker { font-size: 13px; color: var(--muted); font-weight: 500; }
.plan h3 { font-size: 25px; font-weight: 700; letter-spacing: -.03em; margin: 4px 0 14px; }
.plan__price { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.plan__from { font-size: 13px; color: var(--muted); font-weight: 500; }
.plan__amount { font-size: 29px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.plan__summary { font-size: 14px; color: var(--muted); margin: 14px 0 20px; }
.plan__list { border-top: 1px solid var(--line); padding-top: 18px; margin-bottom: 22px; flex: 1; }
.plan__list li { position: relative; padding-left: 24px; margin-bottom: 10px; font-size: 14px; color: var(--ink-2); }
.plan__list li::before {
  content: ""; position: absolute; left: 3px; top: 8px;
  width: 8px; height: 5px; border-left: 1.6px solid var(--ink); border-bottom: 1.6px solid var(--ink);
  transform: rotate(-45deg);
}

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 46px 20px 0; position: relative;
  font-size: 16px; font-weight: 600; transition: color .3s;
}
.faq summary:hover { color: var(--accent); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; display: grid; place-items: center;
  background: var(--surface-2); border-radius: 50%;
  font-size: 18px; font-weight: 400; transition: transform .35s var(--ease), background .3s, color .3s;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); background: var(--ink); color: var(--on-ink); }
.faq__a { padding: 0 0 22px; color: var(--muted); max-width: 66ch; font-size: 15px; }

/* ---------- 17. FORM ---------- */
.form { display: grid; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field > label, .fieldset > legend { font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 0; }
.field .req { color: var(--accent); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 14px 18px;
  background: var(--surface-2); border: 1.5px solid transparent; border-radius: 14px;
  color: var(--ink); font-size: 16px;
  transition: border-color .3s var(--ease), background .3s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.field input::placeholder, .field textarea::placeholder { color: var(--placeholder); }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2316161A' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; background-size: 12px; padding-right: 46px;
}
.field textarea { min-height: 124px; resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); background: var(--surface); }
.field input:invalid:not(:placeholder-shown) { border-color: #D9534F; }
.field__hint { font-size: 13px; color: var(--muted); }

.fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.choices { display: grid; gap: 9px; }
@media (min-width: 620px) { .choices--3 { grid-template-columns: repeat(2, 1fr); } .choices--2 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .choices--3 { grid-template-columns: repeat(4, 1fr); } }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 52px; padding: 12px 14px;
  background: var(--surface-2); border-radius: var(--r-pill);
  font-size: 15px; cursor: pointer; font-weight: 500;
  transition: background .3s var(--ease), color .3s;
}
.choice span:hover { background: var(--surface-3); }
.choice input:checked + span { background: var(--ink); color: var(--on-ink); }
.choice input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Ô CHỌN CÓ LOGO — khảo sát "biết Seeson từ đâu".
   Logo nằm trong một đĩa TRẮNG cố định, nên khi ô được chọn (nền đen) logo
   vẫn giữ đúng màu thương hiệu. Để logo TikTok/Threads màu đen trên nền đen
   thì mất hút — đĩa trắng này chính là chỗ xử lý việc đó. */
.choices--brand { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 620px) { .choices--brand { grid-template-columns: repeat(4, 1fr); } }
.choice--brand span {
  flex-direction: column; gap: 10px;
  min-height: 104px; padding: 16px 10px;
  border-radius: var(--r-card); font-size: 14px; font-weight: 600;
}
.choice--brand .brand {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 1px var(--line), var(--sh-pill);
  transition: transform .3s var(--ease-out);
}
.choice--brand .brand svg { width: 23px; height: 23px; display: block; }
.choice--brand span:hover .brand { transform: scale(1.08); }
.choice--brand input:checked + span .brand { transform: scale(1.1); }

.form__row { display: grid; gap: 20px; }
@media (min-width: 700px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.form__promise {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--surface-2); border-radius: var(--r-card); padding: 16px 18px; font-size: 14px; color: var(--ink-2);
}
.form__note { font-size: 13px; color: var(--muted); }
.form-status { display: none; background: var(--surface-2); border-radius: var(--r-card); padding: 26px; }
.form-status.is-shown { display: block; }
.form-status h3 { font-size: 22px; font-weight: 700; letter-spacing: -.025em; margin-bottom: 10px; }

/* ---------- 18. LIÊN HỆ / FOOTER ---------- */
.contact-grid { display: grid; gap: 30px; }
@media (min-width: 860px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; } }
.contact-list { font-size: 15px; line-height: 1.9; }
.contact-list dt { font-size: 12px; font-weight: 600; color: var(--muted); margin-top: 16px; }
.contact-list dd { margin: 0; color: var(--ink); font-weight: 500; }
.contact-list dd a:hover { color: var(--accent); }
.map-frame { aspect-ratio: 4/3; border-radius: var(--r-card); overflow: hidden; background: var(--surface-2); }
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

.footer { color: var(--ink); padding: 8px 0 24px; font-size: 15px; }
.footer a:hover { color: var(--accent); }
.footer__top { display: grid; gap: 28px; padding-bottom: 26px; }
@media (min-width: 860px) { .footer__top { grid-template-columns: 1.5fr 1fr 1fr; gap: 44px; } }
.footer__logo img { height: 26px; width: auto; margin-bottom: 16px; }
.footer h4 { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 14px; }
.footer__links li { margin-bottom: 8px; }
.footer p { color: var(--ink-2); }
.footer__bottom {
  border-top: 1px solid var(--line); padding-top: 20px;
  display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between;
  font-size: 13px; color: var(--muted);
}
@media (max-width: 959px) { .footer { padding-bottom: calc(94px + var(--safe-b)); } }

/* ---------- 19. THANH CTA ĐÁY (ĐIỆN THOẠI) — viên thuốc nổi ---------- */
.dock {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + var(--safe-b)); z-index: 90;
  display: grid; grid-template-columns: 1fr 1fr 1.25fr;
  background: var(--surface); border-radius: var(--r-pill);
  box-shadow: var(--sh-panel); padding: 6px; gap: 4px;
  transform: translateY(calc(100% + 24px));
  transition: transform .45s var(--ease-out);
}
.dock.is-up { transform: none; }
.dock a {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 50px; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 600; color: var(--ink);
}
.dock a:last-child { background: var(--ink); color: var(--on-ink); }
.dock svg { width: 18px; height: 18px; }
@media (min-width: 960px) { .dock { display: none; } }

/* ---------- 20. HIỆU ỨNG ---------- */
html.js .reveal { opacity: 0; transform: translateY(24px); }
html.js .reveal.is-in { opacity: 1; transform: none; transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
html.js .reveal-d1.is-in { transition-delay: .07s; }
html.js .reveal-d2.is-in { transition-delay: .14s; }
html.js .reveal-d3.is-in { transition-delay: .21s; }
html.js .wipe { position: relative; overflow: hidden; }
html.js .wipe > * { transform: scale(1.1); transition: transform 1.2s var(--ease-out); }
html.js .wipe::after {
  content: ""; position: absolute; inset: 0; z-index: 3; background: var(--surface-2);
  transform-origin: bottom; transition: transform 1s var(--ease-out);
}
html.js .wipe.is-in > * { transform: none; }
html.js .wipe.is-in::after { transform: scaleY(0); }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; }
  html.js .wipe > * { transform: none; }
  html.js .wipe::after { display: none; }
}
.par { will-change: transform; }

/* con trỏ tùy biến */
.cursor, .cursor-dot { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 1000px) {
  html.js .cursor {
    display: block; position: fixed; top: 0; left: 0; z-index: 300;
    width: 34px; height: 34px; margin: -17px 0 0 -17px;
    border: 1.5px solid rgba(22,22,26,.32); border-radius: 50%;
    pointer-events: none; will-change: transform;
    transition: width .35s var(--ease-out), height .35s var(--ease-out),
                margin .35s var(--ease-out), background .35s var(--ease-out),
                border-color .35s var(--ease-out), opacity .3s;
  }
  html.js .cursor-dot {
    display: block; position: fixed; top: 0; left: 0; z-index: 301;
    width: 4px; height: 4px; margin: -2px 0 0 -2px;
    background: var(--ink); border-radius: 50%; pointer-events: none; will-change: transform;
  }
  .cursor.is-link { width: 62px; height: 62px; margin: -31px 0 0 -31px; border-color: var(--ink); }
  .cursor.is-media { width: 84px; height: 84px; margin: -42px 0 0 -42px; background: rgba(255,255,255,.55); border-color: transparent; }
  .cursor.is-hidden { opacity: 0; }
}

/* ---------- 21. TRANG TRONG ---------- */
.breadcrumb { font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb span { margin: 0 7px; opacity: .5; }

.page-top h1 { font-size: clamp(29px, 6.2vw, 54px); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; }

.pagehero { position: relative; }
.pagehero__body { padding: calc(var(--header-h) + 22px) 0 0; }
.pagehero__media {
  position: relative; border-radius: var(--r-card); overflow: hidden;
  aspect-ratio: 4/5; background: var(--surface-2); margin-bottom: 20px;
}
@media (min-width: 760px) { .pagehero__media { aspect-ratio: 16/9; } }
.pagehero__media picture { display: contents; }
.pagehero__media img { width: 100%; height: 100%; object-fit: cover; }
.pagehero h1 { font-size: clamp(27px, 5.8vw, 50px); font-weight: 700; letter-spacing: -.035em; line-height: 1.07; }
.pagehero__sub { margin-top: 14px; color: var(--muted); max-width: 58ch; }

.metabar { display: grid; gap: 10px; }
@media (min-width: 620px) { .metabar { grid-template-columns: repeat(4, 1fr); } }
.metabar div { background: var(--surface-2); border-radius: var(--r-card); padding: 16px 18px; }
.metabar dt { font-size: 12px; font-weight: 600; color: var(--muted); }
.metabar dd { margin: 5px 0 0; font-size: 15px; font-weight: 500; }

.prose { max-width: 66ch; }
.prose p { color: var(--ink-2); }
.prose p + p { margin-top: 1.1em; }

.strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 700px) { .strip { grid-template-columns: repeat(4, 1fr); gap: 14px; } }
.strip figure { margin: 0; overflow: hidden; border-radius: var(--r-card); }
.strip img { width: 100%; aspect-ratio: 3/4; object-fit: cover; background: var(--surface-2); transition: transform 1s var(--ease-out); }
.strip figure:hover img { transform: scale(1.05); }

/* ---------- 22. KÊNH LIÊN HỆ — ZALO & MESSENGER ----------
   Website không còn nút gọi điện; hai kênh này là đường vào chính, nên nút
   phải to và phải mang logo màu thật. Logo nằm trên một ĐĨA TRẮNG cố định:
   nút là nền đen, mà logo Zalo là chữ trắng trên xanh còn Messenger có phần
   gradient tối — bỏ đĩa trắng đi là cả hai nhoè vào nền nút. Đừng gỡ nền
   trắng của .chan__logo (cùng lý do với .choice--brand .brand). */
/* Câu "muốn được liên hệ qua" chỉ còn 2 ô (Zalo, Messenger) nên chia đôi hàng
   ở mọi khổ màn hình — dùng .choices--brand (4 cột trên desktop) thì hai ô
   co lại còn nửa hàng và trông như đang thiếu ô thứ ba, thứ tư. */
.choices--chan { grid-template-columns: repeat(2, 1fr); }

.chanbox { margin-top: 22px; }
.chanbox__title { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 12px; }
.chanbox__row { display: flex; gap: 10px; flex-wrap: wrap; }
.chanbox__note { font-size: 13px; color: var(--muted); margin-top: 12px; max-width: 44ch; }

.chan {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 50px; padding: 12px 22px 12px 12px;
  border-radius: var(--r-pill); background: var(--ink); color: var(--on-ink);
  font-size: 15px; font-weight: 600; line-height: 1;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease);
}
.chan:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -8px rgba(18,18,24,.32); color: var(--on-ink); }
.chan:active { transform: translateY(0); }
.chan--lg { min-height: 58px; font-size: 16px; padding: 14px 28px 14px 14px; }
.chan--wide { flex: 1 1 200px; justify-content: center; }
.chan__logo {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: #fff; display: grid; place-items: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.16);
  transition: transform .35s var(--ease-out);
}
.chan--lg .chan__logo { width: 36px; height: 36px; }
.chan__logo svg { width: 22px; height: 22px; display: block; }
.chan--lg .chan__logo svg { width: 25px; height: 25px; }
.chan:hover .chan__logo { transform: scale(1.08); }
/* Trên nền tối, nút đen tuyệt đối sẽ chìm vào panel — thêm một viền mảnh. */
:root[data-theme="dark"] .chan { box-shadow: inset 0 0 0 1px var(--line); }

.dock__logo {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; display: grid; place-items: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.dock__logo svg { width: 16px; height: 16px; display: block; }
.dock__ico { width: 18px; height: 18px; }
/* 4 ô (2 kênh + đặt lịch) — ô đặt lịch rộng hơn một chút vì chữ dài hơn */
.dock { grid-template-columns: 1fr 1fr 1.15fr; }
.dock a { gap: 6px; font-size: 13px; padding: 0 4px; }

/* ---------- 23. DỊCH VỤ LẺ (KHÔNG BÁO GIÁ) ---------- */
.xsvcs { display: grid; gap: 12px; }
@media (min-width: 620px) { .xsvcs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .xsvcs { grid-template-columns: repeat(3, 1fr); } }
.xsvc {
  background: var(--surface-2); border-radius: var(--r-card); padding: 24px 22px 26px;
  transition: background .4s var(--ease), transform .45s var(--ease-out);
}
.xsvc:hover { background: var(--surface-3); transform: translateY(-3px); }
.xsvc h3 { font-size: 18px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 9px; }
.xsvc p { font-size: 14px; color: var(--muted); margin: 0; }

/* ---------- 24. VÁY CƯỚI ----------
   Lưới 2 cột trên điện thoại (khác lưới bộ ảnh 1 cột): ảnh váy là ảnh toàn
   thân trên nền trơn, thu nhỏ vẫn đọc được phom dáng, mà xem catalog thì
   khách cần lướt nhanh qua nhiều mẫu chứ không dừng lại ở từng tấm. */
.dresses { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 620px) { .dresses { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
@media (min-width: 1040px) { .dresses { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.dresses--few { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 620px) { .dresses--few { grid-template-columns: repeat(2, 1fr); max-width: 640px; } }

.dress-card {
  display: block; background: var(--surface-2); border-radius: var(--r-card);
  padding: 8px 8px 13px;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease), background .4s var(--ease);
}
.dress-card:hover { transform: translateY(-6px); background: var(--surface); box-shadow: var(--sh-panel); }
.dress-card__media {
  position: relative; overflow: hidden; border-radius: 12px;
  background: var(--surface-3); aspect-ratio: 2 / 3;
}
.dress-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.dress-card:hover .dress-card__media img { transform: scale(1.05); }
.dress-card__count {
  position: absolute; right: 8px; top: 8px; z-index: 2;
  background: rgba(255,255,255,.93); color: #16161A;
  font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: var(--r-pill);
  box-shadow: var(--sh-pill);
}
.dress-card__body { padding: 12px 6px 0; }
.dress-card__code { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--muted); }
.dress-card h3 { font-size: 17px; font-weight: 600; letter-spacing: -.02em; margin: 4px 0 5px; }
.dress-card__line { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.45; }

.dress-col__vi { font-family: var(--serif); font-style: italic; font-weight: 300; color: var(--muted); }
.dress-count {
  display: inline-block; margin-top: 18px; font-size: 13px; font-weight: 600;
  color: var(--muted); background: var(--surface-2);
  padding: 8px 16px; border-radius: var(--r-pill);
}
.dress-hero__code {
  font-size: .42em; font-weight: 700; letter-spacing: .14em;
  vertical-align: middle; opacity: .72;
}

.todo-flag {
  display: inline-block; background: #FFF2C2; border: 1px dashed #C9A227;
  color: #6B5310; font-size: 12px; padding: 2px 9px; border-radius: var(--r-pill);
}
.plan__amount .todo-flag { font-size: .6em; }
.stat__num .todo-flag { font-size: .38em; vertical-align: middle; }
.plan--hot .todo-flag { background: var(--on-ink-line); border-color: var(--on-ink-soft); color: var(--on-ink); }