@charset "UTF-8";
/* ==========================================================================
   Trang bài viết đơn
   Nạp sau lender.css và compare.css: mục lục dính, kiểu chữ phần nội dung,
   nút và bảng màu đều dùng lại từ đó.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Thanh tiến độ đọc
   -------------------------------------------------------------------------- */
.rprog {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 60;
	height: 3px;
	background: transparent;
	pointer-events: none;
}

/* Dùng transform thay vì width để trình duyệt không phải tính lại bố cục mỗi
   khung hình khi cuộn */
.rprog__bar {
	display: block;
	height: 100%;
	transform: scaleX(0);
	transform-origin: 0 50%;
	background: linear-gradient(90deg, var(--c-brand-600), var(--c-act-500));
}

@media (prefers-reduced-motion: reduce) {
	.rprog { display: none; }
}

/* --------------------------------------------------------------------------
   Đầu bài
   -------------------------------------------------------------------------- */
.phero {
	padding-block: 20px clamp(24px, 3.4vw, 40px);
	background:
		radial-gradient(900px 400px at 82% 0%, var(--purple-50) 0%, rgba(238,242,254,0) 62%),
		linear-gradient(180deg, #F7F9FF 0%, #FFFFFF 88%);
}

/* Cột chữ hẹp hơn khung trang: dòng dài quá 75 ký tự thì mắt khó bắt dòng kế */
.phero__inner { max-width: 820px; }

.phero__tags { display: flex; flex-wrap: wrap; gap: 8px; }

.ptag {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 14px;
	background: #fff;
	border: 1px solid var(--edge);
	border-radius: var(--r-pill, 999px);
	font-size: 13px;
	font-weight: 700;
	color: var(--gray);
	transition: border-color .2s, color .2s;
}
.ptag:hover { border-color: var(--c-brand-200); color: var(--purple); }
.ptag .ico { width: 15px; height: 15px; }

.ptag--lender { background: var(--purple-50); border-color: var(--purple-100); color: var(--purple); }
.ptag--lender:hover { border-color: var(--purple); }

.phero__title {
	margin-top: 16px;
	font-size: clamp(27px, 3.4vw, 42px);
	font-weight: 700;
	color: var(--purple);
	line-height: 1.18;
	letter-spacing: -.6px;
}

.phero__lead {
	margin-top: 16px;
	font-size: 17.5px;
	color: var(--gray);
	line-height: 1.66;
}

.phero__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid var(--edge-2);
}

.pby { display: flex; align-items: center; gap: 12px; min-width: 0; }

.pby__avatar {
	display: grid; place-items: center;
	width: 42px; height: 42px;
	flex: none;
	border-radius: 50%;
	background: var(--purple);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
}

.pby__text { display: flex; flex-direction: column; min-width: 0; }
.pby__name { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.pby__meta { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--gray-2); }
.pby__meta i { font-style: normal; }

