/* Landing page phân khu Sky Retreat.
   Chỉ nạp trên /sky-retreat và mọi selector đều nằm dưới .sky-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 trời + kem mây, lấy theo câu chuyện
   "retreat giữa tầng mây" giữa rừng trị liệu của Ecopark. Khác hẳn nền lạnh của
   trang Monrei Saigon và nền kem của trang TT Genesis. */

.sky-page {
  --pine: #16352a;
  --pine-2: #23543f;
  --canopy: #4f8a5b;
  /* Bản đậm của màu nhấn, dùng riêng cho chữ trên nền sáng. Màu gốc đủ
     tương phản khi làm mảng màu, nút và chữ trên nền tối, nhưng đặt làm
     chữ trên nền sáng thì rơi xuống dưới ngưỡng 4.5:1 của WCAG AA. */
  --canopy-ink: #457950;
  --sky: #6fa8cd;
  --sky-soft: #b9d8e9;
  --sun: #e0b055;
  --mist: #f1f4ee;
  --hairline: rgba(22, 53, 42, 0.13);
  --ink-soft: #5f7268;

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

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

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

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

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

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

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

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

.sky-bar__nav {
  display: none;
}

.sky-bar__menu {
  display: grid;
  gap: 5px;
  margin-left: auto;
  padding: 8px 6px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

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

.sky-menu {
  position: absolute;
  top: 100%;
  right: 12px;
  left: 12px;
  display: grid;
  gap: 2px;
  padding: 8px;
  border-radius: 18px;
  background: var(--pine);
  box-shadow: 0 18px 40px rgba(22, 53, 42, 0.34);
}

/* display:grid ở trên là style của tác giả nên thắng [hidden] của trình duyệt,
   phải tắt lại bằng tay thì panel mới đóng được. */
.sky-menu[hidden] {
  display: none;
}

.sky-menu a {
  padding: 10px 12px;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.sky-menu a:hover {
  background: rgba(255, 255, 255, 0.1);
}

.sky-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 18px 0;
  color: var(--ink-soft);
  font-size: 12px;
}

.sky-breadcrumb a {
  color: var(--pine-2);
  font-weight: 700;
}

/* Hero */

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

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

.sky-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(12, 33, 25, 0.93) 38%,
    rgba(12, 33, 25, 0.6) 100%
  );
  color: var(--white);
}

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

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

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

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

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

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

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

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

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

.sky-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: 14px;
  overflow: hidden;
  border-radius: 20px;
  background-image: linear-gradient(135deg, var(--pine), var(--canopy) 62%, var(--sky));
  color: var(--white);
}

.sky-stats div {
  display: grid;
  gap: 2px;
  padding: 15px 14px;
  background: rgba(14, 36, 27, 0.36);
}

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

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

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

/* Khung section */

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

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

.sky-section--dark {
  background: linear-gradient(155deg, var(--pine), #0e2419);
  color: rgba(255, 255, 255, 0.85);
}

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

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

/* Ba vạch chồng lên nhau như tầng mây, dấu riêng của trang này */
.sky-section h2::after {
  content: "";
  display: block;
  width: 66px;
  height: 12px;
  margin-top: 12px;
  background:
    linear-gradient(var(--canopy), var(--canopy)) left top / 66px 3px no-repeat,
    linear-gradient(var(--sky), var(--sky)) left 5px / 44px 3px no-repeat,
    linear-gradient(var(--sky-soft), var(--sky-soft)) left 10px / 26px 3px no-repeat;
}

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

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

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

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

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

.sky-note {
  margin: 12px 0 0;
  color: var(--ink-soft);
  font-size: 12.5px;
}

.sky-section--dark .sky-note {
  color: rgba(255, 255, 255, 0.62);
}

/* Ảnh */

.sky-figure {
  margin: 0 0 16px;
  overflow: hidden;
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 12px 30px rgba(22, 53, 42, 0.12);
}

.sky-figure a {
  display: block;
}

.sky-figure figcaption {
  padding: 10px 15px 13px;
  color: var(--ink-soft);
  font-size: 12.5px;
}

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

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

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

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

.sky-facts dt {
  color: var(--ink-soft);
  font-size: 12.5px;
}

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

/* Khoảng cách theo phút và phân bổ tầng */

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

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

.sky-minutes strong {
  color: var(--pine-2);
  font-size: 14.5px;
  font-weight: 800;
}

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

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

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

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

.sky-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 7px;
  width: 10px;
  height: 10px;
  background: var(--canopy);
  border-radius: 0 100% 0 100%;
}

/* Thẻ nội dung */

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

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

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

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

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

.sky-cards p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13.5px;
}

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

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

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

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

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

.sky-gallery__item img {
  height: 150px;
  object-fit: cover;
}

.sky-gallery__item span {
  display: block;
  padding: 10px 13px 13px;
  color: var(--ink-soft);
  font-size: 12.5px;
}

/* Layout từng loại căn */

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

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

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

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

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

.sky-plan strong {
  margin: 0 15px;
  color: var(--pine-2);
  font-size: 14px;
  font-weight: 800;
}

/* Khối một dòng sản phẩm thấp tầng */

.sky-product {
  margin-bottom: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}

.sky-product h3 {
  margin: 0 0 4px;
  color: var(--pine);
  font-size: 18px;
  font-weight: 800;
}

.sky-product > strong {
  display: block;
  margin-bottom: 8px;
  color: var(--canopy-ink);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sky-product > p {
  margin: 0 0 14px;
  color: var(--ink-soft);
  font-size: 13.5px;
}

/* Bảng giá và bảng sản phẩm */

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

.sky-table-wrap--spaced {
  margin-top: 14px;
}

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

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

.sky-table caption {
  padding: 13px 15px 0;
  color: var(--sky-soft);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
}

.sky-table--light caption {
  color: var(--ink-soft);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

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

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

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

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

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

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

.sky-table--light thead th {
  color: var(--ink-soft);
}

.sky-table--light tbody th {
  color: var(--pine);
}

.sky-table--light tbody td:first-of-type {
  color: var(--pine-2);
  font-weight: 700;
}

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

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

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

.sky-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 mist nên bỏ. */
  border: 0;
  border-radius: 18px;
  background: var(--mist);
}

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

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

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

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

.sky-page .seo-faq p {
  margin: 0 0 15px;
  color: var(--ink-soft);
  font-size: 13.5px;
}

/* Liên hệ */

.sky-contact .sky-cta {
  background: var(--pine);
  color: var(--white);
}

.sky-contact .sky-cta--ghost {
  background: transparent;
  border-color: var(--pine);
  color: var(--pine);
}

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

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

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

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

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

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

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

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

  .sky-bar__menu {
    display: none;
  }

  .sky-hero {
    margin: 16px 0 0;
    border-radius: 30px;
  }

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

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

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

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

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

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

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

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

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

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

  .sky-gallery {
    grid-auto-columns: minmax(260px, 0.3fr);
  }

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