/* Landing page phân khu Retreat Forest.
   Chỉ nạp trên /retreat-forest và mọi selector đều nằm dưới .forest-page nên
   không đụng tới phần còn lại của site, kể cả trang phân khu khác.

   Dựng theo kit 3 trong docs/landing-kit/README.md.

   Tông riêng của phân khu: nâu vỏ cây + xanh rêu + đất nung, nền nâu nhạt.
   Ba phân khu Eco Retreat còn lại đều lấy màu xanh làm chủ đạo (eco xanh rừng
   sâu, sky xanh trời, island xanh đầm lá), nên trang này đẩy nâu vỏ cây lên
   làm màu chính và chỉ dùng xanh rêu để nhấn - đây là dòng nhà dưới tán rừng
   trên đất liền, không phải nhà ven nước.

   Dấu riêng: bo góc vuông vức 4 - 10px thay cho bo tròn 18 - 30px của các
   trang khác, gạch chân tiêu đề dạng thớ gỗ, bullet hình chiếc lá.
*/

.forest-page {
  --brand: #3b2a1d;
  --brand-2: #5a4130;
  --accent: #6f8f4a;
  --accent-soft: #c3d49a;
  --warm: #c2673a;
  --surface: #efe7db;
  --hairline: rgba(59, 42, 29, 0.13);

  width: min(100%, 460px);
  margin-inline: auto;
  padding-bottom: 78px;
  background: var(--surface);
  color: #2b2119;
  font-size: 15px;
  line-height: 1.6;
}

.forest-page ~ .contact-bar {
  width: min(100%, 460px);
}

.forest-page img {
  display: block;
  width: 100%;
  height: auto;
}

/* Thanh điều hướng */

.forest-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: linear-gradient(120deg, var(--brand), var(--brand-2));
  color: var(--white);
}

.forest-bar__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}

.forest-bar__brand span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  /* --brand trên --accent chỉ đạt 3.72:1, chữ 12px cần 4.5:1 */
  color: #16110b;
  font-size: 12px;
  font-weight: 900;
}

.forest-bar__brand strong {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.forest-bar__nav {
  display: none;
}

.forest-bar__menu {
  display: grid;
  gap: 4px;
  margin-left: auto;
  padding: 8px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  cursor: pointer;
}

.forest-bar__menu span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--white);
}

.forest-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 12px;
  display: grid;
  gap: 2px;
  min-width: 172px;
  padding: 8px;
  border-radius: 6px;
  background: var(--white);
  box-shadow: 0 20px 44px rgba(59, 42, 29, 0.22);
}

.forest-menu[hidden] {
  display: none;
}

.forest-menu a {
  padding: 9px 12px;
  border-radius: 4px;
  color: var(--brand);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.forest-menu a:hover,
.forest-menu a:focus-visible {
  background: var(--surface);
}

.forest-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 18px 0;
  color: #675846;
  font-size: 12px;
}

.forest-breadcrumb a {
  color: #675846;
  text-decoration: none;
}

/* Hero */

/* Ảnh và khối chữ chồng lên nhau bằng grid thay vì position: absolute, để hero
   tự cao theo khối chữ - đoạn lede ở đây dài, đặt tuyệt đối sẽ bị cắt mất dòng
   eyebrow trên cùng. */
.forest-hero {
  display: grid;
  margin: 12px 14px 0;
  overflow: hidden;
  border-radius: 8px;
  background: var(--brand);
  isolation: isolate;
}

.forest-hero > img {
  grid-area: 1 / 1;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  opacity: 0.82;
}

.forest-hero__copy {
  grid-area: 1 / 1;
  /* Cùng ô lưới với ảnh, phải positioned thì lớp phủ mới chắc chắn vẽ đè lên
     nội dung ảnh chứ không nằm dưới. */
  position: relative;
  align-self: end;
  display: grid;
  gap: 10px;
  padding: 22px 20px 24px;
  /* Khối chữ cao gần bằng cả hero nên lớp phủ phải đậm từ trên xuống, không thể
     để trong suốt ở mép trên như kiểu scrim đáy thường dùng. */
  background: linear-gradient(
    to top,
    rgba(38, 27, 18, 0.92) 38%,
    rgba(38, 27, 18, 0.62) 100%
  );
  color: var(--white);
}

