/* ════════════════════════════════════════════════════════════
   HomeNhapDiem – Dashboard · Trường THCS Bản Giang
   Thiết kế: Navy sâu + Sky accent + Emerald / Amber xếp loại
   ════════════════════════════════════════════════════════════ */

/* ── Token system ── */
.hd {
    /* Core palette */
    --navy-950: #050D1A;
    --navy-900: #0C1B35;
    --navy-800: #122349;
    --navy-700: #1A3260;
    --navy-600: #234785;
    --navy-500: #2F5EA8;
    --navy-400: #4B7CC8;
    --navy-300: #7AA3DA;
    --navy-200: #B0C8EA;
    --navy-100: #DAE7F5;
    --navy-50: #EFF5FB;
    --sky: #38BDF8;
    --sky-dim: #0EA5E9;
    --sky-pale: #E0F4FD;
    --emerald: #10B981;
    --emerald-dim: #059669;
    --emerald-pale: #D1FAE5;
    --amber: #F59E0B;
    --amber-dim: #D97706;
    --amber-pale: #FEF3C7;
    --red: #EF4444;
    --red-dim: #DC2626;
    --red-pale: #FEE2E2;
    --violet: #8B5CF6;
    --violet-pale: #EDE9FE;
    --rose: #F43F5E;
    --rose-pale: #FFE4E6;
    /* Surface */
    --bg: #F4F7FB;
    --surface: #FFFFFF;
    --surface2: #F8FAFD;
    --border: #E2EAF3;
    --border2: #C8D9EE;
    /* Text */
    --tx-hi: #0C1B35;
    --tx-mid: #2F4A70;
    --tx-lo: #5E7899;
    --tx-inv: #FFFFFF;
    /* Shadows */
    --sh-xs: 0 1px 3px rgba(12,27,53,.07), 0 1px 2px rgba(12,27,53,.04);
    --sh-sm: 0 2px 8px rgba(12,27,53,.08), 0 1px 3px rgba(12,27,53,.05);
    --sh-md: 0 4px 20px rgba(12,27,53,.10), 0 2px 6px rgba(12,27,53,.06);
    --sh-lg: 0 8px 32px rgba(12,27,53,.12), 0 4px 10px rgba(12,27,53,.07);
    /* Radii */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 18px;
    font-family: 'Segoe UI', 'Be Vietnam Pro', 'Inter', sans-serif;
    background: var(--bg);
    color: var(--tx-hi);
    font-size: .9rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* ── Spinner ── */
.hd-spinner-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem 1rem;
    gap: .75rem;
    color: var(--tx-mid);
}

.hd-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border);
    border-top-color: var(--sky-dim);
    border-radius: 50%;
    animation: hd-spin .7s linear infinite;
}

@keyframes hd-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ══════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════ */
.hd-hero {
    background: var(--navy-900);
    position: relative;
    overflow: hidden;
    padding: 0;
}

    /* Decorative background elements */
    .hd-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 60% 80% at 90% 20%, rgba(56,189,248,.09) 0%, transparent 60%), radial-gradient(ellipse 40% 60% at 10% 80%, rgba(16,185,129,.07) 0%, transparent 55%);
        pointer-events: none;
    }

    .hd-hero::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(56,189,248,.4), transparent);
    }

.hd-hero__inner {
    position: relative;
    z-index: 1;
    padding: 1.75rem 2rem 0;
}

/* Top bar: title + meta */
.hd-hero__topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.hd-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(56,189,248,.15);
    border: 1px solid rgba(56,189,248,.3);
    color: var(--sky);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .22rem .7rem;
    border-radius: 20px;
    margin-bottom: .5rem;
}

.hd-hero__title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 .3rem;
    line-height: 1.2;
    letter-spacing: -.01em;
}

.hd-hero__sub {
    color: var(--navy-200);
    font-size: .83rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.hd-hero__sub-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--navy-300);
    display: inline-block;
}

.hd-hero__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .35rem;
}

.hd-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    color: var(--navy-100);
    font-size: .77rem;
    padding: .28rem .75rem;
    border-radius: 20px;
}

    .hd-meta-pill i {
        color: var(--sky);
        font-size: .85rem;
    }

/* KPI strip inside hero */
.hd-hero__kpi {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid rgba(255,255,255,.08);
    margin-top: .25rem;
}

