/*
 * Vietads KNC Manager – giao diện ngoài site.
 * Font, cỡ chữ kế thừa theme. Màu nhấn tự dò theo biến màu của theme; nền / viền pha từ màu chữ
 * nên theme tối tự tối theo.
 */

.vietads-knc,
.vietads-knc-sources,
.vietads-knc-table,
.vietads-knc-table__hint {
	--vietads-knc-accent: var(--primary-color, var(--wp--preset--color--primary, var(--ast-global-color-0, var(--global-palette1, var(--e-global-color-primary, var(--accent, currentColor))))));
	--vietads-knc-line: rgba(127, 127, 127, 0.28);
	--vietads-knc-soft: rgba(127, 127, 127, 0.07);
	--vietads-knc-zebra: rgba(127, 127, 127, 0.035);
	--vietads-knc-muted: rgba(127, 127, 127, 1);
	--vietads-knc-ok: #1a7f37;
	box-sizing: border-box;
	margin: 1.5em 0;
	font: inherit;
	color: inherit;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	.vietads-knc,
	.vietads-knc-sources,
	.vietads-knc-table,
	.vietads-knc-table__hint {
		--vietads-knc-line: color-mix(in srgb, currentColor 16%, transparent);
		--vietads-knc-soft: color-mix(in srgb, currentColor 5%, transparent);
		--vietads-knc-zebra: color-mix(in srgb, currentColor 2.5%, transparent);
		--vietads-knc-muted: color-mix(in srgb, currentColor 68%, transparent);
	}
}

.vietads-knc *,
.vietads-knc *::before,
.vietads-knc *::after {
	box-sizing: inherit;
}

/* Link giữ màu link của theme (không ép màu: theme không khai báo màu chính thì link vẫn khác màu chữ).
   Chỉ khi chọn "Màu tự chọn" mới đổi màu link – xem CSS thêm do plugin in ra. */
.vietads-knc a {
	text-decoration-thickness: from-font;
}

.vietads-knc p {
	margin: 0;
}

.vietads-knc--boxed {
	padding: 1.1em 1.25em;
	border: 1px solid var(--vietads-knc-line);
	border-radius: 8px;
	background: var(--vietads-knc-soft);
}

.vietads-knc--minimal {
	padding: 1em 0;
	border-top: 1px solid var(--vietads-knc-line);
	border-bottom: 1px solid var(--vietads-knc-line);
}

/* ---------- Khung tác giả ---------- */

.vietads-knc-author {
	display: flex;
	gap: 1em;
	align-items: flex-start;
}

.vietads-knc-author__photo {
	flex: 0 0 auto;
	width: 4.5em;
	height: 4.5em;
	border-radius: 50%;
	object-fit: cover;
}

.vietads-knc-author__body {
	flex: 1 1 auto;
	min-width: 0;
}

.vietads-knc-author__eyebrow {
	font-size: 0.8em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--vietads-knc-muted);
}

.vietads-knc-author__name {
	margin-top: 0.15em !important;
	font-size: 1.1em;
	font-weight: 700;
	line-height: 1.3;
}

.vietads-knc-author__name a {
	color: inherit;
	text-decoration: none;
}

.vietads-knc-author__name a:hover {
	color: var(--vietads-knc-accent);
}

.vietads-knc-author__job {
	display: block;
	font-size: 0.85em;
	font-weight: 400;
	color: var(--vietads-knc-muted);
}

.vietads-knc-author__bio,
.vietads-knc-author__topics {
	margin-top: 0.5em !important;
	font-size: 0.95em;
	line-height: 1.6;
}

.vietads-knc-author__topics strong {
	font-weight: 600;
}

.vietads-knc-author__social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em 0.9em;
	margin: 0.6em 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.9em;
}

.vietads-knc-author__social li {
	margin: 0;
}

.vietads-knc-author--archive {
	margin-bottom: 2em;
}

@media (max-width: 480px) {
	.vietads-knc-author {
		flex-direction: column;
	}
}

/* ---------- Dòng ngày tháng (kiểu C) ---------- */

.vietads-knc-dateline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35em 0.5em;
	margin: 0 0 1.25em;
	padding: 0;
	border: 0;
	background: none;
	font-size: 0.9em;
	line-height: 1.5;
}

.vietads-knc-dateline__date,
.vietads-knc-dateline__sep {
	color: var(--vietads-knc-muted);
}

