/**
 * NLH Chính Sách Bán Hàng - CSS cho shortcode [nlsp_calculator] hiển thị
 * ngoài trang cho khách xem. Màu sắc dùng tông xanh rêu đậm/vàng đồng -
 * trung tính, dễ đổi lại cho khớp brand từng dự án nếu cần (chỉnh biến
 * --nlsp-accent bên dưới).
 *
 * QUAN TRỌNG: khai báo biến ở :root (không phải trong .nlsp-calculator)
 * để dùng được ở MỌI wrapper, kể cả .nlsp-calc-form (form nhập liệu) -
 * bài học từ 1 bug thực tế: khai báo biến chỉ trong .nlsp-calculator khiến
 * var(--nlsp-accent) rỗng bên trong .nlsp-calc-form (wrapper khác), làm
 * riêng background-color của nút bị "biến mất" (color/border vẫn đúng vì
 * không dùng biến) dù CSS đã tải đúng và có !important đầy đủ.
 */
:root {
	--nlsp-accent: #0f4c3a;
	--nlsp-accent-light: #eaf3f0;
	--nlsp-border: #e2e2e2;
}
.nlsp-button-col .col-inner{box-shadow: unset !important;}
.nlsp-calculator {
	font-family: inherit;
	max-width: 900px;
	margin: 0 auto;
}

.nlsp-method-switcher {
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.nlsp-method-switcher label {
	font-weight: 600;
}

.nlsp-method-switcher select {
	padding: 8px 12px;
	border: 1px solid var(--nlsp-border);
	border-radius: 6px;
	font-size: 15px;
	min-width: 220px;
}

.nlsp-method-panel {
	display: none;
}

.nlsp-method-panel.is-active {
	display: block;
}

.nlsp-summary-row {
	margin-bottom: 12px;
}

.nlsp-summary-row .col {
	margin-bottom: 15px;
}

.nlsp-summary-card {
	background: #fff;
	border: 1px solid var(--nlsp-border);
	border-radius: 8px;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 100%;
	box-sizing: border-box;
}

.nlsp-summary-label {
	font-size: 13px;
	color: #666;
}

.nlsp-summary-value {
	font-size: 19px;
	font-weight: 700;
	color: #1a1a1a;
}

.nlsp-summary-highlight {
	background: var(--nlsp-accent-light);
	border-color: var(--nlsp-accent);
}

.nlsp-summary-highlight .nlsp-summary-value {
	color: var(--nlsp-accent);
}

.nlsp-summary-total {
	background: var(--nlsp-accent);
	border-color: var(--nlsp-accent);
}

.nlsp-summary-total .nlsp-summary-label,
.nlsp-summary-total .nlsp-summary-value {
	color: #fff;
}

.nlsp-schedule-wrap {
	overflow-x: auto;
	border: 1px solid var(--nlsp-border);
	border-radius: 8px;
}

.nlsp-schedule-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.nlsp-schedule-table thead th {
	background: var(--nlsp-accent);
	color: #fff;
	text-align: left;
	padding: 12px 14px;
	font-weight: 600;
	white-space: nowrap;
}

.nlsp-schedule-table tbody td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--nlsp-border);
}

.nlsp-schedule-table tbody tr:last-child td {
	border-bottom: none;
}

.nlsp-schedule-table tbody tr:nth-child(even) {
	background: #fafafa;
}

/* ===== Form tương tác mới (Group A-D + Button) ===== */

.nlsp-calc-form {
	max-width: 1200px;
	margin-left: 8px;
	margin-right: 8px;
}

.nlsp-calc-form .row {
	margin-bottom: 0;
}

.nlsp-calc-form .col {
	margin-bottom: 10px;
	padding: 0 8px 8px;
}

.nlsp-field-row-half {
	display: flex;
	gap: 5px;
}

.nlsp-field-row-half > div {
	flex: 1;
	min-width: 0;
}

.nlsp-button-col {
	margin-top: 5px;
}

/* Group Button - dãy nút chức năng (chỉ Tính toán có chức năng thật) */
.nlsp-button-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.nlsp-btn {
	/* flex: 1 1 100px; */
	padding: 10px 15px !important;
	border-radius: 5px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	cursor: pointer;
	text-align: center !important;
	line-height: 1.3 !important;
	transition: opacity 0.15s, transform 0.1s;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
	margin-right: 0px;
	margin-bottom: 0px;
}

