/* Landing page dự án Lusso Saigon.
   Chỉ nạp trên /lusso-saigon và mọi selector đều nằm dưới .lusso-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: đỏ rượu vang + vàng champagne, lấy theo bộ nhận diện
   của chủ đầu tư, nền hồng phấn ấm. Góc vuông toàn trang, không bo: khách
   của dự án này thấy bo tròn kèm viền màu một cạnh trông như site AI dựng.
   Các landing khác vẫn bo góc như cũ, đừng đồng bộ ngược. Dấu
   riêng: vạch vàng đậm nối vạch mảnh dưới mỗi tiêu đề, bullet hình thoi vàng. */

.lusso-page {
  --wine: #5a0a1e;
  --wine-2: #7d1430;
  --gold: #c9a45c;
  /* Bản đậm của vàng champagne, dùng riêng cho chữ trên nền sáng. Màu gốc
     chỉ đạt khoảng 2.3:1 trên nền hồng phấn. */
  --gold-ink: #7d5f22;
  --gold-soft: #ecd7a6;
  --blush: #f8efed;
  --hairline: rgba(90, 10, 30, 0.12);

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

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

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

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

.lusso-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: linear-gradient(120deg, var(--wine), var(--wine-2));
  border-bottom: 1px solid rgba(201, 164, 92, 0.5);
  color: var(--white);
}

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

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

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

.lusso-bar__nav {
  display: none;
}

.lusso-bar__menu {
  display: grid;
  gap: 4px;
  margin-left: auto;
  padding: 8px;
  border: 1px solid rgba(201, 164, 92, 0.45);
  background: transparent;
  cursor: pointer;
}

.lusso-bar__menu span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--gold-soft);
}

.lusso-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 12px;
  display: grid;
  gap: 2px;
  min-width: 172px;
  padding: 8px;
  background: var(--white);
  box-shadow: 0 20px 44px rgba(90, 10, 30, 0.24);
}

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

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

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

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

.lusso-breadcrumb a {
  color: #6e5a5d;
  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ữ. */
.lusso-hero {
  display: grid;
  margin: 12px 14px 0;
  overflow: hidden;
  background: var(--wine);
  isolation: isolate;
}

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

.lusso-hero__copy {
  grid-area: 1 / 1;
  position: relative;
  align-self: end;
  display: grid;
  gap: 10px;
  padding: 22px 20px 24px;
  background: linear-gradient(
    to top,
    rgba(52, 5, 17, 0.94) 48%,
    rgba(52, 5, 17, 0.3) 100%
  );
  color: var(--white);
}

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

.lusso-hero h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 44px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lusso-hero h1 em {
  display: inline-block;
  color: var(--gold);
  font-style: normal;
}

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

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

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

.lusso-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  background: var(--gold);
  color: #3a0613;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.lusso-cta--ghost {
  background: transparent;
  border: 1px solid rgba(236, 215, 166, 0.6);
  color: var(--white);
}

/* Dải số liệu: bốn ô viền vàng trên nền rượu vang */

.lusso-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: 14px;
  overflow: hidden;
  border: 1px solid rgba(201, 164, 92, 0.55);
  background: rgba(201, 164, 92, 0.4);
  color: var(--white);
}

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

.lusso-stats strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  color: var(--gold-soft);
}

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

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

/* Băng nguồn số liệu */

.lusso-flag {
  margin: 0 16px 4px;
  padding: 12px 14px;
  border-left: 3px solid var(--gold);
  background: rgba(201, 164, 92, 0.16);
  color: #4a3528;
  font-size: 13px;
  line-height: 1.55;
}

.lusso-flag a {
  color: var(--wine-2);
  font-weight: 700;
}

/* Khung section */

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

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

.lusso-section--dark {
  background: linear-gradient(160deg, var(--wine), #3a0613);
  color: rgba(255, 255, 255, 0.84);
}

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

.lusso-section h2 {
  margin: 0 0 14px;
  color: var(--wine);
  font-size: 25px;
  font-weight: 800;
  line-height: 1.18;
}

/* Dấu riêng: vạch vàng đậm nối vạch mảnh, như đường chỉ viền trên nhận diện
   của chủ đầu tư. Trước đây là khung cửa vuông hở đáy, nhìn giống ô lỗi font. */
.lusso-section h2::after {
  content: "";
  display: block;
  width: 96px;
  height: 3px;
  margin-top: 12px;
  background:
    linear-gradient(var(--gold), var(--gold)) 0 0 / 28px 3px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 34px 1px / 62px 1px no-repeat;
}

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

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

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

.lusso-section--dark .lusso-subhead {
  color: var(--gold-soft);
}

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

.lusso-note {
  margin: 12px 0 0;
  color: #6e5a5d;
  font-size: 12.5px;
}

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

/* Ảnh */

.lusso-figure {
  margin: 0 0 16px;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 12px 30px rgba(90, 10, 30, 0.1);
}

.lusso-figure a {
  display: block;
}

.lusso-figure figcaption {
  padding: 10px 15px 13px;
  color: #6e5a5d;
  font-size: 12.5px;
}

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

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

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

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

.lusso-facts dt {
  color: #6e5a5d;
  font-size: 12.5px;
}

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

/* Khoảng cách theo phút và mốc thời gian */

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

.lusso-minutes li {
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-left: 3px solid var(--gold);
  background: var(--white);
  box-shadow: 0 8px 20px rgba(90, 10, 30, 0.07);
}

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

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

/* Danh sách: bullet hình vòm */

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

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

/* Hình thoi vàng nhỏ, căn giữa dòng chữ đầu tiên (line-height 1.6). */
.lusso-list li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: calc(0.8em - 3.5px);
  width: 7px;
  height: 7px;
  background: var(--gold-ink);
  transform: rotate(45deg);
}

