.rccp-box{margin:36px 0;clear:both}
.rccp-heading{font-size:20px;line-height:1.3;margin:0 0 18px;padding:0 0 10px;border-bottom:2px solid #ececec;position:relative;font-weight:700}
.rccp-heading span{position:relative;display:inline-block}
.rccp-heading span:after{content:"";position:absolute;left:0;bottom:-12px;width:100%;height:2px;background:#c8a34a}

.rccp-grid{display:grid;grid-template-columns:repeat(var(--rccp-cols,3),minmax(0,1fr));gap:20px}

.rccp-item{min-width:0;display:flex;flex-direction:column}
.rccp-thumb{display:block;position:relative;overflow:hidden;border-radius:8px;background:#f2f2f2;aspect-ratio:16/10;margin-bottom:10px}
.rccp-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.rccp-item:hover .rccp-thumb img{transform:scale(1.06)}
.rccp-noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:700;color:#fff;background:linear-gradient(135deg,#c8a34a,#8a6d2f);text-transform:uppercase}

.rccp-body{display:flex;flex-direction:column;gap:6px}
.rccp-cat{display:inline-block;align-self:flex-start;font-size:11px;line-height:1;letter-spacing:.4px;text-transform:uppercase;font-weight:600;color:#8a6d2f;background:#faf4e6;padding:5px 9px;border-radius:4px;text-decoration:none}
.rccp-cat:hover{background:#c8a34a;color:#fff}
.rccp-title{font-size:15px;line-height:1.45;margin:0;font-weight:600}
.rccp-title a{color:#222;text-decoration:none;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rccp-title a:hover{color:#c8a34a}
.rccp-date{font-size:12px;color:#8b8b8b}

/* Skeleton khi đang tải AJAX */
.rccp-skeleton{display:grid;grid-template-columns:repeat(var(--rccp-cols,3),minmax(0,1fr));gap:20px}
.rccp-skeleton span{display:block;aspect-ratio:16/12;border-radius:8px;background:linear-gradient(90deg,#f2f2f2 25%,#e8e8e8 37%,#f2f2f2 63%);background-size:400% 100%;animation:rccp-sk 1.2s ease-in-out infinite}
@keyframes rccp-sk{0%{background-position:100% 50%}100%{background-position:0 50%}}
.rccp-ready{animation:rccp-fade .3s ease}
@keyframes rccp-fade{from{opacity:0}to{opacity:1}}

@media (max-width:1024px){.rccp-grid,.rccp-skeleton{grid-template-columns:repeat(min(var(--rccp-cols,3),3),minmax(0,1fr))}}
@media (max-width:767px){
  .rccp-grid,.rccp-skeleton{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .rccp-title{font-size:14px}
  .rccp-heading{font-size:18px}
}
@media (max-width:420px){.rccp-grid,.rccp-skeleton{grid-template-columns:1fr}}