:root {
    --brand: #2753d7;
    --brand-dark: #1e3a8a;
    --sidebar-bg: rgba(255, 255, 255, .5);
    --sidebar-fg: #1f2937;
    --sidebar-width: 252px;
    --bs-primary: #2753d7;
    --bs-primary-rgb: 39, 83, 215;
    --bs-link-color: #2753d7;
    --bs-link-color-rgb: 39, 83, 215;
    --bs-body-font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Be Vietnam Pro", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
    --bs-body-color: #1f2937;
    --page-bg: #eef2fa;
    /* Kính mờ */
    --glass-bg: rgba(255, 255, 255, .58);
    --glass-border: rgba(255, 255, 255, .75);
    --glass-filter: blur(28px) saturate(180%);
    --glass-shadow: 0 8px 32px rgba(31, 45, 90, .08);
    --wallpaper:
        radial-gradient(900px 600px at 0% 0%, rgba(122, 162, 255, .55), transparent 60%),
        radial-gradient(800px 600px at 100% 10%, rgba(196, 160, 255, .45), transparent 60%),
        radial-gradient(900px 700px at 70% 100%, rgba(120, 220, 230, .40), transparent 60%),
        radial-gradient(700px 500px at 10% 90%, rgba(255, 190, 210, .35), transparent 60%),
        linear-gradient(160deg, #eef2fb 0%, #f3effa 50%, #eef7f8 100%);
}

body { background: var(--page-bg); -webkit-font-smoothing: antialiased; }

.btn-primary {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: #1f45b8;
    --bs-btn-hover-border-color: #1f45b8;
    --bs-btn-active-bg: #1b3da3;
    --bs-btn-active-border-color: #1b3da3;
    --bs-btn-disabled-bg: var(--brand);
    --bs-btn-disabled-border-color: var(--brand);
}
.btn-outline-primary {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-active-bg: var(--brand);
    --bs-btn-active-border-color: var(--brand);
}
.pagination { --bs-pagination-active-bg: var(--brand); --bs-pagination-active-border-color: var(--brand); }

/* ---------- Brand ---------- */
.brand-mark {
    width: 48px; height: 48px; border-radius: 14px;
    background: linear-gradient(135deg, #4f7bff, #2753d7 55%, #6d4ce0); box-shadow: 0 4px 12px rgba(39, 83, 215, .35); color: #fff; font-weight: 700;
    display: flex; align-items: center; justify-content: center; letter-spacing: .5px;
}
.brand-mark-sm { width: 32px; height: 32px; border-radius: 8px; font-size: .8rem; }

/* ---------- Website công khai ---------- */
.site-body { background: #fff; }
.site-header { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .95); backdrop-filter: blur(6px); border-bottom: 1px solid #edf0f6; }
.site-header .nav-link { font-weight: 500; color: #374151; }
.site-header .nav-link.active, .site-header .nav-link:hover { color: var(--brand); }
.site-eyebrow { font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); margin-bottom: .5rem; }
.site-hero { padding: 72px 0 64px; background: radial-gradient(1200px 400px at 85% -10%, #dfe7fd 0%, transparent 60%), linear-gradient(180deg, #f6f8fe 0%, #fff 100%); }
.site-hero-title { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; line-height: 1.15; letter-spacing: -.01em; color: #0f1b3d; }
.site-hero-lead { font-size: 1.15rem; color: #4b5563; max-width: 560px; }
.site-hero-panel { background: #fff; border: 1px solid #e5e8f0; border-radius: 18px; padding: 8px; box-shadow: 0 20px 50px rgba(30, 58, 138, .08); }
.site-hero-stat { display: flex; gap: 14px; padding: 16px; border-radius: 12px; }
.site-hero-stat + .site-hero-stat { border-top: 1px solid #f0f2f7; }
.site-hero-stat i { font-size: 1.4rem; color: var(--brand); background: #eef2fd; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.site-hero-stat strong { display: block; }
.site-hero-stat span { font-size: .88rem; color: #6b7280; }
.site-section { padding: 64px 0; }
.site-section-alt { background: #f6f8fc; }
.site-section-title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: #0f1b3d; }
.site-prose { font-size: 1.02rem; line-height: 1.75; color: #374151; }
.site-program { border-radius: 16px; overflow: hidden; transition: transform .15s, box-shadow .15s; }
.site-program:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(30, 58, 138, .1); }
.site-program-img { height: 180px; object-fit: cover; width: 100%; }
.site-program-placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #2753d7, #5b7ff0); }
.site-program-placeholder span { font-size: 3rem; font-weight: 800; color: rgba(255, 255, 255, .85); }
.site-program-cover { max-height: 420px; object-fit: cover; }
.site-feature { background: #fff; border: 1px solid #e5e8f0; border-radius: 14px; padding: 18px; height: 100%; }
.site-feature i { font-size: 1.4rem; color: var(--brand); display: block; margin-bottom: 8px; }
.site-facts li { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f0f2f7; }
.site-facts li span { color: #6b7280; }
.site-sticky { position: sticky; top: 88px; border-radius: 16px; }
.site-footer { background: #0f1b3d; color: #fff; padding: 48px 0 24px; }
.site-footer a { color: #c7d2fe; text-decoration: none; }
.site-contact li { display: flex; gap: 10px; margin-bottom: 8px; color: rgba(255, 255, 255, .8); }
.site-contact i { color: #93a8f5; }
@media (max-width: 767.98px) {
    .site-hero { padding: 40px 0; }
    .site-section { padding: 44px 0; }
}

/* ---------- Auth ---------- */
.auth-body { background: var(--wallpaper); background-attachment: fixed; }
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.auth-card { width: 100%; max-width: 420px; }

/* ---------- App shell (phong cách kính mờ macOS) ---------- */
.app-body { background: var(--wallpaper); background-attachment: fixed; }
.app-shell { display: flex; min-height: 100vh; }
.app-sidebar {
    width: var(--sidebar-width); color: var(--sidebar-fg); flex-shrink: 0;
    /* offcanvas-lg của Bootstrap ép nền trong suốt ở màn hình lớn */
    background-color: var(--sidebar-bg) !important;
    -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, .9);
}
@media (min-width: 992px) {
    .app-sidebar {
        position: sticky; top: 12px; height: calc(100vh - 24px); margin: 12px 0 12px 12px;
        border-radius: 22px; overflow-y: auto; scrollbar-width: thin;
    }
}
@media (max-width: 991.98px) {
    .app-sidebar.offcanvas-lg { --bs-offcanvas-width: var(--sidebar-width); --bs-offcanvas-bg: rgba(255, 255, 255, .82); border-radius: 0 22px 22px 0; }
}
.sidebar-brand {
    display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px;
    color: #111827; font-weight: 600;
}
.sidebar-nav { padding: 4px 10px 14px; display: flex; flex-direction: column; gap: 1px; width: 100%; }
.sidebar-header {
    font-size: .72rem; font-weight: 600; letter-spacing: .02em;
    color: #8a8f9c; padding: 14px 12px 4px;
}
.sidebar-link {
    display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 10px;
    color: var(--sidebar-fg); text-decoration: none; font-size: .92rem; font-weight: 500;
    transition: background .15s, color .15s;
}
.sidebar-link i { font-size: 1.02rem; width: 20px; text-align: center; color: var(--brand); }
.sidebar-link:hover { background: rgba(0, 0, 0, .05); color: #111827; }
.sidebar-link.active {
    background: linear-gradient(180deg, #3b6cf0, var(--brand)); color: #fff;
    box-shadow: 0 4px 12px rgba(39, 83, 215, .3), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.sidebar-link.active i { color: #fff; }

/* Khung nghiệp vụ: trải hết phần còn lại của màn hình */
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-x: clip; }
.app-topbar {
    display: flex; align-items: center; gap: 8px; padding: 10px 24px; min-height: 64px;
    position: sticky; top: 0; z-index: 10;
    background: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
    border-bottom: 1px solid rgba(255, 255, 255, .6);
    box-shadow: 0 1px 0 rgba(15, 23, 42, .05);
}
.page-title { font-size: 1.2rem; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.app-content { padding: 24px; flex: 1; width: 100%; }
@media (min-width: 992px) {
    .app-topbar { margin: 12px 12px 0; border-radius: 18px; border: 1px solid var(--glass-border); top: 12px; box-shadow: var(--glass-shadow); }
    .app-content { padding: 20px 12px 12px; }
}
@media (max-width: 575.98px) {
    .app-topbar { padding: 8px 16px; }
    .app-content { padding: 16px; }
}

.avatar {
    width: 36px; height: 36px; border-radius: 50%; color: #fff; font-weight: 600;
    background: linear-gradient(135deg, #5b8cff, #8b5cf6);
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(91, 92, 246, .35);
}

/* ---------- Components ---------- */
.card {
    --bs-card-bg: var(--glass-bg); --bs-card-cap-bg: transparent;
    border: 1px solid var(--glass-border); border-radius: 18px;
    -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
    box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, .8);
}
.card-header { background: transparent; font-weight: 600; padding: 14px 20px; border-bottom-color: rgba(15, 23, 42, .07); }
.card-header:first-child { border-radius: 18px 18px 0 0; }
.card-footer { background: transparent; border-top-color: rgba(15, 23, 42, .07); }
.list-group { --bs-list-group-bg: transparent; --bs-list-group-border-color: rgba(15, 23, 42, .07); }
.table { --bs-table-bg: transparent; --bs-table-border-color: rgba(15, 23, 42, .07); --bs-table-hover-bg: rgba(39, 83, 215, .05); }
.table > thead th { font-size: .78rem; font-weight: 600; color: #6b7280; background: rgba(255, 255, 255, .4); white-space: nowrap; }
.table > :not(caption) > * > * { padding: .7rem 1rem; }

.form-control, .form-select {
    background-color: rgba(255, 255, 255, .7); border-color: rgba(15, 23, 42, .12); border-radius: 10px;
}
.form-control:focus, .form-select:focus {
    background-color: #fff; border-color: #7d9bf0; box-shadow: 0 0 0 4px rgba(39, 83, 215, .15);
}
.input-group-text { background: rgba(255, 255, 255, .5); border-color: rgba(15, 23, 42, .12); }
.btn { --bs-btn-border-radius: 10px; --bs-btn-font-weight: 500; }
.btn-sm { --bs-btn-border-radius: 8px; }
.btn-primary { background-image: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0)); box-shadow: 0 2px 8px rgba(39, 83, 215, .28); }
.btn-light, .btn-outline-secondary { --bs-btn-bg: rgba(255, 255, 255, .6); --bs-btn-border-color: rgba(15, 23, 42, .12); --bs-btn-hover-bg: rgba(255, 255, 255, .9); --bs-btn-hover-border-color: rgba(15, 23, 42, .18); --bs-btn-hover-color: #111827; }
.badge { font-weight: 500; }
.nav-tabs { --bs-nav-tabs-link-active-bg: rgba(255, 255, 255, .7); --bs-nav-tabs-border-color: rgba(15, 23, 42, .08); }
.nav-pills { --bs-nav-pills-border-radius: 10px; --bs-nav-pills-link-active-bg: var(--brand); }
.alert { border-radius: 14px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

.dropdown-menu, .modal-content, .toast, .popover {
    background: rgba(255, 255, 255, .8);
    -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
    border: 1px solid var(--glass-border); box-shadow: 0 12px 40px rgba(15, 23, 42, .16);
}
.dropdown-menu { border-radius: 14px; padding: 6px; }
.dropdown-item { border-radius: 8px; }
.dropdown-item:active { background: var(--brand); }
.modal-content { border-radius: 20px; }
.modal-header, .modal-footer { border-color: rgba(15, 23, 42, .07); }
.toast { border-radius: 14px; }
.toast-header { background: transparent; }
.modal-backdrop.show { opacity: .25; }
.offcanvas-backdrop.show { opacity: .2; }

a.stat-card { transition: transform .15s, box-shadow .15s; }
a.stat-card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(39, 83, 215, .14), inset 0 1px 0 rgba(255, 255, 255, .8); }
.today-time {
    width: 58px; flex-shrink: 0; text-align: center; font-weight: 600; line-height: 1.15;
    border-left: 3px solid #c3cff3; padding-left: 6px;
}
.today-time small { display: block; font-weight: 400; color: #6b7280; font-size: .75rem; }
.today-time.live { border-left-color: #f59e0b; }
.todo-count { min-width: 34px; font-size: .85rem; }
.stat-card .stat-value { font-size: 1.8rem; font-weight: 700; line-height: 1.2; margin: 4px 0; letter-spacing: -.02em; }

.role-badge { font-weight: 500; }
.role-admin    { background: #fde2e1; color: #a61b1b; }
.role-staff    { background: #fff1d6; color: #8a5300; }
.role-teacher  { background: #dbeafe; color: #1e40af; }
.role-student  { background: #dcfce7; color: #166534; }
.role-guardian { background: #ede9fe; color: #5b21b6; }

.credentials code { font-size: 1rem; }

/* Thông báo */
.notif-menu { width: 360px; max-width: calc(100vw - 24px); }
.notif-list { max-height: 420px; overflow-y: auto; }
.notif-item { display: block; padding: 10px 14px; color: inherit; text-decoration: none; border-radius: 10px; font-size: .9rem; }
.notif-item:hover { background: rgba(39, 83, 215, .07); }
.notif-unread { background: rgba(39, 83, 215, .08); }

.row-link { cursor: pointer; }
/* FullCalendar */
#calendar { --fc-border-color: rgba(15, 23, 42, .08); --fc-today-bg-color: rgba(39, 83, 215, .07); --fc-page-bg-color: transparent; --fc-neutral-bg-color: rgba(255, 255, 255, .4); font-size: .88rem; }
#calendar .fc-button { font-size: .82rem; padding: .3rem .65rem; white-space: nowrap; }
@media (max-width: 575.98px) { #calendar .fc-toolbar-title { font-size: .95rem; } }
#calendar .fc-button-primary { background: rgba(255, 255, 255, .7); border-radius: 8px; color: #374151; border-color: #d1d5db; }
#calendar .fc-button-primary:not(:disabled).fc-button-active,
#calendar .fc-button-primary:not(:disabled):active { background: var(--brand); border-color: var(--brand); color: #fff; }
#calendar a.fc-col-header-cell-cushion, #calendar a.fc-daygrid-day-number, #calendar a.fc-list-day-text,
#calendar a.fc-list-day-side-text { text-decoration: none; color: inherit; }
#calendar .fc-toolbar-title { font-size: 1.1rem; font-weight: 600; }
#calendar .ev-cancelled .fc-event-title { text-decoration: line-through; }
#calendar .ev-substitute { box-shadow: inset 4px 0 0 #f59e0b; }

.att-options .btn { min-width: 56px; }
@media (max-width: 575.98px) {
    .att-name { width: 100%; }
    .att-options { width: 100%; }
    .att-options .btn { flex: 1; min-width: 0; padding: .45rem 0; }
    .att-actions { position: sticky; bottom: 0; background: rgba(255, 255, 255, .6); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); padding: 10px; margin: 0 -10px; border-radius: 14px; z-index: 5; }
    .att-actions .btn { flex: 1; }
}

.grade-table .score-input { width: 64px; margin: 0 auto; }
.grade-table .sticky-col { position: sticky; left: 0; background: rgba(255, 255, 255, .95); z-index: 2; box-shadow: 1px 0 0 #e5e8f0; }
.grade-table thead .sticky-col { background: #f6f7fb; }

.session-table { max-height: 520px; overflow-y: auto; }
.session-table thead th { position: sticky; top: 0; z-index: 1; }

.search-dropdown { z-index: 20; max-height: 320px; overflow-y: auto; }
.class-facts .label { font-size: .8rem; color: #6b7280; margin-bottom: 2px; }
.slot-day {
    width: 72px; flex-shrink: 0; text-align: center; font-weight: 600; font-size: .85rem;
    background: rgba(39, 83, 215, .1); color: var(--brand); border-radius: 10px; padding: 6px 0;
}
.profile-dl dt { font-weight: 400; color: #6b7280; }
.profile-dl dd { margin-bottom: .6rem; }

/* Nền phụ trong khung kính */
.app-body .bg-light { background-color: rgba(255, 255, 255, .45) !important; }
.app-body .text-bg-light { background-color: rgba(255, 255, 255, .7) !important; }
.app-body .border { border-color: rgba(15, 23, 42, .1) !important; }