/* =============================================================================
   style.css — Cây Tre, tông tối
   -----------------------------------------------------------------------------
   Đổi màu toàn trang: sửa :root ngay dưới.
   Tương phản: mọi màu chữ đã kiểm bằng WCAG trên nền #0A0A0A —
   thấp nhất là xanh tre 5.88:1, ngưỡng AA chữ thường là 4.5:1.
   #1F3A1A chỉ đạt 1.58:1 nên CHỈ dùng làm nền trang trí, không bao giờ đặt chữ lên.
   ========================================================================== */

:root {
  color-scheme: dark;
  --nen:       #0a0a0a;   /* nền chính   */
  --nen-2:     #141414;   /* nền thẻ     */
  --tre:       #5e9b3f;   /* xanh tre    */
  --tre-sang:  #8bc34a;   /* xanh lá sáng */
  --reu:       #1f3a1a;   /* xanh rêu tối — chỉ làm nền/viền */
  --chu:       #f2f2ec;   /* chữ chính   */
  --chu-phu:   #9aa394;   /* chữ phụ     */
  --tre-hieu:  #4a8536;   /* xanh nhận diện, trích từ con dấu trong logo gốc.
                             Chỉ dùng cho logo và con dấu: trên nền đen nó đạt
                             4.43:1, thiếu 0.07 so với ngưỡng AA nên không đặt chữ. */
  --vien:      rgba(94, 155, 63, .22);
  --vien-dam:  rgba(94, 155, 63, .42);

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;   /* chỉ dùng cho tiêu đề banner và 4 bước câu chuyện */
  --sans:  "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --cot:  1180px;
  --mep:  clamp(16px, 5vw, 48px);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

/* KHÔNG đặt scroll-behavior: smooth — Lenis đã lo cuộn mượt, bật cả hai thì
   hai cơ chế đánh nhau và sinh giật. main.js tự xử lý link #anchor. */
html { scroll-behavior: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  background: var(--nen);
  color: var(--chu);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -.015em;
  color: var(--chu);
  margin: 0 0 .5em;
  text-wrap: balance;
}
/* Chữ không chân nét mảnh hơn ở cỡ nhỏ: h3 trong thẻ, ô và hộp cần đậm hơn một bậc. */
h3 { font-weight: 400; }

a { color: var(--tre-sang); }

.shell {
  width: 100%;
  max-width: var(--cot);
  margin-inline: auto;
  padding-inline: var(--mep);
}
.shell--narrow { max-width: 820px; }

.skip { position: absolute; left: -9999px; }
.skip:focus {
  position: fixed; left: 16px; top: 16px; z-index: 99;
  background: var(--nen-2); color: var(--chu);
  padding: 10px 16px; border-radius: 4px;
  outline: 2px solid var(--tre);
}

:focus-visible { outline: 2px solid var(--tre-sang); outline-offset: 3px; }

/* ---------- Thanh tiến độ cuộn ---------- */
.progress {
  position: fixed; left: 0; right: 0;
  top: env(safe-area-inset-top, 0px);
  height: 2px; z-index: 60;
  background: rgba(242, 242, 236, .07);
}
.progress__bar {
  display: block; height: 100%;
  background: var(--tre);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

/* ---------- Canvas 3D ---------- */
.stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.stage canvas { width: 100%; height: 100%; display: block; }

/* Nền tĩnh thay thế khi WebGL lỗi */
.stage__fallback { display: none; }
.no-webgl .stage canvas { display: none; }
.no-webgl .stage__fallback {
  display: block;
  position: absolute; inset: 0;
  background:
    radial-gradient(42% 38% at 62% 42%, rgba(31, 58, 26, .85), transparent 70%),
    radial-gradient(70% 60% at 62% 42%, rgba(94, 155, 63, .10), transparent 72%),
    var(--nen);
}

/* ---------- Thanh menu ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0;
  padding-top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: rgba(10, 10, 10, .94);   /* đủ đục để nội dung cuộn qua không lộ xuyên lên */
  border-bottom: 1px solid rgba(242, 242, 236, .07);
}
.nav__inner { display: flex; align-items: center; gap: 24px; min-height: 66px; }

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand__mark { width: 30px; height: 30px; display: block; flex: none; }
/* Tên trên thanh menu đứng cạnh các liên kết không chân, để serif thì hai font
   chọi nhau ngay trong một hàng. */
.brand__text {
  font-family: var(--sans);
  font-size: 1.04rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--chu);
}

