/* =====================================================
   MODULE DỰ ÁN — JackieRealtor
   Toàn bộ rule nằm dưới .jr-project-page để không ảnh
   hưởng layout sẵn có của theme JustHome.
   ===================================================== */

.jr-project-page {
  --jr-black: #111111;
  --jr-ink: #242424;
  --jr-muted: #77736c;
  --jr-line: #e7dfd2;
  --jr-soft: #faf7f1;
  --jr-white: #ffffff;
  --jr-gold: #b79663;
  --jr-gold-dark: #8d6d3b;
  --jr-shadow: 0 20px 60px rgba(0, 0, 0, .09);
  --jr-strong-shadow: 0 30px 90px rgba(0, 0, 0, .18);
  --jr-radius: 18px;
  --jr-container: 1200px;

  color: var(--jr-ink);
  background: var(--jr-white);
  line-height: 1.6;
}

.jr-project-page *,
.jr-project-page *::before,
.jr-project-page *::after {
  box-sizing: border-box;
}

.jr-project-page img {
  display: block;
  max-width: 100%;
  height: auto;
}

.jr-project-page a {
  text-decoration: none;
}

/* Theme cha có rule này trong style.css, khai báo lại để module không phụ thuộc
   vào việc file đó có được nạp hay không. */
.jr-project-page .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.jr-project-page .jr-container {
  max-width: var(--jr-container);
  margin: 0 auto;
  padding: 0 22px;
  width: 100%;
}

.jr-project-page .jr-section {
  padding: 64px 0;
}

/* --------- Nút --------- */

.jr-project-page .jr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 12px 20px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  font-weight: 800;
  font-size: 14px;
  line-height: 1.2;
  transition: transform .25s ease, opacity .25s ease;
}

.jr-project-page .jr-btn:hover {
  transform: translateY(-1px);
}

.jr-project-page .jr-btn[disabled] {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

.jr-project-page .jr-btn-black {
  background: var(--jr-black);
  color: #fff;
}

.jr-project-page .jr-btn-gold {
  background: var(--jr-gold);
  color: #fff;
}

.jr-project-page .jr-btn-outline {
  background: #fff;
  color: var(--jr-black);
  border: 1px solid var(--jr-line);
}

.jr-project-page .jr-btn-block {
  width: 100%;
}

/* --------- Khối tiêu đề --------- */

.jr-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--jr-gold-dark);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.jr-kicker::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--jr-gold);
}

.jr-project-page .jr-title {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: -.035em;
  color: var(--jr-black);
  line-height: 1.1;
  font-size: clamp(28px, 3.4vw, 44px);
}

.jr-subtitle {
  margin: 14px 0 0;
  max-width: 740px;
  color: var(--jr-muted);
  font-size: 16px;
}

.jr-card {
  background: #fff;
  border: 1px solid var(--jr-line);
  border-radius: var(--jr-radius);
  box-shadow: var(--jr-shadow);
}

.jr-pad {
  padding: 28px;
}

/* =====================================================
   1. HERO
   ===================================================== */

.jr-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--jr-black);
  background-position: center;
  background-size: cover;
  color: #fff;
}

/* Phải để .jr-project-page ở đầu: phần tử này mang cả class .jr-container,
   mà rule .jr-project-page .jr-container đặt padding: 0 22px — shorthand đó
   ép padding trên/dưới về 0 và có độ ưu tiên cao hơn .jr-hero-inner đứng một
   mình, nên khoảng cách dọc sẽ bị nuốt mất nếu viết thiếu. */
.jr-project-page .jr-hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 36px;
  align-items: center;
  padding-top: 35px;
  padding-bottom: 35px;
}

.jr-hero-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.jr-label {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .22);
}

.jr-label.gold {
  background: var(--jr-gold);
  border-color: var(--jr-gold);
  color: #fff;
}

