/* VIETTA 2026-10-03 (bản chốt DANH MỤC KIẾN THỨC + mẫu bài viết, feedback/fix_seo)
   CSS riêng cho templates/blog.bwt và templates/article.bwt (khối "Tin liên quan").
   File MỚI (không sửa vietta-kien-thuc.css — file đó dùng cho khối Kiến thức ở trang chủ/trang xe).
   Dùng token có sẵn từ layouts/theme.bwt: --primary-color, --text-color, --text-secondary-color, --border-color. */

/* ---------- Danh mục: intro + H2 ---------- */
.vietta-kt .vietta-kt__intro {
	max-width: 820px;
	margin: 0 auto 6px;
	text-align: center;
	color: var(--text-secondary-color, #666);
}
.vietta-kt .vietta-kt__intro p { margin: 0 0 8px; line-height: 1.7; font-size: 1rem; }
.vietta-kt .vietta-kt__h2 {
	font-size: 1.3rem;
	font-weight: 800;
	line-height: 1.3;
	color: var(--text-color, #282828);
	margin: 28px 0 18px;
	padding-left: 12px;
	border-left: 4px solid var(--primary-color);
}

/* ---------- Lưới thẻ bài ---------- */
.vietta-kt__list { padding-bottom: 8px; }
.vietta-kt__grid { margin-left: -12px; margin-right: -12px; }
.vietta-kt__col { padding-left: 12px; padding-right: 12px; margin-bottom: 24px; }

.vietta-kt-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid var(--border-color, #f1f1f1);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 18px rgba(0, 0, 0, .04);
	transition: box-shadow .2s ease, transform .2s ease;
}
.vietta-kt-card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, .10); transform: translateY(-1px); }
.vietta-kt-card__img {
	display: block;
	aspect-ratio: 1200 / 628;
	overflow: hidden;
	background: #f2f2f2;
}
.vietta-kt-card__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.vietta-kt-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
	padding: 16px 18px 20px;
}
.vietta-kt-card__title { margin: 0; font-size: 1.08rem; font-weight: 700; line-height: 1.4; }
.vietta-kt-card__title a {
	color: var(--text-color, #282828);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-decoration: none;
}
.vietta-kt-card__title a:hover { color: var(--primary-color); }
.vietta-kt-card__meta { margin: 0; font-size: .85rem; color: var(--text-secondary-color, #666); }
.vietta-kt-card__excerpt {
	margin: 0;
	font-size: .95rem;
	line-height: 1.6;
	color: #555;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---------- Phân trang: đủ lớn để bấm, trang hiện tại rõ ---------- */
.vietta-kt__pager { margin: 8px 0 8px; }
.vietta-kt__pager .pagination { float: none !important; justify-content: center; gap: 6px; margin: 0; }
.vietta-kt__pager .page-item .page-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border-radius: 10px;
	border: 1px solid var(--border-color, #e5e5e5);
	color: var(--text-color, #282828);
	font-weight: 600;
}
.vietta-kt__pager .page-item .page-link:hover { border-color: var(--primary-color); color: var(--primary-color); }
.vietta-kt__pager .page-item.active .page-link {
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: #fff;
}
.vietta-kt__pager .page-item.disabled:not(.active) .page-link { opacity: .45; pointer-events: none; }

/* ---------- Khối cuối "Từ kiến thức đến lựa chọn thực tế" ---------- */
.vietta-kt-next {
	margin: 36px auto 16px;
	padding: 30px 24px;
	border-radius: 16px;
	background: #f5f7f6;
	text-align: center;
}
.vietta-kt-next__title { margin: 0 0 10px; font-size: 1.4rem; font-weight: 800; color: var(--text-color, #282828); }
.vietta-kt-next__desc { max-width: 720px; margin: 0 auto 18px; color: var(--text-secondary-color, #666); line-height: 1.7; }
.vietta-kt-next__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; list-style: none; margin: 0; padding: 0; }
.vietta-kt-next__links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 20px;
	border: 1px solid var(--primary-color);
	border-radius: 10px;
	background: #fff;
	color: var(--primary-color);
	font-weight: 600;
	text-decoration: none;
}
.vietta-kt-next__links a:hover { background: #fef2f2; }
.vietta-kt-next__links li:first-child a { background: var(--primary-color); color: #fff; }
.vietta-kt-next__links li:first-child a:hover { background: #b01030; border-color: #b01030; }

/* ---------- Bài viết: khối "Tin liên quan" ---------- */
.vietta-kt-related { padding-top: 28px; border-top: 1px solid var(--border-color, #f1f1f1); margin-top: 28px; }
.vietta-kt-related .heading-bar__title {
	font-size: 1.3rem;
	font-weight: 800;
	color: var(--text-color, #282828);
	margin: 0;
	padding-left: 12px;
	border-left: 4px solid var(--primary-color);
	text-align: left;
	display: block;
}
.vietta-kt-related .mb-3 { text-align: left; }
.vietta-kt-related .vietta-kt-card__body { padding: 14px 16px 18px; }
.vietta-kt-related .vietta-kt-card__title { font-size: 1rem; }

@media (max-width: 767px) {
	.vietta-kt .vietta-kt__h2, .vietta-kt-related .heading-bar__title { font-size: 1.15rem; }
	.vietta-kt-next { padding: 24px 16px; }
	.vietta-kt-next__links a { width: 100%; }
	.vietta-kt-next__links li { width: 100%; }
	.vietta-kt__pager .pagination { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
	.vietta-kt-card { transition: none; }
	.vietta-kt-card:hover { transform: none; }
}

/* ---------- Nút Zalo cuối bài viết (feedback QA-108, 2026-10-08) — link thẳng tới Zalo của shop ---------- */
.vietta-kt-zalo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 0 22px;
	border-radius: 999px;
	background: #0068ff;
	color: #fff !important;
	font-weight: 700;
	text-decoration: none !important;
}
.vietta-kt-zalo strong { color: inherit; }
.vietta-kt-zalo:hover { background: #0056d6; color: #fff !important; }