/* Trang chủ được dựng lại theo huongdong-homepage-standalone.html.
   Tất cả luật đều được giới hạn vào data-page="home" để bảy nhóm trang
   bên trong tiếp tục dùng nguyên vỏ giao diện hiện tại khi Swup điều hướng. */

body:has(main[data-page="home"]) {
  --paper: #fffbeb;
  --paper-deep: #f4ead1;
  --ink: #3d2b1a;
  --ink-soft: #6f5a43;
  --jade: #173f37;
  --red: #c92332;
  --red-dark: #9f1d28;
  --gold: #d6ad49;
  --gold-soft: #ecd58d;
  --line: rgba(85, 58, 31, 0.18);
  min-width: 320px;
  color: var(--ink);
  background: var(--paper);
  font-family: "Be Vietnam Pro", Inter, system-ui, sans-serif;
  overflow-x: hidden;
}

body:has(main[data-page="home"]) .site-header {
  position: absolute;
  z-index: 40;
  top: 0;
  left: 0;
  display: block;
  width: auto;
  min-height: 0;
  padding: clamp(1rem, 2.8vw, 2.8rem) clamp(1rem, 3.4vw, 3.6rem);
  border: 0;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
  pointer-events: none;
}

body:has(main[data-page="home"]) .brand {
  padding: 0.45rem 0.7rem;
  border: 1px solid rgb(156 109 46 / 22%);
  border-radius: 4px;
  background: var(--paper);
  box-shadow: 0 8px 22px rgb(61 43 26 / 12%);
  pointer-events: auto;
}

body:has(main[data-page="home"]) .brand img {
  width: clamp(96px, 8vw, 124px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 5px 11px rgb(61 43 26 / 12%));
}

main[data-page="home"] .button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.45rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

main[data-page="home"] .button-primary {
  background: var(--red);
  color: #fffdf5;
}

@media (hover: hover) {
  main[data-page="home"] .button-primary:hover {
    background: var(--red-dark);
    transform: translateY(-2px);
  }
}

/* Chỉ ẩn từ 901px trở lên. Dưới đó trang chủ dùng lại nút ba gạch + panel của
   main.css — xem khối "Thanh mục lục ba gạch cho mobile" ở cuối tệp. Luật này
   dùng :is() nên độ ưu tiên tính theo #main-nav; ghi đè bằng selector class ở
   dưới sẽ thua kể cả khi cùng !important, nên thu hẹp ngay tại đây. */
@media (min-width: 901px) {
  body:has(main[data-page="home"]) :is(#main-nav, .menu-toggle) {
    display: none !important;
  }
}

main[data-page="home"] {
  color: var(--ink);
  background: var(--paper);
}

main[data-page="home"] *,
main[data-page="home"] *::before,
main[data-page="home"] *::after {
  box-sizing: border-box;
}

main[data-page="home"] img {
  display: block;
  max-width: 100%;
}

main[data-page="home"] h1,
main[data-page="home"] h2,
main[data-page="home"] h3,
main[data-page="home"] p,
main[data-page="home"] dl,
main[data-page="home"] dd,
main[data-page="home"] blockquote {
  margin-top: 0;
}

main[data-page="home"] h1,
main[data-page="home"] h2,
main[data-page="home"] h3 {
  color: var(--ink);
  font-family: "DFVN TAN Harmoni", "Tan Harmoni", "Fontasia VH", Georgia, serif;
  font-weight: 400;
  text-wrap: balance;
}

main[data-page="home"] h2 {
  margin-bottom: 1.25rem;
  font-size: clamp(2.8rem, 5vw, 5.5rem);
  line-height: 0.98;
}

main[data-page="home"] h3 {
  font-size: clamp(1.7rem, 2.4vw, 2.6rem);
  line-height: 1.08;
}

main[data-page="home"] p,
main[data-page="home"] li,
main[data-page="home"] dd {
  line-height: 1.75;
}

main[data-page="home"] .button-secondary {
  border-color: #d3aa43;
  background: #f1c95e;
  color: var(--ink);
}

@media (hover: hover) {
  main[data-page="home"] .button-secondary:hover {
    background: #e5b941;
    transform: translateY(-2px);
  }
}

main[data-page="home"] .hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(360px, 0.86fr) minmax(620px, 1.35fr);
  align-items: center;
  min-height: clamp(820px, 100svh, 1024px);
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--paper);
}

main[data-page="home"] .hero::before,
main[data-page="home"] .hero::after {
  display: none;
}

main[data-page="home"] .hero-copy {
  position: relative;
  z-index: 4;
  max-width: 590px;
  margin-left: clamp(1.5rem, 8.6vw, 8.8rem);
  padding: clamp(8.5rem, 17vh, 10.5rem) 0 clamp(4.5rem, 8vh, 6rem);
}