.hd-kpi {
    padding: 1.1rem 1.25rem 1.3rem;
    border-right: 1px solid rgba(255,255,255,.07);
    position: relative;
    align-items: center;
    justify-content: center;
    text-align: center;
}

    .hd-kpi:last-child {
        border-right: none;
    }

.hd-kpi__num {
    font-size: 2.6rem;
    font-weight: 900;
    line-height: 1;
    color: #fff;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}

.hd-kpi__num--sky {
    color: var(--sky);
}

.hd-kpi__num--green {
    color: var(--emerald);
}

.hd-kpi__num--amber {
    color: var(--amber);
}

.hd-kpi__label {
    font-size: .74rem;
    font-weight: 600;
    color: var(--navy-200);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-top: .3rem;
}

.hd-kpi__sub {
    font-size: .72rem;
    color: var(--navy-300);
    margin-top: .15rem;
}

/* ══════════════════════════════════════════════════
   LAYOUT WRAPPERS
   ══════════════════════════════════════════════════ */
.hd-body {
    padding: 1.5rem 1.75rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.hd-row {
    display: grid;
    gap: 1.25rem;
}

.hd-row--2 {
    grid-template-columns: 1fr 1fr;
}

.hd-row--3 {
    grid-template-columns: repeat(3, 1fr);
}

.hd-row--53 {
    grid-template-columns: 3fr 2fr;
}

.hd-row--35 {
    grid-template-columns: 2fr 3fr;
}

/* ══════════════════════════════════════════════════
   CARD
   ══════════════════════════════════════════════════ */
.hd-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-xs);
    overflow: hidden;
}

.hd-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .9rem 1.25rem .7rem;
    border-bottom: 1px solid var(--border);

}

.hd-card__title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--tx-mid);
    margin: 0;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hd-card__icon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    flex-shrink: 0;
}

.hd-card__icon--sky {
    background: var(--sky-pale);
    color: var(--sky-dim);
}

.hd-card__icon--green {
    background: var(--emerald-pale);
    color: var(--emerald-dim);
}

.hd-card__icon--amber {
    background: var(--amber-pale);
    color: var(--amber-dim);
}

.hd-card__icon--navy {
    background: var(--navy-50);
    color: var(--navy-600);
}

.hd-card__icon--violet {
    background: var(--violet-pale);
    color: var(--violet);
}

.hd-card__body {
    padding: 1.1rem 1.25rem;
}

.hd-card__body--flush {
    padding: 0;
}

/* ══════════════════════════════════════════════════
   STAT GRID (6 cards)
   ══════════════════════════════════════════════════ */
.hd-stat-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1px;
    background: var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-xs);
}

.hd-stat {
    background: var(--surface);
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    transition: background .15s;
    align-items: center;
    justify-content: center;
    text-align: center;
}

    .hd-stat:hover {
        background: var(--surface2);
    }

.hd-stat__icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin-bottom: .15rem;
}

.hd-stat__val {
    font-size: 1.65rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.02em;
}

.hd-stat__lbl {
    font-size: .71rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tx-lo);
}

.hd-stat__sub {
    font-size: .68rem;
    color: var(--tx-lo);
}

/* Màu variant */
.hd-stat--sky .hd-stat__icon {
    background: var(--sky-pale);
    color: var(--sky-dim);
}

.hd-stat--sky .hd-stat__val {
    color: var(--sky-dim);
}

.hd-stat--green .hd-stat__icon {
    background: var(--emerald-pale);
    color: var(--emerald-dim);
}

.hd-stat--green .hd-stat__val {
    color: var(--emerald-dim);
}

.hd-stat--violet .hd-stat__icon {
    background: var(--violet-pale);
    color: var(--violet);
}

.hd-stat--violet .hd-stat__val {
    color: var(--violet);
}

.hd-stat--rose .hd-stat__icon {
    background: var(--rose-pale);
    color: var(--rose);
}

.hd-stat--rose .hd-stat__val {
    color: var(--rose);
}

.hd-stat--amber .hd-stat__icon {
    background: var(--amber-pale);
    color: var(--amber-dim);
}

.hd-stat--amber .hd-stat__val {
    color: var(--amber-dim);
}

.hd-stat--navy .hd-stat__icon {
    background: var(--navy-50);
    color: var(--navy-500);
}

.hd-stat--navy .hd-stat__val {
    color: var(--navy-500);
}