/* Thẻ nội dung */

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

.lusso-cards article {
  padding: 16px 17px;
  border-top: 2px solid var(--gold);
  background: var(--white);
  box-shadow: 0 8px 22px rgba(90, 10, 30, 0.07);
}

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

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

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

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

.lusso-cards p {
  margin: 0 0 6px;
  color: #5e4a4d;
  font-size: 13.5px;
}

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

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

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

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

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

.lusso-gallery__item {
  overflow: hidden;
  background: var(--white);
  color: inherit;
  scroll-snap-align: start;
  text-decoration: none;
}

.lusso-section--tint .lusso-gallery__item {
  background: var(--blush);
}

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

.lusso-gallery__item span {
  display: block;
  padding: 10px 13px 13px;
  color: #6e5a5d;
  font-size: 12.5px;
}

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

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

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

.lusso-plan {
  display: grid;
  align-content: start;
  padding-bottom: 15px;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 8px 22px rgba(90, 10, 30, 0.07);
  scroll-snap-align: start;
}

/* Bản vẽ của chủ đầu tư có cột nhãn đỏ bên trái, cắt theo khung 16:9 là vừa
   giữ nhãn tên dòng căn vừa giữ mặt bằng. */
.lusso-plan img {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
}

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

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

.lusso-plan p {
  margin: 0 15px;
  color: #6e5a5d;
  font-size: 12.5px;
}

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

.lusso-table-wrap {
  overflow-x: auto;
  background: rgba(255, 255, 255, 0.07);
}

.lusso-table-wrap--light {
  margin-bottom: 18px;
  background: var(--white);
  box-shadow: 0 12px 30px rgba(90, 10, 30, 0.08);
}

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

.lusso-table caption {
  padding: 13px 15px 0;
  color: #6e5a5d;
  font-size: 12.5px;
  text-align: left;
}

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

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

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

/* Cột giá đứng giữa nên chọn td đầu tiên. */
.lusso-table tbody td:first-of-type {
  color: var(--gold-soft);
  font-weight: 800;
  white-space: nowrap;
}

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

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

.lusso-table--light thead th {
  color: #6e5a5d;
}

.lusso-table--light tbody th {
  color: var(--wine);
}

.lusso-table--light tbody th small {
  display: block;
  color: #6e5a5d;
  font-size: 12px;
  font-weight: 600;
}

.lusso-table--light tbody td:first-of-type {
  color: #2a1a1d;
  font-weight: 600;
  white-space: nowrap;
}

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

.lusso-section--dark .lusso-hero__actions {
  margin-top: 18px;
}

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

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

.lusso-partners article {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 15px 16px;
  border: 1px solid var(--hairline);
  background: var(--white);
}

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

.lusso-partners span {
  color: #6e5a5d;
  font-size: 12.5px;
  line-height: 1.4;
}

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

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

.lusso-page .seo-faq details {
  padding: 4px 17px;
  /* site.css đặt viền vàng chung cho .seo-faq, trang này dùng viền mảnh màu vang. */
  border: 1px solid var(--hairline);
  /* site.css bo .seo-faq details 14px cho cả site, trang này ép về vuông. */
  border-radius: 0;
  background: var(--white);
}

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

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

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

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

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

/* Liên hệ */

.lusso-contact .lusso-cta--ghost {
  border-color: var(--wine);
  color: var(--wine);
}

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

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

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

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

  .lusso-bar {
  }

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

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

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

  .lusso-bar__menu {
    display: none;
  }

  .lusso-hero {
    margin: 16px 0 0;
  }

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

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

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

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

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

  .lusso-flag {
    margin-inline: 0;
  }

  .lusso-section {
    padding: 42px 38px;
    scroll-margin-top: 76px;
  }

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

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

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

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

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

  .lusso-plans {
    grid-auto-columns: minmax(300px, 0.36fr);
  }
}