.dcxpg-wrap{
	--dcxpg-green:#2d6a3e;
	--dcxpg-brown:#8a5a2b;
	--dcxpg-ink:#1f2420;
	--dcxpg-muted:#6b6f68;
}

/* ----- Tiêu đề khu vực ----- */
.dcxpg-head{
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:24px;
	margin-bottom:36px;
}
.dcxpg-head-text{max-width:820px}
.dcxpg-eyebrow{
	display:block;
	margin-bottom:10px;
	font-size:.875rem;
	font-weight:600;
	letter-spacing:.18em;
	text-transform:uppercase;
	color:var(--dcxpg-brown);
}
.dcxpg-heading{
	position:relative;
	display:block;
	margin:0 0 22px;
	padding:0 0 18px;
	/* cỡ chữ, font, màu: theo H2/H3... mặc định của website */
}
div.dcxpg-heading,span.dcxpg-heading,p.dcxpg-heading{
	font-size:2rem;
	line-height:1.2;
	font-weight:700;
	color:var(--dcxpg-ink);
}
.dcxpg-heading::after{
	content:"";
	position:absolute;
	left:0;bottom:0;
	width:84px;height:3px;
	border-radius:2px;
	background:var(--dcxpg-brown);
}
.dcxpg-desc{margin:0;font-size:1.125rem;line-height:1.6;color:var(--dcxpg-muted)}
.dcxpg-viewall{
	flex-shrink:0;
	font-size:.9375rem;
	font-weight:700;
	letter-spacing:.04em;
	text-transform:uppercase;
	text-decoration:none;
	color:var(--dcxpg-green);
	white-space:nowrap;
}
.dcxpg-viewall:hover{text-decoration:underline}

/* ----- Lưới ----- */
.dcxpg-grid{
	display:grid;
	gap:32px;
	grid-template-columns:repeat(var(--dcxpg-cols,3),minmax(0,1fr));
}
.dcxpg-cols-1{--dcxpg-cols:1}
.dcxpg-cols-2{--dcxpg-cols:2}
.dcxpg-cols-3{--dcxpg-cols:3}
.dcxpg-cols-4{--dcxpg-cols:4}
@media (max-width:1024px){
	.dcxpg-cols-3,.dcxpg-cols-4{--dcxpg-cols:2}
}
@media (max-width:640px){
	.dcxpg-grid[class]{--dcxpg-cols:1}
	.dcxpg-head{flex-direction:column;align-items:flex-start}
}

/* ----- Thẻ ----- */
.dcxpg-card{
	display:flex;
	flex-direction:column;
	background:#fff;
	border:1px solid rgba(0,0,0,.06);
	border-radius:18px;
	overflow:hidden;
	box-shadow:0 2px 10px rgba(30,40,30,.06);
	transition:transform .2s ease, box-shadow .2s ease;
}
.dcxpg-card:hover{
	transform:translateY(-3px);
	box-shadow:0 12px 28px rgba(30,40,30,.12);
}

.dcxpg-media{position:relative}
.dcxpg-thumb{display:block;aspect-ratio:8/5;overflow:hidden;background:#eef0ec}
.dcxpg-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.dcxpg-card:hover .dcxpg-thumb img{transform:scale(1.04)}
.dcxpg-noimg{display:block;width:100%;height:100%}

.dcxpg-badge{
	position:absolute;
	top:16px;left:18px;
	padding:7px 18px;
	border-radius:999px;
	background:var(--dcxpg-green);
	color:#fff;
	font-size:.8125rem;
	font-weight:700;
	letter-spacing:.04em;
	text-transform:uppercase;
	line-height:1.2;
	pointer-events:none;
}

.dcxpg-body{display:flex;flex-direction:column;flex:1;padding:24px 30px 28px}
.dcxpg-date{font-size:.8125rem;color:var(--dcxpg-muted);margin-bottom:6px}
.dcxpg-title{margin:0 0 14px;font-size:1.375rem;line-height:1.35;font-weight:700}
.dcxpg-title a{color:var(--dcxpg-ink);text-decoration:none}
.dcxpg-title a:hover{color:var(--dcxpg-green)}
.dcxpg-excerpt{margin:0 0 20px;font-size:1rem;line-height:1.7;color:var(--dcxpg-muted)}
.dcxpg-more{
	margin-top:auto;
	align-self:flex-start;
	font-size:.9375rem;
	font-weight:700;
	letter-spacing:.04em;
	text-transform:uppercase;
	text-decoration:none;
	color:var(--dcxpg-brown);
}
.dcxpg-more:hover{text-decoration:underline}
.dcxpg-empty{padding:16px;text-align:center;color:var(--dcxpg-muted)}