.nlsp-btn:active {
	transform: translateY(1px);
}

.nlsp-btn-primary {
	background: var(--nlsp-accent) !important;
	color: #fff !important;
	border: none !important;
	box-shadow: 0 2px 6px rgba(15, 76, 58, 0.25);
}

.nlsp-btn-primary:hover {
	opacity: 0.92;
	color: #fff !important;
}

.nlsp-btn-secondary {
	background: #fff !important;
	color: #888 !important;
	border: 1px solid var(--nlsp-border) !important;
}

.nlsp-btn-secondary[disabled] {
	cursor: not-allowed;
	opacity: 0.6;
}

.nlsp-group-card {
	background: #fff;
	border: 1px solid var(--nlsp-border);
	border-radius: 10px;
	padding: 10px;
	height: 100%;
	box-sizing: border-box;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.nlsp-group-card.nlsp-group-card-spaced{margin-top: 16px;}
.nlsp-group-title {
	margin: 0 0 14px;
	padding-bottom: 10px;
	font-size: 15px;
	font-weight: 700;
	color: var(--nlsp-accent);
	border-bottom: 2px solid var(--nlsp-accent-light);
}

.nlsp-input:focus {
	outline: none;
	border-color: var(--nlsp-accent);
	box-shadow: 0 0 0 3px var(--nlsp-accent-light);
}

.nlsp-field-label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: #444;
	margin: 10px 0 4px;
}

.nlsp-field-label:first-of-type {
	margin-top: 0;
}

.nlsp-input {
	width: 100% !important;
	padding: 8px 10px !important;
	border: 1px solid var(--nlsp-border) !important;
	border-radius: 6px !important;
	font-size: 13.5px !important;
	box-sizing: border-box;
	background: #fff !important;
	color: #1a1a1a !important;
}

.nlsp-input[readonly] {
	background: #f6f7f7 !important;
	color: #555 !important;
}

.nlsp-input-invalid {
	border-color: #d63638 !important;
	background: #fef4f4;
}

.nlsp-input-suffix {
	display: inline-block;
	font-size: 12px;
	color: #888;
	margin-top: 2px;
}

.nlsp-field-error {
	color: #d63638;
	font-size: 12px;
	margin: 4px 0 0;
	min-height: 0;
}

.nlsp-field-error:empty {
	display: none;
}

.nlsp-unit-breakdown {
	font-size: 16px;
	font-weight: 600;
	color: var(--nlsp-accent);
	margin: 4px 0 0;
}

.nlsp-field-note {
	font-size: 13px;
	color: #888;
	margin: 0;
}

/* Group C: Chiết khấu CTBH - dạng bảng */
.nlsp-ctbh-table {
	/* width: 100%; */
	border-collapse: collapse;
	font-size: 12px;
	/* min-width: 460px; */
}

.nlsp-ctbh-table thead th {
	background: var(--nlsp-accent-light);
	color: var(--nlsp-accent);
	text-align: center;
	padding: 5px 5px;
	font-weight: 700;
	font-size: 12px;
	border-bottom: 2px solid var(--nlsp-accent);
	white-space: nowrap;
}

.nlsp-ctbh-th-check,
.nlsp-ctbh-td-check {
	text-align: center;
	width: 30px;
}

.nlsp-ctbh-table tbody td {
	padding: 2px 2px;
	border-bottom: 1px solid #f0f0f1;
	vertical-align: middle;
}

.nlsp-ctbh-td-name {
	font-weight: 600;
	color: #1a1a1a;
	line-height: 1.4;
}

.nlsp-ctbh-td-name em {
	display: block;
	font-weight: 400;
	font-style: italic;
	color: #888;
	font-size: 11px;
	margin-top: 2px;
}

.nlsp-ctbh-td-input {
	/* width: 90px; */
}

.nlsp-ctbh-td-percent {
	width: 60px;
}

.nlsp-ctbh-td-amount {
	width: 100px;
}

.nlsp-ctbh-td-input .nlsp-input {
	padding: 6px 7px;
	font-size: 12.5px;
	text-align: right;
}

.nlsp-ctbh-td-amount .nlsp-input {
	min-width: 130px;
}

.nlsp-ctbh-td-input .nlsp-input-suffix {
	display: block;
	text-align: right;
	margin-top: 1px;
}

.nlsp-ctbh-applied {
	width: 18px;
	height: 18px;
	cursor: pointer;
}

