/* Landing Lotte Eco Smart City Thủ Thiêm. Mọi selector dưới .lotte-page.
   Tông riêng: than chì + đỏ Lotte, nhấn xanh mòng két của sông Sài Gòn, nền xám lạnh.
   Khung lấy từ monrei-saigon.css rồi đổi màu; xem docs/landing-kit/README.md. */

.lotte-page {
  --brand: #1f2a30;
  --brand-2: #33434c;
  --accent: #d6342a;
  /* 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. */
  --accent-ink: #b0261d;
  --accent-soft: #ff9e94;
  --warm: #3a8f8a;
  --warm-ink: #2b6f6b;
  --surface: #f2f4f5;
  --hairline: rgba(31, 42, 48, 0.12);

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

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

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

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

.lotte-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);
}

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

.lotte-bar__brand span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  /* Than chì trên đỏ Lotte chỉ 3.06:1, chữ trắng đạt 4.8:1. */
  color: var(--white);
  font-size: 12px;
  font-weight: 900;
}

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

.lotte-bar__nav {
  display: none;
}

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

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

.lotte-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(31, 42, 48, 0.22);
}

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

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

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

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

.lotte-breadcrumb a {
  color: #616e86;
  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. */
.lotte-hero {
  display: grid;
  margin: 12px 14px 0;
  overflow: hidden;
  border-radius: 26px;
  background: var(--brand);
  isolation: isolate;
}

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

.lotte-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(20, 28, 33, 0.92) 48%,
    rgba(20, 28, 33, 0.3) 100%
  );
  color: var(--white);
}

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

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

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

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

.lotte-hero__lede strong {
  /* --warm (mòng két) trên nền than chì chỉ đạt khoảng 4.5:1, sát ngưỡng. */
  color: var(--accent-soft);
}

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

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

.lotte-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 */

.lotte-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: 14px;
  overflow: hidden;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.16);
  /* Nền than chì đặc, không chuyển sang đỏ: đơn vị màu --accent-soft đặt trên
     nền đỏ chỉ còn khoảng 2.5:1. Vạch đỏ trên đỉnh giữ dấu màu Lotte. */
  background-image: linear-gradient(130deg, var(--brand), var(--brand-2));
  border-top: 3px solid var(--accent);
  color: var(--white);
}

.lotte-stats div {
  display: grid;
  gap: 2px;
  padding: 15px 14px;
  background: rgba(20, 28, 33, 0.34);
}

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

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

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

/* Khung section */

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

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

.lotte-section--dark {
  background: linear-gradient(150deg, var(--brand), #141c21);
  color: rgba(255, 255, 255, 0.84);
}

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

.lotte-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: năm cột cao thấp như đường chân trời các tháp, cột giữa màu đỏ Lotte */
.lotte-section h2::after {
  content: "";
  display: block;
  width: 46px;
  height: 16px;
  margin-top: 12px;
  background:
    linear-gradient(var(--brand-2), var(--brand-2)) 0 8px / 6px 8px no-repeat,
    linear-gradient(var(--brand-2), var(--brand-2)) 10px 4px / 6px 12px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 20px 0 / 6px 16px no-repeat,
    linear-gradient(var(--brand-2), var(--brand-2)) 30px 5px / 6px 11px no-repeat,
    linear-gradient(var(--brand-2), var(--brand-2)) 40px 10px / 6px 6px no-repeat;
}

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

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

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

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

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

.lotte-note {
  margin: 12px 0 0;
  color: #616e86;
  font-size: 12.5px;
}

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

/* Ảnh */

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

.lotte-figure a {
  display: block;
}

.lotte-figure figcaption {
  padding: 10px 15px 13px;
  color: #616e86;
  font-size: 12.5px;
}

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

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

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

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

.lotte-facts dt {
  color: #616e86;
  font-size: 12.5px;
}

.lotte-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 độ */

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

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

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

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

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

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

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

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

/* Thẻ nội dung */

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

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

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

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

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

.lotte-cards p {
  margin: 0 0 6px;
  color: #616e86;
  font-size: 13.5px;
}

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

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

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

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

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

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

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

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

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

.lotte-gallery__item span {
  display: block;
  padding: 10px 13px 13px;
  color: #616e86;
  font-size: 12.5px;
}

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

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

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

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

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

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

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

.lotte-plan p {
  margin: 0 15px;
  color: #616e86;
  font-size: 12.5px;
}

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

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

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

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

.lotte-table caption {
  padding: 13px 15px 0;
  color: #616e86;
  font-size: 12.5px;
  text-align: left;
}

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

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

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

.lotte-table tbody td:first-of-type {
  /* Khung bảng phủ rgba(255,255,255,0.07) làm nền tối sáng lên, --warm rơi
     xuống 4.40:1. Bản sáng hơn một bậc cho 5.1:1 mà vẫn cùng sắc cam san hô. */
  color: #ff9e94;
  font-weight: 800;
  white-space: nowrap;
}

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

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

.lotte-table--light thead th {
  color: #616e86;
}

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

/* Bảng các lô: cột giữa là công năng (thứ cần nhấn), cột cuối là ghi chú dài
   nên phải xuống dòng. Khác Monrei, nơi cột cuối là tỷ lệ % ngắn. */
.lotte-table--light tbody td:first-of-type {
  color: var(--accent-ink);
  font-weight: 800;
  /* Ghi đè nowrap của bảng giá nền tối, cùng selector .lotte-table. */
  white-space: normal;
}

.lotte-table--light tbody td:last-child {
  color: #4a5459;
  font-size: 13px;
}

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

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

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

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

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

.lotte-partners span {
  color: #616e86;
  font-size: 12.5px;
  line-height: 1.4;
}

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

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

.lotte-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: 18px;
  background: var(--surface);
}

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

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

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

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

.lotte-page .seo-faq p {
  margin: 0 0 15px;
  color: #616e86;
  font-size: 13.5px;
}

/* Liên hệ */

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

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

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

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

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

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

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

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

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

  .lotte-bar__menu {
    display: none;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

.lotte-flag {
  margin: 0 16px 4px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(214, 52, 42, 0.08);
  color: #3a2f2d;
  font-size: 13px;
  line-height: 1.55;
}

.lotte-flag strong {
  color: var(--accent-ink);
}

.lotte-note a {
  color: inherit;
}

@media (min-width: 760px) {
  .lotte-flag {
    margin-inline: 0;
  }
}