/*
 * Cẩm nang: danh sách /cam-nang/ và bài đơn /cam-nang/{slug}/.
 * Dùng biến --vs-* và lớp chung của base.css (.vs-card, .vs-prose, .vs-crumbs, .vs-pages…); thẻ "Mẫu phù hợp" lấy từ gallery.css.
 * Mobile trước; mốc 640 / 1100px.
 */

/* Ngay dưới đường dẫn: bớt khoảng trên. */
.vs-blog__top, .vs-post__article { padding-top: 16px; }

.vs-blog__eyebrow {
	margin: 0 0 8px;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--vs-primary);
}

/* ---------- Thẻ bài ---------- */

.vs-blog__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 640px) {
	.vs-blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (min-width: 1100px) {
	.vs-blog__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}

/* Cả thẻ bấm được: link tiêu đề phủ lên thẻ, vẫn chỉ một link cho trình đọc màn hình. */
.vs-bcard { position: relative; display: flex; flex-direction: column; gap: 10px; transition: transform .2s var(--vs-ease), box-shadow .2s, border-color .2s; }
.vs-bcard:hover { transform: translateY(-2px); box-shadow: var(--vs-shadow-lg); border-color: #C9D6EA; }
.vs-bcard__date { display: flex; align-items: center; gap: 6px; font-size: .875rem; }
.vs-bcard__title a { color: var(--vs-ink); text-decoration: none; }
.vs-bcard__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.vs-bcard__title a:hover { color: var(--vs-primary); }
.vs-bcard__title a:focus-visible { outline: none; }
.vs-bcard:focus-within { outline: 3px solid var(--vs-focus); outline-offset: 2px; }
.vs-bcard:focus-within:has(:focus:not(:focus-visible)) { outline: none; }
.vs-bcard__excerpt { color: var(--vs-ink-2); }
.vs-bcard__more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; color: var(--vs-primary); font-weight: 600; }

/* ---------- Dải dẫn sang cẩm nang vận hành ---------- */

.vs-blog__ops { display: flex; align-items: flex-start; gap: 16px; margin-top: 40px; background: var(--vs-soft); border-color: #CFE0F7; box-shadow: none; }
.vs-blog__ops > div > * + * { margin-top: 8px; }
.vs-blog__ops-ic { color: var(--vs-primary); margin-top: 2px; }
.vs-blog__ops a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; }

/* ---------- Bài đơn ---------- */

.vs-post__article { padding-bottom: 32px; }
.vs-post__date { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .9375rem; }
.vs-post .vs-prose a { overflow-wrap: anywhere; }
/* Bảng rộng trên điện thoại: cuộn ngang trong bảng, trang không tràn. */
.vs-post .vs-prose table { display: block; max-width: 100%; overflow-x: auto; }
.vs-post .vs-prose th { background: var(--vs-bg); font-weight: 700; }

.vs-post__cta {
	margin-top: 40px;
	padding: 24px;
	border-radius: var(--vs-radius-lg);
	background: var(--vs-deep);
	color: #fff;
	--vs-focus: var(--vs-accent);
}
.vs-post__cta .vs-h3 { color: #fff; }
.vs-post__cta > p { margin-top: 8px; color: #DCE7F7; }
.vs-post__cta .vs-actions { margin-top: 16px; }
.vs-post__cta .vs-btn--primary:hover { --b-bg: #0058BA; --b-bd: #fff; }
.vs-post__cta .vs-btn--ghost { --b-fg: #fff; --b-bd: rgba(255, 255, 255, .7); }
.vs-post__cta .vs-btn--ghost:hover { --b-bg: rgba(255, 255, 255, .12); --b-bd: #fff; }
@media (min-width: 768px) {
	.vs-post__cta { padding: 32px; }
}

.vs-post__tpls { padding-top: 32px; background: var(--vs-card); }
.vs-post__tpls-intro { margin: 8px 0 24px; }

.vs-post__more-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 24px; }
.vs-post__more-head a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
	.vs-bcard, .vs-bcard:hover { transition: none; transform: none; }
}

@media print {
	.vs-post__cta, .vs-post__tpls, .vs-post__more, .vs-blog__ops { display: none; }
}