/* Font tự host (SIL OFL — Be Vietnam Pro, Cormorant Garamond): vietnamese · latin (bỏ latin-ext: chữ Việt đã có ở bộ vietnamese); font-display: swap.
   Thay cho fonts.googleapis.com (03/10/2026 — bỏ yêu cầu chặn hiển thị, tiết kiệm ~0,75s trên điện thoại). */
/* vietnamese */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/be-vietnam-pro-normal-vietnamese-5750ca.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/be-vietnam-pro-normal-latin-166580.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/be-vietnam-pro-normal-vietnamese-9473b8.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/be-vietnam-pro-normal-latin-885461.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/be-vietnam-pro-normal-vietnamese-0534db.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/be-vietnam-pro-normal-latin-877c60.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/be-vietnam-pro-normal-vietnamese-c000be.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/be-vietnam-pro-normal-latin-e88d42.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-italic-vietnamese-5f8136.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-italic-latin-fe99e3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-italic-vietnamese-5f8136.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-italic-latin-fe99e3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-italic-vietnamese-5f8136.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-italic-latin-fe99e3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-normal-vietnamese-7f5a19.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-normal-latin-e99b45.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-normal-vietnamese-7f5a19.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-normal-latin-e99b45.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-normal-vietnamese-7f5a19.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-normal-latin-e99b45.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-normal-vietnamese-7f5a19.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-normal-latin-e99b45.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =====================================================================
   AURA WEDDING & EVENTS — Concept "Màn Nhung Editorial"
   Giấy ngà · mực nâu · đỏ rượu vang · chỉ vàng
   ===================================================================== */

:root {
  --paper: #F4EEE4;
  --paper-2: #ECE3D5;
  --paper-3: #E1D5C1;
  --ink: #2B1B15;
  --ink-2: #5C473C;
  --ink-3: #7A665A;
  --wine: #6B1424;
  --wine-2: #86202F;
  --wine-deep: #3D0912;
  --gold: #A07C45;
  --gold-2: #C8A96F;
  --gold-3: #E2CDA2;
  --gold-ink: #7E5E2B; /* vàng đậm cho chữ trên nền giấy ngà — tương phản ≥ 4.5:1 */
  --choc: #1C110D;
  --choc-2: #2A1914;
  --err: #A1122A;
  --line: rgba(43, 27, 21, .16);
  --line-strong: rgba(43, 27, 21, .3);
  --line-light: rgba(244, 238, 228, .16);

  --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --sans: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --gutter: clamp(16px, 4vw, 56px);
  --maxw: 1440px;
  --header-h: 76px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);

  /* nếp gấp nhung NÂU SOCOLA ánh vàng (03/10/2026: bỏ nhung đỏ) — dùng cho menu, các khối nền nhung (rèm lightbox / vào trang dự án đã đổi sang --silk, vòng 4) */
  --fold: clamp(46px, 6.2vw, 108px);
  --velvet:
    linear-gradient(180deg, rgba(10, 6, 4, .58) 0%, rgba(10, 6, 4, 0) 24%, rgba(10, 6, 4, 0) 70%, rgba(10, 6, 4, .72) 100%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .26) 0, rgba(0, 0, 0, 0) calc(var(--fold) * 1.1), rgba(255, 226, 190, .05) calc(var(--fold) * 1.9), rgba(0, 0, 0, .08) calc(var(--fold) * 2.6), rgba(0, 0, 0, .26) calc(var(--fold) * 3.3)),
    repeating-linear-gradient(90deg, #160d0a 0, #241510 calc(var(--fold) * .16), #3a2419 calc(var(--fold) * .32), #5a3b28 calc(var(--fold) * .43), #6e4b33 calc(var(--fold) * .47), #4a2f20 calc(var(--fold) * .55), #2e1c14 calc(var(--fold) * .7), #1f130e calc(var(--fold) * .86), #160d0a var(--fold));

  /* lụa ngà của tiệc Ivory White — rèm kéo KHI CLICK: lightbox .lb__drape (trang chủ + trang dự án) và rèm vào trang dự án
     .pj-hero__drape. Màn intro lúc tải trang (.intro__drape) cũng dùng --silk (mọi hiệu ứng rèm là lụa ngà Ivory White).
     Nền lụa #E9DECB → #D8C6AA (dọc) · nếp champagne #C2A989 · bóng nếp #8F7659 · ánh viền #F4EEE4 — lấy mẫu từ ảnh ivory-white
     (vải #CDB9A7 / #CABBA4 / #C8B297, nếp #9D7B56): tông ấm, không trắng lạnh, không vàng chói. */
  --silk-fold: clamp(40px, 5.2vw, 92px);
  --silk-base: #E1D3BC;
  --silk:
    linear-gradient(180deg, rgba(244, 238, 228, .3) 0%, rgba(244, 238, 228, 0) 24%, rgba(143, 118, 89, 0) 70%, rgba(143, 118, 89, .24) 100%),
    repeating-linear-gradient(90deg, rgba(143, 118, 89, .16) 0, rgba(143, 118, 89, 0) calc(var(--silk-fold) * 1.1), rgba(244, 238, 228, .24) calc(var(--silk-fold) * 1.8), rgba(143, 118, 89, 0) calc(var(--silk-fold) * 2.5), rgba(143, 118, 89, .16) calc(var(--silk-fold) * 3.2)),
    repeating-linear-gradient(90deg, rgba(194, 169, 137, 0) 0, rgba(194, 169, 137, .62) calc(var(--silk-fold) * .24), rgba(143, 118, 89, .26) calc(var(--silk-fold) * .34), rgba(244, 238, 228, .55) calc(var(--silk-fold) * .5), rgba(194, 169, 137, 0) calc(var(--silk-fold) * .66), rgba(194, 169, 137, .4) calc(var(--silk-fold) * .86), rgba(194, 169, 137, 0) var(--silk-fold)),
    linear-gradient(180deg, #E9DECB 0%, #D8C6AA 100%);
  --silk-shade: rgba(143, 118, 89, .42); /* bóng nếp ở mép hai tấm rèm gặp nhau — nhẹ, ấm (nhung dùng rgba(0,0,0,.55)) */
}

/* ---------------- Base ---------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color-scheme: light; background: var(--paper); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
/* <picture> (WebP + JPEG srcset) không tạo hộp riêng → <img> bên trong giữ nguyên bố cục như khi là con trực tiếp của khung */
picture { display: contents; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
address { font-style: normal; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
::selection { background: var(--wine); color: var(--paper); }

:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; }
[data-theme="dark"] :focus-visible, .lb :focus-visible, .menu :focus-visible, .intro :focus-visible { outline-color: var(--gold-2); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 16px; top: -80px; z-index: 400;
  background: var(--ink); color: var(--paper); padding: 12px 18px; font-size: 14px;
  transition: top .3s;
}
.skip-link:focus { top: 16px; }
/* đích của liên kết neo nhận focus bằng script — không vẽ viền quanh cả khối */
#main:focus, section[tabindex="-1"]:focus { outline: none; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* hạt giấy rất nhẹ (desktop) */
@media (min-width: 900px) {
  body::after {
    content: ""; position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: .05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .1 0 0 0 0 .08 0 0 0 1.2 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  }
}

/* ---------------- Typography ---------------- */
.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--sans); font-size: 11px; font-weight: 500; line-height: 1.5;
  letter-spacing: .24em; text-transform: uppercase; color: var(--ink-2);
}
.eyebrow--rule::before { content: ""; width: 36px; height: 1px; background: var(--gold); flex: none; }
.eyebrow--gold { color: var(--gold-2); }
.num { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 16px; letter-spacing: .02em; text-transform: none; color: var(--gold-ink); }
.eyebrow--gold .num, [data-theme="dark"] .num { color: var(--gold-2); }

.h-display {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.5rem, 5.4vw, 5.6rem); line-height: 1.04; letter-spacing: -.012em;
}
.h-display em, .statement em, .hero__title em { font-style: italic; font-weight: 400; color: var(--wine); }
/* tiêu đề ngắt dòng cân đối — tránh một chữ mồ côi ở dòng cuối (vd. "xúc." trên mobile) */
.h-display, .hero__title, .col-cap__name, .qdone__title { text-wrap: balance; }
.statement, .about__text p, .collections__intro, .folio__lede, .services__lede, .contact__lede { text-wrap: pretty; }
[data-theme="dark"] .h-display em { color: var(--gold-2); }

/* split-line reveal */
.sl { display: block; overflow: hidden; padding: .16em .06em .1em; margin: -.16em -.06em -.1em; }
.sli { display: block; will-change: transform; }
.split-pending { opacity: 0; }
html.hero-pending .hero__title,
html.hero-pending [data-hero-fade],
html.hero-pending .hero__stage { opacity: 0; }
/* mở trang "Lắng đọng": ảnh nền chờ ở độ sáng thấp rồi main.js đưa lên 1 (không JS → script <head> gỡ hero-pending sau 3.6s) */
html.hero-pending .hero__bgimg { opacity: .35; }

/* ---------------- Buttons & links ---------------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 30px; border-radius: 999px;
  font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; line-height: 1.2;
  white-space: nowrap; transition: color .5s var(--ease-out), border-color .5s, background-color .5s;
}
.btn > span { position: relative; z-index: 1; }
.btn::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: 0;
  transform: translateY(102%); transition: transform .65s var(--ease-out);
}
.btn:hover::before, .btn:focus-visible::before { transform: none; }
/* 03/10/2026: bỏ nút đỏ rượu vang → nâu socola viền vàng đồng, rê chuột phủ vàng (cặp với nút nổi "Nhận báo giá") */
.btn--choc { background: var(--choc); color: var(--paper); box-shadow: inset 0 0 0 1px rgba(200, 169, 111, .7); }
.btn--choc::before { background: var(--gold-2); }
.btn--choc:hover, .btn--choc:focus-visible { color: var(--choc); }
.btn--line { border: 1px solid currentColor; min-height: 44px; padding: 0 22px; font-size: 11.5px; }
.btn--line::before { background: var(--ink); }
.btn--line:hover, .btn--line:focus-visible { color: var(--paper); border-color: var(--ink); }
.btn--gold { background: var(--gold-2); color: var(--choc); }
.btn--gold::before { background: var(--paper); }

.link-arrow {
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 2px; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
}
.link-arrow::after {
  content: ""; position: absolute; left: 2px; right: 2px; bottom: 8px; height: 1px; background: currentColor;
  transform-origin: left; transition: transform .6s var(--ease-out);
}
.link-arrow:hover::after { transform: scaleX(0); transform-origin: right; }
.link-arrow svg { transition: transform .5s var(--ease-out); }
.link-arrow:hover svg { transform: translateX(5px); }

.icon-btn {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  display: inline-grid; place-items: center;
  border: 1px solid rgba(244, 238, 228, .32); color: var(--paper);
  transition: background-color .4s, color .4s, border-color .4s;
}
.icon-btn:hover { background: var(--paper); color: var(--choc); border-color: var(--paper); }

/* ---------------- Intro: rèm lụa ngà (Ivory White) ---------------- */
.intro { position: fixed; inset: 0; z-index: 300; display: none; overflow: hidden; }
html.intro-on .intro { display: block; }
html.intro-on body { overflow: hidden; }
.intro__drape {
  position: absolute; top: 0; bottom: 0; width: calc(50% + 2px);
  background: var(--silk); background-color: var(--silk-base);
  will-change: transform;
}
.intro__drape--l { left: 0; transform-origin: 0 0; box-shadow: inset -40px 0 50px -30px var(--silk-shade); }
.intro__drape--r { right: 0; transform-origin: 100% 0; box-shadow: inset 40px 0 50px -30px var(--silk-shade); }
.intro__light {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(55% 60% at 50% 8%, rgba(255, 250, 240, .38), transparent 70%);
}
.intro__valance { position: absolute; left: 0; right: 0; top: 0; height: clamp(70px, 15vh, 150px); will-change: transform; filter: drop-shadow(0 10px 18px rgba(143, 118, 89, .32)); }
.intro__valance svg { width: 100%; height: 100%; display: block; }
.intro__mark {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  color: var(--ink-2); text-align: center; pointer-events: none;
}
/* logo PNG 371×160 (logo-ink trên rèm lụa ngà): ≤ 240px rộng để còn nét trên màn 2× */
.intro__logo { width: clamp(168px, 17vw, 240px); height: auto; filter: drop-shadow(0 4px 18px rgba(244, 238, 228, .7)); }
.intro__skip {
  position: absolute; right: var(--gutter); bottom: max(24px, env(safe-area-inset-bottom));
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-2);
  padding: 12px 4px; border-bottom: 1px solid rgba(143, 118, 89, .55);
}

/* ---------------- Header ---------------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--header-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  padding-inline: var(--gutter); color: var(--ink);
  transition: transform .7s var(--ease-out), color .4s;
}
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: rgba(244, 238, 228, .86);
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid var(--line);
  transition: opacity .4s, background-color .4s;
}
.site-header.is-scrolled::before { opacity: 1; }
html:not(.js) .site-header::before { opacity: 1; }
.site-header.on-dark { color: var(--paper); }
.site-header.on-dark::before { background: rgba(28, 17, 13, .78); border-color: var(--line-light); }
.site-header.on-dark .btn--line::before { background: var(--paper); }
.site-header.on-dark .btn--line:hover { color: var(--choc); border-color: var(--paper); }
/* viền focus bàn phím: vàng trên header tối (đỏ rượu gần như không thấy trên ảnh tối) */
.site-header.on-dark :focus-visible, html.menu-open .site-header :focus-visible { outline-color: var(--gold-2); }
.site-header.is-hidden { transform: translateY(-105%); }
.site-header.is-hidden:focus-within { transform: none; }
html.menu-open .site-header { color: var(--paper); transform: none; }
html.menu-open .site-header::before { opacity: 0; }

/* Logo PNG 371×160: cao 44px máy tính / 34px điện thoại → rộng ≤ 102px (nét ở màn 2×).
   Header: logo-ink trên nền sáng; .on-dark (vùng tối / ảnh dưới header) hoặc menu mở → logo-paper (hai ảnh chồng nhau, đổi bằng opacity). */