main[data-page="home"] .eyebrow {
  margin-bottom: 1rem;
  color: #9c6d2e;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

main[data-page="home"] .hero h1 {
  max-width: 590px;
  margin: 0 0 1.25rem;
  font-size: clamp(4rem, 5.65vw, 5.85rem);
  line-height: 0.86;
  letter-spacing: -0.025em;
}

main[data-page="home"] .hero-lede {
  max-width: 590px;
  margin-bottom: 1.65rem;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.2vw, 1.14rem);
}

main[data-page="home"] .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 2rem;
}

main[data-page="home"] .proof-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 580px;
  margin: 0;
  border-top: 1px solid var(--line);
}

main[data-page="home"] .proof-row div {
  padding: 1.25rem 1.25rem 0 0;
}

main[data-page="home"] .proof-row div + div {
  padding-left: 1.25rem;
  border-left: 1px solid var(--line);
}

main[data-page="home"] .proof-row dt,
main[data-page="home"] .legend-milestones dt {
  font-family: "DFVN TAN Harmoni", "Tan Harmoni", Georgia, serif;
  font-size: 2.8rem;
  line-height: 1;
}

main[data-page="home"] .proof-row dd {
  margin: 0.35rem 0 0;
  color: var(--ink-soft);
  font-size: 0.72rem;
  line-height: 1.35;
  text-transform: uppercase;
}

main[data-page="home"] .hero-visual {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  perspective: 1400px;
  pointer-events: none;
}

main[data-page="home"] .hero-stage,
main[data-page="home"] .hero-stage.hd-hero-parallax-ready {
  width: 100%;
  height: 100%;
  transform: translate3d(calc(var(--hd-hero-x, 0) * 5px), calc(var(--hd-hero-y, 0) * 4px), 0)
    rotateX(calc(var(--hd-hero-y, 0) * -1.5deg)) rotateY(calc(var(--hd-hero-x, 0) * 2deg));
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

main[data-page="home"] .hero-stage picture {
  display: block;
  width: 100%;
  height: 100%;
}

main[data-page="home"] .hero-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  animation: home-hero-float 7s ease-in-out infinite;
  backface-visibility: hidden;
  will-change: transform;
}

@keyframes home-hero-float {
  0%,
  100% { transform: translateZ(18px) scale(1.045); }
  50% { transform: translate3d(0, -5px, 24px) scale(1.052); }
}

main[data-page="home"] .hero-chapter-nav {
  position: absolute;
  z-index: 6;
  top: 51%;
  right: 0;
  display: grid;
  gap: 0.8rem;
  width: clamp(164px, 13vw, 198px);
  transform: translateY(-42%);
}

/* Mỗi thẻ là một mảnh giấy vừa được cắt rời khỏi mép phải màn hình: cạnh
   phải thẳng (còn "dính" vào mép), cạnh trái xẻ răng cưa hai nhát kéo. Lệch
   góc xen kẽ theo chẵn/lẻ để bảy mảnh không trông như in hàng loạt. */
