/* =============================================================
   Content Showcase Pro — Frontend CSS  v1.4.0
   ============================================================= */

.csp-wrapper {
    --csp-accent:   #6366f1;
    --csp-radius:   12px;
    --csp-columns:  3;
    --csp-ratio:    16 / 9;
    --csp-gap:      1.25rem;
    --csp-card-bg:  #ffffff;
    --csp-text:     #1e293b;
    --csp-muted:    #64748b;
    --csp-border:   #e2e8f0;
    --csp-shadow:   0 2px 12px rgba(0,0,0,.07);
    --csp-shadow-h: 0 10px 32px rgba(0,0,0,.14);
    --csp-trans:    .26s cubic-bezier(.4,0,.2,1);
    box-sizing: border-box;
    width: 100%;
}
.csp-wrapper *, .csp-wrapper *::before, .csp-wrapper *::after { box-sizing: inherit; }

.csp-section-title {
    font-size: 1.4rem; font-weight: 700; color: var(--csp-text);
    margin: 0 0 1.25rem; padding-bottom: .5rem;
    border-bottom: 3px solid var(--csp-accent); display: inline-block;
}

/* =============================================================
   GRID — dùng inline style cho grid-template-columns
   (CSS var không hỗ trợ !important nên inject trực tiếp từ PHP)
   ============================================================= */
.csp-grid {
    display: grid;
    /* fallback — sẽ bị override bởi inline style từ PHP */
    grid-template-columns: repeat(3, 1fr);
    gap: var(--csp-gap);
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}
@media (max-width: 1024px) {
    .csp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .csp-grid { grid-template-columns: 1fr; }
}

/* =============================================================
   LIST — flex column, card nằm ngang (thumb trái + text phải)
   KHÔNG collapse thành grid ở bất kỳ viewport nào
   ============================================================= */
.csp-list {
    display: flex;
    flex-direction: column;
    gap: var(--csp-gap);
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}
.csp-list .csp-item-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: .75rem;
    height: auto;
}
.csp-list .csp-card-thumb {
    flex: 0 0 130px !important;
    width: 130px !important;
    min-width: 130px !important;
    aspect-ratio: 4/3 !important;
    /* Ghi đè --csp-ratio để giữ tỷ lệ cố định */
    height: auto;
}
.csp-list .csp-card-body {
    flex: 1 !important;
    min-width: 0;
    padding: .1rem 0 .1rem !important;
}
.csp-list .csp-card-cat {
    position: static !important;
    display: inline-block;
    margin-bottom: .3rem;
}
/* Mobile: thu nhỏ thumb nhưng VẪN GIỮ layout ngang */
@media (max-width: 480px) {
    .csp-list .csp-card-thumb {
        flex: 0 0 90px !important;
        width: 90px !important;
        min-width: 90px !important;
    }
}

/* =============================================================
   MASONRY
   ============================================================= */
.csp-masonry {
    columns: var(--csp-columns);
    column-gap: var(--csp-gap);
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}
@media (max-width: 1024px) { .csp-masonry { columns: 2; } }
@media (max-width: 600px)  { .csp-masonry { columns: 1; } }
.csp-masonry .csp-item { break-inside: avoid; margin-bottom: var(--csp-gap); }

/* =============================================================
   CARD BASE
   ============================================================= */
.csp-item { position: relative; }
.csp-item-card {
    background: var(--csp-card-bg);
    border-radius: var(--csp-radius);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform var(--csp-trans), box-shadow var(--csp-trans), border-color var(--csp-trans);
}

