/* Landing page dự án TT Genesis Nhà Bè.
   Chỉ nạp trên /tt-genesis-nha-be nên mọi selector đều nằm dưới .genesis-page,
   không đụng tới phần còn lại của site. Bảng màu kế thừa biến của site.css. */

.genesis-page {
  --ink: #061a33;
  --ink-2: #0b2447;
  --sand: #f6f2ea;
  /* 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. */
  --gold-ink: #8d661f;
  /* Đè --muted của site.css trong phạm vi trang: #7a8496 chỉ đạt 3.38 - 3.77:1
     trên nền kem #f6f2ea. Trang này là trang duy nhất dùng --muted nên đè ở
     đây an toàn hơn sửa biến gốc. */
  --muted: #646e7f;
  --line-soft: rgba(6, 26, 51, 0.1);

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

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

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

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

.genesis-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--white);
}

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

.genesis-bar__brand span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--gold);
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

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

.genesis-bar__nav {
  display: none;
}

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

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

.genesis-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 12px;
  display: grid;
  gap: 2px;
  min-width: 168px;
  padding: 8px;
  border-radius: 14px;
  background: var(--white);
  box-shadow: var(--shadow);
}

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

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

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

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

.genesis-breadcrumb a {
  color: var(--muted);
  text-decoration: none;
}

/* Mốc soát số liệu: dự án đang xây nên người xem cần biết trang cũ tới đâu. */

.genesis-updated {
  margin: 6px 0 0;
  padding: 0 18px;
  color: var(--muted);
  font-size: 12px;
}

/* Hero */

.genesis-hero {
  position: relative;
  margin: 12px 14px 0;
  overflow: hidden;
  border-radius: 20px;
  background: var(--ink);
  isolation: isolate;
}

.genesis-hero > img {
  height: 340px;
  object-fit: cover;
  /* Ảnh gốc có logo GENESIS ở góc trái, dịch khung cắt sang phải để lấy hai tháp. */
  object-position: 72% 50%;
  opacity: 0.62;
}

.genesis-hero__copy {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  gap: 10px;
  padding: 20px 18px 22px;
  background: linear-gradient(to top, rgba(6, 26, 51, 0.94) 30%, rgba(6, 26, 51, 0));
  color: var(--white);
}

.genesis-eyebrow {
  margin: 0;
  color: var(--gold-soft);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.genesis-hero h1 {
  margin: 0;
  font-size: 40px;
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: -0.02em;
}

.genesis-hero h1 em {
  color: var(--gold);
  font-style: normal;
}

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

.genesis-hero__lede strong {
  color: var(--gold-soft);
}

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

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

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

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

.genesis-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: 14px;
  overflow: hidden;
  border-radius: 16px;
  background: var(--line-soft);
}

.genesis-stats div {
  display: grid;
  gap: 2px;
  padding: 14px 12px;
  background: var(--white);
}

.genesis-stats strong {
  color: var(--ink);
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}

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

.genesis-stats span {
  color: var(--muted);
  font-size: 12px;
}

/* Khung section */

.genesis-section {
  padding: 26px 18px;
  scroll-margin-top: 60px;
}

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

.genesis-section--dark {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.84);
}

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

.genesis-section h2 {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

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

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

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

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

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

.genesis-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12.5px;
}

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

/* Ảnh */

.genesis-figure {
  margin: 0 0 16px;
  overflow: hidden;
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 10px 26px rgba(6, 26, 51, 0.09);
}

.genesis-figure a {
  display: block;
}

.genesis-figure figcaption {
  padding: 10px 14px 12px;
  color: var(--muted);
  font-size: 12.5px;
}

/* Video nhà trưng bày. Clip quay dọc bằng điện thoại nên phải chặn bề ngang:
   để nó ăn trọn khung 1120px trên máy tính thì cao gần 1.500px. */

.genesis-video {
  max-width: 420px;
  margin: 0 auto 16px;
  overflow: hidden;
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 10px 26px rgba(6, 26, 51, 0.09);
}

.genesis-video video {
  display: block;
  width: 100%;
  /* height: auto để aspect-ratio thắng thuộc tính height="854" trên thẻ video,
     nếu không khung cao đúng 854px bất kể bề ngang. */
  height: auto;
  aspect-ratio: 640 / 854;
  background: var(--ink);
}