.pcopy {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	background: #fff;
	border: 1px solid var(--edge);
	border-radius: var(--r-pill, 999px);
	font-size: 14px;
	font-weight: 700;
	color: var(--gray);
	cursor: pointer;
	transition: border-color .2s, color .2s, background-color .2s;
}
.pcopy:hover { border-color: var(--c-brand-200); color: var(--purple); }
.pcopy .ico { width: 17px; height: 17px; }
.pcopy.is-done { background: var(--c-act-50); border-color: #BFE6D5; color: var(--green-dark); }

.phero__figure { margin: clamp(22px, 3vw, 32px) 0 0; }
.phero__figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;
	box-shadow: 0 24px 52px -34px rgba(13, 22, 48, .9);
}
.phero__figure figcaption {
	margin-top: 10px;
	font-size: 13.5px;
	color: var(--gray-2);
	line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Thân bài
   -------------------------------------------------------------------------- */
.post-page .lender__prose { max-width: 74ch; }

.post-page .lender__prose blockquote {
	position: relative;
	margin: 28px 0;
	padding: 20px 22px 20px 26px;
	background: var(--c-soft);
	border-left: 4px solid var(--green);
	border-radius: 0 12px 12px 0;
	font-size: 17px;
	color: var(--ink);
	line-height: 1.66;
}
.post-page .lender__prose blockquote p:last-child { margin-bottom: 0; }

.post-page .lender__prose img { border-radius: 12px; }

.post-page .lender__prose figcaption {
	margin-top: 8px;
	font-size: 13.5px;
	color: var(--gray-2);
	text-align: center;
}

/* Thẻ tổ chức gắn dưới mục lục */
.tocbrand {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 14px;
	padding: 14px;
	background: #fff;
	border: 1px solid var(--edge);
	border-radius: 12px;
	transition: border-color .2s, box-shadow .2s;
}
.tocbrand:hover {
	border-color: var(--c-brand-200);
	box-shadow: 0 14px 32px -26px rgba(13, 22, 48, .85);
}

.tocbrand__mark {
	display: grid; place-items: center;
	width: 40px; height: 40px;
	flex: none;
	border-radius: 11px;
	background: var(--purple);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
}

.tocbrand__body { display: flex; flex-direction: column; min-width: 0; }
.tocbrand__label { font-size: 11.5px; letter-spacing: .3px; text-transform: uppercase; color: var(--gray-2); }
.tocbrand__name {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--ink);
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tocbrand .ico { width: 17px; height: 17px; flex: none; margin-left: auto; color: var(--green-dark); transition: transform .2s; }
.tocbrand:hover .ico { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Hộp tác giả
   -------------------------------------------------------------------------- */
.pauthor {
	display: flex;
	gap: 16px;
	margin-top: clamp(32px, 4vw, 48px);
	padding: 22px;
	background: var(--c-soft);
	border: 1px solid var(--edge-2);
	border-radius: 16px;
}

.pauthor__avatar {
	display: grid; place-items: center;
	width: 54px; height: 54px;
	flex: none;
	border-radius: 50%;
	background: var(--purple);
	color: #fff;
	font-size: 18px;
	font-weight: 700;
}

.pauthor__body { min-width: 0; }
.pauthor__label { font-size: 11.5px; letter-spacing: .3px; text-transform: uppercase; color: var(--gray-2); }
.pauthor__name { margin-top: 3px; font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.pauthor__bio { margin-top: 7px; font-size: 14.5px; color: var(--gray); line-height: 1.62; }

/* --------------------------------------------------------------------------
   Thẻ tổ chức cho vay
   -------------------------------------------------------------------------- */
.plender {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(16px, 3vw, 32px);
	flex-wrap: wrap;
	margin-top: 18px;
	padding: 24px;
	border-radius: 16px;
	background: linear-gradient(115deg, var(--purple) 0%, var(--c-brand-600) 100%);
	color: #fff;
}

.plender__body { min-width: 0; }
.plender__label { font-size: 11.5px; letter-spacing: .3px; text-transform: uppercase; color: rgba(255,255,255,.78); }
.plender__name { margin-top: 5px; font-size: 21px; font-weight: 700; color: #fff; line-height: 1.3; }
.plender__text { margin-top: 7px; max-width: 60ch; font-size: 14.5px; color: rgba(255,255,255,.88); line-height: 1.6; }

/* Nút xanh mặc định chìm vào nền tím nên đảo thành nút trắng */
.plender .btn-apply {
	flex: none;
	background: #fff;
	color: var(--purple);
}
.plender .btn-apply:hover { background: var(--purple-50); }

/* --------------------------------------------------------------------------
   Bài liên quan
   -------------------------------------------------------------------------- */
.prelated { margin-top: clamp(34px, 4.4vw, 52px); }

.prelgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 12px;
}

.prelcard a {
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 100%;
	padding: 18px;
	background: #fff;
	border: 1px solid var(--edge);
	border-radius: 14px;
	transition: border-color .2s, box-shadow .2s, transform .2s;
}
.prelcard a:hover {
	border-color: var(--c-brand-200);
	box-shadow: 0 18px 40px -30px rgba(13, 22, 48, .85);
	transform: translateY(-2px);
}

.prelcard__meta { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--gray-2); }
.prelcard__meta i { font-style: normal; }

.prelcard__title { font-size: 15.5px; font-weight: 700; color: var(--ink); line-height: 1.42; }
.prelcard a:hover .prelcard__title { color: var(--purple); }

.prelcard__go {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 8px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--green-dark);
}
.prelcard__go .ico { width: 15px; height: 15px; transition: transform .2s; }
.prelcard a:hover .prelcard__go .ico { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Bài trước / bài sau
   -------------------------------------------------------------------------- */
/* Hai cột cố định: bài đầu hoặc bài cuối chỉ có một phía, để auto-fit thì ô
   duy nhất kéo dài hết chiều ngang và mất luôn nghĩa trái/phải */
.pnav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-top: clamp(28px, 3.4vw, 40px);
}
.pnav__item--prev { grid-column: 1; }
.pnav__item--next { grid-column: 2; }

.pnav__item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 18px;
	background: var(--c-soft);
	border: 1px solid var(--edge-2);
	border-radius: 14px;
	transition: background-color .2s, border-color .2s;
}
.pnav__item:hover { background: #fff; border-color: var(--c-brand-200); }

.pnav__dir {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .3px;
	text-transform: uppercase;
	color: var(--gray-2);
}
.pnav__dir .ico { width: 15px; height: 15px; }
.pnav__item--prev .ico { transform: rotate(180deg); }
.pnav__item--next { text-align: right; }
.pnav__item--next .pnav__dir { justify-content: flex-end; }

.pnav__title { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.42; }
.pnav__item:hover .pnav__title { color: var(--purple); }
/* --------------------------------------------------------------------------
   Khu bình luận
   --------------------------------------------------------------------------
   Markup do inc/comments.php dựng, không phải markup mặc định của WordPress,
   nên class ở đây bám thẳng vào cấu trúc đó.
   -------------------------------------------------------------------------- */
.post-page .comments {
	margin-top: clamp(34px, 4.4vw, 52px);
	padding-top: clamp(28px, 3.4vw, 40px);
	border-top: 1px solid var(--edge-2);
}

.comments__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.comments__title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: clamp(19px, 2vw, 24px);
	font-weight: 700;
	color: var(--purple);
	line-height: 1.3;
}
.comments__title .ico { width: 22px; height: 22px; color: var(--green); }