.jr-project-page .jr-hero-title {
  /* Margin dọc của tiêu đề sẽ gộp (collapse) với margin của phần tử liền kề:
     .jr-hero-labels có margin-bottom 18px, .jr-hero-lead có margin-top 14px.
     Nên khoảng cách thực tế = giá trị lớn hơn, không bị cộng dồn. */
  margin: 22px 0 26px;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -.035em;
}

.jr-hero-lead {
  max-width: 620px;
  margin: 14px 0 20px;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .82);

  /* Giới hạn 3 dòng để hero không bị đẩy cao khi mô tả dài. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.jr-hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Thẻ thông tin nhanh */

.jr-passport {
  background: rgba(255, 255, 255, .96);
  color: var(--jr-black);
  border-radius: 18px;
  padding: 20px;
  box-shadow: var(--jr-strong-shadow);
}

.jr-project-page .jr-passport-title {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--jr-black);
}

.jr-passport-price {
  margin: 12px 0 14px;
  padding: 13px 14px;
  border-radius: 12px;
  background: var(--jr-soft);
  border: 1px solid var(--jr-line);
}

.jr-passport-price small {
  display: block;
  color: var(--jr-muted);
  margin-bottom: 2px;
}

.jr-passport-price strong {
  display: block;
  color: var(--jr-gold-dark);
  font-size: 21px;
  line-height: 1.2;
}

.jr-passport-price em {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--jr-muted);
  font-style: normal;
}

.jr-passport-list {
  border: 1px solid var(--jr-line);
  border-radius: 14px;
  overflow: hidden;
}

.jr-passport-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--jr-line);
  font-size: 14px;
}

.jr-passport-row:last-child {
  border-bottom: 0;
}

.jr-passport-row span {
  color: var(--jr-muted);
  flex: 0 0 auto;
}

.jr-passport-row strong {
  text-align: right;
}

/* =====================================================
   THƯ VIỆN ẢNH
   ===================================================== */

.jr-gallery-section {
  padding: 22px 0 0;
}

.jr-gallery-grid {
  position: relative;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: 8px;
  aspect-ratio: 16 / 7;
  border-radius: var(--jr-radius);
  overflow: hidden;
}

.jr-project-page .jr-gallery-cell {
  position: relative;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--jr-soft);
  cursor: pointer;
  overflow: hidden;
  min-height: 0;
}

.jr-gallery-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.jr-gallery-cell:hover img {
  transform: scale(1.04);
}

.jr-gallery-main {
  grid-row: span 2;
}

/* Ít ảnh thì đổi lưới cho khít, tránh để lại ô trống.
   Mặc định (5 ảnh trở lên): 3 cột x 2 hàng, ảnh chính chiếm cột đầu cả 2 hàng. */

.jr-gallery-count-1 {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.jr-gallery-count-1 .jr-gallery-main {
  grid-row: span 1;
}

.jr-gallery-count-2 {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr;
}

.jr-gallery-count-2 .jr-gallery-main {
  grid-row: span 1;
}

/* 3 ảnh: ảnh chính bên trái, 2 ảnh nhỏ xếp dọc bên phải. */
.jr-gallery-count-3 {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: repeat(2, 1fr);
}

/* 4 ảnh: ảnh chính bên trái, 3 ảnh nhỏ xếp dọc bên phải. */
.jr-gallery-count-4 {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: repeat(3, 1fr);
}

.jr-gallery-count-4 .jr-gallery-main {
  grid-row: span 3;
}

.jr-project-page .jr-gallery-all {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  padding: 11px 18px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .95);
  color: var(--jr-black);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
}

.jr-project-page .jr-gallery-all:hover {
  background: #fff;
}

.jr-gallery-data {
  display: none;
}

/* =====================================================
   2. MENU NỘI DUNG — thanh ngang dính
   ===================================================== */

.jr-topnav {
  position: sticky;
  top: 0;
  z-index: 40;
  margin-top: 26px;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--jr-line);
  border-bottom: 1px solid var(--jr-line);
}

