/* ═══════════════════════════════════════════════════
   SHARED CAMPAIGN CARD STYLES
   Used by: campaigns.php, campaign.php (suggestions)
═══════════════════════════════════════════════════ */

@keyframes rh-fadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
@keyframes rh-shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position:  600px 0; }
}

/* ── Grid ── */
.c-grid {
    display: grid;
    /* min 360px → ~3 cột trên màn desktop thường (card rộng hơn, thoáng hơn),
       tự co còn 2/1 cột ở vùng hẹp (vd. gợi ý trang chi tiết, tablet). */
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 1rem;
    max-width: 100%;
}

/* ── Card ── */
.c-card {
    background: #fff;
    border: 1.5px solid var(--border, #E5E7EB);
    border-radius: 1.1rem;
    overflow: hidden;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    animation: rh-fadeUp .35s ease both;
    cursor: pointer;
    max-width: 100%;
    min-width: 0;
}
.c-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,.1);
    border-color: #FED7AA;
}
.c-card:nth-child(2) { animation-delay: .06s; }
.c-card:nth-child(3) { animation-delay: .12s; }
.c-card:nth-child(4) { animation-delay: .18s; }
.c-card:nth-child(5) { animation-delay: .24s; }
.c-card:nth-child(6) { animation-delay: .30s; }

/* card thumb */
.c-card-thumb {
    height: 148px;
    position: relative;
    overflow: hidden;
    background: #F3F4F6;
}
.c-card-thumb-bg {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 3.2rem;
    transition: transform .35s ease;
}
.c-card:hover .c-card-thumb-bg { transform: scale(1.06); }
.c-card-thumb-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.38) 0%, transparent 55%);
}
.c-card-org {
    position: absolute;
    top: .65rem; left: .65rem;
    background: #fff;
    border-radius: .5rem;
    padding: .22rem .6rem;
    font-size: .7rem; font-weight: 800; color: #111827;
    box-shadow: 0 2px 6px rgba(0,0,0,.1);
    max-width: calc(50% - 1rem);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.c-card-status-wrap {
    position: absolute;
    top: .65rem; right: .65rem;
    max-width: calc(50% - .5rem);
}
.c-card-bottom {
    position: absolute;
    bottom: .65rem; left: .65rem; right: .65rem;
    display: flex; align-items: center; justify-content: space-between;
    gap: .4rem; flex-wrap: wrap;
}
.c-plat-pills {
    display: flex; gap: .25rem; flex-wrap: wrap;
    max-width: calc(100% - 90px); overflow: hidden;
}
.c-plat-pill {
    background: rgba(255,255,255,.88);
    border-radius: 99px; padding: .14rem .52rem;
    font-size: .66rem; font-weight: 700;
    backdrop-filter: blur(4px); color: #374151;
}
.c-deadline {
    background: rgba(0,0,0,.45); color: #fff;
    font-size: .66rem; font-weight: 700;
    border-radius: 99px; padding: .18rem .55rem;
    backdrop-filter: blur(4px);
    display: flex; align-items: center; gap: .22rem;
    white-space: nowrap; flex-shrink: 0;
}

/* card body */
.c-card-body { padding: .95rem 1rem; min-width: 0; }
.c-card-title {
    font-weight: 800; font-size: .88rem; line-height: 1.38;
    min-height: calc(.88rem * 1.38 * 2);
    color: #111827; margin-bottom: .55rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; word-break: break-word;
}
.c-meta-row {
    display: flex; flex-wrap: wrap; gap: .4rem;
    margin-bottom: .7rem; overflow: hidden;
}
.c-meta-chip {
    display: inline-flex; align-items: center; gap: .28rem;
    background: #F3F4F6; border-radius: .38rem;
    padding: .18rem .52rem; font-size: .72rem; color: #4B5563;
    font-weight: 600; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.c-meta-chip .bi { font-size: .68rem; flex-shrink: 0; }

/* progress */
.c-prog-wrap { margin-bottom: .8rem; }
.c-prog-label {
    display: flex; justify-content: space-between;
    font-size: .7rem; font-weight: 600; margin-bottom: .28rem; color: #6B7280;
}
.c-prog-bar { height: 5px; background: #F3F4F6; border-radius: 99px; overflow: hidden; }
.c-prog-fill {
    height: 100%; border-radius: 99px;
    background: linear-gradient(90deg, #F97316, #F59E0B);
    transition: width .5s ease;
}

/* card footer — xếp dọc: Cast 1 hàng full chiều ngang, nút Xem chi tiết xuống dưới.
   Giúp hiển thị đủ chữ giá kể cả số 7 chữ số (vd. 1.000.000đ/video) mà không bị chèn. */
.c-card-footer {
    display: flex; flex-direction: column; align-items: stretch;
    padding-top: .65rem; border-top: 1px solid #F3F4F6; gap: .55rem;
}
.c-cast {
    font-size: .76rem; font-weight: 700; color: #4B5563;
    display: flex; align-items: center; gap: .28rem;
    min-width: 0;
}
.c-cast strong { color: #F97316; font-size: .9rem; }
/* nút Xem chi tiết chiếm trọn chiều ngang dưới phần Cast */
.c-card-footer .btn-rh-primary-sm { width: 100%; justify-content: center; }

/* ── Status badges ── */
.c-badge {
    display: inline-flex; align-items: center; gap: .26rem;
    padding: .2rem .6rem; border-radius: 99px;
    font-size: .7rem; font-weight: 700; white-space: nowrap;
}
.cb-open       { background: #D1FAE5; color: #065F46; }
.cb-full       { background: #F3F4F6; color: #6B7280; }
.cb-ending     { background: #FEF9C3; color: #92400E; }
.cb-expired    { background: #F3F4F6; color: #4B5563; }
.cb-new        { background: #DBEAFE; color: #1D4ED8; }
.cb-registered { background: #059669; color: #fff; }

/* ── Primary button ── */
.btn-rh-primary-sm {
    background: #F97316; color: #fff; border: none;
    border-radius: 50px; padding: .4rem 1.1rem;
    font-size: .8rem; font-weight: 700;
    transition: background .15s, transform .15s, box-shadow .15s;
    display: inline-flex; align-items: center; gap: .3rem;
    box-shadow: 0 3px 10px rgba(249,115,22,.25); white-space: nowrap;
}
.btn-rh-primary-sm:hover {
    background: #EA580C; color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(249,115,22,.35);
}
.btn-rh-primary-sm:disabled {
    background: #D1D5DB; box-shadow: none; color: #6B7280;
    transform: none; cursor: not-allowed;
}

/* ── Skeleton ── */
.rh-skeleton {
    background: linear-gradient(90deg, #F3F4F6 25%, #EBEBEB 50%, #F3F4F6 75%);
    background-size: 1200px 100%;
    animation: rh-shimmer 1.4s infinite;
    border-radius: .5rem;
}

@media (max-width: 768px) {
    .c-grid { grid-template-columns: 1fr; }
}