/* =====================================================================
   HỆ THỐNG ĐÁNH GIÁ KPI VIÊN CHỨC - THCS XUÂN TÂN
   Giao diện "Sky Blue" - lấy cảm hứng từ giao diện Sapo ND Kids Toy
   Xanh da trời chủ đạo #0188f7 - hiện đại, sang trọng, responsive toàn diện
   Desktop / Laptop / iPad / Tablet / Mobile
   ===================================================================== */

/* ============================ 1. DESIGN TOKENS ============================ */
:root {
    /* --- Xanh da trời chủ đạo --- */
    --primary:         #0188f7;
    --primary-600:     #0175d4;
    --primary-700:     #0f2f64;
    --primary-800:     #0b2450;
    --primary-500:     #3ba4fb;
    --primary-400:     #6fbcfd;
    --primary-300:     #a5d5fe;
    --primary-200:     #cfe8ff;
    --primary-100:     #e2f1ff;
    --primary-50:      #eff8ff;
    --primary-25:      #f7fbff;

    /* --- Màu nhấn (theo giao diện tham khảo) --- */
    --accent:          #fc9f13;
    --accent-2:        #06b6d4;
    --accent-light:    #fef4e2;
    --pink:            #be1457;
    --violet:          #5530af;
    --amber:           #b86600;

    /* --- Trạng thái --- */
    --success:         #16a34a;
    --success-dark:    #15803d;
    --success-light:   #dcfce7;
    --warning:         #f59e0b;
    --warning-dark:    #b45309;
    --warning-light:   #fef3c7;
    --danger:          #e11d48;
    --danger-dark:     #9f1239;
    --danger-light:    #ffe4e6;
    --info:            #0188f7;
    --info-light:      #e2f1ff;

    /* --- Trung tính --- */
    --text:            #111827;
    --text-soft:       #1f2937;
    --text-navy:       #0f2f64;
    --text-muted:      #64748b;
    --text-faint:      #94a3b8;
    --border:          #e5e7eb;
    --border-strong:   #cbd5e1;
    --border-soft:     #f1f5f9;
    --bg:              #f8fafc;
    --bg-soft:         #f1f5f9;
    --bg-glass:        rgba(255, 255, 255, .88);
    --white:           #ffffff;

    /* --- Bo góc (giao diện tham khảo dùng bo góc lớn) --- */
    --radius-xs:       8px;
    --radius-sm:       12px;
    --radius-md:       14px;
    --radius:          16px;
    --radius-lg:       20px;
    --radius-xl:       28px;
    --radius-full:     999px;

    /* --- Đổ bóng --- */
    --shadow-xs:       0 1px 2px rgba(15, 47, 100, .05);
    --shadow-sm:       0 0 6px rgba(50, 50, 93, .05), 0 1px 3px rgba(0, 0, 0, .04);
    --shadow:          0 0 6px rgba(50, 50, 93, .06), 0 6px 18px rgba(50, 50, 93, .06);
    --shadow-md:       0 10px 30px rgba(15, 47, 100, .10), 0 2px 8px rgba(50, 50, 93, .05);
    --shadow-lg:       0 18px 40px rgba(15, 23, 42, .12);
    --shadow-blue:     0 8px 22px rgba(1, 136, 247, .28);
    --shadow-blue-lg:  0 14px 32px rgba(1, 136, 247, .38);

    /* --- Kích thước --- */
    --header-height:   74px;
    --topbar-height:   38px;
    --sidebar-width:   276px;
    --container:       1320px;

    /* --- Chuyển động --- */
    --transition:      .25s cubic-bezier(.4, 0, .2, 1);
    --transition-slow: .5s cubic-bezier(.4, 0, .2, 1);
}

/* ============================ 2. RESET ============================ */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 16px);
}

body {
    margin: 0;
    font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 15px;
    line-height: 1.65;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 { margin: 0 0 .5rem; font-weight: 800; line-height: 1.3; color: var(--text-navy); letter-spacing: -.01em; }
h1 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
h2 { font-size: clamp(1.4rem, 2.4vw, 1.95rem); }
h3 { font-size: 1.15rem; }
p  { margin: 0 0 1rem; }
a  { color: var(--primary-600); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--primary); }
img { max-width: 100%; height: auto; }
ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }
hr { border: 0; border-top: 1px solid var(--border); margin: 1.5rem 0; }
strong { font-weight: 800; color: var(--text-soft); }

code, pre {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: .875em;
}

::selection { background: var(--primary-200); color: var(--primary-800); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg-soft); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--primary-400), var(--primary-600));
    border-radius: var(--radius-full);
    border: 2px solid var(--bg-soft);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--primary-500), var(--primary)); }

/* ============================ 3. TIỆN ÍCH ============================ */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-muted  { color: var(--text-muted); }
.text-small  { font-size: .85rem; }
.text-tiny   { font-size: .72rem; }
.text-bold   { font-weight: 800; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; } .mb-4 { margin-bottom: 2rem; }
.w-full { width: 100%; }
.text-break { word-break: break-word; overflow-wrap: anywhere; }
.inline-form { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.hidden { display: none !important; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1 { gap: .5rem; } .gap-2 { gap: 1rem; } .gap-3 { gap: 1.5rem; }

.row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px; }
.col-3  { grid-column: span 3; }  .col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }  .col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }  .col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }  .col-12 { grid-column: span 12; }

/* ============================ 4. NÚT ============================ */
.btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .6875rem 1.375rem;
    border: 1px solid transparent;
    border-radius: var(--radius-xs);
    font-size: .9rem; font-weight: 700; font-family: inherit;
    cursor: pointer; white-space: nowrap;
    transition: all var(--transition);
    line-height: 1.45;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.btn i { font-size: .95em; }
.btn:focus-visible { outline: 3px solid rgba(1, 136, 247, .4); outline-offset: 2px; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none !important; }

.btn-primary {
    background: var(--primary);
    color: #fff;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-blue);
}
.btn-primary:hover:not(:disabled) {
    background: var(--primary-600);
    transform: translateY(-2px);
    box-shadow: var(--shadow-blue-lg);
    color: #fff;
}
.btn-primary:active:not(:disabled) { transform: translateY(0); }

.btn-secondary {
    background: var(--white); color: var(--primary-600);
    border-color: var(--border); border-radius: var(--radius-full);
    box-shadow: var(--shadow-xs);
}
.btn-secondary:hover:not(:disabled) {
    background: var(--primary-50); border-color: var(--primary-300);
    color: var(--primary); transform: translateY(-2px);
    box-shadow: var(--shadow);
}
.btn-success { background: var(--success); color: #fff; border-radius: var(--radius-full); box-shadow: 0 8px 20px rgba(22,163,74,.25); }
.btn-success:hover:not(:disabled) { background: var(--success-dark); transform: translateY(-2px); color: #fff; }
.btn-warning { background: var(--accent); color: #fff; border-radius: var(--radius-full); box-shadow: 0 8px 20px rgba(252,159,19,.25); }
.btn-warning:hover:not(:disabled) { background: var(--amber); transform: translateY(-2px); color: #fff; }
.btn-danger { background: var(--danger); color: #fff; border-radius: var(--radius-full); box-shadow: 0 8px 20px rgba(225,29,72,.25); }
.btn-danger:hover:not(:disabled) { background: var(--danger-dark); transform: translateY(-2px); color: #fff; }
.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover:not(:disabled) { background: var(--bg-soft); color: var(--text); }
.btn-outline-light {
    background: rgba(255,255,255,.1); color: #fff;
    border-color: rgba(255,255,255,.4); border-radius: var(--radius-full);
    backdrop-filter: blur(6px);
}
.btn-outline-light:hover:not(:disabled) { background: rgba(255,255,255,.2); border-color: #fff; color: #fff; transform: translateY(-2px); }

.btn-sm { padding: .4375rem .9rem; font-size: .8125rem; }
.btn-lg { padding: .9375rem 1.875rem; font-size: .975rem; }
.btn-icon { padding: .5rem; width: 40px; height: 40px; border-radius: var(--radius-xs); }
.btn-block { width: 100%; }

/* ============================ 5. THẺ ============================ */
.card {
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.card-hover:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
    border-color: var(--primary-200);
}
.card-header {
    padding: 1.125rem 1.5rem;
    border-bottom: 1px solid var(--border-soft);
    background: var(--white);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.card-title { font-size: 1.0625rem; font-weight: 800; margin: 0; display: flex; align-items: center; gap: .55rem; color: var(--text-navy); }
.card-body { padding: 1.5rem; }
.card-footer { padding: 1rem 1.5rem; background: var(--bg-soft); border-top: 1px solid var(--border-soft); }

/* ============================ 6. NHÃN ============================ */
.badge {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .7rem;
    border-radius: var(--radius-xs);
    font-size: .75rem; font-weight: 800;
    letter-spacing: .02em;
    white-space: nowrap;
}
.badge-primary { background: var(--primary-100); color: var(--primary-600); }
.badge-success { background: var(--success-light); color: var(--success-dark); }
.badge-warning { background: var(--warning-light); color: var(--warning-dark); }
.badge-danger  { background: var(--danger-light); color: var(--danger-dark); }
.badge-info    { background: var(--info-light); color: var(--primary-600); }
.badge-accent  { background: var(--accent-light); color: var(--amber); }
.badge-muted   { background: var(--bg-soft); color: var(--text-muted); }

/* ============================ 7. BẢNG ============================ */
.table-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-sm); border: 1px solid var(--border-soft);
}
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table thead th {
    background: var(--primary-50);
    padding: .8125rem 1rem;
    text-align: left;
    font-weight: 800;
    font-size: .78rem;
    color: var(--primary-700);
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
}
.table tbody td { padding: .875rem 1rem; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background var(--transition); }
.table tbody tr:hover { background: var(--primary-25); }
.table .total { background: var(--primary-50); font-weight: 800; color: var(--primary-700); }
.table-compact tbody td, .table-compact thead th { padding: .55rem .8rem; }

/* ============================ 8. FORM ============================ */
.form-group { margin-bottom: 1.125rem; }
.form-label {
    display: block; margin-bottom: .4rem;
    font-size: .85rem; font-weight: 700; color: var(--text-soft);
}
.form-label .required { color: var(--danger); }
.form-control {
    width: 100%;
    padding: .6875rem .9375rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xs);
    font-size: .9rem; font-family: inherit;
    background: var(--white);
    color: var(--text);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control::placeholder { color: var(--text-faint); }
.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(1, 136, 247, .12);
}
.form-control:disabled { background: var(--bg-soft); cursor: not-allowed; }
textarea.form-control { min-height: 104px; resize: vertical; }
select.form-control {
    cursor: pointer; appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8.5L1.5 4h9z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .85rem center;
    padding-right: 2.25rem;
}
.form-hint { margin-top: .4rem; font-size: .8125rem; color: var(--text-muted); }
.form-error { margin-top: .4rem; font-size: .8125rem; color: var(--danger); }
.grid-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 1.25rem; }
.grid-form-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 1.25rem; }

/* ============================ 9. THÔNG BÁO ============================ */
.alert {
    display: flex; align-items: flex-start; gap: .8rem;
    padding: 1rem 1.125rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    border-left-width: 4px;
    margin-bottom: 1.25rem;
    font-size: .9rem;
}
.alert i { flex-shrink: 0; margin-top: .18rem; }
.alert-success { background: var(--success-light); border-color: #86efac; border-left-color: var(--success); color: var(--success-dark); }
.alert-danger  { background: var(--danger-light); border-color: #fda4af; border-left-color: var(--danger); color: var(--danger-dark); }
.alert-warning { background: var(--warning-light); border-color: #fcd34d; border-left-color: var(--warning); color: var(--warning-dark); }
.alert-info    { background: var(--info-light); border-color: #93c5fd; border-left-color: var(--info); color: var(--primary-700); }

/* ============================ 10. TOPBAR ============================ */
.site-topbar {
    background: var(--primary);
    color: rgba(255, 255, 255, .95);
    font-size: .8rem;
}
.topbar-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; min-height: var(--topbar-height); flex-wrap: wrap;
}
.topbar-left { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.topbar-item { display: inline-flex; align-items: center; gap: .4rem; color: rgba(255,255,255,.92); }
.topbar-item:hover { color: #fff; }
.topbar-item i { font-size: .8rem; opacity: .85; }
.topbar-right { display: flex; align-items: center; gap: 1.25rem; }
.topbar-links { display: flex; align-items: center; gap: 1rem; }
.topbar-links a { color: rgba(255,255,255,.85); font-weight: 600; }
.topbar-links a:hover { color: #fff; }

/* ============================ 11. HEADER ============================ */
.site-header {
    position: sticky; top: 0; z-index: 200;
    background: var(--white);
    border-bottom: 1px solid var(--border-soft);
    box-shadow: 0 1px 3px rgba(50, 50, 93, .05);
    transition: box-shadow var(--transition);
}
.site-header.scrolled { box-shadow: var(--shadow-md); }
.header-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.25rem; min-height: var(--header-height);
}

.brand { display: flex; align-items: center; gap: .8rem; color: var(--text); flex-shrink: 0; }
.brand:hover { color: var(--text); }
.brand-logo {
    width: 46px; height: 46px; border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--primary-500), var(--primary) 55%, var(--primary-600));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.25rem; flex-shrink: 0;
    box-shadow: var(--shadow-blue);
    position: relative; overflow: hidden;
}
.brand-logo::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(140deg, rgba(255,255,255,.35), transparent 55%);
}
.brand-text strong { display: block; font-size: 1.05rem; font-weight: 800; line-height: 1.2; color: var(--text-navy); }
.brand-text small { display: block; font-size: .74rem; color: var(--text-muted); font-weight: 600; }

.nav-toggle {
    display: none; background: none; border: 0; cursor: pointer;
    width: 42px; height: 42px; border-radius: var(--radius-xs);
    color: var(--text-navy); font-size: 1.25rem;
    align-items: center; justify-content: center;
    transition: background var(--transition);
}
.nav-toggle:hover { background: var(--primary-50); color: var(--primary); }

.main-nav { display: flex; align-items: center; gap: .15rem; }
.nav-link {
    position: relative;
    padding: .55rem .9rem;
    border-radius: var(--radius-xs);
    font-size: .9rem; font-weight: 700; color: var(--text-navy);
    transition: all var(--transition);
    white-space: nowrap;
    display: inline-flex; align-items: center; gap: .45rem;
}
.nav-link i { font-size: .85em; opacity: .75; }
.nav-link:hover { color: var(--primary); background: var(--primary-50); }
.nav-link.active { color: var(--primary); background: var(--primary-50); }
.nav-link.active::after {
    content: ''; position: absolute; left: 50%; bottom: -1px;
    transform: translateX(-50%);
    width: 22px; height: 3px; border-radius: var(--radius-full);
    background: var(--primary);
}

.header-actions { display: flex; align-items: center; gap: .6rem; }
.icon-btn {
    position: relative;
    width: 42px; height: 42px; border-radius: var(--radius-xs);
    border: 1px solid var(--border); background: var(--white);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); cursor: pointer; font-size: .95rem;
    transition: all var(--transition);
}
.icon-btn:hover { background: var(--primary-50); color: var(--primary); border-color: var(--primary-300); transform: translateY(-2px); }
.icon-btn .dot {
    position: absolute; top: -5px; right: -5px;
    min-width: 19px; height: 19px; padding: 0 5px;
    background: var(--danger); color: #fff;
    border-radius: var(--radius-full);
    font-size: .625rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--white);
    box-shadow: 0 2px 6px rgba(225,29,72,.35);
}

.user-chip {
    display: flex; align-items: center; gap: .6rem;
    padding: .3rem .8rem .3rem .3rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
    background: var(--white);
    cursor: pointer;
    transition: all var(--transition);
}
.user-chip:hover { border-color: var(--primary-300); background: var(--primary-50); box-shadow: var(--shadow-sm); }
.user-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: .8125rem; font-weight: 800; flex-shrink: 0;
    object-fit: cover;
}
.user-name { font-size: .85rem; font-weight: 800; line-height: 1.2; display: block; color: var(--text-navy); }
.user-role { font-size: .7rem; color: var(--text-muted); display: block; font-weight: 600; }

.dropdown { position: relative; }
.dropdown-menu {
    position: absolute; top: calc(100% + 10px); right: 0;
    min-width: 240px;
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    padding: .45rem;
    opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98);
    transition: all var(--transition);
    z-index: 300;
}
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.dropdown-item {
    display: flex; align-items: center; gap: .65rem;
    padding: .625rem .8rem;
    border-radius: var(--radius-xs);
    font-size: .875rem; font-weight: 600; color: var(--text);
    transition: background var(--transition), color var(--transition);
    width: 100%; text-align: left;
}
.dropdown-item:hover { background: var(--primary-50); color: var(--primary); }
.dropdown-item i { width: 18px; text-align: center; color: var(--text-muted); }
.dropdown-item:hover i { color: var(--primary); }
.dropdown-divider { height: 1px; background: var(--border-soft); margin: .4rem 0; }

/* ============================ 12. HERO ============================ */
.hero {
    position: relative; overflow: hidden;
    background:
        radial-gradient(900px 460px at 90% -10%, rgba(125, 211, 252, .40), transparent 62%),
        radial-gradient(700px 420px at 4% 110%, rgba(1, 136, 247, .30), transparent 60%),
        linear-gradient(135deg, var(--primary-800) 0%, var(--primary-700) 42%, var(--primary) 100%);
    color: #fff;
    padding: 5.5rem 0 5rem;
    isolation: isolate;
}
.hero::before {
    content: ''; position: absolute; top: -180px; right: -160px;
    width: 520px; height: 520px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.14), transparent 66%);
    z-index: 0;
}
.hero::after {
    content: ''; position: absolute; bottom: -220px; left: -140px;
    width: 460px; height: 460px; border-radius: 50%;
    background: radial-gradient(circle, rgba(6, 182, 212, .26), transparent 68%);
    z-index: 0;
}
.hero-content { position: relative; z-index: 2; max-width: 780px; }
.hero-badge {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .5rem 1.05rem;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.28);
    border-radius: var(--radius-full);
    font-size: .8125rem; font-weight: 700;
    margin-bottom: 1.5rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.hero h1 {
    font-size: clamp(2rem, 5vw, 3.35rem);
    color: #fff; margin-bottom: 1.25rem;
    letter-spacing: -.02em; line-height: 1.15;
    text-shadow: 0 2px 20px rgba(0,0,0,.16);
}
.hero h1 em {
    font-style: normal;
    background: linear-gradient(100deg, #7dd3fc, #fde68a);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hero p {
    font-size: clamp(1rem, 1.7vw, 1.15rem);
    color: rgba(255,255,255,.9); margin-bottom: 2.25rem;
    max-width: 640px; line-height: 1.72;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; }
.hero .btn-primary {
    background: #fff; color: var(--primary);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .2);
}
.hero .btn-primary:hover { background: var(--primary-50); transform: translateY(-3px); color: var(--primary); box-shadow: 0 18px 40px rgba(0,0,0,.26); }
.hero .btn-secondary {
    background: rgba(255,255,255,.1); color: #fff;
    border-color: rgba(255,255,255,.38); backdrop-filter: blur(8px);
}
.hero .btn-secondary:hover { background: rgba(255,255,255,.2); border-color: #fff; color: #fff; transform: translateY(-3px); }

.hero-stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 1.125rem; margin-top: 3.75rem;
    position: relative; z-index: 2;
}
.hero-stat {
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: var(--radius-lg);
    padding: 1.375rem;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform var(--transition), background var(--transition), box-shadow var(--transition);
}
.hero-stat:hover { transform: translateY(-6px); background: rgba(255,255,255,.18); box-shadow: 0 18px 40px rgba(0,0,0,.2); }
.hero-stat .num {
    font-size: 2.1rem; font-weight: 800; line-height: 1; margin-bottom: .4rem;
    background: linear-gradient(180deg, #fff, #bae6fd);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-stat .num span { font-size: .8rem; -webkit-text-fill-color: rgba(255,255,255,.8); }
.hero-stat .label { font-size: .8125rem; color: rgba(255,255,255,.85); font-weight: 600; }

/* ============================ 13. SECTION ============================ */
.section { padding: 4.75rem 0; position: relative; }

/* --- Hero bản gọn (trang chủ) --- */
.hero-compact { padding: 3rem 0 3.25rem; }
.hero-compact .hero-content { max-width: 100%; }
.hero-compact h1 {
    font-size: clamp(1.75rem, 3.6vw, 2.6rem);
    margin-bottom: .85rem;
}
.hero-compact p {
    font-size: 1rem;
    margin-bottom: 1.5rem;
    line-height: 1.65;
    max-width: 620px;
}
.hero-compact .hero-actions { gap: .7rem; }
.hero-compact .hero-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
    margin-top: 0;
}
.hero-compact .hero-stat { padding: .875rem 1rem; border-radius: var(--radius-md); }
.hero-compact .hero-stat:hover { transform: translateY(-3px); }
.hero-compact .hero-stat .num { font-size: 1.5rem; margin-bottom: .15rem; }
.hero-compact .hero-stat .label { font-size: .75rem; }

/* --- Khoảng cách giữa các mục 01 - 04 gọn hơn, sát cạnh nhau --- */
.section-tight { padding: .625rem 0; }
.section-tight + .section-tight { border-top: 1px solid var(--border-soft); }
.section-tight .section-head { margin-bottom: .75rem; }
.section-tight .section-head h2 { font-size: clamp(1.25rem, 2vw, 1.6rem); margin-bottom: .35rem; }
.section-tight .section-head p { font-size: .9rem; margin-bottom: 0; }
.section-tight .section-index { margin-bottom: .45rem; }
/* Mục 01: danh sách đặc điểm dạng lưới 2 cột để cân bằng chiều cao 2 cột */
.section-tight .feature-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem .875rem;
    margin-top: 1rem;
}
.section-tight .feature-list li {
    margin-bottom: 0;
    font-size: .875rem;
    line-height: 1.5;
    align-items: center;
}
.section-tight .feature-list li i { width: 24px; height: 24px; font-size: .7rem; }

.section-alt { background: var(--white); }
.section-head { text-align: center; max-width: 760px; margin: 0 auto 3rem; }
.section-head h2 {
    color: var(--primary);
    letter-spacing: .04em;
    margin-bottom: .8rem;
}
.section-head p { color: var(--text-muted); font-size: 1rem; }
.section-label {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .45rem 1rem;
    background: var(--primary-100); color: var(--primary-600);
    border-radius: var(--radius-full);
    font-size: .75rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .08em;
    margin-bottom: 1rem;
}
.section-label i { color: var(--primary); }

/* ============================ 14. THẺ NHÓM KPI ============================ */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.375rem; }
.kpi-card {
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 1.625rem;
    position: relative; overflow: hidden;
    transition: all var(--transition);
    box-shadow: var(--shadow-sm);
}
.kpi-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: var(--kc, var(--primary));
    transform: scaleX(0); transform-origin: left;
    transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.kpi-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--kc, var(--primary-300)); }