.genesis-video figcaption {
  padding: 10px 14px 12px;
  color: var(--muted);
  font-size: 12.5px;
}

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

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

.genesis-facts {
  display: grid;
  gap: 1px;
  margin: 0 0 18px;
  overflow: hidden;
  border-radius: 16px;
  background: var(--line-soft);
}

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

.genesis-facts dt {
  color: var(--muted);
  font-size: 12.5px;
}

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

/* Ba khởi nguyên */

.genesis-concepts {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.genesis-concepts article {
  padding: 14px 16px;
  border-left: 3px solid var(--gold);
  border-radius: 0 14px 14px 0;
  background: var(--white);
}

.genesis-concepts h3 {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.genesis-concepts p {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
}

/* Khoảng cách tính bằng phút */

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

.genesis-minutes li {
  display: grid;
  grid-template-columns: 78px 1fr;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 8px 20px rgba(6, 26, 51, 0.07);
}

.genesis-minutes strong {
  color: var(--gold-ink);
  font-size: 16px;
  font-weight: 900;
}

.genesis-minutes span {
  color: var(--text);
  font-size: 13.5px;
}

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

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

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

.genesis-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
}

/* Thẻ nội dung */

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

.genesis-cards article {
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
}

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

.genesis-cards p {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
}

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

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

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

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

.genesis-gallery__item img {
  height: 180px;
  object-fit: cover;
}

.genesis-gallery__item span {
  display: block;
  padding: 9px 12px 12px;
  color: var(--muted);
  font-size: 12.5px;
}

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

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

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

.genesis-plan {
  display: grid;
  align-content: start;
  padding-bottom: 14px;
  overflow: hidden;
  border-radius: 16px;
  background: var(--white);
  scroll-snap-align: start;
}

.genesis-plan img {
  height: 168px;
  object-fit: contain;
  background: #fdfcfa;
}

.genesis-plan h4 {
  margin: 12px 14px 2px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
}

.genesis-plan strong {
  margin: 0 14px 6px;
  color: var(--gold-ink);
  font-size: 13px;
  font-weight: 800;
}

/* Nhãn dòng căn hộ AURA / LUMINA / TIDAL. Dùng --muted đã đè trong
   .genesis-page nên đạt ngưỡng tương phản trên nền kem. */
.genesis-plan__line {
  margin: 0 14px 6px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.genesis-plan p {
  margin: 0 14px;
  color: var(--muted);
  font-size: 12.5px;
}

/* Bảng giá */

.genesis-table-wrap {
  overflow-x: auto;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
}

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

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

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

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

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

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

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

.genesis-table-wrap--light {
  margin-bottom: 18px;
  background: var(--white);
  box-shadow: 0 10px 26px rgba(6, 26, 51, 0.09);
}

.genesis-table caption {
  padding: 12px 14px 0;
  color: var(--muted);
  font-size: 12.5px;
  text-align: left;
}

.genesis-table--light th,
.genesis-table--light td {
  border-bottom-color: var(--line-soft);
}

.genesis-table--light thead th {
  color: var(--muted);
}

.genesis-table--light tbody th {
  color: var(--ink);
}

.genesis-table--light tbody td:first-of-type {
  color: var(--text);
  font-weight: 600;
}

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

/* Dải bốn số tóm tắt trên đầu mục Vay ngân hàng. Dựng riêng chứ không mượn
   .genesis-stats của hero: khối đó mang margin 14px để nổi trên nền ảnh, đặt
   vào trong section thì lệch với lề 18px của section. */

.genesis-bank-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: 0 0 20px;
  overflow: hidden;
  border-radius: 16px;
  background: var(--line-soft);
}

.genesis-bank-stats div {
  display: grid;
  gap: 2px;
  padding: 14px 14px 15px;
  background: var(--white);
}

.genesis-bank-stats strong {
  color: var(--ink);
  font-size: 21px;
  font-weight: 900;
  line-height: 1.1;
}

.genesis-bank-stats span {
  color: var(--muted);
  font-size: 12px;
}

/* Nhãn "Thông tin tham khảo" đứng một mình trên dải nút tab. Trước đây nó lặp
   lại trong tiêu đề từng panel cùng với tên ngân hàng — mà tên đã có trên nút
   tab rồi, dựng lại lần nữa là thừa. Cảnh báo này đúng cho cả bốn bên nên nêu
   một lần ở đây là đủ. */

.genesis-bank-badge {
  display: inline-block;
  margin-bottom: 12px;
  padding: 6px 11px;
  border: 1px solid var(--gold-ink);
  border-radius: 999px;
  color: var(--gold-ink);
  font-size: 11px;
  font-weight: 700;
}

/* Tiêu đề panel chỉ dành cho trình đọc màn hình: bỏ khỏi mắt nhìn vì trùng nút
   tab, nhưng giữ trong cây nội dung để mỗi tabpanel vẫn có tiêu đề của nó. */

.genesis-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Dòng phí trả nợ trước hạn. Trên điện thoại cột nội dung chỉ còn 223px, chia
   cho bốn mốc là 52px mỗi mốc — "Tháng 25 - 36" không đủ chỗ. Nên ở màn hẹp
   dòng này xếp chồng, nhãn trên và dòng thời gian ăn trọn bề ngang; từ 760px
   trở lên mới về đúng hai cột như các dòng còn lại. */

/* Chọn kèm cha để thắng `.genesis-bank-terms div` ở trên — cùng là div nên
   nếu chỉ viết .genesis-bank-terms__wide thì độ ưu tiên thấp hơn và dòng này
   vẫn ăn lưới hai cột, làm mốc phí vỡ hai hàng ở màn hẹp. */
.genesis-bank-terms .genesis-bank-terms__wide {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 11px 0 14px;
  border-bottom: 1px solid var(--line-soft);
}

/* Dòng thời gian phí trả nợ trước hạn. Mức phí giảm dần nên nhìn theo trục dễ
   hơn một dòng ngăn bằng dấu chấm.

   grid-auto-flow: column để số cột chạy theo số mốc thật — Vietcombank ba mốc,
   ba ngân hàng kia bốn. Vạch nối vẽ bằng ::before của khối, không vẽ trên từng
   mốc, nên không thừa một đoạn ở mốc cuối. */

.genesis-fee {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
  margin: 0;
  padding: 14px 0 0;
  list-style: none;
}

.genesis-fee::before {
  content: "";
  position: absolute;
  top: 19px;
  left: 5px;
  right: 5px;
  height: 1px;
  background: var(--line);
}

.genesis-fee li {
  position: relative;
  /* Chấm nằm ở top 14px, cao 11px nên hết ở 25px. Chữ phải bắt đầu dưới mốc đó,
     32px cho chấm thở ra một chút. Để 20px là chấm đè lên số phần trăm. */
  padding-top: 32px;
}

.genesis-fee li::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 0;
  width: 11px;
  height: 11px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: var(--white);
}