.forest-eyebrow {
  margin: 0;
  color: var(--accent-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.forest-hero h1 {
  margin: 0;
  font-size: 42px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.01em;
}

.forest-hero h1 em {
  display: inline-block;
  color: var(--accent-soft);
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.forest-hero__lede {
  margin: 0;
  max-width: 44ch;
  color: rgba(255, 255, 255, 0.86);
  font-size: 14px;
}

.forest-hero__lede strong {
  color: var(--warm);
}

.forest-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.forest-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 4px;
  background: var(--accent);
  color: #1d1610;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.forest-cta--ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--white);
}

/* Dải số liệu: một băng gradient thay vì các ô trắng */

.forest-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: 14px;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.16);
  background-image: linear-gradient(130deg, var(--brand), var(--accent));
  color: var(--white);
}

.forest-stats div {
  display: grid;
  gap: 2px;
  padding: 15px 14px;
  background: rgba(38, 27, 18, 0.34);
}

.forest-stats strong {
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
}

.forest-stats small {
  margin-left: 4px;
  color: var(--accent-soft);
  font-size: 12px;
  font-weight: 700;
}

.forest-stats span {
  color: rgba(255, 255, 255, 0.74);
  font-size: 12px;
}

/* Khung section */

.forest-section {
  padding: 28px 18px;
  scroll-margin-top: 60px;
}

.forest-section--tint {
  background: var(--white);
}

.forest-section--dark {
  background: linear-gradient(150deg, var(--brand), #241a11);
  color: rgba(255, 255, 255, 0.84);
}

.forest-kicker {
  margin: 0 0 6px;
  /* Bản đậm của --accent. Chữ 11px in hoa nên cần đủ 4.5:1 trên nền sáng;
     nền tối dùng --accent-soft, xem rule ở cuối file. */
  color: #46602a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.forest-section h2 {
  margin: 0 0 14px;
  padding-bottom: 12px;
  color: var(--brand);
  font-size: 25px;
  font-weight: 800;
  line-height: 1.18;
}

/* Dấu riêng của phân khu: gạch chân dạng thớ gỗ, các vạch ngang không đều
   nhau như vân trên mặt cắt thân cây. Các trang khác dùng sóng nước (monrei),
   vạch chéo hoặc gạch trơn. */
.forest-section h2::after {
  content: "";
  display: block;
  width: 78px;
  height: 7px;
  margin-top: 12px;
  background: repeating-linear-gradient(
    to bottom,
    var(--brand-2) 0 1px,
    transparent 1px 2px,
    var(--accent) 2px 4px,
    transparent 4px 5px,
    var(--brand-2) 5px 7px
  );
}

.forest-section--dark h2 {
  color: var(--white);
}

.forest-subhead {
  margin: 26px 0 12px;
  color: var(--brand);
  font-size: 16px;
  font-weight: 800;
}

.forest-section--dark .forest-subhead {
  color: var(--white);
}

.forest-lede {
  margin: 0 0 16px;
  color: inherit;
}

.forest-note {
  margin: 12px 0 0;
  color: #675846;
  font-size: 12.5px;
}

.forest-section--dark .forest-note {
  color: rgba(255, 255, 255, 0.6);
}

/* Ảnh */

.forest-figure {
  margin: 0 0 16px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--white);
  box-shadow: 0 12px 30px rgba(59, 42, 29, 0.12);
}

.forest-figure a {
  display: block;
}

.forest-figure figcaption {
  padding: 10px 15px 13px;
  color: #675846;
  font-size: 12.5px;
}

.forest-duo {
  display: grid;
  gap: 12px;
}

/* Bảng thông tin dự án */

.forest-facts {
  display: grid;
  gap: 1px;
  margin: 0 0 18px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--hairline);
}

.forest-facts div {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 10px;
  padding: 11px 15px;
  background: var(--white);
}

.forest-facts dt {
  color: #675846;
  font-size: 12.5px;
}

.forest-facts dd {
  margin: 0;
  color: var(--brand);
  font-size: 13.5px;
  font-weight: 700;
}

/* Khoảng cách theo phút và mốc tiến độ */

.forest-minutes {
  display: grid;
  gap: 10px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.forest-minutes li {
  display: grid;
  grid-template-columns: 84px 1fr;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-radius: 5px;
  background: var(--white);
  box-shadow: 0 8px 20px rgba(59, 42, 29, 0.08);
}

.forest-minutes strong {
  color: var(--warm);
  font-size: 15px;
  font-weight: 800;
}

.forest-minutes span {
  font-size: 13.5px;
}

/* Danh sách gạch đầu dòng dạng giọt nước */

.forest-list {
  display: grid;
  gap: 10px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.forest-list li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
}

.forest-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 7px;
  width: 9px;
  height: 9px;
  background: var(--accent);
  border-radius: 0 10px 0 10px;
  transform: rotate(-45deg);
}

