/* _content/QuanTriTruongHoc.TKB/Components/Layout/QuanTriHeThongLayout/QuanTriHeThong.razor.rz.scp.css */
@keyframes sbGlowPulse-b-d2pv8o3tmh {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.35));
    }

    50% {
        filter: drop-shadow(0 0 16px rgba(245, 158, 11, 0.65));
    }
}

@media (max-width: 992px) {
    .mobile-toggle[b-d2pv8o3tmh] {
        display: flex;
    }

    .app-sidebar[b-d2pv8o3tmh] {
        left: 0;
        top: 0;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0 22px 22px 0;
        transform: translateX(-100%);
        transition: transform .25s ease, width .3s ease;
    }

    .app-sidebar.mobile-show[b-d2pv8o3tmh] {
        transform: translateX(0);
    }

    .sidebar-overlay.show[b-d2pv8o3tmh] {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(2, 6, 15, 0.55);
        backdrop-filter: blur(4px);
        z-index: 1040;
    }

    .collapse-btn[b-d2pv8o3tmh] {
        display: none;
    }
}
/* _content/QuanTriTruongHoc.TKB/Components/Pages/QuanLyHoSoGiaoDuc/QuanLyHoSoGiaoDuc.razor.rz.scp.css */
.hsgd-container[b-anfmq5ewyj] {
    max-width: 1600px;
    margin: 1.25rem auto;
    padding: 0 1rem 2rem;
    color: #172033;
    --hsgd-navy: #071b33;
    --hsgd-navy-light: #123f68;
    --hsgd-orange: #f59e0b;
    --hsgd-green: #168447;
    --hsgd-green-soft: #edf9f1;
}

.hsgd-heading[b-anfmq5ewyj] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

    .hsgd-heading h1[b-anfmq5ewyj] {
        margin: 0;
        font-size: clamp(1.45rem, 2.2vw, 2rem);
        font-weight: 750;
    }

    .hsgd-heading p[b-anfmq5ewyj] {
        margin: .25rem 0 0;
        color: #64748b;
    }

.hsgd-toolbar[b-anfmq5ewyj], .hsgd-actions[b-anfmq5ewyj] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.hsgd-alert[b-anfmq5ewyj] {
    margin: .75rem 0;
}

.hsgd-filters[b-anfmq5ewyj] {
    display: grid;
    grid-template-columns: 2fr 1.2fr 1.2fr 1.2fr auto;
    gap: .75rem;
    align-items: end;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid #dce3ed;
    border-radius: 14px;
    background: #f8fafc;
}

    .hsgd-filters label[b-anfmq5ewyj], .hsgd-modal label[b-anfmq5ewyj] {
        display: block;
        margin-bottom: .3rem;
        font-size: .82rem;
        font-weight: 650;
        color: #334155;
    }

.hsgd-clear-filter[b-anfmq5ewyj] {
    white-space: nowrap;
}

.hsgd-table-wrap[b-anfmq5ewyj] {
    overflow-x: auto;
    border: 1px solid #b8c7d9;
    border-top: 3px solid var(--hsgd-orange);
    border-radius: 12px;
    background: white;
    box-shadow: 0 4px 16px rgb(7 27 51 / 9%);
}

.hsgd-container > .hsgd-table-wrap[b-anfmq5ewyj] {
    overflow-x: hidden;
}