.nlsp-ctbh-error-row td.nlsp-ctbh-error {
	color: #d63638;
	background: #fef4f4;
	font-size: 11.5px;
	padding: 6px 8px;
	border-bottom: 1px solid #f0f0f1;
}

.nlsp-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: 6px;
}

/* Group D */
.nlsp-method-description {
	font-size: 12px;
	color: #777;
	font-style: italic;
	margin: 5px 0 0;
	padding-top: 10px;
	border-top: 1px solid #f0f0f1;
}

/* Group Button */
.nlsp-calc-button {
	width: 100%;
	padding: 16px;
	background: var(--nlsp-accent);
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.3px;
	cursor: pointer;
	transition: opacity 0.15s, transform 0.1s;
	box-shadow: 0 2px 6px rgba(15, 76, 58, 0.25);
}

.nlsp-calc-button:hover {
	opacity: 0.92;
}

.nlsp-calc-button:active {
	transform: translateY(1px);
}

.nlsp-result-placeholder:empty {
	display: none;
}

.nlsp-result-placeholder {
	margin-top: 20px;
}

/* ===== 3 bảng kết quả sau khi bấm "Tính toán" ===== */
.nlsp-result-table-wrap {
	margin-bottom: 22px;
}

.nlsp-result-title {
	background: var(--nlsp-accent);
	color: #fff;
	margin: 0 0 12px;
	padding: 12px 16px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 700;
}

.nlsp-result-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	min-width: 500px;
}

.nlsp-result-table thead th {
	background: var(--nlsp-accent-light);
	color: var(--nlsp-accent);
	text-align: left;
	padding: 10px 12px;
	font-weight: 700;
	white-space: nowrap;
}

.nlsp-result-table tbody td {
	padding: 9px 12px;
	border-bottom: 1px solid #f0f0f1;
}

.nlsp-result-total-row td {
	background: var(--nlsp-accent-light);
	font-weight: 700;
	color: var(--nlsp-accent);
}

/* Bảng so sánh (popup "So sánh phương án đã lưu"): mỗi CỘT (phương án)
   tô nền nhẹ + viền cả cụm để phân biệt nhanh khi lướt mắt ngang.
   CHỈ áp dụng cho bảng trong popup này (.nlsp-compare-result-table) -
   không đụng tới các bảng kết quả C/D/Lịch thanh toán ở trang chính.
   Cột 1 là <th> nhãn dòng (không tô), cột 2-5 là <td> theo thứ tự
   phương án đã tick - tối đa 4 (đúng bằng NLSP_COMPARE_MAX_SELECT). */
.nlsp-compare-result-table tbody tr td:nth-child(2) {
	background: #e3f0ff; /* xanh dương nhạt */
	border-left: 2px solid #1a5fb4;
	border-right: 2px solid #1a5fb4;
}

.nlsp-compare-result-table tbody tr td:nth-child(3) {
	background: #e6f7ec; /* xanh lá nhạt */
	border-left: 2px solid #1c7a3f;
	border-right: 2px solid #1c7a3f;
}

.nlsp-compare-result-table tbody tr td:nth-child(4) {
	background: #fdeee0; /* cam nhạt */
	border-left: 2px solid #b3591b;
	border-right: 2px solid #b3591b;
}

.nlsp-compare-result-table tbody tr td:nth-child(5) {
	background: #f4e6fb; /* tím nhạt */
	border-left: 2px solid #7a3ba1;
	border-right: 2px solid #7a3ba1;
}

.nlsp-compare-result-table tbody tr:first-child td:nth-child(2),
.nlsp-compare-result-table tbody tr:first-child td:nth-child(3),
.nlsp-compare-result-table tbody tr:first-child td:nth-child(4),
.nlsp-compare-result-table tbody tr:first-child td:nth-child(5) {
	border-top: 2px solid currentColor;
}

.nlsp-compare-result-table tbody tr:last-child td:nth-child(2),
.nlsp-compare-result-table tbody tr:last-child td:nth-child(3),
.nlsp-compare-result-table tbody tr:last-child td:nth-child(4),
.nlsp-compare-result-table tbody tr:last-child td:nth-child(5) {
	border-bottom: 2px solid currentColor;
}

.nlsp-compare-result-table tbody tr td:nth-child(2) {
	color: #1a5fb4;
}

.nlsp-compare-result-table tbody tr td:nth-child(3) {
	color: #1c7a3f;
}

