/*
 * Lưới showcase tài liệu, shortcode [tfa_leadgrid].
 *
 * Bám đúng bảng màu và bo góc của section landing page, để thay bản HTML tĩnh bằng
 * shortcode mà mắt thường không thấy khác.
 *
 * !important chỉ đặt ở những thuộc tính Divi Builder reset bằng selector ID
 * (`#et-boc .et-l ...` ép display:block và margin:0). ID thắng class nên không có
 * cách nào khác. Mọi thuộc tính còn lại để bình thường cho dễ ghi đè.
 */

.tlm-grid-root {
	--tlmg-brand: #1A5FE8;
	--tlmg-brand-dk: #1248C2;
	--tlmg-brand-soft: rgba(26, 95, 232, .10);
	--tlmg-brand-line: rgba(26, 95, 232, .22);
	--tlmg-ink: #0B1A35;
	--tlmg-body: #2D4270;
	--tlmg-muted: #5B7290;
	--tlmg-tint: #F4F8FF;
	--tlmg-line: rgba(26, 95, 232, .14);
	--tlmg-shadow: 0 8px 30px rgba(11, 26, 53, .06);
	--tlmg-shadow-lg: 0 20px 50px rgba(11, 26, 53, .10);
	--tlmg-cols: 4;

	font-size: 16px;
	line-height: 1.7;
	color: var(--tlmg-body);
}

.tlm-grid-cols-1 { --tlmg-cols: 1 }
.tlm-grid-cols-2 { --tlmg-cols: 2 }
.tlm-grid-cols-3 { --tlmg-cols: 3 }
.tlm-grid-cols-4 { --tlmg-cols: 4 }
.tlm-grid-cols-5 { --tlmg-cols: 5 }
.tlm-grid-cols-6 { --tlmg-cols: 6 }

.tlm-grid-root * {
	box-sizing: border-box;
}

/* ---- đầu mỗi series ---- */

.tlm-grid-root .tlm-grid-serie + .tlm-grid-serie {
	margin-top: clamp(34px, 4vw, 50px);
}

.tlm-grid-root .tlm-grid-shead {
	display: flex !important;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 0 20px !important;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--tlmg-line);
}

.tlm-grid-root .tlm-grid-sno {
	display: inline-block !important;
	background: var(--tlmg-brand-soft);
	border: 1px solid var(--tlmg-brand-line);
	color: var(--tlmg-brand);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 6px 13px;
	border-radius: 100px;
	white-space: nowrap;
}

.tlm-grid-root .tlm-grid-stitle {
	flex: 1 1 260px;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--tlmg-ink);
	font-size: 21px;
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -.02em;
}

.tlm-grid-root .tlm-grid-scount {
	display: inline-block !important;
	color: var(--tlmg-muted);
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}

/* ---- lưới thẻ ---- */

.tlm-grid-root .tlm-grid-cards {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	margin: 0 !important;
}

/*
 * flex-basis PHẢI suy ra từ --tlmg-cols. Một số px cứng (bản 1.19.0 để 220px) biến
 * `columns` thành cái trần bề rộng chứ không phải số cột: flex nhồi bao nhiêu thẻ vừa
 * 220px vào một hàng rồi mới kéo giãn tới trần, nên columns="4" với 10 tài liệu ra
 * 5 cột ở 1440, 6 thẻ nhỏ rồi 4 thẻ to 393px ở 1920, và 9 + 1 thẻ 529px ở 2560.
 * Hai cỡ thẻ trên cùng một lưới, chỉ ảnh render mới thấy. Basis bằng đúng max-width
 * thì hàng luôn đủ và chỉ đủ --tlmg-cols thẻ. Mọi media query bên dưới đổi cả hai.
 */
