@charset "UTF-8";
/* ==========================================================================
   Bất động sản — phần bổ sung của ndh_auto (không có trong theme WordPress)
   ==========================================================================

   Hồ sơ chủ đầu tư (trang /du-an/chu-dau-tu/<slug>/), thẻ "Về chủ đầu tư",
   bảng loại căn, tiến độ, video, chính sách thanh toán và nút chọn nhanh giá
   của công cụ tính khoản vay trên trang dự án. Chỉ nạp khi trang có một trong
   các khối này (src/lib/ndh/ndh/re-profile.ts). Dùng lại lớp sẵn có của theme
   (proj__facts, xpro__timeline, xpro__box, ndh-chip…) — tệp này chỉ thêm phần
   còn thiếu, màu lấy từ tokens.css.
   -------------------------------------------------------------------------- */

/* --- Thẻ hồ sơ chủ đầu tư ------------------------------------------------ */
.rdev__card {
	display: grid; gap: 20px;
	padding: clamp(18px, 2.4vw, 28px);
	border: 1px solid var(--c-line); border-radius: 20px;
	background: var(--c-white);
	box-shadow: var(--sh-soft, 0 18px 40px -28px rgba(0, 0, 0, .35));
}
.rdev__id { display: flex; align-items: center; gap: 16px; min-width: 0; }
.rdev__id > div { min-width: 0; }
.rdev__logo {
	display: grid; place-items: center; flex: none;
	width: 76px; height: 76px; padding: 8px;
	border: 1px solid var(--c-line-soft); border-radius: 18px;
	background: var(--c-white); overflow: hidden;
}
.rdev__logo img, .rdev__img { display: block; width: 100%; height: 100%; object-fit: contain; }
.rdev__logo--mono {
	padding: 0; border: 0;
	background: var(--c-brand-800); color: var(--c-warm-400);
	font-size: 20px; font-weight: 800; letter-spacing: .5px;
}
.rdev__logo--sm { width: 48px; height: 48px; padding: 5px; border-radius: 12px; }
.rdev__logo--sm.rdev__logo--mono { padding: 0; font-size: 14px; }
.rdev__name { margin-top: 4px; font-size: clamp(19px, 2vw, 24px); font-weight: 800; line-height: 1.3; color: var(--c-ink); overflow-wrap: anywhere; }
.rdev__sub { margin-top: 4px; font-size: 14px; color: var(--c-muted); }
.rdev .rdev__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* thắng .proj__facts của ndh-pages.css (nạp sau) */
.rdev__facts dd a { color: var(--c-brand-700); text-decoration: underline; text-underline-offset: 3px; }
.rdev__contact { display: flex; flex-wrap: wrap; gap: 10px 22px; padding-top: 16px; border-top: 1px solid var(--c-line-soft); font-size: 14.5px; }
.rdev__contact li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--c-text); }
.rdev__contact .ico { width: 18px; height: 18px; flex: none; color: var(--c-brand-600); }
.rdev__contact a { color: var(--c-ink); font-weight: 600; overflow-wrap: anywhere; }
.rdev__contact a:hover { color: var(--c-brand-700); text-decoration: underline; }
.rdev__addr { flex-basis: 100%; }
.rdev__cols { margin-top: 0; }

/* --- Bảng (loại căn, dự án tiêu biểu) ------------------------------------ */
.rtable-wrap { overflow-x: auto; border: 1px solid var(--c-line); border-radius: 16px; -webkit-overflow-scrolling: touch; }
.rtable { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14.5px; }
.rtable th, .rtable td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--c-line-soft); }
.rtable thead th { background: var(--c-soft); font-size: 12.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--c-muted); white-space: nowrap; }
.rtable tbody th { font-weight: 700; color: var(--c-ink); }
.rtable tbody tr:last-child > * { border-bottom: 0; }
.rtable tbody tr:hover > * { background: var(--c-cream); }
.rtable .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rtable strong { color: var(--c-brand-700); }
.rnote { margin-top: 10px; font-size: 13px; line-height: 1.6; color: var(--c-muted); }

.rtag {
	display: inline-block; padding: 2px 9px; border-radius: 999px;
	background: var(--c-brand-50); color: var(--c-brand-700);
	font-size: 12px; font-weight: 700; white-space: nowrap;
}
.rtag--done { background: var(--c-up-50); color: var(--c-up); }
.rtag--doing { background: var(--c-warm-100); color: var(--c-warm-700); }
.rtag--plan, .rtag--plain { background: var(--c-soft); color: var(--c-muted); }