.jr-topnav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 60px;
}

.jr-topnav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.jr-topnav-links::-webkit-scrollbar {
  display: none;
}

.jr-topnav-links a {
  flex: 0 0 auto;
  padding: 9px 15px;
  border-radius: 999px;
  color: #333;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}

.jr-topnav-links a:hover,
.jr-topnav-links a.is-active {
  background: var(--jr-black);
  color: #fff;
}

.jr-topnav-cta {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 9px 18px;
  font-size: 13px;
}

/* Nội dung chiếm trọn khung, không chia cột nữa. */
.jr-content-col {
  width: 100%;
}

.jr-content-block {
  /* Chừa chỗ cho thanh menu ngang đang dính ở top:0. */
  scroll-margin-top: 84px;
  margin-bottom: 52px;
}

.jr-gallery-section {
  scroll-margin-top: 84px;
}

/* Admin bar của WordPress đẩy trang xuống 32px. */
.admin-bar .jr-topnav {
  top: 32px;
}

@media screen and (max-width: 782px) {

  .admin-bar .jr-topnav {
    top: 46px;
  }
}

.jr-content-block:last-child {
  margin-bottom: 0;
}

/* =====================================================
   3. TỔNG QUAN
   ===================================================== */

.jr-editorial-main {
  margin-top: 22px;
}

.jr-editorial-main p {
  margin: 0 0 18px;
  font-size: 16px;
  color: #333;
}

.jr-editorial-main p:last-child {
  margin-bottom: 0;
}

.jr-project-page .jr-quote {
  margin: 24px 0 0;
  padding: 22px;
  border-left: 3px solid var(--jr-gold);
  background: var(--jr-soft);
  border-radius: 0 14px 14px 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  line-height: 1.35;
  color: var(--jr-black);
}

.jr-matrix {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--jr-line);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  margin-top: 22px;
}

.jr-matrix-item {
  padding: 20px;
  border-right: 1px solid var(--jr-line);
  border-top: 1px solid var(--jr-line);
}

.jr-matrix-item:nth-child(3n) {
  border-right: 0;
}

.jr-matrix-item:nth-child(-n+3) {
  border-top: 0;
}

.jr-matrix-item small {
  display: block;
  color: var(--jr-muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 8px;
}

.jr-matrix-item strong {
  color: var(--jr-black);
  font-size: 16px;
}

/* =====================================================
   4. RESIDENCE TYPES
   ===================================================== */

.jr-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 20px;
}

.jr-project-page .jr-tab {
  padding: 10px 16px;
  border: 1px solid var(--jr-line);
  border-radius: 999px;
  background: #fff;
  color: #333;
  font-weight: 900;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.2;
}

.jr-project-page .jr-tab.is-active {
  background: var(--jr-black);
  color: #fff;
  border-color: var(--jr-black);
}

.jr-residence-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.jr-residence {
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--jr-line);
  background: #fff;
  box-shadow: var(--jr-shadow);
  display: flex;
  flex-direction: column;
}

.jr-residence[hidden] {
  display: none;
}

.jr-residence-visual {
  position: relative;
  /* Khung cao hơn 16/10 cũ vì mặt bằng căn hộ thường gần vuông; để contain có
     đủ chỗ hiển thị mà không co quá nhỏ. */
  aspect-ratio: 4 / 3;
  background:
    linear-gradient(90deg, rgba(17, 17, 17, .07) 1px, transparent 1px),
    linear-gradient(rgba(17, 17, 17, .07) 1px, transparent 1px),
    var(--jr-soft);
  background-size: 24px 24px;
  overflow: hidden;
}

/* Ảnh ở đây là bản vẽ mặt bằng nên phải thấy trọn khung: dùng contain thay cho
   cover, phần thừa để lộ nền kẻ ô phía sau như giấy can. */
.jr-residence-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
}

.jr-plan-box {
  position: absolute;
  inset: 24px;
  border: 2px solid var(--jr-black);
  background: rgba(183, 150, 99, .08);
}