.kpi-card:hover::before { transform: scaleX(1); }
.kpi-card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.kpi-code {
    width: 48px; height: 48px; border-radius: var(--radius-sm);
    background: var(--kc-bg, var(--primary-50)); color: var(--kc, var(--primary));
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; font-weight: 800;
    flex-shrink: 0;
}
.kpi-points { text-align: right; }
.kpi-points strong { display: block; font-size: 1.55rem; font-weight: 800; color: var(--kc, var(--primary)); line-height: 1; }
.kpi-points small { font-size: .74rem; color: var(--text-muted); font-weight: 600; }
.kpi-card h3 { font-size: 1.02rem; margin-bottom: .55rem; line-height: 1.42; }
.kpi-card p { font-size: .85rem; color: var(--text-muted); margin-bottom: 1.125rem; }
.kpi-criteria-list {
    list-style: none; padding: .95rem 0 0; margin: 0;
    border-top: 1px dashed var(--border);
}
.kpi-criteria-list li {
    display: flex; align-items: flex-start; gap: .55rem;
    font-size: .8125rem; color: var(--text-muted); padding: .3rem 0;
}
.kpi-criteria-list li i { color: var(--kc, var(--primary)); margin-top: .35rem; flex-shrink: 0; font-size: .45rem; }
.kpi-criteria-list li .code { font-weight: 800; color: var(--kc, var(--primary)); flex-shrink: 0; }

/* ============================ 15. THẺ SỐ LIỆU ============================ */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 1.25rem; }
.stat-card {
    background: var(--white); border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg); padding: 1.375rem;
    display: flex; align-items: center; gap: 1rem;
    box-shadow: var(--shadow-sm);
    position: relative; overflow: hidden;
    transition: all var(--transition);
}
.stat-card::after {
    content: ''; position: absolute; right: -30px; top: -30px;
    width: 110px; height: 110px; border-radius: 50%;
    background: var(--sc-bg, var(--primary-50)); opacity: .55;
    transition: transform var(--transition-slow);
}
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--primary-200); }
.stat-card:hover::after { transform: scale(1.35); }
.stat-icon {
    width: 56px; height: 56px; border-radius: var(--radius-sm);
    background: var(--sc-bg, var(--primary-50)); color: var(--sc, var(--primary));
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; flex-shrink: 0;
    position: relative; z-index: 1;
}
.stat-info { min-width: 0; position: relative; z-index: 1; }
.stat-value { font-size: 1.8rem; font-weight: 800; line-height: 1.1; margin-bottom: .15rem; color: var(--text-navy); }
.stat-label { font-size: .8125rem; color: var(--text-muted); font-weight: 600; }

