/* ═══════════════════════════════════════════════════
   CAMPAIGNS PAGE — v2
   Kế thừa CSS variables từ layout.php (--primary, --border, v.v.)
═══════════════════════════════════════════════════ */

/* ── Animations ── */
@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; }
}

/* ── Hero banner ── */
.c-hero {
    background: linear-gradient(135deg, #1E2D6B 0%, #2D3A8C 55%, #3D4FC8 100%);
    border-radius: 1.25rem;
    padding: 2rem 2.2rem;
    margin-bottom: 1.25rem;
    position: relative;
    overflow: hidden;
}
.c-hero::before {
    content: '';
    position: absolute; right: -60px; top: -60px;
    width: 280px; height: 280px; border-radius: 50%;
    background: radial-gradient(circle, rgba(249,115,22,.22) 0%, transparent 70%);
    pointer-events: none;
}
.c-hero::after {
    content: '';
    position: absolute; left: 40%; bottom: -30px;
    width: 200px; height: 200px; border-radius: 50%;
    background: radial-gradient(circle, rgba(99,102,241,.18) 0%, transparent 70%);
    pointer-events: none;
}
.c-hero h1 {
    font-weight: 900;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    color: #fff;
    margin-bottom: .4rem;
    letter-spacing: -.4px;
    line-height: 1.2;
}
.c-hero p {
    color: rgba(255,255,255,.68);
    font-size: .9rem;
    margin: 0;
}
.c-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: 1.2rem;
}
.c-hstat {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.15);
    backdrop-filter: blur(6px);
    border-radius: .75rem;
    padding: .55rem .95rem;
    min-width: 110px;
}
.c-hstat strong {
    display: block;
    font-size: 1.2rem;
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
}
.c-hstat span {
    font-size: .7rem;
    color: rgba(255,255,255,.6);
}

/* ── Toolbar ── */
.c-toolbar {
    background: #fff;
    border: 1.5px solid var(--border, #E5E7EB);
    border-radius: 1rem;
    padding: .75rem .9rem;
    margin-bottom: 1.1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
}
.c-search-wrap {
    position: relative;
    flex: 1;
    min-width: 180px;
    max-width: 300px;
}
.c-search-wrap .bi {
    position: absolute;
    left: .8rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9CA3AF;
    font-size: .85rem;
    pointer-events: none;
}
.c-search-wrap input {
    width: 100%;
    background: #F3F4F6;
    border: 1.5px solid transparent;
    border-radius: 50px;
    padding: .46rem 1rem .46rem 2.2rem;
    font-size: .85rem;
    font-family: inherit;
    color: #111827;
    transition: border-color .18s, box-shadow .18s;
}
.c-search-wrap input:focus {
    outline: none;
    background: #fff;
    border-color: #F97316;
    box-shadow: 0 0 0 3px rgba(249,115,22,.1);
}
.c-search-wrap input::placeholder { color: #D1D5DB; }

.c-sel {
    background: #F3F4F6;
    border: 1.5px solid transparent;
    border-radius: 50px;
    padding: .44rem 1.1rem .44rem .8rem;
    font-size: .82rem;
    font-weight: 600;
    font-family: inherit;
    color: #4B5563;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .65rem center;
    transition: border-color .18s;
}
.c-sel:focus { outline: none; border-color: #F97316; background-color: #fff; }

.c-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.c-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .85rem;
    border-radius: 50px;
    font-size: .78rem;
    font-weight: 700;
    border: 1.5px solid var(--border, #E5E7EB);
    background: #fff;
    color: #6B7280;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.c-chip:hover { border-color: #F97316; color: #F97316; background: #FFF7ED; }
.c-chip.active { border-color: #F97316; background: #F97316; color: #fff; }
.c-chip .cc { background: rgba(255,255,255,.25); border-radius: 99px; padding: .02rem .38rem; font-size: .66rem; }
.c-chip:not(.active) .cc { background: #F3F4F6; color: #6B7280; }

.c-result-meta {
    margin-left: auto;
    font-size: .78rem;
    color: #9CA3AF;
    white-space: nowrap;
    font-weight: 500;
}
.c-result-meta strong { color: #374151; }

/* ── Campaign grid ── */
.c-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 1rem;
}
.c-grid.list-mode {
    grid-template-columns: 1fr;
}

/* ── Campaign 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;
}
.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: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.c-card-status-wrap {
    position: absolute; top: .65rem; right: .65rem;
}
.c-card-bottom {
    position: absolute; bottom: .65rem; left: .65rem; right: .65rem;
    display: flex; align-items: center; justify-content: space-between;
}
.c-plat-pills { display: flex; gap: .25rem; flex-wrap: wrap; }
.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;
}

/* card body */
.c-card-body { padding: .95rem 1rem; }
.c-card-title {
    font-weight: 800; font-size: .88rem; line-height: 1.38;
    color: #111827; margin-bottom: .55rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.c-meta-row {
    display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .7rem;
}
.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;
}
.c-meta-chip .bi { font-size: .68rem; }

/* 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 */
.c-card-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: .65rem; border-top: 1px solid #F3F4F6;
}
.c-cast {
    font-size: .76rem; font-weight: 700; color: #4B5563;
    display: flex; align-items: center; gap: .28rem;
}
.c-cast strong { color: #F97316; font-size: .88rem; }

/* ── 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-new    { background: #DBEAFE; color: #1D4ED8; }

/* ── Buttons ── */
.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 loading ── */
.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;
}

/* ── Empty state ── */
.c-empty {
    grid-column: 1 / -1;
    background: #fff;
    border: 1.5px dashed #E5E7EB;
    border-radius: 1rem;
    text-align: center;
    padding: 3rem 1.5rem;
    animation: rh-fadeUp .35s ease;
}
.c-empty .emo { font-size: 2.8rem; margin-bottom: .8rem; }
.c-empty h5 { font-weight: 800; margin-bottom: .4rem; }
.c-empty p { color: #6B7280; font-size: .88rem; margin: 0; }

/* ── View toggle ── */
.c-view-toggle {
    display: flex; gap: 2px;
    background: #F3F4F6; border-radius: .55rem; padding: 3px;
}
.c-view-btn {
    width: 30px; height: 30px; border-radius: .4rem;
    display: flex; align-items: center; justify-content: center;
    border: none; background: none; color: #9CA3AF;
    font-size: .88rem; transition: all .15s; cursor: pointer;
}
.c-view-btn.active { background: #fff; color: #F97316; box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* List view overrides */
.c-grid.list-mode .c-card { display: flex; align-items: stretch; }
.c-grid.list-mode .c-card-thumb { width: 180px; flex-shrink: 0; height: auto; min-height: 130px; }
.c-grid.list-mode .c-card-body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 1rem; }

@media (max-width: 768px) {
    .c-grid { grid-template-columns: 1fr; }
    .c-grid.list-mode .c-card-thumb { width: 110px; min-height: 110px; }
    .c-hero { padding: 1.4rem 1.2rem; }
    .c-toolbar { flex-direction: column; align-items: stretch; gap: .45rem; }
    .c-result-meta { margin-left: 0; }
}