.jr-residence-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.jr-residence-body small {
  color: var(--jr-gold-dark);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
}

.jr-project-page .jr-residence-body h3 {
  margin: 7px 0 8px;
  font-size: 20px;
  color: var(--jr-black);
}

.jr-residence-body p {
  margin: 0 0 15px;
  color: var(--jr-muted);
  font-size: 14px;
}

.jr-mini-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 15px;
}

.jr-mini-meta span {
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--jr-soft);
  color: #333;
  font-size: 12px;
  font-weight: 800;
}

.jr-residence-price {
  margin-top: auto;
  color: var(--jr-gold-dark);
  font-weight: 900;
  font-size: 17px;
}

/* =====================================================
   5. INVESTMENT HIGHLIGHTS
   ===================================================== */

.jr-highlight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.jr-highlight {
  padding: 24px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--jr-line);
  box-shadow: var(--jr-shadow);
}

.jr-highlight-metric {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 32px;
  line-height: 1.1;
  color: var(--jr-gold-dark);
  margin-bottom: 10px;
}

.jr-highlight strong {
  display: block;
  color: var(--jr-black);
  margin-bottom: 8px;
  font-size: 16px;
}

.jr-highlight p {
  margin: 0;
  color: var(--jr-muted);
  font-size: 14px;
}

/* =====================================================
   6. LOCATION INTELLIGENCE
   ===================================================== */

.jr-map-layout {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 22px;
  margin-top: 24px;
  align-items: start;
}

.jr-map {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--jr-line);
  background: var(--jr-soft);
}

.jr-map iframe,
.jr-map img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  border: 0;
  display: block;
  object-fit: cover;
}

.jr-amenity-group + .jr-amenity-group {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--jr-line);
}

.jr-project-page .jr-amenity-group h4 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--jr-gold-dark);
}

.jr-amenity-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.jr-amenity-group li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--jr-line);
  font-size: 14px;
}

.jr-amenity-group li:last-child {
  border-bottom: 0;
}

.jr-amenity-group li em {
  font-style: normal;
  color: var(--jr-muted);
  flex: 0 0 auto;
}

/* =====================================================
   7. LEGAL
   ===================================================== */

.jr-legal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.jr-legal {
  padding: 24px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--jr-line);
  box-shadow: var(--jr-shadow);
}

.jr-legal span {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--jr-gold);
  color: #fff;
  font-weight: 900;
  font-size: 13px;
  margin-bottom: 14px;
}

.jr-legal strong {
  display: block;
  color: var(--jr-black);
  margin-bottom: 8px;
}

.jr-legal p {
  color: var(--jr-muted);
  margin: 0;
  font-size: 14px;
}

/* =====================================================
   8 + 9. FORM
   ===================================================== */

.jr-brochure {
  display: grid;
  grid-template-columns: 1fr 390px;
  gap: 30px;
  align-items: center;
  padding: 34px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(17, 17, 17, .97), rgba(17, 17, 17, .82));
  color: #fff;
  box-shadow: var(--jr-strong-shadow);
}

.jr-brochure .jr-title,
.jr-brochure .jr-kicker {
  color: #fff;
}

.jr-brochure .jr-kicker::before {
  background: var(--jr-gold);
}

.jr-brochure p {
  color: rgba(255, 255, 255, .76);
  margin: 14px 0 0;
}

.jr-project-page .jr-form {
  display: grid;
  gap: 14px;
}

.jr-brochure .jr-form {
  padding: 26px;
  border-radius: 18px;
  background: #fff;
}

.jr-form-consult {
  margin-top: 24px;
}

.jr-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.jr-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.jr-project-page .jr-field label {
  font-size: 13px;
  font-weight: 800;
  color: var(--jr-ink);
  margin: 0;
}

.jr-project-page .jr-field label span {
  color: #9b463e;
}

