/* GRID */

.capl-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:40px;
	margin-bottom:64px;
}

/* tablet */
@media (min-width:768px){
    .capl-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

/* desktop */
@media (min-width:1024px){
    .capl-grid{
        grid-template-columns:repeat(3,1fr);
    }
	
}

/* CARD */

.cap-item{
display:flex;
flex-direction:column;
}

.cap-item a{
display:block;
text-decoration:none;
color:inherit;
}

/* IMAGE */

.cap-thumb img{
width:100%;
aspect-ratio:16/10;
object-fit:cover;
border-radius:12px;
margin-bottom:32px;
}

.content-box{
	display: flex;
	gap: 12px;
	flex-direction: column;
}

/* META */

.cap-meta{
font-size:14px;
color:#B18F4F;
margin-bottom:8px;
}

.cap-dot{
margin:0 6px;
}

/* TITLE */

.cap-title{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:16px;
font-size:24px;
font-weight:600;
line-height:28px;

color:#152B1C;

margin-bottom:8px;
}

.cap-title-text{
flex:1;
}

.cap-arrow{
flex-shrink:0;
display:flex;
align-items:center;
}

/* EXCERPT */

.cap-excerpt{
font-size:16px;
line-height:1.5;
color:#666;
}

/* PAGINATION */

.capl-pagination{
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
gap:20px;
width:100%;
margin-top:30px;
padding-top: 20px;
border-top: solid 1px #fff;
}

/* PREVIOUS */

.capl-prev{
justify-self:start;
}

/* NEXT */

.capl-next{
justify-self:end;
}

/* PREV + NEXT LINKS */

.capl-prev a,
.capl-next a{

display:flex;
align-items:center;
gap:8px;

text-decoration:none;
color:#152B1C;

white-space:nowrap;

}

/* DISABLED */

.capl-prev a.disabled,
.capl-next a.disabled{

opacity:.4;
pointer-events:none;

}

/* ICON */

.capl-icon{
display:flex;
align-items:center;
}

.capl-icon svg{
width:18px;
height:18px;
display:block;
}

/* PAGE NUMBERS WRAPPER */

.capl-pages{

display:flex;
gap:10px;
justify-content:center;
align-items:center;

}

/* PAGE BUTTON */

.capl-pages a{

width:40px;
height:40px;

display:flex;
align-items:center;
justify-content:center;

text-decoration:none;

color:#152B1C;
opacity:.7;

}

/* ACTIVE PAGE */

.capl-pages a.active{

background:#fff;
border-radius:8px;

color:#B18F4F;
opacity:1;

}

/* DOTS */

.capl-dots{
padding:0 6px;
color:#999;
}

/* LOADING SKELETON */

.capl-loading{
position:relative;
}

.capl-loading:after{

content:"";
position:absolute;
inset:0;

background:linear-gradient(
90deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,.6) 50%,
rgba(255,255,255,0) 100%
);

animation:capl-loading 1.2s infinite;

}

@keyframes capl-loading{

0%{
transform:translateX(-100%);
}

100%{
transform:translateX(100%);
}

}

/* TAGS */

.cap-tags{
display:flex;
flex-wrap:wrap;
gap:8px;
}

.cap-tags a{
font-size:14px;
line-height:1;
padding:6px 10px;
background:#f3f3f3;
border-radius:16px;
text-decoration:none;
color:#152B1C;
transition:.2s;
}

.cap-tags a:hover{
background:#B18F4F;
color:#fff;
}

/* ================================================
   MOBILE: max-width 767px
   ================================================ */

@media (max-width:767px){

/* 2 cột trên mobile */
.capl-grid{
    grid-template-columns:repeat(2,1fr);
    gap:16px;
}
	
.content-box{
	gap: 0px;
}

/* Font sizes */
.cap-meta{
font-size:12px;
}

.cap-title{
font-size:16px;
line-height:1.3;
}

.cap-excerpt{
font-size:12px;
}

.cap-tags a{
font-size:12px;
}

/* Ẩn chữ Previous / Next, chỉ giữ mũi tên */
.capl-prev a > span:not(.capl-icon),
.capl-next a > span:not(.capl-icon){
display:none;
}

}