/* --- Tiến độ (dựa trên xpro__timeline) ----------------------------------- */
.rtimeline { gap: 14px; }
.proj__sec .rtimeline li { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 2px; }
.proj__sec .rtimeline .xpro__when { flex-basis: 100%; }
.rtimeline li.is-done::before { background: var(--c-brand-600); }
.rtimeline li.is-plan::before { border-color: var(--c-line); }

/* --- Video (chỉ tải YouTube khi bấm) ------------------------------------- */
.rvideo {
	position: relative; display: flex; align-items: flex-end; gap: 14px;
	aspect-ratio: 16 / 9; padding: clamp(16px, 2.4vw, 26px);
	border-radius: 18px; overflow: hidden; color: #fff;
	background: linear-gradient(180deg, rgba(18, 18, 18, .05) 30%, rgba(18, 18, 18, .82)), var(--poster, none) center / cover no-repeat, linear-gradient(160deg, var(--c-brand-800), var(--c-night-900));
}
.rvideo:hover .rvideo__play, .rvideo:focus-visible .rvideo__play { transform: translate(-50%, -50%) scale(1.06); }
.rvideo__play {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%;
	background: var(--c-warm-400); color: var(--c-ink);
	box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .6); transition: transform .18s ease;
}
.rvideo__play .ico { width: 30px; height: 30px; margin-left: 3px; fill: currentColor; }
.rvideo__label { display: grid; gap: 2px; }
.rvideo__label strong { font-size: 16px; font-weight: 800; }
.rvideo__label small { font-size: 12.5px; color: rgba(255, 255, 255, .78); }
.rvideo.is-playing { padding: 0; background: #000; }
.rvideo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- Chính sách thanh toán, ngân hàng, brochure -------------------------- */
.rpay { margin-top: 0; }
.rpay ul, .rpay ol { margin: 10px 0; padding-left: 22px; }
.rpay ul { list-style: disc; }
.rpay ol { list-style: decimal; }
.rpay li + li { margin-top: 4px; }
.rpay li::marker { color: var(--c-brand-600); }
.proj__sec .rpartners { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.rbanks { margin-top: 20px; }
.rbanks__t { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 15.5px; font-weight: 800; color: var(--c-ink); }
.rbanks__t .ico { width: 19px; height: 19px; color: var(--c-brand-600); }
.rbrochure { margin-top: 18px; }

/* --- Nút chọn nhanh giá cho công cụ tính khoản vay ----------------------- */
.rpresets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 4px; }
.rpresets__t { flex-basis: 100%; font-size: 12.5px; font-weight: 600; color: var(--c-muted); }
.rpresets .ndh-chip { border: 1px solid transparent; cursor: pointer; font-family: inherit; }
.rpresets .ndh-chip:hover { border-color: var(--c-pillar-re); }
.rpresets .ndh-chip[aria-pressed="true"] { background: var(--c-brand-800); color: #fff; }

/* --- Thẻ nhỏ "Về chủ đầu tư" (cột phải trang dự án) ---------------------- */
.rdev-mini { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--c-line); border-radius: 18px; background: var(--c-white); }
.rdev-mini__id { display: flex; align-items: center; gap: 12px; color: var(--c-ink); }
.rdev-mini__id strong { display: block; font-size: 15.5px; font-weight: 800; line-height: 1.35; }
.rdev-mini__id small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--c-muted); }
a.rdev-mini__id:hover strong { color: var(--c-brand-700); }
.rdev-mini__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rdev-mini__facts > div { padding: 9px 10px; border-radius: 12px; background: var(--c-soft); min-width: 0; }
.rdev-mini__facts dt { font-size: 11.5px; color: var(--c-muted); }
.rdev-mini__facts dd { margin: 2px 0 0; font-size: 13.5px; font-weight: 800; color: var(--c-ink); overflow-wrap: anywhere; }
.rdev-mini .ndh-sechead__more { justify-self: start; }

@media (max-width: 960px) {
	.rdev .rdev__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.rdev__id { align-items: flex-start; }
	.rdev__logo { width: 60px; height: 60px; border-radius: 14px; }
	.rdev__contact { display: grid; gap: 10px; }
	.rtable { min-width: 440px; font-size: 14px; }
	.rtable th, .rtable td { padding: 10px 12px; }
	.rvideo__play { top: 42%; width: 56px; height: 56px; }
	.rvideo__play .ico { width: 24px; height: 24px; }
}

/* --- Giới thiệu chủ đầu tư (developer.ts devIntroHtml) ---------------------
   Hai cột: nội dung (đoạn dẫn + thẻ theo từng tiêu đề, mục "lưu ý" thành hộp
   nhấn màu vàng) và cột phải dính theo khi cuộn (mục lục + lời mời). */