/* ============================ 16. TIẾN TRÌNH / VÒNG TRÌNH ============================ */
.progress {
    height: 9px; background: var(--bg-soft);
    border-radius: var(--radius-full); overflow: hidden;
}
.progress-bar {
    height: 100%; border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--primary-400), var(--primary));
    transition: width .8s cubic-bezier(.4,0,.2,1);
}
.progress-bar.success { background: linear-gradient(90deg, #4ade80, var(--success)); }
.progress-bar.warning { background: linear-gradient(90deg, #fbbf24, var(--warning)); }
.progress-bar.danger  { background: linear-gradient(90deg, #fb7185, var(--danger)); }

.score-ring { display: grid; place-items: center; position: relative; width: 124px; height: 124px; }
.score-ring svg { transform: rotate(-90deg); }
.score-ring circle { fill: none; stroke-width: 11; }
.score-ring .bg { stroke: var(--bg-soft); }
.score-ring .fg { stroke: var(--primary); stroke-linecap: round; transition: stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1); }
.score-ring .val { position: absolute; text-align: center; font-size: 1.6rem; font-weight: 800; line-height: 1; color: var(--text-navy); }
.score-ring .val small { display: block; font-size: .7rem; font-weight: 600; color: var(--text-muted); margin-top: .25rem; }

/* ============================ 17. MỨC XẾP LOẠI ============================ */
.level-excellent { background: var(--success-light); color: var(--success-dark); }
.level-good      { background: var(--info-light); color: var(--primary-600); }
.level-pass      { background: var(--warning-light); color: var(--warning-dark); }
.level-fail      { background: var(--danger-light); color: var(--danger-dark); }

/* ============================ 18. FORM ĐÁNH GIÁ ============================ */
/* So sánh điểm 3 cấp đánh giá */
.compare-scores {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: .5rem; margin-bottom: .85rem;
}
.compare-item {
    background: var(--primary-50); border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm); padding: .5rem .625rem;
    text-align: center;
}
.compare-label {
    display: block; font-size: .6875rem; font-weight: 700;
    color: var(--text-muted); text-transform: uppercase; letter-spacing: .02em;
}
.compare-value {
    display: block; font-size: 1rem; font-weight: 800;
    color: var(--text-navy); margin-top: .15rem;
}
.compare-pct { display: block; font-size: .6875rem; color: var(--text-muted); font-weight: 600; }

@media (max-width: 640px) {
    .compare-scores { grid-template-columns: 1fr; }
}

.assess-group {
    border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
    margin-bottom: 1.375rem; overflow: hidden; background: var(--white);
    box-shadow: var(--shadow-sm);
}

/* Bảng ngưỡng xếp loại trong form tự đánh giá */
.level-guide { display: flex; flex-direction: column; gap: .5rem; }
.level-guide-item {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .5rem .8rem; border-radius: var(--radius-sm);
    background: var(--primary-25); border: 1px solid var(--border-soft);
}
.level-guide-name { font-size: .84rem; font-weight: 700; color: var(--text); }
.level-guide-range { font-size: .78rem; font-weight: 800; color: var(--primary-600); white-space: nowrap; }
.assess-group-head {
    padding: 1.05rem 1.375rem;
    background: var(--gc-bg, var(--primary-50));
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.assess-group-title { display: flex; align-items: center; gap: .8rem; }
.assess-group-code {
    width: 40px; height: 40px; border-radius: var(--radius-xs);
    background: var(--gc, var(--primary)); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: .95rem; flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(1,136,247,.3);
}
.assess-group-name { font-size: .95rem; font-weight: 800; line-height: 1.3; }
.assess-group-note { font-size: .75rem; color: var(--text-muted); margin-top: .1rem; }
.assess-group-score { text-align: right; font-size: .8rem; color: var(--text-muted); }
.assess-group-score strong { display: block; font-size: 1.2rem; color: var(--gc, var(--primary)); }

.criterion {
    padding: 1.25rem 1.375rem;
    border-bottom: 1px solid var(--border-soft);
    transition: background var(--transition);
}
.criterion:last-child { border-bottom: 0; }
.criterion:hover { background: var(--primary-25); }
.criterion-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; flex-wrap: wrap; }
.criterion-title { display: flex; align-items: flex-start; gap: .65rem; flex: 1; min-width: 240px; }
.criterion-code {
    font-size: .73rem; font-weight: 800;
    background: var(--primary-100); color: var(--primary-600);
    padding: .2rem .55rem; border-radius: var(--radius-xs);
    flex-shrink: 0; margin-top: .12rem;
}
.criterion-name { font-size: .9rem; font-weight: 700; line-height: 1.5; }
.criterion-max { font-size: .8rem; color: var(--text-muted); white-space: nowrap; }
.criterion-max strong { color: var(--text); font-size: .95rem; }

.ratio-options { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: .85rem; }.ratio-option { position: relative; }
.ratio-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.ratio-option label {
    display: flex; align-items: center; gap: .4rem;
    padding: .5rem .9rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-full);
    font-size: .8125rem; font-weight: 700;
    cursor: pointer; background: var(--white);
    transition: all var(--transition);
    white-space: nowrap;
}
.ratio-option label:hover { border-color: var(--primary-300); background: var(--primary-50); transform: translateY(-2px); }
.ratio-option input:checked + label {
    background: var(--primary);
    border-color: var(--primary); color: #fff;
    box-shadow: var(--shadow-blue);
}
.ratio-option input:focus-visible + label { outline: 3px solid rgba(1,136,247,.4); outline-offset: 2px; }
.ratio-option .pct { opacity: .75; font-weight: 800; }
.ratio-option input:checked + label .pct { opacity: .95; }

.evidence-hint {
    font-size: .8125rem; color: var(--text-muted);
    background: var(--bg-soft);
    padding: .6875rem .9375rem;
    border-radius: var(--radius-xs);
    border-left: 3px solid var(--primary-400);
    margin-bottom: .85rem;
}
.evidence-hint strong { color: var(--text); }

/* ============================ 18b. ĐÍNH KÈM TỆP MINH CHỨNG ============================ */
.attach-box {
    margin-top: .85rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, var(--primary-25), transparent 70%);
    overflow: hidden;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.attach-box:hover { border-color: var(--primary-300); }

.attach-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem; flex-wrap: wrap;
    padding: .6rem .85rem;
    background: var(--primary-50);
    border-bottom: 1px solid var(--border-soft);
}
.attach-head-title {
    display: flex; align-items: center; gap: .5rem;
    font-size: .8125rem; font-weight: 700; color: var(--primary-700);
}
.attach-head-title i { color: var(--primary); font-size: .9rem; }
.attach-formats { display: flex; flex-wrap: wrap; gap: .3rem; }
.attach-fmt {
    font-size: .66rem; font-weight: 800; letter-spacing: .02em;
    padding: .18rem .45rem; border-radius: var(--radius-xs);
    background: var(--white); color: var(--text-muted);
    border: 1px solid var(--border);
    text-transform: uppercase;
}
.attach-fmt-limit {
    font-size: .68rem; font-weight: 800;
    padding: .2rem .5rem; border-radius: var(--radius-full);
    background: #fef3c7; color: #92400e; border: 1px solid #fde68a;
    white-space: nowrap;
}

.attach-body { padding: .75rem .85rem; }

.attach-picker {
    display: flex; align-items: center; justify-content: center; gap: .55rem;
    width: 100%;
    padding: .6rem .9rem;
    border-radius: var(--radius-xs);
    border: 1px solid var(--primary-200);
    background: var(--white);
    color: var(--primary-700);
    font-size: .8125rem; font-weight: 700;
    cursor: pointer;
    transition: all var(--transition);
}
.attach-picker:hover { background: var(--primary-50); border-color: var(--primary-400); color: var(--primary-800); }
.attach-picker i { font-size: .95rem; }

.attach-input { display: none; }

.attach-status {
    display: none;
    margin-top: .6rem;
    font-size: .78rem;
    font-weight: 600;
    padding: .45rem .65rem;
    border-radius: var(--radius-xs);
    background: var(--bg-soft);
    color: var(--text-muted);
}
.attach-status.is-show { display: block; }
.attach-status.is-ok { background: var(--success-light); color: #15803d; }
.attach-status.is-error { background: var(--danger-light); color: #b91c1c; }

.attach-list { list-style: none; padding: 0; margin: .7rem 0 0; display: grid; gap: .45rem; }
.attach-list:empty { display: none; }

.attach-item {
    display: flex; align-items: center; gap: .65rem;
    padding: .5rem .65rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-xs);
    background: var(--white);
    transition: all var(--transition);
}
.attach-item:hover { border-color: var(--primary-300); box-shadow: var(--shadow-sm); }
.attach-icon {
    width: 32px; height: 32px; flex-shrink: 0;
    border-radius: var(--radius-xs);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .95rem; color: #fff;
}
.attach-info { flex: 1; min-width: 0; }
.attach-name {
    font-size: .8125rem; font-weight: 600; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: block;
}
.attach-meta { font-size: .7rem; color: var(--text-muted); }
.attach-actions { display: flex; align-items: center; gap: .25rem; flex-shrink: 0; }
.attach-btn {
    width: 28px; height: 28px; border-radius: var(--radius-xs);
    border: 1px solid var(--border); background: var(--white);
    color: var(--text-muted);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .78rem; cursor: pointer;
    transition: all var(--transition);
}
.attach-btn:hover { background: var(--primary-50); border-color: var(--primary-300); color: var(--primary); }
.attach-btn.is-danger:hover { background: var(--danger-light); border-color: #fca5a5; color: var(--danger); }

.attach-empty {
    margin-top: .6rem;
    font-size: .75rem; color: var(--text-muted);
    display: flex; align-items: center; gap: .4rem;
}
.attach-progress {
    height: 4px; border-radius: var(--radius-full);
    background: var(--border-soft); overflow: hidden; margin-top: .5rem;
}
.attach-progress-bar {
    height: 100%; width: 0; background: var(--primary);
    border-radius: var(--radius-full); transition: width .2s ease;
}

@media (max-width: 576px) {
    .attach-head { flex-direction: column; align-items: flex-start; }
    .attach-formats { gap: .25rem; }
    .attach-fmt { font-size: .62rem; padding: .15rem .35rem; }
    .attach-fmt-limit { white-space: normal; }
    .attach-item { flex-wrap: wrap; gap: .5rem; padding: .55rem .6rem; }
    .attach-info { flex: 1 1 100%; order: 2; }
    .attach-actions { order: 1; margin-left: auto; }
    .attach-actions .attach-btn { width: 34px; height: 34px; font-size: .85rem; }
    .attach-picker { padding: .75rem .9rem; font-size: .875rem; }
}

/* ==================================================================
   18b. MINH CHỨNG 2 CỘT (tự đánh giá): mô tả minh chứng | đính kèm tệp
   ================================================================== */
.ev-2col {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: .85rem;
    align-items: stretch;
}
.ev-2col > * { min-width: 0; }

.ev-col-head {
    display: flex; align-items: center; gap: .4rem;
    margin-bottom: .4rem;
    font-size: .78rem; font-weight: 700; color: var(--primary-700);
}
.ev-col-head i { color: var(--primary); font-size: .85rem; }
.ev-col-head .ev-col-hint {
    margin-left: auto;
    font-size: .68rem; font-weight: 600; color: var(--text-muted);
    white-space: nowrap;
}

.ev-col-text { display: flex; flex-direction: column; }
.ev-col-text .form-group { flex: 1; display: flex; }
.ev-col-text .form-control { flex: 1; min-height: 92px; resize: vertical; }

/* Cột phải: đính kèm tệp */
.ev-col-files { display: flex; flex-direction: column; }
.ev-col-files .attach-box { margin-top: 0; height: 100%; }
.ev-col-files .attach-body { flex: 1; }
.ev-col-files .attach-head {
    padding: .45rem .7rem;
    background: transparent;
    border-bottom: 1px solid var(--border-soft);
}
.ev-col-files .attach-head-title { font-size: .78rem; }
.ev-col-files .attach-body { padding: .6rem .7rem; }
.ev-col-files .attach-picker { padding: .55rem .8rem; font-size: .8rem; }
.ev-col-files .attach-item { padding: .45rem .55rem; }
.ev-col-files .attach-icon { width: 28px; height: 28px; font-size: .85rem; }
.ev-col-files .attach-btn { width: 26px; height: 26px; font-size: .72rem; }

.ev-col-files .attach-formats { display: none; }
.ev-col-files .attach-fmt-limit { font-size: .64rem; }

/* Ẩn nhãn nhưng vẫn truy cập được cho trình đọc màn hình */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (max-width: 992px) {
    .ev-2col { grid-template-columns: minmax(0, 1fr); }
}

/* ==================================================================
   18c. MỨC XẾP LOẠI TẠM THỜI (tự đánh giá) - cập nhật trực tiếp
   ================================================================== */
.level-preview {
    border-top: 1px dashed var(--border);
    padding-top: .75rem;
}
.level-preview-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .7rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    justify-content: center;
    width: 100%;
    background: var(--bg-subtle);
    color: var(--text-muted);
}
.level-preview-badge i { font-size: .8rem; }
.level-preview-badge.level-excellent { background: var(--success-light); color: var(--success-dark); }
.level-preview-badge.level-good      { background: var(--info-light);    color: var(--primary-600); }
.level-preview-badge.level-pass      { background: var(--warning-light); color: var(--warning-dark); }
.level-preview-badge.level-fail      { background: var(--danger-light);  color: var(--danger-dark); }

.level-preview + .table-wrap,
.level-preview ~ .text-small { margin-top: .5rem; }

/* ==================================================================
   18d. TÓM TẮT DỮ LIỆU TỰ ĐÁNH GIÁ (màn hình chấm điểm quản trị)
   ================================================================== */
.self-summary-box {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem;
    padding: .75rem;
    border-radius: var(--radius);
    background: var(--primary-50);
    border: 1px solid var(--primary-100);
}
.self-summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.self-summary-value {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--primary-600);
    line-height: 1.2;
}
.self-summary-label {
    font-size: .72rem;
    color: var(--text-muted);
    margin-top: .15rem;
}
@media (max-width: 576px) {
    .self-summary-box { grid-template-columns: minmax(0, 1fr); }
}

/* ============================ 19. KẾT QUẢ ============================ */
.result-summary {
    background:
        radial-gradient(700px 320px at 85% -20%, rgba(125,211,252,.34), transparent 62%),
        linear-gradient(135deg, var(--primary-800), var(--primary));
    color: #fff; border-radius: var(--radius-xl);
    padding: 2.5rem; text-align: center; margin-bottom: 1.75rem;
    box-shadow: var(--shadow-md);
}
.result-summary .total { font-size: 3.4rem; font-weight: 800; line-height: 1; margin-bottom: .35rem; }
.result-summary .total small { font-size: 1.25rem; font-weight: 600; opacity: .7; }
.result-summary .label { font-size: .95rem; opacity: .9; margin-bottom: 1.1rem; }
.result-summary .level-badge {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .55rem 1.25rem; border-radius: var(--radius-full);
    font-size: .95rem; font-weight: 700;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.3);
    backdrop-filter: blur(8px);
}

/* ============================ 20. FOOTER ============================ */
.site-footer {
    background:
        radial-gradient(700px 300px at 15% 0%, rgba(1, 136, 247, .22), transparent 62%),
        linear-gradient(160deg, var(--primary-800), #071a3c);
    color: rgba(255,255,255,.75);
    padding: 3.5rem 0 1.75rem;
    margin-top: 4.5rem;
}
.footer-grid { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 2.75rem; margin-bottom: 2.25rem; }
.footer-title {
    color: #fff; font-size: .98rem; margin-bottom: 1.1rem; font-weight: 800;
    position: relative; padding-bottom: .6rem;
}
.footer-title::after {
    content: ''; position: absolute; left: 0; bottom: 0;
    width: 36px; height: 3px; border-radius: var(--radius-full);
    background: var(--primary);
}
.footer-brand p { font-size: .875rem; line-height: 1.75; margin-bottom: 1rem; }
.footer-list { list-style: none; padding: 0; margin: 0; }
.footer-list li { margin-bottom: .55rem; }
.footer-list a {
    color: rgba(255,255,255,.72); font-size: .875rem; font-weight: 600;
    display: inline-flex; align-items: center; gap: .55rem;
    transition: all var(--transition);
}
.footer-list a:hover { color: #fff; transform: translateX(3px); }
.footer-list i { color: var(--primary-400); font-size: .7rem; }
.footer-bottom {
    padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.12);
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    font-size: .8125rem; color: rgba(255,255,255,.55);
}

/* ============================ 21. LAYOUT QUẢN TRỊ ============================ */
.admin-layout { display: flex; min-height: calc(100vh - var(--header-height)); align-items: flex-start; }

.sidebar {
    width: var(--sidebar-width); flex-shrink: 0;
    background: var(--white);
    border-right: 1px solid var(--border-soft);
    padding: 1.375rem .875rem;
    position: sticky; top: var(--header-height);
    height: calc(100vh - var(--header-height));
    overflow-y: auto;
}
.sidebar-section { padding: 0 .25rem; margin-bottom: .5rem; }
.sidebar-title {
    font-size: .68rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .12em; color: var(--text-faint);
    padding: .9rem .75rem .5rem;
}
.sidebar-link {
    display: flex; align-items: center; gap: .8rem;
    padding: .6875rem .8rem;
    border-radius: var(--radius-xs);
    font-size: .875rem; font-weight: 700; color: var(--text-muted);
    transition: all var(--transition);
    margin-bottom: .1875rem;
    position: relative;
}
.sidebar-link i { width: 20px; text-align: center; flex-shrink: 0; font-size: .95rem; }
.sidebar-link:hover { background: var(--primary-50); color: var(--primary); transform: translateX(3px); }
.sidebar-link.active {
    background: var(--primary);
    color: #fff;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-blue);
}
.sidebar-link.active i { color: #fff; }
.sidebar-link .count {
    margin-left: auto; font-size: .68rem; font-weight: 800;
    background: var(--bg-soft); color: var(--text-muted);
    padding: .1rem .45rem; border-radius: var(--radius-full);
}
.sidebar-link.active .count { background: rgba(255,255,255,.25); color: #fff; }

.admin-main { flex: 1; min-width: 0; padding: 1.875rem; }

/* ---- Thanh chọn nhanh năm học ---- */
.year-switcher {
  display: flex; align-items: center; gap: .875rem; flex-wrap: wrap;
  background: var(--white); border: 1px solid var(--border-soft);
  border-radius: var(--radius-md); padding: .75rem 1rem; margin-bottom: 1.375rem;
  box-shadow: var(--shadow-xs);
}
.year-switcher-label {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .8125rem; font-weight: 800; color: var(--text-navy);
  text-transform: uppercase; letter-spacing: .02em;
}
.year-switcher-label i { color: var(--primary); }
.year-switcher-chips { display: flex; gap: .4rem; flex-wrap: wrap; flex: 1; }
.year-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .85rem; border-radius: var(--radius-full);
  border: 1px solid var(--border); background: var(--bg-soft);
  font-size: .8125rem; font-weight: 800; color: var(--text-muted);
  text-decoration: none; transition: all var(--transition); white-space: nowrap;
}
.year-chip:hover { background: var(--primary-50); border-color: var(--primary-300); color: var(--primary); transform: translateY(-2px); }
.year-chip.active {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-color: var(--primary); color: #fff; box-shadow: var(--shadow-blue);
}
.year-chip.active i { color: var(--accent); }

@media (max-width: 640px) {
  .year-switcher { padding: .625rem .75rem; gap: .625rem; }
  .year-switcher-label { width: 100%; }
  .year-chip { padding: .35rem .7rem; font-size: .75rem; }
}
.page-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.875rem; flex-wrap: wrap;
}
.page-title { font-size: 1.6rem; margin-bottom: .3rem; color: var(--text-navy); }
.page-desc { font-size: .9rem; color: var(--text-muted); margin: 0; }

/* ============================ 22. PHÂN TRANG ============================ */
.pagination {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border-soft); flex-wrap: wrap;
}
.pagination-info { font-size: .8125rem; color: var(--text-muted); }
.pagination-links { display: flex; gap: .3rem; flex-wrap: wrap; }
.page-link {
    min-width: 36px; height: 36px; padding: 0 .6rem;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); border-radius: var(--radius-xs);
    font-size: .8125rem; font-weight: 700; color: var(--text-muted);
    background: var(--white); transition: all var(--transition);
}
.page-link:hover { background: var(--primary-50); border-color: var(--primary-300); color: var(--primary); transform: translateY(-2px); }
.page-link.active { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: var(--shadow-blue); }
.page-link.disabled { opacity: .4; pointer-events: none; }

/* ============================ 23. BỘ LỌC ============================ */
.filter-bar {
    display: flex; gap: .875rem; align-items: flex-end; flex-wrap: wrap;
    padding: 1.125rem 1.5rem;
    background: var(--primary-25);
    border-bottom: 1px solid var(--border);
}
.filter-item { flex: 1; min-width: 165px; }
.filter-item label {
    display: block; font-size: .72rem; font-weight: 800; color: var(--primary-600);
    margin-bottom: .35rem; text-transform: uppercase; letter-spacing: .05em;
}

/* ============================ 23b. THAO TÁC HÀNG LOẠT ============================ */
.bulk-bar {
    display: none;
    align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    padding: .875rem 1.5rem;
    background: linear-gradient(90deg, var(--primary-50), var(--primary-25));
    border-bottom: 1px solid var(--primary-200);
}
.bulk-bar.active { display: flex; }
.bulk-count {
    font-size: .8125rem; font-weight: 700; color: var(--primary-700);
    background: var(--white); padding: .3rem .75rem; border-radius: var(--radius-full);
    box-shadow: var(--shadow-xs);
}
.bulk-count strong { color: var(--primary); font-size: .9375rem; }