.genesis-fee strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
}

.genesis-fee li:last-child strong {
  color: var(--gold-ink);
}

.genesis-fee span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

/* Khối lưu ý cuối mục. Tách khỏi .genesis-note thường vì nội dung này quan
   trọng hơn một dòng chú thích: nó nói điều kiện trên trang không phải cam kết
   cho vay. */

.genesis-notice {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 18px;
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
}

.genesis-notice span {
  display: grid;
  place-items: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border: 1px solid var(--gold-ink);
  border-radius: 50%;
  color: var(--gold-ink);
  font-size: 11px;
  font-weight: 800;
}

.genesis-notice p {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.6;
}

/* Tab chọn ngân hàng.

   Không có JS thì mọi panel đều hiện, nên khối vẫn đọc được, chỉ dài hơn. Dải
   nút cuộn ngang được để bốn tên không bị bóp ở màn hẹp. */

.genesis-tabs {
  margin-bottom: 18px;
}

.genesis-tabs__list {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin-bottom: 14px;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.genesis-tabs__list::-webkit-scrollbar {
  display: none;
}

.genesis-tabs__tab {
  flex: 0 0 auto;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.genesis-tabs__tab[aria-selected="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
}

/* Chưa có JS thì mọi panel đều mở, nên cần vạch ngăn giữa các khối. Khi JS đã
   chạy thì chỉ còn một panel, bỏ vạch đi cho sạch. */

.genesis-tabs__panel + .genesis-tabs__panel {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.genesis-tabs[data-tabs-ready] .genesis-tabs__panel {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Điều kiện trong mỗi panel: nhãn bên trái, nội dung bên phải.

   Hồi còn dựng thành bốn thẻ cạnh nhau thì hai cột không dùng được — cột nội
   dung chỉ còn hơn 120px, câu dài vỡ thành cột giấy. Nay mỗi lần chỉ hiện một
   ngân hàng nên bề ngang đủ, hai cột đọc nhanh hơn hẳn: mắt chạy dọc cột nhãn
   tìm mục cần rồi mới đọc ngang.

   Cột nhãn 104px, hẹp hơn 108px của .genesis-facts một chút vì nhãn ở đây dài
   hơn ("Sau thời gian cố định") nên cần nhường chỗ cho cột nội dung. */

.genesis-bank-terms {
  display: grid;
  margin: 0;
  border-top: 1px solid var(--line-soft);
}

.genesis-bank-terms div {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
}

.genesis-bank-terms dt {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.genesis-bank-terms dd {
  margin: 0;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.45;
}

/* Nút phụ trên nền sáng. .genesis-cta--ghost có sẵn dùng viền và chữ trắng,
   hợp nền tối; đặt lên mục Vay ngân hàng nền kem thì gần như vô hình. */

.genesis-cta--ink {
  border-color: var(--ink);
  color: var(--ink);
}

/* Lời cảm ơn hoặc báo lỗi sau khi khách gửi số. */

.genesis-flash {
  margin: 18px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--gold-ink);
  border-radius: 14px;
  background: var(--white);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 700;
}

.genesis-flash--loi {
  border-color: #b4402f;
  color: #8f3323;
}

/* Popup máy tính lãi vay */

.genesis-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: end center;
  padding: 0;
  background: rgba(6, 26, 51, 0.62);
}

.genesis-modal[hidden] {
  display: none;
}

.genesis-modal__box {
  display: flex;
  flex-direction: column;
  width: min(100%, 460px);
  max-height: 92vh;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
  background: var(--sand);
}

.genesis-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  background: var(--ink);
  color: var(--white);
}

.genesis-modal__head h2 {
  margin: 0;
  color: var(--white);
  font-size: 18px;
  font-weight: 900;
}

.genesis-modal__close {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
  font-family: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.genesis-modal__body {
  overflow-y: auto;
  padding: 18px;
}

/* Ô nhập */

.genesis-calc__grid {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
}

.genesis-calc__grid label,
.genesis-calc__fields label {
  display: grid;
  gap: 5px;
}

.genesis-calc__grid span,
.genesis-calc__fields span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.genesis-calc__grid select,
.genesis-calc__grid input,
.genesis-calc__fields input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
}

.genesis-calc__grid select:focus-visible,
.genesis-calc__grid input:focus-visible,
.genesis-calc__fields input:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 1px;
}

.genesis-calc__warn {
  margin: 0 0 14px;
  padding: 11px 13px;
  border-radius: 12px;
  background: #f7ece2;
  color: #8f3323;
  font-size: 12.5px;
  line-height: 1.55;
}

/* Kết quả. Ô thứ ba là con số phải nhìn nên tô khác hai ô trên. */

.genesis-calc__out {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border-radius: 16px;
  background: var(--line-soft);
}

.genesis-calc__out div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--white);
}

