/* _content/Admin_KA_Transport_Pricing/Components/App.razor.rz.scp.css */
/* _content/Admin_KA_Transport_Pricing/Components/Layout/404Layout.razor.rz.scp.css */
.page[b-zk7yzhyefw] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-zk7yzhyefw] {
    flex: 1;
}
/*.sidebar {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}*/
.e-avatar:hover[b-zk7yzhyefw] {
    cursor:pointer;
    background-color: #f3f3f3; /* Darker background color on hover */
}
.top-row[b-zk7yzhyefw] {
   
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-zk7yzhyefw]  a, .top-row[b-zk7yzhyefw]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-zk7yzhyefw]  a:hover, .top-row[b-zk7yzhyefw]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-zk7yzhyefw]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-zk7yzhyefw] {
        justify-content: space-between;
    }

    .top-row[b-zk7yzhyefw]  a, .top-row[b-zk7yzhyefw]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-zk7yzhyefw] {
        flex-direction: row;
    }

    .sidebar[b-zk7yzhyefw] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-zk7yzhyefw] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-zk7yzhyefw]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-zk7yzhyefw], article[b-zk7yzhyefw] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-zk7yzhyefw] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-zk7yzhyefw] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* _content/Admin_KA_Transport_Pricing/Components/Layout/Alert.razor.rz.scp.css */
.e-control[b-lwyjdt0597] {
	position: absolute;
}

/* _content/Admin_KA_Transport_Pricing/Components/Layout/EmptyLayout.razor.rz.scp.css */
.page[b-en2xuvzzsp] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-en2xuvzzsp] {
    flex: 1;
}
/*.sidebar {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}*/
.e-avatar:hover[b-en2xuvzzsp] {
    cursor:pointer;
    background-color: #f3f3f3; /* Darker background color on hover */
}
.top-row[b-en2xuvzzsp] {
   
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-en2xuvzzsp]  a, .top-row[b-en2xuvzzsp]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-en2xuvzzsp]  a:hover, .top-row[b-en2xuvzzsp]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-en2xuvzzsp]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-en2xuvzzsp] {
        justify-content: space-between;
    }

    .top-row[b-en2xuvzzsp]  a, .top-row[b-en2xuvzzsp]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 1100px) {
    .page[b-en2xuvzzsp] {
        flex-direction: row;
    }

    .sidebar[b-en2xuvzzsp] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
        transition: width 0.3s;
    }

    .top-row[b-en2xuvzzsp] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-en2xuvzzsp]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-en2xuvzzsp], article[b-en2xuvzzsp] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
    .content-expanded[b-en2xuvzzsp] {
        flex: 1;
        padding: 0 20px;
    }

    .content-collapsed[b-en2xuvzzsp] {
        flex: 1;
        padding: 0 20px;
        margin-left: 0;
    }

    /* Optional: Style the toggle button */
    .toggle-button[b-en2xuvzzsp] {
        position: fixed;
        top: 10px;
        left: 5px;
        z-index: 1001;
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
        color: #808080;
    }
}

#blazor-error-ui[b-en2xuvzzsp] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-en2xuvzzsp] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* _content/Admin_KA_Transport_Pricing/Components/Layout/LoginLayout.razor.rz.scp.css */
/* LoginLayout renders only: <div class="container d-flex justify-content-center"> + @Body.
   Legacy template rules (.page/.sidebar/.top-row) were removed — those elements don't exist here. */

.container[b-5a5i6ltr3x] {
    min-height: 100vh;
    align-items: center;
}

#blazor-error-ui[b-5a5i6ltr3x] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-5a5i6ltr3x] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/Admin_KA_Transport_Pricing/Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-0093j0c2g4] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-0093j0c2g4] {
    flex: 1;
}
/*.sidebar {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}*/
.e-avatar:hover[b-0093j0c2g4] {
    cursor:pointer;
    background-color: #f3f3f3; /* Darker background color on hover */
}
.top-row[b-0093j0c2g4] {
   
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-0093j0c2g4]  a, .top-row[b-0093j0c2g4]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-0093j0c2g4]  a:hover, .top-row[b-0093j0c2g4]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-0093j0c2g4]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-0093j0c2g4] {
        justify-content: space-between;
    }

    .top-row[b-0093j0c2g4]  a, .top-row[b-0093j0c2g4]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 1100px) {
    .page[b-0093j0c2g4] {
        flex-direction: row;
    }

    .sidebar[b-0093j0c2g4] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
        transition: width 0.3s;
    }

    .top-row[b-0093j0c2g4] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-0093j0c2g4]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-0093j0c2g4], article[b-0093j0c2g4] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
    .content-expanded[b-0093j0c2g4] {
        flex: 1;
        padding: 0 20px;
    }

    .content-collapsed[b-0093j0c2g4] {
        flex: 1;
        padding: 0 20px;
        margin-left: 0;
    }

    /* Optional: Style the toggle button */
    .toggle-button[b-0093j0c2g4] {
        position: fixed;
        top: 10px;
        left: 5px;
        z-index: 1001;
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
        color: #808080;
    }

    /* Main header styles */
    .main-header[b-0093j0c2g4] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        background: white;
        border-bottom: 1px solid #e0e0e0;
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .header-right[b-0093j0c2g4] {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-left: auto;
    }
}

#blazor-error-ui[b-0093j0c2g4] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-0093j0c2g4] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* _content/Admin_KA_Transport_Pricing/Components/Layout/MainLayoutV2.razor.rz.scp.css */
/* Main page layout */

/* Khung app CAO ĐÚNG MỘT MÀN HÌNH: topnav ghim, chỉ .main-container cuộn.
   Không có dòng này thì TÀI LIỆU cũng cuộn được (html/body không bị khoá chiều cao — `app.css`
   vốn giữ việc đó đang bị comment ở App.razor) ⇒ trang dài hiện HAI thanh cuộn dọc cạnh nhau,
   và kéo cửa sổ làm topnav cuộn mất, trái ý đồ của grid 50px/1fr ngay dưới đây.
   Khoá ở .layout-container (chỉ layout này có) chứ KHÔNG khoá html/body: LoginLayout/404Layout
   không có vùng cuộn riêng, khoá toàn cục là chúng bị kẹt không cuộn được.
   Overlay đều position:fixed (.mo, .ms-backdrop, Radzen) nên không bị overflow này cắt. */
.layout-container[b-udpwxskwbe] {
    height: 100vh;
    height: 100dvh;   /* mobile: trừ đúng thanh công cụ trình duyệt; trình duyệt cũ bỏ qua dòng này */
    overflow: hidden;
}

.page-layout[b-udpwxskwbe] {
    display: grid;
    grid-template-rows: 50px 1fr;
    height: 100vh;
}

.topnav-container[b-udpwxskwbe] {
    grid-row: 1;
    background: white;
    z-index: 900;
}

.page[b-udpwxskwbe] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

    .page main[b-udpwxskwbe] {
        flex: 1;
        margin-left: var(--sidebar-width);
        transition: margin-left 0.3s ease;
    }

    /* When sidebar is collapsed */
    .etrans-sidebar-collapsed ~ main[b-udpwxskwbe],
    .page.sidebar-collapsed main[b-udpwxskwbe] {
        margin-left: var(--sidebar-collapsed-width);
    }

    /* Content area */
    .page main article[b-udpwxskwbe] {
/*        padding: 1rem;*/
        min-height: calc(100vh - var(--topbar-height));
        background: var(--bg-light);
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .page main[b-udpwxskwbe] {
            margin-left: 0;
            margin-top: 0;
        }

        .page.sidebar-collapsed main[b-udpwxskwbe] {
            margin-left: 0;
        }
    }

.main-container[b-udpwxskwbe] {
    grid-row: 2;
    overflow: auto;
    background-color: #f8fafc;
}

.main-content[b-udpwxskwbe] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
    padding: 18px 20px;
    margin: 0 auto;
    max-width: 100%;
    min-height: calc(100vh - 3rem);
    transition: box-shadow var(--transition);
}

    .main-content:hover[b-udpwxskwbe] {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }


/* Responsive adjustments */
@media (max-width: 768px) {
    .main-container[b-udpwxskwbe] {
        padding: 0.5rem;
    }

    .main-content[b-udpwxskwbe] {
        border-radius: 8px;
        min-height: calc(100vh - 2rem);
    }
    .etrans-tenant-info[b-udpwxskwbe] {
       font-size: 1rem;
    }
}

/* Custom Scrollbar Styles */
*[b-udpwxskwbe] {
    scrollbar-width: thin;
    scrollbar-color: var(--primary-light) var(--bg-light);
}

/* Webkit Scrollbar Styles (Chrome, Safari, Edge) */
[b-udpwxskwbe]::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

[b-udpwxskwbe]::-webkit-scrollbar-track {
    background: var(--bg-light);
    border-radius: 6px;
    border: 1px solid var(--border-light);
}

[b-udpwxskwbe]::-webkit-scrollbar-thumb {
    background: var(--primary-light);
    border-radius: 6px;
    border: 2px solid var(--bg-light);
    transition: all 0.2s ease;
}

    [b-udpwxskwbe]::-webkit-scrollbar-thumb:hover {
        background: var(--primary-color);
        border-color: var(--bg-light);
    }

    [b-udpwxskwbe]::-webkit-scrollbar-thumb:active {
        background: var(--primary-active);
    }

[b-udpwxskwbe]::-webkit-scrollbar-corner {
    background: var(--bg-light);
}

/* Thin scrollbar variant for smaller containers */
.thin-scrollbar[b-udpwxskwbe]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.thin-scrollbar[b-udpwxskwbe]::-webkit-scrollbar-track {
    background: var(--secondary-lighter);
    border-radius: 4px;
    border: none;
}

.thin-scrollbar[b-udpwxskwbe]::-webkit-scrollbar-thumb {
    background: var(--secondary-color);
    border-radius: 4px;
    border: 1px solid var(--secondary-lighter);
}

    .thin-scrollbar[b-udpwxskwbe]::-webkit-scrollbar-thumb:hover {
        background: var(--secondary-hover);
    }

/* Dark theme scrollbar */
.dark-scrollbar[b-udpwxskwbe]::-webkit-scrollbar-track {
    background: var(--bg-dark);
    border-color: var(--secondary-dark);
}

.dark-scrollbar[b-udpwxskwbe]::-webkit-scrollbar-thumb {
    background: var(--secondary-color);
    border-color: var(--bg-dark);
}

    .dark-scrollbar[b-udpwxskwbe]::-webkit-scrollbar-thumb:hover {
        background: var(--secondary-light);
    }
/* _content/Admin_KA_Transport_Pricing/Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-05d5hbuvel] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}
.sidebar[b-05d5hbuvel] {
    border: solid 1px darkgrey;
}
.sidebar > .top-row[b-05d5hbuvel] {
    background-color: var(--primary-color);
}
.navbar-toggler:checked[b-05d5hbuvel] {
    background-color: rgba(255, 255, 255, 0.5);
}
.nav-link span[b-05d5hbuvel]{
    color: black ;
}

.top-row[b-05d5hbuvel] {
    height: 3.5rem;
}
.nav-scrollable[b-05d5hbuvel]{
    background-color:white;
   
}
.navmenu-accordion .fas[b-05d5hbuvel] {
    display: inline-block;
    width: 1.15rem;
    text-align: center;
    margin-right: 4px;
    color: var(--primary-color);
}

.navbar-brand[b-05d5hbuvel] {
    font-size: 1.1rem;
}

.bi[b-05d5hbuvel] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill[b-05d5hbuvel] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill[b-05d5hbuvel] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested[b-05d5hbuvel] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-05d5hbuvel] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-05d5hbuvel] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-05d5hbuvel] {
        padding-bottom: 1rem;
    }

    .nav-item[b-05d5hbuvel]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item[b-05d5hbuvel]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-05d5hbuvel]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-05d5hbuvel] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-05d5hbuvel] {
    display: block;
}


@media (min-width: 1100px) {
    .navbar-toggler[b-05d5hbuvel] {
        display: none;
    }

    .nav-scrollable[b-05d5hbuvel] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}


/* _content/Admin_KA_Transport_Pricing/Components/Layout/NotificationBell.razor.rz.scp.css */
.notification-bell-container[b-78pfj83tl2] {
    position: relative;
    display: inline-block;
}

.notification-bell-button[b-78pfj83tl2] {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px 12px;
    position: relative;
    font-size: 20px;
    color: #666;
    transition: color 0.3s ease;
}

.notification-bell-button:hover[b-78pfj83tl2] {
    color: #007bff;
}

.notification-badge[b-78pfj83tl2] {
    position: absolute;
    top: 4px;
    right: 4px;
    background: #dc3545;
    color: white;
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: bold;
    min-width: 18px;
    text-align: center;
    line-height: 14px;
}

.notification-dropdown[b-78pfj83tl2] {
    position: absolute;
    top: 100%;
    right: 0;
    width: 380px;
    max-width: 90vw;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    max-height: 600px;
}

.notification-dropdown-header[b-78pfj83tl2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
}

.notification-dropdown-header h3[b-78pfj83tl2] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.btn-mark-all-read[b-78pfj83tl2] {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px;
    color: #007bff;
    font-size: 16px;
    transition: color 0.3s ease;
}

.btn-mark-all-read:hover[b-78pfj83tl2] {
    color: #0056b3;
}

.notification-dropdown-body[b-78pfj83tl2] {
    overflow-y: auto;
    max-height: 450px;
    flex: 1;
}

.notification-loading[b-78pfj83tl2],
.notification-empty[b-78pfj83tl2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: #999;
}

.notification-loading i[b-78pfj83tl2],
.notification-empty i[b-78pfj83tl2] {
    font-size: 32px;
    margin-bottom: 12px;
}

.notification-loading span[b-78pfj83tl2],
.notification-empty p[b-78pfj83tl2] {
    font-size: 14px;
    margin: 0;
}

.notification-item[b-78pfj83tl2] {
    display: flex;
    align-items: flex-start;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background-color 0.2s ease;
    position: relative;
}

.notification-item:hover[b-78pfj83tl2] {
    background-color: #f8f9fa;
}

.notification-item.unread[b-78pfj83tl2] {
    background-color: #f0f7ff;
}

.notification-item:last-child[b-78pfj83tl2] {
    border-bottom: none;
}

.notification-icon[b-78pfj83tl2] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
    font-size: 16px;
}

.notification-icon.info[b-78pfj83tl2] {
    background: #e3f2fd;
    color: #1976d2;
}

.notification-icon.success[b-78pfj83tl2] {
    background: #e8f5e9;
    color: #388e3c;
}

.notification-icon.warning[b-78pfj83tl2] {
    background: #fff3e0;
    color: #f57c00;
}

.notification-icon.error[b-78pfj83tl2] {
    background: #ffebee;
    color: #d32f2f;
}

.notification-content[b-78pfj83tl2] {
    flex: 1;
    min-width: 0;
}

.notification-title[b-78pfj83tl2] {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
    line-height: 1.4;
}

.notification-message[b-78pfj83tl2] {
    font-size: 13px;
    color: #666;
    margin-bottom: 6px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notification-time[b-78pfj83tl2] {
    font-size: 12px;
    color: #999;
    display: flex;
    align-items: center;
    gap: 4px;
}

.notification-unread-indicator[b-78pfj83tl2] {
    width: 8px;
    height: 8px;
    background: #007bff;
    border-radius: 50%;
    flex-shrink: 0;
    margin-left: 8px;
    margin-top: 14px;
}

.notification-dropdown-footer[b-78pfj83tl2] {
    padding: 12px 20px;
    border-top: 1px solid #e0e0e0;
}

.btn-view-all[b-78pfj83tl2] {
    width: 100%;
    background: transparent;
    border: none;
    color: #007bff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-view-all:hover[b-78pfj83tl2] {
    background-color: #f0f7ff;
}

.notification-overlay[b-78pfj83tl2] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    background: transparent;
}

/* ──────────────────────────────────────────────────────────────────────
   Mobile (≤ 768px) — convert the dropdown into a bottom sheet.
   The desktop "anchored to the bell button" pattern fails on phones:
   a 340px-wide dropdown anchored to a top-right bell either spills off
   the left edge of a 360px viewport or gets clipped at the right. The
   bottom sheet is the standard mobile pattern (Gmail, Slack, iOS Mail)
   — predictable, full-width, large hit areas, no anchoring math.
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .notification-dropdown[b-78pfj83tl2] {
        position: fixed;
        top: auto;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 16px 16px 0 0;       /* sheet — only top corners rounded */
        max-height: 85vh;                   /* leave a little of the page peeking */
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18);
        z-index: 1100;
        animation: notif-sheet-slide-up-b-78pfj83tl2 0.22s ease-out;
    }
    .notification-dropdown[b-78pfj83tl2]::before {
        /* iOS-style drag handle — purely visual, signals "swipe to dismiss" affordance. */
        content: "";
        display: block;
        width: 40px; height: 4px;
        background: #cbd5e1;
        border-radius: 2px;
        margin: 8px auto 0;
    }
    .notification-dropdown-header[b-78pfj83tl2] {
        padding: 12px 16px;
    }
    .notification-dropdown-body[b-78pfj83tl2] {
        max-height: calc(85vh - 120px);     /* leave room for header + footer + handle */
    }
    .notification-item[b-78pfj83tl2] {
        padding: 14px 16px;                 /* tighter side padding on phone */
    }
    .notification-icon[b-78pfj83tl2] {
        width: 40px; height: 40px;          /* larger hit area */
        font-size: 18px;
    }
    .notification-title[b-78pfj83tl2] { font-size: 15px; }
    .notification-message[b-78pfj83tl2] { font-size: 13.5px; }
    .notification-dropdown-footer[b-78pfj83tl2] {
        padding: 12px 16px;
        padding-bottom: max(12px, env(safe-area-inset-bottom));   /* respect iOS home-bar */
    }
    .btn-view-all[b-78pfj83tl2] {
        padding: 12px;                      /* tappable */
        font-size: 15px;
    }

    /* Dim the page underneath so the sheet has visual weight + tappable dismiss area. */
    .notification-overlay[b-78pfj83tl2] {
        background: rgba(15, 23, 42, 0.4);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        z-index: 1099;
    }
}

@keyframes notif-sheet-slide-up-b-78pfj83tl2 {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/* Scrollbar styling */
.notification-dropdown-body[b-78pfj83tl2]::-webkit-scrollbar {
    width: 6px;
}

.notification-dropdown-body[b-78pfj83tl2]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.notification-dropdown-body[b-78pfj83tl2]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.notification-dropdown-body[b-78pfj83tl2]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}
/* _content/Admin_KA_Transport_Pricing/Components/Layout/SideNavMenuV2.razor.rz.scp.css */
/* ===== Sidebar shell (keeps layout integration: width drives --sidebar-width offset) ===== */
.etrans-sidebar[b-t61anbghcl] {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: var(--sidebar-width);
    background: var(--light-color, #fff);
    color: var(--text-dark);
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
    z-index: 1000;
    transition: width var(--transition), transform var(--transition);
    overflow: hidden;
}

.etrans-sidebar.etrans-collapsed[b-t61anbghcl] {
    width: var(--sidebar-collapsed-width);
    cursor: pointer;
}

.etrans-sidebar.etrans-hidden[b-t61anbghcl] {
    transform: translateX(-100%);
}

/* Mobile: off-canvas */
@media (max-width: 768px) {
    .etrans-sidebar[b-t61anbghcl],
    .etrans-sidebar.etrans-collapsed[b-t61anbghcl] {
        transform: translateX(-100%);
        width: var(--sidebar-width);
    }

    .etrans-sidebar.etrans-mobile-open[b-t61anbghcl] {
        transform: translateX(0);
    }
}

/* ===== Logo bar (aligns with topbar height) ===== */
.sb-logo[b-t61anbghcl] {
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--topbar-height);
    min-height: var(--topbar-height);
    padding: 0 16px;
    border-bottom: 1px solid var(--border-light);
    font-weight: 600;
    font-size: 15px;
    color: var(--primary-color);
    letter-spacing: -0.3px;
    flex-shrink: 0;
}

.sb-logo-icon[b-t61anbghcl] {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: var(--primary-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.sb-logo-text[b-t61anbghcl] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
}

.sb-toggle[b-t61anbghcl] {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    transition: background var(--transition), color var(--transition);
}

    .sb-toggle:hover[b-t61anbghcl] {
        background: var(--bg-light);
        color: var(--text-dark);
    }

/* ===== Nav sections ===== */
.sb-nav[b-t61anbghcl] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-muted) transparent;
}

    .sb-nav[b-t61anbghcl]::-webkit-scrollbar {
        width: 4px;
    }

    .sb-nav[b-t61anbghcl]::-webkit-scrollbar-thumb {
        background: var(--border-muted);
        border-radius: 2px;
    }

.sb-sec[b-t61anbghcl] {
    padding: 14px 10px 2px;
}

.sb-lbl[b-t61anbghcl] {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    color: var(--text-muted);
    padding: 0 8px;
    margin-bottom: 3px;
}

/* ===== Nav item ===== */
.ni[b-t61anbghcl] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: var(--border-radius);
    cursor: pointer;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
    position: relative;
    user-select: none;
    transition: background var(--transition), color var(--transition);
}

    .ni:hover[b-t61anbghcl] {
        background: var(--bg-light);
        color: var(--text-dark);
    }

    .ni.active[b-t61anbghcl] {
        background: var(--primary-lighter);
        color: var(--primary-color);
        font-weight: 500;
    }

        .ni.active[b-t61anbghcl]::before {
            content: '';
            position: absolute;
            left: 0;
            top: 5px;
            bottom: 5px;
            width: 3px;
            background: var(--primary-color);
            border-radius: 0 3px 3px 0;
        }

.ni-icon[b-t61anbghcl] {
    width: 16px;
    font-size: 15px;
    text-align: center;
    flex-shrink: 0;
}

.ni-text[b-t61anbghcl] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.badge-count[b-t61anbghcl] {
    margin-left: auto;
    background: #dc2626;
    color: #fff;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 100px;
    font-weight: 600;
}

/* ===== Mục menu chưa làm (không click được) ===== */
.ni-disabled[b-t61anbghcl] {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}

.ni-soon[b-t61anbghcl] {
    margin-left: auto;
    background: #94a3b8;
    color: #fff;
    font-size: 9.5px;
    padding: 1px 6px;
    border-radius: 100px;
    font-weight: 600;
    white-space: nowrap;
}

/* ===== Footer ===== */
.sb-footer[b-t61anbghcl] {
    padding: 12px 16px;
    border-top: 1px solid var(--border-light);
    text-align: center;
    flex-shrink: 0;
}

.sb-version[b-t61anbghcl] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 2px;
    letter-spacing: 0.5px;
}

.sb-copy[b-t61anbghcl] {
    font-size: 0.65rem;
    color: var(--text-muted);
}

/* ===== Collapsed (icon-only) ===== */
.etrans-collapsed .sb-logo-text[b-t61anbghcl],
.etrans-collapsed .sb-logo-icon[b-t61anbghcl],
.etrans-collapsed .sb-lbl[b-t61anbghcl],
.etrans-collapsed .ni-text[b-t61anbghcl],
.etrans-collapsed .badge-count[b-t61anbghcl],
.etrans-collapsed .sb-footer[b-t61anbghcl] {
    display: none;
}

.etrans-collapsed .sb-logo[b-t61anbghcl] {
    justify-content: center;
    padding: 0;
}

.etrans-collapsed .sb-sec[b-t61anbghcl] {
    padding: 6px 8px 2px;
}

.etrans-collapsed .ni[b-t61anbghcl] {
    justify-content: center;
    padding: 9px 0;
}

    .etrans-collapsed .ni.active[b-t61anbghcl]::before {
        display: none;
    }

/* ===== Mobile overlay ===== */
@media (max-width: 768px) {
    .etrans-mobile-overlay[b-t61anbghcl] {
        position: fixed;
        inset: 0;
        background: rgba(15, 20, 40, 0.45);
        z-index: 998;
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--transition), visibility var(--transition);
    }

        .etrans-mobile-overlay.active[b-t61anbghcl] {
            opacity: 1;
            visibility: visible;
        }
}

/* ===== Show-sidebar button (desktop, when hidden) ===== */
.etrans-show-sidebar-btn[b-t61anbghcl] {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 999;
    background: var(--primary-color);
    color: #fff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow);
    transition: background var(--transition), transform var(--transition);
}

    .etrans-show-sidebar-btn:hover[b-t61anbghcl] {
        background: var(--primary-hover);
        transform: scale(1.05);
    }
/* _content/Admin_KA_Transport_Pricing/Components/Layout/TopNavMenuV2.razor.rz.scp.css */
.etrans-topbar[b-i67h1sbr3u] {
    position: fixed;
    top: 0;
    left: var(--sidebar-width);
    right: 0;
    height: 50px; /* Reduced from default */
    background: var(--topbar-bg-light);
    color: var(--primary-text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem; /* Reduced padding */
    z-index: 999;
    box-shadow: var(--topbar-shadow);
    backdrop-filter: blur(10px);
    transition: left 0.3s ease;
}

/* Adjust when sidebar is collapsed */
[b-i67h1sbr3u] .etrans-sidebar-collapsed ~ .etrans-topbar,
.sidebar-collapsed .etrans-topbar[b-i67h1sbr3u] {
    left: var(--sidebar-collapsed-width);
}

.etrans-topbar[b-i67h1sbr3u]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, transparent 50%, rgba(255,255,255,0.05) 100%);
    pointer-events: none;
}

/* Left Section - Logo & Breadcrumb */
.etrans-topbar-left[b-i67h1sbr3u] {
    display: flex;
    align-items: center;
    gap: 1rem; /* Reduced gap */
}

/* Logo */
.etrans-logo[b-i67h1sbr3u] {
    display: flex;
    align-items: center;
    margin-right: 1rem;
    padding-right: 1rem;
    border-right: 1px solid rgba(255,255,255,0.2);
}

.etrans-logo-text[b-i67h1sbr3u] {
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.etrans-breadcrumb[b-i67h1sbr3u] {
    display: flex;
    align-items: center;
    gap: 0.4rem; /* Reduced gap */
    font-size: 0.8rem; /* Smaller font */
    opacity: 0.9;
}

.etrans-breadcrumb-item[b-i67h1sbr3u] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.etrans-breadcrumb-separator[b-i67h1sbr3u] {
    opacity: 0.6;
    font-size: 0.7rem;
    color: var(--primary-color);
}

.etrans-breadcrumb-link[b-i67h1sbr3u] {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

    .etrans-breadcrumb-link:hover[b-i67h1sbr3u] {
        color: white;
    }

.etrans-breadcrumb-current[b-i67h1sbr3u] {
    font-weight: 600;
    color: var(--primary-color);
}

/* Right Section */
.etrans-topbar-right[b-i67h1sbr3u] {
    display: flex;
    align-items: center;
    gap: 0.8rem; /* Reduced gap */
}

.etrans-topbar-actions[b-i67h1sbr3u] {
    display: flex;
    align-items: center;
    gap: 0.4rem; /* Reduced gap */
}

/* ::deep is required so the same styling reaches `.etrans-action-btn` elements rendered by
   child components (PwaInstallPrompt). Without ::deep, Blazor CSS isolation scopes each
   selector to elements rendered by THIS component, and the PWA buttons render as default
   browser buttons — leading to the inconsistent topbar look (pale install/permission
   buttons vs orange in-app bell). */
.etrans-topbar-actions[b-i67h1sbr3u]  .etrans-action-btn,
.etrans-action-btn[b-i67h1sbr3u] {
    width: 34px; /* Smaller size */
    height: 34px; /* Smaller size */
    background: var(--primary-color);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px; /* Smaller radius */
    color: var(--primary-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
}

    .etrans-topbar-actions[b-i67h1sbr3u]  .etrans-action-btn:hover,
    .etrans-action-btn:hover[b-i67h1sbr3u] {
        background: var(--rz-danger-light);
        transform: translateY(-1px);
    }

    .etrans-topbar-actions[b-i67h1sbr3u]  .etrans-action-btn i,
    .etrans-action-btn i[b-i67h1sbr3u] {
        font-size: 0.9rem; /* Smaller icon */
    }

    /* Notification Badge */
    .etrans-action-btn .etrans-notification-badge[b-i67h1sbr3u] {
        position: absolute;
        top: -3px;
        right: -3px;
        background: #ff4757;
        color: white;
        font-size: 0.65rem; /* Smaller badge */
        font-weight: 600;
        padding: 1px 4px;
        border-radius: 8px;
        min-width: 14px;
        text-align: center;
        border: 1px solid white;
    }

/* Quick Actions */
.etrans-quick-actions[b-i67h1sbr3u] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding-right: 0.8rem;
    border-right: 1px solid rgba(255,255,255,0.2);
}

.etrans-quick-btn[b-i67h1sbr3u] {
    width: 34px; /* Icon only buttons */
    height: 34px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    color: white;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .etrans-quick-btn:hover[b-i67h1sbr3u] {
        background: rgba(255,255,255,0.25);
        transform: translateY(-1px);
    }

/* User Dropdown */
.etrans-user-dropdown[b-i67h1sbr3u] {
    position: relative;
}

.etrans-user-trigger[b-i67h1sbr3u] {
    display: flex;
    align-items: center;
    gap: 8px; /* Reduced gap */
    padding: 6px 12px; /* Reduced padding */
    background: var(--primary-color);
    /*border: 1px solid rgba(255,255,255,0.2);*/
    border-radius: 20px; /* Smaller radius */
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

    .etrans-user-trigger:hover[b-i67h1sbr3u] {
        background: var(--rz-danger-light);
    }

.etrans-user-avatar-small[b-i67h1sbr3u] {
    width: 26px; /* Smaller avatar */
    height: 26px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.8rem; /* Smaller font */
    color: var(--primary-color);
}

.etrans-user-name-small[b-i67h1sbr3u] {
    font-size: 0.8rem; /* Smaller font */
    font-weight: 500;
    max-width: 180px; /* Increased width for more text */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.etrans-dropdown-arrow[b-i67h1sbr3u] {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}

.etrans-user-dropdown.active .etrans-dropdown-arrow[b-i67h1sbr3u] {
    transform: rotate(180deg);
}

/* Dropdown Menu */
.etrans-dropdown-menu[b-i67h1sbr3u] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px; /* Slightly smaller */
    background: white;
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
}

.etrans-user-dropdown.active .etrans-dropdown-menu[b-i67h1sbr3u] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.etrans-dropdown-menu[b-i67h1sbr3u]::before {
    content: '';
    position: absolute;
    top: -5px;
    right: 18px;
    width: 10px;
    height: 10px;
    background: white;
    transform: rotate(45deg);
    border-radius: 1px;
}

.etrans-dropdown-item[b-i67h1sbr3u] {
    display: flex;
    align-items: center;
    gap: 10px; /* Reduced gap */
    padding: 10px 14px; /* Reduced padding */
    color: var(--text-dark);
    text-decoration: none;
    transition: background 0.3s ease;
    border-radius: 6px;
    margin: 3px;
    font-size: 0.85rem; /* Smaller font */
}

    .etrans-dropdown-item:hover[b-i67h1sbr3u] {
        background: var(--bg-light);
    }

    .etrans-dropdown-item i[b-i67h1sbr3u] {
        width: 16px;
        text-align: center;
        opacity: 0.7;
        font-size: 0.85rem;
    }

.etrans-dropdown-divider[b-i67h1sbr3u] {
    height: 1px;
    background: #e2e8f0;
    margin: 6px 0;
}

/* Notification Dropdown */
.etrans-notification-dropdown[b-i67h1sbr3u] {
    position: relative;
}

.etrans-notification-panel[b-i67h1sbr3u] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 380px;
    max-height: 500px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
    overflow: hidden;
}

.etrans-notification-dropdown.active .etrans-notification-panel[b-i67h1sbr3u] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.etrans-notification-panel[b-i67h1sbr3u]::before {
    content: '';
    position: absolute;
    top: -5px;
    right: 18px;
    width: 10px;
    height: 10px;
    background: white;
    transform: rotate(45deg);
    border-radius: 1px;
}

/* Notification Header */
.notification-header[b-i67h1sbr3u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.notification-header h4[b-i67h1sbr3u] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
}

.mark-all-read[b-i67h1sbr3u] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 0.75rem;
    color: var(--primary-color);
    background: transparent;
    border: 1px solid var(--primary-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mark-all-read:hover[b-i67h1sbr3u] {
    background: var(--primary-color);
    color: white;
}

/* Notification List */
.notification-list[b-i67h1sbr3u] {
    max-height: 380px;
    overflow-y: auto;
}

.notification-list[b-i67h1sbr3u]::-webkit-scrollbar {
    width: 6px;
}

.notification-list[b-i67h1sbr3u]::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.notification-list[b-i67h1sbr3u]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.notification-list[b-i67h1sbr3u]::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* No Notifications */
.no-notifications[b-i67h1sbr3u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: #94a3b8;
}

.no-notifications i[b-i67h1sbr3u] {
    font-size: 3rem;
    margin-bottom: 12px;
    opacity: 0.5;
}

.no-notifications p[b-i67h1sbr3u] {
    margin: 0;
    font-size: 0.9rem;
}

/* Notification Item */
.notification-item[b-i67h1sbr3u] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background 0.2s ease;
    position: relative;
}

.notification-item:hover[b-i67h1sbr3u] {
    background: #f8fafc;
}

.notification-item.unread[b-i67h1sbr3u] {
    background: #f0f9ff;
}

.notification-item.unread:hover[b-i67h1sbr3u] {
    background: #e0f2fe;
}

/* Critical = unread KHTB_REGISTRATION_CREATED whose underlying registration is still pending.
   Overrides .unread tint so the row visually demands action. Auto-approved rows stay on the
   normal .unread style — there's nothing to act on. */
.notification-item.critical[b-i67h1sbr3u] {
    background: #fef2f2;
    border-left: 4px solid #dc2626;
}

.notification-item.critical:hover[b-i67h1sbr3u] {
    background: #fee2e2;
}

.notification-critical-badge[b-i67h1sbr3u] {
    display: inline-block;
    background: #dc2626;
    color: #ffffff;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin-right: 6px;
    text-transform: uppercase;
    vertical-align: middle;
    animation: topnav-critical-pulse-b-i67h1sbr3u 1.6s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6);
}

@keyframes topnav-critical-pulse-b-i67h1sbr3u {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6); }
    50%      { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0); }
}

