/* ── Variables ────────────────────────────────────────────────────────────── */
.bf-wrap {
	--bf-accent:    #2B2BE8;
	--bf-text:      #1A1A2E;
	--bf-muted:     #6B7280;
	--bf-border:    #E5E7EB;
	--bf-radius:    999px;
	--bf-card-r:    14px;
	--bf-badge-bg:  #EEF2FF;
	--bf-badge-txt: #2B2BE8;
	color: var(--bf-text);
}

.bf-wrap,
.bf-wrap * {
	font-family: "Noto Sans Thai", sans-serif;
}

/* ── Filter Buttons ───────────────────────────────────────────────────────── */
.bf-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-bottom: 40px;
}

.bf-filter-btn {
	display: inline-block;
	padding: 8px 22px;
	border: 1.5px solid var(--bf-border);
	border-radius: var(--bf-radius);
	font-size: 15px;
	font-weight: 500;
	color: var(--bf-text);
	background: #fff;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.18s, color 0.18s, background 0.18s;
	white-space: nowrap;
}

.bf-filter-btn:hover {
	border-color: var(--bf-accent);
	color: var(--bf-accent);
}

.bf-filter-btn.is-active {
	background: var(--bf-accent);
	border-color: var(--bf-accent);
	color: #fff;
}

.bf-filters a{
    font-family: "Manrope","Noto Sans Thai", sans-serif;    
} 

/* ── Loading State ────────────────────────────────────────────────────────── */
.bf-grid.is-loading {
	opacity: 0.45;
	pointer-events: none;
	transition: opacity 0.2s;
}

/* ── Post Grid ────────────────────────────────────────────────────────────── */
.bf-posts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin-bottom: 40px;
}

@media (max-width: 900px) {
	.bf-posts { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 580px) {
	.bf-posts { grid-template-columns: 1fr; }
}

/* ── Card ─────────────────────────────────────────────────────────────────── */
.bf-card {
	background: transparent;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Thumbnail — border-radius เท่านั้น ไม่มี border */
.bf-card-thumb-link {
	display: block;
	/*aspect-ratio: 16 / 9;*/
	overflow: hidden;
	background: #0D0D2B;
	border-radius: var(--bf-card-r);
}

.bf-card-thumb {
	width: 100%;
	height: 193px !important;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.bf-card:hover .bf-card-thumb {
	transform: scale(1.04);
}

.bf-card-thumb--empty {
	background: linear-gradient(135deg, #1A1A2E 0%, #0D0D2B 100%);
}

/* Body — border + border-radius */
.bf-card-body {
	padding: 20px 22px 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
	border: 1.5px solid var(--bf-border);
	border-radius: var(--bf-card-r);
	background: #fff;
	transition: box-shadow 0.2s;
}

.bf-card:hover .bf-card-body {
	box-shadow: 0 8px 28px rgba(43, 43, 232, 0.10);
}

.bf-card-date {
	font-size: 16px;
	color: #A0A7C0;
	font-weight: 400;
}

.bf-card-title {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.45;
	margin: 0;
}

.bf-card-title a {
	color: #565d73;
	text-decoration: none;
	transition: color 0.18s;
}

.bf-card-title a:hover {
	color: var(--bf-accent);
}

/* ── Category Badge ───────────────────────────────────────────────────────── */
.bf-badge {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 6px;
	background: var(--bf-badge-bg);
	color: var(--bf-badge-txt);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
	align-self: flex-start;
	transition: background 0.15s;
}

.bf-badge:hover {
	background: #dde4fd;
}

/* ── Pagination ───────────────────────────────────────────────────────────── */
.bf-pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}

.bf-page-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1.5px solid var(--bf-border);
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	color: var(--bf-text);
	text-decoration: none;
	transition: border-color 0.18s, color 0.18s, background 0.18s;
}

.bf-page-btn:hover {
	border-color: var(--bf-accent);
	color: var(--bf-accent);
}

.bf-page-btn.is-active {
	background: var(--bf-accent);
	border-color: var(--bf-accent);
	color: #fff;
}

/* ── No Posts ─────────────────────────────────────────────────────────────── */
.bf-no-posts {
	text-align: center;
	color: var(--bf-muted);
	padding: 60px 0;
}

/* ── Pagination extras ────────────────────────────────────────────────────── */
.bf-page-ellipsis {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	font-size: 14px;
	color: var(--bf-muted);
	user-select: none;
}

.bf-page-btn.is-disabled {
	opacity: 0.35;
	pointer-events: none;
	cursor: default;
}

.bf-page-prev,
.bf-page-next {
	font-size: 16px;
}