/* =====================================================================
   HOME (index.html) — hero video slider, story, projects listing
   ===================================================================== */

/* ---------- HERO / VIDEO SLIDER -------------------------------------- */
.hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  color: var(--cream);

  /* Nền chờ trước khi video hiện: chỉ là màu nền, không dùng ảnh splash nữa. */
  background: var(--green);
}
.hero-slides {
  position: absolute;
  inset: 0;
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease;
  pointer-events: none;
}
.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.slide-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Nền chờ = khung hình đầu của phim (đặt qua style="background-image:..."
     trong index.html). Ảnh này nhẹ (~80KB) nên hiện gần như tức thì, trong
     lúc file phim còn đang tải → người xem không thấy màn xanh trơn nữa. */
  background: var(--green) center / cover no-repeat;
}
.slide-media video,
.slide-media .slide-image,
.slide-endcard {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Video mờ dần hiện lên khi đã sẵn sàng phát (tránh chớp đen lúc F5) */
.slide-media video {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.slide-media.video-ready video {
  opacity: 1;
}
/* Poster chỉ là lưới an toàn cho trình duyệt không chạy JS; ảnh nền ở
   .slide-media đã lo phần hiển thị nên không cần vẽ chồng thêm. */
.slide-media video[poster] {
  background-color: transparent;
}
/* Hình cuối video — ẩn cho tới khi video kết thúc */
.slide-endcard {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease;
}
.slide-media.show-endcard .slide-endcard {
  opacity: 1;
  visibility: visible;
}
.slide-media.show-endcard video {
  opacity: 0;
}
.slide-endcard {
  z-index: 2;
}

.slide-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(
      120% 90% at 20% 20%,
      rgba(225, 113, 74, 0.25),
      transparent 55%
    ),
    linear-gradient(
      180deg,
      rgba(18, 37, 30, 0.55) 0%,
      rgba(18, 37, 30, 0.15) 40%,
      rgba(18, 37, 30, 0.85) 100%
    );
}
.slide-content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 8vh;
}
.slide-eyebrow {
  color: var(--orange-2);
}
.slide-title {
  margin: 14px 0 0;
  font-size: clamp(56px, 11vw, 180px);
  line-height: 0.86;
  text-shadow: 0 6px 40px rgba(18, 37, 30, 0.4);
}
.slide-sub {
  max-width: 500px;
  margin: 24px 0 30px;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(251, 239, 239, 0.92);
}
.slide-content .btn {
  align-self: flex-start;
}

/* Slider controls */
.hero-controls {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 70px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 18px;
}
.hero-arrow {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(251, 239, 239, 0.14);
  color: var(--cream);
  border: 1px solid rgba(251, 239, 239, 0.35);
  font-size: 22px;
  line-height: 1;
  display: grid;
  place-items: center;
  transition:
    background 0.25s ease,
    transform 0.25s ease;
}
.hero-arrow:hover {
  background: var(--orange);
  transform: scale(1.08);
  border-color: var(--orange);
}
.hero-dots {
  display: flex;
  gap: 10px;
}
.hero-dots button {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  background: rgba(251, 239, 239, 0.35);
  border: 0;
  transition: all 0.3s ease;
}
.hero-dots button.active {
  background: var(--orange);
  width: 30px;
  border-radius: 999px;
}

.hero-replay {
  position: absolute;
  z-index: 5;
  right: min(5vw, 48px);
  bottom: 74px;
  background: rgba(18, 37, 30, 0.5);
  color: var(--cream);
  cursor: pointer;
  border: 1px solid rgba(251, 239, 239, 0.3);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}
.hero-replay.show {
  opacity: 1;
  visibility: visible;
}
.hero-replay:hover {
  background: var(--orange);
  border-color: var(--orange);
}

