/* kfbeta16 — recs (cộng đồng vừa xem)
   Lưới card, tiêu đề trang: xem main.css */

.ext-json-thumb img { opacity: 0; transition: opacity .3s ease, transform .35s ease; }
.ext-json-thumb img.loaded { opacity: 1; }

/* Badge tên người xem */
.watcher-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 5px;
    max-width: calc(100% - 16px);
    padding: 3px 8px;
    background: rgba(8, 9, 12, .82);
    border: 0;
    border-radius: var(--r-sm);
    color: var(--text1);
    font-size: var(--fs-xs);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.watcher-icon { color: var(--green); font-size: 9px; }

.ext-json-meta { justify-content: space-between; }
.view-time { color: var(--accent2); font-weight: 600; }

/* Phân trang */
#pagination-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 28px;
}
.page-info-text { margin: 0 8px; color: var(--text2); font-size: 13px; }

/* Skeleton */
.skeleton {
    background: linear-gradient(90deg, var(--bg3) 25%, var(--bg4) 50%, var(--bg3) 75%);
    background-size: 200% 100%;
    animation: kf-shimmer 1.4s infinite linear;
}
.skeleton-card { background: var(--bg2); border-radius: var(--radius); overflow: hidden; }
.skeleton-thumb { display: block; width: 100%; aspect-ratio: var(--thumb-ratio); }
.skeleton-text { width: 75%; height: 12px; margin: 12px 10px 16px; border-radius: 4px; }