/* Landing page dự án Phước Đông New City, Trảng Bàng, Tây Ninh.
   Chỉ nạp trên /phuoc-dong-new-city và mọi selector nằm dưới .phuocdong-page.

   Dựng theo kit 3 trong docs/landing-kit/README.md.

   Tông riêng: đỏ gạch + cam đất + vàng nghệ trên nền kem, một bảng màu thuần
   ấm không có màu lạnh nào. Đây là trang duy nhất trong site đi theo hướng này:
   sáu trang kia đều lấy xanh lá hoặc xanh dương làm chủ đạo. Phân khúc 1,5 tỷ
   cạnh khu công nghiệp nên tông cố ý mộc và gần gũi thay vì sang trọng.

   Dấu riêng: bo góc mềm 6 - 14px và gạch chân tiêu đề dạng hàng gạch xếp.
*/

.phuocdong-page {
  --brand: #7a3320;
  --brand-2: #a34a2a;
  --accent: #b5651f;
  --accent-ink: #a25a1c;
  --accent-soft: #f2c894;
  --warm: #d9932b;
  --warm-ink: #93621a;
  --surface: #f8f2e8;
  --hairline: rgba(122, 51, 32, 0.15);

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

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

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

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

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

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

.phuocdong-bar__brand span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  /* --brand trên --accent chỉ đạt 2.09:1 */
  background: var(--brand-2);
  color: var(--white);
  font-size: 12px;
  font-weight: 900;
}

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

.phuocdong-bar__nav {
  display: none;
}

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

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

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

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

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

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

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

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

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

.phuocdong-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(72, 30, 19, 0.92) 38%,
    rgba(72, 30, 19, 0.62) 100%
  );
  color: var(--white);
}

.phuocdong-eyebrow {
  margin: 0;
  /* --accent-soft trên nền hero #a34a2a chỉ đạt 3.77:1 */
  color: #ffe4bd;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

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

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

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

.phuocdong-hero__lede strong {
  /* --warm trên nền hero #a34a2a chỉ đạt 2.29:1 */
  color: #ffdda6;
}

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

.phuocdong-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 6px;
  /* Chữ trắng trên --accent chỉ đạt 4.33:1 */
  background: var(--accent-ink);
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

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

.phuocdong-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: 14px;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
  background-image: linear-gradient(130deg, var(--brand), var(--accent));
  color: var(--white);
}

.phuocdong-stats div {
  display: grid;
  gap: 2px;
  padding: 15px 14px;
  background: rgba(72, 30, 19, 0.34);
}

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

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

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

/* Khung section */

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

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

.phuocdong-section--dark {
  background: linear-gradient(150deg, var(--brand), #5a2415);
  color: rgba(255, 255, 255, 0.84);
}

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

.phuocdong-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: gạch chân dạng hàng gạch xếp, hợp với tông đỏ gạch của trang và
   với bối cảnh khu công nghiệp. Các trang khác dùng sóng nước, thớ gỗ hoặc
   vạch trơn. */
.phuocdong-section h2::after {
  content: "";
  display: block;
  width: 84px;
  height: 8px;
  margin-top: 12px;
  border-radius: 2px;
  background:
    repeating-linear-gradient(to right, var(--brand-2) 0 18px, transparent 18px 21px),
    var(--accent-soft);
}

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

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

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

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

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

.phuocdong-note {
  margin: 12px 0 0;
  color: #786a5c;
  font-size: 12.5px;
}

.phuocdong-section--dark .phuocdong-note {
  color: rgba(255, 255, 255, 0.74);
}

/* Ảnh */

.phuocdong-figure {
  margin: 0 0 16px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--white);
  box-shadow: 0 12px 30px rgba(72, 30, 19, 0.12);
}

.phuocdong-figure a {
  display: block;
}

.phuocdong-figure figcaption {
  padding: 10px 15px 13px;
  color: #786a5c;
  font-size: 12.5px;
}

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

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

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

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

.phuocdong-facts dt {
  color: #786a5c;
  font-size: 12.5px;
}

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

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

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

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

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

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

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

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

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

/* Thẻ nội dung */

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

.phuocdong-cards article {
  padding: 16px 17px;
  border-radius: 10px;
  background: var(--white);
  box-shadow: 0 8px 22px rgba(72, 30, 19, 0.08);
}

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

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

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

.phuocdong-cards p {
  margin: 0 0 6px;
  color: #786a5c;
  font-size: 13.5px;
}

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

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

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

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

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

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

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

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

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

.phuocdong-gallery__item span {
  display: block;
  padding: 10px 13px 13px;
  color: #786a5c;
  font-size: 12.5px;
}

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

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

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

