/* Card tài liệu + lưới — DESIGN.md: 4/3/2/2 cột, tiêu đề 2 dòng, bóng nhẹ, focus ring */
.b4t-grid{display:grid;gap:var(--b4t-space-md);grid-template-columns:repeat(4,minmax(0,1fr))}
.b4t-card{position:relative;display:flex;flex-direction:column;background:var(--b4t-color-paper);border:1px solid var(--b4t-color-line);border-radius:var(--b4t-radius-lg);box-shadow:var(--b4t-shadow-rest);overflow:hidden;transition:transform .2s ease-out,box-shadow .2s ease-out,border-color .2s ease-out}
.b4t-card:hover{transform:translateY(-2px);border-color:#afd2e8;box-shadow:var(--b4t-shadow-hover)}
.b4t-card__link{display:flex;flex-direction:column;flex:1;color:inherit;text-decoration:none;border-radius:inherit}
.b4t-card__link:focus-visible{outline:3px solid var(--b4t-color-focus);outline-offset:-3px}
.b4t-card__cover{position:relative;aspect-ratio:4/3;background:var(--b4t-color-primary-soft);border-bottom:1px solid var(--b4t-color-line);overflow:hidden}
.b4t-card__img{width:100%;height:100%;object-fit:cover;display:block}
.b4t-card__ph{position:absolute;inset:14% 22%;display:flex;flex-direction:column;gap:9%;padding:10% 9%;background:var(--b4t-color-paper);border-radius:6px;box-shadow:0 8px 20px rgba(20,48,74,.12)}
.b4t-card__ph i{display:block;height:6%;border-radius:3px;background:#c9d9e6}
.b4t-card__ph i:first-child{width:55%;height:9%;background:var(--b4t-color-primary)}
.b4t-card__badges{position:absolute;inset:10px 10px auto;display:flex;justify-content:space-between;align-items:center;gap:6px;pointer-events:none}
.b4t-tag,.b4t-filetype{display:inline-flex;align-items:center;padding:4px 9px;border-radius:var(--b4t-radius-full);font:700 11px/1.2 var(--b4t-font-sans);letter-spacing:.02em}
.b4t-tag{background:var(--b4t-color-primary);color:var(--b4t-color-on-primary)}
.b4t-filetype{background:rgba(255,255,255,.93);color:var(--b4t-color-primary-strong)}
.b4t-card__body{display:flex;flex-direction:column;flex:1;padding:14px 16px 12px}
.b4t-card__title{margin:0 0 10px;font:700 15px/1.4 var(--b4t-font-sans);color:var(--b4t-color-ink);min-height:calc(2 * 1.4em)}
.b4t-card__cta{color:var(--b4t-color-primary);font-weight:600;font-size:13px;white-space:nowrap}
.b4t-card__meta{display:flex;flex-wrap:wrap;gap:6px 12px;margin:0 0 10px;color:var(--b4t-color-muted);font:500 12px/1.3 var(--b4t-font-sans)}
.b4t-card__meta span{display:inline-flex;align-items:center;gap:5px}
.b4t-card__foot{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:auto;padding-top:10px;border-top:1px dashed var(--b4t-color-line)}
.b4t-card__year{color:var(--b4t-color-muted)}
/* Mã tài liệu nổi bật (yêu cầu team 2026-09-28): pill hổ phách */
.b4t-card__code{padding:3px 9px;border-radius:var(--b4t-radius-full);background:var(--b4t-color-accent);color:var(--b4t-color-on-accent);font-weight:700;letter-spacing:.02em}
.b4t-card__price{font:800 15px/1.1 var(--b4t-font-sans);color:var(--b4t-color-ink)}
.b4t-card__price .woocommerce-Price-currencySymbol{font-weight:600}
.b4t-badge-free{display:inline-flex;align-items:center;padding:4px 10px;border-radius:var(--b4t-radius-full);background:var(--b4t-color-success);color:#fff;font:700 12px/1.2 var(--b4t-font-sans)}
@media (max-width:1199px){.b4t-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:849px){.b4t-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Điện thoại: 2 cột thẻ gọn (team đổi 2026-10-01, mẫu sangkienkinhnghiem.net — thay 1 cột 2026-09-28) */
@media (max-width:600px){
	.b4t-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
	.b4t-grid .b4t-card__badges{inset:6px 6px auto}
	.b4t-grid .b4t-tag,.b4t-grid .b4t-filetype{padding:3px 7px;font-size:10px}
	.b4t-grid .b4t-filetype{display:none}
	.b4t-grid .b4t-card__body{padding:10px 10px 9px}
	.b4t-grid .b4t-card__title{margin-bottom:8px;font-size:13px;min-height:calc(3 * 1.4em);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
	.b4t-grid .b4t-card__meta{gap:4px 8px;margin-bottom:8px;font-size:11px}
	/* Mobile: Mã · lượt xem · năm luôn xếp dọc mỗi dòng 1 ý (team 2026-10-06 — trước lúc ngang lúc dọc tuỳ độ dài mã) */
	.b4t-card__meta{flex-direction:column;align-items:flex-start;flex-wrap:nowrap}
	.b4t-grid .b4t-card__meta svg{width:12px;height:12px}
	.b4t-grid .b4t-card__code{padding:2px 7px}
	.b4t-grid .b4t-card__foot{padding-top:8px;justify-content:flex-start}
	.b4t-grid .b4t-card__cta{font-size:12px;white-space:normal}
}
@media (prefers-reduced-motion:reduce){.b4t-card{transition:none}.b4t-card:hover{transform:none}}