/* ============================ 23c. Ô THẺ THỐNG KÊ NHỎ ============================ */
.mini-stat {
    display: flex; align-items: center; gap: .75rem;
    padding: .875rem 1rem; border-radius: var(--radius-sm);
    background: var(--primary-25); border: 1px solid var(--primary-100);
}
.mini-stat .ico {
    width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
    display: grid; place-items: center;
    background: var(--primary); color: #fff; font-size: .875rem;
    box-shadow: var(--shadow-blue);
}
.mini-stat .val { font-size: 1.05rem; font-weight: 800; color: var(--text-navy); line-height: 1.1; }
.mini-stat .lbl { font-size: .75rem; color: var(--text-muted); font-weight: 600; }

/* ============================ 23d. THAO TÁC NHANH ============================ */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: .875rem;
}
.qa-item {
    display: flex; align-items: center; gap: .875rem;
    padding: .875rem 1rem;
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.qa-item:hover {
    transform: translateY(-3px);
    border-color: var(--primary-200);
    box-shadow: var(--shadow-md);
}
.qa-icon {
    width: 42px; height: 42px; flex-shrink: 0;
    border-radius: 13px;
    display: grid; place-items: center;
    font-size: 1.0625rem;
}
.qa-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.qa-text strong { font-size: .875rem; color: var(--text-navy); font-weight: 700; }
.qa-text small { font-size: .75rem; color: var(--text-muted); font-weight: 500; }

/* ============================ 23e. DANH SÁCH HOẠT ĐỘNG ============================ */
.activity-list { list-style: none; margin: 0; padding: 0; }
.activity-list li {
    display: flex; gap: .75rem; align-items: flex-start;
    padding: .625rem 0;
    border-bottom: 1px dashed var(--border-soft);
}
.activity-list li:last-child { border-bottom: none; padding-bottom: 0; }
.activity-list li:first-child { padding-top: 0; }
.act-dot {
    width: 8px; height: 8px; border-radius: 50%; margin-top: .4rem; flex-shrink: 0;
    background: var(--primary); box-shadow: 0 0 0 3px var(--primary-50);
}

/* Hàng trạng thái trong card "Tình trạng hệ thống" */
.health-row {
    padding: .5rem 0;
    border-bottom: 1px dashed var(--border-soft);
}
.health-row:last-child { border-bottom: none; padding-bottom: 0; }
.health-row:first-child { padding-top: 0; }

/* Biểu đồ cột đơn giản */
.chart-bars { display: flex; align-items: flex-end; gap: .75rem; height: 130px; }
.chart-bars .bar-col {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: .35rem;
}
.chart-bars .bar-fill {
    width: 100%; border-radius: 8px 8px 4px 4px; min-height: 8px;
    background: linear-gradient(180deg, var(--primary), var(--primary-600));
}

/* ============================ 24. TIMELINE ============================ */
.timeline { position: relative; padding-left: 2.125rem; }
.timeline::before {
    content: ''; position: absolute; left: 9px; top: .6rem; bottom: .6rem; width: 2px;
    background: linear-gradient(180deg, var(--primary-300), var(--primary-100), transparent);
}
.timeline-item { position: relative; padding-bottom: 1.625rem; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
    position: absolute; left: -2.125rem; top: .28rem;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--white); border: 3px solid var(--primary-300);
    display: grid; place-items: center;
}
.timeline-dot.done { background: var(--success); border-color: var(--success); color: #fff; font-size: .5rem; }
.timeline-dot.current { background: var(--accent); border-color: var(--accent); }
.timeline-title { font-size: .9375rem; font-weight: 800; margin-bottom: .15rem; color: var(--text-navy); }
.timeline-meta { font-size: .8125rem; color: var(--text-muted); font-weight: 600; }

/* ============================ 25. MODAL ============================ */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(15, 47, 100, .55);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    display: none; place-items: center; z-index: 500; padding: 1.25rem;
}
.modal-overlay.active { display: grid; }
.modal {
    background: var(--white); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); max-width: 540px; width: 100%;
    max-height: 90vh; overflow-y: auto;
    animation: modalIn .3s cubic-bezier(.4,0,.2,1);
}
@keyframes modalIn { from { transform: translateY(18px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-head { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.modal-body { padding: 1.5rem; }
.modal-foot { padding: 1.125rem 1.5rem; border-top: 1px solid var(--border-soft); display: flex; justify-content: flex-end; gap: .6875rem; flex-wrap: wrap; }

/* ============================ 34. TICK CHỌN NHÓM VIÊN CHỨC ============================ */
.group-picker { display: flex; flex-direction: column; gap: .5rem; }

.group-option {
    position: relative; display: flex; align-items: center; gap: .75rem;
    padding: .6875rem .875rem; border-radius: var(--radius-sm);
    border: 1.5px solid var(--border); background: var(--white);
    cursor: pointer; transition: var(--transition);
}
.group-option:hover { border-color: var(--primary-300); background: var(--primary-25); }
.group-option input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.group-option-icon {
    width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0;
    display: grid; place-items: center; font-size: .95rem;
    background: var(--primary-50); color: var(--primary-600);
    transition: var(--transition);
}
.group-option-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.group-option-text strong { font-size: .875rem; font-weight: 800; color: var(--text-navy); line-height: 1.3; }
.group-option-text small { font-size: .72rem; color: var(--text-muted); line-height: 1.4; }
.group-option-check {
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
    border: 2px solid var(--border-strong); color: transparent;
    display: grid; place-items: center; font-size: .6rem;
    transition: var(--transition);
}
.group-option:has(input:checked) {
    border-color: var(--primary); background: var(--primary-50);
    box-shadow: 0 0 0 3px rgba(1, 136, 247, .12);
}
.group-option:has(input:checked) .group-option-icon { background: var(--primary); color: #fff; }
.group-option:has(input:checked) .group-option-check { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Fallback cho trình duyệt không hỗ trợ :has() */
.group-option.is-active {
    border-color: var(--primary); background: var(--primary-50);
    box-shadow: 0 0 0 3px rgba(1, 136, 247, .12);
}
.group-option.is-active .group-option-icon { background: var(--primary); color: #fff; }
.group-option.is-active .group-option-check { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ============================ 35. DANH SÁCH THÀNH VIÊN TỔ ============================ */
.member-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.member-list li {
    display: flex; align-items: center; gap: .75rem;
    padding: .625rem .75rem; border-radius: var(--radius-sm);
    background: var(--primary-25); border: 1px solid var(--primary-100);
}
.member-avatar {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    color: #fff; display: grid; place-items: center; font-size: .8125rem; font-weight: 800;
}
.member-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.member-info strong { font-size: .8125rem; font-weight: 800; color: var(--text-navy); line-height: 1.3; }
.member-info small { font-size: .72rem; color: var(--text-muted); line-height: 1.4; }
.member-tags { display: flex; align-items: center; gap: .375rem; flex-shrink: 0; }

/* ============================ 36. THẺ THỐNG KÊ BỘ LỌC (NHÓM) ============================ */
.stat-card { transition: var(--transition); }
a.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

@media (max-width: 991px) {
    .member-list li { flex-wrap: wrap; }
    .member-tags { width: 100%; justify-content: flex-end; }
}

/* ============================ 26. TOAST ============================ */

.toast-container { position: fixed; top: 92px; right: 20px; z-index: 600; display: flex; flex-direction: column; gap: .6875rem; }
.toast {
    background: var(--white); border: 1px solid var(--border-soft);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
    padding: .9375rem 1.125rem; min-width: 290px; max-width: 390px;
    display: flex; align-items: flex-start; gap: .6875rem;
    animation: toastIn .3s cubic-bezier(.4,0,.2,1);
}
@keyframes toastIn { from { transform: translateX(110%); opacity: 0; } to { transform: none; opacity: 1; } }
.toast.success { border-left-color: var(--success); }
.toast.error { border-left-color: var(--danger); }
.toast.warning { border-left-color: var(--warning); }
.toast i { font-size: 1.05rem; margin-top: .1rem; flex-shrink: 0; }
.toast.success i { color: var(--success); }
.toast.error i { color: var(--danger); }
.toast.warning i { color: var(--warning); }
.toast-msg { font-size: .875rem; line-height: 1.55; }

/* ============================ 27. XÁC NHẬN ============================ */
.confirm-box {
    background: var(--warning-light); border: 1px solid #fcd34d;
    border-left: 4px solid var(--warning);
    border-radius: var(--radius-xs); padding: .9375rem 1.125rem;
    font-size: .875rem; color: var(--warning-dark);
    display: flex; align-items: flex-start; gap: .6875rem;
}

/* ============================ 28. EMPTY STATE ============================ */
.empty-state { text-align: center; padding: 3.75rem 1.5rem; }
.empty-icon {
    width: 78px; height: 78px; margin: 0 auto 1.375rem;
    border-radius: var(--radius-lg);
    background: var(--primary-50); color: var(--primary);
    display: grid; place-items: center; font-size: 2.1rem;
    box-shadow: 0 10px 26px rgba(1,136,247,.12);
}
.empty-state h3 { font-size: 1.0625rem; margin-bottom: .4rem; }
.empty-state p { color: var(--text-muted); font-size: .9rem; max-width: 440px; margin: 0 auto 1.375rem; }

/* ============================ 29. ĐĂNG NHẬP ============================ */
/* Giao diện đăng nhập hiện đại: nền gradient xanh, thẻ biểu mẫu nổi bật */
.auth-body {
    min-height: 100vh;
    background:
        radial-gradient(900px 520px at 12% 6%, rgba(125,211,252,.38), transparent 60%),
        radial-gradient(760px 460px at 92% 92%, rgba(1,136,247,.28), transparent 62%),
        linear-gradient(160deg, #eaf4ff 0%, #f6faff 45%, #eef6ff 100%);
    background-attachment: fixed;
}
.auth-stage {
    position: relative;
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 2.5rem 1.25rem;
    overflow: hidden;
}
.auth-orb {
    position: absolute; border-radius: 50%; filter: blur(70px);
    pointer-events: none; opacity: .55;
}
.auth-orb-1 {
    width: 420px; height: 420px; top: -120px; left: -100px;
    background: radial-gradient(circle, rgba(56,189,248,.55), transparent 68%);
    animation: authFloat 12s ease-in-out infinite;
}
.auth-orb-2 {
    width: 460px; height: 460px; bottom: -160px; right: -120px;
    background: radial-gradient(circle, rgba(1,136,247,.45), transparent 68%);
    animation: authFloat 15s ease-in-out infinite reverse;
}
@keyframes authFloat {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(22px, -26px, 0) scale(1.07); }
}

.auth-panel {
    position: relative; z-index: 2;
    width: 100%; max-width: 460px;
    display: flex; flex-direction: column; align-items: center;
}
.auth-brand {
    display: flex; align-items: center; gap: .9rem;
    margin-bottom: 1.5rem;
}
.auth-brand .brand-logo {
    width: 54px; height: 54px; font-size: 1.4rem;
    background: linear-gradient(140deg, var(--primary), var(--primary-700));
    color: #fff; box-shadow: 0 14px 30px rgba(1,136,247,.32);
}
.auth-brand .brand-text strong { display: block; font-size: 1.1rem; color: var(--primary-800); }
.auth-brand .brand-text small { color: var(--text-muted); font-size: .82rem; }

.auth-card {
    width: 100%;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 22px;
    padding: 2.25rem 2rem;
    box-shadow: 0 26px 60px -22px rgba(15,47,100,.35), 0 2px 8px rgba(15,47,100,.06);
}

.auth-head { margin-bottom: 1.5rem; }
.auth-form h1 { font-size: 1.55rem; margin-bottom: .4rem; letter-spacing: -.2px; }
.auth-form .lead { color: var(--text-muted); font-size: .9rem; margin-bottom: 0; line-height: 1.6; }
.auth-form-body { margin-top: 1.5rem; }
.auth-switch { margin-top: 1.25rem !important; }
.auth-switch a { font-weight: 700; }

.auth-note {
    display: flex; gap: .65rem; align-items: flex-start;
    margin-top: 1.25rem; padding: .85rem 1rem;
    background: var(--primary-50); border: 1px solid var(--primary-100);
    border-radius: var(--radius); color: var(--primary-700);
}
.auth-note i { margin-top: .2rem; flex-shrink: 0; }

/* Ô nhập có biểu tượng */
.input-icon { position: relative; display: flex; align-items: center; }
.input-icon > i {
    position: absolute; left: .95rem; z-index: 2;
    color: var(--text-faint); font-size: .95rem; pointer-events: none;
    transition: color var(--transition);
}
.input-icon .form-control { padding-left: 2.6rem; }
.input-icon:focus-within > i { color: var(--primary); }
.input-icon .toggle-pass {
    position: absolute; right: .55rem; z-index: 2;
    width: 34px; height: 34px; border: 0; border-radius: 50%;
    background: transparent; color: var(--text-faint); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all var(--transition);
}
.input-icon .toggle-pass:hover { background: var(--primary-50); color: var(--primary); }

.google-btn {
    display: flex; align-items: center; justify-content: center; gap: .8rem;
    width: 100%; padding: .9rem 1.25rem;
    border: 1.5px solid var(--border); border-radius: var(--radius-full);
    background: var(--white); color: var(--text);
    font-size: .9375rem; font-weight: 700; font-family: inherit;
    cursor: pointer; transition: all var(--transition);
    box-shadow: 0 4px 14px rgba(15,47,100,.06);
}
.google-btn:hover { background: var(--primary-25); border-color: var(--primary-300); box-shadow: 0 12px 26px rgba(1,136,247,.16); transform: translateY(-2px); }
.google-btn svg { flex-shrink: 0; }

.divider { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0; color: var(--text-faint); font-size: .8125rem; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.divider span { white-space: nowrap; }

.auth-foot {
    display: flex; flex-direction: column; align-items: center; gap: .3rem;
    margin-top: 1.5rem; text-align: center;
    color: var(--text-faint); font-size: .78rem;
}
.auth-foot i { color: var(--primary-300); }
.auth-split .auth-foot { margin-top: 1.15rem; }

/* Giữ lại lớp cũ cho các trang cũ (nếu có) */
.auth-page { min-height: 100vh; background: var(--bg); }
.auth-form-side { display: flex; align-items: center; justify-content: center; padding: 2.75rem 1.5rem; }
.auth-form-wrap { width: 100%; max-width: 430px; }
.auth-logo { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.875rem; }

/* ============================ 29B. TRANG ĐĂNG NHẬP 2 CỘT ============================ */
/* Bố cục: cột trái = hướng dẫn cài ứng dụng, cột phải = biểu mẫu đăng nhập */
.auth-split {
    position: relative; z-index: 2;
    width: 100%; max-width: 1180px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: stretch;
}
.auth-split.is-single { grid-template-columns: minmax(0, 1fr); max-width: 540px; }

/* ---------- Cột trái: hướng dẫn cài ứng dụng ---------- */
.auth-guide {
    display: flex; flex-direction: column;
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: var(--radius-xl);
    box-shadow: 0 26px 60px -24px rgba(15, 47, 100, .32), 0 2px 8px rgba(15, 47, 100, .05);
    overflow: hidden;
}
.auth-guide-scroll {
    flex: 1;
    padding: 1.6rem 1.45rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-200) transparent;
}.auth-guide-scroll::-webkit-scrollbar { width: 8px; }
.auth-guide-scroll::-webkit-scrollbar-track { background: transparent; }
.auth-guide-scroll::-webkit-scrollbar-thumb { background: var(--primary-200); border-radius: 99px; }

.install-guide { display: flex; flex-direction: column; gap: 1rem; }

.ig-head { position: relative; }
.ig-badge {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .18rem .6rem; margin-bottom: .6rem;
    background: linear-gradient(135deg, var(--accent), #ff8a3d);
    color: #fff; border-radius: var(--radius-full);
    font-size: .68rem; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
    box-shadow: 0 8px 18px rgba(252, 159, 19, .3);
}
.ig-head h2 {
    font-size: 1.35rem; margin: 0 0 .4rem; letter-spacing: -.3px;
    color: var(--primary-800);
}
.ig-head p {
    margin: 0; font-size: .82rem; line-height: 1.6;
    color: var(--text-muted); max-width: 44ch;
}

/* Menu chọn thiết bị */
.ig-menu {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem;
}
.ig-menu-item {
    display: flex; flex-direction: column; align-items: center; gap: .35rem;
    padding: .75rem .4rem;
    background: var(--primary-25);
    border: 1.5px solid var(--primary-100);
    border-radius: var(--radius-md);
    cursor: pointer; text-align: center;
    font-family: inherit; color: var(--text-soft);
    transition: all var(--transition);
}
.ig-menu-item:hover {
    background: var(--primary-100);
    border-color: var(--primary-300);
    transform: translateY(-2px);
}
.ig-menu-icon {
    width: 36px; height: 36px; border-radius: 11px;
    display: grid; place-items: center; font-size: .95rem;
    background: var(--white); color: var(--primary-600);
    box-shadow: var(--shadow-xs);
    transition: all var(--transition);
}
.ig-menu-text strong { display: block; font-size: .78rem; font-weight: 800; color: var(--text-navy); }
.ig-menu-text small { display: block; font-size: .68rem; color: var(--text-faint); margin-top: .05rem; }
.ig-menu-arrow { display: none; }

.ig-menu-item.is-active {
    background: linear-gradient(135deg, var(--primary), var(--primary-600));
    border-color: transparent;
    box-shadow: 0 10px 22px rgba(1, 136, 247, .26);
}
.ig-menu-item.is-active .ig-menu-icon { background: rgba(255, 255, 255, .22); color: #fff; }
.ig-menu-item.is-active .ig-menu-text strong { color: #fff; }
.ig-menu-item.is-active .ig-menu-text small { color: rgba(255, 255, 255, .75); }

/* Nội dung hướng dẫn */
.ig-body {
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 1.15rem 1.1rem;
}
.ig-panel[hidden] { display: none; }

.ig-steps { list-style: none; margin: 0; padding: 0; }
.ig-step {
    display: flex; gap: .65rem; align-items: flex-start;
    padding: .55rem 0;
    border-bottom: 1px dashed var(--border-soft);
}
.ig-step:last-child { border-bottom: 0; padding-bottom: 0; }
.ig-step-num {
    flex-shrink: 0;
    width: 22px; height: 22px; border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-600));
    color: #fff; font-size: .68rem; font-weight: 800;
    box-shadow: 0 4px 10px rgba(1, 136, 247, .26);
}
.ig-step-text { font-size: .825rem; line-height: 1.55; color: var(--text-soft); padding-top: .1rem; }
.ig-step-text b { color: var(--primary-700); font-weight: 800; }

/* Lưu ý - accordion ẩn/hiện */
.ig-note {
    margin-top: .9rem;
    border: 1px solid #fbe3bd;
    border-radius: var(--radius-md);
    background: var(--accent-light);
    overflow: hidden;
}
.ig-note-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    width: 100%; padding: .6rem .85rem;
    background: transparent; border: 0; cursor: pointer;
    font-family: inherit; font-size: .8rem; font-weight: 800; color: var(--amber);
    transition: background var(--transition);
}
.ig-note-toggle:hover { background: rgba(252, 159, 19, .12); }
.ig-note-label { display: inline-flex; align-items: center; gap: .45rem; }
.ig-note-caret {
    font-size: .7rem; color: var(--amber); opacity: .75;
    transition: transform var(--transition);
}
.ig-note-toggle[aria-expanded="true"] .ig-note-caret { transform: rotate(180deg); }
.ig-note-content {
    padding: 0 .9rem .8rem;
    animation: igNoteIn .25s ease;
}
.ig-note-content[hidden] { display: none; }
@keyframes igNoteIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}
.ig-note-content ul { margin: 0; padding-left: 1.05rem; }
.ig-note-content li {
    font-size: .755rem; line-height: 1.6; color: #7a4a06; margin-bottom: .28rem;
}
.ig-note-content li:last-child { margin-bottom: 0; }
.ig-note-content li b { color: var(--amber); font-weight: 800; }

.ig-cta { margin-top: .9rem; }
.btn-install {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    width: 100%; margin-bottom: .9rem; padding: .7rem 1.15rem;
    border: 0; border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--primary), var(--primary-600));
    color: #fff; font-family: inherit; font-size: .85rem; font-weight: 800;
    cursor: pointer; box-shadow: 0 10px 22px rgba(1, 136, 247, .28);
    transition: all var(--transition);
}
.btn-install:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(1, 136, 247, .36); }
.btn-install:active { transform: translateY(0); }
.btn-install[hidden] { display: none; }

/* ---------- Cột phải: biểu mẫu ---------- */
.auth-split .auth-panel {
    max-width: none; width: 100%; height: 100%;
    display: flex; flex-direction: column;
}
/* Thẻ form: cùng kiểu nền/bo góc/đổ bóng với cột trái để 2 cột ngang bằng */
.auth-split .auth-card {
    flex: 1;
    display: flex; flex-direction: column;
    padding: 1.6rem 1.75rem;
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: var(--radius-xl);
    box-shadow: 0 26px 60px -24px rgba(15, 47, 100, .32), 0 2px 8px rgba(15, 47, 100, .05);
    overflow: hidden;
}
/* Nội dung form căn giữa theo trục dọc */
.auth-split .auth-card-body {
    flex: 1;
    display: flex; flex-direction: column; justify-content: center;
    width: 100%;
}
.auth-split .auth-brand { margin-bottom: 1.25rem; }

/* Tiêu đề form đăng nhập */
.auth-eyebrow {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .2rem .65rem; margin-bottom: .7rem;
    background: var(--primary-50); color: var(--primary-600);
    border: 1px solid var(--primary-100);
    border-radius: var(--radius-full);
    font-size: .7rem; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
}
.auth-head { margin-bottom: 1.25rem; }
.auth-form h1 {
    font-size: 1.5rem; margin-bottom: .35rem; letter-spacing: -.4px;
    color: var(--primary-800);
}
.auth-form .lead { color: var(--text-muted); font-size: .85rem; margin-bottom: 0; line-height: 1.6; }
.auth-form-body { margin-top: 1.25rem; }
.auth-form .form-group { margin-bottom: 1rem; }
.auth-form .form-label { font-size: .8125rem; margin-bottom: .4rem; }
.auth-switch { margin-top: 1.1rem !important; }
.auth-switch a { font-weight: 700; }
.auth-split .divider { margin: 1.1rem 0; }
.auth-split .google-btn { padding: .75rem 1.15rem; font-size: .875rem; }
.auth-split .btn-lg { padding: .8rem 1.25rem; font-size: .9375rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
    .auth-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
    .auth-guide-scroll { padding: 1.4rem 1.1rem; }
    .auth-split .auth-card { padding: 1.6rem 1.4rem; }
}

@media (max-width: 900px) {
    .auth-split { grid-template-columns: minmax(0, 1fr); max-width: 540px; gap: 1rem; }
    .auth-guide-scroll { overflow: visible; }
    .auth-split .auth-panel { height: auto; }
    .auth-split .auth-card { padding: 1.6rem 1.4rem; }
}

@media (max-width: 576px) {
    .auth-stage { padding: 1.25rem .85rem; }
    .auth-guide-scroll { padding: 1.2rem .95rem; }
    .auth-guide { border-radius: var(--radius-lg); }
    .ig-head h2 { font-size: 1.2rem; }
    .ig-menu { grid-template-columns: 1fr; gap: .5rem; }
    .ig-menu-item { flex-direction: row; align-items: center; gap: .75rem; text-align: left; padding: .7rem .85rem; }
    .ig-menu-icon { width: 34px; height: 34px; font-size: .9rem; border-radius: 10px; }
    .ig-menu-arrow { display: block; margin-left: auto; font-size: .7rem; color: var(--text-faint); }
    .ig-menu-item.is-active .ig-menu-arrow { color: rgba(255, 255, 255, .8); }
    .ig-body { padding: .95rem .85rem; }
    .auth-split .auth-card { padding: 1.4rem 1.15rem; }
}

/* ============================ 30. TIỆN ÍCH BỔ SUNG ============================ */

/* Tiêu đề phân đoạn */
.section-title-row {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.75rem; flex-wrap: wrap;
}
.section-title-row h2 { margin-bottom: 0; }

/* Ô thông tin nổi bật */
.feature-list { list-style: none; padding: 0; margin: 1.75rem 0 0; }
.feature-list li {
    display: flex; gap: .875rem; margin-bottom: 1rem;
    align-items: flex-start;
    font-size: .9375rem; color: var(--text-muted);
}
.feature-list li i {
    width: 28px; height: 28px; border-radius: var(--radius-xs); flex-shrink: 0;
    background: var(--primary-100); color: var(--primary-600);
    display: grid; place-items: center; font-size: .8rem;
}
.feature-list li strong { color: var(--text-navy); }

/* Hộp công thức */
.formula-box {
    background: var(--primary-50);
    border: 1px solid var(--primary-200);
    border-radius: var(--radius);
    padding: 1rem 1.125rem; text-align: center;
}
.formula-line {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic; font-weight: 700; color: var(--primary-700);
    font-size: 1.05rem;
}
.formula-line + .formula-line { margin-top: .45rem; }

/* Thẻ công thức gọn (dùng ở mục 01) */
.card-compact .card-header { padding: .75rem 1rem; }
.card-compact .card-body { padding: 1rem; }
.card-compact .card-title { font-size: .95rem; }

/* Hàng flex co giãn cho các dải nội dung ngang */
.flex-row-wrap { display: flex; flex-wrap: wrap; }

/* Lưới định nghĩa công thức (2 cột) */
.formula-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .4rem .6rem;
}
.formula-item {
    display: flex; align-items: baseline; gap: .5rem;
    background: var(--bg-soft);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-xs);
    padding: .4rem .55rem;
}
.formula-key {
    flex-shrink: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic; font-weight: 700; color: var(--primary-700);
    font-size: .9rem;
}
.formula-val { font-size: .78rem; color: var(--text-muted); line-height: 1.35; }
.formula-item-total {
    background: var(--primary-50);
    border-color: var(--primary-200);
}
.formula-item-total .formula-val { color: var(--text-soft); font-weight: 600; }

/* Thẻ icon */
.icon-chip {
    width: 50px; height: 50px; border-radius: var(--radius-sm);
    background: var(--ic-bg, var(--primary-50)); color: var(--ic, var(--primary));
    display: grid; place-items: center; font-size: 1.25rem;
    margin-bottom: 1rem;
}

/* Tiến trình bước */
.step-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.step-card {
    position: relative;
    background: var(--white); border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg); padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
}
.step-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--primary-200); }
.step-num {
    position: absolute; top: 1rem; right: 1.125rem;
    font-size: 2.4rem; font-weight: 800; line-height: 1;
    color: var(--primary-100);
}