main[data-page="home"] .hero-chapter-nav a {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0.72rem 1.05rem 0.72rem 1.3rem;
  border: 1px solid rgb(156 109 46 / 32%);
  border-right: 0;
  background: var(--paper);
  color: #8c612a;
  clip-path: polygon(14% 0%, 100% 0%, 100% 100%, 14% 100%, 0% 74%, 13% 50%, 0% 26%);
  box-shadow: 3px 6px 0 rgb(156 109 46 / 10%), 0 10px 22px rgb(61 43 26 / 14%);
  font-size: clamp(0.69rem, 0.78vw, 0.78rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 220ms ease, background-color 220ms ease, box-shadow 220ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

main[data-page="home"] .hero-chapter-nav a:nth-child(odd) { transform: rotate(-0.7deg); }
main[data-page="home"] .hero-chapter-nav a:nth-child(even) { transform: rotate(0.6deg); }

main[data-page="home"] .hero-chapter-nav a:focus-visible {
  background: var(--paper-deep);
  color: var(--red-dark);
  box-shadow: 5px 9px 0 rgb(156 109 46 / 14%), 0 14px 30px rgb(61 43 26 / 18%);
  transform: translateX(-10px) rotate(0deg);
}
@media (hover: hover) {
  main[data-page="home"] .hero-chapter-nav a:hover {
    background: var(--paper-deep);
    color: var(--red-dark);
    box-shadow: 5px 9px 0 rgb(156 109 46 / 14%), 0 14px 30px rgb(61 43 26 / 18%);
    transform: translateX(-10px) rotate(0deg);
  }
}

main[data-page="home"] .hero-chapter-nav a:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

html.home-motion-enabled main[data-page="home"] .hero-chapter-nav a {
  opacity: 0;
  transform: translateX(24px) rotateY(-4deg);
}

html.home-motion-enabled.is-ready main[data-page="home"] .hero-chapter-nav a:nth-child(odd) {
  opacity: 1;
  transform: rotate(-0.7deg);
  animation: home-nav-tab-in-odd 760ms cubic-bezier(0.22, 1, 0.36, 1) var(--nav-delay, 260ms) backwards;
}
html.home-motion-enabled.is-ready main[data-page="home"] .hero-chapter-nav a:nth-child(even) {
  opacity: 1;
  transform: rotate(0.6deg);
  animation: home-nav-tab-in-even 760ms cubic-bezier(0.22, 1, 0.36, 1) var(--nav-delay, 260ms) backwards;
}

html.home-motion-enabled.is-ready main[data-page="home"] .hero-chapter-nav a:nth-child(1) { --nav-delay: 260ms; }
html.home-motion-enabled.is-ready main[data-page="home"] .hero-chapter-nav a:nth-child(2) { --nav-delay: 320ms; }
html.home-motion-enabled.is-ready main[data-page="home"] .hero-chapter-nav a:nth-child(3) { --nav-delay: 380ms; }
html.home-motion-enabled.is-ready main[data-page="home"] .hero-chapter-nav a:nth-child(4) { --nav-delay: 440ms; }
html.home-motion-enabled.is-ready main[data-page="home"] .hero-chapter-nav a:nth-child(5) { --nav-delay: 500ms; }
html.home-motion-enabled.is-ready main[data-page="home"] .hero-chapter-nav a:nth-child(6) { --nav-delay: 560ms; }
html.home-motion-enabled.is-ready main[data-page="home"] .hero-chapter-nav a:nth-child(7) { --nav-delay: 620ms; }

@keyframes home-nav-tab-in-odd {
  from { opacity: 0; transform: translateX(24px) rotateY(-4deg); }
  to { opacity: 1; transform: rotate(-0.7deg); }
}
@keyframes home-nav-tab-in-even {
  from { opacity: 0; transform: translateX(24px) rotateY(-4deg); }
  to { opacity: 1; transform: rotate(0.6deg); }
}

main[data-page="home"] .status-note {
  position: absolute;
  z-index: 5;
  top: 1.25rem;
  right: 1.5rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--gold);
  border-radius: 4px;
  background: rgba(255, 251, 235, 0.9);
  color: #9c6d2e;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

html.home-motion-enabled main[data-page="home"] .entrance-copy,
html.home-motion-enabled main[data-page="home"] .entrance-visual {
  opacity: 0;
}

html.home-motion-enabled main[data-page="home"] .entrance-copy { transform: translateY(28px); }
html.home-motion-enabled main[data-page="home"] .entrance-visual { transform: translateY(24px) scale(1.015); }

html.home-motion-enabled.is-ready main[data-page="home"] .entrance-copy,
html.home-motion-enabled.is-ready main[data-page="home"] .entrance-visual {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s ease, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

html.home-motion-enabled.is-ready main[data-page="home"] .entrance-visual { transition-delay: 0.12s; }

main[data-page="home"] .section-pad {
  padding: clamp(5rem, 10vw, 10rem) clamp(1.5rem, 7vw, 8rem);
}

main[data-page="home"] .section-heading.centered {
  max-width: 760px;
  margin: 0 auto clamp(3rem, 6vw, 5rem);
  text-align: center;
}

main[data-page="home"] .pathways { border-top: 1px solid var(--line); }

main[data-page="home"] .path-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3.5rem);
  max-width: 1440px;
  margin: 0 auto;
}

main[data-page="home"] .path-card {
  position: relative;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(161, 118, 49, 0.45);
}

main[data-page="home"] .path-image {
  aspect-ratio: 4 / 3;
  margin-bottom: 1.6rem;
  overflow: hidden;
  border-radius: 18px 18px 4px 4px;
  background: var(--paper-deep);
  box-shadow: 0 18px 38px rgba(63, 43, 23, 0.12);
}

main[data-page="home"] .path-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateZ(22px) scale(1.018);
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) {
  main[data-page="home"] .path-card:hover .path-image img { transform: translateZ(32px) scale(1.04); }
}

main[data-page="home"] .path-label {
  margin-bottom: 0.6rem;
  color: #a36c27;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

main[data-page="home"] .path-card h3 { margin-bottom: 0.8rem; }
main[data-page="home"] .path-card > p:not(.path-label) { color: var(--ink-soft); }

main[data-page="home"] .text-link {
  display: inline-block;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid var(--gold);
  color: #9a6324;
  font-weight: 600;
  text-decoration: none;
}

main[data-page="home"] .image-story {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  background: var(--paper-deep);
}

main[data-page="home"] .story-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate3d(0, var(--depth-offset, 0px), 0) scale(1.045);
  transition: transform 0.14s linear;
  will-change: transform;
}