/* Nút bật/tắt tiếng — luôn hiện, vì video tự phát ở chế độ tắt tiếng */
.hero-sound {
  position: absolute;
  z-index: 5;
  right: min(5vw, 48px);
  bottom: 22px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: rgba(18, 37, 30, 0.5);
  color: var(--cream);
  cursor: pointer;
  border: 1px solid rgba(251, 239, 239, 0.3);
  border-radius: 999px;
  padding: 0;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background 0.3s ease, border-color 0.3s ease;
}
.hero-sound:hover {
  background: var(--orange);
  border-color: var(--orange);
}
.hero-sound:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 3px;
}
.hero-sound svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  grid-area: 1 / 1;
}
/* Mặc định (đang tắt tiếng): hiện icon loa gạch chéo */
.hero-sound .icon-sound { display: none; }
/* Khi đã bật tiếng: đổi sang icon loa có sóng âm */
.hero-sound.is-on .icon-muted { display: none; }
.hero-sound.is-on .icon-sound { display: block; }

@media (max-width: 640px) {
  .hero-sound {
    bottom: 96px;
  }
}

.scroll-hint {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.7;
}

@media (max-width: 640px) {
  .hero-controls {
    bottom: 96px;
  }
  .hero-replay {
    bottom: 150px;
    right: 50%;
    transform: translateX(50%);
  }
}

/* ---------- STORY ---------------------------------------------------- */
.story {
  /* Gọn trong ĐÚNG MỘT MÀN HÌNH (svh = trừ thanh địa chỉ trên mobile).
     Nội dung căn giữa theo chiều dọc; mọi khoảng cách bên trong co theo
     chiều cao màn hình (vh) nên màn thấp vẫn không bị tràn. */
  min-height: 100vh;    /* dự phòng cho trình duyệt cũ */
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: clamp(56px, 8vh, 100px) 0;
  background: radial-gradient(
    120% 80% at 50% 0%,
    var(--cream-2) 0%,
    var(--cream) 58%
  );
  position: relative;
  overflow: hidden;
}

/* ---------- STORY · LỚP PHONG CẢNH (landscape layers) -----------------
   Các ảnh PNG nền trong suốt được đặt TUYỆT ĐỐI phía sau chữ.
   MUỐN CHỈNH: sửa top/left/right/bottom + width của từng lớp bên dưới.
   Muốn lớp trôi nhanh/chậm khi cuộn: đổi data-parallax trong index.html.
   Muốn bỏ 1 lớp: xoá đúng thẻ <img> đó trong index.html.
---------------------------------------------------------------------- */
.story-scape {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.story-scape img {
  position: absolute;
  display: block;
  filter: saturate(0.72);
  will-change: transform;
}
/* Màn sương kem phủ giữa khung -> chữ luôn nổi rõ trên nền tranh */
.story-scape::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    62% 52% at 50% 46%,
    var(--cream) 0%,
    rgba(251, 239, 239, 0.82) 46%,
    rgba(251, 239, 239, 0) 78%
  );
}
/* Vị trí từng lớp — dùng vh/vw để co giãn theo màn hình.
   Chỉ 2 lớp: khối núi bên PHẢI + con cò bay bên TRÁI. */
.scape-right {
  right: -5vw;
  bottom: -2%;
  height: 104%;          /* cao gần bằng cả khung -> núi dựng trọn màn hình */
  width: auto;
  opacity: 0.55;
}
.scape-bird {
  top: 13%;
  left: 5vw;
  width: clamp(120px, 15vw, 240px);
  opacity: 0.85;
  filter: none;          /* giữ nguyên màu -> mỏ đỏ, cánh xanh vẫn rõ */
}

@media (max-width: 760px) {
  /* Màn hình nhỏ: núi lùi xuống góc, cò nhỏ lại cho chữ thoáng */
  .scape-right { height: 62%; right: -10vw; opacity: 0.42; }
  .scape-bird  { top: 7%; left: 4vw; width: 34vw; opacity: 0.7; }
}

.story-eyebrow {
  text-align: center;
  display: block;
  margin-bottom: clamp(10px, 2.2vh, 20px);
}