.jr-project-page .jr-form input[type="text"],
.jr-project-page .jr-form input[type="tel"],
.jr-project-page .jr-form input[type="email"],
.jr-project-page .jr-form select,
.jr-project-page .jr-form textarea {
  width: 100%;
  border: 1px solid var(--jr-line);
  border-radius: 10px;
  min-height: 46px;
  padding: 12px 14px;
  background: #fff;
  color: var(--jr-ink);
  outline: none;
  font-size: 15px;
  box-shadow: none;
}

.jr-project-page .jr-form textarea {
  min-height: 110px;
  resize: vertical;
}

.jr-project-page .jr-form input:focus,
.jr-project-page .jr-form select:focus,
.jr-project-page .jr-form textarea:focus {
  border-color: var(--jr-gold);
  box-shadow: 0 0 0 3px rgba(183, 150, 99, .16);
}

.jr-project-page .jr-form .jr-has-error input,
.jr-project-page .jr-form .jr-has-error select {
  border-color: #9b463e;
}

/* Honeypot: ẩn khỏi mắt người dùng và trình đọc màn hình, bot vẫn thấy trong DOM. */
.jr-project-page .jr-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none;
}

.jr-error {
  display: none;
  font-size: 12px;
  font-weight: 700;
  color: #9b463e;
}

.jr-has-error .jr-error {
  display: block;
}

.jr-form-note {
  margin: 0;
  font-size: 14px;
  min-height: 1px;
}

.jr-form-note.is-success {
  color: #356b52;
  font-weight: 700;
}

.jr-form-note.is-error {
  color: #9b463e;
  font-weight: 700;
}

.jr-form-note a {
  color: var(--jr-gold-dark);
  text-decoration: underline;
}

/* =====================================================
   10. DỰ ÁN TƯƠNG TỰ
   ===================================================== */

.jr-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.jr-related {
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--jr-line);
  background: #fff;
  box-shadow: var(--jr-shadow);
}

.jr-related-media {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--jr-soft);
  overflow: hidden;
}

.jr-related-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.jr-related:hover .jr-related-media img {
  transform: scale(1.04);
}

.jr-related-body {
  padding: 18px 20px 22px;
}

.jr-project-page .jr-related-body h3 {
  margin: 0 0 6px;
  font-size: 18px;
}

.jr-project-page .jr-related-body h3 a {
  color: var(--jr-black);
}

.jr-related-location {
  margin: 0 0 10px;
  color: var(--jr-muted);
  font-size: 14px;
}

.jr-related-price {
  color: var(--jr-gold-dark);
  font-weight: 900;
}

/* =====================================================
   LIGHTBOX THƯ VIỆN ẢNH
   ===================================================== */

.jr-project-page .jr-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  background: rgba(10, 10, 10, .94);
}

.jr-project-page .jr-lightbox[hidden] {
  display: none;
}

.jr-lightbox-stage {
  margin: 0;
  max-width: min(1100px, 100%);
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jr-lightbox-stage img {
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
}

.jr-project-page .jr-lightbox-nav,
.jr-project-page .jr-lightbox-close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease;
}

.jr-project-page .jr-lightbox-nav:hover,
.jr-project-page .jr-lightbox-close:hover {
  background: rgba(255, 255, 255, .22);
}

.jr-project-page .jr-lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 30px;
}

.jr-lightbox-counter {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, .8);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
}

/* =====================================================
   TRANG DANH SÁCH /du-an/ — thẻ dự án
   Dùng đúng thông số của thẻ property (For Rent) trong
   justhome/css/template.css để hai loại thẻ đồng bộ:
     .property-item              -> radius 12/16px, border #E9E9E9, padding 10px
     .property-thumbnail-wrapper -> radius 12/16px, overflow hidden
     .status-property-label      -> nền #1F4B43, cao 33px, bo tròn
     .property-price             -> #EB664E, 18/21px, weight 600
     .property-information       -> padding 15px 10px 10px / 20px 20px 10px
     .property-metas > div       -> vạch ngăn 1px #E9E9E9
   ===================================================== */