.hsgd-table[b-anfmq5ewyj] {
    width: 100%;
    min-width: 0;
    margin: 0;
    table-layout: fixed;
    font-size: .69rem;
    line-height: 1.2;
}

    .hsgd-table thead th[b-anfmq5ewyj] {
        position: sticky;
        top: 0;
        z-index: 1;
        padding: .38rem .18rem;
        white-space: normal;
        overflow-wrap: anywhere;
        color: white;
        background: linear-gradient(180deg, var(--hsgd-navy-light), var(--hsgd-navy));
        border-color: rgb(255 255 255 / 16%);
        border-bottom: 2px solid var(--hsgd-orange);
        text-align: center;
        vertical-align: middle;
    }

    .hsgd-table td[b-anfmq5ewyj] {
        padding: .32rem .18rem;
        vertical-align: middle;
        text-align: center;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .hsgd-table tbody tr:nth-child(even) td[b-anfmq5ewyj] {
        background: #f7fafc;
    }

    .hsgd-table tbody tr:hover td[b-anfmq5ewyj] {
        background: var(--hsgd-green-soft);
        color: #102d20;
    }

    .hsgd-table tbody tr:hover td:first-child[b-anfmq5ewyj] {
        box-shadow: inset 3px 0 0 var(--hsgd-green);
    }

.hsgd-table th:nth-child(1)[b-anfmq5ewyj] { width: 3%; }
.hsgd-table th:nth-child(2)[b-anfmq5ewyj] { width: 11%; }
.hsgd-table th:nth-child(3)[b-anfmq5ewyj] { width: 8%; }
.hsgd-table th:nth-child(4)[b-anfmq5ewyj] { width: 7%; }
.hsgd-table th:nth-child(5)[b-anfmq5ewyj] { width: 6%; }
.hsgd-table th:nth-child(6)[b-anfmq5ewyj] { width: 7%; }
.hsgd-table th:nth-child(7)[b-anfmq5ewyj] { width: 7%; }
.hsgd-table th:nth-child(8)[b-anfmq5ewyj] { width: 8%; }
.hsgd-table th:nth-child(9)[b-anfmq5ewyj] { width: 8%; }
.hsgd-table th:nth-child(10)[b-anfmq5ewyj] { width: 6%; }
.hsgd-table th:nth-child(11)[b-anfmq5ewyj] { width: 7%; }
.hsgd-table th:nth-child(12)[b-anfmq5ewyj] { width: 7%; }
.hsgd-table th:nth-child(13)[b-anfmq5ewyj] { width: 15%; }

.hsgd-name[b-anfmq5ewyj] {
    min-width: 0;
    max-width: none;
    text-align: left !important;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.hsgd-file-name[b-anfmq5ewyj] {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.hsgd-actions[b-anfmq5ewyj] {
    min-width: 0;
    justify-content: center;
    gap: .18rem;
}

    .hsgd-actions .btn[b-anfmq5ewyj] {
        min-width: 28px;
        min-height: 28px;
        padding: .14rem .24rem;
        font-size: .7rem;
        line-height: 1;
    }

    .hsgd-actions .btn-success[b-anfmq5ewyj] {
        background: var(--hsgd-green);
        border-color: var(--hsgd-green);
        color: #fff;
    }

    .hsgd-actions .btn-warning[b-anfmq5ewyj] {
        background: var(--hsgd-orange);
        border-color: var(--hsgd-orange);
        color: var(--hsgd-navy);
    }

    .hsgd-actions .btn-outline-primary[b-anfmq5ewyj] {
        border-color: var(--hsgd-navy-light);
        color: var(--hsgd-navy-light);
    }

        .hsgd-actions .btn-outline-primary:hover[b-anfmq5ewyj] {
            background: var(--hsgd-navy);
            border-color: var(--hsgd-navy);
            color: #fff;
        }

.hsgd-status[b-anfmq5ewyj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: .22rem .35rem;
    border-radius: 10px;
    font-weight: 650;
    white-space: normal;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.hsgd-status-pending[b-anfmq5ewyj] {
    background: #fff1cf;
    color: #8a4b00;
    border: 1px solid #f5c45d;
}

.hsgd-status-signed[b-anfmq5ewyj] {
    background: #e8f0f8;
    color: var(--hsgd-navy);
    border: 1px solid #9eb5cf;
}

.hsgd-status-success[b-anfmq5ewyj] {
    background: #dff5e7;
    color: #0d6534;
    border: 1px solid #73c58f;
}

.hsgd-status-warning[b-anfmq5ewyj] {
    background: #fff0cc;
    color: #8a4700;
    border: 1px solid var(--hsgd-orange);
}

.hsgd-status-danger[b-anfmq5ewyj] {
    background: #fee2e2;
    color: #991b1b;
}

.hsgd-status-muted[b-anfmq5ewyj] {
    background: #e2e8f0;
    color: #475569;
}

.hsgd-empty[b-anfmq5ewyj] {
    display: grid;
    place-items: center;
    min-height: 230px;
    padding: 2rem;
    color: #64748b;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
}

    .hsgd-empty i[b-anfmq5ewyj] {
        font-size: 2.5rem;
    }

.hsgd-mobile-list[b-anfmq5ewyj] {
    display: none;
}

.hsgd-modal-overlay[b-anfmq5ewyj] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgb(15 23 42 / 62%);
    overflow-y: auto;
}

.hsgd-modal[b-anfmq5ewyj] {
    width: min(760px, 100%);
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding: 1.1rem;
    border-radius: 15px;
    background: white;
    box-shadow: 0 24px 70px rgb(15 23 42 / 30%);
}

.hsgd-modal-small[b-anfmq5ewyj] {
    width: min(500px, 100%);
}

.hsgd-modal-history[b-anfmq5ewyj] {
    width: min(1250px, 100%);
}

.hsgd-modal > header[b-anfmq5ewyj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .8rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.hsgd-modal h2[b-anfmq5ewyj] {
    margin: 0;
    font-size: 1.2rem;
}

.hsgd-close[b-anfmq5ewyj] {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #f1f5f9;
    font-size: 1.5rem;
    line-height: 1;
}

.hsgd-form-grid[b-anfmq5ewyj] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .9rem;
}

    .hsgd-form-grid label span[b-anfmq5ewyj] {
        color: #dc2626;
    }

    .hsgd-form-grid small[b-anfmq5ewyj] {
        display: block;
        margin-top: .3rem;
        color: #64748b;
        overflow-wrap: anywhere;
    }

.hsgd-span-2[b-anfmq5ewyj] {
    grid-column: span 2;
}

.hsgd-modal footer[b-anfmq5ewyj] {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

.hsgd-history-table[b-anfmq5ewyj] {
    min-width: 1000px;
    margin: 0;
    font-size: .82rem;
}

    .hsgd-history-table th[b-anfmq5ewyj] {
        white-space: nowrap;
        background: #eff6ff;
    }

@media (max-width: 1100px) {
    .hsgd-filters[b-anfmq5ewyj] {
        grid-template-columns: 1fr 1fr;
    }

    .hsgd-clear-filter[b-anfmq5ewyj] {
        justify-self: start;
    }
}

@media (max-width: 768px) {
    .hsgd-container[b-anfmq5ewyj] {
        padding-inline: .65rem;
    }

    .hsgd-heading[b-anfmq5ewyj] {
        flex-direction: column;
    }

    .hsgd-toolbar[b-anfmq5ewyj] {
        width: 100%;
    }

        .hsgd-toolbar .btn[b-anfmq5ewyj] {
            flex: 1;
            min-height: 44px;
        }

    .hsgd-filters[b-anfmq5ewyj] {
        grid-template-columns: 1fr;
        padding: .8rem;
    }

    .hsgd-table-wrap:has(.hsgd-table)[b-anfmq5ewyj] {
        display: none;
    }

    .hsgd-modal-history .hsgd-table-wrap[b-anfmq5ewyj] {
        display: block;
    }

    .hsgd-mobile-list[b-anfmq5ewyj] {
        display: grid;
        gap: .8rem;
    }

    .hsgd-card[b-anfmq5ewyj] {
        padding: 1rem;
        border: 1px solid #dce3ed;
        border-radius: 14px;
        background: white;
        box-shadow: 0 3px 14px rgb(15 23 42 / 7%);
    }

    .hsgd-card-head[b-anfmq5ewyj] {
        display: grid;
        gap: .6rem;
        margin-bottom: .8rem;
    }

        .hsgd-card-head h2[b-anfmq5ewyj] {
            margin: 0;
            font-size: 1.05rem;
        }

        .hsgd-card-head .hsgd-status[b-anfmq5ewyj] {
            justify-self: start;
        }

    .hsgd-card dl[b-anfmq5ewyj] {
        margin: 0 0 .8rem;
    }

        .hsgd-card dl div[b-anfmq5ewyj] {
            display: grid;
            grid-template-columns: 110px 1fr;
            gap: .5rem;
            padding: .3rem 0;
        }

    .hsgd-card dt[b-anfmq5ewyj] {
        color: #64748b;
    }

    .hsgd-card dd[b-anfmq5ewyj] {
        margin: 0;
        font-weight: 550;
    }

    .hsgd-actions .btn[b-anfmq5ewyj] {
        min-width: 42px;
        min-height: 42px;
    }

    .hsgd-form-grid[b-anfmq5ewyj] {
        grid-template-columns: 1fr;
    }

    .hsgd-span-2[b-anfmq5ewyj] {
        grid-column: auto;
    }
}

.hsgd-view-switcher[b-anfmq5ewyj] { display:flex; gap:.35rem; max-width:100%; margin:.25rem 0 .75rem; padding:.3rem; overflow-x:auto; border:1px solid #dbe3ec; border-radius:11px; background:#f5f8fb; }
.hsgd-view-switcher button[b-anfmq5ewyj] { display:inline-flex; gap:.4rem; align-items:center; min-height:38px; padding:.42rem .72rem; border:1px solid transparent; border-radius:8px; background:transparent; color:#52677d; font-size:.78rem; font-weight:650; white-space:nowrap; }
.hsgd-view-switcher button:hover[b-anfmq5ewyj],.hsgd-view-switcher button:focus-visible[b-anfmq5ewyj] { border-color:#b9cbdc; outline:2px solid rgb(37 99 235 / 10%); background:#fff; }.hsgd-view-switcher button.active[b-anfmq5ewyj] { border-color:#8caeca; background:#fff; color:#174d75; box-shadow:0 2px 7px rgb(15 23 42 / 7%); }
.hsgd-quick-filters[b-anfmq5ewyj] { display:flex; gap:.4rem; max-width:100%; margin-bottom:.7rem; overflow-x:auto; scrollbar-width:thin; }.hsgd-quick-filters button[b-anfmq5ewyj] { display:inline-flex; gap:.42rem; align-items:center; min-height:34px; padding:.35rem .62rem; border:1px solid #d5dfe9; border-radius:999px; background:#fff; color:#52677d; font-size:.72rem; white-space:nowrap; }.hsgd-quick-filters button span[b-anfmq5ewyj] { min-width:21px; padding:.08rem .32rem; border-radius:999px; background:#edf1f5; text-align:center; }.hsgd-quick-filters button.active[b-anfmq5ewyj] { border-color:#668fb2; background:#edf5fb; color:#194f76; }
.hsgd-advanced-filter[b-anfmq5ewyj] { margin-bottom:.85rem; }.hsgd-advanced-filter-toggle[b-anfmq5ewyj] { display:inline-flex; gap:.45rem; align-items:center; min-height:34px; padding:.36rem .65rem; border:1px solid #d5dfe9; border-radius:8px; background:#fff; color:#425a70; font-size:.75rem; font-weight:650; }.hsgd-advanced-filter-toggle span[b-anfmq5ewyj] { min-width:20px; border-radius:999px; background:#dceaf6; color:#174d75; text-align:center; }
.hsgd-advanced-filter .hsgd-filters[b-anfmq5ewyj] { grid-template-columns:1.6fr repeat(4,1fr) auto; margin:.55rem 0 0; }
@media (max-width: 1199px) { .hsgd-advanced-filter .hsgd-filters[b-anfmq5ewyj] { grid-template-columns:repeat(3,1fr); }.hsgd-clear-filter[b-anfmq5ewyj] { align-self:end; } }
@media (max-width: 767px) { .hsgd-view-switcher button[b-anfmq5ewyj] { min-width:max-content; }.hsgd-advanced-filter .hsgd-filters[b-anfmq5ewyj] { grid-template-columns:1fr; }.hsgd-advanced-filter-toggle[b-anfmq5ewyj] { width:100%; justify-content:center; } }

/* ===== Khung trang: navy đậm phối cam và xanh lá ===== */
.hsgd-container[b-anfmq5ewyj] {
    margin-top: .65rem;
    padding-bottom: 1.25rem;
}

.hsgd-heading[b-anfmq5ewyj] {
    position: relative;
    align-items: center;
    min-height: 62px;
    margin-bottom: .65rem;
    padding: .6rem .75rem .6rem 1rem;
    overflow: hidden;
    border: 1px solid #173b60;
    border-left: 5px solid var(--hsgd-orange);
    border-radius: 12px;
    background: linear-gradient(115deg, var(--hsgd-navy) 0%, #0c2d50 68%, #144d58 100%);
    box-shadow: 0 6px 18px rgb(7 27 51 / 16%);
}

    .hsgd-heading[b-anfmq5ewyj]::after {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 3px;
        content: "";
        background: linear-gradient(90deg, var(--hsgd-orange) 0 34%, var(--hsgd-green) 34% 100%);
    }

    .hsgd-heading h1[b-anfmq5ewyj] {
        margin: 0;
        color: #fff;
        font-size: clamp(1.08rem, 1.45vw, 1.32rem);
        font-weight: 750;
        line-height: 1.15;
        letter-spacing: .01em;
    }

    .hsgd-heading p[b-anfmq5ewyj] {
        margin: .16rem 0 0;
        color: #d8e5f1;
        font-size: .74rem;
        line-height: 1.25;
    }

.hsgd-toolbar[b-anfmq5ewyj] {
    align-items: center;
    justify-content: flex-end;
    gap: .42rem;
}

    .hsgd-toolbar .btn[b-anfmq5ewyj] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 34px;
        padding: .35rem .72rem;
        border-width: 1px;
        border-radius: 8px;
        font-size: .78rem;
        font-weight: 700;
        line-height: 1.1;
        box-shadow: 0 3px 9px rgb(0 0 0 / 16%);
        transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, color .16s ease;
    }

        .hsgd-toolbar .btn i[b-anfmq5ewyj] {
            margin-right: .32rem;
            font-size: .9rem;
        }

        .hsgd-toolbar .btn-primary[b-anfmq5ewyj] {
            color: #182536;
            border-color: #ffbd45;
            background: linear-gradient(180deg, #ffbd45, var(--hsgd-orange));
        }

            .hsgd-toolbar .btn-primary:hover:not(:disabled)[b-anfmq5ewyj] {
                color: var(--hsgd-navy);
                border-color: #ffd27a;
                background: #ffd27a;
                box-shadow: 0 5px 13px rgb(245 158 11 / 32%);
                transform: translateY(-1px);
            }

        .hsgd-toolbar .btn-outline-secondary[b-anfmq5ewyj] {
            color: #fff;
            border-color: #58bd7b;
            background: rgb(22 132 71 / 38%);
        }

            .hsgd-toolbar .btn-outline-secondary:hover:not(:disabled)[b-anfmq5ewyj] {
                color: #fff;
                border-color: #67d28c;
                background: var(--hsgd-green);
                box-shadow: 0 5px 13px rgb(22 132 71 / 30%);
                transform: translateY(-1px);
            }

        .hsgd-toolbar .btn:disabled[b-anfmq5ewyj] {
            color: #d6dde6;
            border-color: #60758c;
            background: #42566c;
            box-shadow: none;
            opacity: .72;
        }

.hsgd-alert[b-anfmq5ewyj] {
    position: relative;
    margin: .5rem 0;
    padding: .55rem .75rem;
    border: 0;
    border-left: 4px solid;
    border-radius: 8px;
    font-size: .8rem;
    font-weight: 600;
    box-shadow: 0 3px 11px rgb(15 23 42 / 8%);
}

.hsgd-alert.alert-success[b-anfmq5ewyj] {
    color: #0d5d32;
    border-left-color: var(--hsgd-green);
    background: #e7f7ed;
}

.hsgd-alert.alert-danger[b-anfmq5ewyj] {
    color: #8b1d26;
    border-left-color: #cf3341;
    background: #fff0f1;
}

.hsgd-alert.alert-info[b-anfmq5ewyj] {
    color: var(--hsgd-navy);
    border-left-color: var(--hsgd-orange);
    background: #fff6df;
}

.hsgd-filters[b-anfmq5ewyj] {
    position: relative;
    gap: .55rem;
    margin-bottom: .7rem;
    padding: .58rem .7rem .68rem;
    border: 1px solid #c8d4e1;
    border-top: 3px solid var(--hsgd-green);
    border-radius: 10px;
    background: linear-gradient(180deg, #fff, #f7fafc);
    box-shadow: 0 4px 13px rgb(7 27 51 / 7%);
}

    .hsgd-filters[b-anfmq5ewyj]::before {
        grid-column: 1 / -1;
        padding-left: .48rem;
        color: var(--hsgd-navy);
        border-left: 3px solid var(--hsgd-orange);
        content: "BỘ LỌC HỒ SƠ";
        font-size: .7rem;
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: .055em;
    }

    .hsgd-filters label[b-anfmq5ewyj],
    .hsgd-modal label[b-anfmq5ewyj] {
        margin-bottom: .22rem;
        color: #253b52;
        font-size: .72rem;
        font-weight: 750;
    }

    .hsgd-filters .form-control[b-anfmq5ewyj],
    .hsgd-filters .form-select[b-anfmq5ewyj] {
        min-height: 34px;
        padding: .32rem .5rem;
        color: #172b40;
        border-color: #b8c8d9;
        border-radius: 7px;
        background-color: #fff;
        font-size: .78rem;
        box-shadow: none;
    }

        .hsgd-filters .form-control:focus[b-anfmq5ewyj],
        .hsgd-filters .form-select:focus[b-anfmq5ewyj] {
            border-color: var(--hsgd-green);
            box-shadow: 0 0 0 .16rem rgb(22 132 71 / 14%);
        }

.hsgd-clear-filter[b-anfmq5ewyj] {
    min-height: 34px;
    padding: .34rem .68rem;
    color: #fff;
    border: 1px solid var(--hsgd-navy-light);
    border-radius: 7px;
    background: var(--hsgd-navy-light);
    font-size: .76rem;
    font-weight: 700;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

    .hsgd-clear-filter:hover[b-anfmq5ewyj] {
        color: var(--hsgd-navy);
        border-color: var(--hsgd-orange);
        background: #ffc75d;
        transform: translateY(-1px);
    }

.hsgd-empty[b-anfmq5ewyj] {
    min-height: 180px;
    padding: 1.5rem;
    color: #496176;
    border: 1px dashed #8fa6bc;
    border-top: 3px solid var(--hsgd-orange);
    border-radius: 10px;
    background: linear-gradient(145deg, #f8fbfd, #eef7f1);
}

    .hsgd-empty i[b-anfmq5ewyj] {
        color: var(--hsgd-green);
        font-size: 2.1rem;
    }

    .hsgd-empty p[b-anfmq5ewyj] {
        margin: .4rem 0 0;
        font-size: .84rem;
        font-weight: 650;
    }

.hsgd-modal-overlay[b-anfmq5ewyj] {
    --hsgd-navy: #071b33;
    --hsgd-navy-light: #123f68;
    --hsgd-orange: #f59e0b;
    --hsgd-green: #168447;
    padding: .75rem;
    background: rgb(7 27 51 / 72%);
    backdrop-filter: blur(2px);
}

.hsgd-modal[b-anfmq5ewyj] {
    padding: .85rem;
    border: 1px solid #294968;
    border-top: 4px solid var(--hsgd-orange);
    border-radius: 12px;
    box-shadow: 0 22px 60px rgb(0 0 0 / 36%);
}

.hsgd-modal > header[b-anfmq5ewyj] {
    margin: -.85rem -.85rem .8rem;
    padding: .62rem .75rem;
    color: #fff;
    border-bottom: 3px solid var(--hsgd-green);
    border-radius: 8px 8px 0 0;
    background: linear-gradient(110deg, var(--hsgd-navy), var(--hsgd-navy-light));
}

.hsgd-modal h2[b-anfmq5ewyj] {
    color: #fff;
    font-size: 1rem;
    font-weight: 750;
}

.hsgd-close[b-anfmq5ewyj] {
    width: 32px;
    height: 32px;
    color: #fff;
    border: 1px solid rgb(255 255 255 / 30%);
    background: rgb(255 255 255 / 10%);
    font-size: 1.2rem;
    transition: background-color .16s ease, color .16s ease, transform .16s ease;
}

    .hsgd-close:hover[b-anfmq5ewyj] {
        color: var(--hsgd-navy);
        background: var(--hsgd-orange);
        transform: rotate(4deg);
    }

.hsgd-form-grid[b-anfmq5ewyj] {
    gap: .68rem;
}

    .hsgd-form-grid .form-control[b-anfmq5ewyj],
    .hsgd-form-grid .form-select[b-anfmq5ewyj],
    .hsgd-modal > .form-select[b-anfmq5ewyj] {
        color: #172b40;
        border-color: #b8c8d9;
        border-radius: 7px;
        font-size: .8rem;
        box-shadow: none;
    }

        .hsgd-form-grid .form-control:focus[b-anfmq5ewyj],
        .hsgd-form-grid .form-select:focus[b-anfmq5ewyj],
        .hsgd-modal > .form-select:focus[b-anfmq5ewyj] {
            border-color: var(--hsgd-green);
            box-shadow: 0 0 0 .16rem rgb(22 132 71 / 14%);
        }

.hsgd-modal footer[b-anfmq5ewyj] {
    gap: .45rem;
    padding-top: .7rem;
    margin-top: .75rem;
    border-top-color: #d5dee8;
}

    .hsgd-modal footer .btn[b-anfmq5ewyj] {
        min-height: 34px;
        padding: .34rem .72rem;
        border-radius: 7px;
        font-size: .78rem;
        font-weight: 700;
    }

    .hsgd-modal footer .btn-primary[b-anfmq5ewyj] {
        color: #fff;
        border-color: var(--hsgd-green);
        background: var(--hsgd-green);
    }

        .hsgd-modal footer .btn-primary:hover:not(:disabled)[b-anfmq5ewyj] {
            color: #fff;
            border-color: #0d6937;
            background: #0d6937;
        }

    .hsgd-modal footer .btn-light[b-anfmq5ewyj] {
        color: var(--hsgd-navy);
        border-color: #9eb0c1;
        background: #f1f5f8;
    }

        .hsgd-modal footer .btn-light:hover[b-anfmq5ewyj] {
            color: var(--hsgd-navy);
            border-color: var(--hsgd-orange);
            background: #fff0cc;
        }

.hsgd-card[b-anfmq5ewyj] {
    border-top: 3px solid var(--hsgd-orange) !important;
    box-shadow: 0 5px 15px rgb(7 27 51 / 10%) !important;
}

.hsgd-card-head h2[b-anfmq5ewyj] {
    color: var(--hsgd-navy);
    font-weight: 750;
}

.hsgd-card dt[b-anfmq5ewyj] {
    color: #52687d;
    font-weight: 650;
}

.hsgd-card dd[b-anfmq5ewyj] {
    color: #1c354a;
}

@media (max-width: 768px) {
    .hsgd-container[b-anfmq5ewyj] {
        margin-top: .4rem;
        padding-inline: .45rem;
    }

    .hsgd-heading[b-anfmq5ewyj] {
        min-height: 0;
        gap: .52rem;
        padding: .58rem .62rem .68rem .78rem;
    }

        .hsgd-heading h1[b-anfmq5ewyj] {
            font-size: 1.02rem;
        }

        .hsgd-heading p[b-anfmq5ewyj] {
            font-size: .7rem;
        }

    .hsgd-toolbar[b-anfmq5ewyj] {
        justify-content: flex-start;
    }

        .hsgd-toolbar .btn[b-anfmq5ewyj] {
            min-height: 36px;
            font-size: .75rem;
        }

    .hsgd-filters[b-anfmq5ewyj] {
        gap: .48rem;
        padding: .55rem;
    }

    .hsgd-modal[b-anfmq5ewyj] {
        padding: .72rem;
    }

    .hsgd-modal > header[b-anfmq5ewyj] {
        margin: -.72rem -.72rem .72rem;
    }
}
/* _content/QuanTriTruongHoc.TKB/Components/Pages/SoDauBaiVaThietBi/KeHoachDayHocHoSoPanel.razor.rz.scp.css */
@media (max-width: 991.98px) {
    .khdh-page[b-2xtw86jhx1] {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .khdh-table[b-2xtw86jhx1] {
        min-width: 980px;
    }
}

@media (max-width: 767.98px) {
    .khdh-toolbar[b-2xtw86jhx1] {
        padding: 0.85rem;
    }

    .khdh-refresh-btn[b-2xtw86jhx1] {
        font-size: 0.78rem;
    }

    .khdh-table-shell[b-2xtw86jhx1] {
        border-radius: 18px;
    }
}
/* _content/QuanTriTruongHoc.TKB/Components/Pages/SoDauBaiVaThietBi/KeHoachDayHocTheoGV.razor.rz.scp.css */
/* Thanh thao tác */
.kh-toolbar-actions[b-pfb54fpzyi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.kh-action-btn[b-pfb54fpzyi],
.btn-muon-tb[b-pfb54fpzyi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    border: 0;
    border-radius: 10px;
    padding: 10px 15px;
    color: #fff;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(15, 23, 42, .14);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.kh-action-btn:hover:not(:disabled)[b-pfb54fpzyi],
.kh-action-btn:focus-visible[b-pfb54fpzyi],
.btn-muon-tb:hover[b-pfb54fpzyi],
.btn-muon-tb:focus-visible[b-pfb54fpzyi] {
    color: #fff;
    filter: brightness(.94);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(15, 23, 42, .2);
}

.kh-action-btn:focus-visible[b-pfb54fpzyi],
.btn-muon-tb:focus-visible[b-pfb54fpzyi] {
    outline: 3px solid rgba(59, 130, 246, .28);
    outline-offset: 2px;
}

.kh-action-btn:disabled[b-pfb54fpzyi] {
    cursor: not-allowed;
    opacity: .55;
    box-shadow: none;
}

.kh-action-btn i[b-pfb54fpzyi],
.btn-muon-tb i[b-pfb54fpzyi],
.kh-dropdown-menu .dropdown-item i[b-pfb54fpzyi] {
    font-size: 1rem;
}

.kh-btn-save[b-pfb54fpzyi] { background: #198754; }
.kh-btn-refresh[b-pfb54fpzyi] { background: #0d6efd; }
.kh-btn-plan[b-pfb54fpzyi] { background: #6f42c1; }
.kh-btn-equipment[b-pfb54fpzyi] { background: #d97706; }
.btn-muon-tb[b-pfb54fpzyi] { background: #0891b2; }

.kh-action-dropdown[b-pfb54fpzyi] {
    position: relative;
}

.kh-dropdown-menu[b-pfb54fpzyi] {
    min-width: 245px;
    padding: 7px;
    background-color: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .16);
}

.kh-dropdown-menu .dropdown-item[b-pfb54fpzyi] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    border: 0;
    border-radius: 8px;
    padding: 9px 11px;
    background-color: #fff;
    font-size: .875rem;
    font-weight: 600;
}

.kh-dropdown-menu .dropdown-item:hover[b-pfb54fpzyi],
.kh-dropdown-menu .dropdown-item:focus[b-pfb54fpzyi] {
    background: #f1f5f9;
}

.kh-menu-week[b-pfb54fpzyi] { color: #2563eb; }
.kh-menu-year[b-pfb54fpzyi] { color: #7c3aed; }
.kh-menu-pdf[b-pfb54fpzyi] { color: #dc2626; }
.kh-menu-borrow-week[b-pfb54fpzyi] { color: #0f766e; }
.kh-menu-borrow-year[b-pfb54fpzyi] { color: #b45309; }

.table-wrapper[b-pfb54fpzyi] {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}

/* Tablet */
@media (max-width: 992px) {
    .kh-toolbar[b-pfb54fpzyi] {
        grid-template-columns: 1fr;
    }

    .tkb-file-info[b-pfb54fpzyi] {
        justify-content: flex-start;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .page-header-title[b-pfb54fpzyi] {
        font-size: 1.15rem;
        line-height: 1.35;
    }

    .kh-toolbar[b-pfb54fpzyi] {
        gap: 12px;
        padding: 12px;
        border-radius: 12px;
    }

    .kh-toolbar-left[b-pfb54fpzyi] {
        grid-template-columns: minmax(0, 1fr);
    }

    .kh-toolbar-left > div[b-pfb54fpzyi] {
        min-width: 0 !important;
    }

    .kh-toolbar-right[b-pfb54fpzyi],
    .tkb-file-info[b-pfb54fpzyi] {
        width: 100%;
        justify-content: flex-start;
    }

    .tkb-file-info[b-pfb54fpzyi] {
        align-items: flex-start !important;
        font-size: .75rem;
        overflow-wrap: anywhere;
    }

    .kh-toolbar-actions[b-pfb54fpzyi] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 8px;
    }

    .kh-action-btn[b-pfb54fpzyi],
    .kh-action-dropdown[b-pfb54fpzyi],
    .kh-action-dropdown > .kh-action-btn[b-pfb54fpzyi] {
        width: 100%;
    }

    .kh-action-btn[b-pfb54fpzyi] {
        min-height: 44px;
        padding: 10px 8px;
        font-size: .8rem;
    }

    .kh-dropdown-menu[b-pfb54fpzyi] {
        width: 100%;
        min-width: 230px;
    }

    table.kehoach[b-pfb54fpzyi] {
        min-width: 950px;
        font-size: .82rem;
    }

    table.kehoach thead th[b-pfb54fpzyi],
    table.kehoach tbody td[b-pfb54fpzyi] {
        padding: 7px 5px;
    }

    .btn-muon-tb[b-pfb54fpzyi] {
        min-height: 38px;
        padding: 8px 10px;
        font-size: .78rem;
    }
}

@media (max-width: 420px) {
    .kh-toolbar-actions[b-pfb54fpzyi] {
        grid-template-columns: 1fr;
    }

    .kh-dropdown-menu[b-pfb54fpzyi] {
        min-width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kh-action-btn[b-pfb54fpzyi],
    .btn-muon-tb[b-pfb54fpzyi] {
        transition: none;
    }
}
/* _content/QuanTriTruongHoc.TKB/Components/Pages/SoDauBaiVaThietBi/KhoThietBi.razor.rz.scp.css */
/* ================== MOBILE 768px ================== */
@media (max-width: 768px) {
    .ppct-toolbar[b-zaqr4zhqf5] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .ppct-toolbar .group[b-zaqr4zhqf5] {
        width: 100%;
    }

    .ppct-select[b-zaqr4zhqf5],
    .ppct-select-wide[b-zaqr4zhqf5] {
        width: 100%;
        height: 44px;
        font-size: 14px;
    }

    .ppct-toolbar .group button[b-zaqr4zhqf5],
    .ppct-toolbar .group label.btn[b-zaqr4zhqf5] {
        width: 100%;
        padding: 10px 0;
        font-size: 14px;
        text-align: center;
    }

    .card .row[b-zaqr4zhqf5] {
        flex-direction: column;
        gap: 10px;
    }

    .card .col-4[b-zaqr4zhqf5],
    .card .col-2[b-zaqr4zhqf5] {
        width: 100%;
    }

    .card input.form-control[b-zaqr4zhqf5] {
        padding: 8px 10px;
        font-size: 14px;
    }

    .card button.btn-success[b-zaqr4zhqf5] {
        width: 100%;
        padding: 10px 0;
        font-size: 15px;
    }

    table.table[b-zaqr4zhqf5] {
        width: 100%;
        table-layout: fixed;
        overflow-wrap: break-word;
        font-size: 13px;
    }

    table.table th[b-zaqr4zhqf5],
    table.table td[b-zaqr4zhqf5] {
        padding: 6px 4px;
        text-align: center;
        white-space: normal;
    }

    table.table td:nth-child(1)[b-zaqr4zhqf5],
    table.table td:nth-child(3)[b-zaqr4zhqf5] {
        font-size: 12px;
        line-height: 1.3;
    }

    table.table button.btn-sm[b-zaqr4zhqf5] {
        padding: 4px 6px;
        font-size: 12px;
    }
}
/* _content/QuanTriTruongHoc.TKB/Components/Pages/SoDauBaiVaThietBi/PhanPhoiChuongTrinh.razor.rz.scp.css */
/* ================= PAGE ================= */
.ppct-card[b-u93xa8f3j4] {
    background: #fff;
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 4px 18px rgba(30,58,95,.08);
    border: 1px solid #e7eef7;
}

/* ================= HEADER ================= */

.ppct-header[b-u93xa8f3j4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

    .ppct-header h2[b-u93xa8f3j4] {
        margin: 0;
        color: #1e3a5f;
        font-size: 22px;
        font-weight: 700;
    }

    .ppct-header span[b-u93xa8f3j4] {
        color: #6b7c93;
        font-size: 12px;
    }

.header-icon[b-u93xa8f3j4] {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg,#1e3a5f,#2f537e);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 22px;
}

/* ================= TOOLBAR ================= */

.ppct-toolbar[b-u93xa8f3j4] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 18px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.toolbar-filter[b-u93xa8f3j4] {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.group[b-u93xa8f3j4] {
    display: flex;
    flex-direction: column;
}

    .group label[b-u93xa8f3j4] {
        margin-bottom: 5px;
        font-size: 11px;
        color: #607089;
        font-weight: 600;
        text-transform: uppercase;
    }

    .group select[b-u93xa8f3j4] {
        height: 36px;
        min-width: 130px;
        border-radius: 8px;
        border: 1px solid #d6e1ef;
        padding: 0 10px;
        font-size: 13px;
        color: #22334d;
    }

.group-mon select[b-u93xa8f3j4] {
    min-width: 240px;
}

.toolbar-actions[b-u93xa8f3j4] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.file-picker[b-u93xa8f3j4] {
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 600px;
}

.file-btn[b-u93xa8f3j4] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    height: 36px;
    background: #283F66;
    color: #F26B30;
    font-weight: 600;
    border-radius: 10px 0 0 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: .2s;
}

    .file-btn:hover[b-u93xa8f3j4] {
        background: #175E5D;
        color: #fff;
    }

.file-name[b-u93xa8f3j4] {
    flex: 1;
    height: 36px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid #ced4da;
    border-left: none;
    border-radius: 0 10px 10px 0;
    background: #fff;
    color: #495057;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ================= BUTTON ================= */

.btn-primary[b-u93xa8f3j4],
.btn-success[b-u93xa8f3j4],
.btn-info[b-u93xa8f3j4],
.btn-warning[b-u93xa8f3j4] {
    border: none;
    height: 36px;
    padding: 0 14px;
    border-radius: 8px;
    color: white;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

.btn-primary[b-u93xa8f3j4] {
    background: #1e3a5f;
}

.btn-success[b-u93xa8f3j4] {
    background: #1f7a4d;
}

.btn-info[b-u93xa8f3j4] {
    background: #3366cc;
}

.btn-warning[b-u93xa8f3j4] {
    background: #e67e22;
}

    .btn-primary:hover[b-u93xa8f3j4],
    .btn-success:hover[b-u93xa8f3j4],
    .btn-info:hover[b-u93xa8f3j4],
    .btn-warning:hover[b-u93xa8f3j4] {
        transform: translateY(-1px);
        opacity: .92;
    }

/* ================= IMPORT CẢ KHỐI ================= */
.ppct-bulk-import[b-u93xa8f3j4] {
    display: grid;
    grid-template-columns: auto minmax(240px, 1fr) minmax(280px, 420px);
    align-items: center;
    gap: 14px;
    margin: 4px 0 18px;
    padding: 14px;
    border: 1px solid #c8d8e8;
    border-top: 3px solid #f59e0b;
    border-radius: 12px;
    background: linear-gradient(120deg, #f7faff, #f0faf4);
    box-shadow: 0 5px 16px rgba(7, 27, 51, .08);
}

.ppct-bulk-icon[b-u93xa8f3j4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: #fff;
    border-radius: 12px;
    background: linear-gradient(145deg, #168447, #0d6034);
    box-shadow: 0 7px 15px rgba(22, 132, 71, .22);
    font-size: 1.15rem;
}

.ppct-bulk-content[b-u93xa8f3j4] {
    min-width: 0;
}

.ppct-bulk-title[b-u93xa8f3j4] {
    color: #071b33;
    font-size: .9rem;
    font-weight: 800;
}

.ppct-bulk-desc[b-u93xa8f3j4] {
    margin-top: 3px;
    color: #52667a;
    font-size: .76rem;
    line-height: 1.35;
}

.ppct-bulk-message[b-u93xa8f3j4] {
    margin-top: 7px;
    padding: 6px 9px;
    border-left: 3px solid;
    border-radius: 6px;
    font-size: .75rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

    .ppct-bulk-message.is-success[b-u93xa8f3j4] {
        color: #0d6034;
        border-left-color: #168447;
        background: #e5f6eb;
    }

    .ppct-bulk-message.is-error[b-u93xa8f3j4] {
        color: #9b1c2c;
        border-left-color: #d13c4e;
        background: #fff0f2;
    }

.ppct-bulk-picker[b-u93xa8f3j4] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    min-width: 0;
}

.ppct-bulk-file-btn[b-u93xa8f3j4] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 13px;
    color: #071b33;
    border-radius: 9px 0 0 9px;
    background: linear-gradient(180deg, #ffc75d, #f59e0b);
    font-size: .78rem;
    font-weight: 750;
    white-space: nowrap;
    cursor: pointer;
    transition: color .18s ease, background .18s ease, transform .18s ease;
}

    .ppct-bulk-file-btn:hover[b-u93xa8f3j4] {
        color: #fff;
        background: linear-gradient(180deg, #1d9253, #116d3c);
    }

    .ppct-bulk-file-btn.is-disabled[b-u93xa8f3j4] {
        color: #d7e1eb;
        background: #60758b;
        pointer-events: none;
    }

.ppct-bulk-file-name[b-u93xa8f3j4] {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 38px;
    padding: 0 10px;
    overflow: hidden;
    color: #526273;
    border: 1px solid #bdcad7;
    border-left: 0;
    border-radius: 0 9px 9px 0;
    background: #fff;
    font-size: .76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 1050px) {
    .ppct-bulk-import[b-u93xa8f3j4] {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .ppct-bulk-picker[b-u93xa8f3j4] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .ppct-bulk-import[b-u93xa8f3j4] {
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .ppct-bulk-icon[b-u93xa8f3j4] {
        width: 40px;
        height: 40px;
    }

    .ppct-bulk-picker[b-u93xa8f3j4] {
        grid-column: auto;
        grid-template-columns: 1fr;
    }

    .ppct-bulk-file-btn[b-u93xa8f3j4] {
        justify-content: center;
        border-radius: 9px 9px 0 0;
    }

    .ppct-bulk-file-name[b-u93xa8f3j4] {
        justify-content: center;
        border: 1px solid #bdcad7;
        border-top: 0;
        border-radius: 0 0 9px 9px;
    }
}

/* ================= TABLE ================= */

.kehoach[b-u93xa8f3j4] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .kehoach thead th[b-u93xa8f3j4] {
        background: #1e3a5f;
        color: white;
        padding: 11px;
        font-weight: 600;
        text-align: center;
        border: none;
    }

    .kehoach tbody td[b-u93xa8f3j4] {
        border-bottom: 1px solid #edf2f8;
        padding: 6px;
    }

    .kehoach tbody tr:hover[b-u93xa8f3j4] {
        background: #f7faff;
    }

/* ================= INPUT ================= */

.ppct-input[b-u93xa8f3j4],
.ppct-input-small[b-u93xa8f3j4] {
    width: 100%;
    height: 34px;
    border: 1px solid #d7e3f0;
    border-radius: 7px;
    padding: 0 10px;
    font-size: 13px;
}

    .ppct-input:focus[b-u93xa8f3j4],
    .ppct-input-small:focus[b-u93xa8f3j4] {
        outline: none;
        border-color: #2f537e;
        box-shadow: 0 0 0 3px rgba(47,83,126,.12);
    }

.ppct-input-small[b-u93xa8f3j4] {
    text-align: center;
}
/* ================= THAO TÁC ================= */
.action-cell[b-u93xa8f3j4] {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.btn-row-edit[b-u93xa8f3j4],
.btn-row-save[b-u93xa8f3j4],
.btn-delete[b-u93xa8f3j4] {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: .2s;
}

.btn-row-edit[b-u93xa8f3j4] {
    background: #eef4ff;
    color: #1e3a5f;
}

.btn-row-save[b-u93xa8f3j4] {
    background: #e8fff1;
    color: #198754;
}

.btn-delete[b-u93xa8f3j4] {
    background: #fff2f2;
    color: #dc3545;
}

    .btn-row-edit:hover[b-u93xa8f3j4],
    .btn-row-save:hover[b-u93xa8f3j4],
    .btn-delete:hover[b-u93xa8f3j4] {
        transform: translateY(-2px);
    }

/* _content/QuanTriTruongHoc.TKB/Components/Pages/SoDauBaiVaThietBi/SoDauBai.razor.rz.scp.css */
:root[b-at51fb3zuo],
.kh-card[b-at51fb3zuo],
.kh-control-grid[b-at51fb3zuo],
.kh-success[b-at51fb3zuo],
.kh-toolbar[b-at51fb3zuo],
.modal[b-at51fb3zuo] {
        --sdb-n9: #0c1f3d;
        --sdb-n8: #1a3560;
        --sdb-n7: #2b5192;
        --sdb-n6: #4272c4;
        --sdb-n5: #6d9de0;
        --sdb-n2: #c8dbf4;
        --sdb-n1: #e8f0fb;
        --sdb-n0: #f4f8ff;
        --sdb-border: #d5e3f5;
        --sdb-text: #1c2d45;
        --sdb-muted: #5f7899;
        --sdb-bg: #edf2f9;
        --sdb-r: 10px;
        --sdb-rs: 6px;
    }

    body[b-at51fb3zuo] {
        background: var(--sdb-bg);
    }

    /* ===== CARD THÔNG TIN ===== */
    .kh-card[b-at51fb3zuo] {
       width: 100%;
        margin: 0 auto 10px;
        padding: 14px 18px;
        background: #fff;
        border: 1px solid var(--sdb-border);
        border-radius: var(--sdb-r);
    }

    .kh-info[b-at51fb3zuo] {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 24px;
        font-size: 13.5px;
        color: var(--sdb-text);
        align-items: center;
    }

        .kh-info > div[b-at51fb3zuo] {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .kh-info b[b-at51fb3zuo] {
            color: var(--sdb-muted);
            font-weight: 600;
        }

        .kh-info select[b-at51fb3zuo] {
            height: 30px;
            font-size: 13px;
            border: 1px solid var(--sdb-border);
            border-radius: var(--sdb-rs);
            padding: 0 8px;
            background: var(--sdb-n0);
            color: var(--sdb-text);
        }

    /* ===== CONTROL GRID ===== */
    .kh-control-grid[b-at51fb3zuo] {
        width: 100%;
        margin: 0 auto 10px;
        padding: 10px 14px;
        background: #fff;
        border: 1px solid var(--sdb-border);
        border-radius: var(--sdb-r);
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 16px;
        align-items: flex-end;
    }

    .kh-left[b-at51fb3zuo],
    .kh-right[b-at51fb3zuo] {
        display: flex;
        gap: 12px;
        align-items: flex-end;
        flex-wrap: wrap;
    }

    .kh-item[b-at51fb3zuo] {
        display: flex;
        flex-direction: column;
        gap: 3px;
        min-width: 200px;
    }

        .kh-item label[b-at51fb3zuo] {
            font-size: 11.5px;
            font-weight: 600;
            color: var(--sdb-muted);
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        .kh-item input[b-at51fb3zuo],
        .kh-item select[b-at51fb3zuo] {
            height: 32px;
            border: 1px solid var(--sdb-border);
            border-radius: var(--sdb-rs);
            padding: 0 10px;
            font-size: 13px;
            background: var(--sdb-n0);
            color: var(--sdb-text);
        }

            .kh-item input[readonly][b-at51fb3zuo] {
                background: #f6f8fa;
                color: var(--sdb-muted);
            }

    /* ===== BUTTONS ===== */
    .btn-xem[b-at51fb3zuo],
    .btn-luu[b-at51fb3zuo],
    .btn-more[b-at51fb3zuo] {
        height: 32px;
        padding: 0 14px;
        font-size: 13px;
        font-weight: 600;
        border-radius: var(--sdb-rs);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        transition: background 0.15s, border-color 0.15s;
    }

    .btn-xem[b-at51fb3zuo] {
        background: var(--sdb-n0);
        color: var(--sdb-n7);
        border: 1px solid var(--sdb-n2);
    }

        .btn-xem:hover[b-at51fb3zuo] {
            background: var(--sdb-n1);
            border-color: var(--sdb-n5);
        }

    .btn-luu[b-at51fb3zuo] {
        background: var(--sdb-n7);
        color: #fff;
        border: 1px solid var(--sdb-n8);
        font-weight: 700;
    }

        .btn-luu:hover[b-at51fb3zuo] {
            background: var(--sdb-n8);
        }

        .btn-luu:disabled[b-at51fb3zuo] {
            background: #c8d6e8;
            border-color: #c0cedf;
            color: #8fa4be;
            cursor: not-allowed;
        }

    /* ===== DROPDOWN ===== */
    .dropdown[b-at51fb3zuo] {
        position: relative;
    }

        .dropdown[b-at51fb3zuo]::after {
            content: "";
            position: absolute;
            left: -10px;
            right: -10px;
            top: 100%;
            height: 20px;
        }

    .btn-more[b-at51fb3zuo] {
        background: #f8fafc;
        color: var(--sdb-n8);
        border: 1px solid var(--sdb-border);
    }

        .btn-more:hover[b-at51fb3zuo] {
            background: var(--sdb-n1);
        }

    .dropdown-menu[b-at51fb3zuo] {
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        min-width: 196px;
        background: #fff;
        border: 1px solid var(--sdb-border);
        border-radius: var(--sdb-r);
        box-shadow: 0 6px 18px rgba(0, 0, 0, .1);
        padding: 6px;
        display: none;
        z-index: 100;
    }

        .dropdown:hover .dropdown-menu[b-at51fb3zuo],
        .dropdown-menu:hover[b-at51fb3zuo] {
            display: block;
        }

        .dropdown-menu button[b-at51fb3zuo] {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 7px 10px;
            margin-bottom: 3px;
            font-size: 13px;
            font-weight: 500;
            border-radius: var(--sdb-rs);
            border: none;
            background: transparent;
            color: var(--sdb-text);
            cursor: pointer;
            text-align: left;
            height: auto;
        }

            .dropdown-menu button:hover[b-at51fb3zuo] {
                background: var(--sdb-n0);
            }

            .dropdown-menu button.export[b-at51fb3zuo] {
                color: var(--sdb-n7);
            }

            .dropdown-menu button.print[b-at51fb3zuo] {
                color: #1a6b4a;
            }

            .dropdown-menu button.warn[b-at51fb3zuo] {
                color: #8b5a00;
            }

            .dropdown-menu button.danger[b-at51fb3zuo] {
                color: #b92222;
            }

        .dropdown-menu hr[b-at51fb3zuo] {
            margin: 4px 0;
            border: none;
            border-top: 1px solid #eef0f3;
        }

    /* ===== SUCCESS BAR ===== */
    .kh-success[b-at51fb3zuo] {
        width: 100%;
        margin: 0 auto 10px;
        padding: 8px 14px;
        background: #eaf5ee;
        border: 1px solid #b2dcbf;
        color: #1a5e31;
        font-weight: 600;
        font-size: 13px;
        border-radius: var(--sdb-rs);
    }

    /* ===== TOOLBAR (bọc bảng) ===== */
    .kh-toolbar[b-at51fb3zuo] {
        width: 100%;
        margin: 0 auto;
    }

    .table-responsive[b-at51fb3zuo] {
        background: #fff;
        border: 1px solid var(--sdb-border);
        border-radius: var(--sdb-r);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ===== BẢNG KẾ HOẠCH ===== */
    table.kehoach[b-at51fb3zuo] {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
        font-size: 12px;
    }

        table.kehoach td.buoi[b-at51fb3zuo] {
            writing-mode: vertical-rl;
            text-orientation: mixed;
            transform: rotate(180deg);
            padding: 6px 3px;
            text-align: center;
        }

        table.kehoach th[b-at51fb3zuo] {
            padding: 7px 6px;
            background: var(--sdb-n1);
            border: 1px solid var(--sdb-n2);
            color: var(--sdb-n8);
            font-weight: 600;
            text-align: center;
            white-space: normal;
            line-height: 1.1;
            font-size: 12px;
        }

        table.kehoach td[b-at51fb3zuo] {
            padding: 3px 5px;
            border: 1px solid #e6edf5;
            vertical-align: middle;
            color: var(--sdb-text);
        }

            table.kehoach td.ngay[b-at51fb3zuo] {
                background: var(--sdb-n1);
                font-weight: 600;
                text-align: center;
                font-size: 12px;
                color: var(--sdb-n8);
            }

            table.kehoach td.buoi[b-at51fb3zuo] {
                background: #f5f8fc;
                font-weight: 600;
                text-align: center;
                font-size: 12px;
                color: var(--sdb-muted);
            }

            table.kehoach td.tiet[b-at51fb3zuo] {
                text-align: center;
                font-weight: 600;
                font-size: 12px;
                color: var(--sdb-n7);
                background: #f9fbff;
            }

    .ngay-thu[b-at51fb3zuo] {
        font-size: 12px;
        font-weight: 700;
        color: var(--sdb-n8);
        white-space: nowrap;
    }

    .ngay-date[b-at51fb3zuo] {
        font-size: 9px;
        font-weight: 400;
        color: var(--sdb-muted);
        white-space: nowrap;
        margin-top: 2px;
    }
        /* ===== INPUT TRONG BẢNG ===== */
        table.kehoach input[b-at51fb3zuo],
        table.kehoach textarea[b-at51fb3zuo] {
            width: 100%;
            border: none;
            background: transparent;
            font-size: 11px;
            line-height: 1.3;
            padding: 2px 4px;
            min-height: 22px;
            resize: vertical;
        }

            table.kehoach input:focus[b-at51fb3zuo],
            table.kehoach textarea:focus[b-at51fb3zuo] {
                outline: 1px solid var(--sdb-n5);
                border-radius: 3px;
                background: #fffbf0;
            }

        /* ===== TRẠNG THÁI ===== */
        table.kehoach tr.trung-tiet[b-at51fb3zuo] {
            background: #fff5f5 !important;
        }

        table.kehoach tr.da-ky[b-at51fb3zuo] {
            background: #f0faf4;
        }

        table.kehoach tbody tr:hover[b-at51fb3zuo] {
            background: #f7faff;
        }

        /* ===== NÚT KÝ / MỞ KHÓA ===== */
        table.kehoach .btn-success[b-at51fb3zuo] {
            height: 26px;
            padding: 0 10px;
            font-size: 11px;
            font-weight: 600;
            border-radius: 5px;
            border: 1px solid var(--sdb-n6);
            background: var(--sdb-n1);
            color: var(--sdb-n7);
            cursor: pointer;
            transition: background 0.15s;
        }

            table.kehoach .btn-success:hover[b-at51fb3zuo] {
                background: var(--sdb-n7);
                color: #fff;
            }

        table.kehoach .btn-warning[b-at51fb3zuo] {
            height: 24px;
            padding: 0 8px;
            font-size: 11px;
            font-weight: 600;
            border-radius: 4px;
            border: 1px solid #e0b84c;
            background: #fffbec;
            color: #8b5e00;
            cursor: pointer;
            margin-top: 3px;
        }

            table.kehoach .btn-warning:hover[b-at51fb3zuo] {
                background: #fef3c7;
            }

    /* ===== MODAL ===== */
    .modal-content[b-at51fb3zuo] {
        border-radius: var(--sdb-r);
        border: 1px solid var(--sdb-border);
    }

    .modal-header[b-at51fb3zuo] {
        background: var(--sdb-n1);
        border-bottom: 1px solid var(--sdb-n2);
        border-radius: var(--sdb-r) var(--sdb-r) 0 0;
        padding: 12px 16px;
    }

    .modal-title[b-at51fb3zuo] {
        color: var(--sdb-n8);
        font-weight: 700;
        font-size: 15px;
    }

    .modal-footer .btn[b-at51fb3zuo] {
        height: 32px;
        padding: 0 16px;
        font-size: 13px;
        font-weight: 600;
        border-radius: var(--sdb-rs);
        cursor: pointer;
        transition: background 0.15s;
    }

    .modal-footer .btn-primary[b-at51fb3zuo] {
        background: var(--sdb-n7);
        color: #fff;
        border: 1px solid var(--sdb-n8);
    }

        .modal-footer .btn-primary:hover[b-at51fb3zuo] {
            background: var(--sdb-n8);
        }

    .modal-footer .btn-secondary[b-at51fb3zuo] {
        background: var(--sdb-n0);
        color: var(--sdb-n7);
        border: 1px solid var(--sdb-n2);
    }

        .modal-footer .btn-secondary:hover[b-at51fb3zuo] {
            background: var(--sdb-n1);
        }

    /* ===== MOBILE ===== */
    @media (max-width: 768px) {
        .kh-control-grid[b-at51fb3zuo] {
            grid-template-columns: 1fr;
            gap: 12px;
        }

        .kh-left[b-at51fb3zuo],
        .kh-right[b-at51fb3zuo] {
            flex-direction: column;
            align-items: stretch;
            gap: 8px;
        }

        .kh-item[b-at51fb3zuo] {
            min-width: 100%;
        }

        .kh-right button[b-at51fb3zuo],
        .dropdown[b-at51fb3zuo] {
            width: 100%;
        }

        .btn-xem[b-at51fb3zuo],
        .btn-luu[b-at51fb3zuo],
        .btn-more[b-at51fb3zuo] {
            width: 100%;
            height: 40px;
            font-size: 14px;
            justify-content: center;
        }

        .dropdown-menu[b-at51fb3zuo] {
            position: static;
            box-shadow: none;
            border: 1px solid #eef0f3;
            margin-top: 4px;
        }

        .dropdown:focus-within .dropdown-menu[b-at51fb3zuo] {
            display: block;
        }

        .table-responsive table.kehoach[b-at51fb3zuo] {
            table-layout: auto;
            min-width: 860px;
            font-size: 13px;
        }

            .table-responsive table.kehoach th[b-at51fb3zuo],
            .table-responsive table.kehoach td[b-at51fb3zuo] {
                white-space: nowrap;
            }
    }

/* ===== TINH GỌN BẢNG SỔ ĐẦU BÀI ===== */
.sdb-table-scroll[b-at51fb3zuo] {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

table.kehoach[b-at51fb3zuo] {
    min-width: 1040px;
    table-layout: fixed;
}

table.kehoach .sdb-col-date[b-at51fb3zuo] {
    width: 86px;
}

table.kehoach .sdb-col-session[b-at51fb3zuo] {
    width: 34px;
}

table.kehoach .sdb-col-period[b-at51fb3zuo] {
    width: 42px;
}

table.kehoach .sdb-col-subject[b-at51fb3zuo] {
    width: 86px;
}

table.kehoach .sdb-col-class[b-at51fb3zuo] {
    width: 54px;
}

table.kehoach .sdb-col-lesson[b-at51fb3zuo] {
    width: 64px;
}

table.kehoach .sdb-col-title[b-at51fb3zuo] {
    width: 260px;
}

table.kehoach .sdb-col-absent[b-at51fb3zuo] {
    width: 112px;
}

table.kehoach .sdb-col-comment[b-at51fb3zuo] {
    width: 210px;
}

table.kehoach .sdb-col-grade[b-at51fb3zuo] {
    width: 82px;
}

table.kehoach .sdb-col-action[b-at51fb3zuo] {
    width: 58px;
}

table.kehoach thead th[b-at51fb3zuo] {
    background: #0c1f3d;
    border-color: #1d3766;
    color: #ffffff;
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
    line-height: 1.25;
    white-space: normal;
}

table.kehoach tbody td[b-at51fb3zuo] {
    vertical-align: middle;
}

table.kehoach td:nth-child(3)[b-at51fb3zuo],
table.kehoach td:nth-child(5)[b-at51fb3zuo],
table.kehoach td:nth-child(6)[b-at51fb3zuo],
table.kehoach td:nth-child(10)[b-at51fb3zuo],
table.kehoach td:nth-child(11)[b-at51fb3zuo] {
    text-align: center;
}

table.kehoach td:nth-child(6) .form-control[b-at51fb3zuo] {
    width: 100% !important;
    min-width: 0;
    text-align: center;
}

table.kehoach td:nth-child(7) input[b-at51fb3zuo],
table.kehoach td:nth-child(8) input[b-at51fb3zuo],
table.kehoach td:nth-child(9) textarea[b-at51fb3zuo] {
    white-space: normal;
    overflow-wrap: anywhere;
}

.sdb-action-cell[b-at51fb3zuo] {
    padding: 4px !important;
}

.sdb-action-stack[b-at51fb3zuo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.sdb-icon-btn[b-at51fb3zuo],
.sdb-signed-badge[b-at51fb3zuo] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    line-height: 1;
}

.sdb-icon-btn[b-at51fb3zuo] {
    border: 1px solid var(--sdb-border);
    background: #ffffff;
    cursor: pointer;
    transition: all 0.15s ease;
}

.sdb-icon-btn:hover[b-at51fb3zuo] {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(12, 31, 61, 0.14);
}

.sdb-icon-lock[b-at51fb3zuo] {
    border-color: #1a6b4a;
    color: #166534;
}

.sdb-icon-lock:hover[b-at51fb3zuo] {
    background: #ecfdf3;
}

.sdb-icon-unlock[b-at51fb3zuo] {
    border-color: #c47b16;
    color: #9a5b00;
}

.sdb-icon-unlock:hover[b-at51fb3zuo] {
    background: #fff7e6;
}

.sdb-signed-badge[b-at51fb3zuo] {
    border: 1px solid #b7c6d8;
    background: #eef3f8;
    color: #5f7899;
}

@media (max-width: 768px) {
    .sdb-table-scroll[b-at51fb3zuo] {
        border-radius: 8px;
    }

    .sdb-table-scroll table.kehoach[b-at51fb3zuo] {
        min-width: 980px;
        font-size: 12px;
    }

    table.kehoach thead th[b-at51fb3zuo] {
        padding: 8px 5px;
        font-size: 11.5px;
    }

    table.kehoach td[b-at51fb3zuo] {
        padding: 4px;
    }

    table.kehoach input[b-at51fb3zuo],
    table.kehoach textarea[b-at51fb3zuo] {
        font-size: 12px;
        min-height: 30px;
    }
}


/* _content/QuanTriTruongHoc.TKB/Components/Pages/SoDauBaiVaThietBi/SoDauBaiHoSoPanel.razor.rz.scp.css */
.sdb-hoso[b-z4f5s2a3zp] {
    --sdb-navy: #0c1f3d;
    --sdb-navy-2: #173762;
    --sdb-border: #bccddd;
    --sdb-text: #1f2f46;
    --sdb-muted: #60758e;
}

.sdb-hoso-table-wrap[b-z4f5s2a3zp] {
    border: 1px solid var(--sdb-border);
    border-radius: 8px;
    background: #ffffff;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.sdb-hoso-table[b-z4f5s2a3zp] {
    min-width: 1040px;
    table-layout: fixed;
    margin-bottom: 0;
    color: var(--sdb-text);
}

.sdb-hoso-table thead th[b-z4f5s2a3zp] {
    background: var(--sdb-navy);
    border-color: #2a4b7a;
    color: #ffffff;
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
    white-space: normal;
    line-height: 1.25;
    padding: 10px 8px;
}

.sdb-hoso-table tbody td[b-z4f5s2a3zp] {
    vertical-align: middle;
    text-align: center;
    padding: 8px;
    border-color: #c9d6e4;
}

.sdb-hoso-table th:nth-child(1)[b-z4f5s2a3zp],
.sdb-hoso-table td:nth-child(1)[b-z4f5s2a3zp] {
    width: 72px;
}

.sdb-hoso-table th:nth-child(2)[b-z4f5s2a3zp],
.sdb-hoso-table td:nth-child(2)[b-z4f5s2a3zp] {
    width: 64px;
}

.sdb-hoso-table th:nth-child(3)[b-z4f5s2a3zp],
.sdb-hoso-table td:nth-child(3)[b-z4f5s2a3zp],
.sdb-hoso-table th:nth-child(4)[b-z4f5s2a3zp],
.sdb-hoso-table td:nth-child(4)[b-z4f5s2a3zp] {
    width: 118px;
}

.sdb-hoso-table th:nth-child(5)[b-z4f5s2a3zp],
.sdb-hoso-table td:nth-child(5)[b-z4f5s2a3zp],
.sdb-hoso-table th:nth-child(6)[b-z4f5s2a3zp],
.sdb-hoso-table td:nth-child(6)[b-z4f5s2a3zp] {
    width: 130px;
    overflow-wrap: anywhere;
}

.sdb-hoso-table th:nth-child(7)[b-z4f5s2a3zp],
.sdb-hoso-table td:nth-child(7)[b-z4f5s2a3zp] {
    width: 126px;
}

.sdb-hoso-table th:nth-child(8)[b-z4f5s2a3zp],
.sdb-hoso-table td:nth-child(8)[b-z4f5s2a3zp] {
    width: 220px;
}

.sdb-hoso-table th:nth-child(9)[b-z4f5s2a3zp],
.sdb-hoso-table td:nth-child(9)[b-z4f5s2a3zp],
.sdb-hoso-table th:nth-child(10)[b-z4f5s2a3zp],
.sdb-hoso-table td:nth-child(10)[b-z4f5s2a3zp] {
    width: 72px;
}

.sdb-file-name[b-z4f5s2a3zp] {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

.sdb-action-cell[b-z4f5s2a3zp] {
    padding: 6px 4px !important;
}

.sdb-icon-stack[b-z4f5s2a3zp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.sdb-icon-btn[b-z4f5s2a3zp] {
    width: 34px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--sdb-border);
    border-radius: 8px;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s ease;
}

.sdb-icon-btn:hover[b-z4f5s2a3zp] {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(12, 31, 61, 0.14);
}

.sdb-icon-btn:disabled[b-z4f5s2a3zp] {
    cursor: not-allowed;
    opacity: 0.58;
    transform: none;
    box-shadow: none;
}

.sdb-icon-view[b-z4f5s2a3zp] {
    border-color: #2b5192;
    color: #2b5192;
}

.sdb-icon-download[b-z4f5s2a3zp] {
    border-color: #64748b;
    color: #475569;
}

.sdb-icon-sign[b-z4f5s2a3zp] {
    border-color: #15803d;
    color: #15803d;
}

.sdb-icon-delete[b-z4f5s2a3zp] {
    border-color: #dc2626;
    color: #b42318;
}

.sdb-icon-view:hover[b-z4f5s2a3zp] {
    background: #eef5ff;
}

.sdb-icon-download:hover[b-z4f5s2a3zp] {
    background: #f4f6f8;
}

.sdb-icon-sign:hover[b-z4f5s2a3zp] {
    background: #ecfdf3;
}

.sdb-icon-delete:hover[b-z4f5s2a3zp] {
    background: #fff1f2;
}

@media (max-width: 768px) {
    .sdb-hoso[b-z4f5s2a3zp] {
        padding: 1rem !important;
    }

    .sdb-hoso-table[b-z4f5s2a3zp] {
        min-width: 920px;
        font-size: 0.86rem;
    }

    .sdb-hoso-table thead th[b-z4f5s2a3zp] {
        padding: 9px 6px;
        font-size: 0.78rem;
    }

    .sdb-hoso-table tbody td[b-z4f5s2a3zp] {
        padding: 7px 5px;
    }

    .sdb-icon-btn[b-z4f5s2a3zp] {
        width: 36px;
        height: 34px;
    }
}
/* _content/QuanTriTruongHoc.TKB/Components/Pages/ThoiKhoaBieu/QuyTacDiemTruong.razor.rz.scp.css */
.rules-page[b-zz1y5oeb60] {
    --rules-navy: #17345f;
    --rules-blue: #2563eb;
    --rules-amber: #b45309;
    width: min(1180px, 100%);
    margin: 0 auto;
    padding: 12px 6px 28px;
    color: #1e293b;
}

.rules-header[b-zz1y5oeb60] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
    padding: 24px;
    background: linear-gradient(135deg, #fff 0%, #edf4ff 100%);
    border: 1px solid #d6e1ef;
    border-radius: 18px;
    box-shadow: 0 8px 28px rgba(30, 64, 111, .08);
}

.rules-eyebrow[b-zz1y5oeb60] {
    margin: 0 0 6px;
    color: var(--rules-blue);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.rules-header h1[b-zz1y5oeb60] {
    margin: 0;
    color: var(--rules-navy);
    font-size: clamp(1.45rem, 3vw, 2rem);
    font-weight: 800;
}

.rules-intro[b-zz1y5oeb60] {
    max-width: 720px;
    margin: 8px 0 0;
    color: #64748b;
}

.rules-loading[b-zz1y5oeb60] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 260px;
    color: #64748b;
}

.rule-explanations[b-zz1y5oeb60] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.rule-card[b-zz1y5oeb60] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    background: #fff;
    border: 1px solid #dbe4ef;
    border-radius: 14px;
}

.rule-card--one[b-zz1y5oeb60] {
    border-left: 4px solid var(--rules-blue);
}

.rule-card--two[b-zz1y5oeb60] {
    border-left: 4px solid #d97706;
}

.rule-card__number[b-zz1y5oeb60] {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    color: #fff;
    font-weight: 800;
    background: var(--rules-blue);
    border-radius: 10px;
}

.rule-card--two .rule-card__number[b-zz1y5oeb60] {
    background: #d97706;
}

.rule-card h2[b-zz1y5oeb60] {
    margin: 0 0 4px;
    color: #1e3a5f;
    font-size: 1rem;
    font-weight: 800;
}

.rule-card p[b-zz1y5oeb60] {
    margin: 0;
    color: #64748b;
    font-size: .88rem;
}

.rules-config-card[b-zz1y5oeb60] {
    overflow: hidden;
    background: #fff;
    border: 1px solid #d6e1ef;
    border-radius: 18px;
    box-shadow: 0 8px 28px rgba(30, 64, 111, .08);
}

.rules-config-card__header[b-zz1y5oeb60] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px;
    border-bottom: 1px solid #e2e8f0;
}

.rules-config-card__header h2[b-zz1y5oeb60] {
    margin: 0 0 4px;
    color: var(--rules-navy);
    font-size: 1.15rem;
    font-weight: 800;
}

.rules-config-card__header p[b-zz1y5oeb60] {
    margin: 0;
    color: #64748b;
    font-size: .86rem;
}

.rules-summary[b-zz1y5oeb60] {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 3px;
    color: #475569;
    font-size: .8rem;
    text-align: right;
}

.rules-table[b-zz1y5oeb60] {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.rules-table th[b-zz1y5oeb60],
.rules-table td[b-zz1y5oeb60] {
    padding: 13px 16px;
    border-bottom: 1px solid #e6ebf2;
}

.rules-table thead th[b-zz1y5oeb60] {
    color: #334155;
    font-size: .8rem;
    font-weight: 800;
    text-align: center;
    background: #f3f6fa;
}

.rules-table thead th:first-child[b-zz1y5oeb60],
.rules-table tbody th[b-zz1y5oeb60] {
    width: 100px;
    color: var(--rules-navy);
    text-align: left;
}

.rules-table tbody tr:last-child th[b-zz1y5oeb60],
.rules-table tbody tr:last-child td[b-zz1y5oeb60] {
    border-bottom: 0;
}

.rule-choice[b-zz1y5oeb60] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.rule-choice__button[b-zz1y5oeb60] {
    min-height: 34px;
    padding: 5px 7px;
    color: #64748b;
    font-size: .74rem;
    font-weight: 700;
    background: #fff;
    border: 1px solid #d7e0ea;
    border-radius: 8px;
}

.rule-choice__button:hover[b-zz1y5oeb60] {
    background: #f8fafc;
    border-color: #94a3b8;
}

.rule-choice__button--one.is-active[b-zz1y5oeb60] {
    color: #1d4ed8;
    background: #eaf2ff;
    border-color: #60a5fa;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .12);
}

.rule-choice__button--two.is-active[b-zz1y5oeb60] {
    color: #92400e;
    background: #fff7e6;
    border-color: #f59e0b;
    box-shadow: inset 0 0 0 1px rgba(217, 119, 6, .12);
}

.rule-choice__button--none.is-active[b-zz1y5oeb60] {
    color: #475569;
    background: #eef2f6;
    border-color: #94a3b8;
}

.travel-setting[b-zz1y5oeb60] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 22px;
    padding: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.travel-setting__icon[b-zz1y5oeb60] {
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    color: #b45309;
    background: #fff3d6;
    border-radius: 10px;
}

.travel-setting__copy[b-zz1y5oeb60] {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.travel-setting__copy label[b-zz1y5oeb60] {
    color: #334155;
    font-size: .88rem;
    font-weight: 800;
}

.travel-setting__copy span[b-zz1y5oeb60] {
    color: #64748b;
    font-size: .78rem;
}

.travel-setting .form-select[b-zz1y5oeb60] {
    width: 130px;
}

.rules-actions[b-zz1y5oeb60] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 22px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.rules-actions__note[b-zz1y5oeb60] {
    color: #64748b;
    font-size: .8rem;
}

.rules-actions .btn-primary[b-zz1y5oeb60] {
    min-width: 145px;
    background: var(--rules-navy);
    border-color: var(--rules-navy);
}

@media (max-width: 760px) {
    .rules-header[b-zz1y5oeb60],
    .rules-config-card__header[b-zz1y5oeb60],
    .rules-actions[b-zz1y5oeb60] {
        align-items: stretch;
        flex-direction: column;
    }

    .rule-explanations[b-zz1y5oeb60] {
        grid-template-columns: 1fr;
    }

    .rules-summary[b-zz1y5oeb60] {
        text-align: left;
    }

    .rules-actions .btn[b-zz1y5oeb60] {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .travel-setting[b-zz1y5oeb60] {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .travel-setting .form-select[b-zz1y5oeb60] {
        width: 100%;
    }
}
/* _content/QuanTriTruongHoc.TKB/Components/Pages/ThoiKhoaBieu/TrangXepTKB/TKBFilterBar.razor.rz.scp.css */
.filter-bar[b-ktqnbbktb4] {
    padding: 12px 14px;
    margin-bottom: 12px;
    background: linear-gradient(180deg, #f8faff 0%, #eef3fb 100%);
    border: 1px solid #d7e0ee;
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 2px 8px rgba(15, 23, 42, .05);
}

.filter-bar__eyebrow[b-ktqnbbktb4] {
    margin: 0 0 8px;
    color: #64748b;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.filter-bar__grid[b-ktqnbbktb4] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.filter-btn[b-ktqnbbktb4] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 240px;
    min-height: 50px;
    padding: 8px 12px;
    text-align: left;
    background: #fff;
    border: 1px solid #cfd8e6;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
    transition: border-color .18s, box-shadow .18s, transform .18s;
}

.filter-btn:hover[b-ktqnbbktb4],
.filter-btn:focus-visible[b-ktqnbbktb4],
.filter-btn.show[b-ktqnbbktb4] {
    border-color: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .1), 0 8px 18px rgba(37, 99, 235, .12);
}

.filter-btn__icon[b-ktqnbbktb4] {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    color: #2563eb;
    background: rgba(37, 99, 235, .11);
    border: 1px solid rgba(37, 99, 235, .18);
    border-radius: 9px;
}

.filter-btn__body[b-ktqnbbktb4] {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.filter-btn__label[b-ktqnbbktb4] {
    color: #64748b;
    font-size: var(--tkb-font-filter-label);
    font-weight: 500;
    line-height: 1;
}

.filter-btn__value[b-ktqnbbktb4] {
    overflow: hidden;
    color: #0f172a;
    font-size: var(--tkb-font-filter-value);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filter-btn[b-ktqnbbktb4]::after {
    flex-shrink: 0;
    margin-left: auto;
    color: #64748b;
}

.filter-menu.dropdown-menu[b-ktqnbbktb4] {
    width: auto;
    min-width: 220px;
    max-height: 280px;
    overflow-y: auto;
    padding: 6px 0;
    background-color: #fff !important;
    border: 1px solid rgba(100, 116, 139, .38);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .1);
    opacity: 1 !important;
}

.filter-menu .dropdown-item[b-ktqnbbktb4] {
    font-size: var(--tkb-font-filter-menu-item);
    font-weight: 600;
    color: #1e293b;
}

.filter-menu .dropdown-item:hover[b-ktqnbbktb4] {
    color: #1d4ed8;
    background: rgba(37, 99, 235, .12);
}

.dropdown-item--reload[b-ktqnbbktb4] {
    color: #2563eb !important;
    font-size: var(--tkb-font-filter-reload);
}

:root:has(.sidebar-dark) .filter-bar[b-ktqnbbktb4] {
    color: aliceblue;
    background: linear-gradient(180deg, rgba(34, 42, 57, .98), rgba(27, 35, 49, .98));
    border-color: rgba(255, 255, 255, .08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 8px 24px rgba(0, 0, 0, .3);
}

:root:has(.sidebar-dark) .filter-bar__eyebrow[b-ktqnbbktb4],
:root:has(.sidebar-dark) .filter-btn__label[b-ktqnbbktb4],
:root:has(.sidebar-dark) .filter-btn[b-ktqnbbktb4]::after {
    color: var(--muted);
}

:root:has(.sidebar-dark) .filter-btn[b-ktqnbbktb4] {
    background: #232d3d;
    border-color: rgba(255, 255, 255, .1);
}

:root:has(.sidebar-dark) .filter-btn:hover[b-ktqnbbktb4],
:root:has(.sidebar-dark) .filter-btn:focus-visible[b-ktqnbbktb4],
:root:has(.sidebar-dark) .filter-btn.show[b-ktqnbbktb4] {
    background: #283547;
    border-color: var(--accent);
}

:root:has(.sidebar-dark) .filter-btn__value[b-ktqnbbktb4] {
    color: var(--text-strong);
}

:root:has(.sidebar-dark) .filter-menu.dropdown-menu[b-ktqnbbktb4] {
    background-color: var(--tkb-toolbar-menu-bg) !important;
    border-color: var(--tkb-toolbar-menu-border);
}

:root:has(.sidebar-dark) .filter-menu .dropdown-header[b-ktqnbbktb4] {
    color: var(--tkb-toolbar-menu-header);
}

:root:has(.sidebar-dark) .filter-menu .dropdown-item[b-ktqnbbktb4] {
    color: var(--tkb-toolbar-menu-text);
}

:root:has(.sidebar-dark) .filter-menu .dropdown-item:hover[b-ktqnbbktb4] {
    color: var(--tkb-toolbar-menu-hover-text);
    background: var(--tkb-toolbar-menu-hover-bg);
}

:root:has(.sidebar-dark) .filter-menu .dropdown-item.active[b-ktqnbbktb4] {
    color: var(--tkb-toolbar-menu-primary);
    background: var(--tkb-toolbar-menu-active-bg);
}

@media (max-width: 560px) {
    .filter-bar__grid[b-ktqnbbktb4],
    .filter-bar__grid .dropdown[b-ktqnbbktb4],
    .filter-btn[b-ktqnbbktb4] {
        width: 100%;
    }
}
/* _content/QuanTriTruongHoc.TKB/Components/Pages/ThoiKhoaBieu/TrangXepTKB/TKBGrid.razor.rz.scp.css */
.tkb-highlight[b-4wlj2hl4xh] {
    background: var(--tkb-transparent) !important;
}

    .tkb-highlight div[b-4wlj2hl4xh] {
        background: var(--tkb-highlight-bg) !important;
        border: 1px solid var(--tkb-highlight-border) !important;
        color: var(--tkb-highlight-text) !important;
        box-shadow: none !important;
    }

    .tkb-highlight .tkb-mon[b-4wlj2hl4xh],
    .tkb-highlight .tkb-phu[b-4wlj2hl4xh] {
        color: var(--tkb-highlight-text) !important;
    }

.tkb-drop-highlight[b-4wlj2hl4xh] {
    background: var(--tkb-transparent) !important;
}

    .tkb-drop-highlight div[b-4wlj2hl4xh] {
        background: var(--tkb-drop-highlight-bg) !important;
        border: 1px solid var(--tkb-drop-highlight-border) !important;
        color: var(--tkb-highlight-text) !important;
    }

    .tkb-drop-highlight .tkb-mon[b-4wlj2hl4xh],
    .tkb-drop-highlight .tkb-phu[b-4wlj2hl4xh] {
        color: var(--tkb-highlight-text) !important;
    }

.tkb-gv-highlight[b-4wlj2hl4xh] {
    background: var(--tkb-transparent) !important;
    color: inherit !important;
    font-weight: 600;
}

    .tkb-gv-highlight div[b-4wlj2hl4xh] {
        background: var(--tkb-gv-highlight-bg) !important;
        border: 1px solid var(--tkb-gv-highlight-border) !important;
        color: var(--tkb-gv-highlight-text) !important;
        box-shadow: none !important;
    }

    .tkb-gv-highlight .tkb-mon[b-4wlj2hl4xh],
    .tkb-gv-highlight .tkb-phu[b-4wlj2hl4xh] {
        color: var(--tkb-gv-highlight-text) !important;
    }

.tiet-nghi[b-4wlj2hl4xh] {
    background: var(--tkb-transparent) !important;
}

    .tiet-nghi div[b-4wlj2hl4xh] {
        /* Cỡ chữ Tiết nghỉ được chỉnh riêng trong TrangXepTKB.css. */
        border: 1px solid var(--tkb-tiet-nghi-border) !important;
        color: var(--tkb-tiet-nghi-text) !important;
        font-size: var(--tkb-font-grid-break) !important;
        font-weight: 600;
        box-shadow: none !important;
    }

    .tiet-nghi *[b-4wlj2hl4xh] {
        color: inherit !important;
    }

.tkb-nghi[b-4wlj2hl4xh] {
    color: var(--tkb-nghi-text) !important;
}

.tkb-empty[b-4wlj2hl4xh] {
    color: var(--tkb-empty-text) !important;
}

.tiet-codinh[b-4wlj2hl4xh] {
    background: var(--tkb-codinh-bg) !important;
}

    .tiet-codinh div[b-4wlj2hl4xh] {
        background: var(--tkb-codinh-cell-bg) !important;
        border: 1px ridge var(--tkb-codinh-border) !important;
        color: var(--tkb-codinh-text) !important;
        font-weight: 600;
        box-shadow: none !important;
    }

    .tiet-codinh .tkb-mon[b-4wlj2hl4xh] {
        color: var(--tkb-codinh-mon-text) !important;
    }

    .tiet-codinh .tkb-phu[b-4wlj2hl4xh] {
        background: var(--tkb-codinh-phu-bg) !important;
        color: var(--tkb-codinh-phu-text) !important;
    }

.tkb-table-wrapper[b-4wlj2hl4xh] {
    border: 1px solid var(--tkb-table-grid-border-outer);
    border-radius: 12px;
    overflow: hidden;
    background: var(--tkb-table-bg);
}

.tkb-table[b-4wlj2hl4xh] {
    width: 100%;
    margin-bottom: 0;
    border: none !important;
    border-radius: 12px;
    border-collapse: collapse;
}

    .tkb-table th[b-4wlj2hl4xh],
    .tkb-table td[b-4wlj2hl4xh] {
        padding: 2px 6px;
        height: 35px;
        color: var(--tkb-table-text) !important;
        text-align: center;
        vertical-align: middle;
        border: 1px solid var(--tkb-table-grid-border) !important;
    }

    .tkb-table th[b-4wlj2hl4xh] {
        background: var(--tkb-table-head-bg);
        color: var(--tkb-table-head-text);
        font-size: var(--tkb-font-grid-column-header);
        font-weight: 500;
        text-shadow: none;
    }

    .tkb-table td.buoi-sang[b-4wlj2hl4xh] {
        background: var(--tkb-buoi-sang-bg);
    }

    .tkb-table td.buoi-chieu[b-4wlj2hl4xh] {
        background: var(--tkb-buoi-chieu-bg);
    }

    .tkb-table td.tkb-period[b-4wlj2hl4xh] {
        background: var(--tkb-period-bg) !important;
        color: var(--tkb-period-text) !important;
        border-color: var(--tkb-period-border) !important;
        font-weight: 600; 
    }

    .tkb-table td:hover[b-4wlj2hl4xh] {
        background: var(--tkb-cell-hover-bg) !important;
        transition: background .15s ease;
    }

    .tkb-table td.tkb-period:hover[b-4wlj2hl4xh] {
        background: var(--tkb-period-hover-bg) !important;
    }

    .tkb-table td.buoi-chieu:hover[b-4wlj2hl4xh] {
        background: var(--tkb-cell-chieu-hover-bg) !important;
        transition: background .15s ease;
    }

    .tkb-table td:focus-visible[b-4wlj2hl4xh] {
        outline: 2px solid var(--tkb-lop-accent);
        outline-offset: -2px;
        z-index: 1;
        position: relative;
    }

    .tkb-table td div[b-4wlj2hl4xh] {
        padding: 2px 4px;
        min-height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: var(--tkb-transparent);
        border: none;
        box-shadow: none;
        font-size: var(--tkb-font-class-grid-period);
        font-weight: 600;
        line-height: 1.2;
        pointer-events: none;
    }

        .tkb-table td div.tkb-cell-content[b-4wlj2hl4xh] {
            flex-direction: column;
            gap: 2px;
            padding: 3px 4px;
            pointer-events: auto;
        }

.tkb-mon[b-4wlj2hl4xh] {
    /* Dòng chính: cùng cỡ với nội dung ở chế độ 1 dòng. */
    font-size: var(--tkb-font-grid-primary-content);
    font-weight: 600;
    color: var(--tkb-mon-text);
    line-height: 1.2;
    text-align: center;
}

.tkb-phu[b-4wlj2hl4xh] {
    /* Dòng phụ ở chế độ 2 dòng: nhỏ hơn, có khung và nền nổi nhẹ. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--tkb-phu-bg);
    color: var(--tkb-phu-text);
    border: 1px solid var(--tkb-phu-border);
    box-shadow: var(--tkb-phu-shadow);
    font-size: var(--tkb-font-grid-secondary-content);
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 5px;
    line-height: 1.2;
    white-space: nowrap;
}

.tkb-phong[b-4wlj2hl4xh] {
    flex-basis: 100%;
    color: #9a3412;
    font-size: calc(var(--tkb-font-grid-secondary-content) - 1px);
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
}

.tkb-table td.buoi-chieu .tkb-mon[b-4wlj2hl4xh] {
    color: var(--tkb-chieu-mon-text);
}

.tkb-table td.buoi-chieu .tkb-phu[b-4wlj2hl4xh] {
    background: var(--tkb-chieu-phu-bg);
    color: var(--tkb-chieu-phu-text);
    border-color: var(--tkb-chieu-phu-border);
}

.tkb-table td.tiet-codinh .tkb-mon[b-4wlj2hl4xh] {
    color: var(--tkb-codinh-mon-text) !important;
}

.tkb-table td.tiet-codinh .tkb-phu[b-4wlj2hl4xh] {
    background: var(--tkb-codinh-phu-bg) !important;
    color: var(--tkb-codinh-phu-text) !important;
    border-color: var(--tkb-codinh-phu-border) !important;
}

.mt-4[data-display-mode='inline'] .tkb-table td div.tkb-cell-content[b-4wlj2hl4xh] {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0;
    align-items: center;
    justify-content: center;
}

.mt-4[data-display-mode='inline'] .tkb-mon[b-4wlj2hl4xh],
.mt-4[data-display-mode='inline'] .tkb-phu[b-4wlj2hl4xh] {
    /* Chế độ 1 dòng: tên môn và tên giáo viên luôn bằng nhau. */
    font-size: var(--tkb-font-grid-primary-content);
    line-height: 1.2;
}

.mt-4[data-display-mode='inline'] .tkb-phu[b-4wlj2hl4xh] {
    display: inline;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
}

    .mt-4[data-display-mode='inline'] .tkb-phu[b-4wlj2hl4xh]::before {
        content: "-";
    }

/* Chế độ 1 dòng, buổi chiều: tên giáo viên chỉ hiển thị chữ, không dùng nền. */
.mt-4[data-display-mode='inline'] .tkb-table td.buoi-chieu .tkb-phu[b-4wlj2hl4xh] {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.tkb-table tr:nth-child(6) td[b-4wlj2hl4xh] {
    box-shadow: inset 0 1px 0 var(--tkb-session-divider);
}

.tkb-header[b-4wlj2hl4xh] {
    background: var(--tkb-header-bg);
    border: 0.5px solid var(--tkb-header-border);
    border-radius: 12px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.tkb-header-accent[b-4wlj2hl4xh] {
    width: 4px;
    border-radius: 3px;
    align-self: stretch;
    flex-shrink: 0;
    margin-right: 14px;
}

.tkb-header-body[b-4wlj2hl4xh] {
    flex: 1;
    min-width: 0;
}

.tkb-header-label[b-4wlj2hl4xh] {
    font-size: var(--tkb-font-grid-header-label);
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 3px;
}

.tkb-header-title[b-4wlj2hl4xh] {
    font-size: var(--tkb-font-grid-header-title);
    font-weight: 750;
    margin: 0;
    color: var(--tkb-header-title);
}

.tkb-header-campus[b-4wlj2hl4xh] {
    margin: 3px 0 0;
    font-size: var(--tkb-font-grid-header-label);
    font-weight: 650;
    color: var(--tkb-lop-accent);
}

.tkb-display-mode[b-4wlj2hl4xh] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-left: auto;
    margin-right: 12px;
    min-width: 150px;
}

.tkb-display-mode-label[b-4wlj2hl4xh] {
    font-size: var(--tkb-font-grid-display-label);
    font-weight: 650;
    margin: 0;
    color:cornflowerblue
}

.tkb-display-mode-select[b-4wlj2hl4xh] {
    appearance: none;
    min-height: 34px;
    border: 1px solid var(--tkb-header-border);
    border-radius: 10px;
    background-color: var(--tkb-select-bg);
    background-image: var(--tkb-select-bg-gradient);
    box-shadow: var(--tkb-select-shadow);
    color: var(--tkb-select-text);
    font-size: var(--tkb-font-grid-display-select);
    font-weight: 600;
    padding: 6px 34px 6px 10px;
    outline: none;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 6px;
    background-image: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%), linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: 0 0, calc(100% - 16px) calc(50% - 1px), calc(100% - 11px) calc(50% - 1px);
    background-size: 100% 100%, 5px 5px, 5px 5px;
}

    .tkb-display-mode-select:hover[b-4wlj2hl4xh] {
        border-color: var(--tkb-gv-accent);
        box-shadow: var(--tkb-select-hover-shadow);
    }

    .tkb-display-mode-select:focus[b-4wlj2hl4xh] {
        border-color: var(--tkb-gv-accent);
        box-shadow: var(--tkb-select-focus-ring);
    }

.tkb-badge[b-4wlj2hl4xh] {
    flex-shrink: 0;
    font-size: var(--tkb-font-grid-badge);
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 99px;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: 12px;
}

.v-lop .tkb-header-accent[b-4wlj2hl4xh] {
    background: var(--tkb-lop-accent);
}

.v-lop .tkb-header-label[b-4wlj2hl4xh] {
    color: var(--tkb-lop-accent);
}

.v-lop .tkb-badge[b-4wlj2hl4xh] {
    background: var(--tkb-lop-badge-bg);
    color: var(--tkb-lop-badge-text);
}

@media (max-width: 768px) {
    .tkb-display-mode[b-4wlj2hl4xh] {
        width: 100%;
        min-width: 0;
        margin: 12px 0 0;
    }

    .tkb-table[b-4wlj2hl4xh] {
        table-layout: fixed;
        width: 100%;
    }

        .tkb-table th:first-child[b-4wlj2hl4xh],
        .tkb-table td:first-child[b-4wlj2hl4xh] {
            width: 18px;
            min-width: 18px;
            font-size: var(--tkb-font-mobile-class-period);
            padding: 1px 2px;
        }

        .tkb-table th:not(:first-child)[b-4wlj2hl4xh],
        .tkb-table td:not(:first-child)[b-4wlj2hl4xh] {
            width: calc((100% - 18px) / 6);
        }

        .tkb-table th[b-4wlj2hl4xh] {
            font-size: var(--tkb-font-mobile-column-header);
            padding: 4px 1px;
            letter-spacing: 0;
        }

        .tkb-table td[b-4wlj2hl4xh] {
            height: 28px;
            padding: 1px;
        }

        .tkb-table th:nth-child(2)[b-4wlj2hl4xh]::after {
            content: "2";
        }

        .tkb-table th:nth-child(3)[b-4wlj2hl4xh]::after {
            content: "3";
        }

        .tkb-table th:nth-child(4)[b-4wlj2hl4xh]::after {
            content: "4";
        }

        .tkb-table th:nth-child(5)[b-4wlj2hl4xh]::after {
            content: "5";
        }

        .tkb-table th:nth-child(6)[b-4wlj2hl4xh]::after {
            content: "6";
        }

        .tkb-table th:nth-child(7)[b-4wlj2hl4xh]::after {
            content: "7";
        }

        .tkb-table th:not(:first-child)[b-4wlj2hl4xh] {
            font-size: var(--tkb-font-mobile-hidden-header);
            color: var(--tkb-transparent);
        }

            .tkb-table th:not(:first-child)[b-4wlj2hl4xh]::after {
                font-size: var(--tkb-font-mobile-class-short-day);
                color: var(--tkb-table-head-text);
                font-weight: 700;
            }

        .tkb-table td div[b-4wlj2hl4xh] {
            font-size: var(--tkb-font-mobile-cell-content);
            min-height: 24px;
            padding: 1px 2px;
            border-radius: 4px;
            line-height: 1.15;
            word-break: break-all;
        }

    .tkb-mon[b-4wlj2hl4xh] {
        font-size: var(--tkb-font-mobile-subject);
    }

    .tkb-phu[b-4wlj2hl4xh] {
        font-size: var(--tkb-font-mobile-secondary);
        padding: 1px 4px;
    }

    .mt-4[data-display-mode='inline'] .tkb-mon[b-4wlj2hl4xh],
    .mt-4[data-display-mode='inline'] .tkb-phu[b-4wlj2hl4xh] {
        /* Mobile, chế độ 1 dòng: hai phần tiếp tục dùng cùng cỡ chữ. */
        font-size: var(--tkb-font-mobile-subject);
    }
}
/* _content/QuanTriTruongHoc.TKB/Components/Pages/ThoiKhoaBieu/TrangXepTKB/TKBGVGrid.razor.rz.scp.css */
.tkb-highlight[b-dss68qkhz6] {
    background: var(--tkb-transparent) !important;
}

    .tkb-highlight div[b-dss68qkhz6] {
        background: var(--tkb-highlight-bg) !important;
        border: 1px solid var(--tkb-highlight-border) !important;
        color: var(--tkb-highlight-text) !important;
        box-shadow: none !important;
    }

    .tkb-highlight .tkb-mon[b-dss68qkhz6],
    .tkb-highlight .tkb-phu[b-dss68qkhz6] {
        color: var(--tkb-highlight-text) !important;
    }

.tkb-drop-highlight[b-dss68qkhz6] {
    background: var(--tkb-transparent) !important;
}

    .tkb-drop-highlight div[b-dss68qkhz6] {
        background: var(--tkb-drop-highlight-bg) !important;
        border: 1px solid var(--tkb-drop-highlight-border) !important;
        color: var(--tkb-highlight-text) !important;
    }

    .tkb-drop-highlight .tkb-mon[b-dss68qkhz6],
    .tkb-drop-highlight .tkb-phu[b-dss68qkhz6] {
        color: var(--tkb-highlight-text) !important;
    }

.tkb-gv-highlight[b-dss68qkhz6] {
    background: var(--tkb-transparent) !important;
    color: inherit !important;
    font-weight: 600;
}

    .tkb-gv-highlight div[b-dss68qkhz6] {
        background: var(--tkb-gv-highlight-bg) !important;
        border: 1px solid var(--tkb-gv-highlight-border) !important;
        color: var(--tkb-gv-highlight-text) !important;
        box-shadow: none !important;
    }

    .tkb-gv-highlight .tkb-mon[b-dss68qkhz6],
    .tkb-gv-highlight .tkb-phu[b-dss68qkhz6] {
        color: var(--tkb-gv-highlight-text) !important;
    }

.tiet-nghi[b-dss68qkhz6] {
    background: var(--tkb-transparent) !important;
}

    .tiet-nghi div[b-dss68qkhz6] {
        /* Cỡ chữ Tiết nghỉ được chỉnh riêng trong TrangXepTKB.css. */
        border: 1px solid var(--tkb-tiet-nghi-border) !important;
        color: var(--tkb-tiet-nghi-text) !important;
        font-size: var(--tkb-font-grid-break) !important;
        font-weight: 600;
        box-shadow: none !important;
    }

    .tiet-nghi *[b-dss68qkhz6] {
        color: inherit !important;
    }

.tkb-nghi[b-dss68qkhz6] {
    color: var(--tkb-nghi-text) !important;
}

.tkb-empty[b-dss68qkhz6] {
    color: var(--tkb-empty-text) !important;
}

.tiet-codinh[b-dss68qkhz6] {
    background: var(--tkb-codinh-bg) !important;
}

    .tiet-codinh div[b-dss68qkhz6] {
        background: var(--tkb-codinh-cell-bg) !important;
        border: 1px ridge var(--tkb-codinh-border) !important;
        color: var(--tkb-codinh-text) !important;
        font-weight: 700;
        box-shadow: none !important;
    }

    .tiet-codinh .tkb-mon[b-dss68qkhz6] {
        color: var(--tkb-codinh-mon-text) !important;
    }

    .tiet-codinh .tkb-phu[b-dss68qkhz6] {
        background: var(--tkb-codinh-phu-bg) !important;
        color: var(--tkb-codinh-phu-text) !important;
    }

.tkb-table-wrapper[b-dss68qkhz6] {
    border: 1px solid var(--tkb-table-grid-border-outer);
    border-radius: 12px;
    overflow: hidden;
    background: var(--tkb-table-bg);
}

.tkb-table[b-dss68qkhz6] {
    width: 100%;
    margin-bottom: 0;
    border: none !important;
    border-radius: 12px;
    border-collapse: collapse;
}

    .tkb-table th[b-dss68qkhz6],
    .tkb-table td[b-dss68qkhz6] {
        padding: 2px 6px;
        height: 35px;
        color: var(--tkb-table-text) !important;
        text-align: center;
        vertical-align: middle;
        border: 1px solid var(--tkb-table-grid-border) !important;
    }

    .tkb-table th[b-dss68qkhz6] {
        background: var(--tkb-table-head-bg);
        color: var(--tkb-table-head-text);
        font-size: var(--tkb-font-grid-column-header);
        font-weight: 650;
        text-shadow: none;
    }

    .tkb-table td.buoi-sang[b-dss68qkhz6] {
        background: var(--tkb-buoi-sang-bg);
    }

    .tkb-table td.buoi-chieu[b-dss68qkhz6] {
        background: var(--tkb-buoi-chieu-bg);
    }

    .tkb-table td.tkb-period[b-dss68qkhz6] {
        background: var(--tkb-period-bg) !important;
        color: var(--tkb-period-text) !important;
        border-color: var(--tkb-period-border) !important;
        font-weight: 750; /* thay vì chỉ dựa vào fw-semibold (600) */
    }

    .tkb-table td:hover[b-dss68qkhz6] {
        background: var(--tkb-cell-hover-bg) !important;
        transition: background .15s ease;
    }

    .tkb-table td.tkb-period:hover[b-dss68qkhz6] {
        background: var(--tkb-period-hover-bg) !important;
    }

    .tkb-table td.buoi-chieu:hover[b-dss68qkhz6] {
        background: var(--tkb-cell-chieu-hover-bg) !important;
        transition: background .15s ease;
    }

    /* Bàn phím: viền nổi bật theo màu Lớp (navy) khi tab vào ô — cải thiện khả năng thao tác */
    .tkb-table td:focus-visible[b-dss68qkhz6] {
        outline: 2px solid var(--tkb-lop-accent);
        outline-offset: -2px;
        z-index: 1;
        position: relative;
    }

    .tkb-table td div[b-dss68qkhz6] {
        padding: 2px 4px;
        min-height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: var(--tkb-transparent);
        border: none;
        box-shadow: none;
        font-size: var(--tkb-font-teacher-grid-period);
        font-weight: 650;
        line-height: 1.2;
        pointer-events: none;
    }

        .tkb-table td div.tkb-cell-content[b-dss68qkhz6] {
            flex-direction: column;
            gap: 2px;
            padding: 3px 4px;
            pointer-events: auto;
        }

.tkb-mon[b-dss68qkhz6] {
    /* Dòng chính: cùng cỡ với nội dung ở chế độ 1 dòng. */
    font-size: var(--tkb-font-grid-primary-content);
    font-weight: 600;
    color: var(--tkb-mon-text);
    line-height: 1.2;
    text-align: center;
}

.tkb-phu[b-dss68qkhz6] {
    /* Dòng phụ ở chế độ 2 dòng: nhỏ hơn, có khung và nền nổi nhẹ. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--tkb-phu-bg);
    color: var(--tkb-phu-text);
    border: 1px solid var(--tkb-phu-border);
    box-shadow: var(--tkb-phu-shadow);
    font-size: var(--tkb-font-grid-secondary-content);
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 5px;
    line-height: 1.4;
    white-space: nowrap;
}

.tkb-phong[b-dss68qkhz6] {
    flex-basis: 100%;
    color: #9a3412;
    font-size: calc(var(--tkb-font-grid-secondary-content) - 1px);
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
}

.tkb-table td.buoi-chieu .tkb-mon[b-dss68qkhz6] {
    color: var(--tkb-chieu-mon-text);
}

.tkb-table td.buoi-chieu .tkb-phu[b-dss68qkhz6] {
    background: var(--tkb-chieu-phu-bg);
    color: var(--tkb-chieu-phu-text);
    border-color: var(--tkb-chieu-phu-border);
}

.tkb-table td.tiet-codinh .tkb-mon[b-dss68qkhz6] {
    color: var(--tkb-codinh-mon-text) !important;
}

.tkb-table td.tiet-codinh .tkb-phu[b-dss68qkhz6] {
    background: var(--tkb-codinh-phu-bg) !important;
    color: var(--tkb-codinh-phu-text) !important;
    border-color: var(--tkb-codinh-phu-border) !important;
}

.mt-4[data-display-mode='inline'] .tkb-table td div.tkb-cell-content[b-dss68qkhz6] {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0;
    align-items: center;
    justify-content: center;
}

.mt-4[data-display-mode='inline'] .tkb-mon[b-dss68qkhz6],
.mt-4[data-display-mode='inline'] .tkb-phu[b-dss68qkhz6] {
    /* Chế độ 1 dòng: tên môn và tên lớp luôn bằng nhau. */
    font-size: var(--tkb-font-grid-primary-content);
    line-height: 1.25;
}

.mt-4[data-display-mode='inline'] .tkb-phu[b-dss68qkhz6] {
    display: inline;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
}

    .mt-4[data-display-mode='inline'] .tkb-phu[b-dss68qkhz6]::before {
        content: "-";
    }

/* Chế độ 1 dòng, buổi chiều: tên lớp chỉ hiển thị chữ, không dùng nền. */
.mt-4[data-display-mode='inline'] .tkb-table td.buoi-chieu .tkb-phu[b-dss68qkhz6] {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.tkb-table tr:nth-child(6) td[b-dss68qkhz6] {
    box-shadow: inset 0 1px 0 var(--tkb-session-divider);
}

.tkb-header[b-dss68qkhz6] {
    background: var(--tkb-header-bg);
    border: 0.5px solid var(--tkb-header-border);
    border-radius: 12px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.tkb-header-accent[b-dss68qkhz6] {
    width: 4px;
    border-radius: 3px;
    align-self: stretch;
    flex-shrink: 0;
    margin-right: 14px;
}

.tkb-header-body[b-dss68qkhz6] {
    flex: 1;
    min-width: 0;
}

.tkb-header-label[b-dss68qkhz6] {
    font-size: var(--tkb-font-grid-header-label);
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 3px;
}

.tkb-header-title[b-dss68qkhz6] {
    font-size: var(--tkb-font-grid-header-title);
    font-weight: 650;
    margin: 0;
    color: var(--tkb-header-title);
}

.tkb-display-mode[b-dss68qkhz6] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-left: auto;
    margin-right: 12px;
    min-width: 150px;
}

.tkb-display-mode-label[b-dss68qkhz6] {
    font-size: var(--tkb-font-grid-display-label);
    font-weight: 650;
    margin: 0;
    color: var(--tkb-header-label);
}

.tkb-display-mode-select[b-dss68qkhz6] {
    appearance: none;
    min-height: 34px;
    border: 1px solid var(--tkb-header-border);
    border-radius: 10px;
    background-color: var(--tkb-select-bg);
    background-image: var(--tkb-select-bg-gradient);
    box-shadow: var(--tkb-select-shadow);
    color: var(--tkb-select-text);
    font-size: var(--tkb-font-grid-display-select);
    font-weight: 650;
    padding: 6px 34px 6px 10px;
    outline: none;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 6px;
    background-image: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%), linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: 0 0, calc(100% - 16px) calc(50% - 1px), calc(100% - 11px) calc(50% - 1px);
    background-size: 100% 100%, 5px 5px, 5px 5px;
}

    .tkb-display-mode-select:hover[b-dss68qkhz6] {
        border-color: var(--tkb-gv-accent);
        box-shadow: var(--tkb-select-hover-shadow);
    }

    .tkb-display-mode-select:focus[b-dss68qkhz6] {
        border-color: var(--tkb-gv-accent);
        box-shadow: var(--tkb-select-focus-ring);
    }

.tkb-badge[b-dss68qkhz6] {
    flex-shrink: 0;
    font-size: var(--tkb-font-grid-badge);
    font-weight: 650;
    padding: 4px 12px;
    border-radius: 99px;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: 12px;
}

.v-lop .tkb-header-accent[b-dss68qkhz6] {
    background: var(--tkb-lop-accent);
}

.v-lop .tkb-header-label[b-dss68qkhz6] {
    color: var(--tkb-lop-accent);
}

.v-lop .tkb-badge[b-dss68qkhz6] {
    background: var(--tkb-lop-badge-bg);
    color: var(--tkb-lop-badge-text);
}

@media (max-width: 768px) {
    .tkb-display-mode[b-dss68qkhz6] {
        width: 100%;
        min-width: 0;
        margin: 12px 0 0;
    }

    .tkb-table[b-dss68qkhz6] {
        table-layout: fixed;
        width: 100%;
    }

        .tkb-table th:first-child[b-dss68qkhz6],
        .tkb-table td:first-child[b-dss68qkhz6] {
            width: 18px;
            min-width: 18px;
            font-size: var(--tkb-font-mobile-teacher-period);
            padding: 1px 2px;
        }

        .tkb-table th:not(:first-child)[b-dss68qkhz6],
        .tkb-table td:not(:first-child)[b-dss68qkhz6] {
            width: calc((100% - 18px) / 6);
        }

        .tkb-table th[b-dss68qkhz6] {
            font-size: var(--tkb-font-mobile-column-header);
            padding: 4px 1px;
            letter-spacing: 0;
        }

        .tkb-table td[b-dss68qkhz6] {
            height: 28px;
            padding: 1px;
        }

        .tkb-table th:nth-child(2)[b-dss68qkhz6]::after {
            content: "2";
        }

        .tkb-table th:nth-child(3)[b-dss68qkhz6]::after {
            content: "3";
        }

        .tkb-table th:nth-child(4)[b-dss68qkhz6]::after {
            content: "4";
        }

        .tkb-table th:nth-child(5)[b-dss68qkhz6]::after {
            content: "5";
        }

        .tkb-table th:nth-child(6)[b-dss68qkhz6]::after {
            content: "6";
        }

        .tkb-table th:nth-child(7)[b-dss68qkhz6]::after {
            content: "7";
        }

        .tkb-table th:not(:first-child)[b-dss68qkhz6] {
            font-size: var(--tkb-font-mobile-hidden-header);
            color: var(--tkb-transparent);
        }

            .tkb-table th:not(:first-child)[b-dss68qkhz6]::after {
                font-size: var(--tkb-font-mobile-teacher-short-day);
                color: var(--tkb-table-head-text);
                font-weight: 650;
            }

        .tkb-table td div[b-dss68qkhz6] {
            font-size: var(--tkb-font-mobile-cell-content);
            min-height: 24px;
            padding: 1px 2px;
            border-radius: 4px;
            line-height: 1.15;
            word-break: break-all;
        }

    .tkb-mon[b-dss68qkhz6] {
        font-size: var(--tkb-font-mobile-subject);
    }

    .tkb-phu[b-dss68qkhz6] {
        font-size: var(--tkb-font-mobile-secondary);
        padding: 1px 4px;
    }

    .mt-4[data-display-mode='inline'] .tkb-mon[b-dss68qkhz6],
    .mt-4[data-display-mode='inline'] .tkb-phu[b-dss68qkhz6] {
        /* Mobile, chế độ 1 dòng: hai phần tiếp tục dùng cùng cỡ chữ. */
        font-size: var(--tkb-font-mobile-subject);
    }
}
/* _content/QuanTriTruongHoc.TKB/Components/Pages/ThoiKhoaBieu/TrangXepTKB/TKBModals.razor.rz.scp.css */
/* Reserved for TKBModals-specific styles. */
/* _content/QuanTriTruongHoc.TKB/Components/Pages/ThoiKhoaBieu/TrangXepTKB/TKBSidebar.razor.rz.scp.css */
.tkb-hero-grid[b-fjf5juk6e9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 6px;
}

.hero-card[b-fjf5juk6e9] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 82px;
    padding: 6px;
    border-radius: 12px;
    background: var(--tkb-hero-card-bg);
    border: 1px solid var(--tkb-hero-card-border);
    box-shadow: var(--shadow);
    overflow: hidden;
}

    .hero-card[b-fjf5juk6e9]::before {
        content: "";
        position: absolute;
        top: -42px;
        left: -42px;
        width: 100px;
        height: 100px;
        border-radius: 20%;
        pointer-events: none;
        background: radial-gradient(circle, rgba(34, 197, 94, 0.28) 0%, rgba(74, 222, 128, 0.16) 42%, rgba(74, 222, 128, 0) 74%);
        filter: blur(6px);
    }

    .hero-card[b-fjf5juk6e9]::after {
        display: none;
    }

.hero-card__header[b-fjf5juk6e9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.hero-card__eyebrow[b-fjf5juk6e9] {
    padding: 2px 7px;
    border-radius: 999px;
    font-size: var(--tkb-font-sidebar-eyebrow);
    font-weight: 700;
}

.hero-card__icon[b-fjf5juk6e9] {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tkb-hero-icon-bg);
    border: 1px solid var(--tkb-hero-icon-border);
}

.hero-card__icon svg[b-fjf5juk6e9] {
    width: 28px;
    height: 28px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tkb-hero-icon-color);
    font-size: var(--tkb-font-sidebar-card-icon);
    box-shadow: 0 4px 16px var(--tkb-hero-icon-shadow);
    transition: all .25s ease;
    background: var(--tkb-hero-icon-gradient);
}

.hero-card__label[b-fjf5juk6e9] {
    font-size: var(--tkb-font-sidebar-label);
    font-weight: 600;
    color: var(--tkb-hero-label);
    margin-bottom: 2px;
}

.hero-card__value[b-fjf5juk6e9] {
    font-size: var(--tkb-font-sidebar-value);
    font-weight: 800;
    color: var(--tkb-hero-value);
}

.hero-card__unit[b-fjf5juk6e9] {
    font-size: var(--tkb-font-sidebar-unit);
    color: var(--tkb-hero-label);
}

.hero-card__meta[b-fjf5juk6e9] {
    margin-top: 3px;
    font-size: var(--tkb-font-sidebar-meta);
    color: var(--tkb-hero-meta);
}

.hero-card__progress[b-fjf5juk6e9] {
    margin-top: 6px;
    height: 4px;
    border-radius: 999px;
    background: var(--tkb-hero-progress-bg);
}

.hero-card__progress-fill[b-fjf5juk6e9] {
    height: 100%;
    border-radius: inherit;
}

.hero-card--plan[b-fjf5juk6e9] {
    border-left: 4px solid var(--tkb-hero-plan);
}

.hero-card--scheduled[b-fjf5juk6e9] {
    border-left: 4px solid var(--tkb-hero-scheduled);
}

.hero-card--progress-summary[b-fjf5juk6e9] {
    border-left: 4px solid var(--tkb-hero-scheduled);
}

.progress-summary[b-fjf5juk6e9] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.progress-summary__item[b-fjf5juk6e9] {
    min-width: 0;
}

.progress-summary__divider[b-fjf5juk6e9] {
    width: 1px;
    height: 38px;
    background: var(--tkb-hero-card-border);
}

.hero-card--progress-summary .hero-card__value-row[b-fjf5juk6e9] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.hero-card--progress-summary .hero-card__progress-fill[b-fjf5juk6e9] {
    background: linear-gradient(90deg, var(--tkb-hero-plan), var(--tkb-hero-scheduled));
}

.hero-card--class-load[b-fjf5juk6e9] {
    border-left: 4px solid var(--tkb-hero-class-load);
}

.hero-card--teachers[b-fjf5juk6e9] {
    border-left: 4px solid var(--tkb-hero-teachers);
}

.hero-card--classes[b-fjf5juk6e9] {
    border-left: 4px solid var(--tkb-hero-classes);
}

.hero-card--warning[b-fjf5juk6e9] {
    border: 2px solid var(--tkb-warning-border);
    background: var(--tkb-warning-bg);
    box-shadow: 0 10px 24px var(--tkb-warning-shadow-1), 0 2px 8px var(--tkb-warning-shadow-2);
    position: relative;
    overflow: hidden;
}

.hero-card--warning[b-fjf5juk6e9]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--tkb-warning-shine);
    pointer-events: none;
}

.hero-card--warning[b-fjf5juk6e9]::before {
    content: "";
    position: absolute;
    top: -45px;
    right: -45px;
    width: 120px;
    height: 120px;
    background: var(--tkb-warning-orb);
    border-radius: 50%;
}

.hero-card--warning .hero-card__eyebrow[b-fjf5juk6e9] {
    background: var(--tkb-warning-eyebrow-bg);
    color: var(--tkb-warning-eyebrow-text);
    border: 1px solid var(--tkb-warning-eyebrow-border);
    font-weight: 700;
    letter-spacing: .4px;
}

.hero-card--warning .hero-card__icon[b-fjf5juk6e9] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--tkb-warning-icon-bg);
    color: var(--tkb-hero-icon-color);
    font-size: var(--tkb-font-sidebar-warning-icon);
    box-shadow: 0 6px 14px var(--tkb-warning-icon-shadow-1), inset 0 1px 0 var(--tkb-warning-icon-shadow-2);
}

.hero-card--warning .hero-card__label[b-fjf5juk6e9] {
    color: var(--tkb-warning-label);
    font-weight: 700;
}

.hero-card--warning .hero-card__value[b-fjf5juk6e9],
.hero-card--warning .hero-card__value span[b-fjf5juk6e9] {
    color: var(--tkb-warning-value) !important;
}

.hero-card--warning .thieu-card[b-fjf5juk6e9] {
    background: var(--tkb-warning-card-bg);
    backdrop-filter: blur(2px);
    border: 1px solid var(--tkb-warning-card-border) !important;
    transition: all .18s ease;
}

.hero-card--warning .thieu-card:hover[b-fjf5juk6e9] {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px var(--tkb-warning-card-shadow);
}

.thieu-card__actions[b-fjf5juk6e9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.thieu-card__actions .btn[b-fjf5juk6e9] {
    padding: 5px 6px;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.2;
}

.hero-card--warning .bg-danger-subtle[b-fjf5juk6e9] {
    background: var(--tkb-warning-danger-bg) !important;
    border-color: var(--tkb-warning-danger-border) !important;
}

.overview-stats[b-fjf5juk6e9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
}

.overview-item[b-fjf5juk6e9] {
    flex: 1;
    text-align: center;
}

.overview-value[b-fjf5juk6e9] {
    font-size: var(--tkb-font-sidebar-overview-value);
    font-weight: 800;
    line-height: 1;
    color: var(--tkb-hero-value);
}

.overview-text[b-fjf5juk6e9] {
    margin-top: 4px;
    font-size: var(--tkb-font-sidebar-overview-text);
    font-weight: 600;
    color: var(--tkb-hero-label);
    text-transform: uppercase;
    letter-spacing: .3px;
}

.overview-divider[b-fjf5juk6e9] {
    display: none;
}
/* _content/QuanTriTruongHoc.TKB/Components/Pages/ThoiKhoaBieu/TrangXepTKB/TKBToolbar.razor.rz.scp.css */
.tkb-toolbar[b-mlyx6bb5aw] {
    display: grid;
    gap: 8px;
    margin-bottom: 6px;
}

    .tkb-toolbar[b-mlyx6bb5aw]::after {
        background: radial-gradient(circle, rgba(249, 115, 22, 0.22) 0%, rgba(251, 146, 60, 0.12) 42%, rgba(251, 146, 60, 0) 74%);
    }

.tkb-toolbar__panel[b-mlyx6bb5aw] {
    padding: 10px;
    border-radius: 14px;
    background: var(--tkb-toolbar-panel-bg);
    border: 1px solid var(--tkb-toolbar-panel-border);
    box-shadow: 0 4px 20px var(--tkb-toolbar-panel-shadow);
}

.tkb-toolbar__panel-head[b-mlyx6bb5aw] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    padding: 0 2px;
}

.tkb-toolbar__eyebrow[b-mlyx6bb5aw] {
    font-size: var(--tkb-font-toolbar-eyebrow);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tkb-toolbar-eyebrow);
}

.tkb-toolbar__row[b-mlyx6bb5aw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 8px;
}

.tkb-toolbar .tkb-dd-toggle[b-mlyx6bb5aw],
.tkb-toolbar .tkb-action-btn[b-mlyx6bb5aw],
.tkb-toolbar .action-btn[b-mlyx6bb5aw] {
    position: relative;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 40px !important;
    padding: 0 10px !important;
    gap: 8px !important;
    border-radius: 10px !important;
    font-size: var(--tkb-font-toolbar-button) !important;
    font-weight: 650 !important;
    overflow: hidden;
    transition: filter .15s ease, transform .1s ease, box-shadow .15s ease;
    text-align: left;
}

.tkb-toolbar .tkb-toolbar-btn[b-mlyx6bb5aw] {
    color: var(--tkb-toolbar-btn-text) !important;
    border: 1px solid var(--tkb-toolbar-btn-border) !important;
    box-shadow: 0 2px 8px var(--tkb-toolbar-btn-shadow-1), inset 0 1px 0 var(--tkb-toolbar-btn-shadow-2);
}

    .tkb-toolbar .tkb-toolbar-btn:hover[b-mlyx6bb5aw] {
        filter: brightness(1.15) !important;
        box-shadow: 0 4px 14px var(--tkb-toolbar-btn-hover-shadow-1), inset 0 1px 0 var(--tkb-toolbar-btn-hover-shadow-2) !important;
        background: #073545 !important;
        color: var(--tkb-toolbar-btn-text) !important;
    }

.tkb-toolbar .tkb-toolbar-btn:active:not(:disabled)[b-mlyx6bb5aw] {
    transform: translateY(1px);
    filter: brightness(.95);
}

.tkb-toolbar .tkb-toolbar-btn:disabled[b-mlyx6bb5aw] {
    background: var(--tkb-toolbar-disabled-bg) !important;
    opacity: .5;
    cursor: not-allowed;
}

.tkb-toolbar .tkb-toolbar-btn--brand[b-mlyx6bb5aw]  { background: var(--tkb-toolbar-brand-bg) !important; }
.tkb-toolbar .tkb-toolbar-btn--teal[b-mlyx6bb5aw]   { background: var(--tkb-toolbar-teal-bg) !important; }
.tkb-toolbar .tkb-toolbar-btn--indigo[b-mlyx6bb5aw] { background: var(--tkb-toolbar-indigo-bg) !important; }
.tkb-toolbar .tkb-toolbar-btn--slate[b-mlyx6bb5aw]  { background: var(--tkb-toolbar-slate-bg) !important; }
.tkb-toolbar .tkb-toolbar-btn--danger[b-mlyx6bb5aw] { background: var(--tkb-toolbar-danger-bg) !important; }

.tkb-toolbar .tkb-toolbar-btn__icon[b-mlyx6bb5aw] {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--tkb-toolbar-icon-bg);
    border: 1px solid var(--tkb-toolbar-icon-border);
}

.tkb-toolbar .tkb-toolbar-btn__icon svg[b-mlyx6bb5aw] {
    width: 16px;
    height: 16px;
}

.tkb-toolbar .tkb-toolbar-btn__text[b-mlyx6bb5aw] {
    font-size: var(--tkb-font-toolbar-button-text);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.tkb-toolbar-menu[b-mlyx6bb5aw] {
    margin-top: 6px !important;
    padding: 6px !important;
    border-radius: 12px !important;
    border: 1px solid var(--tkb-toolbar-menu-border) !important;
    background: var(--tkb-toolbar-menu-bg) !important;
    box-shadow: 0 12px 32px var(--tkb-toolbar-menu-shadow-1), 0 2px 8px var(--tkb-toolbar-menu-shadow-2) !important;
    min-width: 220px !important;
}

.tkb-toolbar-menu .dropdown-header[b-mlyx6bb5aw] {
    font-size: var(--tkb-font-toolbar-menu-header) !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    color: var(--tkb-toolbar-menu-header) !important;
    padding: 8px 10px 4px !important;
}

.tkb-toolbar-menu .dropdown-divider[b-mlyx6bb5aw] {
    margin: 4px 6px !important;
    border-color: var(--tkb-toolbar-menu-divider) !important;
}

.tkb-toolbar-menu .dropdown-item[b-mlyx6bb5aw] {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    min-height: 36px !important;
    padding: 7px 10px !important;
    border-radius: 8px !important;
    font-size: var(--tkb-font-toolbar-menu-item) !important;
    font-weight: 500 !important;
    color: var(--tkb-toolbar-menu-text) !important;
    transition: background .13s ease, color .13s ease !important;
}

.tkb-toolbar-menu .dropdown-item:hover:not(:disabled)[b-mlyx6bb5aw],
.tkb-toolbar-menu .dropdown-item:focus:not(:disabled)[b-mlyx6bb5aw] {
    background: var(--tkb-toolbar-menu-hover-bg) !important;
    color: var(--tkb-toolbar-menu-hover-text) !important;
    transform: none !important;
}

.tkb-toolbar-menu .dropdown-item:active:not(:disabled)[b-mlyx6bb5aw] {
    background: var(--tkb-toolbar-menu-active-bg) !important;
}

.tkb-toolbar-menu .dropdown-item.tkb-menu-item--primary[b-mlyx6bb5aw] {
    color: var(--tkb-toolbar-menu-primary) !important;
    font-weight: 650 !important;
}

.tkb-toolbar-menu .tkb-menu-item--primary:hover:not(:disabled)[b-mlyx6bb5aw],
.tkb-toolbar-menu .tkb-menu-item--primary:focus:not(:disabled)[b-mlyx6bb5aw] {
    background: var(--tkb-toolbar-menu-primary-hover-bg) !important;
    color: var(--tkb-toolbar-btn-text) !important;
}

.tkb-toolbar-menu .dropdown-item.tkb-menu-item--danger[b-mlyx6bb5aw] {
    color: var(--tkb-toolbar-menu-danger) !important;
}

.tkb-toolbar-menu .dropdown-item.tkb-menu-item--danger:hover:not(:disabled)[b-mlyx6bb5aw],
.tkb-toolbar-menu .dropdown-item.tkb-menu-item--danger:focus:not(:disabled)[b-mlyx6bb5aw] {
    background: var(--tkb-toolbar-menu-danger-hover-bg) !important;
    color: var(--tkb-toolbar-menu-danger-hover-text) !important;
}

.tkb-toolbar-menu .dropdown-item:disabled[b-mlyx6bb5aw],
.tkb-toolbar-menu .dropdown-item[disabled][b-mlyx6bb5aw] {
    opacity: .4 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

@media (max-width: 768px) {
    .tkb-toolbar__row[b-mlyx6bb5aw] {
        grid-template-columns: repeat(1, 1fr);
        gap: 6px;
    }
}
/* _content/QuanTriTruongHoc.TKB/Components/Pages/ThoiKhoaBieu/TrangXepTKB/XepTKB.razor.rz.scp.css */
.tkb-xep[b-lbqea9wfqr] {
    min-height: 100vh;
    background: var(--tkb-page-bg);
}

.tkb-xep.container-fluid[b-lbqea9wfqr] {
    padding-top: 0 !important;
    padding-left: clamp(12px, 3vw, 2rem);
    padding-right: clamp(12px, 3vw, 2rem);
    background: var(--tkb-page-bg-alt) !important;
}

.tkb-sidebar-column[b-lbqea9wfqr] {
    position: sticky;
    top: 10px;
    height: fit-content;
}
/* _content/QuanTriTruongHoc.TKB/Components/Pages/ThoiKhoaBieu/TroLyXepTKB/Workflow/TkbWorkflowPanel.razor.rz.scp.css */
.tkb-workflow[b-a2057ywazh] {
    --workflow-blue: #2563eb;
    --workflow-blue-soft: #eff6ff;
    --workflow-green: #16a34a;
    --workflow-amber: #d97706;
    --workflow-red: #dc2626;
    --workflow-muted: #64748b;
    padding: 16px;
    border: 1px solid #dbeafe;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}

.tkb-workflow__header[b-a2057ywazh] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.tkb-workflow__eyebrow[b-a2057ywazh] {
    color: var(--workflow-blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
}

.tkb-workflow__title[b-a2057ywazh] {
    margin: 2px 0 0;
    color: #0f172a;
    font-size: 20px;
    font-weight: 750;
}

.tkb-workflow__summary[b-a2057ywazh] {
    margin: 3px 0 0;
    color: var(--workflow-muted);
    font-size: 12px;
}

.tkb-workflow__refresh[b-a2057ywazh] {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    color: var(--workflow-blue);
    background: var(--workflow-blue-soft);
}

.tkb-workflow__refresh:disabled[b-a2057ywazh],
.tkb-workflow__action:disabled[b-a2057ywazh],
.tkb-workflow__step-button:disabled[b-a2057ywazh] {
    cursor: wait;
    opacity: .55;
}

.tkb-workflow__progress[b-a2057ywazh] {
    height: 7px;
    margin: 13px 0;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
}

.tkb-workflow__progress span[b-a2057ywazh] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb, #06b6d4);
    transition: width .25s ease;
}

.tkb-workflow__context[b-a2057ywazh] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-bottom: 12px;
    padding: 9px 11px;
    border-radius: 10px;
    color: #334155;
    background: #f8fafc;
    font-size: 12px;
}

.tkb-workflow__steps[b-a2057ywazh] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-height: 440px;
    margin: 0;
    padding: 2px;
    overflow-y: auto;
    list-style: none;
}

.tkb-workflow__step[b-a2057ywazh] {
    min-width: 0;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
    background: #fff;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}

.tkb-workflow__step:hover[b-a2057ywazh] {
    border-color: #93c5fd;
    transform: translateY(-1px);
}

.tkb-workflow__step--active[b-a2057ywazh] {
    border-color: var(--workflow-blue);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .12);
}

.tkb-workflow__step--completed[b-a2057ywazh] { border-left: 4px solid var(--workflow-green); }
.tkb-workflow__step--inprogress[b-a2057ywazh] { border-left: 4px solid var(--workflow-blue); }
.tkb-workflow__step--warning[b-a2057ywazh] { border-left: 4px solid var(--workflow-amber); }
.tkb-workflow__step--error[b-a2057ywazh] { border-left: 4px solid var(--workflow-red); }
.tkb-workflow__step--skipped[b-a2057ywazh] { border-left: 4px solid #94a3b8; }

.tkb-workflow__step-button[b-a2057ywazh] {
    display: grid;
    width: 100%;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 10px;
    text-align: left;
    border: 0;
    color: inherit;
    background: transparent;
}

.tkb-workflow__status-icon[b-a2057ywazh] { color: #94a3b8; font-size: 16px; }
.tkb-workflow__step--completed .tkb-workflow__status-icon[b-a2057ywazh] { color: var(--workflow-green); }
.tkb-workflow__step--inprogress .tkb-workflow__status-icon[b-a2057ywazh] { color: var(--workflow-blue); }
.tkb-workflow__step--warning .tkb-workflow__status-icon[b-a2057ywazh] { color: var(--workflow-amber); }
.tkb-workflow__step--error .tkb-workflow__status-icon[b-a2057ywazh] { color: var(--workflow-red); }

.tkb-workflow__step-copy[b-a2057ywazh],
.tkb-workflow__step-heading[b-a2057ywazh] {
    display: flex;
    min-width: 0;
}

.tkb-workflow__step-copy[b-a2057ywazh] { flex-direction: column; gap: 3px; }
.tkb-workflow__step-heading[b-a2057ywazh] { align-items: center; gap: 6px; }

.tkb-workflow__step-number[b-a2057ywazh] {
    display: inline-grid;
    min-width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 6px;
    color: #475569;
    background: #f1f5f9;
    font-size: 10px;
    font-weight: 800;
}

.tkb-workflow__step-title[b-a2057ywazh] {
    overflow: hidden;
    color: #0f172a;
    font-size: 12px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tkb-workflow__optional[b-a2057ywazh] {
    padding: 2px 5px;
    border-radius: 999px;
    color: #475569;
    background: #e2e8f0;
    font-size: 9px;
    white-space: nowrap;
}

.tkb-workflow__description[b-a2057ywazh],
.tkb-workflow__status-message[b-a2057ywazh] {
    color: var(--workflow-muted);
    font-size: 10px;
    line-height: 1.35;
}

.tkb-workflow__status-message[b-a2057ywazh] { color: #475569; }
.tkb-workflow__counts[b-a2057ywazh] { display: flex; gap: 3px; }

.tkb-workflow__count[b-a2057ywazh] {
    display: inline-grid;
    min-width: 19px;
    height: 19px;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
}

.tkb-workflow__count--error[b-a2057ywazh] { background: var(--workflow-red); }
.tkb-workflow__count--warning[b-a2057ywazh] { background: var(--workflow-amber); }

.tkb-workflow__actions[b-a2057ywazh] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
}

.tkb-workflow__action[b-a2057ywazh] {
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
}

.tkb-workflow__action--primary[b-a2057ywazh] { color: #fff; background: var(--workflow-blue); }
.tkb-workflow__action--secondary[b-a2057ywazh] { color: #334155; border-color: #cbd5e1; background: #fff; }
.tkb-workflow__action--ghost[b-a2057ywazh] { color: #475569; background: #f1f5f9; }

@media (max-width: 1100px) {
    .tkb-workflow__steps[b-a2057ywazh] { grid-template-columns: 1fr; max-height: 400px; }
}

@media (max-width: 768px) {
    .tkb-workflow[b-a2057ywazh] { padding: 13px; }
    .tkb-workflow__steps[b-a2057ywazh] { display: flex; max-height: none; flex-direction: column; }
    .tkb-workflow__description[b-a2057ywazh],
    .tkb-workflow__status-message[b-a2057ywazh] { display: none; }
    .tkb-workflow__step--active .tkb-workflow__description[b-a2057ywazh],
    .tkb-workflow__step--active .tkb-workflow__status-message[b-a2057ywazh] { display: block; }
    .tkb-workflow__actions[b-a2057ywazh] { justify-content: stretch; }
    .tkb-workflow__action[b-a2057ywazh] { flex: 1 1 45%; }
}
/* _content/QuanTriTruongHoc.TKB/Components/Pages/ThoiKhoaBieu/TroLyXepTKB/Workflow/TkbWorkflowReturnButton.razor.rz.scp.css */
.tkb-workflow-return[b-ie6nillw62] { display: flex; align-items: center; gap: 9px; margin: 10px 0 14px; }
.tkb-workflow-return__button[b-ie6nillw62] { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid #bfdbfe; border-radius: 9px; color: #1d4ed8; background: #eff6ff; font-size: 13px; font-weight: 700; transition: border-color .15s, background .15s, transform .15s; }
.tkb-workflow-return__button:hover[b-ie6nillw62] { border-color: #60a5fa; background: #dbeafe; transform: translateX(-1px); }
.tkb-workflow-return__context[b-ie6nillw62] { padding: 4px 8px; border-radius: 999px; color: #475569; background: #f1f5f9; font-size: 11px; font-weight: 700; }
/* _content/QuanTriTruongHoc.TKB/Components/Pages/VanBanChiDao/VanBanChiDaoDanhSach.razor.rz.scp.css */
.vbcd-container[b-cmkhdaecsi] {
    --vbcd-navy: #0b2545;
    --vbcd-navy-2: #071b33;
    --vbcd-navy-3: #102f55;
    --vbcd-orange: #f59e0b;
    --vbcd-orange-2: #ffb020;
    --vbcd-green: #16a34a;
    --vbcd-green-2: #10b981;
    --vbcd-bg: #f6f8fb;
    --vbcd-border: rgba(15, 40, 70, 0.12);
    --vbcd-shadow: 0 14px 32px rgba(7, 27, 51, 0.10);
    --vbcd-text: #1c2b3f;
    --vbcd-text-muted: #66788c;
    width: 100%;
    margin: 1.5rem auto;
    padding: 1.5rem 2rem;
    background: #f8f9fa;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

/* ================= TOOLBAR ================= */
.vbcd-toolbar[b-cmkhdaecsi] {
    justify-content: center;
}

.vbcd-btn[b-cmkhdaecsi] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 16px;
    border: 1px solid var(--vbcd-border);
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    background: rgba(255,255,255,0.85);
    color: var(--vbcd-navy-2);
    box-shadow: 0 6px 14px rgba(25,44,63,0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

    .vbcd-btn:hover[b-cmkhdaecsi] {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(25,44,63,0.14);
    }

.vbcd-btn-add[b-cmkhdaecsi] {
    border-color: var(--vbcd-green);
    color: var(--vbcd-green-2);
}

    .vbcd-btn-add:hover[b-cmkhdaecsi] {
        background: rgba(16,185,129,0.10);
    }

.vbcd-btn-search[b-cmkhdaecsi] {
    border-color: var(--vbcd-orange);
    color: #a9660a;
}

    .vbcd-btn-search:hover[b-cmkhdaecsi] {
        background: rgba(245,158,11,0.10);
    }

.vbcd-btn-refresh[b-cmkhdaecsi] {
    border-color: var(--vbcd-navy);
    color: var(--vbcd-navy);
}

    .vbcd-btn-refresh:hover[b-cmkhdaecsi] {
        background: rgba(11,37,69,0.06);
    }

.vbcd-empty[b-cmkhdaecsi] {
    text-align: center;
    color: var(--vbcd-text-muted);
    margin-top: 1.5rem;
    padding: 2rem 0;
}

.vbcd-text-muted[b-cmkhdaecsi] {
    color: var(--vbcd-text-muted);
}

/* ================= DESKTOP TABLE ================= */
.vbcd-table-desktop[b-cmkhdaecsi] {
    display: block;
}

.vbcd-table-scroll[b-cmkhdaecsi] {
    width: 100%;
    overflow-x: auto;
    border-radius: 14px;
    border: 1px solid var(--vbcd-border);
    box-shadow: var(--vbcd-shadow);
}

.vbcd-table[b-cmkhdaecsi] {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    font-size: 0.8rem;
}

    .vbcd-table thead th[b-cmkhdaecsi] {
        background: linear-gradient(135deg, var(--vbcd-navy-2), var(--vbcd-navy-3));
        color: #ffffff;
        font-weight: 700;
        font-size: 0.78rem;
        padding: 0.55rem 0.5rem;
        text-align: center;
    }

    .vbcd-table td[b-cmkhdaecsi] {
        padding: 0.5rem;
        border: 1px solid var(--vbcd-border);
        text-align: center;
        vertical-align: middle;
    }

    .vbcd-table tbody tr:hover[b-cmkhdaecsi] {
        background: rgba(16,185,129,0.06);
    }

.vbcd-col-trichyeu[b-cmkhdaecsi] {
    max-width: 280px;
    text-align: left;
    line-height: 1.35;
    color: var(--vbcd-text);
    word-break: break-word;
}

.vbcd-col-file[b-cmkhdaecsi] {
    width: 100px;
    min-width: 90px;
    white-space: nowrap;
}

.vbcd-col-action[b-cmkhdaecsi] {
    width: 110px;
    min-width: 100px;
    white-space: nowrap;
}

/* ================= BUTTONS TRONG BẢNG / CARD ================= */
.vbcd-btn-file[b-cmkhdaecsi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 30px;
    min-width: 30px;
    padding: 0 0.6rem;
    border: 1px solid var(--vbcd-border);
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    background: rgba(255,255,255,0.9);
    color: var(--vbcd-navy-2);
    transition: all 0.15s ease;
}

    .vbcd-btn-file:hover[b-cmkhdaecsi] {
        transform: translateY(-1px);
        box-shadow: 0 6px 14px rgba(25,44,63,0.14);
    }

.vbcd-btn-file-outline[b-cmkhdaecsi] {
    border-color: var(--vbcd-navy);
    color: var(--vbcd-navy);
    background: transparent;
}

.vbcd-btn-view[b-cmkhdaecsi] {
    border-color: var(--vbcd-navy);
    color: var(--vbcd-navy);
}

.vbcd-btn-download[b-cmkhdaecsi],
.vbcd-btn-secondary[b-cmkhdaecsi] {
    border-color: var(--vbcd-orange);
    color: #a9660a;
}

.vbcd-btn-edit[b-cmkhdaecsi] {
    border-color: var(--vbcd-navy-3);
    color: var(--vbcd-navy-3);
}

.vbcd-btn-delete[b-cmkhdaecsi] {
    border-color: #dc2626;
    color: #b42318;
}

    .vbcd-btn-delete:hover[b-cmkhdaecsi] {
        background: rgba(220,38,38,0.08);
    }

.vbcd-btn-success[b-cmkhdaecsi] {
    background: linear-gradient(135deg, var(--vbcd-green), var(--vbcd-green-2));
    border: none;
    color: #ffffff;
    font-weight: 700;
    border-radius: 10px;
    padding: 0.5rem 1.2rem;
    cursor: pointer;
}

    .vbcd-btn-success:hover[b-cmkhdaecsi] {
        filter: brightness(1.05);
    }

/* ================= MOBILE CARD ================= */
.vbcd-card-mobile[b-cmkhdaecsi] {
    display: none;
}

.vbcd-card[b-cmkhdaecsi] {
    background: rgba(255,255,255,0.9);
    border: 1px solid var(--vbcd-border);
    border-radius: 14px;
    padding: 0.8rem 1rem;
    margin-bottom: 0.8rem;
    box-shadow: var(--vbcd-shadow);
}

.vbcd-card-head[b-cmkhdaecsi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
    color: var(--vbcd-navy-2);
}

.vbcd-card-date[b-cmkhdaecsi] {
    font-size: 0.76rem;
    color: var(--vbcd-text-muted);
}

.vbcd-card-body[b-cmkhdaecsi] {
    font-size: 0.84rem;
    color: var(--vbcd-text);
    line-height: 1.5;
}

.vbcd-card-trichyeu[b-cmkhdaecsi] {
    margin-top: 0.4rem;
    color: #445064;
}

.vbcd-card-footer[b-cmkhdaecsi] {
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ================= MODAL TÌM KIẾM ================= */
.vbcd-modal-overlay[b-cmkhdaecsi] {
    position: fixed;
    inset: 0;
    background: rgba(7, 27, 51, 0.55);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.vbcd-modal-content[b-cmkhdaecsi] {
    width: min(480px, 92vw);
    background: rgba(255,255,255,0.95);
    border: 1px solid var(--vbcd-border);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(7,27,51,0.35);
    padding: 1.2rem;
}

.vbcd-modal-header[b-cmkhdaecsi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

    .vbcd-modal-header h4[b-cmkhdaecsi] {
        margin: 0;
        color: var(--vbcd-navy-2);
        font-weight: 800;
        font-size: 1rem;
    }

.vbcd-modal-close[b-cmkhdaecsi] {
    border: none;
    background: transparent;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--vbcd-text-muted);
    cursor: pointer;
}

    .vbcd-modal-close:hover[b-cmkhdaecsi] {
        color: #b42318;
    }

.vbcd-grid-form[b-cmkhdaecsi] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

    .vbcd-grid-form label[b-cmkhdaecsi] {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--vbcd-navy-2);
        margin-bottom: -4px;
    }

/* ================= MODAL DANH SÁCH FILE (Bootstrap modal) ================= */
.vbcd-filelist-content[b-cmkhdaecsi] {
    border-radius: 14px;
    overflow: hidden;
    border: none;
}

.vbcd-filelist-header[b-cmkhdaecsi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.1rem;
    background: linear-gradient(135deg, var(--vbcd-navy-2), var(--vbcd-navy-3));
    color: #ffffff;
}

.vbcd-filelist-title[b-cmkhdaecsi] {
    margin: 0;
    font-weight: 700;
    font-size: 1rem;
}

.vbcd-filelist-body[b-cmkhdaecsi] {
    padding: 1rem 1.1rem;
}

.vbcd-file-item[b-cmkhdaecsi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed var(--vbcd-border);
}

    .vbcd-file-item:last-child[b-cmkhdaecsi] {
        border-bottom: none;
    }

.vbcd-file-name[b-cmkhdaecsi] {
    font-size: 0.82rem;
    color: var(--vbcd-text);
    max-width: 65%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vbcd-file-actions[b-cmkhdaecsi] {
    display: flex;
    gap: 6px;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 768px) {
    .vbcd-container[b-cmkhdaecsi] {
        padding: 0 0.7rem 1.5rem;
    }

    .vbcd-table-desktop[b-cmkhdaecsi] {
        display: none;
    }

    .vbcd-card-mobile[b-cmkhdaecsi] {
        display: block;
    }
}
/* _content/QuanTriTruongHoc.TKB/Components/Pages/VanBanChiDao/VanBanChiDaoThemMoi.razor.rz.scp.css */
/* _content/QuanTriTruongHoc.TKB/Components/Pages/VanBanDen/VanBanDenDanhSach.razor.rz.scp.css */
/* ======================================================
               🎨 DESIGN TOKENS
            ====================================================== */
    .vbd-container[b-paju58qrl5] {
        --vbd-navy: #1e3a5f;
        --vbd-blue: #2563eb;
        --vbd-blue-dark: #1d4ed8;
        --vbd-blue-light: #eff6ff;
        --vbd-border: #e5e7eb;
        --vbd-text: #1f2937;
        --vbd-text-muted: #6b7280;
        --vbd-success: #16a34a;
        --vbd-success-bg: #dcfce7;
        --vbd-warn: #b45309;
        --vbd-warn-bg: #fef3c7;
        --vbd-danger: #dc2626;
        width: 100%;
        max-width: 95vw;
        margin: 1.5rem auto;
        padding: 1.5rem 2rem;
        background: #f8f9fa;
        border-radius: 12px;
        box-shadow: 0 6px 20px rgba(0,0,0,0.08);
        color: var(--vbd-text);
    }

    .vbd-icon[b-paju58qrl5] {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

    .vbd-icon-success[b-paju58qrl5] {
        color: var(--vbd-success);
        width: 18px;
        height: 18px;
    }

    /* ======================================================
               🛠 TOOLBAR
            ====================================================== */
    .vbd-toolbar[b-paju58qrl5] {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
        margin-bottom: 1.5rem;
    }

    .btn-vanban-modern[b-paju58qrl5] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 38px;
        padding: 0 16px;
        border: none;
        border-radius: 8px;
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
        color: #fff;
        transition: filter 0.15s ease, transform 0.1s ease;
    }

        .btn-vanban-modern:hover[b-paju58qrl5] {
            filter: brightness(1.08);
            transform: translateY(-1px);
        }

    .btn-vanban-add[b-paju58qrl5] {
        background: var(--vbd-blue);
    }

    .btn-vanban-search[b-paju58qrl5] {
        background: var(--vbd-navy);
    }

    .btn-vanban-stats[b-paju58qrl5] {
        background: #0ea5e9;
    }

    .btn-vanban-refresh[b-paju58qrl5] {
        background: #64748b;
    }

    .btn-vanban-export[b-paju58qrl5] {
        background: #16a34a;
    }

    /* ======================================================
               📭 EMPTY STATE
            ====================================================== */
    .vbd-empty[b-paju58qrl5] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 2.5rem 1rem;
        color: var(--vbd-text-muted);
    }

    .vbd-empty-icon[b-paju58qrl5] {
        width: 48px;
        height: 48px;
        opacity: 0.5;
    }

    /* ======================================================
               📐 PAGE SIZE BAR
            ====================================================== */
    .vbd-pagesize-bar[b-paju58qrl5] {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        margin-bottom: 0.75rem;
        flex-wrap: wrap;
    }

    .vbd-pagesize-label[b-paju58qrl5] {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--vbd-navy);
    }

    .vbd-pagesize-select[b-paju58qrl5] {
        height: 34px;
        padding: 0 10px;
        border: 1px solid var(--vbd-border);
        border-radius: 6px;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--vbd-navy);
        background: #fff;
        cursor: pointer;
    }

        .vbd-pagesize-select:focus[b-paju58qrl5] {
            outline: none;
            border-color: var(--vbd-blue);
            box-shadow: 0 0 0 2px rgba(37,99,235,0.15);
        }

    /* ======================================================
               📊 TABLE WRAPPER
            ====================================================== */
    .vbd-table-wrap[b-paju58qrl5] {
        display: block !important;
    }

    .table-scroll-x[b-paju58qrl5] {
        width: 100%;
        overflow-x: auto;
    }

    /* ======================================================
               📋 TABLE
            ====================================================== */
    .tb-modern[b-paju58qrl5] {
        width: 100%;
        border-collapse: collapse;
        table-layout: auto;
        font-size: 0.72rem;
    }

        .tb-modern thead th[b-paju58qrl5] {
            background: var(--vbd-blue-light);
            border-bottom: 2px solid #93c5ff;
            color: var(--vbd-navy);
            text-align: center;
            vertical-align: middle;
            padding: 8px;
            font-weight: 700;
        }

        .tb-modern td[b-paju58qrl5] {
            padding: 8px;
            vertical-align: top;
        }

        .tb-modern th[b-paju58qrl5],
        .tb-modern td[b-paju58qrl5] {
            border: 1px solid var(--vbd-border);
        }

        /* Hàng 1 (thông tin chính) của mỗi văn bản */
        .tb-modern tbody tr.row-main:nth-of-type(4n+1)[b-paju58qrl5] {
            background: #fafafa;
        }

        .tb-modern tbody tr.row-main:hover[b-paju58qrl5] {
            background: #e0f2fe;
        }

            .tb-modern tbody tr.row-main:hover + tr.row-detail[b-paju58qrl5] {
                background: #e0f2fe;
            }

        /* Hàng 2 (chi tiết) gắn liền hàng 1, không viền trên để trông như 1 nhóm */
        .tb-modern tbody tr.row-detail td[b-paju58qrl5] {
            border-top: none;
            padding: 6px 8px 10px;
            background: #fcfdff;
        }

        .tb-modern tbody tr.row-detail:hover[b-paju58qrl5] {
            background: #e0f2fe;
        }

        /* Column widths cho hàng chính (7 cột) */
        .tb-modern thead th:nth-child(1)[b-paju58qrl5] {
            width: 10%;
        }

        .tb-modern thead th:nth-child(2)[b-paju58qrl5] {
            width: 8%;
        }

        .tb-modern thead th:nth-child(3)[b-paju58qrl5] {
            width: 15%;
        }

        .tb-modern thead th:nth-child(4)[b-paju58qrl5] {
            width: 12%;
        }

        .tb-modern thead th:nth-child(5)[b-paju58qrl5] {
            width: 35%;
            text-align: left;
        }

        .tb-modern thead th:nth-child(6)[b-paju58qrl5] {
            width: 8%;
        }

        .tb-modern thead th:nth-child(7)[b-paju58qrl5] {
            width: 6%;
            text-align: center;
        }

        .tb-modern tbody tr.row-main td:nth-child(5)[b-paju58qrl5] {
            text-align: left;
        }

    /* ======================================================
               📄 HÀNG CHI TIẾT (Tên tệp / Người xử lý / Thao tác)
            ====================================================== */
    .vbd-detail-bar[b-paju58qrl5] {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        align-items: flex-start;
    }

    .vbd-detail-block[b-paju58qrl5] {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
    }

    .vbd-detail-label[b-paju58qrl5] {
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: var(--vbd-text-muted);
    }

    .vbd-detail-value[b-paju58qrl5] {
        font-size: 0.78rem;
        color: var(--vbd-text);
    }

    .vbd-detail-empty[b-paju58qrl5] {
        font-size: 0.78rem;
        color: var(--vbd-text-muted);
        font-style: italic;
    }

    .vbd-detail-files[b-paju58qrl5] {
        flex: 2 1 320px;
    }

    .vbd-detail-actions[b-paju58qrl5] {
        flex: 0 0 auto;
    }

    .vbd-detail-files-list[b-paju58qrl5] {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .vbd-file-item[b-paju58qrl5] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
        border-bottom: 1px dashed #ddd;
        padding-bottom: 4px;
    }

        .vbd-file-item:last-child[b-paju58qrl5] {
            border-bottom: none;
            padding-bottom: 0;
        }

    .vbd-file-name[b-paju58qrl5] {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.78rem;
        word-break: break-word;
        line-height: 1.35;
        color: var(--vbd-text-muted);
    }

    .vbd-file-actions[b-paju58qrl5] {
        display: flex;
        gap: 6px;
        flex-shrink: 0;
    }

    .vbd-detail-actions-buttons[b-paju58qrl5] {
        display: flex;
        gap: 6px;
    }

    /* ======================================================
               🔘 ACTION BUTTONS (chung table + card)
            ====================================================== */
    .btn-vanban-file[b-paju58qrl5] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        height: 30px;
        padding: 0 10px;
        border: none;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 600;
        cursor: pointer;
        color: #fff;
        transition: filter 0.15s ease;
    }

        .btn-vanban-file:hover[b-paju58qrl5] {
            filter: brightness(1.1);
        }

    .btn-vanban-view[b-paju58qrl5] {
        background: var(--vbd-blue);
    }

    .btn-vanban-download[b-paju58qrl5] {
        background: #0ea5e9;
    }

    .btn-vanban-edit[b-paju58qrl5] {
        background: #f59e0b;
    }

    .btn-vanban-delete[b-paju58qrl5] {
        background: var(--vbd-danger);
    }

    /* ======================================================
               🪟 MODAL
            ====================================================== */
    .modal-overlay[b-paju58qrl5] {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.45);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1050;
        padding: 1rem;
    }

    .modal-content[b-paju58qrl5] {
        background: #fff;
        border-radius: 12px;
        padding: 2rem;
        max-width: 640px;
        width: 100%;
        max-height: 90vh;
        overflow-y: auto;
        box-shadow: 0 6px 20px rgba(0,0,0,0.2);
    }

    .modal-large[b-paju58qrl5] {
        max-width: 900px;
    }

    .modal-header[b-paju58qrl5] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: var(--vbd-blue-light);
        color: var(--vbd-navy);
        padding: 0.8rem 1rem;
        border-radius: 10px;
        margin-bottom: 1rem;
    }

        .modal-header h4[b-paju58qrl5] {
            margin: 0;
            font-size: 1.2rem;
        }

    .modal-close[b-paju58qrl5] {
        border: none;
        background: transparent;
        font-size: 1.5rem;
        cursor: pointer;
        color: var(--vbd-navy);
        line-height: 1;
    }

    .grid-form[b-paju58qrl5] {
        display: grid;
        grid-template-columns: 110px 1fr;
        gap: 10px 14px;
        align-items: center;
    }

        .grid-form label[b-paju58qrl5] {
            font-weight: 600;
            font-size: 0.85rem;
            color: var(--vbd-navy);
        }

    /* ======================================================
               📱 MOBILE CARDS (mặc định ẨN trên desktop)
            ====================================================== */
    .vbd-cards[b-paju58qrl5] {
        display: none !important;
    }

    .vb-card[b-paju58qrl5] {
        background: #fff;
        border: 1px solid var(--vbd-border);
        border-radius: 12px;
        padding: 14px 16px;
        margin-bottom: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }

    .vb-card-head[b-paju58qrl5] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
    }

    .vb-card-symbol[b-paju58qrl5] {
        font-weight: 700;
        font-size: 0.95rem;
        color: var(--vbd-navy);
    }

    .vb-badge[b-paju58qrl5] {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 0.7rem;
        font-weight: 700;
        padding: 3px 8px;
        border-radius: 999px;
        white-space: nowrap;
    }

    .vb-badge-done[b-paju58qrl5] {
        background: var(--vbd-success-bg);
        color: var(--vbd-success);
    }

    .vb-badge-pending[b-paju58qrl5] {
        background: var(--vbd-warn-bg);
        color: var(--vbd-warn);
    }

    .vb-card-trichyeu[b-paju58qrl5] {
        font-size: 0.88rem;
        line-height: 1.5;
        color: var(--vbd-text);
        background: #f9fafb;
        border-left: 3px solid var(--vbd-blue);
        padding: 8px 10px;
        border-radius: 6px;
        margin-bottom: 10px;
    }

    .vb-grid[b-paju58qrl5] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 12px;
        margin-bottom: 10px;
    }

    .vb-field[b-paju58qrl5] {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    .vb-field-full[b-paju58qrl5] {
        grid-column: 1 / -1;
    }

    .vb-label[b-paju58qrl5] {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: var(--vbd-text-muted);
    }

    .vb-value[b-paju58qrl5] {
        font-size: 0.85rem;
        color: var(--vbd-text);
        word-break: break-word;
    }

    .vb-files[b-paju58qrl5] {
        border-top: 1px dashed var(--vbd-border);
        padding-top: 8px;
        margin-bottom: 8px;
    }

    .vb-file-row[b-paju58qrl5] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        padding: 6px 0;
    }

        .vb-file-row + .vb-file-row[b-paju58qrl5] {
            border-top: 1px dashed var(--vbd-border);
        }

    .vb-file-name[b-paju58qrl5] {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.8rem;
        color: var(--vbd-text-muted);
        word-break: break-all;
        flex: 1;
        min-width: 60%;
    }

    .vb-file-actions[b-paju58qrl5] {
        display: flex;
        gap: 6px;
        flex-shrink: 0;
    }

    .vb-card-footer[b-paju58qrl5] {
        display: flex;
        gap: 8px;
        padding-top: 8px;
        border-top: 1px dashed var(--vbd-border);
    }

        .vb-card-footer .btn-vanban-file[b-paju58qrl5] {
            flex: 1;
            height: 36px;
        }

    /* ======================================================
               📍 PAGINATION
            ====================================================== */
    .vbd-pagination .btn-vbd-pagenum-active[b-paju58qrl5] {
        background: var(--vbd-blue);
        color: #fff;
        border: 1px solid var(--vbd-blue);
    }

    .vb-detail-card[b-paju58qrl5] {
    margin-top:20px;
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    border:1px solid #dbeafe;
    box-shadow:0 4px 15px rgba(0,0,0,.08);
}

.vb-detail-header[b-paju58qrl5] {
    padding:12px 18px;
    background:#eff6ff;
    font-weight:700;
    color:#1e3a5f;
}

.vb-detail-grid[b-paju58qrl5] {
    padding:18px;
    display:grid;
    grid-template-columns:
        repeat(auto-fit,minmax(250px,1fr));
    gap:15px;
}

.vb-detail-grid label[b-paju58qrl5] {
    display:block;
    font-size:.75rem;
    color:#6b7280;
    margin-bottom:4px;
}

.vb-detail-grid span[b-paju58qrl5] {
    font-weight:600;
}

.vb-detail-full[b-paju58qrl5] {
    grid-column:1/-1;
}

.vb-workspace[b-paju58qrl5]{
    display:flex;
    gap:16px;
    margin-top:20px;
    height:900px;
}

.vb-sidebar[b-paju58qrl5]{
    width:30%;
    min-width:320px;

    display:flex;
    flex-direction:column;
    gap:16px;
}

.vb-viewer[b-paju58qrl5]{
    width:70%;
    background:#fff;

    border-radius:12px;
    overflow:hidden;

    border:1px solid #dbeafe;

    box-shadow:0 4px 16px rgba(0,0,0,.08);
}

.vb-panel[b-paju58qrl5]{
    background:#fff;
    border-radius:12px;
    overflow:hidden;

    border:1px solid #dbeafe;

    box-shadow:0 2px 10px rgba(0,0,0,.05);
}

.vb-panel-header[b-paju58qrl5]{
    padding:12px 16px;

    background:#eff6ff;

    color:#1e3a5f;

    font-weight:700;
}
.vb-info[b-paju58qrl5]{
    padding:16px;
}

.vb-info-item[b-paju58qrl5]{
    margin-bottom:12px;
}

.vb-info-item label[b-paju58qrl5]{
    display:block;
    font-size:.72rem;

    color:#6b7280;

    margin-bottom:2px;

    text-transform:uppercase;
}

.vb-info-item span[b-paju58qrl5]{
    font-weight:600;
}

.vb-file-card[b-paju58qrl5]{
    margin:10px;

    padding:12px;

    border-radius:8px;

    background:#f8fafc;

    border:1px solid #e5e7eb;
}

.vb-file-name[b-paju58qrl5]{
    font-size:.85rem;
    font-weight:600;

    margin-bottom:8px;

    word-break:break-word;
}

.vb-file-actions[b-paju58qrl5]{
    display:flex;
    gap:8px;
}

.vb-viewer-frame[b-paju58qrl5]{
    width:100%;
    height:100%;
    border:none;
    display:block;
}

@media(max-width:1200px){

    .vb-workspace[b-paju58qrl5]{
        flex-direction:column;
        height:auto;
    }

    .vb-sidebar[b-paju58qrl5]{
        width:100%;
        min-width:unset;
    }

    .vb-viewer[b-paju58qrl5]{
        width:100%;
        height:700px;
    }
}
    /* ======================================================
               📱 RESPONSIVE BREAKPOINT
            ====================================================== */
    @media (max-width: 768px) {
        .vbd-container[b-paju58qrl5] {
            padding: 1rem;
            max-width: 100vw;
        }

        .vbd-table-wrap[b-paju58qrl5],
        .vbd-table-wrap .table-scroll-x[b-paju58qrl5],
        .vbd-table-wrap .tb-modern[b-paju58qrl5] {
            display: none !important;
        }

        .vbd-cards[b-paju58qrl5] {
            display: block !important;
        }

        .vbd-pagesize-bar[b-paju58qrl5] {
            justify-content: center;
        }

        .vbd-toolbar[b-paju58qrl5] {
            gap: 8px;
        }

        .btn-vanban-modern[b-paju58qrl5] {
            flex: 1 1 calc(50% - 8px);
            justify-content: center;
        }

        .vb-grid[b-paju58qrl5] {
            grid-template-columns: 1fr 1fr;
        }

        .modal-content[b-paju58qrl5] {
            padding: 1.25rem;
        }

        .grid-form[b-paju58qrl5] {
            grid-template-columns: 1fr;
            gap: 4px 0;
        }

            .grid-form label[b-paju58qrl5] {
                margin-top: 6px;
            }
    }

    @media (max-width: 420px) {
        .btn-vanban-modern[b-paju58qrl5] {
            flex: 1 1 100%;
        }

        .vb-grid[b-paju58qrl5] {
            grid-template-columns: 1fr 1fr;
        }
    }

/* Bổ sung viền bảng rõ hơn, giữ nguyên style hiện có. */
.tb-modern[b-paju58qrl5] {
    border-collapse: collapse;
    border: 1px solid #9aa9b8;
}

.tb-modern th[b-paju58qrl5],
.tb-modern td[b-paju58qrl5] {
    border: 1px solid #9aa9b8 !important;
}

.tb-modern thead th[b-paju58qrl5] {
    border-color: #7f93aa !important;
    border-bottom: 2px solid #647b96 !important;
}

.tb-modern tbody tr[b-paju58qrl5] {
    border-bottom: 1px solid #9aa9b8;
}
/* _content/QuanTriTruongHoc.TKB/Components/Pages/VanBanDen/VanBanDenThemMoi.razor.rz.scp.css */
/* _content/QuanTriTruongHoc.TKB/Components/Pages/VanBanDi/VanBanDiHoSoPanel.razor.rz.scp.css */
.vbd-container[b-qh8cx61voc] {
    --vbd-navy: #0b2545;
    --vbd-navy-2: #071b33;
    --vbd-navy-3: #102f55;
    --vbd-orange: #f59e0b;
    --vbd-orange-2: #ffb020;
    --vbd-green: #10b981;
    --vbd-green-2: #16a34a;
    --vbd-bg: #f6f8fb;
    --vbd-bg-2: #eef3f8;
    --vbd-border: rgba(15, 40, 70, 0.12);
    --vbd-shadow: 0 14px 32px rgba(7, 27, 51, 0.10);
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    background: transparent;
}

/* ================= TOOLBAR ================= */
.vbd-toolbar[b-qh8cx61voc] {
    justify-content: flex-start;
}

.vbd-btn[b-qh8cx61voc] {
    border: 1px solid var(--vbd-border);
    border-radius: 10px;
    padding: 8px 16px;
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--vbd-navy-2);
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 0 6px 14px rgba(25, 44, 63, 0.08);
    backdrop-filter: blur(6px);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
}

    .vbd-btn:hover[b-qh8cx61voc] {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(25, 44, 63, 0.14);
    }

.vbd-btn-add[b-qh8cx61voc] {
    border-color: var(--vbd-green);
    color: var(--vbd-green-2);
}

    .vbd-btn-add:hover[b-qh8cx61voc] {
        background: rgba(16, 185, 129, 0.10);
    }

.vbd-btn-search[b-qh8cx61voc] {
    border-color: var(--vbd-orange);
    color: #a9660a;
}

    .vbd-btn-search:hover[b-qh8cx61voc] {
        background: rgba(245, 158, 11, 0.10);
    }

.vbd-btn-refresh[b-qh8cx61voc] {
    border-color: var(--vbd-navy);
    color: var(--vbd-navy);
}

    .vbd-btn-refresh:hover[b-qh8cx61voc] {
        background: rgba(11, 37, 69, 0.06);
    }

/* ================= ALERTS ================= */
.vbd-alert[b-qh8cx61voc] {
    border-radius: 12px;
    border: 1px solid var(--vbd-border);
    backdrop-filter: blur(6px);
    font-size: 0.9rem;
}

.vbd-alert-info[b-qh8cx61voc] {
    background: rgba(16, 47, 85, 0.06);
    color: var(--vbd-navy-2);
}

.vbd-alert-success[b-qh8cx61voc] {
    background: rgba(16, 185, 129, 0.10);
    color: var(--vbd-green-2);
    border-color: var(--vbd-green);
}

.vbd-alert-danger[b-qh8cx61voc] {
    background: rgba(239, 68, 68, 0.08);
    color: #b42318;
    border-color: rgba(239, 68, 68, 0.35);
}

.vbd-empty[b-qh8cx61voc] {
    padding: 24px 0;
}

/* ================= TABLE ================= */
.vbd-table-scroll[b-qh8cx61voc] {
    width: 100%;
    overflow-x: auto;
    border-radius: 14px;
    border: 1px solid var(--vbd-border);
    box-shadow: var(--vbd-shadow);
}

.vbd-table[b-qh8cx61voc] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.72rem;
    background: #ffffff;
    table-layout: fixed;
}

    .vbd-table th[b-qh8cx61voc],
    .vbd-table td[b-qh8cx61voc] {
        padding: 0.4rem 0.34rem;
        border: 1px solid var(--vbd-border);
        vertical-align: middle;
        text-align: center;
    }

.vbd-thead th[b-qh8cx61voc] {
    background: linear-gradient(135deg, var(--vbd-navy-2), var(--vbd-navy-3));
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.005em;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
}

.vbd-table tbody tr:hover[b-qh8cx61voc] {
    background: rgba(16, 185, 129, 0.06);
}

.vbd-col-action[b-qh8cx61voc] {
    width: 7%;
}

.vbd-action-buttons[b-qh8cx61voc] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
}

.vbd-table th:nth-child(1)[b-qh8cx61voc],
.vbd-table td:nth-child(1)[b-qh8cx61voc] {
    width: 8%;
}

.vbd-table th:nth-child(2)[b-qh8cx61voc],
.vbd-table td:nth-child(2)[b-qh8cx61voc] {
    width: 7%;
}

.vbd-table th:nth-child(3)[b-qh8cx61voc],
.vbd-table td:nth-child(3)[b-qh8cx61voc] {
    width: 19%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.35;
}

.vbd-table th:nth-child(4)[b-qh8cx61voc],
.vbd-table td:nth-child(4)[b-qh8cx61voc] {
    width: 9%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.vbd-table th:nth-child(5)[b-qh8cx61voc],
.vbd-table td:nth-child(5)[b-qh8cx61voc],
.vbd-table th:nth-child(6)[b-qh8cx61voc],
.vbd-table td:nth-child(6)[b-qh8cx61voc] {
    width: 11%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.vbd-table th:nth-child(7)[b-qh8cx61voc],
.vbd-table td:nth-child(7)[b-qh8cx61voc] {
    width: 21%;
}

.vbd-table th:nth-child(8)[b-qh8cx61voc],
.vbd-table td:nth-child(8)[b-qh8cx61voc],
.vbd-table th:nth-child(9)[b-qh8cx61voc],
.vbd-table td:nth-child(9)[b-qh8cx61voc] {
    width: 7%;
}

.vbd-col-file-name[b-qh8cx61voc] {
    vertical-align: middle;
    width: 21%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.vbd-col-file-action[b-qh8cx61voc] {
    vertical-align: middle;
    width: 7%;
}

.vbd-file-row-name[b-qh8cx61voc],
.vbd-file-row-action[b-qh8cx61voc] {
    min-height: 64px;
    display: flex;
    align-items: center;
    border-bottom: 1px dashed var(--vbd-border);
    padding: 4px 0;
}

.vbd-file-row-name[b-qh8cx61voc] {
    justify-content: flex-start;
    font-size: 0.72rem;
    line-height: 1.28;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.vbd-file-row-action[b-qh8cx61voc] {
    display: grid;
    grid-template-columns: repeat(2, 28px);
    justify-content: center;
    align-content: center;
    gap: 4px;
}

.vbd-file-row-action .vbd-btn-sign[b-qh8cx61voc] {
    grid-column: 1 / -1;
    justify-self: center;
    width: 28px;
    height: 28px;
}

.vbd-file-edit-actions[b-qh8cx61voc] {
    grid-template-columns: repeat(2, 28px);
}

.vbd-btn-file[b-qh8cx61voc],
.vbd-btn-action[b-qh8cx61voc] {
    border: 1px solid var(--vbd-border);
    border-radius: 7px;
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 0;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.9);
    color: var(--vbd-navy-2);
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .vbd-btn-file:hover[b-qh8cx61voc],
    .vbd-btn-action:hover[b-qh8cx61voc] {
        transform: translateY(-1px);
        box-shadow: 0 6px 14px rgba(25, 44, 63, 0.12);
    }

.vbd-btn-view[b-qh8cx61voc] {
    border-color: var(--vbd-navy);
    color: var(--vbd-navy);
}

.vbd-btn-file i[b-qh8cx61voc] {
    font-size: 0.95rem;
    line-height: 1;
}

.vbd-btn-download[b-qh8cx61voc] {
    border-color: var(--vbd-orange);
    color: #a9660a;
}

.vbd-btn-action i[b-qh8cx61voc] {
    font-size: 0.95rem;
    line-height: 1;
}

.vbd-btn-edit[b-qh8cx61voc] {
    border-color: var(--vbd-navy-3);
    color: var(--vbd-navy-3);
}

.vbd-btn-delete[b-qh8cx61voc] {
    border-color: #dc2626;
    color: #b42318;
}

    .vbd-btn-delete:hover[b-qh8cx61voc] {
        background: rgba(220, 38, 38, 0.08);
    }

/* Nút Ký số - thêm theme riêng, không đụng .btn-success toàn cục */
.vbd-btn-sign[b-qh8cx61voc] {
    background: linear-gradient(135deg, var(--vbd-green), var(--vbd-green-2)) !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 14px rgba(16, 185, 129, 0.28);
    font-weight: 700;
    width: 34px;
    height: 32px;
    padding: 0 !important;
    font-size: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

    .vbd-btn-sign i[b-qh8cx61voc] {
        font-size: 0.95rem;
        margin: 0 !important;
    }

    .vbd-btn-sign:disabled[b-qh8cx61voc] {
        background: #cbd5e1 !important;
        box-shadow: none;
        opacity: 0.7;
    }

/* ================= MOBILE / DESKTOP TOGGLE ================= */
.vbd-mobile[b-qh8cx61voc] {
    display: none;
}

/* ================= MOBILE CARD ================= */
.vbd-card[b-qh8cx61voc] {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--vbd-border);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 12px;
    box-shadow: var(--vbd-shadow);
    backdrop-filter: blur(6px);
    font-size: 0.9rem;
}

.vbd-row[b-qh8cx61voc] {
    margin-bottom: 6px;
    line-height: 1.45;
    color: #24364a;
}

.vbd-actions[b-qh8cx61voc] {
    margin-top: 10px;
    display: grid;
    gap: 8px;
}

.vbd-mobile-file[b-qh8cx61voc] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    border-top: 1px dashed var(--vbd-border);
}

.vbd-mobile-file:first-child[b-qh8cx61voc] {
    border-top: 0;
}

.vbd-mobile-file-name[b-qh8cx61voc] {
    min-width: 0;
    color: #334155;
    font-size: 0.82rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.vbd-mobile-file-actions[b-qh8cx61voc] {
    display: grid;
    grid-template-columns: repeat(5, 38px);
    gap: 6px;
    justify-content: end;
}

/* ================= MODAL ================= */
.vbd-modal-overlay[b-qh8cx61voc] {
    position: fixed;
    inset: 0;
    background: rgba(7, 27, 51, 0.55);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.vbd-modal-content[b-qh8cx61voc] {
    width: min(560px, 92vw);
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--vbd-border);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(7, 27, 51, 0.35);
    backdrop-filter: blur(10px);
    padding: 20px;
}

.vbd-modal-header[b-qh8cx61voc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

    .vbd-modal-header h4[b-qh8cx61voc] {
        margin: 0;
        color: var(--vbd-navy-2);
        font-weight: 800;
        font-size: 1rem;
    }

.vbd-modal-close[b-qh8cx61voc] {
    border: none;
    background: transparent;
    font-size: 1.4rem;
    line-height: 1;
    color: #68788a;
    cursor: pointer;
}

    .vbd-modal-close:hover[b-qh8cx61voc] {
        color: #b42318;
    }

.vbd-grid-form[b-qh8cx61voc] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

    .vbd-grid-form label[b-qh8cx61voc] {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--vbd-navy-2);
        margin-bottom: -4px;
    }

.vbd-btn-success[b-qh8cx61voc] {
    background: linear-gradient(135deg, var(--vbd-green), var(--vbd-green-2));
    border: none;
    color: #ffffff;
    font-weight: 700;
    border-radius: 10px;
}

    .vbd-btn-success:hover[b-qh8cx61voc] {
        filter: brightness(1.05);
    }

/* ================= RESPONSIVE ================= */
@media (max-width: 1024px) {
    .vbd-table[b-qh8cx61voc] {
        font-size: 0.72rem;
    }

        .vbd-table th[b-qh8cx61voc],
        .vbd-table td[b-qh8cx61voc] {
            padding: 0.4rem;
        }
}

@media (max-width: 768px) {
    .vbd-container[b-qh8cx61voc] {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .vbd-toolbar[b-qh8cx61voc] {
        gap: 8px !important;
    }

    .vbd-btn[b-qh8cx61voc] {
        flex: 1 1 130px;
        padding: 9px 10px;
    }

    .vbd-table-scroll[b-qh8cx61voc],
    .vbd-table[b-qh8cx61voc] {
        display: none !important;
    }

    .vbd-mobile[b-qh8cx61voc] {
        display: block !important;
        width: 100%;
    }

    .vbd-card[b-qh8cx61voc] {
        padding: 12px;
        border-radius: 12px;
    }

    .vbd-row[b-qh8cx61voc] {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

@media (max-width: 420px) {
    .vbd-mobile-file[b-qh8cx61voc] {
        grid-template-columns: 1fr;
    }

    .vbd-mobile-file-actions[b-qh8cx61voc] {
        justify-content: start;
    }
}

/* ================= DANH SÁCH VĂN BẢN ĐI ================= */




.tb-modern[b-qh8cx61voc] {
    border-collapse: collapse;
    border: 1px solid #9aa9b8;
}

.tb-modern th[b-qh8cx61voc],
.tb-modern td[b-qh8cx61voc] {
    border: 1px solid #9aa9b8 !important;
}

.tb-modern thead th[b-qh8cx61voc] {
    border-color: #7f93aa !important;
    border-bottom: 2px solid #647b96 !important;
}

.tb-modern tbody tr[b-qh8cx61voc] {
    border-bottom: 1px solid #9aa9b8;
}

.file-row-name[b-qh8cx61voc],
.file-row-action[b-qh8cx61voc] {
    border-bottom-color: #aeb9c5;
}

/* ================= THÊM MỚI VĂN BẢN ĐI ================= */




.vbd-form-container[b-qh8cx61voc] {
    --vbdf-navy: #0b2545;
    --vbdf-navy-2: #071b33;
    --vbdf-navy-3: #102f55;
    --vbdf-orange: #f59e0b;
    --vbdf-orange-2: #ffb020;
    --vbdf-green: #16a34a;
    --vbdf-green-2: #10b981;
    --vbdf-border: rgba(15, 40, 70, 0.14);
    --vbdf-shadow: 0 14px 32px rgba(7, 27, 51, 0.10);
    --vbdf-text: #1c2b3f;
    --vbdf-bg: #f6f8fb;
    max-width: 1100px;
    margin: 1.5rem auto;
    padding: 1.5rem;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid var(--vbdf-border);
    box-shadow: var(--vbdf-shadow);
    color: var(--vbdf-text);
}

/* ================= VALIDATION ================= */
.vbd-form-validation[b-qh8cx61voc] {
    color: #b42318;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

    .vbd-form-validation[b-qh8cx61voc]  ul {
        margin: 0;
        padding-left: 1.2rem;
    }

/* ================= LABEL / INPUT ================= */
.vbd-form-label[b-qh8cx61voc] {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--vbdf-navy);
    margin-bottom: 4px;
}

.vbd-form-input[b-qh8cx61voc] {
    border: 1px solid var(--vbdf-border);
    border-radius: 8px;
    padding: 0.5rem 0.7rem;
    font-size: 0.88rem;
    color: var(--vbdf-text);
    background: #fbfcfe;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .vbd-form-input:focus[b-qh8cx61voc] {
        outline: none;
        border-color: var(--vbdf-orange);
        box-shadow: 0 0 0 3px rgba(245,158,11,0.15);
        background: #ffffff;
    }

.vbd-form-textarea[b-qh8cx61voc] {
    min-height: 90px;
    resize: vertical;
}

.vbd-form-file[b-qh8cx61voc] {
    padding: 0.45rem 0.6rem;
    cursor: pointer;
}

/* ================= FILE LIST ================= */
.vbd-form-filelist[b-qh8cx61voc] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vbd-form-fileitem[b-qh8cx61voc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--vbdf-border);
    border-radius: 8px;
    background: var(--vbdf-bg);
    font-size: 0.85rem;
}

.vbd-form-filename[b-qh8cx61voc] {
    word-break: break-word;
    color: var(--vbdf-text);
}

.vbd-form-btn-remove[b-qh8cx61voc] {
    border: 1px solid rgba(220,38,38,0.35);
    background: rgba(220,38,38,0.06);
    color: #b42318;
    font-size: 0.76rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

    .vbd-form-btn-remove:hover[b-qh8cx61voc] {
        background: rgba(220,38,38,0.14);
        transform: translateY(-1px);
    }

/* ================= ACTIONS (Lưu / Trở về) ================= */
.vbd-form-actions[b-qh8cx61voc] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--vbdf-border);
}

.vbd-form-btn[b-qh8cx61voc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 20px;
    border: none;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

    .vbd-form-btn:hover[b-qh8cx61voc] {
        transform: translateY(-2px);
    }

.vbd-form-btn-save[b-qh8cx61voc] {
    background: linear-gradient(135deg, var(--vbdf-green), var(--vbdf-green-2));
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(16,163,74,0.28);
}

    .vbd-form-btn-save:hover[b-qh8cx61voc] {
        filter: brightness(1.05);
    }

.vbd-form-btn-back[b-qh8cx61voc] {
    background: rgba(255,255,255,0.9);
    border: 1px solid var(--vbdf-border);
    color: var(--vbdf-navy);
}

    .vbd-form-btn-back:hover[b-qh8cx61voc] {
        background: rgba(245,158,11,0.10);
        border-color: var(--vbdf-orange);
    }

/* ================= RESPONSIVE (MOBILE) ================= */
@media (max-width: 768px) {
    .vbd-form-container[b-qh8cx61voc] {
        margin: 0.8rem auto;
        padding: 1rem;
        border-radius: 12px;
    }

    .vbd-form-header[b-qh8cx61voc] {
        padding: 12px 14px;
        margin-bottom: 1rem;
    }

    .vbd-form-title[b-qh8cx61voc] {
        font-size: 1rem;
    }

    .row > .col-md-4[b-qh8cx61voc],
    .row > .col-md-6[b-qh8cx61voc],
    .row > .col-md-8[b-qh8cx61voc],
    .row > .col-md-12[b-qh8cx61voc] {
        margin-bottom: 0.8rem !important;
    }

    .vbd-form-fileitem[b-qh8cx61voc] {
        flex-wrap: wrap;
    }

    .vbd-form-actions[b-qh8cx61voc] {
        flex-direction: column-reverse;
        gap: 8px;
    }

    .vbd-form-btn[b-qh8cx61voc] {
        width: 100%;
        justify-content: center;
    }
}

/* ================= CHỈNH SỬA VĂN BẢN ĐI ================= */




.grid-form[b-qh8cx61voc] {
        display: grid;
        grid-template-columns: 200px 1fr 200px 1fr;
        gap: 12px;
    }

/* ================= CSS TRƯỚC ĐÂY NHÚNG TRONG PANEL ================= */




.header-vanban[b-qh8cx61voc] {
        background-color: #e8f5e9;
        border: 4px ridge #ffa726;
        border-radius: 10px;
        padding: 10px 12px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        margin: 0 auto;
        text-align: center;
    }

    .header-vanban-title[b-qh8cx61voc] {
        font-size: 1.4rem;
        font-weight: 700;
        letter-spacing: 0.3px;
        margin: 0;
        line-height: 1.25;
    }

    .btn-vanban-modern[b-qh8cx61voc] {
        background: linear-gradient(145deg, #e0f0ff, #cfe2ff);
        color: #1e3a8a;
        font-weight: 600;
        font-size: 0.8rem;
        padding: 0.5rem 1rem;
        border-radius: 10px;
        border: none;
        cursor: pointer;
        box-shadow: 2px 2px 6px rgba(0,0,0,0.12), -2px -2px 6px rgba(255,255,255,0.5);
        transition: all 0.2s ease;
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

        .btn-vanban-modern:hover[b-qh8cx61voc] {
            background: linear-gradient(145deg, #eff6ff, #dbeafe);
            transform: translateY(-2px);
            box-shadow: 4px 4px 12px rgba(0,0,0,0.15), -2px -2px 8px rgba(255,255,255,0.6);
        }

    .btn-vanban-add[b-qh8cx61voc] {
        background: linear-gradient(145deg, #bbf7d0, #dcfce7);
        color: #166534;
    }

    .btn-vanban-search[b-qh8cx61voc] {
        background: linear-gradient(145deg, #bfdbfe, #dbeafe);
        color: #1d4ed8;
    }

    .btn-vanban-stats[b-qh8cx61voc] {
        background: linear-gradient(145deg, #fde68a, #fef3c7);
        color: #92400e;
    }

    .btn-vanban-refresh[b-qh8cx61voc] {
        background: linear-gradient(145deg, #fecaca, #fee2e2);
        color: #b91c1c;
    }

    .btn-vanban-file[b-qh8cx61voc] {
        padding: 0 0.6rem;
        height: 30px;
        min-width: 30px;
        font-size: 0.72rem;
        font-weight: 600;
        border-radius: 7px;
        border: none;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 1px 1px 4px rgba(0,0,0,0.1);
        transition: 0.2s ease;
        gap: 4px;
    }

        .btn-vanban-file:hover[b-qh8cx61voc] {
            transform: translateY(-1px);
            box-shadow: 2px 2px 6px rgba(0,0,0,0.18);
        }

    .btn-vanban-view[b-qh8cx61voc] {
        background: #93c5fd;
        color: #1e3a8a;
    }

    .btn-vanban-download[b-qh8cx61voc] {
        background: #a5f3fc;
        color: #155e75;
    }

    .btn-vanban-edit[b-qh8cx61voc] {
        background: #fde68a;
        color: #92400e;
    }

    .btn-vanban-delete[b-qh8cx61voc] {
        background: #fca5a5;
        color: #fff;
    }

    .custom-checkbox label[b-qh8cx61voc] {
        display: flex;
        align-items: center;
        cursor: pointer;
        gap: 10px;
        font-weight: 500;
    }

    .custom-checkbox input[type="checkbox"][b-qh8cx61voc] {
        display: none;
    }

    .custom-checkbox .checkmark[b-qh8cx61voc] {
        width: 22px;
        height: 22px;
        border: 2px solid #4CAF50;
        border-radius: 6px;
        display: inline-block;
        position: relative;
        transition: all 0.2s ease;
    }

    .custom-checkbox input:checked + .checkmark[b-qh8cx61voc] {
        background-color: #4CAF50;
        border-color: #4CAF50;
    }

    .custom-checkbox .checkmark[b-qh8cx61voc]::after {
        content: "";
        position: absolute;
        left: 6px;
        top: 2px;
        width: 6px;
        height: 12px;
        border: solid white;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
        opacity: 0;
    }

    .custom-checkbox input:checked + .checkmark[b-qh8cx61voc]::after {
        opacity: 1;
    }

    .custom-checkbox label:hover .checkmark[b-qh8cx61voc] {
        box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
    }

    .file-item[b-qh8cx61voc] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 0;
        border-bottom: 1px solid #eee;
    }

    .file-name[b-qh8cx61voc] {
        font-size: 0.8rem;
        color: #333;
        max-width: 70%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ===== CỘT TỆP ===== */
    .tb-modern th:nth-child(6)[b-qh8cx61voc],
    .tb-modern td:nth-child(6)[b-qh8cx61voc] {
        width: 90px;
        min-width: 90px;
        max-width: 100px;
        text-align: center;
        white-space: nowrap;
    }

        .tb-modern td:nth-child(6) button[b-qh8cx61voc] {
            padding: 0.2rem 0.35rem;
            font-size: 0.7rem;
        }

    /* tránh xuống dòng lung tung */
    .tb-modern td:nth-child(6)[b-qh8cx61voc] {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 2px;
    }

    /* ===== CONTAINER ===== */
    .container-vanbanchidao[b-qh8cx61voc] {
        max-width: 1100px;
        margin: 1.5rem auto;
        padding: 1.2rem;
        background: #f4f6f9;
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    }

    .file-actions[b-qh8cx61voc] {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 3px;
    }

    /* ===== TABLE ===== */
    .table-desktop[b-qh8cx61voc] {
        display: block;
    }

    .table-scroll-x[b-qh8cx61voc] {
        overflow-x: auto;
    }

    .tb-modern[b-qh8cx61voc] {
        width: 100%;
        border-collapse: collapse;
        background: #fff;
    }

        /* header */
        .tb-modern th[b-qh8cx61voc] {
            background: #1976d2;
            color: #fff;
            font-weight: 500;
            font-size: 0.82rem;
            padding: 0.45rem;
            text-align: center;
        }

        /* cell */
        .tb-modern td[b-qh8cx61voc] {
            font-size: 0.78rem;
            padding: 0.4rem;
            border: 1px solid #e0e0e0;
        }

        /* hover */
        .tb-modern tbody tr:hover[b-qh8cx61voc] {
            background: #f1f7ff;
        }

        /* trích yếu */
        .tb-modern td:nth-child(4)[b-qh8cx61voc] {
            max-width: 260px;
            line-height: 1.3;
            color: #333;
        }

    /* ===== MOBILE CARD ===== */
    .card-mobile[b-qh8cx61voc] {
        display: none;
    }

    .vb-card[b-qh8cx61voc] {
        background: #ffffff;
        border-radius: 10px;
        padding: 0.7rem;
        margin-bottom: 0.7rem;
        border: 1px solid #e0e0e0;
    }

    .vb-header[b-qh8cx61voc] {
        display: flex;
        justify-content: space-between;
        font-size: 0.85rem;
        margin-bottom: 0.3rem;
        color: #0d47a1;
    }

        .vb-header .date[b-qh8cx61voc] {
            font-size: 0.75rem;
            color: #607d8b;
        }

    .vb-body[b-qh8cx61voc] {
        font-size: 0.8rem;
        color: #333;
    }

    .trichyeu[b-qh8cx61voc] {
        margin-top: 0.3rem;
        color: #444;
    }

    .vb-footer[b-qh8cx61voc] {
        margin-top: 0.4rem;
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }


    /* ===== MODAL ===== */
    .modal-overlay[b-qh8cx61voc] {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.4);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .modal-content[b-qh8cx61voc] {
        background: #fff;
        border-radius: 8px;
        padding: 1.2rem;
        width: 100%;
        max-width: 450px;
    }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 768px) {
        .table-desktop[b-qh8cx61voc] {
            display: none;
        }

        .card-mobile[b-qh8cx61voc] {
            display: block;
        }

        .container-vanbanchidao[b-qh8cx61voc] {
            padding: 0.8rem;
        }
    }

    /* ======================================================
       THANH CÔNG CỤ
    ====================================================== */
    .vbd-toolbar[b-qh8cx61voc] {
        align-items: center;
    }

    /* Nút dùng chung */
    .vbd-action-btn[b-qh8cx61voc] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        min-height: 42px;
        padding: 0.65rem 1.1rem;
        border: 1px solid transparent;
        border-radius: 10px;
        font-size: 0.9rem;
        font-weight: 600;
        line-height: 1;
        color: #ffffff;
        cursor: pointer;
        user-select: none;
        box-shadow: 0 4px 10px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.2);
        transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
    }

        .vbd-action-btn i[b-qh8cx61voc] {
            font-size: 1rem;
            line-height: 1;
        }

        .vbd-action-btn:hover[b-qh8cx61voc] {
            transform: translateY(-2px);
            filter: brightness(1.04);
            box-shadow: 0 7px 16px rgba(15, 23, 42, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.25);
        }

        .vbd-action-btn:active[b-qh8cx61voc] {
            transform: translateY(0);
            box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18), inset 0 2px 4px rgba(0, 0, 0, 0.12);
        }

        .vbd-action-btn:focus-visible[b-qh8cx61voc] {
            outline: 3px solid rgba(59, 130, 246, 0.3);
            outline-offset: 2px;
        }

        .vbd-action-btn:disabled[b-qh8cx61voc] {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

    /* Thêm mới */
    .vbd-action-btn--add[b-qh8cx61voc] {
        background: linear-gradient(135deg, #16a34a, #22c55e);
        border-color: #15803d;
    }

    /* Tìm kiếm */
    .vbd-action-btn--search[b-qh8cx61voc] {
        background: linear-gradient(135deg, #2563eb, #3b82f6);
        border-color: #1d4ed8;
    }

    /* Làm mới */
    .vbd-action-btn--refresh[b-qh8cx61voc] {
        background: linear-gradient(135deg, #ea580c, #f97316);
        border-color: #c2410c;
    }

    /* Mobile */
    @media (max-width: 576px) {
        .vbd-toolbar[b-qh8cx61voc]

    {
        gap: 0.6rem !important;
    }

    .vbd-action-btn[b-qh8cx61voc] {
        flex: 1 1 calc(50% - 0.6rem);
        padding: 0.65rem 0.8rem;
    }

    }