.brand { justify-self: start; display: inline-grid; line-height: 0; padding: 4px 0; }
.brand__logo { grid-area: 1 / 1; display: block; width: auto; height: 44px; max-width: none; }
.site-header .brand__logo { transition: opacity .4s; }
.site-header .brand__logo--paper,
.site-header.on-dark .brand__logo--ink,
html.menu-open .site-header .brand__logo--ink { opacity: 0; }
.site-header.on-dark .brand__logo--paper,
html.menu-open .site-header .brand__logo--paper { opacity: 1; }
.nav ul { display: flex; gap: clamp(18px, 2.1vw, 34px); list-style: none; margin: 0; padding: 0; }
.nav a { position: relative; display: block; padding: 8px 0; font-size: 13px; font-weight: 400; letter-spacing: .06em; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease-out);
}
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.header__end { justify-self: end; display: flex; align-items: center; gap: 22px; }
.header__phone { font-size: 13px; letter-spacing: .05em; white-space: nowrap; }
.burger { display: none; position: relative; width: 44px; height: 44px; margin-right: -8px; }
.burger span { position: absolute; left: 10px; right: 10px; height: 1.5px; background: currentColor; transition: transform .5s var(--ease-out), top .5s var(--ease-out); }
.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 26px; }
html.menu-open .burger span:nth-child(1) { top: 21px; transform: rotate(45deg); }
html.menu-open .burger span:nth-child(2) { top: 21px; transform: rotate(-45deg); }

/* Chuyển ngôn ngữ VI · EN — nhỏ, chữ hoa giãn; ngôn ngữ đang xem gạch chân mảnh, ngôn ngữ kia mờ (rê/chạm → rõ) */
.lang-switch { display: inline-flex; align-items: center; gap: .5em; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .16em; line-height: 1; white-space: nowrap; }
.lang-switch a, .lang-switch [aria-current] { display: inline-block; padding: 8px 1px 6px; }
.lang-switch a { color: inherit; text-decoration: none; opacity: .55; transition: opacity .3s; }
.lang-switch a:hover, .lang-switch a:focus-visible { opacity: 1; }
.lang-switch a:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
.lang-switch [aria-current="true"] { box-shadow: inset 0 -1px 0 currentColor; }
.lang-switch__sep { opacity: .4; }
.lang-switch--menu { font-size: 12px; }

@media (max-width: 1366px) { .header__phone { display: none; } }
@media (max-width: 1023px) {
  .site-header { grid-template-columns: 1fr auto; }
  .nav { display: none; }
  .burger { display: block; }
}
@media (max-width: 640px) {
  :root { --header-h: 66px; }
  .header__cta { display: none; }
  .brand__logo { height: 34px; }
}

/* ---------------- Menu di động ---------------- */
.menu {
  position: fixed; inset: 0; z-index: 95;
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  padding: calc(var(--header-h) + 28px) var(--gutter) max(28px, env(safe-area-inset-bottom));
  color: var(--paper); background: var(--choc); /* nền màu trơn (03/10/2026: bỏ nền rèm) */
  overflow-y: auto; overscroll-behavior: contain;
  visibility: hidden; clip-path: inset(0 0 100% 0);
  transition: clip-path .85s var(--ease-io), visibility 0s linear .85s;
}
html.menu-open .menu { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path .85s var(--ease-io), visibility 0s; }
.menu__list { list-style: none; margin: 0; padding: 0; }
.menu__list li { border-bottom: 1px solid rgba(226, 205, 162, .2); overflow: hidden; }
.menu__list a {
  display: flex; align-items: baseline; gap: 16px; padding: 12px 0;
  font-family: var(--serif); font-weight: 300; font-size: clamp(2.1rem, 9vw, 3.4rem); line-height: 1.1;
  transform: translateY(105%); transition: transform .8s var(--ease-out);
}
.menu__list small { font-family: var(--sans); font-size: 11px; letter-spacing: .2em; color: var(--gold-2); }
html.menu-open .menu__list a { transform: none; }
html.menu-open .menu__list li:nth-child(1) a { transition-delay: .25s; }
html.menu-open .menu__list li:nth-child(2) a { transition-delay: .3s; }
html.menu-open .menu__list li:nth-child(3) a { transition-delay: .35s; }
html.menu-open .menu__list li:nth-child(4) a { transition-delay: .4s; }
html.menu-open .menu__list li:nth-child(5) a { transition-delay: .45s; }
html.menu-open .menu__list li:nth-child(6) a { transition-delay: .5s; }
html.menu-open .menu__list li:nth-child(7) a { transition-delay: .55s; }
html.menu-open .menu__list li:nth-child(8) a { transition-delay: .6s; }
.menu__foot { display: flex; flex-direction: column; gap: 14px; font-size: 14px; }
.menu__phone { font-family: var(--serif); font-size: 1.6rem; color: var(--gold-3); }
.menu__social { display: flex; gap: 22px; flex-wrap: wrap; letter-spacing: .14em; text-transform: uppercase; font-size: 11px; }

/* ---------------- Hero: ảnh nền toàn cảnh Heart Of Us ----------------
   Lớp (dưới → trên): .hero__bg (ảnh LCP — Ken Burns rất chậm + parallax khi cuộn, main.js; tắt khi giảm chuyển động)
   · .hero__veil (phủ nâu socola / rượu vang ấm: đậm ở mép trên cho header, nhẹ ở giữa cho sân khấu + đèn chùm,
   đậm dần xuống phần sàn để dải ảnh 3D nổi lên) · chữ ngà · .hero__stage (dải ảnh 3D).
   Tương phản (đo 03/10/2026 ở 1440 · 1024 · 768 · 390): chữ nhỏ (eyebrow, lede) ≥ 4.5:1, tiêu đề ≥ 3:1 trên vùng sáng nhất phía sau. */
.hero {
  position: relative; isolation: isolate; overflow: hidden; overflow: clip;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  padding-top: calc(var(--header-h) + clamp(10px, 2.6vh, 34px));
  background: var(--choc); color: var(--paper);
}
/* Ảnh nền dừng ở 92% chiều cao hero và mờ dần vào nền nâu (mask) — phần sàn dưới dải ảnh vốn đã gần đen.
   Lý do kỹ thuật: Chrome KHÔNG tính phần tử phủ kín đúng bằng khung nhìn là ứng viên LCP ("coi như nền") →
   ảnh phủ trọn 100% thì LCP rơi về chữ tiêu đề. Chừa 8% dưới đáy → ảnh nền là LCP (đo 03/10/2026: 1440 · 390). */
.hero__bg {
  position: absolute; inset: 0 0 8% 0; z-index: -2; overflow: hidden; background: var(--choc-2);
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent);
}
.hero__bgimg { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; transform-origin: 50% 36%; }
/* khung đầu của Ken Burns (main.js thu về ~1.02 rồi trôi rất chậm) — không JS / không GSAP / giảm chuyển động: ảnh đứng yên */
html.js:not(.reduce-motion):not(.no-gsap) .hero__bgimg { transform: scale(1.1); will-change: transform; }
.hero__veil {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(66% 40% at 50% 33%, rgba(22, 11, 9, .54), rgba(22, 11, 9, 0) 76%),
    linear-gradient(90deg, rgba(38, 8, 15, .6) 0%, rgba(38, 8, 15, .2) 22%, rgba(38, 8, 15, 0) 40%, rgba(38, 8, 15, 0) 60%, rgba(38, 8, 15, .2) 78%, rgba(38, 8, 15, .6) 100%),
    linear-gradient(180deg, rgba(18, 9, 7, .8) 0%, rgba(22, 11, 9, .42) 15%, rgba(28, 15, 12, .3) 34%, rgba(28, 14, 12, .44) 54%, rgba(20, 9, 8, .8) 76%, rgba(16, 8, 7, .94) 100%);
}
/* điện thoại / máy tính bảng dọc: chữ xếp giữa, đè lên cô dâu (váy trắng) ở tâm ảnh → phủ giữa đậm hơn */
@media (max-width: 900px) {
  .hero__veil {
    background:
      radial-gradient(80% 36% at 50% 42%, rgba(22, 11, 9, .5), rgba(22, 11, 9, 0) 74%),
      linear-gradient(180deg, rgba(18, 9, 7, .82) 0%, rgba(22, 11, 9, .55) 14%, rgba(26, 13, 11, .52) 34%, rgba(26, 12, 11, .6) 52%, rgba(20, 9, 8, .84) 72%, rgba(16, 8, 7, .95) 100%);
  }
}
/* cuộn rời hero: phủ thêm nâu socola (main.js tăng --hero-shade 0 → .55) */
.hero__veil::after { content: ""; position: absolute; inset: 0; background: var(--choc); opacity: var(--hero-shade, 0); }

.hero__copy { position: relative; z-index: 1; }
.hero__meta { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
/* dòng định vị dài ("… bằng vải và các chất liệu riêng biệt") xuống dòng thay vì tràn ngang */
.hero__meta .eyebrow { white-space: normal; max-width: 46ch; line-height: 1.5; text-wrap: balance; }
@media (min-width: 900px) { .hero__meta .eyebrow { max-width: none; } }
.hero .eyebrow { color: rgba(244, 238, 228, .88); }
.hero .eyebrow--rule::before { background: var(--gold-2); }
.hero .hero__loc { color: var(--gold-3); }
.hero__title {
  margin-top: clamp(14px, 3vh, 40px);
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.7rem, 7.1vw, 8.6rem); line-height: 1.02; letter-spacing: -.018em;
  text-align: center; color: var(--paper);
  text-shadow: 0 2px 36px rgba(16, 8, 7, .55);
}
.hero__title em { color: var(--gold-3); }
.br-md { display: none; }
@media (min-width: 768px) { .br-md { display: inline; } }
.hero__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; margin-top: clamp(16px, 3vh, 38px); }
.hero__lede { max-width: 36ch; font-size: 15px; line-height: 1.7; color: rgba(244, 238, 228, .9); text-shadow: 0 1px 16px rgba(16, 8, 7, .7); }
.hero__ctas { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.hero .link-arrow { color: var(--paper); }
.hero .btn--gold { box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7); }
/* ghi chú ảnh nền (chữ dọc, mép phải — chỉ màn rộng): "Heart Of Us · La Vela Saigon Hotel" → trang dự án.
   Nằm trong .hero__copy (top/bottom: 0) → luôn ở giữa chiều cao khối chữ, không chạm dải ảnh 3D phía dưới. */
.hero__credit {
  position: absolute; z-index: 2; top: 0; bottom: 0; right: max(6px, calc(var(--gutter) / 2 - 10px));
  display: flex; align-items: center; pointer-events: none;
  font-size: 10px; font-weight: 500; line-height: 1.6; letter-spacing: .24em; text-transform: uppercase; white-space: nowrap;
  color: rgba(226, 205, 162, .8);
}
.hero__credit-t { writing-mode: vertical-rl; transform: rotate(180deg); padding: 4px 2px; pointer-events: auto; transition: color .3s; }
.hero__credit-t::before { content: ""; display: inline-block; width: 1px; height: 26px; margin-bottom: 12px; background: var(--gold-2); vertical-align: middle; }
.hero__credit:hover, .hero__credit:focus-visible { color: var(--paper); }
@media (max-width: 1099px), (max-height: 620px) { .hero__credit { display: none; } }
.hero__stage {
  position: relative; flex: 1 1 auto;
  min-height: clamp(220px, 38vh, 480px);
  margin-top: clamp(16px, 3.2vh, 38px); /* khoảng thở chữ ↔ dải ảnh: thẻ ở hai mép cong về phía người xem (to hơn) vẫn cách lede / CTA ≥ 16px */
  perspective: 1100px; perspective-origin: 50% 42%;
  touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none;
}
.hero__stage.is-dragging { cursor: grabbing; }
.strip { position: absolute; inset: 0; transform-style: preserve-3d; }
.strip__card {
  position: absolute; left: 50%; top: 50%; width: 200px; height: 260px;
  overflow: hidden; background: var(--choc-2);
  box-shadow: 0 40px 70px -34px rgba(0, 0, 0, .8);
  backface-visibility: hidden; will-change: transform;
}
/* viền chỉ vàng rất mảnh — thẻ tách khỏi nền ảnh tối */
.strip__card::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(226, 205, 162, .16); }
.strip__card { display: block; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent; }
.strip__card img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.strip__card.is-off { visibility: hidden; }
.strip__card:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 4px; }
/* chú thích thẻ (tên dự án + hạng mục): góc dưới trái trên dải gradient 0 → .55 — máy tính: hiện khi rê chuột / focus */
.strip__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none;
  display: flex; flex-direction: column; gap: 2px; padding: 46px 16px 14px;
  background: linear-gradient(180deg, rgba(28, 17, 13, 0), rgba(28, 17, 13, .55));
  color: var(--paper); line-height: 1.25; text-align: left;
  opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease-out), transform .6s var(--ease-out);
}
.strip__cap b { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: clamp(15px, 1.25vw, 20px); }
.strip__cap small { font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-3); }
.strip__card:hover .strip__cap, .strip__card:focus-visible .strip__cap { opacity: 1; transform: none; }
/* ≤ 1023px / màn cảm ứng: chú thích luôn hiện, chữ 11px */
@media (max-width: 1023px), (hover: none) {
  .strip__cap { opacity: 1; transform: none; padding: 30px 10px 8px; }
  .strip__cap b { font-size: 13px; }
  .strip__cap small { font-size: 11px; letter-spacing: .1em; }
}

@media (max-width: 900px) {
  .hero__row { flex-direction: column; align-items: center; text-align: center; gap: 16px; }
  .hero__ctas { justify-content: center; gap: 18px; }
}
@media (max-width: 767px) {
  .hero__meta { justify-content: center; }
  .hero__loc { display: none; }
  .hero__lede { font-size: 14.5px; }
}

/* ---------------- Marquee ---------------- */
.marquee { overflow: hidden; white-space: nowrap; border-block: 1px solid var(--line); padding: clamp(12px, 1.6vw, 20px) 0; }
.marquee__track { display: inline-flex; animation: marquee 46s linear infinite; will-change: transform; }
.marquee__track > span {
  display: inline-flex; align-items: center; gap: .9em; padding-right: .9em;
  font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.5rem, 3vw, 2.7rem); line-height: 1.2; color: var(--ink);
}
.dia { display: inline-block; width: .2em; height: .2em; background: var(--gold); transform: rotate(45deg); }
.marquee.is-paused .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------------- Về Aura ---------------- */
.about { padding-block: clamp(90px, 13vw, 190px) clamp(90px, 11vw, 160px); }
.about__head { display: grid; grid-template-columns: minmax(150px, 1fr) 3.4fr; gap: clamp(20px, 4vw, 60px); align-items: start; }
.about__head .eyebrow { padding-top: .9em; }
.statement { font-family: var(--serif); font-weight: 300; font-size: clamp(1.9rem, 4vw, 4.15rem); line-height: 1.16; letter-spacing: -.006em; }
.statement .wd { transition: none; }
.about__body { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(36px, 7vw, 120px); align-items: center; margin-top: clamp(64px, 9vw, 130px); }
.about__media { position: relative; padding-bottom: 16%; }
.about__big { position: relative; width: 86%; aspect-ratio: 5 / 4; overflow: hidden; background: var(--paper-3); }
.about__big img, [data-parallax] img { position: absolute; left: 0; top: -9%; width: 100%; height: 118%; object-fit: cover; }
.about__small {
  position: absolute; right: 0; bottom: 0; width: 40%; aspect-ratio: 2 / 3; overflow: hidden;
  border: clamp(6px, .8vw, 12px) solid var(--paper); background: var(--paper-3);
  box-shadow: 0 40px 70px -40px rgba(43, 27, 21, .6);
}
.about__small img { width: 100%; height: 100%; object-fit: cover; }
.about__text p { max-width: 46ch; color: var(--ink-2); font-size: 16.5px; }
.about__text p + p { margin-top: 1.2em; }
.about__text p:first-child { font-family: var(--serif); font-size: clamp(1.35rem, 1.9vw, 1.7rem); line-height: 1.45; color: var(--ink); font-weight: 400; }
.about__text p:first-child::before { content: ""; display: block; width: 44px; height: 1px; background: var(--gold); margin-bottom: 22px; }
.about__sign { font-family: var(--serif); font-style: italic; font-size: 1.25rem !important; color: var(--gold-ink) !important; }