/* Notification Icon */
.notification-icon[b-i67h1sbr3u] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notification-icon.info[b-i67h1sbr3u] {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
}

.notification-icon.success[b-i67h1sbr3u] {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.notification-icon.warning[b-i67h1sbr3u] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.notification-icon.error[b-i67h1sbr3u] {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

/* Notification Content */
.notification-content[b-i67h1sbr3u] {
    flex: 1;
    min-width: 0;
}

.notification-title[b-i67h1sbr3u] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 4px;
}

.notification-message[b-i67h1sbr3u] {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.4;
    margin-bottom: 4px;
}

.notification-time[b-i67h1sbr3u] {
    font-size: 0.7rem;
    color: #94a3b8;
}

/* Unread Indicator */
.unread-indicator[b-i67h1sbr3u] {
    position: absolute;
    top: 20px;
    right: 16px;
    width: 8px;
    height: 8px;
    background: var(--primary-color);
    border-radius: 50%;
    border: 2px solid white;
}

/* Notification Footer */
.notification-footer[b-i67h1sbr3u] {
    padding: 12px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

.view-all-btn[b-i67h1sbr3u] {
    width: 100%;
    padding: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--primary-color);
    background: transparent;
    border: 1px solid var(--primary-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.view-all-btn:hover[b-i67h1sbr3u] {
    background: var(--primary-color);
    color: white;
}

/* User Info */
.etrans-user-info[b-i67h1sbr3u] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 12px;
    border-right: 1px solid rgba(255,255,255,0.2);
}

.etrans-tenant-info[b-i67h1sbr3u] {
    font-size: 0.8rem;
    color: var(--text-dark);
    font-weight: 500;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .etrans-topbar[b-i67h1sbr3u] {
        left: 0;
        padding: 0 0.8rem;
        height: 45px; /* Even smaller on mobile */
        /* CRITICAL: backdrop-filter creates a new containing block for `position: fixed`
           descendants. Without this override, the notification bottom-sheet would anchor
           to the topbar (45px tall) instead of the viewport, causing only the footer to
           render at top of screen with the rest clipped (see Screenshot_12.jpg). The
           topbar has a solid background so removing the blur is visually harmless. */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .etrans-logo-text[b-i67h1sbr3u] {
        font-size: 1rem;
    }

    .etrans-breadcrumb[b-i67h1sbr3u] {
        display: none; /* Hide breadcrumb on mobile */
    }

    .etrans-quick-actions[b-i67h1sbr3u] {
        display: none;
    }

    .etrans-user-name-small[b-i67h1sbr3u] {
        display: none; /* Hide username on mobile */
    }

    .etrans-topbar-actions[b-i67h1sbr3u]  .etrans-action-btn,
    .etrans-action-btn[b-i67h1sbr3u] {
        width: 30px;
        height: 30px;
    }

    /* Mobile bottom-sheet — same pattern as NotificationBell.razor.css.
       The desktop "absolute, anchored to bell, right: -60px" math overflows the
       left edge of small viewports (see Screenshot_8.jpg). Detaching from the
       bell and pinning to the viewport bottom is the safe mobile pattern. */
    .etrans-notification-panel[b-i67h1sbr3u] {
        position: fixed;
        top: auto;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        max-height: 85vh;
        margin: 0;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18);
        transform: translateY(100%);            /* slide-up animation start state */
        z-index: 1100;
    }

    .etrans-notification-dropdown.active .etrans-notification-panel[b-i67h1sbr3u] {
        transform: translateY(0);                /* slide-up animation end state */
    }

    /* Kill the desktop arrow — it's absolute-positioned for the popover context
       and would float oddly above the sheet's top edge. */
    .etrans-notification-panel[b-i67h1sbr3u]::before { display: none; }

    /* iOS-style drag handle — purely visual, signals "tap outside to dismiss". */
    .etrans-notification-panel[b-i67h1sbr3u]::after {
        content: "";
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px; height: 4px;
        background: #cbd5e1;
        border-radius: 2px;
    }

    /* Let the list fill the sheet — desktop's max-height: 380px is too small for
       a bottom-sheet that already caps at 85vh. Subtract header (~56px) + footer (~52px). */
    .etrans-notification-panel .notification-list[b-i67h1sbr3u] {
        max-height: calc(85vh - 120px);
    }

    /* Footer respects iOS home-bar so "Xem tất cả" isn't sitting under the gesture indicator. */
    .etrans-notification-panel .notification-footer[b-i67h1sbr3u] {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    /* Backdrop — dim the page so the sheet has visual weight + clear dismiss target.
       pointer-events delay: when the user taps the bell, the browser dispatches the
       synthesized `click` event at the original tap coordinates. By the time it lands,
       the overlay has already rendered at `inset: 0` and would catch the same tap,
       immediately closing the sheet that just opened. The keyframe animation locks
       pointer-events to "none" for the first 350ms so the opening tap can't reach
       it. After that window, real tap-outside-to-close works as expected. */
    .etrans-notification-overlay[b-i67h1sbr3u] {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.4);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        z-index: 1099;
        pointer-events: none;
        animation: etrans-overlay-arm-b-i67h1sbr3u 350ms forwards;
    }

    .etrans-tenant-info[b-i67h1sbr3u] {
        display: none;
    }
}

@keyframes etrans-overlay-arm-b-i67h1sbr3u {
    0%, 99% { pointer-events: none; }
    100%    { pointer-events: auto; }
}

/* Desktop: overlay is rendered (when open) but should be invisible — the panel is a
   popover, not a modal, and clicking outside is handled by existing logic. */
@media (min-width: 769px) {
    .etrans-notification-overlay[b-i67h1sbr3u] { display: none; }
}

/* Mobile Menu Button Styles */
.etrans-mobile-menu-btn[b-i67h1sbr3u] {
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 1.2rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.etrans-mobile-menu-btn:hover[b-i67h1sbr3u] {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.05);
}

.etrans-mobile-menu-btn:active[b-i67h1sbr3u] {
    transform: scale(0.95);
}

.etrans-mobile-menu-btn i[b-i67h1sbr3u] {
    transition: transform 0.2s ease;
}

/* Adjust topbar for mobile when sidebar is hidden */
@media (max-width: 991.98px) {
    .etrans-topbar[b-i67h1sbr3u] {
        left: 0 !important;
    }
    
    .etrans-mobile-menu-btn[b-i67h1sbr3u] {
        display: flex;
    }
}


/* _content/Admin_KA_Transport_Pricing/Components/Pages/404.razor.rz.scp.css */

body[b-qwmi3qckt1]
{
  background-color:#141019;
  background: radial-gradient(at 50% -20%, #908392, #0d060e) fixed;
}


#handboy[b-qwmi3qckt1]
{
   animation: swing-b-qwmi3qckt1 ease-in-out 1.3s infinite alternate;
    transform-origin: 98% 98%;
    transform-box: fill-box;
    
}


#girllight[b-qwmi3qckt1]
{
   animation: swing-b-qwmi3qckt1 ease-in-out 1.3s infinite alternate;
    transform-origin: 0% 97%;
    transform-box: fill-box;
}

#hairgirl[b-qwmi3qckt1]
{
    animation: swinghair-b-qwmi3qckt1 ease-in-out 1.3s infinite alternate;
   transform-origin: 60% 0%;
    transform-box: fill-box;
  
}

#zero[b-qwmi3qckt1]
{
  transform-origin:bottom;
  transform-box:fill-box;
  
}

.ftr[b-qwmi3qckt1]{
    text-align: center;
    margin-top: 20px;
    position:absolute;
    bottom:20px;
}

.ftr a[b-qwmi3qckt1]{
    color: #fff;
}

/*************swing************/
@keyframes swing-b-qwmi3qckt1 {
    0% { transform: rotate(10deg); }
    100% { transform: rotate(-10deg); }
}


/*************swing hair************/
@keyframes swinghair-b-qwmi3qckt1 {
    0% { transform: rotate(6deg); }
    100% { transform: rotate(-6deg); }
}
/* _content/Admin_KA_Transport_Pricing/Components/Pages/ActivityLog/ActivityLog.razor.rz.scp.css */
.alog-detail[b-3f8liqwkh4] {
    max-width: 460px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* _content/Admin_KA_Transport_Pricing/Components/Pages/BangKeCont/BangKeCont.razor.rz.scp.css */
.bkc-page[b-etz9k9k8lw] { font-size: 12.5px; }
.ct-empty[b-etz9k9k8lw] {
    display: flex; justify-content: center; align-items: center; gap: 8px;
    min-height: 130px; padding: 36px; text-align: center;
    color: var(--tm, #64748b); background: #fff;
    border: 1px dashed var(--b, #e4e8ef); border-radius: 9px;
}
.num[b-etz9k9k8lw] { text-align: right !important; font-variant-numeric: tabular-nums; }
.wrap-text[b-etz9k9k8lw] { white-space: normal !important; min-width: 180px; max-width: 340px; }
.sr-only[b-etz9k9k8lw] {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Header và navigation */
.bkc-head[b-etz9k9k8lw] { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.bkc-title[b-etz9k9k8lw] { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 700; }
.bkc-title i[b-etz9k9k8lw] { color: var(--p, #2563eb); }
.bkc-count[b-etz9k9k8lw] {
    margin-left: auto; padding: 3px 11px; border-radius: 999px;
    color: #475569; background: #f1f5f9; font-size: 12px; font-weight: 700;
}
.bkc-tabs[b-etz9k9k8lw], .bkc-subtabs[b-etz9k9k8lw] { display: flex; gap: 6px; border-bottom: 1px solid var(--b, #e4e8ef); }
.bkc-tabs[b-etz9k9k8lw] { margin-bottom: 12px; }
.bkc-subtabs[b-etz9k9k8lw] { margin: -6px 0 12px; overflow-x: auto; }
.bkc-tab[b-etz9k9k8lw], .bkc-subtab[b-etz9k9k8lw] {
    appearance: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    gap: 7px; height: 34px; padding: 0 14px; margin-bottom: -1px;
    color: var(--tm, #64748b); background: transparent;
    border: 1px solid transparent; border-bottom: 0; border-radius: 7px 7px 0 0;
    font: inherit; font-weight: 600; white-space: nowrap;
}
.bkc-tab[b-etz9k9k8lw] { flex: 1 1 0; }
.bkc-subtab[b-etz9k9k8lw] { min-width: 145px; height: 32px; flex: 0 0 auto; }
.bkc-tab:hover[b-etz9k9k8lw], .bkc-subtab:hover[b-etz9k9k8lw] { color: var(--p, #2563eb); background: #eef2ff; }
.bkc-tab.active[b-etz9k9k8lw], .bkc-subtab.active[b-etz9k9k8lw] {
    color: var(--p, #2563eb); background: #fff;
    border-color: var(--b, #e4e8ef);
}
.bkc-tab:focus-visible[b-etz9k9k8lw], .bkc-subtab:focus-visible[b-etz9k9k8lw] {
    outline: 2px solid rgba(37, 99, 235, .35); outline-offset: -2px;
}

/* Filter và toolbar */
.filter-toggle[b-etz9k9k8lw] { display: none; }
.fbar[b-etz9k9k8lw] {
    display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
    margin-bottom: 12px; padding: 12px 14px;
    background: #fff; border: 1px solid var(--b, #e4e8ef); border-radius: 8px;
}
.fbar .fg[b-etz9k9k8lw] { min-width: 128px; }
.fbar .sw[b-etz9k9k8lw] { min-width: 210px; flex: 1; }
.fbar .sw > div[b-etz9k9k8lw] { position: relative; }
.fbar .sw .fi[b-etz9k9k8lw] { padding-left: 30px; }
.fbar .sw i[b-etz9k9k8lw] {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: #94a3b8; pointer-events: none;
}
.fbar-actions[b-etz9k9k8lw] { display: flex; flex: 1 1 100%; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.toolbar[b-etz9k9k8lw] {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    flex-wrap: wrap; margin-bottom: 10px;
}
.toolbar .hint[b-etz9k9k8lw] { color: var(--tm, #64748b); font-size: 12px; }
.bbar[b-etz9k9k8lw] { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-left: auto; }
.bbar-count[b-etz9k9k8lw] { color: var(--p, #2563eb); font-weight: 700; }
.output-action[b-etz9k9k8lw] { margin-left: auto; }
.bkc-check[b-etz9k9k8lw] {
    width: 16px; height: 16px; margin-right: 6px; vertical-align: middle;
    cursor: pointer; accent-color: var(--p, #2563eb);
}
.act-error[b-etz9k9k8lw] { color: #b91c1c !important; border-color: #fecaca !important; }
.required[b-etz9k9k8lw] { color: #dc2626; }
.textarea[b-etz9k9k8lw] { height: auto !important; padding-top: 8px !important; resize: vertical; }

/* Bảng rộng */
.bkc-wrap[b-etz9k9k8lw] {
    max-height: calc(100vh - 270px); overflow: auto; -webkit-overflow-scrolling: touch;
    background: #fff; border: 1px solid var(--b, #e4e8ef); border-radius: 8px;
}
.bkc-table[b-etz9k9k8lw] { min-width: 2050px; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.freight-table[b-etz9k9k8lw] { min-width: 3000px; }
.cost-table[b-etz9k9k8lw] { min-width: 2900px; }
.error-table[b-etz9k9k8lw] { min-width: 1700px; }
.bkc-table th[b-etz9k9k8lw], .bkc-table td[b-etz9k9k8lw] {
    padding: 8px 10px; white-space: nowrap; border-bottom: 1px solid var(--b, #e4e8ef);
}
.bkc-table th[b-etz9k9k8lw] {
    color: #1e3a5f; background: #dce8f5;
    font-size: 10.5px; font-weight: 800; text-align: left;
    text-transform: uppercase; letter-spacing: .25px;
}
.bkc-table thead th[b-etz9k9k8lw] { position: sticky; top: 0; z-index: 3; border-bottom: 2px solid #b8d0e8; }
.bkc-table thead .group-row th[b-etz9k9k8lw] { top: 0; height: 22px; }
.bkc-table thead .group-row + tr th[b-etz9k9k8lw] { top: 22px; }
.bkc-table th.group[b-etz9k9k8lw] {
    text-align: center; background: #cfe0f2;
    border-left: 2px solid #b8d0e8; border-bottom: 1px solid #b8d0e8;
}
.bkc-table tbody tr:hover td[b-etz9k9k8lw] { background: #f8fbff; }
.bkc-table tbody tr.selected td[b-etz9k9k8lw] { background: #eff6ff; }
.bkc-table tbody tr.row-error td[b-etz9k9k8lw] { background: #fff1f2; }
.bkc-table tbody tr.row-warning td[b-etz9k9k8lw] { background: #fffbeb; }
.bkc-table tbody tr.row-error:hover td[b-etz9k9k8lw], .bkc-table tbody tr.row-warning:hover td[b-etz9k9k8lw] { background: #eef4ff; }
.bkc-table tfoot th[b-etz9k9k8lw], .bkc-table tfoot td[b-etz9k9k8lw] {
    position: sticky; bottom: 0; z-index: 3;
    color: #1e3a5f; background: #dce8f5;
    font-weight: 800; border-top: 2px solid #b8d0e8;
}
.freeze-left[b-etz9k9k8lw] {
    position: sticky !important; left: 0; z-index: 4 !important;
    background: #fff; border-right: 1px solid #d9e1eb;
    box-shadow: 5px 0 9px -4px rgba(15, 23, 42, .25);
}
.freeze-right[b-etz9k9k8lw] {
    position: sticky !important; right: 0; z-index: 4 !important;
    background: #fff; border-left: 1px solid #d9e1eb;
    box-shadow: -5px 0 9px -4px rgba(15, 23, 42, .25);
}
.bkc-table thead .freeze-left[b-etz9k9k8lw], .bkc-table thead .freeze-right[b-etz9k9k8lw],
.bkc-table tfoot .freeze-left[b-etz9k9k8lw], .bkc-table tfoot .freeze-right[b-etz9k9k8lw] {
    z-index: 6 !important; background: #dce8f5;
}
.bkc-table tbody tr.selected .freeze-left[b-etz9k9k8lw], .bkc-table tbody tr.selected .freeze-right[b-etz9k9k8lw] { background: #eff6ff; }
.bkc-table tbody tr.row-error .freeze-left[b-etz9k9k8lw], .bkc-table tbody tr.row-error .freeze-right[b-etz9k9k8lw] { background: #fff1f2; }
.bkc-table tbody tr.row-warning .freeze-left[b-etz9k9k8lw], .bkc-table tbody tr.row-warning .freeze-right[b-etz9k9k8lw] { background: #fffbeb; }
.total[b-etz9k9k8lw] { color: var(--p, #2563eb); font-weight: 800; }
.readonly-cell[b-etz9k9k8lw] { color: #64748b; background: #f8fafc !important; }
.linklike[b-etz9k9k8lw] {
    appearance: none; cursor: pointer; padding: 0; border: 0; background: none;
    color: var(--p, #2563eb); font: inherit; font-weight: 700;
    text-decoration: underline; text-underline-offset: 2px;
}
.linklike:hover[b-etz9k9k8lw] { color: #1d4ed8; }
.cell-input[b-etz9k9k8lw] {
    width: 94px; height: 28px; padding: 0 6px;
    border: 1px solid #cbd5e1; border-radius: 5px; background: #fff;
    color: #1e293b; font: inherit;
}
.cell-input:focus[b-etz9k9k8lw] { outline: 0; border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, .14); }
.size-badge[b-etz9k9k8lw], .ce-badge[b-etz9k9k8lw] {
    display: inline-block; padding: 1px 7px; border-radius: 999px;
    color: #1d4ed8; background: #dbeafe; font-size: 10.5px; font-weight: 800;
}
.ce-badge[b-etz9k9k8lw] { margin-left: 5px; color: #475569; background: #e2e8f0; }
.logic-error[b-etz9k9k8lw] {
    cursor: pointer; padding: 2px 7px;
    color: #b91c1c; background: #fee2e2;
    border: 1px solid #fecaca; border-radius: 999px;
    font: inherit; font-weight: 700;
}
.row-error-summary[b-etz9k9k8lw] { display: flex; gap: 5px; align-items: center; }
.business-error[b-etz9k9k8lw] {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px;
    color: #9a3412; background: #ffedd5; border: 1px solid #fed7aa;
    border-radius: 999px; font-weight: 700;
}
.row-actions[b-etz9k9k8lw] { display: flex; gap: 5px; }

/* Mobile cards */
.bkc-cards[b-etz9k9k8lw] { display: none; }
.bkc-card[b-etz9k9k8lw] {
    display: flex; flex-direction: column; gap: 8px;
    padding: 11px; background: #fff;
    border: 1px solid var(--b, #e4e8ef); border-radius: 10px;
}
.bkc-card.selected[b-etz9k9k8lw] { border-color: #2563eb; box-shadow: 0 0 0 1px #2563eb inset; }
.card-head[b-etz9k9k8lw] { display: flex; align-items: center; gap: 7px; }
.card-status[b-etz9k9k8lw] { margin-left: auto; }
.card-route[b-etz9k9k8lw] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 650; }
.card-route i[b-etz9k9k8lw] { color: #64748b; font-size: 11px; }
.card-chips[b-etz9k9k8lw] { display: flex; gap: 6px; flex-wrap: wrap; }
.card-chips span[b-etz9k9k8lw] { padding: 3px 7px; border-radius: 6px; color: #475569; background: #f1f5f9; }
.card-actions[b-etz9k9k8lw] { display: flex; justify-content: flex-end; padding-top: 2px; border-top: 1px solid #eef2f7; }

/* Chi tiết chuyến */
.detail-layout[b-etz9k9k8lw] { display: flex; gap: 18px; align-items: flex-start; }
.detail-main[b-etz9k9k8lw] { flex: 1; min-width: 0; }
.detail-side[b-etz9k9k8lw] { width: 320px; flex: 0 0 320px; }
.detail-title[b-etz9k9k8lw] {
    margin: 2px 0 9px; padding-bottom: 5px;
    color: var(--p, #2563eb); border-bottom: 2px solid #e0e7ff;
    font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: .04em;
}
.detail-title:not(:first-child)[b-etz9k9k8lw] { margin-top: 18px; }
.detail-grid[b-etz9k9k8lw] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 14px; margin-bottom: 12px; }
.detail-field label[b-etz9k9k8lw] {
    display: block; margin-bottom: 3px;
    color: #64748b; font-size: 10.5px; font-weight: 800; text-transform: uppercase;
}
.detail-field div[b-etz9k9k8lw] { color: #1e293b; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.detail-field .detail-warning[b-etz9k9k8lw] { color: #b45309; }
.detail-field .detail-amount[b-etz9k9k8lw] { color: #1d4ed8; font-size: 14px; }
.readonly-value[b-etz9k9k8lw] {
    min-height: 34px; padding: 8px 10px; color: #475569;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px;
}
.slip-links[b-etz9k9k8lw] { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
.logic-list[b-etz9k9k8lw] { margin: 0; padding-left: 20px; color: #991b1b; }
.logic-list li[b-etz9k9k8lw] { margin-bottom: 6px; }
.logic-list code[b-etz9k9k8lw] {
    padding: 1px 4px; color: #7f1d1d; background: #fee2e2; border-radius: 4px; font-size: 10px;
}
.lock-note[b-etz9k9k8lw], .warn-note[b-etz9k9k8lw] {
    padding: 8px 10px; border: 1px solid #fde68a; border-radius: 7px;
    color: #92400e; background: #fffbeb; font-size: 12px;
}
.detail-note[b-etz9k9k8lw] { padding: 10px; color: #64748b; background: #f8fafc; border: 1px dashed #dbe2ea; border-radius: 7px; }
.fee-table[b-etz9k9k8lw] { width: 100%; border-collapse: collapse; margin-bottom: 9px; font-size: 12px; }
.fee-table th[b-etz9k9k8lw], .fee-table td[b-etz9k9k8lw] { padding: 6px; border-bottom: 1px solid #edf1f5; }
.fee-table th[b-etz9k9k8lw] { color: #64748b; text-align: left; }
.remove-fee[b-etz9k9k8lw] {
    cursor: pointer; padding: 2px 5px; border: 0; border-radius: 4px;
    color: #dc2626; background: transparent;
}
.remove-fee:hover[b-etz9k9k8lw] { background: #fee2e2; }
.fee-editor[b-etz9k9k8lw] { display: flex; flex-direction: column; gap: 7px; padding-top: 10px; border-top: 1px dashed #dbe2ea; }
.fee-editor-row[b-etz9k9k8lw] { display: grid; grid-template-columns: 1fr 110px; gap: 7px; }
.fee-custom-name[b-etz9k9k8lw] { margin-top: 6px; }
.fee-save[b-etz9k9k8lw] { width: 100%; justify-content: center; }
.fee-total[b-etz9k9k8lw] {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 9px 11px; margin-bottom: 10px; border-radius: 8px;
    background: #f8fafc; border: 1px solid var(--b, #e4e8ef);
}
.fee-total span[b-etz9k9k8lw] { color: var(--tm, #64748b); font-size: 12px; }
.fee-total b[b-etz9k9k8lw] { font-size: 15px; font-variant-numeric: tabular-nums; }
.modal-hint[b-etz9k9k8lw] { color: var(--tm, #64748b); font-size: 12px; }

/* Dropdown duyệt, badge tab và popup ảnh dùng cùng ngôn ngữ UI với các bảng kê khác. */
.bkc-dd[b-etz9k9k8lw] { position: relative; display: inline-block; }
.bkc-dd-caret[b-etz9k9k8lw] { margin-left: 3px; font-size: 9px; }
.bkc-dd-menu[b-etz9k9k8lw] {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 500;
    min-width: 190px; padding: 4px; background: #fff;
    border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.14);
}
.bkc-dd-item[b-etz9k9k8lw] {
    display: block; width: 100%; padding: 8px 12px; text-align: left;
    color: #374151; background: none; border: 0; border-radius: 6px;
    font-size: 13px; cursor: pointer;
}
.bkc-dd-item:hover[b-etz9k9k8lw] { background: #f3f4f6; }
.bkc-dd-item:disabled[b-etz9k9k8lw] { color: #9ca3af; cursor: not-allowed; }
.tab-count[b-etz9k9k8lw] {
    display: inline-block; min-width: 18px; padding: 0 5px;
    color: #4b5563; background: #eef1f5; border-radius: 999px;
    font-size: 11px; font-weight: 700; line-height: 17px; text-align: center;
}
.bkc-tab.active .tab-count[b-etz9k9k8lw] { color: #1a5fb4; background: #dbeafe; }
.image-gallery[b-etz9k9k8lw] { display: flex; flex-wrap: wrap; gap: 10px; }
.image-wrap[b-etz9k9k8lw] {
    display: inline-block; overflow: hidden; line-height: 0;
    background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px;
}
.slip-image[b-etz9k9k8lw] { display: block; max-width: 240px; max-height: 320px; cursor: zoom-in; }

@media (max-width: 768px) {
    .bkc-head[b-etz9k9k8lw] { flex-wrap: wrap; }
    .bkc-count[b-etz9k9k8lw] { margin-left: 0; }
    .bkc-tabs[b-etz9k9k8lw] { padding-bottom: 2px; }
    .bkc-tabs[b-etz9k9k8lw] { overflow-x: auto; }
    .bkc-tab[b-etz9k9k8lw] { min-width: 178px; flex: 0 0 auto; }
    .filter-toggle[b-etz9k9k8lw] {
        display: flex; align-items: center; justify-content: center; gap: 7px;
        width: 100%; margin-bottom: 8px;
    }
    .fbar:not(.is-open) .fg:not(.sw)[b-etz9k9k8lw] { display: none; }
    .fbar .fg[b-etz9k9k8lw] { flex: 1 1 100%; min-width: 0 !important; }
    .fbar-actions .btn[b-etz9k9k8lw] { flex: 1 1 auto; justify-content: center; }
    .toolbar[b-etz9k9k8lw] { align-items: stretch; }
    .toolbar .hint[b-etz9k9k8lw] { width: 100%; }
    .bbar[b-etz9k9k8lw] { margin-left: 0; width: 100%; }
    .bbar .btn[b-etz9k9k8lw] { flex: 1 1 auto; justify-content: center; }
    .output-action[b-etz9k9k8lw] { margin-left: 0; flex: 1 1 auto; justify-content: center; }
    .bkc-wrap[b-etz9k9k8lw] { display: none; }
    .bkc-cards[b-etz9k9k8lw] { display: flex; flex-direction: column; gap: 8px; }
    .detail-layout[b-etz9k9k8lw] { flex-direction: column; }
    .detail-side[b-etz9k9k8lw] { width: 100%; flex-basis: auto; }
    .detail-grid[b-etz9k9k8lw] { grid-template-columns: 1fr; }
    input[b-etz9k9k8lw], select[b-etz9k9k8lw], textarea[b-etz9k9k8lw] { font-size: 16px; }
}
/* _content/Admin_KA_Transport_Pricing/Components/Pages/BangKeSaLan/BangKeSaLan.razor.rz.scp.css */
.bkx-page[b-n4k322m2jm] { font-size: 12.5px; }

.ct-empty[b-n4k322m2jm] {
    background: var(--s, #fff); border: 1px dashed var(--b, #e4e8ef); border-radius: 8px;
    padding: 40px; text-align: center; color: var(--tm, #64748b);
}
/* Nút thu/mở bộ lọc hiện ở MỌI bề rộng (BUG tracking #31 — trước đây chỉ có trên mobile).
   Thu gọn = ẩn TOÀN BỘ khối .fbar (kể cả ô Tìm kiếm và hàng nút), không phải ẩn vài field —
   chừa lại một hộp trắng rỗng thì nút coi như không có tác dụng.
   Mặc định desktop MỞ: khi chưa bấm, .fbar không mang class nào nên khối hiện đủ.
   Mobile giữ mặc định THU GỌN qua media query cuối file. */
.filter-toggle[b-n4k322m2jm] { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 5px; }
/* Desktop: mặc định MỞ → bấm 1 lần là ẩn TOÀN BỘ khối lọc (kể cả ô Tìm kiếm và hàng nút).
   Chỉ ẩn vài field sẽ chừa lại một hộp trắng rỗng — nút coi như không có tác dụng. */
.filter-toggle.is-toggled + .fbar[b-n4k322m2jm] { display: none; }
/* Mũi tên: đang mở → chỉ lên; đã thu gọn → chỉ xuống. Xoay bằng CSS để nghĩa của .is-toggled
   đảo được theo breakpoint mà không cần C# biết bề rộng màn hình. */
.filter-toggle .fchev[b-n4k322m2jm] { transition: transform .15s ease; transform: rotate(180deg); }
.filter-toggle.is-toggled .fchev[b-n4k322m2jm] { transform: none; }
.fbar-actions[b-n4k322m2jm] { display: flex; flex: 1 1 100%; gap: 8px; justify-content: flex-end; align-items: flex-end; flex-wrap: wrap; }
.ta-r[b-n4k322m2jm] { text-align: right; }
.ta-c[b-n4k322m2jm] { text-align: center; }

/* ---- Bảng rộng: cuộn ngang/dọc trong khung, đóng băng cột định danh + trạng thái ---- */
.bkx-wrap[b-n4k322m2jm] {
    background: var(--s, #fff); border: 1px solid var(--b, #e4e8ef); border-radius: 8px;
    overflow: auto; -webkit-overflow-scrolling: touch; max-height: calc(100vh - 250px);
}
.bkx-tbl[b-n4k322m2jm] { border-collapse: separate; border-spacing: 0; min-width: 2400px; font-size: 12px; }
.bkx-tbl th[b-n4k322m2jm], .bkx-tbl td[b-n4k322m2jm] { padding: 9px 11px; border-bottom: 1px solid var(--b, #e4e8ef); white-space: nowrap; }
.bkx-tbl th[b-n4k322m2jm] {
    text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px;
    color: var(--tm, #64748b); white-space: nowrap; line-height: 1.2; vertical-align: bottom;
}
/* header 2 tầng dính trên khi cuộn dọc */
.bkx-tbl thead th[b-n4k322m2jm] { position: sticky; z-index: 3; background: #dce8f5; color: #1e3a5f; font-weight: 800; border-bottom: 2px solid #b8d0e8; }
.bkx-tbl thead tr.grp-row th[b-n4k322m2jm] { top: 0; height: 22px; }
.bkx-tbl thead tr:nth-child(2) th[b-n4k322m2jm] { top: 22px; }
/* dải nhóm cột */
.bkx-tbl th.grp[b-n4k322m2jm] {
    text-align: center; font-size: 10px; letter-spacing: .5px; color: #1e3a5f;
    background: #cfe0f2; border-bottom: 1px solid #b8d0e8; border-left: 2px solid #b8d0e8;
}
.bkx-tbl th.g-start[b-n4k322m2jm] { border-left: 2px solid #d6deec; }
/* tổng dính đáy */
/* Ô nhãn dòng tổng là <th scope="row"> (a11y), nên phải style cùng với td. */
.bkx-tbl tfoot td[b-n4k322m2jm], .bkx-tbl tfoot th[b-n4k322m2jm] { position: sticky; bottom: 0; z-index: 3; background: #dce8f5; color: #1e3a5f; font-weight: 800; text-align: left; border-top: 2px solid #b8d0e8; }
/* Không sọc ngựa vằn (bám mockup) — chỉ tint theo trạng thái + hover. */
.bkx-tbl tbody tr:hover td[b-n4k322m2jm] { background: #f8fbff; }

/* cột đóng băng: Mã chuyến (trái), Trạng thái (phải) — vạch + đổ bóng rõ */
.col-freeze-l[b-n4k322m2jm] { position: sticky; left: 0; z-index: 2; background: #fff; border-right: 1px solid #e4e8ef; box-shadow: 5px 0 9px -3px rgba(15,23,42,.16); }
.col-freeze-r[b-n4k322m2jm] { position: sticky; right: 0; z-index: 2; background: #fff; border-left: 1px solid #e4e8ef; box-shadow: -5px 0 9px -3px rgba(15,23,42,.16); }
/* góc header/tổng phải đè lên nội dung cuộn */
.bkx-tbl thead th.col-freeze-l[b-n4k322m2jm], .bkx-tbl thead th.col-freeze-r[b-n4k322m2jm] { z-index: 5; background: #dce8f5; }
.bkx-tbl tfoot td.col-freeze-l[b-n4k322m2jm], .bkx-tbl tfoot td.col-freeze-r[b-n4k322m2jm],
.bkx-tbl tfoot th.col-freeze-l[b-n4k322m2jm], .bkx-tbl tfoot th.col-freeze-r[b-n4k322m2jm] { z-index: 5; background: #dce8f5; }
.bkx-tbl tbody tr:hover td.col-freeze-l[b-n4k322m2jm], .bkx-tbl tbody tr:hover td.col-freeze-r[b-n4k322m2jm] { background: #f8fbff; }

/* ---- Tô nền dòng cảnh báo (mẫu: .row-warn/.row-error/.row-special) ----
   Phải lặp cả selector cột đóng băng: nếu không, quy tắc nth-child(even) td.col-freeze-l
   ở trên có độ ưu tiên cao hơn và hai cột dính vẫn giữ nền trắng/xám → dòng loang lổ.
   Cue phi-màu-đơn: mỗi trạng thái còn có badge riêng ở cột Trạng thái. */
.bkx-tbl tbody tr.row-warn td[b-n4k322m2jm],
.bkx-tbl tbody tr.row-warn td.col-freeze-l[b-n4k322m2jm], .bkx-tbl tbody tr.row-warn td.col-freeze-r[b-n4k322m2jm] { background: #fffbeb; }
.bkx-tbl tbody tr.row-error td[b-n4k322m2jm],
.bkx-tbl tbody tr.row-error td.col-freeze-l[b-n4k322m2jm], .bkx-tbl tbody tr.row-error td.col-freeze-r[b-n4k322m2jm] { background: #fff1f2; }
.bkx-tbl tbody tr.row-special td[b-n4k322m2jm],
.bkx-tbl tbody tr.row-special td.col-freeze-l[b-n4k322m2jm], .bkx-tbl tbody tr.row-special td.col-freeze-r[b-n4k322m2jm] { background: #fff7ed; }
.bkx-tbl tbody tr.row-warn:hover td[b-n4k322m2jm], .bkx-tbl tbody tr.row-error:hover td[b-n4k322m2jm], .bkx-tbl tbody tr.row-special:hover td[b-n4k322m2jm] { background: #eef4ff; }

.bkx-total[b-n4k322m2jm] { color: var(--p, #2563eb); font-weight: 700; }
.bkx-neg[b-n4k322m2jm] { color: var(--err, #dc2626); }
.linklike[b-n4k322m2jm] {
    background: none; border: none; padding: 0; color: var(--p, #2563eb); font: inherit; font-weight: 600;
    cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.linklike:hover[b-n4k322m2jm] { color: var(--p-d, #1d4ed8); }
.linklike:focus-visible[b-n4k322m2jm] {
    outline: 2px solid var(--focus-ring, rgba(99, 102, 241, .9)); outline-offset: 2px; border-radius: 3px;
}

/* nội dung chỉ dành cho trình đọc màn hình (caption bảng) */
.sr-only[b-n4k322m2jm] {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- Mobile cards ---- */
.bkx-cards[b-n4k322m2jm] { display: none; }
.bkx-card[b-n4k322m2jm] { border: 1px solid var(--b, #e4e8ef); border-radius: 10px; padding: 10px 12px; background: #fff; display: flex; flex-direction: column; gap: 8px; }
.bkc-top[b-n4k322m2jm] { display: flex; align-items: center; gap: 8px; }
.bkc-code[b-n4k322m2jm] { font-size: 14px; }
.bkc-status[b-n4k322m2jm] { margin-left: auto; }
.bkc-route[b-n4k322m2jm] { font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
    .bkc-route .fas[b-n4k322m2jm] { color: var(--tm, #64748b); font-size: 11px; }
.bkc-body[b-n4k322m2jm] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bkc-chip[b-n4k322m2jm] { background: #f1f5f9; color: #475569; border-radius: 6px; padding: 2px 8px; font-size: 11.5px; }
.bkc-acts[b-n4k322m2jm] { display: flex; gap: 6px; border-top: 1px dashed var(--b, #e4e8ef); padding-top: 8px; }
    .bkc-acts .btn[b-n4k322m2jm] { flex: 1 1 auto; justify-content: center; }

/* ---- Page header ---- */
.bkx-head[b-n4k322m2jm] { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.bkx-title[b-n4k322m2jm] { font-size: 16px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px; }
    .bkx-title .fas[b-n4k322m2jm] { color: var(--p, #2563eb); }
.bkx-count[b-n4k322m2jm] { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--tm, #64748b); background: #f1f5f9; padding: 3px 12px; border-radius: 20px; }

/* ---- Tabs (mockup #main-page-tabs — folder-pill) ---- */
.bkx-tabs[b-n4k322m2jm] { display: flex; gap: 6px; margin-bottom: 12px; border-bottom: 1px solid var(--b, #e4e8ef); overflow-x: auto; }
.bkx-tab[b-n4k322m2jm] {
    appearance: none; cursor: pointer; height: 34px; flex: 1 1 0; white-space: nowrap;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 0 14px; font: inherit; font-size: 12px; font-weight: 600;
    color: var(--tm, #64748b); background: transparent;
    border: 1px solid transparent; border-bottom: none; border-radius: 7px 7px 0 0; margin-bottom: -1px;
}
.bkx-tab:hover[b-n4k322m2jm] { background: #eef2ff; color: var(--p, #1a5fb4); }
.bkx-tab.active[b-n4k322m2jm] { background: #fff; border-color: var(--b, #e4e8ef); color: var(--p, #1a5fb4); box-shadow: 0 -1px 0 #fff inset; }
.bkx-tab:focus-visible[b-n4k322m2jm] { outline: none; box-shadow: var(--focus-ring, 0 0 0 2px rgba(26,95,180,.35)); }

/* Trạng thái "chưa có API/nguồn dữ liệu" — nói rõ vì sao trống, không để trang câm. */
.tab-todo[b-n4k322m2jm] { display: flex; align-items: flex-start; gap: 10px; text-align: left; }
.tab-todo i[b-n4k322m2jm] { color: #d97706; margin-top: 3px; }
.tab-todo p[b-n4k322m2jm] { margin: 4px 0 0; color: var(--tm, #64748b); font-weight: 400; }
.tab-todo code[b-n4k322m2jm] { background: #f1f5f9; padding: 1px 5px; border-radius: 4px; }
.tab-note[b-n4k322m2jm] { margin: 8px 2px 0; font-size: 12px; color: var(--tm, #64748b); }

/* Dòng CHẶNG (chuyển điểm) của một chuyến — thụt vào để thấy rõ nó thuộc dòng gốc phía trên. */
.leg-badge[b-n4k322m2jm] {
    display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px;
    font-size: 10px; font-weight: 700; color: var(--p, #1a5fb4); background: #e8f0fe;
}
.leg-code[b-n4k322m2jm] { opacity: .75; }

/* Link ảnh phiếu cân cạnh SL nhận / SL giao (spec dòng 1574-1575). */
.pc-link[b-n4k322m2jm] { margin-left: 5px; color: var(--p, #1a5fb4); text-decoration: none; font-size: 11px;
    border: 0; background: none; padding: 0; cursor: pointer; font-family: inherit; }
.pc-link:hover[b-n4k322m2jm] { text-decoration: underline; }
.pc-link:focus-visible[b-n4k322m2jm] { outline: none; box-shadow: var(--focus-ring, 0 0 0 2px rgba(26,95,180,.35)); border-radius: 3px; }

/* ---- Chi tiết modal — bám mẫu doc/HTML 0306/bang-ke-xetai.html (dòng 94, 116-117, 1830+) ----
   Thân chia 2 cột: nội dung chính co giãn + panel phụ phí cố định 320px.
   Field = nhãn (uppercase, nhỏ) NẰM TRÊN giá trị (đậm) — không phải nhãn-trái/giá-trị-phải. */
/* Popup Chi tiết chuyến — bố cục theo mockup doc/HTML 0306/bang-ke-xetai.html (openTripDetail):
   KHỐI TRÊN cuộn riêng, KHỐI DƯỚI chia 2 cột (Lịch sử rộng | Phụ phí quy đổi hẹp).
   Mockup chốt cứng khối trên 200px cho 15 field; ở đây tối đa 45 field nên dùng max-height
   linh hoạt — vẫn là "khối trên cuộn riêng", nhưng 200px thì không đọc nổi. */
.dwrap2[b-n4k322m2jm] { display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* Ô Tổn thất sửa tay trong popup (mockup: input + đơn vị kg ở cột phải). */
.tt-edit[b-n4k322m2jm] { display: flex; gap: 8px; align-items: center; }
.tt-edit .fi[b-n4k322m2jm] { flex: 1; min-width: 0; text-align: right; }
.tt-unit[b-n4k322m2jm] { font-size: 11.5px; color: var(--tm, #64748b); }
.tt-note[b-n4k322m2jm] { margin-top: 6px; font-size: 11.5px; color: var(--tm, #64748b); }

.dtop[b-n4k322m2jm] { flex: 0 1 auto; max-height: 46%; overflow-y: auto; padding-right: 4px; }
.dbot[b-n4k322m2jm] {
    display: flex; gap: 18px; align-items: stretch; flex: 1; min-height: 0;
    margin-top: 14px; padding-top: 12px; border-top: 2px solid #e0e7ff;
}
.dbot-l[b-n4k322m2jm] { flex: 3; min-width: 0; overflow-y: auto; }
.dbot-r[b-n4k322m2jm] { flex: 2; min-width: 0; overflow-y: auto; }
/* 3 cột như mockup (form-grid repeat(3,1fr)); .fgrid gốc 2 cột giữ nguyên cho nơi khác dùng.
   PHẢI viết .fgrid.fgrid-3: rule .fgrid khai SAU trong file, cùng độ ưu tiên thì nó thắng. */
.fgrid.fgrid-3[b-n4k322m2jm] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dwrap[b-n4k322m2jm] { display: flex; gap: 18px; align-items: flex-start; }
.dcol-main[b-n4k322m2jm] { flex: 1; min-width: 0; }
.dcol-side[b-n4k322m2jm] { width: 320px; flex-shrink: 0; }

.detail-section[b-n4k322m2jm] { margin-bottom: 14px; }
.detail-section-title[b-n4k322m2jm] {
    font-size: 11px; font-weight: 800; color: var(--p, #1a5fb4);
    text-transform: uppercase; letter-spacing: .04em;
    margin-bottom: 8px; padding-bottom: 5px; border-bottom: 2px solid #e0e7ff;
}

.fgrid[b-n4k322m2jm] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.fld label[b-n4k322m2jm] {
    display: block; font-size: 11px; font-weight: 800; color: var(--tm, #64748b);
    text-transform: uppercase; margin-bottom: 4px;
}
/* tabular-nums: chữ số cùng bề rộng → số liệu giữa các field thẳng hàng nhau. */
.fld-v[b-n4k322m2jm] { font-size: 12.5px; font-weight: 700; color: var(--tx, #1c2235); font-variant-numeric: tabular-nums; }
.fld-warn[b-n4k322m2jm] { color: #b45309; font-weight: 800; }
.fld-amount[b-n4k322m2jm] { color: #1565c0; font-weight: 800; }


.dnote[b-n4k322m2jm] {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 10px 12px; border-radius: 8px; font-size: 12.5px;
    background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
}
.dnote i[b-n4k322m2jm] { margin-top: 2px; }

@media (max-width: 768px) {
    .filter-toggle[b-n4k322m2jm] { display: flex; justify-content: center; width: 100%; margin-bottom: 5px; }
    .bkx-toggles[b-n4k322m2jm] { margin-left: 0; width: 100%; gap: 10px; }
    .bkx-wrap[b-n4k322m2jm] { display: none; }
    .bkx-cards[b-n4k322m2jm] { display: flex; flex-direction: column; gap: 8px; }
    .fbar[b-n4k322m2jm] { padding: 12px; gap: 8px; }
    .fbar .fg[b-n4k322m2jm] { flex: 1 1 100% !important; min-width: 0 !important; max-width: none !important; }
    /* Mobile: mặc định THU GỌN — CÙNG class .is-toggled nhưng NGHĨA ĐẢO LẠI (bấm = mở).
       Nhờ vậy lần bấm đầu luôn đổi trạng thái ở cả hai breakpoint.
       KHÁC desktop một điểm: thu gọn ở mobile vẫn CHỪA ô Tìm kiếm (.sw) + hàng nút, để tìm kiếm
       luôn dùng được mà không phải mở cả khối lọc trên màn hình nhỏ. */
    .filter-toggle.is-toggled + .fbar[b-n4k322m2jm] { display: flex; }
    .filter-toggle:not(.is-toggled) + .fbar .fg:not(.sw)[b-n4k322m2jm] { display: none; }
    .filter-toggle .fchev[b-n4k322m2jm] { transform: none; }
    .filter-toggle.is-toggled .fchev[b-n4k322m2jm] { transform: rotate(180deg); }
    .fbar-actions .btn[b-n4k322m2jm] { flex: 1 1 auto; justify-content: center; }
    input[b-n4k322m2jm], textarea[b-n4k322m2jm], select[b-n4k322m2jm] { font-size: 16px; }
    .btn[b-n4k322m2jm] { min-height: 40px; }
    /* Mobile: 2 cột của modal chi tiết xếp chồng, lưới field về 1 cột. */
    .dwrap[b-n4k322m2jm] { flex-direction: column; }
    .dcol-side[b-n4k322m2jm] { width: 100%; }
    /* Mobile: bỏ chia đôi, xếp chồng và để cả popup cuộn một mạch. */
    .dtop[b-n4k322m2jm] { max-height: none; overflow: visible; }
    .dbot[b-n4k322m2jm] { flex-direction: column; gap: 10px; }
    .dbot-l[b-n4k322m2jm], .dbot-r[b-n4k322m2jm] { overflow: visible; }
    .fgrid.fgrid-3[b-n4k322m2jm] { grid-template-columns: 1fr; }
    .fgrid[b-n4k322m2jm] { grid-template-columns: 1fr; }
    .md[b-n4k322m2jm] { max-width: 100vw; max-height: 92vh; max-height: 92dvh; border-radius: 12px 12px 0 0; }
    .mf[b-n4k322m2jm] { flex-wrap: wrap; }
        .mf .btn[b-n4k322m2jm] { flex: 1 1 auto; justify-content: center; }
}

/* ---- Toolbar (mockup .toolbar) + thanh hành động + checkbox ---- */
.toolbar[b-n4k322m2jm] { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.toolbar .hint[b-n4k322m2jm] { color: var(--tm, #64748b); font-size: 12px; }
.bbar[b-n4k322m2jm] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.bbar-cnt[b-n4k322m2jm] { font-weight: 600; color: var(--p, #1a5fb4); }
.bkx-chk[b-n4k322m2jm] { width: 16px; height: 16px; vertical-align: middle; margin-right: 6px; cursor: pointer; accent-color: var(--p, #2563eb); }
.bkx-tbl tbody tr.sel > td[b-n4k322m2jm] { background: var(--p-050, #eff6ff); }
.bkx-card.sel[b-n4k322m2jm] { border-color: var(--p, #2563eb); box-shadow: 0 0 0 1px var(--p, #2563eb) inset; }
.req[b-n4k322m2jm] { color: #dc2626; }

/* ---- Sub-tab Đầu vào / Đầu ra (folder-pill như mockup, hàng 2) + badge Nội bộ ---- */
.bkx-subtabs[b-n4k322m2jm] { display: flex; gap: 6px; margin: -6px 0 12px; border-bottom: 1px solid var(--b, #e4e8ef); }
.bkx-subtab[b-n4k322m2jm] {
    appearance: none; cursor: pointer; height: 32px; padding: 0 16px;
    display: inline-flex; align-items: center; font: inherit; font-size: 12px; font-weight: 600;
    color: var(--tm, #64748b); background: transparent;
    border: 1px solid transparent; border-bottom: none; border-radius: 7px 7px 0 0; margin-bottom: -1px;
}
.bkx-subtab:hover[b-n4k322m2jm] { background: #eef2ff; color: var(--p, #1a5fb4); }
.bkx-subtab.active[b-n4k322m2jm] { background: #fff; border-color: var(--b, #e4e8ef); color: var(--p, #1a5fb4); box-shadow: 0 -1px 0 #fff inset; }
.fbar[b-n4k322m2jm] { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; background: var(--s, #fff); border: 1px solid var(--b, #e4e8ef); border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; }
.noibo-badge[b-n4k322m2jm] { display: inline-block; margin-left: 6px; padding: 1px 7px; font-size: 11px; font-weight: 600; color: #6b7280; background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 999px; white-space: nowrap; }

/* Nút Ẩn/hiện cột + số cột */
.bkx-colbtn[b-n4k322m2jm] { margin-left: auto; }
/* BUG tracking #33 — nhóm tick ẩn/hiện bảng (chi tiết + 3 bảng tổng hợp). */
.bkx-toggles[b-n4k322m2jm] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-left: 12px; }
.bkx-tg[b-n4k322m2jm] { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--tm, #64748b); cursor: pointer; white-space: nowrap; }
.bkx-tg input[b-n4k322m2jm] { width: 14px; height: 14px; accent-color: var(--p, #2563eb); cursor: pointer; }
.bkx-colcount[b-n4k322m2jm] { display: inline-block; margin-left: 4px; padding: 0 6px; font-size: 11px; font-weight: 700; color: #6b7280; background: #f3f4f6; border-radius: 999px; }

/* Modal chọn cột */
.colcfg[b-n4k322m2jm] { display: flex; flex-direction: column; gap: 14px; }
.colcfg-lock[b-n4k322m2jm] { font-size: 12.5px; color: #6b7280; background: #f8fafc; border: 1px solid #eef2f7; border-radius: 8px; padding: 8px 11px; }
.colcfg-lock i[b-n4k322m2jm] { color: #94a3b8; margin-right: 5px; }
.colcfg-grp[b-n4k322m2jm] { display: flex; flex-direction: column; }
.colcfg-gh[b-n4k322m2jm] { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; font-weight: 700; color: #94a3b8; margin-bottom: 7px; }
.colcfg-items[b-n4k322m2jm] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px; }
.colcfg-item[b-n4k322m2jm] { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; padding: 3px 0; }
.colcfg-item input[b-n4k322m2jm] { width: 15px; height: 15px; cursor: pointer; flex: none; }
@media (max-width: 560px) { .colcfg-items[b-n4k322m2jm] { grid-template-columns: 1fr; } }

/* Hyperlink chứng từ ở cột/field Đơn giá tuyến */
.ct-link[b-n4k322m2jm] { color: var(--p, #1a5fb4); text-decoration: none; font-weight: 600; white-space: nowrap; }
.ct-link:hover[b-n4k322m2jm] { text-decoration: underline; }
.ct-link i[b-n4k322m2jm] { font-size: 10px; opacity: .7; margin-left: 2px; }

/* Phụ phí quy đổi (modal chi tiết) */

/* Nút Duyệt GỘP (dropdown 3 mục — bám mẫu BA) */
.bkx-dd[b-n4k322m2jm] { position: relative; display: inline-block; }
.bkx-dd-caret[b-n4k322m2jm] { font-size: 9px; margin-left: 3px; }
.bkx-dd-menu[b-n4k322m2jm] { position: absolute; top: calc(100% + 4px); left: 0; z-index: 500; min-width: 190px;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 4px; }
.bkx-dd-item[b-n4k322m2jm] { display: block; width: 100%; text-align: left; padding: 8px 12px; border: 0; background: none;
    font-size: 13px; color: #374151; border-radius: 6px; cursor: pointer; }
.bkx-dd-item:hover[b-n4k322m2jm] { background: #f3f4f6; }

/* Popup ảnh phiếu cân (gallery — bấm ảnh mở đầy đủ) */
.pc-gallery[b-n4k322m2jm] { display: flex; flex-wrap: wrap; gap: 10px; }
.pc-img-wrap[b-n4k322m2jm] { display: inline-block; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; line-height: 0; background: #f9fafb; }
.pc-img[b-n4k322m2jm] { max-width: 240px; max-height: 320px; display: block; cursor: zoom-in; }

/* Badge đếm trên tab (bám mẫu BA) */
.tab-count[b-n4k322m2jm] { display: inline-block; margin-left: 6px; min-width: 18px; padding: 0 5px; font-size: 11px; font-weight: 700;
    line-height: 17px; text-align: center; color: #4b5563; background: #eef1f5; border-radius: 999px; vertical-align: middle; }
.bkx-tab.active .tab-count[b-n4k322m2jm] { background: #dbeafe; color: #1a5fb4; }

/* Nút mở khối tổng hợp (bảng nằm trong BangKeSummaryPanel — CSS tự chứa bên đó). */
.bkx-sum[b-n4k322m2jm] { margin-top: 18px; }
.bkx-sum-toggle[b-n4k322m2jm] { width: 100%; justify-content: flex-start; gap: 8px; font-weight: 700; }
.bkx-sum-cnt[b-n4k322m2jm] { margin-left: auto; font-weight: 500; color: var(--tm, #64748b); font-size: 12px; }
/* _content/Admin_KA_Transport_Pricing/Components/Pages/BangKeTauChuot/BangKeTauChuot.razor.rz.scp.css */
.bkx-page[b-ln4kig3moy] { font-size: 12.5px; }

.ct-empty[b-ln4kig3moy] {
    background: var(--s, #fff); border: 1px dashed var(--b, #e4e8ef); border-radius: 8px;
    padding: 40px; text-align: center; color: var(--tm, #64748b);
}
/* Nút thu/mở bộ lọc hiện ở MỌI bề rộng (BUG tracking #31 — trước đây chỉ có trên mobile).
   Thu gọn = ẩn TOÀN BỘ khối .fbar (kể cả ô Tìm kiếm và hàng nút), không phải ẩn vài field —
   chừa lại một hộp trắng rỗng thì nút coi như không có tác dụng.
   Mặc định desktop MỞ: khi chưa bấm, .fbar không mang class nào nên khối hiện đủ.
   Mobile giữ mặc định THU GỌN qua media query cuối file. */
.filter-toggle[b-ln4kig3moy] { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 5px; }
/* Desktop: mặc định MỞ → bấm 1 lần là ẩn TOÀN BỘ khối lọc (kể cả ô Tìm kiếm và hàng nút).
   Chỉ ẩn vài field sẽ chừa lại một hộp trắng rỗng — nút coi như không có tác dụng. */
.filter-toggle.is-toggled + .fbar[b-ln4kig3moy] { display: none; }
/* Mũi tên: đang mở → chỉ lên; đã thu gọn → chỉ xuống. Xoay bằng CSS để nghĩa của .is-toggled
   đảo được theo breakpoint mà không cần C# biết bề rộng màn hình. */
.filter-toggle .fchev[b-ln4kig3moy] { transition: transform .15s ease; transform: rotate(180deg); }
.filter-toggle.is-toggled .fchev[b-ln4kig3moy] { transform: none; }
.fbar-actions[b-ln4kig3moy] { display: flex; flex: 1 1 100%; gap: 8px; justify-content: flex-end; align-items: flex-end; flex-wrap: wrap; }
.ta-r[b-ln4kig3moy] { text-align: right; }
.ta-c[b-ln4kig3moy] { text-align: center; }

/* ---- Bảng rộng: cuộn ngang/dọc trong khung, đóng băng cột định danh + trạng thái ---- */
.bkx-wrap[b-ln4kig3moy] {
    background: var(--s, #fff); border: 1px solid var(--b, #e4e8ef); border-radius: 8px;
    overflow: auto; -webkit-overflow-scrolling: touch; max-height: calc(100vh - 250px);
}
.bkx-tbl[b-ln4kig3moy] { border-collapse: separate; border-spacing: 0; min-width: 2400px; font-size: 12px; }
.bkx-tbl th[b-ln4kig3moy], .bkx-tbl td[b-ln4kig3moy] { padding: 9px 11px; border-bottom: 1px solid var(--b, #e4e8ef); white-space: nowrap; }
.bkx-tbl th[b-ln4kig3moy] {
    text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px;
    color: var(--tm, #64748b); white-space: nowrap; line-height: 1.2; vertical-align: bottom;
}
/* header 2 tầng dính trên khi cuộn dọc */
.bkx-tbl thead th[b-ln4kig3moy] { position: sticky; z-index: 3; background: #dce8f5; color: #1e3a5f; font-weight: 800; border-bottom: 2px solid #b8d0e8; }
.bkx-tbl thead tr.grp-row th[b-ln4kig3moy] { top: 0; height: 22px; }
.bkx-tbl thead tr:nth-child(2) th[b-ln4kig3moy] { top: 22px; }
/* dải nhóm cột */
.bkx-tbl th.grp[b-ln4kig3moy] {
    text-align: center; font-size: 10px; letter-spacing: .5px; color: #1e3a5f;
    background: #cfe0f2; border-bottom: 1px solid #b8d0e8; border-left: 2px solid #b8d0e8;
}
.bkx-tbl th.g-start[b-ln4kig3moy] { border-left: 2px solid #d6deec; }
/* tổng dính đáy */
/* Ô nhãn dòng tổng là <th scope="row"> (a11y), nên phải style cùng với td. */
.bkx-tbl tfoot td[b-ln4kig3moy], .bkx-tbl tfoot th[b-ln4kig3moy] { position: sticky; bottom: 0; z-index: 3; background: #dce8f5; color: #1e3a5f; font-weight: 800; text-align: left; border-top: 2px solid #b8d0e8; }
/* Không sọc ngựa vằn (bám mockup) — chỉ tint theo trạng thái + hover. */
.bkx-tbl tbody tr:hover td[b-ln4kig3moy] { background: #f8fbff; }

/* cột đóng băng: Mã chuyến (trái), Trạng thái (phải) — vạch + đổ bóng rõ */
.col-freeze-l[b-ln4kig3moy] { position: sticky; left: 0; z-index: 2; background: #fff; border-right: 1px solid #e4e8ef; box-shadow: 5px 0 9px -3px rgba(15,23,42,.16); }
.col-freeze-r[b-ln4kig3moy] { position: sticky; right: 0; z-index: 2; background: #fff; border-left: 1px solid #e4e8ef; box-shadow: -5px 0 9px -3px rgba(15,23,42,.16); }
/* góc header/tổng phải đè lên nội dung cuộn */
.bkx-tbl thead th.col-freeze-l[b-ln4kig3moy], .bkx-tbl thead th.col-freeze-r[b-ln4kig3moy] { z-index: 5; background: #dce8f5; }
.bkx-tbl tfoot td.col-freeze-l[b-ln4kig3moy], .bkx-tbl tfoot td.col-freeze-r[b-ln4kig3moy],
.bkx-tbl tfoot th.col-freeze-l[b-ln4kig3moy], .bkx-tbl tfoot th.col-freeze-r[b-ln4kig3moy] { z-index: 5; background: #dce8f5; }
.bkx-tbl tbody tr:hover td.col-freeze-l[b-ln4kig3moy], .bkx-tbl tbody tr:hover td.col-freeze-r[b-ln4kig3moy] { background: #f8fbff; }

/* ---- Tô nền dòng cảnh báo (mẫu: .row-warn/.row-error/.row-special) ----
   Phải lặp cả selector cột đóng băng: nếu không, quy tắc nth-child(even) td.col-freeze-l
   ở trên có độ ưu tiên cao hơn và hai cột dính vẫn giữ nền trắng/xám → dòng loang lổ.
   Cue phi-màu-đơn: mỗi trạng thái còn có badge riêng ở cột Trạng thái. */
.bkx-tbl tbody tr.row-warn td[b-ln4kig3moy],
.bkx-tbl tbody tr.row-warn td.col-freeze-l[b-ln4kig3moy], .bkx-tbl tbody tr.row-warn td.col-freeze-r[b-ln4kig3moy] { background: #fffbeb; }
.bkx-tbl tbody tr.row-error td[b-ln4kig3moy],
.bkx-tbl tbody tr.row-error td.col-freeze-l[b-ln4kig3moy], .bkx-tbl tbody tr.row-error td.col-freeze-r[b-ln4kig3moy] { background: #fff1f2; }
.bkx-tbl tbody tr.row-special td[b-ln4kig3moy],
.bkx-tbl tbody tr.row-special td.col-freeze-l[b-ln4kig3moy], .bkx-tbl tbody tr.row-special td.col-freeze-r[b-ln4kig3moy] { background: #fff7ed; }
.bkx-tbl tbody tr.row-warn:hover td[b-ln4kig3moy], .bkx-tbl tbody tr.row-error:hover td[b-ln4kig3moy], .bkx-tbl tbody tr.row-special:hover td[b-ln4kig3moy] { background: #eef4ff; }

.bkx-total[b-ln4kig3moy] { color: var(--p, #2563eb); font-weight: 700; }
.bkx-neg[b-ln4kig3moy] { color: var(--err, #dc2626); }
.linklike[b-ln4kig3moy] {
    background: none; border: none; padding: 0; color: var(--p, #2563eb); font: inherit; font-weight: 600;
    cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.linklike:hover[b-ln4kig3moy] { color: var(--p-d, #1d4ed8); }
.linklike:focus-visible[b-ln4kig3moy] {
    outline: 2px solid var(--focus-ring, rgba(99, 102, 241, .9)); outline-offset: 2px; border-radius: 3px;
}

/* nội dung chỉ dành cho trình đọc màn hình (caption bảng) */
.sr-only[b-ln4kig3moy] {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- Mobile cards ---- */
.bkx-cards[b-ln4kig3moy] { display: none; }
.bkx-card[b-ln4kig3moy] { border: 1px solid var(--b, #e4e8ef); border-radius: 10px; padding: 10px 12px; background: #fff; display: flex; flex-direction: column; gap: 8px; }
.bkc-top[b-ln4kig3moy] { display: flex; align-items: center; gap: 8px; }
.bkc-code[b-ln4kig3moy] { font-size: 14px; }
.bkc-status[b-ln4kig3moy] { margin-left: auto; }
.bkc-route[b-ln4kig3moy] { font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
    .bkc-route .fas[b-ln4kig3moy] { color: var(--tm, #64748b); font-size: 11px; }
.bkc-body[b-ln4kig3moy] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bkc-chip[b-ln4kig3moy] { background: #f1f5f9; color: #475569; border-radius: 6px; padding: 2px 8px; font-size: 11.5px; }
.bkc-acts[b-ln4kig3moy] { display: flex; gap: 6px; border-top: 1px dashed var(--b, #e4e8ef); padding-top: 8px; }
    .bkc-acts .btn[b-ln4kig3moy] { flex: 1 1 auto; justify-content: center; }

/* ---- Page header ---- */
.bkx-head[b-ln4kig3moy] { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.bkx-title[b-ln4kig3moy] { font-size: 16px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px; }
    .bkx-title .fas[b-ln4kig3moy] { color: var(--p, #2563eb); }
.bkx-count[b-ln4kig3moy] { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--tm, #64748b); background: #f1f5f9; padding: 3px 12px; border-radius: 20px; }

/* ---- Tabs (mockup #main-page-tabs — folder-pill) ---- */
.bkx-tabs[b-ln4kig3moy] { display: flex; gap: 6px; margin-bottom: 12px; border-bottom: 1px solid var(--b, #e4e8ef); overflow-x: auto; }
.bkx-tab[b-ln4kig3moy] {
    appearance: none; cursor: pointer; height: 34px; flex: 1 1 0; white-space: nowrap;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 0 14px; font: inherit; font-size: 12px; font-weight: 600;
    color: var(--tm, #64748b); background: transparent;
    border: 1px solid transparent; border-bottom: none; border-radius: 7px 7px 0 0; margin-bottom: -1px;
}
.bkx-tab:hover[b-ln4kig3moy] { background: #eef2ff; color: var(--p, #1a5fb4); }
.bkx-tab.active[b-ln4kig3moy] { background: #fff; border-color: var(--b, #e4e8ef); color: var(--p, #1a5fb4); box-shadow: 0 -1px 0 #fff inset; }
.bkx-tab:focus-visible[b-ln4kig3moy] { outline: none; box-shadow: var(--focus-ring, 0 0 0 2px rgba(26,95,180,.35)); }

/* Trạng thái "chưa có API/nguồn dữ liệu" — nói rõ vì sao trống, không để trang câm. */
.tab-todo[b-ln4kig3moy] { display: flex; align-items: flex-start; gap: 10px; text-align: left; }
.tab-todo i[b-ln4kig3moy] { color: #d97706; margin-top: 3px; }
.tab-todo p[b-ln4kig3moy] { margin: 4px 0 0; color: var(--tm, #64748b); font-weight: 400; }
.tab-todo code[b-ln4kig3moy] { background: #f1f5f9; padding: 1px 5px; border-radius: 4px; }
.tab-note[b-ln4kig3moy] { margin: 8px 2px 0; font-size: 12px; color: var(--tm, #64748b); }

/* Dòng CHẶNG (chuyển điểm) của một chuyến — thụt vào để thấy rõ nó thuộc dòng gốc phía trên. */
.leg-badge[b-ln4kig3moy] {
    display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px;
    font-size: 10px; font-weight: 700; color: var(--p, #1a5fb4); background: #e8f0fe;
}
.leg-code[b-ln4kig3moy] { opacity: .75; }

/* Link ảnh phiếu cân cạnh SL nhận / SL giao (spec dòng 1574-1575). */
.pc-link[b-ln4kig3moy] { margin-left: 5px; color: var(--p, #1a5fb4); text-decoration: none; font-size: 11px;
    border: 0; background: none; padding: 0; cursor: pointer; font-family: inherit; }
.pc-link:hover[b-ln4kig3moy] { text-decoration: underline; }
.pc-link:focus-visible[b-ln4kig3moy] { outline: none; box-shadow: var(--focus-ring, 0 0 0 2px rgba(26,95,180,.35)); border-radius: 3px; }

/* ---- Chi tiết modal — bám mẫu doc/HTML 0306/bang-ke-xetai.html (dòng 94, 116-117, 1830+) ----
   Thân chia 2 cột: nội dung chính co giãn + panel phụ phí cố định 320px.
   Field = nhãn (uppercase, nhỏ) NẰM TRÊN giá trị (đậm) — không phải nhãn-trái/giá-trị-phải. */
/* Popup Chi tiết chuyến — bố cục theo mockup doc/HTML 0306/bang-ke-xetai.html (openTripDetail):
   KHỐI TRÊN cuộn riêng, KHỐI DƯỚI chia 2 cột (Lịch sử rộng | Phụ phí quy đổi hẹp).
   Mockup chốt cứng khối trên 200px cho 15 field; ở đây tối đa 45 field nên dùng max-height
   linh hoạt — vẫn là "khối trên cuộn riêng", nhưng 200px thì không đọc nổi. */
.dwrap2[b-ln4kig3moy] { display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* Ô Tổn thất sửa tay trong popup (mockup: input + đơn vị kg ở cột phải). */
.tt-edit[b-ln4kig3moy] { display: flex; gap: 8px; align-items: center; }
.tt-edit .fi[b-ln4kig3moy] { flex: 1; min-width: 0; text-align: right; }
.tt-unit[b-ln4kig3moy] { font-size: 11.5px; color: var(--tm, #64748b); }
.tt-note[b-ln4kig3moy] { margin-top: 6px; font-size: 11.5px; color: var(--tm, #64748b); }

.dtop[b-ln4kig3moy] { flex: 0 1 auto; max-height: 46%; overflow-y: auto; padding-right: 4px; }
.dbot[b-ln4kig3moy] {
    display: flex; gap: 18px; align-items: stretch; flex: 1; min-height: 0;
    margin-top: 14px; padding-top: 12px; border-top: 2px solid #e0e7ff;
}
.dbot-l[b-ln4kig3moy] { flex: 3; min-width: 0; overflow-y: auto; }
.dbot-r[b-ln4kig3moy] { flex: 2; min-width: 0; overflow-y: auto; }
/* 3 cột như mockup (form-grid repeat(3,1fr)); .fgrid gốc 2 cột giữ nguyên cho nơi khác dùng.
   PHẢI viết .fgrid.fgrid-3: rule .fgrid khai SAU trong file, cùng độ ưu tiên thì nó thắng. */
.fgrid.fgrid-3[b-ln4kig3moy] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dwrap[b-ln4kig3moy] { display: flex; gap: 18px; align-items: flex-start; }
.dcol-main[b-ln4kig3moy] { flex: 1; min-width: 0; }
.dcol-side[b-ln4kig3moy] { width: 320px; flex-shrink: 0; }

.detail-section[b-ln4kig3moy] { margin-bottom: 14px; }
.detail-section-title[b-ln4kig3moy] {
    font-size: 11px; font-weight: 800; color: var(--p, #1a5fb4);
    text-transform: uppercase; letter-spacing: .04em;
    margin-bottom: 8px; padding-bottom: 5px; border-bottom: 2px solid #e0e7ff;
}

.fgrid[b-ln4kig3moy] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.fld label[b-ln4kig3moy] {
    display: block; font-size: 11px; font-weight: 800; color: var(--tm, #64748b);
    text-transform: uppercase; margin-bottom: 4px;
}
/* tabular-nums: chữ số cùng bề rộng → số liệu giữa các field thẳng hàng nhau. */
.fld-v[b-ln4kig3moy] { font-size: 12.5px; font-weight: 700; color: var(--tx, #1c2235); font-variant-numeric: tabular-nums; }
.fld-warn[b-ln4kig3moy] { color: #b45309; font-weight: 800; }
.fld-amount[b-ln4kig3moy] { color: #1565c0; font-weight: 800; }


.dnote[b-ln4kig3moy] {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 10px 12px; border-radius: 8px; font-size: 12.5px;
    background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
}
.dnote i[b-ln4kig3moy] { margin-top: 2px; }

@media (max-width: 768px) {
    .filter-toggle[b-ln4kig3moy] { display: flex; justify-content: center; width: 100%; margin-bottom: 5px; }
    .bkx-toggles[b-ln4kig3moy] { margin-left: 0; width: 100%; gap: 10px; }
    .bkx-wrap[b-ln4kig3moy] { display: none; }
    .bkx-cards[b-ln4kig3moy] { display: flex; flex-direction: column; gap: 8px; }
    .fbar[b-ln4kig3moy] { padding: 12px; gap: 8px; }
    .fbar .fg[b-ln4kig3moy] { flex: 1 1 100% !important; min-width: 0 !important; max-width: none !important; }
    /* Mobile: mặc định THU GỌN — CÙNG class .is-toggled nhưng NGHĨA ĐẢO LẠI (bấm = mở).
       Nhờ vậy lần bấm đầu luôn đổi trạng thái ở cả hai breakpoint.
       KHÁC desktop một điểm: thu gọn ở mobile vẫn CHỪA ô Tìm kiếm (.sw) + hàng nút, để tìm kiếm
       luôn dùng được mà không phải mở cả khối lọc trên màn hình nhỏ. */
    .filter-toggle.is-toggled + .fbar[b-ln4kig3moy] { display: flex; }
    .filter-toggle:not(.is-toggled) + .fbar .fg:not(.sw)[b-ln4kig3moy] { display: none; }
    .filter-toggle .fchev[b-ln4kig3moy] { transform: none; }
    .filter-toggle.is-toggled .fchev[b-ln4kig3moy] { transform: rotate(180deg); }
    .fbar-actions .btn[b-ln4kig3moy] { flex: 1 1 auto; justify-content: center; }
    input[b-ln4kig3moy], textarea[b-ln4kig3moy], select[b-ln4kig3moy] { font-size: 16px; }
    .btn[b-ln4kig3moy] { min-height: 40px; }
    /* Mobile: 2 cột của modal chi tiết xếp chồng, lưới field về 1 cột. */
    .dwrap[b-ln4kig3moy] { flex-direction: column; }
    .dcol-side[b-ln4kig3moy] { width: 100%; }
    /* Mobile: bỏ chia đôi, xếp chồng và để cả popup cuộn một mạch. */
    .dtop[b-ln4kig3moy] { max-height: none; overflow: visible; }
    .dbot[b-ln4kig3moy] { flex-direction: column; gap: 10px; }
    .dbot-l[b-ln4kig3moy], .dbot-r[b-ln4kig3moy] { overflow: visible; }
    .fgrid.fgrid-3[b-ln4kig3moy] { grid-template-columns: 1fr; }
    .fgrid[b-ln4kig3moy] { grid-template-columns: 1fr; }
    .md[b-ln4kig3moy] { max-width: 100vw; max-height: 92vh; max-height: 92dvh; border-radius: 12px 12px 0 0; }
    .mf[b-ln4kig3moy] { flex-wrap: wrap; }
        .mf .btn[b-ln4kig3moy] { flex: 1 1 auto; justify-content: center; }
}

/* ---- Toolbar (mockup .toolbar) + thanh hành động + checkbox ---- */
.toolbar[b-ln4kig3moy] { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.toolbar .hint[b-ln4kig3moy] { color: var(--tm, #64748b); font-size: 12px; }
.bbar[b-ln4kig3moy] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.bbar-cnt[b-ln4kig3moy] { font-weight: 600; color: var(--p, #1a5fb4); }
.bkx-chk[b-ln4kig3moy] { width: 16px; height: 16px; vertical-align: middle; margin-right: 6px; cursor: pointer; accent-color: var(--p, #2563eb); }
.bkx-tbl tbody tr.sel > td[b-ln4kig3moy] { background: var(--p-050, #eff6ff); }
.bkx-card.sel[b-ln4kig3moy] { border-color: var(--p, #2563eb); box-shadow: 0 0 0 1px var(--p, #2563eb) inset; }
.req[b-ln4kig3moy] { color: #dc2626; }

/* ---- Sub-tab Đầu vào / Đầu ra (folder-pill như mockup, hàng 2) + badge Nội bộ ---- */
.bkx-subtabs[b-ln4kig3moy] { display: flex; gap: 6px; margin: -6px 0 12px; border-bottom: 1px solid var(--b, #e4e8ef); }
.bkx-subtab[b-ln4kig3moy] {
    appearance: none; cursor: pointer; height: 32px; padding: 0 16px;
    display: inline-flex; align-items: center; font: inherit; font-size: 12px; font-weight: 600;
    color: var(--tm, #64748b); background: transparent;
    border: 1px solid transparent; border-bottom: none; border-radius: 7px 7px 0 0; margin-bottom: -1px;
}
.bkx-subtab:hover[b-ln4kig3moy] { background: #eef2ff; color: var(--p, #1a5fb4); }
.bkx-subtab.active[b-ln4kig3moy] { background: #fff; border-color: var(--b, #e4e8ef); color: var(--p, #1a5fb4); box-shadow: 0 -1px 0 #fff inset; }
.fbar[b-ln4kig3moy] { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; background: var(--s, #fff); border: 1px solid var(--b, #e4e8ef); border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; }
.noibo-badge[b-ln4kig3moy] { display: inline-block; margin-left: 6px; padding: 1px 7px; font-size: 11px; font-weight: 600; color: #6b7280; background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 999px; white-space: nowrap; }

/* Nút Ẩn/hiện cột + số cột */
.bkx-colbtn[b-ln4kig3moy] { margin-left: auto; }
/* BUG tracking #33 — nhóm tick ẩn/hiện bảng (chi tiết + 3 bảng tổng hợp). */
.bkx-toggles[b-ln4kig3moy] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-left: 12px; }
.bkx-tg[b-ln4kig3moy] { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--tm, #64748b); cursor: pointer; white-space: nowrap; }
.bkx-tg input[b-ln4kig3moy] { width: 14px; height: 14px; accent-color: var(--p, #2563eb); cursor: pointer; }
.bkx-colcount[b-ln4kig3moy] { display: inline-block; margin-left: 4px; padding: 0 6px; font-size: 11px; font-weight: 700; color: #6b7280; background: #f3f4f6; border-radius: 999px; }

/* Modal chọn cột */
.colcfg[b-ln4kig3moy] { display: flex; flex-direction: column; gap: 14px; }
.colcfg-lock[b-ln4kig3moy] { font-size: 12.5px; color: #6b7280; background: #f8fafc; border: 1px solid #eef2f7; border-radius: 8px; padding: 8px 11px; }
.colcfg-lock i[b-ln4kig3moy] { color: #94a3b8; margin-right: 5px; }
.colcfg-grp[b-ln4kig3moy] { display: flex; flex-direction: column; }
.colcfg-gh[b-ln4kig3moy] { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; font-weight: 700; color: #94a3b8; margin-bottom: 7px; }
.colcfg-items[b-ln4kig3moy] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px; }
.colcfg-item[b-ln4kig3moy] { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; padding: 3px 0; }
.colcfg-item input[b-ln4kig3moy] { width: 15px; height: 15px; cursor: pointer; flex: none; }
@media (max-width: 560px) { .colcfg-items[b-ln4kig3moy] { grid-template-columns: 1fr; } }

/* Hyperlink chứng từ ở cột/field Đơn giá tuyến */
.ct-link[b-ln4kig3moy] { color: var(--p, #1a5fb4); text-decoration: none; font-weight: 600; white-space: nowrap; }
.ct-link:hover[b-ln4kig3moy] { text-decoration: underline; }
.ct-link i[b-ln4kig3moy] { font-size: 10px; opacity: .7; margin-left: 2px; }

/* Phụ phí quy đổi (modal chi tiết) */

/* Nút Duyệt GỘP (dropdown 3 mục — bám mẫu BA) */
.bkx-dd[b-ln4kig3moy] { position: relative; display: inline-block; }
.bkx-dd-caret[b-ln4kig3moy] { font-size: 9px; margin-left: 3px; }
.bkx-dd-menu[b-ln4kig3moy] { position: absolute; top: calc(100% + 4px); left: 0; z-index: 500; min-width: 190px;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 4px; }
.bkx-dd-item[b-ln4kig3moy] { display: block; width: 100%; text-align: left; padding: 8px 12px; border: 0; background: none;
    font-size: 13px; color: #374151; border-radius: 6px; cursor: pointer; }
.bkx-dd-item:hover[b-ln4kig3moy] { background: #f3f4f6; }

/* Popup ảnh phiếu cân (gallery — bấm ảnh mở đầy đủ) */
.pc-gallery[b-ln4kig3moy] { display: flex; flex-wrap: wrap; gap: 10px; }
.pc-img-wrap[b-ln4kig3moy] { display: inline-block; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; line-height: 0; background: #f9fafb; }
.pc-img[b-ln4kig3moy] { max-width: 240px; max-height: 320px; display: block; cursor: zoom-in; }

/* Badge đếm trên tab (bám mẫu BA) */
.tab-count[b-ln4kig3moy] { display: inline-block; margin-left: 6px; min-width: 18px; padding: 0 5px; font-size: 11px; font-weight: 700;
    line-height: 17px; text-align: center; color: #4b5563; background: #eef1f5; border-radius: 999px; vertical-align: middle; }
.bkx-tab.active .tab-count[b-ln4kig3moy] { background: #dbeafe; color: #1a5fb4; }

/* Nút mở khối tổng hợp (bảng nằm trong BangKeSummaryPanel — CSS tự chứa bên đó). */
.bkx-sum[b-ln4kig3moy] { margin-top: 18px; }
.bkx-sum-toggle[b-ln4kig3moy] { width: 100%; justify-content: flex-start; gap: 8px; font-weight: 700; }
.bkx-sum-cnt[b-ln4kig3moy] { margin-left: auto; font-weight: 500; color: var(--tm, #64748b); font-size: 12px; }
/* _content/Admin_KA_Transport_Pricing/Components/Pages/BangKeXeTai/BangKeXeTai.razor.rz.scp.css */
.bkx-page[b-m1aiutjc2a] { font-size: 12.5px; }

.ct-empty[b-m1aiutjc2a] {
    background: var(--s, #fff); border: 1px dashed var(--b, #e4e8ef); border-radius: 8px;
    padding: 40px; text-align: center; color: var(--tm, #64748b);
}
/* Nút thu/mở bộ lọc hiện ở MỌI bề rộng (BUG tracking #31 — trước đây chỉ có trên mobile).
   Thu gọn = ẩn TOÀN BỘ khối .fbar (kể cả ô Tìm kiếm và hàng nút), không phải ẩn vài field —
   chừa lại một hộp trắng rỗng thì nút coi như không có tác dụng.
   Mặc định desktop MỞ: khi chưa bấm, .fbar không mang class nào nên khối hiện đủ.
   Mobile giữ mặc định THU GỌN qua media query cuối file. */
.filter-toggle[b-m1aiutjc2a] { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 5px; }
/* Desktop: mặc định MỞ → bấm 1 lần là ẩn TOÀN BỘ khối lọc (kể cả ô Tìm kiếm và hàng nút).
   Chỉ ẩn vài field sẽ chừa lại một hộp trắng rỗng — nút coi như không có tác dụng. */
.filter-toggle.is-toggled + .fbar[b-m1aiutjc2a] { display: none; }
/* Mũi tên: đang mở → chỉ lên; đã thu gọn → chỉ xuống. Xoay bằng CSS để nghĩa của .is-toggled
   đảo được theo breakpoint mà không cần C# biết bề rộng màn hình. */
.filter-toggle .fchev[b-m1aiutjc2a] { transition: transform .15s ease; transform: rotate(180deg); }
.filter-toggle.is-toggled .fchev[b-m1aiutjc2a] { transform: none; }
.fbar-actions[b-m1aiutjc2a] { display: flex; flex: 1 1 100%; gap: 8px; justify-content: flex-end; align-items: flex-end; flex-wrap: wrap; }
.ta-r[b-m1aiutjc2a] { text-align: right; }
.ta-c[b-m1aiutjc2a] { text-align: center; }

/* ---- Bảng rộng: cuộn ngang/dọc trong khung, đóng băng cột định danh + trạng thái ---- */
.bkx-wrap[b-m1aiutjc2a] {
    background: var(--s, #fff); border: 1px solid var(--b, #e4e8ef); border-radius: 8px;
    overflow: auto; -webkit-overflow-scrolling: touch; max-height: calc(100vh - 250px);
}
.bkx-tbl[b-m1aiutjc2a] { border-collapse: separate; border-spacing: 0; min-width: 2400px; font-size: 12px; }
.bkx-tbl th[b-m1aiutjc2a], .bkx-tbl td[b-m1aiutjc2a] { padding: 9px 11px; border-bottom: 1px solid var(--b, #e4e8ef); white-space: nowrap; }
.bkx-tbl th[b-m1aiutjc2a] {
    text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px;
    color: var(--tm, #64748b); white-space: nowrap; line-height: 1.2; vertical-align: bottom;
}
/* header 2 tầng dính trên khi cuộn dọc */
.bkx-tbl thead th[b-m1aiutjc2a] { position: sticky; z-index: 3; background: #dce8f5; color: #1e3a5f; font-weight: 800; border-bottom: 2px solid #b8d0e8; }
.bkx-tbl thead tr.grp-row th[b-m1aiutjc2a] { top: 0; height: 22px; }
.bkx-tbl thead tr:nth-child(2) th[b-m1aiutjc2a] { top: 22px; }
/* dải nhóm cột */
.bkx-tbl th.grp[b-m1aiutjc2a] {
    text-align: center; font-size: 10px; letter-spacing: .5px; color: #1e3a5f;
    background: #cfe0f2; border-bottom: 1px solid #b8d0e8; border-left: 2px solid #b8d0e8;
}
.bkx-tbl th.g-start[b-m1aiutjc2a] { border-left: 2px solid #d6deec; }
/* tổng dính đáy */
/* Ô nhãn dòng tổng là <th scope="row"> (a11y), nên phải style cùng với td. */
.bkx-tbl tfoot td[b-m1aiutjc2a], .bkx-tbl tfoot th[b-m1aiutjc2a] { position: sticky; bottom: 0; z-index: 3; background: #dce8f5; color: #1e3a5f; font-weight: 800; text-align: left; border-top: 2px solid #b8d0e8; }
/* Không sọc ngựa vằn (bám mockup) — chỉ tint theo trạng thái + hover. */
.bkx-tbl tbody tr:hover td[b-m1aiutjc2a] { background: #f8fbff; }

/* cột đóng băng: Mã chuyến (trái), Trạng thái (phải) — vạch + đổ bóng rõ */
.col-freeze-l[b-m1aiutjc2a] { position: sticky; left: 0; z-index: 2; background: #fff; border-right: 1px solid #e4e8ef; box-shadow: 5px 0 9px -3px rgba(15,23,42,.16); }
.col-freeze-r[b-m1aiutjc2a] { position: sticky; right: 0; z-index: 2; background: #fff; border-left: 1px solid #e4e8ef; box-shadow: -5px 0 9px -3px rgba(15,23,42,.16); }
/* góc header/tổng phải đè lên nội dung cuộn */
.bkx-tbl thead th.col-freeze-l[b-m1aiutjc2a], .bkx-tbl thead th.col-freeze-r[b-m1aiutjc2a] { z-index: 5; background: #dce8f5; }
.bkx-tbl tfoot td.col-freeze-l[b-m1aiutjc2a], .bkx-tbl tfoot td.col-freeze-r[b-m1aiutjc2a],
.bkx-tbl tfoot th.col-freeze-l[b-m1aiutjc2a], .bkx-tbl tfoot th.col-freeze-r[b-m1aiutjc2a] { z-index: 5; background: #dce8f5; }
.bkx-tbl tbody tr:hover td.col-freeze-l[b-m1aiutjc2a], .bkx-tbl tbody tr:hover td.col-freeze-r[b-m1aiutjc2a] { background: #f8fbff; }

/* ---- Tô nền dòng cảnh báo (mẫu: .row-warn/.row-error/.row-special) ----
   Phải lặp cả selector cột đóng băng: nếu không, quy tắc nth-child(even) td.col-freeze-l
   ở trên có độ ưu tiên cao hơn và hai cột dính vẫn giữ nền trắng/xám → dòng loang lổ.
   Cue phi-màu-đơn: mỗi trạng thái còn có badge riêng ở cột Trạng thái. */
.bkx-tbl tbody tr.row-warn td[b-m1aiutjc2a],
.bkx-tbl tbody tr.row-warn td.col-freeze-l[b-m1aiutjc2a], .bkx-tbl tbody tr.row-warn td.col-freeze-r[b-m1aiutjc2a] { background: #fffbeb; }
.bkx-tbl tbody tr.row-error td[b-m1aiutjc2a],
.bkx-tbl tbody tr.row-error td.col-freeze-l[b-m1aiutjc2a], .bkx-tbl tbody tr.row-error td.col-freeze-r[b-m1aiutjc2a] { background: #fff1f2; }
.bkx-tbl tbody tr.row-special td[b-m1aiutjc2a],
.bkx-tbl tbody tr.row-special td.col-freeze-l[b-m1aiutjc2a], .bkx-tbl tbody tr.row-special td.col-freeze-r[b-m1aiutjc2a] { background: #fff7ed; }
.bkx-tbl tbody tr.row-warn:hover td[b-m1aiutjc2a], .bkx-tbl tbody tr.row-error:hover td[b-m1aiutjc2a], .bkx-tbl tbody tr.row-special:hover td[b-m1aiutjc2a] { background: #eef4ff; }

.bkx-total[b-m1aiutjc2a] { color: var(--p, #2563eb); font-weight: 700; }
.bkx-neg[b-m1aiutjc2a] { color: var(--err, #dc2626); }
.linklike[b-m1aiutjc2a] {
    background: none; border: none; padding: 0; color: var(--p, #2563eb); font: inherit; font-weight: 600;
    cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.linklike:hover[b-m1aiutjc2a] { color: var(--p-d, #1d4ed8); }
.linklike:focus-visible[b-m1aiutjc2a] {
    outline: 2px solid var(--focus-ring, rgba(99, 102, 241, .9)); outline-offset: 2px; border-radius: 3px;
}

/* nội dung chỉ dành cho trình đọc màn hình (caption bảng) */
.sr-only[b-m1aiutjc2a] {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- Mobile cards ---- */
.bkx-cards[b-m1aiutjc2a] { display: none; }
.bkx-card[b-m1aiutjc2a] { border: 1px solid var(--b, #e4e8ef); border-radius: 10px; padding: 10px 12px; background: #fff; display: flex; flex-direction: column; gap: 8px; }
.bkc-top[b-m1aiutjc2a] { display: flex; align-items: center; gap: 8px; }
.bkc-code[b-m1aiutjc2a] { font-size: 14px; }
.bkc-status[b-m1aiutjc2a] { margin-left: auto; }
.bkc-route[b-m1aiutjc2a] { font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
    .bkc-route .fas[b-m1aiutjc2a] { color: var(--tm, #64748b); font-size: 11px; }
.bkc-body[b-m1aiutjc2a] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bkc-chip[b-m1aiutjc2a] { background: #f1f5f9; color: #475569; border-radius: 6px; padding: 2px 8px; font-size: 11.5px; }
.bkc-acts[b-m1aiutjc2a] { display: flex; gap: 6px; border-top: 1px dashed var(--b, #e4e8ef); padding-top: 8px; }
    .bkc-acts .btn[b-m1aiutjc2a] { flex: 1 1 auto; justify-content: center; }

/* ---- Page header ---- */
.bkx-head[b-m1aiutjc2a] { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.bkx-title[b-m1aiutjc2a] { font-size: 16px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px; }
    .bkx-title .fas[b-m1aiutjc2a] { color: var(--p, #2563eb); }
.bkx-count[b-m1aiutjc2a] { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--tm, #64748b); background: #f1f5f9; padding: 3px 12px; border-radius: 20px; }

/* ---- Tabs (mockup #main-page-tabs — folder-pill) ---- */
.bkx-tabs[b-m1aiutjc2a] { display: flex; gap: 6px; margin-bottom: 12px; border-bottom: 1px solid var(--b, #e4e8ef); overflow-x: auto; }
.bkx-tab[b-m1aiutjc2a] {
    appearance: none; cursor: pointer; height: 34px; flex: 1 1 0; white-space: nowrap;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 0 14px; font: inherit; font-size: 12px; font-weight: 600;
    color: var(--tm, #64748b); background: transparent;
    border: 1px solid transparent; border-bottom: none; border-radius: 7px 7px 0 0; margin-bottom: -1px;
}
.bkx-tab:hover[b-m1aiutjc2a] { background: #eef2ff; color: var(--p, #1a5fb4); }
.bkx-tab.active[b-m1aiutjc2a] { background: #fff; border-color: var(--b, #e4e8ef); color: var(--p, #1a5fb4); box-shadow: 0 -1px 0 #fff inset; }
.bkx-tab:focus-visible[b-m1aiutjc2a] { outline: none; box-shadow: var(--focus-ring, 0 0 0 2px rgba(26,95,180,.35)); }

/* Trạng thái "chưa có API/nguồn dữ liệu" — nói rõ vì sao trống, không để trang câm. */
.tab-todo[b-m1aiutjc2a] { display: flex; align-items: flex-start; gap: 10px; text-align: left; }
.tab-todo i[b-m1aiutjc2a] { color: #d97706; margin-top: 3px; }
.tab-todo p[b-m1aiutjc2a] { margin: 4px 0 0; color: var(--tm, #64748b); font-weight: 400; }
.tab-todo code[b-m1aiutjc2a] { background: #f1f5f9; padding: 1px 5px; border-radius: 4px; }
.tab-note[b-m1aiutjc2a] { margin: 8px 2px 0; font-size: 12px; color: var(--tm, #64748b); }

/* Dòng CHẶNG (chuyển điểm) của một chuyến — thụt vào để thấy rõ nó thuộc dòng gốc phía trên. */
.leg-badge[b-m1aiutjc2a] {
    display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px;
    font-size: 10px; font-weight: 700; color: var(--p, #1a5fb4); background: #e8f0fe;
}
.leg-code[b-m1aiutjc2a] { opacity: .75; }

/* Link ảnh phiếu cân cạnh SL nhận / SL giao (spec dòng 1574-1575). */
.pc-link[b-m1aiutjc2a] { margin-left: 5px; color: var(--p, #1a5fb4); text-decoration: none; font-size: 11px;
    border: 0; background: none; padding: 0; cursor: pointer; font-family: inherit; }
.pc-link:hover[b-m1aiutjc2a] { text-decoration: underline; }
.pc-link:focus-visible[b-m1aiutjc2a] { outline: none; box-shadow: var(--focus-ring, 0 0 0 2px rgba(26,95,180,.35)); border-radius: 3px; }

/* ---- Chi tiết modal — bám mẫu doc/HTML 0306/bang-ke-xetai.html (dòng 94, 116-117, 1830+) ----
   Thân chia 2 cột: nội dung chính co giãn + panel phụ phí cố định 320px.
   Field = nhãn (uppercase, nhỏ) NẰM TRÊN giá trị (đậm) — không phải nhãn-trái/giá-trị-phải. */
/* Popup Chi tiết chuyến — bố cục theo mockup doc/HTML 0306/bang-ke-xetai.html (openTripDetail):
   KHỐI TRÊN cuộn riêng, KHỐI DƯỚI chia 2 cột (Lịch sử rộng | Phụ phí quy đổi hẹp).
   Mockup chốt cứng khối trên 200px cho 15 field; ở đây tối đa 45 field nên dùng max-height
   linh hoạt — vẫn là "khối trên cuộn riêng", nhưng 200px thì không đọc nổi. */
.dwrap2[b-m1aiutjc2a] { display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* Ô Tổn thất sửa tay trong popup (mockup: input + đơn vị kg ở cột phải). */
.tt-edit[b-m1aiutjc2a] { display: flex; gap: 8px; align-items: center; }
.tt-edit .fi[b-m1aiutjc2a] { flex: 1; min-width: 0; text-align: right; }
.tt-unit[b-m1aiutjc2a] { font-size: 11.5px; color: var(--tm, #64748b); }
.tt-note[b-m1aiutjc2a] { margin-top: 6px; font-size: 11.5px; color: var(--tm, #64748b); }

.dtop[b-m1aiutjc2a] { flex: 0 1 auto; max-height: 46%; overflow-y: auto; padding-right: 4px; }
.dbot[b-m1aiutjc2a] {
    display: flex; gap: 18px; align-items: stretch; flex: 1; min-height: 0;
    margin-top: 14px; padding-top: 12px; border-top: 2px solid #e0e7ff;
}
.dbot-l[b-m1aiutjc2a] { flex: 3; min-width: 0; overflow-y: auto; }
.dbot-r[b-m1aiutjc2a] { flex: 2; min-width: 0; overflow-y: auto; }
/* 3 cột như mockup (form-grid repeat(3,1fr)); .fgrid gốc 2 cột giữ nguyên cho nơi khác dùng.
   PHẢI viết .fgrid.fgrid-3: rule .fgrid khai SAU trong file, cùng độ ưu tiên thì nó thắng. */
.fgrid.fgrid-3[b-m1aiutjc2a] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dwrap[b-m1aiutjc2a] { display: flex; gap: 18px; align-items: flex-start; }
.dcol-main[b-m1aiutjc2a] { flex: 1; min-width: 0; }
.dcol-side[b-m1aiutjc2a] { width: 320px; flex-shrink: 0; }

.detail-section[b-m1aiutjc2a] { margin-bottom: 14px; }
.detail-section-title[b-m1aiutjc2a] {
    font-size: 11px; font-weight: 800; color: var(--p, #1a5fb4);
    text-transform: uppercase; letter-spacing: .04em;
    margin-bottom: 8px; padding-bottom: 5px; border-bottom: 2px solid #e0e7ff;
}

.fgrid[b-m1aiutjc2a] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.fld label[b-m1aiutjc2a] {
    display: block; font-size: 11px; font-weight: 800; color: var(--tm, #64748b);
    text-transform: uppercase; margin-bottom: 4px;
}
/* tabular-nums: chữ số cùng bề rộng → số liệu giữa các field thẳng hàng nhau. */
.fld-v[b-m1aiutjc2a] { font-size: 12.5px; font-weight: 700; color: var(--tx, #1c2235); font-variant-numeric: tabular-nums; }
.fld-warn[b-m1aiutjc2a] { color: #b45309; font-weight: 800; }
.fld-amount[b-m1aiutjc2a] { color: #1565c0; font-weight: 800; }


.dnote[b-m1aiutjc2a] {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 10px 12px; border-radius: 8px; font-size: 12.5px;
    background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
}
.dnote i[b-m1aiutjc2a] { margin-top: 2px; }

@media (max-width: 768px) {
    .filter-toggle[b-m1aiutjc2a] { display: flex; justify-content: center; width: 100%; margin-bottom: 5px; }
    .bkx-toggles[b-m1aiutjc2a] { margin-left: 0; width: 100%; gap: 10px; }
    .bkx-wrap[b-m1aiutjc2a] { display: none; }
    .bkx-cards[b-m1aiutjc2a] { display: flex; flex-direction: column; gap: 8px; }
    .fbar[b-m1aiutjc2a] { padding: 12px; gap: 8px; }
    .fbar .fg[b-m1aiutjc2a] { flex: 1 1 100% !important; min-width: 0 !important; max-width: none !important; }
    /* Mobile: mặc định THU GỌN — CÙNG class .is-toggled nhưng NGHĨA ĐẢO LẠI (bấm = mở).
       Nhờ vậy lần bấm đầu luôn đổi trạng thái ở cả hai breakpoint.
       KHÁC desktop một điểm: thu gọn ở mobile vẫn CHỪA ô Tìm kiếm (.sw) + hàng nút, để tìm kiếm
       luôn dùng được mà không phải mở cả khối lọc trên màn hình nhỏ. */
    .filter-toggle.is-toggled + .fbar[b-m1aiutjc2a] { display: flex; }
    .filter-toggle:not(.is-toggled) + .fbar .fg:not(.sw)[b-m1aiutjc2a] { display: none; }
    .filter-toggle .fchev[b-m1aiutjc2a] { transform: none; }
    .filter-toggle.is-toggled .fchev[b-m1aiutjc2a] { transform: rotate(180deg); }
    .fbar-actions .btn[b-m1aiutjc2a] { flex: 1 1 auto; justify-content: center; }
    input[b-m1aiutjc2a], textarea[b-m1aiutjc2a], select[b-m1aiutjc2a] { font-size: 16px; }
    .btn[b-m1aiutjc2a] { min-height: 40px; }
    /* Mobile: 2 cột của modal chi tiết xếp chồng, lưới field về 1 cột. */
    .dwrap[b-m1aiutjc2a] { flex-direction: column; }
    .dcol-side[b-m1aiutjc2a] { width: 100%; }
    /* Mobile: bỏ chia đôi, xếp chồng và để cả popup cuộn một mạch. */
    .dtop[b-m1aiutjc2a] { max-height: none; overflow: visible; }
    .dbot[b-m1aiutjc2a] { flex-direction: column; gap: 10px; }
    .dbot-l[b-m1aiutjc2a], .dbot-r[b-m1aiutjc2a] { overflow: visible; }
    .fgrid.fgrid-3[b-m1aiutjc2a] { grid-template-columns: 1fr; }
    .fgrid[b-m1aiutjc2a] { grid-template-columns: 1fr; }
    .md[b-m1aiutjc2a] { max-width: 100vw; max-height: 92vh; max-height: 92dvh; border-radius: 12px 12px 0 0; }
    .mf[b-m1aiutjc2a] { flex-wrap: wrap; }
        .mf .btn[b-m1aiutjc2a] { flex: 1 1 auto; justify-content: center; }
}

/* ---- Toolbar (mockup .toolbar) + thanh hành động + checkbox ---- */
.toolbar[b-m1aiutjc2a] { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.toolbar .hint[b-m1aiutjc2a] { color: var(--tm, #64748b); font-size: 12px; }
.bbar[b-m1aiutjc2a] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.bbar-cnt[b-m1aiutjc2a] { font-weight: 600; color: var(--p, #1a5fb4); }
.bkx-chk[b-m1aiutjc2a] { width: 16px; height: 16px; vertical-align: middle; margin-right: 6px; cursor: pointer; accent-color: var(--p, #2563eb); }
.bkx-tbl tbody tr.sel > td[b-m1aiutjc2a] { background: var(--p-050, #eff6ff); }
.bkx-card.sel[b-m1aiutjc2a] { border-color: var(--p, #2563eb); box-shadow: 0 0 0 1px var(--p, #2563eb) inset; }
.req[b-m1aiutjc2a] { color: #dc2626; }

/* ---- Sub-tab Đầu vào / Đầu ra (folder-pill như mockup, hàng 2) + badge Nội bộ ---- */
.bkx-subtabs[b-m1aiutjc2a] { display: flex; gap: 6px; margin: -6px 0 12px; border-bottom: 1px solid var(--b, #e4e8ef); }
.bkx-subtab[b-m1aiutjc2a] {
    appearance: none; cursor: pointer; height: 32px; padding: 0 16px;
    display: inline-flex; align-items: center; font: inherit; font-size: 12px; font-weight: 600;
    color: var(--tm, #64748b); background: transparent;
    border: 1px solid transparent; border-bottom: none; border-radius: 7px 7px 0 0; margin-bottom: -1px;
}
.bkx-subtab:hover[b-m1aiutjc2a] { background: #eef2ff; color: var(--p, #1a5fb4); }
.bkx-subtab.active[b-m1aiutjc2a] { background: #fff; border-color: var(--b, #e4e8ef); color: var(--p, #1a5fb4); box-shadow: 0 -1px 0 #fff inset; }
.fbar[b-m1aiutjc2a] { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; background: var(--s, #fff); border: 1px solid var(--b, #e4e8ef); border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; }
.noibo-badge[b-m1aiutjc2a] { display: inline-block; margin-left: 6px; padding: 1px 7px; font-size: 11px; font-weight: 600; color: #6b7280; background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 999px; white-space: nowrap; }

/* Nút Ẩn/hiện cột + số cột */
.bkx-colbtn[b-m1aiutjc2a] { margin-left: auto; }
/* BUG tracking #33 — nhóm tick ẩn/hiện bảng (chi tiết + 3 bảng tổng hợp). */
.bkx-toggles[b-m1aiutjc2a] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-left: 12px; }
.bkx-tg[b-m1aiutjc2a] { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--tm, #64748b); cursor: pointer; white-space: nowrap; }
.bkx-tg input[b-m1aiutjc2a] { width: 14px; height: 14px; accent-color: var(--p, #2563eb); cursor: pointer; }
.bkx-colcount[b-m1aiutjc2a] { display: inline-block; margin-left: 4px; padding: 0 6px; font-size: 11px; font-weight: 700; color: #6b7280; background: #f3f4f6; border-radius: 999px; }

/* Modal chọn cột */
.colcfg[b-m1aiutjc2a] { display: flex; flex-direction: column; gap: 14px; }
.colcfg-lock[b-m1aiutjc2a] { font-size: 12.5px; color: #6b7280; background: #f8fafc; border: 1px solid #eef2f7; border-radius: 8px; padding: 8px 11px; }
.colcfg-lock i[b-m1aiutjc2a] { color: #94a3b8; margin-right: 5px; }
.colcfg-grp[b-m1aiutjc2a] { display: flex; flex-direction: column; }
.colcfg-gh[b-m1aiutjc2a] { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; font-weight: 700; color: #94a3b8; margin-bottom: 7px; }
.colcfg-items[b-m1aiutjc2a] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px; }
.colcfg-item[b-m1aiutjc2a] { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; padding: 3px 0; }
.colcfg-item input[b-m1aiutjc2a] { width: 15px; height: 15px; cursor: pointer; flex: none; }
@media (max-width: 560px) { .colcfg-items[b-m1aiutjc2a] { grid-template-columns: 1fr; } }

/* Hyperlink chứng từ ở cột/field Đơn giá tuyến */
.ct-link[b-m1aiutjc2a] { color: var(--p, #1a5fb4); text-decoration: none; font-weight: 600; white-space: nowrap; }
.ct-link:hover[b-m1aiutjc2a] { text-decoration: underline; }
.ct-link i[b-m1aiutjc2a] { font-size: 10px; opacity: .7; margin-left: 2px; }

/* Phụ phí quy đổi (modal chi tiết) */

/* Nút Duyệt GỘP (dropdown 3 mục — bám mẫu BA) */
.bkx-dd[b-m1aiutjc2a] { position: relative; display: inline-block; }
.bkx-dd-caret[b-m1aiutjc2a] { font-size: 9px; margin-left: 3px; }
.bkx-dd-menu[b-m1aiutjc2a] { position: absolute; top: calc(100% + 4px); left: 0; z-index: 500; min-width: 190px;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 4px; }
.bkx-dd-item[b-m1aiutjc2a] { display: block; width: 100%; text-align: left; padding: 8px 12px; border: 0; background: none;
    font-size: 13px; color: #374151; border-radius: 6px; cursor: pointer; }
.bkx-dd-item:hover[b-m1aiutjc2a] { background: #f3f4f6; }

/* Popup ảnh phiếu cân (gallery — bấm ảnh mở đầy đủ) */
.pc-gallery[b-m1aiutjc2a] { display: flex; flex-wrap: wrap; gap: 10px; }
.pc-img-wrap[b-m1aiutjc2a] { display: inline-block; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; line-height: 0; background: #f9fafb; }
.pc-img[b-m1aiutjc2a] { max-width: 240px; max-height: 320px; display: block; cursor: zoom-in; }

/* Badge đếm trên tab (bám mẫu BA) */
.tab-count[b-m1aiutjc2a] { display: inline-block; margin-left: 6px; min-width: 18px; padding: 0 5px; font-size: 11px; font-weight: 700;
    line-height: 17px; text-align: center; color: #4b5563; background: #eef1f5; border-radius: 999px; vertical-align: middle; }
.bkx-tab.active .tab-count[b-m1aiutjc2a] { background: #dbeafe; color: #1a5fb4; }

/* ===== Khối TỔNG HỢP (bám doc/HTML 0306/bang-ke-xetai.html: .summary-section / .summary-split) ===== */
.bkx-sum[b-m1aiutjc2a] { margin-top: 18px; }
.bkx-sum-toggle[b-m1aiutjc2a] { width: 100%; justify-content: flex-start; gap: 8px; font-weight: 700; }
.bkx-sum-cnt[b-m1aiutjc2a] { margin-left: auto; font-weight: 500; color: var(--tm, #64748b); font-size: 12px; }
/* _content/Admin_KA_Transport_Pricing/Components/Pages/ChungTu/ChungTu.razor.rz.scp.css */
.ct-page[b-yuuwtjid8j] {
    font-size: 12.5px;
}

.ct-empty[b-yuuwtjid8j] {
    background: var(--s, #fff);
    border: 1px dashed var(--b, #e4e8ef);
    border-radius: var(--rl, 12px);
    padding: 40px;
    text-align: center;
    color: var(--tm, #64748b);
}

/* renewal checkbox box in modal */
.ct-renewal-box[b-yuuwtjid8j] {
    background: #f8f9fc;
    border: 1px solid var(--b, #e4e8ef);
    border-radius: var(--r, 8px);
    padding: 10px 12px;
    margin-bottom: 14px;
}

.ct-check[b-yuuwtjid8j] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    margin: 0;
}

    .ct-check input[type=checkbox][b-yuuwtjid8j] {
        width: 15px;
        height: 15px;
        accent-color: var(--primary-color, #2563eb);
    }

/* date "to" emphasis inside .cdates */
[b-yuuwtjid8j] .cdates .to {
    font-weight: 600;
}

/* Desktop: canh cột thẳng hàng (từ ngày → đến ngày / trạng thái / hành động) giữa dòng HĐ & phụ lục.
   BA sheet row 6: "Sắp xếp các cột thẳng hàng với nhau".
   - Đồng nhất gap (HĐ 10px ↔ phụ lục 8px) để khoảng cách giữa các cột khớp nhau.
   - Cố định width cdates / bdg / cactions.
   - Dòng HĐ có chevron ở cuối (16px + gap 10px), phụ lục KHÔNG có → chừa 26px bên phải
     cactions của phụ lục để cột ngày/trạng thái/action thẳng cột dọc với dòng HĐ. */
@media (min-width: 769px) {
    .ch[b-yuuwtjid8j], .cchild[b-yuuwtjid8j] { gap: 10px; }
    .ch > .cdates[b-yuuwtjid8j], .cchild > .cdates[b-yuuwtjid8j] { flex: 0 0 210px; width: 210px; text-align: right; }
    .ch > .bdg[b-yuuwtjid8j], .cchild > .bdg[b-yuuwtjid8j] { flex: 0 0 116px; width: 116px; justify-content: center; }
    .ch > .cactions[b-yuuwtjid8j], .cchild > .cactions[b-yuuwtjid8j] { flex: 0 0 132px; width: 132px; justify-content: flex-end; margin-left: 0; }
    .ch > .ctoggle[b-yuuwtjid8j] { flex: 0 0 16px; width: 16px; text-align: center; }
    .cchild > .cactions[b-yuuwtjid8j] { margin-right: 26px; }
}

/* group header (đội vận chuyển) — kiểu chấm tròn nhỏ giống demo */
.ct-gh[b-yuuwtjid8j] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 8px;
    padding: 0 2px;
}

.ct-gh-dot[b-yuuwtjid8j] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--p, #2563eb);
    flex-shrink: 0;
}

.ct-gh-name[b-yuuwtjid8j] {
    font-weight: 600;
    font-size: 13.5px;
}

/* Nhóm nút filter: trên desktop "trong suốt" (giữ layout cũ), trên mobile thành 1 hàng. */
.fbar-actions[b-yuuwtjid8j] {
    display: contents;
}

/* ============================================================
   Responsive — mobile (<= 768px)
   ============================================================ */
/* Nút thu/mở bộ lọc hiện ở MỌI bề rộng (BUG tracking #31 — trước đây chỉ có trên mobile).
   Desktop mặc định MỞ: chưa bấm thì .fbar không mang class nào nên mọi .fg đều hiện.
   Mobile giữ mặc định THU GỌN qua media query cuối file. */
.filter-toggle[b-yuuwtjid8j] { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 5px; }
/* Desktop: mặc định MỞ → bấm 1 lần là ẩn TOÀN BỘ khối lọc (kể cả ô Tìm kiếm và hàng nút).
   Chỉ ẩn vài field sẽ chừa lại một hộp trắng rỗng — nút coi như không có tác dụng. */
.filter-toggle.is-toggled + .fbar[b-yuuwtjid8j] { display: none; }
/* Mũi tên: đang mở → chỉ lên; đã thu gọn → chỉ xuống. Xoay bằng CSS để nghĩa của .is-toggled
   đảo được theo breakpoint mà không cần C# biết bề rộng màn hình. */
.filter-toggle .fchev[b-yuuwtjid8j] { transition: transform .15s ease; transform: rotate(180deg); }
.filter-toggle.is-toggled .fchev[b-yuuwtjid8j] { transform: none; }
@media (max-width: 768px) {
    .filter-toggle[b-yuuwtjid8j] { display: flex; justify-content: center; width: 100%; margin-bottom: 5px; }
    /* Mobile: mặc định THU GỌN — CÙNG class .is-toggled nhưng NGHĨA ĐẢO LẠI (bấm = mở).
       Nhờ vậy lần bấm đầu luôn đổi trạng thái ở cả hai breakpoint.
       KHÁC desktop một điểm: thu gọn ở mobile vẫn CHỪA ô Tìm kiếm (.sw) + hàng nút, để tìm kiếm
       luôn dùng được mà không phải mở cả khối lọc trên màn hình nhỏ. */
    .filter-toggle.is-toggled + .fbar[b-yuuwtjid8j] { display: flex; }
    .filter-toggle:not(.is-toggled) + .fbar .fg:not(.sw)[b-yuuwtjid8j] { display: none; }
    .filter-toggle .fchev[b-yuuwtjid8j] { transform: none; }
    .filter-toggle.is-toggled .fchev[b-yuuwtjid8j] { transform: rotate(180deg); }
    /* Filter bar: mỗi ô full-width xếp dọc, bỏ giới hạn min/max-width inline */
    .fbar[b-yuuwtjid8j] {
        padding: 12px;
        gap: 8px;
    }

    .fbar .fg[b-yuuwtjid8j] {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .fbar-actions[b-yuuwtjid8j] {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }

        .fbar-actions .btn[b-yuuwtjid8j] {
            flex: 1 1 auto;
            justify-content: center;
        }

    /* Hàng hợp đồng: cho phép xuống dòng — dòng 1: icon + tên + chevron; dòng 2: ngày + trạng thái + actions */
    .ch[b-yuuwtjid8j] {
        flex-wrap: wrap;
        padding: 10px 12px;
        gap: 6px 8px;
    }

    /* Chỉ áp ordering cho con TRỰC TIẾP của .ch (không ảnh hưởng dòng phụ lục) */
    .ch > .ci.hd[b-yuuwtjid8j] { order: 1; }
    .ch > .cinfo[b-yuuwtjid8j] { order: 2; flex: 1 1 calc(100% - 90px); }
    .ch > .ctoggle[b-yuuwtjid8j] { order: 3; }
    .ch > .cdates[b-yuuwtjid8j] { order: 4; text-align: left; }
    .ch > .bdg[b-yuuwtjid8j] { order: 5; }
    .ch > .cactions[b-yuuwtjid8j] { order: 6; margin-left: auto; }

    /* Tên dài cho xuống dòng thay vì cắt */
    .cname[b-yuuwtjid8j] { white-space: normal; }

    /* Phụ lục: giảm thụt lề trái + cho xuống dòng (thứ tự nguồn đã đúng nên không cần order) */
    .cchild[b-yuuwtjid8j] {
        flex-wrap: wrap;
        padding: 9px 12px 9px 24px;
        gap: 6px 8px;
    }

    .cchild > .cinfo[b-yuuwtjid8j] { flex: 1 1 calc(100% - 40px); }
    .cchild > .cdates[b-yuuwtjid8j] { text-align: left; }
    .cchild > .cactions[b-yuuwtjid8j] { margin-left: auto; }

    /* Modal: form 1 cột, sát mép màn hình hơn */
    .md[b-yuuwtjid8j] {
        max-width: 100vw;
        max-height: 92vh;
        max-height: 92dvh;   /* iOS: trừ thanh công cụ Safari */
        border-radius: 12px 12px 0 0;
    }

    /* iOS Safari tự phóng to khi focus input < 16px */
    input[b-yuuwtjid8j], textarea[b-yuuwtjid8j], select[b-yuuwtjid8j] {
        font-size: 16px;
    }

    .fr[b-yuuwtjid8j] {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 10px;
    }

    .mh[b-yuuwtjid8j] {
        padding: 14px 16px 0;
    }

    .mb[b-yuuwtjid8j] {
        padding: 0 16px 14px;
    }

    .mf[b-yuuwtjid8j] {
        padding: 12px 16px;
        flex-wrap: wrap;
    }

        .mf .btn[b-yuuwtjid8j] {
            flex: 1 1 auto;
            justify-content: center;
        }
}
/* _content/Admin_KA_Transport_Pricing/Components/Pages/ConditionKey/ConditionKey.razor.rz.scp.css */
.ck-page[b-0vwglw4wy5] { padding: 16px; }
.ck-head h2[b-0vwglw4wy5] { font-size: 18px; font-weight: 700; color: #1e293b; margin: 0 0 4px; }
.ck-head h2 i[b-0vwglw4wy5] { color: var(--p, #2563eb); margin-right: 6px; }
.ck-sub[b-0vwglw4wy5] { color: #64748b; font-size: 13px; margin: 0 0 16px; max-width: 920px; line-height: 1.5; }

.ck-grid[b-0vwglw4wy5] { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.ck-card[b-0vwglw4wy5] { border: 1px solid var(--b, #e4e8ef); border-radius: 12px; background: #fff; padding: 14px 16px; }
.ck-card-h[b-0vwglw4wy5] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 8px; }
.ck-title[b-0vwglw4wy5] { font-weight: 700; font-size: 14.5px; color: #1e293b; }
.ck-note[b-0vwglw4wy5] { font-size: 12px; color: #64748b; margin-bottom: 10px; line-height: 1.4; }
.ck-note i[b-0vwglw4wy5] { color: var(--p, #2563eb); margin-right: 4px; }
.ck-cols[b-0vwglw4wy5] { display: flex; flex-wrap: wrap; gap: 6px; }

@media (max-width: 768px) {
    .ck-grid[b-0vwglw4wy5] { grid-template-columns: 1fr; }
}
/* _content/Admin_KA_Transport_Pricing/Components/Pages/DonViTinh/DonViTinh.razor.rz.scp.css */
.du-page[b-guv25zwnvr] {
    font-size: 12.5px;
}

.ct-empty[b-guv25zwnvr] {
    background: var(--s, #fff);
    border: 1px dashed var(--b, #e4e8ef);
    border-radius: var(--rl, 12px);
    padding: 40px;
    text-align: center;
    color: var(--tm, #64748b);
}

/* Nhóm nút filter: desktop "trong suốt", mobile thành 1 hàng */
.fbar-actions[b-guv25zwnvr] {
    display: contents;
}

/* Bảng */
.bt-tablewrap[b-guv25zwnvr] {
    background: var(--s, #fff);
    border: 1px solid var(--b, #e4e8ef);
    border-radius: var(--rl, 12px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.bt-table[b-guv25zwnvr] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

    .bt-table th[b-guv25zwnvr] {
        text-align: left;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .4px;
        color: var(--tm, #64748b);
        padding: 10px 12px;
        border-bottom: 1px solid var(--b, #e4e8ef);
        background: #f8f9fc;
        white-space: nowrap;
    }

    .bt-table td[b-guv25zwnvr] {
        padding: 9px 12px;
        border-bottom: 1px solid var(--b, #e4e8ef);
        white-space: nowrap;
    }

    .bt-table tr:last-child td[b-guv25zwnvr] {
        border-bottom: none;
    }

    .bt-table tbody tr:hover td[b-guv25zwnvr] {
        background: #f0f4ff;
    }

/* Modal nhập 1 dòng: cho overflow visible để dropdown không bị mép modal cắt. */
.bt-rowmodal[b-guv25zwnvr] {
    overflow: visible;
}

.ta-r[b-guv25zwnvr] { text-align: right; }
.ta-c[b-guv25zwnvr] { text-align: center; }
.bt-code[b-guv25zwnvr] { font-weight: 600; }
.muted[b-guv25zwnvr] { color: var(--tm, #64748b); }

/* ============================================================
   Responsive — mobile (<= 768px)
   ============================================================ */
.du-cards[b-guv25zwnvr] { display: none; }
.du-card[b-guv25zwnvr] { border: 1px solid var(--b, #e4e8ef); border-radius: 10px; padding: 10px 12px; background: #fff; display: flex; flex-direction: column; gap: 7px; }
.duc-top[b-guv25zwnvr] { display: flex; align-items: center; gap: 8px; }
.duc-acts[b-guv25zwnvr] { margin-left: auto; display: flex; gap: 6px; }
.duc-name[b-guv25zwnvr] { font-weight: 600; }
.duc-meta[b-guv25zwnvr] { font-size: 11.5px; }

/* Nút thu/mở bộ lọc hiện ở MỌI bề rộng (BUG tracking #31 — trước đây chỉ có trên mobile).
   Desktop mặc định MỞ: chưa bấm thì .fbar không mang class nào nên mọi .fg đều hiện.
   Mobile giữ mặc định THU GỌN qua media query cuối file. */
.filter-toggle[b-guv25zwnvr] { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 5px; }
/* Desktop: mặc định MỞ → bấm 1 lần là ẩn TOÀN BỘ khối lọc (kể cả ô Tìm kiếm và hàng nút).
   Chỉ ẩn vài field sẽ chừa lại một hộp trắng rỗng — nút coi như không có tác dụng. */
.filter-toggle.is-toggled + .fbar[b-guv25zwnvr] { display: none; }
/* Mũi tên: đang mở → chỉ lên; đã thu gọn → chỉ xuống. Xoay bằng CSS để nghĩa của .is-toggled
   đảo được theo breakpoint mà không cần C# biết bề rộng màn hình. */
.filter-toggle .fchev[b-guv25zwnvr] { transition: transform .15s ease; transform: rotate(180deg); }
.filter-toggle.is-toggled .fchev[b-guv25zwnvr] { transform: none; }
@media (max-width: 768px) {
    .filter-toggle[b-guv25zwnvr] { display: flex; justify-content: center; width: 100%; margin-bottom: 5px; }
    /* Mobile: mặc định THU GỌN — CÙNG class .is-toggled nhưng NGHĨA ĐẢO LẠI (bấm = mở).
       Nhờ vậy lần bấm đầu luôn đổi trạng thái ở cả hai breakpoint.
       KHÁC desktop một điểm: thu gọn ở mobile vẫn CHỪA ô Tìm kiếm (.sw) + hàng nút, để tìm kiếm
       luôn dùng được mà không phải mở cả khối lọc trên màn hình nhỏ. */
    .filter-toggle.is-toggled + .fbar[b-guv25zwnvr] { display: flex; }
    .filter-toggle:not(.is-toggled) + .fbar .fg:not(.sw)[b-guv25zwnvr] { display: none; }
    .filter-toggle .fchev[b-guv25zwnvr] { transform: none; }
    .filter-toggle.is-toggled .fchev[b-guv25zwnvr] { transform: rotate(180deg); }
    .du-maintable[b-guv25zwnvr] { display: none; }
    .du-cards[b-guv25zwnvr] { display: flex; flex-direction: column; gap: 8px; }

    .fbar[b-guv25zwnvr] {
        padding: 12px;
        gap: 8px;
    }

    .fbar .fg[b-guv25zwnvr] {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .fbar-actions[b-guv25zwnvr] {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }

        .fbar-actions .btn[b-guv25zwnvr] {
            flex: 1 1 auto;
            justify-content: center;
        }

    .bt-table th[b-guv25zwnvr], .bt-table td[b-guv25zwnvr] {
        padding: 8px 10px;
    }

    .fr[b-guv25zwnvr] {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 10px;
    }

    .md[b-guv25zwnvr] {
        max-width: 100vw;
        max-height: 92vh;
        max-height: 92dvh;
        border-radius: 12px 12px 0 0;
    }

    input[b-guv25zwnvr], textarea[b-guv25zwnvr], select[b-guv25zwnvr] {
        font-size: 16px;
    }

    .mf[b-guv25zwnvr] {
        flex-wrap: wrap;
    }

        .mf .btn[b-guv25zwnvr] {
            flex: 1 1 auto;
            justify-content: center;
        }
}
/* _content/Admin_KA_Transport_Pricing/Components/Pages/DuyetGia/DuyetGia.razor.rz.scp.css */
.dg-page[b-n82x3bl5ru] { font-size: 12.5px; }

.ct-empty[b-n82x3bl5ru] {
    background: var(--s, #fff); border: 1px dashed var(--b, #e4e8ef); border-radius: var(--rl, 12px);
    padding: 40px; text-align: center; color: var(--tm, #64748b);
}

.pp-tabs[b-n82x3bl5ru] { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--b, #e4e8ef); flex-wrap: wrap; }
.pp-tab[b-n82x3bl5ru] {
    border: none; background: transparent; padding: 10px 16px; font-size: 13px; font-weight: 600;
    color: var(--tm, #64748b); cursor: pointer; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 7px;
}
    .pp-tab:hover[b-n82x3bl5ru] { color: var(--t, #1e293b); }
    .pp-tab.active[b-n82x3bl5ru] { color: var(--p, #2563eb); border-bottom-color: var(--p, #2563eb); }
.pp-tabn[b-n82x3bl5ru] { font-size: 11px; background: #eef2ff; color: var(--p, #2563eb); border-radius: 999px; padding: 1px 8px; font-weight: 600; }

.bbar[b-n82x3bl5ru] {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    background: var(--s, #fff); border: 1px solid var(--b, #e4e8ef); border-radius: var(--rl, 12px);
    padding: 10px 14px; margin-bottom: 12px;
}
.bbar-cnt[b-n82x3bl5ru] { font-weight: 600; color: var(--p, #2563eb); margin-right: auto; }

/* .act-err / .act-err-btn → etrans-ui.css (global) */
.row-acts[b-n82x3bl5ru] { display: flex; gap: 4px; justify-content: center; }

.bt-tablewrap[b-n82x3bl5ru] { background: var(--s, #fff); border: 1px solid var(--b, #e4e8ef); border-radius: var(--rl, 12px); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bt-table[b-n82x3bl5ru] { width: 100%; border-collapse: collapse; font-size: 12.5px; }
    .bt-table th[b-n82x3bl5ru] {
        text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px;
        color: var(--tm, #64748b); padding: 10px 12px; border-bottom: 1px solid var(--b, #e4e8ef); background: #f8f9fc; white-space: nowrap;
    }
    .bt-table td[b-n82x3bl5ru] { padding: 9px 12px; border-bottom: 1px solid var(--b, #e4e8ef); white-space: nowrap; }
    .bt-table tr:last-child td[b-n82x3bl5ru] { border-bottom: none; }
    .bt-table tbody tr:hover td[b-n82x3bl5ru] { background: #f0f4ff; }
    .bt-table tbody tr.sel td[b-n82x3bl5ru] { background: #eaf1ff; }

.ta-r[b-n82x3bl5ru] { text-align: right; }
.ta-c[b-n82x3bl5ru] { text-align: center; }
.bt-code[b-n82x3bl5ru] { font-weight: 600; }
.bt-price[b-n82x3bl5ru] { font-weight: 700; color: var(--p, #2563eb); }

/* ---- Mobile cards (ẩn desktop) ---- */
.dg-cards[b-n82x3bl5ru] { display: none; }
.dg-card[b-n82x3bl5ru] { border: 1px solid var(--b, #e4e8ef); border-radius: 10px; padding: 10px 12px; background: #fff; display: flex; flex-direction: column; gap: 7px; }
    .dg-card.card-sel[b-n82x3bl5ru] { background: #eaf1ff; border-color: var(--p, #2563eb); }
.dgc-top[b-n82x3bl5ru] { display: flex; align-items: center; gap: 8px; }
.gc-chk[b-n82x3bl5ru] { display: inline-flex; }
    .gc-chk input[b-n82x3bl5ru] { width: 15px; height: 15px; accent-color: var(--p, #2563eb); }
.dgc-name[b-n82x3bl5ru] { font-weight: 600; }
.dgc-acts[b-n82x3bl5ru] { margin-left: auto; display: flex; gap: 4px; }
.dgc-body[b-n82x3bl5ru] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dgc-meta[b-n82x3bl5ru] { font-size: 11.5px; color: var(--tm, #64748b); }
.dg-selall[b-n82x3bl5ru] { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--tm, #64748b); padding: 4px 2px; cursor: pointer; user-select: none; }
    .dg-selall input[b-n82x3bl5ru] { width: 16px; height: 16px; accent-color: var(--p, #2563eb); }

@media (max-width: 768px) {
    .bt-tablewrap[b-n82x3bl5ru] { display: none; }
    .dg-cards[b-n82x3bl5ru] { display: flex; flex-direction: column; gap: 8px; }
    .dg-cards-grp[b-n82x3bl5ru] { display: block; margin-bottom: 14px; border: 1px solid var(--b, #e4e8ef); border-radius: 10px; overflow: hidden; }
    .dg-cards-grp .dg-cards[b-n82x3bl5ru] { padding: 8px; }
    .bt-table th[b-n82x3bl5ru], .bt-table td[b-n82x3bl5ru] { padding: 8px 10px; }
    .md[b-n82x3bl5ru] { max-width: 100vw; max-height: 92vh; max-height: 92dvh; border-radius: 12px 12px 0 0; }
    input[b-n82x3bl5ru], textarea[b-n82x3bl5ru], select[b-n82x3bl5ru] { font-size: 16px; }
    .btn[b-n82x3bl5ru] { min-height: 40px; }
    .mf[b-n82x3bl5ru] { flex-wrap: wrap; }
        .mf .btn[b-n82x3bl5ru] { flex: 1 1 auto; justify-content: center; }
}

/* ===== Tab Phụ phí quy đổi: bộ lọc + nhóm theo loại phí (mockup HTML 0306/duyet-gia.html) ===== */
.dg-fbar[b-n82x3bl5ru] { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; margin-bottom: 12px; }

/* Khung nhóm chỉ áp cho biến thể <div> (các tab khác). Từ BUG tracking #26, nhóm ở tab
   phụ phí quy đổi là <tbody class="dg-grp"> nằm TRONG bảng nên không được có border/radius riêng. */
div.dg-grp[b-n82x3bl5ru] { margin-bottom: 16px; border: 1px solid var(--b, #e4e8ef); border-radius: 10px; overflow: hidden; }
.dg-grp-hdr[b-n82x3bl5ru] {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 8px 12px; background: #f0f4ff; border-bottom: 1px solid #d0dff8;
}
/* Dải tiêu đề NHÓM nằm trong bảng (BUG tracking #26): ô colspan không có padding riêng,
   toàn bộ nền/viền do .dg-grp-hdr bên trong lo, nên trông y hệt dải cũ. */
.dg-grp-row > td[b-n82x3bl5ru] { padding: 0; border-bottom: none; white-space: normal; }
.dg-grp-row .dg-grp-hdr[b-n82x3bl5ru] { border-top: 1px solid #d0dff8; }
/* Nhóm thẻ ở bản mobile — desktop ẩn vì đã có dải tiêu đề trong bảng. */
.dg-cards-grp[b-n82x3bl5ru] { display: none; }
.dg-grp-name[b-n82x3bl5ru] { font-weight: 600; font-size: 13px; }
.dg-grp-acts[b-n82x3bl5ru] { margin-left: auto; display: flex; gap: 4px; }
div.dg-grp .bt-tablewrap[b-n82x3bl5ru] { border: none; border-radius: 0; }

@media (max-width: 768px) {
    .dg-fbar .fg[b-n82x3bl5ru] { flex: 1 1 100% !important; min-width: 0 !important; }
    .dg-grp-acts[b-n82x3bl5ru] { margin-left: 0; width: 100%; }
}
/* _content/Admin_KA_Transport_Pricing/Components/Pages/GiaVanChuyen/GiaVanChuyen.razor.rz.scp.css */
.gia-page[b-wyqswpgrl0] {
    font-size: 12.5px;
}

/* Nút Bộ lọc chỉ dành cho mobile — desktop ẩn (luôn hiện đủ filter) */
/* Nút thu/mở bộ lọc hiện ở MỌI bề rộng (BUG tracking #31 — trước đây chỉ có trên mobile).
   Desktop mặc định MỞ: chưa bấm thì .fbar không mang class nào nên mọi .fg đều hiện.
   Mobile giữ mặc định THU GỌN qua media query cuối file. */
.filter-toggle[b-wyqswpgrl0] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}

/* Desktop: mặc định MỞ → bấm 1 lần là ẩn TOÀN BỘ khối lọc (kể cả ô Tìm kiếm và hàng nút).
   Chỉ ẩn vài field sẽ chừa lại một hộp trắng rỗng — nút coi như không có tác dụng. */
.filter-toggle.is-toggled + .fbar[b-wyqswpgrl0] { display: none; }
/* Mũi tên: đang mở → chỉ lên; đã thu gọn → chỉ xuống. Xoay bằng CSS để nghĩa của .is-toggled
   đảo được theo breakpoint mà không cần C# biết bề rộng màn hình. */
.filter-toggle .fchev[b-wyqswpgrl0] { transition: transform .15s ease; transform: rotate(180deg); }
.filter-toggle.is-toggled .fchev[b-wyqswpgrl0] { transform: none; }

.ct-empty[b-wyqswpgrl0] {
    background: var(--s, #fff);
    border: 1px dashed var(--b, #e4e8ef);
    border-radius: var(--rl, 12px);
    padding: 40px;
    text-align: center;
    color: var(--tm, #64748b);
}

/* Nút hành động tách thành 1 hàng riêng, canh phải — để "Thêm giá" nổi bật, không lẫn trong 10 ô lọc */
.fbar-actions[b-wyqswpgrl0] {
    display: flex;
    flex: 1 1 100%;
    gap: 8px;
    justify-content: flex-end;
    align-items: flex-end;
    flex-wrap: wrap;
}

.tl[b-wyqswpgrl0] { color: var(--tl, #94a3b8); }
.muted[b-wyqswpgrl0] { color: var(--tm, #64748b); font-size: 11.5px; }

/* .hint chuẩn cả khi nằm ngoài .ff (toolbar bảng tuyến) */
.hint[b-wyqswpgrl0] {
    font-size: 10.5px;
    color: var(--tm, #64748b);
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Tăng bo: highlight nhẹ dòng */
.bt-table tbody tr.row-tangbo td[b-wyqswpgrl0] {
    background: #fff8e6;
}

.bt-table tbody tr.row-tangbo:hover td[b-wyqswpgrl0] {
    background: #fdf0cf;
}

/* checkbox label trong modal */
.chk[b-wyqswpgrl0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    cursor: pointer;
    user-select: none;
}

    .chk input[b-wyqswpgrl0] {
        width: 15px;
        height: 15px;
        accent-color: var(--p, #2563eb);
    }

/* section divider trong modal (nếu global .sdiv chưa có) */
.sdiv[b-wyqswpgrl0] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--tm, #64748b);
    margin: 14px 0 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--b, #e4e8ef);
}

/* ---- nhóm theo đội VC ---- */
.gia-group[b-wyqswpgrl0] {
    background: var(--s, #fff);
    border: 1px solid var(--b, #e4e8ef);
    border-radius: var(--rl, 12px);
    margin-bottom: 14px;
    overflow: hidden;
}

.gg-head[b-wyqswpgrl0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: #f8f9fc;
    border-bottom: 1px solid var(--b, #e4e8ef);
    cursor: pointer;
    user-select: none;
}

    .gg-head:hover[b-wyqswpgrl0] {
        background: #f0f4ff;
    }

.gg-title[b-wyqswpgrl0] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .gg-title > i[b-wyqswpgrl0] {
        color: var(--tm, #64748b);
        width: 12px;
    }

.gg-name[b-wyqswpgrl0] {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--t, #1e293b);
}

.gg-count[b-wyqswpgrl0] {
    font-size: 11.5px;
    color: var(--tm, #64748b);
    background: #eef2ff;
    border-radius: 999px;
    padding: 2px 10px;
}

.gg-badges[b-wyqswpgrl0] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.gg-more[b-wyqswpgrl0] {
    padding: 10px 16px;
    text-align: center;
    border-top: 1px solid var(--b, #e4e8ef);
}

/* ---- bảng ---- */
.bt-tablewrap[b-wyqswpgrl0] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;   /* cuộn quán tính iOS */
}

/* iOS Safari: thanh công cụ ăn vào 100vh -> dùng dvh để footer modal không bị che (fallback vh) */
.md[b-wyqswpgrl0] {
    max-height: 88dvh;
}

/* iOS: tap nền đóng modal chỉ kích hoạt 'click' khi có cursor:pointer; giữ con trỏ thường trong modal */
.mo[b-wyqswpgrl0] {
    cursor: pointer;
}

.md[b-wyqswpgrl0] {
    cursor: auto;
}

.bt-table[b-wyqswpgrl0] {
    width: 100%;
    /* separate + spacing:0 (KHÔNG dùng collapse): với collapse, viền vẽ trên <table> nên không
       di chuyển theo cột sticky → hở/seam giữa các cột freeze khi cuộn ngang. */
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;   /* nhỏ lại đồng bộ bảng Phụ phí (.pp-tbl) */
}

    .bt-table th[b-wyqswpgrl0] {
        text-align: left;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .4px;
        color: var(--tm, #64748b);
        padding: 8px 10px;   /* gọn như .pp-tbl thead th */
        border-bottom: 1px solid var(--b, #e4e8ef);
        background: #fbfcfe;
        white-space: nowrap;
        position: sticky;   /* thead dính TOP: cuộn dọc trong bảng thì header cột đứng yên */
        top: 0;
        z-index: 3;
    }

    .bt-table td[b-wyqswpgrl0] {
        padding: 6px 10px;   /* gọn như .pp-tbl tbody td */
        border-bottom: 1px solid var(--b, #e4e8ef);
        white-space: nowrap;
    }

    .bt-table tr:last-child td[b-wyqswpgrl0] {
        border-bottom: none;
    }

    .bt-table tbody tr:hover td[b-wyqswpgrl0] {
        background: #f0f4ff;
    }

.bt-rowmodal[b-wyqswpgrl0] {
    overflow: visible;
}

.ta-r[b-wyqswpgrl0] { text-align: right; }
.ta-c[b-wyqswpgrl0] { text-align: center; }
.bt-price[b-wyqswpgrl0] { font-weight: 700; color: var(--p, #2563eb); }

.dt-expired[b-wyqswpgrl0] { color: var(--tl, #94a3b8); }
.dt-soon[b-wyqswpgrl0] { color: var(--err, #dc2626); font-weight: 600; }
.dt-caution[b-wyqswpgrl0] { color: var(--warn, #d97706); }
.dt-ok[b-wyqswpgrl0] { color: inherit; }

/* 3 cột cho hàng thông tin chung của batch */
.fr.fr3[b-wyqswpgrl0] {
    grid-template-columns: 1fr 1fr 1fr;
}

/* ---- Import Excel ---- */
.import-template-hint[b-wyqswpgrl0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px;
    border: 1px solid var(--b, #e4e8ef);
    border-radius: 10px;
    margin-bottom: 14px;
}

.import-dropzone[b-wyqswpgrl0] {
    min-height: 170px;
    border: 2px dashed #93a4bd;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    color: var(--tm, #64748b);
    background: #f8fafc;
}

.import-dropzone:hover[b-wyqswpgrl0] { border-color: var(--p, #2563eb); background: #eff6ff; }
.import-dropzone > i[b-wyqswpgrl0] { font-size: 30px; color: var(--p, #2563eb); }
.import-dropzone > b[b-wyqswpgrl0] { color: var(--t, #1e293b); }

.import-summary[b-wyqswpgrl0] { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.import-summary > span[b-wyqswpgrl0] { padding: 6px 10px; border-radius: 999px; background: #f1f5f9; }
.import-summary .import-ready[b-wyqswpgrl0] { background: #dbeafe; color: #1d4ed8; }
.import-summary .import-warn[b-wyqswpgrl0] { background: #fef3c7; color: #92400e; }
.import-summary .import-invalid[b-wyqswpgrl0] { background: #fee2e2; color: #b91c1c; }
.import-summary .import-ok[b-wyqswpgrl0] { background: #dcfce7; color: #166534; }
.import-toolbar[b-wyqswpgrl0] { display: flex; gap: 8px; margin-bottom: 10px; }
.import-toolbar .fi[b-wyqswpgrl0] { flex: 1 1 auto; width: auto; min-width: 240px; }
.import-toolbar .fs[b-wyqswpgrl0] { flex: 0 0 240px; width: 240px; }
.import-grid[b-wyqswpgrl0] { flex: 1 1 auto; min-height: 0; border: 1px solid var(--b, #e4e8ef); border-radius: 8px; }
.import-grid .bt-table[b-wyqswpgrl0] { min-width: 2100px; }
.import-grid .bt-table th:last-child[b-wyqswpgrl0],
.import-grid .bt-table td:last-child[b-wyqswpgrl0] { position: sticky; right: 0; z-index: 3; background: var(--s, #fff); box-shadow: -6px 0 8px -7px rgba(15, 23, 42, .35); }
.import-grid .bt-table th:last-child[b-wyqswpgrl0] { z-index: 6; background: #fbfcfe; }
.import-row-error td[b-wyqswpgrl0] { background: #fff7f7; }
.import-row-warn td[b-wyqswpgrl0] { background: #fffbeb; }
.import-row-error td:last-child[b-wyqswpgrl0] { background: #fff7f7; }
.import-row-warn td:last-child[b-wyqswpgrl0] { background: #fffbeb; }
.import-messages[b-wyqswpgrl0] { white-space: normal !important; min-width: 300px; max-width: 420px; }
.import-messages .err[b-wyqswpgrl0] { color: #b91c1c; margin-bottom: 3px; }
.import-messages .warn[b-wyqswpgrl0] { color: #92400e; margin-bottom: 3px; }
.import-pager[b-wyqswpgrl0] { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 10px; }

@media (max-width: 700px) {
    .import-template-hint[b-wyqswpgrl0], .import-toolbar[b-wyqswpgrl0] { align-items: stretch; flex-direction: column; }
    .import-toolbar .fi[b-wyqswpgrl0], .import-toolbar .fs[b-wyqswpgrl0] { width: 100%; min-width: 0; flex-basis: auto; }
}

/* ---- Pha 2: bulk bar ---- */
.bbar[b-wyqswpgrl0] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: var(--s, #fff);
    border: 1px solid var(--b, #e4e8ef);
    border-radius: var(--rl, 12px);
    padding: 10px 14px;
    margin-bottom: 12px;
}

.bbar-cnt[b-wyqswpgrl0] {
    font-weight: 600;
    color: var(--p, #2563eb);
    margin-right: auto;
}

.gg-chk[b-wyqswpgrl0] {
    width: 15px;
    height: 15px;
    accent-color: var(--p, #2563eb);
    cursor: pointer;
}

/* Checkbox trong bảng: KHÓA cỡ 15px (cả banner nhóm + dòng dữ liệu) — không co giãn theo font-size
   (mobile ép input 16px làm checkbox không cỡ cố định phình to & lệch hàng). */
.bt-table input[type="checkbox"][b-wyqswpgrl0] {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--p, #2563eb);
    vertical-align: middle;
    flex-shrink: 0;
    cursor: pointer;
}

.row-acts[b-wyqswpgrl0] {
    display: flex;
    gap: 4px;
    justify-content: center;
}

/* .act-err / .act-err-btn → etrans-ui.css (global) */

/* ---- Pha 2: cột dính ---- */
/* Trái: checkbox (stk-l) + Zone lấy (stk-l2) + Zone giao (stk-l3).
   Phải: Hiệu lực từ (stk-r4) + Hiệu lực đến (stk-r3) + Trạng thái (stk-r2) + Chứng từ (stk-r1) + Hành động (stk-r). */
/* min-width = width = max-width: KHÓA CỨNG bề rộng từng cột dính = đúng offset đã tính → không hở/đè giữa các cột freeze. */
.bt-table th.stk-l[b-wyqswpgrl0], .bt-table td.stk-l[b-wyqswpgrl0] { position: sticky; left: 0; z-index: 2; width: 34px; min-width: 34px; max-width: 34px; box-sizing: border-box; padding-left: 0; padding-right: 0; text-align: center; }
/* ID: cột dính đầu (sau checkbox) → luôn thấy khi cuộn ngang. */
.bt-table th.stk-lid[b-wyqswpgrl0], .bt-table td.stk-lid[b-wyqswpgrl0] { position: sticky; left: 34px; z-index: 2; width: 52px; min-width: 52px; max-width: 52px; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; text-align: right; }
/* width = max-width + overflow:ellipsis: cột dính có nội dung biến thiên (zone/mã chứng từ dài) bị CẮT đúng bề rộng,
   tránh tràn làm lệch/đè offset sticky (đã kiểm chứng: mã CT dài làm cột phình 92→155px gây đè cột kế). */
.bt-table th.stk-l2[b-wyqswpgrl0], .bt-table td.stk-l2[b-wyqswpgrl0] { position: sticky; left: 86px; z-index: 2; width: 116px; min-width: 116px; max-width: 116px; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; }
.bt-table th.stk-l3[b-wyqswpgrl0], .bt-table td.stk-l3[b-wyqswpgrl0] { position: sticky; left: 202px; z-index: 2; width: 140px; min-width: 140px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; box-shadow: 6px 0 8px -6px rgba(0,0,0,.12); }
.bt-table th.stk-r[b-wyqswpgrl0], .bt-table td.stk-r[b-wyqswpgrl0] { position: sticky; right: 0; z-index: 2; width: 96px; min-width: 96px; max-width: 96px; box-sizing: border-box; box-shadow: -6px 0 8px -6px rgba(0,0,0,.12); }
.bt-table th.stk-r1[b-wyqswpgrl0], .bt-table td.stk-r1[b-wyqswpgrl0] { position: sticky; right: 96px; z-index: 2; width: 92px; min-width: 92px; max-width: 92px; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; }
.bt-table th.stk-r2[b-wyqswpgrl0], .bt-table td.stk-r2[b-wyqswpgrl0] { position: sticky; right: 188px; z-index: 2; width: 110px; min-width: 110px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; }
.bt-table th.stk-r3[b-wyqswpgrl0], .bt-table td.stk-r3[b-wyqswpgrl0] { position: sticky; right: 298px; z-index: 2; width: 96px; min-width: 96px; max-width: 96px; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; }
.bt-table th.stk-r4[b-wyqswpgrl0], .bt-table td.stk-r4[b-wyqswpgrl0] { position: sticky; right: 394px; z-index: 2; width: 96px; min-width: 96px; max-width: 96px; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; }

/* nền cho cột dính (kế thừa nền hàng) */
.bt-table td.stk-l[b-wyqswpgrl0], .bt-table td.stk-lid[b-wyqswpgrl0], .bt-table td.stk-l2[b-wyqswpgrl0], .bt-table td.stk-l3[b-wyqswpgrl0],
.bt-table td.stk-r[b-wyqswpgrl0], .bt-table td.stk-r1[b-wyqswpgrl0], .bt-table td.stk-r2[b-wyqswpgrl0], .bt-table td.stk-r3[b-wyqswpgrl0], .bt-table td.stk-r4[b-wyqswpgrl0] { background: #fff; }
.bt-table th.stk-l[b-wyqswpgrl0], .bt-table th.stk-lid[b-wyqswpgrl0], .bt-table th.stk-l2[b-wyqswpgrl0], .bt-table th.stk-l3[b-wyqswpgrl0],
.bt-table th.stk-r[b-wyqswpgrl0], .bt-table th.stk-r1[b-wyqswpgrl0], .bt-table th.stk-r2[b-wyqswpgrl0], .bt-table th.stk-r3[b-wyqswpgrl0], .bt-table th.stk-r4[b-wyqswpgrl0] { background: #fbfcfe; z-index: 5; }

.bt-table tbody tr:hover td.stk-l[b-wyqswpgrl0], .bt-table tbody tr:hover td.stk-lid[b-wyqswpgrl0], .bt-table tbody tr:hover td.stk-l2[b-wyqswpgrl0], .bt-table tbody tr:hover td.stk-l3[b-wyqswpgrl0],
.bt-table tbody tr:hover td.stk-r[b-wyqswpgrl0], .bt-table tbody tr:hover td.stk-r1[b-wyqswpgrl0], .bt-table tbody tr:hover td.stk-r2[b-wyqswpgrl0], .bt-table tbody tr:hover td.stk-r3[b-wyqswpgrl0], .bt-table tbody tr:hover td.stk-r4[b-wyqswpgrl0] { background: #f0f4ff; }

.bt-table tbody tr.row-tangbo td.stk-l[b-wyqswpgrl0], .bt-table tbody tr.row-tangbo td.stk-lid[b-wyqswpgrl0], .bt-table tbody tr.row-tangbo td.stk-l2[b-wyqswpgrl0], .bt-table tbody tr.row-tangbo td.stk-l3[b-wyqswpgrl0],
.bt-table tbody tr.row-tangbo td.stk-r[b-wyqswpgrl0], .bt-table tbody tr.row-tangbo td.stk-r1[b-wyqswpgrl0], .bt-table tbody tr.row-tangbo td.stk-r2[b-wyqswpgrl0], .bt-table tbody tr.row-tangbo td.stk-r3[b-wyqswpgrl0], .bt-table tbody tr.row-tangbo td.stk-r4[b-wyqswpgrl0] { background: #fff8e6; }

.bt-table tbody tr.sel td[b-wyqswpgrl0] { background: #eaf1ff; }
.bt-table tbody tr.sel td.stk-l[b-wyqswpgrl0], .bt-table tbody tr.sel td.stk-lid[b-wyqswpgrl0], .bt-table tbody tr.sel td.stk-l2[b-wyqswpgrl0], .bt-table tbody tr.sel td.stk-l3[b-wyqswpgrl0],
.bt-table tbody tr.sel td.stk-r[b-wyqswpgrl0], .bt-table tbody tr.sel td.stk-r1[b-wyqswpgrl0], .bt-table tbody tr.sel td.stk-r2[b-wyqswpgrl0], .bt-table tbody tr.sel td.stk-r3[b-wyqswpgrl0], .bt-table tbody tr.sel td.stk-r4[b-wyqswpgrl0] { background: #eaf1ff; }

/* ---- Header 1 dòng: mỗi đội VC là 1 dòng banner trong tbody (giống Phụ phí) ---- */
/* Vùng bảng tự cuộn dọc: header cột (thead sticky) + filter (nằm trên) đứng yên, chỉ các dòng cuộn.
   250px ≈ nav trên + thanh lọc + lề; chỉnh số này nếu còn cuộn cả trang. */
.gia-desktop[b-wyqswpgrl0] { border: 1px solid var(--b, #e4e8ef); border-radius: var(--rl, 12px); background: #fff; max-height: calc(100vh - 250px); overflow-y: auto; }
.gia-mobile[b-wyqswpgrl0] { display: none; }

.bt-table tbody tr.grp-row td[b-wyqswpgrl0] { background: #f8f9fc; padding: 0; cursor: pointer; }
.bt-table tbody tr.grp-row:hover td[b-wyqswpgrl0] { background: #eef2ff; }
/* sticky trái: nội dung banner luôn hiện khi cuộn ngang (td colspan chiếm cả bề rộng bảng) */
.grp-inner[b-wyqswpgrl0] { position: sticky; left: 0; display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px 11px 0; font-size: 12.5px; }
    /* checkbox banner canh giữa trong ô 34px = TRÙNG cột checkbox (stk-l) của dòng dữ liệu bên dưới */
    .grp-chkcell[b-wyqswpgrl0] { width: 34px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .grp-inner > i[b-wyqswpgrl0] { color: var(--tm, #64748b); width: 12px; }
    .grp-inner .gg-name[b-wyqswpgrl0] { font-weight: 700; font-size: 13.5px; color: var(--t, #1e293b); }

.bt-table tbody tr.grp-more td[b-wyqswpgrl0] { text-align: center; padding: 10px; background: #fff; cursor: default; }

/* ---- Pha 2: chi tiết dòng giá ---- */
.dt-head[b-wyqswpgrl0] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 14px;
    background: var(--bg, #f3f5fb);
    border: 1px solid var(--b, #e4e8ef);
    border-radius: var(--r, 8px);
    margin-bottom: 6px;
}

.dt-carrier[b-wyqswpgrl0] { font-weight: 700; font-size: 14px; }
.dt-doc[b-wyqswpgrl0] { margin-left: auto; color: var(--p, #2563eb); font-weight: 600; font-size: 12px; }

.dt-grid[b-wyqswpgrl0] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px 24px;
    margin-bottom: 6px;
}

.dt-l[b-wyqswpgrl0] {
    font-size: 10.5px;
    color: var(--tl, #94a3b8);
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-bottom: 3px;
}

.dt-v[b-wyqswpgrl0] { font-size: 13px; font-weight: 500; color: var(--t, #1e293b); }

.dt-reason[b-wyqswpgrl0] {
    margin-top: 8px;
    padding: 10px 14px;
    background: #fff5f5;
    border: 1px solid #fca5a5;
    border-radius: var(--r, 8px);
}

/* ---- Bình luận trong Chi tiết dòng giá ---- */
.gia-detail-layout[b-wyqswpgrl0] {
    display: flex;
    gap: 18px;
    align-items: stretch;
    min-width: 0;
}

.gia-detail-info[b-wyqswpgrl0] {
    flex: 1.5;
    min-width: 0;
}

.gia-detail-divider[b-wyqswpgrl0] {
    width: 1px;
    flex: 0 0 1px;
    background: var(--b, #e4e8ef);
}

/* Workflow là hành động chính của modal: nền đặc + đổ bóng giúp phân biệt rõ với nút disabled/ghost. */
.gia-detail-workflow-btn:not(:disabled)[b-wyqswpgrl0] {
    font-weight: 700;
    box-shadow: 0 2px 7px rgba(15, 23, 42, .18);
}

.gia-detail-workflow-btn:not(:disabled):hover[b-wyqswpgrl0] {
    box-shadow: 0 4px 10px rgba(15, 23, 42, .24);
    transform: translateY(-1px);
}

.gia-detail-workflow-btn:not(:disabled):active[b-wyqswpgrl0] {
    box-shadow: 0 1px 3px rgba(15, 23, 42, .18);
    transform: translateY(0) scale(.98);
}

.gia-detail-workflow-btn:focus-visible[b-wyqswpgrl0] {
    outline: 3px solid rgba(37, 99, 235, .28);
    outline-offset: 2px;
}

.gia-comments[b-wyqswpgrl0] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.gia-comments-title[b-wyqswpgrl0] { margin-top: 0; }

.gia-comments-list[b-wyqswpgrl0] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 120px;
    max-height: 420px;
    overflow-y: auto;
    margin-bottom: 12px;
    padding-right: 2px;
}

.gia-comments-state[b-wyqswpgrl0] {
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 8px;
    color: var(--tl, #94a3b8);
    font-size: 12px;
    text-align: center;
}

.gia-comments-error[b-wyqswpgrl0] {
    flex-direction: column;
    color: var(--err, #dc2626);
}

.gia-comment-item[b-wyqswpgrl0] {
    padding: 8px 10px;
    border: 1px solid var(--b, #e4e8ef);
    border-radius: var(--r, 8px);
    background: var(--bg, #f3f5fb);
}

.gia-comment-head[b-wyqswpgrl0] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 3px;
}

.gia-comment-author[b-wyqswpgrl0] {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 12px;
    font-weight: 600;
    color: var(--t, #1e293b);
}

.gia-comment-time[b-wyqswpgrl0] {
    flex-shrink: 0;
    white-space: nowrap;
    color: var(--tl, #94a3b8);
    font-size: 10.5px;
}

.gia-comment-content[b-wyqswpgrl0] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--t, #1e293b);
    font-size: 12.5px;
}

.gia-comment-compose[b-wyqswpgrl0] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-top: auto;
}

.gia-comment-compose textarea[b-wyqswpgrl0] {
    flex: 1;
    min-width: 0;
    min-height: 58px;
    resize: vertical;
    padding: 9px 11px;
    border: 1px solid var(--b, #e4e8ef);
    border-radius: var(--r, 8px);
    outline: none;
    color: var(--t, #1e293b);
    background: #fff;
    font-family: inherit;
    font-size: 12.5px;
}

.gia-comment-compose textarea:focus[b-wyqswpgrl0] {
    border-color: var(--p, #2563eb);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .12);
}

.gia-comment-compose textarea:disabled[b-wyqswpgrl0] { background: #f8fafc; }

/* ---- Mobile cards (ẩn trên desktop; bật trong media query) ---- */
.gia-cards[b-wyqswpgrl0] { display: none; }

.gia-card[b-wyqswpgrl0] {
    border: 1px solid var(--b, #e4e8ef);
    border-radius: 10px;
    padding: 10px 12px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;
}

    .gia-card.card-tangbo[b-wyqswpgrl0] { background: #fff8e6; border-color: #f3d98a; }
    .gia-card.card-sel[b-wyqswpgrl0] { background: #eaf1ff; border-color: var(--p, #2563eb); }

.gc-top[b-wyqswpgrl0] { display: flex; align-items: center; gap: 8px; }
.gc-chk[b-wyqswpgrl0] { display: inline-flex; }
    .gc-chk input[b-wyqswpgrl0] { width: 16px; height: 16px; accent-color: var(--p, #2563eb); }
.gc-route[b-wyqswpgrl0] { display: flex; align-items: center; gap: 6px; font-weight: 600; flex-wrap: wrap; }
.gc-arrow[b-wyqswpgrl0] { color: var(--tl, #94a3b8); font-size: 10px; }
.gc-status[b-wyqswpgrl0] { margin-left: auto; flex-shrink: 0; }

.gc-body[b-wyqswpgrl0] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gc-price[b-wyqswpgrl0] { font-weight: 700; color: var(--p, #2563eb); }
.gc-unit[b-wyqswpgrl0] { font-weight: 500; color: var(--tm, #64748b); font-size: 11px; }
.gc-chip[b-wyqswpgrl0] { background: #f1f5f9; color: #475569; border-radius: 6px; padding: 2px 8px; font-size: 11.5px; }
.gc-tangbo[b-wyqswpgrl0] { display: inline-flex; align-items: center; gap: 4px; background: #fff8e6; color: #b45309; border: 1px solid #fde68a; border-radius: 6px; padding: 2px 8px; font-size: 11px; font-weight: 600; }

.gc-meta[b-wyqswpgrl0] { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--tm, #64748b); }
    .gc-meta i[b-wyqswpgrl0] { color: var(--tl, #94a3b8); }

.gc-acts[b-wyqswpgrl0] { display: flex; gap: 6px; flex-wrap: wrap; border-top: 1px dashed var(--b, #e4e8ef); padding-top: 8px; }
    .gc-acts .btn[b-wyqswpgrl0] { flex: 1 1 auto; justify-content: center; }

@media (max-width: 768px) {
    /* Mobile: ẩn bảng danh sách chính (gia-desktop), hiện danh sách thẻ theo đội (gia-mobile) */
    .bt-tablewrap[b-wyqswpgrl0] { display: none; }
    /* …nhưng GIỮ bảng giá tuyến trong modal nhập nhiều dòng (không có bản thẻ thay thế) — cuộn ngang như các trang khác */
    .md .bt-tablewrap[b-wyqswpgrl0] { display: block; }
    .gia-mobile[b-wyqswpgrl0] { display: block; }
    .gia-cards[b-wyqswpgrl0] { display: flex; flex-direction: column; gap: 8px; padding: 10px; }

    /* Nút Bộ lọc: full-width trên mobile */
    .filter-toggle[b-wyqswpgrl0] {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-bottom: 5px;
    }

    .fbar[b-wyqswpgrl0] {
        padding: 12px;
        gap: 8px;
    }

    .fbar .fg[b-wyqswpgrl0] {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    /* Mobile: mặc định THU GỌN — CÙNG class .is-toggled nhưng NGHĨA ĐẢO LẠI (bấm = mở).
       Nhờ vậy lần bấm đầu luôn đổi trạng thái ở cả hai breakpoint.
       KHÁC desktop một điểm: thu gọn ở mobile vẫn CHỪA ô Tìm kiếm (.sw) + hàng nút, để tìm kiếm
       luôn dùng được mà không phải mở cả khối lọc trên màn hình nhỏ. */
    .filter-toggle.is-toggled + .fbar[b-wyqswpgrl0] { display: flex; }
    .filter-toggle:not(.is-toggled) + .fbar .fg:not(.sw)[b-wyqswpgrl0] { display: none; }
    .filter-toggle .fchev[b-wyqswpgrl0] { transform: none; }
    .filter-toggle.is-toggled .fchev[b-wyqswpgrl0] { transform: rotate(180deg); }

    .fbar-actions[b-wyqswpgrl0] {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }

        .fbar-actions .btn[b-wyqswpgrl0] {
            flex: 1 1 auto;
            justify-content: center;
        }

    .bt-table th[b-wyqswpgrl0], .bt-table td[b-wyqswpgrl0] {
        padding: 8px 10px;
    }

    .fr[b-wyqswpgrl0], .fr.fr3[b-wyqswpgrl0] {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 10px;
    }

    .dt-grid[b-wyqswpgrl0] {
        grid-template-columns: 1fr 1fr;
    }

    .gia-detail-layout[b-wyqswpgrl0] {
        flex-direction: column;
        gap: 14px;
    }

    .gia-detail-divider[b-wyqswpgrl0] {
        width: 100%;
        height: 1px;
        flex: 0 0 1px;
    }

    .gia-comments-list[b-wyqswpgrl0] { max-height: 360px; }

    .gia-comment-compose[b-wyqswpgrl0] {
        align-items: stretch;
        flex-direction: column;
    }

    .gia-comment-compose .btn[b-wyqswpgrl0] { width: 100%; justify-content: center; }

    .gg-head[b-wyqswpgrl0] {
        flex-wrap: wrap;
    }

    .md[b-wyqswpgrl0] {
        max-width: 100vw;
        max-height: 92vh;
        max-height: 92dvh;   /* iOS: trừ thanh công cụ Safari */
        border-radius: 12px 12px 0 0;
    }

    /* iOS Safari tự phóng to khi focus input có font < 16px -> ép 16px trên mobile để không bị zoom giật */
    input[b-wyqswpgrl0], textarea[b-wyqswpgrl0], select[b-wyqswpgrl0] {
        font-size: 16px;
    }

    /* Trên mobile các field xếp 1 cột -> modal dòng rất cao; phải cho cuộn để chạm được nút Lưu
       (ưu tiên hơn việc dropdown bị cắt; dropdown vẫn cap 220px và có thể cuộn field vào tầm nhìn). */
    .bt-rowmodal[b-wyqswpgrl0] {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Vùng chạm dễ bấm hơn trên cảm ứng */
    .btn[b-wyqswpgrl0] {
        min-height: 40px;
    }

    .row-acts .btn[b-wyqswpgrl0] {
        min-height: 40px;
    }

    .mf[b-wyqswpgrl0] {
        flex-wrap: wrap;
    }

        .mf .btn[b-wyqswpgrl0] {
            flex: 1 1 auto;
            justify-content: center;
        }
}
/* _content/Admin_KA_Transport_Pricing/Components/Pages/PhiBoiThuong/PhiBoiThuong.razor.rz.scp.css */
.bt-page[b-owrnk5t9pa] {
    font-size: 12.5px;
}

.ct-empty[b-owrnk5t9pa] {
    background: var(--s, #fff);
    border: 1px dashed var(--b, #e4e8ef);
    border-radius: var(--rl, 12px);
    padding: 40px;
    text-align: center;
    color: var(--tm, #64748b);
}

/* Nhóm nút filter: desktop "trong suốt", mobile thành 1 hàng */
.fbar-actions[b-owrnk5t9pa] {
    display: contents;
}

/* Bảng phí bồi thường */
.bt-tablewrap[b-owrnk5t9pa] {
    background: var(--s, #fff);
    border: 1px solid var(--b, #e4e8ef);
    border-radius: var(--rl, 12px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.bt-table[b-owrnk5t9pa] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

    .bt-table th[b-owrnk5t9pa] {
        text-align: left;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .4px;
        color: var(--tm, #64748b);
        padding: 10px 12px;
        border-bottom: 1px solid var(--b, #e4e8ef);
        background: #f8f9fc;
        white-space: nowrap;
    }

    .bt-table td[b-owrnk5t9pa] {
        padding: 9px 12px;
        border-bottom: 1px solid var(--b, #e4e8ef);
        white-space: nowrap;
    }

    .bt-table tr:last-child td[b-owrnk5t9pa] {
        border-bottom: none;
    }

    .bt-table tbody tr:hover td[b-owrnk5t9pa] {
        background: #f0f4ff;
    }

/* Modal nhập 1 dòng: cho overflow visible để dropdown (Loại PT/Nhà VC/Mặt hàng) không bị mép modal cắt.
   Modal này luôn ngắn nên không cần cuộn. */
.bt-rowmodal[b-owrnk5t9pa] {
    overflow: visible;
}

.ta-r[b-owrnk5t9pa] { text-align: right; }
.ta-c[b-owrnk5t9pa] { text-align: center; }

/* Khối lỗi import Excel trong modal batch */
.bt-importerr[b-owrnk5t9pa] {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 10px;
    font-size: 11.5px;
    color: #9a3412;
}

    .bt-importerr-h[b-owrnk5t9pa] { font-weight: 700; margin-bottom: 4px; }
    .bt-importerr ul[b-owrnk5t9pa] { margin: 0; padding-left: 18px; }
    .bt-importerr li[b-owrnk5t9pa] { margin: 1px 0; }
.bt-code[b-owrnk5t9pa] { font-weight: 600; }
.bt-price[b-owrnk5t9pa] { font-weight: 700; color: var(--p, #2563eb); }

/* màu ngày theo trạng thái */
.dt-expired[b-owrnk5t9pa] { color: var(--tl, #94a3b8); }
.dt-soon[b-owrnk5t9pa] { color: var(--err, #dc2626); font-weight: 600; }
.dt-caution[b-owrnk5t9pa] { color: var(--warn, #d97706); }
.dt-ok[b-owrnk5t9pa] { color: inherit; }

/* ============================================================
   Responsive — mobile (<= 768px)
   ============================================================ */
/* ---- Mobile cards (ẩn desktop) ---- */
.bt-cards[b-owrnk5t9pa] { display: none; }
.bt-card[b-owrnk5t9pa] { border: 1px solid var(--b, #e4e8ef); border-radius: 10px; padding: 10px 12px; background: #fff; display: flex; flex-direction: column; gap: 7px; }
.btc-top[b-owrnk5t9pa] { display: flex; align-items: center; gap: 8px; }
.btc-edit[b-owrnk5t9pa] { margin-left: auto; }
.btc-name[b-owrnk5t9pa] { font-weight: 600; }
.btc-body[b-owrnk5t9pa] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.btc-meta[b-owrnk5t9pa] { font-size: 11.5px; color: var(--tm, #64748b); }

/* Nút thu/mở bộ lọc hiện ở MỌI bề rộng (BUG tracking #31 — trước đây chỉ có trên mobile).
   Desktop mặc định MỞ: chưa bấm thì .fbar không mang class nào nên mọi .fg đều hiện.
   Mobile giữ mặc định THU GỌN qua media query cuối file. */
.filter-toggle[b-owrnk5t9pa] { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 5px; }
/* Desktop: mặc định MỞ → bấm 1 lần là ẩn TOÀN BỘ khối lọc (kể cả ô Tìm kiếm và hàng nút).
   Chỉ ẩn vài field sẽ chừa lại một hộp trắng rỗng — nút coi như không có tác dụng. */
.filter-toggle.is-toggled + .fbar[b-owrnk5t9pa] { display: none; }
/* Mũi tên: đang mở → chỉ lên; đã thu gọn → chỉ xuống. Xoay bằng CSS để nghĩa của .is-toggled
   đảo được theo breakpoint mà không cần C# biết bề rộng màn hình. */
.filter-toggle .fchev[b-owrnk5t9pa] { transition: transform .15s ease; transform: rotate(180deg); }
.filter-toggle.is-toggled .fchev[b-owrnk5t9pa] { transform: none; }
@media (max-width: 768px) {
    .filter-toggle[b-owrnk5t9pa] { display: flex; justify-content: center; width: 100%; margin-bottom: 5px; }
    /* Mobile: mặc định THU GỌN — CÙNG class .is-toggled nhưng NGHĨA ĐẢO LẠI (bấm = mở).
       Nhờ vậy lần bấm đầu luôn đổi trạng thái ở cả hai breakpoint.
       KHÁC desktop một điểm: thu gọn ở mobile vẫn CHỪA ô Tìm kiếm (.sw) + hàng nút, để tìm kiếm
       luôn dùng được mà không phải mở cả khối lọc trên màn hình nhỏ. */
    .filter-toggle.is-toggled + .fbar[b-owrnk5t9pa] { display: flex; }
    .filter-toggle:not(.is-toggled) + .fbar .fg:not(.sw)[b-owrnk5t9pa] { display: none; }
    .filter-toggle .fchev[b-owrnk5t9pa] { transform: none; }
    .filter-toggle.is-toggled .fchev[b-owrnk5t9pa] { transform: rotate(180deg); }
    .bt-maintable[b-owrnk5t9pa] { display: none; }
    .bt-cards[b-owrnk5t9pa] { display: flex; flex-direction: column; gap: 8px; }
    .fbar[b-owrnk5t9pa] {
        padding: 12px;
        gap: 8px;
    }

    .fbar .fg[b-owrnk5t9pa] {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .fbar-actions[b-owrnk5t9pa] {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }

        .fbar-actions .btn[b-owrnk5t9pa] {
            flex: 1 1 auto;
            justify-content: center;
        }

    /* Bảng cuộn ngang trên mobile (đã có overflow-x trên wrap) */
    .bt-table th[b-owrnk5t9pa], .bt-table td[b-owrnk5t9pa] {
        padding: 8px 10px;
    }

    .fr[b-owrnk5t9pa] {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 10px;
    }

    .md[b-owrnk5t9pa] {
        max-width: 100vw;
        max-height: 92vh;
        max-height: 92dvh;   /* iOS: trừ thanh công cụ Safari */
        border-radius: 12px 12px 0 0;
    }

    /* iOS Safari tự phóng to khi focus input < 16px */
    input[b-owrnk5t9pa], textarea[b-owrnk5t9pa], select[b-owrnk5t9pa] {
        font-size: 16px;
    }

    .mf[b-owrnk5t9pa] {
        flex-wrap: wrap;
    }

        .mf .btn[b-owrnk5t9pa] {
            flex: 1 1 auto;
            justify-content: center;
        }
}
/* _content/Admin_KA_Transport_Pricing/Components/Pages/PhiHaRong/PhiHaRong.razor.rz.scp.css */
.hr-page[b-4i55df2zt8] { font-size: 12.5px; }

.ct-empty[b-4i55df2zt8] {
    background: var(--s, #fff); border: 1px dashed var(--b, #e4e8ef); border-radius: var(--rl, 12px);
    padding: 40px; text-align: center; color: var(--tm, #64748b);
}

.muted[b-4i55df2zt8] { color: var(--tm, #64748b); font-size: 11.5px; }
/* Nút thu/mở bộ lọc hiện ở MỌI bề rộng (BUG tracking #31 — trước đây chỉ có trên mobile).
   Desktop mặc định MỞ: chưa bấm thì .fbar không mang class nào nên mọi .fg đều hiện.
   Mobile giữ mặc định THU GỌN qua media query cuối file. */
.filter-toggle[b-4i55df2zt8] { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 5px; }
/* Desktop: mặc định MỞ → bấm 1 lần là ẩn TOÀN BỘ khối lọc (kể cả ô Tìm kiếm và hàng nút).
   Chỉ ẩn vài field sẽ chừa lại một hộp trắng rỗng — nút coi như không có tác dụng. */
.filter-toggle.is-toggled + .fbar[b-4i55df2zt8] { display: none; }
/* Mũi tên: đang mở → chỉ lên; đã thu gọn → chỉ xuống. Xoay bằng CSS để nghĩa của .is-toggled
   đảo được theo breakpoint mà không cần C# biết bề rộng màn hình. */
.filter-toggle .fchev[b-4i55df2zt8] { transition: transform .15s ease; transform: rotate(180deg); }
.filter-toggle.is-toggled .fchev[b-4i55df2zt8] { transform: none; }
.fbar-actions[b-4i55df2zt8] { display: flex; flex: 1 1 100%; gap: 8px; justify-content: flex-end; align-items: flex-end; flex-wrap: wrap; }

.sdiv[b-4i55df2zt8] {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    color: var(--tm, #64748b); margin: 14px 0 10px; padding-bottom: 5px; border-bottom: 1px solid var(--b, #e4e8ef);
}

.bbar[b-4i55df2zt8] {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    background: var(--s, #fff); border: 1px solid var(--b, #e4e8ef); border-radius: var(--rl, 12px);
    padding: 10px 14px; margin-bottom: 12px;
}
.bbar-cnt[b-4i55df2zt8] { font-weight: 600; color: var(--p, #2563eb); margin-right: auto; }

/* .act-err / .act-err-btn → etrans-ui.css (global) */
.row-acts[b-4i55df2zt8] { display: flex; gap: 4px; justify-content: center; }

.bt-tablewrap[b-4i55df2zt8] { background: var(--s, #fff); border: 1px solid var(--b, #e4e8ef); border-radius: var(--rl, 12px); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bt-table[b-4i55df2zt8] { width: 100%; border-collapse: collapse; font-size: 12.5px; }
    .bt-table th[b-4i55df2zt8] {
        text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px;
        color: var(--tm, #64748b); padding: 10px 12px; border-bottom: 1px solid var(--b, #e4e8ef); background: #f8f9fc; white-space: nowrap;
    }
    .bt-table td[b-4i55df2zt8] { padding: 9px 12px; border-bottom: 1px solid var(--b, #e4e8ef); white-space: nowrap; }
    .bt-table tr:last-child td[b-4i55df2zt8] { border-bottom: none; }
    .bt-table tbody tr:hover td[b-4i55df2zt8] { background: #f0f4ff; }
    .bt-table tbody tr.sel td[b-4i55df2zt8] { background: #eaf1ff; }

.bt-rowmodal[b-4i55df2zt8] { overflow: visible; }
.ta-r[b-4i55df2zt8] { text-align: right; }
.ta-c[b-4i55df2zt8] { text-align: center; }
.bt-price[b-4i55df2zt8] { font-weight: 700; color: var(--p, #2563eb); }
.dt-expired[b-4i55df2zt8] { color: var(--tl, #94a3b8); }
.dt-soon[b-4i55df2zt8] { color: var(--err, #dc2626); font-weight: 600; }
.dt-caution[b-4i55df2zt8] { color: var(--warn, #d97706); }
.dt-ok[b-4i55df2zt8] { color: inherit; }

/* mobile cards */
.hr-cards[b-4i55df2zt8] { display: none; }
.hr-card[b-4i55df2zt8] { border: 1px solid var(--b, #e4e8ef); border-radius: 10px; padding: 10px 12px; background: #fff; display: flex; flex-direction: column; gap: 8px; }
    .hr-card.card-sel[b-4i55df2zt8] { background: #eaf1ff; border-color: var(--p, #2563eb); }
.gc-chk[b-4i55df2zt8] { display: inline-flex; }
    .gc-chk input[b-4i55df2zt8] { width: 15px; height: 15px; accent-color: var(--p, #2563eb); }
.hrc-top[b-4i55df2zt8] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hrc-port[b-4i55df2zt8] { font-weight: 600; }
.hrc-status[b-4i55df2zt8] { margin-left: auto; }
.hrc-body[b-4i55df2zt8] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hrc-chip[b-4i55df2zt8] { background: #f1f5f9; color: #475569; border-radius: 6px; padding: 2px 8px; font-size: 11.5px; }
.hrc-meta[b-4i55df2zt8] { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--tm, #64748b); }
.hrc-acts[b-4i55df2zt8] { display: flex; gap: 6px; flex-wrap: wrap; border-top: 1px dashed var(--b, #e4e8ef); padding-top: 8px; }
    .hrc-acts .btn[b-4i55df2zt8] { flex: 1 1 auto; justify-content: center; }

/* Ô chọn file Excel — full width, font 16px (chống zoom iOS), vùng chạm rộng */
.hr-file[b-4i55df2zt8] { display: block; width: 100%; font-size: 16px; padding: 10px 0; }
    .hr-file[b-4i55df2zt8]::file-selector-button { min-height: 40px; padding: 0 14px; margin-right: 10px; border: 1px solid var(--b, #e4e8ef); border-radius: 8px; background: #f8fafc; cursor: pointer; }

@media (max-width: 768px) {
    .filter-toggle[b-4i55df2zt8] { display: flex; justify-content: center; width: 100%; margin-bottom: 5px; }
    .hr-table[b-4i55df2zt8] { display: none; }
    .hr-cards[b-4i55df2zt8] { display: flex; flex-direction: column; gap: 8px; }
    .fbar[b-4i55df2zt8] { padding: 12px; gap: 8px; }
    .fbar .fg[b-4i55df2zt8] { flex: 1 1 100% !important; min-width: 0 !important; max-width: none !important; }
    /* Mobile: mặc định THU GỌN — CÙNG class .is-toggled nhưng NGHĨA ĐẢO LẠI (bấm = mở).
       Nhờ vậy lần bấm đầu luôn đổi trạng thái ở cả hai breakpoint.
       KHÁC desktop một điểm: thu gọn ở mobile vẫn CHỪA ô Tìm kiếm (.sw) + hàng nút, để tìm kiếm
       luôn dùng được mà không phải mở cả khối lọc trên màn hình nhỏ. */
    .filter-toggle.is-toggled + .fbar[b-4i55df2zt8] { display: flex; }
    .filter-toggle:not(.is-toggled) + .fbar .fg:not(.sw)[b-4i55df2zt8] { display: none; }
    .filter-toggle .fchev[b-4i55df2zt8] { transform: none; }
    .filter-toggle.is-toggled .fchev[b-4i55df2zt8] { transform: rotate(180deg); }
    .fr[b-4i55df2zt8] { grid-template-columns: 1fr; gap: 10px; margin-bottom: 10px; }
    input[b-4i55df2zt8], textarea[b-4i55df2zt8], select[b-4i55df2zt8] { font-size: 16px; }
    .md[b-4i55df2zt8] { max-width: 100vw; max-height: 92vh; max-height: 92dvh; border-radius: 12px 12px 0 0; }
    .bt-rowmodal[b-4i55df2zt8] { overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .btn[b-4i55df2zt8] { min-height: 40px; }
    .mf[b-4i55df2zt8] { flex-wrap: wrap; }
        .mf .btn[b-4i55df2zt8] { flex: 1 1 auto; justify-content: center; }
    .fbar-actions .btn[b-4i55df2zt8] { flex: 1 1 auto; justify-content: center; }
}
/* _content/Admin_KA_Transport_Pricing/Components/Pages/PhuPhi/PhuPhi.razor.rz.scp.css */
/* ===== Phụ phí — danh sách phẳng (mockup 0306) ===== */
/* Tab Phụ phí | Phụ phí quy đổi (đồng bộ style với /duyet-gia). */
.pp-tabs[b-33tgk0l1ca] { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--b, #e4e8ef); flex-wrap: wrap; }
.pp-tab[b-33tgk0l1ca] {
    border: none; background: transparent; padding: 10px 16px; font-size: 13px; font-weight: 600;
    color: var(--tm, #64748b); cursor: pointer; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 7px;
}
.pp-tab:hover[b-33tgk0l1ca] { color: var(--t, #1e293b); }
.pp-tab.active[b-33tgk0l1ca] { color: var(--p, #2563eb); border-bottom-color: var(--p, #2563eb); }

.pp-create-actions[b-33tgk0l1ca] { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.import-template-hint[b-33tgk0l1ca] { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px; border: 1px solid var(--b, #e4e8ef); border-radius: 10px; margin-bottom: 14px; }
.import-dropzone[b-33tgk0l1ca] { min-height: 170px; border: 2px dashed #93a4bd; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; color: var(--tm, #64748b); background: #f8fafc; }
.import-dropzone:hover[b-33tgk0l1ca] { border-color: var(--p, #2563eb); background: #eff6ff; }
.import-dropzone > i[b-33tgk0l1ca] { font-size: 30px; color: var(--p, #2563eb); }
.import-summary[b-33tgk0l1ca] { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.import-summary > span[b-33tgk0l1ca] { padding: 6px 10px; border-radius: 999px; background: #f1f5f9; }
.import-summary .import-ready[b-33tgk0l1ca] { background: #dbeafe; color: #1d4ed8; }
.import-summary .import-warn[b-33tgk0l1ca] { background: #fef3c7; color: #92400e; }
.import-summary .import-invalid[b-33tgk0l1ca] { background: #fee2e2; color: #b91c1c; }
.import-summary .import-ok[b-33tgk0l1ca] { background: #dcfce7; color: #166534; }
.import-toolbar[b-33tgk0l1ca] { display: flex; gap: 8px; margin-bottom: 10px; }
.import-toolbar .fi[b-33tgk0l1ca] { flex: 1 1 auto; width: auto; min-width: 240px; }
.import-toolbar .fs[b-33tgk0l1ca] { flex: 0 0 240px; width: 240px; }
.import-grid[b-33tgk0l1ca] { flex: 1 1 auto; min-height: 0; overflow: auto; border: 1px solid var(--b, #e4e8ef); border-radius: 8px; }
.import-table[b-33tgk0l1ca] { min-width: 2600px; }
.import-table th[b-33tgk0l1ca] { position: sticky; top: 0; z-index: 5; }
.import-table .imp-stt[b-33tgk0l1ca] { position: sticky; left: 0; width: 52px; min-width: 52px; max-width: 52px; z-index: 4; background: var(--s, #fff); }
.import-table .imp-status[b-33tgk0l1ca] { position: sticky; left: 52px; width: 150px; min-width: 150px; z-index: 4; background: var(--s, #fff); }
.import-table .imp-message[b-33tgk0l1ca] { position: sticky; left: 202px; width: 360px; min-width: 360px; max-width: 360px; z-index: 4; background: var(--s, #fff); box-shadow: 6px 0 8px -7px rgba(15,23,42,.35); white-space: normal; }
.import-table th.imp-stt[b-33tgk0l1ca], .import-table th.imp-status[b-33tgk0l1ca], .import-table th.imp-message[b-33tgk0l1ca] { z-index: 7; background: #fbfcfe; }
.import-table .imp-action[b-33tgk0l1ca] { position: sticky; right: 0; min-width: 92px; z-index: 4; background: var(--s, #fff); box-shadow: -6px 0 8px -7px rgba(15,23,42,.35); }
.import-table th.imp-action[b-33tgk0l1ca] { z-index: 7; background: #fbfcfe; }
.import-row-error td[b-33tgk0l1ca], .import-row-error .imp-stt[b-33tgk0l1ca], .import-row-error .imp-status[b-33tgk0l1ca], .import-row-error .imp-message[b-33tgk0l1ca], .import-row-error .imp-action[b-33tgk0l1ca] { background: #fff7f7; }
.import-row-warn td[b-33tgk0l1ca], .import-row-warn .imp-stt[b-33tgk0l1ca], .import-row-warn .imp-status[b-33tgk0l1ca], .import-row-warn .imp-message[b-33tgk0l1ca], .import-row-warn .imp-action[b-33tgk0l1ca] { background: #fffbeb; }
.imp-message .err[b-33tgk0l1ca] { color: #b91c1c; margin-bottom: 3px; }
.imp-message .warn[b-33tgk0l1ca] { color: #92400e; margin-bottom: 3px; }
.import-pager[b-33tgk0l1ca] { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 10px; }
.import-edit-errors[b-33tgk0l1ca] { margin-bottom: 12px; padding: 10px 12px; border: 1px solid #fecaca; border-radius: 8px; background: #fff7f7; color: #b91c1c; font-size: 12px; }

@media (max-width: 700px) {
    .pp-create-actions[b-33tgk0l1ca], .import-template-hint[b-33tgk0l1ca], .import-toolbar[b-33tgk0l1ca] { align-items: stretch; flex-direction: column; }
    .import-toolbar .fi[b-33tgk0l1ca], .import-toolbar .fs[b-33tgk0l1ca] { width: 100%; min-width: 0; flex-basis: auto; }
}
.pp-page[b-33tgk0l1ca] { display: flex; flex-direction: column; }

/* filter bar */
/* Nút thu/mở bộ lọc hiện ở MỌI bề rộng (BUG tracking #31 — trước đây chỉ có trên mobile).
   Desktop mặc định MỞ: chưa bấm thì .fbar không mang class nào nên mọi .fg đều hiện.
   Mobile giữ mặc định THU GỌN qua media query cuối file. */
.filter-toggle[b-33tgk0l1ca] { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 5px; }
/* Desktop: mặc định MỞ → bấm 1 lần là ẩn TOÀN BỘ khối lọc (kể cả ô Tìm kiếm và hàng nút).
   Chỉ ẩn vài field sẽ chừa lại một hộp trắng rỗng — nút coi như không có tác dụng. */
.filter-toggle.is-toggled + .fbar[b-33tgk0l1ca] { display: none; }
/* Mũi tên: đang mở → chỉ lên; đã thu gọn → chỉ xuống. Xoay bằng CSS để nghĩa của .is-toggled
   đảo được theo breakpoint mà không cần C# biết bề rộng màn hình. */
.filter-toggle .fchev[b-33tgk0l1ca] { transition: transform .15s ease; transform: rotate(180deg); }
.filter-toggle.is-toggled .fchev[b-33tgk0l1ca] { transform: none; }
.fg[b-33tgk0l1ca] { display: flex; flex-direction: column; gap: 4px; min-width: 130px; }
.fg.sw[b-33tgk0l1ca] { min-width: 200px; }
.flbl[b-33tgk0l1ca] { font-size: 11.5px; font-weight: 600; color: var(--tm, #64748b); }
.fi[b-33tgk0l1ca] { width: 100%; height: 32px; padding: 0 10px; border: 1px solid var(--b, #e4e8ef); border-radius: 8px; font-size: 13px; }
.fg.sw > div[b-33tgk0l1ca] { position: relative; }
.fg.sw .fi[b-33tgk0l1ca] { padding-left: 30px; }
.fg.sw i[b-33tgk0l1ca] { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 13px; }
.fbar-actions[b-33tgk0l1ca] { display: flex; gap: 6px; align-items: flex-end; }

/* toolbar */
.pp-toolbar[b-33tgk0l1ca] { display: flex; align-items: center; gap: 8px; margin: 10px 0; flex-wrap: wrap; }
.bbar-inline[b-33tgk0l1ca] { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; background: #f8fafc; border: 1px solid var(--b, #e4e8ef); border-radius: 10px; padding: 6px 8px; }
.bbar-cnt[b-33tgk0l1ca] { font-size: 12px; color: var(--p, #2563eb); font-weight: 500; margin-left: 2px; }
.pp-add[b-33tgk0l1ca] { margin-left: auto; }

.ct-empty[b-33tgk0l1ca] { background: #fff; border: 1px solid var(--b, #e4e8ef); border-radius: 12px; padding: 44px; text-align: center; color: var(--tm, #64748b); }

/* table */
.pp-wrap[b-33tgk0l1ca] { overflow-x: auto; overflow-y: auto; max-height: calc(100vh - 250px); border: 1px solid var(--b, #e4e8ef); border-radius: 10px; background: #fff; }
.pp-tbl[b-33tgk0l1ca] { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; white-space: nowrap; }
.pp-tbl thead th[b-33tgk0l1ca] { position: sticky; top: 0; z-index: 4; background: #f1f5f9; font-weight: 600; color: #334155; padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--b, #e4e8ef); }
.pp-tbl tbody td[b-33tgk0l1ca] { padding: 6px 10px; border-bottom: 1px solid #f1f5f9; }
.pp-tbl .ta-r[b-33tgk0l1ca] { text-align: right; }
.pp-price[b-33tgk0l1ca] { font-weight: 600; color: var(--p, #2563eb); }
.pp-doc[b-33tgk0l1ca] { font-size: 11px; color: var(--p, #2563eb); }
.muted[b-33tgk0l1ca] { color: var(--tm, #64748b); }
.row-acts[b-33tgk0l1ca] { display: flex; gap: 3px; justify-content: center; }
.pp-acts[b-33tgk0l1ca] { text-align: center; }

/* cột trái (checkbox + Loại phụ phí) — freeze sang trái */
.pp-chk[b-33tgk0l1ca] { width: 34px; min-width: 34px; max-width: 34px; text-align: center; }
.pp-loai[b-33tgk0l1ca] { min-width: 130px; }
.pp-tbl .stk-l[b-33tgk0l1ca] { position: sticky; z-index: 2; background: #fff; }
.pp-tbl .stk-l.pp-chk[b-33tgk0l1ca] { left: 0; }
.pp-tbl .stk-l:not(.pp-chk)[b-33tgk0l1ca] { left: 34px; }
.pp-tbl thead .stk-l[b-33tgk0l1ca] { z-index: 5; background: #f1f5f9; }
/* ID: cột dính đầu (sau checkbox) → luôn thấy khi cuộn ngang; đẩy Loại phụ phí sang trái 86px = 34(checkbox)+52(ID). */
.pp-tbl .stk-lid[b-33tgk0l1ca] { position: sticky; left: 34px; z-index: 2; background: #fff; box-sizing: border-box; width: 52px; min-width: 52px; max-width: 52px; text-align: right; overflow: hidden; text-overflow: ellipsis; }
.pp-tbl thead .stk-lid[b-33tgk0l1ca] { z-index: 5; background: #f1f5f9; }
.pp-tbl td.stk-l.stk-loai[b-33tgk0l1ca], .pp-tbl th.stk-l.stk-loai[b-33tgk0l1ca] { left: 86px; }
/* cột phải (HV từ/đến, trạng thái, chứng từ, hành động) — freeze sang phải.
   KHÓA CỨNG width = min = max: bảng table-layout:auto coi 'width' là gợi ý → cột render lệch bề rộng khai báo
   làm offset 'right' không khớp → HỞ/ĐÈ. Khóa min+max = đúng offset (giống cột dính bên Giá VC). */
.stk-r0[b-33tgk0l1ca] { width: 76px; min-width: 76px; max-width: 76px; }
.stk-r1[b-33tgk0l1ca] { width: 92px; min-width: 92px; max-width: 92px; }
.stk-r2[b-33tgk0l1ca] { width: 112px; min-width: 112px; max-width: 112px; }
.stk-r3[b-33tgk0l1ca] { width: 92px; min-width: 92px; max-width: 92px; }
.stk-r4[b-33tgk0l1ca] { width: 92px; min-width: 92px; max-width: 92px; }
.pp-tbl .stk-r0[b-33tgk0l1ca], .pp-tbl .stk-r1[b-33tgk0l1ca], .pp-tbl .stk-r2[b-33tgk0l1ca], .pp-tbl .stk-r3[b-33tgk0l1ca], .pp-tbl .stk-r4[b-33tgk0l1ca] { position: sticky; z-index: 2; background: #fff; box-sizing: border-box; }
.pp-tbl .stk-r0[b-33tgk0l1ca] { right: 0; box-shadow: -6px 0 8px -6px rgba(15, 23, 42, .15); }
.pp-tbl .stk-r1[b-33tgk0l1ca] { right: 76px; }
.pp-tbl .stk-r2[b-33tgk0l1ca] { right: 168px; }
.pp-tbl .stk-r3[b-33tgk0l1ca] { right: 280px; }
.pp-tbl .stk-r4[b-33tgk0l1ca] { right: 372px; }
/* Cắt nội dung dài (mã chứng từ…) đúng bề rộng để không tràn làm lệch/đè offset sticky. */
.pp-tbl td.stk-r1[b-33tgk0l1ca] { max-width: 92px; overflow: hidden; text-overflow: ellipsis; }
.pp-tbl td.stk-r2[b-33tgk0l1ca] { max-width: 112px; overflow: hidden; text-overflow: ellipsis; }
.pp-tbl td.stk-r3[b-33tgk0l1ca] { max-width: 92px; overflow: hidden; text-overflow: ellipsis; }
.pp-tbl td.stk-r4[b-33tgk0l1ca] { max-width: 92px; overflow: hidden; text-overflow: ellipsis; }
.pp-tbl thead .stk-r0[b-33tgk0l1ca], .pp-tbl thead .stk-r1[b-33tgk0l1ca], .pp-tbl thead .stk-r2[b-33tgk0l1ca], .pp-tbl thead .stk-r3[b-33tgk0l1ca], .pp-tbl thead .stk-r4[b-33tgk0l1ca] { z-index: 5; background: #f1f5f9; }

/* nhóm đội VC */
.grp-row[b-33tgk0l1ca] { cursor: pointer; }
.grp-row td[b-33tgk0l1ca], .grp-fill[b-33tgk0l1ca] { background: #eef2ff !important; border-top: 2px solid #c7d2fe; }
.grp-row:hover td[b-33tgk0l1ca], .grp-row:hover .grp-fill[b-33tgk0l1ca] { background: #e0e7ff !important; }
.grp-name[b-33tgk0l1ca] { font-weight: 700; font-size: 12.5px; color: #1e293b; margin-right: 8px; }

/* dòng dữ liệu */
.dr:hover td[b-33tgk0l1ca], .dr:hover .stk-l[b-33tgk0l1ca], .dr:hover .stk-r0[b-33tgk0l1ca], .dr:hover .stk-r1[b-33tgk0l1ca], .dr:hover .stk-r2[b-33tgk0l1ca], .dr:hover .stk-r3[b-33tgk0l1ca], .dr:hover .stk-r4[b-33tgk0l1ca] { background: #f8fafc; }
.dr.row-sel td[b-33tgk0l1ca], .dr.row-sel .stk-l[b-33tgk0l1ca], .dr.row-sel .stk-r0[b-33tgk0l1ca], .dr.row-sel .stk-r1[b-33tgk0l1ca], .dr.row-sel .stk-r2[b-33tgk0l1ca], .dr.row-sel .stk-r3[b-33tgk0l1ca], .dr.row-sel .stk-r4[b-33tgk0l1ca] { background: #eaf1ff; }
.dr.row-tangbo td.stk-l.pp-loai[b-33tgk0l1ca] { box-shadow: inset 3px 0 0 #f59e0b; }

/* date colors */
.dt-expired[b-33tgk0l1ca] { color: #dc2626; }
.dt-soon[b-33tgk0l1ca] { color: #d97706; }
.dt-caution[b-33tgk0l1ca] { color: #ca8a04; }
.dt-ok[b-33tgk0l1ca] { color: inherit; }

/* modal grids */
.fr[b-33tgk0l1ca] { display: grid; gap: 12px 14px; margin-bottom: 10px; }
.fr2x2[b-33tgk0l1ca] { grid-template-columns: 1fr 1fr; }
.fr3[b-33tgk0l1ca] { grid-template-columns: 1fr 1fr 1fr; }
.ff[b-33tgk0l1ca] { display: flex; flex-direction: column; gap: 5px; }
.ff > label[b-33tgk0l1ca] { font-size: 11.5px; font-weight: 600; color: var(--tm, #64748b); }
.ff input[b-33tgk0l1ca] { height: 34px; padding: 0 10px; border: 1px solid var(--b, #e4e8ef); border-radius: 8px; font-size: 13px; }
.pp-chk-inline[b-33tgk0l1ca] { flex-direction: row; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; cursor: pointer; }
.pp-tb[b-33tgk0l1ca] { padding-top: 18px; }

/* mobile cards */
.pp-cards[b-33tgk0l1ca] { display: none; }
.pp-mgroup[b-33tgk0l1ca] { border: 1px solid var(--b, #e4e8ef); border-radius: 10px; overflow: hidden; margin-bottom: 8px; }
.gg-head[b-33tgk0l1ca] { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: #eef2ff; cursor: pointer; }
.gg-title[b-33tgk0l1ca] { display: flex; align-items: center; gap: 8px; }
.gg-name[b-33tgk0l1ca] { font-weight: 700; }
.pp-card[b-33tgk0l1ca] { border-top: 1px solid #f1f5f9; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.pp-card.card-sel[b-33tgk0l1ca] { background: #eaf1ff; }
.ppc-top[b-33tgk0l1ca] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ppc-st[b-33tgk0l1ca] { margin-left: auto; }
.ppc-meta[b-33tgk0l1ca] { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--tm, #64748b); }
.gc-chk[b-33tgk0l1ca] { display: inline-flex; }
.gc-chk input[b-33tgk0l1ca] { width: 15px; height: 15px; accent-color: var(--p, #2563eb); }

@media (max-width: 1024px) {
    .pp-desktop[b-33tgk0l1ca] { display: none; }
    .pp-cards[b-33tgk0l1ca] { display: flex; flex-direction: column; gap: 8px; }
}
@media (max-width: 768px) {
    .filter-toggle[b-33tgk0l1ca] { display: flex; justify-content: center; width: 100%; margin-bottom: 5px; }
    .fbar[b-33tgk0l1ca] { padding: 12px; gap: 8px; }
    .fbar .fg[b-33tgk0l1ca] { flex: 1 1 100% !important; min-width: 0 !important; }
    /* Mobile: mặc định THU GỌN — CÙNG class .is-toggled nhưng NGHĨA ĐẢO LẠI (bấm = mở).
       Nhờ vậy lần bấm đầu luôn đổi trạng thái ở cả hai breakpoint.
       KHÁC desktop một điểm: thu gọn ở mobile vẫn CHỪA ô Tìm kiếm (.sw) + hàng nút, để tìm kiếm
       luôn dùng được mà không phải mở cả khối lọc trên màn hình nhỏ. */
    .filter-toggle.is-toggled + .fbar[b-33tgk0l1ca] { display: flex; }
    .filter-toggle:not(.is-toggled) + .fbar .fg:not(.sw)[b-33tgk0l1ca] { display: none; }
    .filter-toggle .fchev[b-33tgk0l1ca] { transform: none; }
    .filter-toggle.is-toggled .fchev[b-33tgk0l1ca] { transform: rotate(180deg); }
    .fr2x2[b-33tgk0l1ca], .fr3[b-33tgk0l1ca] { grid-template-columns: 1fr; }
    input[b-33tgk0l1ca], textarea[b-33tgk0l1ca], select[b-33tgk0l1ca] { font-size: 16px; }
    .btn[b-33tgk0l1ca] { min-height: 40px; }
    .pp-toolbar .btn[b-33tgk0l1ca] { flex: 1 1 auto; justify-content: center; }
    .pp-add[b-33tgk0l1ca] { margin-left: 0; }
    .fbar-actions .btn[b-33tgk0l1ca] { flex: 1 1 auto; justify-content: center; }
}
/* _content/Admin_KA_Transport_Pricing/Components/Pages/TinhGiaThu/TinhGiaThu.razor.rz.scp.css */
.tg-page[b-wqfajrrpu0] {
    font-size: 12.5px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tg-head[b-wqfajrrpu0] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tg-title[b-wqfajrrpu0] {
    font-size: 16px;
    font-weight: 700;
    color: var(--td, #1e293b);
}

.hint[b-wqfajrrpu0] {
    font-size: 11.5px;
    color: var(--tm, #64748b);
}

/* Bố cục: form trái + kết quả phải (desktop) */
.tg-grid[b-wqfajrrpu0] {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) minmax(360px, 1.1fr);
    gap: 12px;
    align-items: start;
}

.tg-form[b-wqfajrrpu0], .tg-result[b-wqfajrrpu0] {
    background: var(--s, #fff);
    border: 1px solid var(--b, #e4e8ef);
    border-radius: var(--rl, 12px);
    padding: 14px;
}

.tg-form[b-wqfajrrpu0] {
    overflow: visible; /* để dropdown SearchableSelect không bị cắt */
}

.tg-sec[b-wqfajrrpu0] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--tm, #64748b);
    margin: 6px 0 10px;
    padding-bottom: 5px;
    border-bottom: 1px dashed var(--b, #e4e8ef);
}

.tg-form .fr[b-wqfajrrpu0] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 10px;
}

.tg-form .fr:has(.ff:nth-child(3))[b-wqfajrrpu0] {
    grid-template-columns: repeat(3, 1fr);
}

.ff label[b-wqfajrrpu0] {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--tm, #64748b);
    margin-bottom: 4px;
}

.ff input[b-wqfajrrpu0], .ff select[b-wqfajrrpu0] {
    width: 100%;
    padding: 7px 9px;
    border: 1px solid var(--b, #e4e8ef);
    border-radius: 8px;
    font-size: 12.5px;
    background: #fff;
}

.tg-req[b-wqfajrrpu0] { color: var(--err, #dc2626); }

.tg-actions[b-wqfajrrpu0] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

    .tg-actions .btn[b-wqfajrrpu0] { flex: 1 1 auto; justify-content: center; }

/* ---- Kết quả ---- */
.tg-sum[b-wqfajrrpu0] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.tg-card[b-wqfajrrpu0] {
    border: 1px solid var(--b, #e4e8ef);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #f8f9fc;
}

.tgc-l[b-wqfajrrpu0] {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--tm, #64748b);
    font-weight: 600;
}

.tgc-v[b-wqfajrrpu0] {
    font-size: 15px;
    font-weight: 700;
    color: var(--td, #1e293b);
}

    .tgc-v.neg[b-wqfajrrpu0] { color: var(--err, #dc2626); }

.tg-total[b-wqfajrrpu0] {
    background: var(--p, #2563eb);
    border-color: var(--p, #2563eb);
}

    .tg-total .tgc-l[b-wqfajrrpu0] { color: #dbeafe; }
    .tg-total .tgc-v[b-wqfajrrpu0] { color: #fff; }

.tg-saved[b-wqfajrrpu0] {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #047857;
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 10px;
    font-size: 12px;
}

.tg-err[b-wqfajrrpu0] { color: var(--err, #dc2626); }

.tg-tablewrap[b-wqfajrrpu0] {
    border: 1px solid var(--b, #e4e8ef);
    border-radius: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tg-table[b-wqfajrrpu0] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

    .tg-table th[b-wqfajrrpu0] {
        text-align: left;
        font-size: 10.5px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .4px;
        color: var(--tm, #64748b);
        padding: 9px 10px;
        border-bottom: 1px solid var(--b, #e4e8ef);
        background: #f8f9fc;
        white-space: nowrap;
    }

    .tg-table td[b-wqfajrrpu0] {
        padding: 8px 10px;
        border-bottom: 1px solid var(--b, #e4e8ef);
        white-space: nowrap;
    }

    .tg-table tr:last-child td[b-wqfajrrpu0] { border-bottom: none; }

.ta-r[b-wqfajrrpu0] { text-align: right; }
.ta-c[b-wqfajrrpu0] { text-align: center; }
.neg[b-wqfajrrpu0] { color: var(--err, #dc2626); }
.tg-src[b-wqfajrrpu0] { font-size: 11px; color: var(--tl, #94a3b8); }

.ct-empty[b-wqfajrrpu0] {
    background: var(--s, #fff);
    border: 1px dashed var(--b, #e4e8ef);
    border-radius: var(--rl, 12px);
    padding: 30px;
    text-align: center;
    color: var(--tm, #64748b);
}

/* ============ Responsive ============ */
@media (max-width: 980px) {
    .tg-grid[b-wqfajrrpu0] { grid-template-columns: 1fr; }
    .tg-sum[b-wqfajrrpu0] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .tg-form .fr[b-wqfajrrpu0],
    .tg-form .fr:has(.ff:nth-child(3))[b-wqfajrrpu0] {
        grid-template-columns: 1fr;
    }

    /* iOS Safari tự phóng to khi focus input < 16px */
    .ff input[b-wqfajrrpu0], .ff select[b-wqfajrrpu0] { font-size: 16px; }
}
/* _content/Admin_KA_Transport_Pricing/Components/Pages/User/Login.razor.rz.scp.css */
.login-wrapper[b-inhg589hcb] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    padding: 24px;
}

.login-card[b-inhg589hcb] {
    width: 400px;
    max-width: 100%;
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

/* Branded blue header */
.login-header[b-inhg589hcb] {
    background: var(--primary-color);
    color: #fff;
    padding: 24px 20px;
    text-align: center;
}

.login-logo[b-inhg589hcb] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 10px;
}

.login-brand[b-inhg589hcb] {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
}

.login-title[b-inhg589hcb] {
    font-size: 13px;
    opacity: 0.9;
    margin-top: 2px;
}

.login-body[b-inhg589hcb] {
    padding: 24px 22px;
}

.form-group[b-inhg589hcb] {
    margin-bottom: 16px;
}

    .form-group label[b-inhg589hcb] {
        display: block;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--text-muted);
        margin-bottom: 6px;
    }

.form-control[b-inhg589hcb] {
    width: 100%;
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius);
    padding: 10px 12px;
    font-size: 13.5px;
    transition: border-color var(--transition), box-shadow var(--transition);
}

    .form-control:focus[b-inhg589hcb] {
        border-color: var(--primary-color);
        box-shadow: var(--focus-ring);
        outline: none;
    }

.btn-login[b-inhg589hcb] {
    width: 100%;
    margin-top: 8px;
    padding: 12px;
    border: none;
    border-radius: var(--border-radius);
    background: var(--primary-color);
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}

    .btn-login:hover:not(:disabled)[b-inhg589hcb] {
        background: var(--primary-active);
        transform: translateY(-1px);
        box-shadow: var(--shadow-primary);
    }

    .btn-login:focus-visible[b-inhg589hcb] {
        outline: none;
        box-shadow: var(--focus-ring);
    }

    .btn-login:disabled[b-inhg589hcb] {
        opacity: 0.7;
        cursor: not-allowed;
    }

.spinner-border-sm[b-inhg589hcb] {
    margin-right: 6px;
}

@media (max-width: 576px) {
    .login-card[b-inhg589hcb] {
        width: 100%;
    }
}
/* _content/Admin_KA_Transport_Pricing/Components/Shared/AdhocFeeList.razor.rz.scp.css */
/* Tab "Phụ phí quy đổi" trên trang Phụ phí — danh sách quản lý. */
.afl-filters[b-gh5lsim1h3] { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; margin-bottom: 12px; }
.afl-toolbar[b-gh5lsim1h3] { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.afl-cnt[b-gh5lsim1h3] { color: var(--tm, #64748b); font-size: 12.5px; margin-left: 4px; }

.afl-wrap[b-gh5lsim1h3] { overflow-x: auto; border: 1px solid var(--b, #e4e8ef); border-radius: 10px; }
.afl-tbl[b-gh5lsim1h3] { width: 100%; border-collapse: collapse; font-size: 13px; }
.afl-tbl th[b-gh5lsim1h3] { text-align: left; font-weight: 700; color: #475569; background: #f8fafc; padding: 9px 10px; border-bottom: 1px solid #e8edf3; white-space: nowrap; }
.afl-tbl td[b-gh5lsim1h3] { padding: 8px 10px; border-bottom: 1px solid #f1f4f8; vertical-align: middle; }
.afl-tbl tr.sel td[b-gh5lsim1h3] { background: #eff6ff; }
.afl-tbl tfoot td[b-gh5lsim1h3] { background: #f8fafc; font-weight: 700; border-top: 2px solid #e8edf3; }
.afl-money[b-gh5lsim1h3] { font-variant-numeric: tabular-nums; }
.afl-tbl .ta-r[b-gh5lsim1h3] { text-align: right; font-variant-numeric: tabular-nums; }
.afl-tbl .muted[b-gh5lsim1h3] { color: #94a3b8; }
.afl-chk[b-gh5lsim1h3] { width: 34px; text-align: center; }

.ct-empty[b-gh5lsim1h3] { padding: 28px 12px; text-align: center; color: var(--tm, #64748b); }
.afl-note[b-gh5lsim1h3] { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin-bottom: 10px; border-radius: 8px; font-size: 12.5px; background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }

/* ===== Mobile: bảng → card (quy ước pricing, breakpoint 768px) ===== */
.afl-cards[b-gh5lsim1h3] { display: none; }
.afl-card[b-gh5lsim1h3] { border: 1px solid var(--b, #e4e8ef); border-radius: 10px; padding: 10px 12px; background: var(--s, #fff); }
.afl-card.sel[b-gh5lsim1h3] { border-color: var(--p, #2563eb); background: #eff6ff; }
.afl-card-top[b-gh5lsim1h3] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.afl-card-chk[b-gh5lsim1h3] { display: flex; align-items: center; }
.afl-card-name[b-gh5lsim1h3] { font-weight: 600; font-size: 13px; flex: 1; min-width: 0; }
.afl-card-money[b-gh5lsim1h3] { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 6px; }
.afl-card-meta[b-gh5lsim1h3] { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--tm, #64748b); margin-top: 4px; }
.afl-card-total[b-gh5lsim1h3] { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 12px; border-radius: 10px; background: #f8fafc; border: 1px solid var(--b, #e4e8ef); font-size: 12.5px; }
.afl-card-total b[b-gh5lsim1h3] { font-size: 15px; font-variant-numeric: tabular-nums; }
.afl-selall[b-gh5lsim1h3] { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--tm, #64748b); }

@media (max-width: 768px) {
    .afl-filters .fg[b-gh5lsim1h3] { flex: 1 1 100% !important; min-width: 0 !important; }
    /* Component con KHÔNG nhận scoped CSS của trang → tự khai 16px, nếu không iOS zoom khi focus ô tìm kiếm. */
    .afl-filters .fi[b-gh5lsim1h3] { font-size: 16px; height: auto; min-height: 40px; }

    .afl-wrap[b-gh5lsim1h3] { display: none; }
    .afl-cards[b-gh5lsim1h3] { display: flex; flex-direction: column; gap: 8px; }
    .afl-toolbar .btn[b-gh5lsim1h3] { flex: 1 1 auto; justify-content: center; }
    .afl-cnt[b-gh5lsim1h3] { flex: 1 1 100%; margin-left: 0; }
}
/* _content/Admin_KA_Transport_Pricing/Components/Shared/AdhocFeePanel.razor.rz.scp.css */
/* Panel Phụ phí quy đổi (dùng chung 3 bảng kê). Style tách khỏi trang vì scoped-CSS của trang
   KHÔNG áp cho component con — copy các rule .fee-*/.detail-section/.dnote từ *.razor.css. */
.detail-section[b-zbqur7rwbd] { margin-bottom: 14px; }
.detail-section-title[b-zbqur7rwbd] {
    font-size: 11px; font-weight: 800; color: var(--p, #1a5fb4);
    text-transform: uppercase; letter-spacing: .04em;
    margin-bottom: 8px; padding-bottom: 5px; border-bottom: 2px solid #e0e7ff;
}

.fee-tbl[b-zbqur7rwbd] { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-bottom: 6px; }
.fee-tbl th[b-zbqur7rwbd] { text-align: left; font-weight: 600; color: #6b7280; padding: 4px 6px; border-bottom: 1px solid #e8edf3; }
.fee-tbl td[b-zbqur7rwbd] { padding: 5px 6px; border-bottom: 1px solid #f1f4f8; }
.fee-tbl .ta-r[b-zbqur7rwbd] { text-align: right; }
.fee-x[b-zbqur7rwbd] { border: none; background: transparent; color: #dc2626; cursor: pointer; font-size: 13px; line-height: 1; padding: 2px 4px; border-radius: 4px; }
.fee-x:hover[b-zbqur7rwbd] { background: #fee2e2; }
.fee-x:disabled[b-zbqur7rwbd] { opacity: .5; cursor: default; }
/* Nút thô (không phải .btn) nên không hưởng focus-ring nào — tự đặt, nếu không người dùng bàn phím
   không thấy mình đang đứng ở nút Xóa. */
.fee-x:focus-visible[b-zbqur7rwbd] { outline: 2px solid var(--p, #2563eb); outline-offset: 2px; }
.fee-acts[b-zbqur7rwbd] { white-space: nowrap; display: flex; gap: 4px; align-items: center; }

.fee-total[b-zbqur7rwbd] {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 9px 11px; margin-bottom: 10px; border-radius: 8px;
    background: #f8fafc; border: 1px solid var(--b, #e4e8ef);
}
.fee-total span[b-zbqur7rwbd] { color: var(--tm, #64748b); font-size: 12px; }
.fee-total b[b-zbqur7rwbd] { font-size: 15px; font-variant-numeric: tabular-nums; }

.fee-add[b-zbqur7rwbd] { margin-top: 10px; border-top: 1px dashed #e4e8ef; padding-top: 10px; }
.fee-add-row[b-zbqur7rwbd] { display: flex; gap: 8px; align-items: flex-end; margin-top: 8px; }
.fee-add-btns[b-zbqur7rwbd] { display: flex; gap: 8px; margin-top: 10px; }
.fee-add-btns .btn[b-zbqur7rwbd] { flex: 1; justify-content: center; }

.dnote[b-zbqur7rwbd] {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 10px 12px; border-radius: 8px; font-size: 12.5px;
    background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
}
.dnote i[b-zbqur7rwbd] { margin-top: 2px; }

/* ===== Mobile =====
   Trang bảng kê có sẵn `input,select { font-size:16px }` ở breakpoint 768px, NHƯNG scoped CSS của trang
   KHÔNG áp cho component con → panel này phải tự khai lại. Thiếu nó thì iOS tự phóng to trang mỗi lần
   focus vào ô đơn giá (font < 16px), người dùng phải zoom out thủ công sau mỗi lần nhập. */
@media (max-width: 768px) {
    .fi[b-zbqur7rwbd] { font-size: 16px; height: auto; min-height: 40px; }

    /* Đơn giá + Đơn vị đang nằm ngang với ô đơn vị cố định 106px → chật trên máy hẹp; xếp dọc. */
    .fee-add-row[b-zbqur7rwbd] { flex-direction: column; align-items: stretch; gap: 10px; }
    .fee-add-row .fg[b-zbqur7rwbd] { width: 100% !important; flex: 1 1 auto !important; }
    .fee-add-btns[b-zbqur7rwbd] { flex-direction: column; }

    /* Nút ✕ không phải .btn nên KHÔNG được rule .btn-sm{min:40px} toàn cục phủ → tự đặt vùng chạm. */
    .fee-x[b-zbqur7rwbd] { min-width: 40px; min-height: 40px; font-size: 16px; }
    .fee-acts[b-zbqur7rwbd] { gap: 6px; }

    .fee-tbl[b-zbqur7rwbd] { font-size: 12px; }
    .fee-tbl th[b-zbqur7rwbd], .fee-tbl td[b-zbqur7rwbd] { padding: 6px 4px; }
}
/* _content/Admin_KA_Transport_Pricing/Components/Shared/BangKeLichSuPanel.razor.rz.scp.css */
/* Bảng lịch sử trong popup Chi tiết chuyến — khớp tông với .detail-section của 3 màn bảng kê. */
.bklsu[b-otqaaf6bbp] { margin-top: 16px; border-top: 1px solid var(--bd, #e5e7eb); padding-top: 12px; }

.bklsu-title[b-otqaaf6bbp] {
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--mut, #6b7280); margin-bottom: 8px;
}

.bklsu-msg[b-otqaaf6bbp] { font-size: 13px; color: var(--mut, #6b7280); padding: 6px 0; }
.bklsu-err[b-otqaaf6bbp] { color: #b91c1c; }

/* Nhiều thao tác → cuộn trong khối, không kéo dài modal. */
.bklsu-scroll[b-otqaaf6bbp] { max-height: 220px; overflow: auto; overflow-x: auto; }

.bklsu-tbl[b-otqaaf6bbp] { width: 100%; border-collapse: collapse; font-size: 13px; }
.bklsu-tbl th[b-otqaaf6bbp], .bklsu-tbl td[b-otqaaf6bbp] { padding: 6px 8px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--bd, #e5e7eb); }
.bklsu-tbl th[b-otqaaf6bbp] { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--mut, #6b7280); background: var(--bg2, #f9fafb); position: sticky; top: 0; }
.bklsu-tbl tr:last-child td[b-otqaaf6bbp] { border-bottom: none; }

.bklsu-time[b-otqaaf6bbp] { white-space: nowrap; }
.bklsu-note[b-otqaaf6bbp] { color: var(--mut, #6b7280); }

/* Nhãn nguồn (phụ phí quy đổi) — phân biệt với thao tác trên chính bảng kê. */
.bklsu-src[b-otqaaf6bbp] {
    display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
    font-size: 11px; background: var(--bg2, #f3f4f6); color: var(--mut, #6b7280);
}

@media (max-width: 768px) {
    .bklsu-scroll[b-otqaaf6bbp] { max-height: none; }
    .bklsu-tbl th[b-otqaaf6bbp], .bklsu-tbl td[b-otqaaf6bbp] { padding: 6px 6px; }
    .bklsu-tbl[b-otqaaf6bbp] { font-size: 12px; }
}
/* _content/Admin_KA_Transport_Pricing/Components/Shared/BangKeSummaryPanel.razor.rz.scp.css */
/* Khối tổng hợp — CSS TỰ CHỨA.
   Component con KHÔNG nhận scoped CSS của trang, nên không dùng lại được .bkx-tbl/.bkx-wrap của
   3 trang bảng kê; phải tự khai. (Đúng cái bẫy đã làm AdhocFeePanel mất rule mobile.) */

.sum-title[b-wafrtfhoyd] {
    font-size: 12px; font-weight: 800; color: var(--p, #1a5fb4); text-transform: uppercase;
    letter-spacing: .04em; margin: 14px 0 8px; padding-bottom: 5px; border-bottom: 2px solid #e0e7ff;
}

/* Trạng thái rỗng — PHẢI tự khai: .ct-empty của trang/AdhocFeeList là scoped CSS của component
   KHÁC nên không áp được vào đây (Blazor gắn attribute b-xxxxx riêng cho từng component). */
.ct-empty[b-wafrtfhoyd] { padding: 28px 12px; text-align: center; color: var(--tm, #64748b); }

.sum-wrap[b-wafrtfhoyd] { overflow-x: auto; border: 1px solid var(--b, #e4e8ef); border-radius: 10px; background: var(--s, #fff); }
/* Vùng cuộn ngang phải tới được bằng bàn phím, nếu không người dùng bàn phím không đọc nổi
   các cột bị ẩn (WCAG 2.1.1). tabindex="0" đặt ở markup; đây là focus ring cho nó. */
.sum-wrap:focus-visible[b-wafrtfhoyd] { outline: 2px solid var(--focus-ring, rgba(37, 99, 235, .55)); outline-offset: 2px; }

.sum-tbl[b-wafrtfhoyd] { width: 100%; border-collapse: collapse; font-size: 12.5px; }
/* Tiêu đề cột ĐƯỢC xuống dòng (dữ liệu thì không). Nhãn kiểu "SL bồi thường" / "ĐG bồi thường"
   nếu giữ nowrap sẽ ép cả bảng rộng thêm ~100–260px và sinh thanh cuộn ngang ngay ở 1280–1440px —
   đo được 3 thanh cuộn cùng lúc trong khối. Cho tiêu đề xuống 2 dòng là hết. */
.sum-tbl th[b-wafrtfhoyd] {
    text-align: left; font-weight: 700; color: #475569; background: #f8fafc;
    padding: 8px 7px; border-bottom: 1px solid #e8edf3; white-space: normal;
}
/* Đệm ngang 7px (không phải 10px): 3px mỗi bên × 13 cột = ~78px — vừa đủ để bảng Tổng hợp
   hết tràn ở cửa sổ 1440px (vùng nội dung 1198px sau khi trừ sidebar 230px). */
.sum-tbl td[b-wafrtfhoyd] { padding: 7px 7px; border-bottom: 1px solid #f1f4f8; white-space: nowrap; }
.sum-tbl .ta-r[b-wafrtfhoyd] { text-align: right; font-variant-numeric: tabular-nums; }
.sum-tbl tfoot td[b-wafrtfhoyd] { background: #f1f5f9; font-weight: 700; border-top: 2px solid #cbd5e1; }
.sum-amount[b-wafrtfhoyd] { font-weight: 600; }

/* ===== Bung chi tiết chuyến trong bảng tổng hợp (BUG tracking #32) ===== */
.sum-exp-th[b-wafrtfhoyd], .sum-exp[b-wafrtfhoyd] { width: 30px; padding-left: 6px; padding-right: 0; }
.sum-exp-btn[b-wafrtfhoyd] {
    appearance: none; border: 0; background: none; cursor: pointer; padding: 2px 4px;
    color: var(--tm, #64748b); font-size: 11px; line-height: 1;
}
.sum-exp-btn:hover[b-wafrtfhoyd] { color: var(--p, #1a5fb4); }
.sum-exp-btn:focus-visible[b-wafrtfhoyd] { outline: 2px solid var(--focus-ring, rgba(37, 99, 235, .55)); outline-offset: 1px; border-radius: 3px; }
.sum-detail > td[b-wafrtfhoyd] { background: #f8fafc; padding: 0 0 8px; }
/* Bảng con: nền trắng, chữ nhỏ hơn một bậc để phân biệt rõ với dòng tổng hợp. */
.sum-sub[b-wafrtfhoyd] { width: 100%; border-collapse: collapse; font-size: 11.5px; background: #fff; }
.sum-sub th[b-wafrtfhoyd] {
    text-align: left; font-weight: 600; color: #64748b; background: #eef2f7;
    padding: 5px 8px; border-bottom: 1px solid #e2e8f0; white-space: nowrap;
}
.sum-sub td[b-wafrtfhoyd] { padding: 5px 8px; border-bottom: 1px solid #f1f5f9; white-space: nowrap; }
.sum-sub .ta-r[b-wafrtfhoyd] { text-align: right; font-variant-numeric: tabular-nums; }
.sum-sub tr:last-child td[b-wafrtfhoyd] { border-bottom: none; }

/* Caption chỉ dành cho screen reader — bảng đã có tiêu đề nhìn thấy được ở .sum-title. */
.sum-cap[b-wafrtfhoyd] {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Cắt ngắn danh sách biển số. PHẢI đặt max-width lên phần tử BÊN TRONG ô:
   max-width trên <td> bị bỏ qua khi table-layout:auto (đo được ô rộng 307px dù khai 220px),
   khiến cột này đẩy cả bảng rộng ra. Nội dung đầy đủ vẫn nằm trong DOM nên screen reader đọc đủ. */
.sum-plates > span[b-wafrtfhoyd] {
    display: block; max-width: 220px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Bồi thường (trái, co giãn) + thanh toán (phải) — mockup: minmax(0,1fr) 435px.
   Cột phải là minmax(435px, auto) chứ KHÔNG phải 435px cứng: bảng Nhập/Xuất cần 437px, chốt cứng
   435px làm nó tràn 4px ⇒ luôn có một thanh cuộn ngang vô nghĩa ở MỌI bề rộng màn hình. */
.sum-split[b-wafrtfhoyd] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(435px, auto); gap: 18px; align-items: start; }
/* Chốt chặn: grid item mặc định min-width:auto = min-content của con. Con ở đây bọc một bảng
   white-space:nowrap nên nó từ chối co, .sum-wrap không kịp cuộn và CẢ TRANG bị đẩy rộng ra.
   Giữ dòng này để lỗi không tái phát khi ai đó sửa grid-template-columns. */
.sum-split > *[b-wafrtfhoyd] { min-width: 0; }
.sum-pay tfoot td[b-wafrtfhoyd] { background: transparent; border-top: none; font-weight: 600; }
.sum-pay tfoot tr:first-child td[b-wafrtfhoyd] { border-top: 2px solid #cbd5e1; }
.sum-minus td[b-wafrtfhoyd] { color: #c00000; }
.sum-final td[b-wafrtfhoyd] { background: #dce8f5; font-weight: 800; }
.sum-unclassified td[b-wafrtfhoyd] { color: var(--tm, #64748b); font-style: italic; }

@media (max-width: 1100px) {
    /* minmax(0,…) chứ KHÔNG phải 1fr trần: `1fr` = minmax(auto,1fr), mà `auto` lấy min-content
       của con ⇒ ở 360px cột này tính ra 725px, tràn khỏi khung 345px và làm CẢ TRANG cuộn ngang,
       còn 2 bảng dưới thì bị cắt cụt thay vì tự cuộn. */
    .sum-split[b-wafrtfhoyd] { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
    /* Bảng chi tiết đổi sang card ở 768px, nhưng 3 bảng này GIỮ dạng bảng + cuộn ngang:
       chúng là bảng đối chiếu số theo hàng-cột, tách thành card là mất chính công dụng đó. */
    .sum-tbl[b-wafrtfhoyd] { font-size: 11.5px; }
    .sum-tbl th[b-wafrtfhoyd], .sum-tbl td[b-wafrtfhoyd] { padding: 6px 8px; }
    .sum-plates > span[b-wafrtfhoyd] { max-width: 140px; }
}
/* _content/Admin_KA_Transport_Pricing/Components/Shared/ETransDateInput.razor.rz.scp.css */
/* Bọc: rộng như input thường; icon lịch nằm phải, phủ input date ẩn để mở calendar native. */
.ed[b-2phi1v3j4v] {
    position: relative;
    display: block;
    width: 100%;
}

.ed-text[b-2phi1v3j4v] {
    width: 100%;
    box-sizing: border-box;
    padding-right: 36px; /* chừa chỗ icon lịch */
}

.ed-invalid .ed-text[b-2phi1v3j4v] {
    border-color: var(--err, #dc2626);
    background: #fff5f5;
}

.ed-cal[b-2phi1v3j4v] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--tm, #64748b);
    cursor: pointer;
}

    .ed-cal:hover[b-2phi1v3j4v] {
        color: var(--p, #2563eb);
    }

/* Disabled: icon lịch không còn con trỏ/hover, input date ẩn cũng khóa. */
.ed-disabled .ed-cal[b-2phi1v3j4v] {
    cursor: default;
    color: var(--tl, #94a3b8);
    pointer-events: none;
}

/* input type=date ẩn phủ trọn vùng icon → click icon = mở calendar native (không cần JS). */
.ed-native[b-2phi1v3j4v] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
}
    /* ẩn phần text/spin của input date ẩn, chỉ giữ nút mở picker phủ toàn ô icon */
    .ed-native[b-2phi1v3j4v]::-webkit-calendar-picker-indicator {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        cursor: pointer;
    }
/* _content/Admin_KA_Transport_Pricing/Components/Shared/Pager.razor.rz.scp.css */
.pager[b-wjdtq4pvb3] {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
    margin-top: 12px;
    flex-wrap: wrap;
}

.pager-info[b-wjdtq4pvb3] {
    margin-right: auto;
    color: var(--tm, #64748b);
    font-size: 12px;
}

.pager-dots[b-wjdtq4pvb3] {
    padding: 0 4px;
    color: var(--tl, #94a3b8);
}
/* _content/Admin_KA_Transport_Pricing/Components/Shared/SearchableSelect.razor.rz.scp.css */
/* Không cho .ms-wrap giãn chiều cao theo ô grid (vd .fr 2 cột khi ô bên cạnh cao hơn).
   Nếu giãn -> mũi tên (.ms-arrow top:50%) bị lệch xuống và dropdown (.ms-dropdown top:100%) xổ cách 1 khoảng lớn. */
.ms-wrap[b-6op2uh6zna] {
    flex: 0 0 auto;
}

/* Neo mũi tên vào chính ô (.ms-box cao 32px) để luôn căn giữa, không phụ thuộc chiều cao .ms-wrap. */
.ms-box[b-6op2uh6zna] {
    position: relative;
}

/* iOS Safari: ô tìm trong dropdown font < 16px sẽ bị tự phóng to khi focus -> ép 16px trên mobile. */
@media (max-width: 768px) {
    .ms-dropdown .fi[b-6op2uh6zna] {
        font-size: 16px;
    }
}
/* _content/Admin_KA_Transport_Pricing/Components/Widgets/CustomRadzenDropDownDataGrid.razor.rz.scp.css */