/* Thẻ nội dung */

.forest-cards {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.forest-cards article {
  padding: 16px 17px;
  border-radius: 6px;
  background: var(--white);
  box-shadow: 0 8px 22px rgba(59, 42, 29, 0.08);
}

.forest-section--dark .forest-cards article {
  background: rgba(255, 255, 255, 0.07);
  box-shadow: none;
}

.forest-cards h4 {
  margin: 0 0 5px;
  color: var(--brand);
  font-size: 14.5px;
  font-weight: 800;
}

.forest-section--dark .forest-cards h4 {
  color: var(--accent-soft);
}

.forest-cards p {
  margin: 0 0 6px;
  color: #675846;
  font-size: 13.5px;
}

.forest-cards p:last-child {
  margin-bottom: 0;
}

.forest-section--dark .forest-cards p {
  color: rgba(255, 255, 255, 0.78);
}

.forest-cards p strong {
  color: var(--brand);
}

.forest-section--dark .forest-cards p strong {
  color: var(--white);
}

/* Dải ảnh trượt ngang */

.forest-gallery {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 0.82fr);
  gap: 12px;
  margin-bottom: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.forest-gallery::-webkit-scrollbar {
  display: none;
}

.forest-gallery__item {
  overflow: hidden;
  border-radius: 6px;
  background: var(--white);
  color: inherit;
  scroll-snap-align: start;
  text-decoration: none;
}

.forest-gallery__item img {
  height: 175px;
  object-fit: cover;
}

.forest-gallery__item span {
  display: block;
  padding: 10px 13px 13px;
  color: #675846;
  font-size: 12.5px;
}

/* Mặt bằng từng loại căn */

.forest-plans {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 0.85fr);
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.forest-plans::-webkit-scrollbar {
  display: none;
}

.forest-plan {
  display: grid;
  align-content: start;
  padding-bottom: 15px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--white);
  box-shadow: 0 8px 22px rgba(59, 42, 29, 0.08);
  scroll-snap-align: start;
}

.forest-plan img {
  height: 160px;
  object-fit: cover;
  object-position: center top;
}

.forest-plan h4 {
  margin: 13px 15px 2px;
  color: var(--brand);
  font-size: 14.5px;
  font-weight: 800;
}

.forest-plan strong {
  margin: 0 15px 6px;
  color: var(--warm);
  font-size: 15px;
  font-weight: 800;
}

.forest-plan p {
  margin: 0 15px;
  color: #675846;
  font-size: 12.5px;
}

/* Bảng giá và bảng cơ cấu sản phẩm */

.forest-table-wrap {
  overflow-x: auto;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
}

.forest-table-wrap--light {
  margin-bottom: 18px;
  background: var(--white);
  box-shadow: 0 12px 30px rgba(59, 42, 29, 0.1);
}

.forest-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.forest-table caption {
  padding: 13px 15px 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 12.5px;
  text-align: left;
}

.forest-table th,
.forest-table td {
  padding: 12px 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  text-align: left;
  vertical-align: top;
}