/* ══════════════════════════════════════════════════
   TABLE shared
   ══════════════════════════════════════════════════ */
.hd-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.hd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
}

    .hd-table th {
        background: var(--surface2);
        color: var(--tx-lo);
        font-size: .71rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        padding: .55rem .85rem;
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
        text-align: center;
    }

        .hd-table th:first-child {
            text-align: left;
        }

    .hd-table td {
        padding: .5rem .85rem;
        border-bottom: 1px solid var(--border);
        color: var(--tx-hi);
        text-align: center;
    }

        .hd-table td:first-child {
            text-align: left;
        }

    .hd-table tr:last-child td {
        border-bottom: none;
    }

    .hd-table tr:hover td {
        background: var(--navy-50);
    }

.hd-table__total td {
    background: var(--surface2);
    font-weight: 700;
    border-top: 1.5px solid var(--border2);
    border-bottom: none;
    color: var(--tx-hi);
}

/* ══════════════════════════════════════════════════
   KHỐI BADGES
   ══════════════════════════════════════════════════ */
.hd-khoi {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .18rem .55rem;
    border-radius: 5px;
    font-size: .72rem;
    font-weight: 700;
}

.hd-khoi-6 {
    background: var(--sky-pale);
    color: #0369A1;
}

.hd-khoi-7 {
    background: var(--emerald-pale);
    color: var(--emerald-dim);
}

.hd-khoi-8 {
    background: var(--amber-pale);
    color: var(--amber-dim);
}

.hd-khoi-9 {
    background: var(--violet-pale);
    color: var(--violet);
}

/* ══════════════════════════════════════════════════
   KHỐI ACCORDION
   ══════════════════════════════════════════════════ */
.hd-accordion {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.hd-accordion__info {
    background: var(--navy-50);
    border: 1px solid var(--navy-100);
    border-radius: var(--r-md);
    padding: .65rem 1rem;
    font-size: .8rem;
    color: var(--navy-600);
}

    .hd-accordion__info strong {
        color: var(--navy-800);
    }

.hd-details {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--surface);
    transition: border-color .15s;
}

    .hd-details[open] {
        border-color: var(--navy-200);
        box-shadow: var(--sh-sm);
    }

.hd-details__summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .7rem 1rem;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
    user-select: none;
    transition: background .12s;
}

    .hd-details__summary::-webkit-details-marker {
        display: none;
    }

    .hd-details__summary:hover {
        background: var(--navy-50);
    }

.hd-details__caret {
    font-size: .75rem;
    color: var(--tx-lo);
    transition: transform .15s;
    flex-shrink: 0;
}

.hd-details[open] .hd-details__caret {
    transform: rotate(180deg);
}

.hd-details__left {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.hd-details__subtitle {
    font-size: .74rem;
    color: var(--tx-lo);
}

.hd-details__pills {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}

.hd-details__pill {
    font-size: .69rem;
    font-weight: 600;
    color: var(--tx-mid);
    background: var(--border);
    border-radius: 99px;
    padding: .15rem .5rem;
}

.hd-detail-lop {
    font-weight: 600;
    padding-left: 1.25rem !important;
}

.hd-detail-empty {
    text-align: center !important;
    color: var(--tx-lo) !important;
    font-style: italic;
}

/* School total banner */
.hd-school-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    background: var(--navy-900);
    border-radius: var(--r-md);
    padding: .9rem 1.15rem;
    margin: .5rem;
}

.hd-school-total__title {
    font-size: .9rem;
    font-weight: 800;
    color: #fff;
}

.hd-school-total__year {
    font-size: .73rem;
    color: var(--navy-200);
    margin-top: .1rem;
}

.hd-school-total__metrics {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.hd-school-total__metric {
    font-size: .73rem;
    font-weight: 600;
    color: var(--navy-100);
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 99px;
    padding: .2rem .6rem;
}

/* ══════════════════════════════════════════════════
   XẾP LOẠI
   ══════════════════════════════════════════════════ */
.hd-hk-tabs {
    display: flex;
    gap: .3rem;
}

.hd-hk-tab {
    padding: .25rem .7rem;
    font-size: .76rem;
    font-weight: 600;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: transparent;
    color: var(--tx-mid);
    cursor: pointer;
    transition: all .12s;
}

    .hd-hk-tab:hover {
        border-color: var(--navy-300);
        color: var(--navy-600);
    }

.hd-hk-tab--active {
    background: var(--navy-900);
    color: #fff;
    border-color: var(--navy-900);
}

/* XL summary row */
.hd-xl-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    margin-bottom: 1rem;
}