.pillars {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 48px);
  margin-top: clamp(80px, 11vw, 160px); padding-top: clamp(28px, 3vw, 44px); border-top: 1px solid var(--line);
}
.pillar:nth-child(2) { margin-top: clamp(0px, 5vw, 80px); }
.pillar:nth-child(3) { margin-top: clamp(0px, 2.5vw, 40px); }
.pillar__fig { position: relative; aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: 22px; background: var(--paper-3); transform-style: preserve-3d; }
.pillar__fig img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.pillar:hover .pillar__fig img { transform: scale(1.04); }
.pillar__num { font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--gold-ink); }
.pillar h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 2.3vw, 2.2rem); line-height: 1.15; margin: 4px 0 10px; }
.pillar p { color: var(--ink-2); font-size: 15px; max-width: 34ch; }

.glare {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), rgba(255, 246, 230, .32), rgba(255, 246, 230, 0) 55%);
}
[data-tilt]:hover .glare { opacity: 1; }

@media (max-width: 900px) {
  .about__head { grid-template-columns: 1fr; }
  .about__head .eyebrow { padding-top: 0; }
  .about__body { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr; gap: 56px; }
  .pillar:nth-child(n) { margin-top: 0; }
  .pillar__fig { aspect-ratio: 4 / 3.6; }
}

/* ---------------- Bộ sưu tập (ring 3D) ---------------- */
.collections {
  position: relative; isolation: isolate; overflow: hidden; overflow: clip;
  color: var(--paper);
  background: radial-gradient(120% 70% at 50% 0%, #3f141a 0%, #26110f 46%, #160b09 100%);
  padding-block: clamp(96px, 12vw, 170px) clamp(90px, 10vw, 150px);
}
.collections::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 60%; z-index: -1; opacity: .55;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .26) 0, rgba(255, 210, 200, .04) clamp(18px, 2.2vw, 36px), rgba(0, 0, 0, .2) clamp(40px, 4.6vw, 76px));
  -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent);
}
.collections__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.collections__head .h-display { max-width: 14em; }
.collections__intro { max-width: 54ch; color: rgba(244, 238, 228, .74); font-size: 15.5px; }
/* brand message "Mỗi concept, một câu chuyện." — dòng phụ giữa hai sợi chỉ vàng */
.collections__motto {
  display: flex; align-items: center; justify-content: center; gap: clamp(10px, 1.6vw, 16px); max-width: 100%;
  font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.2rem, 1.9vw, 1.6rem); line-height: 1.3; color: var(--gold-3);
}
.collections__motto::before, .collections__motto::after { content: ""; flex: none; width: clamp(18px, 4vw, 44px); height: 1px; background: var(--gold-2); opacity: .75; }
.collections__motto span { min-width: 0; text-wrap: balance; }
.col-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px clamp(14px, 3vw, 40px); margin-top: 18px; }
.col-tab {
  position: relative; display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 2px;
  font-family: var(--serif); font-size: clamp(1.1rem, 1.6vw, 1.4rem); color: rgba(244, 238, 228, .55); transition: color .4s;
}
.col-tab small { font-family: var(--sans); font-size: 10px; letter-spacing: .2em; color: var(--gold-2); }
.col-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--gold-2); transform: scaleX(0); transition: transform .6s var(--ease-out); }
.col-tab:hover { color: var(--paper); }
.col-tab[aria-pressed="true"] { color: var(--paper); }
.col-tab[aria-pressed="true"]::after { transform: scaleX(1); }

.ring-wrap { position: relative; height: clamp(400px, 66vh, 680px); margin-top: clamp(4px, 1.5vw, 20px); }
.ring-stage {
  position: absolute; inset: 0; perspective: 1500px; perspective-origin: 50% 28%;
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; outline: none;
}
.ring-stage:focus-visible { outline: 1px solid var(--gold-2); outline-offset: -14px; }
.ring-stage.is-dragging { cursor: grabbing; }
.ring { position: absolute; left: 50%; top: 47%; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }
.ring__panel {
  --pw: clamp(140px, 16.5vw, 264px);
  position: absolute; left: calc(var(--pw) * -.5); top: calc(var(--pw) * -.7);
  width: var(--pw); height: calc(var(--pw) * 1.4);
  overflow: hidden; background: #2a1612; cursor: inherit;
  box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .9);
}
.ring__panel img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.ring__panel::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(226, 205, 162, .32); pointer-events: none; }
.ring__shade { position: absolute; inset: 0; background: #0e0605; opacity: 0; pointer-events: none; }
.ring__cap {
  position: absolute; left: 16px; bottom: 14px; font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--paper); text-shadow: 0 1px 10px rgba(0, 0, 0, .7);
}
.ring-floor {
  position: absolute; left: 50%; bottom: 4%; width: min(1100px, 120vw); height: 26%; transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(200, 169, 111, .2), rgba(200, 169, 111, 0) 70%);
  pointer-events: none; z-index: -1;
}
.ring-hint {
  position: absolute; left: 0; right: 0; bottom: 0; text-align: center;
  font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: rgba(244, 238, 228, .5);
}

.col-cap {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: end;
  margin-top: clamp(28px, 4vw, 56px); padding-top: clamp(24px, 3vw, 40px); border-top: 1px solid var(--line-light);
}
.col-cap__index { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--gold-2); }
.col-cap__name { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: clamp(2.7rem, 6.6vw, 6.8rem); line-height: 1; margin-top: 6px; color: var(--paper); }
.col-cap__desc { font-size: 15.5px; color: rgba(244, 238, 228, .78); max-width: 46ch; }
.col-cap__meta { margin: 12px 0 26px; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-2); }
.col-cap__actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.col-cap__more { color: var(--gold-3); }
.col-cap__more[hidden] { display: none; }
.col-cap__more:hover, .col-cap__more:focus-visible { color: var(--paper); }
.ring-ctrl { display: flex; gap: 10px; }

@media (max-width: 900px) {
  .col-cap { grid-template-columns: 1fr; gap: 18px; }
  .ring-wrap { height: clamp(380px, 62vh, 520px); }
}

/* ---------------- Bộ sưu tập — HÀNH LANG ÁNH NẾN (WebGL · assets/js/corridor.js · port concept 02) ----------------
   Chỉ áp dụng khi corridor.js thêm html.has-corridor (máy đủ mạnh, có WebGL, không giảm chuyển động).
   Hành lang = khối cao (--corridor-h, JS tính theo số ảnh) + sân khấu dính (sticky) 1 màn hình: cuộn → camera bay.
   Không bật / lỗi → .corridor[hidden], mọi thứ dưới đây không có hiệu lực, vòng xoay 3D phía trên giữ nguyên. */
.corridor[hidden] { display: none; }
.corridor { position: relative; height: var(--corridor-h, 800vh); background: var(--choc); }
.corridor__stage {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  overflow: hidden; isolation: isolate; color: var(--paper);
  /* "poster" trong lúc Three.js đang tải: lối đi tối, hai vách nhung, quầng nến ở cuối */
  background:
    radial-gradient(34% 30% at 50% 50%, rgba(200, 169, 111, .16), rgba(200, 169, 111, 0) 72%),
    linear-gradient(90deg, var(--choc-2) 0%, rgba(42, 25, 20, 0) 26%, rgba(42, 25, 20, 0) 74%, var(--choc-2) 100%),
    var(--choc);
}
.corridor__gl { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.4s var(--ease-out); }
html.corridor-ready .corridor__gl { opacity: 1; }
.corridor__shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(28, 17, 13, 0) 48%, rgba(28, 17, 13, .7) 100%),
    linear-gradient(180deg, rgba(28, 17, 13, .5) 0%, rgba(28, 17, 13, 0) 20%, rgba(28, 17, 13, 0) 62%, rgba(28, 17, 13, .78) 100%);
}

/* tiêu đề mục (02) đặt trên lối vào hành lang — thấy trước khi hành trình bắt đầu, trôi lên khi bước vào */
html.has-corridor .collections { padding-block: 0; overflow: visible; background: var(--choc); }
html.has-corridor .collections::before { display: none; }
html.has-corridor .collections__head {
  position: absolute; z-index: 4; top: 0; left: 0; right: 0;
  min-height: 100vh; min-height: 100svh; justify-content: center;
  padding-block: calc(var(--header-h) + 20px) 120px;
  pointer-events: none;
}
html.has-corridor .collections__head a, html.has-corridor .collections__head button { pointer-events: auto; }
html.has-corridor .collections__head::before {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; pointer-events: none;
  width: min(1100px, 100%); height: min(720px, 86%); transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(28, 17, 13, .8), rgba(28, 17, 13, .46) 55%, rgba(28, 17, 13, 0));
}
/* hàng tab 01·02·03 nằm ngay trên lối nến → nền tối riêng + chữ rõ hơn để ngọn nến không "xuyên" qua chữ */
html.has-corridor .col-tabs { position: relative; }
html.has-corridor .col-tabs::before {
  content: ""; position: absolute; top: -22px; bottom: -22px; left: 50%; z-index: -1; pointer-events: none;
  width: min(calc(100% + 96px), 100vw); transform: translateX(-50%);   /* không tràn ngang trên điện thoại */
  background: radial-gradient(closest-side, rgba(28, 17, 13, .82), rgba(28, 17, 13, .5) 62%, rgba(28, 17, 13, 0));
}
html.has-corridor .col-tab { color: rgba(244, 238, 228, .74); text-shadow: 0 1px 2px rgba(28, 17, 13, .9), 0 0 14px rgba(28, 17, 13, .85); }
html.has-corridor .col-tab:hover, html.has-corridor .col-tab[aria-pressed="true"] { color: var(--paper); }
html.has-corridor .ring-wrap, html.has-corridor .col-cap-wrap { display: none; }