main[data-page="home"] .story-copy {
  position: relative;
  z-index: 2;
  width: min(580px, 48%);
  padding: clamp(5rem, 10vw, 9rem) 0 clamp(5rem, 10vw, 9rem) clamp(1.5rem, 8vw, 9rem);
}

main[data-page="home"] .story-list,
main[data-page="home"] .quiet-list {
  margin: 2rem 0 2.2rem;
  padding: 0;
  list-style: none;
}

main[data-page="home"] .story-list li {
  display: grid;
  gap: 0.2rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
}

main[data-page="home"] .story-list span,
main[data-page="home"] .quiet-list,
main[data-page="home"] .split-copy > p,
main[data-page="home"] .faq-heading > p,
main[data-page="home"] .product-copy > p:not(.eyebrow, .price) { color: var(--ink-soft); }

main[data-page="home"] .split-section {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  align-items: center;
  gap: clamp(2.5rem, 7vw, 8rem);
  max-width: 1640px;
  margin: 0 auto;
}

main[data-page="home"] .split-copy { max-width: 620px; }

main[data-page="home"] .quiet-list li {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
}

main[data-page="home"] .split-visual {
  margin: 0;
  border-radius: 22px;
  box-shadow: 0 26px 58px rgba(58, 40, 23, 0.15);
}

main[data-page="home"] .split-visual img {
  width: 100%;
  border-radius: 22px;
  transform: translateZ(20px) scale(1.01);
}

main[data-page="home"] .split-visual figcaption {
  margin-top: 0.75rem;
  color: var(--ink-soft);
  font-size: 0.78rem;
  text-align: center;
}

main[data-page="home"] .product-section {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(360px, 0.7fr);
  align-items: stretch;
  gap: clamp(2.5rem, 6vw, 7rem);
  max-width: none;
  background: var(--paper-deep);
}

main[data-page="home"] .product-gallery {
  min-height: 650px;
  overflow: hidden;
  border-radius: 28px 6px;
  box-shadow: 0 30px 64px rgba(58, 40, 23, 0.17);
}

main[data-page="home"] .product-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateZ(24px) scale(1.015);
}

main[data-page="home"] .product-copy {
  align-self: center;
  max-width: 560px;
}

main[data-page="home"] .price {
  margin-bottom: 1.8rem;
  color: var(--red);
  font-family: "DFVN TAN Harmoni", "Tan Harmoni", Georgia, serif;
  font-size: clamp(3rem, 5vw, 5rem);
  line-height: 1;
}

main[data-page="home"] .spec-list { margin-bottom: 2rem; }

main[data-page="home"] .spec-list div {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 1rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--line);
}

main[data-page="home"] .spec-list dt { color: var(--ink-soft); }
main[data-page="home"] .spec-list dd { margin: 0; font-weight: 600; }

main[data-page="home"] .legend-section {
  --depth-offset: 0px;
  min-height: 760px;
  padding: clamp(5rem, 9vw, 9rem) clamp(1.5rem, 8vw, 9rem);
  background-color: #f7edda;
  background-image: linear-gradient(90deg, rgba(255, 251, 235, 0.95) 0%, rgba(255, 251, 235, 0.72) 42%, rgba(255, 251, 235, 0.08) 76%), url("/assets/img/ref-legend-bg-800.avif");
  background-repeat: no-repeat;
  background-position: center calc(50% + var(--depth-offset));
  background-size: cover;
}

main[data-page="home"] .legend-copy { max-width: 660px; }
main[data-page="home"] .legend-copy > p:not(.eyebrow) { color: var(--ink-soft); }

main[data-page="home"] .legend-milestones {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  max-width: 900px;
  margin: clamp(4rem, 8vw, 7rem) 0 0;
}

main[data-page="home"] .legend-milestones div { padding: 0 2rem 0 0; }

main[data-page="home"] .legend-milestones div + div {
  padding-left: 2rem;
  border-left: 1px solid rgba(85, 58, 31, 0.25);
}

main[data-page="home"] .legend-milestones dd {
  margin: 0.55rem 0 0;
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1.55;
}

main[data-page="home"] .legend-milestones strong { display: block; color: var(--ink); }

main[data-page="home"] .quote-section {
  --depth-offset: 0px;
  display: grid;
  min-height: 660px;
  place-items: center;
  align-content: center;
  padding: clamp(5rem, 10vw, 10rem) clamp(1.5rem, 8vw, 9rem);
  background-image: linear-gradient(rgba(255, 251, 235, 0.86), rgba(255, 251, 235, 0.86)), url("/assets/img/ref-quote-bg-1536.avif");
  background-repeat: no-repeat;
  background-position: center calc(50% + var(--depth-offset));
  background-size: cover;
  text-align: center;
}