.nlsp-compare-result-table tbody tr td:nth-child(4) {
	color: #b3591b;
}

.nlsp-compare-result-table tbody tr td:nth-child(5) {
	color: #7a3ba1;
}

/* Dòng "Mã căn hộ" (dòng đầu) in đậm hơn để làm tiêu đề cụm cột. */
.nlsp-compare-result-table tbody tr:first-child td {
	font-weight: 700;
}

/* Nhãn dòng (<th> nằm trong tbody, khác các bảng khác dùng <thead>)
   và nội dung số liệu không được xuống dòng - để bảng giữ đúng độ
   rộng và tự động cuộn ngang trong .nlsp-table-scroll, giống các
   bảng khác ở trang kết quả, thay vì bị bóp méo/vỡ layout trên
   màn hình di động. */
.nlsp-compare-result-table tbody th,
.nlsp-compare-result-table tbody td {
	white-space: nowrap;
}

.nlsp-summary-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px;
}

.nlsp-summary-cards .nlsp-summary-card {
	background: #fff;
	border: 1px solid var(--nlsp-border);
	border-radius: 8px;
	padding: 10px 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.nlsp-summary-card-label {
	font-size: 12.5px;
	color: #666;
}

.nlsp-summary-card-value {
	font-size: 18px;
	font-weight: 700;
	color: #1a1a1a;
}

.nlsp-summary-card-highlight {
	background: var(--nlsp-accent) !important;
	border-color: var(--nlsp-accent) !important;
}

.nlsp-summary-card-highlight .nlsp-summary-card-label,
.nlsp-summary-card-highlight .nlsp-summary-card-value {
	color: #fff;
}

.nlsp-result-error {
	color: #d63638;
	background: #fef4f4;
	border: 1px solid #d63638;
	border-radius: 6px;
	padding: 12px 16px;
	font-size: 14px;
}

.nlsp-result-placeholder-text {
	color: var(--nlsp-accent);
	background: var(--nlsp-accent-light);
	border-radius: 6px;
	padding: 12px 16px;
	font-size: 14px;
}

.nlsp-tag {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 7px;
	border-radius: 4px;
	background: var(--nlsp-accent-light);
	color: var(--nlsp-accent);
	font-size: 11px;
	font-weight: 600;
	vertical-align: middle;
}

@media (max-width: 600px) {
	.nlsp-schedule-table {
		font-size: 13px;
	}
}

.nlsp-timeline-table td em {
	font-style: italic;
	color: #777;
	font-size: 12px;
}

.nlsp-kpbt-inline {
	display: inline-block;
	background: #fff4e5;
	color: #b45309;
	font-size: 11px;
	font-weight: 700;
	padding: 1px 6px;
	border-radius: 4px;
	white-space: nowrap;
	margin-top: 3px;
}

/* Collapse độc lập cho mỗi bảng "Lịch thanh toán" */
.nlsp-collapse {
	margin-bottom: 20px;
	border: 1px solid var(--nlsp-border);
	border-radius: 8px;
	overflow: hidden;
}

.nlsp-collapse-header {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	background: var(--nlsp-accent);
	color: #fff;
	border: none;
	padding: 5px 16px;
	font-size: 14px;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
	margin-bottom: 0px;
}

.nlsp-collapse-icon {
	transition: transform 0.15s;
	flex-shrink: 0;
}

.nlsp-collapse.is-open .nlsp-collapse-icon {
	transform: rotate(180deg);
}

.nlsp-collapse-body {
	padding: 12px;
}

.nlsp-collapse-body[hidden] {
	display: none;
}

.nlsp-comparison-selected td {
	background: #fdf3d0 !important;
	font-weight: 700;
	color: #7a5c00;
}

.nlsp-result-total-row td[colspan] {
	text-align: left;
}

/* ---------------- Xuất PDF: modal Tên khách + SĐT ---------------- */
.nlsp-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(20, 26, 22, 0.6);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 999999;
	padding: 20px;
}

.nlsp-modal-overlay.nlsp-show {
	display: flex;
}

.nlsp-modal {
	background: #fff;
	border-radius: 8px;
	max-width: 420px;
	width: 100%;
	max-height: 88vh;
	overflow-y: auto;
	padding: 20px;
	position: relative;
}