/* Hiệu ứng xuất hiện khi cuộn */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ============================ 31. SẮP XẾP CHUYÊN MỤC ============================ */

/* --- Menu nhóm trong header --- */
.nav-group { position: relative; }
.nav-group > .nav-link { padding-right: 1.6rem; }
.nav-group > .nav-link::before {
    content: ''; position: absolute; right: .7rem; top: 50%;
    width: 6px; height: 6px; margin-top: -4px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); opacity: .5;
    transition: transform var(--transition), opacity var(--transition);
}
.nav-group:hover > .nav-link::before { transform: rotate(225deg) translate(-1px, -1px); opacity: .9; }
.nav-group:hover > .nav-link,
.nav-group:focus-within > .nav-link { background: var(--primary-50); color: var(--primary); }
.nav-group > .nav-link.active { background: var(--primary-50); color: var(--primary); }
.nav-group > .nav-link.active::after { display: none; }

.nav-panel {
    position: absolute; top: calc(100% + 10px); left: 0;
    min-width: 280px;
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    padding: .5rem;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: all var(--transition);
    z-index: 300;
}
.nav-group:hover .nav-panel,
.nav-group:focus-within .nav-panel { opacity: 1; visibility: visible; transform: translateY(0); }

.nav-panel-title {
    font-size: .68rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .1em; color: var(--text-faint);
    padding: .55rem .7rem .4rem;
}
.nav-panel-item {
    display: flex; align-items: center; gap: .7rem;
    padding: .6rem .7rem;
    border-radius: var(--radius-xs);
    font-size: .875rem; font-weight: 700; color: var(--text);
    transition: background var(--transition), color var(--transition), transform var(--transition);
}
.nav-panel-item:hover { background: var(--primary-50); color: var(--primary); transform: translateX(3px); }
.nav-panel-item i {
    width: 32px; height: 32px; border-radius: var(--radius-xs); flex-shrink: 0;
    background: var(--primary-50); color: var(--primary-600);
    display: grid; place-items: center; font-size: .8rem;
    transition: background var(--transition), color var(--transition);
}
.nav-panel-item:hover i { background: var(--primary); color: #fff; }
.nav-panel-item span { display: block; }
.nav-panel-item small {
    display: block; font-size: .72rem; font-weight: 600;
    color: var(--text-faint); margin-top: .05rem;
}
.nav-panel-item:hover small { color: var(--primary-500); }

/* --- Section có số thứ tự --- */
.section-index { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: .85rem; }
.section-index .idx {
    width: 32px; height: 32px; border-radius: var(--radius-xs);
    background: var(--primary); color: #fff;
    font-size: .8125rem; font-weight: 800;
    display: grid; place-items: center;
    box-shadow: var(--shadow-blue);
}
.section-index .lbl {
    font-size: .75rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .1em; color: var(--primary);
}

/* --- Lưới chuyên mục --- */
.module-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }
.module-card {
    display: flex; flex-direction: column;
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    position: relative; overflow: hidden;
    transition: all var(--transition);
}
.module-card::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--primary);
    transform: scaleY(0); transform-origin: top;
    transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.module-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--primary-200); }
.module-card:hover::before { transform: scaleY(1); }
.module-card .module-icon {
    width: 52px; height: 52px; border-radius: var(--radius-sm);
    background: var(--primary-50); color: var(--primary-600);
    display: grid; place-items: center; font-size: 1.3rem;
    margin-bottom: 1rem;
    transition: all var(--transition);
}
.module-card:hover .module-icon { background: var(--primary); color: #fff; box-shadow: var(--shadow-blue); }
.module-card h3 { font-size: 1.05rem; margin-bottom: .45rem; }
.module-card p { font-size: .85rem; color: var(--text-muted); margin-bottom: 1.125rem; flex: 1; }
.module-card .module-link {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .85rem; font-weight: 800; color: var(--primary);
}
.module-card .module-link i { transition: transform var(--transition); }
.module-card:hover .module-link i { transform: translateX(4px); }

/* --- Danh sách liên kết --- */
.link-list { list-style: none; padding: 0; margin: 0; }
.link-list li { border-bottom: 1px solid var(--border-soft); }
.link-list li:last-child { border-bottom: 0; }
.link-list a {
    display: flex; align-items: center; gap: .75rem;
    padding: .7rem .25rem;
    font-size: .875rem; font-weight: 700; color: var(--text);
    transition: all var(--transition);
}
.link-list a:hover { color: var(--primary); padding-left: .5rem; }
.link-list a i {
    width: 30px; height: 30px; border-radius: var(--radius-xs); flex-shrink: 0;
    background: var(--primary-50); color: var(--primary-600);
    display: grid; place-items: center; font-size: .75rem;
    transition: all var(--transition);
}
.link-list a:hover i { background: var(--primary); color: #fff; }
.link-list a small { color: var(--text-faint); font-weight: 600; margin-left: auto; font-size: .78rem; }

/* --- Điều hướng nhanh --- */
.quick-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .75rem; }
.quick-nav a {
    display: flex; align-items: center; gap: .7rem;
    padding: .875rem 1rem;
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-xs);
    font-size: .875rem; font-weight: 700; color: var(--text);
    box-shadow: var(--shadow-xs);
    transition: all var(--transition);
}
.quick-nav a:hover {
    border-color: var(--primary-200); background: var(--primary-25);
    color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-sm);
}
.quick-nav a i { color: var(--primary); font-size: .95rem; }