/* tên bộ sưu tập hiện lên khi camera đi qua từng nhóm ảnh */
.ctitle {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--header-h) var(--gutter) 96px; text-align: center;
  opacity: 0; visibility: hidden; pointer-events: none; will-change: opacity, transform;
}
.ctitle::before {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; pointer-events: none;
  width: min(1100px, 110%); height: min(600px, 78%); transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(28, 17, 13, .8), rgba(28, 17, 13, .46) 58%, rgba(28, 17, 13, 0));
}
.ctitle__kicker {
  display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px;
  font-size: 11px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-2);
}
.ctitle__kicker span { font-family: var(--serif); font-style: italic; font-size: 16px; letter-spacing: .02em; text-transform: none; color: var(--gold-3); }
.ctitle__name {
  font-family: var(--serif); font-weight: 300; font-size: clamp(3.6rem, 12.5vw, 14rem);
  line-height: .9; letter-spacing: -.025em; white-space: nowrap; color: var(--paper);
  text-shadow: 0 6px 60px rgba(0, 0, 0, .55);
}
.ctitle__name em { font-style: italic; font-weight: 400; color: var(--gold-2); }
.ctitle__desc {
  margin-top: 22px; font-size: 14px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: rgba(244, 238, 228, .86);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8), 0 1px 18px rgba(0, 0, 0, .85);
}
.ctitle__open { margin-top: 30px; color: var(--paper); background: rgba(28, 17, 13, .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ctitle__open::before { background: var(--gold-2); }
.ctitle__open:hover, .ctitle__open:focus-visible { color: var(--choc); border-color: var(--gold-2); }
/* "Câu chuyện đầy đủ" → trang dự án (corridor.js quản lý tabIndex / pointer-events như nút "Xem bộ sưu tập") */
.ctitle__more { margin-top: 10px; color: var(--gold-3); text-shadow: 0 1px 2px rgba(0, 0, 0, .8), 0 1px 14px rgba(0, 0, 0, .8); }
.ctitle__more:hover, .ctitle__more:focus-visible { color: var(--paper); }

/* lời kết + gợi ý cuộn */
.corridor__outro { position: absolute; z-index: 3; left: 0; right: 0; bottom: 20vh; padding: 0 var(--gutter); text-align: center; opacity: 0; pointer-events: none; }
.corridor__outro::before {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: min(1000px, 100%); height: 220%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(28, 17, 13, .62), rgba(28, 17, 13, 0));
}
.corridor__outro p {
  font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 4.6vw, 4.2rem); line-height: 1.08; color: var(--paper);
  text-shadow: 0 2px 30px rgba(28, 17, 13, .85), 0 0 2px rgba(28, 17, 13, .5);
}
/* slogan ngắt sau dấu phẩy như hero / footer: mỗi vế giữ trọn một dòng khi đủ chỗ ("không gian" không bị tách) */
.corridor__outro p > span, .corridor__outro em { display: inline-block; }
.corridor__outro em { font-style: italic; font-weight: 400; color: var(--gold-3); }
.corridor__hint {
  position: absolute; z-index: 5; left: 0; right: 0; bottom: max(26px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 12px; pointer-events: none;
  font-size: 10.5px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: rgba(244, 238, 228, .6);
}
.corridor__hint i { width: 1px; height: 42px; background: linear-gradient(var(--gold-2), rgba(200, 169, 111, 0)); transform-origin: top; animation: corridorHint 2.4s var(--ease-io) infinite; }
@keyframes corridorHint { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* HUD: ba bộ sưu tập + tiến độ (nút thật — mở thư viện ảnh). Chỉ hiện khi đang đi giữa các dãy ảnh (.is-on, JS);
   khối HUD KHÔNG nhận chuột / chạm — chỉ 3 nút nhận, và chỉ khi HUD hiện (không chặn nút "Xem bộ sưu tập" hay ảnh 3D). */
.corridor__hud {
  position: absolute; z-index: 6; left: var(--gutter); right: var(--gutter); bottom: max(26px, env(safe-area-inset-bottom));
  opacity: 0; pointer-events: none; transition: opacity .6s var(--ease-out);
}
.corridor__hud.is-on { opacity: 1; }
.corridor__hud.is-on .corridor__hud-item { pointer-events: auto; }
.corridor__hud-label { min-height: 1.6em; margin-bottom: 10px; font-size: 11px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: rgba(244, 238, 228, .76); }
.corridor__hud-rail { display: flex; flex-wrap: wrap; gap: 0 26px; margin-bottom: 10px; }
.corridor__hud-item {
  display: inline-flex; align-items: baseline; gap: 10px; min-height: 44px; padding: 10px 0;
  font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: rgba(244, 238, 228, .6); transition: color .4s;
}
.corridor__hud-item span { font-family: var(--serif); font-style: italic; font-size: 17px; letter-spacing: 0; text-transform: none; color: var(--gold-2); }
.corridor__hud-item b { font-weight: 500; }
.corridor__hud-item.is-active, .corridor__hud-item:hover { color: var(--paper); }
.corridor__hud-bar { max-width: 420px; height: 1px; background: var(--line-light); }
.corridor__hud-bar i { display: block; height: 100%; background: var(--gold-2); transform-origin: left; transform: scaleX(0); }

/* chuyển sáng ↔ tối — vào: dải "chạng vạng" giấy ngà → nâu chocolate phủ lên khoảng trống cuối mục (01) Về Aura;
   ra: cuối hành lang bay vào vầng sáng, phủ giấy ngà (JS) → nối liền mục (03) Dự án nền sáng */
.corridor::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: clamp(64px, 9vw, 130px); pointer-events: none;
  background: linear-gradient(180deg, rgba(28, 17, 13, 0) 0%, rgba(28, 17, 13, .16) 30%, rgba(28, 17, 13, .62) 72%, var(--choc) 100%);
}
.corridor__veil { position: absolute; inset: 0; z-index: 9; pointer-events: none; opacity: 0; }
.corridor__veil--out { background: var(--paper); }
/* header đang ở chế độ nền tối mà hành lang đã sáng hẳn (cuối hành trình) → dùng lại màu header nền sáng */
html.corridor-light .site-header.on-dark { color: var(--ink); }
html.corridor-light .site-header.on-dark::before { background: rgba(244, 238, 228, .86); border-color: var(--line); }
html.corridor-light .site-header.on-dark .btn--line::before { background: var(--ink); }
html.corridor-light .site-header.on-dark .btn--line:hover { color: var(--paper); border-color: var(--ink); }

@media (max-width: 767px) {
  .ctitle { padding-bottom: 120px; }
  .ctitle__name { font-size: clamp(3rem, 15vw, 5rem); white-space: normal; }
  .ctitle__desc { max-width: 290px; font-size: 12px; line-height: 1.7; }
  .ctitle__open { margin-top: 24px; }
  /* chừa chỗ cho nút nổi "Nhận báo giá" ở góc phải dưới (rộng ~175px + lề 14px; ≤ 520px: ~154px) — cách nút ≥ 8px */
  .corridor__hud { right: 196px; bottom: max(20px, env(safe-area-inset-bottom)); }
  .corridor__hud-rail { flex-wrap: nowrap; gap: 0 6px; margin-bottom: 6px; }
  .corridor__hud-item { min-width: 44px; min-height: 44px; padding: 0; align-items: center; justify-content: center; }
  .corridor__hud-item b { display: none; }
  .corridor__hud-label { margin-bottom: 4px; font-size: 10px; letter-spacing: .16em; line-height: 1.5; }
  .corridor__hint { bottom: 96px; }
}
@media (max-width: 520px) { .corridor__hud { right: 176px; } }
/* điện thoại rất hẹp (320–360px): 3 nút 44×44 vẫn nằm một hàng cạnh nút nổi */
@media (max-width: 360px) {
  .corridor__hud { left: 12px; right: 172px; }
  .corridor__hud-rail { gap: 0; }
}
@media (max-height: 640px) { .corridor__hint { display: none; } }
/* màn hình thấp (điện thoại xoay ngang ~340–450px): thu gọn tên bộ sưu tập + bỏ dòng nhãn HUD
   để nút "Xem bộ sưu tập" và hàng nút HUD không bao giờ chồng lên nhau */
@media (max-height: 500px) {
  .ctitle { padding-top: calc(var(--header-h) - 10px); padding-bottom: 84px; }
  .ctitle__kicker { margin-bottom: 8px; }
  .ctitle__name { font-size: clamp(2.4rem, 19vh, 5.5rem); }
  .ctitle__desc { margin-top: 10px; font-size: 12px; }
  .ctitle__open { margin-top: 14px; }
  .corridor__hud { bottom: max(12px, env(safe-area-inset-bottom)); }
  .corridor__hud-label { display: none; }
  .corridor__hud-rail { margin-bottom: 4px; }
}

/* ---------------- (03) Dự án tiêu biểu (tường ảnh 3D) ----------------
   6 thẻ <a.wcard> → trang dự án. Chiều sâu: tường giữ preserve-3d → --z (translateZ) đẩy từng thẻ khỏi mặt phẳng nghiêng;
   --dy = parallax theo chiều sâu do main.js cuộn (thẻ gần trôi nhanh hơn). Rê chuột (chuột thật): thẻ nổi thêm 40px. */
.works { position: relative; height: 240vh; background: var(--paper); }
/* overflow: clip (khi trình duyệt hỗ trợ) — không cho focus bàn phím cuộn lén khung bị ghim */
.works__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; overflow: clip; isolation: isolate; background: var(--paper); }
.works__scene { position: absolute; inset: 0; perspective: 1500px; perspective-origin: 50% 20%; }
.works__plane {
  --rx: 36deg; --rz: -16deg;
  position: absolute; left: 50%; top: 50%; width: min(1500px, 132vw);
  transform: translate(-50%, -38%) rotateX(var(--rx)) rotateZ(var(--rz));
  transform-style: preserve-3d;
}
.works__wall { position: relative; width: 100%; aspect-ratio: 1 / .82; will-change: transform; transform-style: preserve-3d; }
.wcard {
  position: absolute; left: var(--x); top: var(--y); width: var(--w);
  display: block; text-align: left; transform-style: preserve-3d;
  transform: rotate(var(--r)) translate3d(0, var(--dy, 0px), var(--z, 0px));
}
.wcard__in { display: block; transform-style: preserve-3d; transition: transform .35s var(--ease-out); }
.wcard__fig { display: block; overflow: hidden; background: var(--paper-3); box-shadow: 0 30px 50px -30px rgba(43, 27, 21, .55); transition: box-shadow .35s var(--ease-out); }
.wcard__img { width: 100%; height: auto; transition: transform .35s var(--ease-out); }
/* chú thích: tên (in nghiêng) TRÊN dòng hạng mục · thời gian — xếp dọc để thẻ hẹp (19–20%) không vỡ 2 cột;
   nền giấy mờ như .works__meta để chữ vẫn đọc được khi thẻ trượt ngang qua tiêu đề khổng lồ phía sau */
.wcard__cap { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: fit-content; max-width: 100%; margin-top: 10px; padding: 6px 12px 7px 0; background: rgba(244, 238, 228, .86); font-size: clamp(9px, .75vw, 11px); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); transition: transform .35s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .wcard:hover .wcard__in, .wcard:focus-visible .wcard__in { transform: translateZ(40px); }
  .wcard:hover .wcard__fig, .wcard:focus-visible .wcard__fig { box-shadow: 0 54px 70px -36px rgba(43, 27, 21, .62); }
  .wcard:hover .wcard__img, .wcard:focus-visible .wcard__img { transform: scale(1.05); }
  .wcard:hover .wcard__cap, .wcard:focus-visible .wcard__cap { transform: translateY(-6px); }
}
.wcard__cap b { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 1.7em; letter-spacing: 0; text-transform: none; color: var(--ink); line-height: 1.1; }
/* tiêu đề nằm ở lớp sau, ảnh trượt qua phía trước (chiều sâu kiểu tạp chí) */
.works__scene { z-index: 2; }
.works__overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--ink);
}
.works__title { font-family: var(--serif); font-weight: 300; font-size: clamp(3.6rem, 12.5vw, 13.5rem); line-height: .9; letter-spacing: -.02em; }
.works__title span, .works__title em { display: block; }
.works__title em { font-style: italic; padding-left: .9em; color: var(--wine); }
.works__meta {
  position: absolute; left: 0; right: 0; top: calc(var(--header-h) + 10px); z-index: 3;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; pointer-events: none;
  max-width: none;
}
.works__meta .eyebrow { background: rgba(244, 238, 228, .86); padding: 6px 12px 6px 0; }
.works__more { pointer-events: auto; background: rgba(244, 238, 228, .86); padding-inline: 10px; }
.works__more::after { left: 10px; right: 10px; }

/* chế độ tĩnh (reduced-motion / không có GSAP)
   .works.works--static: tăng độ ưu tiên để thắng `.works { height: 200vh }` trong media query mobile phía dưới */
.works.works--static { height: auto; }
.works--static .works__pin { position: relative; height: auto; overflow: visible; display: flex; flex-direction: column; padding-block: clamp(80px, 10vw, 140px); }
.works--static .works__overlay { position: relative; order: 1; margin-bottom: clamp(32px, 5vw, 60px); }
.works--static .works__scene { position: relative; order: 2; perspective: none; }
.works--static .works__plane { position: relative; left: auto; top: auto; width: auto; transform: none; padding-inline: var(--gutter); }
.works--static .works__wall { aspect-ratio: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; align-items: start; transform: none !important; } /* 6 thẻ = 2 hàng × 3 (điện thoại: 3 × 2) */
.works--static .wcard { position: relative; left: auto; top: auto; width: auto; transform: none; }
.works--static .works__meta { position: relative; order: 3; top: auto; margin-top: 40px; }

@media (max-width: 767px) {
  .works { height: 200vh; }
  .works__plane { --rx: 30deg; --rz: -14deg; width: 175vw; transform: translate(-50%, -34%) rotateX(var(--rx)) rotateZ(var(--rz)); }
  .wcard__cap { display: none; }
  .works--static .works__wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
  .works--static .wcard__cap { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-size: 9.5px; }
  .works__meta .eyebrow { font-size: 9.5px; letter-spacing: .18em; }
}

/* ---------------- (05) Danh mục dự án — trang chủ #danh-muc ----------------
   Bộ lọc + lưới thẻ dùng CHUNG component .pjx-* với trang /du-an/ (site/du-an/index.html) — sửa ở đây là đổi cả hai trang.
   Lưới: ≥1280px 3 cột (cột giữa lệch xuống --mid 96px) · 1024–1279 3 cột (64px) · 640–1023 2 cột (56px) · <640 2 cột, không lệch;
   thanh lọc trên điện thoại = hàng chip cuộn ngang trong chính nó (không cuộn ngang cả trang). JS (main.js / project.js) gán .is-mid. */
.folio { padding-block: clamp(100px, 12vw, 180px); }
.folio__head { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 6vw, 100px); align-items: end; }
.folio__head .eyebrow { margin-bottom: 22px; }
.folio__lede { color: var(--ink-2); font-size: 16px; max-width: 48ch; text-wrap: pretty; }
@media (max-width: 900px) { .folio__head { grid-template-columns: 1fr; } }

.pjx-filter {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: clamp(40px, 6vw, 80px); padding-top: 22px; border-top: 1px solid var(--line);
}
.pjx-filter button {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 20px; flex: none;
  border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  transition: background-color .4s, color .4s, border-color .4s;
}
.pjx-filter button:hover { border-color: var(--ink); }
.pjx-filter button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.pjx-filter__n { font-family: var(--serif); font-style: italic; font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--gold-ink); }
.pjx-filter button[aria-pressed="true"] .pjx-filter__n { color: var(--gold-3); }
html:not(.js) .pjx-filter { display: none; }

.pjx-grid {
  --mid: 96px; --drift: 0px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 88px 40px;
  list-style: none; margin: clamp(40px, 5vw, 72px) 0 0; padding: 0 0 var(--mid);
  perspective: 1600px;
}
.pjx-card { min-width: 0; perspective: 1400px; } /* phối cảnh riêng từng thẻ: hiện dần z / rotateX của .pjx-card__link quanh chính tâm thẻ */
.pjx-card[hidden] { display: none; }
.pjx-card.is-mid { translate: 0 calc(var(--mid) + var(--drift)); }
.pjx-card__link { display: block; }
.pjx-card__fig {
  position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; background: var(--paper-3);
  box-shadow: 0 36px 64px -44px rgba(43, 27, 21, .55);
}
.pjx-card__fig img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.pjx-card__link:hover .pjx-card__fig img, .pjx-card__link:focus-visible .pjx-card__fig img { transform: scale(1.045); }
.pjx-card__badge {
  position: absolute; z-index: 2; left: 14px; top: 14px; padding: 6px 10px 5px; border-radius: 2px;
  background: var(--gold-2); color: var(--choc);
  font-size: 9.5px; font-weight: 600; line-height: 1.2; letter-spacing: .2em; text-transform: uppercase;
}
.pjx-card__row { display: flex; align-items: baseline; gap: 12px; margin-top: 18px; min-width: 0; }
.pjx-card__no { flex: none; font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--gold-ink); }
.pjx-card__meta { min-width: 0; font-size: 11px; font-weight: 500; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.pjx-card__name { margin-top: 6px; font-family: var(--serif); font-weight: 500; font-size: clamp(19px, 1.6vw, 28px); line-height: 1.15; overflow-wrap: break-word; }
.pjx-card__name span {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .6s var(--ease-out), color .4s;
}
.pjx-card__link:hover .pjx-card__name span, .pjx-card__link:focus-visible .pjx-card__name span { background-size: 100% 1px; color: var(--wine); }
.pjx-card__mat { display: block; margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.pjx-card__venue { display: block; margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--ink-3); font-style: italic; }
/* dự án chưa có ảnh (The Amber Hour — TBC #7): chỉ hiện ở chế độ xem trước */
.pjx-card__fig--tbc {
  display: grid; place-items: center; padding: 24px; text-align: center;
  background: repeating-linear-gradient(135deg, var(--paper-2) 0 14px, var(--paper-3) 14px 15px);
  font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--gold-ink);
}

@media (max-width: 1279px) { .pjx-grid { --mid: 64px; gap: 72px 32px; } }
@media (max-width: 1023px) { .pjx-grid { --mid: 56px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px 24px; } }
@media (max-width: 639px) {
  .pjx-grid { --mid: 0px; gap: 28px 12px; padding-bottom: 0; }
  .pjx-filter {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter);
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none;
  }
  .pjx-filter::-webkit-scrollbar { display: none; }
  .pjx-filter button { scroll-snap-align: start; padding: 0 16px; }
  .pjx-card__row { gap: 8px; margin-top: 12px; }
  .pjx-card__meta { font-size: 9.5px; letter-spacing: .1em; }
  .pjx-card__name { font-size: 18px; }
  .pjx-card__mat { font-size: 12px; }
  .pjx-card__venue { display: none; }
  .pjx-card__badge { left: 8px; top: 8px; padding: 4px 7px 3px; font-size: 8.5px; letter-spacing: .14em; }
}