.genesis-calc__out span {
  color: var(--muted);
  font-size: 12.5px;
}

.genesis-calc__out strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 900;
  white-space: nowrap;
}

.genesis-calc__out div:last-child {
  background: var(--ink);
}

.genesis-calc__out div:last-child span {
  color: rgba(255, 255, 255, 0.74);
}

.genesis-calc__out div:last-child strong {
  color: var(--gold);
}

.genesis-calc__note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

/* Form để lại số */

.genesis-calc__form {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.genesis-calc__form h3 {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
}

.genesis-calc__fields {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
}

.genesis-calc__consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.genesis-calc__consent input {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  accent-color: var(--gold-ink);
}

.genesis-calc__form .genesis-cta {
  width: 100%;
}

/* Rổ hàng theo nhóm sản phẩm */

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

.genesis-chips li {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
}

.genesis-chips strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
}

.genesis-chips span {
  color: var(--muted);
  font-size: 12.5px;
}

/* Đối tác */

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

.genesis-partners article {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
}

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

.genesis-partners span {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.35;
}

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

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

.genesis-page .seo-faq details {
  padding: 4px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
}

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

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

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

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

.genesis-page .seo-faq p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 13.5px;
}

/* Liên hệ */

.genesis-contact .genesis-cta--ghost {
  border-color: var(--ink);
  color: var(--ink);
}

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

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

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

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

  .genesis-bar {
    border-radius: 0 0 18px 18px;
  }

  /* Mười ba mục nên khoảng cách phải bó lại mới đủ một hàng ở 1120px. Giữ
     flex-wrap làm lưới an toàn: thêm mục nữa thì nó xuống hàng chứ không tràn
     ra khỏi thanh. Hai nhãn dài nhất đã rút thành "Vay vốn" và "Nhà mẫu". */
  .genesis-bar__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-left: auto;
  }

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

  .genesis-bar__nav a:hover {
    color: var(--gold);
  }

  .genesis-bar__menu {
    display: none;
  }

  .genesis-hero {
    margin: 16px 0 0;
    border-radius: 24px;
  }

  .genesis-hero > img {
    height: 520px;
  }

  .genesis-hero__copy {
    max-width: 640px;
    padding: 32px 36px 36px;
  }

  .genesis-hero h1 {
    font-size: 62px;
  }

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

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

  /* Màn rộng thì popup về giữa màn hình thay vì trượt từ đáy lên. */
  .genesis-modal {
    place-items: center;
    padding: 24px;
  }

  .genesis-modal__box {
    border-radius: 20px;
  }

  .genesis-calc__grid,
  .genesis-calc__fields {
    grid-template-columns: 1fr 1fr;
  }

  /* Bốn số tóm tắt mục Vay ngân hàng: dàn một hàng như dải số ở hero. */
  .genesis-bank-stats {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Cột nhãn rộng ra ở màn lớn. Để 104px thì "Sau thời gian cố định" xuống hai
     hàng trong khi cột nội dung còn thừa hơn 900px — nhãn gãy vô cớ. */
  .genesis-bank-terms div {
    grid-template-columns: 172px 1fr;
  }

  /* Có chỗ rồi thì dòng phí về đúng hai cột như các dòng khác. */
  .genesis-bank-terms .genesis-bank-terms__wide {
    grid-template-columns: 172px 1fr;
    align-items: start;
    gap: 12px;
    padding-bottom: 11px;
  }

  .genesis-section {
    padding: 40px 36px;
    border-radius: 22px;
    scroll-margin-top: 76px;
  }

  .genesis-section h2 {
    font-size: 32px;
  }

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

  .genesis-duo {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .genesis-minutes {
    grid-template-columns: repeat(3, 1fr);
  }

  .genesis-partners {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Trên máy tính dải ảnh bỏ trượt ngang, xuống lưới tự ngắt dòng. Trượt ngang
     ở khổ này chỉ tổ cắt cụt thẻ cuối ở mép phải và đẩy cả dải dạt về bên trái,
     lệch hẳn với phần chữ và video căn giữa phía trên. */
  .genesis-gallery {
    grid-auto-flow: row;
    /* 300px để lưới ra 3 cột ~340px thay vì 4 cột ~250px. Ảnh ở đây là slide
       và bản vẽ nhiều chữ, thu còn 250px là chữ nát thành vệt. */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    overflow-x: visible;
  }

  .genesis-gallery__item img {
    height: auto;
    /* Giữ đúng tỉ lệ cũ (280x180) để phần bị cắt hai bên không đổi — nhiều ảnh
       ở đây là slide 16:9, cắt sâu hơn là mất chữ mép trái. Cái được là khung
       to hơn: 341x227 thay vì 280x180, hơn 50% diện tích. */
    aspect-ratio: 3 / 2;
  }

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

/* Mốc tiến độ */

.genesis-page .genesis-timeline {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.genesis-page .genesis-timeline li {
  display: grid;
  gap: 4px;
  padding: 14px 15px 14px 18px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 14px;
  background: var(--white);
}

.genesis-timeline__when {
  margin: 0;
  color: var(--gold-ink);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.genesis-timeline strong {
  color: var(--ink);
  font-size: 15px;
}

.genesis-timeline span {
  color: var(--muted);
  font-size: 13.5px;
}

.genesis-note a {
  color: var(--gold-ink);
  font-weight: 700;
}

@media (min-width: 900px) {
  .genesis-page .genesis-timeline {
    grid-template-columns: repeat(3, 1fr);
  }
}