.comments__jump {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	background: #fff;
	border: 1px solid var(--edge);
	border-radius: var(--r-pill, 999px);
	font-size: 14px;
	font-weight: 700;
	color: var(--purple);
	transition: border-color .2s, background-color .2s;
}
.comments__jump:hover { border-color: var(--c-brand-200); background: var(--purple-50); }
.comments__jump .ico { width: 16px; height: 16px; }

/* Trạng thái rỗng: mời gọi thay vì để trống một khoảng */
.comments__empty,
.comments__closed {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 20px;
	background: var(--c-soft);
	border: 1px dashed var(--edge);
	border-radius: 14px;
	font-size: 15px;
	color: var(--gray);
	line-height: 1.6;
}
.comments__empty .ico,
.comments__closed .ico { width: 20px; height: 20px; flex: none; color: var(--purple); }

/* --------------------------------------------------------------------------
   Danh sách bình luận
   -------------------------------------------------------------------------- */
.comment-list { margin: 0; padding: 0; list-style: none; }

.ccomment { list-style: none; }
.ccomment + .ccomment { margin-top: 12px; }

.ccomment__box {
	padding: 18px 20px;
	background: #fff;
	border: 1px solid var(--edge);
	border-radius: 16px;
	transition: border-color .2s, box-shadow .2s;
}
.ccomment__box:hover {
	border-color: var(--c-brand-200);
	box-shadow: 0 16px 36px -30px rgba(13, 22, 48, .85);
}

/*
 * Phần trả lời thụt vào và có vạch dọc nối lên bình luận cha, để ở màn hình
 * hẹp vẫn thấy được đâu là câu trả lời cho câu nào.
 */
.comment-list .children {
	position: relative;
	margin: 12px 0 0 clamp(14px, 3vw, 30px);
	padding-left: clamp(14px, 3vw, 26px);
	list-style: none;
}
.comment-list .children::before {
	content: "";
	position: absolute;
	inset: 4px auto 12px 0;
	width: 2px;
	border-radius: 2px;
	background: var(--edge);
}

.ccomment__head { display: flex; align-items: center; gap: 12px; }

.cavatar {
	display: grid; place-items: center;
	width: 42px; height: 42px;
	flex: none;
	border-radius: 50%;
	background: var(--purple);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .3px;
}
/* Tác giả bài viết dùng tông xanh ngọc để phân biệt ngay trong luồng hội thoại */
.cavatar--author { background: var(--green); }

.ccomment__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.ccomment__name {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	font-size: 15px;
	font-weight: 700;
	color: var(--ink);
	line-height: 1.3;
}

.ccomment__badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 9px;
	border-radius: var(--r-pill, 999px);
	background: var(--c-act-50);
	color: var(--green-dark);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .2px;
}
.ccomment__badge .ico { width: 12px; height: 12px; stroke-width: 2.4; }

.ccomment__time { font-size: 13px; color: var(--gray-2); }

.ccomment__hold {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	padding: 9px 14px;
	background: var(--c-warm-50);
	border-radius: 10px;
	font-size: 13.5px;
	color: var(--c-warm-700);
}
.ccomment__hold .ico { width: 16px; height: 16px; flex: none; }

.ccomment__text { margin-top: 12px; font-size: 15.5px; color: var(--gray); line-height: 1.68; }
.ccomment__text p { margin: 0 0 10px; }
.ccomment__text p:last-child { margin-bottom: 0; }

.ccomment__foot { margin-top: 12px; }

.ccomment__foot .comment-reply-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	background: var(--c-soft);
	border-radius: var(--r-pill, 999px);
	font-size: 13.5px;
	font-weight: 700;
	color: var(--gray);
	transition: background-color .2s, color .2s;
}
.ccomment__foot .comment-reply-link:hover { background: var(--purple-50); color: var(--purple); }
.ccomment__foot .comment-reply-link .ico { width: 15px; height: 15px; }