.hd-xl-item {
    background: var(--surface);
    padding: .75rem .9rem;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    border-left: 3px solid transparent;
}

.hd-xl-item--tot {
    border-left-color: var(--sky-dim);
    background: #F0F9FF;
}

.hd-xl-item--kha {
    border-left-color: var(--emerald-dim);
    background: #F0FDF4;
}

.hd-xl-item--dat {
    border-left-color: var(--amber-dim);
    background: #FFFBEB;
}

.hd-xl-item--cdat {
    border-left-color: var(--red-dim);
    background: #FFF5F5;
}

.hd-xl-item__num {
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1;
}

.hd-xl-item--tot .hd-xl-item__num {
    color: var(--sky-dim);
}

.hd-xl-item--kha .hd-xl-item__num {
    color: var(--emerald-dim);
}

.hd-xl-item--dat .hd-xl-item__num {
    color: var(--amber-dim);
}

.hd-xl-item--cdat .hd-xl-item__num {
    color: var(--red-dim);
}

.hd-xl-item__lbl {
    font-size: .74rem;
    font-weight: 700;
    color: var(--tx-hi);
}

.hd-xl-item__pct {
    font-size: .7rem;
    color: var(--tx-lo);
}

/* XL table colours */
.hd-table th.xl-tot, .hd-table td.xl-tot {
    color: var(--sky-dim);
    font-weight: 700;
}

.hd-table th.xl-kha, .hd-table td.xl-kha {
    color: var(--emerald-dim);
    font-weight: 700;
}

.hd-table th.xl-dat, .hd-table td.xl-dat {
    color: var(--amber-dim);
    font-weight: 700;
}

.hd-table th.xl-cdat, .hd-table td.xl-cdat {
    color: var(--red-dim);
    font-weight: 700;
}

.hd-xl-pct {
    font-size: .7rem;
    color: var(--tx-lo);
    margin-left: 3px;
}

/* Expand row */
.hd-expand-btn {
    background: transparent;
    border: none;
    color: inherit;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: inherit;
    cursor: pointer;
}

    .hd-expand-btn:hover {
        color: var(--sky-dim);
    }

.hd-expand-row td {
    background: var(--navy-50) !important;
    padding: .85rem 1rem !important;
    border-top: none;
}

.hd-expand-row .hd-table {
    font-size: .8rem;
}

    .hd-expand-row .hd-table th {
        background: var(--navy-100);
    }

    .hd-expand-row .hd-table tr:last-child td {
        border-bottom: none;
    }

/* ══════════════════════════════════════════════════
   TT22 KHUNG
   ══════════════════════════════════════════════════ */
.hd-tt22-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .75rem;
}

.hd-tt22-card {
    border-radius: var(--r-md);
    padding: 1rem .9rem;
    text-align: center;
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
}

    .hd-tt22-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
    }

.hd-tt22-lv {
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
}

.hd-tt22-name {
    font-size: .8rem;
    font-weight: 700;
    margin: .3rem 0 .4rem;
}

.hd-tt22-desc {
    font-size: .7rem;
    line-height: 1.5;
    color: inherit;
    opacity: .92;
}

.hd-tt22-T {
    background: #F0FDF4;
    border-color: #BBF7D0;
    color: #065F46;
}

    .hd-tt22-T::before {
        background: var(--emerald-dim);
    }

    .hd-tt22-T .hd-tt22-lv {
        color: var(--emerald-dim);
    }

.hd-tt22-K {
    background: #EFF6FF;
    border-color: #BFDBFE;
    color: #1E40AF;
}

    .hd-tt22-K::before {
        background: #3B82F6;
    }

    .hd-tt22-K .hd-tt22-lv {
        color: #3B82F6;
    }

.hd-tt22-D {
    background: #FFFBEB;
    border-color: #FDE68A;
    color: #92400E;
}

    .hd-tt22-D::before {
        background: var(--amber-dim);
    }

    .hd-tt22-D .hd-tt22-lv {
        color: var(--amber-dim);
    }