.nav__links { display: flex; gap: 26px; margin-left: auto; font-size: .9rem; }
.nav__links a {
  color: var(--chu-phu); text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color .25s, border-color .25s;
}
.nav__links a:hover { color: var(--tre-sang); border-bottom-color: var(--tre-sang); }

/* ---------- Nút ---------- */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: .92rem; font-weight: 400;
  padding: 12px 26px;
  border: 1px solid var(--vien-dam);
  border-radius: 999px;
  color: var(--chu);
  text-decoration: none;
  white-space: nowrap;
  transition: background .28s var(--ease), color .28s var(--ease),
              border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.btn:hover { border-color: var(--tre); color: var(--tre-sang); }

/* CTA chính: nền xanh tre, chữ đen — 5.88:1, đạt AA */
.btn--solid {
  background: var(--tre);
  border-color: var(--tre);
  color: var(--nen);
  font-weight: 500;
}
.btn--solid:hover {
  background: var(--tre-sang);
  border-color: var(--tre-sang);
  color: var(--nen);
  box-shadow: 0 0 22px rgba(139, 195, 74, .32);   /* phát sáng nhẹ */
}
.btn--sm { padding: 8px 18px; font-size: .85rem; }

.eyebrow {
  font-size: .74rem; font-weight: 400;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--chu-phu);
  margin: 0 0 16px;
}

/* ---------- Chữ hiện dần ----------
   Trạng thái ẩn chỉ áp dụng khi <html> có lớp .js (index.html gắn ngay trong head).
   Không có JavaScript → không ẩn gì cả, trang vẫn đọc được đầy đủ. */
.line { display: block; overflow: hidden; padding-bottom: .06em; }
.line > span { display: block; }

.js .reveal { opacity: 0; transform: translateY(26px); will-change: transform, opacity; }
.js .line > span { transform: translateY(105%); }
.js .story__step { opacity: 0; }