/* --------------------------------------------------------------------------
   Biểu mẫu
   -------------------------------------------------------------------------- */
.post-page .comment-respond {
	margin-top: clamp(24px, 3vw, 34px);
	padding: clamp(20px, 2.6vw, 28px);
	background: var(--c-soft);
	border: 1px solid var(--edge-2);
	border-radius: 18px;
}

/* Khi bấm "Trả lời", biểu mẫu nhảy vào trong bình luận — bỏ nền để không lồng
   hai lớp thẻ vào nhau */
.ccomment .comment-respond {
	margin-top: 14px;
	padding: 0;
	background: none;
	border: 0;
}

.post-page .comment-reply-title {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	font-size: clamp(17px, 1.8vw, 20px);
	font-weight: 700;
	color: var(--purple);
	line-height: 1.32;
}
.post-page .comment-reply-title small { font-size: 13.5px; font-weight: 400; }

.cmtf__cancel a {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--gray-2);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.cmtf__cancel a:hover { color: var(--c-danger); }

/* Hai cột cho tên và thư điện tử; ô nội dung và trang web chiếm cả hàng */
.cmtf {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-top: 18px;
}

.cmtf__row { margin: 0; min-width: 0; }
.cmtf__row--full,
.cmtf__consent,
.cmtf__actions,
.cmtf .logged-in-as { grid-column: 1 / -1; }

.cmtf__row label {
	display: block;
	margin-bottom: 6px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--ink);
}
.cmtf__req { color: var(--c-danger); }

/*
 * Màu chữ phải khai tường minh cho mọi ô nhập. Bỏ trống thì ô kế thừa màu của
 * khối cha, và ở khối nền tối sẽ thành chữ trắng trên nền trắng.
 */
.cmtf input[type="text"],
.cmtf input[type="email"],
.cmtf input[type="url"],
.cmtf textarea {
	width: 100%;
	max-width: 100%;
	padding: 12px 15px;
	background: #fff;
	border: 1px solid var(--edge);
	border-radius: 10px;
	font: inherit;
	font-size: 15px;
	color: var(--ink);
	transition: border-color .2s, box-shadow .2s;
}
.cmtf textarea { min-height: 130px; resize: vertical; line-height: 1.6; }

.cmtf input::placeholder,
.cmtf textarea::placeholder { color: #9AA1AF; }

.cmtf input:focus,
.cmtf textarea:focus {
	outline: none;
	border-color: var(--c-brand-500);
	box-shadow: 0 0 0 3px rgba(59, 98, 212, .14);
}

/* Ô tick vẽ lại cho cùng cỡ với phần còn lại của biểu mẫu */
.cmtf__consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
}
.cmtf__consent input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	flex: none;
	accent-color: var(--green);
	cursor: pointer;
}
.cmtf__consent label {
	margin: 0;
	font-size: 13.5px;
	font-weight: 400;
	color: var(--gray);
	line-height: 1.5;
	cursor: pointer;
}

.cmtf__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin: 4px 0 0;
}

.cmtf__submit {
	padding: 13px 28px;
	background: var(--green);
	border: 0;
	border-radius: 10px;
	font: inherit;
	font-size: 15.5px;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
	transition: background-color .2s, transform .12s;
}
.cmtf__submit:hover { background: var(--green-dark); }
.cmtf__submit:active { transform: translateY(1px); }

.cmtf__note { font-size: 13px; color: var(--gray-2); line-height: 1.55; }

.cmtf .logged-in-as { margin: 0; font-size: 13.5px; color: var(--gray); }
.cmtf .logged-in-as a { color: var(--purple); font-weight: 600; }
.post-page .lender__disclaimer { margin-top: 28px; }

/* --------------------------------------------------------------------------
   Đáp ứng màn hình
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
	.phero__foot { align-items: flex-start; }
	.pcopy { width: 100%; justify-content: center; }
	.pauthor { flex-direction: column; gap: 12px; }
	.plender { flex-direction: column; align-items: flex-start; }
	.plender .btn-apply { align-self: stretch; }
	.pnav { grid-template-columns: 1fr; }
	.pnav__item--prev,
	.pnav__item--next { grid-column: 1; }
	.pnav__item--next { text-align: left; }
	.pnav__item--next .pnav__dir { justify-content: flex-start; }

	/* Màn hẹp thì tên và thư điện tử xếp dọc, hai cột chỉ còn 150px mỗi ô */
	.cmtf { grid-template-columns: 1fr; }
	.cmtf__actions { flex-direction: column; align-items: stretch; }
	.cmtf__submit { width: 100%; }
	.cmtf__note { text-align: center; }
	.comments__head { align-items: flex-start; }
}