﻿/* =============================================
   EVENTS PAGE  –  /su-kien
   ============================================= */

/* ----- Hero banner trang list ----- */
.page-hero {
    padding: 64px 0 48px;
    text-align: center;
}
.page-hero-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: #fff;
}
.page-hero-desc {
    color: rgba(255,255,255,.75);
    margin-top: .75rem;
    font-size: 1.05rem;
}

/* ----- Section header chung ----- */
.section-header { text-align: center; }
.section-label {
    display: inline-block;
    background: var(--primary, #0e6fad);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .25rem .9rem;
    border-radius: 999px;
    margin-bottom: .75rem;
}

/* ----- Grid sự kiện ----- */
.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
}
.events-grid-past .event-card-thumb img { filter: grayscale(40%); }

/* ----- Card sự kiện ----- */
.event-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(0,0,0,.07);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .25s, box-shadow .25s;
}
.event-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0,0,0,.12); }
.event-card-thumb { position: relative; display: block; aspect-ratio: 18/10; overflow: hidden; }
.event-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.event-card:hover .event-card-thumb img { transform: scale(1.04); }

.event-card-badge {
    position: absolute; top: 12px; left: 12px;
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    padding: .25rem .75rem; border-radius: 999px;
}
.badge-upcoming { background: #16a34a; color: #fff; }
.badge-past     { background: #6b7280; color: #fff; }

.event-card-body { padding: 1.25rem 1.5rem 1.5rem; flex: 1; display: flex; flex-direction: column; }

/* date strip */
.event-date-strip {
    display: flex; align-items: center; gap: .5rem;
    margin-bottom: .85rem;
}
.date-block {
    display: flex; flex-direction: column; align-items: center;
    background: var(--primary, #0e6fad); color: #fff;
    border-radius: 8px; padding: .3rem .7rem; min-width: 48px; text-align: center;
}
.date-day { font-size: 1.3rem; font-weight: 700; line-height: 1; }
.date-mon { font-size: .65rem; opacity: .85; }
.date-arrow { color: #9ca3af; }
.event-date-strip.is-past { font-size: .82rem; color: #6b7280; gap: .3rem; }

.event-card-title { font-size: 1rem; font-weight: 700; line-height: 1.4; }
.event-card-title a { color: inherit; text-decoration: none; }
.event-card-title a:hover { color: var(--primary, #0e6fad); }

.event-venues { list-style: none; padding: 0; margin: 0; font-size: .82rem; color: #4b5563; }
.event-venues li { display: flex; align-items: flex-start; gap: .4rem; margin-bottom: .3rem; }
.event-venues li i { color: var(--primary, #0e6fad); margin-top: 2px; }

.event-card-footer { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: auto; }

.event-card-desc { font-size: .85rem; color: #6b7280; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* empty state */
.events-empty {
    text-align: center; padding: 4rem 0; color: #9ca3af;
}
.events-empty i { font-size: 3rem; display: block; margin-bottom: 1rem; }

/* =============================================
   EVENT DETAIL PAGE  –  /su-kien/{id}
   ============================================= */
.event-detail-hero { position: relative; }
.event-detail-hero-bg {
    min-height: 480px;
    background-size: cover; background-position: center;
    display: flex; align-items: flex-end;
}
.event-detail-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.2) 60%, transparent 100%);
}
.event-detail-hero-content {
    position: relative; z-index: 1;
    padding-bottom: 3rem; padding-top: 6rem;
    color: #fff;
}
.event-detail-title {
    font-size: clamp(1.5rem, 3.5vw, 2.4rem);
    font-weight: 800; line-height: 1.25; margin-top: .75rem;
}
.event-detail-meta { margin-top: .6rem; font-size: .92rem; opacity: .85; display: flex; gap: 1.5rem; flex-wrap: wrap; }
.event-status-badge {
    display: inline-block; font-size: .7rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    padding: .3rem 1rem; border-radius: 999px;
}

/* breadcrumb */
.breadcrumb { display: flex; align-items: center; gap: .5rem; font-size: .8rem; opacity: .8; margin-bottom: .75rem; }
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* ----- Layout 2 col ----- */
.event-detail-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 3rem;
    align-items: start;
}
@media (max-width: 900px) {
    .event-detail-layout { grid-template-columns: 1fr; }
    .event-detail-sidebar { order: -1; }
}

/* ----- Main content ----- */
.section-sub-title {
    font-size: 1.2rem; font-weight: 700;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--primary, #0e6fad);
    display: flex; align-items: center; gap: .5rem;
}
.rich-text img { max-width: 100%; border-radius: 8px; }
.rich-text p { line-height: 1.8; }

/* ----- Location cards ----- */
.event-locations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.5rem;
}
.event-location-card {
    border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden;
    background: #fff; box-shadow: 0 1px 8px rgba(0,0,0,.06);
}
.elc-thumb img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.elc-body { padding: 1rem 1.1rem 1.2rem; }
.elc-row { display: flex; align-items: flex-start; gap: .5rem; font-size: .87rem; color: #374151; margin-bottom: .5rem; }
.elc-row i { color: var(--primary, #0e6fad); margin-top: 2px; flex-shrink: 0; }
.elc-desc { font-size: .83rem; color: #6b7280; }

/* ----- Fair info DL ----- */
.fair-dl { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.25rem; font-size: .9rem; }
.fair-dl dt { font-weight: 600; color: #374151; display: flex; align-items: center; gap: .4rem; white-space: nowrap; }
.fair-dl dd { color: #4b5563; margin: 0; }

/* ----- Sidebar ----- */
.event-detail-sidebar { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 1.25rem; }
.sidebar-box {

/* ----- event-card-desc: clamp 4 dong ----- */
.event-card-desc--clamp {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ----- Infinite scroll helpers ----- */
.past-sentinel { height: 1px; }
.past-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 2rem 0;
    color: #6b7280;
    font-size: .95rem;
}
.spinner {
    width: 22px; height: 22px;
    border: 3px solid #e5e7eb;
    border-top-color: var(--primary, #0e6fad);
    border-radius: 50%;
    animation: spin .7s linear infinite;
    display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }
    background: #fff; border: 1px solid #e5e7eb;
    border-radius: 12px; padding: 1.25rem 1.4rem;
    box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.sidebar-register { border-color: var(--primary, #0e6fad); border-width: 2px; }
.sidebar-box-title {
    font-size: .92rem; font-weight: 700; color: #111827;
    display: flex; align-items: center; gap: .5rem;
}
.sidebar-meta-list { list-style: none; padding: 0; margin: 0; font-size: .85rem; }
.sidebar-meta-list li {
    display: flex; justify-content: space-between; gap: .5rem;
    padding: .4rem 0; border-bottom: 1px solid #f3f4f6;
}
.sidebar-meta-list li:last-child { border-bottom: none; }
.meta-label { color: #6b7280; }
.meta-value { font-weight: 600; color: #111827; text-align: right; }
.sidebar-email { display: block; font-size: .88rem; color: var(--primary, #0e6fad); margin-top: .5rem; word-break: break-all; }
.w-full { width: 100%; justify-content: center; }

/* =============================================
   TRUONG THAM GIA — Event detail (category level)
   ============================================= */
.event-schools-section { }
.event-schools-header {
    display: flex; align-items: center; gap: 1rem;
}
.event-schools-count {
    background: var(--primary, #0e6fad); color: #fff;
    font-size: .75rem; font-weight: 700;
    padding: .2rem .7rem; border-radius: 999px;
}
.event-schools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}
.event-school-card {
    position: relative;
    display: flex; flex-direction: column;
    border: 1px solid #e5e7eb; border-radius: 10px;
    overflow: hidden; background: #fff;
    text-decoration: none; color: inherit;
    box-shadow: 0 1px 6px rgba(0,0,0,.05);
    transition: box-shadow .2s, transform .2s;
}
.event-school-card:hover {
    box-shadow: 0 4px 18px rgba(0,0,0,.12);
    transform: translateY(-2px);
}
.esc-logo {
    background: #f9fafb; height: 80px;
    display: flex; align-items: center; justify-content: center;
    padding: .75rem;
    border-bottom: 1px solid #f3f4f6;
}
.esc-logo img { max-width: 100%; max-height: 56px; object-fit: contain; }
.esc-logo-placeholder { font-size: 2rem; color: #d1d5db; }
.esc-body { padding: .7rem .85rem .8rem; flex: 1; }
.esc-name {
    font-size: .82rem; font-weight: 700;
    color: #111827; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin: 0 0 .3rem;
}
.esc-country {
    font-size: .72rem; color: #6b7280;
    display: flex; align-items: center; gap: .3rem;
}
.esc-partner-badge {
    position: absolute; top: .45rem; right: .45rem;
    background: #fbbf24; color: #fff;
    border-radius: 50%; width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    font-size: .6rem;
}

/* =============================================
   DON VI TO CHUC — Event detail
   ============================================= */
.event-organizer-cards {
    display: flex; flex-wrap: wrap; gap: 1rem;
}
.event-organizer-card {
    display: flex; align-items: center; gap: 1rem;
    background: #f0f7ff; border: 1px solid #bfdbfe;
    border-radius: 10px; padding: 1rem 1.25rem;
    flex: 1; min-width: 220px;
}
.eoc-icon {
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--primary, #0e6fad); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; flex-shrink: 0;
}
.eoc-icon--sponsor { background: #7c3aed; }
.eoc-body { display: flex; flex-direction: column; gap: .15rem; }
.eoc-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: #6b7280; font-weight: 600; }
.eoc-value { font-size: .9rem; font-weight: 700; color: #111827; }

/* =============================================
   LOCATION CARD — redesign (vertical full-width list)
   ============================================= */
.event-locations-list { display: flex; flex-direction: column; gap: 1.75rem; }
.event-location-card {
    border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden;
    background: #fff; box-shadow: 0 1px 8px rgba(0,0,0,.06);
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 0;
}
@media (max-width: 700px) {
    .event-location-card { grid-template-columns: 1fr; }
}
.elc-thumb { height: 100%; min-height: 200px; overflow: hidden; }
.elc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.elc-content { padding: 1.25rem 1.4rem 1.4rem; }
.elc-meta-group { display: flex; flex-direction: column; gap: .45rem; }
.elc-row { display: flex; align-items: flex-start; gap: .5rem; font-size: .87rem; color: #374151; }
.elc-row i { color: var(--primary, #0e6fad); margin-top: 2px; flex-shrink: 0; }
.elc-desc { font-size: .83rem; color: #6b7280; line-height: 1.6; }

/* Per-event schools (chip style) */
.elc-schools { border-top: 1px solid #f3f4f6; padding-top: 1rem; }
.elc-schools-header {
    display: flex; align-items: center; gap: .5rem;
    font-size: .82rem; color: #374151;
}
.elc-schools-header i { color: var(--primary, #0e6fad); }
.elc-schools-title { font-weight: 700; }
.elc-schools-count {
    background: #e0f2fe; color: #0369a1;
    font-size: .7rem; font-weight: 700;
    padding: .15rem .55rem; border-radius: 999px;
}
.elc-schools-grid { display: flex; flex-wrap: wrap; gap: .5rem; }
.elc-school-chip {
    display: flex; align-items: center; gap: .4rem;
    border: 1px solid #e5e7eb; border-radius: 8px;
    background: #f9fafb; padding: .3rem .65rem .3rem .4rem;
    text-decoration: none; color: inherit;
    font-size: .78rem;
    transition: background .15s, border-color .15s;
    max-width: 200px;
}
.elc-school-chip:hover { background: #eff6ff; border-color: #93c5fd; }
.elc-school-chip img { width: 30px; height: 22px; object-fit: contain; flex-shrink: 0; }
.elc-school-chip-name {
    font-weight: 600; color: #111827;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.elc-school-chip-country { font-size: .7rem; color: #6b7280; white-space: nowrap; margin-left: .2rem; }

/* Sidebar school summary */
.sidebar-schools-summary { }
.sidebar-schools-count { font-size: .88rem; color: #374151; }
.count-number { font-size: 1.6rem; font-weight: 800; color: var(--primary, #0e6fad); }
.sidebar-schools-logos {
    display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
}
.sidebar-schools-logos a img {
    width: 48px; height: 32px; object-fit: contain;
    border: 1px solid #e5e7eb; border-radius: 4px; background: #f9fafb;
}
.sidebar-schools-more { font-size: .78rem; color: #6b7280; }

/* =============================================
   LOCATION CARD v2 — địa điểm tổ chức (phân section)
   ============================================= */

/* section-sub-title count badge */
.section-sub-count {
    font-size: .72rem; font-weight: 600;
    background: #e0f2fe; color: #0369a1;
    padding: .2rem .7rem; border-radius: 999px;
    margin-left: .5rem;
}

/* card container */
.elc-card {
    border: 1px solid #e5e7eb; border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    overflow: hidden;
    transition: box-shadow .2s;
}
.elc-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.1); }

/* ── header ── */
.elc-card-header {
    display: flex; align-items: flex-start; gap: 1rem;
    padding: 1.2rem 1.4rem 1rem;
    border-bottom: 1px solid #f3f4f6;
    background: #fafafa;
}
.elc-index {
    flex-shrink: 0;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--primary, #0e6fad); color: #fff;
    font-size: .88rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.elc-header-info { flex: 1; }
.elc-venue-name {
    font-size: 1.05rem; font-weight: 700; color: #111827;
    display: flex; align-items: flex-start; gap: .45rem;
    margin: 0 0 .3rem;
}
.elc-venue-name i { color: var(--primary, #0e6fad); margin-top: 3px; flex-shrink: 0; }
.elc-time {
    font-size: .82rem; color: #6b7280; margin: 0;
    display: flex; align-items: center; gap: .4rem;
}
.elc-time i { color: #9ca3af; }
.elc-thumb-inline {
    flex-shrink: 0;
    width: 130px; height: 80px;
    object-fit: cover; border-radius: 8px;
    border: 1px solid #e5e7eb;
}
@media (max-width: 600px) { .elc-thumb-inline { display: none; } }

/* ── body ── */
.elc-card-body { padding: 1rem 1.4rem 1.1rem; }
.elc-meta-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.elc-meta-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .78rem; font-weight: 600; color: #374151;
    background: #f0f7ff; border: 1px solid #bfdbfe;
    border-radius: 6px; padding: .25rem .7rem;
}
.elc-meta-chip i { color: var(--primary, #0e6fad); }
.elc-meta-chip--org { background: #faf5ff; border-color: #ddd6fe; }
.elc-meta-chip--org i { color: #7c3aed; }
.elc-desc { font-size: .84rem; color: #4b5563; line-height: 1.7; }

/* ── section trường tham dự tại địa điểm ── */
.elc-schools-section {
    border-top: 2px solid #e0f2fe;
    background: #f8fbff;
    padding: 1.1rem 1.4rem 1.3rem;
}
.elc-schools-section-header {
    display: flex; align-items: center; gap: .55rem;
    font-size: .88rem; font-weight: 700; color: #1e3a5f;
    margin-bottom: .9rem;
}
.elc-schools-section-header i { color: var(--primary, #0e6fad); font-size: 1rem; }
.elc-schools-count-badge {
    margin-left: auto;
    background: var(--primary, #0e6fad); color: #fff;
    font-size: .68rem; font-weight: 700;
    padding: .2rem .65rem; border-radius: 999px;
}

/* grid card trường bên trong từng địa điểm */
.elc-schools-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: .75rem;
}
.elc-school-item {
    display: flex; flex-direction: column;
    position: relative;
    background: #fff; border: 1px solid #e2e8f0;
    border-radius: 10px; overflow: hidden;
    text-decoration: none; color: inherit;
    transition: box-shadow .18s, transform .18s;
}
.elc-school-item:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
    transform: translateY(-2px);
}
.elc-school-item-logo {
    height: 66px; background: #f9fafb;
    display: flex; align-items: center; justify-content: center;
    padding: .6rem; border-bottom: 1px solid #f1f5f9;
}
.elc-school-item-logo img { max-width: 100%; max-height: 44px; object-fit: contain; }
.elc-school-item-logo i { font-size: 1.6rem; color: #cbd5e1; }
.elc-school-item-info { padding: .55rem .65rem .6rem; }
.elc-school-item-name {
    display: block; font-size: .76rem; font-weight: 700;
    color: #111827; line-height: 1.35;
    overflow: hidden; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.elc-school-item-country {
    display: flex; align-items: center; gap: .25rem;
    font-size: .68rem; color: #6b7280; margin-top: .25rem;
}
.elc-school-item-country i { color: #94a3b8; }
.elc-school-item-partner {
    position: absolute; top: .35rem; right: .35rem;
    width: 18px; height: 18px; border-radius: 50%;
    background: #fbbf24; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .55rem;
}

@media (max-width: 480px) {
    .elc-schools-card-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* =============================================
   SECTION HEADER dùng chung (trường + org per-venue)
   ============================================= */
.elc-section-header {
    display: flex; align-items: center; gap: .55rem;
    font-size: .88rem; font-weight: 700; color: #1e3a5f;
    margin-bottom: .9rem;
}
.elc-section-header i { color: var(--primary, #0e6fad); font-size: 1rem; }
.elc-section-header--org i { color: #7c3aed; }
.elc-section-header--org { color: #2e1a5f; }

/* =============================================
   ĐƠN VỊ TỔ CHỨC — per-venue (elc-orgs-section)
   ============================================= */
.elc-orgs-section {
    border-top: 2px solid #ede9fe;
    background: #fdf8ff;
    padding: 1.1rem 1.4rem 1.3rem;
}
.elc-orgs-count-badge {
    margin-left: auto;
    background: #7c3aed; color: #fff;
    font-size: .68rem; font-weight: 700;
    padding: .2rem .65rem; border-radius: 999px;
}
.elc-orgs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: .75rem;
}
.elc-org-item {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid #e9d5ff;
    border-radius: 10px; overflow: hidden;
}
.elc-org-item-logo {
    height: 66px; background: #f9fafb;
    display: flex; align-items: center; justify-content: center;
    padding: .6rem; border-bottom: 1px solid #f1f5f9;
}
.elc-org-item-logo img  { max-width: 100%; max-height: 44px; object-fit: contain; }
.elc-org-item-logo i    { font-size: 1.6rem; color: #cbd5e1; }
.elc-org-item-info      { padding: .55rem .65rem .6rem; }
.elc-org-item-name {
    display: block; font-size: .78rem; font-weight: 700; color: #111827;
    line-height: 1.35;
    overflow: hidden; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.elc-org-item-country {
    display: flex; align-items: center; gap: .25rem;
    font-size: .68rem; color: #6b7280; margin-top: .2rem;
}
.elc-org-item-country i { color: #94a3b8; }
.elc-org-item-links { display: flex; gap: .4rem; margin-top: .4rem; }
.elc-org-link {
    display: flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    background: #f3f4f6; color: #374151; font-size: .72rem;
    text-decoration: none; transition: background .15s, color .15s;
}
.elc-org-link:hover { background: #7c3aed; color: #fff; }

/* =============================================
   ĐƠN VỊ TỔ CHỨC — category level (org-card)
   ============================================= */
.org-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}
.org-card {
    background: #fff; border: 1px solid #e9d5ff;
    border-radius: 12px; overflow: hidden;
    box-shadow: 0 1px 6px rgba(0,0,0,.05);
    transition: box-shadow .2s, transform .2s;
}
.org-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.1); transform: translateY(-2px); }
.org-card-logo {
    height: 90px; background: #f9fafb;
    display: flex; align-items: center; justify-content: center;
    padding: .9rem; border-bottom: 1px solid #f3f4f6;
}
.org-card-logo img { max-width: 100%; max-height: 60px; object-fit: contain; }
.org-card-logo i   { font-size: 2rem; color: #d1d5db; }
.org-card-body  { padding: .8rem 1rem 1rem; }
.org-card-name  { font-size: .88rem; font-weight: 700; color: #111827; margin: 0 0 .3rem; }
.org-card-country {
    display: flex; align-items: center; gap: .3rem;
    font-size: .72rem; color: #6b7280;
}
.org-card-links { display: flex; flex-direction: column; gap: .25rem; }
.org-link {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .76rem; color: #7c3aed; text-decoration: none;
    word-break: break-all;
}
.org-link:hover { text-decoration: underline; }

@media (max-width: 480px) {
    .elc-orgs-grid    { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .org-card-grid    { grid-template-columns: 1fr 1fr; }
}

/* =============================================
   TRƯỜNG THAM GIA THEO ĐỊA ĐIỂM — tab UI
   ============================================= */
.event-venue-schools { }

/* Tab nav */
.evt-venue-tab-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: .6rem;
}
.evt-venue-tab-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .5rem 1rem;
    border: 1px solid #e5e7eb; border-radius: 8px;
    background: #f9fafb; color: #374151;
    font-size: .83rem; font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
    white-space: nowrap;
}
.evt-venue-tab-btn i { color: #9ca3af; font-size: .78rem; }
.evt-venue-tab-btn:hover {
    background: #eff6ff; border-color: #93c5fd; color: var(--primary, #0e6fad);
}
.evt-venue-tab-btn:hover i { color: var(--primary, #0e6fad); }
.evt-venue-tab-btn.active {
    background: var(--primary, #0e6fad); border-color: var(--primary, #0e6fad);
    color: #fff; box-shadow: 0 2px 8px rgba(14,111,173,.25);
}
.evt-venue-tab-btn.active i { color: #fff; }
.evt-venue-tab-count {
    background: rgba(255,255,255,.25); color: inherit;
    font-size: .68rem; font-weight: 700;
    padding: .1rem .45rem; border-radius: 999px;
    min-width: 20px; text-align: center;
}
.evt-venue-tab-btn:not(.active) .evt-venue-tab-count {
    background: #e5e7eb; color: #6b7280;
}

/* Tab panels */
.evt-venue-tab-panels { }
.evt-venue-tab-panel {
    display: none;
}
.evt-venue-tab-panel.active {
    display: block;
    animation: fadeTabIn .2s ease;
}
@keyframes fadeTabIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Thời gian chips */
.evt-venue-times {
    display: flex; flex-wrap: wrap; gap: .5rem;
    margin-bottom: .25rem;
}
.evt-venue-time-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .78rem; color: #374151; font-weight: 500;
    background: #f0f9ff; border: 1px solid #bae6fd;
    padding: .3rem .75rem; border-radius: 999px;
}
.evt-venue-time-chip i { color: #0284c7; }

@media (max-width: 640px) {
    .evt-venue-tab-btn { font-size: .78rem; padding: .4rem .7rem; }
}
