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

   Tông riêng của dự án: xanh rừng sâu + xanh hồ + nắng cát, nền giấy ấm. Cố ý
   khác hẳn nền lạnh của trang Monrei và nền kem vàng đồng của trang TT Genesis,
   vì đây là sản phẩm nghỉ dưỡng ven đô chứ không phải căn hộ nội đô. Bo góc lớn
   và hình khối mềm để ăn với concept rừng - nước. */

.eco-page {
  --forest: #17352a;
  --forest-2: #245442;
  --lake: #3f9b86;
  --leaf: #a6d3ae;
  --sun: #d99a3c;
  /* --lake và --sun đủ sáng để làm nền, mảng màu và gạch chân, nhưng đặt làm
     chữ trên nền giấy #f3f0e8 thì chỉ đạt 2.1 - 3.0:1. Hai biến -ink dưới đây
     là bản đậm dành riêng cho chữ trên nền sáng; nền tối vẫn dùng --leaf và
     --sun như cũ. */
  --lake-ink: #2b7364;
  --sun-ink: #96620f;
  --paper: #f3f0e8;
  --hairline: rgba(23, 53, 42, 0.12);

  width: min(100%, 460px);
  margin-inline: auto;
  padding-bottom: 78px;
  background: var(--paper);
  color: #22322b;
  font-size: 15px;
  line-height: 1.62;
}

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

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

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

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

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

.eco-bar__brand span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--leaf);
  color: var(--forest);
  font-size: 12px;
  font-weight: 900;
}

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

.eco-bar__nav {
  display: none;
}

.eco-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;
}

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

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

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

.eco-menu a {
  padding: 9px 12px;
  border-radius: 12px;
  color: var(--forest);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
}

.eco-menu a:hover,
.eco-menu a:focus-visible {
  background: rgba(63, 155, 134, 0.12);
}

.eco-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 18px 0;
  color: #5d6f65;
  font-size: 12px;
}

.eco-breadcrumb a {
  color: var(--forest-2);
  font-weight: 700;
  text-decoration: none;
}

/* Hero */

.eco-hero {
  display: grid;
  margin: 12px 14px 0;
  overflow: hidden;
  border-radius: 28px;
  background: var(--forest);
  isolation: isolate;
}

.eco-hero > img {
  grid-area: 1 / 1;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
  opacity: 0.86;
}

.eco-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(11, 32, 24, 0.93) 40%,
    rgba(11, 32, 24, 0.55) 100%
  );
  color: var(--white);
}

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

.eco-hero h1 {
  margin: 0;
  font-size: 44px;
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: 0.01em;
}

.eco-hero h1 em {
  display: inline-block;
  color: var(--leaf);
  font-style: normal;
  font-weight: 800;
}

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

.eco-hero__lede strong {
  color: var(--sun);
}

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

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

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

/* Dải số liệu */

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

.eco-stats div {
  display: grid;
  gap: 2px;
  padding: 15px 14px;
  background: rgba(10, 30, 23, 0.32);
}

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

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

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

/* Khung section */

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

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