/* H1 + breadcrumb căn trái, cùng thông số với .jr-seo-h1 / .jr-breadcrumb
   của template For Rent để hai trang danh sách trông giống nhau. */

.jr-project-page .jr-archive-h1 {
  margin: 0 0 10px;
  font-size: 44px;
  line-height: 1.15;
  text-align: left;
}

.jr-archive-crumb {
  margin: 0 0 22px;
  color: #666;
  font-size: 14px;
  text-align: left;
}

.jr-archive-crumb a {
  color: #666;
}

.jr-archive-crumb a:hover {
  text-decoration: underline;
}

.jr-archive-crumb span {
  margin: 0 4px;
}

@media (max-width: 991px) {

  .jr-project-page .jr-archive-h1 {
    font-size: 32px;
  }
}

@media (max-width: 640px) {

  .jr-project-page .jr-archive-h1 {
    font-size: 26px;
  }
}

.jr-project-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.jr-project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 10px;
  background: #fff;
  border: 1px solid #E9E9E9;
  border-radius: 12px;
  overflow: hidden;
  transition: all .2s ease-in-out 0s;
}

.jr-project-card:hover {
  box-shadow: 0 6px 15px 0 rgba(64, 79, 104, .05);
}

/* --- Ảnh --- */

.jr-project-card-thumb {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.jr-project-card-media {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--jr-soft);
  overflow: hidden;
}

.jr-project-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all .3s ease-in-out 0s;
}

.jr-project-card:hover .jr-project-card-media img {
  transform: scale(1.05);
}

/* Nhãn trạng thái — cùng dáng .status-property-label của theme. */
.jr-project-card-toplabel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 15px;
  z-index: 1;
  pointer-events: none;
}

.jr-project-status-label {
  display: inline-block;
  padding: 0 15px;
  line-height: 33px;
  border-radius: 33px;
  background: #1F4B43;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
}

