:root {
    --app-navy: #10283f;
    --app-blue: #2563eb;
    --tblr-primary: #2563eb;
    --tblr-body-bg: #f4f6fa;
    --tblr-font-sans-serif: "Segoe UI", system-ui, -apple-system, sans-serif;
}

body { color: #24364a; }
.container-xl { max-width: none; }
a { text-underline-offset: 3px; }
.brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; font-size: 23px; font-weight: 750; letter-spacing: -.6px; }
.brand:hover { color: #fff; }
.brand-light { font-weight: 400; }
.brand small { display: block; margin-top: 5px; color: #9eb6ce; font-size: 9px; letter-spacing: 2px; font-weight: 500; }
.brand-symbol { display: grid; place-items: center; width: 42px; height: 47px; border: 1px solid #5a92fb; border-radius: 10px 10px 10px 3px; color: #fff; background: #2563eb; font-size: 31px; line-height: 1; }
.app-sidebar { background: var(--app-navy); border: 0; }
.app-sidebar .brand { padding: 28px 16px 34px; margin: 0; }
.app-sidebar .nav-link { margin: 4px 12px; min-height: 45px; padding: 10px 14px; border-radius: 6px; color: #b9c9da; }
.app-sidebar .nav-link:hover { background: #ffffff0b; color: white; }
.app-sidebar .nav-link.active { color: #fff; background: #ffffff14; box-shadow: inset 3px 0 #5b94ff; }
.nav-icon { display: inline-flex; justify-content: center; width: 24px; margin-right: 12px; font-size: 22px; line-height: 1; }
.nav-section-label { padding: 0 26px 12px; color: #7e99b3; font-size: 9px; letter-spacing: 1.5px; font-weight: 650; }
.sidebar-content { width: 100%; }
.sidebar-group { margin: 3px 12px; }
.sidebar-group-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-radius: 6px; color: #c8d7e6; font-size: 13px; font-weight: 600; cursor: pointer; list-style: none; }
.sidebar-group-toggle::-webkit-details-marker { display: none; }
.sidebar-group-toggle:hover, .sidebar-group[open] > summary { background: #ffffff0b; color: #fff; }
.sidebar-group-toggle:focus-visible { outline: 2px solid #8bb6ff; outline-offset: 2px; }
.sidebar-chevron { font-size: 21px; line-height: 1; transition: transform .15s ease; }
.sidebar-group[open] > summary .sidebar-chevron { transform: rotate(90deg); }
.app-sidebar .sidebar-group .nav-link { margin: 3px 0 3px 8px; min-height: 38px; padding: 8px 10px; font-size: 12px; }
.sidebar-group .nav-icon { width: 14px; margin-right: 8px; font-size: 16px; }
.sidebar-home { display: block; font-weight: 600; }
.sidebar-note { margin: 36px 25px 20px; padding-top: 20px; border-top: 1px solid #ffffff12; color: #8faac2; font-size: 11px; }
.sidebar-note .status-dot { margin-right: 6px; }
.menu-icon { flex: 0 0 20px; width: 20px; height: 20px; }
.app-sidebar .nav-link, .sidebar-home { display: flex; align-items: center; gap: 10px; }
.sidebar-group-toggle .sidebar-label { flex: 1; }
.sidebar-size-toggle[hidden] { display: none !important; }
@media (min-width: 992px) {
    .sidebar-compact .app-sidebar { width: 76px; }
    .sidebar-compact .navbar-vertical.navbar-expand-lg ~ .page-wrapper { margin-left: 76px; }
    .sidebar-compact .app-sidebar .brand { justify-content: center; padding: 24px 0; }
    .sidebar-compact .brand-text, .sidebar-compact .sidebar-label,
    .sidebar-compact .sidebar-chevron, .sidebar-compact .sidebar-note,
    .sidebar-compact .sidebar-group > .navbar-nav { display: none; }
    .sidebar-compact .sidebar-group { margin: 3px 8px; }
    .sidebar-compact .sidebar-group-toggle { justify-content: center; padding: 13px 8px; }
    .sidebar-compact .sidebar-home { justify-content: center; margin: 4px 8px; padding: 12px 8px; }
    .sidebar-compact .sidebar-size-toggle svg { transform: rotate(180deg); }
}
.app-topbar { min-height: 76px; background: #fff; border-bottom: 1px solid #e4e9f0; box-shadow: none; }
.topbar-label { color: #6d7d8f; font-size: 13px; }
.user-chip { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 550; }
.user-chip span:last-child { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-body { margin-top: 30px; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 27px; }
.page-pretitle { font-size: 10px; letter-spacing: 1.6px; font-weight: 650; color: #7d8b9e; margin-bottom: 8px; }
.page-title { font-size: 27px; font-weight: 650; letter-spacing: -.7px; }
.card { border: 1px solid #e1e7ef; box-shadow: 0 2px 5px #10283f03; border-radius: 10px; }
.card-header { min-height: 68px; }
.card-title { font-size: 15px; font-weight: 650; }
.stat-card { height: 158px; }
.stat-card .card-body { padding: 22px; }
.stat-label { font-size: 10px; letter-spacing: .7px; font-weight: 650; color: #788699; }
.stat-number { margin-top: 12px; font-size: 29px; line-height: 1.25; font-weight: 650; letter-spacing: -.8px; font-variant-numeric: tabular-nums; }
.stat-number small { margin-left: 8px; font-size: 11px; font-weight: 500; letter-spacing: 0; }
.stat-footnote { margin-top: 12px; font-size: 11px; }
.balance-card { background: var(--app-navy); border-color: var(--app-navy); color: #fff; }
.balance-card .stat-label { color: #a8c0d8; }
.balance-card .stat-footnote { color: #aec3d7; }
.table thead th { padding-top: 13px; padding-bottom: 13px; font-size: 10px; color: #7a8798; letter-spacing: .5px; background: #f9fafc; }
.table td { padding-top: 17px; padding-bottom: 17px; }
.product-name { min-width: 180px; max-width: 320px; }
.product-table td { font-size: 13px; }
.empty { padding: 50px 24px; }
.empty-icon { color: #99afca; font-size: 35px; margin-bottom: 12px; }
.empty-title { font-size: 15px; font-weight: 600; }
.empty-subtitle { font-size: 13px; max-width: 350px; margin-inline: auto; }
.footer { color: #8a97a8; font-size: 11px; }
.skip-link { position: absolute; left: -9999px; z-index: 10000; background: white; padding: 12px; }
.skip-link:focus { left: 12px; top: 12px; }
:focus-visible { outline: 3px solid #72a0ff; outline-offset: 3px; }
.login-page { background: #fff; }
.login-shell { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.login-intro { display: flex; flex-direction: column; position: relative; padding: 48px 58px; overflow: hidden; background: var(--app-navy); color: white; }
.login-intro::after { content: ""; position: absolute; width: 430px; height: 430px; border: 1px solid #6b9cd31a; border-radius: 50%; right: -200px; top: 12%; pointer-events: none; }
.login-message { margin: auto 0; padding: 70px 0; position: relative; z-index: 1; max-width: 430px; }
.eyebrow { color: #8cbaeb; font-size: 10px; letter-spacing: 2.5px; margin-bottom: 26px; }
.login-message h1 { color: #fff; font-size: clamp(32px, 3.5vw, 55px); line-height: 1.2; letter-spacing: -1.5px; font-weight: 550; margin-bottom: 24px; }
.login-message p { font-size: 15px; line-height: 1.9; color: #a9bfd2; max-width: 350px; }
.signal-art { display: flex; align-items: end; gap: 9px; height: 75px; margin-top: 40px; }
.signal-art span { display: block; width: 24px; border: 1px solid #4f89dd; background: #2563eb30; border-radius: 4px; }
.signal-art span:nth-child(1) { height: 19px; }.signal-art span:nth-child(2) { height: 32px; }.signal-art span:nth-child(3) { height: 45px; }.signal-art span:nth-child(4) { height: 58px; }.signal-art span:nth-child(5) { height: 72px; background: #2563eb; }
.login-intro-footer { color: #7f9bb4; font-size: 11px; }
.login-form-panel { display: flex; flex-direction: column; align-items: center; padding: 48px 36px 24px; }
.login-form-content { width: 100%; max-width: 370px; margin-block: auto; padding-block: 50px; }
.login-form-content h2 { font-size: 29px; letter-spacing: -.6px; font-weight: 650; margin-bottom: 12px; }
.login-form-content .text-secondary { font-size: 13px; line-height: 1.7; }
.login-form-content .form-label { font-size: 12px; margin-bottom: 9px; }
.login-form-content .form-control { font-size: 14px; border-color: #dce2eb; min-height: 47px; }
.login-form-content .btn { min-height: 47px; font-size: 14px; }
.login-help { margin-top: 26px; text-align: center; font-size: 11px; color: #8b98a7; }
.login-copyright { color: #9aa5b3; font-size: 10px; }
.status-page { min-height: 100vh; display: grid; place-items: center; }
.status-code { font-size: 90px; font-weight: 750; color: #afc8ec; line-height: 1.3; }
@media (min-width: 992px) { .app-sidebar { width: 248px; }.navbar-vertical.navbar-expand-lg ~ .page-wrapper { margin-left: 248px; }.sidebar-content { min-height: calc(100vh - 150px); display: flex; flex-direction: column; }.sidebar-note { margin-top: auto; }.container-xl { padding-left: 32px; padding-right: 32px; } }
@media (max-width: 991.98px) { .app-sidebar .brand { padding: 16px 6px; font-size: 20px; }.brand-symbol { width: 34px; height: 39px; font-size: 27px; }.app-topbar { min-height: 65px; }.sidebar-note { display: none; }.nav-section-label { padding-top: 15px; }.login-intro { padding: 36px; } }
@media (max-width: 575.98px) { .login-shell { grid-template-columns: 1fr; }.login-intro { padding: 24px; }.login-message, .login-intro-footer { display: none; }.login-form-panel { padding: 20px 24px; min-height: calc(100vh - 90px); }.login-form-content { padding-block: 32px; }.page-heading { align-items: flex-start; flex-direction: column; }.topbar-label { display: none; }.app-topbar .container-xl { justify-content: flex-end; }.page-title { font-size: 24px; }.stat-card { height: auto; min-height: 140px; }.page-body { margin-top: 22px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
/* Giữ bố cục form nghiệp vụ cũ: nhãn 3 cột, ô nhập 9 cột trên desktop. */
.page-title { overflow-wrap: anywhere; }
.provider-plan-picker { position: relative; }
.provider-plan-options { position: absolute; z-index: 1050; left: 12px; right: 12px; max-height: 280px; overflow-y: auto; margin: 2px 0 0; padding: 4px; list-style: none; background: white; border: 1px solid #cbd5e1; border-radius: 6px; box-shadow: 0 6px 18px #10283f20; }
.provider-plan-options li { padding: 9px 12px; overflow-wrap: anywhere; cursor: pointer; }
.provider-plan-options li:hover, .provider-plan-options li.highlighted { background: #eaf1ff; color: #174da6; }
.inventory-filters .form-select, .inventory-filters .form-control { max-width: 100%; min-width: 0; }
.inventory-table td { white-space: nowrap; }
.legacy-import-form.legacy-operation-form .legacy-form-row {
    grid-template-columns: 16.6667% minmax(0, 33.3333%);
}
.legacy-import-form.legacy-operation-form input[type="file"] {
    max-width: 100%;
}
.legacy-operation-form .legacy-form-row {
    display: grid;
    grid-template-columns: 25% minmax(0, 1fr);
    gap: 0;
}
.legacy-operation-form .form-label {
    padding: .5rem 1rem .5rem 0;
}
.legacy-operation-form select {
    max-width: 500px;
}
.legacy-operation-form input:not([type="hidden"]) {
    max-width: 200px;
}
.legacy-operation-form textarea {
    min-height: 250px;
}
.legacy-operation-form > button {
    align-self: flex-start;
}
@media (max-width: 767.98px) {
    .legacy-operation-form .legacy-form-row,
    .legacy-import-form.legacy-operation-form .legacy-form-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Each grid declares its column widths in a colgroup beside its headers. */
main .table.grid-table {
    table-layout: fixed;
    width: max(100%, var(--grid-width));
}
main .grid-table th,
main .grid-table td {
    min-width: 0;
    max-width: none;
    white-space: normal;
    overflow-wrap: anywhere;
}
main .grid-table thead th { line-height: 1.4; }
main .grid-table .text-end { font-variant-numeric: tabular-nums; }
main .grid-table :is(input, select, textarea) { max-width: 100%; min-width: 0; }
main .grid-table .btn { max-width: 100%; white-space: normal; }