/* Card Styles */
.csp-style-shadow .csp-item-card { box-shadow: var(--csp-shadow); }
.csp-style-shadow .csp-item-card:hover { transform: translateY(-4px); box-shadow: var(--csp-shadow-h); }
.csp-style-border .csp-item-card { border: 2px solid var(--csp-border); }
.csp-style-border .csp-item-card:hover { border-color: var(--csp-accent); transform: translateY(-3px); }
.csp-style-flat .csp-item-card { background: #f8fafc; }
.csp-style-flat .csp-item-card:hover { background: #f1f5f9; transform: translateY(-2px); }
.csp-style-ghost .csp-item-card { background: rgba(255,255,255,.6); border: 1.5px solid var(--csp-border); backdrop-filter: blur(6px); }
.csp-style-ghost .csp-item-card:hover { background: rgba(99,102,241,.05); border-color: var(--csp-accent); transform: translateY(-3px); }
.csp-style-minimal .csp-item-card { background: transparent; border-radius: 0; border-bottom: 1px solid var(--csp-border); }
.csp-style-minimal .csp-card-thumb { border-radius: 8px !important; }
.csp-style-minimal .csp-item-card:hover { border-bottom-color: var(--csp-accent); }

/* =============================================================
   THUMBNAIL
   ============================================================= */
.csp-card-thumb {
    display: block;
    overflow: hidden;
    aspect-ratio: var(--csp-ratio);
    background: #f1f5f9;
    position: relative;
    flex-shrink: 0;
    text-decoration: none;
    width: 100%;
}
.csp-card-thumb .csp-thumb-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .5s cubic-bezier(.4,0,.2,1);
    /* Reset theme img defaults */
    max-width: none;
    border: none;
    padding: 0;
    margin: 0;
    border-radius: 0;
}
.csp-item-card:hover .csp-thumb-img { transform: scale(1.05); }

.csp-thumb-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.28) 0%, transparent 55%);
    opacity: 0; transition: opacity var(--csp-trans); pointer-events: none;
}
.csp-item-card:hover .csp-thumb-overlay { opacity: 1; }

