/* --------------------------------------------------------------------------
   Khối Gutenberg — phần người đọc nhìn thấy.

   Chỉ nạp khi trang thật sự có khối cần tới (xem tbp_blocks_assets), nên giữ
   file này đúng phần của các khối, không nhét kiểu chung vào đây.
   -------------------------------------------------------------------------- */

/* Trích dẫn: kiểu mặc định của WordPress trên nền theme. */
.wp-block-quote {
	position: relative;
	margin: 28px 0;
	padding: 20px 22px 20px 26px;
	background: var(--c-soft);
	border-left: 4px solid var(--c-act-700);
	border-radius: 0 12px 12px 0;
	font-size: 17px;
	color: var(--c-ink);
	line-height: 1.66;
}

.wp-block-quote p:last-of-type { margin-bottom: 0; }

.wp-block-quote cite {
	display: block;
	margin-top: 10px;
	font-size: 14px;
	font-style: normal;
	color: var(--c-muted);
}

.wp-block-quote cite::before { content: '— '; }

/* --------------------------------------------------------------------------
   Kiểu "Nhấn mạnh"

   Dùng cho câu chốt của bài chứ không phải trích lời ai: chữ to hơn, viền đổi
   sang màu nhấn của theme và có dấu ngoặc kép để mắt dừng lại.
   -------------------------------------------------------------------------- */
.wp-block-quote.is-style-tbp-highlight {
	padding: 26px 26px 26px 62px;
	background: var(--c-brand-50);
	border-left: 4px solid var(--c-brand-700);
	border-radius: 12px;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.55;
}

.wp-block-quote.is-style-tbp-highlight::before {
	content: '\201C';
	position: absolute;
	top: 6px;
	left: 20px;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 56px;
	line-height: 1;
	color: var(--c-brand-700);
	opacity: .35;
}

.wp-block-quote.is-style-tbp-highlight cite { color: var(--c-brand-700); }

@media (max-width: 640px) {
	.wp-block-quote.is-style-tbp-highlight {
		padding: 22px 18px 22px 48px;
		font-size: 17px;
	}
	.wp-block-quote.is-style-tbp-highlight::before { left: 14px; font-size: 44px; }
}

/* --------------------------------------------------------------------------
   Căn lề trích dẫn

   Hai cơ chế khác nhau, đừng lẫn:
     · has-text-align-* — nút "căn chữ", đổi chữ bên trong, hộp vẫn rộng cả cột.
     · aligncenter      — nút "căn khối", thu hộp lại rồi đẩy vào giữa cột.
   Dùng riêng hay dùng cùng lúc đều được.

   Kèm cả selector trong .lender__prose vì post.css đã có luật blockquote riêng
   cho thân bài, đặc thù cao hơn — không nhắc lại ở đây thì viền trái vẫn còn
   nguyên trong khi chữ đã nằm giữa.
   -------------------------------------------------------------------------- */
.wp-block-quote.has-text-align-center,
.post-page .lender__prose blockquote.has-text-align-center {
	padding: 22px 26px;
	border-left: 0;
	border-radius: 12px;
	text-align: center;
}

.wp-block-quote.has-text-align-right,
.post-page .lender__prose blockquote.has-text-align-right {
	padding: 20px 26px 20px 22px;
	border-left: 0;
	border-right: 4px solid var(--c-act-700);
	border-radius: 12px 0 0 12px;
	text-align: right;
}

/* Dấu ngoặc kép của kiểu "Nhấn mạnh" bám mép trái; chữ ra giữa thì nó lên trên. */
.wp-block-quote.is-style-tbp-highlight.has-text-align-center {
	padding: 46px 26px 26px;
}

.wp-block-quote.is-style-tbp-highlight.has-text-align-center::before {
	top: 4px;
	left: 50%;
	transform: translateX(-50%);
}

/*
 * Căn khối. Không có max-width thì aligncenter vô nghĩa: hộp đã rộng bằng cột
 * rồi, căn giữa một thứ vừa khít thì chẳng thấy gì đổi.
 */
.wp-block-quote.aligncenter,
.post-page .lender__prose blockquote.aligncenter {
	max-width: min(100%, 34rem);
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Căn trái / căn phải

   WordPress chỉ gắn class alignleft/alignright, phần float là việc của theme —
   mà theme này chưa từng có luật nào cho ba class đó, nên trước giờ chọn "căn
   trái" ở trang đăng thì lúc đọc chẳng thấy gì đổi.
   -------------------------------------------------------------------------- */
.wp-block-quote.alignleft,
.post-page .lender__prose blockquote.alignleft {
	float: left;
	max-width: min(100%, 22rem);
	margin: 6px 28px 20px 0;
}

.wp-block-quote.alignright,
.post-page .lender__prose blockquote.alignright {
	float: right;
	max-width: min(100%, 22rem);
	margin: 6px 0 20px 28px;
}

/* Cột chữ phải bao được float, không thì hộp tác giả bên dưới bị chữ leo lên. */
.post-page .lender__prose { display: flow-root; }

/*
 * Màn hẹp thì bỏ float: một hộp 22rem cạnh một cột 20rem không còn là "bên
 * cạnh" nữa, chỉ là hai dòng chữ chen nhau.
 */
@media (max-width: 640px) {
	.wp-block-quote.alignleft,
	.wp-block-quote.alignright,
	.post-page .lender__prose blockquote.alignleft,
	.post-page .lender__prose blockquote.alignright {
		float: none;
		max-width: 100%;
		margin: 20px 0;
	}
}