/* _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;
    }
}

/* Thanh cuộn: luật CHUNG đã chuyển sang wwwroot/etrans-ui.css.
   Khối cũ ở đây là scoped css nên Blazor gắn [b-xxxxxxx] vào — nó CHỈ áp cho markup của
   MainLayoutV2 chứ không phải toàn app như tên "Custom Scrollbar Styles" gợi ý. Hai biến
   thể .thin-scrollbar / .dark-scrollbar đi kèm chưa từng được dùng ở đâu trong repo. */
/* _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;
}

    /* KHÔNG đặt scrollbar-width/scrollbar-color ở đây: Chrome thấy thuộc tính chuẩn là bỏ qua
       ::-webkit-scrollbar bên dưới → thanh cuộn sidebar phình về cỡ mặc định thay vì 4px như ý.
       Firefox đã có scrollbar-width: thin từ luật chung trong wwwroot/etrans-ui.css. */
    .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 */
/* Khung thu/mở (.filter-bar) là rule TOÀN CỤC ở wwwroot/etrans-ui.css (mockup BA 08/2026); .fbar
   chỉ còn bố cục bên trong thân, KHÔNG vẽ viền/nền nữa (tránh viền kép). */
.fbar[b-etz9k9k8lw] { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.fbar .fg[b-etz9k9k8lw] { min-width: 128px; }
.fbar .sw[b-etz9k9k8lw] { flex: 2 1 auto; }
.fbar-row[b-etz9k9k8lw] { display: flex; flex: 1 1 100%; align-items: flex-end; gap: 10px; }
.fbar-row > .fg[b-etz9k9k8lw] { flex: 1 1 auto; }
.fbar-row > .sw[b-etz9k9k8lw] { flex: 2 1 auto; }
.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: 0 0 auto; 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; }
/* Thanh sửa HH tính phí của tab chuyến — dồn trái, khác thanh workflow của tab bảng kê. */
.bkc-trip-bar[b-etz9k9k8lw] { justify-content: flex-start; gap: 8px; }
.bkc-trip-hint[b-etz9k9k8lw] { color: var(--tm, #64748b); font-size: 12px; }
/* Ô HH tính phí ở tab chuyến: chừa sẵn bề ngang của ô nhập để bảng không co giật
   khi bật/tắt chế độ sửa. */
.trip-table td.loss-cell[b-etz9k9k8lw] { min-width: 110px; }
.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; }

/* Khối tổng hợp dùng cùng pattern với xe tải, sà lan và tàu chuột. */
.bkc-sum[b-etz9k9k8lw] { margin-top: 18px; }
.bkc-sum-toggle[b-etz9k9k8lw] { width: 100%; justify-content: flex-start; gap: 8px; font-weight: 700; }
.bkc-sum-count[b-etz9k9k8lw] {
    margin-left: auto; color: var(--tm, #64748b); font-size: 12px; font-weight: 500;
}
.bkc-sum-error[b-etz9k9k8lw] {
    display: flex; align-items: center; justify-content: center; gap: 10px; color: #b91c1c;
}

/* 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; }
/* +1 cột HH tính phí và +1 cột Pháp nhân so với bộ cột cũ. */
.trip-table[b-etz9k9k8lw] { min-width: 2320px; }
.freight-table[b-etz9k9k8lw] { min-width: 3120px; }
.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;
}
/* Header 2 tầng dính.
   LỖI CŨ: dòng 2 neo `top: 22px` trong khi dòng gộp chỉ đặt `height: 22px`. Trên <th>, `height`
   là chiều cao TỐI THIỂU — padding 8px trên/dưới vẫn cộng thêm, nên dòng gộp cao ~30px thật.
   Dòng 2 vì thế dính cao hơn đáy dòng 1 ~8px và trườn đè lên; ô ghim rowspan="2" neo top:0
   lại không bù trừ nên mép dưới của nó lệch hẳn so với phần header còn lại — đúng chỗ lệch trên ảnh.
   CÁCH SỬA: khoá chiều cao dòng gộp bằng một biến, và dòng 2 neo theo CHÍNH biến đó.
   Một nguồn số duy nhất → sửa padding/cỡ chữ sau này không làm lệch lại. */
.bkc-table[b-etz9k9k8lw] { --grp-h: 30px; }
.bkc-table thead th[b-etz9k9k8lw] { position: sticky; top: 0; z-index: 3; border-bottom: 2px solid #b8d0e8; }
/* Chỉ ô CHỈ-THUỘC-DÒNG-1 mới bị khoá chiều cao. Ô rowspan="2" (Mã chuyến, Trạng thái…) phải
   trải hết hai dòng — ép line-height cho nó là dồn chữ lên đỉnh, lệch kiểu khác. */
.bkc-table thead .group-row th:not([rowspan])[b-etz9k9k8lw] {
    top: 0;
    height: var(--grp-h); padding-top: 0; padding-bottom: 0; line-height: var(--grp-h);
    box-sizing: border-box;
}
.bkc-table thead .group-row th[rowspan][b-etz9k9k8lw] { top: 0; vertical-align: middle; }
.bkc-table thead .group-row + tr th[b-etz9k9k8lw] { top: var(--grp-h); }
.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; }

/* ---- Dòng ĐÃ DUYỆT nhưng dữ liệu eTransport đã đổi (spec: highlight cam nhạt) ----
   Đặt SAU .row-error/.row-warning để thắng khi một dòng mang nhiều lớp: cảnh báo này nói "số đang
   hiện không còn khớp nguồn", nặng hơn mấy lớp kia trên một dòng ĐÃ duyệt.
   Dải bên trái giữ lại tín hiệu của lớp cũ thay vì xoá hẳn. */
.bkc-table tbody tr.row-stale td[b-etz9k9k8lw] { background: #ffedd5; }
.bkc-table tbody tr.row-stale .freeze-left[b-etz9k9k8lw], .bkc-table tbody tr.row-stale .freeze-right[b-etz9k9k8lw] { background: #ffedd5; }
.bkc-table tbody tr.row-stale td:first-child[b-etz9k9k8lw] { box-shadow: inset 3px 0 0 #ea580c; }
.bkc-table tbody tr.row-stale:hover td[b-etz9k9k8lw] { background: #fde3c4; }
.bks-warn[b-etz9k9k8lw] { margin-left: 6px; }
.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;
}
/* Bảng "Chuyến": cột 1 là STT và KHÔNG dính, trong khi cột 2 (Mã chuyến) mang .freeze-left
   với left:0 → cuộn ngang là Mã chuyến trượt đè lên STT. Ghim luôn STT ở 0 và đẩy Mã chuyến
   ra sau nó. Khoá cứng bề rộng STT để offset của cột 2 không bao giờ lệch khỏi thực tế.
   (Các bảng kê khác không dính lỗi này: ở đó ô ghim CHÍNH LÀ cột đầu.) */
.trip-table thead th.stt-freeze[b-etz9k9k8lw], .trip-table tbody td.stt-freeze[b-etz9k9k8lw] {
    position: sticky; left: 0; z-index: 4;
    width: 46px; min-width: 46px; max-width: 46px; box-sizing: border-box;
    background: #fff;
}
.trip-table thead th.stt-freeze[b-etz9k9k8lw] { background: #dce8f5; z-index: 6; }
.trip-table .freeze-left[b-etz9k9k8lw] { left: 46px; }
.trip-table tbody tr.selected td.stt-freeze[b-etz9k9k8lw] { background: #eff6ff; }
.trip-table tbody tr.row-error td.stt-freeze[b-etz9k9k8lw] { background: #fff1f2; }
.trip-table tbody tr.row-warning td.stt-freeze[b-etz9k9k8lw] { background: #fffbeb; }

.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; }
.document-link[b-etz9k9k8lw] {
    color: var(--p, #2563eb); font-weight: 700; text-decoration: none;
    text-underline-offset: 2px;
}
.document-link:hover[b-etz9k9k8lw] { text-decoration: underline; }
.document-link:focus-visible[b-etz9k9k8lw] { outline: 2px solid rgba(37, 99, 235, .35); outline-offset: 2px; }
.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 */
/* Bố cục popup chi tiết — bám mockup + trang xe tải:
   KHỐI TRÊN co theo nội dung (trần 46%), KHỐI DƯỚI chia Lịch sử (rộng) | Chi phí + Phụ phí.
   Modal mang class .trip-detail-modal (global, etrans-ui.css) nên có chiều cao xác định →
   max-height theo % ở đây mới có tác dụng. */
.dwrap2[b-etz9k9k8lw] { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.dtop[b-etz9k9k8lw] { flex: 0 1 auto; min-height: 0; max-height: 46%; overflow-y: auto; padding-right: 4px; }
.dbot[b-etz9k9k8lw] {
    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-etz9k9k8lw] { flex: 3; min-width: 0; overflow-y: auto; }
.dbot-r[b-etz9k9k8lw] { flex: 2; min-width: 0; overflow-y: auto; }
/* Khối "Chi phí CONT": mockup xếp 1 cột để nhãn dài không bị cắt. */
.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; }
/* Khối "Chi phí CONT" — giữ 2 cột (khối này nằm ở cột TRÁI rộng, 1 cột sẽ phí bề ngang và
   kéo popup dài ra). PHẢI khai SAU .detail-grid: cùng độ ưu tiên thì rule sau thắng — bản trước
   đặt trước nên không bao giờ có tác dụng. */
.detail-grid.cost-cont-grid[b-etz9k9k8lw] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.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; }
/* Khung cuộn riêng cho bảng phụ phí — cùng lý do với AdhocFeePanel: cột phải của popup hẹp,
   bảng nhiều cột nên bề rộng tối thiểu vượt khung; .dbot-r chỉ có overflow-y nên phần thừa tràn ra. */
.fee-tablewrap[b-etz9k9k8lw] { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 9px; }
.fee-table[b-etz9k9k8lw] { width: 100%; min-width: 340px; border-collapse: collapse; font-size: 12px; }
.fee-table td:first-child[b-etz9k9k8lw] { word-break: break-word; }
.fee-table .num[b-etz9k9k8lw] { white-space: nowrap; }
.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; }
/* `1fr` KHÔNG co được dưới bề rộng nội dung → ô Đơn vị bị đẩy khỏi khung và cả popup sinh
   thanh cuộn ngang. minmax(0,1fr) mới cho cột co lại. */
.fee-editor-row[b-etz9k9k8lw] { display: grid; grid-template-columns: minmax(0, 1fr) 106px; gap: 7px; }
.fee-editor-row .fi[b-etz9k9k8lw] { width: 100%; min-width: 0; }
.fee-custom-name[b-etz9k9k8lw] { margin-top: 6px; }
/* Thêm + Lưu trên MỘT hàng, chia đôi bề ngang. */
.fee-add-btns[b-etz9k9k8lw] { display: flex; flex-wrap: nowrap; gap: 8px; }
.fee-add-btns .btn[b-etz9k9k8lw] { flex: 1; 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; overflow-y: hidden; }
    .bkc-tab[b-etz9k9k8lw] { min-width: 178px; flex: 0 0 auto; }
    .fbar-row[b-etz9k9k8lw] { display: contents; }
    .fbar .fg[b-etz9k9k8lw] { flex: 1 1 100%; min-width: 0 !important; }
    .fbar-actions[b-etz9k9k8lw] { flex: 1 1 100%; }
    .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; }
    /* Mobile: bỏ chia đôi, xếp chồng và để cả popup cuộn một mạch. */
    .dtop[b-etz9k9k8lw] { max-height: none; overflow: visible; }
    .dbot[b-etz9k9k8lw] { flex-direction: column; gap: 10px; }
    .dbot-l[b-etz9k9k8lw], .dbot-r[b-etz9k9k8lw] { overflow: visible; }
    .detail-grid[b-etz9k9k8lw] { grid-template-columns: 1fr; }
    input[b-etz9k9k8lw], select[b-etz9k9k8lw], textarea[b-etz9k9k8lw] { font-size: 16px; }
}

/* CHÍNH CON SỐ SL nhận/giao là link mở phiếu cân (đồng bộ 3 trang bảng kê kia, 21/08/2026).
   Giữ nguyên dáng số (font/căn phải) — chỉ gạch chân mờ để lộ ra là bấm được. */
.pc-num[b-etz9k9k8lw] {
    border: 0; background: none; padding: 0; margin: 0; cursor: pointer;
    font: inherit; color: inherit;
    text-decoration: underline; text-decoration-style: dotted;
    text-underline-offset: 2px; text-decoration-color: var(--p, #1a5fb4);
}
.pc-num:hover[b-etz9k9k8lw] { color: var(--p, #1a5fb4); text-decoration-style: solid; }
.pc-num:focus-visible[b-etz9k9k8lw] { outline: none; box-shadow: var(--focus-ring, 0 0 0 2px rgba(26,95,180,.35)); border-radius: 3px; }
/* _content/Admin_KA_Transport_Pricing/Components/Pages/BangKeCont/BangKeContSummaryPanel.razor.rz.scp.css */
/* Giữ cùng ngôn ngữ thiết kế với BangKeSummaryPanel của xe tải, sà lan và tàu chuột. */
.sum-title[b-1fu4mb7rm4] {
    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;
}

.sum-wrap[b-1fu4mb7rm4] {
    overflow-x: auto; border: 1px solid var(--b, #e4e8ef); border-radius: 10px;
    background: var(--s, #fff);
}
.sum-tbl[b-1fu4mb7rm4] { width: 100%; min-width: 1320px; border-collapse: collapse; font-size: 12.5px; }
.sum-tbl th[b-1fu4mb7rm4] {
    text-align: left; font-weight: 700; color: #475569; background: #f8fafc;
    padding: 8px 10px; border-bottom: 1px solid #e8edf3; white-space: nowrap;
}
.sum-tbl td[b-1fu4mb7rm4] { padding: 7px 10px; border-bottom: 1px solid #f1f4f8; white-space: nowrap; }
.sum-tbl .ta-r[b-1fu4mb7rm4] { text-align: right; font-variant-numeric: tabular-nums; }
.sum-tbl tfoot td[b-1fu4mb7rm4] { background: #f1f5f9; font-weight: 700; border-top: 2px solid #cbd5e1; }
.sum-amount[b-1fu4mb7rm4] { font-weight: 600; }
.sum-plates[b-1fu4mb7rm4] { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }

.sum-group-row:hover td[b-1fu4mb7rm4] { background: #f8fafc; }
.sum-group-toggle[b-1fu4mb7rm4] {
    display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 0;
    color: inherit; background: transparent; border: 0; font: inherit; font-weight: 600;
    text-align: left; cursor: pointer;
}
.sum-group-toggle i[b-1fu4mb7rm4] { width: 10px; color: var(--p, #1a5fb4); font-size: 10px; }
.sum-trip-count[b-1fu4mb7rm4] {
    padding: 1px 6px; color: var(--tm, #64748b); background: #eef2f7;
    border-radius: 999px; font-size: 10.5px; font-weight: 600;
}

.sum-detail-row > td[b-1fu4mb7rm4] { padding: 0 0 10px 28px; background: #fbfdff; }
.sum-detail-wrap[b-1fu4mb7rm4] {
    overflow-x: auto; margin: 0 10px 0 0; border: 1px solid #e8edf3;
    border-top: 0; border-radius: 0 0 8px 8px; background: #fff;
}
.sum-detail-table[b-1fu4mb7rm4] { width: 100%; min-width: 1550px; border-collapse: collapse; font-size: 11.5px; }
.sum-detail-table th[b-1fu4mb7rm4] {
    padding: 6px 8px; color: #64748b; background: #f8fafc;
    border-bottom: 1px solid #e8edf3; font-weight: 700; white-space: nowrap;
}
.sum-detail-table td[b-1fu4mb7rm4] {
    padding: 6px 8px; border-bottom: 1px solid #f1f4f8; white-space: nowrap;
}
.sum-detail-table tbody tr:last-child td[b-1fu4mb7rm4] { border-bottom: 0; }
.sum-detail-table .ta-r[b-1fu4mb7rm4] { text-align: right; font-variant-numeric: tabular-nums; }
.sum-trip-code[b-1fu4mb7rm4] { color: var(--p, #1a5fb4); font-weight: 600; }

.sum-split[b-1fu4mb7rm4] { display: grid; grid-template-columns: minmax(0, 1fr) 435px; gap: 18px; align-items: start; }
.sum-compensation-panel[b-1fu4mb7rm4] { min-width: 0; }
.sum-comp[b-1fu4mb7rm4] { min-width: 980px; }
.sum-payment-panel[b-1fu4mb7rm4] { width: 435px; min-width: 0; }
.sum-pay[b-1fu4mb7rm4] { min-width: 435px; }
.sum-pay tfoot td[b-1fu4mb7rm4] { background: transparent; border-top: none; font-weight: 600; }
.sum-pay tfoot tr:first-child td[b-1fu4mb7rm4] { border-top: 2px solid #cbd5e1; }
.sum-minus td[b-1fu4mb7rm4] { color: #c00000; }
.sum-final td[b-1fu4mb7rm4] { background: #dce8f5; font-weight: 800; }
.sum-unclassified td[b-1fu4mb7rm4] { color: var(--tm, #64748b); font-style: italic; }

@media (max-width: 768px) {
    .sum-tbl[b-1fu4mb7rm4] { font-size: 11.5px; }
    .sum-tbl th[b-1fu4mb7rm4], .sum-tbl td[b-1fu4mb7rm4] { padding: 6px 8px; }
    .sum-plates[b-1fu4mb7rm4] { max-width: 140px; }
    .sum-detail-row > td[b-1fu4mb7rm4] { padding-left: 18px; }
    .sum-split[b-1fu4mb7rm4] { grid-template-columns: 1fr; }
    .sum-payment-panel[b-1fu4mb7rm4] { width: 100%; }
}

@media (min-width: 769px) and (max-width: 1100px) {
    .sum-split[b-1fu4mb7rm4] { grid-template-columns: 1fr; }
    .sum-payment-panel[b-1fu4mb7rm4] { width: 100%; }
}
/* _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);
}
/* Khung bộ lọc thu/mở (.filter-bar / .filter-bar-head / .filter-bar-body) là rule TOÀN CỤC trong
   wwwroot/etrans-ui.css — theo mockup BA (doc/HTML 0306/bang-ke-*.html, 08/2026): tiêu đề "BỘ LỌC"
   + mũi tên nằm TRONG khung, bấm cả dòng đầu để thu/mở, thu gọn chỉ ẩn phần thân, giữ nguyên khung.
   Trước 03/09/2026 là một nút rời "Bộ lọc" đứng NGOÀI khung (BUG tracking #31) — BA xác nhận chưa
   đúng ý. File này chỉ còn bố cục BÊN TRONG thân: .fbar-row / .fg / .fbar-actions. Viền, nền,
   padding của khung do .filter-bar lo — .fbar KHÔNG vẽ khung nữa (tránh viền kép). */
.fbar-actions[b-n4k322m2jm] { display: flex; flex: 0 0 auto; gap: 8px; justify-content: flex-end; align-items: flex-end; flex-wrap: wrap; }
.fbar[b-n4k322m2jm] { display: block; }
.fbar-row[b-n4k322m2jm] { display: flex; align-items: flex-end; gap: 10px; }
.fbar-row + .fbar-row[b-n4k322m2jm] { margin-top: 10px; }
.fbar-row > .fg[b-n4k322m2jm] { flex: 1 1 auto; }
.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: 2520px; 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 dính trên khi cuộn dọc.
   `top` phải nằm ở CHÍNH rule gốc: bảng 1 tầng (tab Chuyến eTransport, tab Lỗi) không có
   .grp-row lẫn dòng thứ 2 nên trước đây không rule nào cấp `top` — sticky im lặng vô hiệu,
   header cuộn mất. Hai rule bên dưới specificity cao hơn nên bảng 2 tầng vẫn neo như cũ. */
.bkx-tbl thead th[b-n4k322m2jm] { position: sticky; top: 0; 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; }

/* ---- Dòng ĐÃ DUYỆT nhưng dữ liệu eTransport đã đổi (spec: highlight cam nhạt) ----
   Đặt SAU .row-error/.row-warn/.row-special để thắng khi một dòng mang nhiều lớp: cảnh báo này
   nói "số đang hiện không còn khớp nguồn", nặng hơn mấy lớp kia trên một dòng ĐÃ duyệt.
   Dải bên trái giữ lại tín hiệu của lớp cũ thay vì xoá hẳn. */
.bkx-tbl tbody tr.row-stale td[b-n4k322m2jm],
.bkx-tbl tbody tr.row-stale td.col-freeze-l[b-n4k322m2jm], .bkx-tbl tbody tr.row-stale td.col-freeze-r[b-n4k322m2jm] { background: #ffedd5; }
.bkx-tbl tbody tr.row-stale td:first-child[b-n4k322m2jm] { box-shadow: inset 3px 0 0 #ea580c; }
.bkx-tbl tbody tr.row-stale:hover td[b-n4k322m2jm] { background: #fde3c4; }
.bks-warn[b-n4k322m2jm] { margin-left: 6px; }

.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; overflow-y: hidden; }
.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; }

/* 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). */
/* CHÍNH CON SỐ SL nhận/giao là link mở phiếu cân (thay nút "Xem ảnh" rời — đồng bộ xe tải 21/08/2026).
   Giữ nguyên dáng số (font/căn phải) — chỉ gạch chân mờ để lộ ra là bấm được. */
.pc-num[b-n4k322m2jm] {
    border: 0; background: none; padding: 0; margin: 0; cursor: pointer;
    font: inherit; color: inherit;
    text-decoration: underline; text-decoration-style: dotted;
    text-underline-offset: 2px; text-decoration-color: var(--p, #1a5fb4);
}
.pc-num:hover[b-n4k322m2jm] { color: var(--p, #1a5fb4); text-decoration-style: solid; }
.pc-num: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) {
    /* 4 tab (2 tab chuyến + bảng kê + lỗi) tràn ngang ở mobile: giữ bề rộng tự nhiên rồi cuộn,
       thay vì ép co lại làm nhãn bị cắt. Container .bkx-tabs đã có overflow-x: auto. */
    .bkx-tab[b-n4k322m2jm] { flex: 0 0 auto; }
    .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; }
    /* Mobile: thân lọc xếp 1 cột. Thu/mở dùng chung cơ chế .filter-bar.collapsed như desktop
       (mockup BA không tách riêng mobile); mặc định MỞ. */
    .fbar[b-n4k322m2jm] { display: flex; gap: 8px; }
    .fbar-row[b-n4k322m2jm] { display: contents; }
    .fbar .fg[b-n4k322m2jm] { flex: 1 1 100% !important; min-width: 0 !important; max-width: none !important; }
    .fbar-actions[b-n4k322m2jm] { flex: 1 1 100%; }
    .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; }
.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; }
.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; }

/* Cảnh báo bảng kê chạm trần — bảng thiếu dòng nên ô "Tổng" không đủ. */
.bkx-cat-cut[b-n4k322m2jm] {
    margin: 8px 2px 0; padding: 9px 12px; border-radius: 7px;
    font-size: 12.5px; line-height: 1.5;
    color: #A03434; background: #FBECEC; border: 1px solid #E7C4C4;
}
.bkx-cat-cut i[b-n4k322m2jm] { margin-right: 6px; }
/* _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);
}
/* Khung bộ lọc thu/mở (.filter-bar / .filter-bar-head / .filter-bar-body) là rule TOÀN CỤC trong
   wwwroot/etrans-ui.css — theo mockup BA (doc/HTML 0306/bang-ke-*.html, 08/2026): tiêu đề "BỘ LỌC"
   + mũi tên nằm TRONG khung, bấm cả dòng đầu để thu/mở, thu gọn chỉ ẩn phần thân, giữ nguyên khung.
   Trước 03/09/2026 là một nút rời "Bộ lọc" đứng NGOÀI khung (BUG tracking #31) — BA xác nhận chưa
   đúng ý. File này chỉ còn bố cục BÊN TRONG thân: .fbar-row / .fg / .fbar-actions. Viền, nền,
   padding của khung do .filter-bar lo — .fbar KHÔNG vẽ khung nữa (tránh viền kép). */
.fbar-actions[b-ln4kig3moy] { display: flex; flex: 0 0 auto; gap: 8px; justify-content: flex-end; align-items: flex-end; flex-wrap: wrap; }
.fbar[b-ln4kig3moy] { display: block; }
.fbar-row[b-ln4kig3moy] { display: flex; align-items: flex-end; gap: 10px; }
.fbar-row + .fbar-row[b-ln4kig3moy] { margin-top: 10px; }
.fbar-row > .fg[b-ln4kig3moy] { flex: 1 1 auto; }
.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: 2520px; 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 dính trên khi cuộn dọc.
   `top` phải nằm ở CHÍNH rule gốc: bảng 1 tầng (tab Chuyến eTransport, tab Lỗi) không có
   .grp-row lẫn dòng thứ 2 nên trước đây không rule nào cấp `top` — sticky im lặng vô hiệu,
   header cuộn mất. Hai rule bên dưới specificity cao hơn nên bảng 2 tầng vẫn neo như cũ. */
.bkx-tbl thead th[b-ln4kig3moy] { position: sticky; top: 0; 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; }

/* ---- Dòng ĐÃ DUYỆT nhưng dữ liệu eTransport đã đổi (spec: highlight cam nhạt) ----
   Đặt SAU .row-error/.row-warn/.row-special để thắng khi một dòng mang nhiều lớp: cảnh báo này
   nói "số đang hiện không còn khớp nguồn", nặng hơn mấy lớp kia trên một dòng ĐÃ duyệt.
   Dải bên trái giữ lại tín hiệu của lớp cũ thay vì xoá hẳn. */
.bkx-tbl tbody tr.row-stale td[b-ln4kig3moy],
.bkx-tbl tbody tr.row-stale td.col-freeze-l[b-ln4kig3moy], .bkx-tbl tbody tr.row-stale td.col-freeze-r[b-ln4kig3moy] { background: #ffedd5; }
.bkx-tbl tbody tr.row-stale td:first-child[b-ln4kig3moy] { box-shadow: inset 3px 0 0 #ea580c; }
.bkx-tbl tbody tr.row-stale:hover td[b-ln4kig3moy] { background: #fde3c4; }
.bks-warn[b-ln4kig3moy] { margin-left: 6px; }

.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; overflow-y: hidden; }
.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; }

/* 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). */
/* CHÍNH CON SỐ SL nhận/giao là link mở phiếu cân (thay nút "Xem ảnh" rời — đồng bộ xe tải 21/08/2026).
   Giữ nguyên dáng số (font/căn phải) — chỉ gạch chân mờ để lộ ra là bấm được. */
.pc-num[b-ln4kig3moy] {
    border: 0; background: none; padding: 0; margin: 0; cursor: pointer;
    font: inherit; color: inherit;
    text-decoration: underline; text-decoration-style: dotted;
    text-underline-offset: 2px; text-decoration-color: var(--p, #1a5fb4);
}
.pc-num:hover[b-ln4kig3moy] { color: var(--p, #1a5fb4); text-decoration-style: solid; }
.pc-num: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) {
    /* 4 tab (2 tab chuyến + bảng kê + lỗi) tràn ngang ở mobile: giữ bề rộng tự nhiên rồi cuộn,
       thay vì ép co lại làm nhãn bị cắt. Container .bkx-tabs đã có overflow-x: auto. */
    .bkx-tab[b-ln4kig3moy] { flex: 0 0 auto; }
    .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; }
    /* Mobile: thân lọc xếp 1 cột. Thu/mở dùng chung cơ chế .filter-bar.collapsed như desktop
       (mockup BA không tách riêng mobile); mặc định MỞ. */
    .fbar[b-ln4kig3moy] { display: flex; gap: 8px; }
    .fbar-row[b-ln4kig3moy] { display: contents; }
    .fbar .fg[b-ln4kig3moy] { flex: 1 1 100% !important; min-width: 0 !important; max-width: none !important; }
    .fbar-actions[b-ln4kig3moy] { flex: 1 1 100%; }
    .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; }
.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; }
.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; }

/* Cảnh báo bảng kê chạm trần — bảng thiếu dòng nên ô "Tổng" không đủ. */
.bkx-cat-cut[b-ln4kig3moy] {
    margin: 8px 2px 0; padding: 9px 12px; border-radius: 7px;
    font-size: 12.5px; line-height: 1.5;
    color: #A03434; background: #FBECEC; border: 1px solid #E7C4C4;
}
.bkx-cat-cut i[b-ln4kig3moy] { margin-right: 6px; }
/* _content/Admin_KA_Transport_Pricing/Components/Pages/BangKeXepDo/BangKeXepDo.razor.rz.scp.css */
/* ============================================================================================
   Bảng kê XẾP DỠ — khung giao diện.

   ⚠️ CSS của Blazor là SCOPED theo component: lớp khai trong BangKeSaLan.razor.css KHÔNG áp được
   sang trang này. Vì vậy phần khung (.bkx-*, .fbar*, .toolbar…) phải có bản SAO Ở ĐÂY — đó là cách
   4 bảng kê hiện có đang làm, không phải thừa.

   ⚠️ ĐỪNG dùng tên lớp của file mockup (thư mục doc/HTML 0306) như .page-tabs/.filter-bar/.bk-tbl:
   chúng CHỈ tồn tại trong file HTML tĩnh, ứng dụng không có. Dùng nhầm thì trang render trần trụi
   mà build vẫn xanh và test vẫn xanh — đúng lỗi đã mắc ngày 24/08/2026.
   ============================================================================================ */

.bkx-page[b-vlsilqv50l] { font-size: 12.5px; }

.ct-empty[b-vlsilqv50l] {
    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-vlsilqv50l] { 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-vlsilqv50l] { 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-vlsilqv50l] { transition: transform .15s ease; transform: rotate(180deg); }
.filter-toggle.is-toggled .fchev[b-vlsilqv50l] { transform: none; }
.fbar-actions[b-vlsilqv50l] { display: flex; flex: 0 0 auto; gap: 8px; justify-content: flex-end; align-items: flex-end; flex-wrap: wrap; }
.fbar[b-vlsilqv50l] { display: block; background: var(--s, #fff); border: 1px solid var(--b, #e4e8ef); border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; }
.fbar-row[b-vlsilqv50l] { display: flex; align-items: flex-end; gap: 10px; }
.fbar-row + .fbar-row[b-vlsilqv50l] { margin-top: 10px; }
.fbar-row > .fg[b-vlsilqv50l] { flex: 1 1 auto; }
.ta-r[b-vlsilqv50l] { text-align: right; }
.ta-c[b-vlsilqv50l] { 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-vlsilqv50l] {
    background: var(--s, #fff); border: 1px solid var(--b, #e4e8ef); border-radius: 8px;
    overflow: auto; -webkit-overflow-scrolling: touch; max-height: calc(100vh - 250px);
}
/* ⚠️ 1200px chứ KHÔNG phải 2520px như bảng kê sà lan: bảng xếp dỡ chỉ ~18 cột, để 2520 là ép
   cuộn ngang vô cớ trên màn hình thường. Con số này phải đi theo SỐ CỘT của chính bảng này.

   ⚠️ `width: 100%` là BẮT BUỘC, không thừa. Bảng kê sà lan/xe tải trông tràn viền chỉ vì
   min-width 2520px của chúng luôn LỚN HƠN khung — chúng không hề khai width. Bảng này hẹp hơn
   khung, mà <table> mặc định là `width: auto` (co về vừa nội dung) ⇒ thiếu dòng này là bảng
   thụt vào, chừa một mảng trắng bên phải đúng như ảnh chụp ngày 25/08/2026. */
.bkx-tbl[b-vlsilqv50l] { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 2400px; font-size: 12px; }
.bkx-tbl th[b-vlsilqv50l], .bkx-tbl td[b-vlsilqv50l] { padding: 9px 11px; border-bottom: 1px solid var(--b, #e4e8ef); white-space: nowrap; }
.bkx-tbl th[b-vlsilqv50l] {
    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-vlsilqv50l] { position: sticky; z-index: 3; background: #dce8f5; color: #1e3a5f; font-weight: 800; border-bottom: 2px solid #b8d0e8; }
/* ⚠️ `height` trên <th> chỉ là chiều cao TỐI THIỂU: padding 9px trên/dưới vẫn cộng thêm, nên dòng
   gộp cao hơn 22px thật và dòng 2 (neo top:22px) TRƯỜN ĐÈ LÊN khi cuộn dọc. Khoá chiều cao dòng
   gộp bằng biến, dòng 2 neo theo chính biến đó — copy nguyên cách sửa của BangKeXeTai.razor.css.
   (Bản trong BangKeSaLan.razor.css vẫn là bản CŨ còn lỗi — đừng chép lại từ đó.) */
/* Khoi ghim trai: STT -> Ma chuyen. Be rong KHOA CUNG vi `left` cua cot sau tinh tu be rong
   cot truoc - de co gian la hai cot chong len nhau khi cuon ngang (bang ke xe tai da ghi bai
   hoc nay o .bkx-tbl-trip). 52px = du cho STT 4 chu so + padding. */
.bkx-tbl th.xd-stt[b-vlsilqv50l], .bkx-tbl td.xd-stt[b-vlsilqv50l] {
    position: sticky; left: 0; z-index: 2; background: #fff;
    width: 52px; min-width: 52px; max-width: 52px; box-sizing: border-box; text-align: right;
}
.bkx-tbl th.col-freeze-l[b-vlsilqv50l], .bkx-tbl td.col-freeze-l[b-vlsilqv50l] { left: 52px; }
.bkx-tbl thead th.xd-stt[b-vlsilqv50l] { z-index: 5; background: #dce8f5; }
.bkx-tbl tfoot td.xd-stt[b-vlsilqv50l], .bkx-tbl tfoot th.xd-stt[b-vlsilqv50l] { z-index: 5; background: #dce8f5; }
.bkx-tbl tbody tr:hover td.xd-stt[b-vlsilqv50l] { background: #f8fbff; }
.bkx-tbl tbody tr.row-warn td.xd-stt[b-vlsilqv50l] { background: #fffbeb; }
.bkx-tbl tbody tr.sel td.xd-stt[b-vlsilqv50l] { background: var(--p-050, #eff6ff); }

/* Cot mockup CO ma he thong chua dau duoc nguon: chu nhat lai de phan biet voi o that su trong.
   KHONG an cot di - an la khong ai con nho phai dau nguon cho no. */
.bkx-tbl th.xd-nosrc[b-vlsilqv50l], .bkx-tbl td.xd-nosrc[b-vlsilqv50l] { color: var(--tl, #94a3b8); }

.bkx-tbl[b-vlsilqv50l] { --grp-h: 30px; }
.bkx-tbl thead tr.grp-row th:not([rowspan])[b-vlsilqv50l] {
    top: 0;
    height: var(--grp-h); padding-top: 0; padding-bottom: 0; line-height: var(--grp-h);
    box-sizing: border-box;
}
.bkx-tbl thead tr.grp-row th[rowspan][b-vlsilqv50l] { top: 0; vertical-align: middle; }
.bkx-tbl thead tr:nth-child(2) th[b-vlsilqv50l] { top: var(--grp-h); }
/* dải nhóm cột */
.bkx-tbl th.grp[b-vlsilqv50l] {
    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-vlsilqv50l] { 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-vlsilqv50l], .bkx-tbl tfoot th[b-vlsilqv50l] { 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-vlsilqv50l] { 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-vlsilqv50l] { 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-vlsilqv50l] { 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-vlsilqv50l], .bkx-tbl thead th.col-freeze-r[b-vlsilqv50l] { z-index: 5; background: #dce8f5; }
.bkx-tbl tfoot td.col-freeze-l[b-vlsilqv50l], .bkx-tbl tfoot td.col-freeze-r[b-vlsilqv50l],
.bkx-tbl tfoot th.col-freeze-l[b-vlsilqv50l], .bkx-tbl tfoot th.col-freeze-r[b-vlsilqv50l] { z-index: 5; background: #dce8f5; }
.bkx-tbl tbody tr:hover td.col-freeze-l[b-vlsilqv50l], .bkx-tbl tbody tr:hover td.col-freeze-r[b-vlsilqv50l] { 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-vlsilqv50l],
.bkx-tbl tbody tr.row-warn td.col-freeze-l[b-vlsilqv50l], .bkx-tbl tbody tr.row-warn td.col-freeze-r[b-vlsilqv50l] { background: #fffbeb; }
.bkx-tbl tbody tr.row-error td[b-vlsilqv50l],
.bkx-tbl tbody tr.row-error td.col-freeze-l[b-vlsilqv50l], .bkx-tbl tbody tr.row-error td.col-freeze-r[b-vlsilqv50l] { background: #fff1f2; }
.bkx-tbl tbody tr.row-special td[b-vlsilqv50l],
.bkx-tbl tbody tr.row-special td.col-freeze-l[b-vlsilqv50l], .bkx-tbl tbody tr.row-special td.col-freeze-r[b-vlsilqv50l] { background: #fff7ed; }
.bkx-tbl tbody tr.row-warn:hover td[b-vlsilqv50l], .bkx-tbl tbody tr.row-error:hover td[b-vlsilqv50l], .bkx-tbl tbody tr.row-special:hover td[b-vlsilqv50l] { background: #eef4ff; }

/* ---- Dòng ĐÃ DUYỆT nhưng dữ liệu eTransport đã đổi (spec: highlight cam nhạt) ----
   Đặt SAU .row-error/.row-warn/.row-special để thắng khi một dòng mang nhiều lớp: cảnh báo này
   nói "số đang hiện không còn khớp nguồn", nặng hơn mấy lớp kia trên một dòng ĐÃ duyệt.
   Dải bên trái giữ lại tín hiệu của lớp cũ thay vì xoá hẳn. */
.bkx-tbl tbody tr.row-stale td[b-vlsilqv50l],
.bkx-tbl tbody tr.row-stale td.col-freeze-l[b-vlsilqv50l], .bkx-tbl tbody tr.row-stale td.col-freeze-r[b-vlsilqv50l] { background: #ffedd5; }
.bkx-tbl tbody tr.row-stale td:first-child[b-vlsilqv50l] { box-shadow: inset 3px 0 0 #ea580c; }
.bkx-tbl tbody tr.row-stale:hover td[b-vlsilqv50l] { background: #fde3c4; }
.bks-warn[b-vlsilqv50l] { margin-left: 6px; }

.bkx-total[b-vlsilqv50l] { color: var(--p, #2563eb); font-weight: 700; }
.bkx-neg[b-vlsilqv50l] { color: var(--err, #dc2626); }
.linklike[b-vlsilqv50l] {
    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-vlsilqv50l] { color: var(--p-d, #1d4ed8); }
.linklike:focus-visible[b-vlsilqv50l] {
    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-vlsilqv50l] {
    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-vlsilqv50l] { display: none; }
.bkx-card[b-vlsilqv50l] { border: 1px solid var(--b, #e4e8ef); border-radius: 10px; padding: 10px 12px; background: #fff; display: flex; flex-direction: column; gap: 8px; }
.bkc-top[b-vlsilqv50l] { display: flex; align-items: center; gap: 8px; }
.bkc-code[b-vlsilqv50l] { font-size: 14px; }
.bkc-status[b-vlsilqv50l] { margin-left: auto; }
.bkc-route[b-vlsilqv50l] { font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
    .bkc-route .fas[b-vlsilqv50l] { color: var(--tm, #64748b); font-size: 11px; }
.bkc-body[b-vlsilqv50l] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bkc-chip[b-vlsilqv50l] { background: #f1f5f9; color: #475569; border-radius: 6px; padding: 2px 8px; font-size: 11.5px; }
.bkc-acts[b-vlsilqv50l] { display: flex; gap: 6px; border-top: 1px dashed var(--b, #e4e8ef); padding-top: 8px; }
    .bkc-acts .btn[b-vlsilqv50l] { flex: 1 1 auto; justify-content: center; }

/* ---- Page header ---- */
.bkx-head[b-vlsilqv50l] { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.bkx-title[b-vlsilqv50l] { font-size: 16px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px; }
    .bkx-title .fas[b-vlsilqv50l] { color: var(--p, #2563eb); }
.bkx-count[b-vlsilqv50l] { 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-vlsilqv50l] { display: flex; gap: 6px; margin-bottom: 12px; border-bottom: 1px solid var(--b, #e4e8ef); overflow-x: auto; overflow-y: hidden; }
.bkx-tab[b-vlsilqv50l] {
    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-vlsilqv50l] { background: #eef2ff; color: var(--p, #1a5fb4); }
.bkx-tab.active[b-vlsilqv50l] { background: #fff; border-color: var(--b, #e4e8ef); color: var(--p, #1a5fb4); box-shadow: 0 -1px 0 #fff inset; }
.bkx-tab:focus-visible[b-vlsilqv50l] { 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-vlsilqv50l] { display: flex; align-items: flex-start; gap: 10px; text-align: left; }
.tab-todo i[b-vlsilqv50l] { color: #d97706; margin-top: 3px; }
.tab-todo p[b-vlsilqv50l] { margin: 4px 0 0; color: var(--tm, #64748b); font-weight: 400; }
.tab-todo code[b-vlsilqv50l] { background: #f1f5f9; padding: 1px 5px; border-radius: 4px; }

/* 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-vlsilqv50l] {
    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-vlsilqv50l] { opacity: .75; }

/* Link ảnh phiếu cân cạnh SL nhận / SL giao (spec dòng 1574-1575). */
/* CHÍNH CON SỐ SL nhận/giao là link mở phiếu cân (thay nút "Xem ảnh" rời — đồng bộ xe tải 21/08/2026).
   Giữ nguyên dáng số (font/căn phải) — chỉ gạch chân mờ để lộ ra là bấm được. */
.pc-num[b-vlsilqv50l] {
    border: 0; background: none; padding: 0; margin: 0; cursor: pointer;
    font: inherit; color: inherit;
    text-decoration: underline; text-decoration-style: dotted;
    text-underline-offset: 2px; text-decoration-color: var(--p, #1a5fb4);
}
.pc-num:hover[b-vlsilqv50l] { color: var(--p, #1a5fb4); text-decoration-style: solid; }
.pc-num:focus-visible[b-vlsilqv50l] { 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-vlsilqv50l] { 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-vlsilqv50l] { display: flex; gap: 8px; align-items: center; }
.tt-edit .fi[b-vlsilqv50l] { flex: 1; min-width: 0; text-align: right; }
.tt-unit[b-vlsilqv50l] { font-size: 11.5px; color: var(--tm, #64748b); }
.tt-note[b-vlsilqv50l] { margin-top: 6px; font-size: 11.5px; color: var(--tm, #64748b); }

.dtop[b-vlsilqv50l] { flex: 0 1 auto; max-height: 46%; overflow-y: auto; padding-right: 4px; }
.dbot[b-vlsilqv50l] {
    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-vlsilqv50l] { flex: 3; min-width: 0; overflow-y: auto; }
.dbot-r[b-vlsilqv50l] { 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-vlsilqv50l] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dwrap[b-vlsilqv50l] { display: flex; gap: 18px; align-items: flex-start; }
.dcol-main[b-vlsilqv50l] { flex: 1; min-width: 0; }
.dcol-side[b-vlsilqv50l] { width: 320px; flex-shrink: 0; }

.detail-section[b-vlsilqv50l] { margin-bottom: 14px; }
.detail-section-title[b-vlsilqv50l] {
    font-size: 11px; font-weight: 800; color: var(--p, #1a5fb4);
    text-transform: uppercase; letter-spacing: .04em;
    /* margin-top tách khối "Lịch sử thay đổi" khỏi ô Tổng tiền ngay phía trên — không có thì
       hai khối dính nhau, đọc như thể tiêu đề thuộc về ô tiền. */
    margin-top: 10px; margin-bottom: 8px; padding-bottom: 5px; border-bottom: 2px solid #e0e7ff;
}

.fgrid[b-vlsilqv50l] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.fld label[b-vlsilqv50l] {
    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-vlsilqv50l] { font-size: 12.5px; font-weight: 700; color: var(--tx, #1c2235); font-variant-numeric: tabular-nums; }
.fld-warn[b-vlsilqv50l] { color: #b45309; font-weight: 800; }
.fld-amount[b-vlsilqv50l] { color: #1565c0; font-weight: 800; }


.dnote[b-vlsilqv50l] {
    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-vlsilqv50l] { margin-top: 2px; }

@media (max-width: 768px) {
    /* 4 tab (2 tab chuyến + bảng kê + lỗi) tràn ngang ở mobile: giữ bề rộng tự nhiên rồi cuộn,
       thay vì ép co lại làm nhãn bị cắt. Container .bkx-tabs đã có overflow-x: auto. */
    .bkx-tab[b-vlsilqv50l] { flex: 0 0 auto; }
    .filter-toggle[b-vlsilqv50l] { display: flex; justify-content: center; width: 100%; margin-bottom: 5px; }
    .bkx-toggles[b-vlsilqv50l] { margin-left: 0; width: 100%; gap: 10px; }
    /* ⚠️ KHÁC bảng kê sà lan: trang này CHƯA có khối card mobile, nên KHÔNG được ẩn bảng —
       ẩn đi là mobile trắng trơn, không còn gì để đọc. Giữ bảng và cho cuộn ngang trong khung.
       Khi nào dựng .bkx-cards cho trang này thì mới đổi lại thành display:none. */
    .bkx-wrap[b-vlsilqv50l] { display: block; overflow-x: auto; }
    .fbar[b-vlsilqv50l] { display: flex; padding: 12px; gap: 8px; }
    .fbar-row[b-vlsilqv50l] { display: contents; }
    .fbar .fg[b-vlsilqv50l] { 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-vlsilqv50l] { display: flex; }
    .filter-toggle:not(.is-toggled) + .fbar .fg:not(.sw)[b-vlsilqv50l] { display: none; }
    .filter-toggle .fchev[b-vlsilqv50l] { transform: none; }
    .filter-toggle.is-toggled .fchev[b-vlsilqv50l] { transform: rotate(180deg); }
    .fbar-actions[b-vlsilqv50l] { flex: 1 1 100%; }
    .fbar-actions .btn[b-vlsilqv50l] { flex: 1 1 auto; justify-content: center; }
    input[b-vlsilqv50l], textarea[b-vlsilqv50l], select[b-vlsilqv50l] { font-size: 16px; }
    .btn[b-vlsilqv50l] { 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-vlsilqv50l] { flex-direction: column; }
    .dcol-side[b-vlsilqv50l] { width: 100%; }
    /* Mobile: bỏ chia đôi, xếp chồng và để cả popup cuộn một mạch. */
    .dtop[b-vlsilqv50l] { max-height: none; overflow: visible; }
    .dbot[b-vlsilqv50l] { flex-direction: column; gap: 10px; }
    .dbot-l[b-vlsilqv50l], .dbot-r[b-vlsilqv50l] { overflow: visible; }
    .fgrid.fgrid-3[b-vlsilqv50l] { grid-template-columns: 1fr; }
    .fgrid[b-vlsilqv50l] { grid-template-columns: 1fr; }
    .md[b-vlsilqv50l] { max-width: 100vw; max-height: 92vh; max-height: 92dvh; border-radius: 12px 12px 0 0; }
    .mf[b-vlsilqv50l] { flex-wrap: wrap; }
        .mf .btn[b-vlsilqv50l] { flex: 1 1 auto; justify-content: center; }
}

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

/* ---- Sub-tab Đầu vào / Đầu ra (folder-pill như mockup, hàng 2) + badge Nội bộ ---- */
.bkx-subtabs[b-vlsilqv50l] { display: flex; gap: 6px; margin: -6px 0 12px; border-bottom: 1px solid var(--b, #e4e8ef); }
.bkx-subtab[b-vlsilqv50l] {
    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-vlsilqv50l] { background: #eef2ff; color: var(--p, #1a5fb4); }
.bkx-subtab.active[b-vlsilqv50l] { background: #fff; border-color: var(--b, #e4e8ef); color: var(--p, #1a5fb4); box-shadow: 0 -1px 0 #fff inset; }
.noibo-badge[b-vlsilqv50l] { 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-vlsilqv50l] { 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-vlsilqv50l] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-left: 12px; }
.bkx-tg[b-vlsilqv50l] { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--tm, #64748b); cursor: pointer; white-space: nowrap; }
.bkx-tg input[b-vlsilqv50l] { width: 14px; height: 14px; accent-color: var(--p, #2563eb); cursor: pointer; }
.bkx-colcount[b-vlsilqv50l] { 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-vlsilqv50l] { display: flex; flex-direction: column; gap: 14px; }
.colcfg-lock[b-vlsilqv50l] { font-size: 12.5px; color: #6b7280; background: #f8fafc; border: 1px solid #eef2f7; border-radius: 8px; padding: 8px 11px; }
.colcfg-lock i[b-vlsilqv50l] { color: #94a3b8; margin-right: 5px; }
.colcfg-grp[b-vlsilqv50l] { display: flex; flex-direction: column; }
.colcfg-gh[b-vlsilqv50l] { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; font-weight: 700; color: #94a3b8; margin-bottom: 7px; }
.colcfg-items[b-vlsilqv50l] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px; }
.colcfg-item[b-vlsilqv50l] { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; padding: 3px 0; }
.colcfg-item input[b-vlsilqv50l] { width: 15px; height: 15px; cursor: pointer; flex: none; }
@media (max-width: 560px) { .colcfg-items[b-vlsilqv50l] { grid-template-columns: 1fr; } }

/* Hyperlink chứng từ ở cột/field Đơn giá tuyến */
.ct-link[b-vlsilqv50l] { color: var(--p, #1a5fb4); text-decoration: none; font-weight: 600; white-space: nowrap; }
.ct-link:hover[b-vlsilqv50l] { text-decoration: underline; }
.ct-link i[b-vlsilqv50l] { 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-vlsilqv50l] { position: relative; display: inline-block; }
.bkx-dd-caret[b-vlsilqv50l] { font-size: 9px; margin-left: 3px; }
.bkx-dd-menu[b-vlsilqv50l] { 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-vlsilqv50l] { 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-vlsilqv50l] { background: #f3f4f6; }

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

/* Badge đếm trên tab (bám mẫu BA) */
.tab-count[b-vlsilqv50l] { 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-vlsilqv50l] { 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-vlsilqv50l] { margin-top: 18px; }
.bkx-sum-toggle[b-vlsilqv50l] { width: 100%; justify-content: flex-start; gap: 8px; font-weight: 700; }
.bkx-sum-cnt[b-vlsilqv50l] { margin-left: auto; font-weight: 500; color: var(--tm, #64748b); font-size: 12px; }


/* ==== Phần RIÊNG của bảng kê xếp dỡ ==== */

/* Bảng kê xếp dỡ — chỉ những gì trang này cần thêm; khung bảng/nút/filter dùng chung etrans-ui.css */

.bkxd-dg[b-vlsilqv50l] {
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 10px;
    font-size: 12px;
    color: #3730a3;
}

.bkxd-dg code[b-vlsilqv50l] {
    background: #fff;
    border: 1px solid #c7d2fe;
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 11.5px;
}

/* Lỗi tra giá — phải nổi bật vì nó là lý do ô đơn giá bỏ trống */
.bkxd-err[b-vlsilqv50l] {
    background: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 8px 12px;
    margin: 10px 0;
    font-size: 12px;
    font-weight: 700;
    color: #991b1b;
}

.bkxd-tt[b-vlsilqv50l] {
    margin-top: 12px;
    padding: 8px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 12.5px;
}

/* Mã cảng đã quy được */
.xd-ro[b-vlsilqv50l] {
    font-size: 11.5px;
    font-weight: 700;
    color: #1e3a5f;
}

/* Chưa quy được cảng / chưa có đơn giá — KHÔNG hiện số 0, hiện dấu — màu cảnh báo */
.xd-missing[b-vlsilqv50l] {
    font-size: 11px;
    color: #dc2626;
    font-style: italic;
    font-weight: 700;
}

/* Bảng desktop ↔ card mobile: dưới 768px bảng cuộn ngang trong khung riêng,
   KHÔNG để body cuộn ngang (luật chung của dự án). */
@media (max-width: 768px) {
    .bkxd .filter-bar[b-vlsilqv50l] {
        flex-direction: column;
        align-items: stretch;
    }

    .bkxd .bk-tbl-wrap[b-vlsilqv50l] {
        overflow-x: auto;
    }

    /* Touch target tối thiểu 40px */
    .bkxd .btn-sm[b-vlsilqv50l] {
        min-height: 40px;
    }

    /* 16px chống zoom iOS */
    .bkxd .fi[b-vlsilqv50l] {
        font-size: 16px;
    }
}

/* ---- Khối tổng hợp + popup chi tiết ----
   ⚠️ Ba lớp .summary-section / .sub-h / .sum-tbl cũng đến từ file mockup nên PHẢI tự định nghĩa;
   không có thì khối tổng hợp render trần như bảng HTML thô. Tông màu bám theo .bkx-tbl ở trên để
   hai bảng trên cùng một trang không đá nhau. */
.summary-section[b-vlsilqv50l] { margin-top: 16px; }

.sub-h[b-vlsilqv50l] {
    font-size: 11.5px; font-weight: 800; color: var(--p, #2563eb); text-transform: uppercase;
    margin: 15px 0 7px; padding-bottom: 4px; border-bottom: 1px solid var(--b, #e4e8ef);
}

.sum-tbl-wrap[b-vlsilqv50l] {
    border: 1px solid #b8d0e8; border-radius: 8px; overflow: auto; background: #fff;
    max-width: 100%;
}

/* Bảng tổng hợp chỉ có 2 cột (Mặt hàng · Thành tiền) — để nó kéo hết chiều ngang thì hai con số
   nằm cách nhau cả gang tay, mắt không nối được hàng. Kẹp bề rộng và đẩy về phải, giống mockup
   (doc/HTML 0306: `display:flex;justify-content:flex-end` + `min-width:420px`).
   `width: max-content` cho bảng co theo nội dung thật; `min-width` giữ nó không hẹp đến mức xấu. */
.sum-tbl-hep[b-vlsilqv50l] {
    width: max-content;
    min-width: 380px;
    max-width: 520px;
    margin-left: auto;
}

.sum-tbl[b-vlsilqv50l] { width: 100%; border-collapse: collapse; font-size: 12px; }

.sum-tbl th[b-vlsilqv50l] {
    background: #dce8f5; padding: 7px 10px; font-size: 11px; font-weight: 800; color: #1e3a5f;
    border-bottom: 2px solid #b8d0e8; border-right: 1px solid #cde0f0; text-align: left;
    white-space: nowrap;
}

.sum-tbl td[b-vlsilqv50l] {
    padding: 7px 10px; border-bottom: 1px solid #e8f0f8; border-right: 1px solid #f0f4f8;
    white-space: nowrap;
}

.sum-tbl th.ta-r[b-vlsilqv50l], .sum-tbl td.ta-r[b-vlsilqv50l] { text-align: right; }
.sum-tbl tbody tr:hover td[b-vlsilqv50l] { background: #f8fbff; }

/* Dòng TỔNG — dính đáy như tfoot của bảng chính, cùng màu để đọc liền mạch. */
.sum-tbl tfoot td[b-vlsilqv50l] {
    position: sticky; bottom: 0; background: #dce8f5; color: #1e3a5f; font-weight: 800;
    border-top: 2px solid #b8d0e8;
}

/* Popup chi tiết: lưới 2 cột như .form-grid của mockup. */
.form-grid[b-vlsilqv50l] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }

.field label[b-vlsilqv50l] {
    display: block; font-size: 10.5px; font-weight: 800; color: var(--tm, #64748b);
    text-transform: uppercase; margin-bottom: 3px;
}

.field-val[b-vlsilqv50l] { font-size: 12.5px; font-weight: 700; color: var(--tx, #1c2235); }

@media (max-width: 768px) {
    .form-grid[b-vlsilqv50l] { grid-template-columns: 1fr; }
}


/* Ô nhập tổn thất trên bảng — chỉ có MỘT cột, của chính đầu cảng đang xem. */
.xd-in[b-vlsilqv50l] { width: 88px; text-align: right; padding: 2px 4px; }

/* Câu nhắc trong popup chi tiết: hai ô tổn thất trông giống hệt nhau, phải nói rõ ô nào
   đang trừ tiền trên chứng từ đang mở. */
.bkxd-note[b-vlsilqv50l] { margin-top: 6px; font-size: .8125rem; color: var(--tm, #6b7280); }
/* _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);
}
/* Khung bộ lọc thu/mở (.filter-bar / .filter-bar-head / .filter-bar-body) là rule TOÀN CỤC trong
   wwwroot/etrans-ui.css — theo mockup BA (doc/HTML 0306/bang-ke-*.html, 08/2026): tiêu đề "BỘ LỌC"
   + mũi tên nằm TRONG khung, bấm cả dòng đầu để thu/mở, thu gọn chỉ ẩn phần thân, giữ nguyên khung.
   Trước 03/09/2026 là một nút rời "Bộ lọc" đứng NGOÀI khung (BUG tracking #31) — BA xác nhận chưa
   đúng ý. File này chỉ còn bố cục BÊN TRONG thân: .fbar-row / .fg / .fbar-actions. Viền, nền,
   padding của khung do .filter-bar lo — .fbar KHÔNG vẽ khung nữa (tránh viền kép). */
.fbar-actions[b-m1aiutjc2a] { display: flex; flex: 0 0 auto; gap: 8px; justify-content: flex-end; align-items: flex-end; flex-wrap: wrap; }
.fbar[b-m1aiutjc2a] { display: block; }
.fbar-row[b-m1aiutjc2a] { display: flex; align-items: flex-end; gap: 10px; }
.fbar-row + .fbar-row[b-m1aiutjc2a] { margin-top: 10px; }
.fbar-row > .fg[b-m1aiutjc2a] { flex: 1 1 auto; }
.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: 2520px; 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 dính trên khi cuộn dọc.
   `top` phải nằm ở CHÍNH rule gốc: bảng 1 tầng (tab Chuyến eTransport, tab Lỗi) không có
   .grp-row lẫn dòng thứ 2 nên trước đây không rule nào cấp `top` — sticky im lặng vô hiệu,
   header cuộn mất. Hai rule bên dưới specificity cao hơn nên bảng 2 tầng vẫn neo như cũ. */
/* `height` trên <th> chỉ là chiều cao TỐI THIỂU: padding 9px trên/dưới vẫn cộng thêm, nên dòng
   gộp cao hơn 22px thật và dòng 2 (neo top:22px) trườn đè lên. Khoá chiều cao dòng gộp bằng
   biến, dòng 2 neo theo chính biến đó — cùng lỗi và cùng cách sửa với BangKeCont.razor.css. */
.bkx-tbl[b-m1aiutjc2a] { --grp-h: 30px; }
.bkx-tbl thead th[b-m1aiutjc2a] { position: sticky; top: 0; z-index: 3; background: #dce8f5; color: #1e3a5f; font-weight: 800; border-bottom: 2px solid #b8d0e8; }
.bkx-tbl thead tr.grp-row th:not([rowspan])[b-m1aiutjc2a] {
    top: 0;
    height: var(--grp-h); padding-top: 0; padding-bottom: 0; line-height: var(--grp-h);
    box-sizing: border-box;
}
.bkx-tbl thead tr.grp-row th[rowspan][b-m1aiutjc2a] { top: 0; vertical-align: middle; }
.bkx-tbl thead tr:nth-child(2) th[b-m1aiutjc2a] { top: var(--grp-h); }
/* 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; }

/* ---- Dòng ĐÃ DUYỆT nhưng dữ liệu eTransport đã đổi (spec: highlight cam nhạt) ----
   Đặt SAU .row-error/.row-warn/.row-special để thắng khi một dòng mang nhiều lớp: cảnh báo này
   nói "số đang hiện không còn khớp nguồn", nặng hơn mấy lớp kia trên một dòng ĐÃ duyệt.
   Dải bên trái giữ lại tín hiệu của lớp cũ thay vì xoá hẳn. */
.bkx-tbl tbody tr.row-stale td[b-m1aiutjc2a],
.bkx-tbl tbody tr.row-stale td.col-freeze-l[b-m1aiutjc2a], .bkx-tbl tbody tr.row-stale td.col-freeze-r[b-m1aiutjc2a] { background: #ffedd5; }
.bkx-tbl tbody tr.row-stale td:first-child[b-m1aiutjc2a] { box-shadow: inset 3px 0 0 #ea580c; }
.bkx-tbl tbody tr.row-stale:hover td[b-m1aiutjc2a] { background: #fde3c4; }
.bks-warn[b-m1aiutjc2a] { margin-left: 6px; }

.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; overflow-y: hidden; }
.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; }

/* 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; }

/* CHÍNH CON SỐ SL nhận/giao là link mở phiếu cân (thay nút "Xem ảnh" rời).
   Giữ nguyên dáng số (font/căn phải) — chỉ gạch chân mờ để lộ ra là bấm được. */
.pc-num[b-m1aiutjc2a] {
    border: 0; background: none; padding: 0; margin: 0; cursor: pointer;
    font: inherit; color: inherit;
    text-decoration: underline; text-decoration-style: dotted;
    text-underline-offset: 2px; text-decoration-color: var(--p, #1a5fb4);
}
.pc-num:hover[b-m1aiutjc2a] { color: var(--p, #1a5fb4); text-decoration-style: solid; }
.pc-num:focus-visible[b-m1aiutjc2a] { outline: none; box-shadow: var(--focus-ring, 0 0 0 2px rgba(26,95,180,.35)); border-radius: 3px; }

/* Ô nhập Số tính phí trong bảng — khớp bề ngang cột, căn phải như số bên cạnh. */
.tt-cell[b-m1aiutjc2a] { min-width: 110px; }
.tt-input[b-m1aiutjc2a] {
    width: 92px; padding: 3px 6px; text-align: right;
    border: 1px solid var(--b, #e4e8ef); border-radius: 5px; font: inherit; background: #fff;
}
.tt-input:focus-visible[b-m1aiutjc2a] { outline: none; box-shadow: var(--focus-ring, 0 0 0 2px rgba(26,95,180,.35)); }

/* Thanh công cụ sửa Số tính phí (trên bảng tab Chuyến). */
.bkx-trip-bar[b-m1aiutjc2a] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.bkx-trip-hint[b-m1aiutjc2a] { color: var(--tm, #64748b); font-size: 12px; margin-right: auto; }

/* Khối ghim trái của bảng Chuyến: checkbox → STT → Mã chuyến.
   Bề rộng KHOÁ CỨNG vì `left` của cột sau tính từ bề rộng cột trước — để co giãn là chồng cột. */
.bkx-tbl-trip th.trip-chk[b-m1aiutjc2a], .bkx-tbl-trip td.trip-chk[b-m1aiutjc2a] {
    position: sticky; left: 0; z-index: 2; background: #fff;
    width: 36px; min-width: 36px; max-width: 36px; box-sizing: border-box;
    padding-left: 8px; padding-right: 8px; text-align: center;
}
/* 52px = padding 22 + ~30px chỗ cho STT 4 chữ số. Hẹp hơn là số bị cắt ở trang cuối. */
.bkx-tbl-trip th.trip-stt[b-m1aiutjc2a], .bkx-tbl-trip td.trip-stt[b-m1aiutjc2a] {
    position: sticky; left: 36px; z-index: 2; background: #fff;
    width: 52px; min-width: 52px; max-width: 52px; box-sizing: border-box;
}
/* Mã chuyến vốn ghim ở left:0 — đẩy ra sau checkbox+STT (36 + 52), nếu không nó trượt đè lên hai cột kia. */
.bkx-tbl-trip td.col-freeze-l[b-m1aiutjc2a], .bkx-tbl-trip th.col-freeze-l[b-m1aiutjc2a] { left: 88px; }
.bkx-tbl-trip thead th.trip-chk[b-m1aiutjc2a], .bkx-tbl-trip thead th.trip-stt[b-m1aiutjc2a] { z-index: 5; background: #dce8f5; }
.bkx-tbl-trip tbody tr:hover td.trip-chk[b-m1aiutjc2a], .bkx-tbl-trip tbody tr:hover td.trip-stt[b-m1aiutjc2a] { background: #f8fbff; }
.bkx-tbl-trip tbody tr.sel td.trip-chk[b-m1aiutjc2a], .bkx-tbl-trip tbody tr.sel td.trip-stt[b-m1aiutjc2a] { background: #eaf1ff; }
.bkx-tbl-trip tbody tr.row-warn td.trip-chk[b-m1aiutjc2a], .bkx-tbl-trip tbody tr.row-warn td.trip-stt[b-m1aiutjc2a] { background: #fffbeb; }
.bkx-tbl-trip tbody tr.row-error td.trip-chk[b-m1aiutjc2a], .bkx-tbl-trip tbody tr.row-error td.trip-stt[b-m1aiutjc2a] { background: #fff1f2; }
.bkx-tbl-trip tbody tr.row-special td.trip-chk[b-m1aiutjc2a], .bkx-tbl-trip tbody tr.row-special td.trip-stt[b-m1aiutjc2a] { background: #fff7ed; }

/* ---- 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); }

/* Khối trên CO THEO NỘI DUNG, chỉ chặn trần 46% chiều cao popup.
   Mockup ghi cứng 200px, nhưng con số đó vẽ cho popup 15 ô của tab chuyến. Tab bảng kê có tới 35 ô
   nên 200px biến nó thành ô cuộn tí hon — phải kéo thanh cuộn mới đọc được vài dòng.
   Trần 46% vẫn giữ đúng ý mockup: khối field không được nuốt chỗ của Lịch sử + Phụ phí bên dưới,
   vì đó mới là chỗ người dùng thao tác. */
.dtop[b-m1aiutjc2a] { flex: 0 1 auto; height: auto; min-height: 0; 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; }
/* Số tính phí — đỏ đậm như mockup: đây là số ra tiền bồi thường, phải nổi hơn Hao hụt (cam). */
.fld-err[b-m1aiutjc2a] { color: #dc2626; 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) {
    /* 4 tab (2 tab chuyến + bảng kê + lỗi) tràn ngang ở mobile: giữ bề rộng tự nhiên rồi cuộn,
       thay vì ép co lại làm nhãn bị cắt. Container .bkx-tabs đã có overflow-x: auto. */
    .bkx-tab[b-m1aiutjc2a] { flex: 0 0 auto; }
    .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; }
    /* Mobile: thân lọc xếp 1 cột. Thu/mở dùng chung cơ chế .filter-bar.collapsed như desktop
       (mockup BA không tách riêng mobile); mặc định MỞ. */
    .fbar[b-m1aiutjc2a] { display: flex; gap: 8px; }
    .fbar-row[b-m1aiutjc2a] { display: contents; }
    .fbar .fg[b-m1aiutjc2a] { flex: 1 1 100% !important; min-width: 0 !important; max-width: none !important; }
    .fbar-actions[b-m1aiutjc2a] { flex: 1 1 100%; }
    .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; }
.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; }
.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; }

/* Khối "Quy tắc đang áp" trong popup chi tiết chuyến — cùng cây sơ đồ với trang cấu hình. */
.bkx-quytac[b-m1aiutjc2a] { margin-top: 14px; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; background: #fcfdff; }
.bkx-quytac-h[b-m1aiutjc2a] {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    font-size: 12px; font-weight: 700; color: #334155; margin-bottom: 8px;
}
.bkx-quytac-h i[b-m1aiutjc2a] { color: var(--p, #2563eb); }
.bkx-quytac-h a[b-m1aiutjc2a] { margin-left: auto; font-weight: 600; font-size: 11.5px; color: var(--p, #2563eb); }

/* Cột "Đơn giá đầu vào": badge bọc trong nút để hover ra cách tính, click mở popup.
   Nút trong suốt — cột này vốn chỉ có badge, thêm khung nữa là rối. */
.bkx-duong-btn[b-m1aiutjc2a] {
    display: inline-flex; align-items: center; gap: 5px;
    background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
}
.bkx-duong-btn i[b-m1aiutjc2a] { color: #94a3b8; font-size: 11px; }
.bkx-duong-btn:hover i[b-m1aiutjc2a] { color: var(--p, #2563eb); }
.bkx-duong-btn:focus-visible[b-m1aiutjc2a] { outline: none; box-shadow: var(--focus-ring, 0 0 0 2px rgba(26,95,180,.35)); border-radius: 6px; }

/* Mỗi điều kiện MỘT DÒNG, tô xanh — đều là điều kiện chuyến đã thoả. */
.bkx-duong[b-m1aiutjc2a] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.bkx-duong li[b-m1aiutjc2a] {
    display: flex; align-items: center; gap: 8px;
    background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 8px;
    padding: 6px 11px; font-size: 12.5px; color: #065f46;
}
.bkx-duong li i[b-m1aiutjc2a] { color: #047857; font-size: 11px; }

/* Thế số — monospace để các dấu × và = thẳng cột giữa các dòng, mắt dò theo cột là ra ngay. */
.bkx-the-h[b-m1aiutjc2a] {
    margin: 14px 0 6px; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: #94a3b8;
}
.bkx-the[b-m1aiutjc2a] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.bkx-the li[b-m1aiutjc2a] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 6px 10px; color: #334155;
}
/* Dòng cuối = Thành tiền THẬT trên bảng kê. Lệch với tích phía trên thì phải thấy ngay. */
.bkx-the li:last-child[b-m1aiutjc2a] { background: #fffbeb; border-color: #fde68a; color: #92400e; font-weight: 700; }

/* Thiếu dữ liệu — tô đỏ và thắng cả luật dòng-cuối ở trên (đặt sau nên đè được). */
.bkx-the li.bkx-the-thieu[b-m1aiutjc2a],
.bkx-the li.bkx-the-thieu:last-child[b-m1aiutjc2a] {
    background: #fef2f2; border-color: #fecaca; color: #b91c1c; font-weight: 600;
}
.bkx-the li.bkx-the-thieu i[b-m1aiutjc2a] { margin-right: 6px; }

.bkx-duong-ft[b-m1aiutjc2a] { margin-top: 12px; font-size: 12px; color: #64748b; }

/* Cảnh báo bảng kê chạm trần — bảng thiếu dòng nên ô "Tổng" không đủ. Đỏ nhạt, không phải màu
   thông tin: đây là con số SAI trên chứng từ, không phải ghi chú tham khảo. */
.bkx-cat-cut[b-m1aiutjc2a] {
    margin: 8px 2px 0; padding: 9px 12px; border-radius: 7px;
    font-size: 12.5px; line-height: 1.5;
    color: #A03434; background: #FBECEC; border: 1px solid #E7C4C4;
}
.bkx-cat-cut i[b-m1aiutjc2a] { margin-right: 6px; }
/* _content/Admin_KA_Transport_Pricing/Components/Pages/CauHinhDiemGia/CauHinhDiemGia.razor.rz.scp.css */
/* Điểm ưu tiên đơn giá — cùng ngôn ngữ thẻ với /cau-hinh-chuyen-diem (cht-*) và /cau-hinh-dieu-kien-gia (ck-*). */
.du-page[b-49t3509fpv] { padding: 16px; }
.du-head h2[b-49t3509fpv] { font-size: 18px; font-weight: 700; color: #1e293b; margin: 0 0 4px; }
.du-head h2 i[b-49t3509fpv] { color: var(--p, #2563eb); margin-right: 6px; }
.du-sub[b-49t3509fpv] { color: #64748b; font-size: 13px; margin: 0 0 10px; max-width: 920px; line-height: 1.5; }

.du-warn[b-49t3509fpv] {
    display: flex; gap: 8px; align-items: flex-start;
    background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px;
    padding: 9px 12px; margin: 0 0 10px; max-width: 920px;
    font-size: 12.5px; color: #92400e; line-height: 1.5;
}
.du-warn i[b-49t3509fpv] { color: #d97706; margin-top: 2px; }
/* Thông tin "chưa có hiệu lực" — xanh, không phải cảnh báo lỗi, nhưng phải đọc trước tiên. */
.du-warn-stop[b-49t3509fpv] { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.du-warn-stop i[b-49t3509fpv] { color: #2563eb; }
.du-warn-err[b-49t3509fpv] { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.du-warn-err i[b-49t3509fpv] { color: #dc2626; }
.du-warn code[b-49t3509fpv] { background: rgba(0,0,0,.05); padding: 1px 5px; border-radius: 4px; font-size: 11.5px; }

.du-body[b-49t3509fpv] { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; margin-top: 6px; }
@media (max-width: 1100px) { .du-body[b-49t3509fpv] { grid-template-columns: 1fr; } }

.du-list-wrap[b-49t3509fpv] { border: 1px solid var(--b, #e4e8ef); border-radius: 12px; background: #fff; padding: 12px 14px; }

.du-list-head[b-49t3509fpv] {
    display: grid; grid-template-columns: 26px 56px 1fr 72px 84px; gap: 10px; align-items: center;
    padding: 0 8px 6px; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: #94a3b8;
}
.du-lh-rank[b-49t3509fpv] { grid-column: 2; }
.du-lh-name[b-49t3509fpv] { grid-column: 3; }
.du-lh-diem[b-49t3509fpv] { grid-column: 4; text-align: center; }

.du-list[b-49t3509fpv] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.du-row[b-49t3509fpv] {
    display: grid; grid-template-columns: 26px 56px 1fr 72px 84px; gap: 10px; align-items: center;
    border: 1px solid #e2e8f0; border-radius: 10px; background: #fff;
    padding: 9px 8px; cursor: grab;
}
.du-row:hover[b-49t3509fpv] { border-color: #cbd5e1; background: #f8fafc; }
/* Dòng đang được cầm: mờ đi để mắt bám vào CHỖ SẮP THẢ, không bám vào chỗ cũ. */
.du-row-drag[b-49t3509fpv] { opacity: .45; cursor: grabbing; }
/* Chỗ sắp thả: gạch trên đậm — cho biết dòng sẽ chèn vào đây. */
.du-row-over[b-49t3509fpv] { border-color: var(--p, #2563eb); box-shadow: inset 0 2px 0 0 var(--p, #2563eb); background: #eff6ff; }

.du-grip[b-49t3509fpv] { color: #cbd5e1; text-align: center; font-size: 13px; }
.du-row:hover .du-grip[b-49t3509fpv] { color: #94a3b8; }

.du-rank[b-49t3509fpv] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 8px;
    background: #f1f5f9; color: #475569; font-weight: 700; font-size: 13px;
}

.du-name[b-49t3509fpv] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.du-name b[b-49t3509fpv] { font-size: 13.5px; color: #1e293b; font-weight: 600; }
.du-col[b-49t3509fpv] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px; color: #94a3b8;
}

.du-diem[b-49t3509fpv] {
    text-align: center; font-size: 16px; font-weight: 700; color: var(--p, #2563eb);
    background: #eff6ff; border-radius: 8px; padding: 4px 0;
}

.du-moves[b-49t3509fpv] { display: flex; gap: 4px; justify-content: flex-end; }
.du-moves .btn[b-49t3509fpv] { padding: 4px 8px; }

.du-actions[b-49t3509fpv] { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }

.du-err[b-49t3509fpv] {
    display: flex; gap: 7px; align-items: center; margin-top: 10px;
    background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px;
    padding: 8px 11px; font-size: 12.5px; color: #b91c1c;
}
.du-meta[b-49t3509fpv] { font-size: 11.5px; color: #94a3b8; margin-top: 10px; padding-top: 8px; border-top: 1px dashed #e2e8f0; }

.du-aside[b-49t3509fpv] { border: 1px solid var(--b, #e4e8ef); border-radius: 12px; background: #fff; padding: 12px 14px; }
.du-sec[b-49t3509fpv] {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: #94a3b8; margin: 10px 0 5px;
}
.du-sec:first-child[b-49t3509fpv] { margin-top: 0; }
.du-note[b-49t3509fpv] { font-size: 12.5px; color: #475569; line-height: 1.6; margin: 0 0 6px; }
.du-note code[b-49t3509fpv] { background: #f1f5f9; padding: 1px 5px; border-radius: 4px; font-size: 11.5px; }
.du-ul[b-49t3509fpv] { padding-left: 18px; margin: 0; }
.du-ul li[b-49t3509fpv] { margin-bottom: 5px; }

.du-math[b-49t3509fpv] {
    margin: 0 0 8px; padding: 8px 10px; border-radius: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px; line-height: 1.6; white-space: pre-wrap; word-break: break-word;
    background: #f8fafc; border: 1px solid #e2e8f0; color: #334155;
}

.du-confirm-list[b-49t3509fpv] { margin: 4px 0 10px; padding-left: 20px; font-size: 13px; color: #334155; line-height: 1.8; }

/* ---- Ba bước của luật chọn giá (đọc từ trái sang) ---- */
.du-buoc[b-49t3509fpv] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 6px 0 14px; }
@media (max-width: 1100px) { .du-buoc[b-49t3509fpv] { grid-template-columns: 1fr; } }

.du-buoc-card[b-49t3509fpv] { border: 1px solid var(--b, #e4e8ef); border-radius: 12px; background: #fff; padding: 12px 14px; }
/* Bước 3 là phần DUY NHẤT cấu hình được → tô khác để mắt biết chỗ cần thao tác. */
.du-buoc-card-diem[b-49t3509fpv] { border-color: #bfdbfe; background: #f8fbff; }

.du-buoc-h[b-49t3509fpv] { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; color: #1e293b; margin-bottom: 6px; }
.du-buoc-no[b-49t3509fpv] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto;
    background: var(--p, #2563eb); color: #fff; font-size: 11.5px; font-weight: 700;
}

.du-tc[b-49t3509fpv] { width: 100%; border-collapse: collapse; margin-bottom: 6px; }
.du-tc td[b-49t3509fpv] { padding: 5px 0; border-top: 1px dashed #eef2f7; vertical-align: top; }
.du-tc tr:first-child td[b-49t3509fpv] { border-top: 0; }
.du-tc-ten[b-49t3509fpv] { font-size: 12.5px; font-weight: 600; color: #1e293b; white-space: nowrap; padding-right: 10px !important; }
.du-tc-ten .du-col[b-49t3509fpv] { display: block; font-weight: 400; }
.du-tc-note[b-49t3509fpv] { font-size: 11.5px; color: #64748b; line-height: 1.5; }

.du-cattap[b-49t3509fpv] { margin: 0 0 6px; padding-left: 18px; }
.du-cattap li[b-49t3509fpv] { margin-bottom: 8px; font-size: 12.5px; color: #1e293b; }
.du-cattap .du-col[b-49t3509fpv] { margin-left: 6px; }
.du-note-nhac[b-49t3509fpv] { color: #475569; font-style: italic; }

.du-sec-list[b-49t3509fpv] { margin-top: 0; }
/* _content/Admin_KA_Transport_Pricing/Components/Pages/CauHinhTraHang/CauHinhTraHang.razor.rz.scp.css */
/* Cấu hình trả hàng — bám cùng ngôn ngữ thẻ với /cau-hinh-dieu-kien-gia (ck-*). */
.cht-page[b-gwp8ly5wat] { padding: 16px; }
.cht-head-top[b-gwp8ly5wat] { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cht-head h2[b-gwp8ly5wat] { font-size: 18px; font-weight: 700; color: #1e293b; margin: 0 0 4px; }
.cht-head h2 i[b-gwp8ly5wat] { color: var(--p, #2563eb); margin-right: 6px; }
.cht-sub[b-gwp8ly5wat] { color: #64748b; font-size: 13px; margin: 0 0 10px; max-width: 920px; line-height: 1.5; }

.cht-warn[b-gwp8ly5wat] {
    display: flex; gap: 8px; align-items: flex-start;
    background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px;
    padding: 9px 12px; margin: 0 0 16px; max-width: 920px;
    font-size: 12.5px; color: #92400e; line-height: 1.5;
}
.cht-warn i[b-gwp8ly5wat] { color: #d97706; margin-top: 2px; }

/* 900px: sơ đồ rẽ 3 nhánh ở bước đầu, nhánh chính còn rẽ tiếp 2 tầng nữa. Hẹp hơn thì card
   phải cuộn ngang, mà cuộn ngang ở CẢ BA card cùng lúc là không so sánh được ba miền với nhau. */
.cht-grid[b-gwp8ly5wat] { display: grid; grid-template-columns: repeat(auto-fill, minmax(900px, 1fr)); gap: 14px; }
/* Một miền một hàng — sơ đồ được trọn bề ngang màn hình. */
.cht-grid-1[b-gwp8ly5wat] { grid-template-columns: 1fr; }
.cht-card[b-gwp8ly5wat] { border: 1px solid var(--b, #e4e8ef); border-radius: 12px; background: #fff; padding: 14px 16px; }
.cht-card-h[b-gwp8ly5wat] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 8px; }
.cht-title[b-gwp8ly5wat] { font-weight: 700; font-size: 14.5px; color: #1e293b; }
.cht-title i[b-gwp8ly5wat] { color: var(--p, #2563eb); margin-right: 5px; }

.cht-nums[b-gwp8ly5wat] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 12px; margin-bottom: 12px; }
.cht-num[b-gwp8ly5wat] { display: flex; flex-direction: column; gap: 2px; }
.cht-num-l[b-gwp8ly5wat] { font-size: 11.5px; color: #64748b; }
.cht-num-v[b-gwp8ly5wat] { font-size: 14px; font-weight: 700; color: #1e293b; }

.cht-sec[b-gwp8ly5wat] {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: #94a3b8; margin: 10px 0 5px;
}

/* Ví dụ số giữ xuống dòng thủ công; cuộn ngang trong khối thay vì đẩy trang rộng ra.
   (Công thức nay là sơ đồ khối — xem CongThucKhoi.razor.css.) */
.cht-example[b-gwp8ly5wat] {
    margin: 0; padding: 9px 11px; border-radius: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px; line-height: 1.65; white-space: pre; overflow-x: auto;
    background: #f8fafc; border: 1px solid #e2e8f0; color: #334155;
}

.cht-dem[b-gwp8ly5wat] { color: #94a3b8; }

.cht-ghichu[b-gwp8ly5wat] { font-size: 12.5px; color: #475569; margin-top: 10px; line-height: 1.5; font-style: italic; }
.cht-meta[b-gwp8ly5wat] { font-size: 11.5px; color: #94a3b8; margin-top: 10px; padding-top: 8px; border-top: 1px dashed #e2e8f0; }

.cht-err[b-gwp8ly5wat] {
    display: flex; gap: 7px; align-items: center; margin-top: 10px;
    background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px;
    padding: 8px 11px; font-size: 12.5px; color: #b91c1c;
}

/* Bước xác nhận NẰM TRONG chính modal sửa (không chồng modal thứ hai — xem ghi chú đầu .razor). */
.cht-confirm[b-gwp8ly5wat] {
    display: flex; gap: 9px; align-items: flex-start; margin-top: 14px;
    background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px;
    padding: 10px 12px; font-size: 12.5px; color: #92400e; line-height: 1.5;
}
.cht-confirm i[b-gwp8ly5wat] { color: #d97706; margin-top: 2px; }
.cht-confirm-huy[b-gwp8ly5wat] { background: #f8fafc; border-color: #e2e8f0; color: #334155; }
.cht-confirm-huy i[b-gwp8ly5wat] { color: #64748b; }

/* fieldset chỉ để gom disabled cho cả cụm nhập — không vẽ khung. */
.cht-fs[b-gwp8ly5wat] { border: 0; margin: 0; padding: 0; min-width: 0; }
.cht-fs:disabled[b-gwp8ly5wat] { opacity: .55; }

.ff-hint[b-gwp8ly5wat] { font-size: 11.5px; color: #64748b; margin-top: 4px; line-height: 1.45; }

.cht-warn a[b-gwp8ly5wat] { color: #92400e; text-decoration: underline; }
.cht-warn a:hover[b-gwp8ly5wat] { color: #78350f; }

@media (max-width: 768px) {
    .cht-grid[b-gwp8ly5wat] { grid-template-columns: 1fr; }
    .cht-nums[b-gwp8ly5wat] { grid-template-columns: 1fr 1fr; }
    /* 16px chống zoom iOS khi focus input (quy ước chung của repo).
       ⚠️ KHÔNG neo vào `.cht-page`: modal render NGOÀI div đó nên selector cũ không bao giờ khớp,
       mà toàn bộ ô nhập lại nằm trong modal. Neo vào `.ff` (bọc từng field, có ở cả 2 nơi). */
    .ff input[b-gwp8ly5wat], .ff textarea[b-gwp8ly5wat] { font-size: 16px; }
}
/* _content/Admin_KA_Transport_Pricing/Components/Pages/ChungTu/ChungTu.razor.rz.scp.css */
.ct-page[b-yuuwtjid8j] {
    font-size: 12.5px;
}

.ct-dms-input-row[b-yuuwtjid8j] {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.ct-dms-input-row input[b-yuuwtjid8j] {
    flex: 1 1 auto;
    min-width: 0;
}

.ct-dms-lookup[b-yuuwtjid8j] {
    flex: 0 0 auto;
    white-space: nowrap;
}

.ct-dms-warning[b-yuuwtjid8j] {
    display: block;
    margin-top: 5px;
    color: #b45309;
    font-size: 11.5px;
}

.ct-dms-warning i[b-yuuwtjid8j] {
    margin-right: 4px;
}

/* Ô chỉ đọc (ID/Tên chứng từ — chỉ "Tra cứu" điền được): phải nhìn ra ngay là không gõ được.
   .ff input:focus của etrans-ui.css đổi nền sang trắng → ghi đè cả trạng thái focus. */
.ct-ro[b-yuuwtjid8j], .ct-ro:focus[b-yuuwtjid8j] {
    background: #eceff4;              /* đậm hơn nền ô nhập (--bg #f8f9fa) để phân biệt, vẫn đủ tương phản chữ */
    border-color: var(--bs, #cbd5e1);
    color: var(--t, #1f2937);
    cursor: default;
    box-shadow: none;
}

.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;
}

/* .hint toàn cục chỉ áp cho `.ff .hint` — hint trong hộp gia hạn nằm ngoài .ff nên tự style ở đây. */
.ct-renewal-box .hint[b-yuuwtjid8j] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    font-size: 10.5px;
    font-weight: 400;
    color: var(--tm, #64748b);
}

.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; }

    /* Icon hành động nhỏ lại — CHỈ trên desktop. Dưới 769px giữ nguyên .btn-sm toàn cục
       (min 40×40px) vì đó là vùng chạm, thu nhỏ là bấm trượt. */
    .cactions .btn[b-yuuwtjid8j] { padding: 3px 7px; }
    .cactions .btn i[b-yuuwtjid8j] { font-size: 12px; }
    .ctoggle[b-yuuwtjid8j] { font-size: 13px; }
}

/* 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; }

/* ===== Bộ lọc tab Vận chuyển / Phụ phí / Bồi thường (giống bộ lọc 3 trang gốc
   GiaVanChuyen/PhuPhi/PhiBoiThuong — cùng class .fbar/.filter-toggle, chép nguyên khối CSS
   thu/mở từ GiaVanChuyen.razor.css để hành vi giống hệt). Tab Phụ phí quy đổi giữ nguyên
   .dg-fbar riêng, không đụng.
   ⚠️ Đây là file CSS, không phải Razor: đóng comment theo chuẩn CSS, đừng dùng dấu đóng comment
   của Razor. Gõ nhầm thì comment không bao giờ đóng và nuốt sạch rule phía sau, trong khi build
   VẪN XANH và test bUnit VẪN XANH (bUnit dựng DOM chứ không áp stylesheet) — chỉ mở trang thật
   mới thấy vỡ. Guard: RazorCssGuardTests. */

/* .fbar global (etrans-ui.css) là display:flex → 2 .fbar-row sẽ nằm CẠNH nhau thành 2 cột dọc.
   Desktop phải trả .fbar về block để các hàng xếp chồng; mobile đảo lại ở media query cuối file. */
.fbar[b-n82x3bl5ru] {
    display: block;
}

.filter-toggle[b-n82x3bl5ru] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}

.filter-toggle.is-toggled + .fbar[b-n82x3bl5ru] { display: none; }
.filter-toggle .fchev[b-n82x3bl5ru] { transition: transform .15s ease; transform: rotate(180deg); }
.filter-toggle.is-toggled .fchev[b-n82x3bl5ru] { transform: none; }

.fbar-row[b-n82x3bl5ru] {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.fbar-row + .fbar-row[b-n82x3bl5ru] {
    margin-top: 10px;
}

.fbar-row > .fg[b-n82x3bl5ru] {
    flex: 1 1 auto;
}

.fbar-actions[b-n82x3bl5ru] {
    display: flex;
    flex: 0 0 auto;
    max-width: 100%;
    gap: 8px;
    justify-content: flex-end;
    align-items: flex-end;
    flex-wrap: wrap;
}

.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; }
/* `separate` (không phải `collapse`) là BẮT BUỘC cho cột dính: với `collapse`, viền được vẽ ở
   tầng <table> nên KHÔNG trượt theo ô sticky → hở seam trắng dọc mép cột ghim khi cuộn ngang. */
.bt-table[b-n82x3bl5ru] { width: 100%; border-collapse: separate; border-spacing: 0; 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; }

/* ---- Cột dính (tab Vận chuyển + tab Phụ phí) ----
   Trái: checkbox (stk-l) → ID (stk-lid) → Zone lấy / Loại (stk-l2). Phải: Duyệt (stk-r).
   Hai tab dùng CHUNG bộ lớp này: bảng nào cũng rộng hơn màn hình, không ghim thì phải cuộn
   ngang hết cỡ mới thấy nút Duyệt/Từ chối.
   width = min-width = max-width KHOÁ CỨNG: `left` của cột sau được tính từ bề rộng cột trước,
   nên nếu bề rộng co giãn theo nội dung thì offset sai → cột ghim chồng lên nhau hoặc hở khe.
   Bám đúng bộ số của GiaVanChuyen.razor.css để hai trang cuộn giống nhau. */
.bt-table th.stk-l[b-n82x3bl5ru], .bt-table td.stk-l[b-n82x3bl5ru] {
    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ăn TRÁI (trước căn phải) — đọc dọc cột dễ hơn khi các id không cùng số chữ số. */
.bt-table th.stk-lid[b-n82x3bl5ru], .bt-table td.stk-lid[b-n82x3bl5ru] {
    position: sticky; left: 34px; z-index: 2;
    width: 60px; min-width: 60px; max-width: 60px; box-sizing: border-box;
    text-align: left; overflow: hidden; text-overflow: ellipsis;
}
.bt-table th.stk-l2[b-n82x3bl5ru], .bt-table td.stk-l2[b-n82x3bl5ru] {
    position: sticky; left: 94px; z-index: 2;
    width: 150px; min-width: 150px; max-width: 150px; box-sizing: border-box;
    overflow: hidden; text-overflow: ellipsis;
    box-shadow: 6px 0 8px -6px rgba(0, 0, 0, .12);
}
/* Nút Duyệt căn TRÁI trong ô ghim phải. */
.bt-table th.stk-r[b-n82x3bl5ru], .bt-table td.stk-r[b-n82x3bl5ru] {
    position: sticky; right: 0; z-index: 2;
    width: 96px; min-width: 96px; max-width: 96px; box-sizing: border-box;
    text-align: left;
    box-shadow: -6px 0 8px -6px rgba(0, 0, 0, .12);
}
.bt-table td.stk-r .row-acts[b-n82x3bl5ru] { justify-content: flex-start; }
/* Ô dính PHẢI có nền riêng, nếu không nội dung cuộn bên dưới sẽ nhìn xuyên qua.
   Thứ tự 3 rule dưới = thứ tự ưu tiên: mặc định → hover → đang chọn. */
.bt-table td.stk-l[b-n82x3bl5ru], .bt-table td.stk-lid[b-n82x3bl5ru], .bt-table td.stk-l2[b-n82x3bl5ru], .bt-table td.stk-r[b-n82x3bl5ru] { background: #fff; }
.bt-table th.stk-l[b-n82x3bl5ru], .bt-table th.stk-lid[b-n82x3bl5ru], .bt-table th.stk-l2[b-n82x3bl5ru], .bt-table th.stk-r[b-n82x3bl5ru] { background: #f8f9fc; z-index: 5; }
.bt-table tbody tr:hover td.stk-l[b-n82x3bl5ru], .bt-table tbody tr:hover td.stk-lid[b-n82x3bl5ru],
.bt-table tbody tr:hover td.stk-l2[b-n82x3bl5ru], .bt-table tbody tr:hover td.stk-r[b-n82x3bl5ru] { background: #f0f4ff; }
.bt-table tbody tr.sel td.stk-l[b-n82x3bl5ru], .bt-table tbody tr.sel td.stk-lid[b-n82x3bl5ru],
.bt-table tbody tr.sel td.stk-l2[b-n82x3bl5ru], .bt-table tbody tr.sel td.stk-r[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); }
.dg-openrow[b-n82x3bl5ru] { cursor: pointer; }
.dg-openrow:focus-visible[b-n82x3bl5ru] { outline: 2px solid var(--p,#2563eb); outline-offset: -2px; }

.dg-detail-layout[b-n82x3bl5ru] { display:grid; grid-template-columns:minmax(0,1fr) 1px minmax(300px,.72fr); gap:20px; align-items:stretch; }
.dg-detail-info[b-n82x3bl5ru] { min-width:0; }
.dg-detail-divider[b-n82x3bl5ru] { background:var(--b,#e4e8ef); }
.dg-detail-head[b-n82x3bl5ru] { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.dg-detail-sec[b-n82x3bl5ru] { margin:14px 0 8px; color:var(--t,#1e293b); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.35px; }
.dg-detail-grid[b-n82x3bl5ru] { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 16px; }
.dg-detail-grid > div[b-n82x3bl5ru] { display:flex; flex-direction:column; gap:3px; padding:8px 0; border-bottom:1px solid var(--b,#e4e8ef); min-width:0; }
.dg-detail-grid label[b-n82x3bl5ru] { color:var(--tm,#64748b); font-size:11px; }
.dg-detail-grid span[b-n82x3bl5ru] { color:var(--t,#1e293b); white-space:normal; overflow-wrap:anywhere; }

/* ---- 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) {
    /* Nút Bộ lọc: full-width; mặc định THU GỌN trên mobile — cùng class .is-toggled nhưng
       nghĩa đảo lại (bấm = mở), y hệt GiaVanChuyen.razor.css. */
    .filter-toggle[b-n82x3bl5ru] {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-bottom: 5px;
    }
    .fbar[b-n82x3bl5ru] { display: flex; padding: 12px; gap: 8px; }
    .fbar-row[b-n82x3bl5ru] { display: contents; }
    .fbar .fg[b-n82x3bl5ru] { flex: 1 1 100% !important; min-width: 0 !important; max-width: none !important; }
    .filter-toggle.is-toggled + .fbar[b-n82x3bl5ru] { display: flex; }
    .filter-toggle:not(.is-toggled) + .fbar .fg:not(.sw)[b-n82x3bl5ru] { display: none; }
    .filter-toggle .fchev[b-n82x3bl5ru] { transform: none; }
    .filter-toggle.is-toggled .fchev[b-n82x3bl5ru] { transform: rotate(180deg); }
    .fbar-actions[b-n82x3bl5ru] { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
        .fbar-actions .btn[b-n82x3bl5ru] { flex: 1 1 auto; justify-content: center; }

    .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; }
    .dg-detail-layout[b-n82x3bl5ru] { grid-template-columns:1fr; }
    .dg-detail-divider[b-n82x3bl5ru] { height:1px; }
    .dg-detail-grid[b-n82x3bl5ru] { grid-template-columns:1fr; }
}

/* ===== Tab Phụ phí quy đổi: nhóm theo loại phí (mockup HTML 0306/duyet-gia.html) =====
   Bộ lọc của tab này KHÔNG còn khuôn riêng: nó dùng chung .fbar/.filter-toggle với 3 tab kia
   (người dùng chốt 24/08/2026 — trước đây .dg-fbar là khối phẳng, luôn mở, lọc tức thì). */

/* 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; }
/* Dải nhóm ở tab Vận chuyển/Phụ phí bấm được để thu gọn/mở (tab Phụ phí quy đổi nhóm theo loại phí,
   dải của nó không bấm được — nên cursor/hover gắn ở .dg-grp-row chứ không ở .dg-grp-hdr chung). */
.bt-table tbody tr.dg-grp-row[b-n82x3bl5ru] { cursor: pointer; }
.bt-table tbody tr.dg-grp-row:hover .dg-grp-hdr[b-n82x3bl5ru] { background: #e4ecff; }
.bt-table tbody tr.dg-grp-row:focus-visible[b-n82x3bl5ru] { outline: 2px solid var(--p, #2563eb); outline-offset: -2px; }
/* Ô colspan của dải nhóm KHÔNG được ăn nền hover chung của .bt-table tbody tr:hover td — nền của
   dải do .dg-grp-hdr lo, để nguyên sẽ thành hai lớp nền lệch nhau. */
.bt-table tbody tr.dg-grp-row:hover > td[b-n82x3bl5ru] { background: transparent; }
.dg-grp-chev[b-n82x3bl5ru] { color: var(--tm, #64748b); width: 12px; font-size: 11px; }
.dg-cards-grp .dg-grp-hdr[role="button"][b-n82x3bl5ru] { cursor: pointer; }
.dg-cards-grp .dg-grp-hdr:focus-visible[b-n82x3bl5ru] { outline: 2px solid var(--p, #2563eb); outline-offset: -2px; }
/* 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-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);
}

/* Bộ lọc nhiều trường được chia chủ động thành 2 hàng; nút giữ kích thước nội dung. */
.fbar[b-wyqswpgrl0] {
    display: block;
}

.fbar-row[b-wyqswpgrl0] {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.fbar-row + .fbar-row[b-wyqswpgrl0] {
    margin-top: 10px;
}

.fbar-row > .fg[b-wyqswpgrl0] {
    flex: 1 1 auto;
}

.fbar-actions[b-wyqswpgrl0] {
    display: flex;
    flex: 0 0 auto;
    max-width: 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;
}

.route-pairs[b-wyqswpgrl0] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 10px;
}

.route-pair[b-wyqswpgrl0] {
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--b, #e4e8ef);
    border-radius: 10px;
    background: #fbfcfe;
}

.route-pair-head[b-wyqswpgrl0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--tm, #64748b);
}

.route-pair-head > b[b-wyqswpgrl0] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.route-pair .ff + .ff[b-wyqswpgrl0] {
    margin-top: 10px;
}

.route-clear[b-wyqswpgrl0] {
    padding: 3px 8px;
}

.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: 2400px; }
.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;
}

/* Lý do "không có nút nào" — chỉ hiện khi tập đang chọn không áp được thao tác hàng loạt nào. */
.bbar-note[b-wyqswpgrl0] {
    color: var(--tm, #64748b);
    font-size: 12px;
}

.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;
}

/* Icon hành động nhỏ lại — CHỈ desktop. Cột này có tới 5 nút, để cỡ mặc định là tràn
   và đẩy bề rộng cột dính. Dưới 769px KHÔNG áp: ở đó .btn-sm phải giữ 40×40px (vùng chạm),
   quy tắc đã có sẵn trong media query cuối file. */
@media (min-width: 769px) {
    .row-acts .btn[b-wyqswpgrl0] { padding: 3px 6px; }
    .row-acts .btn i[b-wyqswpgrl0] { font-size: 12.5px; }
}

/* .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] {
        display: flex;
        padding: 12px;
        gap: 8px;
    }

    .fbar-row[b-wyqswpgrl0] {
        display: contents;
    }

    .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;
    }

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

    .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;
        }
}

/* Lý do ô chọn chứng từ rỗng (BUG tracking #21) — cùng cỡ chữ với .hint nhưng màu cảnh báo. */
.hint.hint-warn[b-wyqswpgrl0] { color: #b45309; }
/* _content/Admin_KA_Transport_Pricing/Components/Pages/Ky/Ky.razor.rz.scp.css */
/* Kỳ phụ phí quy đổi — bảng desktop ↔ vẫn là bảng trên mobile nhưng cuộn ngang trong khung riêng
   (chỉ 6 cột ngắn, đổi sang thẻ không đáng). */

.ky-page[b-ncvwwj2y7n] { padding: 16px 18px 40px; display: flex; flex-direction: column; gap: 14px; }

.ky-head[b-ncvwwj2y7n] { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ky-head h2[b-ncvwwj2y7n] { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.ky-head h2 i[b-ncvwwj2y7n] { color: var(--etrans-primary, #1F4E79); margin-right: 6px; }
.ky-sub[b-ncvwwj2y7n] { margin: 0; flex: 1 1 320px; font-size: 13px; color: #5A6472; }
.ky-head .btn-p[b-ncvwwj2y7n] { margin-left: auto; }

.ky-empty[b-ncvwwj2y7n] { padding: 28px 16px; text-align: center; color: #7A8698; background: #fff; border: 1px solid #E3E8EF; border-radius: 8px; }
.ky-empty.ky-err[b-ncvwwj2y7n] { color: #A03434; background: #FBECEC; border-color: #E7C4C4; }

/* Bảng cuộn ngang TRONG khung riêng — trang không được cuộn ngang theo. */
.ky-tblwrap[b-ncvwwj2y7n] { overflow-x: auto; background: #fff; border: 1px solid #E3E8EF; border-radius: 8px; }
.ky-tbl[b-ncvwwj2y7n] { width: 100%; border-collapse: collapse; font-size: 14px; }
.ky-tbl th[b-ncvwwj2y7n] {
    text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
    font-weight: 650; color: #7A8698; padding: 11px 14px 9px; white-space: nowrap;
    border-bottom: 1px solid #E8EDF2; background: #F6F8FA;
}
.ky-tbl td[b-ncvwwj2y7n] { padding: 10px 14px; border-bottom: 1px solid #EEF2F6; vertical-align: middle; }
.ky-tbl tbody tr:last-child td[b-ncvwwj2y7n] { border-bottom: 0; }
.ky-tbl tbody tr:hover td[b-ncvwwj2y7n] { background: #F8FAFC; }
.ky-ten[b-ncvwwj2y7n] { font-weight: 600; }
/* Ngày và tháng/năm xếp cột phải thẳng hàng chữ số. */
.ky-num[b-ncvwwj2y7n] { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ky-note[b-ncvwwj2y7n] { color: #5A6472; font-size: 13px; }
.ta-c[b-ncvwwj2y7n] { text-align: center; }
.ky-act[b-ncvwwj2y7n] { white-space: nowrap; }
.ky-act .btn[b-ncvwwj2y7n] { margin: 0 2px; }

/* ---- form ---- */
.ky-form[b-ncvwwj2y7n] { display: flex; flex-direction: column; gap: 12px; }
.ky-row2[b-ncvwwj2y7n] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ky-fg[b-ncvwwj2y7n] { display: flex; flex-direction: column; gap: 5px; }
.ky-fg .flbl[b-ncvwwj2y7n] { font-size: 12.5px; font-weight: 600; color: #3D4757; }
.ky-fg .req[b-ncvwwj2y7n] { color: #A03434; }

/* Khoảng ngày suy ra từ tháng/năm — trình bày như một câu, không như ô nhập,
   để không ai tưởng sửa được. */
.ky-khoang[b-ncvwwj2y7n] {
    display: flex; align-items: center; gap: 9px;
    padding: 10px 13px; border-radius: 7px;
    background: #EEF4FA; border: 1px solid #D3E2F0; color: #1F3247; font-size: 13.5px;
}
.ky-khoang i[b-ncvwwj2y7n] { color: #1F4E79; flex: none; }
.ky-khoang b[b-ncvwwj2y7n] { font-variant-numeric: tabular-nums; }

.ky-formerr[b-ncvwwj2y7n] {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 9px 12px; border-radius: 7px; font-size: 13px;
    color: #A03434; background: #FBECEC; border: 1px solid #E7C4C4;
}

@media (max-width: 640px) {
    .ky-page[b-ncvwwj2y7n] { padding: 12px 12px 32px; }
    .ky-head .btn-p[b-ncvwwj2y7n] { margin-left: 0; }
    .ky-row2[b-ncvwwj2y7n] { grid-template-columns: 1fr; }
}
/* _content/Admin_KA_Transport_Pricing/Components/Pages/NgayLe/NgayLe.razor.rz.scp.css */
/* Trang NGAY LE — khung dùng lại y khuôn trang Kỳ phụ phí quy đổi.

   ⚠️ CSS của Blazor là SCOPED theo component: lớp .ky-* khai trong Ky.razor.css KHÔNG áp
   được sang trang này, nên phải có bản SAO Ở ĐÂY. Đó là cách các trang khác trong repo đang
   làm, không phải thừa. Giữ nguyên tên lớp .ky-* để hai trang trông giống hệt nhau. */

/* Kỳ phụ phí quy đổi — bảng desktop ↔ vẫn là bảng trên mobile nhưng cuộn ngang trong khung riêng
   (chỉ 6 cột ngắn, đổi sang thẻ không đáng). */

.ky-page[b-czkmgaoxru] { padding: 16px 18px 40px; display: flex; flex-direction: column; gap: 14px; }

.ky-head[b-czkmgaoxru] { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ky-head h2[b-czkmgaoxru] { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.ky-head h2 i[b-czkmgaoxru] { color: var(--etrans-primary, #1F4E79); margin-right: 6px; }
.ky-sub[b-czkmgaoxru] { margin: 0; flex: 1 1 320px; font-size: 13px; color: #5A6472; }
.ky-head .btn-p[b-czkmgaoxru] { margin-left: auto; }

.ky-empty[b-czkmgaoxru] { padding: 28px 16px; text-align: center; color: #7A8698; background: #fff; border: 1px solid #E3E8EF; border-radius: 8px; }
.ky-empty.ky-err[b-czkmgaoxru] { color: #A03434; background: #FBECEC; border-color: #E7C4C4; }

/* Bảng cuộn ngang TRONG khung riêng — trang không được cuộn ngang theo. */
.ky-tblwrap[b-czkmgaoxru] { overflow-x: auto; background: #fff; border: 1px solid #E3E8EF; border-radius: 8px; }
.ky-tbl[b-czkmgaoxru] { width: 100%; border-collapse: collapse; font-size: 14px; }
.ky-tbl th[b-czkmgaoxru] {
    text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
    font-weight: 650; color: #7A8698; padding: 11px 14px 9px; white-space: nowrap;
    border-bottom: 1px solid #E8EDF2; background: #F6F8FA;
}
.ky-tbl td[b-czkmgaoxru] { padding: 10px 14px; border-bottom: 1px solid #EEF2F6; vertical-align: middle; }
.ky-tbl tbody tr:last-child td[b-czkmgaoxru] { border-bottom: 0; }
.ky-tbl tbody tr:hover td[b-czkmgaoxru] { background: #F8FAFC; }
.ky-ten[b-czkmgaoxru] { font-weight: 600; }
/* Ngày và tháng/năm xếp cột phải thẳng hàng chữ số. */
.ky-num[b-czkmgaoxru] { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ky-note[b-czkmgaoxru] { color: #5A6472; font-size: 13px; }
.ta-c[b-czkmgaoxru] { text-align: center; }
.ky-act[b-czkmgaoxru] { white-space: nowrap; }
.ky-act .btn[b-czkmgaoxru] { margin: 0 2px; }

/* ---- form ---- */
.ky-form[b-czkmgaoxru] { display: flex; flex-direction: column; gap: 12px; }
.ky-row2[b-czkmgaoxru] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ky-fg[b-czkmgaoxru] { display: flex; flex-direction: column; gap: 5px; }
.ky-fg .flbl[b-czkmgaoxru] { font-size: 12.5px; font-weight: 600; color: #3D4757; }
.ky-fg .req[b-czkmgaoxru] { color: #A03434; }

/* Khoảng ngày suy ra từ tháng/năm — trình bày như một câu, không như ô nhập,
   để không ai tưởng sửa được. */
.ky-khoang[b-czkmgaoxru] {
    display: flex; align-items: center; gap: 9px;
    padding: 10px 13px; border-radius: 7px;
    background: #EEF4FA; border: 1px solid #D3E2F0; color: #1F3247; font-size: 13.5px;
}
.ky-khoang i[b-czkmgaoxru] { color: #1F4E79; flex: none; }
.ky-khoang b[b-czkmgaoxru] { font-variant-numeric: tabular-nums; }

.ky-formerr[b-czkmgaoxru] {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 9px 12px; border-radius: 7px; font-size: 13px;
    color: #A03434; background: #FBECEC; border: 1px solid #E7C4C4;
}

/* ---- Khối lọc: MỘT HÀNG ----
   ⚠️ `.fbar-row` là lớp của các trang bảng kê, KHÔNG có luật nào trong etrans-ui.css. Trang này
   dùng lại thẻ đó mà không chép luật sang, nên nó là một <div> khối trơn: `.fbar` (flex toàn cục)
   chỉ thấy MỘT con, còn Năm / Tìm kiếm / nút thì xếp CHỒNG trong một cụm sát trái.
   Chép đúng khuôn của BangKeSaLan.razor.css — CSS Blazor scoped theo component nên bắt buộc phải
   có bản sao ở đây, không kế thừa được. */
.fbar[b-czkmgaoxru] { display: block; }
.fbar-row[b-czkmgaoxru] { display: flex; align-items: flex-end; gap: 10px; }
.fbar-row > .fg[b-czkmgaoxru] { flex: 1 1 auto; }
.fbar-actions[b-czkmgaoxru] { display: flex; flex: 0 0 auto; gap: 8px; align-items: flex-end; flex-wrap: wrap; }

@media (max-width: 640px) {
    .ky-page[b-czkmgaoxru] { padding: 12px 12px 32px; }
    .ky-head .btn-p[b-czkmgaoxru] { margin-left: 0; }
    .ky-row2[b-czkmgaoxru] { grid-template-columns: 1fr; }

    /* Hẹp thì buông về xếp dọc — nhồi 2 ô + 2 nút trên một hàng 640px là ô nhập còn vài chục pixel.
       `display: contents` để chính các .fg nhận luật xuống dòng của .fbar, không phải cái bọc. */
    .fbar[b-czkmgaoxru] { display: flex; flex-wrap: wrap; gap: 10px; }
    .fbar-row[b-czkmgaoxru] { display: contents; }
    .fbar .fg[b-czkmgaoxru] { flex: 1 1 100%; min-width: 0; }
    .fbar-actions[b-czkmgaoxru] { flex: 1 1 100%; }
    .fbar-actions .btn[b-czkmgaoxru] { 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;
    }

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

.bt-openrow[b-owrnk5t9pa] { cursor: pointer; }
.bt-openrow:focus-visible[b-owrnk5t9pa] { outline: 2px solid var(--p, #2563eb); outline-offset: -2px; }

/* Popup chi tiết + bình luận */
.pbt-detail-layout[b-owrnk5t9pa] { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(300px, .72fr); gap: 20px; align-items: stretch; }
.pbt-detail-info[b-owrnk5t9pa] { min-width: 0; }
.pbt-detail-divider[b-owrnk5t9pa] { background: var(--b, #e4e8ef); }
.pbt-detail-head[b-owrnk5t9pa] { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pbt-detail-sec[b-owrnk5t9pa] { margin: 14px 0 8px; color: var(--t, #1e293b); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .35px; }
.pbt-detail-grid[b-owrnk5t9pa] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.pbt-detail-grid > div[b-owrnk5t9pa] { display: flex; flex-direction: column; gap: 3px; padding: 8px 0; border-bottom: 1px solid var(--b, #e4e8ef); min-width: 0; }
.pbt-detail-grid label[b-owrnk5t9pa], .pbt-detail-reason label[b-owrnk5t9pa] { color: var(--tm, #64748b); font-size: 11px; }
.pbt-detail-grid span[b-owrnk5t9pa], .pbt-detail-reason span[b-owrnk5t9pa] { color: var(--t, #1e293b); white-space: normal; overflow-wrap: anywhere; }
.pbt-detail-reason[b-owrnk5t9pa] { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; padding: 10px 12px; border: 1px solid #fecaca; border-radius: 8px; background: #fef2f2; }
.pbt-detail-reason label[b-owrnk5t9pa] { color: var(--err, #dc2626); font-weight: 700; }

/* 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; }
.bt-card.card-sel[b-owrnk5t9pa] { background: #eaf1ff; border-color: var(--p, #2563eb); }
.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;
        }

    .pbt-detail-layout[b-owrnk5t9pa] { grid-template-columns: 1fr; }
    .pbt-detail-divider[b-owrnk5t9pa] { height: 1px; }
    .pbt-detail-grid[b-owrnk5t9pa] { grid-template-columns: 1fr; }
}

/* Icon trong nút hành động của bảng — THU NHỎ cho khớp trang Giá vận chuyển (21/08/2026).
   Trang này KHÔNG bọc nút trong .row-acts như PhuPhi/PhiHaRong, nút icon nằm thẳng trong ô,
   nên nhắm qua .bt-table. Không set thì icon ăn cỡ mặc định của .btn và to hơn chữ quanh nó. */
.bt-table .btn i[b-owrnk5t9pa] { font-size: 12.5px; }

/* Cảnh báo dòng cũ có khoảng hiệu lực KHÔNG theo tháng áp dụng (dữ liệu trước 21/08/2026).
   Bắt buộc phải nổi bật: bấm Lưu là khoảng của dòng bị thay bằng trọn tháng — tức đổi phạm vi
   áp của một dòng giá, mà người dùng chỉ định sửa con số. */
.bt-warnle[b-owrnk5t9pa] {
    display: flex; align-items: flex-start; gap: 8px;
    margin: 0 0 12px; padding: 9px 11px;
    border: 1px solid #f0c36d; border-left: 3px solid #e0a419;
    border-radius: 6px; background: #fff8e6;
    font-size: 13px; line-height: 1.5; color: #6b4e06;
}
.bt-warnle i[b-owrnk5t9pa] { margin-top: 2px; flex: 0 0 auto; color: #e0a419; }
.bt-warnle b[b-owrnk5t9pa] { font-weight: 600; }
/* _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; }
}

/* Dòng tạm trùng điều kiện (loại cont + size + loại phí): tô đỏ để user biết xóa dòng nào —
   server từ chối cả đợt nếu còn trùng, nên phải thấy được ngay trong bảng. */
.bt-table tbody tr.bt-dup td[b-4i55df2zt8] { background: #fff1f0; }
.bt-table tbody tr.bt-dup:hover td[b-4i55df2zt8] { background: #ffe4e2; }
.bt-table tbody tr.bt-dup td:first-child[b-4i55df2zt8] { box-shadow: inset 3px 0 0 var(--err, #c0392b); }
.bt-dupwarn[b-4i55df2zt8] {
    margin-top: 10px; padding: 8px 12px; border-radius: var(--rm, 8px);
    background: #fff1f0; border: 1px solid #f5c2c0; color: var(--err, #c0392b); font-size: 11.5px;
}

/* Icon trong nút hành động của bảng — THU NHỎ cho khớp trang Giá vận chuyển (21/08/2026).
   Không set thì icon ăn cỡ mặc định của .btn và to hơn hẳn so với chữ quanh nó. */
.row-acts .btn i[b-4i55df2zt8] { font-size: 12.5px; }
/* _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; }
.pp-openrow[b-33tgk0l1ca] { cursor:pointer; }
.pp-openrow:focus-visible[b-33tgk0l1ca] { outline:2px solid var(--p,#2563eb); outline-offset:-2px; }

/* 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; }
.pp-detail-layout[b-33tgk0l1ca] { display:grid; grid-template-columns:minmax(0,1fr) 1px minmax(300px,.72fr); gap:20px; align-items:stretch; }
.pp-detail-layout.single[b-33tgk0l1ca] { grid-template-columns:1fr; }
.pp-detail-form[b-33tgk0l1ca] { min-width:0; }
.pp-detail-divider[b-33tgk0l1ca] { background:var(--b,#e4e8ef); }
.pp-detail-head[b-33tgk0l1ca] { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.pp-detail-grid[b-33tgk0l1ca] { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 16px; }
.pp-detail-grid > div[b-33tgk0l1ca] { display:flex; flex-direction:column; gap:3px; padding:8px 0; border-bottom:1px solid var(--b,#e4e8ef); min-width:0; }
.pp-detail-grid label[b-33tgk0l1ca], .pp-detail-reason label[b-33tgk0l1ca] { color:var(--tm,#64748b); font-size:11px; }
.pp-detail-grid span[b-33tgk0l1ca], .pp-detail-reason span[b-33tgk0l1ca] { color:var(--t,#1e293b); overflow-wrap:anywhere; }
.pp-detail-reason[b-33tgk0l1ca] { margin-top:12px; padding:10px 12px; display:flex; flex-direction:column; gap:4px; border-radius:8px; background:#fff1f2; }

/* 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; }
    .pp-detail-layout[b-33tgk0l1ca] { grid-template-columns:1fr; }
    .pp-detail-divider[b-33tgk0l1ca] { height:1px; }
    .pp-detail-grid[b-33tgk0l1ca] { grid-template-columns:1fr; }
}

/* Icon trong nút hành động của bảng — THU NHỎ cho khớp trang Giá vận chuyển (21/08/2026).
   Không set thì icon ăn cỡ mặc định của .btn và to hơn hẳn so với chữ quanh nó. */
.row-acts .btn i[b-33tgk0l1ca] { font-size: 12.5px; }   /* nút của bảng IMPORT — dựng trong markup */

/* ⚠️ Bảng CHÍNH dựng .row-acts bằng RenderTreeBuilder (xem PhuPhi.razor: builder.OpenElement),
   mà phần tử do builder tạo KHÔNG nhận attribute scope b-xxxxx của .razor.css → rule scoped ở
   trên không bao giờ khớp, icon vẫn to như thường. Dùng ::deep: scope bám vào .pp-wrap (có
   trong markup nên CÓ attribute), phần con bên dưới khớp tự do. */
.pp-wrap[b-33tgk0l1ca]  .row-acts .btn i { font-size: 12.5px; }
/* _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; }
.afl-openrow[b-gh5lsim1h3] { cursor:pointer; }
.afl-openrow:focus-visible[b-gh5lsim1h3] { outline:2px solid var(--p,#2563eb); outline-offset:-2px; }

.afl-detail-layout[b-gh5lsim1h3] { display:grid; grid-template-columns:minmax(0,1fr) 1px minmax(300px,.72fr); gap:20px; align-items:stretch; }
.afl-detail-info[b-gh5lsim1h3] { min-width:0; }
.afl-detail-divider[b-gh5lsim1h3] { background:var(--b,#e4e8ef); }
.afl-detail-head[b-gh5lsim1h3] { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.afl-detail-grid[b-gh5lsim1h3] { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 16px; }
.afl-detail-grid > div[b-gh5lsim1h3] { display:flex; flex-direction:column; gap:3px; padding:8px 0; border-bottom:1px solid var(--b,#e4e8ef); min-width:0; }
.afl-detail-grid label[b-gh5lsim1h3], .afl-detail-reason label[b-gh5lsim1h3] { color:var(--tm,#64748b); font-size:11px; }
.afl-detail-grid span[b-gh5lsim1h3], .afl-detail-reason span[b-gh5lsim1h3] { color:var(--t,#1e293b); overflow-wrap:anywhere; }
.afl-detail-reason[b-gh5lsim1h3] { margin-top:12px; padding:10px 12px; display:flex; flex-direction:column; gap:4px; border-radius:8px; background:#fff1f2; }

.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; }
    .afl-detail-layout[b-gh5lsim1h3] { grid-template-columns:1fr; }
    .afl-detail-divider[b-gh5lsim1h3] { height:1px; }
    .afl-detail-grid[b-gh5lsim1h3] { grid-template-columns:1fr; }
}
/* _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ừ trang sang.
   ⚠️ Khi liệt kê class bằng wildcard trong comment, đừng để dấu sao đứng liền trước dấu gạch
   chéo: cặp ký tự đó chính là dấu ĐÓNG comment, nó cắt comment giữa chừng và rule
   .detail-section ngay bên dưới bị nuốt theo (đúng lỗi đã từng xảy ra ở file này). */
.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;
}

/* Khung cuộn riêng cho bảng: cột phải của popup hẹp (flex:2) mà bảng có tới 6 cột, nên bề rộng
   tối thiểu của bảng vượt khung. Trước đây .dbot-r chỉ có overflow-y → phần thừa TRÀN ra ngoài
   và đẩy vỡ hàng nút Thêm/Lưu ngay khi thêm một dòng phụ phí. */
.fee-tblwrap[b-zbqur7rwbd] { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 6px; }
.fee-tbl[b-zbqur7rwbd] { width: 100%; min-width: 380px; border-collapse: collapse; font-size: 12.5px; }
/* Tên phí dài thì XUỐNG DÒNG thay vì kéo dài bảng; số và badge giữ nguyên một dòng. */
.fee-tbl td:first-child[b-zbqur7rwbd] { word-break: break-word; }
.fee-tbl .ta-r[b-zbqur7rwbd], .fee-tbl .bdg[b-zbqur7rwbd] { white-space: nowrap; }
.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; }
/* Dòng "chưa có dòng nào" nằm TRONG bảng — bảng luôn hiện để popup giữ đủ 2 khối (lịch sử | phụ phí). */
.fee-empty[b-zbqur7rwbd] { text-align: center; color: var(--tm, #64748b); padding: 10px 6px; }
/* Dòng tổng trong tfoot (mockup). */
.fee-tbl tfoot td[b-zbqur7rwbd] { padding: 6px; border-top: 2px solid #e0e7ff; border-bottom: none; font-weight: 700; }
.fee-sum[b-zbqur7rwbd] { color: var(--p, #2563eb); white-space: nowrap; }
.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-add[b-zbqur7rwbd] { margin-top: 10px; border-top: 1px dashed #e4e8ef; padding-top: 10px; }
/* Flex item mặc định min-width:auto → KHÔNG co dưới bề rộng nội dung, ô Đơn vị bị đẩy khỏi khung
   và cả popup sinh thanh cuộn ngang. min-width:0 mới cho co lại. */
.fee-add-row[b-zbqur7rwbd] { display: flex; gap: 8px; align-items: flex-end; margin-top: 8px; }
.fee-add-row .fg[b-zbqur7rwbd] { min-width: 0; }
.fee-add-row .fi[b-zbqur7rwbd] { width: 100%; min-width: 0; }
/* Thêm + Lưu luôn trên MỘT hàng (nowrap): trước để mặc định nên khi khung hẹp lại
   là nút thứ hai rơi xuống dòng dưới. */
.fee-add-btns[b-zbqur7rwbd] { display: flex; flex-wrap: nowrap; 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; }
    /* Thêm/Lưu vẫn MỘT hàng ở mobile: hai nhãn đều ngắn, mỗi nút ~50% bề ngang là quá đủ,
       và popup vốn đã chật chiều dọc. Chỉ nâng chiều cao cho đủ vùng chạm. */
    .fee-add-btns .btn[b-zbqur7rwbd] { min-height: 40px; }

    /* 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/BangKeDoiNhatPanel.razor.rz.scp.css */
/* Bảng "Phí dôi nhật" — bám hình thức bảng kê chính (viền mảnh, header xám, số canh phải).
   Scoped: chỉ áp cho component này. */

.dn-wrap[b-4unl94g3y4] {
    margin-top: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.dn-head[b-4unl94g3y4] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.dn-title[b-4unl94g3y4] {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}

.dn-title i[b-4unl94g3y4] { color: #b45309; margin-right: 6px; }

.dn-count[b-4unl94g3y4] {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    background: #e2e8f0;
    border-radius: 999px;
    padding: 2px 10px;
}

/* Bảng rộng phải cuộn TRONG khối này — trang không được cuộn ngang theo. */
.dn-scroll[b-4unl94g3y4] { overflow-x: auto; }

.dn-tbl[b-4unl94g3y4] {
    width: 100%;
    min-width: 1500px;
    border-collapse: collapse;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.dn-tbl th[b-4unl94g3y4],
.dn-tbl td[b-4unl94g3y4] {
    border-bottom: 1px solid #eef2f7;
    padding: 7px 10px;
    white-space: nowrap;
}

.dn-tbl thead th[b-4unl94g3y4] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f1f5f9;
    color: #334155;
    font-weight: 600;
    text-align: left;
    white-space: normal;      /* tiêu đề 2 dòng của cột ngày đến cảng */
    line-height: 1.3;
    vertical-align: bottom;
}

.dn-tbl tbody tr:hover[b-4unl94g3y4] { background: #f8fafc; }

.dn-tbl tfoot td[b-4unl94g3y4] {
    background: #f8fafc;
    font-weight: 700;
    border-top: 2px solid #e2e8f0;
    border-bottom: none;
}

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

/* Hai cột kết luận (ngày còn lại + thành tiền) — thứ kế toán đọc trước. */
.dn-hl[b-4unl94g3y4] { font-weight: 700; color: #0f172a; }

/* Mã chuyến — chuỗi 13 chữ số. Cùng bảng có nhiều mã chỉ khác nhau vài ký tự cuối, nên dùng chữ số
   đều bề ngang (tabular-nums) để mắt dò theo CỘT, và cấm ngắt dòng để mã không bị bẻ làm đôi. */
.dn-ma[b-4unl94g3y4] { white-space: nowrap; font-variant-numeric: tabular-nums; }

.dn-note[b-4unl94g3y4] {
    margin: 0;
    padding: 9px 14px;
    font-size: 12.5px;
    line-height: 1.5;
    border-top: 1px solid #e2e8f0;
}

.dn-note i[b-4unl94g3y4] { margin-right: 6px; }


.dn-skip[b-4unl94g3y4] { background: #f8fafc; color: #475569; }

.dn-skip ul[b-4unl94g3y4] { margin: 6px 0 0; padding-left: 26px; }

.dn-skip li[b-4unl94g3y4] { margin: 2px 0; }

@media (max-width: 768px) {
    .dn-head[b-4unl94g3y4] { padding: 9px 10px; }
    .dn-note[b-4unl94g3y4] { padding: 8px 10px; }
}

/* Nhãn đơn vị in ngay sau đơn giá — hai đơn vị cho hai công thức, không gộp vào tiêu đề cột được. */
.dn-dv[b-4unl94g3y4] {
    margin-left: 4px;
    font-size: 11.5px;
    font-weight: 500;
    color: #64748b;
}
/* _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; }
/* Nội dung thao tác nay là dòng phụ dưới Hành động (cột "Nội dung" đã nhường chỗ cho 3 cột diff). */
.bklsu-note[b-otqaaf6bbp] { color: var(--mut, #6b7280); font-size: 11px; margin-top: 2px; }
/* Giá trị cũ / mới: canh phải + số đều nét để so hai cột bằng mắt. */
.bklsu-val[b-otqaaf6bbp] { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Dòng "chưa có" nằm TRONG bảng — bảng luôn hiện để popup giữ đủ 2 khối (lịch sử | phụ phí). */
.bklsu-empty[b-otqaaf6bbp] { text-align: center; color: var(--mut, #6b7280); padding: 12px 6px; }

/* 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; }
}

/* ---- Accordion (mockup BA `.log-accordion-*`) — chỉ áp khi Collapsible ---- */
.bklsu-acc[b-otqaaf6bbp] { margin-top: 10px; border-top: none; padding-top: 0; }

.log-accordion-head[b-otqaaf6bbp] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #eef3fa;
    border: 1px solid #cde0f0;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 700;
    color: #1e3a5f;
    margin-bottom: 6px;
    user-select: none;
}
.log-accordion-head:hover[b-otqaaf6bbp] { background: #e0e7ff; }
.log-accordion-head:focus-visible[b-otqaaf6bbp] { outline: none; box-shadow: var(--focus-ring); }

.log-accordion-arrow[b-otqaaf6bbp] { transition: transform .15s; display: inline-flex; flex: 0 0 auto; }
.log-accordion-head.collapsed .log-accordion-arrow[b-otqaaf6bbp] { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { .log-accordion-arrow[b-otqaaf6bbp] { transition: none; } }

.log-accordion-body[b-otqaaf6bbp] { margin-bottom: 12px; }
.log-accordion-body.collapsed[b-otqaaf6bbp] { display: none; }
/* _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; }
}

/* "nhiều mức" thay cho một con số đơn lẻ — chữ thường, nhạt hơn số tiền để không bị đọc nhầm
   thành một giá trị. Nghiêng để phân biệt ngay với các ô số cùng cột. */
.sum-multi[b-wafrtfhoyd] { font-style: italic; color: #7A8698; font-size: 12px; white-space: nowrap; }
/* _content/Admin_KA_Transport_Pricing/Components/Shared/ChuaCoNguon.razor.rz.scp.css */
.ccn[b-4603wuoj7p] { display: inline-flex; align-items: center; gap: 4px; color: #7A8698; white-space: nowrap; cursor: help; }
.ccn i[b-4603wuoj7p] { font-size: 10px; opacity: .75; }
/* _content/Admin_KA_Transport_Pricing/Components/Shared/CongThucKhoi.razor.rz.scp.css */
/* Sơ đồ khối công thức — dạng flowchart dọc: nút bắt đầu → kim cương → 2 cột → hợp nhánh → nút kết.
   Mọi đường nối vẽ bằng CSS (không ảnh, không thư viện JS). */

.ctk[b-i3wj083058] {
    display: flex; flex-direction: column; align-items: center;
    /* `safe` = khi nội dung RỘNG HƠN khung thì thôi canh giữa, dồn về mép đầu. Không có nó,
       phần tràn nằm ở toạ độ ÂM — cuộn ngang không với tới được và mép trái bị cắt cụt
       (đo trên màn thật: "Chế độ 1" hiện thành "hế độ 1").
       Dòng `center` phía trên là dự phòng cho trình duyệt chưa hiểu từ khoá `safe`. */
    align-items: safe center;
    font-size: 12px; line-height: 1.45; color: #334155;
}

/* Cuộn NGANG khi card hẹp hơn sơ đồ: thà kéo ngang cả sơ đồ còn hơn để hai cột bị bóp
   đến mức công thức vỡ dòng thành mấy khúc. Cuộn ở lớp NGOÀI, canh giữa ở lớp trong. */
.ctk-cuon[b-i3wj083058] { overflow-x: auto; width: 100%; }
/* 880px: bước đầu rẽ 3 nhánh, nhánh chính còn rẽ tiếp 2 tầng nữa ⇒ cột trong cùng chỉ còn
   ~1/8 bề ngang. Hẹp hơn nữa thì mỗi khối vỡ thành 4–5 dòng. */
.ctk-goc[b-i3wj083058] { min-width: 880px; padding: 4px 2px 2px; }

/* ===== Khối ===== */

/* Tiêu đề nhánh — xám trung tính, KHÔNG tô màu riêng: để màu chỉ còn mang một nghĩa duy nhất
   (xanh = công thức, hổ phách = tiền). Trước đó 5 màu tranh nhau, mắt không biết bám vào đâu. */
.ctk-t[b-i3wj083058] {
    background: #f1f5f9; border: 1px solid #e2e8f0; color: #0f172a;
    border-radius: 6px; padding: 6px 12px; font-weight: 600; text-align: center; max-width: 100%;
}

/* Mọi khối trong CÙNG một cột kéo bằng nhau — cột so le trông như lỗi dựng hình.
   Nội dung nhánh phải giãn hết bề ngang cột trước, nếu không % của hình thoi lại quy chiếu
   về một bề rộng co theo nội dung. */
.ctk-br > .ctk[b-i3wj083058] { align-self: stretch; width: 100%; }
.ctk-br .ctk-t[b-i3wj083058], .ctk-br .ctk-l[b-i3wj083058], .ctk-br .ctk-ket[b-i3wj083058] { align-self: stretch; }

/* Nút bắt đầu — bo tròn để phân biệt ngay với khối lệnh.
   KHÔNG có nút kết: mỗi nhánh tự kết bằng KẾT QUẢ của chính nó, dồn hết vào một nút chung
   thì đúng cái thông tin người đọc cần (nhánh này ra tiền thế nào) lại bị bỏ trống. */
.ctk-nut[b-i3wj083058] { background: #1e293b; border-color: #1e293b; color: #fff; border-radius: 999px; padding: 6px 16px; }

/* Khối công thức — monospace để dấu × và ngoặc thẳng hàng giữa các dòng.
   Xuống dòng CHỈ ở khoảng trắng: cắt ngang "ĐG(A→B)" thì ký hiệu bị chẻ đôi, đọc ra nghĩa khác. */
.ctk-l[b-i3wj083058], .ctk-ket[b-i3wj083058] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px; text-align: center; max-width: 100%;
    white-space: pre-wrap; word-break: normal; overflow-wrap: normal;
    border-radius: 4px; padding: 6px 10px;
}

.ctk-l[b-i3wj083058] { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a; }

/* Kết cục KHÔNG có công thức — người dùng phải tự chỉ định. Tím, khớp badge "Chỉ định"
   ở cột đơn giá của bảng kê để hai nơi nói cùng một thứ bằng cùng một màu. */
.ctk-cd[b-i3wj083058] { background: #f5f3ff; border-color: #ddd6fe; color: #5b21b6; }

/* Tầng rẽ nhánh THỨ HAI (miền có so tuyến sau): cột chỉ còn ~1/4 bề ngang sơ đồ, giữ nguyên
   cỡ chữ thì mỗi khối vỡ thành 3–4 dòng. Cột vẫn chia đôi đều để thanh nối neo đúng 25%/75%. */
.ctk-br .ctk-br .ctk-l[b-i3wj083058],
.ctk-br .ctk-br .ctk-t[b-i3wj083058] { font-size: 11px; padding: 5px 7px; }
.ctk-br .ctk-br .ctk-qi[b-i3wj083058] { font-size: 10.5px; }
.ctk-br .ctk-br .ctk-q[b-i3wj083058] { padding: 6px 10px; }
/* Tầng thứ BA (miền có so tuyến sau, dưới nhánh 2 điểm): hẹp nhất. */
.ctk-br .ctk-br .ctk-br .ctk-l[b-i3wj083058] { font-size: 10.5px; padding: 4px 6px; }

/* Khối SAU điểm hợp nhánh — áp cho cả hai đường, tô khác để không bị đọc nhầm là của nhánh cuối. */
.ctk-ket[b-i3wj083058] { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-weight: 600; }

/* ===== Nút rẽ nhánh =====
   Hộp viền đậm, KHÔNG phải hình thoi: hình thoi muốn chứa được chữ thì phải rộng gấp ~2 lần và
   cao gấp ~3 lần cái hộp cùng nội dung (chữ chỉ nằm vừa hình chữ nhật nội tiếp) — với sơ đồ
   lồng tới 3 tầng thì phần rỗng đó ăn hết chỗ của chính công thức. */
.ctk-q[b-i3wj083058] {
    max-width: 100%; background: #fff; border: 2px solid #475569; border-radius: 8px;
    padding: 7px 14px; text-align: center;
}
.ctk-qi[b-i3wj083058] { font-weight: 700; font-size: 11.5px; color: #0f172a; }

/* ===== Đường nối ===== */

/* Đoạn thẳng đứng có mũi tên ở cuối. */
.ctk-noi[b-i3wj083058] { flex: none; width: 2px; height: 20px; background: #94a3b8; position: relative; }
.ctk-noi[b-i3wj083058]::after {
    content: ""; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
    border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid #94a3b8;
}

/* Các cột song song. Số nhánh KHÔNG cố định là 2 (bước đầu có 3), nên thanh ngang phải do
   TỪNG CỘT tự vẽ nửa của mình — neo theo % của cả hàng (25%/75%) chỉ đúng khi có đúng 2 cột,
   và cũng sai ngay khi các cột rộng khác nhau. */
.ctk-nhanh[b-i3wj083058] {
    list-style: none; margin: 0; padding: 0; width: 100%;
    display: flex; align-items: stretch; justify-content: center;
    --khe: 16px; gap: var(--khe);
}

.ctk-br[b-i3wj083058] {
    flex: 1 1 0; min-width: 0; position: relative;
    display: flex; flex-direction: column; align-items: center;
    /* Cuống dọc từ thanh ngang xuống đầu nhánh — vẽ bằng nền để chừa cả hai pseudo cho
       nửa thanh ngang trên và nửa dưới. */
    padding-top: 22px;
    background: linear-gradient(#94a3b8, #94a3b8) center top / 2px 22px no-repeat;
}
/* Nhánh còn rẽ tiếp gánh cả cây con ⇒ rộng gấp đôi nhánh cụt. */
.ctk-br-chinh[b-i3wj083058] { flex: 2 1 0; }

/* Nửa thanh ngang PHÍA TRÊN (rẽ ra) và PHÍA DƯỚI (hợp lại), nối tới giữa khe hai cột. */
.ctk-br[b-i3wj083058]::before, .ctk-br[b-i3wj083058]::after {
    content: ""; position: absolute; height: 2px; background: #94a3b8;
}
.ctk-br[b-i3wj083058]::before { top: 0; }
.ctk-br[b-i3wj083058]::after { bottom: 0; }
.ctk-br:first-child[b-i3wj083058]::before, .ctk-br:first-child[b-i3wj083058]::after { left: 50%; right: calc(var(--khe) / -2); }
.ctk-br:last-child[b-i3wj083058]::before, .ctk-br:last-child[b-i3wj083058]::after { left: calc(var(--khe) / -2); right: 50%; }
.ctk-br:not(:first-child):not(:last-child)[b-i3wj083058]::before,
.ctk-br:not(:first-child):not(:last-child)[b-i3wj083058]::after { left: calc(var(--khe) / -2); right: calc(var(--khe) / -2); }

/* Kéo dài cuống xuống đáy cột (các nhánh cao thấp khác nhau). */
.ctk-keo[b-i3wj083058] { flex: 1 1 auto; min-height: 12px; width: 2px; background: #94a3b8; }

/* Điểm hợp nhánh: chấm tròn + đường dọc chạy tiếp xuống khối sau.
   Thanh ngang do các cột phía trên tự vẽ (::after). */
.ctk-hop[b-i3wj083058] {
    flex: none; width: 100%; height: 26px; position: relative;
    background: linear-gradient(#94a3b8, #94a3b8) center / 2px 100% no-repeat;
}
.ctk-hop[b-i3wj083058]::after {
    content: ""; position: absolute; top: -5px; left: 50%; transform: translateX(-50%);
    width: 10px; height: 10px; border-radius: 50%; background: #e2e8f0; border: 2px solid #94a3b8;
}

/* Chuỗi MỘT nhánh: không còn cột song song nên bề ngang tối thiểu là thừa. */
.ctk-gon[b-i3wj083058] { min-width: 0; }
/* Một nhánh duy nhất thì không có gì để nối ngang — mà `:first-child` và `:last-child` cùng
   khớp nên hai luật vẽ nửa-thanh chồng nhau, ra một vạch thò sang trái. */
.ctk-nhanh > li:only-child[b-i3wj083058]::before,
.ctk-nhanh > li:only-child[b-i3wj083058]::after { display: none; }

/* ===== Đường mà chuyến đang xem đã đi =====
   Tô nền + viền cả cột thay vì chỉ đánh dấu cái nhãn: người đọc cần thấy TOÀN BỘ đường,
   không phải đi dò từng mắt xích. */
/* Giữ LẠI cuống nối: `.ctk-br` vẽ nó bằng background shorthand, đặt màu nền trơn đè lên là
   mất cuống. Xếp gradient thành lớp trên, màu nền thành lớp dưới. */
.ctk-br-didi[b-i3wj083058] {
    background: linear-gradient(#94a3b8, #94a3b8) center top / 2px 22px no-repeat, #ecfdf5;
    border-radius: 8px; box-shadow: inset 0 0 0 2px #6ee7b7;
}
.ctk-didi[b-i3wj083058] {
    margin-bottom: 6px; padding: 1px 8px; border-radius: 999px;
    font-size: 10px; font-weight: 700; white-space: nowrap;
    background: #047857; color: #fff;
}

/* ===== Nhãn nhánh (True / False) ===== */
.ctk-lbl[b-i3wj083058] {
    margin-bottom: 8px; padding: 1px 9px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .2px; white-space: nowrap;
    background: #f1f5f9; border: 1px solid #e2e8f0; color: #475569;
}
.ctk-lbl-y[b-i3wj083058] { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.ctk-lbl-n[b-i3wj083058] { background: #fef3c7; border-color: #fde68a; color: #92400e; }

@media (max-width: 768px) {
    .ctk-goc[b-i3wj083058] { min-width: 760px; }
    .ctk-nhanh[b-i3wj083058] { --khe: 10px; }
}
/* _content/Admin_KA_Transport_Pricing/Components/Shared/DonGiaChiDinhCell.razor.rz.scp.css */
/* Ô "Đơn giá chỉ định" trong tab Chuyến chuyển điểm (dùng chung 4 trang bảng kê). */
.dgcd[b-ciu8fb3t8u] { display: inline-flex; align-items: center; }

.dgcd-val[b-ciu8fb3t8u],
.dgcd-add[b-ciu8fb3t8u] {
    appearance: none; border: 1px solid transparent; background: transparent;
    font: inherit; cursor: pointer; border-radius: 6px; padding: 2px 6px;
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.dgcd-val[b-ciu8fb3t8u] { font-weight: 600; color: #1e293b; }
.dgcd-val:hover:not(:disabled)[b-ciu8fb3t8u] { background: #f5f3ff; border-color: #ddd6fe; }
.dgcd-val:disabled[b-ciu8fb3t8u] { cursor: default; }

.dgcd-add[b-ciu8fb3t8u] { color: #64748b; font-size: 12px; }
.dgcd-add:hover[b-ciu8fb3t8u] { background: #eef2ff; color: var(--p, #1a5fb4); border-color: #c7d2fe; }
.dgcd-add i[b-ciu8fb3t8u] { font-size: 10px; }

.dgcd-val:focus-visible[b-ciu8fb3t8u],
.dgcd-add:focus-visible[b-ciu8fb3t8u] { outline: none; box-shadow: var(--focus-ring, 0 0 0 2px rgba(26,95,180,.35)); }

.dgcd-empty[b-ciu8fb3t8u] { color: #94a3b8; }

.dgcd-loading[b-ciu8fb3t8u] { font-size: 12.5px; color: #64748b; padding: 6px 0; }

/* Đơn giá + đơn vị là số ĐỌC LẠI của dòng giá đã chọn, không phải ô nhập.
   Phải trông khác ô nhập thật, nếu không người dùng bấm vào gõ rồi tưởng đã sửa được giá. */
.dgcd-ro[b-ciu8fb3t8u] { background: #f8fafc; color: #475569; cursor: default; }
.dgcd-ro[b-ciu8fb3t8u]::placeholder { color: #94a3b8; font-style: italic; }

.dgcd-err[b-ciu8fb3t8u] {
    display: flex; gap: 7px; align-items: center; margin-top: 10px;
    background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px;
    padding: 8px 11px; font-size: 12.5px; color: #b91c1c;
}

@media (max-width: 768px) {
    /* 16px chống zoom iOS khi focus input (quy ước chung của repo). */
    .dgcd-err[b-ciu8fb3t8u] { font-size: 12px; }
}
/* _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/ETransPopover.razor.rz.scp.css */
/* Popover giải thích ô tiền — xem chú thích trong ETransPopover.razor.

   Bọc `inline-flex` chứ không `block`: ô tiền căn phải, một thẻ block sẽ phá căn lề của cột. */
.epop[b-6fnoeomup1] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    outline: none;
    cursor: help;
    /* Gạch chân chấm — dấu hiệu duy nhất cho biết ô này bấm/rê được. Không dùng icon: cột tiền đã
       chật, thêm icon vào mọi ô là đẩy bảng rộng thêm vài trăm px. */
    border-bottom: 1px dotted var(--tl, #94a3b8);
}

.epop:focus-visible[b-6fnoeomup1] {
    outline: 2px solid var(--p, #2563eb);
    outline-offset: 2px;
}

/* ⭐ `position: fixed` — thoát khung cuộn của lưới.
   Toạ độ do wwwroot/js/etrans-popover.js đặt (cùng khuôn với etrans-select.js). Trước đây panel
   là `absolute` trong ô, nên `overflow: auto` của .bkx-wrap xén nó: bảng chỉ có MỘT dòng thì ô
   Thành tiền gần như luôn bị cắt — đúng lúc cần đọc nhất. */
.epop-panel[b-6fnoeomup1] {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1200;   /* trên khung cuộn và thanh công cụ, dưới modal */
    display: none;
    min-width: 220px;
    max-width: 460px;
    padding: 8px 10px;
    border-radius: 6px;
    background: #1e293b;
    color: #f1f5f9;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.55;
    /* pre-line: GIỮ xuống dòng do Text truyền vào, vẫn gộp khoảng trắng thừa và tự xuống
       dòng khi tràn. Text một dòng (mọi popover cột tiền) không đổi gì — chúng không xuống dòng. */
    white-space: pre-line;
    text-align: left;
    box-shadow: 0 6px 20px rgba(15, 23, 42, .28);

    /* ⭐ CHỌN ĐƯỢC CHỮ để copy. Bản đầu để `pointer-events: none` cho khỏi chắn chuột — hệ quả là
       không bôi đen, không copy được, và rê chuột sang panel thì nó biến mất. Nay panel nhận chuột,
       nhờ vậy `.epop:hover` VẪN đúng khi con trỏ nằm trên panel (hover lan lên tổ tiên DOM, không
       phụ thuộc vị trí vẽ) ⇒ panel đứng yên để bôi đen. */
    pointer-events: auto;
    user-select: text;
    -webkit-user-select: text;
}

.epop:hover .epop-panel[b-6fnoeomup1],
.epop:focus-within .epop-panel[b-6fnoeomup1] { display: block; }

@media (max-width: 768px) {
    /* Mobile: panel bám mép phải dễ tràn — JS đã kẹp trong viewport, chỉ cần nới trần bề rộng. */
    .epop-panel[b-6fnoeomup1] {
        min-width: 0;
        max-width: min(88vw, 460px);
    }
}
/* _content/Admin_KA_Transport_Pricing/Components/Shared/GiaiTrinhCuocPanel.razor.rz.scp.css */
/* Giải trình đơn giá VC — panel dùng trong modal chi tiết chuyến.
   ⚠️ CSS phải nằm ở ĐÂY, không phải trong *.razor.css của trang: ETransModal render NGOÀI cây DOM
   của trang nên CSS scoped của trang không với tới (cùng bẫy đã ghi ở AdhocFeePanel/CongThucKhoi). */

.gtc[b-zbcf4ep35n] { border: 1px solid var(--b, #e4e8ef); border-radius: 10px; background: #fff; margin-bottom: 10px; }

.gtc-head[b-zbcf4ep35n] {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    padding: 8px 11px; font-size: 13px; font-weight: 600; color: #1e293b; user-select: none;
}
.gtc-head:hover[b-zbcf4ep35n] { background: #f8fafc; }
.gtc-head:focus-visible[b-zbcf4ep35n] { outline: 2px solid var(--p, #2563eb); outline-offset: -2px; }
.gtc-head-t[b-zbcf4ep35n] { flex: 1 1 auto; }
.gtc-head-gia[b-zbcf4ep35n] { font-weight: 700; color: var(--p, #2563eb); }

.gtc-arrow[b-zbcf4ep35n] { flex: 0 0 auto; color: #94a3b8; transition: transform .15s ease; }
.gtc-arrow-open[b-zbcf4ep35n] { transform: rotate(90deg); }

.gtc-body[b-zbcf4ep35n] { padding: 0 11px 11px; }

.gtc-empty[b-zbcf4ep35n] { padding: 10px 0; font-size: 12.5px; color: #64748b; }

.gtc-sec[b-zbcf4ep35n] {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: #94a3b8; margin: 10px 0 5px;
}

.gtc-warn[b-zbcf4ep35n] {
    display: flex; gap: 8px; align-items: flex-start;
    background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px;
    padding: 8px 11px; margin: 0 0 8px; font-size: 12.5px; color: #92400e; line-height: 1.5;
}
.gtc-warn i[b-zbcf4ep35n] { margin-top: 2px; color: #d97706; }
.gtc-warn-err[b-zbcf4ep35n] { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.gtc-warn-err i[b-zbcf4ep35n] { color: #dc2626; }

/* ---- Dữ liệu chuyến ---- */
.gtc-chuyen[b-zbcf4ep35n] { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 12px; }
.gtc-ct[b-zbcf4ep35n] { display: flex; flex-direction: column; gap: 1px; }
.gtc-ct-l[b-zbcf4ep35n] { font-size: 11px; color: #94a3b8; }
.gtc-ct-v[b-zbcf4ep35n] { font-size: 12.5px; color: #1e293b; font-weight: 600; }

/* ---- Một dòng giá ---- */
.gtc-dong[b-zbcf4ep35n] { border: 1px solid #e2e8f0; border-radius: 9px; margin-bottom: 6px; overflow: hidden; }
/* Dòng THẮNG tô khác hẳn: đây là dòng sinh ra con số trên bảng kê. */
.gtc-dong-thang[b-zbcf4ep35n] { border-color: #bfdbfe; background: #f8fbff; }

.gtc-dong-h[b-zbcf4ep35n] {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 7px 10px; font-size: 12.5px; color: #334155;
}
.gtc-dong-h-btn[b-zbcf4ep35n] { cursor: pointer; user-select: none; }
.gtc-dong-h-btn:hover[b-zbcf4ep35n] { background: #f8fafc; }
.gtc-dong-h-btn:focus-visible[b-zbcf4ep35n] { outline: 2px solid var(--p, #2563eb); outline-offset: -2px; }

.gtc-id[b-zbcf4ep35n] { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; color: #64748b; }
.gtc-gia[b-zbcf4ep35n] { font-weight: 700; color: #1e293b; }
.gtc-dv[b-zbcf4ep35n], .gtc-tuyen[b-zbcf4ep35n], .gtc-hl[b-zbcf4ep35n], .gtc-ct-code[b-zbcf4ep35n] { font-size: 11.5px; color: #64748b; }
.gtc-diem[b-zbcf4ep35n] { margin-left: auto; font-weight: 700; color: #475569; }
.gtc-diem-thang[b-zbcf4ep35n] { color: var(--p, #2563eb); }
.gtc-lydo-gon[b-zbcf4ep35n] {
    margin-left: auto; font-size: 11.5px; color: #b91c1c;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46%;
}

.gtc-dong-b[b-zbcf4ep35n] { border-top: 1px dashed #e2e8f0; padding: 8px 10px; }

.gtc-lydo[b-zbcf4ep35n] {
    display: flex; gap: 6px; align-items: center; margin-bottom: 6px;
    font-size: 12px; color: #b91c1c;
}

/* ---- Bảng tiêu chí ---- */
.gtc-tbl[b-zbcf4ep35n] { width: 100%; border-collapse: collapse; font-size: 12px; }
.gtc-tbl th[b-zbcf4ep35n] {
    text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
    color: #94a3b8; font-weight: 700; padding: 3px 6px; border-bottom: 1px solid #e2e8f0;
}
.gtc-tbl td[b-zbcf4ep35n] { padding: 4px 6px; border-bottom: 1px dashed #eef2f7; color: #334155; vertical-align: top; }
.gtc-tbl tfoot td[b-zbcf4ep35n] { border-bottom: 0; border-top: 1px solid #e2e8f0; font-weight: 700; color: #1e293b; }
.gtc-tbl .ta-c[b-zbcf4ep35n] { text-align: center; }

/* Dòng trượt tô đỏ nhạt — mắt tìm ngay chỗ sai thay vì đọc hết bảng. */
.gtc-truot td[b-zbcf4ep35n] { background: #fef2f2; }
.gtc-x[b-zbcf4ep35n] { color: #dc2626; font-weight: 700; }
.gtc-cong[b-zbcf4ep35n] { color: var(--p, #2563eb); }
.gtc-zero[b-zbcf4ep35n] { color: #cbd5e1; cursor: help; }

.gtc-cot[b-zbcf4ep35n] {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10.5px; color: #94a3b8;
}

.gtc-note[b-zbcf4ep35n] { font-size: 11.5px; color: #64748b; margin-top: 8px; }

/* ---- ID/đơn giá bấm được → popup chi tiết dòng giá ---- */
.gtc-nut-id[b-zbcf4ep35n] {
    display: inline-flex; align-items: center; gap: 8px;
    background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit;
    border-bottom: 1px dashed transparent;
}
.gtc-nut-id:hover[b-zbcf4ep35n] { border-bottom-color: var(--p, #2563eb); }
.gtc-nut-id:hover .gtc-id[b-zbcf4ep35n] { color: var(--p, #2563eb); }
.gtc-nut-id:focus-visible[b-zbcf4ep35n] { outline: 2px solid var(--p, #2563eb); outline-offset: 2px; border-radius: 4px; }

/* ---- Popup chi tiết dòng giá (modal lồng) ---- */
.gtc-pop[b-zbcf4ep35n] { font-size: 12.5px; color: #334155; }
.gtc-pop-top[b-zbcf4ep35n] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.gtc-pop-gia[b-zbcf4ep35n] { font-size: 17px; font-weight: 700; color: #1e293b; }
/* _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/PhuPhiQuyDoiTab.razor.rz.scp.css */
/* Tab "Phụ phí quy đổi" — bố cục theo mockup BA (bang-ke-xetai.html, data-tab="quydoi"):
   bộ lọc trên cùng, danh sách bên trái, panel phân bổ bên phải. */

.ppqd[b-on6h4bwp77] { display: flex; flex-direction: column; gap: 12px; }

/* ---- bộ lọc: KHUÔN DÙNG CHUNG với các tab kia của trang bảng kê (31/08/2026, khung mới 03/09/2026) ----

   Khung thu/mở (.filter-bar / .filter-bar-head / .filter-bar-body) là rule TOÀN CỤC trong
   wwwroot/etrans-ui.css — cố ý để toàn cục vì Blazor cô lập CSS theo component: rule khai trong
   `BangKe*.razor.css` không với tới markup do component này render. Bố cục bên trong thân
   (.fbar-row / .fbar-actions) thì vẫn phải khai LẠI ở đây, y hệt các trang.

   Trước 31/08/2026 tab này có khuôn riêng: tiêu đề "Bộ lọc" là chữ tĩnh (`.ppqd-fhead`) nên khối
   lọc KHÔNG gập được, và hai nút nằm trong một `.fg` giả (`.ppqd-fbtn` + nhãn `&nbsp;`) thay vì
   `.fbar-actions`. Ba class đó đã XOÁ HẲN — để lại là mời người sau dùng nhầm. */
.ppqd-filters[b-on6h4bwp77] { display: block; }
/* `.ppqd` là flex COLUMN có gap 12px — bỏ margin dưới của khung để không thành 24px, lệch các tab kia. */
.ppqd-filters .filter-bar[b-on6h4bwp77] { margin-bottom: 0; }

/* Hai lớp để thắng `.fbar` toàn cục (nó là `display:flex`) dù thứ tự nạp file thế nào.
   Viền/nền/padding do .filter-bar (khung ngoài) lo — thân KHÔNG vẽ khung nữa. */
.fbar.ppqd-fbar[b-on6h4bwp77] { display: block; }
/* `flex-wrap` để 6 ô lọc + hàng nút tự rớt dòng ở màn hẹp thay vì bị bóp mất chữ. Ở bề ngang
   thường gặp (~1260px) cả 6 ô + nút vẫn nằm gọn MỘT hàng, đúng mockup. */
.fbar.ppqd-fbar .fbar-row[b-on6h4bwp77] { display: flex; align-items: flex-end; gap: 10px 12px; flex-wrap: wrap; }
.fbar.ppqd-fbar .fbar-row + .fbar-row[b-on6h4bwp77] { margin-top: 10px; }
/* Sàn 132px: các nhãn ở đây đều ngắn nên 132px vẫn đọc được, và đủ chỗ cho 6 ô một hàng. */
.fbar.ppqd-fbar .fbar-row > .fg[b-on6h4bwp77] { flex: 1 1 132px; min-width: 132px; }
.fbar.ppqd-fbar .fbar-actions[b-on6h4bwp77] {
    display: flex; flex: 0 0 auto; gap: 8px;
    justify-content: flex-end; align-items: flex-end; flex-wrap: wrap;
}
/* Nhãn 1 dòng: nhãn dài tự xuống dòng sẽ đội ô đó cao hơn các ô cùng hàng. */
.fbar.ppqd-fbar .flbl[b-on6h4bwp77] {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: 12px; font-weight: 600; color: #3D4757;
}
.fbar.ppqd-fbar .fg[b-on6h4bwp77] { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
/* Ô nhập và ô chọn cùng chiều cao/bề ngang — SearchableSelect tự dựng nút riêng nên phải ép. */
.fbar.ppqd-fbar .fi[b-on6h4bwp77],
.fbar.ppqd-fbar .fs[b-on6h4bwp77] { width: 100%; }

/* ---- thân: XẾP DỌC theo mockup (bảng full width → panel → lịch sử) ----
   Trước đây panel nằm cột phải 340px cho khỏi cuộn, nhưng nó bóp bảng còn ~60% bề ngang nên phải
   cắt từ 16 cột xuống 11. Mockup ưu tiên bảng; panel chịu cuộn. */
.ppqd-body[b-on6h4bwp77] { display: flex; flex-direction: column; gap: 16px; }
.ppqd-list[b-on6h4bwp77] { min-width: 0; display: flex; flex-direction: column; gap: 10px; }

/* Ô đã khoá (đơn giá đã chốt · chuyến đã duyệt giá): xám + ổ khoá. CỐ Ý không ẩn dòng —
   ẩn thì người dùng thấy ca "biến mất" mà không hiểu vì sao. */
.ppqd-locked[b-on6h4bwp77] { color: #7A8698; display: inline-flex; align-items: center; gap: 5px; }
.ppqd-locked i[b-on6h4bwp77] { font-size: 11px; opacity: .8; }
.ppqd-lock[b-on6h4bwp77] { color: #7A8698; font-size: 11px; margin-right: 4px; }

/* Nút huỷ đơn giá: viền đỏ nhạt — thao tác PHÁ, không được trông giống nút thường. */
.ppqd-huy[b-on6h4bwp77] { color: #A03434; border-color: #E7C4C4; }
.ppqd-huy:hover:not(:disabled)[b-on6h4bwp77] { background: #FBECEC; }
.ppqd-huy-ly-do[b-on6h4bwp77] { margin-top: 6px; color: #A05A00; }
.ppqd-huy-hq[b-on6h4bwp77] { margin: 6px 0 0 18px; padding: 0; line-height: 1.6; }

/* ---- ghi chú ---- */
.ppqd-note[b-on6h4bwp77] {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 9px 12px; border-radius: 7px; font-size: 12.5px; line-height: 1.55;
    color: #1F3247; background: #EEF4FA; border: 1px solid #D3E2F0;
}
.ppqd-note i[b-on6h4bwp77] { margin-top: 2px; flex: none; color: #1F4E79; }
.ppqd-note a[b-on6h4bwp77] { color: #1F4E79; font-weight: 600; }
.ppqd-note-sm[b-on6h4bwp77] { font-size: 12px; padding: 8px 10px; }
/* Vàng = "chỗ này còn thiếu", tách hẳn khỏi xanh thông tin để không lẫn thành nền chú thích chung. */
.ppqd-note.ppqd-gap[b-on6h4bwp77] { color: #6B4A08; background: #FBF3E4; border-color: #E6D2A4; }
.ppqd-note.ppqd-gap i[b-on6h4bwp77] { color: #8A6108; }
.ppqd-note.ppqd-warn[b-on6h4bwp77] { color: #8A3A3A; background: #FBECEC; border-color: #E7C4C4; }
.ppqd-note.ppqd-warn i[b-on6h4bwp77] { color: #A03434; }

/* ---- bảng ---- */
/* Khung cuộn CẢ HAI CHIỀU + giới hạn chiều cao — nhờ vậy sticky header mới có tác dụng.
   Chỉ overflow-x thì `position: sticky` trên th là CSS chết (không có trục cuộn dọc để dính). */
.ppqd-tblwrap[b-on6h4bwp77] {
    overflow: auto; max-height: calc(100vh - 320px);
    background: #fff; border: 1px solid #E3E8EF; border-radius: 8px;
}

/* table-layout: fixed như mockup — cột giữ NGUYÊN bề rộng dù nội dung dài ngắn. Để auto thì một
   tên loại phí dài đẩy cả cụm cột tiền lệch đi giữa hai lần nạp, mắt phải dò lại vị trí cột.
   min-width PHẢI bằng tổng bề rộng đã khai ở th = 1922px (40+116+80+98+98+124+110+130+160+100+90
   +210+100+82+120+132+132). Đặt thấp hơn tổng đó thì min-width vô tác dụng — trình duyệt vẫn dựng
   bảng theo bề rộng cột, còn con số ở đây chỉ gây hiểu nhầm là bảng hẹp hơn thực tế. */
.ppqd-tbl[b-on6h4bwp77] {
    width: 100%; border-collapse: collapse; font-size: 12px;
    table-layout: fixed; min-width: 1922px;
}
/* Nền/màu/độ đậm lấy ĐÚNG .bkx-tbl thead th của chính trang bảng kê — nền xám trung tính làm tab
   này trông khác hẳn các tab bên cạnh trong CÙNG một trang. */
.ppqd-tbl th[b-on6h4bwp77] {
    position: sticky; top: 0; z-index: 3;
    text-align: left; font-size: 10.5px; letter-spacing: .3px; text-transform: uppercase;
    font-weight: 800; color: #1e3a5f; padding: 6px 8px; white-space: nowrap;
    background: #dce8f5; border-bottom: 2px solid #b8d0e8; border-right: 1px solid #cde0f0;
}
/* Cắt bằng ellipsis thay vì xuống dòng: dòng cao đều nhau thì quét cột tiền nhanh hơn hẳn. */
.ppqd-tbl td[b-on6h4bwp77] {
    padding: 6px 8px; border-bottom: 1px solid #EEF2F6; border-right: 1px solid #f1f5f9;
    vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ppqd-tbl tbody tr:hover td[b-on6h4bwp77] { background: #F8FAFC; }
/* Dòng tổng bám đáy khung — con số đối chiếu tiền, cuộn mất là phải cuộn ngược lên tìm. */
.ppqd-tbl tfoot td[b-on6h4bwp77] {
    position: sticky; bottom: 0; z-index: 2;
    padding: 8px; font-weight: 650; background: #F6F8FA; border-top: 1px solid #E3E8EF;
}
.ppqd-num[b-on6h4bwp77] { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ppqd-trip[b-on6h4bwp77] { font-weight: 650; color: #1F4E79; white-space: nowrap; }
/* Cột "Chuyến / Số xe" của mockup: HAI dòng trong một ô ⇒ ô này không dùng nowrap của td chung. */
.ppqd-tripcell[b-on6h4bwp77] { white-space: normal; line-height: 1.25; }
.ppqd-tripcell .ppqd-trip[b-on6h4bwp77] { display: block; }
.ppqd-sub2[b-on6h4bwp77] { display: block; color: #7A8698; font-size: 11px; }
.ta-c[b-on6h4bwp77] { text-align: center; }
.ta-r[b-on6h4bwp77] { text-align: right; }
.ppqd-empty-cell[b-on6h4bwp77] { text-align: center; color: #7A8698; padding: 22px 12px; }

.ppqd-empty[b-on6h4bwp77] { padding: 24px 14px; text-align: center; color: #7A8698; background: #fff; border: 1px solid #E3E8EF; border-radius: 8px; }
.ppqd-empty-sm[b-on6h4bwp77] { padding: 16px 12px; font-size: 12.5px; }
.ppqd-empty.ppqd-err[b-on6h4bwp77] { color: #A03434; background: #FBECEC; border-color: #E7C4C4; }

/* ---- panel phân bổ ---- */
.ppqd-panel[b-on6h4bwp77] {
    max-width: 560px;                 /* mockup: max-width:560px */
    background: #fff; border: 1px solid #E3E8EF; border-radius: 8px; padding: 14px;
    display: flex; flex-direction: column; gap: 11px;
}
/* Lịch sử phân bổ — mockup: max-width:820px, ngay dưới panel. */
.ppqd-history[b-on6h4bwp77] {
    max-width: 820px;
    background: #fff; border: 1px solid #E3E8EF; border-radius: 8px; padding: 14px;
    display: flex; flex-direction: column; gap: 10px;
}
.ppqd-history .ppqd-tbl[b-on6h4bwp77] { min-width: 920px; }
.ppqd-history .ppqd-tbl th[b-on6h4bwp77] { position: static; }
/* Lịch sử chỉ vài dòng — không giới hạn chiều cao, khỏi tạo thanh cuộn dọc thừa. */
.ppqd-history .ppqd-tblwrap[b-on6h4bwp77] { max-height: none; }
/* .detail-section-title của mockup: chữ NHỎ, IN HOA, màu chủ đạo, gạch chân 2px. */
.ppqd-panel-title[b-on6h4bwp77] {
    font-size: 11px; font-weight: 800; color: #1F4E79; text-transform: uppercase;
    letter-spacing: .04em; margin-bottom: 8px; padding-bottom: 5px; border-bottom: 2px solid #e0e7ff;
}
.ppqd-panel .fg[b-on6h4bwp77] { display: flex; flex-direction: column; gap: 5px; }
.ppqd-panel .flbl[b-on6h4bwp77] { font-size: 12px; font-weight: 600; color: #3D4757; }

/* .fee-table của mockup: viền đủ 4 cạnh, không phải gạch đứt. */
.ppqd-quy[b-on6h4bwp77] { width: 100%; border-collapse: collapse; font-size: 12px; }
.ppqd-quy td[b-on6h4bwp77] { padding: 5px 8px; border: 1px solid #E3E8EF; vertical-align: middle; }
/* Dòng tổng quỹ là con số người dùng nhìn nhiều nhất trong panel — tách bằng nền, không chỉ in đậm. */
.ppqd-quy-sum td[b-on6h4bwp77] { background: #f0f4ff; font-weight: 800; border-top: 2px solid #b8d0e8; }
.ppqd-sub[b-on6h4bwp77] { color: #7A8698; font-weight: 400; }
.ppqd-price[b-on6h4bwp77] { width: 130px; height: 30px; text-align: right; }
.ppqd-price-wrap[b-on6h4bwp77] { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.ppqd-panel-act[b-on6h4bwp77] { display: flex; justify-content: flex-end; }
/* Tách khỏi nút "Huỷ đơn giá" đứng cạnh — hai nút dính nhau dễ bấm nhầm, mà một bên là thao tác PHÁ. */
.ppqd-ganca[b-on6h4bwp77] { margin-left: 10px; }

/* ---- modal chỉ định ---- */
.ppqd-cd[b-on6h4bwp77] { display: flex; flex-direction: column; gap: 10px; }
.ppqd-cd-head[b-on6h4bwp77] {
    display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: space-between; align-items: baseline;
    font-size: 12.5px; color: #3D4757;
}
.ppqd-cd-count[b-on6h4bwp77] { font-variant-numeric: tabular-nums; }
.ppqd-ca[b-on6h4bwp77] { width: 90px; height: 30px; text-align: right; }
.ppqd-cd .ppqd-tbl[b-on6h4bwp77] { min-width: 520px; }
/* Bảng trong modal: 4 cột + ô nhập ⇒ để auto, không dùng fixed/ellipsis của bảng lớn. */
.ppqd-cd .ppqd-tblwrap[b-on6h4bwp77] { max-height: 46vh; overflow-y: auto; }
.ppqd-cd .ppqd-tbl[b-on6h4bwp77] { table-layout: auto; }
.ppqd-cd .ppqd-tbl td[b-on6h4bwp77] { white-space: normal; overflow: visible; }

/* ---- thẻ cho màn hẹp (swap ở 768px như các trang khác) ---- */
.ppqd-cards[b-on6h4bwp77] { display: none; }
.ppqd-card[b-on6h4bwp77] { border: 1px solid #E3E8EF; border-radius: 10px; padding: 10px 12px; background: #fff; }
.ppqd-card-top[b-on6h4bwp77] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ppqd-card-name[b-on6h4bwp77] { font-weight: 600; font-size: 13px; margin-top: 6px; }
.ppqd-card-money[b-on6h4bwp77] { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 4px; }
.ppqd-card-meta[b-on6h4bwp77] { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: #64748B; margin-top: 3px; }

@media (max-width: 768px) {
    .ppqd-tblwrap[b-on6h4bwp77] { display: none; }
    .ppqd-cards[b-on6h4bwp77] { display: flex; flex-direction: column; gap: 8px; }
    /* Modal chỉ định VẪN dùng bảng trên mobile: chỉ 4 cột và có ô nhập — đổi sang thẻ thì
       ô "Số ca" mất ngữ cảnh cột "Thành tiền" ngay bên cạnh. */
    .ppqd-cd .ppqd-tblwrap[b-on6h4bwp77] { display: block; }

    /* ---- bộ lọc trên mobile: y hệt các tab kia của trang bảng kê (thân xếp 1 cột; thu/mở dùng
       chung .filter-bar.collapsed, mặc định MỞ) ---- */
    .fbar.ppqd-fbar[b-on6h4bwp77] { display: flex; gap: 8px; }
    .fbar.ppqd-fbar .fbar-row[b-on6h4bwp77] { display: contents; }
    .fbar.ppqd-fbar .fg[b-on6h4bwp77] { flex: 1 1 100% !important; min-width: 0 !important; max-width: none !important; }
    .fbar.ppqd-fbar .fbar-actions[b-on6h4bwp77] { flex: 1 1 100%; }
    .fbar.ppqd-fbar .fbar-actions .btn[b-on6h4bwp77] { flex: 1 1 auto; justify-content: center; }
}



/* ---- kỳ đã chốt / form ghi nhận số dư ---- */
.ppqd-note.ppqd-ok[b-on6h4bwp77] { color: #14532D; background: #ECFDF3; border-color: #BBE7C9; }
.ppqd-note.ppqd-ok i[b-on6h4bwp77] { color: #1B6E45; }
.ppqd-ghinhan[b-on6h4bwp77] { margin-left: 8px; }
.ppqd-form[b-on6h4bwp77] { display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; }
.ppqd-radio[b-on6h4bwp77] { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.ppqd-radio input[b-on6h4bwp77] { margin: 0; }
/* _content/Admin_KA_Transport_Pricing/Components/Shared/PricingCommentPanel.razor.rz.scp.css */
.pcp[b-byahnvru4z] { display:flex; flex-direction:column; min-width:0; min-height:0; height:100%; }
.pcp-title[b-byahnvru4z] { color:var(--t,#1e293b); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.35px; margin-bottom:10px; }
.pcp-list[b-byahnvru4z] { flex:1 1 auto; min-height:210px; max-height:none; overflow-y:auto; padding-right:4px; display:flex; flex-direction:column; }
.pcp-state[b-byahnvru4z] { flex:1 0 170px; min-height:170px; display:flex; align-items:center; justify-content:center; gap:8px; color:var(--tm,#64748b); text-align:center; }
.pcp-error[b-byahnvru4z] { flex-direction:column; color:#b91c1c; }
.pcp-item[b-byahnvru4z] { flex:0 0 auto; padding:10px 0; border-bottom:1px solid var(--b,#e4e8ef); }
.pcp-item:first-child[b-byahnvru4z] { padding-top:0; }
.pcp-head[b-byahnvru4z] { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.pcp-author[b-byahnvru4z] { color:var(--t,#1e293b); font-weight:700; }
.pcp-time[b-byahnvru4z] { margin-left:auto; color:var(--tm,#64748b); font-size:11px; }
.pcp-content[b-byahnvru4z] { color:var(--t,#1e293b); white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.45; }
.pcp-compose[b-byahnvru4z] { flex:0 0 auto; border-top:1px solid var(--b,#e4e8ef); padding-top:10px; margin-top:auto; }
.pcp-box[b-byahnvru4z] {
    display:flex; flex-direction:column; gap:6px;
    padding:8px 8px 6px;
    border:1px solid var(--b,#e4e8ef); border-radius:10px;
    background:var(--bg,#f8fafc);
    transition:border-color var(--tr,.15s ease), box-shadow var(--tr,.15s ease), background var(--tr,.15s ease);
}
.pcp-box:focus-within[b-byahnvru4z] { border-color:var(--p,#2563eb); background:#fff; box-shadow:var(--focus-ring,0 0 0 3px rgba(37,99,235,.12)); }
.pcp-box textarea[b-byahnvru4z] {
    width:100%; min-width:0; border:0; background:transparent; outline:none; resize:none;
    min-height:44px; max-height:120px; overflow-y:auto;
    padding:2px 2px 0;
    font-family:inherit; font-size:12.5px; line-height:1.5; color:var(--t,#1e293b);
}
.pcp-box textarea[b-byahnvru4z]::placeholder { color:var(--tm,#94a3b8); }
.pcp-box textarea:disabled[b-byahnvru4z] { opacity:.6; }
.pcp-actions[b-byahnvru4z] { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.pcp-count[b-byahnvru4z] { margin-right:auto; font-size:10.5px; color:var(--tm,#64748b); }
.pcp-count-warn[b-byahnvru4z] { color:var(--warn,#d97706); font-weight:600; }
.pcp-tip[b-byahnvru4z] { font-size:10.5px; color:var(--tm,#64748b); }
.pcp-send[b-byahnvru4z] {
    flex:0 0 auto; width:30px; height:30px;
    display:inline-flex; align-items:center; justify-content:center;
    border:0; border-radius:8px; background:var(--p,#2563eb); color:#fff; cursor:pointer;
    transition:background var(--tr,.15s ease), transform var(--tr,.15s ease);
}
.pcp-send i[b-byahnvru4z] { font-size:12.5px; }
.pcp-send:hover:not(:disabled)[b-byahnvru4z] { background:var(--primary-active,#1d4ed8); }
.pcp-send:active:not(:disabled)[b-byahnvru4z] { transform:scale(.94); }
.pcp-send:disabled[b-byahnvru4z] { background:var(--bs,#cbd5e1); cursor:not-allowed; }
.pcp-send:focus-visible[b-byahnvru4z] { outline:2px solid var(--p,#2563eb); outline-offset:2px; }

@media (max-width:768px) {
    .pcp[b-byahnvru4z] { height:auto; }
    .pcp-list[b-byahnvru4z] { flex:none; max-height:300px; }
    .pcp-box textarea[b-byahnvru4z] { font-size:16px; min-height:56px; }   /* chống iOS auto-zoom */
    .pcp-tip[b-byahnvru4z] { display:none; }
    .pcp-send[b-byahnvru4z] { width:40px; height:40px; }                   /* touch target ≥40px */
    .pcp-send i[b-byahnvru4z] { font-size:14px; }
}
/* _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;
}

/* Dropdown có chiều rộng tùy chỉnh: không sinh thanh cuộn ngang; nội dung quá dài hiển thị ellipsis. */
.ms-dropdown-wide[b-6op2uh6zna] {
    overflow-x: hidden;
}

.ms-dropdown-wide .ms-option-text[b-6op2uh6zna] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 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 */