main[data-page="home"] .quote-section blockquote {
  max-width: 1050px;
  margin-bottom: 1.5rem;
  color: var(--ink);
  font-family: "DFVN TAN Harmoni", "Tan Harmoni", Georgia, serif;
  font-size: clamp(3rem, 6vw, 6rem);
  line-height: 0.98;
}

main[data-page="home"] .quote-section p { color: var(--ink-soft); }

main[data-page="home"] .faq-section {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: clamp(3rem, 8vw, 9rem);
  max-width: 1640px;
  margin: 0 auto;
}

main[data-page="home"] .faq-heading { max-width: 520px; }
main[data-page="home"] .faq-list details { border-top: 1px solid var(--line); }
main[data-page="home"] .faq-list details:last-child { border-bottom: 1px solid var(--line); }

main[data-page="home"] .faq-list summary {
  padding: 1.4rem 3rem 1.4rem 0;
  font-weight: 600;
  cursor: pointer;
}

main[data-page="home"] .faq-list details p {
  max-width: 740px;
  padding: 0 2rem 1.5rem 0;
  color: var(--ink-soft);
}

main[data-page="home"] .waitlist-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 4rem;
  padding: clamp(4rem, 8vw, 8rem) clamp(1.5rem, 8vw, 9rem);
  background: var(--red);
  color: #fff9ea;
}

