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

/* ---------- Light mode defaults ---------- */
.csp-wrapper {
    --csp-accent:      #6366f1;
    --csp-radius:      12px;
    --csp-columns:     3;
    --csp-ratio:       16 / 9;
    --csp-gap:         1.25rem;
    /* Color-scheme aware via CSS variables — overridden in dark mode below */
    --csp-card-bg:     #ffffff;
    --csp-card-flat:   #f8fafc;
    --csp-card-ghost:  rgba(255,255,255,.6);
    --csp-text:        #1e293b;
    --csp-muted:       #64748b;
    --csp-border:      #e2e8f0;
    --csp-thumb-bg:    #f1f5f9;
    --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%;
}

/* ---------- Dark mode — override color variables ---------- */
/* Dùng :where() để specificity = 0, dễ override */
@media (prefers-color-scheme: dark) {
    .csp-wrapper {
        --csp-card-bg:    transparent;
        --csp-card-flat:  rgba(255,255,255,.06);
        --csp-card-ghost: rgba(255,255,255,.08);
        --csp-text:       inherit;
        --csp-muted:      rgba(255,255,255,.6);
        --csp-border:     rgba(255,255,255,.15);
        --csp-thumb-bg:   rgba(255,255,255,.08);
        --csp-shadow:     0 2px 12px rgba(0,0,0,.35);
        --csp-shadow-h:   0 10px 32px rgba(0,0,0,.5);
    }
}

/* Hỗ trợ theme tự set dark mode qua class (không dùng prefers-color-scheme) */
.dark .csp-wrapper,
.dark-mode .csp-wrapper,
[data-theme="dark"] .csp-wrapper,
[data-color-scheme="dark"] .csp-wrapper,
body.dark .csp-wrapper,
body.dark-mode .csp-wrapper,
body[data-theme="dark"] .csp-wrapper {
    --csp-card-bg:    transparent;
    --csp-card-flat:  rgba(255,255,255,.06);
    --csp-card-ghost: rgba(255,255,255,.08);
    --csp-text:       inherit;
    --csp-muted:      rgba(255,255,255,.6);
    --csp-border:     rgba(255,255,255,.15);
    --csp-thumb-bg:   rgba(255,255,255,.08);
    --csp-shadow:     0 2px 12px rgba(0,0,0,.35);
    --csp-shadow-h:   0 10px 32px rgba(0,0,0,.5);
}

.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
   ============================================================= */
.csp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* fallback — overridden by scoped <style> */
    gap: var(--csp-gap);
    width: 100%;
    list-style: none; margin: 0; padding: 0;
}

/* =============================================================
   LIST — luôn ngang, không bao giờ collapse thành grid
   ============================================================= */
.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;
}
.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; }

@media (max-width: 480px) {
    .csp-list .csp-card-thumb { flex: 0 0 85px !important; width: 85px !important; min-width: 85px !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 — dùng CSS vars, không hardcode màu
   ============================================================= */
.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 — dùng CSS vars */
.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); }

/* flat và ghost dùng --csp-card-flat / --csp-card-ghost — tự động đổi ở dark mode */
.csp-style-flat .csp-item-card { background: var(--csp-card-flat); }
.csp-style-flat .csp-item-card:hover { filter: brightness(.95); transform: translateY(-2px); }

.csp-style-ghost .csp-item-card { background: var(--csp-card-ghost); border: 1.5px solid var(--csp-border); backdrop-filter: blur(6px); }
.csp-style-ghost .csp-item-card:hover { 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: var(--csp-thumb-bg); /* dùng var thay vì hardcode */
    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);
    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: var(--csp-thumb-bg);
}
.csp-thumb-placeholder svg { width: 40px; height: 40px; color: var(--csp-muted); 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;
}
.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;
}
.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: var(--csp-card-flat); 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
   ============================================================= */
.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 styles trong widget */
.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; }
.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; }

/* =============================================================
   RESPONSIVE FALLBACK (overridden by scoped <style> per instance)
   ============================================================= */
@media (max-width: 480px) {
    .csp-widget-wrap .csp-list .csp-card-thumb { flex: 0 0 70px !important; width: 70px !important; min-width: 70px !important; }
}

/* =============================================================
   DARK MODE — theme class based (broad coverage)
   Thêm class của theme vào đây nếu cần
   ============================================================= */

/* Bắt các theme dùng class trên <body> hoặc <html> */
body.dark-mode .csp-wrapper,
body.dark-theme .csp-wrapper,
body.night-mode .csp-wrapper,
body.theme-dark .csp-wrapper,
html.dark .csp-wrapper,
html[data-bs-theme="dark"] .csp-wrapper,
[class*="dark"] .csp-wrapper {
    --csp-card-bg:    transparent;
    --csp-card-flat:  rgba(255,255,255,.06);
    --csp-card-ghost: rgba(255,255,255,.08);
    --csp-text:       inherit;
    --csp-muted:      rgba(255,255,255,.6);
    --csp-border:     rgba(255,255,255,.15);
    --csp-thumb-bg:   rgba(255,255,255,.08);
}

/* =============================================================
   DARK MODE — high specificity overrides
   Khi class .csp-dark được JS thêm vào wrapper
   ============================================================= */
.csp-wrapper.csp-dark .csp-card-title,
.csp-wrapper.csp-dark .csp-card-title a {
    color: #f1f5f9 !important;
}
.csp-wrapper.csp-dark .csp-card-title a:hover {
    color: var(--csp-accent) !important;
}
.csp-wrapper.csp-dark .csp-card-excerpt,
.csp-wrapper.csp-dark .csp-card-meta,
.csp-wrapper.csp-dark .csp-meta-date,
.csp-wrapper.csp-dark .csp-meta-author {
    color: rgba(241,245,249,.7) !important;
}
.csp-wrapper.csp-dark .csp-item-card {
    background: transparent !important;
}
.csp-wrapper.csp-dark.csp-style-flat .csp-item-card {
    background: rgba(255,255,255,.06) !important;
}
.csp-wrapper.csp-dark.csp-style-ghost .csp-item-card {
    background: rgba(255,255,255,.08) !important;
}
.csp-wrapper.csp-dark .csp-item-card,
.csp-wrapper.csp-dark.csp-style-border .csp-item-card {
    border-color: rgba(255,255,255,.15) !important;
}
.csp-wrapper.csp-dark .csp-card-thumb,
.csp-wrapper.csp-dark .csp-no-thumb {
    background: rgba(255,255,255,.08) !important;
}