/* ---------------- Gia tiên ---------------- */
.giatien { background: var(--paper-2); padding-block: clamp(100px, 12vw, 170px); }
.giatien__grid { display: grid; grid-template-columns: 4.2fr 7.8fr; gap: clamp(36px, 6vw, 100px); align-items: start; }
.giatien__text .eyebrow { margin-bottom: 22px; }
.giatien__lede { margin-top: 24px; color: var(--ink-2); max-width: 40ch; }
.styles-list { list-style: none; margin: 34px 0 0; padding: 0; border-top: 1px solid var(--line-strong); }
.styles-list li { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line-strong); font-family: var(--serif); font-style: italic; font-size: clamp(1.45rem, 2.2vw, 2.05rem); line-height: 1.2; }
.styles-list small { font-size: 1rem; color: var(--gold-ink); }
.gt-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 28px); }
.gt-card { display: block; text-align: left; }
.gt-card:nth-child(2) { margin-top: clamp(0px, 6vw, 90px); }
.gt-card:nth-child(3) { margin-top: clamp(0px, 3vw, 45px); }
.gt-card__fig { position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; background: var(--paper-3); }
.gt-card__fig img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.gt-card:hover .gt-card__fig img { transform: scale(1.05); }
.gt-card__name { display: block; margin-top: 16px; font-family: var(--serif); font-size: clamp(1.15rem, 1.5vw, 1.45rem); line-height: 1.2; }
.gt-card__meta { display: block; margin-top: 4px; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }
.gt-card:hover .gt-card__name, .gt-card:focus-visible .gt-card__name { color: var(--wine); }
.gt-card__name { transition: color .4s; }
.giatien__media { min-width: 0; }
.gt-more { display: flex; justify-content: flex-end; margin-top: clamp(28px, 4vw, 56px); }

@media (max-width: 900px) {
  .giatien__grid { grid-template-columns: 1fr; }
  .gt-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .gt-card:nth-child(n) { margin-top: 0; }
  .gt-card__name { font-size: 1rem; }
  .gt-more { justify-content: flex-start; }
}
@media (max-width: 520px) {
  .gt-cards { grid-template-columns: 1fr 1fr; }
  .gt-card:nth-child(3) { grid-column: 1 / -1; }
  .gt-card:nth-child(3) .gt-card__fig { aspect-ratio: 4 / 3; }
}

/* ---------------- Dịch vụ ---------------- */
.services { padding-block: clamp(100px, 12vw, 180px); }
.services__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(36px, 6vw, 110px); align-items: start; }
.services__aside { position: sticky; top: calc(var(--header-h) + 36px); }
.services__aside .eyebrow { margin-bottom: 22px; }
.services__lede { margin-top: 26px; color: var(--ink-2); max-width: 44ch; }
.svc { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.svc__row {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: 52px minmax(0, 1fr) 46px; gap: 6px 18px; align-items: center;
  padding: clamp(20px, 2.2vw, 30px) clamp(8px, 1.4vw, 20px);
  border-bottom: 1px solid var(--line-strong);
  transition: color .55s var(--ease-out);
}
.svc__row::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--choc-2);
  transform: scaleY(0); transform-origin: 50% 0; transition: transform .7s var(--ease-io);
}
.svc__row:hover, .svc__row:focus-visible { color: var(--paper); }
.svc__row:hover::before, .svc__row:focus-visible::before { transform: scaleY(1); }
.svc__num { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--gold-ink); grid-row: 1 / span 2; align-self: start; padding-top: .35em; }
.svc__row:hover .svc__num { color: var(--gold-3); }
.svc__name { font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 2.7vw, 2.55rem); line-height: 1.12; }
.svc__desc { grid-column: 2; font-size: 14.5px; color: var(--ink-2); transition: color .55s; }
.svc__row:hover .svc__desc, .svc__row:focus-visible .svc__desc { color: rgba(244, 238, 228, .8); }
.svc__go {
  grid-column: 3; grid-row: 1 / span 2; width: 46px; height: 46px; border-radius: 50%; border: 1px solid currentColor;
  display: grid; place-items: center; transform: rotate(-45deg); transition: transform .6s var(--ease-out);
}
.svc__row:hover .svc__go { transform: rotate(0deg); }
/* nhãn nhỏ cạnh tên dịch vụ: "Mới" (Lễ Vows) · tên tiếng Anh (Ceiling Art) */
.svc__tag, .svc__en { display: inline-block; vertical-align: .32em; margin-left: .5em; font-family: var(--sans); font-style: normal; font-weight: 500; line-height: 1; white-space: nowrap; }
.svc__tag { padding: 5px 9px 4px; border: 1px solid var(--gold); border-radius: 99px; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink); transition: color .55s, border-color .55s; }
.svc__en { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); transition: color .55s; }
.svc__row:hover .svc__tag, .svc__row:focus-visible .svc__tag { color: var(--gold-3); border-color: var(--gold-3); }
.svc__row:hover .svc__en, .svc__row:focus-visible .svc__en { color: rgba(244, 238, 228, .72); }

@media (max-width: 900px) {
  .services__grid { grid-template-columns: 1fr; }
  .services__aside { position: static; }
}

/* ---------------- Cấp độ thiết kế ---------------- */
.tiers { background: var(--paper-2); padding-block: clamp(100px, 12vw, 180px); }
.tiers__head { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 6vw, 100px); align-items: end; }
.tiers__head .eyebrow { margin-bottom: 22px; }
.tiers__lede { color: var(--ink-2); max-width: 48ch; text-wrap: pretty; }
.tiers__dims { list-style: none; margin: clamp(36px, 4.5vw, 64px) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.tiers__dims li { padding: 6px 13px; border: 1px solid var(--line-strong); border-radius: 99px; font-size: 10.5px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; line-height: 1.5; color: var(--ink-2); }
.tiers__list {
  list-style: none; margin: clamp(40px, 5vw, 72px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 26px);
  --rise: clamp(0px, 3.4vw, 56px); /* bậc thang: mỗi cấp cao hơn cấp trước */
}
.tier {
  position: relative; display: flex; flex-direction: column;
  padding: clamp(28px, 2.8vw, 44px) clamp(22px, 2.2vw, 34px) clamp(26px, 2.6vw, 38px);
  background: var(--paper); box-shadow: 0 50px 90px -60px rgba(43, 27, 21, .45);
}
.tier::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(160, 124, 69, .3); pointer-events: none; }
.tier:nth-child(1) { margin-top: calc(var(--rise) * 3); }
.tier:nth-child(2) { margin-top: calc(var(--rise) * 2); }
.tier:nth-child(3) { margin-top: var(--rise); }
.tier__num { font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--gold-ink); }
.tier__name { margin: 6px 0 4px; font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 2.7vw, 2.75rem); line-height: 1.05; letter-spacing: -.005em; text-wrap: balance; }
.tier__tag { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.1rem, 1.35vw, 1.3rem); line-height: 1.3; color: var(--wine); }
.tier__desc { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.65; color: var(--ink-2); text-wrap: pretty; }
.tier__level { display: flex; gap: 9px; margin-top: auto; padding-top: 26px; }
.tier__level i { width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid var(--gold); }
.tier__level i.on { background: var(--gold); }
/* Signature — cấp độ tiêu biểu (gói hero) */
.tier--hero {
  color: var(--paper);
  background: var(--choc-2);
  box-shadow: 0 60px 100px -50px rgba(28, 17, 13, .75);
}
.tier--hero::before { border-color: rgba(226, 205, 162, .42); }
.tier--hero .tier__num { color: var(--gold-2); }
.tier--hero .tier__tag { color: var(--gold-3); }
.tier--hero .tier__desc { color: rgba(244, 238, 228, .84); border-top-color: var(--line-light); }
.tier--hero .tier__level i { border-color: var(--gold-2); }
.tier--hero .tier__level i.on { background: var(--gold-2); }
.tier__badge {
  position: absolute; top: clamp(20px, 2vw, 28px); right: clamp(20px, 2vw, 28px);
  padding: 6px 11px 5px; border-radius: 99px; background: var(--gold-2); color: var(--choc);
  font-size: 9.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; line-height: 1;
}
.tiers__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 22px 40px; flex-wrap: wrap;
  margin-top: clamp(40px, 5vw, 72px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--line-strong);
}
.tiers__note { max-width: 52ch; font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 1.5vw, 1.4rem); line-height: 1.4; color: var(--ink); }

@media (max-width: 1100px) {
  .tiers__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tier:nth-child(n) { margin-top: 0; }
}
@media (max-width: 900px) { .tiers__head { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .tiers__list { grid-template-columns: 1fr; }
  .tiers__foot .btn { width: 100%; }
}

/* ---------------- Quy trình ---------------- */
.process {
  position: relative; overflow: hidden; color: var(--paper);
  /* 03/10/2026: bỏ nền đỏ rượu vang (Founder không dùng nền đỏ ở bất cứ phần nào) → nâu socola ánh vàng nhẹ ở góc */
  background: radial-gradient(90% 80% at 85% 0%, #3a2419 0%, #2a1914 50%, #1c110d 100%);
  padding-block: clamp(100px, 12vw, 170px);
}
.process__head { max-width: 1200px; }
.process__head .eyebrow { margin-bottom: 22px; }
.steps { position: relative; margin-top: clamp(60px, 8vw, 110px); padding-top: 54px; }
.steps__line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(244, 238, 228, .18); }
.steps__line i { position: absolute; inset: 0; background: var(--gold-2); transform-origin: 0 50%; }
.steps__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 48px); }
.step { position: relative; }
.step::before { content: ""; position: absolute; left: 0; top: -59px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 0 6px rgba(200, 169, 111, .14); }
.step__num { display: block; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(3.6rem, 6vw, 6rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--gold-2); }
.step h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 2.3vw, 2.2rem); line-height: 1.15; margin: 18px 0 10px; }
.step p { font-size: 15px; color: rgba(244, 238, 228, .76); max-width: 30ch; }

@media (max-width: 900px) {
  .steps { padding-top: 0; padding-left: 34px; }
  .steps__line { left: 4px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .steps__line i { transform-origin: 50% 0; }
  .steps__list { grid-template-columns: 1fr; gap: 48px; }
  .step::before { left: -34px; top: 18px; }
}

/* ---------------- Bằng chứng xã hội ---------------- */
.proof { padding-block: clamp(100px, 12vw, 180px); }
.proof__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 7vw, 120px); align-items: start; }
/* 5 thẻ đánh giá cao hơn nhiều cột số liệu → cột số liệu dính (sticky) cạnh các thẻ khi cuộn, không để khoảng trống lớn trên / dưới */
@media (min-width: 901px) { .proof__stats { position: sticky; top: calc(var(--header-h) + 40px); } }
.proof__stats .eyebrow { margin-bottom: 30px; }
.stat { display: flex; align-items: baseline; gap: 20px; padding: 26px 0; border-top: 1px solid var(--line-strong); }
.stat:last-of-type { border-bottom: 1px solid var(--line-strong); margin-bottom: 18px; }
.stat__val { font-family: var(--serif); font-weight: 300; font-size: clamp(4rem, 8.4vw, 8rem); line-height: .9; color: var(--wine); white-space: nowrap; font-variant-numeric: lining-nums; }
.stat__label { font-size: 13.5px; color: var(--ink-2); max-width: 20ch; line-height: 1.5; }
.stat__sub { display: block; white-space: nowrap; }
.quote { position: relative; background: var(--paper-2); padding: clamp(36px, 5.5vw, 84px); }
.quote::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(160, 124, 69, .35); pointer-events: none; }
.quote__mark { display: block; height: .5em; font-family: var(--serif); font-size: clamp(7rem, 12vw, 11rem); line-height: .9; color: var(--wine); }
.quote blockquote { margin: 0; }
.quote blockquote p { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(2rem, 4.2vw, 4rem); line-height: 1.12; }
.quote figcaption { display: flex; flex-direction: column; gap: 4px; margin-top: 30px; }
.quote figcaption b { font-family: var(--serif); font-weight: 500; font-size: 1.35rem; }
.quote figcaption span { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
.quote figcaption .quote__ref { letter-spacing: .14em; color: var(--gold-ink); }
/* review: thẻ lớn (đánh giá trên Facebook) + 4 thẻ nhỏ (bình luận công khai trên Facebook) */
.quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); min-width: 0; }
.quotes > .quote:not(.quote--sm) { grid-column: 1 / -1; }
.quote--sm { padding: clamp(28px, 3vw, 44px); }
.quote--sm::before { inset: 10px; }
.quote--sm .quote__mark { font-size: clamp(4.5rem, 6vw, 6rem); }
.quote--sm blockquote p { font-size: clamp(1.2rem, 1.7vw, 1.55rem); line-height: 1.3; }
.quote--sm figcaption { margin-top: 20px; }
.quote--sm figcaption b { font-size: 1.1rem; }

/* Venue đã thi công — dòng logo chữ */
.venues { margin-top: clamp(70px, 9vw, 130px); }
.venues__title { margin: 0 0 22px; }
/* 5 tên / hàng (máy tính) · 3 (máy tính bảng) · 2 (điện thoại); hàng cuối thiếu thì căn giữa. Tên dài nhất ("Capella Gallery Hall")
   xuống tối đa 2 dòng cân đối — các ô cao bằng nhau. */