.tlm-grid-root .tlm-gcard {
	flex: 1 1 calc((100% - (var(--tlmg-cols) - 1) * 20px) / var(--tlmg-cols));
	max-width: calc((100% - (var(--tlmg-cols) - 1) * 20px) / var(--tlmg-cols));
	display: flex !important;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--tlmg-line);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: var(--tlmg-shadow);
	text-decoration: none !important;
	padding: 0 !important;
	margin: 0 !important;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.tlm-grid-root .tlm-gcard:hover {
	transform: translateY(-4px);
	box-shadow: var(--tlmg-shadow-lg);
	border-color: var(--tlmg-brand-line);
}

/*
 * min-height:0 bắt buộc. Thiếu nó thì min-height mặc định của flex item thắng
 * aspect-ratio và ảnh bìa đội khung vuông lên cao hơn bề rộng thẻ.
 */
.tlm-grid-root .tlm-gcard-img {
	display: block !important;
	width: 100%;
	aspect-ratio: 1 / 1;
	min-height: 0;
	background: var(--tlmg-tint);
	border-bottom: 1px solid var(--tlmg-line);
	overflow: hidden;
	margin: 0 !important;
}

.tlm-grid-root .tlm-gcard-img img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	margin: 0 !important;
	border-radius: 0;
}

.tlm-grid-root .tlm-gcard-body {
	display: flex !important;
	flex-direction: column;
	flex: 1;
	padding: 16px 16px 18px;
	gap: 7px;
	margin: 0 !important;
}

.tlm-grid-root .tlm-gcard-tap {
	display: block !important;
	color: var(--tlmg-brand);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	margin: 0 !important;
}

.tlm-grid-root .tlm-gcard-t {
	display: block !important;
	flex: 1;
	color: var(--tlmg-ink);
	font-size: 16px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -.01em;
	margin: 0 !important;
}

.tlm-grid-root .tlm-gcard-cta {
	display: inline-flex !important;
	align-items: center;
	gap: 7px;
	margin: 4px 0 0 !important;
	color: var(--tlmg-brand-dk);
	font-size: 13px;
	font-weight: 800;
	transition: gap .2s;
}

/* mũi tên vẽ bằng ký tự, không dùng Font Awesome để lưới không phụ thuộc thư viện icon */
.tlm-grid-root .tlm-gcard-cta::after {
	content: '\2192';
	font-weight: 800;
}

.tlm-grid-root .tlm-gcard:hover .tlm-gcard-cta {
	gap: 12px;
}

.tlm-grid-empty {
	color: #5B7290;
	font-size: 13px;
}

/* ---- điểm gãy ---- */

@media (max-width: 1100px) {
	.tlm-grid-root .tlm-gcard {
		flex-basis: calc((100% - 2 * 20px) / 3);
		max-width: calc((100% - 2 * 20px) / 3);
	}
}

@media (max-width: 700px) {
	.tlm-grid-root .tlm-gcard {
		flex-basis: calc((100% - 20px) / 2);
		max-width: calc((100% - 20px) / 2);
	}
}

/*
 * Điện thoại: thẻ nằm ngang, ảnh bìa vuông 86px bên trái. Giữ aspect-ratio 1/1 và
 * align-self:flex-start, nếu để ảnh kéo hết chiều cao thẻ thì object-fit:cover cắt
 * mất dải tiêu đề nằm ở mép trên ảnh bìa.
 */
@media (max-width: 640px) {
	.tlm-grid-root .tlm-grid-cards { gap: 12px }

	.tlm-grid-root .tlm-gcard {
		flex: 1 1 100%;
		max-width: 100%;
		flex-direction: row;
		align-items: flex-start;
		border-radius: 14px;
	}

	.tlm-grid-root .tlm-gcard:hover { transform: none }

	.tlm-grid-root .tlm-gcard-img {
		width: 86px;
		flex: 0 0 86px;
		align-self: flex-start;
		margin: 12px 0 12px 12px !important;
		border-bottom: 0;
		border: 1px solid var(--tlmg-line);
		border-radius: 10px;
	}

	.tlm-grid-root .tlm-gcard-body { padding: 12px 13px; gap: 5px }
}

@media (prefers-reduced-motion: reduce) {
	.tlm-grid-root .tlm-gcard { transition-duration: .001ms }
}