/*
 * cards.css
 *
 * Remaining card components that are NOT yet extracted
 * into dedicated shared CSS files.
 *
 * What moved out:
 *   - Class cards  → class-cards.css
 *   - Tutor cards  → tutor-cards.css  (.gs-card)
 *
 * Still here:
 *   - .tutor-card  (old round-avatar layout used on home "Đội Ngũ" section)
 *   - .topic-card  (topics listing)
 *   - .stat-card   (admin dashboard)
 *   - .salary-negotiable helper
 */


/* ── Salary negotiable badge ────────────────────── */

.salary-negotiable {
    color: #e67e22;
    font-weight: 600;
    font-style: italic;
}


/* ═══════════════════════════════════════════════════
   TUTOR CARD — round avatar / centered layout
   (home.php "Đội Ngũ Gia Sư Uy Tín" section)
   ═══════════════════════════════════════════════════ */

.tutor-card {
    border: 1px solid var(--color-border);
    border-radius: .6rem;
    background: #fff;
    text-align: center;
    overflow: hidden;
    transition: box-shadow .25s;
}

.tutor-card:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, .1);
}

.tutor-card .tutor-header {
    background: linear-gradient(135deg, var(--color-primary), #3b82f6);
    padding: 1.25rem 1rem .75rem;
    position: relative;
}

.tutor-card .tutor-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    margin: 0 auto;
    display: block;
}

.tutor-card .tutor-name {
    font-weight: 700;
    font-size: 1.05rem;
    color: #fff;
    margin: .6rem 0 .2rem;
}

.tutor-card .tutor-title {
    font-size: .82rem;
    color: rgba(255, 255, 255, .85);
}

.tutor-card .tutor-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    margin-bottom: .6rem;
}

.tutor-card .tutor-rating i       { font-size: .85rem; color: #d1d5db; }
.tutor-card .tutor-rating i.active { color: var(--color-accent); }

.tutor-card .tutor-rating .rating-value {
    font-size: .82rem;
    font-weight: 600;
    color: var(--color-text);
    margin-left: .35rem;
}

.tutor-card .subject-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    justify-content: center;
    margin-bottom: .75rem;
}

.tutor-card .subject-chips .chip {
    display: inline-block;
    padding: .2rem .55rem;
    font-size: .72rem;
    font-weight: 600;
    background: rgba(37, 99, 235, .08);
    color: var(--color-primary);
    border-radius: 50rem;
    white-space: nowrap;
}

.tutor-card .tutor-stats {
    display: flex;
    justify-content: center;
    gap: 1.2rem;
    margin-bottom: .5rem;
}

.tutor-card .tutor-stats .stat-item { text-align: center; }

.tutor-card .tutor-stats .stat-value {
    display: block;
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-primary);
}

.tutor-card .tutor-stats .stat-label {
    font-size: .72rem;
    color: var(--color-muted);
}

.tutor-card .card-footer {
    padding: .75rem 1rem;
    background: #f9fafb;
    border-top: 1px solid var(--color-border);
}


/* ═══════════════════════════════════════════════════
   TOPIC CARD
   ═══════════════════════════════════════════════════ */

.topic-card {
    border: 1px solid var(--color-border);
    border-radius: .6rem;
    background: #fff;
    overflow: hidden;
    transition: box-shadow .25s;
}

.topic-card:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, .1);
}

.topic-card .topic-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.topic-card .topic-meta {
    display: flex;
    gap: .75rem;
    font-size: .78rem;
    color: var(--color-muted);
    margin-bottom: .5rem;
}

.topic-card .topic-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-text);
    margin-bottom: .4rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.topic-card .topic-title a {
    color: inherit;
    text-decoration: none;
}

.topic-card .topic-title a:hover {
    color: var(--color-primary);
}

.topic-card .topic-excerpt {
    font-size: .85rem;
    color: var(--color-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ═══════════════════════════════════════════════════
   STAT CARD  (admin dashboard)
   ═══════════════════════════════════════════════════ */

.stat-card {
    border: 1px solid var(--color-border);
    border-radius: .6rem;
    background: #fff;
    padding: 1.25rem;
    text-align: center;
    transition: transform .2s, box-shadow .2s;
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
}

.stat-card .stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: .6rem;
}

.stat-card .stat-icon.primary   { background: rgba(37, 99, 235, .1);  color: var(--color-primary); }
.stat-card .stat-icon.secondary { background: rgba(16, 185, 129, .1); color: var(--color-secondary); }
.stat-card .stat-icon.accent    { background: rgba(245, 158, 11, .1); color: var(--color-accent); }
.stat-card .stat-icon.danger    { background: rgba(239, 68, 68, .1);  color: #ef4444; }

.stat-card .stat-number {
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--color-text);
    line-height: 1.1;
}

.stat-card .stat-label {
    font-size: .82rem;
    color: var(--color-muted);
    margin-top: .2rem;
}