.venues__list {
  --vgap: 18px; --vcols: 5;
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--vgap);
  border-block: 1px solid var(--line-strong);
}
.venue { flex: 0 0 auto; width: calc((100% - (var(--vcols) - 1) * var(--vgap)) / var(--vcols)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: clamp(104px, 10vw, 140px); padding: 22px 14px; text-align: center; }
.venue__name { font-family: var(--serif); font-weight: 500; font-size: clamp(1.05rem, 1.35vw, 1.3rem); line-height: 1.25; letter-spacing: .2em; margin-right: -.2em; text-transform: uppercase; text-wrap: balance; color: var(--ink); }
@media (max-width: 1099px) { .venues__list { --vcols: 3; } }
.venue__sub { font-size: 9.5px; font-weight: 500; letter-spacing: .36em; margin-right: -.36em; text-transform: uppercase; color: var(--ink-2); }

@media (max-width: 900px) { .proof__grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .quotes { grid-template-columns: 1fr; }
  .venues__list { --vcols: 2; --vgap: 10px; }
  .venue { padding: 18px 8px; min-height: 92px; }
  .venue__name { font-size: 1rem; letter-spacing: .14em; margin-right: -.14em; }
}

/* ---------------- Câu hỏi thường gặp ---------------- */
.faq { padding-block: clamp(100px, 12vw, 180px); }
.faq__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(36px, 6vw, 110px); align-items: start; }
.faq__aside { position: sticky; top: calc(var(--header-h) + 36px); }
.faq__aside .eyebrow { margin-bottom: 22px; }
.faq__lede { margin-top: 26px; color: var(--ink-2); max-width: 40ch; text-wrap: pretty; }
.faq__links { display: flex; flex-wrap: wrap; gap: 0 28px; margin-top: 14px; }
.faq__list { border-top: 1px solid var(--line-strong); }
.faq__item { border-bottom: 1px solid var(--line-strong); }
.faq__q { font: inherit; }
.faq__btn {
  width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr) 42px; gap: 14px; align-items: center;
  padding: clamp(18px, 2vw, 26px) 4px; text-align: left; transition: color .4s;
}
.faq__num { align-self: start; padding-top: .35em; font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.2; color: var(--gold-ink); }
.faq__text { font-family: var(--serif); font-weight: 400; font-size: clamp(1.3rem, 1.9vw, 1.7rem); line-height: 1.25; text-wrap: pretty; transition: color .4s; }
.faq__btn:hover .faq__text, .faq__btn[aria-expanded="true"] .faq__text { color: var(--wine); }
.faq__icon {
  position: relative; justify-self: end; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-strong);
  transition: background-color .4s, border-color .4s, color .4s;
}
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1px; margin: -.5px 0 0 -6px; background: currentColor; }
.faq__icon::after { transform: rotate(90deg); transition: transform .5s var(--ease-out); }
.faq__btn:hover .faq__icon { border-color: var(--wine); }
.faq__btn[aria-expanded="true"] .faq__icon { background: var(--wine); border-color: var(--wine); color: var(--paper); }
.faq__btn[aria-expanded="true"] .faq__icon::after { transform: rotate(0deg); }
.faq__body { padding: 0 56px clamp(22px, 2.4vw, 30px) 62px; }
.faq__body p { max-width: 60ch; color: var(--ink-2); font-size: 15.5px; line-height: 1.7; text-wrap: pretty; }
.faq__body p + p { margin-top: 12px; }
.faq__body p a { color: var(--wine); border-bottom: 1px solid currentColor; }
.faq__body p a:hover { color: var(--ink); }
.faq__go { margin-top: 4px; color: var(--wine); }
/* JS bật accordion (không có JS → mọi câu trả lời mở sẵn). Đóng = hàng lưới 0fr + visibility:hidden (không nhận focus, không đọc). */
.faq--js .faq__panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .55s var(--ease-out), visibility 0s linear .55s; }
.faq--js .faq__item.is-open .faq__panel { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .55s var(--ease-out), visibility 0s; }
.faq--js .faq__inner { min-height: 0; overflow: hidden; }

@media (max-width: 900px) {
  .faq__grid { grid-template-columns: 1fr; }
  .faq__aside { position: static; }
}
@media (max-width: 560px) {
  .faq__btn { grid-template-columns: 30px minmax(0, 1fr) 38px; gap: 10px; }
  .faq__icon { width: 38px; height: 38px; }
  .faq__body { padding: 0 6px 22px 40px; }
}

/* ---------------- Liên hệ / form ---------------- */
.contact { background: var(--paper-2); padding-block: clamp(100px, 12vw, 180px); }
.contact__grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(40px, 6vw, 110px); align-items: start; }
.contact__intro .eyebrow { margin-bottom: 22px; }
.contact__lede { margin-top: 26px; color: var(--ink-2); max-width: 44ch; }
.contact__list { list-style: none; margin: 40px 0 0; padding: 0; border-top: 1px solid var(--line-strong); }
.contact__list li { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line-strong); font-size: 15px; }
.contact__list li > span { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); padding-top: 4px; }
.contact__list a { border-bottom: 1px solid transparent; transition: border-color .3s, color .3s; }
.contact__list a:hover { color: var(--wine); border-color: currentColor; }
.contact__list li > p { color: var(--ink-2); }
/* "Xem bản đồ" (Google Maps) dưới địa chỉ TP.HCM + hàng nút nhanh Zalo / bản đồ dưới danh sách liên hệ */
.contact__list .contact__map { display: inline-block; margin-top: 6px; font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--wine); border-bottom-color: currentColor; }
.contact__quick { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
@media (max-width: 480px) {
  .contact__list li { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; }
  .contact__quick .btn { flex: 1 1 100%; }
}
.tbc-note { display: block; margin-top: 2px; font-size: 11.5px; font-style: italic; letter-spacing: .02em; line-height: 1.45; color: var(--gold-ink); }
[data-theme="dark"] .tbc-note { color: var(--gold-2); }
.u-break { overflow-wrap: anywhere; word-break: break-word; }

.qform, .qdone { position: relative; background: var(--paper); padding: clamp(26px, 4vw, 56px); box-shadow: 0 50px 90px -60px rgba(43, 27, 21, .45); }
.qform::before, .qdone::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(160, 124, 69, .3); pointer-events: none; }
.qform__title { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: clamp(1.6rem, 2.4vw, 2.1rem); margin-bottom: 26px; }
.qgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 28px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
.req { color: var(--wine); }
.field input, .field select {
  width: 100%; min-height: 46px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0;
  background: transparent; color: var(--ink); font-family: var(--sans); font-size: 16px; font-weight: 400;
  outline: none; transition: border-color .3s, box-shadow .3s; -webkit-appearance: none; appearance: none;
}
/* chữ gợi ý: --ink-3 (4,7:1 trên nền --paper của phiếu) thay cho #9C8B80 cũ (2,8:1 — dưới chuẩn AA) */
.field input::placeholder { color: var(--ink-3); font-weight: 300; opacity: 1; }
.field select {
  padding-right: 26px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235C473C' stroke-width='1.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 4px center;
}
.field input[type="date"] { min-height: 46px; }
.field input:focus, .field select:focus { border-color: var(--wine); box-shadow: 0 1px 0 0 var(--wine); }
.field.is-invalid input { border-color: var(--err); box-shadow: 0 1px 0 0 var(--err); }
.field__err { font-size: 12.5px; color: var(--err); min-height: 0; line-height: 1.4; }
.field__err:empty { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip { font-size: 12.5px; padding: 8px 15px; min-height: 36px; border: 1px solid var(--line-strong); border-radius: 99px; transition: background-color .3s, color .3s, border-color .3s; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.qform__foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 34px; }
.qform__note { font-size: 12.5px; color: var(--ink-2); max-width: 34ch; line-height: 1.55; }

.qdone { text-align: center; outline: none; }
.qdone__mark { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--gold); color: var(--wine); font-size: 26px; margin-bottom: 18px; }
.qdone__title { font-family: var(--serif); font-weight: 300; font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.1; margin-bottom: 14px; }
.qdone__title span { font-style: italic; color: var(--wine); }
.qdone p { color: var(--ink-2); max-width: 44ch; margin-inline: auto; }
.qdone__actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.qdone__again { margin-top: 24px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); border-bottom: 1px solid var(--line-strong); padding: 6px 0; }
.qdone__title span[data-fallback-name] { font-style: italic; color: var(--wine); }
.qdone .qdone__hint { margin-top: 16px; font-size: 12.5px; line-height: 1.55; color: var(--ink-3); max-width: 40ch; }
.qdone__actions a:not([href]) { display: none; }

/* ô mồi chống spam — ẩn khỏi mắt, khỏi trình đọc màn hình và khỏi phím Tab */
.hp-field { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
/* trạng thái gửi (giới hạn tần suất, đang gửi…) */
.qform__status { margin-top: 22px; padding: 12px 16px; border-left: 2px solid var(--wine); background: var(--paper-2); font-size: 13.5px; line-height: 1.55; color: var(--ink); }
.qform__status:empty { display: none; }
.qform__status a { color: var(--wine); border-bottom: 1px solid currentColor; }
.qform.is-sending button[type="submit"] { pointer-events: none; opacity: .72; }
/* JS chưa chạy / không chạy được: nút gửi disabled sẵn trong HTML + dòng hướng dẫn gọi / nhắn Messenger.
   main.js bật nút và thêm html.form-ready → ẩn dòng hướng dẫn. */
.qform button[type="submit"]:disabled { opacity: .55; cursor: not-allowed; }
html.form-ready .qform__nojs { display: none; }

@media (max-width: 900px) { .contact__grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .qgrid { grid-template-columns: 1fr; gap: 20px; }
  .contact__list li { grid-template-columns: 1fr; gap: 2px; }
  .qform__foot .btn { width: 100%; }
}

/* ---------------- Footer ---------------- */
.footer { position: relative; overflow: hidden; background: var(--choc); color: var(--paper); padding-top: clamp(80px, 10vw, 140px); }
.footer__top { display: grid; grid-template-columns: 1.5fr 1.2fr 1fr 1fr; gap: 40px clamp(24px, 4vw, 60px); }
.brand--lg .brand__logo { height: 64px; } /* 148px rộng */
@media (max-width: 520px) { .brand--lg .brand__logo { height: 56px; } }
.footer__tag { margin-top: 26px; font-family: var(--serif); font-size: 1.5rem; line-height: 1.3; color: rgba(244, 238, 228, .85); }
.footer__tag em { color: var(--gold-2); }
.footer__col h3 { font-size: 10.5px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-2); margin-bottom: 18px; }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14.5px; line-height: 1.55; color: rgba(244, 238, 228, .8); }
.footer a { transition: color .3s; }
.footer a:hover { color: var(--gold-3); }
.footer__giant {
  margin-top: clamp(50px, 7vw, 100px); text-align: center; white-space: nowrap; user-select: none;
  font-family: var(--serif); font-weight: 300; font-size: 30vw; line-height: .76; letter-spacing: .04em;
  color: transparent; -webkit-text-stroke: 1px rgba(200, 169, 111, .4);
  transform: translateY(6%);
}
.footer__bottom { position: relative; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 22px; border-top: 1px solid var(--line-light); font-size: 12px; letter-spacing: .06em; color: rgba(244, 238, 228, .6); background: var(--choc); }
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 28px; }

@media (max-width: 900px) { .footer__top { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer__top { grid-template-columns: 1fr; } }

/* ---------------- Nút nổi ---------------- */
.fab {
  position: fixed; z-index: 85;
  right: max(clamp(14px, 2.2vw, 32px), env(safe-area-inset-right));
  bottom: max(clamp(14px, 2.2vw, 32px), env(safe-area-inset-bottom));
  transition: opacity .5s, transform .7s var(--ease-out), visibility 0s;
}
.fab__in {
  display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 24px 0 20px; border-radius: 999px;
  background: var(--choc); color: var(--paper);
  font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 18px 40px -14px rgba(28, 17, 13, .6), inset 0 0 0 1px rgba(200, 169, 111, .7);
  transition: background-color .4s;
}
/* 03/10/2026: bỏ đỏ rượu vang → nâu socola viền vàng đồng (cặp với nút "Gọi ngay" vàng đồng bên trái) */
.fab:hover .fab__in, .fab:focus-visible .fab__in { background: var(--choc-2); }
.fab__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-2); animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(200, 169, 111, .7); } 70%, 100% { box-shadow: 0 0 0 10px rgba(200, 169, 111, 0); } }
.fab.is-hidden, html.intro-on .fab, html.lb-open .fab, html.menu-open .fab {
  opacity: 0; visibility: hidden; transform: translateY(24px);
  transition: opacity .4s, transform .5s var(--ease-out), visibility 0s linear .5s;
}
@media (max-width: 520px) { .fab__in { min-height: 50px; padding: 0 20px 0 16px; font-size: 11px; } }