/* Lotus divider — nét trang trí Việt */
.story-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto clamp(18px, 4.4vh, 42px);
}
.story-divider::before,
.story-divider::after {
  content: "";
  height: 1px;
  width: min(110px, 20vw);
}
.story-divider::before {
  background: linear-gradient(90deg, transparent, #c9962f);
}
.story-divider::after {
  background: linear-gradient(90deg, #c9962f, transparent);
}
.story-divider svg {
  width: 34px;
  height: 34px;
  margin: 0 16px;
  fill: #c9962f;
}

/* ---------- STORY · ĐOẠN GIỚI THIỆU (lede) ---------------------------
   <h2 class="lede-1"> = câu dẫn, chữ chân phương cỡ lớn.
   <p  class="lede-2"> = câu bổ nghĩa, chữ sans nhỏ hơn, nhạt hơn.
   Khối này KHÔNG dùng ảnh — chỉ chữ + hiệu ứng dâng lên khi cuộn tới.
---------------------------------------------------------------------- */
.story-lede {
  margin: 0 auto;
  text-align: center;
  color: var(--green);
  font-weight: 500;
}
.story-lede > * {
  display: block;
  margin-inline: auto;
}
.story-lede .lede-1 {
  margin: 0 auto;
  /* Fraunces (var --editorial trong fonts.css) thay cho Playfair: serif có
     TRỤC QUANG HỌC nên ở cỡ lớn nét thanh và ấm hơn, hợp giọng "xã luận"
     của đoạn dẫn. font-optical-sizing để trình duyệt tự chạy trục opsz. */
  font-family: var(--editorial);
  font-optical-sizing: auto;
  font-weight: 450;
  font-size: clamp(21px, min(3vw, 4.3vh), 46px);
  line-height: 1.34;
  letter-spacing: -0.012em;   /* serif cỡ lớn cần siết nhẹ cho liền mạch */
  max-width: 30ch;
  text-wrap: balance;
}
.story-lede .lede-2 {
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(14px, min(1.18vw, 1.75vh), 18px);
  line-height: 1.85;
  letter-spacing: 0.008em;
  color: rgba(18, 53, 40, 0.72);
  max-width: 62ch;
  margin-top: clamp(16px, 3.2vh, 30px);
  padding-top: clamp(16px, 3.2vh, 30px);
  position: relative;
}
/* Vạch vàng mảnh ngăn hai câu */
.story-lede .lede-2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(88px, 18vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, #c9962f, transparent);
}

@media (max-width: 760px) {
  /* Màn nhỏ: chữ hẹp lại cho dễ đọc */
  .story-lede .lede-1 { font-size: clamp(19px, 6.2vw, 28px); max-width: 22ch; }
  .story-lede .lede-2 { font-size: 14px; line-height: 1.72; padding-inline: 4vw; }
}

/* Tên thương hiệu — chữ Anton phủ gradient vàng thư pháp */
.story-lede .brand {
  font-family: var(--display);
  font-style: normal;
  font-size: 1.1em;
  letter-spacing: 0.015em;
  white-space: nowrap;
  background: linear-gradient(100deg, #b8842a 0%, #e9c979 40%, #f3e1a6 55%, #b8842a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding: 0 0.04em 0.1em;
  margin: 0 -0.02em -0.1em;
  /* Vệt sáng chạy chậm qua chữ vàng — bỏ 2 dòng dưới nếu muốn đứng yên */
  background-size: 220% 100%;
  animation: brandSheen 7s ease-in-out infinite;
}
@keyframes brandSheen {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .story-lede .brand { animation: none; }
}

/* Cụm nhấn — gạch chân cam mềm, không dùng nền vàng mặc định của <mark> */
.story-lede .mark {
  background: none;
  color: inherit;
  font-style: italic;
  box-shadow: inset 0 -0.34em 0 rgba(225, 113, 74, 0.16);
  padding: 0 0.06em;
}

.story .wrap {
  text-align: center;
  position: relative;   /* nằm TRÊN lớp phong cảnh */
  z-index: 1;
  flex: 0 0 auto;       /* là flex-item: giữ đúng chiều rộng --wrap */
  margin-inline: auto;
}

/* ---------- PROJECTS LISTING ----------------------------------------- */
.projects {
  background: var(--cream-2);
  padding: 120px 0;
}
.projects-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 48px;
}
.projects-head h2 {
  font-size: clamp(34px, 5vw, 68px);
  margin: 8px 0 0;
  color: var(--green);
}
.projects-head p {
  max-width: 380px;
  color: rgba(18, 53, 40, 0.7);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

/* ---- Lưới CONTENTS: 6 cột lệch cao–thấp, xen kẽ thẻ chữ / thẻ ảnh ---- */
.pgrid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
  align-items: start;
}
.pcard {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 5 / 8;
  display: flex;
  box-shadow: 0 20px 50px rgba(18, 53, 40, 0.12);
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}
.pcard:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 64px rgba(18, 53, 40, 0.2);
}
/* Nhịp lệch cao–thấp giống bản CONTENTS */
.pcard:nth-child(even) {
  margin-top: 54px;
}

/* --- Thẻ ẢNH --- */
.pcard--photo {
  align-items: flex-end;
  color: var(--cream);
}
.pcard-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 0.8s ease;
}
.pcard--photo:hover .pcard-img {
  transform: scale(1.06);
}
.pcard--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 40%, rgba(18, 37, 30, 0.9));
}
.pcard-body {
  position: relative;
  z-index: 2;
  padding: 20px;
}
.pcard-tag {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-2);
  font-weight: 700;
}
.pcard-body h3 {
  font-size: clamp(18px, 1.5vw, 24px);
  text-transform: uppercase;
  margin: 8px 0 0;
  line-height: 1;
}