main[data-page="home"] .waitlist-section .eyebrow { color: #f5da91; }
main[data-page="home"] .waitlist-section h2 { max-width: 760px; color: #fff9ea; }
main[data-page="home"] .email-form label { display: block; margin-bottom: 0.65rem; font-weight: 600; }

main[data-page="home"] .email-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.65rem;
  padding: 0.5rem;
  border-radius: 999px;
  background: #fff9ea;
}

main[data-page="home"] .email-row input {
  min-width: 0;
  padding: 0.65rem 1rem;
  border: 0;
  background: transparent;
  color: var(--ink);
}

main[data-page="home"] .email-row input:focus { outline: 0; }
main[data-page="home"] .email-row .button { background: var(--jade); }
main[data-page="home"] .form-message { min-height: 1.6rem; margin: 0.65rem 0 0; font-size: 0.85rem; }
main[data-page="home"] .form-message.error { color: #fff1b4; }
main[data-page="home"] .form-message.success { color: #fff; }

html.home-reveal-enabled main[data-page="home"] [data-reveal] {
  opacity: 0;
  transform: perspective(1100px) translate3d(0, 36px, -42px) rotateX(2.5deg);
  transition: opacity 0.8s ease var(--delay, 0ms), transform 0.95s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0ms);
}

html.home-reveal-enabled main[data-page="home"] [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

main[data-page="home"] .lacquer-tilt.hd-tilt-ready {
  position: relative;
  transform: perspective(1200px) translate3d(0, var(--home-lift, 0px), 0)
    rotateX(var(--hd-tilt-x, 0deg)) rotateY(var(--hd-tilt-y, 0deg));
  transform-style: preserve-3d;
  transition: box-shadow 0.48s ease, transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

main[data-page="home"] .lacquer-tilt.hd-tilt-active { --home-lift: -4px; }

body:has(main[data-page="home"]) .site-footer {
  display: grid;
  grid-template-columns: 0.72fr 1fr 1.35fr auto;
  align-items: start;
  gap: clamp(2rem, 4vw, 5rem);
  padding: clamp(4rem, 7vw, 7rem) clamp(1.5rem, 8vw, 9rem) 2rem;
  background: var(--jade);
  color: #f7edd7;
}

body:has(main[data-page="home"]) .site-footer > img {
  width: 110px;
  height: 74px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

body:has(main[data-page="home"]) .site-footer a { color: inherit; }
body:has(main[data-page="home"]) .site-footer p,
body:has(main[data-page="home"]) .site-footer span { line-height: 1.7; }

body:has(main[data-page="home"]) .ambient-sound-toggle {
  min-height: 44px;
  margin-top: 1rem;
  padding: 0.7rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: transparent;
  color: #fff;
}

@media (max-width: 1180px) {
  main[data-page="home"] .hero { grid-template-columns: 0.95fr 1.05fr; }
  main[data-page="home"] .hero-copy { margin-left: 2rem; }
  main[data-page="home"] .hero-visual { width: 100%; }
  main[data-page="home"] .hero h1 { font-size: clamp(3.8rem, 7vw, 5.6rem); }
  main[data-page="home"] .hero-chapter-nav { width: 168px; }
}

@media (max-width: 900px) {
  main[data-page="home"] .hero { display: block; min-height: auto; padding-bottom: 0; }
  main[data-page="home"] .hero-copy { max-width: none; margin: 0; padding: 7.5rem 1.5rem 2rem; }
  main[data-page="home"] .hero-chapter-nav {
    position: relative;
    top: auto;
    right: auto;
    display: flex;
    width: 100%;
    padding: 0 1.5rem 1.25rem;
    overflow-x: auto;
    transform: none;
    scrollbar-width: thin;
  }
  main[data-page="home"] .hero-chapter-nav a {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0.68rem 1.1rem 0.92rem;
    border: 1px solid rgb(156 109 46 / 32%);
    /* Hàng ngang cuộn được: cắt răng cưa nằm ở CẠNH DƯỚI thay vì cạnh trái.
       Không đặt lại rotate riêng cho mobile ở đây — rule desktop
       "html.home-motion-enabled.is-ready ... a:nth-child()" đặc trưng hơn
       nên vẫn thắng bất kể viewport, giữ luôn giá trị đó cho gọn. */
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 75% 78%, 50% 100%, 25% 78%, 0% 100%);
  }
  main[data-page="home"] .hero-chapter-nav a:focus-visible { transform: translateY(-3px) rotate(0deg); }
  main[data-page="home"] .hero-visual { position: relative; right: auto; width: 100%; height: min(76vw, 680px); }
  main[data-page="home"] .hero-stage,
  main[data-page="home"] .hero-stage.hd-hero-parallax-ready { transform: none; }
  main[data-page="home"] .hero-stage img { object-position: 67% center; }
  main[data-page="home"] .status-note { top: 1.2rem; right: 1rem; }
  main[data-page="home"] .path-grid,
  main[data-page="home"] .split-section,
  main[data-page="home"] .product-section,
  main[data-page="home"] .faq-section,
  main[data-page="home"] .waitlist-section,
  body:has(main[data-page="home"]) .site-footer { grid-template-columns: 1fr; }
  main[data-page="home"] .path-grid { max-width: 620px; }
  main[data-page="home"] .path-image { aspect-ratio: 16 / 10; }
  main[data-page="home"] .image-story { min-height: 880px; }
  main[data-page="home"] .story-background { object-position: 64% center; }
  main[data-page="home"] .story-copy { width: 62%; padding-left: 1.5rem; }
  main[data-page="home"] .product-gallery { min-height: 500px; }
  main[data-page="home"] .legend-milestones { grid-template-columns: 1fr; max-width: 620px; margin-top: 3rem; }
  main[data-page="home"] .legend-milestones div,
  main[data-page="home"] .legend-milestones div + div { padding: 1.25rem 0; border-left: 0; border-bottom: 1px solid rgba(85, 58, 31, 0.25); }
}

@media (max-width: 620px) {
  body:has(main[data-page="home"]) .site-header { padding: 0.85rem 1rem; }
  body:has(main[data-page="home"]) .brand img { width: 88px; height: auto; }
  main[data-page="home"] .hero-copy { padding-top: 6.5rem; }
  main[data-page="home"] .hero h1 { font-size: clamp(3.6rem, 18vw, 5rem); }
  main[data-page="home"] .proof-row { grid-template-columns: 1fr; }
  main[data-page="home"] .proof-row div,
  main[data-page="home"] .proof-row div + div {
    display: grid;
    grid-template-columns: 84px 1fr;
    align-items: end;
    padding: 0.85rem 0;
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }
  main[data-page="home"] .proof-row dd { padding-bottom: 0.35rem; }
  main[data-page="home"] .hero-chapter-nav { padding-inline: 1rem; }
  main[data-page="home"] .hero-visual { height: 92vw; }
  main[data-page="home"] .hero-stage img { object-position: 69% center; }
  main[data-page="home"] .story-copy { width: 100%; padding: 4rem 1.5rem 23rem; }
  main[data-page="home"] .story-background { object-position: 78% center; opacity: 0.52; }
  main[data-page="home"] .product-gallery { min-height: 360px; }
  main[data-page="home"] .legend-section { background-position: 68% center; }
  main[data-page="home"] .quote-section { min-height: 520px; }
  main[data-page="home"] .email-row { grid-template-columns: 1fr; border-radius: 20px; }
  main[data-page="home"] .email-row .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html.home-motion-enabled main[data-page="home"] .entrance-copy,
  html.home-motion-enabled main[data-page="home"] .entrance-visual,
  html.home-reveal-enabled main[data-page="home"] [data-reveal],
  main[data-page="home"] .lacquer-tilt,
  main[data-page="home"] .hero-stage,
  main[data-page="home"] .hero-stage img,
  main[data-page="home"] .hero-chapter-nav a,
  main[data-page="home"] .story-background {
    opacity: 1;
    transform: none !important;
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Khung nhìn thấp (điện thoại/tablet xoay ngang) -------------------- */

/* Sàn 820px của clamp() ở .hero được đặt cho màn hình dọc. Khi máy xoay ngang
   nó biến Hero thành gần hai màn hình phải cuộn qua trước khi tới nội dung:
   đo trên 932×430 (iPhone Pro Max ngang) là 820px trên khung nhìn 430px, tức
   1,91 màn. Dưới 901px đã có khối @media (max-width: 900px) hạ min-height về
   auto rồi, nên chỉ cần vá đúng dải còn lại. */
@media (min-width: 901px) and (max-height: 820px) {
  main[data-page="home"] .hero { min-height: 100svh; }

  /* Cùng một lỗi ở lớp đệm: 17vh là ý đồ thật ("một phần bảy khung nhìn"),
     nhưng sàn 8.5rem = 136px của clamp() nuốt mất nó khi máy nằm ngang. Hạ sàn
     xuống để số vh được quyết định — trên tablet ngang 1024x768 thì 17vh = 130px,
     gần đúng con số cũ nên bố cục ở đó không xê dịch. */
  main[data-page="home"] .hero-copy {
    padding-block: clamp(4rem, 17vh, 10.5rem) clamp(2rem, 8vh, 6rem);
  }
}

/* --- Màn hình đầu trên điện thoại: tranh làm nền -------------------------

   Trên desktop tranh nằm ở cột phải nên khách gặp ngay. Bản dọc xếp theo thứ
   tự DOM (chữ → nav chương → tranh) nên tranh rơi xuống tận màn thứ hai, và
   màn đầu chỉ còn chữ trên nền kem trơn.

   Nay tranh phủ kín Hero làm nền, chữ nổi lên trên qua một màn chắn.

   VÌ SAO KHÔNG CẮT MỘT TỆP ẢNH DỌC RIÊNG: preload Hero ở build.js dùng
   imagesrcset + imagesizes="100vw" chứ không phải href + media, và
   tests/critical-css khoá cứng "preload không được có media=" — vì bản nào
   được chọn còn phụ thuộc mật độ điểm ảnh, không chỉ bề rộng. Thêm một
   <source media> cho mobile sẽ làm preload lấy bản ngang còn <picture> lấy
   bản dọc: đúng lỗi tải hai ảnh 106 KB họ đã sửa một lần rồi. Nên cắt bằng
   object-position trên chính tệp đang có.

   object-position: 76% là khung có ba lá bài và mặt trời đỏ. Lần trước tôi
   đặt 58% và ra nền kem trơn — 58% rơi vào mảng trời trống bên trái tranh.
   Tính: ảnh 3:2 phủ khung dọc thì cao khớp, chỉ cắt bề ngang; cửa sổ còn
   ~31% bề ngang, mà cụm bài nằm quanh 68% bề ngang ảnh. */
@media (max-width: 900px) {
  main[data-page="home"] .hero {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    overflow: hidden;
  }

  main[data-page="home"] .hero-visual {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
  }
  main[data-page="home"] .hero-stage { height: 100%; }
  main[data-page="home"] .hero-stage picture,
  main[data-page="home"] .hero-stage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 76% center;
  }

  /* Màn chắn: đặc ở vùng chữ, tan hẳn ở nửa dưới để lộ bài. Phải khai từng
     thuộc tính chứ không dùng inset gọn — main.css đã đặt
     .hero:after{left:36%;bottom:3%;opacity:.08} cho lớp hoa văn chìm, và cái
     left:36% đó thắng, làm màn chắn chỉ phủ hai phần ba phải màn hình. */
  main[data-page="home"] .hero::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 1;
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--paper) 94%, transparent) 0%,
      color-mix(in srgb, var(--paper) 90%, transparent) 34%,
      color-mix(in srgb, var(--paper) 72%, transparent) 52%,
      color-mix(in srgb, var(--paper) 30%, transparent) 70%,
      transparent 88%
    );
    pointer-events: none;
  }
  main[data-page="home"] .hero::before { display: none; }

  main[data-page="home"] .hero-copy {
    position: relative;
    z-index: 2;
    padding: 5.6rem 1.5rem 1.25rem;   /* 5.6rem chừa header absolute cao 90px */
  }
  main[data-page="home"] .hero-chapter-nav { position: relative; z-index: 2; order: 3; margin-top: auto; }

  /* Badge rời góc phải trên (nhường nút mục lục) rồi rời luôn góc phải dưới:
     đo được nó chồng lên dải chương, 750-785 so với 748-812. Nay cho vào dòng
     chảy, nằm ngay dưới khối chữ, còn dải chương vẫn bị margin-top:auto đẩy
     xuống đáy. Badge tự có nền giấy và viền vàng nên không cần màn chắn. */
  main[data-page="home"] .status-note {
    position: static;
    z-index: 3;
    order: 2;
    align-self: flex-start;
    margin: 0 1.5rem 0.75rem;
  }

  /* Eyebrow 12px màu --brown vốn đã sát ngưỡng ngay trên giấy trơn; thêm tranh
     phía sau là tụt dưới ngưỡng AA 4,5. --ink-soft giữ được sắc nâu. */
  main[data-page="home"] .hero-copy > .eyebrow { color: var(--ink-soft); }

  /* Ba chỗ nén để chữ không chiếm sạch màn đầu (đo trước khi sửa: khối chữ cao
     807px trên khung nhìn 812px). Hàng số liệu cũng là chỗ sửa lỗi cột số cứng
     84px làm "690k" lấp kín cột trong khi "78"/"22" vẫn có khoảng thở. */
  /* Hàng số liệu rơi đúng vào hộp bài sơn mài màu tối của tranh: đo được nhãn
     11px chỉ còn tương phản 2,31, dưới xa ngưỡng AA 4,5. Màn chắn dọc của Hero
     đã tan gần hết ở độ cao này nên phải cho hàng này một tấm nền riêng. */
  main[data-page="home"] .proof-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-inline: -0.85rem;
    padding: 1rem 0.85rem 0.9rem;
    border-top: 0;
    border-radius: 14px;
    background: color-mix(in srgb, var(--paper) 86%, transparent);
  }
  main[data-page="home"] .proof-row div,
  main[data-page="home"] .proof-row div + div {
    display: block;
    padding: 0;
    border: 0;
  }
  main[data-page="home"] .proof-row dt { font-size: 1.9rem; line-height: 1.05; }
  main[data-page="home"] .proof-row dd {
    margin: 0.2rem 0 0;
    padding: 0;
    font-size: 0.68rem;
    line-height: 1.3;
    color: var(--ink-soft);   /* --muted quá nhạt cho tấm nền bán trong */
  }

  main[data-page="home"] .hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
  }
  main[data-page="home"] .hero-actions .button { width: 100%; padding-inline: 0.75rem; }

  main[data-page="home"] .hero h1 { font-size: clamp(2.9rem, 14vw, 3.6rem); }
  /* --ink thay vì --ink-soft: đoạn dẫn nằm ở khúc màn chắn đã tan bớt, đo được
     4,44 — sát dưới ngưỡng AA 4,5. Đậm hẳn thì lên 7 và cũng dễ đọc hơn ngoài
     nắng, thứ mà bản dọc hay gặp. */
  main[data-page="home"] .hero-lede { font-size: 1rem; color: var(--ink); }
}