/* ---------- 1. Hero ---------- */
.hero {
  position: relative; z-index: 2;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: 124px 80px;
}
.hero__inner > * { max-width: 700px; }
.hero__lead { max-width: 560px; }   /* đoạn văn hẹp hơn tiêu đề cho dễ đọc */
.hero__title {
  font-family: var(--serif);
  letter-spacing: -.005em;
  font-size: clamp(2rem, 5vw, 3.85rem);
  font-weight: 300;
  margin-bottom: .4em;
}
.hero__lead {
  font-size: clamp(1rem, 2.1vw, 1.14rem);
  color: var(--chu-phu);
  margin: 0 0 38px;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

.hero__cue {
  transition: opacity .25s linear;
  position: absolute; left: 50%; bottom: 28px;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.hero__cue-rail {
  position: relative; display: block;
  width: 1px; height: 46px;
  background: rgba(242, 242, 236, .14);
  overflow: hidden;
}
.hero__cue-dot {
  position: absolute; left: 0; width: 1px; height: 16px;
  background: var(--tre-sang);
  animation: cue 2.4s cubic-bezier(.6, 0, .3, 1) infinite;
}
@keyframes cue {
  0%   { top: -18px; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { top: 100%;  opacity: 0; }
}
.hero__cue-text {
  font-size: .66rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--chu-phu);
}

/* ---------- 2. Câu chuyện ---------- */
.story { position: relative; z-index: 2; padding-block: 40px 120px; }
.story__step {
  max-width: 520px;
  margin-block: 0 56vh;
  padding: 26px 28px;
  /* Không dùng backdrop-filter: blur() ở đây — trình duyệt phải tính lại vùng mờ
     mỗi khung hình khi cuộn, đó là nguồn giật nặng nhất. Nền đục rẻ hơn nhiều. */
  background: rgba(10, 10, 10, .88);
  border-left: 1px solid var(--vien-dam);
  border-radius: 2px;
}
.story__step:nth-child(even) { margin-left: auto; }
.story__step:last-child { margin-bottom: 20vh; }
.story__title,
.story__step h3 { font-family: var(--serif); font-weight: 300; letter-spacing: -.005em; }
.story__title { font-size: clamp(1.7rem, 4vw, 2.5rem); }
.story__step h3 { font-size: clamp(1.35rem, 3vw, 1.8rem); }
.story__step p { margin: 0; color: var(--chu-phu); }
.step__num {
  font-family: var(--serif);
  font-size: 1rem; letter-spacing: .18em;
  color: var(--tre); margin: 0 0 8px;
}

/* ---------- Đường kẻ phân cách ---------- */
.rule {
  position: relative; z-index: 2;
  height: 1px;
  max-width: var(--cot);
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, var(--vien-dam), transparent);
}

/* ---------- Khối nội dung chung ---------- */
.section { position: relative; z-index: 2; padding-block: clamp(76px, 11vw, 136px); }
.section__title { font-size: clamp(1.9rem, 4.8vw, 3.1rem); }
.section__lead { max-width: 66ch; color: var(--chu-phu); margin: 0 0 52px; }

/* ---------- 3. Bộ sưu tập ---------- */
.cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 26px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  perspective: 1100px;
}
.card {
  --rx: 0deg; --ry: 0deg;
  background: var(--nen-2);
  border: 1px solid var(--vien);
  border-radius: 3px;
  overflow: hidden;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.card:hover {
  border-color: var(--vien-dam);
  box-shadow: 0 20px 48px rgba(0, 0, 0, .6), 0 0 0 1px rgba(94, 155, 63, .12);
}
.card__media { background: #101010; }
.card__media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
/* Thẻ chỉ còn ảnh; tên, mô tả, giá nằm ở trang /bo-suu-tap. */
.cards__more { margin: 44px 0 0; text-align: center; }

/* ---------- Thành phần thêm vào cùng nội dung mới ---------- */
.bento__num {
  font-family: var(--sans);
  font-size: .95rem;
  letter-spacing: .18em;
  color: var(--tre);
  margin: 0 0 6px;
}
.foot__about { max-width: 62ch; }
.foot__about p {
  margin: 0 0 .9em;
  color: var(--chu-phu);
  font-size: .95rem;
}
.foot__about p:last-child { margin-bottom: 0; }
.foot__about .foot__label { color: var(--tre-sang); margin-bottom: 14px; }

/* ---------- 4. Bento chăm sóc ---------- */
/* Lưới 2×2 đều nhau.
   Trước đây dùng auto-fit minmax(250px) nên ở bề ngang 1180px nó chia thành 4
   cột; ô đầu lại chiếm 2 cột, thành ra hàng một có 3 ô còn ô thứ tư rớt xuống
   hàng hai đứng trơ một mình. Nội dung mới dài hơn nên các cột hẹp còn bị kéo
   cao vống lên. Hai cột cố định cho bốn ô bằng nhau và dòng chữ dễ đọc hơn. */
.bento {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bento__cell {
  background: var(--nen-2);
  border: 1px solid var(--vien);
  border-radius: 3px;
  padding: 28px 26px 30px;
}
.bento__cell h3 { font-size: 1.42rem; margin-bottom: 8px; }
.bento__cell p { margin: 0; color: var(--chu-phu); font-size: .95rem; }
.ico {
  width: 36px; height: 36px; margin-bottom: 18px;
  fill: none; stroke: var(--tre);
  stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Hộp nền cho chữ nằm trên cảnh 3D ----------
   KHÔNG dùng backdrop-filter: blur() — trình duyệt phải tính lại vùng mờ mỗi
   khung hình khi cuộn, đó là nguồn giật nặng nhất. Nền đục cho kết quả nhìn
   tương đương mà gần như miễn phí.

   Mép trên và mép phải sáng hơn mép dưới trái: hộp trông như đang hứng ánh
   trăng từ góc trên phải, đúng chỗ mặt trăng trong cảnh 3D. */
.panel {
  position: relative;
  border-radius: 3px;
  padding: 30px 32px;
  /* HAI lớp tách bạch:
       - lớp trên: sắc trăng nhạt rót từ góc trên phải, tan dần (chỉ để tạo cảm giác)
       - lớp dưới: nền đục đều 95% (lo việc đọc được chữ)
     Gộp cả hai vào một dải chuyển là sai: phần đầu dải sẽ gần như trong suốt,
     mà đó lại đúng chỗ đặt tiêu đề. */
  background:
    linear-gradient(203deg, rgba(139, 195, 74, .10) 0%, rgba(139, 195, 74, 0) 58%),
    rgba(10, 10, 10, .95);
  border: 1px solid rgba(242, 242, 236, .06);
  border-top-color:   rgba(139, 195, 74, .20);
  border-right-color: rgba(139, 195, 74, .13);
}

/* Tiêu đề khối nằm trực tiếp trên cảnh 3D: không bọc hộp để khỏi nặng nề,
   chỉ cần một quầng tối phía sau chữ là đủ tách khỏi thân tre. */
.section__title,
.section__lead,
.eyebrow {
  text-shadow: 0 2px 20px rgba(10, 10, 10, .92), 0 0 44px rgba(10, 10, 10, .75);
}

/* ---------- 5. Phong thủy ---------- */
.duo {
  display: grid; gap: clamp(28px, 5vw, 56px);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.duo__col h3 { font-size: 1.48rem; margin-top: 0; }
.duo__col h3:first-child { margin-top: 0; }
.duo__col h3 + p + h3 { margin-top: 1.7em; }
.duo__col p { color: var(--chu-phu); }
.note {
  font-size: .88rem;
  border-left: 1px solid var(--vien-dam);
  padding-left: 14px;
}

/* ---------- 6. Hỏi đáp ---------- */
.faq { border-top: 1px solid var(--vien); }
.faq.panel { border-top-color: rgba(139, 195, 74, .20); padding-block: 8px 12px; }
.faq.panel .faq__item:last-child { border-bottom: 0; }
.faq__item { border-bottom: 1px solid var(--vien); }
/* Câu hỏi là chữ đọc chứ không phải tiêu đề trưng bày, nên dùng cùng font với
   phần trả lời bên dưới. Chuyển sang font không chân phải hạ cỡ và tăng độ đậm:
   cùng một cỡ, chữ không chân luôn trông lớn và nặng hơn chữ có chân. */
.faq__item > summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 22px 48px 22px 0;
  font-family: var(--sans);
  font-size: clamp(1rem, 2vw, 1.1rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--chu);
  transition: color .25s;
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary:hover { color: var(--tre-sang); }
.faq__item > summary::after {
  content: "";
  position: absolute; right: 8px; top: 50%;
  width: 10px; height: 10px;
  border-right: 1.5px solid var(--tre);
  border-bottom: 1.5px solid var(--tre);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .35s var(--ease);
}
.faq__item[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq__a { padding-bottom: 26px; color: var(--chu-phu); }
.faq__a p { margin: 0; }

/* ---------- Con dấu đóng cuối trang ---------- */
.seal {
  display: block;
  width: 82px; height: 82px;
  margin: 0 auto 30px;
}
.seal svg { width: 100%; height: 100%; display: block; }

/* Con dấu KHÔNG bị giấu bằng CSS.
   Trước đây nó bắt đầu ở opacity:0 và chờ GSAP bật lên — nhưng nếu tween không
   chạy vì bất kỳ lý do gì (ticker ngủ, thư viện lỗi, trình duyệt lạ) thì con dấu
   biến mất vĩnh viễn. Giờ mặc định nó hiện; GSAP chỉ làm phần thêm nếm là kéo nó
   lùi về trạng thái "chưa đóng" ngay trước khi chạy hiệu ứng. Hỏng gì thì cùng
   lắm là mất hiệu ứng, không bao giờ mất con dấu. */

/* ---------- 7. CTA cuối ---------- */
.cta {
  position: relative; z-index: 2;
  padding-block: clamp(80px, 11vw, 140px);
  text-align: center;
  border-top: 1px solid var(--vien);
  background: linear-gradient(180deg, rgba(31, 58, 26, .16), transparent 60%);
}
.cta__title { font-size: clamp(2rem, 5.4vw, 3.4rem); }
.cta__lead { max-width: 46ch; margin: 0 auto 38px; color: var(--chu-phu); }
.cta__btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 0; }

/* ---------- Nút liên hệ nổi, dáng chiếc lá ---------- */
.zalo-cta {
  position: fixed;
  right: 20px;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  z-index: 55;
  display: inline-flex;
  align-items: center;
  /* Bỏ icon rồi thì ruột hẹp lại, phải nới hai đầu ra nhiều hơn —
     không thì lá thành bè, mất dáng thon. */
  padding: 18px 78px 18px 66px;
  background: var(--tre);
  color: var(--nen);              /* đen trên xanh tre = 5.88:1, đạt AA */
  font-family: var(--sans);
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .05em;
  text-decoration: none;
  white-space: nowrap;

  clip-path: url(#laClip);
  /* clip-path cắt luôn cả box-shadow, nên bóng phải dùng filter —
     drop-shadow bám theo đúng hình đã cắt chứ không phải khung chữ nhật. */
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .6));

  /* Lá rơi thì đung đưa, không phải phát sóng. Nhịp 5.2 giây, chậm như
     cây đung đưa trong cảnh 3D. */
  animation: la-dua 5.2s ease-in-out infinite;
  transition: background .25s var(--ease), filter .3s var(--ease), opacity .3s var(--ease);
}

@keyframes la-dua {
  0%, 100% { transform: rotate(-7.5deg) translateY(0); }
  50%      { transform: rotate(-3deg)   translateY(-4px); }
}


/* Hover đổi nền và quầng sáng, KHÔNG đụng vào transform —
   transform đang do animation đung đưa giữ, chạm vào là nó khựng lại. */
.zalo-cta:hover {
  background: var(--tre-sang);
  color: var(--nen);
  filter:
    drop-shadow(0 12px 24px rgba(0, 0, 0, .7))
    drop-shadow(0 0 18px rgba(139, 195, 74, .5));
}
.zalo-cta:focus-visible { outline: 2px solid var(--tre-sang); outline-offset: 6px; }

/* Ẩn khi còn ở banner — chỉ mờ dần, không dùng transform vì animation đang giữ nó */
.js .zalo-cta { opacity: 0; pointer-events: none; }
.js .zalo-cta.is-on { opacity: 1; pointer-events: auto; }

@media (max-width: 560px) {
  .zalo-cta {
    right: 12px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    padding: 16px 56px 16px 48px;
    font-size: .84rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zalo-cta {
    animation: none;
    transform: rotate(-6deg);
  }
  .js .zalo-cta { opacity: 1; pointer-events: auto; }
}

/* ---------- Chân trang ---------- */
.foot {
  position: relative; z-index: 2;
  background: var(--nen);
  border-top: 1px solid var(--vien);
  color: var(--chu-phu);
  padding-block: 56px 28px;
  font-size: .92rem;
}
/* Hai cột: đoạn giới thiệu rộng bên trái, các đường liên hệ gọn bên phải.
   Trước đây dùng auto-fit nên ba cột rộng bằng nhau, đoạn văn dài bị ép vào
   một cột hẹp mà cột địa chỉ thì gần như trống. */
.foot__inner {
  display: grid;
  gap: clamp(32px, 5vw, 72px);
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  padding-bottom: 36px;
}
@media (max-width: 760px) {
  .foot__inner { grid-template-columns: 1fr; }
}
.foot a { color: var(--chu); text-decoration: none; }
.foot a:hover { color: var(--tre-sang); }
.foot__brand { font-family: var(--sans); font-size: 1.32rem; color: var(--chu); margin: 0 0 6px; }
.foot__label {
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--chu-phu); margin: 0 0 10px;
}
.foot__line { margin: 0 0 4px; }
.foot__base {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: space-between;
  border-top: 1px solid rgba(242, 242, 236, .07);
  padding-top: 20px;
  font-size: .82rem;
}
.foot__base p { margin: 0; }
.motion-toggle {
  font: inherit; font-size: .82rem;
  background: none; cursor: pointer;
  color: var(--chu-phu);
  border: 1px solid var(--vien);
  border-radius: 999px;
  padding: 6px 16px;
  transition: color .25s, border-color .25s;
}
.motion-toggle:hover { color: var(--chu); border-color: var(--vien-dam); }

/* ---------- Điện thoại ---------- */
@media (max-width: 860px) {
  /* Màn hẹp không còn chỗ để đẩy cảnh 3D sang bên, nên cụm tre nằm ngay sau chữ.
     Lớp phủ tối này kéo tương phản chữ về lại ngưỡng đọc được mà vẫn thấy cảnh. */
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg,
      rgba(10,10,10,.55) 0%,
      rgba(10,10,10,.86) 28%,
      rgba(10,10,10,.86) 78%,
      rgba(10,10,10,.45) 100%);
    pointer-events: none;
  }
}

@media (max-width: 760px) {
  .bento { grid-template-columns: 1fr; }
  .nav__links { display: none; }
  .nav__inner { justify-content: space-between; }
  .brand__text { font-size: 1rem; }   /* "Tre Bonsai Việt Nam" dài hơn tên cũ */
  .hero { min-height: 92svh; padding-block: 108px 72px; }
  .story__step { max-width: none; margin-bottom: 42vh; }
  .story__step:nth-child(even) { margin-left: 0; }
  .cards { gap: 18px; }
  .card { transform: none !important; }   /* bỏ nghiêng 3D trên cảm ứng */
}

/* ---------- Tôn trọng người tắt chuyển động ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .reveal, .js .line > span, .js .story__step, .js .seal {
    opacity: 1 !important; transform: none !important;
  }
  .hero__cue-dot { animation: none; top: 0; }
}