/* ---------------- Con trỏ nhãn ---------------- */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 150; pointer-events: none;
  width: 86px; height: 86px; margin: -43px 0 0 -43px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper); color: var(--ink); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .35);
  font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  opacity: 0; transform: scale(.2); visibility: hidden;
}
.cursor.on-dark { background: var(--gold-2); color: var(--choc); }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ---------------- Lightbox / gallery ---------------- */
.lb { position: fixed; inset: 0; z-index: 200; color: var(--paper); }
.lb[hidden] { display: none; }
.lb__bg { position: absolute; inset: 0; background: #140b09; }
.lb__drape { position: absolute; top: 0; bottom: 0; width: calc(50% + 2px); z-index: 4; background: var(--silk); background-color: var(--silk-base); transform: scaleX(0); will-change: transform; pointer-events: none; }
.lb__drape--l { left: 0; transform-origin: 0 50%; box-shadow: inset -1px 0 0 rgba(244, 238, 228, .9), inset -40px 0 50px -30px var(--silk-shade); }
.lb__drape--r { right: 0; transform-origin: 100% 50%; box-shadow: inset 1px 0 0 rgba(244, 238, 228, .9), inset 40px 0 50px -30px var(--silk-shade); }
.lb__inner { position: relative; z-index: 2; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 27vw, 420px); }
.lb__stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; padding: clamp(18px, 3vw, 56px) clamp(70px, 6vw, 96px); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.lb__img { max-width: 100%; max-height: calc(100vh - 2 * clamp(18px, 3vw, 56px)); max-height: calc(100svh - 2 * clamp(18px, 3vw, 56px)); width: auto; height: auto; object-fit: contain; box-shadow: 0 40px 100px -40px #000; -webkit-user-drag: none; }
.lb__nav { position: absolute; top: 50%; margin-top: -26px; z-index: 2; }
.lb__nav--prev { left: clamp(10px, 1.4vw, 24px); }
.lb__nav--next { right: clamp(10px, 1.4vw, 24px); }
.lb__count { position: absolute; left: clamp(18px, 2vw, 32px); bottom: clamp(14px, 2vw, 28px); font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--gold-3); }
.lb__side {
  display: flex; flex-direction: column; gap: 16px; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(80px, 9vh, 100px) clamp(22px, 2.6vw, 40px) clamp(22px, 3vw, 40px);
  border-left: 1px solid var(--line-light); background: rgba(28, 17, 13, .6);
}
.lb__title { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: clamp(2.2rem, 3.4vw, 3.4rem); line-height: 1.02; }
.lb__desc { font-size: 14.5px; color: rgba(244, 238, 228, .76); }
.lb__desc:empty, .lb__cap:empty { display: none; }
.lb__cap { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-2); }
.lb__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 4px; }
.lb__thumb { position: relative; aspect-ratio: 3 / 4; overflow: hidden; opacity: .45; transition: opacity .3s; background: #2a1612; }
.lb__thumb img { width: 100%; height: 100%; object-fit: cover; }
.lb__thumb:hover { opacity: .8; }
.lb__thumb[aria-current="true"] { opacity: 1; outline: 1px solid var(--gold-2); outline-offset: 2px; }
.lb__more { align-self: flex-start; color: var(--gold-3); }
.lb__more[hidden] { display: none; }
.lb__more:hover, .lb__more:focus-visible { color: var(--paper); }
.lb__cta { margin-top: auto; align-self: stretch; }
.lb__close {
  position: absolute; z-index: 3; top: clamp(14px, 2vw, 26px); right: clamp(14px, 2vw, 26px);
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(244, 238, 228, .32); background: rgba(20, 11, 9, .5); color: var(--paper);
  transition: background-color .4s, color .4s, transform .6s var(--ease-out);
}
.lb__close:hover { background: var(--paper); color: var(--choc); transform: rotate(90deg); }

@media (max-width: 900px) {
  .lb__inner { display: flex; flex-direction: column; }
  .lb__stage { flex: 1 1 auto; padding: 70px 12px 44px; }
  .lb__img { max-height: 100%; }
  .lb__nav { top: auto; bottom: 8px; margin-top: 0; width: 44px; height: 44px; }
  .lb__nav--prev { left: auto; right: 64px; }
  .lb__nav--next { right: 12px; }
  .lb__count { bottom: 18px; left: 16px; }
  .lb__side { flex: none; max-height: 40vh; padding: 18px 16px max(18px, env(safe-area-inset-bottom)); gap: 10px; border-left: 0; border-top: 1px solid var(--line-light); }
  .lb__title { font-size: 1.9rem; }
  .lb__desc { display: none; }
  .lb__thumbs { display: flex; overflow-x: auto; gap: 6px; scrollbar-width: none; }
  .lb__thumbs::-webkit-scrollbar { display: none; }
  .lb__thumb { flex: 0 0 52px; }
  .lb__cta { margin-top: 6px; min-height: 46px; }
  .lb__more { padding-block: 8px; }
}

/* ---------------- Không GSAP / giảm chuyển động ---------------- */
html.reduce-motion .marquee__track { animation: none; }
html.reduce-motion .pjx-grid { --drift: 0px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}

/* ---------------- Placeholder TBC (dữ liệu chưa chốt) ----------------
   Xem trước (AURA_SHOW_TBC = true): viền vàng đứt nét + nhãn "TBC".
   Launch (AURA_SHOW_TBC = false): main.js thêm class "hide-tbc" vào <html> → ẩn mọi [data-tbc].
   <html data-show-tbc="false"> → script trong <head> thêm "hide-tbc" ngay trước khi vẽ trang (không chờ main.js);
   không có JavaScript → <noscript><style> trong <head> ẩn [data-tbc]. */
[data-tbc] { position: relative; outline: 1px dashed var(--gold); outline-offset: 6px; }
[data-tbc]::after {
  content: "TBC"; position: absolute; z-index: 2; top: -14px; right: -6px; pointer-events: none;
  padding: 3px 7px; border-radius: 2px; background: var(--gold-ink); color: var(--paper);
  font-family: var(--sans); font-size: 9px; font-weight: 600; font-style: normal; line-height: 1; letter-spacing: .2em; text-transform: uppercase;
}
[data-theme="dark"] [data-tbc] { outline-color: var(--gold-2); }
[data-theme="dark"] [data-tbc]::after { background: var(--gold-2); color: var(--choc); }
/* biến thể trong dòng chữ (FAQ, footer): nhãn TBC đứng ngay sau chữ thay vì nổi ở góc */
[data-tbc].tbc-inline { outline-offset: 3px; }
[data-tbc].tbc-inline::after { position: static; display: inline-block; margin-left: 8px; vertical-align: .12em; }
html.hide-tbc [data-tbc] { display: none !important; }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Hero: ảnh nền + lớp phủ không bị "bôi chọn" (Safari tô màu chọn lên cả ảnh), màu chọn chữ trong hero nhẹ (vàng mờ) */
.hero__bg, .hero__bgimg, .hero__veil, .strip__card img { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.hero ::selection { background: rgba(200, 169, 111, .32); color: var(--paper); }

/* ---------------- (01) Trụ cột — 3 ảnh ghép (03/10/2026) ----------------
   Điện thoại: bộ ảnh gần tràn viền, chữ bên dưới. Máy tính (≥ 901px): mỗi trụ cột một hàng — ảnh 7 phần · chữ 5 phần, hàng chẵn đảo bên.
   Ảnh trong ô cao 116% để parallax ([data-parallax] của main.js, ±6%) không lộ mép; không transition để cuộn không trễ. */
.pillar__fig--trio { aspect-ratio: auto; overflow: visible; background: none; transform-style: flat; margin-bottom: 26px; }
.trio { display: grid; gap: clamp(8px, 1.1vw, 14px); }
.trio__cell { position: relative; display: block; overflow: hidden; background: var(--paper-3); }
.trio__cell picture { display: contents; }
.trio__cell img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; transition: none; }
.pillar:hover .trio__cell img { transform: none; }
.trio--wide { grid-template-columns: 1fr 1fr; }
.trio--wide .trio__cell--a { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
.trio--wide .trio__cell--b, .trio--wide .trio__cell--c { aspect-ratio: 4 / 5; }
.trio--tall { grid-template-columns: 1.4fr 1fr; }
.trio--tall .trio__cell--a { grid-row: 1 / span 2; }
.trio--tall .trio__cell--b, .trio--tall .trio__cell--c { aspect-ratio: 4 / 5; }

@media (min-width: 901px) {
  .pillars { grid-template-columns: 1fr; gap: clamp(90px, 9vw, 150px); }
  .pillar:nth-child(n) { margin-top: 0; }
  .pillar { display: grid; grid-template-columns: 7fr 5fr; grid-template-rows: 1fr auto auto auto 1fr; column-gap: clamp(36px, 5vw, 88px); }
  .pillar > .pillar__fig { grid-column: 1; grid-row: 1 / -1; margin-bottom: 0; }
  .pillar > .pillar__num { grid-column: 2; grid-row: 2; }
  .pillar > h3 { grid-column: 2; grid-row: 3; font-size: clamp(2rem, 3vw, 2.9rem); }
  .pillar > p { grid-column: 2; grid-row: 4; font-size: 16.5px; max-width: 38ch; }
  .pillar:nth-child(even) { grid-template-columns: 5fr 7fr; }
  .pillar:nth-child(even) > .pillar__fig { grid-column: 2; }
  .pillar:nth-child(even) > .pillar__num, .pillar:nth-child(even) > h3, .pillar:nth-child(even) > p { grid-column: 1; }
}
@media (max-width: 900px) {
  .pillars { gap: 72px; }
  .pillar__fig--trio { aspect-ratio: auto; margin-inline: calc(8px - var(--gutter)); margin-bottom: 22px; }
  .pillar h3 { font-size: clamp(1.9rem, 7.6vw, 2.4rem); }
  .pillar p { font-size: 16px; max-width: 40ch; }
}

/* ---------------- (01) Về Aura — một ảnh trong khung vòm (03/10/2026) ----------------
   Khung vòm 3:4 (đỉnh bán nguyệt) + viền chỉ vàng mảnh bên trong như ô cửa lễ đường; chú thích chữ hoa giãn bên dưới.
   Máy tính: ảnh 5 phần · chữ 6 phần, căn giữa theo chiều dọc. Điện thoại: khung vòm trọn bề ngang, chữ bên dưới. */
.about__body { grid-template-columns: 5fr 6fr; gap: clamp(44px, 7vw, 120px); }
.about__media { padding-bottom: 0; max-width: 560px; }
.about__arch {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--paper-3);
  border-radius: 50% 50% 0 0 / 37.5% 37.5% 0 0;
  box-shadow: 0 40px 80px -50px rgba(43, 27, 21, .45);
}
.about__arch img { object-position: 50% 55%; }
.about__arch::after {
  content: ""; position: absolute; inset: clamp(10px, 1.2vw, 16px); z-index: 1; pointer-events: none;
  border: 1px solid rgba(226, 205, 162, .8); border-radius: 50% 50% 0 0 / 37.5% 37.5% 0 0;
}
.about__cap { display: flex; align-items: center; gap: 14px; margin-top: 18px; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.about__cap::before { content: ""; flex: none; width: 32px; height: 1px; background: var(--gold); }
.about__cap a { color: var(--ink-3); text-decoration: none; transition: color .3s; }
.about__cap a:hover, .about__cap a:focus-visible { color: var(--ink); }
.about__text { max-width: 560px; }
@media (max-width: 900px) {
  .about__body { grid-template-columns: 1fr; gap: 36px; }
  .about__media { max-width: none; }
  .about__cap { margin-top: 14px; }
}

/* ---------------- (04) Danh mục dự án — tiêu đề nhóm (03/10/2026) ---------------- */
.pjx-group { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; padding-top: clamp(28px, 4vw, 56px); border-top: 1px solid var(--line); }
.pjx-group:first-child { padding-top: 0; border-top: 0; }
.pjx-group__title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 2.8vw, 2.4rem); line-height: 1.15; }
.pjx-group__n { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); }
@media (max-width: 767px) { .pjx-group { padding-top: 26px; } .pjx-group__title { font-size: 1.55rem; } }

/* ===== (gộp từ vows.css — khung vòm hero + dải chuyển tiếp) ===== */
/* =====================================================================
   "Chữ lớn đan ảnh"
   Thay dòng marquee phẳng bằng hai hàng chữ lớn chạy ngược chiều (chất liệu · nghi lễ), đan những
   ô ảnh thật của dự án (khung vòm như ô cửa lễ đường, viên, tròn). Hero thu vào một khung cửa vòm,
   dải giấy ngà trượt lên che chân vòm rồi nối liền mục (01) Về Aura — không còn khoảng trống chết.
   Nạp SAU style.css. Các lớp do vows.js bật:
     html.arch-pin   hero được giữ (sticky) + clip-path khung vòm (GSAP, không giảm chuyển động, màn cao ≥ 520px)
     html.arch-light header dùng màu nền sáng khi dưới header đã là giấy ngà
     .vows--live           hai hàng chữ chạy (vows.js đặt transform); thiếu lớp này = bố cục tĩnh so le
   ===================================================================== */

/* ---------------- (01) Về Aura: bỏ khoảng trống chết phía trên ---------------- */
.about { padding-top: clamp(48px, 5.6vw, 92px); }

/* ---------------- Hai hàng chữ lớn đan ảnh ---------------- */
.vows {
  position: relative; z-index: 3;
  overflow: hidden;
  padding-block: clamp(34px, 3.4vw, 52px) clamp(38px, 3.2vw, 52px);   /* chừa chỗ cho chú thích ảnh (trên hàng 1 · dưới hàng 2) */
  background: var(--paper);
  border-top: 1px solid rgba(160, 124, 69, .55);   /* "bậu cửa" chỉ vàng — cắt ngang chân khung vòm */
  border-bottom: 1px solid var(--line);
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* hai mép mờ vào nền giấy — chữ trôi ra khỏi khung mềm, không cắt gắt */
.vows::before, .vows::after {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 5; width: clamp(20px, 6vw, 110px); pointer-events: none;
}
.vows::before { left: 0; background: linear-gradient(90deg, var(--paper), rgba(244, 238, 228, 0)); }
.vows::after { right: 0; background: linear-gradient(270deg, var(--paper), rgba(244, 238, 228, 0)); }

.vows__row { position: relative; display: flex; white-space: nowrap; }
.vows__row--a {
  font-size: clamp(3.4rem, 9.4vw, 9.8rem);
  padding-block: clamp(6px, 1.1vw, 18px) clamp(10px, 1.5vw, 24px);
  border-bottom: 1px solid var(--line);
}
/* hạt kim cương rỗng giữa đường chỉ phân cách hai hàng */
.vows__row--a::after {
  content: ""; position: absolute; z-index: 1; left: 50%; bottom: -4px; width: 7px; height: 7px; margin-left: -3.5px;
  background: var(--paper); border: 1px solid var(--gold); transform: rotate(45deg);
}
.vows__row--b {
  font-size: clamp(2.35rem, 5.2vw, 5.6rem);
  padding-top: clamp(12px, 1.5vw, 24px);
  justify-content: flex-end;          /* tĩnh: hàng dưới canh phải → so le với hàng trên */
}
.vows__skew, .vows__track, .vows__set { display: flex; flex: none; }
.vows__skew { transform-origin: 50% 50%; }
.vows__set { align-items: center; gap: .3em; padding-right: .3em; line-height: 1.18; }
/* tĩnh (giảm chuyển động / không JS): hàng trên canh lề trái, hàng dưới canh phải — bố cục so le như trang tạp chí */
.vows:not(.vows--live) .vows__row--a { padding-left: var(--gutter); }
.vows--live .vows__row--b { justify-content: flex-start; }
.vows--live .vows__track { will-change: transform; }

/* chữ: đậm mực · nghiêng đỏ rượu · viền chỉ (hàng trên) — nghiêng mực · viền chỉ vàng · nghiêng đỏ rượu (hàng dưới) */
.vw { font-family: var(--serif); font-weight: 300; letter-spacing: -.02em; color: var(--ink); }
.vw--italic, .vw--wine { font-style: italic; font-weight: 400; letter-spacing: -.012em; color: var(--wine); }
.vw--ink { font-style: italic; color: var(--ink); }
.vw--line { font-weight: 400; color: transparent; -webkit-text-stroke: 1px var(--ink-2); }
.vows__row--b .vw--line { font-style: italic; -webkit-text-stroke: 1px var(--gold); }
@supports not (-webkit-text-stroke: 1px #000) {
  .vw--line { color: var(--ink-3); }
}
.vows__orn { flex: none; width: .16em; height: .16em; margin-inline: .08em; background: var(--gold); transform: rotate(45deg); }

/* ô ảnh: khung vòm (ảnh dọc) · viên (ảnh ngang) · tròn — viền giấy + chỉ vàng như khung tranh */
.vchip { position: relative; flex: none; display: block; }
.vchip--arch { width: .6em; height: .82em; border-radius: .3em .3em .05em .05em; }
.vchip--pill { width: 1.18em; height: .64em; border-radius: .32em; }
.vchip--round { width: .76em; height: .76em; border-radius: 50%; }
.vows__row--b .vchip--arch { width: .7em; height: .96em; border-radius: .35em .35em .06em .06em; }
.vows__row--b .vchip--pill { width: 1.36em; height: .74em; border-radius: .37em; }
.vows__row--b .vchip--round { width: .9em; height: .9em; }
.vchip__frame {
  position: relative; display: block; width: 100%; height: 100%; overflow: hidden;
  border-radius: inherit; background: var(--paper-3);
  box-shadow: 0 0 0 .045em var(--paper), 0 0 0 calc(.045em + 1px) rgba(160, 124, 69, .5);
  transform: translateZ(0);                  /* Safari: giữ bo góc khi ảnh bên trong có transform */
}
.vchip img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.2s var(--ease-out); }