/* --- Thẻ CHỮ (nền kem) --- */
.pcard--text {
  flex-direction: column;
  background: var(--cream-2);
  color: var(--green);
  border: 1px solid var(--line);
}
.pcard-top {
  padding: 22px 20px 14px;
}
.pcard-num {
  font-family: var(--display);
  font-size: 20px;
  color: var(--orange);
}
.pcard-top h3 {
  font-size: clamp(20px, 1.7vw, 28px);
  text-transform: uppercase;
  line-height: 0.98;
  margin: 8px 0 8px;
}
.pcard-sub {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(18, 53, 40, 0.55);
}
.pcard-thumb {
  margin-top: auto;
  width: 100%;
  flex: 1;
  object-fit: cover;
  transition: transform 0.8s ease;
}
.pcard--text:hover .pcard-thumb {
  transform: scale(1.05);
}

@media (max-width: 1100px) {
  .pgrid {
    grid-template-columns: repeat(3, 1fr);
  }
  .pcard:nth-child(even) {
    margin-top: 0;
  }
  .pcard:nth-child(3n-1) {
    margin-top: 40px;
  }
}
@media (max-width: 720px) {
  .pgrid {
    grid-template-columns: 1fr 1fr;
  }
  .pcard {
    aspect-ratio: 3 / 4;
  }
  .pcard:nth-child(3n-1) {
    margin-top: 0;
  }
  .pcard:nth-child(even) {
    margin-top: 30px;
  }
}
@media (max-width: 460px) {
  .pgrid {
    grid-template-columns: 1fr;
  }
  .pcard,
  .pcard:nth-child(even) {
    margin-top: 0;
    aspect-ratio: 16 / 10;
  }
}