.phuocdong-plan {
  display: grid;
  align-content: start;
  padding-bottom: 15px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--white);
  box-shadow: 0 8px 22px rgba(72, 30, 19, 0.08);
  scroll-snap-align: start;
}

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

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

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

.phuocdong-plan p {
  margin: 0 15px;
  color: #786a5c;
  font-size: 12.5px;
}

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

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

.phuocdong-table-wrap--light {
  margin-bottom: 18px;
  background: var(--white);
  box-shadow: 0 12px 30px rgba(72, 30, 19, 0.1);
}

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

.phuocdong-table caption {
  padding: 13px 15px 0;
  color: #786a5c;
  font-size: 12.5px;
  text-align: left;
}

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

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

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

.phuocdong-table tbody td:first-of-type {
  /* --warm trên nền đỏ gạch, đã tính cả lớp phủ trắng 7% của khung bảng,
     chỉ đạt 2.86:1 */
  color: #ffd28c;
  font-weight: 800;
  white-space: nowrap;
}

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

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

.phuocdong-table--light thead th {
  color: #786a5c;
}

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

.phuocdong-table--light tbody td:first-of-type {
  color: #3b2a22;
  font-weight: 600;
}

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

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

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

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

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

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

.phuocdong-partners span {
  color: #786a5c;
  font-size: 12.5px;
  line-height: 1.4;
}

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

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

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

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

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

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

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

.phuocdong-page .seo-faq p {
  margin: 0 0 15px;
  color: #786a5c;
  font-size: 13.5px;
}

/* Liên hệ */

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

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

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

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

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

  .phuocdong-bar {
    border-radius: 0 0 10px 10px;
  }

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

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

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

  .phuocdong-bar__menu {
    display: none;
  }

  .phuocdong-hero {
    margin: 16px 0 0;
    border-radius: 14px;
  }

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

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

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

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

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

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

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

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

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

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

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

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

/* Khối dòng sản phẩm (block product của kit 3).

   Thẻ đơn giản vì chưa có ảnh layout của chủ đầu tư. Khi có ảnh thì thêm khối
   <a data-lightbox><img></a> lên đầu mỗi thẻ theo template. */

.phuocdong-products {
  display: grid;
  gap: 12px;
}

.phuocdong-product {
  padding: 16px 16px 18px;
  border: 1px solid var(--hairline);
  border-radius: inherit;
  background: var(--white);
}

.phuocdong-products {
  border-radius: 0;
}

.phuocdong-product h4 {
  margin: 0 0 6px;
  color: var(--brand);
  font-size: 16px;
  font-weight: 800;
}

.phuocdong-product__price {
  margin: 0 0 10px;
  color: var(--warm-ink);
  font-size: 17px;
  font-weight: 800;
}

.phuocdong-product__specs {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}

.phuocdong-product__specs li {
  position: relative;
  padding-left: 16px;
  font-size: 13.5px;
}

.phuocdong-product__specs li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

@media (min-width: 720px) {
  .phuocdong-products {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Hero không ảnh.

   Chưa có bộ ảnh của chủ đầu tư nên hero dùng nền chuyển màu thay cho ảnh phối
   cảnh. Khi có ảnh thì bỏ modifier này và dựng lại hero theo template. */

.phuocdong-hero--noimage {
  display: block;
  min-height: 0;
  background: linear-gradient(155deg, var(--brand-2), var(--brand) 66%);
}

.phuocdong-hero--noimage .phuocdong-hero__copy {
  background: none;
}

/* Băng cảnh báo nguồn số liệu, đặt ngay dưới dải số liệu. Xóa khi đã đối chiếu
   được với tài liệu chủ đầu tư. */

.phuocdong-flag {
  margin: 0 16px 4px;
  padding: 12px 14px;
  border-left: 3px solid var(--warm);
  background: rgba(217, 147, 43, 0.14);
  color: #5c4630;
  font-size: 13px;
  line-height: 1.55;
}

.phuocdong-flag a {
  /* --warm-ink trên nền vàng nghệ 14% chỉ đạt 4.22:1 */
  color: #7d5316;
  font-weight: 700;
}

.phuocdong-flag strong {
  color: var(--brand);
}

/* Ảnh bản vẽ trong thẻ dòng sản phẩm. Thẻ có padding nên ảnh phải kéo tràn ra
   sát mép, âm đúng bằng padding của thẻ. */

.phuocdong-product > a {
  display: block;
  margin: -16px -16px 14px;
  overflow: hidden;
  border-bottom: 1px solid var(--hairline);
}

.phuocdong-product > a img {
  display: block;
  width: 100%;
  height: auto;
}