.nlsp-modal-x {
	position: absolute;
	top: 0px;
	right: 0px;
	background: none;
	border: none;
	font-size: 30px;
	line-height: 1;
	color: #999;
	cursor: pointer;
	padding: 4px;
}

.nlsp-modal-x:hover {
	color: #333;
}

.nlsp-security-code-btn {
	opacity: 0.55;
}

.nlsp-security-code-btn:hover {
	opacity: 0.85;
}

/* ---------------- Modal lớn (So sánh): header/footer cố định, giữa cuộn ---------------- */
.nlsp-modal-lg {
	max-width: 100%;
}

.nlsp-modal-flex {
	display: flex;
	flex-direction: column;
	max-height: 88vh;
	padding: 0;
	overflow: hidden;
}

.nlsp-modal-header-fixed {
	flex: 0 0 auto;
	padding: 10px 20px 10px;
	border-bottom: 1px solid #eee;
	position: relative;
}

.nlsp-modal-header-fixed h3 {
	margin: 0 28px 4px 0;
}

.nlsp-modal-header-fixed .nlsp-modal-sub {
	margin: 0;
}

.nlsp-modal-body-scroll {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 14px 20px;
}

.nlsp-modal-footer-fixed {
	flex: 0 0 auto;
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding: 10px 10px;
	border-top: 1px solid #eee;
}

.nlsp-modal h3 {
	margin-top: 0;
	margin-bottom: 6px;
}

.nlsp-modal-sub {
	color: #666;
	font-size: 13px;
	margin-top: 0;
	margin-bottom: 16px;
}

.nlsp-modal .nlsp-field-label {
	margin-top: 10px;
}

.nlsp-modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 18px;
}

/* ---------------- Xuất PDF: toast thông báo nhỏ ---------------- */
.nlsp-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%) translateY(20px);
	background: #1d2536;
	color: #fff;
	padding: 12px 18px;
	border-radius: 6px;
	font-size: 13px;
	max-width: 90vw;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s, transform 0.2s;
	z-index: 1000000;
}