/* --- Breadcrumb --- */
.breadcrumb {
    display: flex; align-items: center; gap: .45rem;
    font-size: .8125rem; color: var(--text-muted);
    margin-bottom: .85rem; flex-wrap: wrap;
}
.breadcrumb a { color: var(--text-muted); font-weight: 700; }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb i { font-size: .6rem; color: var(--text-faint); }
.breadcrumb .current { color: var(--text-navy); font-weight: 800; }

/* ============================ 32. IN ẤN ============================ */
@media print {
    .site-header, .site-topbar, .sidebar, .site-footer, .btn, .filter-bar,
    .toast-container, .pagination, .nav-toggle, .header-actions { display: none !important; }
    body { background: #fff; }
    .admin-main { padding: 0; }
    .card { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
    .result-summary { background: #f1f5f9 !important; color: #000 !important; }
    .hero { background: #fff !important; color: #000 !important; }
    .hero h1, .hero p { color: #000 !important; }
}

/* ============================ 33. RESPONSIVE ============================ */

/* --- Desktop rộng --- */
@media (min-width: 1600px) {
    :root { --container: 1460px; }
    body { font-size: 15.5px; }
}

/* --- Tablet ngang / iPad landscape --- */
@media (max-width: 1280px) {
    .row { gap: 18px; }
    .col-3 { grid-column: span 6; }
    .footer-grid { grid-template-columns: 1.5fr repeat(2, 1fr); gap: 2.25rem; }
}

@media (max-width: 1100px) {
    :root { --header-height: 68px; }
    .main-nav { gap: 0; }
    .nav-link { padding: .5rem .65rem; font-size: .85rem; }
    .nav-link i { display: none; }
    .hero-stats { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .auth-visual { padding: 2.25rem; }
}

/* --- Tablet dọc / iPad portrait --- */
@media (max-width: 992px) {
    .auth-page { grid-template-columns: 1fr; }
    .auth-visual { display: none; }
    .admin-layout { flex-direction: column; }
    .sidebar {
        position: fixed; top: var(--header-height); left: 0; bottom: 0;
        width: 290px; z-index: 190;
        transform: translateX(-102%);
        transition: transform .3s cubic-bezier(.4,0,.2,1);
        box-shadow: var(--shadow-lg);
        height: calc(100vh - var(--header-height));
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar-backdrop {
        position: fixed; inset: var(--header-height) 0 0;
        background: rgba(15,47,100,.45);
        backdrop-filter: blur(3px);
        z-index: 180; display: none;
    }
    .sidebar-backdrop.active { display: block; }
    .sidebar-toggle { display: flex !important; }
    .admin-main { padding: 1.5rem; }
    .step-flow { grid-template-columns: repeat(2, 1fr); }
    .topbar-right { display: none; }
}

/* --- Mobile / điện thoại --- */
@media (max-width: 768px) {
    :root { --header-height: 64px; }
    .container { padding: 0 16px; }
    .topbar-inner { justify-content: center; }
    .topbar-left { gap: .75rem; }
    .main-nav {
        position: fixed; top: var(--header-height); left: 0; right: 0;
        background: rgba(255,255,255,.99);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--border);
        flex-direction: column; align-items: stretch; padding: .75rem;
        gap: .125rem; box-shadow: var(--shadow-lg);
        transform: translateY(-140%); transition: transform .3s cubic-bezier(.4,0,.2,1);
        max-height: calc(100vh - var(--header-height)); overflow-y: auto;
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    }
    .main-nav.open { transform: translateY(0); }
    .nav-link { padding: .8rem 1rem; font-size: .95rem; }
    .nav-link i { display: inline-block; }
    .nav-link.active { background: var(--primary-50); }
    .nav-link.active::after { display: none; }
    .nav-toggle { display: flex; }
    .user-name, .user-role { display: none; }
    .user-chip { padding: .25rem; border: 0; background: transparent; }
    .brand-logo { width: 42px; height: 42px; font-size: 1.1rem; }
    .brand-text small { display: none; }

    .hero { padding: 3.25rem 0 3rem; }
    .hero h1 { font-size: clamp(1.6rem, 7vw, 2.1rem); }
    .hero p { margin-bottom: 1.75rem; }
    .hero-badge { font-size: .75rem; padding: .4rem .85rem; }
    .hero-stats { grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-top: 2.5rem; }
    .hero-stat { padding: 1rem; border-radius: var(--radius); }
    .hero-stat .num { font-size: 1.5rem; }
    .hero-stat .label { font-size: .75rem; }

    /* Bản gọn: hero + các mục 01 - 04 */
    .hero-compact { padding: 2rem 0 2.25rem; }
    .hero-compact h1 { font-size: clamp(1.5rem, 6.5vw, 1.9rem); margin-bottom: .65rem; }
    .hero-compact p { font-size: .9rem; margin-bottom: 1.1rem; line-height: 1.6; }
    .hero-compact .hero-stats { margin-top: 1.5rem; gap: .55rem; }
    .hero-compact .hero-stat { padding: .65rem .75rem; border-radius: var(--radius-sm); }
    .hero-compact .hero-stat .num { font-size: 1.2rem; }
    .hero-compact .hero-stat .label { font-size: .68rem; }

    .section { padding: 2.875rem 0; }
    .section-tight { padding: 1rem 0; }
    .section-tight .section-head { margin-bottom: .75rem; }
    .section-tight .feature-list { grid-template-columns: 1fr; gap: .4rem; margin-top: .9rem; }
    .section-tight .feature-list li { font-size: .85rem; }
    .formula-grid { grid-template-columns: 1fr; }
    .section-head { margin-bottom: 2rem; }
    .section-head h2 { letter-spacing: .02em; }
    .kpi-grid { grid-template-columns: 1fr; gap: 1rem; }
    .kpi-card { padding: 1.375rem; }
    .step-flow { grid-template-columns: 1fr; }
    .module-grid { grid-template-columns: 1fr; }

    .row { grid-template-columns: 1fr; gap: 15px; }
    .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-12 { grid-column: span 1; }
    .grid-form, .grid-form-3 { grid-template-columns: 1fr; }

    .card-header { padding: 1rem 1.125rem; }
    .card-body { padding: 1.125rem; }
    .assess-group-head { padding: .9375rem 1rem; }
    .criterion { padding: 1.0625rem 1rem; }
    .criterion-title { min-width: 0; }
    .page-head { margin-bottom: 1.375rem; }
    .page-title { font-size: 1.3rem; }
    .admin-main { padding: 1.0625rem; }

    .stats-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; }
    .stat-card { padding: 1rem; gap: .75rem; }
    .stat-icon { width: 44px; height: 44px; font-size: 1.15rem; }
    .stat-value { font-size: 1.375rem; }

    .ratio-options { gap: .4rem; }
    .ratio-option label { padding: .4rem .7rem; font-size: .75rem; }
    .quick-actions { grid-template-columns: repeat(2, 1fr); gap: .625rem; }
    .qa-item { padding: .6875rem .75rem; gap: .625rem; }
    .qa-icon { width: 36px; height: 36px; font-size: .9375rem; border-radius: 11px; }
    .qa-text strong { font-size: .8125rem; }
    .qa-text small { font-size: .6875rem; }
    .chart-bars { height: 110px; gap: .5rem; }
    .table thead th, .table tbody td { padding: .625rem .75rem; }
    .table { font-size: .85rem; }
    .toast-container { left: 12px; right: 12px; top: 76px; }
    .toast { min-width: 0; max-width: none; }
    .result-summary { padding: 1.75rem 1.25rem; border-radius: var(--radius-lg); }
    .result-summary .total { font-size: 2.4rem; }
    .footer-grid { grid-template-columns: 1fr; gap: 1.875rem; }
    .site-footer { padding: 2.5rem 0 1.5rem; margin-top: 3rem; }
    .modal-body { padding: 1.25rem; }
    .modal-foot { padding: 1rem 1.25rem; }
}

/* --- Điện thoại nhỏ --- */
@media (max-width: 480px) {
    .hero-stats { grid-template-columns: 1fr 1fr; }
    .stats-grid { grid-template-columns: 1fr; }
    .hero-actions { flex-direction: column; }
    .hero-actions .btn { width: 100%; }
    .filter-bar { padding: .9375rem 1rem; }
    .filter-item { min-width: 100%; }
    .pagination { justify-content: center; }
    .pagination-info { width: 100%; text-align: center; }
    .modal-foot .btn { flex: 1; }
    .section-title-row { flex-direction: column; align-items: flex-start; }
    .card-title { font-size: .98rem; }
    .ratio-option label { padding: .35rem .6rem; font-size: .72rem; }
    .topbar-item span { display: none; }
    .quick-actions { grid-template-columns: 1fr; }
    .qa-item { padding: .75rem .875rem; }
    .activity-list li { padding: .5rem 0; }
}

/* --- Điện thoại rất nhỏ --- */
@media (max-width: 360px) {
    .hero-stats { grid-template-columns: 1fr; }
    .brand-text strong { font-size: .92rem; }
    .btn { padding: .6rem 1rem; font-size: .85rem; }
}

/* --- Chế độ chạm (touch) --- */
@media (hover: none) {
    .kpi-card:hover, .stat-card:hover, .card-hover:hover,
    .sidebar-link:hover, .btn-primary:hover, .btn-secondary:hover { transform: none; }
    .dropdown-menu { opacity: 1; visibility: visible; transform: none; position: static; box-shadow: none; border: 0; padding: 0; margin-top: .5rem; }
}

/* --- Menu nhóm dạng accordion trên mobile --- */
@media (max-width: 768px) {
    .nav-group > .nav-link::before { display: none; }
    .nav-panel {
        position: static; opacity: 1; visibility: visible; transform: none;
        box-shadow: none; border: 0; border-left: 2px solid var(--primary-100);
        border-radius: 0; margin: .125rem 0 .375rem .75rem; padding: .25rem 0 .25rem .5rem;
        display: none;
    }
    .nav-group.open .nav-panel { display: block; }
    .nav-panel-item { padding: .55rem .65rem; }
}

/* =====================================================================
   30. BỘ TIÊU CHÍ / THANG CHẤM / KẾ HOẠCH - LAYOUT GỌN & HIỆN ĐẠI
   ===================================================================== */

/* --- 30.1 Thanh tổng quan 6 nhóm tiêu chí --- */
.group-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .625rem;
    margin-bottom: .875rem;
}
.group-bar-item {
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: .7rem .875rem;
    box-shadow: var(--shadow-xs);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.group-bar-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--gc);
}
.group-bar-head {
    display: flex; align-items: center; gap: .55rem;
    margin-bottom: .6rem;
}
.group-bar-code {
    width: 26px; height: 26px; flex-shrink: 0;
    border-radius: var(--radius-xs);
    background: var(--gc); color: #fff;
    font-size: .75rem; font-weight: 800;
    display: grid; place-items: center;
}
.group-bar-name {
    font-size: .8125rem; font-weight: 700; color: var(--text-soft);
    line-height: 1.35;
    flex: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.group-bar-points {
    flex-shrink: 0;
    font-size: .9375rem; font-weight: 800; color: var(--gc);
}
.group-bar-track {
    height: 6px; border-radius: var(--radius-full);
    background: var(--bg-soft); overflow: hidden;
}
.group-bar-fill {
    display: block; height: 100%;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--gc), color-mix(in srgb, var(--gc) 55%, #fff));
}

/* --- 30.2 Accordion nhóm tiêu chí --- */
.criteria-accordion {
    display: flex; flex-direction: column; gap: .4rem;
}
.criteria-group {
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-left: 4px solid var(--gc);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--transition), border-color var(--transition);
}
.criteria-group[open] { box-shadow: var(--shadow-sm); border-color: var(--gc); }
.criteria-group-head {
    display: flex; align-items: center; gap: .75rem;
    padding: .7rem .875rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background var(--transition);
}
.criteria-group-head::-webkit-details-marker { display: none; }
.criteria-group-head:hover { background: var(--gc-bg); }
.criteria-group-code {
    width: 32px; height: 32px; flex-shrink: 0;
    border-radius: 9px;
    background: var(--gc); color: #fff;
    font-size: .8125rem; font-weight: 800;
    display: grid; place-items: center;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--gc) 30%, transparent);
}
.criteria-group-text { flex: 1; min-width: 0; }
.criteria-group-name {
    display: block;
    font-size: .875rem; font-weight: 800; color: var(--text-navy);
    line-height: 1.35;
}
.criteria-group-desc {
    display: block;
    font-size: .78rem; color: var(--text-muted); margin-top: .1rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.criteria-group-meta {
    display: flex; align-items: center; gap: .75rem; flex-shrink: 0;
}
.criteria-group-count {
    font-size: .72rem; font-weight: 700; color: var(--text-faint);
    background: var(--bg-soft);
    padding: .2rem .55rem; border-radius: var(--radius-full);
    white-space: nowrap;
}
.criteria-group-score {
    font-size: .875rem; font-weight: 800; color: var(--gc);
    white-space: nowrap;
}
.criteria-group-caret {
    font-size: .75rem; color: var(--text-faint);
    transition: transform var(--transition);
    flex-shrink: 0;
}
.criteria-group[open] .criteria-group-caret { transform: rotate(180deg); }
.criteria-group-body {
    padding: 0 .875rem .875rem;
    border-top: 1px dashed var(--border);
    padding-top: .7rem;
}

/* --- 30.3 Danh sách tiêu chí dạng chip --- */
.criteria-tags {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: .5rem;
}
.criteria-tag {
    display: flex; align-items: center; gap: .6rem;
    background: var(--gc-bg);
    border: 1px solid transparent;
    border-radius: var(--radius-xs);
    padding: .5rem .7rem;
    font-size: .8125rem;
    transition: border-color var(--transition), transform var(--transition);
}
.criteria-tag:hover { border-color: var(--gc); transform: translateX(2px); }
.criteria-tag-code {
    flex-shrink: 0;
    font-size: .6875rem; font-weight: 800; color: var(--gc);
    background: var(--white);
    border: 1px solid color-mix(in srgb, var(--gc) 25%, transparent);
    border-radius: 6px;
    padding: .1rem .4rem;
}
.criteria-tag-title {
    flex: 1; min-width: 0;
    color: var(--text-soft);
    line-height: 1.4;
}
.criteria-tag-score {
    flex-shrink: 0;
    font-weight: 800; color: var(--gc);
    font-size: .8125rem;
}

/* --- 30.4 Thang chấm điểm 6 mức: dải ngang 1 dòng, gọn & hiện đại --- */
.scale-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .5rem;
}
.scale-card {
    position: relative;
    background: var(--sbg, var(--white));
    border: 1px solid var(--sbd, var(--border-soft));
    border-radius: var(--radius-md);
    padding: .7rem .6rem .65rem;
    text-align: center;
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
/* Vạch màu nhận diện phía trên mỗi mức */
.scale-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--sc, var(--primary));
}
.scale-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--sc, var(--primary));
}
/* Tone màu theo mức chấm */
.scale-success { --sc: var(--success); --sbg: linear-gradient(180deg, #f0fdf4 0%, #ffffff 78%); --sbd: #bbf7d0; }
.scale-primary { --sc: var(--primary); --sbg: linear-gradient(180deg, #eff8ff 0%, #ffffff 78%); --sbd: var(--primary-200); }
.scale-warning { --sc: var(--warning); --sbg: linear-gradient(180deg, #fffbeb 0%, #ffffff 78%); --sbd: #fde68a; }
.scale-muted   { --sc: var(--text-faint); --sbg: linear-gradient(180deg, #f8fafc 0%, #ffffff 78%); --sbd: var(--border); }
.scale-danger  { --sc: var(--danger); --sbg: linear-gradient(180deg, #fff1f2 0%, #ffffff 78%); --sbd: #fecdd3; }
/* Phần trăm: nổi bật, gọn 1 dòng */
.scale-ratio {
    font-size: 1.35rem; font-weight: 800; color: var(--sc);
    line-height: 1; letter-spacing: -.03em;
}
/* Tên mức: 1 dòng duy nhất */
.scale-name {
    font-size: .74rem; font-weight: 700; color: var(--text-navy);
    margin-top: .3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Mô tả: gọn tối đa 2 dòng */
.scale-desc {
    font-size: .68rem; color: var(--text-muted);
    margin-top: .25rem; line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 1.9em;
}

/* --- 30.5 Chip ngưỡng phân mức --- */
.level-chips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: .5rem;
}
.level-chip {
    background: var(--primary-25);
    border: 1px solid var(--primary-100);
    border-radius: var(--radius-xs);
    padding: .45rem .6rem;
    text-align: center;
}
.level-chip-range {
    display: block;
    font-size: .9rem; font-weight: 800; color: var(--primary);
    line-height: 1.1;
}
.level-chip-name {
    display: block;
    font-size: .72rem; font-weight: 700; color: var(--text-soft);
    margin-top: .15rem;
}

/* --- 30.6 Dải thời gian 4 đợt đánh giá --- */
.period-track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .75rem;
}
.period-track::before {
    content: '';
    position: absolute;
    left: 6%; right: 6%; top: 18px;
    height: 3px;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--primary-200), var(--primary), var(--primary-200));
}
.period-item { position: relative; text-align: center; }
.period-marker {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    margin-bottom: .625rem;
}
.period-num {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--white);
    border: 2px solid var(--primary);
    color: var(--primary);
    font-size: .78rem; font-weight: 800;
    display: grid; place-items: center;
    z-index: 1;
    box-shadow: 0 0 0 4px var(--bg-soft);
    transition: all var(--transition);
}
.period-item:hover .period-num {
    background: var(--primary); color: #fff;
    box-shadow: 0 0 0 4px var(--primary-100), var(--shadow-blue);
}
.period-dot { display: none; }
.period-body {
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: .7rem .75rem;
    box-shadow: var(--shadow-xs);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.period-item:hover .period-body {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-200);
}
.period-name {
    font-size: .85rem; font-weight: 800; color: var(--text-navy);
    line-height: 1.3;
}
.period-meta {
    font-size: .75rem; color: var(--text-muted);
    margin-top: .2rem;
}
.period-date {
    display: block; margin-top: .2rem;
    font-size: .7rem; color: var(--text-faint);
}

/* --- 30.7 Nhóm G: nhiệm vụ riêng theo vị trí công tác --- */
.position-group {
    margin-top: .875rem;
    background: linear-gradient(135deg, var(--primary-25), var(--white) 55%);
    border: 1px solid var(--primary-100);
    border-left: 4px solid var(--primary-700);
    border-radius: var(--radius-md);
    padding: .875rem 1rem;
    box-shadow: var(--shadow-xs);
}
.position-group-head {
    display: flex; align-items: center; gap: .75rem;
    margin-bottom: .75rem;
}
.position-group-code {
    width: 32px; height: 32px; flex-shrink: 0;
    border-radius: 9px;
    background: var(--primary-700); color: #fff;
    font-size: .8125rem; font-weight: 800;
    display: grid; place-items: center;
}
.position-group-text { min-width: 0; }
.position-group-name {
    display: block;
    font-size: .9rem; font-weight: 800; color: var(--text-navy);
    line-height: 1.3;
}
.position-group-desc {
    display: block;
    font-size: .75rem; color: var(--text-muted); margin-top: .1rem;
}
.position-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .4rem;
}
.position-item {
    display: flex; align-items: center; gap: .5rem;
    background: var(--white);
    border: 1px solid var(--primary-100);
    border-radius: var(--radius-xs);
    padding: .4rem .55rem;
    font-size: .78rem;
    transition: border-color var(--transition), transform var(--transition);
}
.position-item:hover { border-color: var(--primary-300); transform: translateY(-2px); }
.position-item-code {
    flex-shrink: 0;
    font-size: .65rem; font-weight: 800; color: var(--primary-700);
    background: var(--primary-50);
    border: 1px solid var(--primary-200);
    border-radius: 5px;
    padding: .05rem .32rem;
}
.position-item-title {
    flex: 1; min-width: 0; color: var(--text-soft); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.position-item-score { flex-shrink: 0; font-weight: 800; color: var(--primary-700); font-size: .78rem; }

/* --- 30.8 Responsive cho các block mới --- */
@media (max-width: 992px) {
    .group-bar { grid-template-columns: repeat(2, 1fr); }
    .scale-grid { grid-template-columns: repeat(3, 1fr); }
    .scale-desc { -webkit-line-clamp: 2; }
    .period-track { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
    .period-track::before { display: none; }
    /* Hero bản gọn trên tablet */
    .hero-compact .hero-stats { gap: .5rem; }
    .hero-compact .hero-stat { padding: .6rem .7rem; }
    .hero-compact .hero-stat .num { font-size: 1.15rem; }
    .hero-compact .hero-stat .label { font-size: .66rem; }
}
@media (max-width: 768px) {
    .group-bar { grid-template-columns: 1fr; }
    .scale-grid { grid-template-columns: repeat(2, 1fr); }
    .criteria-tags { grid-template-columns: 1fr; }
    .position-list { grid-template-columns: 1fr; }
    .criteria-group-desc { white-space: normal; }
    .criteria-group-head { flex-wrap: wrap; row-gap: .5rem; }
    .criteria-group-meta { width: 100%; justify-content: space-between; }
    .criteria-group-caret { position: absolute; right: 1rem; top: 1.125rem; }
    .criteria-group-head { position: relative; padding-right: 2.5rem; }
}
@media (max-width: 480px) {
    .scale-grid { grid-template-columns: 1fr; }
    .period-track { grid-template-columns: 1fr; }
}

/* --- Người dùng giảm chuyển động --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1; transform: none; }
}

/* =====================================================================
   31. QUẢN LÝ VIÊN CHỨC - GIAO DIỆN HIỆN ĐẠI, GỌN NHẸ
   ===================================================================== */

/* --- 31.1 Dải tóm tắt nhóm viên chức (thay cho 7 thẻ số liệu lớn) --- */
.staff-summary {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: .7rem .85rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1rem;
}
.sum-item {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .4rem .75rem .4rem .45rem;
    border-radius: var(--radius-full);
    background: var(--primary-25);
    border: 1px solid var(--primary-100);
    font-size: .8125rem; font-weight: 700; color: var(--text-soft);
    white-space: nowrap;
}
.sum-item .sum-icon {
    width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center; flex-shrink: 0;
    font-size: .72rem;
    background: var(--sum-bg, var(--primary-100));
    color: var(--sum-fg, var(--primary-600));
}
.sum-item .sum-val {
    font-weight: 800; color: var(--text-navy); font-size: .9rem;
    font-variant-numeric: tabular-nums;
}
.sum-item .sum-label { color: var(--text-muted); font-weight: 600; }

/* --- 31.2 Thanh công cụ (tìm kiếm + tab nhóm) --- */
.staff-toolbar {
    display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
    padding: .8rem 1.25rem;
    background: var(--white);
    border-bottom: 1px solid var(--border-soft);
}
.search-box { position: relative; flex: 1 1 240px; min-width: 200px; }
.search-box > i {
    position: absolute; left: .9rem; top: 50%; transform: translateY(-50%);
    color: var(--text-faint); font-size: .85rem; pointer-events: none;
}
.search-box .form-control { padding-left: 2.4rem; padding-top: .55rem; padding-bottom: .55rem; }

.group-tabs { display: flex; flex-wrap: wrap; gap: .35rem; }
.group-tab {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .38rem .75rem;
    border-radius: var(--radius-full);
    background: var(--white);
    border: 1.5px solid var(--border);
    font-size: .8125rem; font-weight: 700; color: var(--text-soft);
    transition: all var(--transition);
    white-space: nowrap;
}
.group-tab:hover {
    border-color: var(--primary-300); color: var(--primary-600);
    background: var(--primary-25); transform: translateY(-1px);
}
.group-tab.active {
    background: var(--primary); border-color: var(--primary);
    color: #fff; box-shadow: var(--shadow-blue);
}
.group-tab .cnt {
    font-size: .7rem; font-weight: 800;
    padding: .05rem .4rem; border-radius: var(--radius-full);
    background: var(--bg-soft); color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.group-tab.active .cnt { background: rgba(255, 255, 255, .22); color: #fff; }

.toolbar-select { width: auto; min-width: 148px; padding-top: .55rem; padding-bottom: .55rem; }

/* --- 31.3 Bảng viên chức hiện đại --- */
.table-modern { font-size: .875rem; }
.table-modern thead th {
    padding: .7rem .9rem;
    font-size: .72rem;
    letter-spacing: .05em;
    background: var(--primary-50);
}
.table-modern tbody td { padding: .65rem .9rem; }
.table-modern tbody tr:hover { background: var(--primary-25); }

.avatar-sm {
    width: 36px; height: 36px; border-radius: 11px;
    object-fit: cover; flex-shrink: 0;
    background: linear-gradient(135deg, var(--primary-400), var(--primary-600));
    color: #fff; font-weight: 800; font-size: .9rem;
    display: grid; place-items: center;
}
.staff-name {
    display: block; font-weight: 800; color: var(--text-navy);
    line-height: 1.3; font-size: .9rem;
}
.staff-name:hover { color: var(--primary); }
.staff-sub {
    display: block; font-size: .74rem; color: var(--text-muted);
    margin-top: .1rem; line-height: 1.35;
}
.cell-main { font-size: .85rem; font-weight: 700; color: var(--text-soft); }
.cell-sub  { font-size: .75rem; color: var(--text-muted); margin-top: .1rem; }

.status-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .78rem; font-weight: 800;
}
.status-chip::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%;
    background: currentColor; flex-shrink: 0;
}
.status-chip.on  { color: var(--success-dark); }
.status-chip.off { color: var(--danger-dark); }
.status-chip.wait { color: var(--amber); }

.row-actions { display: flex; gap: .3rem; justify-content: flex-end; }
.row-actions .btn {
    width: 30px; height: 30px; padding: 0;
    display: grid; place-items: center; border-radius: 9px; font-size: .78rem;
}
.row-actions form { display: inline; }

/* --- 31.4 Responsive --- */
@media (max-width: 992px) {
    .staff-toolbar { padding: .7rem .9rem; }
    .group-tabs { order: 3; width: 100%; }
}
@media (max-width: 768px) {
    .col-hide-md { display: none; }
    .table-modern thead th, .table-modern tbody td { padding: .55rem .65rem; }
    .staff-summary { gap: .4rem; padding: .55rem .6rem; }
    .sum-item { font-size: .75rem; padding: .3rem .6rem .3rem .35rem; }
    .sum-item .sum-icon { width: 22px; height: 22px; font-size: .62rem; }
}
@media (max-width: 480px) {
    .col-hide-sm { display: none; }
    .avatar-sm { width: 32px; height: 32px; border-radius: 10px; }
}

/* --- Chế độ tương phản cao --- */
@media (forced-colors: active) {
    .btn, .card, .badge { border: 1px solid CanvasText; }
}

/* =====================================================================
   32. MODULE ĐIỂM DANH
   ===================================================================== */

/* --- 32.1 Bộ lọc (Ban Giám hiệu) --- */
.att-filter {
    display: flex; gap: .875rem; align-items: flex-end; flex-wrap: wrap;
}
.att-filter .form-group { margin-bottom: 0; }

/* --- 32.2 Chọn tháng --- */
.month-picker {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: .4rem;
    margin-bottom: .875rem;
}
.month-chip {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1px;
    padding: .5rem .25rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--white);
    color: var(--text-soft);
    text-decoration: none;
    transition: var(--transition);
}
.month-chip strong { font-size: .9375rem; font-weight: 800; line-height: 1.1; }
.month-chip small { font-size: .625rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.month-chip:hover {
    border-color: var(--primary-300);
    background: var(--primary-50);
    color: var(--primary-600);
    transform: translateY(-2px);
}
.month-chip.active {
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    border-color: var(--primary-600);
    color: #fff;
    box-shadow: 0 6px 16px rgba(1, 136, 247, .28);
}
.month-chip.active small { color: rgba(255, 255, 255, .85); }

/* --- 32.3 Danh sách loại họp (tick) --- */
.meet-list { display: flex; flex-direction: column; gap: .625rem; }
.meet-option {
    display: flex; align-items: center; gap: .875rem;
    padding: .875rem 1rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--white);
    cursor: pointer;
    transition: var(--transition);
    position: relative;
}
.meet-option:hover { border-color: var(--primary-300); background: var(--primary-25); }
.meet-option input[type="checkbox"] {
    position: absolute; opacity: 0; pointer-events: none;
}
.meet-option-icon {
    width: 42px; height: 42px; flex-shrink: 0;
    border-radius: 12px;
    display: grid; place-items: center;
    background: var(--primary-50); color: var(--primary-600);
    font-size: 1.05rem;
    transition: var(--transition);
}
.meet-option-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.meet-option-text strong { font-size: .9375rem; font-weight: 800; color: var(--text-navy); }
.meet-option-text small { font-size: .78rem; color: var(--text-muted); line-height: 1.4; }
.meet-option-check {
    width: 26px; height: 26px; flex-shrink: 0;
    border: 2px solid var(--border);
    border-radius: 50%;
    display: grid; place-items: center;
    color: transparent;
    font-size: .7rem;
    transition: var(--transition);
}
.meet-option.checked {
    border-color: var(--primary-500);
    background: var(--primary-25);
}
.meet-option.checked .meet-option-icon {
    background: var(--primary); color: #fff;
    box-shadow: 0 6px 14px rgba(1, 136, 247, .25);
}
.meet-option.checked .meet-option-check {
    background: var(--success); border-color: var(--success); color: #fff;
}

/* --- 32.4 Báo vắng mặt --- */
.absence-toggle {
    display: flex; align-items: center; gap: .875rem;
    padding: .875rem 1rem;
    border: 1.5px dashed var(--accent);
    border-radius: var(--radius-sm);
    background: var(--accent-light);
    cursor: pointer;
    transition: var(--transition);
    position: relative;
}
.absence-toggle:hover { border-style: solid; }
.absence-toggle input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.absence-toggle-box {
    width: 30px; height: 30px; flex-shrink: 0;
    border: 2px solid var(--accent);
    border-radius: 9px;
    display: grid; place-items: center;
    color: transparent;
    font-size: .8rem;
    transition: var(--transition);
}
.absence-toggle-text { display: flex; flex-direction: column; gap: 2px; }
.absence-toggle-text strong { font-size: .9375rem; font-weight: 800; color: var(--text-navy); }
.absence-toggle-text small { font-size: .78rem; color: var(--text-muted); }
.absence-toggle.checked { border-style: solid; background: var(--accent); }
.absence-toggle.checked .absence-toggle-box { background: #fff; border-color: #fff; color: var(--accent); }
.absence-toggle.checked .absence-toggle-text strong,
.absence-toggle.checked .absence-toggle-text small { color: #fff; }

.absence-box {
    margin-top: 1rem;
    padding: 1.125rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
}
.absent-choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.absent-choice { position: relative; cursor: pointer; }
.absent-choice input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.absent-choice-box {
    display: flex; flex-direction: column; align-items: center; gap: .25rem;
    padding: .875rem .75rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--white);
    text-align: center;
    transition: var(--transition);
}
.absent-choice-box i { font-size: 1.25rem; color: var(--text-muted); transition: var(--transition); }
.absent-choice-box strong { font-size: .875rem; font-weight: 800; color: var(--text-navy); }
.absent-choice-box small { font-size: .72rem; color: var(--text-muted); }
.absent-choice:hover .absent-choice-box { border-color: var(--primary-300); }
.absent-choice input:checked + .absent-choice-box {
    border-color: var(--success);
    background: var(--success-light);
    box-shadow: 0 4px 12px rgba(34, 197, 94, .18);
}
.absent-choice input:checked + .absent-choice-box i { color: var(--success); }
.absent-choice input:checked + .absent-choice-box.danger,
.absent-choice input:checked + .absent-choice-box.danger i { color: var(--danger); }
.absent-choice input:checked + .absent-choice-box.danger {
    border-color: var(--danger);
    background: var(--danger-light);
    box-shadow: 0 4px 12px rgba(239, 68, 68, .18);
}

/* --- 32.5 Danh sách hướng dẫn --- */
.guide-list {
    margin: 0; padding-left: 1.15rem;
    font-size: .875rem; color: var(--text-soft); line-height: 1.75;
}
.guide-list strong { color: var(--text-navy); }

/* --- 32.6 Họp tổ chuyên môn: Lần 1 / Lần 2 (loại trừ nhau) --- */
.meet-option-group { flex-wrap: wrap; }
.meet-option-group > .round-choices {
    flex: 1 1 100%;
    width: 100%;
    margin-top: .875rem;
    padding-top: .875rem;
    border-top: 1px dashed var(--border);
}
.meet-option-group.checked > .round-choices { border-top-color: var(--primary-300); }
.round-choices-label {
    display: flex; align-items: center; gap: .375rem;
    font-size: .8125rem; font-weight: 700; color: var(--text-navy);
    margin-bottom: .625rem;
}
.round-choices-label em { font-style: normal; font-weight: 600; color: var(--accent); }
.round-choices-list { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: .5rem; }
.round-choice { position: relative; cursor: pointer; }
.round-choice input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.round-choice-box {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .5rem .875rem;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    background: var(--white);
    transition: var(--transition);
}
.round-choice-box i { font-size: .95rem; color: var(--text-muted); transition: var(--transition); }
.round-choice-box strong { font-size: .875rem; font-weight: 800; color: var(--text-navy); }
.round-choice:hover .round-choice-box { border-color: var(--primary-300); background: var(--primary-25); }
.round-choice input:checked + .round-choice-box {
    border-color: var(--primary);
    background: var(--primary);
    box-shadow: 0 4px 12px rgba(1, 136, 247, .2);
}
.round-choice input:checked + .round-choice-box i,
.round-choice input:checked + .round-choice-box strong { color: #fff; }
.round-choice.checked .round-choice-box {
    border-color: var(--primary);
    background: var(--primary);
}
.round-choice.checked .round-choice-box i,
.round-choice.checked .round-choice-box strong { color: #fff; }

/* --- 32.7 Trạng thái ô "Tôi báo vắng mặt" --- */
.absence-toggle-state {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
}
.absence-state-on { display: none; color: var(--danger); background: var(--danger-light); padding: .3rem .7rem; border-radius: 999px; }
.absence-state-off { display: inline-flex; align-items: center; gap: .375rem; color: var(--text-muted); background: var(--bg-soft); }
.absence-toggle.checked .absence-state-on { display: inline-flex; align-items: center; gap: .375rem; }
.absence-toggle.checked .absence-state-off { display: none; }

/* --- 32.8 Widget tổng hợp điểm danh (dữ liệu KPI) --- */
.kpi-ref-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: .625rem;
}
.kpi-ref-item {
    display: flex; flex-direction: column; gap: .25rem;
    padding: .625rem .75rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
}
.kpi-ref-label { font-size: .72rem; color: var(--text-muted); font-weight: 600; }
.kpi-ref-value { font-size: 1.125rem; font-weight: 800; color: var(--primary); line-height: 1.2; }
.att-kpi-card .table { font-size: .8125rem; }

/* --- 33. KHU VỰC QUẢN TRỊ ĐIỂM DANH (Ban Giám hiệu) --- */

/* Bộ lọc */
.att-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

/* Biểu đồ xu hướng 12 tháng */
.att-chart {
    display: flex;
    gap: .5rem;
    height: 260px;
}
.att-chart-y {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: .68rem;
    color: var(--text-muted);
    font-weight: 600;
    padding-bottom: 26px;
    text-align: right;
    min-width: 38px;
}
.att-chart-plot {
    position: relative;
    flex: 1;
    min-width: 0;
    padding-bottom: 26px;
}
.att-chart-grid {
    position: absolute;
    inset: 0 0 26px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}
.att-chart-grid span {
    display: block;
    border-top: 1px dashed var(--border-soft);
    width: 100%;
}
.att-chart-grid span:last-child { border-top-style: solid; border-top-color: var(--border); }
.att-chart-bars {
    position: absolute;
    inset: 0 0 26px 0;
    display: flex;
    align-items: flex-end;
    gap: .375rem;
}
.att-chart-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    position: relative;
}
.att-chart-bar-wrap {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.att-chart-bar {
    width: 62%;
    min-width: 10px;
    background: linear-gradient(180deg, var(--primary) 0%, var(--primary-600) 100%);
    border-radius: 6px 6px 2px 2px;
    position: relative;
    transition: var(--transition);
    box-shadow: 0 3px 10px rgba(1, 136, 247, .18);
}
.att-chart-col:hover .att-chart-bar { filter: brightness(1.08); }
.att-chart-col.current .att-chart-bar {
    background: linear-gradient(180deg, #22c55e 0%, var(--success) 100%);
    box-shadow: 0 3px 12px rgba(34, 197, 94, .28);
}
.att-chart-col.empty .att-chart-bar { background: var(--border-soft); box-shadow: none; }
.att-chart-bar-val {
    position: absolute;
    top: -19px;
    left: 50%;
    transform: translateX(-50%);
    font-size: .7rem;
    font-weight: 700;
    color: var(--text-muted);
}
.att-chart-dot {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    transform: translateY(50%);
    z-index: 2;
}
.att-chart-label {
    position: absolute;
    bottom: 0;
    font-size: .7rem;
    font-weight: 700;
    color: var(--text-muted);
}
.att-chart-col.current .att-chart-label { color: var(--success); }
.att-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--border-soft);
    font-size: .75rem;
    color: var(--text-muted);
}
.att-legend span { display: inline-flex; align-items: center; gap: .375rem; }
.att-legend i { width: 10px; height: 10px; display: inline-block; }

/* Vòng tròn tỷ lệ tham dự */
.att-ring-wrap {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
.att-ring {
    --pct: 0;
    width: 118px;
    height: 118px;
    flex-shrink: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(var(--primary) calc(var(--pct) * 1%), var(--border-soft) 0);
    position: relative;
}
.att-ring-inner {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--white);
    display: grid;
    place-items: center;
    align-content: center;
    text-align: center;
}
.att-ring-inner strong { font-size: 1.375rem; font-weight: 800; color: var(--primary); line-height: 1.1; }
.att-ring-inner small { font-size: .68rem; color: var(--text-muted); }
.att-ring-legend {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    font-size: .8rem;
    color: var(--text-soft);
}
.att-ring-legend div { display: flex; align-items: center; gap: .5rem; }
.att-ring-legend .dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

/* Danh sách giáo viên xin vắng */
.att-absent-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    max-height: 520px;
    overflow-y: auto;
}
.att-absent-item {
    border: 1px solid var(--border-soft);
    border-left: 3px solid var(--warning);
    border-radius: var(--radius-sm);
    padding: .75rem .875rem;
    background: var(--bg-soft);
    transition: var(--transition);
}
.att-absent-item:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .06); }
.att-absent-item.danger { border-left-color: var(--danger); }
.att-absent-head {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin-bottom: .5rem;
}
.att-absent-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: .875rem;
    flex-shrink: 0;
}
.att-absent-item.danger .att-absent-avatar { background: var(--danger); }
.att-absent-item.warning .att-absent-avatar { background: var(--warning); }
.att-absent-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.att-absent-info strong { font-size: .875rem; font-weight: 700; color: var(--text-navy); }
.att-absent-info small { font-size: .72rem; color: var(--text-muted); }
.att-absent-reason {
    font-size: .8125rem;
    color: var(--text-soft);
    line-height: 1.55;
    padding: .5rem .625rem;
    background: var(--white);
    border-radius: 6px;
    border: 1px solid var(--border-soft);
    margin-bottom: .375rem;
}
.att-absent-reason i { color: var(--text-muted); margin-right: .25rem; font-size: .7rem; }
.att-absent-detail {
    font-size: .75rem;
    color: var(--text-muted);
    line-height: 1.5;
    padding: .375rem .625rem;
    background: var(--white);
    border-radius: 6px;
    border: 1px dashed var(--border);
    margin-bottom: .375rem;
}
.att-absent-foot {
    font-size: .7rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: .375rem;
}

/* Thanh tỷ lệ tham dự trong bảng KPI */
.att-rate {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.att-rate-bar {
    flex: 1;
    height: 7px;
    border-radius: 999px;
    background: var(--border-soft);
    overflow: hidden;
    min-width: 70px;
}
.att-rate-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    transition: var(--transition);
}
.att-rate strong { font-size: .8125rem; white-space: nowrap; }
.att-kpi-table td { vertical-align: middle; }

/* ============ 33.2 Bảng thống kê giáo viên vắng theo tháng ============ */
.att-absent-month-table td { vertical-align: middle; }
.att-absent-month-table tbody tr.is-current > td {
    background: var(--primary-50, #eef4ff);
    font-weight: 600;
}
.att-absent-month-table tbody tr.is-current > td:first-child {
    box-shadow: inset 3px 0 0 var(--primary);
}
.att-absent-month-table tbody tr.is-empty > td { opacity: .65; }
.att-month-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: .25rem .5rem;
    border-radius: var(--radius-full, 999px);
    background: var(--bg-soft);
    border: 1px solid var(--border-soft);
    color: var(--text-navy);
    font-weight: 700;
    font-size: .8125rem;
    text-decoration: none;
    transition: var(--transition);
}
.att-month-link:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.att-month-names { line-height: 1.6; }
.att-name-line {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .8125rem;
    color: var(--text-soft);
}
.att-name-line + .att-name-line { margin-top: .1875rem; }
.att-name-tag {
    flex-shrink: 0;
    font-size: .6875rem;
    font-weight: 700;
    padding: .0625rem .4375rem;
    border-radius: var(--radius-full, 999px);
}
.att-name-tag.ok   { background: #fef3c7; color: #b45309; }
.att-name-tag.bad  { background: #fee2e2; color: #b91c1c; }
.att-absent-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap;
}
.att-absent-actions { display: inline-flex; align-items: center; gap: .375rem; }
.att-absent-actions .btn-sm { padding: .25rem .55rem; font-size: .72rem; }

/* ============ 33.3 Dải chỉ số KPI ============ */
.att-kpi-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .625rem;
    margin-bottom: .875rem;
}
.att-kpi-sum-item {
    display: flex;
    flex-direction: column;
    gap: .1875rem;
    padding: .75rem .875rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm, 10px);
    background: var(--bg-soft);
}
.att-kpi-sum-label {
    font-size: .6875rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .02em;
}
.att-kpi-sum-value {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-navy);
    line-height: 1.2;
}
.att-note {
    font-size: .8125rem;
    color: var(--text-soft);
    line-height: 1.6;
    margin: 0;
    padding: .625rem .875rem;
    border-left: 3px solid var(--primary);
    background: var(--bg-soft);
    border-radius: 0 var(--radius-sm, 10px) var(--radius-sm, 10px) 0;
}
.att-note i { color: var(--primary); margin-right: .375rem; }
.att-note em { font-style: normal; font-weight: 600; color: var(--text-navy); }

/* ============ 33.4 Header nhóm trong bảng KPI / chi tiết ============ */
.att-kpi-table thead th,
.att-detail-table thead th {
    background: var(--bg-soft);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--text-muted);
    font-weight: 700;
    vertical-align: middle;
}
.att-kpi-table thead tr.att-kpi-group th,
.att-detail-table thead tr.att-kpi-group th {
    border-bottom: 1px solid var(--border);
}
.att-kpi-group-col {
    border-left: 1px solid var(--border-soft);
    border-right: 1px solid var(--border-soft);
    color: var(--primary) !important;
}
.att-kpi-sub th {
    font-size: .6875rem !important;
    padding: .4375rem .5rem !important;
    background: var(--white) !important;
    color: var(--text-muted) !important;
    font-weight: 600 !important;
}
.att-kpi-table tfoot td {
    background: var(--bg-soft);
    border-top: 2px solid var(--border);
    font-size: .8125rem;
}