.eco-section--dark {
  background: linear-gradient(150deg, var(--forest), #0d2419);
  color: rgba(255, 255, 255, 0.85);
}

.eco-kicker {
  margin: 0 0 6px;
  color: var(--lake-ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eco-section h2 {
  margin: 0 0 14px;
  color: var(--forest);
  font-size: 25px;
  font-weight: 800;
  line-height: 1.2;
}

.eco-section h2::after {
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  margin-top: 10px;
  border-radius: 3px;
  background: var(--sun);
}

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

.eco-section--dark .eco-kicker {
  color: var(--leaf);
}

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

.eco-section--dark .eco-subhead {
  color: var(--leaf);
}

.eco-lede {
  margin: 0 0 16px;
  font-size: 14.5px;
}

.eco-section p {
  margin: 0 0 14px;
}

.eco-note {
  margin: 14px 0 0;
  color: #5d6f65;
  font-size: 12.5px;
  line-height: 1.55;
}

.eco-section--dark .eco-note {
  color: rgba(255, 255, 255, 0.66);
}

/* Ảnh */

.eco-figure {
  margin: 16px 0 0;
  overflow: hidden;
  border-radius: 20px;
  background: var(--white);
}

.eco-figure a {
  display: block;
}

.eco-figure figcaption {
  padding: 10px 14px 12px;
  color: #5d6f65;
  font-size: 12.5px;
}

.eco-duo {
  display: grid;
  gap: 12px;
  margin-top: 4px;
}

/* Bảng thông số dạng dl */

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

.eco-facts div {
  display: grid;
  gap: 3px;
  padding: 13px 15px;
  background: var(--white);
}

.eco-facts dt {
  color: var(--lake-ink);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.eco-facts dd {
  margin: 0;
  color: var(--forest);
  font-size: 14px;
  font-weight: 600;
}

/* Ba trụ cột concept: danh sách đánh số lớn */

.eco-pillars {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.eco-pillars li {
  position: relative;
  padding: 18px 18px 16px;
  border-radius: 22px;
  background: var(--paper);
}

.eco-pillars__num {
  display: block;
  color: var(--sun-ink);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
}

.eco-pillars h4 {
  margin: 8px 0 6px;
  color: var(--forest);
  font-size: 16px;
  font-weight: 800;
}

.eco-pillars p {
  margin: 0;
  color: #4a5c53;
  font-size: 13.5px;
}

/* Sáu chỉ số PQ - AQ */

.eco-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.eco-chips li {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--white);
}

.eco-chips strong {
  color: var(--lake-ink);
  font-size: 14px;
  font-weight: 900;
}

.eco-chips span {
  color: #4a5c53;
  font-size: 12.5px;
}

/* Danh sách phân khu */

.eco-zones {
  display: grid;
  gap: 14px;
}

.eco-zone {
  overflow: hidden;
  border-radius: 22px;
  background: var(--white);
  box-shadow: 0 10px 28px rgba(23, 53, 42, 0.07);
}

.eco-zone__media {
  display: block;
  aspect-ratio: 16 / 9;
}

.eco-zone__media img {
  height: 100%;
  object-fit: cover;
}

.eco-zone__body {
  padding: 14px 16px 17px;
}

.eco-zone__kind {
  margin: 0 0 4px;
  color: var(--lake-ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.eco-zone h4 {
  margin: 0 0 7px;
  font-size: 18px;
  font-weight: 800;
}

.eco-zone h4 a {
  color: var(--forest);
  text-decoration: none;
}

.eco-zone p {
  margin: 0;
  color: #4a5c53;
  font-size: 13.5px;
}

/* Danh sách mốc thời gian và khoảng cách */

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

.eco-minutes li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 12px;
  padding: 12px 15px;
  border-left: 3px solid var(--lake);
  border-radius: 0 16px 16px 0;
  background: var(--white);
}

.eco-minutes strong {
  color: var(--forest);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.eco-minutes span {
  color: #4a5c53;
  font-size: 13.5px;
}

/* Danh sách gạch đầu dòng có dấu lá */

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

.eco-list li {
  position: relative;
  padding-left: 24px;
  color: #4a5c53;
  font-size: 13.8px;
}

.eco-list li::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 10px 0 10px 0;
  background: var(--lake);
}

/* Thẻ nội dung */

.eco-cards {
  display: grid;
  gap: 12px;
}

.eco-cards article {
  padding: 16px 17px;
  border-radius: 20px;
  background: var(--white);
}

.eco-section--dark .eco-cards article {
  background: rgba(255, 255, 255, 0.07);
}

.eco-cards h4 {
  margin: 0 0 7px;
  color: var(--forest);
  font-size: 15.5px;
  font-weight: 800;
}

.eco-section--dark .eco-cards h4 {
  color: var(--leaf);
}

.eco-cards p {
  margin: 0;
  color: #4a5c53;
  font-size: 13.5px;
}

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

/* Băng ảnh tiện ích */

.eco-gallery {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(238px, 0.82fr);
  gap: 12px;
  margin: 4px -18px 0;
  padding: 0 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

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

.eco-gallery__item {
  display: block;
  overflow: hidden;
  border-radius: 20px;
  background: var(--white);
  scroll-snap-align: start;
  text-decoration: none;
}

.eco-gallery__item img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.eco-gallery__item span {
  display: block;
  padding: 10px 13px 12px;
  color: #4a5c53;
  font-size: 12.5px;
  line-height: 1.45;
}

/* Băng ảnh sản phẩm */

.eco-plans {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(248px, 0.86fr);
  gap: 12px;
  margin: 18px -18px 0;
  padding: 0 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

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

.eco-plan {
  overflow: hidden;
  border-radius: 20px;
  background: var(--paper);
  scroll-snap-align: start;
}

.eco-section--tint .eco-plan {
  background: var(--paper);
}

.eco-plan img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.eco-plan h4 {
  margin: 12px 14px 4px;
  color: var(--forest);
  font-size: 16px;
  font-weight: 800;
}

.eco-plan strong {
  display: block;
  margin: 0 14px 6px;
  color: var(--sun-ink);
  font-size: 13px;
  font-weight: 800;
}

.eco-plan p {
  margin: 0 14px 15px;
  color: #4a5c53;
  font-size: 13px;
}

/* Bảng */

.eco-table-wrap {
  margin-top: 18px;
  overflow-x: auto;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.07);
}

.eco-table-wrap--light {
  background: var(--white);
  box-shadow: 0 10px 28px rgba(23, 53, 42, 0.06);
}

.eco-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  /* Bảng nằm trong section nền sáng nhưng dùng bảng màu chữ của nền tối
     (thead --leaf, tbody trắng), nên phải tự mang nền của nó. */
  background: #6f8177;
  opacity: 0.9;
}

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

.eco-table th,
.eco-table td {
  padding: 11px 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  text-align: left;
  vertical-align: top;
}

.eco-table thead th {
  color: var(--leaf);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

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

.eco-table tbody td {
  color: rgba(255, 255, 255, 0.8);
}

/* Cột được tô vàng phải là cột Giá bán, tức TD đầu tiên sau TH của hàng.
   Bảng giá ở đây xếp Loại sản phẩm | Giá bán | Ghi chú nên :last-child rơi vào
   cột Ghi chú: ghi chú thành thứ nổi nhất còn giá thì mờ hơn cả, và nowrap trên
   cột ghi chú dài đẩy bảng rộng 546px trong khung 339px.

   Bảng của Retreat Island xếp giá ở cột cuối nên bên đó :last-child mới đúng. */
.eco-table tbody td:first-of-type {
  color: var(--sun);
  font-weight: 700;
  white-space: nowrap;
}

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

.eco-table--light caption {
  color: #5d6f65;
}

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

.eco-table--light thead th {
  color: var(--lake-ink);
}

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

.eco-table--light tbody td,
.eco-table--light tbody td:first-of-type {
  color: #4a5c53;
  font-weight: 400;
  white-space: normal;
}

.eco-section--dark .eco-cta {
  background: var(--sun);
  color: #2a1a05;
  margin-top: 18px;
}

/* Giải thưởng chủ đầu tư */

.eco-partners {
  display: grid;
  gap: 10px;
}

.eco-partners article {
  display: grid;
  gap: 3px;
  padding: 13px 15px;
  border-left: 3px solid var(--sun);
  border-radius: 0 16px 16px 0;
  background: var(--white);
}

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

.eco-partners span {
  color: #4a5c53;
  font-size: 13px;
}

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

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

.eco-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 giấy ấm nên bỏ. */
  border: 0;
  border-radius: 18px;
  background: var(--white);
}

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

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

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

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

.eco-page .seo-faq p {
  margin: 0 0 15px;
  color: #5d6f65;
  font-size: 13.5px;
}

/* Liên hệ */

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

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

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

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

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

  .eco-bar {
    border-radius: 0 0 20px 20px;
  }

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

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

  .eco-bar__nav a:hover {
    color: var(--leaf);
  }

  .eco-bar__menu {
    display: none;
  }

  .eco-hero {
    margin: 16px 0 0;
    border-radius: 32px;
  }

  .eco-hero > img {
    min-height: 560px;
  }

  .eco-hero__copy {
    max-width: 680px;
    padding: 34px 38px 38px;
  }

  .eco-hero h1 {
    font-size: 68px;
  }

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

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

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

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

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

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

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

  .eco-gallery {
    grid-auto-columns: minmax(280px, 0.36fr);
    margin-inline: -38px;
    padding-inline: 38px;
  }

  .eco-plans {
    grid-auto-columns: minmax(270px, 0.32fr);
    margin-inline: -38px;
    padding-inline: 38px;
  }
}