.forest-table thead th {
  color: var(--accent-soft);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.forest-table tbody th {
  color: var(--white);
  font-weight: 800;
}

.forest-table tbody td:first-of-type {
  color: var(--warm);
  font-weight: 800;
  white-space: nowrap;
}

.forest-table tbody tr:last-child th,
.forest-table tbody tr:last-child td {
  border-bottom: 0;
}

.forest-table--light th,
.forest-table--light td {
  border-bottom-color: var(--hairline);
}

.forest-table--light thead th {
  color: #675846;
}

.forest-table--light tbody th {
  color: var(--brand);
}

.forest-table--light tbody td:first-of-type {
  color: #2b2119;
  font-weight: 600;
}

.forest-table--light tbody td:last-child {
  color: var(--accent);
  font-weight: 800;
  white-space: nowrap;
}

.forest-section--dark .forest-cta {
  margin-top: 16px;
}

/* Chủ đầu tư và đối tác */

.forest-partners {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.forest-partners article {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 15px 16px;
  border-left: 3px solid var(--accent);
  border-radius: 0 5px 5px 0;
  background: var(--white);
}

.forest-partners strong {
  color: var(--brand);
  font-size: 14px;
}

.forest-partners span {
  color: #675846;
  font-size: 12.5px;
  line-height: 1.4;
}

/* Câu hỏi thường gặp */

.forest-page .seo-faq {
  display: grid;
  gap: 10px;
}

.forest-page .seo-faq details {
  padding: 4px 17px;
  /* site.css đặt viền vàng chung cho .seo-faq, trang này dùng nền foam nên bỏ. */
  border: 0;
  border-radius: 6px;
  background: var(--surface);
}

.forest-page .seo-faq summary {
  padding: 13px 0;
  color: var(--brand);
  font-size: 14.5px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.forest-page .seo-faq summary::-webkit-details-marker {
  display: none;
}

.forest-page .seo-faq summary::after {
  content: "+";
  float: right;
  margin-left: 12px;
  color: var(--accent);
  font-size: 18px;
  line-height: 1.1;
}

.forest-page .seo-faq details[open] summary::after {
  content: "−";
}

.forest-page .seo-faq p {
  margin: 0 0 15px;
  color: #675846;
  font-size: 13.5px;
}

/* Liên hệ */

.forest-contact .forest-cta--ghost {
  border-color: var(--brand);
  color: var(--brand);
}

.forest-links {
  display: grid;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.forest-links a {
  color: var(--brand-2);
  font-size: 14px;
  font-weight: 700;
}

@media (min-width: 760px) {
  .forest-page {
    width: min(1120px, calc(100% - 40px));
    font-size: 16px;
  }

  .forest-page ~ .contact-bar {
    width: min(100%, 460px);
  }

  .forest-bar {
    border-radius: 0 0 6px 6px;
  }

  .forest-bar__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-left: auto;
  }

  .forest-bar__nav a {
    color: rgba(255, 255, 255, 0.84);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
  }

  .forest-bar__nav a:hover {
    color: var(--accent-soft);
  }

  .forest-bar__menu {
    display: none;
  }

  .forest-hero {
    margin: 16px 0 0;
    border-radius: 10px;
  }

  .forest-hero > img {
    min-height: 540px;
  }

  .forest-hero__copy {
    max-width: 660px;
    padding: 34px 38px 38px;
  }

  .forest-hero h1 {
    font-size: 66px;
  }

  .forest-hero__lede {
    font-size: 16px;
  }

  .forest-stats {
    grid-template-columns: repeat(4, 1fr);
    margin-inline: 0;
  }

  .forest-section {
    padding: 42px 38px;
    border-radius: 8px;
    scroll-margin-top: 76px;
  }

  .forest-section h2 {
    font-size: 33px;
  }

  .forest-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .forest-duo {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .forest-facts,
  .forest-minutes,
  .forest-partners {
    grid-template-columns: repeat(2, 1fr);
  }

  .forest-gallery {
    grid-auto-columns: minmax(280px, 0.36fr);
  }

  .forest-plans {
    grid-auto-columns: minmax(270px, 0.32fr);
  }
}

/* Hai block riêng của trang này, không có trong kit.

   Phân khu chưa được chủ đầu tư công bố bảng thông số nên trang cần hai chỗ
   nói thẳng điều đó: một băng ngay dưới dải số liệu, và một khối thay cho
   block product ở section Sản phẩm. Khi có tài liệu thì xóa cả hai và dựng
   forest-product theo kit 3. */

.forest-flag {
  margin: 0 16px 4px;
  padding: 12px 14px;
  border-left: 3px solid var(--warm);
  background: rgba(194, 103, 58, 0.09);
  color: #5c4a38;
  font-size: 13px;
  line-height: 1.55;
}

.forest-pending {
  padding: 18px 16px 20px;
  border: 1px dashed rgba(59, 42, 29, 0.28);
  background: var(--white);
}

.forest-pending p {
  margin: 0 0 12px;
  color: #4a3c2e;
  font-size: 14px;
}

.forest-pending .forest-cta {
  margin-top: 4px;
}

/* Tương phản trên nền tối.

   Nền --dark của trang này là nâu vỏ cây #3b2a1d, tối hơn nền navy mà các
   trang khác dùng, nên ba màu nhấn rơi xuống dưới ngưỡng 4.5:1 của WCAG AA:
   --accent 3.72, --warm 3.45, xám ấm 2.63. Cột giá là con số quan trọng nhất
   của trang nên không thể để mờ. Ba rule dưới đây nâng độ sáng riêng cho nền
   tối, nền sáng vẫn giữ nguyên bảng màu gốc. */

.forest-section--dark .forest-kicker {
  color: var(--accent-soft);
}

.forest-section--dark .forest-table tbody td:first-of-type {
  color: #eba97c;
}

.forest-section--dark .forest-lede strong {
  color: var(--accent-soft);
}