.hd-tt22-CD {
    background: #FFF5F5;
    border-color: #FED7D7;
    color: #9B2C2C;
}

    .hd-tt22-CD::before {
        background: var(--red-dim);
    }

    .hd-tt22-CD .hd-tt22-lv {
        color: var(--red-dim);
    }

/* ══════════════════════════════════════════════════
   INFO NOTE
   ══════════════════════════════════════════════════ */
.hd-note {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    background: var(--sky-pale);
    border: 1px solid #BAE6FD;
    border-radius: var(--r-sm);
    padding: .65rem .9rem;
    font-size: .76rem;
    color: #0C4A6E;
    line-height: 1.65;
    margin-top: .85rem;
}

    .hd-note i {
        color: var(--sky-dim);
        flex-shrink: 0;
        margin-top: .1rem;
    }

    .hd-note strong {
        color: #0A3355;
    }

/* ══════════════════════════════════════════════════
   MÔN HỌC CHIPS
   ══════════════════════════════════════════════════ */
.hd-mon-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .6rem;
}

.hd-chip {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    padding: .25rem .6rem;
    border-radius: 20px;
    font-size: .74rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.hd-chip--ds {
    background: var(--sky-pale);
    color: var(--sky-dim);
    border-color: #BAE6FD;
}

.hd-chip--nx {
    background: var(--emerald-pale);
    color: var(--emerald-dim);
    border-color: #A7F3D0;
}

.hd-chip em {
    font-style: normal;
    font-weight: 800;
    font-size: .65rem;
    opacity: .7;
    margin-left: 1px;
}

.hd-mon-legend {
    display: flex;
    gap: .65rem;
    margin-top: .15rem;
}

/* ══════════════════════════════════════════════════
   NĂM HỌC LIST
   ══════════════════════════════════════════════════ */
.hd-namhoc-list {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}

.hd-namhoc-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem 1rem;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: var(--surface);
    min-width: 220px;
    transition: border-color .12s, box-shadow .12s;
}

    .hd-namhoc-item:hover {
        border-color: var(--navy-200);
        box-shadow: var(--sh-xs);
    }

.hd-namhoc-item--active {
    border-color: var(--sky-dim);
    background: var(--sky-pale);
    box-shadow: var(--sh-xs);
}

.hd-namhoc-item__icon {
    font-size: 1rem;
    color: var(--tx-lo);
    flex-shrink: 0;
}

.hd-namhoc-item--active .hd-namhoc-item__icon {
    color: var(--emerald-dim);
}

.hd-namhoc-item__name {
    font-size: .86rem;
    font-weight: 700;
    color: var(--tx-hi);
}

.hd-namhoc-item__range {
    font-size: .72rem;
    color: var(--tx-lo);
    margin-top: .05rem;
}