.jr-project-card-photos {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 33px;
  background: rgba(26, 26, 26, .62);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

.jr-project-card-photos i {
  font-size: 13px;
  line-height: 1;
}

/* --- Phần chữ --- */

.jr-project-card-info {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 15px 10px 10px;
}

/* Tiêu đề một dòng, giá nằm hàng riêng bên dưới. */
.jr-project-card-head {
  display: block;
}

.jr-project-page .jr-project-card-title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jr-project-page .jr-project-card-title a {
  color: var(--justhome-link-color, #1a1a1a);
}

.jr-project-page .jr-project-card-title a:hover {
  color: var(--justhome-theme-color, var(--jr-gold-dark));
}

.jr-project-card-price {
  margin-top: 4px;
  color: #EB664E;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

.jr-project-card-location {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  color: var(--jr-muted);
  font-size: 14px;
}

.jr-project-card-location i {
  flex: 0 0 auto;
  font-size: 14px;
  line-height: 1;
}

.jr-project-card-desc {
  margin: 12px 0 0;
  color: var(--jr-muted);
  font-size: 14px;
  line-height: 1.6;

  /* Cắt 3 dòng để mọi thẻ cao bằng nhau. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Vạch ngăn giữa các chỉ số — giống .property-metas của theme. */
.jr-project-card-metas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: auto;
  padding-top: 15px;
  font-size: 14px;
}

.jr-project-card-metas > div {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-right: 10px;
  padding-right: 10px;
  border-right: 1px solid #E9E9E9;
  line-height: 1.5;
}

.jr-project-card-metas > div:last-child {
  margin-right: 0;
  padding-right: 0;
  border-right: 0;
}

/* Mã tra cứu để khách gõ vào ô "Search with an ID" của bộ lọc dự án. Để nhạt
   hơn các thông số khác vì không phải thứ khách cần đọc trước. */
.jr-project-card-id {
  color: var(--jr-muted);
  font-size: 13px;
  letter-spacing: .02em;
  white-space: nowrap;
}

.jr-project-card-metas i {
  color: var(--justhome-theme-color, var(--jr-gold));
  font-size: 15px;
  line-height: 1;
}

@media (min-width: 1200px) {

  .jr-project-cards {
    gap: 1.875rem;
  }

  .jr-project-card,
  .jr-project-card-thumb {
    border-radius: 16px;
  }

  .jr-project-card-toplabel {
    padding: 20px;
  }

  .jr-project-card-info {
    padding: 20px 20px 10px;
  }

  .jr-project-page .jr-project-card-title {
    font-size: 19px;
  }

  .jr-project-card-price {
    font-size: 21px;
  }

  .jr-project-card-metas {
    padding-top: 20px;
  }

  .jr-project-card-metas > div {
    margin-right: 15px;
    padding-right: 15px;
  }
}

.jr-archive-pagination {
  margin-top: 34px;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 1199px) {

  .jr-project-page .jr-hero-inner {
    grid-template-columns: minmax(0, 1fr) 330px;
  }

  .jr-residence-grid,
  .jr-highlight-grid,
  .jr-legal-grid,
  .jr-related-grid,
  .jr-project-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {

  .jr-project-page .jr-section {
    padding: 48px 0;
  }

  .jr-project-page .jr-hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    padding-top: 35px;
    padding-bottom: 35px;
  }

  /* Thư viện ảnh: 1 ảnh lớn + 2 ảnh nhỏ cho vừa màn hình hẹp. */
  .jr-gallery-grid {
    grid-template-columns: 1fr 1fr;
    aspect-ratio: 4 / 3;
  }

  .jr-gallery-main {
    grid-column: span 2;
  }

  .jr-gallery-cell:nth-child(n+4) {
    display: none;
  }

  /* Nút CTA trong thanh menu bị chật thì ẩn, đã có nút ở hero và cuối trang. */
  .jr-topnav-cta {
    display: none;
  }

  .jr-map-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .jr-brochure {
    grid-template-columns: minmax(0, 1fr);
    padding: 26px;
  }

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

  .jr-matrix-item:nth-child(3n) {
    border-right: 1px solid var(--jr-line);
  }

  .jr-matrix-item:nth-child(2n) {
    border-right: 0;
  }

  .jr-matrix-item:nth-child(-n+3) {
    border-top: 1px solid var(--jr-line);
  }

  .jr-matrix-item:nth-child(-n+2) {
    border-top: 0;
  }
}

@media (max-width: 640px) {

  .jr-project-page .jr-container {
    padding: 0 16px;
  }

  /* Rule .jr-container ngay trên dùng shorthand nên xoá sạch padding dọc của
     hero (cùng độ ưu tiên 0-2-0 nhưng đứng sau rule ở breakpoint 991px). Phải
     khai báo lại ở đây, nếu không hàng badge sẽ dính sát mép trên màn hình. */
  .jr-project-page .jr-hero-inner {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .jr-project-page .jr-section {
    padding: 36px 0;
  }

  .jr-content-block {
    margin-bottom: 40px;
  }

  .jr-passport,
  .jr-pad {
    padding: 20px;
  }

  .jr-residence-grid,
  .jr-highlight-grid,
  .jr-legal-grid,
  .jr-related-grid,
  .jr-project-cards,
  .jr-field-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .jr-project-cards {
    gap: 18px;
  }

  .jr-matrix {
    grid-template-columns: minmax(0, 1fr);
  }

  .jr-matrix-item,
  .jr-matrix-item:nth-child(3n),
  .jr-matrix-item:nth-child(2n) {
    border-right: 0;
    border-top: 1px solid var(--jr-line);
  }

  .jr-matrix-item:first-child {
    border-top: 0;
  }

  .jr-project-page .jr-hero-title {
    margin: 16px 0 20px;
  }

  .jr-hero-actions .jr-btn {
    flex: 1 1 100%;
  }

  .jr-gallery-grid {
    aspect-ratio: 3 / 2;
    gap: 6px;
  }

  .jr-project-page .jr-gallery-all {
    right: 10px;
    bottom: 10px;
    padding: 9px 14px;
    font-size: 12px;
  }

  .jr-topnav-inner {
    min-height: 52px;
  }

  .jr-topnav-links a {
    padding: 8px 13px;
    font-size: 13px;
  }

  .jr-project-page .jr-lightbox {
    padding: 12px;
    gap: 6px;
  }

  .jr-project-page .jr-lightbox-nav {
    width: 40px;
    height: 40px;
    font-size: 22px;
  }

  .jr-lightbox-stage img {
    max-height: 74vh;
  }

  .jr-map,
  .jr-map iframe,
  .jr-map img {
    min-height: 300px;
  }

  .jr-brochure {
    padding: 20px;
  }

  .jr-brochure .jr-form {
    padding: 20px;
  }

  .jr-passport-row {
    flex-direction: column;
    gap: 2px;
  }

  .jr-passport-row strong {
    text-align: left;
  }
}

/* =====================================================
   7. AMENITIES — NỘI KHU & NGOẠI KHU

   Tách khỏi mục Vị trí ngày 15/09/2026 theo yêu cầu của khách: tiện ích nằm
   cạnh bản đồ vốn chỉ hợp với tiện ích NGOẠI KHU, còn tiện ích nội khu của
   dự án không liên quan gì tới bản đồ.

   Hai cột dùng chung markup .jr-amenity-group đã có sẵn ở mục Vị trí cũ nên
   không phải viết lại phần danh sách; ở đây chỉ dựng lưới và tiêu đề cột.
   ===================================================== */

.jr-amenity-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 24px;
  align-items: start;
}

/* Dự án chỉ nhập một loại tiện ích thì cột đó chiếm trọn bề ngang, không để
   nửa bên kia trống hoác. */
.jr-amenity-col:only-child {
  grid-column: 1 / -1;
}

.jr-project-page .jr-amenity-col-title {
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e9e9e9;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

/* Bản đồ giờ đứng một mình trong mục Vị trí — bỏ cột phải của lưới cũ. */
.jr-map-layout.jr-map-only {
  grid-template-columns: minmax(0, 1fr);
}

/* Nút VR360 trên hero: cùng kiểu với nút Book a Consultation, thêm biểu tượng
   để khách nhận ra ngay đây là tour xem thực tế ảo. */
.jr-btn-vr360::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: -3px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.7 2.5 15.3 0 18M12 3c-2.5 2.7-2.5 15.3 0 18'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 16px 16px;
}

@media (max-width: 991px) {

  .jr-amenity-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* -----------------------------------------------------
   Danh sách tiện ích xếp 3 CỘT

   Chủ site 15/09/2026: để mỗi tiện ích một dòng thì cột dọc quá dài.
   Chốt 3 cột cho CẢ nội khu lẫn ngoại khu.

   Ngoại khu mỗi dòng còn kèm khoảng cách đẩy sang phải, ô hẹp thì tên và số km
   dễ dính nhau — nên cho phép xuống dòng thay vì bóp chữ.
   -------------------------------------------------- */

.jr-amenity-group ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 24px;
}

.jr-amenity-group li {
  flex-wrap: wrap;
  gap: 2px 14px;
}

/* Trong lưới, món cuối danh sách không nằm cuối cột nên quy tắc bỏ gạch chân
   ở :last-child (viết cho kiểu một dòng một món) làm lệch một ô. Trả lại gạch
   chân cho mọi ô để các cột đều nhau. */
.jr-amenity-group li:last-child {
  border-bottom: 1px dashed var(--jr-line);
}

@media (max-width: 991px) {

  .jr-amenity-group ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {

  .jr-amenity-group ul {
    grid-template-columns: minmax(0, 1fr);
  }
}