/* ---------- MAP CTA ---------------------------------------------------
   Khối đóng trang: nối thẳng màu --green từ .solo-section ngay trên, nên
   KHÔNG có đường cắt — khoảng thở phía trên chính là ranh giới.

   LƯU Ý DẤU TIẾNG VIỆT: tít dùng .display (Anton). Dấu chồng của "Ở"/"Ỉ"
   dâng gần sát mép trên hộp dòng, nên .map-cta .eyebrow phải giữ
   margin-bottom đủ lớn — bỏ nó là tít đè lên chữ "Bản đồ tương tác".
--------------------------------------------------------------------- */
.map-cta {
  /* BẢN NỀN SÁNG — cùng mặt bàn lá sen với .solo-section ngay phía trên,
     nên hai khối nối liền thành một mảng sáng, không còn vệt cắt.
     Vàng và chữ đều phải đổi sang sắc ĐẬM, vàng #e0b45f cũ đặt trên nền
     sáng là mất hút. Muốn quay lại bản tối: trả --mc-gold về #e0b45f,
     --mc-gold-line về rgba(224,180,95,.34), background về var(--green),
     color về var(--cream), và .map-cta p về rgba(251,239,239,.78). */
  --mc-gold: #8f6a15;
  --mc-gold-line: rgba(18, 53, 40, 0.24);

  position: relative;
  isolation: isolate;
  overflow: hidden; /* quầng sáng tràn mép — không cho sinh scroll ngang */
  background:
    radial-gradient(118% 84% at 50% 0%, #bfd6aa 0%, #d9e7c8 46%, #e6efd8 100%);
  color: var(--green);
  text-align: center;
  padding: clamp(76px, 11vw, 148px) 20px clamp(84px, 12vw, 156px);
}

/* Quầng trăng vàng sau tít — cùng thủ pháp với .bloom-inner::before */
.map-cta::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 38%;
  z-index: -1;
  width: min(880px, 104%);
  height: min(520px, 74%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(143, 106, 21, 0.12),
    transparent 70%
  );
}

.map-cta .wrap {
  position: relative;
  z-index: 1;
}

/* ---------- Nhãn: chữ nhỏ in hoa, hai bên là gạch sen vàng ---------- */
.map-cta .eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 20px);
  /* Khoảng thở cho dấu tiếng Việt của tít bên dưới — xem ghi chú đầu khối */
  margin: 0 0 clamp(20px, 2.6vw, 30px);
  /* --orange-2 là cam NHẠT cho nền tối; nền sáng cần cam gốc */
  color: var(--orange);
}
.map-cta .eyebrow::before,
.map-cta .eyebrow::after {
  content: "";
  height: 1px;
  width: clamp(28px, 7vw, 84px);
  flex: 0 0 auto;
}
.map-cta .eyebrow::before {
  background: linear-gradient(90deg, transparent, var(--mc-gold-line));
}
.map-cta .eyebrow::after {
  background: linear-gradient(90deg, var(--mc-gold-line), transparent);
}

/* ---------- Tít ---------- */
.map-cta h2 {
  max-width: 15ch; /* ép xuống dòng theo cụm nghĩa, không kéo dài một hàng */
  margin: 0 auto clamp(20px, 2.6vw, 30px);
  font-size: clamp(38px, 7vw, 110px);
  text-transform: uppercase;
  text-wrap: balance; /* hai dòng cân nhau; trình duyệt cũ bỏ qua */
}

/* ---------- Đoạn dẫn ---------- */
.map-cta p {
  max-width: 56ch;
  margin: 0 auto clamp(32px, 4vw, 46px);
  font-size: clamp(15.5px, 1.3vw, 17px);
  line-height: 1.7;
  text-wrap: pretty;
  color: rgba(18, 53, 40, 0.75);
}

/* ---------- Nút ---------- */
.map-cta .btn {
  padding: 16px 34px;
  font-size: 15px;
  box-shadow: 0 14px 30px rgba(18, 53, 40, 0.22);
}
.map-cta .btn i {
  font-style: normal;
  transition: transform 0.25s ease;
}
.map-cta .btn:hover i {
  transform: translateX(4px);
}
/* Vòng focus riêng cho nút cam trên nền lá sen sáng */
.map-cta .btn:focus-visible {
  outline: 2px solid var(--mc-gold);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .map-cta .btn,
  .map-cta .btn i {
    transition: none;
  }
  .map-cta .btn:hover {
    transform: none;
  }
}