/* ============================================================
   CARD ĐỘI NGŨ dùng chung (trang chủ / danh sách / giới thiệu)
   Yêu cầu 4/08 — GV: cutout + đĩa đỏ (mẫu image18)
                  TG: ảnh gốc + khung viền đỏ (mẫu image33)
   ============================================================ */
:root {
    --tc-red: #d7261e;
    --tc-red-dark: #b01116;
    --tc-grad: linear-gradient(135deg, #e23c31, #b01116);
    --tc-line: #eadfd2;
    --tc-gold: #e8b84b;
}

/* Lưới độc lập cho trang danh sách (trang chủ dùng .hv-team sẵn có) */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.team-grid + .team-grid { margin-top: 18px; }

/* ── Card GIÁO VIÊN ── */
.hv-tcard {
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: 118px 1fr; align-items: center; gap: 12px;
    background: #fff; border: 1px solid var(--tc-line); border-radius: 16px;
    padding: 12px 12px 0 12px; text-decoration: none; min-height: 128px;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.hv-tcard::before {
    content: ""; position: absolute; inset: -46px auto auto -46px; width: 130px; height: 130px;
    border-radius: 50%; border: 18px solid rgba(215, 38, 30, .10); pointer-events: none;
}
.hv-tcard:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(176, 17, 22, .16); border-color: var(--tc-red); }
.hv-tcard__fig { position: relative; align-self: end; height: 116px; }
.hv-tcard__disc {
    position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
    width: 96px; height: 96px; border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, #ef4136, var(--tc-red-dark) 74%);
    box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .28), 0 6px 16px rgba(176, 17, 22, .28);
}
.hv-tcard__disc::after {
    content: ""; position: absolute; inset: -7px; border-radius: 50%;
    border: 1.5px solid rgba(232, 184, 75, .75);
}
.hv-tcard__img {
    position: relative; z-index: 1; display: block; margin: 0 auto;
    width: auto; max-width: 112px; height: 116px; object-fit: contain; object-position: bottom;
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .18));
    transition: transform .3s ease;
}
.hv-tcard:hover .hv-tcard__img { transform: scale(1.05); }
.hv-tcard__img--flat { border-radius: 50%; width: 92px; max-width: 92px; height: 92px; object-fit: cover; margin-bottom: 8px; filter: none; }
.hv-tcard__meta { display: grid; gap: 8px; justify-items: start; min-width: 0; padding-bottom: 12px; }
.hv-tcard__meta b { font-size: 15.5px; line-height: 1.3; color: #101828; font-weight: 800; }
.hv-tcard__pill {
    display: inline-block; background: var(--tc-grad); color: #fff;
    font-size: 11.5px; font-weight: 700; padding: 4px 13px; border-radius: 999px; letter-spacing: .3px;
    box-shadow: inset 0 0 0 1px rgba(232, 184, 75, .55), 0 3px 8px rgba(176, 17, 22, .25);
}

/* ── Card TRỢ GIẢNG ── */
.hv-acard {
    display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 13px;
    background: #fff; border: 1px solid var(--tc-line); border-radius: 16px;
    padding: 12px; text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.hv-acard:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(176, 17, 22, .14); border-color: var(--tc-red); }
.hv-acard__frame {
    width: 96px; height: 120px; border-radius: 14px; overflow: hidden;
    border: 2.5px solid var(--tc-red); outline: 1.5px solid rgba(232, 184, 75, .6); outline-offset: 2px;
    background: #f4f5f8;
}
.hv-acard__frame img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform .3s ease; }
.hv-acard:hover .hv-acard__frame img { transform: scale(1.06); }
.hv-acard__fallback { display: grid; place-items: center; width: 100%; height: 100%; background: linear-gradient(135deg, #fbeedf, #f6ddc0); color: var(--tc-red-dark); font-size: 24px; font-weight: 800; }
.hv-acard__meta { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.hv-acard__role { font-size: 12.5px; font-weight: 700; color: var(--tc-red-dark); letter-spacing: .4px; text-transform: uppercase; }
.hv-acard__meta b { font-size: 15px; line-height: 1.3; color: #101828; font-weight: 800; }
.hv-acard__pill {
    display: inline-block; background: var(--tc-grad); color: #fff;
    font-size: 11.5px; font-weight: 700; padding: 4px 13px; border-radius: 999px; letter-spacing: .3px;
    box-shadow: inset 0 0 0 1px rgba(232, 184, 75, .55), 0 3px 8px rgba(176, 17, 22, .25);
}

/* Responsive */
@media (max-width: 1023px) {
    .team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
    /* 6/08 mobile: 2 cột song song, ảnh thu nhỏ (đồng bộ trang chủ) */
    .team-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* Card GV = ảnh thiết kế PIL (mẫu image18, khách chốt 4/08) */
.hv-cardimg {
    display: block; border-radius: 16px; overflow: hidden;
    box-shadow: 0 6px 18px rgba(31, 41, 55, .10);
    border: 1px solid #eee;
    transition: transform .25s ease, box-shadow .25s ease;
}
.hv-cardimg img { display: block; width: 100%; height: auto; }
.hv-cardimg:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(176, 17, 22, .20); }

/* ── "Xem thêm" đội ngũ (trang chủ + giới thiệu, đi kèm js/team-more.js) ── */
.hv-more-item { display: contents; }
.hv-more-item[hidden] { display: none; }
.hv-more-wrap { text-align: center; margin-top: 22px; }
.hv-more-btn {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 11px 26px; border-radius: 999px; cursor: pointer;
    border: 1.5px solid var(--tc-red); background: #fff; color: var(--tc-red-dark);
    font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
    transition: background .2s, color .2s, transform .2s, box-shadow .2s;
}
.hv-more-btn:hover { background: var(--tc-red); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(176, 17, 22, .25); }
.hv-more-btn i { font-size: 11px; transition: transform .25s ease; }
.hv-more-btn.is-open i { transform: rotate(180deg); }