.csp-no-thumb {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
}
.csp-thumb-placeholder svg { width: 40px; height: 40px; color: #94a3b8; opacity: .4; }

/* =============================================================
   CATEGORY BADGE
   ============================================================= */
.csp-card-cat {
    position: absolute; top: .6rem; left: .6rem; z-index: 3;
    background: var(--csp-accent); color: #fff;
    font-size: .63rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    padding: .15rem .5rem; border-radius: 4px; text-decoration: none; line-height: 1.5;
    transition: opacity var(--csp-trans);
}
.csp-card-cat:hover { opacity: .82; color: #fff; text-decoration: none; }
.csp-style-minimal .csp-card-cat { position: static; display: inline-block; margin-bottom: .3rem; }

/* =============================================================
   CARD BODY
   ============================================================= */
.csp-card-body {
    padding: .6rem .85rem .85rem;
    flex: 1; display: flex; flex-direction: column; gap: .25rem;
}
.csp-style-minimal .csp-card-body { padding: .5rem 0 .75rem; }

.csp-card-meta { display: flex; flex-wrap: wrap; gap: .45rem; font-size: .72rem; color: var(--csp-muted); align-items: center; }
.csp-meta-date, .csp-meta-author { display: inline-flex; align-items: center; gap: .25rem; }

.csp-card-title { margin: 0; font-size: .97rem; font-weight: 700; line-height: 1.4; }
.csp-card-title a { color: var(--csp-text); text-decoration: none; transition: color var(--csp-trans); }
.csp-card-title a:hover { color: var(--csp-accent); }

.csp-card-excerpt {
    margin: 0; font-size: .82rem; color: var(--csp-muted); line-height: 1.55;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.csp-read-more {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .76rem; font-weight: 600; color: var(--csp-accent);
    text-decoration: none; margin-top: auto; padding-top: .3rem;
    transition: gap var(--csp-trans);
}
.csp-read-more:hover { gap: .5rem; color: var(--csp-accent); text-decoration: none; }
.csp-read-more svg { transition: transform var(--csp-trans); flex-shrink: 0; }
.csp-read-more:hover svg { transform: translateX(3px); }

.csp-no-posts {
    padding: 1.5rem; text-align: center; color: var(--csp-muted);
    background: #f8fafc; border-radius: var(--csp-radius); border: 1px dashed var(--csp-border);
}

/* =============================================================
   ANIMATIONS
   ============================================================= */
.csp-anim-fade  .csp-item { opacity: 0; animation: cspFade  .45s ease forwards; }
.csp-anim-slide .csp-item { opacity: 0; animation: cspSlide .45s ease forwards; }
.csp-anim-zoom  .csp-item { opacity: 0; animation: cspZoom  .4s  ease forwards; }
.csp-anim-flip  .csp-item { opacity: 0; animation: cspFlip  .45s ease forwards; }

@keyframes cspFade  { to { opacity: 1; } }
@keyframes cspSlide { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
@keyframes cspZoom  { from { opacity:0; transform:scale(.93); } to { opacity:1; transform:scale(1); } }
@keyframes cspFlip  { from { opacity:0; transform:rotateX(-12deg) translateY(18px); } to { opacity:1; transform:none; } }

.csp-item:nth-child(1)   { animation-delay: .04s; }
.csp-item:nth-child(2)   { animation-delay: .09s; }
.csp-item:nth-child(3)   { animation-delay: .14s; }
.csp-item:nth-child(4)   { animation-delay: .19s; }
.csp-item:nth-child(5)   { animation-delay: .24s; }
.csp-item:nth-child(6)   { animation-delay: .29s; }
.csp-item:nth-child(7)   { animation-delay: .34s; }
.csp-item:nth-child(n+8) { animation-delay: .38s; }

/* =============================================================
   WIDGET — compact + reset theme styles
   ============================================================= */
.csp-widget-wrap .csp-wrapper { --csp-gap: .65rem; }
.csp-widget-wrap .csp-card-title { font-size: .87rem; }
.csp-widget-wrap .csp-card-excerpt { font-size: .77rem; -webkit-line-clamp: 2; }
.csp-widget-wrap .csp-card-meta { font-size: .68rem; }

/* Reset theme ul/li/img trong widget area */
.csp-widget-wrap .csp-grid,
.csp-widget-wrap .csp-list,
.csp-widget-wrap .csp-masonry {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.csp-widget-wrap .csp-item {
    list-style: none !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}
.csp-widget-wrap .csp-card-title a {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}
.csp-widget-wrap .csp-thumb-img {
    max-width: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

/* Widget list: thumb nhỏ hơn */
.csp-widget-wrap .csp-list .csp-card-thumb {
    flex: 0 0 85px !important;
    width: 85px !important;
    min-width: 85px !important;
}
.csp-widget-wrap .csp-list .csp-card-body {
    padding: .05rem 0 .1rem !important;
    gap: .12rem;
}
@media (max-width: 480px) {
    .csp-widget-wrap .csp-list .csp-card-thumb {
        flex: 0 0 70px !important;
        width: 70px !important;
        min-width: 70px !important;
    }
}

/* =============================================================
   RESPONSIVE FIX — mobile portrait & landscape
   ============================================================= */

/* Grid: mobile dọc → 1 cột, mobile ngang → 2 cột tối đa */
@media (max-width: 480px) {
    .csp-grid { grid-template-columns: 1fr !important; }
}
@media (min-width: 481px) and (max-width: 768px) {
    .csp-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* List: LUÔN giữ layout ngang dù ở bất kỳ viewport nào
   Thumbnail cố định width, không bao giờ full-width */
@media (max-width: 480px) {
    /* Portrait mobile */
    .csp-list .csp-item-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
    }
    .csp-list .csp-card-thumb {
        flex: 0 0 80px !important;
        width: 80px !important;
        min-width: 80px !important;
        max-width: 80px !important;
        aspect-ratio: 1/1 !important;
    }
}
@media (min-width: 481px) and (max-width: 768px) {
    /* Landscape mobile / tablet nhỏ */
    .csp-list .csp-card-thumb {
        flex: 0 0 110px !important;
        width: 110px !important;
        min-width: 110px !important;
    }
}

/* Widget trong footer: grid responsive */
@media (max-width: 480px) {
    .csp-widget-wrap .csp-grid,
    .widget .csp-grid {
        grid-template-columns: 1fr !important;
    }
    .csp-widget-wrap .csp-list .csp-card-thumb {
        flex: 0 0 70px !important;
        width: 70px !important;
        min-width: 70px !important;
    }
}
@media (min-width: 481px) and (max-width: 768px) {
    .csp-widget-wrap .csp-grid,
    .widget .csp-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}