/* Landing page phân khu Retreat Island.
   Chỉ nạp trên /retreat-island và mọi selector đều nằm dưới .island-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 phân khu: xanh đầm lá + xanh nước lợ + nâu cát, nền ngà ấm.
   Cố ý khác hẳn nền lạnh của trang Monrei và nền kem - navy của TT Genesis:
   đây là biệt thự đảo giữa rừng retreat chứ không phải căn hộ đô thị. */

.island-page {
  --lagoon: #0d3b33;
  --lagoon-2: #14564a;
  --tide: #2e8f7d;
  /* 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. */
  --tide-ink: #277869;
  --tide-soft: #a7dccd;
  --sand: #c0863a;
  --sand-ink: #8e632b;
  --shore: #f3f0e8;
  --ink: #1c2b26;
  --soft-ink: #616f69;
  --hairline: rgba(13, 59, 51, 0.12);

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

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

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

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

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

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

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

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

.island-bar__nav {
  display: none;
}

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

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

.island-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(13, 59, 51, 0.24);
}

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

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

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

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

.island-breadcrumb a {
  color: var(--soft-ink);
  text-decoration: none;
}

/* Hero */

/* Ảnh và khối chữ chồng nhau bằng grid thay vì position: absolute, để hero tự
   cao theo khối chữ thay vì cắt mất dòng eyebrow trên cùng. */
.island-hero {
  display: grid;
  margin: 12px 14px 0;
  overflow: hidden;
  border-radius: 28px 28px 28px 8px;
  background: var(--lagoon);
  isolation: isolate;
}

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

.island-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;
  background: linear-gradient(
    to top,
    rgba(8, 33, 28, 0.92) 40%,
    rgba(8, 33, 28, 0.58) 100%
  );
  color: var(--white);
}

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

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

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

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

.island-hero__lede strong {
  color: #f0bd77;
}

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

.island-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 999px;
  /* --tide dưới chữ trắng chỉ đạt 3.93:1, bản đậm cho 5.28:1 mà vẫn giữ
     đúng sắc xanh nước lợ của phân khu. */
  background: var(--tide-ink);
  color: var(--white);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

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

/* Dải số liệu: ô trắng viền mảnh trên nền ngà, gạch màu nước ở mép trên */

.island-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 14px;
}

.island-stats div {
  display: grid;
  gap: 3px;
  padding: 14px 15px;
  border-top: 3px solid var(--tide);
  border-radius: 4px 4px 16px 16px;
  background: var(--white);
  box-shadow: 0 8px 20px rgba(13, 59, 51, 0.08);
}

.island-stats strong {
  color: var(--lagoon);
  font-size: 25px;
  font-weight: 800;
  line-height: 1;
}

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

.island-stats span {
  color: var(--soft-ink);
  font-size: 12px;
}

/* Khung section */

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

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

.island-section--dark {
  background: linear-gradient(150deg, var(--lagoon), #07241f);
  color: rgba(255, 255, 255, 0.84);
}

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

.island-section h2 {
  margin: 0 0 16px;
  color: var(--lagoon);
  font-size: 25px;
  font-weight: 800;
  line-height: 1.18;
}

/* Ba gạch ngắn dần như vòng sóng lan ra từ đảo, dấu riêng của trang này */
.island-section h2::after {
  content: "";
  display: block;
  width: 66px;
  height: 10px;
  margin-top: 12px;
  background:
    linear-gradient(var(--tide), var(--tide)) left top / 66px 2px no-repeat,
    linear-gradient(var(--tide-soft), var(--tide-soft)) left 50% / 44px 2px no-repeat,
    linear-gradient(var(--sand), var(--sand)) left bottom / 22px 2px no-repeat;
}

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

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

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

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

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

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

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

/* Ảnh */

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

.island-figure a {
  display: block;
}

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

/* Bảng thông tin phân khu */

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

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

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

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

/* Danh sách số căn, khoảng cách và mốc hạ tầng */

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

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

.island-minutes strong {
  color: var(--sand-ink);
  font-size: 15px;
  font-weight: 800;
}

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

.island-minutes b {
  color: var(--lagoon);
  font-size: 14px;
}

.island-section--tint .island-minutes li {
  background: var(--shore);
  box-shadow: none;
}

/* Danh sách gạch đầu dòng dạng vòng sóng */

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

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

.island-list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 6px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--tide);
  border-radius: 50%;
}

/* Thẻ nội dung */

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

.island-cards article {
  padding: 16px 17px;
  border-radius: 18px 18px 18px 4px;
  background: var(--white);
  box-shadow: 0 8px 22px rgba(13, 59, 51, 0.08);
}

.island-section--tint .island-cards article {
  background: var(--shore);
  box-shadow: none;
}

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

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

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

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

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

/* Tên các khu vườn retreat */

.island-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.island-tags span {
  padding: 7px 13px;
  border: 1px solid var(--tide);
  border-radius: 999px;
  color: var(--lagoon);
  font-size: 12.5px;
  font-weight: 700;
}

.island-tags__more {
  border-style: dashed !important;
  border-color: var(--hairline) !important;
  color: var(--soft-ink) !important;
  font-weight: 500 !important;
}

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

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

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

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

.island-section--tint .island-gallery__item {
  background: var(--shore);
}

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

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

/* Khối từng dòng sản phẩm */

.island-product {
  margin-bottom: 20px;
  padding: 16px 0 18px;
  border-top: 1px solid var(--hairline);
}

.island-product > header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-bottom: 12px;
}

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

.island-product__price {
  margin: 0;
  color: var(--sand-ink);
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}

.island-product__specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: 0 0 14px;
  overflow: hidden;
  border-radius: 16px;
  background: var(--hairline);
}

.island-product__specs div {
  display: grid;
  gap: 2px;
  padding: 10px 13px;
  background: var(--shore);
}

.island-product__specs dt {
  color: var(--soft-ink);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.island-product__specs dd {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

/* Bản vẽ mặt bằng và layout: nền trắng vì bản vẽ nét mảnh trên nền trắng */

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

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

.island-plans__item {
  overflow: hidden;
  border-radius: 18px 18px 18px 4px;
  background: var(--white);
  box-shadow: 0 8px 22px rgba(13, 59, 51, 0.08);
  color: inherit;
  scroll-snap-align: start;
  text-decoration: none;
}

.island-plans__item img {
  height: 165px;
  object-fit: contain;
  object-position: center;
  background: var(--white);
}

.island-plans__item span {
  display: block;
  padding: 9px 13px 12px;
  color: var(--soft-ink);
  font-size: 12.5px;
}

/* Bảng giá */

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

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

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

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

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

.island-table tbody td:last-child {
  color: #f0bd77;
  font-weight: 800;
  white-space: nowrap;
}

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

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

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

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

.island-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 ngà nên bỏ. */
  border: 0;
  border-radius: 18px 18px 18px 4px;
  background: var(--white);
}

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

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

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

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

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

/* Liên hệ */

.island-contact .island-cta--ghost {
  border-color: var(--lagoon);
  color: var(--lagoon);
}

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

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

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

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

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

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

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

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

  .island-bar__menu {
    display: none;
  }

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

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

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

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

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

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

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

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

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

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

  .island-product__specs {
    grid-template-columns: repeat(4, 1fr);
  }

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

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