.dnpps-container{

    max-width:1400px;

    margin:auto;

    padding:20px;

}
.dnpps-container h2{
      text-align: center;
      margin:auto;
        font-size:20px;


}
.dnpps-container h4{
    text-align: center;
    font-size:16px;
    margin:auto;

}

.dnpps-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;
    align-items: stretch;

}

.dnpps-card{
    display: flex;
    background:#fff;
    flex-direction: column;
    border-radius:10px;

    overflow:hidden;
    text-decoration: none;
    color: inherit;
    box-shadow:0 5px 15px rgba(0,0,0,.08);

    transition:.3s;

}

.dnpps-card:hover{

    transform:translateY(-5px);

}

.dnpps-card img{

    width:100%;

    aspect-ratio: 16 / 9;
    object-fit: cover;

}

.dnpps-card h3{

    padding:15px;

    font-size:20px;

    margin:0;

    min-height:70px;

}

.dnpps-excerpt{

    padding:0 15px;

    font-size:13px;

    line-height:1.6;

    height:60px;

    overflow:hidden;
    text-align: center;
    color: #1877F2;
    padding: 0 15px 15px;
}
.dnpps-card {
    transition: 0.25s ease;
    will-change: transform;
}

.dnpps-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}
.dnpps-btn{

    display:block;

    margin:20px;

    padding:10px;

    text-align:center;

    background:#0a7b43;

    color:#fff;

    text-decoration:none;

    border-radius:6px;

}

.dnpps-btn:hover{

    background:#086534;

    color:#fff;

}

@media(max-width:992px){

    .dnpps-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:600px){

    .dnpps-grid{

        grid-template-columns:1fr;

    }

}
.dnpps-filter{
    text-align:center;
    margin-bottom:25px;
}

.filter-btn{
    padding:10px 18px;
    margin:5px;
    border:none;
    background:#eee;
    cursor:pointer;
    border-radius:20px;
    transition:.3s;
    font-size:15px;
}

.filter-btn.active{
    background:#0a7b43;
    color:#fff;
}

.filter-btn:hover{
    background:#0a7b43;
    color:#fff;
}
.dnpps-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* hover effect */
.dnpps-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 25px rgba(0,0,0,.12);
    transition: 0.3s;
}

/* ป้องกัน text link สีฟ้า */
.dnpps-card h3 {
    color: #222;
}

.dnpps-card:hover h3 {
    color: #0a7b43;
}