/* chú thích nhỏ: tên dự án (hàng trên: nổi phía trên ảnh · hàng dưới: phía dưới — luôn ra ngoài, không đè hàng kia) */
.vchip__cap {
  position: absolute; left: 50%; bottom: calc(100% + 14px); z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 13px 6px; border: 1px solid rgba(160, 124, 69, .42); border-radius: 999px; background: var(--paper);
  font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 15px; line-height: 1.2; letter-spacing: .01em;
  color: var(--ink); white-space: nowrap; pointer-events: none;
  box-shadow: 0 14px 30px -18px rgba(43, 27, 21, .45);
  opacity: 0; transform: translate(-50%, 6px);
  transition: opacity .4s ease, transform .6s var(--ease-out);
}
.vchip__cap::before { content: ""; flex: none; width: 4px; height: 4px; background: var(--gold); transform: rotate(45deg); }
.vows__row--b .vchip__cap { bottom: auto; top: calc(100% + 14px); transform: translate(-50%, -6px); }

/* máy tính: rê chuột → ảnh nở nhẹ + hiện tên dự án (hàng chữ chậm lại — vows.js) */
@media (hover: hover) and (pointer: fine) {
  .vchip { transition: transform .8s var(--ease-out); }
  .vchip:hover { z-index: 2; transform: scale(1.14); }
  .vchip:hover img { transform: scale(1); }
  .vchip:hover .vchip__cap { opacity: 1; transform: translate(-50%, 0); }
}
/* điện thoại: chạm một ảnh → hiện tên ~2.4s (không mở trang, không chặn cuộn) */
.vchip.is-peek .vchip__cap { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 640px) {
  .vows { padding-block: 36px 42px; }
  .vows__row--a .vchip--arch { width: .74em; height: 1em; border-radius: .37em .37em .06em .06em; }
  .vows__row--a .vchip--pill { width: 1.36em; height: .76em; border-radius: .38em; }
  .vows__row--a .vchip--round { width: .9em; height: .9em; }
  .vows__row--b .vchip--arch { width: .8em; height: 1.08em; border-radius: .4em .4em .07em .07em; }
  .vows__row--b .vchip--pill { width: 1.5em; height: .82em; border-radius: .41em; }
  .vows__row--b .vchip--round { width: 1em; height: 1em; }
  .vchip__cap { font-size: 13.5px; padding: 4px 11px 5px; bottom: calc(100% + 10px); }
  .vows__row--b .vchip__cap { top: calc(100% + 10px); }
}

/* ---------------- Hero → khung cửa vòm (chỉ khi vows.js bật html.arch-pin) ----------------
   .archway = hero (sticky) + .archway__space (quãng cuộn D). Trong quãng D ảnh hero thu dần vào khung vòm
   (clip-path inset + bo elip, vows.js); dải .vows kéo lên M px (margin âm) → trượt qua chân vòm đúng lúc vòm thành hình. */
.hero__arch { display: none; }
/* --arch-o: phần hero cao hơn khung nhìn (điện thoại) → cuộn hết hero như thường rồi mới dính lại ở đáy khung nhìn */
html.arch-pin .hero { position: sticky; top: calc(-1 * var(--arch-o, 0px)); }
html.arch-pin .archway__space { height: var(--arch-d, 0px); }
/* dải giấy nằm "trước" ô cửa: bóng rất mềm hắt ngược lên ảnh như một tờ giấy dày đặt chồng lên */
html.arch-pin .vows { margin-top: calc(-1 * var(--arch-m, 0px)); box-shadow: 0 -22px 44px -30px rgba(28, 17, 13, .42); }

/* chỉ vàng kép viền trong khung vòm + hạt kim cương ở đỉnh vòm (như đường chỉ nẹp khung cửa lễ đường) */
html.arch-pin .hero__arch {
  display: block; position: absolute; z-index: 2; pointer-events: none;
  left: var(--af-l, 0px); top: var(--af-t, 0px); width: var(--af-w, 0px); bottom: -1px;
  border: 1px solid rgba(226, 205, 162, .62); border-bottom: 0;
  border-radius: var(--af-rx, 0px) var(--af-rx, 0px) 0 0 / var(--af-ry, 0px) var(--af-ry, 0px) 0 0;
  opacity: var(--arch-f, 0);
}
.hero__arch::before {
  content: ""; position: absolute; inset: 6px 6px 0; border: 1px solid rgba(226, 205, 162, .22); border-bottom: 0;
  border-radius: calc(var(--af-rx, 6px) - 6px) calc(var(--af-rx, 6px) - 6px) 0 0 / calc(var(--af-ry, 6px) - 6px) calc(var(--af-ry, 6px) - 6px) 0 0;
}
.hero__arch i {
  position: absolute; left: 50%; top: -4px; width: 7px; height: 7px; margin-left: -3.5px;
  background: var(--gold-2); transform: rotate(45deg);
}
/* "bảng khắc" dưới đỉnh vòm: tên không gian trong ảnh (trùng ghi chú .hero__credit — trang trí, aria-hidden) */
.hero__arch-cap {
  position: absolute; left: 50%; top: clamp(18px, 2.4vh, 28px); transform: translateX(-50%);
  font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(14px, 1.15vw, 17px); letter-spacing: .02em;
  color: var(--gold-3); white-space: nowrap; text-shadow: 0 1px 12px rgba(16, 8, 7, .8);
}

/* chữ hero + dải ảnh 3D tan đi khi vòm khép lại (main.js vẫn đẩy chữ lên / mờ .hero__copy như cũ — nhân thêm) */
html.arch-pin:not(.hero-pending) .hero__meta,
html.arch-pin:not(.hero-pending) .hero__title,
html.arch-pin:not(.hero-pending) .hero__row,
html.arch-pin .hero__credit-t { opacity: max(0, calc(1 - var(--arch-p, 0) * 2.6)); }
html.arch-pin .strip { opacity: max(0, calc(1 - var(--arch-p, 0) * 2.2)); }
/* trong khung vòm: lớp phủ nhẹ dần để lễ đường Heart Of Us hiện rõ (bỏ phần phủ nâu thêm khi cuộn của main.js) */
html.arch-pin .hero__veil { opacity: calc(1 - var(--arch-p, 0) * .32); }
html.arch-pin .hero__veil::after { opacity: calc(var(--hero-shade, 0) * (1 - var(--arch-p, 0))); }
.hero.is-arched .hero__copy { pointer-events: none; }
.hero.is-arched .hero__stage { visibility: hidden; pointer-events: none; }
/* bàn phím vẫn tới được nút hero khi vòm đã khép → hiện lại khối chữ đang có focus */
html.arch-pin .hero .hero__copy:has(:focus-visible) > * { opacity: 1 !important; }
html.arch-pin .hero.is-arched .hero__copy:has(:focus-visible) { pointer-events: auto; }

/* header: dưới header đã là giấy ngà quanh khung vòm → màu nền sáng (giống html.corridor-light của style.css) */
html.arch-light:not(.menu-open) .site-header.on-dark { color: var(--ink); }
html.arch-light:not(.menu-open) .site-header.on-dark::before { background: rgba(244, 238, 228, .86); border-color: var(--line); }
html.arch-light:not(.menu-open) .site-header.on-dark .btn--line::before { background: var(--ink); }
html.arch-light:not(.menu-open) .site-header.on-dark .btn--line:hover { color: var(--paper); border-color: var(--ink); }
html.arch-light:not(.menu-open) .site-header.on-dark .brand__logo--ink { opacity: 1; }
html.arch-light:not(.menu-open) .site-header.on-dark .brand__logo--paper { opacity: 0; }
html.arch-light:not(.menu-open) .site-header.on-dark :focus-visible { outline-color: var(--wine); }

/* ---------------- Giảm chuyển động: hai hàng đứng yên, ảnh không nở (chú thích vẫn hiện khi rê / chạm) ---------------- */
html.reduce-motion .vchip,
html.reduce-motion .vchip:hover,
html.reduce-motion .vchip img { transform: none; transition: none; }
html.reduce-motion .vchip__cap { transition: opacity .2s; }

/* ---------- Dải chuyển tiếp lặng (03/10/2026: bỏ hai hàng chữ đan ảnh) ----------
   Giấy ngà + nét chỉ vàng mảnh có hình thoi ở giữa; vẫn trượt lên che chân khung vòm như trước. */
.vows--quiet { padding-block: 0; min-height: clamp(110px, 17vh, 180px); display: grid; place-items: center; border-bottom: 0; }
.vows--quiet::before, .vows--quiet::after { display: none; }
.vows__rule { position: relative; display: block; width: min(320px, 62vw); height: 1px; background: linear-gradient(90deg, rgba(200, 169, 111, 0), var(--gold-2) 30%, var(--gold-2) 70%, rgba(200, 169, 111, 0)); transform-origin: 50% 50%; }
.vows__rule i { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -4px 0 0 -4px; border: 1px solid var(--gold); background: var(--paper); transform: rotate(45deg); }

/* ---------------- Nút nổi "Gọi ngay" (03/10/2026) — góc trái dưới, cân với "Nhận báo giá" bên phải ---------------- */
.fab-call {
  position: fixed; z-index: 85;
  left: max(clamp(14px, 2.2vw, 32px), env(safe-area-inset-left));
  bottom: max(clamp(14px, 2.2vw, 32px), env(safe-area-inset-bottom));
  transition: opacity .5s, transform .7s var(--ease-out), visibility 0s;
}
.fab-call__in {
  display: inline-flex; align-items: center; gap: 9px; min-height: 54px; padding: 0 22px 0 18px; border-radius: 999px;
  background: var(--gold-2); color: var(--choc);
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 18px 40px -14px rgba(28, 17, 13, .55), inset 0 0 0 1px rgba(255, 246, 230, .45);
  transition: background-color .4s;
}
/* vàng đồng sáng (cùng nút "Đặt lịch tư vấn") — dễ nhận diện; biểu tượng điện thoại rung nhẹ mỗi ~4s như đang đổ chuông */
.fab-call__ic { color: var(--choc); flex: none; transform-origin: 50% 60%; animation: ring 4s ease-in-out 1.5s infinite; }
@keyframes ring { 0%, 76%, 100% { transform: rotate(0); } 80% { transform: rotate(-14deg); } 84% { transform: rotate(12deg); } 88% { transform: rotate(-10deg); } 92% { transform: rotate(8deg); } 96% { transform: rotate(-4deg); } }
.fab-call:hover .fab-call__in, .fab-call:focus-visible .fab-call__in { background: var(--gold-3); }
html.reduce-motion .fab-call__ic { animation: none; }
@media (prefers-reduced-motion: reduce) { .fab-call__ic { animation: none; } }
.fab.is-hidden + .fab-call, html.intro-on .fab-call, html.lb-open .fab-call, html.menu-open .fab-call {
  opacity: 0; visibility: hidden; transform: translateY(24px);
  transition: opacity .4s, transform .5s var(--ease-out), visibility 0s linear .5s;
}
@media (max-width: 520px) { .fab-call__in { min-height: 50px; padding: 0 18px 0 15px; font-size: 11px; } }

/* ---------------- Nút nổi "Nhắn tin" (26/10/2026) — góc phải, ngay trên "Nhận báo giá"; mở Messenger (bot trả lời 24/24) ---------------- */
.fab-msg {
  position: fixed; z-index: 85;
  right: max(clamp(14px, 2.2vw, 32px), env(safe-area-inset-right));
  bottom: calc(max(clamp(14px, 2.2vw, 32px), env(safe-area-inset-bottom)) + 66px);
  transition: opacity .5s, transform .7s var(--ease-out), visibility 0s;
}
.fab-msg__in {
  display: inline-flex; align-items: center; gap: 9px; min-height: 54px; padding: 0 22px 0 18px; border-radius: 999px;
  background: var(--paper); color: var(--choc);
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 18px 40px -14px rgba(28, 17, 13, .55), inset 0 0 0 1px rgba(160, 124, 69, .75);
  transition: background-color .4s;
}
.fab-msg__ic { flex: none; color: var(--choc); }
.fab-msg:hover .fab-msg__in, .fab-msg:focus-visible .fab-msg__in { background: #fff; }
.fab.is-hidden ~ .fab-msg, html.intro-on .fab-msg, html.lb-open .fab-msg, html.menu-open .fab-msg {
  opacity: 0; visibility: hidden; transform: translateY(24px);
  transition: opacity .4s, transform .5s var(--ease-out), visibility 0s linear .5s;
}
@media (max-width: 520px) {
  .fab-msg { bottom: calc(max(clamp(14px, 2.2vw, 32px), env(safe-area-inset-bottom)) + 60px); }
  .fab-msg__in { min-height: 50px; padding: 0 18px 0 15px; font-size: 11px; }
}

/* ---------------- Rút gọn bản điện thoại (03/10/2026) — trang ~35 → ~26 màn hình, máy tính giữ nguyên ----------------
   · đoạn giới thiệu dài: .l-full (máy tính) / .l-short (điện thoại, 1 câu)
   · Danh mục dự án: 6 thẻ (main.js Portfolio ẩn .pjx-card--more) + nút "Xem cả 18 dự án"
   · Cấp độ thiết kế + Đánh giá: hàng thẻ vuốt ngang (thẻ kế ló 20% — gợi ý vuốt)
   · Liên hệ: phiếu báo giá lên trước danh sách số điện thoại / địa chỉ
   · khoảng đệm trên / dưới mỗi phần 100px → 72px */
.l-short { display: none; }
.pjx-more { display: flex; justify-content: center; margin-top: 40px; }
.pjx-more[hidden] { display: none; }
@media (max-width: 639px) {
  .l-full { display: none; }
  .l-short { display: inline; }

  .folio, .giatien, .services, .tiers, .process, .proof, .faq, .contact { padding-block: 72px; }

  .tiers__dims { display: none; }
  .tiers__list, .quotes {
    display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none;
  }
  .tiers__list::-webkit-scrollbar, .quotes::-webkit-scrollbar { display: none; }
  .tiers__list { padding-block: 4px 34px; margin-bottom: -34px; }   /* chừa chỗ bóng đổ của thẻ */
  .tier, .quote { flex: 0 0 80%; scroll-snap-align: start; }
  .tier:nth-child(n) { margin-top: 0; }
  .quote { padding: 34px 26px 30px; }
  .quote blockquote p { font-size: 1.75rem; }
  .quote--sm blockquote p { font-size: 1.35rem; }
  .quote__mark { font-size: 6rem; }
  .quote--sm .quote__mark { font-size: 4.5rem; }

  .contact__grid { display: flex; flex-direction: column; gap: 0; }
  .contact__intro { display: contents; }
  .contact__form { order: 1; margin-top: 32px; }
  .contact__list { order: 2; margin-top: 48px; }
  .contact__quick { order: 3; }
}