/* ============ 33.5 Chú giải ============ */
.att-legend-wrap {
    flex-wrap: wrap;
    gap: .75rem 1.125rem;
    align-items: center;
}
.att-legend-title {
    font-size: .75rem;
    font-weight: 700;
    color: var(--text-navy);
    text-transform: uppercase;
    letter-spacing: .02em;
}
.att-legend i {
    border-radius: 3px;
}
.att-legend i[style*="border-radius:50%"] { border-radius: 50% !important; }

/* ============ 33.6 Bảng chi tiết viên chức ============ */
.att-detail-table td { vertical-align: middle; }
.att-detail-table tbody tr.row-warning > td { background: #fffbeb; }
.att-detail-table tbody tr.row-danger  > td { background: #fef2f2; }
.att-detail-reason { line-height: 1.55; }
.att-detail-reason span { display: block; color: var(--text-soft); }
.att-detail-reason small {
    display: block;
    margin-top: .1875rem;
    color: var(--text-muted);
    font-size: .75rem;
}
.att-dot {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: .625rem;
    color: #fff;
}
.att-dot.ok { background: var(--success); }
.att-dot.no { background: var(--border-soft); color: var(--text-muted); }
.badge-soft {
    background: var(--success-light, #dcfce7);
    color: var(--success-dark, #15803d);
    font-weight: 600;
}

/* ============ 33.7 Lựa chọn loại vắng trong modal ============ */
.absent-choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .625rem;
}
.absent-choice { cursor: pointer; margin: 0; }
.absent-choice input { position: absolute; opacity: 0; pointer-events: none; }
.absent-choice-box {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    padding: .75rem .875rem;
    border: 1.5px solid var(--border-soft);
    border-radius: var(--radius-sm, 10px);
    background: var(--white);
    transition: var(--transition);
}
.absent-choice-box i { font-size: 1.1rem; color: var(--success); margin-bottom: .125rem; }
.absent-choice-box strong { font-size: .875rem; color: var(--text-navy); }
.absent-choice-box small { font-size: .72rem; color: var(--text-muted); }
.absent-choice-box.danger i { color: var(--danger); }
.absent-choice input:checked + .absent-choice-box {
    border-color: var(--success);
    background: var(--success-light, #dcfce7);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .12);
}
.absent-choice input:checked + .absent-choice-box.danger {
    border-color: var(--danger);
    background: var(--danger-light, #fee2e2);
    box-shadow: 0 0 0 3px rgba(225, 29, 72, .12);
}
.absent-choice input:focus-visible + .absent-choice-box {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* --- 33.1 Responsive --- */
@media (max-width: 992px) {
    .att-chart { height: 220px; }
    .att-ring-wrap { flex-direction: column; text-align: center; }
    .att-ring-legend { align-items: flex-start; }
}
@media (max-width: 640px) {
    .att-chart-bars { gap: .1875rem; }
    .att-chart-label { font-size: .6rem; }
}

/* --- 32.9 Tháng chưa tới (khóa điểm danh) --- */
.month-chip.disabled {
    opacity: .38;
    cursor: not-allowed;
    pointer-events: auto;
}

/* --- 32.10 Responsive --- */
@media (max-width: 992px) {
    .month-picker { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .month-picker { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .absent-choices { grid-template-columns: 1fr; }
    .meet-option { padding: .75rem .85rem; gap: .625rem; }
    .meet-option-icon { width: 36px; height: 36px; font-size: .95rem; }
}