/**
 * vce-citations.css — trích dẫn số + khối "Nguồn tham khảo".
 *
 * v3.17.0 — viết lại phần trích dẫn sau khi tìm ra HAI nguyên nhân thật:
 *
 *   1. Thẻ và thuộc tính bị xoá bởi CHÍNH danh sách kses trong
 *      html_to_blocks() của plugin, không phải bởi WordPress. Đã mở
 *      id/class/sup/aside ở đó nên giờ chọn theo class được bình thường.
 *
 *   2. Container thật của bài blog trên villaverde.vn là #ftwp-postcontent
 *      (và article.post .entry-content) — bộ chọn cũ chỉ nhắm .entry-content
 *      /.post-content/article nên phần lớn trường hợp KHÔNG khớp, CSS không
 *      bao giờ ăn. Lấy từ villaverde-custom-css v8_6, mục 2-4.
 *
 * Trích dẫn KHÓA CLICK: chỉ rê chuột hiện chú thích, bấm không đi đâu cả —
 * người đọc không bị kéo khỏi câu đang đọc.
 */

/* ================= Trích dẫn số trong thân bài ================= */

.vce-cite {
	font-size: 0.62em !important;
	line-height: 0 !important;
	vertical-align: super !important;
	color: var(--vv-accent, #0f7b56) !important;
	font-weight: 700 !important;
	letter-spacing: .02em;
	margin-left: 1px;
	padding: 0 1px;
	cursor: help;
	position: relative;
	white-space: nowrap;
	/* Khoá chọn/bấm: đây là chú thích để đọc, không phải nút bấm. */
	-webkit-user-select: none;
	user-select: none;
}

/* Tooltip — dựng bằng CSS thuần, không cần JS.
   Đặt trong .entry-content/#ftwp-postcontent để không rò ra phần khác của
   trang, nhưng bản thân .vce-cite đã đủ đặc thù nên giữ cả bộ chọn trần. */
.vce-cite::after {
	content: attr(data-vce-note);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	min-width: 180px;
	max-width: 300px;
	width: max-content;
	padding: 8px 11px;
	background: var(--vv-ink, #14241D);
	color: #fff;
	font-size: 12.5px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	letter-spacing: 0;
	vertical-align: baseline;
	text-align: left;
	white-space: normal;
	border-radius: var(--vv-radius-sm, 6px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
	opacity: 0;
	visibility: hidden;
	transition: opacity .16s ease, transform .16s ease;
	pointer-events: none;
	z-index: 40;
}

/* Mũi nhọn chỉ xuống số trích dẫn. */
.vce-cite::before {
	content: "";
	position: absolute;
	bottom: calc(100% + 2px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	border: 6px solid transparent;
	border-top-color: var(--vv-ink, #14241D);
	opacity: 0;
	visibility: hidden;
	transition: opacity .16s ease, transform .16s ease;
	pointer-events: none;
	z-index: 41;
}

.vce-cite:hover::after,
.vce-cite:focus::after,
.vce-cite:hover::before,
.vce-cite:focus::before {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

/* Gần mép trái/phải thì tooltip tràn ra ngoài màn hình — neo lại theo mép. */
.vce-cite:first-child::after { left: 0; transform: translateX(0) translateY(4px); }
.vce-cite:first-child:hover::after { transform: translateX(0) translateY(0); }

/* Màn hình hẹp: tooltip rộng gần hết bề ngang, tránh tràn. */
@media (max-width: 600px) {
	.vce-cite::after {
		min-width: 0;
		max-width: 78vw;
		font-size: 12px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vce-cite::after,
	.vce-cite::before { transition: none; }
}

/* Gỡ rule 18px của theme khỏi chỉ số trên — theme đặt font-size cho mọi
   phần tử trong p/li với !important (xem villaverde-custom-css mục 3), nên
   phải nhắc lại ở đúng độ đặc thù cao hơn. */
body article.post .entry-content .vce-cite,
body article.post .entry-content p .vce-cite,
body article.post .entry-content li .vce-cite,
.single-post #ftwp-postcontent .vce-cite,
.single-post #ftwp-postcontent > p .vce-cite,
.single-post #ftwp-postcontent > ul > li .vce-cite,
.single-post #ftwp-postcontent > ol > li .vce-cite {
	font-size: 0.62em !important;
	line-height: 0 !important;
	vertical-align: super !important;
	color: var(--vv-accent, #0f7b56) !important;
}

body article.post .entry-content .vce-cite::after,
.single-post #ftwp-postcontent .vce-cite::after {
	font-size: 12.5px !important;
	line-height: 1.5 !important;
	color: #fff !important;
	/* v3.27.0 — trước đây chỉ nhắc lại color, KHÔNG nhắc lại background.
	   Trên villaverde.vn, theme/BetterDocs có rule nền cho phần tử trong
	   bài viết đặc thù cao hơn selector trần .vce-cite::after ở trên, nên
	   nền tooltip bị đè mất, chỉ còn lại khối đen không chữ ("đen xì").
	   Nhắc lại đúng độ đặc thù như color để chắc chắn thắng. */
	background: var(--vv-ink, #14241D) !important;
	background-color: var(--vv-ink, #14241D) !important;
}

body article.post .entry-content .vce-cite::before,
.single-post #ftwp-postcontent .vce-cite::before {
	border-top-color: var(--vv-ink, #14241D) !important;
}

/* Nguồn không có chú thích cụ thể (note rỗng — kể cả HTML cũ đã lưu từ
   trước v3.28.0, vốn không tự sửa được vì đã đăng): đừng ẩn hẳn tooltip
   (người đọc tưởng số trích dẫn chết) và đừng để trống hiện khối đen trơn
   ("đen xì") — đổ thẳng một dòng chữ dự phòng bằng CSS, không phụ thuộc
   attr() có nội dung hay không. */
.vce-cite[data-vce-note=""]::after {
	content: "Xem nguồn tham khảo cuối bài." !important;
}

/* ================= Khối "Nguồn tham khảo" ================= */

/* v3.28.0 — lưới an toàn: thay vì chỉ đoán đúng vài container cụ thể
   (#ftwp-postcontent, article.post .entry-content...), khoá toàn bộ kiểu
   chữ bên trong .vce-sources bằng chính class của nó — độ đặc thù thấp
   hơn ID nhưng dùng !important + đặt SAU mọi rule khác trong file này nên
   luôn là tuyên bố cuối cùng cho những container chưa đoán được (vd bài
   không nằm trong #ftwp-postcontent như dự tính). Đây là lưới đỡ, KHÔNG
   thay thế các rule đặc thù cụ thể bên dưới — giữ cả hai. */
.vce-sources,
.vce-sources * {
	font-family: inherit !important;
	text-align: left !important;
	font-style: normal !important;
}

.vce-sources__list,
.vce-sources__list li,
.vce-sources__list li a {
	font-size: 0.85rem !important;
	line-height: 1.55 !important;
}

/* v3.17.0 — khối nguồn là phần TRA CỨU, không phải phần đọc. Nên nó phải
   nhìn ra ngay là "chú thích cuối bài": nền trầm hơn thân bài, chữ nhỏ hơn,
   vạch màu bên trái để mắt lướt qua biết đây không phải đoạn văn tiếp theo. */
.vce-sources {
	background: var(--vv-surface-alt, #f6f8fa);
	border: 1px solid var(--vv-line, #e3e6ea);
	border-left: 3px solid var(--vv-accent, #0f7b56);
	border-radius: var(--vv-radius, 10px);
	padding: 18px 24px 16px;
	margin: 32px 0 0;
}

.vce-sources__head {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--vv-accent, #0f7b56) !important;
	margin-bottom: 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--vv-line, #e3e6ea);
}

/* Dấu hiệu nhận diện — không dùng ảnh, không cần tải thêm gì. */
.vce-sources__head::before {
	content: "";
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	border: 2px solid currentColor;
	border-radius: 3px;
	opacity: .55;
}

/* H2 "Nguồn tham khảo" đứng ngay trên khối là thừa — khối đã tự có nhãn.
   Ẩn đi thay vì sửa PHP, để mục lục vẫn neo được vào H2 đó. */
.vce-sources__head + .vce-sources__list { margin-top: 0 !important; }

.vce-sources__list {
	list-style: decimal !important;
	margin: 0 !important;
	padding-left: 1.15em !important;
}

.vce-sources__list li {
	margin: 0 0 8px !important;
	padding: 3px 4px !important;
	font-size: 0.85rem !important;
	line-height: 1.55 !important;
	color: var(--vv-ink-soft, #4a5568) !important;
}

.vce-sources__list li::marker {
	color: var(--vv-accent, #0f7b56);
	font-weight: 700;
}

/* Gỡ rule 18px của theme khỏi khối nguồn — nếu không, chữ trong khối to
   bằng thân bài và mất hẳn cảm giác "chú thích". */
body article.post .entry-content .vce-sources__list li,
.single-post #ftwp-postcontent .vce-sources__list li,
.single-post #ftwp-postcontent > ol.vce-sources__list > li {
	font-size: 0.85rem !important;
	line-height: 1.55 !important;
	color: var(--vv-ink-soft, #4a5568) !important;
}

/* Nguồn không dò được trang đích: hiện chữ thường, thêm ghi chú nhỏ để
   người đọc hiểu vì sao không bấm được, thay vì tưởng link hỏng. */
.vce-sources__list li:not(:has(a)) {
	color: var(--vv-ink-mute, #7b8794) !important;
}

.vce-sources__list li a {
	color: var(--vv-ink-soft, #4a5568) !important;
	text-decoration: underline !important;
	text-decoration-color: var(--vv-line-strong, #b9c2cc) !important;
}

.vce-sources__list li a:hover {
	color: var(--vv-accent, #0f7b56) !important;
	text-decoration-color: var(--vv-accent, #0f7b56) !important;
}

/* v3.27.0 — bộ chọn trên chỉ có 2 class, theme (RealHome/BetterDocs) có
   rule màu link mặc định đặc thù hơn (vd id #ftwp-postcontent a) nên đè
   mất màu xám đã định, link hiện ra xanh dương gạch chân mặc định của
   trình duyệt/theme — lệch hẳn tông màu trầm của khối "chú thích". Nhắc
   lại đúng mẫu prefix đã dùng cho .vce-cite/.vce-sources__list li ở trên. */
body article.post .entry-content .vce-sources__list li a,
.single-post #ftwp-postcontent .vce-sources__list li a,
.single-post #ftwp-postcontent > ol.vce-sources__list > li a {
	color: var(--vv-ink-soft, #4a5568) !important;
	text-decoration: underline !important;
	text-decoration-color: var(--vv-line-strong, #b9c2cc) !important;
}

body article.post .entry-content .vce-sources__list li a:hover,
.single-post #ftwp-postcontent .vce-sources__list li a:hover,
.single-post #ftwp-postcontent > ol.vce-sources__list > li a:hover {
	color: var(--vv-accent, #0f7b56) !important;
	text-decoration-color: var(--vv-accent, #0f7b56) !important;
}

/* Mục "Nguồn tham khảo" trong mục lục không phải nội dung chính của bài —
   tách bằng vạch mảnh phía trên, chữ nhạt hơn, không đánh số cùng dãy với
   các mục nội dung thật. Áp dụng cả khi mục lục do Layout Hub (.vv-toc)
   hay cơ chế khác dựng, miễn có class này. */
.vv-toc__item--meta {
	margin-top: 10px !important;
	padding-top: 10px !important;
	border-top: 1px dashed var(--vv-line, #e3e6ea);
}

.vv-toc__item--meta a {
	color: var(--vv-ink-mute, #7b8794) !important;
	font-size: 0.86rem !important;
}