.dvi { padding-block: clamp(24px, 3vw, 40px) clamp(32px, 4vw, 56px); }
.dvi__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(24px, 3vw, 44px); align-items: start; }
.dvi__grid--single { grid-template-columns: minmax(0, 1fr) 320px; }
.dvi__kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-brand-600); }
.dvi__kicker .ico { width: 16px; height: 16px; }
.dvi__title { margin: 0 0 16px; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.25; letter-spacing: -.01em; color: var(--c-ink); max-width: 34ch; }
.dvi__lead { padding-left: 16px; border-left: 3px solid var(--c-warm-400); font-size: clamp(16.5px, 1.4vw, 18.5px); line-height: 1.7; color: var(--c-text); }
.dvi__lead p { margin: 0 0 10px; }
.dvi__lead p:last-child { margin-bottom: 0; }
.dvi__secs { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.dvi__sec { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 20px 22px; border: 1px solid var(--c-line-soft); border-radius: 18px; background: var(--c-white); box-shadow: 0 14px 34px -28px rgba(0, 0, 0, .4); scroll-margin-top: 90px; }
.dvi__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--c-brand-50); color: var(--c-brand-700); }
.dvi__ico .ico { width: 22px; height: 22px; }
.dvi__h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 8px; font-size: 17.5px; line-height: 1.35; color: var(--c-ink); }
.dvi__text { font-size: 15.5px; line-height: 1.75; color: var(--c-text); }
.dvi__text p { margin: 0 0 10px; }
.dvi__text p:last-child { margin-bottom: 0; }
.dvi__text ul, .dvi__text ol { margin: 6px 0 10px; padding-left: 20px; }
.dvi__sec--note { border-color: var(--c-warm-300); background: var(--c-warm-50); box-shadow: none; }
.dvi__sec--note .dvi__ico { background: var(--c-warm-400); color: var(--c-ink); }
.dvi__flag { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--c-ink); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; }
.dvi__more { margin-top: 14px; }
.dvi__more > summary { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--c-line); border-radius: 999px; background: #fff; font-weight: 600; font-size: 14px; color: var(--c-brand-700); cursor: pointer; list-style: none; }
.dvi__more > summary::-webkit-details-marker { display: none; }
.dvi__more > summary .ico { width: 16px; height: 16px; }
.dvi__more[open] > summary { display: none; }
.dvi__aside { position: sticky; top: 96px; display: grid; gap: 14px; }
.dvi__card { padding: 18px 20px; border: 1px solid var(--c-line-soft); border-radius: 18px; background: var(--c-white); }
.dvi__cardtitle { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); }
.dvi__cardtitle .ico { width: 16px; height: 16px; }
.dvi__toc ol { margin: 0; padding: 0; list-style: none; counter-reset: dvi; display: grid; gap: 2px; }
.dvi__toc li { counter-increment: dvi; }
.dvi__toc a { display: flex; gap: 10px; padding: 8px 10px; border-radius: 10px; font-size: 14.5px; line-height: 1.4; color: var(--c-text); text-decoration: none; }
.dvi__toc a::before { content: counter(dvi, decimal-leading-zero); flex: none; font-size: 12px; font-weight: 700; color: var(--c-brand-600); padding-top: 2px; }
.dvi__toc a:hover { background: var(--c-brand-50); color: var(--c-ink); }
.dvi__cta { background: var(--c-night-900); border-color: var(--c-night-900); color: #fff; }
.dvi__ctatitle { margin: 0 0 6px; font-size: 17px; font-weight: 700; line-height: 1.35; }
.dvi__ctatext { margin: 0 0 14px; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .72); }
.dvi__cta .ndh-btn { width: 100%; justify-content: center; }
.dvi__cta .ndh-btn + .ndh-btn { margin-top: 8px; }
.dvi__cta .ndh-btn--primary { background: var(--c-warm-400); color: var(--c-ink); }
.dvi__cta .ndh-btn--primary:hover { background: #F6BE64; }
.dvi__cta .ndh-btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .28); color: #fff; }
.dvi__cta .ndh-btn--ghost:hover { background: rgba(255, 255, 255, .08); }
.dvi + .pfaq { padding-top: 0; }
@media (max-width: 960px) {
	.dvi__grid, .dvi__grid--single { grid-template-columns: minmax(0, 1fr); }
	.dvi__aside { position: static; }
	.dvi__toc { display: none; }
}
@media (max-width: 560px) {
	.dvi__sec { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 16px; }
	.dvi__ico { width: 38px; height: 38px; }
}