/* --- Thanh mục lục ba gạch cho mobile ------------------------------------

   Trang chủ vốn ẩn hẳn #main-nav và .menu-toggle (luật display:none !important
   ở trên) và chỉ điều hướng bằng dải .hero-chapter-nav. Trên điện thoại dải đó
   nằm dưới đáy Hero, nên trước khi cuộn tới thì trang không có lối đi nào.

   Bật lại đúng bộ nút + panel có sẵn của main.css thay vì dựng cái mới:
   ui/menu.js đã gắn aria-expanded và data-open, panel ≤900px đã có sẵn kiểu
   cột. Ở đây chỉ cần cho chúng hiện lại và cho header thành một thanh thật.

   Giữ nguyên luật display:none !important phía trên (tests/landing-layout
   khoá chuỗi đó), nên phải ghi đè cũng bằng !important. */
@media (max-width: 900px) {
  body:has(main[data-page="home"]) .site-header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    width: 100%;
    padding: 0.85rem 1rem;
    pointer-events: auto;   /* bản gốc tắt để chỉ còn logo bấm được */
  }

  body:has(main[data-page="home"]) .menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    /* Nền giấy để ba gạch không chìm khi trôi trên tranh. */
    min-width: 46px;
    min-height: 46px;
    border: 1px solid color-mix(in srgb, var(--brown) 42%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: blur(6px);
    color: var(--ink);
  }

  body:has(main[data-page="home"]) #main-nav { display: none !important; }
  body:has(main[data-page="home"]) #main-nav[data-open] {
    display: flex !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    flex-direction: column;
    align-items: stretch;
    max-height: calc(100svh - 100%);
    overflow-y: auto;
    padding: 1rem 1.25rem 1.5rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 40px color-mix(in srgb, var(--ink) 16%, transparent);
  }

  /* Mọi mục là một đích chạm thật, không phải một dòng chữ 19px. Đo lần đầu:
     33 link trong panel thì 26 cái cao 38px — toàn bộ là mục con. */
  body:has(main[data-page="home"]) #main-nav .nav-group-top,
  body:has(main[data-page="home"]) #main-nav .nav-cta {
    display: flex;
    align-items: center;
    min-height: 48px;
  }
  body:has(main[data-page="home"]) #main-nav .nav-sub a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  /* Badge "Đang hoàn thiện" nhường góc phải trên cho nút mục lục. */
  main[data-page="home"] .status-note {
    top: auto;
    bottom: 1rem;
    right: 1rem;
  }
}