.hd-namhoc-badge {
    margin-left: auto;
    background: var(--sky-dim);
    color: #fff;
    font-size: .67rem;
    font-weight: 700;
    padding: .18rem .55rem;
    border-radius: 20px;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════
   ĐỐI TƯỢNG TABLE
   ══════════════════════════════════════════════════ */
.hd-obj-label strong {
    font-size: .82rem;
}

/* ══════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════ */
.hd-footer {
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: .85rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .74rem;
    color: var(--tx-lo);
    flex-wrap: wrap;
    gap: .5rem;
}

.hd-footer__brand {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-weight: 600;
    color: var(--tx-mid);
}

    .hd-footer__brand i {
        color: var(--sky-dim);
    }

/* ══════════════════════════════════════════════════
   ALERT
   ══════════════════════════════════════════════════ */
.hd-alert {
    display: flex;
    align-items: center;
    gap: .55rem;
    background: var(--amber-pale);
    border: 1px solid #FDE68A;
    color: #92400E;
    border-radius: var(--r-md);
    padding: .75rem 1.1rem;
    font-size: .84rem;
    margin: 1.25rem 1.75rem 0;
}

/* ══════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════ */
@media (max-width: 1100px) {
    .hd-row--2,
    .hd-row--53,
    .hd-row--35 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    .hd-hero__inner {
        padding: 1.25rem 1.25rem 0;
    }

    .hd-hero__title {
        font-size: 1.25rem;
    }

    .hd-body {
        padding: 1.1rem 1.1rem 2rem;
    }

    .hd-stat-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .hd-hero__kpi {
        grid-template-columns: repeat(3, 1fr);
    }

    .hd-kpi__num {
        font-size: 2rem;
    }

    .hd-tt22-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hd-xl-summary {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 599px) {
    .hd-hero__meta {
        display: none;
    }

    .hd-hero__kpi {
        grid-template-columns: repeat(2, 1fr);
    }

    .hd-kpi:nth-child(3) {
        display: none;
    }

    .hd-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hd-tt22-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hd-xl-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .hd-namhoc-item {
        min-width: 100%;
    }

    .hd-school-total {
        flex-direction: column;
        align-items: flex-start;
    }

    .hd-footer {
        flex-direction: column;
        text-align: center;
    }

    .hd-alert {
        margin: 1rem;
    }

    .hd-body {
        padding: .85rem .85rem 2rem;
    }
}

/* ══════════════════════════════════════════════════
   THEME ĐỒNG BỘ VỚI THONGKEMENU
   ══════════════════════════════════════════════════ */
.hd {
    min-height: calc(100vh - 20px);
    transition: background-color .25s ease, color .25s ease;
}

.main-content:has(.hd.light-theme) {
    background: #edf5ff;
}

.main-content:has(.hd.dark-theme) {
    background: #07111f;
}

/* Giao diện sáng mặc định: hero xanh dương - trắng */
.hd.light-theme .hd-hero {
    border: 1px solid #c8def5;
    border-radius: 18px;
    background:
        radial-gradient(ellipse 55% 90% at 92% 8%, rgba(56,189,248,.22), transparent 62%),
        radial-gradient(ellipse 45% 75% at 8% 92%, rgba(147,197,253,.22), transparent 58%),
        linear-gradient(145deg, #ffffff, #eff7ff 62%, #e5f3ff);
    box-shadow: 0 12px 30px rgba(37,99,235,.11), inset 0 1px 0 #fff;
}

    .hd.light-theme .hd-hero::before {
        background: radial-gradient(ellipse 60% 80% at 90% 20%, rgba(59,130,246,.08), transparent 60%), radial-gradient(ellipse 40% 60% at 10% 80%, rgba(14,165,233,.07), transparent 55%);
    }

    .hd.light-theme .hd-hero::after {
        background: linear-gradient(90deg, transparent, rgba(59,130,246,.42), transparent);
    }

.hd.light-theme .hd-hero__eyebrow {
    color: #0369a1;
    border-color: #bae6fd;
    background: rgba(224,242,254,.92);
}

.hd.light-theme .hd-hero__title {
    color: #123f73;
}

.hd.light-theme .hd-hero__sub {
    color: #3f6288;
}

.hd.light-theme .hd-hero__sub-dot {
    background: #60a5fa;
}

.hd.light-theme .hd-meta-pill {
    color: #315b82;
    border-color: #c8def4;
    background: rgba(255,255,255,.86);
    box-shadow: 0 4px 12px rgba(37,99,235,.07);
}

.hd.light-theme .hd-hero__kpi {
    border-top-color: #d5e6f7;
}

.hd.light-theme .hd-kpi {
    border-right-color: #d5e6f7;
}

.hd.light-theme .hd-kpi__num {
    color: #123f73;
}

.hd.light-theme .hd-kpi__num--sky {
    color: #0284c7;
}

.hd.light-theme .hd-kpi__num--green {
    color: #059669;
}

.hd.light-theme .hd-kpi__num--amber {
    color: #d97706;
}

.hd.light-theme .hd-kpi__label {
    color: #35597f;
}

.hd.light-theme .hd-kpi__sub {
    color: #567394;
}

/* Giao diện tối navy */
.hd.dark-theme {
    --navy-800: #dceafb;
    --navy-600: #75a9e5;
    --navy-300: #7fa1c4;
    --navy-200: #a8bdd4;
    --navy-100: #1b3149;
    --navy-50: #13253a;
    --sky-pale: #0c3347;
    --emerald: #34d399;
    --emerald-dim: #34d399;
    --emerald-pale: #0d382f;
    --amber: #fbbf24;
    --amber-dim: #fbbf24;
    --amber-pale: #3b2b10;
    --red: #fb7185;
    --red-dim: #fb7185;
    --red-pale: #3b1921;
    --violet: #a78bfa;
    --violet-pale: #2d2450;
    --rose: #fb7185;
    --rose-pale: #3b1d2a;
    --bg: #07111f;
    --surface: #0d1c2e;
    --surface2: #12243a;
    --border: #213852;
    --border2: #31506e;
    --tx-hi: #e8f1fb;
    --tx-mid: #d5e2f0;
    --tx-lo: #a9bfd6;
    --sh-xs: 0 1px 3px rgba(0,0,0,.28), 0 1px 2px rgba(0,0,0,.2);
    --sh-sm: 0 3px 10px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.22);
    --sh-md: 0 7px 24px rgba(0,0,0,.34), 0 2px 7px rgba(0,0,0,.25);
    --sh-lg: 0 12px 36px rgba(0,0,0,.38), 0 4px 12px rgba(0,0,0,.28);
    background: var(--bg);
}

.hd.dark-theme .hd-hero {
    border: 1px solid #1f3b59;
    border-radius: 18px;
    background:
        radial-gradient(ellipse 60% 80% at 90% 20%, rgba(56,189,248,.11), transparent 60%),
        radial-gradient(ellipse 40% 60% at 10% 80%, rgba(16,185,129,.08), transparent 55%),
        linear-gradient(145deg, #071426, #0c1b35 62%, #102c48);
    box-shadow: 0 16px 36px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.04);
}

.hd.dark-theme .hd-card,
.hd.dark-theme .hd-stat,
.hd.dark-theme .hd-details,
.hd.dark-theme .hd-namhoc-item,
.hd.dark-theme .hd-footer {
    box-shadow: var(--sh-xs);
}

.hd.dark-theme .hd-stat:hover,
.hd.dark-theme .hd-table tr:hover td,
.hd.dark-theme .hd-details__summary:hover {
    background: #172a40;
}

.hd.dark-theme .hd-hk-tab:hover {
    color: #93c5fd;
    border-color: #4b78a8;
}

.hd.dark-theme .hd-hk-tab--active {
    color: #fff;
    border-color: #2563eb;
    background: linear-gradient(110deg, #2563eb, #0ea5e9);
}

.hd.dark-theme .hd-meta-pill {
    color: #eef6ff;
    border-color: rgba(160, 204, 255, .24);
    background: rgba(143, 196, 255, .12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.hd.dark-theme .hd-meta-pill i {
    color: #7dd3fc;
}

.hd.dark-theme .hd-school-total {
    border: 1px solid #294663;
    background: linear-gradient(135deg, #0b1c30, #102a45);
}

.hd.dark-theme .hd-school-total__title {
    color: #f8fbff;
}

.hd.dark-theme .hd-school-total__year {
    color: #c9dbef;
}

.hd.dark-theme .hd-school-total__metric {
    color: #eef6ff;
    background: rgba(148, 197, 255, .16);
    border-color: rgba(186, 219, 255, .28);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.hd.dark-theme .hd-xl-item--tot {
    background: #0c2c40;
}

.hd.dark-theme .hd-xl-item--kha {
    background: #0c302a;
}

.hd.dark-theme .hd-xl-item--dat {
    background: #34270f;
}

.hd.dark-theme .hd-xl-item--cdat {
    background: #351820;
}

.hd.dark-theme .hd-tt22-T {
    color: #a7f3d0;
    border-color: #166044;
    background: #0c3028;
}

.hd.dark-theme .hd-tt22-K {
    color: #bfdbfe;
    border-color: #245a91;
    background: #102b48;
}

.hd.dark-theme .hd-tt22-D {
    color: #fde68a;
    border-color: #76520f;
    background: #34270e;
}

.hd.dark-theme .hd-tt22-CD {
    color: #fecdd3;
    border-color: #7b293b;
    background: #351820;
}

.hd.dark-theme .hd-note {
    color: #bae6fd;
    border-color: #245776;
    background: #0c2d42;
}

    .hd.dark-theme .hd-note strong {
        color: #e0f2fe;
    }

.hd.dark-theme .hd-alert {
    color: #fde68a;
    border-color: #76520f;
    background: #35270d;
}

.hd.dark-theme .hd-namhoc-item--active {
    border-color: #0ea5e9;
    background: #0c3048;
}

.hd.dark-theme .hd-chip--ds {
    border-color: #235c78;
}

.hd.dark-theme .hd-chip--nx {
    border-color: #1b624d;
}

@media (max-width: 599px) {
    .hd.light-theme .hd-hero,
    .hd.dark-theme .hd-hero {
        border-radius: 14px;
    }
}