.nlsp-toast.nlsp-show {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.nlsp-toast.nlsp-toast-warn {
	background: #7a2020;
}

.nlsp-toast.nlsp-toast-ok {
	background: #0f4c3a;
}

.nlsp-export-pdf-btn:not([disabled]) {
	cursor: pointer;
}

/* ---------------- Lưu đồ lịch thanh toán (flow-diagram) ---------------- */
/* Khối bọc ngoài CÙNG - đây là vùng cuộn ngang DUY NHẤT cho toàn bộ
   lưu đồ (mọi phương thức cuộn theo cùng nhau qua 1 thanh cuộn chung). */
.nlsp-flow-wrap {
	overflow-x: auto;
	overflow-y: hidden;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	background: #fdfdfb;
	-webkit-overflow-scrolling: touch;
}

/* CSS Grid 2 cột (side, track) x N hàng - mỗi cặp side/track nằm
   CHUNG 1 hàng grid nên chiều cao luôn khớp tuyệt đối giữa 2 cột, khác
   hẳn cách dùng 2 flex-column tách biệt (dễ lệch hàng khi nội dung 2
   bên cao thấp khác nhau). */
.nlsp-flow-grid {
	display: grid;
	grid-template-columns: 110px max-content;
	width: max-content;
	min-width: 100%;
}

/* Panel trái DÍNH LẠI (sticky) khi cuộn ngang - luôn hiện cố định bên
   trái trong lúc phần lưu đồ bên phải cuộn qua. */
.nlsp-flow-side {
	position: sticky;
	left: 0;
	z-index: 2;
	background: var(--nlsp-accent, #0f4c3a);
	color: #fff;
	padding: 14px 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.nlsp-flow-badge {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #fff;
	color: var(--nlsp-accent, #0f4c3a);
	font-weight: 700;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nlsp-flow-subtitle {
	font-weight: 700;
	font-size: 14px;
	line-height: 1.3;
	text-transform: uppercase;
}

.nlsp-flow-desc {
	font-size: 11.5px;
	color: #f0c96b;
	line-height: 1.35;
}

.nlsp-flow-track-row {
	padding: 5px 10px;
	border-bottom: 1px solid #eee;
	display: flex;
	align-items: center;
}

.nlsp-flow-track {
	position: relative;
	height: 170px;
}

.nlsp-flow-yearband {
	position: absolute;
	top: 0;
	bottom: 0;
	border-radius: 4px;
}

.nlsp-flow-yearband-a {
	background: rgba(15, 76, 58, 0.05);
}

.nlsp-flow-yearband-b {
	background: rgba(184, 145, 43, 0.07);
}

.nlsp-flow-yearband span {
	position: absolute;
	top: 2px;
	left: 6px;
	font-size: 10px;
	font-weight: 700;
	color: #888;
	letter-spacing: 0.5px;
}

.nlsp-flow-box {
	position: absolute;
	top: 18px;
	background: #fff;
	border: 1px solid var(--nlsp-accent, #0f4c3a);
	border-radius: 5px;
	padding: 2px 2px;
	text-align: center;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.nlsp-flow-label {
	font-size: 11px;
	font-weight: 700;
	color: #1d2536;
	line-height: 1.25;
}

.nlsp-flow-date {
	font-size: 9.5px;
	color: #888;
	margin-top: 2px;
	line-height: 1.3;
}

.nlsp-flow-date em {
	font-style: italic;
}

.nlsp-flow-line {
	font-size: 10.5px;
	font-weight: 600;
	margin-top: 3px;
	line-height: 1.3;
}

.nlsp-flow-kh {
	color: #0f4c3a;
}

.nlsp-flow-nh {
	color: #1a5fb4;
}

.nlsp-flow-kpbt {
	color: #b8912b;
}

.nlsp-flow-box-desc {
	font-size: 9px;
	color: #999;
	font-style: italic;
	line-height: 1.25;
	margin-top: 4px;
	padding-top: 4px;
	border-top: 1px dashed #e2e2e2;
}

.nlsp-flow-connector {
	position: absolute;
	top: 55px;
	height: 2px;
	background: #c8c8c8;
}

/* ---------------- So sánh ---------------- */
.nlsp-compare-panel {
	margin-top: 16px;
}

.nlsp-compare-clear-all {
	float: right;
	background: none;
	border: none;
	color: #b32d2e;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	text-transform: none;
	letter-spacing: 0;
}

/* Danh sách "So sánh" dạng CARD (giống công cụ Tính khoản vay) thay vì
   bảng - mỗi phương án 1 card: checkbox + thông tin + nút Dùng lại/Xoá. */
.nlsp-compare-card-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.nlsp-compare-card {
	display: flex;
	align-items: center;
	gap: 12px;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	padding: 12px 14px;
}

.nlsp-compare-card-disabled {
	opacity: 0.45;
}

.nlsp-compare-card-check {
	flex: 0 0 auto;
}

.nlsp-compare-card-check input {
	width: 18px;
	height: 18px;
}

.nlsp-compare-card-info {
	flex: 1 1 auto;
	min-width: 0;
}

.nlsp-compare-card-title {
	font-weight: 700;
	color: #1d2536;
	font-size: 14px;
}

.nlsp-compare-card-sub {
	color: #888;
	font-size: 12px;
	margin-top: 2px;
}

.nlsp-compare-card-actions {
	flex: 0 0 auto;
	display: flex;
	gap: 8px;
}

.nlsp-btn-small {
	padding: 6px 12px !important;
	font-size: 12px !important;
	min-width: 0 !important;
}

/* ---------------- Gợi ý Mã căn hộ (autocomplete theo Nguồn LTT) ---------------- */
.nlsp-unit-code-wrap {
	position: relative;
}

.nlsp-unit-suggest {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid #dcdcde;
	border-top: none;
	border-radius: 0 0 6px 6px;
	max-height: 220px;
	overflow-y: auto;
	z-index: 50;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.nlsp-unit-suggest.nlsp-show {
	display: block;
}

.nlsp-unit-suggest-item {
	padding: 8px 12px;
	cursor: pointer;
	font-size: 13px;
	border-bottom: 1px solid #f0f0f0;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 2px 0;
}

.nlsp-unit-suggest-item:last-child {
	border-bottom: none;
}

.nlsp-unit-suggest-item:hover,
.nlsp-unit-suggest-item.nlsp-active {
	background: #f3f7f5;
}

.nlsp-unit-suggest-item strong {
	color: var(--nlsp-accent, #0f4c3a);
}

.nlsp-unit-suggest-item span {
	color: #999;
	font-size: 11px;
	margin-left: 6px;
}

.nlsp-unit-suggest-price {
	margin-left: auto !important;
	color: var(--nlsp-accent, #0f4c3a) !important;
	font-weight: 600;
	font-size: 12px !important;
}