:root{
	--bg:#fbf8f3;
	--card:#fffef9;
	--muted:#6b7280;
	--text:#0b1220;
	--accent:#b91c1c;
	--gap-rows:36px;
	--gap-cols:28px;
	--radius:18px;
	--card-pad:16px;
	--input-h:40px;
	--base-font:15px;
}

html{font-size:var(--base-font);}

body{
	font-family:Prompt,system-ui,Arial,sans-serif;
	margin:0;
	padding-top:0; /* removed extra top padding */
	background:var(--bg);
	color:var(--text);
	line-height:1.45;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

.sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }

.container{ 
	max-width:1100px; 
	margin:18px auto 56px; 
	padding:0 18px; 
}

.kps-article-list{
	display:grid;
	grid-template-columns:1fr;
	gap:var(--gap-rows) var(--gap-cols);
	align-items:start;
	align-content:start;
}
@media(min-width:720px){ .kps-article-list{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1100px){ .kps-article-list{ grid-template-columns:repeat(3,1fr); } }

.kps-article{
	background:var(--card);
	padding:var(--card-pad);
	border-radius:var(--radius);
	border:1px solid rgba(0,0,0,0.04);
	box-shadow:0 10px 24px rgba(11,18,32,0.06);
	display:flex; flex-direction:column; transition:transform .15s ease,box-shadow .15s ease;
	height:100%; font-size:0.95rem; min-height:220px; overflow:visible;
}
.kps-article:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(11,18,32,0.08); }

.kps-article-image{
	width:100%; aspect-ratio:4/3; object-fit:cover;
	border-radius:12px; margin-bottom:14px; background:#f0ece6;
	box-shadow:inset 0 1px 0 rgba(255,255,255,0.6);
}

.kps-article h2{ font-size:1rem; margin:0 0 8px; font-weight:600; line-height:1.2 }
.kps-article .meta{ font-size:0.85rem; color:var(--muted); margin-bottom:8px; }

.kps-article p{
	margin:0;
	color:#2b2f37;
	font-size:0.95rem;
	line-height:1.4;

	/* WebKit clamp */
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:3;
	line-clamp:3;

	/* fallback for other browsers */
	overflow:hidden;
	text-overflow:ellipsis;
	max-height:calc(1.4em * 3);

	margin-bottom:12px;
}

.kps-article .read-more{ margin-top:auto; color:var(--accent); font-weight:600; font-size:0.9rem; text-decoration:none; }

/* search-bar grid */
.search-bar{
	display:grid;
	grid-template-columns: 1fr 140px 140px 140px auto;
	gap:12px;
	align-items:center;
	background:#fff;
	padding:10px;
	border-radius:12px;
	border:1px solid rgba(0,0,0,0.04);
	box-shadow:0 8px 18px rgba(11,18,32,0.03);
	margin:12px 0 20px;
	z-index:1;
}
.search-bar .control{ display:block; }
.search-bar .control.search{ position:relative; width:100%; }
.search-bar .search-icon{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:#9aa0a6; font-size:14px; pointer-events:none; }

.search-bar input[type="text"],
.search-bar select,
.search-bar input[type="date"]{
	height:var(--input-h);
	padding:8px 12px;
	border-radius:10px;
	border:1px solid rgba(0,0,0,0.06);
	font-size:0.95rem;
	background:#fff;
	box-sizing:border-box;
	width:100%;
}
.search-bar .control.search input[type="text"]{ padding-left:44px; }

.search-bar .actions{
	display:flex;
	gap:10px;
	align-items:center;
	justify-self:end;
	min-width:120px;
}
.search-bar .actions .btn-search,
.search-bar .actions .btn-clear{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:64px;
	height:var(--input-h);
	padding:0 14px;
	border-radius:10px;
	font-weight:700;
	font-size:0.95rem;
	cursor:pointer;
	box-sizing:border-box;
}
.search-bar .actions .btn-search{
	background:var(--accent);
	color:#fff;
	border:1px solid rgba(0,0,0,0.06);
	box-shadow:0 6px 14px rgba(185,28,28,0.08);
}
.search-bar .actions .btn-clear{
	background:transparent;
	color:var(--text);
	border:1px solid rgba(0,0,0,0.12);
}

@media (max-width:1000px){
	.search-bar{ grid-template-columns: 1fr 120px 120px 120px auto; }
}
@media (max-width:760px){
	.search-bar{ grid-template-columns: 1fr; }
	.search-bar .control.search{ order:0; }
	.search-bar .control, .search-bar .actions{ width:100%; }
	.search-bar .actions{ justify-content:flex-end; }
	.search-bar .actions .btn-search, .search-bar .actions .btn-clear{ min-width:0; width:auto; }
}

#noResults{ display:none; margin-top:12px; color:var(--accent); font-weight:600; }

/* pagination */
.pagination{ display:flex; gap:12px; justify-content:center; align-items:center; margin:28px 0 48px; flex-wrap:wrap; }
.pagination .page-btn{
	min-width:40px; height:40px; padding:0 12px; border-radius:10px; border:1px solid rgba(0,0,0,0.06);
	background:#fff; cursor:pointer; font-weight:600; color:var(--text); box-shadow:0 8px 18px rgba(11,18,32,0.04);
}
.pagination .page-btn.active{ background:var(--accent); color:#fff; border-color:rgba(0,0,0,0.04); box-shadow:0 10px 26px rgba(185,28,28,0.12); }

@media(max-width:560px){
	.container{ padding:0 12px; margin:14px auto 40px; }
	.sub-main-content{ padding:20px 0 20px; }
	.search-bar{ gap:8px; padding:10px; }
	.search-bar .control.search{ flex-basis:100%; }
	.kps-article{ padding:12px; min-height:unset; }
	.kps-article-image{ aspect-ratio:3/2; border-radius:10px; }
}

/* Sub main content (area between main and footer) */
.sub-main-content{
	/* เพิ่ม top padding เพื่อเว้นระยะจาก main ให้ชัดเจน */
	padding:36px 0 28px;
	background:transparent;
	display:flex;
	justify-content:center;
	align-items:center;
}
.sub-main-content .sub-actions{
	width:100%;
	max-width:1100px;
	padding:0 18px;
	display:flex;
	justify-content:center;
	align-items:center;
}

/* ensure pagination stays visually separated */
.sub-main-content .pagination{
	margin:0; /* pagination margin now controlled by this container */
}