.vietads-knc-dateline__item {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

.vietads-knc-dateline__photo {
	width: 1.75em;
	height: 1.75em;
	border-radius: 50%;
	object-fit: cover;
}

.vietads-knc-dateline__name {
	font-weight: 700;
	color: inherit;
}

.vietads-knc-dateline__name a {
	color: inherit;
	text-decoration: none;
}

.vietads-knc-dateline__sep {
	opacity: 0.6;
}

.vietads-knc-dateline__updated {
	color: var(--vietads-knc-ok);
	font-weight: 600;
}

/* ---------- Xem thêm / dòng link cuối bài ---------- */

.vietads-knc.vietads-knc-more {
	margin: 1.25em 0;
	padding: 0.75em 1em;
	border: 0;
	border-left: 3px solid var(--vietads-knc-accent);
	border-radius: 0;
	background: var(--vietads-knc-soft);
	line-height: 1.6;
}

.vietads-knc-more a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.vietads-knc-more .vietads-knc-more__title {
	margin: 0 0 0.35em;
	padding: 0;
}

.vietads-knc-more ul.vietads-knc-more__list {
	margin: 0;
	padding: 0 0 0 1.2em;
	list-style: disc outside;
}

.vietads-knc-more ul.vietads-knc-more__list li {
	margin: 0.2em 0;
	padding: 0;
	list-style: inherit;
	background: none;
}

.vietads-knc-more ul.vietads-knc-more__list li::before {
	content: none;
}

/* Dòng "Chủ đề: Trang chủ › Chuyên mục" – cùng khung với "Xem thêm". */
.vietads-knc-topic__sep {
	padding: 0 0.35em;
	opacity: 0.55;
}

/* ---------- Đối tác ---------- */

.vietads-knc-partners {
	display: grid;
	gap: 1em;
	margin: 1.5em 0;
}

.vietads-knc-partners--grid {
	grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
}

.vietads-knc-partners .vietads-knc {
	margin: 0;
}

.vietads-knc-partner {
	display: flex;
	gap: 1em;
	align-items: center;
}

.vietads-knc-partners--grid .vietads-knc-partner {
	flex-direction: column;
	align-items: flex-start;
}

.vietads-knc-partner__logo {
	flex: 0 0 auto;
	width: 5em;
	height: auto;
	max-height: 5em;
	object-fit: contain;
}

.vietads-knc-partner__body {
	flex: 1 1 auto;
	min-width: 0;
}

.vietads-knc-partner__name {
	font-weight: 700;
	font-size: 1.05em;
}

.vietads-knc-partner__stars {
	display: inline-block;
	margin-top: 0.2em;
	color: #d4a017;
	letter-spacing: 0.08em;
}

.vietads-knc-partner__score {
	margin-left: 0.3em;
	color: var(--vietads-knc-muted);
	font-size: 0.85em;
	letter-spacing: 0;
}

.vietads-knc-partner__desc {
	margin-top: 0.35em !important;
	font-size: 0.95em;
	line-height: 1.55;
}

.vietads-knc .vietads-knc-partner__btn {
	display: inline-block;
	flex: 0 0 auto;
	padding: 0.6em 1.2em;
	border-radius: 6px;
	background: var(--vietads-knc-accent);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.vietads-knc .vietads-knc-partner__btn:hover,
.vietads-knc .vietads-knc-partner__btn:focus {
	filter: brightness(0.9);
	color: #fff;
}

.vietads-knc a:focus-visible {
	outline: 2px solid var(--vietads-knc-accent);
	outline-offset: 2px;
}

@media (max-width: 480px) {
	.vietads-knc-partner {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ---------- Nguồn tham khảo cuối bài (Viết bài AI) ----------
   Link ra ngoài phải nhìn ra là link ở mọi theme: giữ màu link của theme (theme không khai báo màu chính
   thì màu nhấn rơi về màu chữ nên không dùng), luôn gạch chân; "Màu tự chọn" đổi màu qua CSS thêm. Tên miền xám nhạt.
   Bài viết từ bản cũ (tiêu đề là chữ đậm trong đoạn, tên miền là chữ trơn) cũng được làm nổi. */

.vietads-knc-sources {
	margin: 2em 0 1.5em;
}

.vietads-knc-sources h2.vietads-knc-sources__title {
	margin: 0 0 0.6em;
}

.vietads-knc-sources > p:first-child {
	margin: 0 0 0.6em;
	font-size: 1.35em;
	font-weight: 600;
	line-height: 1.3;
}

.vietads-knc-sources > p:first-child strong {
	font-weight: inherit;
}

.vietads-knc-sources ol {
	margin: 0;
	padding: 0 0 0 1.4em;
	list-style: decimal outside;
}

.vietads-knc-sources ol li {
	margin: 0 0 0.4em;
	line-height: 1.55;
}

.vietads-knc-sources ol li a {
	text-decoration: underline;
	text-decoration-thickness: from-font;
	text-underline-offset: 0.15em;
}

.vietads-knc-sources ol li a:hover,
.vietads-knc-sources ol li a:focus {
	text-decoration-thickness: 2px;
}

.vietads-knc-sources .vietads-knc-sources__host {
	font-size: 0.875em;
	color: var(--vietads-knc-muted);
}

/* ---------- Ảnh và bảng trong bài do Viết bài AI viết ----------
   Ảnh: khối Ảnh "Căn giữa" (theme bỏ CSS khối của WordPress vẫn căn giữa). Theme cổ điển nhận khối ảnh dạng
   <div class="wp-block-image"><figure class="aligncenter"> nên căn cả kiểu này.
   Bảng: kiểu bảng riêng để theme nào cũng gọn, dễ đọc; màu viền / nền pha từ màu chữ nên theme tối tự tối. */

figure.wp-block-image.aligncenter,
.wp-block-image > figure.aligncenter {
	display: table;
	margin-left: auto;
	margin-right: auto;
}

/* Khoảng cách trên / dưới ảnh (bằng bảng): theme bỏ CSS khối (vd Flatsome) thì ảnh dính sát chữ, tiêu đề kề bên.
   Đặt lên chính figure (không đặt lên div bọc ngoài): có theme (vd Twenty Twenty-One) ép lề div về 0 bằng quy tắc mạnh hơn.
   Lề figure gộp với lề div của theme (không có viền / đệm), nên theme đã có lề thì không bị cộng đôi. */
figure.wp-block-image.aligncenter,
.wp-block-image > figure.aligncenter {
	margin-top: 1.5em;
	margin-bottom: 1.5em;
}

figure.wp-block-image.aligncenter img,
.wp-block-image > figure.aligncenter img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

figure.wp-block-table.vietads-knc-table {
	margin: 1.5em 0;
	padding: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--vietads-knc-line);
	border-radius: 8px;
	box-shadow: none;
}

figure.vietads-knc-table table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	border-spacing: 0;
	background: none;
	font-size: inherit;
	line-height: 1.5;
}

figure.vietads-knc-table table th,
figure.vietads-knc-table table td {
	padding: 0.75em 1em;
	border: 0;
	border-top: 1px solid var(--vietads-knc-line);
	text-align: left;
	vertical-align: top;
	text-transform: none;
	letter-spacing: normal;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	background: none;
}

figure.vietads-knc-table table thead,
figure.vietads-knc-table table tfoot {
	border: 0;
}

figure.vietads-knc-table table thead th {
	border-top: 0;
	border-bottom: 1px solid var(--vietads-knc-line);
	background: var(--vietads-knc-soft);
	font-weight: 600;
}

figure.vietads-knc-table table thead + tbody tr:first-child td,
figure.vietads-knc-table table thead + tbody tr:first-child th,
figure.vietads-knc-table table > tbody:first-child tr:first-child td,
figure.vietads-knc-table table > tbody:first-child tr:first-child th {
	border-top: 0;
}

figure.vietads-knc-table table tbody tr:nth-child(even) {
	background: var(--vietads-knc-zebra);
}

figure.vietads-knc-table figcaption {
	margin: 0;
	padding: 0.5em 1em;
	border-top: 1px solid var(--vietads-knc-line);
	font-size: 0.875em;
}

.vietads-knc-table__hint {
	margin: -1em 0 1.5em;
	font-size: 0.8125em;
	color: var(--vietads-knc-muted);
}

.vietads-knc-table__hint::before {
	content: "\2192";
	margin-right: 0.4em;
}

@media (max-width: 640px) {
	figure.vietads-knc-table table th,
	figure.vietads-knc-table table td {
		min-width: 10rem;
	}
}