/*
 * Định dạng riêng của phân hệ Duty.
 * Toàn bộ selector bắt đầu bằng Duty để tránh ảnh hưởng các chức năng cũ trong ứng dụng.
 * Phân hệ tiếp tục sử dụng Bootstrap 3 và Kendo UI 2020.1.219 theo dự án hiện tại.
 */
.DutyPage {
    padding: 5px 0 20px 0;
}

.DutyPage .page-title {
    margin-bottom: 10px;
}

.DutyPage .page-title h3 {
    margin-top: 8px;
    color: #1b4f72;
    font-weight: 600;
}

.DutyFilterPanel .x_content {
    padding-top: 8px;
}

.DutyButtonColumn {
    padding-top: 25px;
}

.DutyFullButton {
    width: 100%;
}

.DutyDashboardCards {
    margin-bottom: 15px;
}

.DutyDashboardCard {
    min-height: 105px;
    margin-bottom: 10px;
    padding: 16px;
    border: 1px solid #d9e4ec;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
    text-align: center;
}

.DutyDashboardCard .DutyCardTitle {
    display: block;
    margin-bottom: 8px;
    color: #667784;
    font-size: 14px;
}

.DutyDashboardCard strong {
    color: #1b4f72;
    font-size: 32px;
    line-height: 38px;
}

.DutyDashboardCardWarning strong {
    color: #c0392b;
}

.DutyForm {
    padding: 10px 8px 0 8px;
}

.DutyLargeForm {
    min-width: 900px;
}

.DutyForm .form-group {
    margin-bottom: 12px;
}

.DutyForm label {
    color: #34495e;
}

.DutyRequired {
    color: #c0392b;
    font-weight: bold;
}

.DutyToolbar {
    margin: 10px 0;
    padding: 8px;
    border: 1px solid #e5e8e8;
    background: #f8f9f9;
}

.DutyReadonlyContent {
    max-height: 330px;
    margin-bottom: 15px;
    padding: 12px;
    overflow: auto;
    border: 1px solid #d5d8dc;
    background: #fbfcfc;
}

.DutyPreLine {
    white-space: pre-line;
    line-height: 1.7;
    text-align: justify;
}

.DutyDetailList dt,
.DutyDetailList dd {
    padding-top: 7px;
    padding-bottom: 7px;
}

.DutyUnreadRow {
    background: #fff8e1 !important;
    font-weight: 600;
}

.DutyLoading {
    padding: 30px;
    color: #667784;
    text-align: center;
}

.DutyReportDetailContainer .k-grid,
.DutyDetailContainer .k-grid {
    margin-top: 10px;
}

.DutyPage .k-grid td {
    vertical-align: middle;
}

.DutyPage .btn-xs {
    margin: 1px;
}

#DutyNotificationUnreadCount {
    display: none;
    min-width: 18px;
    padding: 2px 5px;
    border-radius: 10px;
    background: #d9534f;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
}

@media (max-width: 991px) {
    .DutyLargeForm {
        min-width: 0;
    }

    .DutyButtonColumn {
        padding-top: 8px;
    }
}

/* ============================================================================
 * Chuẩn hóa bố cục biểu mẫu Duty
 * Mỗi control được bố trí trên một hàng theo dạng: Tiêu đề | Control nhập.
 * Các quy tắc này chỉ tác động bên trong .DutyForm, không ảnh hưởng biểu mẫu cũ.
 * ========================================================================== */
.DutyFormRow,
.DutyForm > .form-group,
.DutyForm > .row > [class*="col-"] > .form-group,
.DutyForm > .row > [class*="col-"]:not(.DutyButtonColumn) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    width: 100%;
    margin-right: 0;
    margin-bottom: 12px;
    margin-left: 0;
}

.DutyForm > .row {
    display: block;
    margin-right: 0;
    margin-left: 0;
}

.DutyForm > .row > [class*="col-"] {
    float: none;
    width: 100%;
    padding-right: 0;
    padding-left: 0;
}

.DutyForm > .row > [class*="col-"] > .form-group {
    margin-bottom: 0;
}

.DutyFormLabel,
.DutyForm > .form-group > label:not(.checkbox),
.DutyForm > .row > [class*="col-"] > .form-group > label,
.DutyForm > .row > [class*="col-"] > label {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 230px;
    flex: 0 0 230px;
    width: 230px;
    max-width: 230px;
    margin: 0;
    padding: 8px 14px 0 0;
    text-align: right;
    line-height: 20px;
}

/* Hiển thị dấu hai chấm thống nhất giữa tiêu đề và control nhập. */
.DutyFormLabel::after,
.DutyForm > .form-group > label:not(.checkbox)::after,
.DutyForm > .row > [class*="col-"] > .form-group > label::after,
.DutyForm > .row > [class*="col-"] > label::after {
    content: " :";
}

.DutyFormControl,
.DutyForm > .form-group > div[class*="col-"],
.DutyForm > .row > [class*="col-"] > .form-group > div[class*="col-"] {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    float: none;
    width: auto;
    min-width: 0;
    padding-right: 0;
    padding-left: 0;
}

.DutyForm > .form-group > input.form-control,
.DutyForm > .form-group > select.form-control,
.DutyForm > .form-group > textarea.form-control,
.DutyForm > .row > [class*="col-"] > input.form-control,
.DutyForm > .row > [class*="col-"] > select.form-control,
.DutyForm > .row > [class*="col-"] > textarea.form-control,
.DutyForm > .row > [class*="col-"] > .k-widget,
.DutyForm > .row > [class*="col-"] > .k-combobox,
.DutyForm > .row > [class*="col-"] > .k-dropdown,
.DutyForm > .row > [class*="col-"] > .k-datepicker,
.DutyForm > .row > [class*="col-"] > .k-datetimepicker {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

.DutyForm .form-control,
.DutyForm .k-widget,
.DutyForm .k-dropdown,
.DutyForm .k-combobox,
.DutyForm .k-datepicker,
.DutyForm .k-datetimepicker,
.DutyForm .k-multiselect {
    width: 100%;
}

.DutyForm .checkbox {
    margin: 8px 0 12px 230px;
    padding-left: 0;
}

.DutyFormActions,
.DutyForm .modal-footer {
    clear: both;
    margin-top: 15px;
    padding: 12px 0 0 230px;
    text-align: left;
}

.DutyLargeForm {
    min-width: 0;
}

/* Nút hướng dẫn tại tiêu đề trang và cửa sổ Kendo. */
.DutyPageHelpButton {
    margin-right: 6px;
}

.DutyWindowHelpButton .fa {
    font-size: 15px;
    line-height: 20px;
}

.DutyHelpContent {
    padding: 5px 12px 18px 12px;
    color: #34495e;
    font-size: 14px;
    line-height: 1.65;
}

.DutyHelpContent h3 {
    margin: 5px 0 18px 0;
    color: #1b4f72;
    font-size: 22px;
}

.DutyHelpSection {
    margin-bottom: 18px;
    padding: 12px 15px;
    border: 1px solid #d9e4ec;
    border-radius: 4px;
    background: #fbfcfc;
}

.DutyHelpSection h4 {
    margin: 0 0 10px 0;
    color: #21618c;
    font-weight: 600;
}

.DutyHelpSection ul,
.DutyHelpSteps {
    margin: 0;
    padding-left: 24px;
}

.DutyHelpSteps li {
    margin-bottom: 9px;
}

@media (max-width: 767px) {
    .DutyFormRow,
    .DutyForm > .form-group,
    .DutyForm > .row > [class*="col-"] > .form-group,
    .DutyForm > .row > [class*="col-"]:not(.DutyButtonColumn) {
        display: block;
    }

    .DutyFormLabel,
    .DutyForm > .form-group > label:not(.checkbox),
    .DutyForm > .row > [class*="col-"] > .form-group > label,
    .DutyForm > .row > [class*="col-"] > label {
        display: block;
        width: 100%;
        max-width: none;
        padding: 0 0 5px 0;
        text-align: left;
    }

    .DutyForm .checkbox,
    .DutyFormActions,
    .DutyForm .modal-footer {
        margin-left: 0;
        padding-left: 0;
    }
}

/* ============================================================================
 * Hotfix 04 - Cửa sổ Kendo, footer cố định và giao diện cấu hình
 * ========================================================================== */

/* Kendo Window dùng flex để chỉ cuộn vùng control; footer luôn hiển thị. */
.DutyDataWindowWrapper .k-window-content.DutyWindowLayoutRoot {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: 0;
    padding: 0 !important;
    overflow: hidden !important;
}

.DutyWindowFlexContainer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0 !important;
    overflow: hidden;
}

.DutyWindowScrollBody {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-height: 0;
    padding: 16px 18px 10px 18px;
    overflow-x: hidden;
    overflow-y: auto;
    background: #fff;
}

.DutyWindowActionFooter,
.DutyForm .DutyWindowActionFooter {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    gap: 6px;
    width: 100%;
    min-height: 58px;
    margin: 0 !important;
    padding: 10px 16px !important;
    border-top: 1px solid #d7e1e8;
    background: #f7f9fa;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, .06);
    text-align: right !important;
}

.DutyWindowActionFooter .btn {
    margin: 0 !important;
}

.DutyWindowFooterHelpButton {
    margin-right: auto !important;
    color: #1b4f72;
    font-weight: 600;
}

/* Các selector bố cục cũ dùng dấu > trực tiếp với .DutyForm. Sau khi thêm vùng cuộn,
 * bổ sung cùng quy tắc cho control nằm bên trong .DutyWindowScrollBody. */
.DutyForm .DutyWindowScrollBody > .form-group,
.DutyForm .DutyWindowScrollBody > .row > [class*="col-"] > .form-group,
.DutyForm .DutyWindowScrollBody > .row > [class*="col-"]:not(.DutyButtonColumn) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    width: 100%;
    margin-right: 0;
    margin-bottom: 12px;
    margin-left: 0;
}

.DutyForm .DutyWindowScrollBody > .row {
    display: block;
    margin-right: 0;
    margin-left: 0;
}

.DutyForm .DutyWindowScrollBody > .row > [class*="col-"] {
    float: none;
    width: 100%;
    padding-right: 0;
    padding-left: 0;
}

.DutyForm .DutyWindowScrollBody > .row > [class*="col-"] > .form-group {
    margin-bottom: 0;
}

.DutyForm .DutyWindowScrollBody > .form-group > label:not(.checkbox),
.DutyForm .DutyWindowScrollBody > .row > [class*="col-"] > .form-group > label,
.DutyForm .DutyWindowScrollBody > .row > [class*="col-"] > label {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 230px;
    flex: 0 0 230px;
    width: 230px;
    max-width: 230px;
    margin: 0;
    padding: 8px 14px 0 0;
    color: #34495e;
    text-align: right;
    line-height: 20px;
}

.DutyForm .DutyWindowScrollBody > .form-group > label:not(.checkbox)::after,
.DutyForm .DutyWindowScrollBody > .row > [class*="col-"] > .form-group > label::after,
.DutyForm .DutyWindowScrollBody > .row > [class*="col-"] > label::after {
    content: " :";
}

.DutyForm .DutyWindowScrollBody > .form-group > div[class*="col-"],
.DutyForm .DutyWindowScrollBody > .row > [class*="col-"] > .form-group > div[class*="col-"] {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    float: none;
    width: auto;
    min-width: 0;
    padding-right: 0;
    padding-left: 0;
}

/* Cửa sổ Hướng dẫn có kích thước ổn định, nội dung không bị ép thành một cột hẹp. */
.DutyHelpWindowWrapper {
    min-width: 620px;
}

.DutyHelpWindowWrapper .k-window-title {
    max-width: calc(100% - 90px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.DutyHelpWindowContent {
    padding: 0 !important;
    overflow: hidden !important;
    background: #fff;
}

.DutyHelpWindowContent .DutyHelpContent {
    width: 100%;
    height: 100%;
    padding: 18px 22px 24px 22px;
    overflow-x: hidden;
    overflow-y: auto;
    word-break: normal;
    overflow-wrap: break-word;
    white-space: normal;
}

.DutyHelpWindowContent .DutyHelpSection,
.DutyHelpWindowContent .DutyHelpSection p,
.DutyHelpWindowContent .DutyHelpSection li {
    width: auto;
    max-width: none;
    word-break: normal;
    white-space: normal;
}

/* Giao diện cấu hình: phông chữ, khoảng cách và control thống nhất. */
.DutyConfigPage {
    color: #2c3e50;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
}

.DutyConfigPage .page-title h3,
.DutyConfigPage .x_title h2,
.DutyConfigPage label,
.DutyConfigPage input,
.DutyConfigPage select,
.DutyConfigPage button,
.DutyConfigPage .help-block {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.DutyConfigPage .page-title h3 {
    font-size: 25px;
    line-height: 34px;
}

.DutyConfigPanel {
    border: 1px solid #d7e4ec;
    border-radius: 4px;
    box-shadow: 0 1px 5px rgba(31, 78, 110, .08);
}

.DutyConfigIntro {
    margin-bottom: 16px;
    padding: 12px 15px;
    border-left: 4px solid #3498db;
    border-radius: 3px;
    background: #eef7fc;
    color: #2f617f;
    line-height: 1.6;
}

.DutyConfigSection {
    margin-bottom: 18px;
    border: 1px solid #dce6ec;
    border-radius: 4px;
    background: #fff;
}

.DutyConfigSectionTitle {
    margin: 0;
    padding: 11px 14px;
    border-bottom: 1px solid #dce6ec;
    background: #f4f8fa;
    color: #1b4f72;
    font-size: 16px;
    font-weight: 600;
}

.DutyConfigSectionTitle .fa {
    width: 20px;
    text-align: center;
}

.DutyConfigSectionBody {
    padding: 6px 16px 8px 16px;
}

.DutyConfigForm {
    width: 100%;
    max-width: 1420px;
    margin: 0 auto;
    padding: 0;
}

.DutyConfigForm .DutyFormRow {
    align-items: center;
    min-height: 54px;
    margin: 0;
    padding: 8px 0;
    border-bottom: 1px dashed #e8eef2;
}

.DutyConfigForm .DutyFormRow:last-child {
    border-bottom: 0;
}

.DutyConfigForm .DutyFormLabel {
    -ms-flex: 0 0 310px;
    flex: 0 0 310px;
    width: 310px;
    max-width: 310px;
    padding: 0 18px 0 0;
    color: #273746;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-align: right;
}

.DutyConfigForm .DutyFormControl {
    max-width: 980px;
}

.DutyConfigForm .form-control {
    height: 38px;
    padding: 7px 12px;
    border: 1px solid #bdcbd4;
    border-radius: 3px;
    background: #fff;
    color: #2c3e50;
    font-size: 14px;
    line-height: 22px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .04);
}

.DutyConfigForm .form-control:focus {
    border-color: #5dade2;
    outline: 0;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, .12);
}

.DutyConfigForm .form-control[disabled],
.DutyConfigForm .form-control[readonly] {
    background: #f0f3f4;
    color: #566573;
    cursor: not-allowed;
}

.DutyConfigForm .help-block {
    margin: 6px 0 0 0;
    color: #6c7a86;
    font-size: 12px;
    line-height: 18px;
}

.DutyConfigForm .DutyFormActions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 8px;
    padding: 12px 0 0 0;
}

.DutyConfigRoleNote {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 8px;
    border-radius: 10px;
    background: #eaf2f8;
    color: #2874a6;
    font-size: 11px;
    font-weight: 600;
    vertical-align: middle;
}

@media (max-width: 767px) {
    .DutyHelpWindowWrapper {
        min-width: 0 !important;
    }

    .DutyWindowScrollBody {
        padding: 12px 10px 8px 10px;
    }

    .DutyWindowActionFooter,
    .DutyForm .DutyWindowActionFooter {
        padding: 8px 10px !important;
    }

    .DutyWindowFooterHelpButton {
        width: 100%;
        margin-right: 0 !important;
        margin-bottom: 4px !important;
    }

    .DutyForm .DutyWindowScrollBody > .form-group,
    .DutyForm .DutyWindowScrollBody > .row > [class*="col-"] > .form-group,
    .DutyForm .DutyWindowScrollBody > .row > [class*="col-"]:not(.DutyButtonColumn) {
        display: block;
    }

    .DutyForm .DutyWindowScrollBody > .form-group > label:not(.checkbox),
    .DutyForm .DutyWindowScrollBody > .row > [class*="col-"] > .form-group > label,
    .DutyForm .DutyWindowScrollBody > .row > [class*="col-"] > label,
    .DutyConfigForm .DutyFormLabel {
        display: block;
        width: 100%;
        max-width: none;
        padding: 0 0 5px 0;
        text-align: left;
    }

    .DutyConfigSectionBody {
        padding-right: 10px;
        padding-left: 10px;
    }
}

/* ============================================================================
 * Dashboard theo dõi nhiệm vụ - giao diện hiện đại, responsive
 * Các selector đều nằm dưới .DutyDashboardModern để không ảnh hưởng màn hình khác.
 * ========================================================================== */
.DutyDashboardModern {
    color: #173a62;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.DutyDashboardModern .DutyDashboardPageTitle {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    min-height: 58px;
    margin-bottom: 8px;
}

.DutyDashboardModern .DutyDashboardPageTitle .title_left,
.DutyDashboardModern .DutyDashboardPageTitle .title_right {
    float: none;
    width: auto;
}

.DutyDashboardModern .DutyDashboardPageTitle h3 {
    margin: 0;
    color: #173f70;
    font-size: 25px;
    font-weight: 700;
    line-height: 34px;
}

.DutyDashboardModern .DutyDashboardPageTitle h3 .fa {
    margin-right: 7px;
    color: #0f5da8;
}

.DutyDashboardHeaderActions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    gap: 12px;
}

.DutyDashboardModern .DutyDashboardHelpButton,
.DutyDashboardModern .DutyDashboardUpdatedBadge {
    height: 38px;
    margin: 0;
    border-radius: 6px;
    font-size: 14px;
    line-height: 20px;
}

.DutyDashboardModern .DutyDashboardHelpButton {
    min-width: 126px;
    border: 1px solid #2f76df;
    background: #fff;
    color: #195fb8;
    font-weight: 600;
}

.DutyDashboardModern .DutyDashboardHelpButton:hover,
.DutyDashboardModern .DutyDashboardHelpButton:focus {
    background: #eef5ff;
    color: #0f4e9a;
}

.DutyDashboardUpdatedBadge {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-width: 220px;
    padding: 8px 15px;
    border: 1px solid #e0e6ed;
    background: #fff;
    color: #64748b;
    box-shadow: 0 3px 12px rgba(29, 55, 90, .08);
    white-space: nowrap;
}

.DutyDashboardUpdatedBadge .fa {
    margin-right: 8px;
    color: #526a86;
}

.DutyDashboardModern .DutyDashboardPanel {
    margin-bottom: 14px;
    padding: 0;
    overflow: hidden;
    border: 1px solid #dbe5ef;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 14px rgba(23, 58, 98, .08);
}

.DutyDashboardModern .DutyDashboardPanelTitle {
    min-height: 45px;
    margin: 0;
    padding: 11px 16px 8px 16px;
    border-bottom: 1px solid #edf1f5;
}

.DutyDashboardModern .DutyDashboardPanelTitle h2 {
    margin: 0;
    color: #15467f;
    font-size: 17px;
    font-weight: 700;
    line-height: 24px;
}

.DutyDashboardModern .DutyDashboardPanelTitle h2 .fa {
    width: 22px;
    margin-right: 4px;
    color: #0f62b4;
    text-align: center;
}

.DutyDashboardModern .DutyDashboardFilterPanel .DutyDashboardPanelTitle {
    border-bottom: 0;
    padding-bottom: 2px;
}

.DutyDashboardFilterContent {
    padding: 10px 14px 15px 14px !important;
}

.DutyDashboardFilterRow {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.DutyDashboardFilterField label {
    display: block;
    margin-bottom: 7px;
    color: #263e5c;
    font-size: 13px;
    font-weight: 700;
}

.DutyDashboardFilterField .form-control,
.DutyDashboardFilterField .k-widget,
.DutyDashboardFilterField .k-datepicker {
    width: 100%;
}

.DutyDashboardFilterField .form-control,
.DutyDashboardFilterField .k-picker-wrap {
    min-height: 38px;
    border-color: #ccd8e4;
    border-radius: 5px;
    background: #fff;
    box-shadow: none;
}

.DutyDashboardFilterField .form-control:focus,
.DutyDashboardFilterField .k-state-focused .k-picker-wrap,
.DutyDashboardFilterField .k-picker-wrap.k-state-focused {
    border-color: #4b8fe8;
    box-shadow: 0 0 0 2px rgba(75, 143, 232, .12);
}

.DutyDashboardFilterAction {
    padding-top: 25px;
}

.DutyDashboardSearchButton {
    width: 100%;
    height: 38px;
    margin: 0;
    border: 0;
    border-radius: 5px;
    background: linear-gradient(135deg, #3982e4, #2e68d6);
    box-shadow: 0 4px 9px rgba(47, 118, 223, .2);
    font-weight: 600;
}

.DutyDashboardSearchButton:hover,
.DutyDashboardSearchButton:focus {
    background: linear-gradient(135deg, #2f76d5, #245bbd);
}

.DutyDashboardKpiRow {
    margin-right: -7px;
    margin-left: -7px;
}

.DutyDashboardKpiColumn {
    padding-right: 7px;
    padding-left: 7px;
}

.DutyDashboardKpiCard {
    position: relative;
    margin-bottom: 14px;
    overflow: hidden;
    border: 1px solid #dce5ee;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(25, 55, 90, .1);
    cursor: pointer;
    outline: none;
    -webkit-transition: transform .18s ease, box-shadow .18s ease;
    transition: transform .18s ease, box-shadow .18s ease;
}

.DutyDashboardKpiCard:hover,
.DutyDashboardKpiCard:focus,
.DutyDashboardKpiCard.DutyDashboardQuickActive {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    box-shadow: 0 7px 20px rgba(25, 55, 90, .16);
}

.DutyDashboardKpiCard.DutyDashboardQuickActive {
    border-color: #2f76df;
}

.DutyDashboardKpiTop {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: 114px;
    padding: 14px 16px;
    color: #fff;
}

.DutyDashboardKpiCardTotal .DutyDashboardKpiTop {
    background: linear-gradient(135deg, #536fe9 0%, #6b56e5 100%);
}

.DutyDashboardKpiCardCompleted .DutyDashboardKpiTop {
    background: linear-gradient(135deg, #26b998 0%, #20a989 100%);
}

.DutyDashboardKpiCardProgress .DutyDashboardKpiTop {
    background: linear-gradient(135deg, #ffae17 0%, #ff8f00 100%);
}

.DutyDashboardKpiCardNotStarted .DutyDashboardKpiTop {
    background: linear-gradient(135deg, #f34b3c 0%, #ef352c 100%);
}

.DutyDashboardKpiIcon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 48px;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    margin-right: 13px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    font-size: 25px;
}

.DutyDashboardKpiMain {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
}

.DutyDashboardKpiPrefix,
.DutyDashboardKpiTitle {
    display: block;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
}

.DutyDashboardKpiTitle {
    min-height: 18px;
}

.DutyDashboardKpiMain > strong {
    display: block;
    margin-top: 3px;
    color: #fff;
    font-size: 40px;
    font-weight: 700;
    line-height: 43px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .08);
}

.DutyDashboardKpiBottom {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 72px;
    background: #fff;
}

.DutyDashboardKpiSubItem {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 50%;
    min-width: 0;
    padding: 8px 5px;
    border: 0;
    border-right: 1px solid #e4eaf0;
    outline: none;
    background: transparent;
    color: #31445c;
    text-align: center;
}

.DutyDashboardKpiSubItem:last-child {
    border-right: 0;
}

.DutyDashboardKpiSubItem:hover,
.DutyDashboardKpiSubItem:focus {
    background: #f7faff;
}

.DutyDashboardKpiSubItem > span {
    display: block;
    overflow: hidden;
    max-width: 100%;
    font-size: 12px;
    line-height: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.DutyDashboardKpiSubItem > strong {
    display: inline-block;
    min-width: 52px;
    margin-top: 3px;
    padding-bottom: 2px;
    border-bottom: 2px solid currentColor;
    font-size: 23px;
    line-height: 28px;
}

.DutyDashboardKpiCardTotal .DutyDashboardKpiSubItem:first-child > strong { color: #2f76df; }
.DutyDashboardKpiCardTotal .DutyDashboardKpiSubItem:last-child > strong { color: #6c50dd; }
.DutyDashboardKpiCardCompleted .DutyDashboardKpiSubItem:first-child > strong { color: #18a781; }
.DutyDashboardKpiCardCompleted .DutyDashboardKpiSubItem:last-child > strong { color: #ef3f34; }
.DutyDashboardKpiCardProgress .DutyDashboardKpiSubItem:first-child > strong { color: #ff9300; }
.DutyDashboardKpiCardProgress .DutyDashboardKpiSubItem:last-child > strong { color: #ef3f34; }
.DutyDashboardKpiCardNotStarted .DutyDashboardKpiSubItem > strong { color: #ef3f34; }

.DutyDashboardDot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 5px;
    border-radius: 50%;
    vertical-align: 1px;
}

.DutyDashboardDotBlue { background: #2f76df; }
.DutyDashboardDotPurple { background: #6c50dd; }
.DutyDashboardDotGreen { background: #18a781; }
.DutyDashboardDotOrange { background: #ff9300; }
.DutyDashboardDotRed { background: #ef3f34; }

.DutyDashboardChartRow {
    margin-right: -7px;
    margin-left: -7px;
}

.DutyDashboardChartColumn {
    padding-right: 7px;
    padding-left: 7px;
}

.DutyDashboardChartContent {
    padding: 4px 10px 10px 10px !important;
}

.DutyDashboardChart {
    width: 100%;
    height: 245px;
}

.DutyDashboardDetailTitle {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.DutyDashboardDetailTools {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.DutyDashboardClientFilterText {
    color: #60758d;
    font-size: 12px;
    font-style: italic;
}

.DutyDashboardGridContent {
    padding: 0 !important;
    overflow-x: auto;
}

.DutyDashboardModern #DutyDashboardGrid {
    min-width: 980px;
    border: 0;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.DutyDashboardModern #DutyDashboardGrid .k-grid-header {
    border-color: #dce5ee;
    background: #f4f7fb;
}

.DutyDashboardModern #DutyDashboardGrid .k-grid-header th.k-header {
    padding: 9px 10px;
    border-color: #dce5ee;
    background: #f4f7fb;
    color: #173f70;
    font-size: 12px;
    font-weight: 700;
}

.DutyDashboardModern #DutyDashboardGrid .k-grid-content td {
    padding: 8px 10px;
    border-color: #e5ebf1;
    color: #34495e;
    font-size: 12px;
    line-height: 18px;
}

.DutyDashboardModern #DutyDashboardGrid .k-alt {
    background: #fbfcfe;
}

.DutyDashboardModern #DutyDashboardGrid .k-pager-wrap {
    padding: 8px 10px;
    border-color: #dce5ee;
    background: #fff;
    color: #526579;
    font-size: 12px;
}

.DutyDashboardCodeLink {
    color: #244f86;
    font-weight: 600;
}

.DutyDashboardProgressCell {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
}

.DutyDashboardProgressValue {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 45px;
    flex: 0 0 45px;
    width: 45px;
    color: #263f5f;
    font-size: 12px;
    font-weight: 600;
}

.DutyDashboardProgressTrack {
    position: relative;
    display: block;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    height: 7px;
    overflow: hidden;
    border-radius: 5px;
    background: #e7edf3;
}

.DutyDashboardProgressBar {
    display: block;
    height: 100%;
    border-radius: 5px;
}

.DutyDashboardProgressDoing { background: #5a9df5; }
.DutyDashboardProgressDone { background: #12a86f; }

.DutyDashboardReported {
    color: #169967;
    font-weight: 600;
    white-space: nowrap;
}

.DutyDashboardReported .fa {
    margin-right: 4px;
}

.DutyDashboardNoReport {
    display: block;
    color: #95a5a6;
    text-align: center;
}

.DutyDashboardStatusBadge {
    display: inline-block;
    min-width: 105px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    white-space: nowrap;
}

.DutyDashboardStatusCompleted {
    background: #def6e9;
    color: #168456;
}

.DutyDashboardStatusProgress {
    background: #fff0dc;
    color: #e57900;
}

.DutyDashboardStatusNotStarted {
    background: #fde3e1;
    color: #d63d34;
}

/* Màn hình dưới 1200px: KPI chuyển thành 2 cột, hai biểu đồ xếp dọc như mẫu. */
@media (max-width: 1199px) {
    .DutyDashboardModern .DutyDashboardPageTitle h3 {
        font-size: 23px;
    }

    .DutyDashboardChart {
        height: 260px;
    }
}

/* Tablet và vùng nội dung hẹp. */
@media (max-width: 991px) {
    .DutyDashboardModern .DutyDashboardPageTitle {
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }

    .DutyDashboardHeaderActions {
        gap: 7px;
    }

    .DutyDashboardUpdatedBadge {
        min-width: 0;
    }

    .DutyDashboardFilterAction {
        padding-top: 24px;
    }
}

/* Điện thoại: tiêu đề và bộ lọc xếp dọc, KPI một cột để không ép chữ. */
@media (max-width: 767px) {
    .DutyDashboardModern {
        padding-right: 2px;
        padding-left: 2px;
    }

    .DutyDashboardModern .DutyDashboardPageTitle {
        display: block;
        min-height: 0;
        margin-bottom: 12px;
    }

    .DutyDashboardModern .DutyDashboardPageTitle h3 {
        margin-bottom: 9px;
        font-size: 21px;
        line-height: 28px;
    }

    .DutyDashboardHeaderActions {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .DutyDashboardModern .DutyDashboardHelpButton,
    .DutyDashboardUpdatedBadge {
        height: 36px;
    }

    .DutyDashboardFilterField,
    .DutyDashboardFilterAction {
        margin-bottom: 10px;
    }

    .DutyDashboardFilterAction {
        padding-top: 0;
    }

    .DutyDashboardKpiMain > strong {
        font-size: 36px;
    }

    .DutyDashboardKpiTop {
        min-height: 105px;
    }

    .DutyDashboardDetailTitle {
        display: block;
    }

    .DutyDashboardDetailTools {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-top: 8px;
    }

    .DutyDashboardChart {
        height: 285px;
    }
}

/* ============================================================================
 * Hotfix 07 - Nhóm nhiệm vụ
 * Giao diện bám theo thiết kế mới: tiêu đề lớn, cụm nút tác vụ bên phải,
 * lưới có trạng thái rỗng thân thiện và cửa sổ nhập liệu chỉ hiển thị trường nghiệp vụ.
 * ========================================================================== */
.DutyGroupPage {
    color: #1f2d4d;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.DutyGroupPage .DutyGroupPageTitle {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    min-height: 72px;
    margin-bottom: 14px;
}

.DutyGroupPage .DutyGroupPageTitle .title_left,
.DutyGroupPage .DutyGroupPageTitle .title_right {
    float: none;
    width: auto;
}

.DutyGroupPage .DutyGroupPageTitle h3 {
    margin: 0;
    color: #173f6c;
    font-size: 30px;
    font-weight: 700;
    line-height: 42px;
}

.DutyGroupPage .DutyGroupPageTitle h3 .fa {
    margin-right: 10px;
    color: #1f83df;
}

.DutyGroupPageActions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 8px;
}

.DutyGroupPageActions .btn,
.DutyGroupPage .DutyPageHelpButton {
    float: none !important;
    min-height: 42px;
    margin: 0 !important;
    padding: 9px 16px;
    border-radius: 5px;
    font-size: 14px;
    line-height: 20px;
    box-shadow: 0 2px 6px rgba(26, 62, 99, .08);
}

.DutyGroupPageActions .DutyGroupActionPrimary {
    border-color: #1976d2;
    background: #1976d2;
    color: #fff;
}

.DutyGroupPageActions .DutyGroupActionPrimary:hover,
.DutyGroupPageActions .DutyGroupActionPrimary:focus {
    border-color: #125da7;
    background: #125da7;
    color: #fff;
}

/* DutyHelp.js chèn nút Hướng dẫn bằng prepend; dùng order để nút luôn nằm cuối cụm tác vụ. */
.DutyGroupPage .DutyPageHelpButton {
    -webkit-box-ordinal-group: 100;
    -ms-flex-order: 99;
    order: 99;
}

.DutyExcelIcon {
    color: #159447;
}

.DutyGroupPanel {
    padding: 20px;
    border: 1px solid #e0e7ef;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 18px rgba(34, 62, 93, .08);
}

.DutyGroupGridShell {
    padding: 0;
}

.DutyGroupGridShell .k-grid {
    border: 1px solid #dce5ef;
    border-radius: 7px;
    background: #fff;
    overflow: hidden;
    box-shadow: none;
}

.DutyGroupGridShell .k-grid-header {
    border-bottom: 1px solid #d8e3ef;
    background: #f7faff;
}

.DutyGroupGridShell .k-grid-header th.k-header {
    height: 52px;
    padding: 0 14px;
    border-color: #e5ebf2;
    background: #f7faff;
    color: #1f2d4d;
    font-size: 14px;
    font-weight: 700;
    vertical-align: middle;
}

.DutyGroupGridShell .k-grid-header th.k-header > .k-link {
    color: #1f2d4d;
    line-height: 30px;
}

.DutyGroupGridShell .k-grid-header .k-grid-filter,
.DutyGroupGridShell .k-grid-header .k-header-column-menu {
    color: #5c6b84;
}

.DutyGroupGridShell .k-grid-content {
    background: #fff;
}

.DutyGroupGridShell .k-grid-content td {
    padding: 10px 14px;
    border-color: #edf1f5;
    color: #33435b;
    line-height: 20px;
}

.DutyGroupGridShell .k-grid tr:hover td {
    background: #f7fbff;
}

.DutyGroupGridShell .k-pager-wrap {
    min-height: 64px;
    padding: 11px 16px;
    border-top: 1px solid #dce5ef;
    background: #fff;
    color: #53657d;
}

.DutyGroupGridShell .k-pager-wrap .k-pager-numbers .k-state-selected,
.DutyGroupGridShell .k-pager-wrap .k-link.k-state-selected {
    border-color: #2c84e8;
    background: #2c84e8;
    color: #fff;
}

.DutyGroupEmptyState {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-height: 405px;
    padding: 35px 20px;
    color: #52637b;
    text-align: center;
}

.DutyGroupEmptyIcon {
    position: relative;
    width: 150px;
    height: 120px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: #f2f7fd;
    color: #9fbee5;
    font-size: 90px;
    line-height: 120px;
}

.DutyGroupEmptySearchIcon {
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    color: #6f97ce;
    font-size: 34px;
    line-height: 48px;
    box-shadow: 0 2px 8px rgba(57, 102, 158, .12);
}

.DutyGroupEmptyState h3 {
    margin: 0 0 8px 0;
    color: #1f2d4d;
    font-size: 25px;
    font-weight: 700;
}

.DutyGroupEmptyState p {
    margin: 0;
    color: #5f6f85;
    font-size: 14px;
}

.DutyStatusBadge {
    display: inline-block;
    min-width: 104px;
    padding: 5px 10px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

.DutyStatusActive {
    background: #e2f7ec;
    color: #17864f;
}

.DutyStatusInactive {
    background: #eef1f4;
    color: #667583;
}

.DutyGridActionButton {
    min-width: 62px;
    padding: 5px 9px !important;
    border-radius: 4px;
}

.DutyGroupActionCell {
    white-space: nowrap;
}

/* Cửa sổ thêm/sửa nhóm: chỉ có bốn trường nghiệp vụ, bố trí một trường trên một hàng. */
.DutyGroupForm .help-block,
.DutyGroupImportForm .help-block {
    margin: 6px 0 0 0;
    color: #738398;
    font-size: 12px;
    line-height: 18px;
}

.DutyGroupForm textarea.form-control {
    min-height: 115px;
    resize: vertical;
}

.DutyGroupForm .k-dropdown,
.DutyGroupForm .k-dropdown-wrap,
.DutyGroupForm .form-control {
    min-height: 36px;
}

.DutyGroupForm .k-dropdown-wrap .k-input {
    line-height: 32px;
}

/* Cửa sổ nhập biểu mẫu. */
.DutyGroupImportNotice {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid #cfe5f7;
    border-left: 4px solid #2788d9;
    border-radius: 5px;
    background: #f3f9fe;
    color: #38536d;
}

.DutyGroupImportNoticeIcon {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 42px;
    flex: 0 0 42px;
    color: #159447;
    font-size: 28px;
    line-height: 34px;
}

.DutyGroupImportNotice strong {
    display: block;
    margin-bottom: 4px;
    color: #1e4f78;
    font-size: 15px;
}

.DutyGroupImportNotice p {
    margin: 0;
    line-height: 20px;
}

.DutyGroupHiddenFileInput {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
}

.DutyGroupChooseFileButton {
    margin-right: 10px;
}

.DutyGroupSelectedFile {
    display: inline-block;
    max-width: 420px;
    color: #455a70;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

.DutyGroupImportRules {
    margin-top: 8px;
    padding: 13px 16px;
    border: 1px solid #e0e7ef;
    border-radius: 5px;
    background: #fbfcfe;
}

.DutyGroupImportRules h4 {
    margin: 0 0 9px 0;
    color: #275b87;
    font-size: 14px;
    font-weight: 700;
}

.DutyGroupImportRules ul {
    margin: 0;
    padding-left: 20px;
    color: #52637b;
    line-height: 21px;
}

@media (max-width: 1199px) {
    .DutyGroupPage .DutyGroupPageTitle {
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .DutyGroupPageActions {
        width: 100% !important;
        margin-top: 10px;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
}

@media (max-width: 767px) {
    .DutyGroupPage .DutyGroupPageTitle h3 {
        font-size: 24px;
        line-height: 34px;
    }

    .DutyGroupPageActions .btn,
    .DutyGroupPage .DutyPageHelpButton {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 calc(50% - 8px);
        flex: 1 1 calc(50% - 8px);
        min-width: 145px;
    }

    .DutyGroupPanel {
        padding: 10px;
        border-radius: 6px;
    }

    .DutyGroupEmptyState {
        min-height: 320px;
    }

    .DutyGroupSelectedFile {
        display: block;
        max-width: 100%;
        margin-top: 8px;
    }
}

/* ========================================================================== */
/* Hotfix 08 - Hoàn thiện Nhóm nhiệm vụ                                      */
/* ========================================================================== */
.DutyGroupGridShell .k-grid-header th.k-header,
.DutyGroupGridShell .k-grid-header th.k-header > .k-link,
.DutyGroupHeaderCenter {
    text-align: center !important;
    font-weight: 700 !important;
    vertical-align: middle !important;
}

.DutyGroupGridShell .k-grid-header th.k-header > .k-link {
    display: block;
}

.DutyGroupLegend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0 0 12px 0;
    padding: 10px 14px;
    border: 1px solid #e2eaf3;
    border-radius: 6px;
    background: #f8fbff;
    color: #52647c;
    font-size: 12px;
}

.DutyGroupLegend span { white-space: nowrap; }
.DutyGroupLegend .fa { margin-right: 4px; color: #287ec7; }

.DutyGroupCheckCell { vertical-align: middle !important; }
.DutyGroupRowCheck {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    vertical-align: middle;
}
.DutyGroupRowCheckDisabled { cursor: not-allowed; opacity: .4; }

.DutyGroupTreeTitle {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 30px;
    white-space: normal;
}

.DutyGroupTreeBranch {
    display: inline-block;
    width: 18px;
    margin-right: 2px;
    color: #9ab0c8;
    text-align: center;
}

.DutyGroupTreeToggle,
.DutyGroupTreeLeaf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    margin-right: 7px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #287fc6;
    font-size: 15px;
    line-height: 25px;
}

button.DutyGroupTreeToggle { cursor: pointer; }
button.DutyGroupTreeToggle:hover { color: #0d5ea3; }
.DutyGroupTreeLeaf { color: #91aac3; font-size: 7px; }
.DutyGroupTreeName { color: #243852; font-weight: 600; }

.DutyGroupIconButton {
    width: 32px;
    min-width: 32px !important;
    height: 30px;
    margin: 0 2px;
    padding: 0 !important;
    border-radius: 4px;
    background: #fff;
    line-height: 28px;
    text-align: center;
}

.DutyGroupEditButton { border: 1px solid #79aee6; color: #1976d2; }
.DutyGroupEditButton:hover { background: #eaf4ff; color: #0b5eaa; }
.DutyGroupDeleteButton { border: 1px solid #ef9c9c; color: #d64545; }
.DutyGroupDeleteButton:hover:not([disabled]) { background: #fff0f0; color: #b92c2c; }
.DutyGroupDeleteButton[disabled] { opacity: .35; cursor: not-allowed; }
.DutyGroupStatusButton { border: 1px solid #c8d4df; font-size: 18px; }
.DutyGroupStatusOn { color: #159447; }
.DutyGroupStatusOff { color: #798795; }
.DutyGroupStatusButton:hover { background: #f3f8fc; }

.DutyGroupDeleteReasonForm textarea { min-height: 100px; resize: vertical; }
.DutyGroupDeleteNotice {
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid #f4d3a2;
    border-left: 4px solid #f0a11a;
    border-radius: 5px;
    background: #fff9ef;
    color: #6a562f;
}
.DutyGroupDeleteNotice .fa { margin-right: 8px; color: #e79309; }

.DutyGroupImportToolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid #e0e8f1;
    border-radius: 5px;
    background: #fbfdff;
}
.DutyGroupImportFileArea,
.DutyGroupImportToolbarButtons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.DutyGroupImportSummary {
    margin-bottom: 10px;
    padding: 9px 12px;
    border: 1px solid #d7e4ef;
    border-radius: 5px;
    background: #f5f9fd;
    color: #3c5570;
}
.DutyGroupImportGlobalError { margin-top: 6px; }
.DutyGroupImportGridWrap {
    border: 1px solid #dbe5ef;
    border-radius: 5px;
    overflow: hidden;
}
.DutyGroupImportGridWrap .k-grid-header th.k-header,
.DutyGroupImportGridWrap .k-grid-header th.k-header > .k-link {
    background: #f4f8fc;
    color: #263a54;
    font-weight: 700;
    text-align: center !important;
}
.DutyGroupImportGridWrap .k-grid-content td { vertical-align: top; }
.DutyGroupImportErrorRow td { background: #fff6f6 !important; }
.DutyGroupImportValid { color: #14894e; font-weight: 600; }
.DutyGroupImportInvalid { color: #c73535; font-weight: 600; white-space: normal; }
.DutyGroupImportValid .fa,
.DutyGroupImportInvalid .fa { margin-right: 4px; }
.DutyGroupImportHint {
    margin-top: 10px;
    padding: 9px 12px;
    border-radius: 5px;
    background: #fff9e8;
    color: #6b5a2f;
    font-size: 12px;
}
.DutyGroupImportHint .fa { margin-right: 6px; color: #d69913; }

/* Việt hóa/điều chỉnh cửa sổ lọc Kendo của riêng Grid nhóm nhiệm vụ. */
.DutyGroupPage .k-filter-menu .k-label,
.DutyGroupPage .k-filter-menu label {
    color: #2f4158;
    font-weight: 600;
}

@media (max-width: 991px) {
    .DutyGroupImportToolbar { align-items: flex-start; flex-direction: column; }
    .DutyGroupImportFileArea,
    .DutyGroupImportToolbarButtons { width: 100%; }
}

/* ========================================================================== */
/* Hotfix 09 - Nhập nhiệm vụ từ Excel                                        */
/* ========================================================================== */
.DutyImportPage .DutyImportPageTitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.DutyImportPage .DutyImportPageTitle .title_left,
.DutyImportPage .DutyImportPageTitle .title_right {
    float: none !important;
    width: auto !important;
}

.DutyImportPage .DutyImportPageTitle h3 {
    margin: 0;
    color: #173f6f;
    font-size: 29px;
    font-weight: 700;
    line-height: 42px;
}

.DutyImportPage .DutyImportPageTitle h3 .fa {
    margin-right: 9px;
    color: #147bd1;
}

.DutyImportPageActions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.DutyImportPageActions .btn,
.DutyImportPage .DutyPageHelpButton {
    float: none !important;
    min-height: 40px;
    margin: 0 !important;
    padding: 9px 16px;
    border-radius: 5px;
    font-size: 14px;
}

.DutyImportHiddenFileInput {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
}

.DutyImportIntro {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    padding: 13px 16px;
    border: 1px solid #cce3f4;
    border-left: 4px solid #2384d4;
    border-radius: 6px;
    background: #f3f9fe;
    color: #3c5570;
}

.DutyImportIntroIcon {
    flex: 0 0 38px;
    padding-top: 1px;
    color: #2384d4;
    font-size: 25px;
}

.DutyImportIntro strong {
    display: block;
    margin-bottom: 4px;
    color: #1e4e78;
    font-size: 14px;
}

.DutyImportIntro p {
    margin: 0;
    line-height: 20px;
}

.DutyImportPanel {
    padding: 16px;
    border: 1px solid #e1e8f0;
    border-radius: 8px;
    box-shadow: 0 3px 11px rgba(31, 61, 92, .08);
}

.DutyImportGridLegend {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 10px;
    padding: 9px 12px;
    border: 1px solid #e2eaf2;
    border-radius: 5px;
    background: #fafcff;
    color: #56677c;
    font-size: 12px;
}

.DutyImportGridLegend .fa { margin-right: 4px; }
.DutyImportLegendSuccess { color: #169a58; }
.DutyImportLegendError { color: #d43d3d; }

.DutyImportGridShell .k-grid-header th.k-header,
.DutyImportGridShell .k-grid-header th.k-header > .k-link,
.DutyImportPreviewGrid .k-grid-header th.k-header,
.DutyImportPreviewGrid .k-grid-header th.k-header > .k-link,
.DutyImportHeaderCenter {
    text-align: center !important;
    font-weight: 700 !important;
    vertical-align: middle !important;
}

.DutyImportGridShell .k-grid-header th.k-header > .k-link,
.DutyImportPreviewGrid .k-grid-header th.k-header > .k-link {
    display: block;
}

.DutyImportGridShell .k-grid-header,
.DutyImportPreviewGrid .k-grid-header {
    background: #f3f7fc;
}

.DutyImportGridShell .k-grid-content td,
.DutyImportPreviewGrid .k-grid-content td {
    vertical-align: middle;
}

.DutyImportFileName {
    color: #2e435c;
    font-weight: 600;
}
.DutyImportFileName .fa { margin-right: 7px; color: #149451; }

.DutyImportCountSuccess { color: #148d50; font-weight: 700; }
.DutyImportCountWarning { color: #c67d0b; font-weight: 700; }
.DutyImportCountError { color: #cf3434; font-weight: 700; }

.DutyImportStatusBadge {
    display: inline-block;
    min-width: 112px;
    padding: 5px 9px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.DutyImportStatusBadge .fa { margin-right: 4px; }
.DutyImportStatusNeutral { background: #eef2f6; color: #637386; }
.DutyImportStatusError { background: #fdeaea; color: #c93434; }
.DutyImportStatusReady { background: #e8f7ef; color: #13864a; }
.DutyImportStatusDone { background: #def4e9; color: #087843; }
.DutyImportStatusWorking { background: #eaf3ff; color: #2773be; }

.DutyImportIconButton,
.DutyImportDeleteRowButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    min-width: 32px !important;
    height: 30px;
    padding: 0 !important;
    border: 1px solid #8cb7e1;
    border-radius: 4px;
    background: #fff;
    color: #176fb9;
    line-height: 28px;
}
.DutyImportIconButton:hover { background: #edf6ff; color: #0b5899; }
.DutyImportDeleteRowButton { border-color: #ef9b9b; color: #d23c3c; }
.DutyImportDeleteRowButton:hover { background: #fff0f0; color: #ad2626; }

.DutyImportEmptyState {
    min-height: 360px;
    padding-top: 80px;
    color: #55657b;
    text-align: center;
}
.DutyImportEmptyIcon {
    position: relative;
    display: inline-block;
    width: 130px;
    height: 100px;
    margin-bottom: 18px;
    color: #c8d8ea;
    font-size: 88px;
}
.DutyImportEmptySearchIcon {
    position: absolute;
    right: 0;
    bottom: 0;
    color: #7ca4d8;
    font-size: 42px;
}
.DutyImportEmptyState h3 { margin: 0 0 8px; color: #293a54; font-weight: 700; }
.DutyImportEmptyState p { margin: 0; }

/* Cửa sổ xem trước */
.DutyImportPreviewRoot { min-height: 100%; }
.DutyImportPreviewHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
    padding: 10px 13px;
    border: 1px solid #dae6f0;
    border-radius: 6px;
    background: #f8fbfe;
}
.DutyImportPreviewFile {
    display: flex;
    align-items: center;
    min-width: 260px;
}
.DutyImportPreviewFile > .fa {
    margin-right: 10px;
    color: #15964f;
    font-size: 27px;
}
.DutyImportPreviewFile span {
    display: block;
    color: #75859a;
    font-size: 11px;
}
.DutyImportPreviewFile strong {
    display: block;
    max-width: 430px;
    color: #253a54;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.DutyImportPreviewSummary {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;
}
.DutyImportPreviewSummary span {
    padding: 5px 8px;
    border: 1px solid #dce5ef;
    border-radius: 4px;
    background: #fff;
    color: #52647a;
    font-size: 12px;
}
.DutyImportSummaryOk { color: #16884e !important; }
.DutyImportSummaryWarning { color: #bb770f !important; }
.DutyImportSummaryError { color: #c73434 !important; }

.DutyImportPreviewNotice {
    margin-bottom: 10px;
    padding: 9px 12px;
    border: 1px solid #f0dfab;
    border-left: 4px solid #e0a820;
    border-radius: 5px;
    background: #fffbed;
    color: #685b32;
    line-height: 19px;
}
.DutyImportPreviewNotice .fa { margin-right: 7px; color: #d79b11; }

.DutyImportPreviewTabs > .k-content {
    padding: 10px !important;
    border-color: #dbe5ef !important;
}
.DutyImportPreviewTabs > .k-tabstrip-items .k-item { font-weight: 600; }
.DutyImportPreviewTabs > .k-tabstrip-items .fa { margin-right: 5px; }

.DutyImportPreviewToolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.DutyImportPreviewHint {
    color: #6f7d8f;
    font-size: 12px;
}

.DutyImportPreviewGrid {
    border: 1px solid #dbe5ef;
    border-radius: 4px;
    overflow: hidden;
}
.DutyImportPreviewGrid .k-grid-content td {
    white-space: normal;
    line-height: 18px;
}
.DutyImportPreviewGrid .k-edit-cell {
    background: #fffbe9 !important;
}
.DutyImportPreviewGrid .k-edit-cell input,
.DutyImportPreviewGrid .k-edit-cell .k-dropdown,
.DutyImportPreviewGrid .k-edit-cell .k-combobox {
    width: 100% !important;
}
.DutyImportDateInput { width: 100% !important; }

.DutyImportErrorRow td { background: #fff5f5 !important; }
.DutyImportWarningRow td { background: #fffaf0 !important; }
.DutyImportRowError { color: #c52f2f; font-size: 12px; line-height: 17px; }
.DutyImportRowWarning { color: #a96b09; font-size: 12px; line-height: 17px; }
.DutyImportRowValid { color: #13874b; font-weight: 600; }
.DutyImportRowPending { color: #7a8798; font-style: italic; }
.DutyImportRowError .fa,
.DutyImportRowWarning .fa,
.DutyImportRowValid .fa,
.DutyImportRowPending .fa { margin-right: 4px; }

.DutyImportPreviewEmpty {
    padding: 80px 20px;
    color: #718096;
    text-align: center;
}

.DutyImportPreviewGlobalError {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid #efc5c5;
    border-left: 4px solid #d94a4a;
    border-radius: 5px;
    background: #fff5f5;
    color: #a52c2c;
}
.DutyImportPreviewGlobalError .fa { margin-right: 6px; }

.DutyImportPreviewFooter {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;
}
.DutyImportPreviewFooter .btn { margin: 0 !important; }
.DutyImportPreviewFooter .DutyWindowHelpButton { margin-right: auto !important; }

/* Việt hóa vùng lọc Kendo của trang nhập */
.DutyImportPage .k-filter-menu .k-label,
.DutyImportPage .k-filter-menu label,
.DutyDataWindowWrapper .k-filter-menu .k-label,
.DutyDataWindowWrapper .k-filter-menu label {
    color: #2f4158;
    font-weight: 600;
}

@media (max-width: 1199px) {
    .DutyImportPage .DutyImportPageTitle {
        align-items: flex-start;
        flex-direction: column;
    }
    .DutyImportPageActions {
        width: 100% !important;
        justify-content: flex-start;
    }
    .DutyImportPreviewHeader {
        align-items: flex-start;
        flex-direction: column;
    }
    .DutyImportPreviewSummary { justify-content: flex-start; }
}

@media (max-width: 767px) {
    .DutyImportPage .DutyImportPageTitle h3 { font-size: 23px; line-height: 32px; }
    .DutyImportPageActions .btn,
    .DutyImportPage .DutyPageHelpButton {
        flex: 1 1 calc(50% - 8px);
        min-width: 145px;
    }
    .DutyImportPanel { padding: 9px; }
    .DutyImportPreviewToolbar { align-items: flex-start; flex-direction: column; }
    .DutyImportPreviewFile strong { max-width: 260px; }
}

/* ========================================================================== */
/* HOTFIX 12 - Cây cơ quan giao nhiệm vụ                                     */
/* ========================================================================== */
.DutyOfficeTreePage {
    font-family: Arial, Helvetica, sans-serif;
}
.DutyOfficeTreePage .DutyOfficeTreePageTitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}
.DutyOfficeTreePage .DutyOfficeTreePageTitle .title_left,
.DutyOfficeTreePage .DutyOfficeTreePageTitle .title_right {
    float: none !important;
    width: auto !important;
}
.DutyOfficeTreePage .DutyOfficeTreePageTitle h3 {
    margin: 0;
    color: #123f72;
    font-size: 28px;
    font-weight: 700;
}
.DutyOfficeTreePage .DutyOfficeTreePageTitle h3 .fa {
    margin-right: 8px;
    color: #1676ce;
}
.DutyOfficeTreeToolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}
.DutyOfficeTreeToolbar .btn {
    min-height: 38px;
    margin: 0 !important;
}
.DutyOfficeTreeIntro {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
    padding: 11px 14px;
    border: 1px solid #c9e0f2;
    border-left: 4px solid #2584cd;
    border-radius: 6px;
    background: #eef8ff;
    color: #31516c;
    line-height: 20px;
}
.DutyOfficeTreeIntro > .fa {
    margin-top: 2px;
    color: #237fc3;
    font-size: 20px;
}
.DutyOfficeTreeIntro strong,
.DutyOfficeTreeIntro span {
    display: block;
}
.DutyOfficeTreePanel {
    margin-bottom: 0;
    padding: 12px;
    border: 1px solid #dce5ed;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(26, 70, 110, .08);
}
.DutyOfficeTreeLayout {
    display: grid;
    grid-template-columns: minmax(420px, 1.35fr) minmax(330px, .65fr);
    gap: 14px;
    min-height: 580px;
}
.DutyOfficeTreeLeft,
.DutyOfficeTreeRight {
    min-width: 0;
    border: 1px solid #dbe5ee;
    border-radius: 7px;
    background: #fff;
    overflow: hidden;
}
.DutyOfficeTreeSectionTitle {
    padding: 12px 14px;
    border-bottom: 1px solid #dbe5ee;
    background: linear-gradient(#f8fbfe, #edf5fb);
    color: #164b7e;
    font-size: 16px;
    font-weight: 700;
}
.DutyOfficeTreeSectionTitle .fa { margin-right: 6px; }
.DutyOfficeTreeView {
    min-height: 520px;
    max-height: 650px;
    padding: 10px 8px;
    overflow: auto;
}
.DutyOfficeTreeView .k-treeview-lines,
.DutyOfficeTreeView .k-group {
    margin: 0;
}
.DutyOfficeTreeView .k-in {
    min-height: 34px;
    padding: 6px 9px !important;
    border-radius: 5px;
    color: #253d58;
    line-height: 21px;
}
.DutyOfficeTreeView .k-in.k-state-selected,
.DutyOfficeTreeView .k-in.k-state-focused,
.DutyOfficeTreeView .k-in:hover {
    background: #e9f4ff !important;
    color: #0c62a6 !important;
}
.DutyOfficeTreeNode .fa {
    width: 18px;
    margin-right: 4px;
    text-align: center;
}
.DutyOfficeTreeNodeActive .fa { color: #178c57; }
.DutyOfficeTreeNodeInactive { color: #8b96a3; text-decoration: none; }
.DutyOfficeTreeNodeInactive .fa { color: #d2962f; }
.DutyOfficeTreeEmpty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 500px;
    padding: 30px;
    color: #77879a;
    text-align: center;
}
.DutyOfficeTreeEmpty .fa {
    margin-bottom: 12px;
    color: #a8bed4;
    font-size: 52px;
}
.DutyOfficeTreeEmpty strong { color: #334c67; font-size: 18px; }
.DutyOfficeTreeEmpty span { margin-top: 6px; }
.DutyOfficeTreeDetail { padding: 16px; }
.DutyOfficeTreeDetailRow {
    display: grid;
    grid-template-columns: 155px minmax(0, 1fr);
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #edf1f5;
}
.DutyOfficeTreeDetailRow label {
    margin: 0;
    color: #52667b;
    font-weight: 700;
}
.DutyOfficeTreeDetailRow span { color: #243b53; }
.DutyOfficeTreeDetailNote,
.DutyOfficeTreeEditWarning {
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px solid #f0dba6;
    border-left: 4px solid #dea92d;
    border-radius: 5px;
    background: #fff9e9;
    color: #6c5a2b;
    line-height: 19px;
}
.DutyOfficeTreeEditWarning .fa { margin-right: 5px; color: #d29b1e; }
.DutyOfficeTreePage .DutyFormRow,
.DutyDataWindowWrapper .DutyFormRow {
    align-items: flex-start;
}
.DutyOfficeTreePage .k-multiselect,
.DutyDataWindowWrapper #DutyOfficeTreeOfficeIds + .k-multiselect,
.DutyDataWindowWrapper #DutyOfficeTreeAddParentId + .k-dropdown,
.DutyDataWindowWrapper #DutyOfficeTreeEditParentId + .k-dropdown {
    width: 100% !important;
}

/* ========================================================================== */
/* HOTFIX 12 - Nhập Excel chỉ tạo nhiệm vụ bản nháp                          */
/* ========================================================================== */
.DutyImportIntroHotfix12 {
    border-left-color: #159a6d;
    background: #effbf7;
}
.DutyImportSinglePreviewGrid {
    min-height: 430px;
}
.DutyImportSinglePreviewGrid .k-grid-content {
    min-height: 360px;
}
.DutyImportSuccessBox {
    padding: 24px 22px 18px;
    color: #3a4c60;
    text-align: center;
}
.DutyImportSuccessIcon {
    margin-bottom: 10px;
    color: #1b9b60;
    font-size: 58px;
}
.DutyImportSuccessBox h3 {
    margin: 0 0 14px;
    color: #174d7b;
    font-weight: 700;
}
.DutyImportSuccessBox p {
    margin: 7px 0;
    line-height: 20px;
}

@media (max-width: 1050px) {
    .DutyOfficeTreeLayout {
        grid-template-columns: 1fr;
    }
    .DutyOfficeTreeView { min-height: 420px; }
    .DutyOfficeTreeEmpty { min-height: 260px; }
}
@media (max-width: 767px) {
    .DutyOfficeTreePage .DutyOfficeTreePageTitle {
        align-items: flex-start;
        flex-direction: column;
    }
    .DutyOfficeTreeToolbar {
        justify-content: flex-start;
        width: 100% !important;
    }
    .DutyOfficeTreeToolbar .btn {
        flex: 1 1 calc(50% - 8px);
    }
    .DutyOfficeTreePage .DutyOfficeTreePageTitle h3 { font-size: 23px; }
    .DutyOfficeTreeDetailRow {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* ========================================================================== */
/* HOTFIX 13 - Hoàn thiện Cây cơ quan giao nhiệm vụ                          */
/* ========================================================================== */

/* Tên cơ quan trong TreeView phải luôn hiển thị đầy đủ, không bị co về chỉ còn icon. */
.DutyOfficeTreeView .DutyOfficeTreeNode {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
}

/* Cửa sổ thêm cơ quan cho phép chọn lại cấp cha nên dropdown phải chiếm toàn bộ chiều rộng. */
.DutyDataWindowWrapper #DutyOfficeTreeAddParentId + .k-dropdown {
    width: 100% !important;
}

/* Các nút của cửa sổ Cây cơ quan được căn giữa theo giao diện thống nhất. */
.DutyDataWindowWrapper #DutyOfficeTreeAddWindow .DutyWindowActionFooter,
.DutyDataWindowWrapper #DutyOfficeTreeEditWindow .DutyWindowActionFooter,
.DutyDataWindowWrapper #DutyOfficeTreeDeleteWindow .DutyWindowActionFooter {
    justify-content: center !important;
    text-align: center !important;
}

.DutyDataWindowWrapper #DutyOfficeTreeAddWindow .DutyWindowFooterHelpButton,
.DutyDataWindowWrapper #DutyOfficeTreeEditWindow .DutyWindowFooterHelpButton,
.DutyDataWindowWrapper #DutyOfficeTreeDeleteWindow .DutyWindowFooterHelpButton {
    margin-right: 0 !important;
}

/* Khi cửa sổ hẹp, nhãn và control vẫn thẳng hàng, dễ đọc. */
@media (max-width: 767px) {
    .DutyDataWindowWrapper #DutyOfficeTreeAddWindow .DutyWindowActionFooter,
    .DutyDataWindowWrapper #DutyOfficeTreeEditWindow .DutyWindowActionFooter,
    .DutyDataWindowWrapper #DutyOfficeTreeDeleteWindow .DutyWindowActionFooter {
        justify-content: center !important;
    }
}

/* ========================================================================== */
/* HOTFIX 14 - CÂY CƠ QUAN: TẠO GỐC, CHẾ ĐỘ CHỈ XEM VÀ XỬ LÝ HÀNG LOẠT      */
/* ========================================================================== */
.DutyOfficeTreeReadOnlyBadge {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid #bdd1e4;
    border-radius: 4px;
    background: #f4f8fc;
    color: #315a7d;
    font-weight: 600;
}

.DutyOfficeTreeCreatePanel {
    margin-top: 14px;
    border: 1px solid #c9dced;
    border-radius: 7px;
    box-shadow: 0 2px 8px rgba(31, 78, 121, 0.08);
}

.DutyOfficeTreeCreateTitle {
    color: #0c568d;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
}

.DutyOfficeTreeCreateTitle .fa { margin-right: 7px; }

.DutyOfficeTreeCreateText {
    color: #52677a;
    margin-bottom: 16px;
    line-height: 1.55;
}

.DutyOfficeTreeCreateForm {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 980px;
}

.DutyOfficeTreeCreateForm > label {
    min-width: 125px;
    margin: 0;
    color: #294b69;
    font-weight: 700;
}

.DutyOfficeTreeCreateForm > .k-dropdown,
.DutyOfficeTreeCreateForm > select {
    flex: 1 1 auto;
    min-width: 300px;
}

.DutyOfficeTreeCreateForm > .btn { min-width: 120px; }

.DutyOfficeTreeNoDataPanel { margin-top: 14px; }
.DutyOfficeTreeNoData {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #6d7e8e;
    text-align: center;
}
.DutyOfficeTreeNoData > .fa { font-size: 58px; color: #a9c2d9; margin-bottom: 16px; }
.DutyOfficeTreeNoData > strong { color: #334e68; font-size: 21px; }
.DutyOfficeTreeNoData > span { margin-top: 8px; font-size: 15px; }

.DutyOfficeTreeBulkBar {
    margin: 14px 0 10px;
    padding: 10px 14px;
    border: 1px solid #b9d4ec;
    border-radius: 6px;
    background: #eef7ff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.DutyOfficeTreeBulkSummary {
    color: #1c527f;
    font-weight: 600;
    white-space: nowrap;
}
.DutyOfficeTreeBulkSummary .fa { margin-right: 5px; }
.DutyOfficeTreeBulkActions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}
.DutyOfficeTreeBulkActions .btn { margin: 0; }

.DutyOfficeTreeView .k-checkbox-wrapper,
.DutyOfficeTreeView input[type="checkbox"] {
    margin-right: 5px;
    vertical-align: middle;
}

.DutyOfficeTreeView input[type="checkbox"]:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.DutyBulkInfo {
    margin: 6px 0 16px;
    padding: 10px 12px;
    background: #eef7ff;
    border-left: 4px solid #2b8bd6;
    color: #315a7d;
    font-size: 15px;
}
.DutyBulkInfo .fa { margin-right: 5px; }
.DutyBulkDeleteHelp { margin: 0 20px 12px; }

.DutyDataWindowWrapper #DutyOfficeTreeBulkParentId + .k-dropdown {
    width: 100% !important;
}

.DutyDataWindowWrapper #DutyOfficeTreeBulkMoveWindow .DutyWindowActionFooter,
.DutyDataWindowWrapper #DutyOfficeTreeBulkDeleteWindow .DutyWindowActionFooter {
    justify-content: center !important;
}

@media (max-width: 900px) {
    .DutyOfficeTreeCreateForm {
        display: block;
    }
    .DutyOfficeTreeCreateForm > label {
        display: block;
        margin-bottom: 6px;
    }
    .DutyOfficeTreeCreateForm > .k-dropdown,
    .DutyOfficeTreeCreateForm > select {
        width: 100% !important;
        min-width: 0;
        margin-bottom: 10px;
    }
    .DutyOfficeTreeBulkBar {
        display: block;
    }
    .DutyOfficeTreeBulkActions {
        margin-top: 10px;
        justify-content: flex-start;
    }
}
.DutyDataWindowWrapper #DutyOfficeTreeRecreateRootOfficeId + .k-dropdown {
    width: 100% !important;
}
.DutyDataWindowWrapper #DutyOfficeTreeRecreateWindow .DutyWindowActionFooter {
    justify-content: center !important;
}


/* ========================================================================
   HOTFIX 15 - CÂY CƠ QUAN GIAO NHIỆM VỤ
   ======================================================================== */

/*
 * Khối hướng dẫn ngắn phía trên TreeView.
 * Mục tiêu là giúp người dùng nhận biết ngay cách chọn nhiều cơ quan mà không
 * phải mở cửa sổ Hướng dẫn.
 */
.DutyOfficeTreeSelectionHint,
.DutyOfficeTreeReadOnlyHint {
    margin: 10px 12px 8px;
    padding: 9px 12px;
    border-radius: 5px;
    font-size: 14px;
    line-height: 1.45;
}

.DutyOfficeTreeSelectionHint {
    color: #245b85;
    background: #eef7ff;
    border: 1px solid #c4dff4;
}

.DutyOfficeTreeReadOnlyHint {
    color: #5b6570;
    background: #f7f8fa;
    border: 1px solid #dde2e7;
}

.DutyOfficeTreeSelectionHint .fa,
.DutyOfficeTreeReadOnlyHint .fa {
    margin-right: 6px;
}

/*
 * Hotfix 15 không dùng checkbox mặc định của Kendo TreeView.
 * Checkbox được vẽ chủ động trong template để bảo đảm tương thích với Kendo UI 2020.1.219.
 */
.DutyOfficeTreeNodeLine {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    vertical-align: middle;
}

.DutyOfficeTreeBulkCheck,
.DutyOfficeTreeBulkCheckPlaceholder {
    width: 18px;
    height: 18px;
    margin: 0 8px 0 1px !important;
    flex: 0 0 18px;
    vertical-align: middle;
}

.DutyOfficeTreeBulkCheck {
    cursor: pointer;
    accent-color: #2b8bd6;
}

.DutyOfficeTreeBulkCheckPlaceholder {
    display: inline-block;
}

/*
 * Làm nổi nhẹ nút đang được tích chọn để người dùng dễ rà soát danh sách
 * trước khi bấm tác vụ hàng loạt.
 */
.DutyOfficeTreeView .k-in.DutyOfficeTreeBulkSelected {
    background: #eaf4ff !important;
    border-color: #9ec7ee !important;
}

.DutyOfficeTreeView .k-in.DutyOfficeTreeBulkSelected .DutyOfficeTreeNode {
    font-weight: 600;
}

/*
 * Bảo đảm checkbox không bị CSS Kendo cũ co về 0 hoặc bị che khuất.
 */
.DutyOfficeTreeView input.DutyOfficeTreeBulkCheck[type="checkbox"] {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
}

/* Trên màn hình nhỏ, phần gợi ý không làm tràn chiều ngang. */
@media (max-width: 767px) {
    .DutyOfficeTreeSelectionHint,
    .DutyOfficeTreeReadOnlyHint {
        margin-left: 6px;
        margin-right: 6px;
        font-size: 13px;
    }
}

/* ========================================================================
   HOTFIX 18 - ĐA TUYẾN GIAO NHIỆM VỤ
   ======================================================================== */
.DutyOfficeTreeRouteBadge {
    display: inline-block;
    margin-left: 7px;
    padding: 1px 7px;
    border: 1px solid #9ec7ee;
    border-radius: 10px;
    background: #eef7ff;
    color: #22669d;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
}

.DutyOfficeTreeOfficeOption { padding: 4px 2px; line-height: 1.35; }
.DutyOfficeTreeOptionRouteBadge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 9px;
    background: #fff4d8;
    color: #8a6215;
    font-size: 11px;
}
.DutyOfficeTreeOptionRouteNew { background: #eaf7ef; color: #27814e; }
.DutyOfficeTreeOptionRouteSummary { margin-top: 2px; color: #6d7885; font-size: 12px; white-space: normal; }

.DutyAssignRouteCell { line-height: 1.35; }
.DutyAssignRouteCell > div { margin-top: 3px; color: #59697a; font-size: 12px; white-space: normal; }
.DutyAssignRouteOption { padding: 4px 2px; line-height: 1.35; }
.DutyAssignRoutePath { margin-top: 2px; color: #5b6876; font-size: 12px; white-space: normal; }
.DutyAssignRouteWarning { margin-top: 3px; color: #a46700; font-size: 12px; white-space: normal; }

.DutyRouteInfoBox,
.DutyReportRouteContext {
    margin: 0 0 14px;
    padding: 11px 14px;
    border: 1px solid #c9dfef;
    border-left: 4px solid #2b8bd6;
    border-radius: 5px;
    background: #f4faff;
    color: #36556f;
    line-height: 1.5;
}
.DutyRouteInfoBoxCompact { margin: 8px 0 10px; }
.DutyRouteInfoBox > .fa { margin-right: 6px; color: #287dbd; }

.DutyReportRouteContextTitle {
    margin-bottom: 8px;
    color: #185a8d;
    font-weight: 700;
    font-size: 16px;
}
.DutyReportRouteContextTitle .fa { margin-right: 6px; }
.DutyReportRouteContextGrid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 5px 18px;
}
.DutyReportRouteContextGrid > div { display: grid; grid-template-columns: 155px 1fr; min-width: 0; }
.DutyReportRouteContextGrid label { margin: 0; color: #34495e; }
.DutyReportRouteContextGrid span { overflow-wrap: anywhere; }
.DutyReportRouteContextGrid .DutyReportRouteContextFull { grid-column: 1 / -1; }
.DutyReportRouteContextNote { margin-top: 8px; padding-top: 7px; border-top: 1px dashed #c4d9e8; font-size: 13px; }
.DutyApprovalRouteContext { margin-bottom: 12px; padding: 10px 12px; background: #f5faff; border: 1px solid #d5e5f2; border-radius: 4px; }
.DutyApprovalRouteContext p { margin: 3px 0; }

@media (max-width: 900px) {
    .DutyReportRouteContextGrid { grid-template-columns: 1fr; }
    .DutyReportRouteContextGrid .DutyReportRouteContextFull { grid-column: auto; }
}
@media (max-width: 600px) {
    .DutyReportRouteContextGrid > div { grid-template-columns: 1fr; }
    .DutyReportRouteContextGrid label { margin-bottom: 2px; }
}


/* ========================================================================
   HOTFIX 19 - BỘ CHỌN CƠ QUAN DẠNG CÂY VÀ THU GỌN CÂY MẶC ĐỊNH
   ======================================================================== */
.DutyOfficeTreeAddIntro {
    margin: 0 0 12px;
    padding: 10px 13px;
    border: 1px solid #cfe2f2;
    border-left: 4px solid #2d8bd4;
    border-radius: 4px;
    background: #f5fbff;
    color: #38566f;
    line-height: 1.45;
}
.DutyOfficeTreeAddIntro .fa { margin-right: 7px; color: #2682c4; }

.DutyOfficeTreeAddPickerLayout {
    display: flex;
    gap: 14px;
    align-items: stretch;
    min-height: 470px;
}
.DutyOfficeTreeAddPickerPanel {
    flex: 1 1 50%;
    min-width: 0;
    border: 1px solid #d8e2eb;
    border-radius: 5px;
    background: #fff;
    overflow: hidden;
}
.DutyOfficeTreeAddPickerTitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 44px;
    padding: 10px 12px;
    border-bottom: 1px solid #d7e3ed;
    background: #eef6fc;
    color: #174f7a;
    font-weight: 700;
}
.DutyOfficeTreeAddPickerTitle .fa { margin-right: 6px; }
.DutyOfficeTreeAddPickerSummary {
    padding: 8px 12px;
    border-bottom: 1px solid #edf1f4;
    background: #fbfdff;
    color: #526575;
    font-size: 13px;
}
.DutyOfficeTreeAddPickerSummary strong { color: #164f7b; }
.DutyOfficeTreeAddSelectedBadge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    background: #dff2ff;
    color: #176799;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.DutyOfficeTreePickerTree {
    height: 420px;
    padding: 8px 6px 12px 8px;
    overflow: auto;
    background: #fff;
}
.DutyOfficeTreeParentPickerTree { height: 385px; }
.DutyOfficeTreePickerTree .k-treeview-lines,
.DutyOfficeTreePickerTree .k-group {
    margin: 0;
    padding-left: 0;
}
.DutyOfficeTreePickerTree .k-in {
    min-height: 30px;
    padding: 5px 7px;
    border-radius: 4px;
    line-height: 20px;
}
.DutyOfficeTreePickerTree .k-in.k-state-selected,
.DutyOfficeTreePickerTree .k-in.k-state-focused {
    border-color: #9cc7eb;
    background: #e7f3fd;
    color: #15547f;
}
.DutyOfficeTreePickerParentNode .fa {
    width: 15px;
    color: #2180bc;
}
.DutyOfficeTreeOfficePickerLine {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}
.DutyOfficeTreeAddOfficeCheck {
    width: 17px !important;
    height: 17px !important;
    margin: 0 4px 0 0 !important;
    vertical-align: middle;
    cursor: pointer;
    flex: 0 0 auto;
}
.DutyOfficeTreeAddOfficeCheck:disabled {
    cursor: not-allowed;
    opacity: .55;
}
.DutyOfficeTreeOfficePickerTitle {
    color: #223f59;
    white-space: normal;
}
.DutyOfficeTreeOfficePickerTitle .fa { color: #178d59; }
.DutyOfficeTreeOfficePickerLineDisabled .DutyOfficeTreeOfficePickerTitle {
    color: #8b96a1;
}
.DutyOfficeTreePickerDisabledReason {
    display: inline-block;
    margin-left: 5px;
    color: #9b6a22;
    font-size: 11px;
    white-space: normal;
}
.DutyOfficeTreePickerState {
    margin: 12px;
    padding: 10px 12px;
    border: 1px dashed #cbd7e1;
    border-radius: 4px;
    background: #fafcfd;
    color: #667887;
    text-align: center;
}
.DutyOfficeTreeAddHelp {
    margin-top: 10px;
    padding: 8px 10px;
    border-left: 3px solid #e2a329;
    background: #fffaf0;
    color: #6e5a32;
}
.DutyDataWindowWrapper #DutyOfficeTreeAddWindow .DutyWindowActionFooter,
.DutyDataWindowWrapper #DutyOfficeTreeAddWindow .modal-footer {
    justify-content: center;
    text-align: center;
}

@media (max-width: 900px) {
    .DutyOfficeTreeAddPickerLayout {
        display: block;
        min-height: 0;
    }
    .DutyOfficeTreeAddPickerPanel {
        margin-bottom: 12px;
    }
    .DutyOfficeTreePickerTree,
    .DutyOfficeTreeParentPickerTree {
        height: 300px;
    }
}

/* ========================================================================== */
/* HOTFIX 20 - Lọc/chọn nhanh cơ quan và hiển thị đầy đủ các tuyến           */
/* ========================================================================== */
.DutyOfficeTreeAddOfficeTools {
    padding: 9px 10px 8px;
    border-bottom: 1px solid #e1e8ef;
    background: #fbfdff;
}
.DutyOfficeTreeAddSearchBox {
    position: relative;
    display: flex;
    align-items: center;
}
.DutyOfficeTreeAddSearchBox > .fa-search {
    position: absolute;
    left: 11px;
    z-index: 2;
    color: #5d7690;
    pointer-events: none;
}
.DutyOfficeTreeAddSearchBox .form-control {
    height: 35px;
    padding-left: 32px;
    padding-right: 34px;
    border-color: #cbd9e5;
    box-shadow: none;
}
.DutyOfficeTreeAddSearchBox .form-control:focus {
    border-color: #6eb1e4;
    box-shadow: 0 0 0 2px rgba(45,139,212,.10);
}
.DutyOfficeTreeAddSearchClear {
    position: absolute;
    right: 5px;
    top: 4px;
    width: 27px;
    height: 27px;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: #7a8d9f;
}
.DutyOfficeTreeAddSearchClear:hover,
.DutyOfficeTreeAddSearchClear:focus {
    background: #edf4fa;
    color: #285f8b;
    outline: 0;
}
.DutyOfficeTreeAddBulkTools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-top: 8px;
    min-height: 28px;
}
.DutyOfficeTreeAddSelectAllLabel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: #244965;
    font-weight: 600;
    cursor: pointer;
}
.DutyOfficeTreeAddSelectAllLabel input {
    width: 16px;
    height: 16px;
    margin: 0;
}
.DutyOfficeTreeAddSelectAllLabel input:disabled + span {
    color: #9aa7b2;
    cursor: default;
}
.DutyOfficeTreeAddVisibleCount {
    margin-left: auto;
    color: #64798c;
    font-size: 12px;
    white-space: nowrap;
}
.DutyOfficeTreeOfficePickerTree {
    height: 330px;
}

.DutyOfficeTreeDetailRoutesBlock {
    margin: 10px 0 2px;
    padding: 10px;
    border: 1px solid #dce6ef;
    border-radius: 5px;
    background: #f9fcff;
}
.DutyOfficeTreeDetailRoutesTitle {
    margin-bottom: 8px;
    color: #315a7c;
    font-size: 13px;
    font-weight: 700;
}
.DutyOfficeTreeDetailRoutesTitle .fa {
    margin-right: 5px;
    color: #2b86c5;
}
.DutyOfficeTreeRouteItem {
    margin-top: 7px;
    padding: 8px 9px;
    border: 1px solid #e3e9ef;
    border-left: 3px solid #9eb4c6;
    border-radius: 4px;
    background: #fff;
}
.DutyOfficeTreeRouteItem:first-child { margin-top: 0; }
.DutyOfficeTreeRouteItemCurrent {
    border-color: #b8d9f2;
    border-left-color: #2d8bd4;
    background: #f1f8fe;
}
.DutyOfficeTreeRouteItemHeader {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 5px;
}
.DutyOfficeTreeRouteNumber {
    color: #284d69;
    font-weight: 700;
}
.DutyOfficeTreeRouteCurrentBadge,
.DutyOfficeTreeRouteState {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 11px;
    line-height: 16px;
    white-space: nowrap;
}
.DutyOfficeTreeRouteCurrentBadge {
    background: #dcefff;
    color: #1d679c;
}
.DutyOfficeTreeRouteState { margin-left: auto; }
.DutyOfficeTreeRouteStateActive {
    background: #e1f5e9;
    color: #197546;
}
.DutyOfficeTreeRouteStateInactive {
    background: #f3f0ea;
    color: #806a47;
}
.DutyOfficeTreeRoutePathText {
    color: #344e64;
    font-size: 12px;
    line-height: 18px;
    overflow-wrap: anywhere;
}
.DutyOfficeTreeRouteEmpty {
    padding: 7px 0;
    color: #7d8d9b;
    font-style: italic;
}

@media (max-width: 900px) {
    .DutyOfficeTreeOfficePickerTree { height: 360px; }
    .DutyOfficeTreeAddVisibleCount {
        width: 100%;
        margin-left: 0;
    }
}

/* ============================================================================
 * Hotfix 21 - Danh sách nhiệm vụ và Đợt giao nhiệm vụ
 * ========================================================================== */

/* ---------- Danh sách nhiệm vụ ---------- */
.DutyTaskPage {
    padding: 12px 0 24px;
}

.DutyTaskPage .DutyTaskPageTitle,
.DutyAssignPage .DutyAssignPageTitle {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    min-height: 72px;
    margin-bottom: 14px;
}

.DutyTaskPage .DutyTaskPageTitle .title_left,
.DutyAssignPage .DutyAssignPageTitle .title_left {
    float: none;
    width: auto;
}

.DutyTaskPage .DutyTaskPageTitle .title_right,
.DutyAssignPage .DutyAssignPageTitle .title_right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    float: none;
    width: auto;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    gap: 8px;
}

.DutyTaskPage .DutyTaskPageTitle h3,
.DutyAssignPage .DutyAssignPageTitle h3 {
    margin: 0 0 5px;
    color: #123f70;
    font-size: 27px;
    font-weight: 700;
}

.DutyTaskPage .DutyTaskPageTitle h3 .fa,
.DutyAssignPage .DutyAssignPageTitle h3 .fa {
    margin-right: 8px;
    color: #287fc7;
}

.DutyTaskPageSubtitle,
.DutyAssignPageSubtitle {
    color: #718096;
    font-size: 13px;
}

.DutyTaskPageActions .btn,
.DutyAssignPageActions .btn,
.DutyTaskPage .DutyPageHelpButton,
.DutyAssignPage .DutyPageHelpButton {
    min-height: 40px;
    padding: 8px 15px;
    border-radius: 5px;
    font-weight: 600;
}

.DutyTaskPage .DutyPageHelpButton,
.DutyAssignPage .DutyPageHelpButton {
    float: none !important;
    margin: 0 !important;
}

.DutyTaskPrimaryAction,
.DutyAssignPrimaryAction {
    box-shadow: 0 3px 10px rgba(33, 150, 243, .18);
}

.DutyTaskPanel,
.DutyAssignPanel {
    padding: 18px;
    border: 1px solid #dce6ef;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(36, 61, 86, .08);
}

.DutyTaskGridShell,
.DutyAssignGridShell {
    padding: 0 !important;
}

.DutyTaskGridShell .k-grid,
.DutyAssignGridShell .k-grid {
    border: 1px solid #dce5ed;
    border-radius: 6px;
    overflow: hidden;
}

.DutyTaskGridShell .k-grid-header,
.DutyAssignGridShell .k-grid-header {
    background: #f4f8fc;
}

.DutyTaskGridShell .k-grid-header th.k-header,
.DutyTaskGridShell .k-grid-header th.k-header > .k-link,
.DutyTaskGridHeader,
.DutyAssignGridShell .k-grid-header th.k-header,
.DutyAssignGridShell .k-grid-header th.k-header > .k-link,
.DutyAssignGridHeader {
    color: #26384f !important;
    font-weight: 700 !important;
    text-align: center !important;
}

.DutyTaskGridShell .k-grid-content td,
.DutyAssignGridShell .k-grid-content td {
    padding-top: 10px;
    padding-bottom: 10px;
    border-color: #e8eef4;
}

.DutyTaskGridShell .k-grid tr:hover td,
.DutyAssignGridShell .k-grid tr:hover td {
    background: #f8fbff;
}

.DutyTaskGridShell .k-pager-wrap,
.DutyAssignGridShell .k-pager-wrap {
    padding: 8px 10px;
    border-top: 1px solid #dde6ee;
    background: #fbfdff;
}

.DutyTaskTitleCell strong {
    display: block;
    color: #243b53;
    font-weight: 600;
    line-height: 1.45;
}

.DutyTaskCodeHint {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 7px;
    border-radius: 10px;
    background: #edf4fb;
    color: #4b6b88;
    font-size: 11px;
}

.DutyTaskStatusBadge,
.DutyAssignStatusBadge {
    display: inline-block;
    min-width: 100px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.DutyTaskStatusDraft,
.DutyAssignStatusDraft { background: #eef2f7; color: #596a7d; }
.DutyTaskStatusActive,
.DutyAssignStatusActive { background: #e7f7ef; color: #137748; }
.DutyTaskStatusCompleted,
.DutyAssignStatusDone { background: #e4f6ee; color: #0f8150; }
.DutyTaskStatusCancelled,
.DutyAssignStatusCancelled { background: #fdeaea; color: #b83a3a; }
.DutyAssignStatusPartial { background: #fff3db; color: #a56a00; }

.DutyTaskActionCell,
.DutyTaskSequenceCell { vertical-align: middle !important; }

.DutyTaskGridAction { white-space: nowrap; }

.DutyTaskEmptyState,
.DutyAssignEmptyState {
    min-height: 330px;
    padding: 75px 20px 30px;
    color: #718096;
    text-align: center;
}

.DutyTaskEmptyIcon {
    position: relative;
    display: inline-block;
    width: 110px;
    height: 88px;
    margin-bottom: 16px;
    color: #c7d8e8;
    font-size: 70px;
}

.DutyTaskEmptySearchIcon {
    position: absolute;
    right: 3px;
    bottom: 0;
    color: #7ea7d2;
    font-size: 34px;
}

.DutyTaskEmptyState h3,
.DutyAssignEmptyState h3 {
    margin: 0 0 7px;
    color: #30445d;
    font-weight: 700;
}

/* Cửa sổ nhiệm vụ: mỗi trường một hàng, luôn chừa lề phải để control không sát mép. */
.DutyTaskForm {
    width: 100%;
}

.DutyTaskForm .DutyWindowScrollBody {
    padding: 18px 28px 16px 24px !important;
}

.DutyTaskFormSection {
    margin-bottom: 16px;
    padding: 0 16px 5px;
    border: 1px solid #dce7f0;
    border-radius: 7px;
    background: #fff;
}

.DutyTaskFormSectionTitle {
    margin: 0 -16px 12px;
    padding: 10px 14px;
    border-bottom: 1px solid #dce7f0;
    border-radius: 7px 7px 0 0;
    background: #f2f7fb;
    color: #15568c;
    font-size: 15px;
    font-weight: 700;
}

.DutyTaskFormSectionTitle .fa { margin-right: 6px; }

.DutyTaskFormRow {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    margin-bottom: 11px;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.DutyTaskFormRow > label {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 215px;
    flex: 0 0 215px;
    width: 215px;
    margin: 0;
    padding: 8px 14px 0 0;
    color: #34495e;
    font-weight: 600;
    text-align: right;
}

.DutyTaskFormRow > label::after { content: " :"; }

.DutyTaskFormControl {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 4px;
}

.DutyTaskFormControl .form-control,
.DutyTaskFormControl textarea,
.DutyTaskFormControl .k-widget,
.DutyTaskFormControl .k-multiselect,
.DutyTaskFormControl .k-dropdown {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.DutyTaskFormControl textarea {
    resize: vertical;
}

.DutyTaskFormControl .help-block {
    margin: 4px 0 0;
    color: #7d8b99;
    font-size: 12px;
}

.DutyTaskCheckboxControl { padding-top: 6px; }
.DutyTaskInlineCheck { margin: 0; font-weight: 400; }
.DutyTaskInlineCheck input { margin-right: 6px; }

.DutyTaskPublishNotice {
    margin-bottom: 14px;
    padding: 10px 14px;
    border-left: 4px solid #23a66b;
    border-radius: 4px;
    background: #edf9f3;
    color: #2d5d47;
}

.DutyTaskPublishNotice .fa { margin-right: 6px; color: #15975c; }

.DutyTaskForm .DutyWindowActionFooter,
.DutyTaskFormFooter {
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    padding-left: 16px !important;
    text-align: center !important;
}

.DutyTaskForm .DutyWindowFooterHelpButton { margin-right: 0 !important; }

.DutyTaskPublishButtonFocus {
    box-shadow: 0 0 0 3px rgba(38, 174, 110, .20) !important;
}

/* ---------- Đợt giao nhiệm vụ / Wizard ---------- */
.DutyAssignPage { padding: 12px 0 24px; }

.DutyAssignWizardForm {
    width: 100%;
    background: #f7fafc;
}

.DutyAssignWizardForm .DutyWindowScrollBody {
    padding: 16px 20px 18px !important;
    background: #f7fafc;
}

.DutyAssignWizardHeader {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 14px;
    padding: 12px 15px;
    border: 1px solid #cfe2f3;
    border-radius: 7px;
    background: #edf6fd;
    color: #34546f;
}

.DutyAssignWizardHeaderIcon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 42px;
    height: 42px;
    margin-right: 12px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 50%;
    background: #2f80c9;
    color: #fff;
    font-size: 19px;
}

.DutyAssignWizardHeader strong { color: #174f7c; font-size: 16px; }
.DutyAssignWizardHeader p { margin: 4px 0 0; }

.DutyAssignGeneralPanel,
.DutyAssignStepCard {
    margin-bottom: 14px;
    border: 1px solid #d9e5ee;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(43, 68, 93, .05);
    overflow: hidden;
}

.DutyAssignSectionTitle {
    padding: 11px 15px;
    border-bottom: 1px solid #dce6ef;
    background: #f5f9fc;
    color: #184f7a;
    font-weight: 700;
}
.DutyAssignSectionTitle .fa { margin-right: 6px; }

.DutyAssignGeneralGrid {
    display: -ms-grid;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(220px, .8fr);
    gap: 12px 16px;
    padding: 14px 16px 16px;
}

.DutyAssignGeneralField label,
.DutyAssignQuickField > label:first-child {
    display: block;
    margin-bottom: 5px;
    color: #34495e;
    font-weight: 600;
}

.DutyAssignGeneralFieldFull { grid-column: 1 / -1; }
.DutyAssignGeneralField .form-control { width: 100%; }

.DutyAssignStepHeader {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 68px;
    padding: 11px 14px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: 1px solid #e0e8ef;
    background: #fbfdff;
}

.DutyAssignStepNumber {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 38px;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    margin-right: 11px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 50%;
    background: #2d80c9;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}

.DutyAssignStepCardTwo .DutyAssignStepNumber { background: #21a179; }
.DutyAssignStepCardThree .DutyAssignStepNumber { background: #e79a20; }

.DutyAssignStepText {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
}
.DutyAssignStepText strong { display: block; color: #233d58; font-size: 15px; }
.DutyAssignStepText span { display: block; margin-top: 2px; color: #728196; font-size: 12px; }
.DutyAssignStepAction { margin-left: 12px; }
.DutyAssignStepBody { padding: 12px 14px 14px; }
.DutyAssignStepBodyCompact { padding: 10px 14px; }

.DutyAssignRouteNotice,
.DutyAssignEditHint {
    padding: 9px 12px;
    border-radius: 5px;
    background: #eef7fd;
    color: #48647d;
    line-height: 1.5;
}
.DutyAssignRouteNotice .fa,
.DutyAssignEditHint .fa { margin-right: 6px; color: #287fc7; }

.DutyAssignStepEmpty {
    min-height: 90px;
    padding: 30px 15px;
    color: #7c8b99;
    text-align: center;
}
.DutyAssignStepEmpty .fa { margin-right: 5px; color: #8eacc5; }

.DutyAssignRecipientCount {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    background: #edf5fc;
    color: #25679d;
    font-size: 12px;
    font-weight: 600;
}

.DutyAssignQuickDefaults {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 10px 12px;
    padding: 12px 14px;
    border-bottom: 1px solid #e3eaf0;
    background: #fffaf1;
}

.DutyAssignQuickDefaultsTitle {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    color: #9b6814;
    font-weight: 700;
}
.DutyAssignQuickDefaultsTitle .fa { margin-right: 5px; }

.DutyAssignQuickField { min-width: 185px; }
.DutyAssignQuickField .k-widget { width: 100%; }
.DutyAssignQuickCheck { min-width: 125px; }
.DutyAssignQuickAction { min-width: 170px; }
.DutyAssignInlineCheck { display: block; padding-top: 8px; font-weight: 400 !important; }
.DutyAssignInlineCheck input { margin-right: 5px; }

.DutyAssignEditHint { margin-top: 8px; background: #f8fafc; }

.DutyAssignWizardForm .k-grid-header th.k-header,
.DutyAssignWizardForm .k-grid-header th.k-header > .k-link,
.DutyAssignPickerWindowBody .k-grid-header th.k-header,
.DutyAssignPickerWindowBody .k-grid-header th.k-header > .k-link {
    color: #2c4056 !important;
    font-weight: 700 !important;
    text-align: center !important;
}

.DutyAssignRouteCell,
.DutyAssignRoutePathText {
    color: #566b7f;
    font-size: 12px;
    line-height: 1.45;
    white-space: normal;
}

.DutyAssignYes { color: #12804f; font-weight: 700; }

.DutyAssignRouteWarningText { color: #b36b00; font-size: 12px; line-height: 1.4; }
.DutyAssignRouteOkText { color: #158052; font-size: 12px; }
.DutyAssignRouteWarningText .fa,
.DutyAssignRouteOkText .fa { margin-right: 4px; }

.DutyAssignWizardForm .DutyWindowActionFooter,
.DutyAssignWizardFooter,
.DutyAssignPickerWindowBody .DutyWindowActionFooter,
.DutyAssignPickerFooter {
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.DutyAssignWizardForm .DutyWindowFooterHelpButton,
.DutyAssignPickerWindowBody .DutyWindowFooterHelpButton { margin-right: 0 !important; }

/* Cửa sổ chọn nhiệm vụ/cơ quan nhận */
.DutyAssignPickerWindowBody {
    width: 100%;
}

.DutyAssignPickerWindowBody .DutyWindowScrollBody {
    padding: 14px 18px 12px !important;
}

.DutyAssignPickerNotice {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 12px;
    padding: 10px 12px;
    border-left: 4px solid #2e86c1;
    border-radius: 4px;
    background: #eef7fd;
    color: #45627a;
    line-height: 1.5;
}
.DutyAssignPickerNotice > .fa { margin: 2px 8px 0 0; color: #287fc7; }

.DutyAssignPickerToolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 10px;
}

.DutyAssignPickerSearchBox {
    min-width: 0;
    width: 100%;
}

.DutyAssignPickerSearchBox .form-control {
    width: 100%;
    box-sizing: border-box;
}

.DutyAssignPickerSelectedBadge {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    padding: 7px 11px;
    border-radius: 14px;
    background: #eaf4fb;
    color: #22679d;
    white-space: nowrap;
}

.DutyAssignPickerEmpty {
    min-height: 180px;
    padding: 70px 20px;
    color: #8493a3;
    text-align: center;
}

@media (max-width: 991px) {
    .DutyTaskPage .DutyTaskPageTitle,
    .DutyAssignPage .DutyAssignPageTitle {
        display: block;
    }
    .DutyTaskPage .DutyTaskPageTitle .title_right,
    .DutyAssignPage .DutyAssignPageTitle .title_right {
        margin-top: 10px;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
    .DutyAssignGeneralGrid { grid-template-columns: 1fr; }
    .DutyAssignGeneralFieldFull { grid-column: auto; }
}

@media (max-width: 767px) {
    .DutyTaskFormRow { display: block; }
    .DutyTaskFormRow > label {
        display: block;
        width: 100%;
        max-width: none;
        padding: 0 0 5px;
        text-align: left;
    }
    .DutyTaskFormRow > label::after { content: ":"; }
    .DutyTaskForm .DutyWindowScrollBody { padding: 12px 14px !important; }
    .DutyAssignStepHeader { -ms-flex-wrap: wrap; flex-wrap: wrap; }
    .DutyAssignStepAction { width: 100%; margin: 8px 0 0 49px; }
    .DutyAssignQuickField { width: 100%; min-width: 0; }
    .DutyAssignPickerToolbar { display: block; }
    .DutyAssignPickerSelectedBadge { display: inline-block; margin-top: 8px; }
}

/* ============================================================================
 * Hotfix 22 - Chuẩn hóa giao diện Văn bản nguồn, Danh sách nhiệm vụ và footer
 * ========================================================================== */

/* Tất cả Kendo Window của phân hệ Duty dùng DutyWindowOpen đều căn giữa nhóm tác vụ.
 * Đây chỉ là thay đổi bố cục, không can thiệp logic các chức năng đã ổn định. */
.DutyDataWindowWrapper .DutyWindowActionFooter,
.DutyDataWindowWrapper .DutyForm .DutyWindowActionFooter {
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.DutyDataWindowWrapper .DutyWindowFooterHelpButton {
    margin-right: 0 !important;
}

.DutyPageSubtitle,
.DutyTaskPageSubtitle {
    margin-top: 4px;
    color: #74869a;
    font-size: 13px;
    line-height: 1.45;
}

.DutyModernPanel {
    overflow: hidden;
    border: 1px solid #dce6ef !important;
    border-radius: 9px !important;
    background: #fff;
    box-shadow: 0 3px 14px rgba(36, 66, 94, .07) !important;
}

.DutyModernGridShell {
    padding: 10px !important;
}

.DutyGridHeaderStrong,
.DutyModernGridShell .k-grid-header th.k-header,
.DutyModernGridShell .k-grid-header th.k-header > .k-link {
    color: #2c4056 !important;
    font-weight: 700 !important;
    text-align: center !important;
}

.DutyModernGridShell .k-grid-header {
    background: #f5f8fb;
}

.DutyModernGridShell .k-grid td {
    border-color: #e5ebf0;
}

.DutyGridIconButton,
.DutyTaskActionCell .DutyGridIconButton,
.DutyGridActionCell .DutyGridIconButton {
    display: inline-flex;
    width: 30px;
    height: 30px;
    margin: 2px !important;
    padding: 0 !important;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    line-height: 28px;
}

.DutyGridIconButton .fa {
    margin: 0 !important;
    font-size: 13px;
}

.DutyGridIconButton:focus {
    outline: 2px solid rgba(41, 128, 185, .28);
    outline-offset: 1px;
}

.DutyGridEmptyState {
    min-height: 260px;
    padding: 70px 20px 45px;
    color: #7b8b9b;
    text-align: center;
}

.DutyGridEmptyStateIcon {
    margin-bottom: 12px;
    color: #94b5cf;
    font-size: 46px;
}

.DutyGridEmptyState h3 {
    margin: 0 0 6px;
    color: #40566d;
    font-size: 20px;
    font-weight: 700;
}

.DutyGridEmptyState p { margin: 0; }
.DutyGridEmptyMini { padding: 20px; color: #7c8b99; text-align: center; }

.DutyStatusBadge {
    display: inline-block;
    min-width: 105px;
    padding: 5px 9px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}
.DutyStatusBadge .fa { margin-right: 4px; }
.DutyStatusDraft { background: #eef2f6; color: #607285; }
.DutyStatusActive { background: #e2f6ed; color: #16764c; }
.DutyStatusMuted { background: #f3f3f3; color: #777; }
.DutyStatusDanger { background: #fde9e7; color: #b74336; }

/* ---------- Văn bản nguồn ---------- */
.DutyDocumentPage { padding-top: 10px; }

.DutyDocumentPageTitle {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    margin-bottom: 14px;
}

.DutyDocumentPageTitle .title_left {
    flex: 1 1 auto;
    width: auto;
}

.DutyDocumentPageActions {
    display: flex;
    flex: 0 0 auto;
    width: auto !important;
    padding-right: 15px;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.DutyDocumentPageActions .btn,
.DutyDocumentPageActions .pull-right {
    float: none !important;
    margin: 0 !important;
}

.DutyDocumentTitleCell {
    line-height: 1.5;
    white-space: normal;
}

.DutyDocumentForm .DutyWindowScrollBody {
    padding: 16px 22px 12px !important;
}

.DutyDocumentForm .DutyFormSection {
    margin: 0 10px 14px 0;
    padding: 12px 14px 4px;
    border: 1px solid #dce6ef;
    border-radius: 7px;
    background: #fff;
}

.DutyFormSectionTitle {
    margin: -12px -14px 12px;
    padding: 10px 14px;
    border-bottom: 1px solid #dce6ef;
    border-radius: 7px 7px 0 0;
    background: #f3f8fc;
    color: #15568c;
    font-weight: 700;
}
.DutyFormSectionTitle .fa { margin-right: 6px; }

.DutyDocumentForm .form-group {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.DutyDocumentForm .DutyWindowScrollBody > .form-group > label,
.DutyDocumentForm .DutyFormSection > .form-group > label {
    flex: 0 0 235px;
    width: 235px;
    max-width: 235px;
}

.DutyDocumentForm .form-control,
.DutyDocumentForm .k-widget {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
}

.DutyToolbarHint {
    display: inline-block;
    margin-left: 10px;
    color: #7a8895;
    font-size: 12px;
}

.DutyReadOnlyMode .form-control[readonly],
.DutyReadOnlyMode select:disabled,
.DutyReadOnlyMode textarea[readonly],
.DutyReadOnlyMode .k-state-disabled {
    opacity: 1;
    background: #f7f9fb !important;
    color: #40566d !important;
}

/* ---------- Danh sách nhiệm vụ / chọn nhiều ---------- */
.DutyTaskBulkToolbar {
    display: flex;
    min-height: 52px;
    margin: 0 0 12px;
    padding: 9px 12px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid #cfe1ef;
    border-radius: 7px;
    background: #f2f8fc;
    box-shadow: 0 2px 7px rgba(32, 83, 120, .05);
}

.DutyTaskBulkSummary {
    color: #285b80;
    font-weight: 600;
}
.DutyTaskBulkSummary .fa { margin-right: 6px; }
.DutyTaskBulkActions { display: flex; flex-wrap: wrap; gap: 6px; }
.DutyTaskBulkActions .btn { margin: 0 !important; }

.DutyTaskCheckCell input,
#DutyListSelectAllPage {
    width: 17px;
    height: 17px;
    margin: 0;
    vertical-align: middle;
    cursor: pointer;
}

.DutyTaskSelectedRow td {
    background: #eef7ff !important;
}

.DutyTaskDraftHint {
    margin-top: 4px;
    color: #b17618;
    font-size: 11px;
    font-weight: 400;
}
.DutyTaskDraftHint .fa { margin-right: 4px; }

/* Tăng lề phải của control trong cửa sổ nhiệm vụ để không chạm sát mép Kendo Window. */
.DutyTaskForm .DutyWindowScrollBody {
    padding-right: 28px !important;
}
.DutyTaskFormSection {
    margin-right: 8px;
}
.DutyTaskFormControl {
    padding-right: 12px;
}

.DutyBulkActionForm .DutyWindowScrollBody {
    padding: 18px 22px 12px !important;
}

.DutyBulkActionNotice {
    display: flex;
    margin-bottom: 14px;
    padding: 12px 14px;
    border-left: 4px solid #2e86c1;
    border-radius: 5px;
    background: #eef7fd;
    color: #3e5f79;
    line-height: 1.55;
}
.DutyBulkActionNotice > .fa { margin: 3px 9px 0 0; color: #287fc7; }

.DutyBulkActionForm .DutyFormRow {
    display: flex;
    width: 100%;
    align-items: flex-start;
}
.DutyBulkActionForm .DutyFormLabel {
    flex: 0 0 110px;
    width: 110px;
    padding-right: 12px;
    text-align: right;
}
.DutyBulkActionForm .DutyFormControl { flex: 1 1 auto; min-width: 0; }

/* ---------- Nội dung Hướng dẫn chi tiết từng control ---------- */
.DutyHelpFieldTableWrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #dbe5ed;
    border-radius: 6px;
}

.DutyHelpFieldTable {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    background: #fff;
}

.DutyHelpFieldTable th,
.DutyHelpFieldTable td {
    padding: 9px 10px;
    border-right: 1px solid #e1e8ee;
    border-bottom: 1px solid #e1e8ee;
    vertical-align: top;
    line-height: 1.5;
}

.DutyHelpFieldTable th {
    background: #eef5fa;
    color: #254c6d;
    font-weight: 700;
    text-align: center;
}
.DutyHelpFieldTable th:last-child,
.DutyHelpFieldTable td:last-child { border-right: 0; }
.DutyHelpFieldTable tbody tr:last-child td { border-bottom: 0; }
.DutyHelpFieldTable td:first-child { width: 150px; color: #1d557f; }

@media (max-width: 991px) {
    .DutyDocumentPageTitle { display: block; }
    .DutyDocumentPageActions {
        margin-top: 10px;
        padding-right: 15px;
        justify-content: flex-start;
    }
    .DutyTaskBulkToolbar { display: block; }
    .DutyTaskBulkActions { margin-top: 8px; }
}

@media (max-width: 767px) {
    .DutyDocumentForm .DutyWindowScrollBody > .form-group > label,
    .DutyDocumentForm .DutyFormSection > .form-group > label {
        width: 100%;
        max-width: none;
        flex: none;
        text-align: left;
    }
    .DutyDocumentForm .DutyFormSection { margin-right: 0; }
    .DutyTaskBulkActions .btn { margin-bottom: 5px !important; }
}

/* ============================================================================
 * Hotfix 23 - Chuẩn hóa Kendo icon, nhóm Nhiệm vụ trong Đợt giao và chế độ Xem
 * ========================================================================== */

/* Khôi phục font icon gốc của Kendo UI 2020 cho Grid/Window/Picker.
 * Chỉ tác động icon Kendo trong phân hệ Duty, không đổi icon Font Awesome của nút nghiệp vụ. */
.DutyPage .k-grid .k-icon,
.DutyDataWindowWrapper .k-grid .k-icon,
.DutyDataWindowWrapper .k-window-actions .k-icon,
.DutyDataWindowWrapper .k-picker-wrap .k-icon,
.DutyDataWindowWrapper .k-dropdown-wrap .k-icon,
.DutyDataWindowWrapper .k-pager-wrap .k-icon {
    font-family: "WebComponentsIcons" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    line-height: 1 !important;
}

/* Tiêu đề Kendo Grid trong toàn phân hệ Duty luôn rõ, đậm và cân giữa. */
.DutyPage .k-grid-header th.k-header,
.DutyPage .k-grid-header th.k-header > .k-link,
.DutyDataWindowWrapper .k-grid-header th.k-header,
.DutyDataWindowWrapper .k-grid-header th.k-header > .k-link {
    color: #26384f !important;
    font-weight: 700 !important;
}

.DutyDataWindowWrapper .k-window-title {
    color: #24415d;
    font-weight: 700;
}

.DutyWindowTitleIcon {
    margin-right: 7px;
    color: #2f80c9;
}

/* Các số liệu cần chú ý trong wizard được nhấn mạnh vừa đủ, không phá bố cục hành chính. */
.DutyAssignImportantNumber {
    display: inline-block;
    min-width: 22px;
    color: #b45f06;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
}

.DutyAssignWizardHeader .DutyAssignImportantNumber {
    margin: 0 2px;
    font-size: 20px;
}

/* Bước 3: một dòng đầu nhóm là Nhiệm vụ, dưới đó mỗi cơ quan nhận đúng một dòng 1.1, 1.2... */
.DutyAssignTaskGroupRow > td {
    border-top: 2px solid #c6d9ea !important;
    border-bottom: 1px solid #c6d9ea !important;
    background: #eaf3fb !important;
    vertical-align: middle !important;
}

.DutyAssignTaskGroupNo {
    width: 72px;
    color: #174f7c;
    font-size: 15px;
    font-weight: 800;
}

.DutyAssignTaskGroupTitle {
    padding: 10px 12px !important;
    color: #203b55;
    font-size: 14px;
}

.DutyAssignTaskGroupTitle > .fa {
    margin-right: 7px;
    color: #2f80c9;
}

.DutyAssignTaskGroupTitle > strong {
    font-weight: 700;
}

.DutyAssignTaskGroupCount {
    float: right;
    margin-left: 12px;
    padding: 2px 8px;
    border: 1px solid #b9d2e7;
    border-radius: 12px;
    background: #fff;
    color: #3f6888;
    font-size: 11px;
    font-weight: 600;
}

.DutyAssignSequenceCell {
    color: #47657f;
    font-weight: 700;
    vertical-align: middle !important;
}

.DutyAssignReadOnlyNotice {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 14px;
    padding: 11px 14px;
    border-left: 4px solid #5b7fa3;
    border-radius: 5px;
    background: #f0f5f9;
    color: #415d76;
    line-height: 1.5;
}
.DutyAssignReadOnlyNotice > .fa { margin: 3px 9px 0 0; color: #406f9b; }

.DutyAssignReadOnly .DutyAssignGeneralField .form-control[disabled],
.DutyAssignReadOnly .DutyAssignGeneralField textarea[disabled],
.DutyAssignReadOnly .k-state-disabled {
    opacity: 1;
    background: #f8fafc;
    color: #34495e;
}

.DutyAssignReadOnly #DutyAssignItemGrid .k-grid-content td {
    cursor: default;
}

.DutyAssignPublishNotice {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 14px;
    padding: 12px 14px;
    border-left: 4px solid #24a064;
    border-radius: 5px;
    background: #eef8f3;
    color: #365e4c;
    line-height: 1.55;
}
.DutyAssignPublishNotice > .fa { margin: 3px 9px 0 0; color: #1b8f57; }

.DutyAssignPublishForm .DutyFormRow {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    align-items: flex-start;
}
.DutyAssignPublishForm .DutyFormLabel {
    flex: 0 0 92px;
    width: 92px;
    padding: 8px 12px 0 0;
    text-align: right;
}
.DutyAssignPublishForm .DutyFormControl { flex: 1 1 auto; min-width: 0; }

.DutyAssignWizardFooter,
.DutyAssignPickerFooter,
.DutyAssignPublishFooter,
.DutyReportDetailContainer .modal-footer {
    text-align: center !important;
}

.DutyAssignPublishFooter {
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
}

.DutyAssignWizardFooter .btn,
.DutyAssignPickerFooter .btn,
.DutyAssignPublishFooter .btn,
.DutyReportDetailContainer .modal-footer .btn {
    min-width: 112px;
    margin: 0 3px !important;
}

@media (max-width: 767px) {
    .DutyAssignTaskGroupCount {
        float: none;
        display: inline-block;
        margin: 5px 0 0 10px;
    }
    .DutyAssignPublishForm .DutyFormRow { display: block; }
    .DutyAssignPublishForm .DutyFormLabel {
        display: block;
        width: 100%;
        padding: 0 0 5px;
        text-align: left;
    }
}

/* Mọi Kendo Window mở qua DutyWindowOpen đều có icon; các cửa sổ có icon chuyên biệt
 * do JS gắn sẽ đặt class DutyWindowTitleHasIcon để không hiển thị icon mặc định hai lần. */
.DutyDataWindowWrapper .k-window-title::before {
    content: "\f2d0";
    margin-right: 7px;
    color: #2f80c9;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
}
.DutyDataWindowWrapper .k-window-title.DutyWindowTitleHasIcon::before { content: none; }

/* Căn giữa các nút của cửa sổ xác nhận/lý do ở Văn bản nguồn và Báo cáo. */
.DutyDocumentActionFooter,
.DutyReportFileRemoveFooter {
    text-align: center !important;
}
.DutyDocumentActionFooter .btn,
.DutyReportFileRemoveFooter .btn {
    min-width: 112px;
    margin: 0 3px !important;
}

/* ============================================================================
 * Hotfix 24 - Cửa sổ Xem đợt giao độc lập và ổn định nhóm Nhiệm vụ
 * ========================================================================== */

.DutyAssignViewForm {
    width: 100%;
    background: #f6f9fc;
}

.DutyAssignViewForm .DutyWindowScrollBody {
    padding: 16px 18px 18px !important;
    background: #f6f9fc;
}

.DutyAssignViewHero {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 14px;
    padding: 14px 16px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid #cfe0ee;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(42, 68, 92, .05);
}

.DutyAssignViewHeroIcon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 46px;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    margin-right: 12px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 50%;
    background: #2f80c9;
    color: #fff;
    font-size: 19px;
}

.DutyAssignViewHeroText {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
}

.DutyAssignViewHeroText > strong {
    display: block;
    color: #193f62;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
}

.DutyAssignViewHeroText > span {
    display: block;
    margin-top: 3px;
    color: #718297;
    font-size: 12px;
}

.DutyAssignViewKind {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-left: 14px;
    padding: 6px 11px;
    border: 1px solid #c6dced;
    border-radius: 16px;
    background: #edf6fd;
    color: #286b9f;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.DutyAssignViewKind .fa { margin-right: 4px; }

.DutyAssignViewSummaryGrid {
    display: -ms-grid;
    display: grid;
    grid-template-columns: 170px 170px 190px minmax(320px, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}

.DutyAssignViewSummaryCard,
.DutyAssignViewDescriptionCard {
    min-height: 88px;
    border: 1px solid #d8e4ed;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(42, 68, 92, .04);
}

.DutyAssignViewSummaryCard {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 13px 14px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.DutyAssignViewSummaryCard > .fa {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 38px;
    height: 38px;
    margin-right: 11px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 7px;
    background: #edf5fc;
    color: #2f80c9;
    font-size: 17px;
}

.DutyAssignViewSummarySuccess > .fa { background: #eaf7f1; color: #1d9260; }
.DutyAssignViewSummaryInfo > .fa { background: #f3effb; color: #7054a5; }

.DutyAssignViewSummaryCard b {
    display: block;
    color: #183f62;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.05;
}

.DutyAssignViewSummaryCard span {
    display: block;
    margin-top: 5px;
    color: #718094;
    font-size: 12px;
    font-weight: 600;
}

.DutyAssignViewDescriptionCard {
    padding: 12px 14px;
}

.DutyAssignViewLabel {
    margin-bottom: 6px;
    color: #36536d;
    font-size: 12px;
    font-weight: 700;
}

.DutyAssignViewLabel .fa { margin-right: 5px; color: #2f80c9; }

.DutyAssignViewDescription {
    max-height: 52px;
    overflow: auto;
    color: #475e72;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-line;
}

.DutyAssignViewSection {
    margin-bottom: 14px;
    border: 1px solid #d7e3ec;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(42, 68, 92, .04);
    overflow: hidden;
}

.DutyAssignViewSectionHeader {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 58px;
    padding: 10px 14px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: 1px solid #dce6ee;
    background: #f8fbfd;
}

.DutyAssignViewSectionHeader strong {
    display: block;
    color: #203f5b;
    font-size: 14px;
    font-weight: 700;
}

.DutyAssignViewSectionHeader strong .fa {
    margin-right: 6px;
    color: #2f80c9;
}

.DutyAssignViewSectionHeader span {
    display: block;
    margin-top: 3px;
    color: #76869a;
    font-size: 12px;
}

.DutyAssignViewSectionBody { padding: 12px 14px 14px; }

.DutyAssignViewForm .k-grid-header th.k-header,
.DutyAssignViewForm .k-grid-header th.k-header > .k-link {
    color: #26384f !important;
    font-weight: 700 !important;
    text-align: center !important;
}

.DutyAssignViewDutyTitle {
    color: #233d58;
    font-weight: 600;
    line-height: 1.45;
    white-space: normal;
}

.DutyAssignViewForm .DutyAssignTaskGroupRow > td {
    background: #e8f2fb !important;
}

.DutyAssignViewFooter {
    text-align: center !important;
}

.DutyAssignViewFooter .btn {
    min-width: 116px;
    margin: 0 3px !important;
}

@media (max-width: 1199px) {
    .DutyAssignViewSummaryGrid {
        grid-template-columns: repeat(3, minmax(150px, 1fr));
    }
    .DutyAssignViewDescriptionCard { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
    .DutyAssignViewHero {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .DutyAssignViewKind {
        margin: 10px 0 0 58px;
    }
    .DutyAssignViewSummaryGrid { grid-template-columns: 1fr; }
    .DutyAssignViewDescriptionCard { grid-column: auto; }
    .DutyAssignViewSectionBody { padding: 8px; }
}

/* ========================================================================== */
/* HOTFIX 25 - Cửa sổ Xem Đợt giao theo mô hình Nhiệm vụ -> Cơ quan nhận     */
/* ========================================================================== */
#DutyAssignBatchViewDutyGrid .k-grid-content tbody > tr[data-uid] {
    cursor: pointer;
}

#DutyAssignBatchViewDutyGrid .k-grid-content tbody > tr[data-uid]:hover > td {
    background: #f2f8fd !important;
}

/* Hỗ trợ cả class selected của Kendo UI 2020 và các theme mới hơn. */
#DutyAssignBatchViewDutyGrid .k-grid-content tbody > tr.k-state-selected > td,
#DutyAssignBatchViewDutyGrid .k-grid-content tbody > tr.k-selected > td {
    background: #e5f2fd !important;
    color: #173f63 !important;
    font-weight: 600;
    border-top-color: #9bc8eb !important;
    border-bottom-color: #9bc8eb !important;
}

#DutyAssignBatchViewDutyGrid .k-grid-content tbody > tr.k-state-selected > td:first-child,
#DutyAssignBatchViewDutyGrid .k-grid-content tbody > tr.k-selected > td:first-child {
    box-shadow: inset 4px 0 0 #2f80c9;
}

#DutyAssignBatchViewDutyGrid .DutyAssignRecipientCount .fa {
    margin-right: 4px;
}

.DutyAssignViewAssignmentHeader {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 14px;
}

.DutyAssignViewAssignmentTitle {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
}

.DutyAssignViewAssignmentTitle > span {
    white-space: normal;
    line-height: 1.45;
}

.DutyAssignViewAssignmentTitle > span > b {
    color: #246d9f;
}

.DutyAssignViewSelectedRecipientCount {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    min-width: 92px;
    padding: 7px 12px;
    border: 1px solid #c9dfef;
    border-radius: 16px;
    background: #edf6fd;
    color: #256a9d;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}

#DutyAssignBatchViewItemGrid .k-grid-content tbody > tr > td {
    vertical-align: middle;
}

@media (max-width: 767px) {
    .DutyAssignViewAssignmentHeader {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .DutyAssignViewSelectedRecipientCount {
        margin-left: 0;
    }
}



/* ========================================================================== */
/* HOTFIX 26 - Tạo/Sửa Đợt giao theo Nhiệm vụ -> Cơ quan nhận                */
/* ========================================================================== */

/* Bỏ khối tiêu đề wizard cũ: số liệu được đặt ngay trong phần chọn nhiệm vụ. */
.DutyAssignMasterDetailForm .DutyAssignGeneralPanel {
    margin-top: 0;
}

.DutyAssignMasterDetailCard {
    overflow: hidden;
}

.DutyAssignMasterBody {
    padding: 12px 14px 14px;
}

/* Lưới nhiệm vụ là master: chọn một dòng để nạp đúng các cơ quan nhận ở detail. */
#DutyAssignSelectedDutyGrid .k-grid-content tbody > tr[data-uid] {
    cursor: pointer;
}

#DutyAssignSelectedDutyGrid .k-grid-content tbody > tr[data-uid]:hover > td {
    background: #f2f8fd !important;
}

#DutyAssignSelectedDutyGrid .k-grid-content tbody > tr.k-state-selected > td,
#DutyAssignSelectedDutyGrid .k-grid-content tbody > tr.k-selected > td {
    background: #e5f2fd !important;
    color: #173f63 !important;
    border-top-color: #9bc8eb !important;
    border-bottom-color: #9bc8eb !important;
}

#DutyAssignSelectedDutyGrid .k-grid-content tbody > tr.k-state-selected > td:first-child,
#DutyAssignSelectedDutyGrid .k-grid-content tbody > tr.k-selected > td:first-child {
    box-shadow: inset 4px 0 0 #2f80c9;
}

.DutyAssignSelectedDutyTitle {
    color: #233d58;
    font-weight: 600;
    line-height: 1.42;
    white-space: normal;
}

#DutyAssignSelectedDutyGrid .DutyAssignRecipientCount .fa {
    margin-right: 4px;
}

/* Detail đặt ngay dưới lưới nhiệm vụ, thay cho Bước 2/Bước 3 cũ. */
.DutyAssignSelectedDutyDetail {
    margin-top: 12px;
    border: 1px solid #cfdfe9;
    border-radius: 7px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(42, 68, 92, .05);
}

.DutyAssignSelectedDutyDetailHeader {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 58px;
    padding: 10px 13px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #dbe6ee;
    background: #f6fafc;
}

.DutyAssignSelectedDutyDetailTitle {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
}

.DutyAssignSelectedDutyDetailTitle > strong {
    display: block;
    color: #1d4669;
    font-size: 14px;
    font-weight: 700;
}

.DutyAssignSelectedDutyDetailTitle > strong .fa {
    margin-right: 6px;
    color: #2f80c9;
}

.DutyAssignSelectedDutyDetailTitle > span {
    display: block;
    margin-top: 4px;
    color: #667c90;
    font-size: 12px;
    line-height: 1.45;
    white-space: normal;
}

.DutyAssignSelectedDutyDetailTitle > span > b {
    color: #246d9f;
}

.DutyAssignSelectedDutyDetailActions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
}

.DutyAssignSelectedDutyRecipientCount {
    min-width: 86px;
    padding: 6px 10px;
    border: 1px solid #c9dfef;
    border-radius: 15px;
    background: #edf6fd;
    color: #256a9d;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}

/* Thiết lập nhanh chỉ tác động các cơ quan thuộc nhiệm vụ đang chọn. */
.DutyAssignSelectedDutyQuickDefaults {
    margin: 0;
    border-width: 0 0 1px 0;
    border-radius: 0;
    box-shadow: none;
}

.DutyAssignSelectedDutyDetailBody {
    padding: 10px 12px 12px;
}

.DutyAssignSelectedDutyDetailBody .DutyAssignEditHint {
    margin-bottom: 0;
}

/* Dòng đầu tiên trong detail là nội dung nhiệm vụ, sau đó mới tới 1.1/1.2... */
.DutyAssignSelectedDutyDetailBody .DutyAssignTaskGroupRow > td {
    background: #e7f2fb !important;
    border-top-color: #b9d7ed !important;
    border-bottom-color: #b9d7ed !important;
}

.DutyAssignSelectedDutyDetailBody .DutyAssignTaskGroupTitle > strong {
    color: #1d4262;
}

@media (max-width: 991px) {
    .DutyAssignSelectedDutyDetailHeader {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .DutyAssignSelectedDutyDetailActions {
        width: 100%;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
}

@media (max-width: 767px) {
    .DutyAssignMasterBody,
    .DutyAssignSelectedDutyDetailBody {
        padding: 8px;
    }

    .DutyAssignSelectedDutyDetailActions {
        display: block;
    }

    .DutyAssignSelectedDutyRecipientCount {
        display: inline-block;
        margin: 0 6px 6px 0;
    }
}

/* ========================================================================== */
/* Hotfix 28 - Dashboard drill-down và không gian làm việc của đơn vị         */
/* ========================================================================== */

/* Số liệu Dashboard có thể bấm để mở giải thích nhưng vẫn giữ dáng số liệu. */
.DutyDashboardMetricInline {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 7px;
    border: 0;
    border-radius: 12px;
    background: #eef6fc;
    color: #1f6d9f;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.DutyDashboardMetricInline:hover,
.DutyDashboardMetricInline:focus {
    background: #dceefa;
    color: #124f78;
    outline: none;
}

.DutyDashboardDrilldownRoot,
.DutyDashboardExplainRoot,
.DutyDashboardItemRoot {
    min-width: 0;
}

.DutyDashboardDrilldownHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding: 11px 14px;
    border: 1px solid #d6e6f1;
    border-radius: 6px;
    background: #f7fbfe;
}

.DutyDashboardDrilldownCaption {
    margin-bottom: 3px;
    color: #58748b;
    font-size: 12px;
    font-weight: 600;
}

.DutyDashboardDrilldownHeader h4 {
    margin: 0;
    color: #173d5b;
    font-size: 17px;
    font-weight: 700;
}

.DutyDashboardDrilldownFilterText {
    margin-top: 4px;
    color: #6c8193;
    font-size: 12px;
}

.DutyDashboardDrillMetrics {
    display: grid;
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    gap: 9px;
    margin-bottom: 13px;
}

.DutyDashboardDrillMetric {
    min-height: 91px;
    padding: 10px 9px;
    border: 1px solid #d4e4ef;
    border-radius: 7px;
    background: #fff;
    color: #31536c;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(35, 73, 99, .07);
}

.DutyDashboardDrillMetric:hover,
.DutyDashboardDrillMetric:focus {
    border-color: #8fbddd;
    background: #f5fbff;
    outline: none;
}

.DutyDashboardDrillMetric > span,
.DutyDashboardDrillMetric > small {
    display: block;
}

.DutyDashboardDrillMetric > span {
    min-height: 32px;
    font-size: 12px;
    font-weight: 600;
}

.DutyDashboardDrillMetric > strong {
    display: block;
    margin: 2px 0;
    color: #155f91;
    font-size: 23px;
    line-height: 1.15;
}

.DutyDashboardDrillMetric > small {
    color: #8294a3;
    font-size: 10px;
}

.DutyDashboardDrillMetricWarn > strong {
    color: #b34b28;
}

.DutyDashboardDrillGridTitle {
    margin: 10px 0 7px;
    color: #234a68;
    font-size: 13px;
    font-weight: 700;
}

.DutyDashboardExplainCard {
    padding: 13px 15px;
    border: 1px solid #d5e4ef;
    border-radius: 7px;
    background: #f8fbfd;
}

.DutyDashboardExplainCard h4 {
    margin: 0 0 7px;
    color: #17466b;
    font-size: 17px;
    font-weight: 700;
}

.DutyDashboardExplainMeaning {
    color: #425c70;
    font-size: 13px;
    line-height: 1.55;
}

.DutyDashboardExplainMeaning p:last-child {
    margin-bottom: 0;
}

.DutyDashboardExplainCountLine {
    margin-top: 8px;
    color: #60798c;
}

.DutyDashboardExplainCountLine strong {
    color: #1d6899;
    font-size: 18px;
}

.DutyDashboardItemHeadline {
    padding: 11px 13px;
    border: 1px solid #d9e7f0;
    border-radius: 6px 6px 0 0;
    background: #f5fafe;
    color: #244b68;
    font-size: 14px;
    line-height: 1.5;
}

.DutyDashboardItemDetailGrid,
.DutyOfficeWorkSummaryGrid,
.DutyReportRouteContextGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid #d9e7f0;
    border-top: 0;
}

.DutyDashboardItemDetailGrid > div,
.DutyOfficeWorkSummaryGrid > div,
.DutyReportRouteContextGrid > div {
    min-width: 0;
    padding: 9px 12px;
    border-right: 1px solid #e2ebf1;
    border-bottom: 1px solid #e2ebf1;
}

.DutyDashboardItemDetailGrid label,
.DutyOfficeWorkSummaryGrid label,
.DutyReportRouteContextGrid label {
    display: block;
    margin: 0 0 3px;
    color: #6b7f8e;
    font-size: 11px;
    font-weight: 600;
}

.DutyDashboardItemDetailGrid span,
.DutyOfficeWorkSummaryGrid span,
.DutyReportRouteContextGrid span {
    color: #263f52;
    font-size: 13px;
    line-height: 1.45;
}

/* Nhiệm vụ cơ quan nhận: cửa sổ trung tâm thao tác, không điều hướng trang. */
.DutyOfficeWorkPage .DutyTaskPageSubtitle,
.DutyReportListPage .DutyTaskPageSubtitle {
    margin-top: 3px;
    color: #6d8294;
    font-size: 12px;
}

.DutyOfficeWorkNotice,
.DutyApprovalWorkflowHint,
.DutyReportSourceNote,
.DutyOfficeDelegateModeNotice,
.DutyOfficeChildAssignNotice {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 11px;
    padding: 10px 12px;
    border: 1px solid #cfe2f0;
    border-radius: 6px;
    background: #eef7fd;
    color: #355a75;
    font-size: 12px;
    line-height: 1.5;
}

.DutyOfficeWorkNotice > .fa,
.DutyApprovalWorkflowHint > .fa,
.DutyOfficeDelegateModeNotice > .fa,
.DutyOfficeChildAssignNotice > .fa {
    margin-top: 2px;
    color: #2f83be;
    font-size: 17px;
}

.DutyOfficeWorkHeadline {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #d7e5ef;
    border-radius: 6px 6px 0 0;
    background: #f7fbfe;
    color: #1f4765;
}

.DutyOfficeWorkHeadline strong {
    min-width: 0;
    font-size: 14px;
    line-height: 1.45;
}

.DutyOfficeWorkCode {
    flex: 0 0 auto;
    padding: 4px 8px;
    border-radius: 13px;
    background: #e4f2fc;
    color: #246b9e;
    font-size: 11px;
    font-weight: 700;
}

.DutyOfficeWorkSummaryFull,
.DutyReportRouteContextFull {
    grid-column: 1 / -1;
}

.DutyOfficeParentContent,
.DutyOfficeDelegateParentContext {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid #dce8f0;
    border-radius: 6px;
    background: #fff;
}

.DutyOfficeParentContent > label {
    display: block;
    margin-bottom: 5px;
    color: #31536c;
    font-weight: 700;
}

.DutyOfficeParentContent > div {
    white-space: pre-line;
    color: #3b5263;
    line-height: 1.55;
}

.DutyOfficeWorkActions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 13px 0 2px;
}

.DutyOfficeWorkActions .btn {
    min-width: 145px;
}

.DutyOfficeDelegateParentContext strong,
.DutyOfficeDelegateParentContext span {
    display: block;
}

.DutyOfficeDelegateParentContext strong {
    color: #244a66;
}

.DutyOfficeDelegateParentContext span {
    margin-top: 3px;
    color: #6c8192;
    font-size: 12px;
}

.DutyOfficeChildForm .DutyTaskFormSection,
.DutyReportEditorForm .DutyTaskFormSection {
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid #dce7ef;
    border-radius: 6px;
    background: #fff;
}

.DutyTaskFormSectionTitle {
    margin: -12px -12px 12px;
    padding: 9px 12px;
    border-bottom: 1px solid #dce7ef;
    background: #f7fafc;
    color: #244d6c;
    font-size: 13px;
    font-weight: 700;
}

.DutyTaskFormSectionTitle .fa {
    margin-right: 6px;
    color: #327eb4;
}

.DutyOfficeChildRouteHint {
    margin-top: 5px;
    color: #718696;
    font-size: 11px;
}

.DutyYesText {
    color: #177b49 !important;
    font-weight: 700;
}

.DutyNoText {
    color: #9c4a3d !important;
    font-weight: 700;
}

/* Báo cáo: trạng thái trực quan giúp người lập biết còn được sửa hay đã khóa. */
.DutyReportEditorState {
    display: none;
    margin-bottom: 11px;
    padding: 10px 12px;
    border: 1px solid #d7e3eb;
    border-radius: 6px;
    background: #f7fafc;
    color: #435b6d;
    font-size: 12px;
    line-height: 1.5;
}

.DutyReportEditorState.DutyReportStateDraft,
.DutyReportEditorState.DutyReportStateReturned {
    display: block;
    border-color: #bcdcc9;
    background: #eff9f3;
    color: #2f6d49;
}

.DutyReportEditorState.DutyReportStateWaiting {
    display: block;
    border-color: #ead9a8;
    background: #fff9e9;
    color: #7a6121;
}

.DutyReportEditorState.DutyReportStateLocked {
    display: block;
    border-color: #d7e1e8;
    background: #f4f7f9;
    color: #5d6c77;
}

.DutyReportEditorState.DutyReportStateProblem {
    display: block;
    border-color: #e8c0bb;
    background: #fff3f1;
    color: #8e443a;
}

.DutyReportRouteContext {
    margin-bottom: 12px;
}

.DutyReportRouteContextTitle {
    padding: 8px 11px;
    border: 1px solid #d8e6ef;
    border-radius: 6px 6px 0 0;
    background: #f5fafe;
    color: #244c69;
    font-size: 13px;
    font-weight: 700;
}

.DutyReportRouteContextNote {
    padding: 7px 11px;
    border: 1px solid #d8e6ef;
    border-top: 0;
    border-radius: 0 0 6px 6px;
    background: #fbfdfe;
    color: #6c7f8e;
    font-size: 11px;
}

.DutyReportSourceNote {
    margin-bottom: 8px;
}

.DutyReportEditOnlyToolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 8px 0;
}

.DutyApprovalRouteContext,
.DutyApprovalResultBox {
    padding: 10px 12px;
    border: 1px solid #dce7ee;
    border-radius: 6px;
    background: #fff;
}

.DutyApprovalResultBox {
    margin-top: 9px;
    background: #fbfdfe;
}

.DutyApprovalRouteContext p,
.DutyApprovalResultBox p {
    margin-bottom: 6px;
}

.DutyPreLine {
    white-space: pre-line;
    line-height: 1.55;
}

/* Footer của các cửa sổ nghiệp vụ được căn giữa theo yêu cầu giao diện thống nhất. */
#DutyOfficeAssignWorkWindow .modal-footer,
#DutyOfficeDelegateWindow .modal-footer,
#DutyOfficeChildAssignWindow .modal-footer,
#DutyReportWorkspaceWindow .modal-footer,
#DutyReportEditorWindow .modal-footer,
#DutyApprovalWindow .modal-footer,
#DutyDashboardDrilldownWindow .modal-footer,
#DutyDashboardExplainWindow .modal-footer,
#DutyDashboardItemWindow .modal-footer {
    text-align: center;
}

@media (max-width: 1199px) {
    .DutyDashboardDrillMetrics {
        grid-template-columns: repeat(3, minmax(120px, 1fr));
    }
}

@media (max-width: 767px) {
    .DutyDashboardDrillMetrics {
        grid-template-columns: repeat(2, minmax(110px, 1fr));
    }

    .DutyDashboardItemDetailGrid,
    .DutyOfficeWorkSummaryGrid,
    .DutyReportRouteContextGrid {
        grid-template-columns: 1fr;
    }

    .DutyOfficeWorkSummaryFull,
    .DutyReportRouteContextFull {
        grid-column: auto;
    }

    .DutyOfficeWorkActions {
        display: block;
    }

    .DutyOfficeWorkActions .btn {
        width: 100%;
        margin-bottom: 6px;
    }
}

.DutyReportEditorState.DutyReportStateAccepted {
    display: block;
    border-color: #b9dac7;
    background: #eef8f2;
    color: #2f714b;
}

.DutyOfficeChildConfigGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 12px;
    margin: 10px 0 12px;
    padding: 11px;
    border: 1px solid #dbe7ef;
    border-radius: 6px;
    background: #fafcfd;
}

.DutyOfficeChildConfigGrid > div {
    min-width: 0;
}

.DutyOfficeChildConfigGrid label {
    display: block;
    margin-bottom: 4px;
    color: #3b586d;
    font-size: 12px;
    font-weight: 600;
}

@media (max-width: 991px) {
    .DutyOfficeChildConfigGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .DutyOfficeChildConfigGrid {
        grid-template-columns: 1fr;
    }
}

/* Hotfix 28 - Thông báo và lịch sử mở chi tiết bằng Kendo Window tại chỗ. */
.DutyPageHeaderActions {
    text-align: right;
    padding-top: 6px;
}

.DutyNotificationDetailRoot,
.DutyHistoryDetailRoot {
    padding: 14px;
}

.DutyNotificationDetailHeader {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border: 1px solid #d7e5ee;
    border-radius: 7px;
    background: #f6fafd;
}

.DutyNotificationDetailIcon {
    width: 42px;
    height: 42px;
    line-height: 42px;
    flex: 0 0 42px;
    border-radius: 50%;
    text-align: center;
    background: #e8f3fb;
    color: #2f82bd;
    font-size: 20px;
}

.DutyNotificationDetailHeader h4 {
    margin: 0 0 4px;
    color: #254b67;
    font-weight: 700;
}

.DutyNotificationDetailTime {
    color: #718596;
    font-size: 12px;
}

.DutyNotificationDetailContent {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid #e0e8ee;
    border-radius: 7px;
    background: #fff;
    white-space: pre-line;
    line-height: 1.6;
    color: #334f63;
}

.DutyNotificationDetailGuidance {
    display: flex;
    gap: 9px;
    margin-top: 12px;
    padding: 11px 13px;
    border: 1px solid #cfe2f0;
    border-radius: 7px;
    background: #f0f8fd;
    color: #365b75;
    line-height: 1.55;
}

.DutyNotificationDetailGuidance > .fa {
    margin-top: 2px;
    color: #2784c2;
    font-size: 16px;
}

.DutyHistoryDetailRow {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 12px;
    padding: 8px 4px;
    border-bottom: 1px solid #edf1f4;
}

.DutyHistoryDetailRow label,
.DutyHistoryJsonBlock label {
    margin: 0;
    color: #38586f;
    font-weight: 700;
}

.DutyHistoryJsonBlock {
    margin-top: 12px;
}

.DutyHistoryJsonBlock pre {
    max-height: 300px;
    overflow: auto;
    margin-top: 6px;
    padding: 11px;
    border: 1px solid #dde6ec;
    border-radius: 6px;
    background: #f8fafb;
    color: #3f5361;
    white-space: pre-wrap;
    word-break: break-word;
}

#DutyNotificationDetailWindow .modal-footer,
#DutyHistoryDetailWindow .modal-footer {
    text-align: center;
}

@media (max-width: 600px) {
    .DutyHistoryDetailRow {
        grid-template-columns: 1fr;
        gap: 3px;
    }
}

/* Hotfix 28 - Phiếu kiểm tra đầy đủ trước khi phê duyệt/tiếp nhận báo cáo. */
.DutyApprovalReviewGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin: 10px 0;
}

.DutyApprovalReviewCell {
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #dce7ee;
    border-radius: 6px;
    background: #f9fbfc;
}

.DutyApprovalReviewLabel {
    margin-bottom: 4px;
    color: #587082;
    font-size: 12px;
    font-weight: 600;
}

.DutyApprovalReviewLabel .fa {
    width: 16px;
    color: #2e86c1;
    text-align: center;
}

.DutyApprovalReviewValue {
    color: #183b55;
    font-size: 15px;
    font-weight: 700;
    word-break: break-word;
}

.DutyApprovalTextSection,
.DutyApprovalEvidenceBlock {
    margin-top: 10px;
    padding: 11px 13px;
    border: 1px solid #dfe8ee;
    border-radius: 6px;
    background: #fff;
}

.DutyApprovalTextSectionPrimary {
    border-left: 4px solid #2e86c1;
    background: #fbfdff;
}

.DutyApprovalSectionTitle {
    margin-bottom: 7px;
    color: #294f69;
    font-weight: 700;
}

.DutyApprovalSectionTitle .fa {
    margin-right: 5px;
    color: #2e86c1;
}

.DutyApprovalCountBadge {
    display: inline-block;
    min-width: 22px;
    margin-left: 4px;
    padding: 1px 7px;
    border-radius: 12px;
    background: #e8f3fb;
    color: #2d719e;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
}

.DutyApprovalNoChange,
.DutyApprovalSourceNote {
    margin-top: 10px;
    padding: 9px 11px;
    border: 1px solid #d5e8f5;
    border-radius: 6px;
    background: #f2f9fd;
    color: #3c6078;
    line-height: 1.5;
}

.DutyApprovalEmpty {
    padding: 8px 0 2px;
    color: #7a8e9d;
    font-style: italic;
}

.DutyApprovalMiniTableWrap {
    overflow-x: auto;
}

.DutyApprovalMiniTable {
    margin-bottom: 0;
    min-width: 760px;
}

.DutyApprovalMiniTable > thead > tr > th {
    background: #f3f7fa;
    color: #37576d;
    font-weight: 700;
    vertical-align: middle;
}

.DutyApprovalMiniTable > tbody > tr > td {
    vertical-align: middle;
}

@media (max-width: 991px) {
    .DutyApprovalReviewGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .DutyApprovalReviewGrid {
        grid-template-columns: 1fr;
    }
}

/* ========================================================================== */
/* Hotfix 29 - Nhiệm vụ cơ quan nhận: giao diện hiện đại + theo dõi/thu hồi   */
/* ========================================================================== */
.DutyOfficeWorkPage .page-title {
    margin-bottom: 10px;
}

.DutyOfficeWorkPage .page-title h3 {
    margin-bottom: 3px;
    color: #173f63;
    font-weight: 700;
}

.DutyOfficeWorkspaceHero {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 8px 0 10px;
    padding: 16px 18px;
    border: 1px solid #cfe2ef;
    border-radius: 10px;
    background: #f7fbfe;
    box-shadow: 0 2px 7px rgba(31, 76, 111, .06);
}

.DutyOfficeWorkspaceHeroIcon {
    display: flex;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e4f3fd;
    color: #247caf;
    font-size: 23px;
}

.DutyOfficeWorkspaceHeroText {
    flex: 1 1 auto;
    min-width: 0;
}

.DutyOfficeWorkspaceHeroText strong,
.DutyOfficeWorkspaceHeroText span {
    display: block;
}

.DutyOfficeWorkspaceHeroText strong {
    color: #214b69;
    font-size: 16px;
    line-height: 1.35;
}

.DutyOfficeWorkspaceHeroText span {
    margin-top: 4px;
    color: #627b8d;
    font-size: 12px;
    line-height: 1.55;
}

.DutyOfficeWorkspaceStats {
    display: grid;
    flex: 0 0 420px;
    grid-template-columns: repeat(3, minmax(110px, 1fr));
    gap: 8px;
}

.DutyOfficeWorkspaceStats > div {
    padding: 9px 10px;
    border: 1px solid #d9e8f1;
    border-radius: 8px;
    background: #fff;
    text-align: center;
}

.DutyOfficeWorkspaceStats strong,
.DutyOfficeWorkspaceStats span {
    display: block;
}

.DutyOfficeWorkspaceStats strong {
    color: #1f6e9f;
    font-size: 23px;
    line-height: 1.1;
}

.DutyOfficeWorkspaceStats span {
    margin-top: 3px;
    color: #667d8e;
    font-size: 10.5px;
    line-height: 1.25;
}

.DutyOfficeWorkspaceLegend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-bottom: 11px;
    padding: 8px 12px;
    border-left: 3px solid #3492c7;
    background: #f8fbfd;
    color: #5d7485;
    font-size: 11px;
    line-height: 1.45;
}

.DutyOfficeWorkspaceLegend .fa {
    margin-right: 4px;
    color: #2d83b8;
}

.DutyOfficeTaskPanel {
    overflow: visible;
    border: 1px solid #dbe7ef;
    border-radius: 10px;
    box-shadow: 0 2px 9px rgba(30, 70, 98, .06);
}

.DutyOfficeTaskPanelTitle {
    min-height: 42px;
    padding: 9px 12px;
    border-bottom: 1px solid #dde8ef;
    background: #fbfdfe;
}

.DutyOfficeTaskPanelTitle h2 {
    color: #244d6c;
    font-size: 14px;
    font-weight: 700;
}

.DutyOfficeTaskPanelTitle h2 .fa {
    margin-right: 6px;
    color: #2e83b8;
}

.DutyOfficeWorkPage #DutyAssignToOfficeGrid {
    border: 0;
}

.DutyOfficeWorkPage #DutyAssignToOfficeGrid .k-grid-header th {
    padding-top: 10px;
    padding-bottom: 10px;
    color: #27445d;
    font-weight: 700;
    vertical-align: middle;
}

.DutyOfficeWorkPage #DutyAssignToOfficeGrid .k-grid-content,
.DutyOfficeWorkPage #DutyAssignToOfficeGrid .k-grid-content-locked {
    overflow: visible;
}

.DutyOfficeWorkPage #DutyAssignToOfficeGrid table {
    table-layout: fixed;
}

.DutyOfficeWorkPage #DutyAssignToOfficeGrid tbody > tr > td {
    padding: 10px 9px;
    border-color: #e2e9ee;
    vertical-align: top;
}

.DutyOfficeWorkPage #DutyAssignToOfficeGrid tbody > tr:hover > td {
    background: #f6fbfe;
}

.DutyOfficeTaskCard {
    min-width: 0;
}

.DutyOfficeTaskCodeLine {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin-bottom: 5px;
}

.DutyOfficeTaskDutyCode,
.DutyOfficeTaskAssignCode {
    display: inline-flex;
    align-items: center;
    padding: 3px 7px;
    border-radius: 12px;
    font-size: 10.5px;
    font-weight: 700;
}

.DutyOfficeTaskDutyCode {
    background: #e9f4fc;
    color: #216f9f;
}

.DutyOfficeTaskAssignCode {
    background: #f1f4f6;
    color: #657887;
}

.DutyOfficeTaskDutyCode .fa {
    margin-right: 4px;
}

.DutyOfficeTaskTitle {
    margin-bottom: 7px;
    color: #253e52;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.45;
    word-break: break-word;
}

.DutyOfficeTaskMeta {
    display: grid;
    gap: 3px;
    color: #698091;
    font-size: 10.8px;
    line-height: 1.45;
}

.DutyOfficeTaskMeta span {
    min-width: 0;
    word-break: break-word;
}

.DutyOfficeTaskMeta .fa {
    width: 15px;
    color: #5890b4;
    text-align: center;
}

.DutyOfficeTaskMeta b {
    color: #526d80;
    font-weight: 600;
}

.DutyOfficeTimeCard {
    display: grid;
    gap: 7px;
}

.DutyOfficeTimeCard > div {
    padding-bottom: 6px;
    border-bottom: 1px dashed #dce5eb;
}

.DutyOfficeTimeCard > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.DutyOfficeTimeCard span,
.DutyOfficeTimeCard strong,
.DutyOfficeTimeCard em {
    display: block;
}

.DutyOfficeTimeCard span {
    color: #7a8e9c;
    font-size: 10px;
    text-transform: uppercase;
}

.DutyOfficeTimeCard strong {
    margin-top: 2px;
    color: #334d60;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.35;
}

.DutyOfficeTimeCard em {
    margin-top: 2px;
    color: #607889;
    font-size: 10.5px;
    font-style: normal;
    line-height: 1.35;
}

.DutyOfficeStatusCell {
    padding-top: 15px !important;
}

.DutyOfficeStatusBadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 92px;
    padding: 5px 8px;
    border: 1px solid #d8e2e8;
    border-radius: 14px;
    background: #f4f7f9;
    color: #596f7e;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.2;
}

.DutyOfficeStatusDraft { border-color: #eadba9; background: #fff8e6; color: #82651d; }
.DutyOfficeStatusActive { border-color: #bfe3cf; background: #edf9f2; color: #27734b; }
.DutyOfficeStatusCompleted { border-color: #bad9eb; background: #edf7fc; color: #2c6f96; }
.DutyOfficeStatusCancelled { border-color: #d8dde1; background: #f2f4f5; color: #747f86; }
.DutyOfficeStatusPending { border-color: #d8e3ea; background: #f7fafc; color: #647986; }

.DutyOfficeDelegationButton {
    display: block;
    width: 100%;
    padding: 9px 10px;
    border: 1px solid #cfe1ec;
    border-radius: 8px;
    background: #fff;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

.DutyOfficeDelegationButton:hover,
.DutyOfficeDelegationButton:focus {
    border-color: #8ec3df;
    background: #f6fbfe;
    box-shadow: 0 2px 7px rgba(34, 101, 141, .12);
    outline: none;
}

.DutyOfficeDelegationHeadline,
.DutyOfficeDelegationButton strong,
.DutyOfficeDelegationButton small,
.DutyOfficeDelegationButton em {
    display: block;
}

.DutyOfficeDelegationHeadline {
    color: #2576a7;
    font-size: 11px;
    font-weight: 700;
}

.DutyOfficeDelegationButton strong {
    margin-top: 3px;
    color: #31576f;
    font-size: 11.5px;
}

.DutyOfficeDelegationButton small {
    margin-top: 4px;
    color: #6c8393;
    font-size: 10px;
    line-height: 1.35;
}

.DutyOfficeDelegationButton em {
    margin-top: 6px;
    color: #2d7da9;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
}

.DutyOfficeDelegationEmpty {
    padding: 9px 8px;
    border: 1px dashed #d5e0e6;
    border-radius: 8px;
    background: #fafcfd;
    text-align: center;
}

.DutyOfficeDelegationEmpty .fa,
.DutyOfficeDelegationEmpty strong,
.DutyOfficeDelegationEmpty span {
    display: block;
}

.DutyOfficeDelegationEmpty .fa {
    margin-bottom: 4px;
    color: #a5b4bd;
}

.DutyOfficeDelegationEmpty strong {
    color: #607786;
    font-size: 11px;
}

.DutyOfficeDelegationEmpty span {
    margin-top: 2px;
    color: #8a9aa4;
    font-size: 9.8px;
}

.DutyOfficeActionCell {
    padding-top: 12px !important;
}

.DutyOfficeRowActions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
}

.DutyOfficeRowActions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 30px;
    margin: 0;
    padding: 5px 8px;
    border-radius: 5px;
    font-size: 10.5px;
    white-space: nowrap;
}

.DutyOfficeRowActions .btn .fa {
    width: 16px;
    margin-right: 4px;
    text-align: center;
}

.DutyOfficeRowActions .DutyOfficeActionPrimary {
    font-weight: 700;
}

/* Cửa sổ Xử lý nhiệm vụ: các tác vụ được trình bày thành thẻ dễ hiểu. */
.DutyOfficeWorkActionGuide {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 11px 0 4px;
}

.DutyOfficeWorkActionGuide > div {
    position: relative;
    min-width: 0;
    padding: 11px 10px 10px 38px;
    border: 1px solid #dce7ee;
    border-radius: 7px;
    background: #fbfdfe;
}

.DutyOfficeWorkActionGuide > div > .fa {
    position: absolute;
    top: 12px;
    left: 12px;
    color: #3983b2;
    font-size: 18px;
}

.DutyOfficeWorkActionGuide strong,
.DutyOfficeWorkActionGuide span {
    display: block;
}

.DutyOfficeWorkActionGuide strong {
    color: #31546b;
    font-size: 11.5px;
}

.DutyOfficeWorkActionGuide span {
    margin-top: 3px;
    color: #718594;
    font-size: 10px;
    line-height: 1.4;
}

.DutyOfficeWorkDelegatedSummary {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 9px;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid #bee0cf;
    border-radius: 7px;
    background: #f0f9f4;
    color: #2f6e4c;
    text-align: left;
    cursor: pointer;
}

.DutyOfficeWorkDelegatedSummary > .fa {
    font-size: 17px;
}

.DutyOfficeWorkDelegatedSummary span {
    flex: 1 1 auto;
    font-size: 11.5px;
}

.DutyOfficeWorkDelegatedSummary em {
    flex: 0 0 auto;
    color: #27734d;
    font-size: 10.5px;
    font-style: normal;
    font-weight: 700;
}

/* Cửa sổ lịch sử giao xuống dưới. */
.DutyOfficeForwardedContext {
    margin-bottom: 9px;
    border: 1px solid #d7e5ee;
    border-radius: 8px;
    background: #f8fbfd;
}

.DutyOfficeForwardedHeadline {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px 7px;
}

.DutyOfficeForwardedHeadline span {
    flex: 0 0 auto;
    padding: 3px 7px;
    border-radius: 11px;
    background: #e7f3fb;
    color: #2674a1;
    font-size: 10.5px;
    font-weight: 700;
}

.DutyOfficeForwardedHeadline strong {
    min-width: 0;
    color: #294b62;
    font-size: 13px;
    line-height: 1.4;
}

.DutyOfficeForwardedRoute {
    padding: 0 12px 10px;
    color: #6a7f8e;
    font-size: 10.8px;
    line-height: 1.4;
}

.DutyOfficeForwardedNotice {
    margin-bottom: 9px;
}

#DutyOfficeForwardedGrid {
    border-color: #dce5eb;
}

#DutyOfficeForwardedGrid table {
    table-layout: fixed;
}

#DutyOfficeForwardedGrid tbody td {
    padding: 9px 8px;
    vertical-align: top;
}

.DutyOfficeForwardedDuty span,
.DutyOfficeForwardedDuty strong,
.DutyOfficeForwardedDuty small,
.DutyOfficeForwardedRecipient strong,
.DutyOfficeForwardedRecipient span,
.DutyOfficeForwardedTime span {
    display: block;
}

.DutyOfficeForwardedDuty span {
    margin-bottom: 3px;
    color: #2b78a5;
    font-size: 10px;
    font-weight: 700;
}

.DutyOfficeForwardedDuty strong {
    color: #334e62;
    font-size: 11.5px;
    line-height: 1.42;
}

.DutyOfficeForwardedDuty small {
    margin-top: 4px;
    color: #7c8e9b;
    font-size: 9.8px;
}

.DutyOfficeForwardedRecipient strong {
    color: #365a70;
    font-size: 11px;
}

.DutyOfficeForwardedRecipient span {
    margin-top: 4px;
    color: #718593;
    font-size: 10px;
    line-height: 1.35;
}

.DutyOfficeForwardedRecipient .fa {
    width: 14px;
    color: #4889b1;
}

.DutyOfficeForwardedNotAssigned,
.DutyOfficeForwardedMuted,
.DutyOfficeForwardedLocked {
    color: #8797a1;
    font-size: 10.5px;
    line-height: 1.4;
}

.DutyOfficeForwardedNotAssigned .fa,
.DutyOfficeForwardedLocked .fa {
    margin-right: 4px;
}

.DutyOfficeForwardedTime {
    display: grid;
    gap: 5px;
    color: #667c8c;
    font-size: 10px;
}

.DutyOfficeForwardedTime b {
    color: #405c70;
}

.DutyOfficeRecallButton {
    min-width: 82px;
}

.DutyOfficeRecallSummary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 10px;
    border: 1px solid #dbe5eb;
    border-radius: 7px;
    overflow: hidden;
}

.DutyOfficeRecallSummary > div {
    padding: 8px 10px;
    border-right: 1px solid #e2e9ed;
    border-bottom: 1px solid #e2e9ed;
    background: #fbfdfe;
}

.DutyOfficeRecallSummary .DutyOfficeRecallSummaryFull {
    grid-column: 1 / -1;
    border-bottom: 0;
}

.DutyOfficeRecallSummary span,
.DutyOfficeRecallSummary strong {
    display: block;
}

.DutyOfficeRecallSummary span {
    color: #788b98;
    font-size: 10px;
}

.DutyOfficeRecallSummary strong {
    margin-top: 2px;
    color: #38566a;
    font-size: 11.5px;
    line-height: 1.4;
}

.DutyOfficeForwardedFooter,
.DutyOfficeRecallFooter {
    text-align: center;
}

#DutyOfficeForwardedWindow .modal-footer,
#DutyOfficeRecallWindow .modal-footer {
    text-align: center;
}

@media (max-width: 1199px) {
    .DutyOfficeWorkspaceHero {
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .DutyOfficeWorkspaceStats {
        flex-basis: 100%;
    }
    .DutyOfficeWorkActionGuide {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .DutyOfficeRowActions {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .DutyOfficeWorkspaceHero {
        padding: 12px;
    }
    .DutyOfficeWorkspaceHeroIcon {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    .DutyOfficeWorkspaceStats {
        grid-template-columns: 1fr;
    }
    .DutyOfficeWorkspaceLegend {
        display: block;
    }
    .DutyOfficeWorkspaceLegend span {
        display: block;
        margin-bottom: 5px;
    }
    .DutyOfficeWorkActionGuide {
        grid-template-columns: 1fr;
    }
    .DutyOfficeRecallSummary {
        grid-template-columns: 1fr;
    }
    .DutyOfficeRecallSummary .DutyOfficeRecallSummaryFull {
        grid-column: auto;
    }
}

.DutyBulkActionWarning {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 11px;
    padding: 10px 12px;
    border: 1px solid #e6c4be;
    border-radius: 7px;
    background: #fff5f3;
    color: #874d44;
    font-size: 11px;
    line-height: 1.5;
}

.DutyBulkActionWarning > .fa {
    flex: 0 0 auto;
    margin-top: 2px;
    color: #c36555;
    font-size: 17px;
}

#DutyOfficeAssignWorkWindow .DutyOfficeWorkFooter,
#DutyOfficeForwardedWindow .DutyOfficeForwardedFooter,
#DutyOfficeRecallWindow .DutyOfficeRecallFooter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

#DutyOfficeAssignWorkWindow .DutyOfficeWorkFooter .btn,
#DutyOfficeForwardedWindow .DutyOfficeForwardedFooter .btn,
#DutyOfficeRecallWindow .DutyOfficeRecallFooter .btn {
    margin: 0;
}

/* ========================================================================
   Hotfix 77 - Nhiệm vụ chuyển tiếp trì hoãn + xóa nhiệm vụ con chưa giao
   ======================================================================== */
.DutyOfficeChildDutyChooser {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}

.DutyOfficeChildDutySelectWrap {
    flex: 1 1 auto;
    min-width: 0;
}

.DutyOfficeChildDutySelectWrap .k-dropdown,
.DutyOfficeChildDutySelectWrap .k-widget {
    width: 100%;
}

.DutyOfficeChildDeleteUnassignedButton {
    flex: 0 0 auto;
    min-width: 178px;
    height: 34px;
    white-space: nowrap;
}

.DutyOfficeChildDutyHelp {
    margin-top: 5px;
    color: #637b8c;
    font-size: 10.5px;
}

/* ========================================================================
   Hotfix 30 - Chọn đơn vị nhận theo hai cách: MultiSelect hoặc Cây giao nhiệm vụ
   ======================================================================== */
.DutyOfficeChildRecipientChooser {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}

.DutyOfficeChildRecipientMulti {
    flex: 1 1 auto;
    min-width: 0;
}

.DutyOfficeChildRecipientMulti .k-multiselect,
.DutyOfficeChildRecipientMulti .k-widget {
    width: 100%;
}

.DutyOfficeChildRouteTreeButton {
    flex: 0 0 auto;
    min-width: 132px;
    height: 34px;
    white-space: nowrap;
}

.DutyOfficeChildRecipientMethodNote {
    margin-top: 5px;
    padding: 7px 9px;
    border: 1px solid #dce9f2;
    border-radius: 5px;
    background: #f7fbfe;
    color: #5d7383;
    font-size: 10.5px;
    line-height: 1.45;
}

.DutyOfficeChildRecipientMethodNote .fa {
    margin-right: 5px;
    color: #2e85b9;
}

.DutyOfficeChildRouteTreeNotice {
    margin-bottom: 9px;
}

.DutyOfficeChildRouteTreeContext {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 9px;
    padding: 9px 11px;
    border: 1px solid #cfe0eb;
    border-radius: 7px;
    background: #f8fbfd;
}

.DutyOfficeChildRouteTreeContextIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #e6f3fb;
    color: #287aa8;
    font-size: 17px;
}

.DutyOfficeChildRouteTreeContext > div:last-child {
    min-width: 0;
}

.DutyOfficeChildRouteTreeContext span,
.DutyOfficeChildRouteTreeContext strong,
.DutyOfficeChildRouteTreeContext small {
    display: block;
}

.DutyOfficeChildRouteTreeContext span {
    color: #758895;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.DutyOfficeChildRouteTreeContext strong {
    margin-top: 1px;
    color: #274d67;
    font-size: 12.5px;
}

.DutyOfficeChildRouteTreeContext small {
    margin-top: 3px;
    color: #6f8493;
    font-size: 10px;
    line-height: 1.35;
}

.DutyOfficeChildRouteTreeContext small .fa {
    margin-right: 4px;
    color: #4889b1;
}

.DutyOfficeChildRouteTreeToolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    width: 100%;
}

.DutyOfficeChildRouteTreeSearchBox {
    position: relative;
    min-width: 0;
    width: 100%;
}

.DutyOfficeChildRouteTreeSearchBox > .fa {
    position: absolute;
    z-index: 2;
    top: 10px;
    left: 11px;
    color: #7a8f9d;
}

.DutyOfficeChildRouteTreeSearchBox input {
    width: 100%;
    box-sizing: border-box;
    padding-left: 31px;
}

.DutyOfficeChildRouteTreeBulkButtons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    min-width: max-content;
}

.DutyOfficeChildRouteTreeSummary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    padding: 6px 9px;
    border-radius: 5px;
    background: #eef7fc;
    color: #56758a;
    font-size: 10.5px;
}

.DutyOfficeChildRouteTreeSummary strong {
    color: #1977ab;
    font-size: 12px;
}

.DutyOfficeChildRouteTreeShell {
    position: relative;
    min-height: 260px;
    max-height: 430px;
    overflow: auto;
    padding: 7px 8px;
    border: 1px solid #d6e1e8;
    border-radius: 6px;
    background: #fff;
}

#DutyOfficeChildRouteTree .k-treeview-lines {
    padding-bottom: 5px;
}

#DutyOfficeChildRouteTree .k-item {
    white-space: normal;
}

#DutyOfficeChildRouteTree .k-in {
    width: calc(100% - 5px);
    padding: 0;
    border-radius: 5px;
}

#DutyOfficeChildRouteTree .k-in:hover,
#DutyOfficeChildRouteTree .k-state-hover,
#DutyOfficeChildRouteTree .k-state-selected {
    background: #f1f8fc;
    color: inherit;
}

.DutyOfficeChildRouteTreeNode {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    padding: 7px 8px;
    box-sizing: border-box;
}

.DutyOfficeChildRouteTreeNode > input[type="checkbox"] {
    flex: 0 0 auto;
    margin: 4px 0 0;
    cursor: pointer;
}

.DutyOfficeChildRouteTreeNodeIcon {
    flex: 0 0 22px;
    width: 22px;
    padding-top: 1px;
    color: #3981ab;
    text-align: center;
}

.DutyOfficeChildRouteTreeNodeText {
    flex: 1 1 auto;
    min-width: 0;
}

.DutyOfficeChildRouteTreeNodeText strong,
.DutyOfficeChildRouteTreeNodeText small {
    display: block;
}

.DutyOfficeChildRouteTreeNodeText strong {
    color: #35586e;
    font-size: 11.5px;
    line-height: 1.4;
}

.DutyOfficeChildRouteTreeNodeText small {
    margin-top: 2px;
    color: #748894;
    font-size: 9.8px;
    line-height: 1.35;
}

.DutyOfficeChildRouteTreeNodeText small .fa {
    margin-right: 4px;
    color: #5991b0;
}

.DutyOfficeChildRouteTreeRootNode {
    margin-bottom: 2px;
    border: 1px solid #c7dfed;
    background: #eaf6fd;
}

.DutyOfficeChildRouteTreeRootNode .DutyOfficeChildRouteTreeNodeIcon {
    color: #1877aa;
}

.DutyOfficeChildRouteTreeRootNode .DutyOfficeChildRouteTreeNodeText strong {
    color: #164f72;
    font-size: 12px;
}

.DutyOfficeChildRouteTreeRootNode .DutyOfficeChildRouteTreeNodeText small {
    color: #4f7891;
}

.DutyOfficeChildRouteTreeWarning {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 5px;
    border-radius: 9px;
    background: #fff4dc;
    color: #9a6a14;
    font-size: 9px;
    font-weight: 600;
}

.DutyOfficeChildRouteTreeWarning .fa {
    margin-right: 3px;
}

.DutyOfficeChildRouteTreeFootnote {
    margin-top: 8px;
    color: #708390;
    font-size: 10px;
    line-height: 1.45;
}

.DutyOfficeChildRouteTreeFootnote .fa {
    margin-right: 4px;
    color: #3d8db8;
}

#DutyOfficeChildRouteTreeWindow .DutyOfficeChildRouteTreeFooter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 9px;
    text-align: center;
}

#DutyOfficeChildRouteTreeWindow .DutyOfficeChildRouteTreeFooter .btn {
    margin: 0;
}

@media (max-width: 900px) {
    .DutyOfficeChildDutyChooser,
    .DutyOfficeChildRecipientChooser,
    .DutyOfficeChildRouteTreeToolbar {
        align-items: stretch;
        flex-direction: column;
    }
    .DutyOfficeChildRouteTreeButton,
    .DutyOfficeChildDeleteUnassignedButton {
        width: 100%;
    }
    .DutyOfficeChildRouteTreeBulkButtons {
        flex-wrap: wrap;
    }
}

/* ========================================================================
   Hotfix 31 - Chuẩn hóa bộ chọn cơ quan số lượng lớn và nhóm lịch sử giao xuống
   ======================================================================== */

/* MultiSelect: chỉ hiển thị tên cơ quan, không để tag dài theo toàn bộ RoutePath làm vỡ form. */
.DutyOfficeChildRecipientMulti .k-multiselect-wrap {
    max-height: 118px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
}

.DutyOfficeChildRecipientMulti .k-multiselect-wrap > li.k-button,
.DutyOfficeChildRecipientMulti .k-multiselect-wrap > .k-button {
    max-width: 280px;
    margin: 2px 3px 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.DutyOfficeChildRecipientMulti .k-multiselect-wrap > li.k-button .k-select,
.DutyOfficeChildRecipientMulti .k-multiselect-wrap > .k-button .k-select {
    flex: 0 0 auto;
}

.DutyOfficeChildRecipientMulti .k-input {
    min-width: 190px;
}

/* Cây một cấp trực tiếp: dùng bố cục phẳng để tránh Kendo TreeView co chiều rộng node gốc. */
.DutyOfficeChildRouteTreeFlat {
    width: 100%;
    min-width: 0;
}

.DutyOfficeChildRouteTreeFlatRoot,
.DutyOfficeChildRouteTreeFlatItem {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    cursor: pointer;
}

.DutyOfficeChildRouteTreeFlatRoot {
    gap: 8px;
    min-height: 48px;
    padding: 8px 11px;
    border: 1px solid #c7dfed;
    border-radius: 6px;
    background: #eaf6fd;
}

.DutyOfficeChildRouteTreeFlatRoot:hover {
    background: #dff1fb;
}

.DutyOfficeChildRouteTreeFlatRoot > input[type="checkbox"],
.DutyOfficeChildRouteTreeFlatItem > input[type="checkbox"] {
    flex: 0 0 auto;
    margin: 0;
}

.DutyOfficeChildRouteTreeFlatChildren {
    position: relative;
    margin-left: 16px;
    padding-left: 24px;
    border-left: 1px solid #cbdce7;
}

.DutyOfficeChildRouteTreeFlatItem {
    gap: 8px;
    min-height: 40px;
    padding: 6px 9px 6px 4px;
    border-bottom: 1px solid #edf2f5;
}

.DutyOfficeChildRouteTreeFlatItem:hover {
    background: #f5fafd;
}

.DutyOfficeChildRouteTreeFlatConnector {
    position: absolute;
    left: -24px;
    top: 50%;
    width: 20px;
    border-top: 1px solid #cbdce7;
}

.DutyOfficeChildRouteTreeFlatIcon {
    flex: 0 0 22px;
    width: 22px;
    color: #3a84ad;
    text-align: center;
}

.DutyOfficeChildRouteTreeFlatText {
    flex: 1 1 auto;
    min-width: 0;
}

.DutyOfficeChildRouteTreeFlatText strong,
.DutyOfficeChildRouteTreeFlatText small {
    display: block;
    min-width: 0;
}

.DutyOfficeChildRouteTreeFlatText strong {
    overflow: hidden;
    color: #31576f;
    font-size: 11.5px;
    line-height: 1.35;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.DutyOfficeChildRouteTreeFlatText small {
    margin-top: 2px;
    color: #698191;
    font-size: 9.8px;
    line-height: 1.3;
}

.DutyOfficeChildRouteTreeFlatRoot .DutyOfficeChildRouteTreeFlatText strong {
    color: #174f72;
    font-size: 12px;
}

.DutyOfficeChildRouteTreeFlatItem .DutyOfficeChildRouteTreeWarning {
    flex: 0 0 auto;
    margin: 0 0 0 5px;
}

/* Lịch sử giao xuống: mặc định mỗi nhiệm vụ con là một dòng nhóm; mở nhóm mới thấy đơn vị nhận. */
.DutyOfficeForwardedToolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    width: 100%;
}

.DutyOfficeForwardedSearchBox {
    position: relative;
    min-width: 0;
    width: 100%;
}

.DutyOfficeForwardedSearchBox > .fa {
    position: absolute;
    z-index: 2;
    top: 10px;
    left: 11px;
    color: #718896;
}

.DutyOfficeForwardedSearchBox input {
    width: 100%;
    box-sizing: border-box;
    padding-left: 31px;
}

.DutyOfficeForwardedToolbarButtons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    min-width: max-content;
}

.DutyOfficeForwardedToolbarButtons .btn,
.DutyOfficeForwardedBulkActions .btn {
    white-space: nowrap;
}

.DutyOfficeForwardedBulkBar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) max-content;
    align-items: center;
    gap: 10px;
    margin: 0 0 9px;
    padding: 7px 9px;
    border: 1px solid #d7e5ee;
    border-radius: 6px;
    background: #f7fbfd;
}

.DutyOfficeForwardedBulkSummary {
    min-width: 0;
    color: #607b8c;
    font-size: 10.5px;
}

.DutyOfficeForwardedBulkSummary .fa {
    margin-right: 4px;
    color: #2b83b3;
}

.DutyOfficeForwardedBulkSummary strong {
    color: #176f9f;
    font-size: 12px;
}

.DutyOfficeForwardedBulkActions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    min-width: max-content;
}

#DutyOfficeForwardedGrid .k-grouping-row > td {
    padding: 0;
    background: #eef7fc;
    border-color: #d7e6ef;
}

/* Kendo UI phiên bản đang dùng chèn icon mở/đóng trước groupHeaderTemplate trong .k-reset.
   Template block làm icon bị tách xuống/dạt thành một dòng riêng. Wrapper flex + template inline-flex
   giữ mũi tên, checkbox và tiêu đề nhiệm vụ trên cùng một hàng. */
#DutyOfficeForwardedGrid .k-grouping-row > td > .k-reset,
#DutyOfficeForwardedGrid .k-grouping-row > td > p.k-reset {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 46px;
    margin: 0;
    padding: 0 8px;
    box-sizing: border-box;
}

#DutyOfficeForwardedGrid .k-grouping-row .k-icon,
#DutyOfficeForwardedGrid .k-grouping-row .k-i-collapse,
#DutyOfficeForwardedGrid .k-grouping-row .k-i-expand {
    position: static;
    flex: 0 0 auto;
    margin: 0 6px 0 0;
}

.DutyOfficeForwardedGroupHeader {
    display: inline-flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 7px;
    min-width: 0;
    width: 100%;
    padding: 8px 2px;
    box-sizing: border-box;
    vertical-align: middle;
}

.DutyOfficeForwardedGroupCheck {
    flex: 0 0 auto;
    margin: 0 1px 0 0 !important;
    vertical-align: middle;
    cursor: pointer;
}

.DutyOfficeForwardedGroupCheck:disabled {
    cursor: default;
    opacity: .45;
}

.DutyOfficeForwardedGroupHeader > .fa {
    flex: 0 0 auto;
    color: #2d83b2;
}

.DutyOfficeForwardedGroupHeader strong {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: #245473;
    font-size: 11.5px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.DutyOfficeForwardedGroupHeader strong b {
    color: #176f9f;
}

.DutyOfficeForwardedGroupHeader strong em {
    color: #245473;
    font-style: normal;
    font-weight: 700;
}

.DutyOfficeForwardedGroupTitle {
    font: inherit;
}

.DutyOfficeForwardedGroupHeader small {
    flex: 0 0 auto;
    color: #6f8796;
    font-size: 9.8px;
    font-weight: 400;
    white-space: nowrap;
}

.DutyOfficeForwardedSelectCell input {
    margin: 0 !important;
    vertical-align: middle;
    cursor: pointer;
}

#DutyOfficeForwardedGrid tbody td {
    vertical-align: middle;
}

#DutyOfficeForwardedGrid .DutyOfficeForwardedRecipient strong {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#DutyOfficeForwardedGrid .DutyOfficeForwardedRecipient span {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@media (max-width: 900px) {
    .DutyOfficeForwardedToolbar,
    .DutyOfficeForwardedBulkBar {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
    .DutyOfficeForwardedSearchBox {
        width: 100%;
        min-width: 0;
    }
    .DutyOfficeForwardedToolbarButtons,
    .DutyOfficeForwardedBulkActions {
        justify-content: flex-start;
        flex-wrap: wrap;
        min-width: 0;
    }
    .DutyOfficeForwardedGroupHeader small {
        display: none;
    }
    .DutyOfficeChildRecipientMulti .k-multiselect-wrap > li.k-button,
    .DutyOfficeChildRecipientMulti .k-multiselect-wrap > .k-button {
        max-width: 220px;
    }
}


/* Hotfix 32 - chuẩn responsive chung cho toolbar tìm kiếm/chọn số lượng lớn. */
@media (max-width: 900px) {
    .DutyOfficeChildRouteTreeToolbar,
    .DutyAssignPickerToolbar {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
    .DutyOfficeChildRouteTreeBulkButtons {
        justify-content: flex-start;
        flex-wrap: wrap;
        min-width: 0;
    }
    .DutyAssignPickerSelectedBadge {
        justify-self: start;
    }
}

@media (max-width: 640px) {
    .DutyOfficeForwardedBulkActions .btn,
    .DutyOfficeForwardedToolbarButtons .btn,
    .DutyOfficeChildRouteTreeBulkButtons .btn {
        flex: 1 1 auto;
    }
    .DutyOfficeForwardedGroupHeader strong {
        font-size: 10.8px;
    }
}

/* ========================================================================== */
/* Hotfix 33 - defaults khi giao + dữ liệu đã xóa/hủy                         */
/* ========================================================================== */
.DutyTaskFormSectionNotice,
.DutyDeletedDataNotice,
.DutyDangerNotice {
    border: 1px solid #d7e7f5;
    border-left: 4px solid #2f86c7;
    background: #f4f9fd;
    border-radius: 4px;
    padding: 10px 12px;
    margin: 8px 0 14px;
    line-height: 1.55;
}

.DutyTaskFormSectionNoticeWarning,
.DutyDangerNotice {
    border-color: #f0d6d3;
    border-left-color: #d9534f;
    background: #fff7f6;
}

.DutyDeletedBlocked {
    display: inline-block;
    max-width: 360px;
    color: #8a6d3b;
    background: #fcf8e3;
    border: 1px solid #faebcc;
    border-radius: 3px;
    padding: 4px 7px;
    white-space: normal;
    line-height: 1.35;
}

.DutyPermanentDeleteSummary {
    border: 1px solid #e4e7ea;
    background: #fafbfc;
    border-radius: 4px;
    padding: 10px 12px;
    margin-bottom: 12px;
    font-weight: 600;
    color: #34495e;
    word-break: break-word;
}

#DutyDeletedDataGrid .k-grid-content td {
    vertical-align: middle;
}

#DutyDeletedDataGrid .btn-danger {
    white-space: nowrap;
}

@media (max-width: 900px) {
    .DutyDeletedBlocked { max-width: 240px; }
    .DutyTaskFormSectionNotice,
    .DutyDeletedDataNotice,
    .DutyDangerNotice { padding: 9px 10px; }
}

/* ========================================================================== */
/* HOTFIX 41 - Đợt giao: STT/Thao tác icon + tra cứu đơn vị đã nhận           */
/* ========================================================================== */
.DutyAssignIconActionGroup {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
}

.DutyAssignIconAction {
    width: 32px;
    min-width: 32px;
    height: 30px;
    padding: 0 !important;
    border-radius: 5px !important;
    line-height: 28px !important;
    text-align: center;
    box-shadow: 0 1px 2px rgba(31, 65, 92, .08);
}

.DutyAssignIconAction .fa {
    margin: 0 !important;
    font-size: 13px;
}

.DutyAssignIconAction:hover,
.DutyAssignIconAction:focus {
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
    box-shadow: 0 3px 7px rgba(31, 65, 92, .16);
}

.DutyAssignActionCell,
.DutyAssignSequenceCell {
    vertical-align: middle !important;
}

.DutyAssignAssignmentState {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
}

.DutyAssignAssignmentState .fa { margin-right: 5px; }

.DutyAssignAssignmentStateEmpty {
    border: 1px solid #d9e1e8;
    background: #f7f9fb;
    color: #768696;
}

.DutyAssignAssignedCountButton {
    display: inline-flex;
    min-width: 135px;
    max-width: 100%;
    padding: 5px 10px;
    border: 1px solid #b9d8ec;
    border-radius: 16px;
    background: #eaf5fc;
    color: #176aa2;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2px 5px;
}

.DutyAssignAssignedCountButton .fa { margin-right: 2px; }
.DutyAssignAssignedCountButton small {
    flex: 0 0 100%;
    color: #6b879a;
    font-size: 10px;
    font-weight: 400;
    text-align: center;
}
.DutyAssignAssignedCountButton:hover,
.DutyAssignAssignedCountButton:focus {
    border-color: #69acd7;
    background: #dff1fc;
    color: #0e5d94;
    outline: none;
}

.DutyAssignAssignedRecipientNotice {
    align-items: center;
    gap: 8px;
}
.DutyAssignAssignedRecipientNotice > div {
    flex: 1 1 auto;
    min-width: 0;
}
.DutyAssignAssignedRecipientHint {
    margin-top: 3px;
    color: #637c90;
    font-size: 12px;
    line-height: 1.45;
}
.DutyAssignAssignedRecipientSummary {
    flex: 0 0 auto;
    min-width: 105px;
    padding: 7px 11px;
    border: 1px solid #c5deef;
    border-radius: 16px;
    background: #fff;
    color: #206b9e;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}

#DutyAssignAssignedRecipientGrid .k-grid-content tbody > tr > td {
    vertical-align: middle;
}

.DutyAssignCellSubText {
    margin-top: 2px;
    color: #7a8b99;
    font-size: 11px;
    line-height: 1.35;
    white-space: normal;
}

@media (max-width: 767px) {
    .DutyAssignAssignedRecipientNotice {
        flex-wrap: wrap;
    }
    .DutyAssignAssignedRecipientSummary {
        margin-left: 25px;
    }
}


/* Hotfix 42 - quyền phân giã/giao tiếp theo từng cơ quan nhận */
.DutyAssignDelegatePermissionCell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 72px;
    margin: 0;
    cursor: pointer;
    font-weight: 600;
    color: #174f78;
    user-select: none;
}
.DutyAssignDelegatePermissionCell input[type=checkbox] {
    width: 16px;
    height: 16px;
    margin: 0;
    vertical-align: middle;
    cursor: pointer;
}
.DutyAssignDelegatePermissionCell.is-locked,
.DutyAssignDelegatePermissionCell.is-locked input[type=checkbox] { cursor: default; }
.DutyAssignDelegatePermissionCell.is-locked { opacity: .78; }
.DutyAssignDelegatePermissionText { min-width: 34px; text-align: left; }
.DutyAssignAssignedCountButton { position: relative; z-index: 1; }
#DutyAssignDutyPickerGrid .DutyAssignAssignedCountButton { pointer-events: auto; }

/* ========================================================================
   Hotfix 46 - Báo cáo kết quả theo từng bước, lỗi theo từng trường và gợi ý
   ======================================================================== */
.DutyReportEditorTopBar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    margin: 0 0 12px;
    border: 1px solid #cfe2f3;
    border-radius: 8px;
    background: #f5fbff;
}
.DutyReportEditorTopTitle { display: flex; align-items: center; gap: 10px; min-width: 0; color: #153b63; }
.DutyReportEditorTopTitle > .fa { font-size: 22px; color: #2687c8; }
.DutyReportEditorTopTitle strong { display: block; font-size: 16px; }
.DutyReportEditorTopTitle span { display: block; margin-top: 2px; color: #667b91; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 760px; }
.DutyReportEditorTopActions { display: flex; gap: 8px; flex: 0 0 auto; }
.DutyReportSmartButton { white-space: nowrap; }
.DutyReportSmartNotice,
.DutyReportValidationSummary {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 10px 0 12px;
    padding: 11px 13px;
    border-radius: 7px;
    line-height: 1.45;
}
.DutyReportSmartNotice { background: #f2ecff; border: 1px solid #d8c9fb; color: #4d3778; }
.DutyReportValidationSummary { display: block; background: #fff3f3; border: 1px solid #efb7b7; color: #9f2020; }
.DutyReportValidationTitle { font-weight: 700; margin-bottom: 5px; }
.DutyReportValidationSummary ul { margin: 4px 0 0 22px; padding: 0; }

.DutyReportStepNav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 8px;
    margin: 10px 0 14px;
}
.DutyReportStepTab {
    border: 1px solid #d7e0e8;
    border-radius: 8px;
    background: #f8fafc;
    color: #5a6c7d;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    text-align: left;
    cursor: default;
    pointer-events: none;
}
.DutyReportStepTab span {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #dbe5ee;
    color: #34495e;
    font-weight: 700;
}
.DutyReportStepTab.active { border-color: #2f8ecb; background: #edf7fd; color: #154d75; }
.DutyReportStepTab.active span { background: #2f8ecb; color: #fff; }
.DutyReportStepTab.done { border-color: #9fd7c0; background: #f2fbf7; color: #246b50; }
.DutyReportStepTab.done span { background: #30a875; color: #fff; }
.DutyReportStepPane { min-height: 300px; }
.DutyReportStepGuide {
    display: flex;
    gap: 9px;
    margin-bottom: 14px;
    padding: 10px 12px;
    border-left: 4px solid #2d8bc7;
    background: #eef8ff;
    color: #385d78;
}
.DutyReportFieldHelp { color: #3888bd; cursor: help; margin-left: 3px; }
.DutyReportFieldBox { position: relative; margin-bottom: 12px; }
.DutyReportFieldBox.DutyReportFieldError .form-control,
.DutyReportFieldBox.DutyReportFieldError .k-picker-wrap,
.DutyReportFieldBox.DutyReportFieldError .k-dropdown-wrap { border-color: #e74c3c !important; box-shadow: 0 0 0 1px rgba(231,76,60,.08); }
.DutyReportFieldBox.DutyReportFieldError > label { color: #b72e22; }
.DutyReportFieldErrorText { min-height: 17px; margin-top: 3px; font-size: 12px; color: #c0392b; font-weight: 600; }

.DutyReportEvidenceFileSection.DutyReportFieldError {
    border-color: #e7a49d !important;
    box-shadow: 0 0 0 1px rgba(231,76,60,.08);
}
.DutyReportReviewSummary {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 8px;
    padding: 12px;
    margin-bottom: 12px;
    background: #f8fafc;
    border: 1px solid #dce4ea;
    border-radius: 7px;
}
.DutyReportReviewSummary > div { padding: 8px 10px; background: #fff; border: 1px solid #e5eaee; border-radius: 5px; min-width: 0; }
.DutyReportReviewSummary label { display: block; margin: 0 0 3px; color: #708092; font-size: 12px; }
.DutyReportReviewSummary strong, .DutyReportReviewSummary span { overflow-wrap: anywhere; }
.DutyReportReviewFull { grid-column: 1 / -1; }
.DutyReportWizardFooter { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }

.DutyReportTaskDetailHeader { display: flex; gap: 10px; align-items: center; padding: 12px 14px; margin-bottom: 10px; background: #eef8ff; border-radius: 7px; }
.DutyReportTaskDetailHeader .fa { font-size: 23px; color: #2c89c5; }
.DutyReportTaskDetailHeader strong { display: block; color: #17669b; }
.DutyReportTaskDetailHeader span { display: block; margin-top: 2px; color: #23384d; font-weight: 700; }
.DutyReportTaskDetailGrid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.DutyReportTaskDetailGrid > div { padding: 9px 11px; border: 1px solid #e0e6eb; border-radius: 6px; background: #fff; min-width: 0; }
.DutyReportTaskDetailGrid label { display: block; margin: 0 0 4px; color: #63778b; font-size: 12px; }
.DutyReportTaskDetailGrid > div > div { color: #263d52; overflow-wrap: anywhere; }
.DutyReportTaskDetailFull { grid-column: 1 / -1; }
.DutyReportWorkspaceHint { padding: 10px 12px; margin-bottom: 10px; background: #eef8ff; border-left: 4px solid #2d8bc7; color: #45677f; }

@media (max-width: 900px) {
    .DutyReportEditorTopBar { align-items: stretch; flex-direction: column; }
    .DutyReportEditorTopActions { width: 100%; }
    .DutyReportEditorTopActions .btn { flex: 1 1 auto; }
    .DutyReportEditorTopTitle span { max-width: none; white-space: normal; }
    .DutyReportStepNav { grid-template-columns: 1fr; }
    .DutyReportReviewSummary, .DutyReportTaskDetailGrid { grid-template-columns: 1fr; }
    .DutyReportReviewFull, .DutyReportTaskDetailFull { grid-column: auto; }
}

/* ========================================================================== */
/* Hotfix 50 - Phê duyệt báo cáo, tiếp nhận theo đợt và thao tác dạng biểu tượng */
/* ========================================================================== */
.DutyOfficeRowActions.DutyOfficeRowActionsIcons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.DutyOfficeRowActions.DutyOfficeRowActionsIcons .btn,
.DutyOfficeRowActions.DutyOfficeRowActionsIcons .DutyGridIconButton {
    display: inline-flex;
    flex: 0 0 32px;
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}
.DutyOfficeRowActions.DutyOfficeRowActionsIcons .btn .fa {
    width: auto;
    margin: 0 !important;
    font-size: 13px;
}

.DutyApprovalEmbeddedEditor {
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid #d8e6ef;
    border-radius: 8px;
    background: #fbfdff;
}
.DutyApprovalEmbeddedEditor .DutyReportEditorForm {
    margin: 0;
}
.DutyApprovalEmbeddedEditor .DutyReportWizardFooter {
    display: none !important;
}
.DutyApprovalEmbeddedEditor .DutyReportEditorHeader {
    margin-top: 0;
}
.DutyApprovalFooter {
    position: sticky;
    bottom: 0;
    z-index: 4;
    margin: 10px -12px -12px;
    padding: 10px 12px;
    border-top: 1px solid #dce5eb;
    background: rgba(255,255,255,.98);
    text-align: center;
}

.DutyApprovalBatchReceivePanel {
    margin: 0 0 12px;
    padding: 13px 14px;
    border: 1px solid #cfe0ec;
    border-radius: 8px;
    background: #f7fbfe;
}
.DutyApprovalBatchReceiveTitle {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 11px;
    color: #244e6b;
}
.DutyApprovalBatchReceiveTitle > .fa { margin-top: 2px; color: #2f83be; font-size: 18px; }
.DutyApprovalBatchReceiveTitle strong,
.DutyApprovalBatchReceiveTitle span { display: block; }
.DutyApprovalBatchReceiveTitle span { margin-top: 2px; color: #6c8191; font-size: 12px; }
.DutyApprovalBatchReceiveControls {
    display: grid;
    grid-template-columns: minmax(260px,1fr) minmax(260px,1fr) max-content;
    gap: 10px;
    align-items: end;
}
.DutyApprovalBatchReceiveControls label {
    display: block;
    margin: 0 0 5px;
    color: #405a6c;
    font-size: 12px;
    font-weight: 700;
}
.DutyApprovalBatchReceiveControls .k-dropdown { width: 100%; }
.DutyApprovalBatchReceiveActions { display: flex; gap: 6px; }
.DutyApprovalBulkBar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px dashed #ccdce7;
    color: #496477;
}
.DutyApprovalBulkBar strong { color: #176da4; font-size: 16px; }

.DutyAssignReportContextBar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid #d5e4ee;
    border-radius: 7px;
    background: #f6fbfe;
}
.DutyAssignReportContextBar > .fa { color: #2d82ba; font-size: 20px; }
.DutyAssignReportContextBar strong,
.DutyAssignReportContextBar span { display: block; }
.DutyAssignReportContextBar strong { color: #234b66; }
.DutyAssignReportContextBar span { margin-top: 2px; color: #647b8c; font-size: 12px; }
.DutyAssignReportDetailSummary {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 8px;
    margin-bottom: 10px;
}
.DutyAssignReportDetailSummary > div {
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #dce7ee;
    border-radius: 6px;
    background: #f8fbfd;
}
.DutyAssignReportDetailSummary label,
.DutyAssignReportDetailSummary strong { display: block; }
.DutyAssignReportDetailSummary label { color: #698091; font-size: 11px; }
.DutyAssignReportDetailSummary strong { margin-top: 3px; color: #234761; }
.DutyAssignReportTextBlock,
.DutyAssignReportFiles {
    margin-top: 9px;
    padding: 11px 12px;
    border: 1px solid #dce7ee;
    border-radius: 6px;
    background: #fff;
    line-height: 1.55;
}
.DutyAssignReportBlockTitle {
    margin-bottom: 6px;
    color: #244d68;
    font-weight: 700;
}
.DutyAssignReportEmpty { color: #7b8e9c; font-style: italic; }

@media (max-width: 991px) {
    .DutyApprovalBatchReceiveControls { grid-template-columns: 1fr; }
    .DutyApprovalBatchReceiveActions { justify-content: flex-start; }
    .DutyAssignReportDetailSummary { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 600px) {
    .DutyApprovalBulkBar { align-items: stretch; flex-direction: column; }
    .DutyAssignReportDetailSummary { grid-template-columns: 1fr; }
}
.DutyApprovalEmbeddedEditor .DutyReportWizardFooter.DutyReportApprovalNavigationFooter {
    display: block !important;
    margin: 10px 0 0;
    padding: 9px 0 0;
    border-top: 1px solid #e0e8ee;
    background: transparent;
    text-align: center;
}

/* ================= Hotfix 51: số lần báo cáo và bộ lọc trạng thái ================= */
.DutyReportCountButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid #45afd0;
    border-radius: 7px;
    background: #55b9d8;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 28px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.DutyReportCountButton:hover,
.DutyReportCountButton:focus {
    background: #329fc2;
    border-color: #278ead;
    color: #fff;
    outline: none;
}
.DutyReportCountButtonOffice { margin: 0 2px; }

.DutyApprovalPageTitleActions {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 12px;
}
.DutyApprovalStatusFilterBox,
.DutyNotificationFilterBar {
    display: flex;
    align-items: center;
    gap: 8px;
}
.DutyApprovalStatusFilterBox label,
.DutyNotificationFilterBar label {
    margin: 0;
    color: #36566d;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.DutyApprovalStatusFilterBox .k-dropdown { width: 205px; }
.DutyNotificationFilterBar .k-dropdown { width: 180px; }

.DutyNotificationPanelTitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.DutyNotificationPanelTitle h2 { float: none; margin-right: 0; }
.DutyNotificationFilterBar { margin-left: auto; }

/* Kendo UI cũ đôi khi co wrapper theo nội dung. Gắn class ở lúc mở để giữ cửa sổ thông báo đủ rộng. */
.DutyNotificationDetailWindowWrapper.k-window {
    min-width: 720px !important;
    max-width: 96vw !important;
}
.DutyNotificationDetailWindowWrapper .k-window-content {
    min-width: 0;
    overflow-x: hidden;
}
.DutyNotificationDetailRoot { min-width: 0; }
.DutyNotificationDetailContent,
.DutyNotificationDetailGuidance {
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
}

@media (max-width: 800px) {
    .DutyApprovalPageTitleActions { align-items: stretch; flex-direction: column; }
    .DutyApprovalStatusFilterBox { justify-content: flex-end; }
    .DutyNotificationPanelTitle { align-items: stretch; flex-direction: column; }
    .DutyNotificationFilterBar { margin-left: 0; justify-content: flex-end; }
    .DutyNotificationDetailWindowWrapper.k-window { min-width: 0 !important; width: 96vw !important; }
}

/* ================= Hotfix 52 R2: phê duyệt hàng loạt, màu số báo cáo và lịch sử báo cáo ================= */
.DutyReportCountButtonHasReport {
    background: #2fa84f !important;
    border-color: #238b40 !important;
    color: #fff !important;
}
.DutyReportCountButtonHasReport:hover,
.DutyReportCountButtonHasReport:focus {
    background: #268d42 !important;
    border-color: #1d7335 !important;
    color: #fff !important;
}
.DutyReportCountButtonNoReport {
    background: #d9534f !important;
    border-color: #c6433f !important;
    color: #fff !important;
}
.DutyReportCountButtonNoReport:hover,
.DutyReportCountButtonNoReport:focus {
    background: #c64541 !important;
    border-color: #ad3632 !important;
    color: #fff !important;
}

/* Giữ bộ lọc trạng thái và nút Hướng dẫn trên cùng một hàng ở màn hình desktop. */
.DutyApprovalPage .page-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}
.DutyApprovalPage .page-title .title_left {
    float: none;
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
}
.DutyApprovalPage .page-title .title_right.DutyApprovalPageTitleActions {
    float: none;
    width: auto;
    min-width: 500px;
    padding: 0;
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}
.DutyApprovalPageTitleActions .DutyApprovalStatusFilterBox {
    flex: 0 0 auto;
}
.DutyApprovalPageTitleActions .DutyPageHelpButton {
    flex: 0 0 auto;
    margin: 0;
}

.DutyApprovalGlobalBulkBar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 10px 0 12px;
    padding: 10px 12px;
    border: 1px solid #dbe5ec;
    border-radius: 7px;
    background: #f8fbfd;
}
.DutyApprovalBulkSummary {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: #36566d;
}
.DutyApprovalSelectionModeText {
    margin-left: 6px;
    padding-left: 10px;
    border-left: 1px solid #d5e0e8;
    color: #6b7f8f;
    font-size: 12px;
}
.DutyApprovalBulkActions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
}

.DutyApprovalSubmittedReportHeader {
    display: grid;
    grid-template-columns: minmax(260px, .8fr) minmax(380px, 1.2fr);
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px 14px;
    border: 1px solid #dce7ee;
    border-radius: 7px;
    background: #f7fafc;
}
.DutyApprovalSubmittedReportHeader > div {
    min-width: 0;
}
.DutyApprovalSubmittedReportHeader label {
    display: block;
    margin: 0 0 3px;
    color: #6b7f8f;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}
.DutyApprovalSubmittedReportHeader strong {
    display: block;
    color: #163f5d;
    overflow-wrap: anywhere;
}

@media (max-width: 1050px) {
    .DutyApprovalPage .page-title {
        flex-direction: column;
        align-items: stretch;
    }
    .DutyApprovalPage .page-title .title_right.DutyApprovalPageTitleActions {
        min-width: 0;
        justify-content: flex-start;
    }
    .DutyApprovalGlobalBulkBar {
        align-items: flex-start;
        flex-direction: column;
    }
    .DutyApprovalBulkActions {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}
@media (max-width: 700px) {
    .DutyApprovalSubmittedReportHeader {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   Hotfix 53 - Dashboard điều hành toàn diện, drill-down Kendo Window
   Tất cả selector được scope dưới .DutyDashboardModern53 để không ảnh hưởng màn hình Duty khác.
   ============================================================================ */
.DutyDashboardModern53 { padding-bottom: 24px; }
.DutyDashboardModern53 .DutyDashboard53PageTitle { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:12px; }
.DutyDashboardModern53 .DutyDashboard53PageTitle .title_left { width:auto; float:none; flex:1 1 auto; }
.DutyDashboardModern53 .DutyDashboard53HeaderActions { width:auto; float:none; display:flex; align-items:center; gap:10px; }
.DutyDashboardModern53 .DutyDashboard53Updated { display:inline-flex; align-items:center; gap:7px; padding:8px 11px; border:1px solid #dce5ec; border-radius:5px; background:#fff; color:#63788a; white-space:nowrap; }
.DutyDashboardModern53 .DutyDashboard53Panel { border:1px solid #d7e2ea; border-radius:9px; box-shadow:0 2px 8px rgba(22,65,96,.06); overflow:hidden; }
.DutyDashboardModern53 .DutyDashboard53Panel > .x_title { margin:0; padding:11px 14px; min-height:43px; border-bottom:1px solid #dbe6ed; background:#eef8fd; }
.DutyDashboardModern53 .DutyDashboard53Panel > .x_title h2 { margin:0; font-size:15px; font-weight:700; color:#154f7d; }
.DutyDashboardModern53 .DutyDashboard53Panel > .x_content { padding:13px; }
.DutyDashboardModern53 .DutyDashboard53FilterPanel { margin-bottom:14px; }
.DutyDashboardModern53 .DutyDashboard53FilterGrid { display:grid; grid-template-columns:1.55fr repeat(5,minmax(145px,1fr)); gap:10px 12px; align-items:end; }
.DutyDashboardModern53 .DutyDashboard53AdvancedFilters { grid-template-columns:repeat(4,minmax(170px,1fr)); margin-top:10px; padding-top:10px; border-top:1px dashed #d8e4ec; }
.DutyDashboardModern53 .DutyDashboard53Field { min-width:0; }
.DutyDashboardModern53 .DutyDashboard53Field label, .DutyDashboardModern53 .DutyDashboard53Keyword label { display:block; margin:0 0 5px; color:#244d6a; font-size:12px; font-weight:700; }
.DutyDashboardModern53 .DutyDashboard53Field .k-dropdown, .DutyDashboardModern53 .DutyDashboard53Field .k-datepicker { width:100%; }
.DutyDashboardModern53 .DutyDashboard53PeriodControls { display:grid; grid-template-columns:105px minmax(112px,1fr) 12px minmax(112px,1fr); gap:6px; align-items:center; }
.DutyDashboardModern53 .DutyDashboard53PeriodControls > .k-dropdown, .DutyDashboardModern53 .DutyDashboard53PeriodControls > .k-datepicker { width:100%; }
.DutyDashboardModern53 .DutyDashboard53SearchRow { display:flex; align-items:flex-end; gap:12px; margin-top:11px; }
.DutyDashboardModern53 .DutyDashboard53Keyword { flex:1 1 420px; min-width:220px; }
.DutyDashboardModern53 .DutyDashboard53SearchActions { display:flex; gap:8px; flex:0 0 auto; }
.DutyDashboardModern53 .DutyDashboard53SearchActions .btn { min-width:112px; }
.DutyDashboardModern53 .DutyDashboard53FilterNote { margin-top:9px; padding:7px 9px; border-left:3px solid #3295d6; background:#f5fbff; color:#587083; font-size:12px; }

.DutyDashboardModern53 .DutyDashboard53KpiGrid { display:grid; grid-template-columns:1.08fr repeat(4,1fr); gap:12px; margin-bottom:12px; }
.DutyDashboardModern53 .DutyDashboard53Kpi { border:1px solid #d9e3ea; border-radius:9px; background:#fff; overflow:hidden; box-shadow:0 2px 8px rgba(24,68,97,.07); }
.DutyDashboardModern53 .DutyDashboard53KpiHead { min-height:108px; display:flex; align-items:center; gap:12px; padding:15px; color:#fff; }
.DutyDashboardModern53 .DutyDashboard53KpiHead > i { display:flex; width:42px; height:42px; align-items:center; justify-content:center; border-radius:50%; border:1px solid rgba(255,255,255,.38); background:rgba(255,255,255,.12); font-size:21px; }
.DutyDashboardModern53 .DutyDashboard53KpiHead > div { min-width:0; flex:1; text-align:center; }
.DutyDashboardModern53 .DutyDashboard53KpiHead span { display:block; margin-bottom:5px; font-size:11px; font-weight:700; text-transform:uppercase; }
.DutyDashboardModern53 .DutyDashboard53MainNumber { display:block; width:100%; border:0; padding:0; background:transparent; color:#fff; cursor:pointer; }
.DutyDashboardModern53 .DutyDashboard53MainNumber strong { display:block; font-size:31px; line-height:1.1; }
.DutyDashboardModern53 .DutyDashboard53KpiBlue .DutyDashboard53KpiHead { background:#2f71d7; }
.DutyDashboardModern53 .DutyDashboard53KpiGreen .DutyDashboard53KpiHead { background:#22a979; }
.DutyDashboardModern53 .DutyDashboard53KpiOrange .DutyDashboard53KpiHead { background:#f6a01a; }
.DutyDashboardModern53 .DutyDashboard53KpiRed .DutyDashboard53KpiHead { background:#ef4138; }
.DutyDashboardModern53 .DutyDashboard53KpiPurple .DutyDashboard53KpiHead { background:#6756d8; }
.DutyDashboardModern53 .DutyDashboard53KpiSplit { display:grid; grid-template-columns:repeat(2,1fr); min-height:72px; }
.DutyDashboardModern53 .DutyDashboard53KpiSplit3 { grid-template-columns:repeat(3,1fr); }
.DutyDashboardModern53 .DutyDashboard53KpiSplit > button, .DutyDashboardModern53 .DutyDashboard53KpiSplit > div { border:0; border-right:1px solid #e7edf1; background:#fff; padding:9px 5px; text-align:center; color:#536b7c; }
.DutyDashboardModern53 .DutyDashboard53KpiSplit > :last-child { border-right:0; }
.DutyDashboardModern53 .DutyDashboard53KpiSplit button { cursor:pointer; }
.DutyDashboardModern53 .DutyDashboard53KpiSplit button:hover, .DutyDashboardModern53 .DutyDashboard53KpiSplit button:focus { background:#f2f8fc; outline:0; }
.DutyDashboardModern53 .DutyDashboard53KpiSplit small { display:block; min-height:29px; font-size:10.5px; }
.DutyDashboardModern53 .DutyDashboard53KpiSplit strong { display:block; color:#1d5984; font-size:19px; }
.DutyDashboardModern53 .DutyDashboard53DutyTypes { display:flex; gap:5px; justify-content:center; }
.DutyDashboardModern53 .DutyDashboard53DutyTypes button { border:0; background:transparent; padding:0 3px; color:inherit; }
.DutyDashboardModern53 .DutyDashboard53DutyTypes button + button { border-left:1px solid #e4e9ee; padding-left:7px; }
.DutyDashboardModern53 .DutyDashboard53KpiFoot { padding:6px 8px; border-top:1px solid #edf1f4; text-align:center; color:#687d8d; font-size:10.5px; }
.DutyDashboardModern53 .DutyDashboard53KpiFoot button { border:0; background:none; padding:0 2px; color:#4b40b4; }

.DutyDashboardModern53 .DutyDashboard53Attention { display:flex; align-items:stretch; margin:0 0 12px; border:1px solid #dbe5ec; border-radius:9px; background:#fff; overflow:hidden; box-shadow:0 2px 7px rgba(22,65,96,.05); }
.DutyDashboardModern53 .DutyDashboard53AttentionTitle { display:flex; align-items:center; gap:7px; padding:12px 14px; color:#194f77; font-weight:700; background:#f6fbfe; white-space:nowrap; }
.DutyDashboardModern53 .DutyDashboard53AttentionItems { flex:1; display:grid; grid-template-columns:repeat(9,1fr); }
.DutyDashboardModern53 .DutyDashboard53AttentionItems button { border:0; border-left:1px solid #e7edf1; background:#fff; padding:9px 5px; cursor:pointer; }
.DutyDashboardModern53 .DutyDashboard53AttentionItems button:hover { background:#fff8f5; }
.DutyDashboardModern53 .DutyDashboard53AttentionItems strong { display:block; font-size:18px; color:#e34b3f; }
.DutyDashboardModern53 .DutyDashboard53AttentionItems span { display:block; margin-top:2px; color:#5e7383; font-size:10.5px; }

.DutyDashboardModern53 .DutyDashboard53AnalyticsGrid { display:grid; grid-template-columns:1.15fr .9fr .9fr 1fr; gap:12px; margin-bottom:12px; }
.DutyDashboardModern53 .DutyDashboard53AnalyticsGrid .DutyDashboard53Panel { margin:0; min-width:0; }
.DutyDashboardModern53 .DutyDashboard53Chart { min-height:285px; }
.DutyDashboardModern53 .DutyDashboard53WideChart { min-height:310px; }
.DutyDashboardModern53 .DutyDashboard53OfficePanel, .DutyDashboardModern53 .DutyDashboard53DetailPanel { margin-bottom:12px; }
.DutyDashboardModern53 .DutyDashboard53GridCaption { float:right; color:#6b7f8c; font-size:11px; margin-top:3px; }
.DutyDashboard53Empty { padding:28px 14px; text-align:center; color:#7b8e9c; }
.DutyDashboardModern53.DutyDashboard53Loading { opacity:.88; }

.DutyDashboard53CodeLink { border:1px solid #a9bfd1; border-radius:4px; background:#f5f9fc; color:#155b91; font-weight:700; padding:3px 6px; }
.DutyDashboard53CodeLink:hover { background:#e9f5fc; }
.DutyDashboard53Status { display:inline-block; padding:4px 8px; border-radius:12px; font-size:11px; font-weight:700; white-space:nowrap; }
.DutyDashboard53Status.is-completed { background:#e8f8ef; color:#20814e; border:1px solid #b9e4c9; }
.DutyDashboard53Status.is-progress { background:#fff5df; color:#b86e00; border:1px solid #f0d69a; }
.DutyDashboard53Status.is-not-started { background:#f4f6f8; color:#687986; border:1px solid #dce3e8; }
.DutyDashboard53Progress { display:flex; align-items:center; gap:7px; }
.DutyDashboard53Progress strong { min-width:43px; color:#1d5e8c; font-size:11px; }
.DutyDashboard53Progress span { display:block; flex:1; height:7px; background:#e8edf1; border-radius:5px; overflow:hidden; }
.DutyDashboard53Progress i { display:block; height:100%; background:#3a91e8; border-radius:5px; }
.DutyDashboard53Time { font-size:11px; }
.DutyDashboard53Time.is-danger { color:#d9362d; font-weight:700; }
.DutyDashboard53Time.is-success { color:#1c8a50; font-weight:700; }
.DutyDashboard53Official { display:block; color:#11864c; }
.DutyDashboard53Official + small { color:#617886; }
.DutyDashboard53Warning { display:inline-block; color:#c9472d; font-size:11px; font-weight:600; }
.DutyDashboardModern53 .DutyDashboard53TinyMetric { min-width:30px; border:0; border-radius:10px; background:#edf6fc; color:#17649a; font-weight:700; }

.DutyDashboard53EvidenceRoot, .DutyDashboard53AssignRoot { padding:12px; }
.DutyDashboard53EvidenceIntro { display:flex; justify-content:space-between; gap:16px; margin-bottom:12px; padding:11px 13px; border:1px solid #d8e6ee; border-radius:7px; background:#f4fbff; }
.DutyDashboard53EvidenceIntro > div:first-child { flex:1; }
.DutyDashboard53EvidenceIntro strong { display:block; color:#15537e; font-size:15px; }
.DutyDashboard53EvidenceIntro span { display:block; margin-top:4px; color:#617786; font-size:12px; }
.DutyDashboard53EvidenceCount { align-self:center; white-space:nowrap; color:#516d80; }
.DutyDashboard53EvidenceCount strong { display:inline; font-size:18px; color:#166aa2; }
.DutyDashboard53AssignHeader { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; padding:12px; border:1px solid #d7e5ed; border-radius:7px; background:#f3faff; }
.DutyDashboard53AssignHeader > div strong { display:block; color:#125987; font-size:16px; }
.DutyDashboard53AssignHeader > div span { display:block; margin-top:3px; color:#334e61; }
.DutyDashboard53AssignFacts { display:grid; grid-template-columns:repeat(2,1fr); gap:0; margin:12px 0; border:1px solid #e0e7ec; border-radius:7px; overflow:hidden; }
.DutyDashboard53AssignFacts > div { padding:9px 11px; border-bottom:1px solid #e7ecef; }
.DutyDashboard53AssignFacts > div:nth-child(odd) { border-right:1px solid #e7ecef; }
.DutyDashboard53AssignFacts label { display:block; margin:0 0 2px; color:#718390; font-size:10.5px; text-transform:uppercase; }
.DutyDashboard53AssignFacts span { color:#263f50; }
.DutyDashboard53TextBlock { margin:9px 0; padding:10px 12px; border:1px solid #e1e8ed; border-radius:6px; }
.DutyDashboard53TextBlock > strong { display:block; margin-bottom:5px; color:#15577f; }
.DutyDashboard53ReportHistory h4 { margin:16px 0 8px; color:#15577f; font-size:14px; font-weight:700; }
.DutyDashboard53OfficialBadge { display:inline-block; margin-left:4px; padding:2px 5px; border-radius:8px; background:#e4f6ea; color:#197847; font-size:9px; font-weight:700; }

@media (max-width: 1400px) {
    .DutyDashboardModern53 .DutyDashboard53FilterGrid { grid-template-columns:repeat(3,1fr); }
    .DutyDashboardModern53 .DutyDashboard53PeriodField { grid-column:span 2; }
    .DutyDashboardModern53 .DutyDashboard53AdvancedFilters { grid-template-columns:repeat(4,1fr); }
    .DutyDashboardModern53 .DutyDashboard53KpiGrid { grid-template-columns:repeat(3,1fr); }
    .DutyDashboardModern53 .DutyDashboard53AnalyticsGrid { grid-template-columns:repeat(2,1fr); }
    .DutyDashboardModern53 .DutyDashboard53AttentionItems { grid-template-columns:repeat(4,1fr); }
}
@media (max-width: 991px) {
    .DutyDashboardModern53 .DutyDashboard53PageTitle { display:block; }
    .DutyDashboardModern53 .DutyDashboard53HeaderActions { margin-top:8px; justify-content:flex-start; }
    .DutyDashboardModern53 .DutyDashboard53FilterGrid, .DutyDashboardModern53 .DutyDashboard53AdvancedFilters { grid-template-columns:repeat(2,1fr); }
    .DutyDashboardModern53 .DutyDashboard53PeriodField { grid-column:span 2; }
    .DutyDashboardModern53 .DutyDashboard53KpiGrid { grid-template-columns:repeat(2,1fr); }
    .DutyDashboardModern53 .DutyDashboard53Attention { display:block; }
    .DutyDashboardModern53 .DutyDashboard53AttentionItems { grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 640px) {
    .DutyDashboardModern53 .DutyDashboard53FilterGrid, .DutyDashboardModern53 .DutyDashboard53AdvancedFilters, .DutyDashboardModern53 .DutyDashboard53KpiGrid, .DutyDashboardModern53 .DutyDashboard53AnalyticsGrid { grid-template-columns:1fr; }
    .DutyDashboardModern53 .DutyDashboard53PeriodField { grid-column:auto; }
    .DutyDashboardModern53 .DutyDashboard53PeriodControls { grid-template-columns:1fr 1fr; }
    .DutyDashboardModern53 .DutyDashboard53PeriodControls > span { display:none; }
    .DutyDashboardModern53 .DutyDashboard53SearchRow { display:block; }
    .DutyDashboardModern53 .DutyDashboard53SearchActions { margin-top:8px; flex-wrap:wrap; }
    .DutyDashboardModern53 .DutyDashboard53AttentionItems { grid-template-columns:repeat(2,1fr); }
    .DutyDashboard53EvidenceIntro { display:block; }
    .DutyDashboard53EvidenceCount { margin-top:8px; }
    .DutyDashboard53AssignFacts { grid-template-columns:1fr; }
    .DutyDashboard53AssignFacts > div:nth-child(odd) { border-right:0; }
}
.DutyDashboardModern53 .DutyDashboard53MainNumber em { display:block; margin-top:3px; font-size:11px; font-style:normal; font-weight:600; opacity:.9; }

/* Hotfix 53 - cột chi tiết Dashboard bổ sung theo giao diện đã thống nhất */
.DutyDashboard53Route {
    white-space: normal;
    line-height: 1.45;
    color: #60788a;
}
.DutyDashboard53Kind,
.DutyDashboard53ReportPeriod {
    display: inline-block;
    padding: 3px 7px;
    border-radius: 10px;
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}
.DutyDashboard53Kind.is-regular { color: #176594; background: #eaf6fd; border: 1px solid #b8def5; }
.DutyDashboard53Kind.is-deadline { color: #7b5a0d; background: #fff7dd; border: 1px solid #f1d783; }
.DutyDashboard53ReportPeriod.is-sent { color: #147340; background: #eaf8f0; border: 1px solid #b9e5cc; }
.DutyDashboard53ReportPeriod.is-missing { color: #b23c32; background: #fff0ee; border: 1px solid #efc0bc; }

/* ============================================================================
   Hotfix 54 - tinh chỉnh Dashboard theo phản hồi giao diện 14/08/2026
   - Chống chồng/đè control bộ lọc.
   - 03 biểu đồ tổng hợp trên một hàng, giảm chiều cao.
   - "Theo cơ quan" và "Cơ quan cần chú ý" trên cùng một hàng.
   - Biểu đồ cơ quan dùng vùng cuộn dọc khi nhiều đơn vị.
   - Danh sách chính nhóm theo nhiệm vụ; số cơ quan nhận và giao chuyển tiếp bấm xem được.
   ============================================================================ */
.DutyDashboardModern53 .DutyDashboard53FilterGrid:not(.DutyDashboard53AdvancedFilters) {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    align-items: end;
}
.DutyDashboardModern53 .DutyDashboard53PeriodField { grid-column: span 2; }
.DutyDashboardModern53 .DutyDashboard53Field,
.DutyDashboardModern53 .DutyDashboard53PeriodControls,
.DutyDashboardModern53 .DutyDashboard53PeriodControls > * { min-width: 0; }
.DutyDashboardModern53 .DutyDashboard53Field .k-widget,
.DutyDashboardModern53 .DutyDashboard53PeriodControls .k-widget,
.DutyDashboardModern53 .DutyDashboard53Field .k-dropdown,
.DutyDashboardModern53 .DutyDashboard53Field .k-datepicker,
.DutyDashboardModern53 .DutyDashboard53Field .k-combobox { max-width: 100%; box-sizing: border-box; }
.DutyDashboardModern53 .DutyDashboard53PeriodControls {
    grid-template-columns: minmax(86px, .8fr) minmax(108px, 1fr) 10px minmax(108px, 1fr);
    gap: 5px;
}

/* Nhãn ở trên, số liệu ở dưới trong toàn bộ phần chia nhỏ của KPI đầu tiên. */
.DutyDashboardModern53 .DutyDashboard53DutyTypes { align-items: stretch; }
.DutyDashboardModern53 .DutyDashboard53DutyTypes button { display:flex; flex:1 1 0; flex-direction:column; align-items:center; justify-content:center; }
.DutyDashboardModern53 .DutyDashboard53DutyTypes button small { order:1; min-height:29px; }
.DutyDashboardModern53 .DutyDashboard53DutyTypes button strong { order:2; }

/* Ba nội dung tổng hợp luôn cùng một hàng ở màn hình desktop/tablet ngang. */
.DutyDashboardModern53 .DutyDashboard54AnalyticsPrimary {
    grid-template-columns: minmax(0, 1.22fr) minmax(0, .89fr) minmax(0, .89fr) !important;
    gap: 12px;
}
.DutyDashboardModern53 .DutyDashboard54AnalyticsPrimary .DutyDashboard53Panel { min-width:0; }
.DutyDashboardModern53 .DutyDashboard54AnalyticsPrimary .x_content { padding:8px 10px 6px; }
.DutyDashboardModern53 .DutyDashboard54PrimaryChart {
    height: 235px;
    min-height: 235px !important;
}

/* Theo cơ quan + Cơ quan cần chú ý trên cùng một hàng. */
.DutyDashboardModern53 .DutyDashboard54OfficeRow {
    display:grid;
    grid-template-columns: minmax(0, 2.15fr) minmax(300px, .85fr);
    gap:12px;
    margin-bottom:12px;
    align-items:stretch;
}
.DutyDashboardModern53 .DutyDashboard54OfficeRow > .DutyDashboard53Panel { margin:0; min-width:0; }
.DutyDashboardModern53 .DutyDashboard54OfficeRow > .DutyDashboard53Panel > .x_content { padding:10px; }
.DutyDashboardModern53 .DutyDashboard54OfficeChartViewport {
    height:330px;
    max-height:330px;
    overflow-y:auto;
    overflow-x:hidden;
    padding-right:4px;
    scrollbar-gutter: stable;
}
.DutyDashboardModern53 .DutyDashboard54OfficeChartViewport .DutyDashboard53WideChart {
    min-height:255px;
    width:100%;
}
.DutyDashboardModern53 .DutyDashboard54AttentionOfficePanel .k-grid { border:0; }
.DutyDashboardModern53 .DutyDashboard54AttentionOfficePanel .k-grid-content { overflow-y:auto; }

/* Danh sách nhiệm vụ đã nhóm. */
.DutyDashboard54RecipientCount {
    display:inline-flex;
    min-width:62px;
    align-items:center;
    justify-content:center;
    gap:4px;
    padding:4px 8px;
    border:1px solid #9ac7e2;
    border-radius:13px;
    background:#edf8ff;
    color:#116495;
    cursor:pointer;
    white-space:nowrap;
}
.DutyDashboard54RecipientCount strong { font-size:13px; }
.DutyDashboard54RecipientCount span { font-size:10px; font-weight:600; }
.DutyDashboard54RecipientCount:hover,
.DutyDashboard54RecipientCount:focus { background:#dff2fd; border-color:#6bb4dc; outline:0; }
.DutyDashboard54ForwardButton { white-space:nowrap; }

@media (max-width: 1500px) {
    .DutyDashboardModern53 .DutyDashboard53FilterGrid:not(.DutyDashboard53AdvancedFilters) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .DutyDashboardModern53 .DutyDashboard53PeriodField { grid-column: span 2; }
}
@media (max-width: 1100px) {
    .DutyDashboardModern53 .DutyDashboard53FilterGrid:not(.DutyDashboard53AdvancedFilters) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .DutyDashboardModern53 .DutyDashboard53PeriodField { grid-column: span 2; }
    .DutyDashboardModern53 .DutyDashboard54OfficeRow { grid-template-columns: minmax(0, 1.65fr) minmax(285px, .85fr); }
}
@media (max-width: 820px) {
    .DutyDashboardModern53 .DutyDashboard54AnalyticsPrimary,
    .DutyDashboardModern53 .DutyDashboard54OfficeRow { grid-template-columns:1fr !important; }
    .DutyDashboardModern53 .DutyDashboard54PrimaryChart { height:250px; min-height:250px !important; }
    .DutyDashboardModern53 .DutyDashboard54OfficeChartViewport { height:340px; max-height:340px; }
}
@media (max-width: 640px) {
    .DutyDashboardModern53 .DutyDashboard53FilterGrid:not(.DutyDashboard53AdvancedFilters) { grid-template-columns:1fr; }
    .DutyDashboardModern53 .DutyDashboard53PeriodField { grid-column:auto; }
    .DutyDashboardModern53 .DutyDashboard53PeriodControls { grid-template-columns:1fr 1fr; }
}
.DutyDashboardModern53 .DutyDashboard54OfficeRow { grid-template-columns:minmax(0,1.7fr) minmax(345px,.9fr); }
@media (max-width:1100px) {
    .DutyDashboardModern53 .DutyDashboard54OfficeRow { grid-template-columns:minmax(0,1.45fr) minmax(335px,.95fr); }
}
@media (max-width:820px) {
    .DutyDashboardModern53 .DutyDashboard54OfficeRow { grid-template-columns:1fr !important; }
}

/* ================= Hotfix 55: chuẩn hóa KPI và phân biệt cơ quan nhận trực tiếp/chuyển tiếp ================= */
.DutyDashboardModern53 .DutyDashboard55KpiSplit4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.DutyDashboardModern53 .DutyDashboard53KpiSplit {
    min-height: 82px;
    align-items: stretch;
}
.DutyDashboardModern53 .DutyDashboard53KpiSplit > button,
.DutyDashboardModern53 .DutyDashboard53KpiSplit > div {
    min-width: 0;
    min-height: 82px;
    padding: 8px 4px 9px;
}
.DutyDashboardModern53 .DutyDashboard53KpiSplit > button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.DutyDashboardModern53 .DutyDashboard53KpiSplit small {
    display: flex;
    min-height: 34px;
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.18;
    font-size: 10.5px;
}
.DutyDashboardModern53 .DutyDashboard53KpiSplit strong {
    display: flex;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    font-size: 23px;
    line-height: 1;
    font-weight: 800;
}
.DutyDashboardModern53 .DutyDashboard53KpiBlue .DutyDashboard53KpiSplit strong { color: #2f71d7; }
.DutyDashboardModern53 .DutyDashboard53KpiGreen .DutyDashboard53KpiSplit strong { color: #22a979; }
.DutyDashboardModern53 .DutyDashboard53KpiOrange .DutyDashboard53KpiSplit strong { color: #f39a0a; }
.DutyDashboardModern53 .DutyDashboard53KpiRed .DutyDashboard53KpiSplit strong { color: #ef4138; }
.DutyDashboardModern53 .DutyDashboard53KpiPurple .DutyDashboard53KpiSplit strong { color: #6756d8; }
.DutyDashboardModern53 .DutyDashboard53KpiFoot {
    min-height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2px;
}
.DutyDashboardModern53 .DutyDashboard53KpiBlue .DutyDashboard53KpiFoot button { color: #2f71d7; }
.DutyDashboardModern53 .DutyDashboard53KpiGreen .DutyDashboard53KpiFoot button { color: #168b63; }
.DutyDashboardModern53 .DutyDashboard53KpiOrange .DutyDashboard53KpiFoot button { color: #d77e00; }
.DutyDashboardModern53 .DutyDashboard53KpiRed .DutyDashboard53KpiFoot button { color: #d9342c; }
.DutyDashboardModern53 .DutyDashboard53KpiPurple .DutyDashboard53KpiFoot button { color: #5847c7; }

@media (max-width: 1350px) {
    .DutyDashboardModern53 .DutyDashboard55KpiSplit4 small { font-size: 9.8px; }
    .DutyDashboardModern53 .DutyDashboard55KpiSplit4 strong { font-size: 21px; }
}

/* ============================================================================
   Hotfix 56 - Dashboard theo mô hình Nhiệm vụ -> trạng thái nhiệm vụ -> trách nhiệm trực tiếp.
   Các quy tắc này chỉ scope trong Dashboard, không tác động màn hình Duty khác.
   ============================================================================ */
.DutyDashboard56 .DutyDashboard56KpiGrid {
    grid-template-columns: repeat(5, minmax(225px, 1fr));
    align-items: stretch;
}
.DutyDashboard56 .DutyDashboard56Kpi {
    display: flex;
    min-width: 0;
    flex-direction: column;
}
.DutyDashboard56 .DutyDashboard56Kpi .DutyDashboard53KpiHead {
    min-height: 116px;
}
.DutyDashboard56 .DutyDashboard53MainNumber em {
    min-height: 16px;
}
.DutyDashboard56 .DutyDashboard56TierLabel {
    padding: 5px 7px 3px;
    border-bottom: 1px solid #edf2f5;
    background: #fbfdfe;
    color: #718494;
    text-align: center;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
}
.DutyDashboard56 .DutyDashboard56Tier {
    min-height: 76px;
}
.DutyDashboard56 .DutyDashboard56Split4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.DutyDashboard56 .DutyDashboard56Split4 > button {
    min-height: 76px;
    padding-left: 2px;
    padding-right: 2px;
}
.DutyDashboard56 .DutyDashboard56Split4 small {
    min-height: 34px;
    font-size: 9.2px;
}
.DutyDashboard56 .DutyDashboard56Split4 strong {
    font-size: 20px;
}
.DutyDashboard56 .DutyDashboard56Tier3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 69px;
    border-top: 1px solid #e8eef2;
    background: #fbfcfd;
}
.DutyDashboard56 .DutyDashboard56Tier3Four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.DutyDashboard56 .DutyDashboard56Tier3 > button {
    display: flex;
    min-width: 0;
    min-height: 69px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 0;
    border-right: 1px solid #e8eef2;
    background: transparent;
    padding: 6px 3px;
    cursor: pointer;
}
.DutyDashboard56 .DutyDashboard56Tier3 > button:last-child { border-right: 0; }
.DutyDashboard56 .DutyDashboard56Tier3 > button:hover,
.DutyDashboard56 .DutyDashboard56Tier3 > button:focus { background: #f1f7fb; outline: 0; }
.DutyDashboard56 .DutyDashboard56Tier3 small {
    display: flex;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    color: #64798a;
    text-align: center;
    font-size: 9.4px;
    line-height: 1.15;
}
.DutyDashboard56 .DutyDashboard56Tier3 strong {
    display: block;
    margin-top: 2px;
    font-size: 19px;
    line-height: 1;
    font-weight: 800;
}
.DutyDashboard56 .DutyDashboard53KpiGreen .DutyDashboard56Tier3 strong { color: #168b63; }
.DutyDashboard56 .DutyDashboard53KpiOrange .DutyDashboard56Tier3 strong { color: #d98200; }
.DutyDashboard56 .DutyDashboard53KpiRed .DutyDashboard56Tier3 strong { color: #d9362f; }
.DutyDashboard56 .DutyDashboard53KpiPurple .DutyDashboard56Tier3 strong { color: #5847c7; }
.DutyDashboard56 .DutyDashboard56KpiFoot {
    display: flex;
    min-height: 31px;
    margin-top: auto;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3px;
    border-top: 1px solid #edf1f4;
    padding: 6px 7px;
    background: #fff;
    color: #6a7e8e;
    text-align: center;
    font-size: 10px;
}
.DutyDashboard56 .DutyDashboard56KpiFoot button {
    border: 0;
    background: transparent;
    padding: 0 2px;
    font-weight: 700;
    cursor: pointer;
}
.DutyDashboard56 .DutyDashboard53KpiGreen .DutyDashboard56KpiFoot button { color: #168b63; }
.DutyDashboard56 .DutyDashboard53KpiOrange .DutyDashboard56KpiFoot button { color: #d98200; }
.DutyDashboard56 .DutyDashboard53KpiPurple .DutyDashboard56KpiFoot button { color: #5847c7; }
.DutyDashboard56 .DutyDashboard56ProgressButton {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.DutyDashboard56 .DutyDashboard56Delegated {
    margin: 0 0 12px;
    border: 1px solid #d5e3eb;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(22,65,96,.06);
    overflow: hidden;
}
.DutyDashboard56 .DutyDashboard56SectionHeader {
    padding: 10px 14px;
    border-bottom: 1px solid #dbe7ee;
    background: #eef8fd;
    color: #174f78;
}
.DutyDashboard56 .DutyDashboard56SectionHeader > div {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.DutyDashboard56 .DutyDashboard56SectionHeader strong { font-size: 14px; }
.DutyDashboard56 .DutyDashboard56SectionHeader span { color: #6a7e8d; font-size: 11px; font-weight: 400; }
.DutyDashboard56 .DutyDashboard56DelegatedGrid {
    display: grid;
    grid-template-columns: repeat(5, minmax(180px, 1fr));
    gap: 10px;
    padding: 11px;
}
.DutyDashboard56 .DutyDashboard56DelegatedCard {
    min-width: 0;
    border: 1px solid #dae5ec;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    text-align: center;
}
.DutyDashboard56 .DutyDashboard56DelegatedCard > small {
    display: block;
    padding: 8px 5px 2px;
    color: #5e7384;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}
.DutyDashboard56 .DutyDashboard56DelegatedCard .DutyDashboard56DelegatedMain {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    padding: 2px 5px 8px;
    cursor: pointer;
}
.DutyDashboard56 .DutyDashboard56DelegatedCard .DutyDashboard56DelegatedMain strong {
    font-size: 29px;
    line-height: 1;
}
.DutyDashboard56 .DutyDashboard56DelegatedCard > div {
    display: flex;
    min-height: 54px;
    border-top: 1px solid #edf1f4;
}
.DutyDashboard56 .DutyDashboard56DelegatedCard > div > button {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 0;
    border-right: 1px solid #edf1f4;
    background: #fbfcfd;
    padding: 5px 3px;
    cursor: pointer;
}
.DutyDashboard56 .DutyDashboard56DelegatedCard > div > button:last-child { border-right: 0; }
.DutyDashboard56 .DutyDashboard56DelegatedCard > div > button:hover { background: #f2f8fc; }
.DutyDashboard56 .DutyDashboard56DelegatedCard b { font-size: 17px; line-height: 1; }
.DutyDashboard56 .DutyDashboard56DelegatedCard span { margin-top: 3px; color: #6b7f8e; font-size: 9.5px; }
.DutyDashboard56 .DutyDashboard56DelegatedCard.is-blue strong,
.DutyDashboard56 .DutyDashboard56DelegatedCard.is-blue b { color: #2f71d7; }
.DutyDashboard56 .DutyDashboard56DelegatedCard.is-green strong,
.DutyDashboard56 .DutyDashboard56DelegatedCard.is-green b { color: #168b63; }
.DutyDashboard56 .DutyDashboard56DelegatedCard.is-orange strong,
.DutyDashboard56 .DutyDashboard56DelegatedCard.is-orange b { color: #d98200; }
.DutyDashboard56 .DutyDashboard56DelegatedCard.is-red strong,
.DutyDashboard56 .DutyDashboard56DelegatedCard.is-red b { color: #d9362f; }
.DutyDashboard56 .DutyDashboard56DelegatedCard.is-purple strong,
.DutyDashboard56 .DutyDashboard56DelegatedCard.is-purple b { color: #5847c7; }
.DutyDashboard56 .DutyDashboard56DelegatedDetails {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid #e8eef2;
}
.DutyDashboard56 .DutyDashboard56DelegatedDetails > button {
    border: 0;
    border-right: 1px solid #e8eef2;
    background: #fff;
    padding: 8px;
    cursor: pointer;
}
.DutyDashboard56 .DutyDashboard56DelegatedDetails > button:last-child { border-right: 0; }
.DutyDashboard56 .DutyDashboard56DelegatedDetails strong { display: block; color: #d83d34; font-size: 18px; }
.DutyDashboard56 .DutyDashboard56DelegatedDetails span { color: #657989; font-size: 10px; }

/* 7 cảnh báo chính thay vì 9 để ưu tiên nội dung cần hành động. */
.DutyDashboard56 .DutyDashboard53AttentionItems { grid-template-columns: repeat(7, minmax(0, 1fr)); }

@media (max-width: 1550px) {
    .DutyDashboard56 .DutyDashboard56KpiGrid { grid-template-columns: repeat(3, minmax(245px,1fr)); }
    .DutyDashboard56 .DutyDashboard56DelegatedGrid { grid-template-columns: repeat(3, minmax(210px,1fr)); }
}
@media (max-width: 1050px) {
    .DutyDashboard56 .DutyDashboard56KpiGrid { grid-template-columns: repeat(2, minmax(250px,1fr)); }
    .DutyDashboard56 .DutyDashboard56DelegatedGrid { grid-template-columns: repeat(2, minmax(220px,1fr)); }
    .DutyDashboard56 .DutyDashboard53AttentionItems { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 680px) {
    .DutyDashboard56 .DutyDashboard56KpiGrid,
    .DutyDashboard56 .DutyDashboard56DelegatedGrid { grid-template-columns: 1fr; }
    .DutyDashboard56 .DutyDashboard53AttentionItems,
    .DutyDashboard56 .DutyDashboard56DelegatedDetails { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Hotfix 56: số 0 trong cột cơ quan trực tiếp vẫn là một số liệu có thể mở minh chứng. */
.DutyDashboard56 .DutyDashboard54RecipientCount.is-empty {
    background: #f5f8fa;
    border-color: #d7e0e6;
    color: #7b8d99;
}
.DutyDashboard56 .DutyDashboard54RecipientCount.is-empty:hover,
.DutyDashboard56 .DutyDashboard54RecipientCount.is-empty:focus {
    background: #edf4f8;
    border-color: #b9ccd8;
    color: #46677d;
}

/* ============================================================================
   Hotfix 57 - Dashboard gọn hơn, bộ lọc trong Kendo Window và hàng số liệu cân đối.
   Chỉ scope trong Dashboard, không tác động các màn hình nghiệp vụ khác.
   ============================================================================ */
.DutyDashboard57FilterBar {
    display:flex;
    align-items:center;
    gap:12px;
    margin:0 0 12px;
    padding:9px 11px;
    border:1px solid #d7e4ec;
    border-radius:8px;
    background:#f7fbfe;
    box-shadow:0 1px 4px rgba(22,65,96,.04);
}
.DutyDashboard57FilterBar .btn { margin:0; min-width:145px; }
.DutyDashboard57FilterSummary { color:#5e7384; font-size:11.5px; line-height:1.35; }
.DutyDashboard57FilterWindowContent { padding:12px 14px 6px; }
.k-window .DutyDashboard57FilterWindowContent .DutyDashboard53FilterGrid:not(.DutyDashboard53AdvancedFilters) {
    display:grid;
    grid-template-columns:1.55fr repeat(5,minmax(135px,1fr));
    gap:10px 12px;
    align-items:end;
}
.k-window .DutyDashboard57FilterWindowContent .DutyDashboard53AdvancedFilters {
    display:grid;
    grid-template-columns:repeat(4,minmax(165px,1fr));
    gap:10px 12px;
}
.DutyDashboard56 .DutyDashboard57Split5 { grid-template-columns:repeat(5,minmax(0,1fr)); }
.DutyDashboard56 .DutyDashboard57Split5 > button { min-width:0; padding-left:2px; padding-right:2px; }
.DutyDashboard56 .DutyDashboard57Split5 small { min-height:34px; font-size:8.7px; }
.DutyDashboard56 .DutyDashboard57Tier3Five { grid-template-columns:repeat(5,minmax(0,1fr)); }
.DutyDashboard56 .DutyDashboard57Tier3Six { grid-template-columns:repeat(3,minmax(0,1fr)); }
.DutyDashboard56 .DutyDashboard57Tier3Six > button:nth-child(3) { border-right:0; }
.DutyDashboard56 .DutyDashboard57Tier3Six > button:nth-child(-n+3) { border-bottom:1px solid #e8eef2; }
.DutyDashboardModern53 .DutyDashboard54AnalyticsPrimary.DutyDashboard57TwoCharts {
    grid-template-columns:1.15fr .9fr;
}
@media (max-width: 1200px) {
    .k-window .DutyDashboard57FilterWindowContent .DutyDashboard53FilterGrid:not(.DutyDashboard53AdvancedFilters) { grid-template-columns:repeat(3,minmax(180px,1fr)); }
    .k-window .DutyDashboard57FilterWindowContent .DutyDashboard53AdvancedFilters { grid-template-columns:repeat(3,minmax(180px,1fr)); }
}
@media (max-width: 760px) {
    .DutyDashboard57FilterBar { align-items:flex-start; flex-direction:column; }
    .k-window .DutyDashboard57FilterWindowContent .DutyDashboard53FilterGrid:not(.DutyDashboard53AdvancedFilters),
    .k-window .DutyDashboard57FilterWindowContent .DutyDashboard53AdvancedFilters { grid-template-columns:1fr; }
    .DutyDashboard56 .DutyDashboard57Split5,
    .DutyDashboard56 .DutyDashboard57Tier3Five { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .DutyDashboardModern53 .DutyDashboard54AnalyticsPrimary.DutyDashboard57TwoCharts { grid-template-columns:1fr; }
}
.DutyDashboardModern53 .DutyDashboard54AnalyticsPrimary.DutyDashboard57TwoCharts {
    grid-template-columns:minmax(0,1.25fr) minmax(0,.95fr) !important;
}

/* ============================================================================
   Hotfix 58 - Bộ lọc Dashboard dạng cửa sổ 4 cột, gọn và thẳng hàng.
   Nút Lọc thông tin đặt cùng hàng Hướng dẫn; bỏ dòng mô tả và tóm tắt bộ lọc
   trên màn hình chính theo giao diện đã thống nhất.
   ============================================================================ */
.DutyDashboardModern53 .DutyDashboard53PageTitle {
    align-items:center;
    margin-bottom:12px;
}
.DutyDashboardModern53 .DutyDashboard53PageTitle .title_left h3 {
    margin-bottom:0;
}
.DutyDashboardModern53 .DutyDashboard53HeaderActions {
    flex-wrap:wrap;
    justify-content:flex-end;
}
.DutyDashboardModern53 .DutyDashboard58FilterButton {
    min-width:118px;
    white-space:nowrap;
}

.DutyDashboard58FilterWindowContent {
    padding:18px 20px 12px;
    box-sizing:border-box;
}
.DutyDashboard58FilterGrid,
.DutyDashboard58AdvancedFilters {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px 16px;
    align-items:end;
}
.DutyDashboard58AdvancedFilters {
    margin-top:16px;
    padding-top:16px;
    border-top:1px solid #e2e9ee;
}
.DutyDashboard58Field {
    min-width:0;
}
.DutyDashboard58Field > label {
    display:block;
    margin:0 0 6px;
    color:#173f5b;
    font-size:12px;
    font-weight:700;
    line-height:1.2;
}
.DutyDashboard58Field .k-widget,
.DutyDashboard58Field .k-dropdown,
.DutyDashboard58Field .k-datepicker,
.DutyDashboard58Field .k-combobox,
.DutyDashboard58Field > input.form-control {
    width:100% !important;
    max-width:100%;
    box-sizing:border-box;
}
.DutyDashboard58TimeField {
    grid-column:span 2;
}
.DutyDashboard58TimeControls {
    display:grid;
    grid-template-columns:1.08fr 1fr 1fr;
    gap:10px;
    align-items:end;
}
.DutyDashboard58SubField {
    min-width:0;
}
.DutyDashboard58SubField > small {
    display:block;
    min-height:16px;
    margin:0 0 4px;
    color:#6b7f8e;
    font-size:10px;
    font-weight:600;
    line-height:1.2;
}
.DutyDashboard58SubField .k-widget,
.DutyDashboard58SubField .k-dropdown,
.DutyDashboard58SubField .k-datepicker {
    width:100% !important;
}
.DutyDashboard58Keyword {
    grid-column:span 2;
}
.DutyDashboard58Keyword > input.form-control {
    height:34px;
}
.DutyDashboard58FilterFooter {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:18px;
    padding-top:14px;
    border-top:1px solid #e2e9ee;
}
.DutyDashboard58FilterActions {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
}
.DutyDashboard58FilterFooter .btn {
    min-width:104px;
    margin:0;
}
.DutyDashboard58FilterFooter #DutyDashboardAdvancedToggle {
    min-width:150px;
}
.DutyDashboard58FilterNote {
    margin-top:10px;
    padding:9px 11px;
    border-radius:5px;
    background:#f5f9fc;
    color:#60798b;
    font-size:10.5px;
    line-height:1.4;
}
.DutyDashboard58FilterNote .fa {
    margin-right:4px;
    color:#2c78a7;
}
/* Kendo Window có thể được đưa ra ngoài cây .DutyDashboardModern53. */
.k-window .DutyDashboard58FilterWindowContent .k-dropdown,
.k-window .DutyDashboard58FilterWindowContent .k-datepicker,
.k-window .DutyDashboard58FilterWindowContent .k-combobox {
    width:100% !important;
}
.k-window .DutyDashboard58FilterWindowContent .k-dropdown-wrap,
.k-window .DutyDashboard58FilterWindowContent .k-picker-wrap,
.k-window .DutyDashboard58FilterWindowContent .k-numeric-wrap {
    box-sizing:border-box;
}

@media (max-width: 1050px) {
    .DutyDashboard58FilterGrid,
    .DutyDashboard58AdvancedFilters { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .DutyDashboard58TimeField,
    .DutyDashboard58Keyword { grid-column:span 2; }
}
@media (max-width: 700px) {
    .DutyDashboardModern53 .DutyDashboard53HeaderActions { justify-content:flex-start; }
    .DutyDashboard58FilterGrid,
    .DutyDashboard58AdvancedFilters { grid-template-columns:1fr; }
    .DutyDashboard58TimeField,
    .DutyDashboard58Keyword { grid-column:span 1; }
    .DutyDashboard58TimeControls { grid-template-columns:1fr; }
    .DutyDashboard58FilterFooter { align-items:stretch; flex-direction:column; }
    .DutyDashboard58FilterActions { justify-content:stretch; }
    .DutyDashboard58FilterActions .btn,
    .DutyDashboard58FilterFooter #DutyDashboardAdvancedToggle { flex:1 1 auto; width:100%; }
}

/* ========================================================================== */
/* Hotfix 59 - Quản trị hệ thống tỉnh: xóa vĩnh viễn và xóa cưỡng bức Duty.  */
/* ========================================================================== */
.DutySystemAdminDangerBanner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 14px;
    padding: 12px 16px;
    border: 1px solid #e4a11b;
    border-left: 5px solid #d9534f;
    background: #fff8e8;
    border-radius: 5px;
    color: #704214;
}
.DutySystemAdminDangerBanner > i { font-size: 22px; color: #d9534f; margin-top: 1px; }
.DutyAdminInlineNotice { margin: 0 0 10px; padding: 8px 11px; background: #f3f8fc; border-left: 3px solid #337ab7; color: #496274; }
.DutyForcePurgePanel { border: 1px solid #e0a5a3; }
.DutyForcePurgePanel > .x_title { background: #fff4f3; }
.DutyForcePurgePanel > .x_title h2 { color: #a94442; font-weight: 700; }
.DutyForcePurgeNotice { margin-bottom: 14px; line-height: 1.55; }
.DutyForcePurgeToolbar { display: flex; align-items: flex-end; gap: 8px; margin: 0 0 12px; flex-wrap: wrap; }
.DutyForcePurgeSearchBox { flex: 1 1 420px; min-width: 260px; }
.DutyForcePurgeSearchBox label { display: block; margin-bottom: 5px; }
.DutyForcePurgeHint { display: block; margin-top: 4px; color: #a94442; font-size: 11px; font-weight: 600; }
.DutyForcePurgeSummary { padding: 10px 12px; margin-bottom: 12px; background: #f7f7f7; border: 1px solid #ddd; border-radius: 4px; font-size: 15px; }
.DutyForcePurgePreview { margin-bottom: 14px; }
.DutyForcePurgePreviewTitle { margin-bottom: 8px; font-weight: 700; color: #34495e; }
.DutyForcePurgePreviewGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid #ddd; border-radius: 5px; overflow: hidden; }
.DutyForcePurgePreviewCell { min-height: 72px; padding: 10px 12px; border-right: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; background: #fff; }
.DutyForcePurgePreviewCell span { display: block; color: #6f7d88; font-size: 12px; line-height: 1.3; }
.DutyForcePurgePreviewCell strong { display: block; margin-top: 5px; color: #c0392b; font-size: 20px; }
.DutyForcePurgeSharedNotice { margin-top: 9px; padding: 8px 10px; color: #4f6473; background: #edf5fa; border-radius: 4px; }
.DutyForcePurgeConfirmGroup { padding: 12px; border: 1px dashed #d9534f; background: #fff8f7; border-radius: 5px; }
.DutyForcePurgeConfirmGroup input { font-weight: 700; letter-spacing: .4px; }
.DutyForcePurgeSubmitButton { font-weight: 700; }
.DutyLoadingInline { padding: 16px; text-align: center; color: #667; }
.DutyBadgeMuted { background: #777; color: #fff; }
.DutyBadgeWarning { background: #f0ad4e; color: #fff; }

@media (max-width: 900px) {
    .DutyForcePurgePreviewGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .DutyForcePurgePreviewGrid { grid-template-columns: 1fr; }
    .DutyForcePurgeToolbar > .btn { flex: 1 1 auto; }
}

/* ========================================================================== */
/* Hotfix 60 - Xóa hàng loạt, cửa sổ quản trị responsive và làm sạch Duty.   */
/* ========================================================================== */
.DutyAdminBulkToolbar {
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin:0 0 10px;
    padding:8px 10px;
    border:1px solid #d9e3ea;
    background:#f8fbfd;
    border-radius:4px;
}
.DutyAdminBulkToolbar > span { color:#687b88; font-size:12px; }
.DutyAdminBulkToolbar .btn[disabled] { opacity:.55; cursor:not-allowed; }
.DutyBulkCount { font-weight:700; }
.DutyBulkDeleteSummaryText { margin-top:6px; color:#63717b; font-size:12px; line-height:1.45; }

/* Kích thước wrapper Kendo được điều chỉnh bằng JavaScript để tương thích các phiên bản Kendo cũ. */
.DutyPermanentDeleteRoot,
.DutyAdminRecordDeleteRoot,
.DutyForcePurgeRoot,
.DutyModuleCleanupRoot {
    width:100%;
    box-sizing:border-box;
    padding:14px 16px 0;
    overflow-wrap:anywhere;
}
.DutyPermanentDeleteRoot .DutyDangerNotice,
.DutyAdminRecordDeleteRoot .DutyDangerNotice,
.DutyForcePurgeRoot .DutyDangerNotice,
.DutyModuleCleanupRoot .DutyDangerNotice {
    display:flex;
    align-items:flex-start;
    gap:10px;
    line-height:1.5;
}

.DutyModuleCleanupPanel { border:1px solid #c9302c; }
.DutyModuleCleanupPanel > .x_title { background:#fff1f0; }
.DutyModuleCleanupPanel > .x_title h2 { color:#9c2b27; font-weight:700; }
.DutyModuleCleanupNotice { margin-bottom:12px; }
.DutyModuleCleanupOpenButton { font-weight:700; }
.DutyModuleCleanupPreview { margin:12px 0 14px; }
.DutyModuleCleanupPreviewHead {
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
    padding:9px 12px;
    background:#f4f7f9;
    border:1px solid #d9e1e6;
    border-bottom:0;
    border-radius:5px 5px 0 0;
}
.DutyModuleCleanupPreviewHead strong { color:#a94442; font-size:15px; }
.DutyModuleCleanupPreviewHead span { color:#6f7b84; font-size:12px; }
.DutyModuleCleanupPreviewGrid {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    border:1px solid #d9e1e6;
    border-radius:0 0 5px 5px;
    overflow:hidden;
}
.DutyModuleCleanupPreviewCell {
    min-height:68px;
    padding:9px 10px;
    background:#fff;
    border-right:1px solid #e7ecef;
    border-bottom:1px solid #e7ecef;
}
.DutyModuleCleanupPreviewCell span { display:block; min-height:30px; color:#6b7983; font-size:12px; line-height:1.25; }
.DutyModuleCleanupPreviewCell strong { display:block; color:#c0392b; font-size:20px; }
.DutyModuleCleanupOptions {
    margin:0 0 14px;
    padding:10px 12px;
    border:1px solid #e4c8c6;
    background:#fff8f7;
    border-radius:5px;
}
.DutyModuleCleanupOptions label { display:block; margin:4px 0; font-weight:400; line-height:1.5; }
.DutyModuleCleanupOptions input[type=checkbox] { margin-right:7px; vertical-align:-1px; }
.DutyModuleCleanupPhrase {
    display:inline-block;
    margin:5px 0 8px;
    padding:5px 9px;
    border:1px dashed #c9302c;
    background:#fff;
    color:#a94442;
    font-family:Consolas,monospace;
    font-weight:700;
    letter-spacing:.5px;
}

@media (max-width:1100px) {
    .DutyModuleCleanupPreviewGrid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:700px) {
    .DutyModuleCleanupPreviewGrid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .DutyModuleCleanupPreviewHead { align-items:flex-start; flex-direction:column; }
    .DutyPermanentDeleteRoot,
    .DutyAdminRecordDeleteRoot,
    .DutyForcePurgeRoot,
    .DutyModuleCleanupRoot { padding:10px 10px 0; }
}
@media (max-width:460px) {
    .DutyModuleCleanupPreviewGrid { grid-template-columns:1fr; }
    .DutyAdminBulkToolbar .btn { width:100%; }
}

/* ========================================================================== */
/* Hotfix 61 - Sao lưu / Khôi phục dữ liệu Duty                              */
/* ========================================================================== */
.DutyBackupSecurityBanner,
.DutyBackupMandatoryNotice {
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:12px 14px;
    margin:8px 0 14px;
    border:1px solid #b9d9f4;
    border-left:4px solid #337ab7;
    background:#f5fbff;
    border-radius:4px;
    color:#24445d;
}
.DutyBackupSecurityBanner > .fa,
.DutyBackupMandatoryNotice > .fa { font-size:18px; margin-top:2px; color:#337ab7; }
.DutyBackupMandatoryNotice { border-color:#f0d58b; border-left-color:#f0ad4e; background:#fffaf0; color:#6a5320; }
.DutyBackupMandatoryNotice > .fa { color:#d58512; }
.DutyBackupTwoColumn { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; align-items:start; }
.DutyBackupPanel { margin-bottom:14px; }
.DutyBackupPasswordGrid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
.DutyBackupActionBar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:8px; }
.DutyBackupResult { margin-top:12px; padding:10px 12px; border:1px solid #b7dfbf; background:#f3fff5; border-radius:4px; color:#28763a; }
.DutyBackupResult .fa { margin-right:5px; }
.DutyRestorePanel .DutyRestoreNotice { margin-bottom:12px; }
.DutyRestorePreview { margin-top:12px; border-top:1px solid #e5e5e5; padding-top:12px; }
.DutyRestorePreviewTitle { font-weight:700; color:#28763a; margin-bottom:10px; }
.DutyRestorePreviewTitle .fa { margin-right:6px; }
.DutyRestorePreviewGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.DutyRestorePreviewCell { min-width:0; border:1px solid #e4e8eb; background:#fafcfd; border-radius:4px; padding:8px 10px; }
.DutyRestorePreviewCell span { display:block; color:#6c7a86; font-size:12px; margin-bottom:3px; }
.DutyRestorePreviewCell strong { display:block; color:#1f4663; word-break:break-word; }
.DutyRestoreExecuteArea { margin-top:14px; padding-top:12px; border-top:1px solid #e5e5e5; }
.DutyRadioLine { display:block; font-weight:normal; padding:4px 0; cursor:pointer; }
.DutyRadioLine input { margin-right:6px; }
.DutyRestoreBlockingError { margin-top:10px; padding:10px 12px; border:1px solid #efb8b8; border-left:4px solid #d9534f; background:#fff5f5; color:#9b2c2c; border-radius:4px; }
.DutyRestoreMissingRefs { margin-top:6px; max-height:95px; overflow:auto; font-size:12px; color:#7a2a2a; word-break:break-word; }
.DutyBackupLogPanel { margin-top:2px; }
.DutyBackupStatus { display:inline-block; padding:3px 8px; border-radius:12px; font-weight:600; font-size:12px; white-space:nowrap; }
.DutyBackupStatusSuccess { background:#e9f8ed; color:#27863e; border:1px solid #bce6c6; }
.DutyBackupStatusFailed { background:#fff0f0; color:#b73333; border:1px solid #efc0c0; }
.DutyBackupStatusRunning { background:#fff7e8; color:#9b6a12; border:1px solid #ecd29f; }
.DutyBackupDeleteRoot { min-width:0; }

@media (max-width: 1100px) {
    .DutyBackupTwoColumn { grid-template-columns:1fr; }
}
@media (max-width: 650px) {
    .DutyBackupPasswordGrid,
    .DutyRestorePreviewGrid { grid-template-columns:1fr; }
    .DutyBackupActionBar .btn { width:100%; }
}

/* ========================================================================== */
/* Hotfix 78 - lọc Nhiệm vụ cơ quan nhận + thao tác nhóm nhiệm vụ con         */
/* ========================================================================== */

.DutyAssignToOfficeFilterBar {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: #f7fbfe;
    border: 1px solid #d8e8f2;
    border-radius: 5px;
}

.DutyAssignToOfficeFilterItem {
    min-width: 0;
}

.DutyAssignToOfficeDocumentFilter {
    flex: 1 1 48%;
}

.DutyAssignToOfficeGroupFilter {
    flex: 1 1 38%;
}

.DutyAssignToOfficeFilterItem > label {
    display: block;
    margin: 0 0 5px;
    color: #245473;
    font-size: 12px;
    font-weight: 700;
}

.DutyAssignToOfficeFilterItem > label .fa {
    margin-right: 4px;
    color: #2d83b2;
}

.DutyAssignToOfficeFilterBar .k-dropdown,
.DutyAssignToOfficeFilterBar .k-widget.k-dropdown {
    width: 100%;
}

.DutyAssignToOfficeGroupFilterChooser {
    display: flex;
    align-items: stretch;
    min-width: 0;
}

#DutyAssignToOfficeGroupFilterButton {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
    text-align: left;
}

#DutyAssignToOfficeGroupFilterButton > .fa-sitemap {
    flex: 0 0 auto;
    margin-right: 7px;
    color: #2d83b2;
}

#DutyAssignToOfficeGroupFilterCaption {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.DutyAssignToOfficeGroupFilterCaret {
    flex: 0 0 auto;
    margin-left: 8px;
}

#DutyAssignToOfficeGroupFilterClearButton {
    flex: 0 0 auto;
    margin-left: -1px;
}

.DutyAssignToOfficeFilterActions {
    flex: 0 0 auto;
}

.DutyAssignToOfficeGroupFilterTree {
    min-height: 300px;
    max-height: 520px;
    overflow: auto;
    padding: 8px 4px;
    border: 1px solid #d7e6ef;
    border-radius: 4px;
    background: #fff;
}

#DutyAssignToOfficeGroupFilterTree .k-in {
    line-height: 1.45;
}

/* Kendo UI 2020 đôi lúc đặt icon mở/đóng group mặc định sai vị trí khi grid chỉ có ít nhóm.
   Hotfix 78 ẩn icon native nhưng vẫn giữ nó trong DOM để JavaScript đọc trạng thái; nút custom nằm
   ngay trong groupHeaderTemplate nên không thể trôi xuống vùng trống của Grid. */
#DutyOfficeForwardedGrid .k-grouping-row .k-i-expand,
#DutyOfficeForwardedGrid .k-grouping-row .k-i-collapse {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
}

.DutyOfficeForwardedGroupToggle {
    display: inline-flex;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #c8dce9;
    border-radius: 3px;
    background: #fff;
    color: #246b96;
    cursor: pointer;
}

.DutyOfficeForwardedGroupToggle:hover {
    background: #e8f5fc;
    border-color: #8fc6e4;
}

.DutyOfficeForwardedGroupCheckPlaceholder {
    display: inline-block;
    flex: 0 0 13px;
    width: 13px;
    height: 13px;
}

.DutyOfficeForwardedGroupActions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    margin-left: 6px;
}

.DutyOfficeForwardedGroupActions .btn {
    white-space: nowrap;
}

@media (max-width: 980px) {
    .DutyAssignToOfficeFilterBar {
        flex-wrap: wrap;
    }

    .DutyAssignToOfficeDocumentFilter,
    .DutyAssignToOfficeGroupFilter {
        flex: 1 1 100%;
    }

    .DutyAssignToOfficeFilterActions {
        width: 100%;
        text-align: right;
    }

    .DutyOfficeForwardedGroupActions .btn {
        padding-left: 5px;
        padding-right: 5px;
        font-size: 10px;
    }
}

/* ========================================================================== */
/* Hotfix 82 - thanh lọc Văn bản nguồn / Nhóm nhiệm vụ của DutyList          */
/* ========================================================================== */

/*
 * Toàn bộ selector đều scope theo DutyList để không ảnh hưởng các Grid/Kendo khác của ứng dụng.
 * Bố cục dùng flex để tương thích Bootstrap 3 hiện có; khi màn hình hẹp sẽ tự xuống dòng.
 */
.DutyListBusinessFilterBar {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 6px;
    background: #f7fbfe;
    border: 1px solid #d8e8f2;
    border-radius: 5px;
}

.DutyListBusinessFilterItem {
    min-width: 0;
}

.DutyListDocumentFilter {
    flex: 1 1 48%;
}

.DutyListGroupFilter {
    flex: 1 1 38%;
}

.DutyListBusinessFilterItem > label {
    display: block;
    margin: 0 0 5px;
    color: #245473;
    font-size: 12px;
    font-weight: 700;
}

.DutyListBusinessFilterItem > label .fa {
    margin-right: 4px;
    color: #2d83b2;
}

.DutyListBusinessFilterBar .k-dropdown,
.DutyListBusinessFilterBar .k-widget.k-dropdown {
    width: 100%;
}

.DutyListGroupFilterChooser {
    display: flex;
    align-items: stretch;
    min-width: 0;
}

#DutyListGroupFilterButton {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
    text-align: left;
}

#DutyListGroupFilterButton > .fa-sitemap {
    flex: 0 0 auto;
    margin-right: 7px;
    color: #2d83b2;
}

#DutyListGroupFilterCaption {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.DutyListGroupFilterCaret {
    flex: 0 0 auto;
    margin-left: 8px;
}

#DutyListGroupFilterClearButton {
    flex: 0 0 auto;
    margin-left: -1px;
}

.DutyListBusinessFilterActions {
    flex: 0 0 auto;
}

.DutyListBusinessFilterHint {
    margin: 0 2px 10px;
    color: #59788c;
    font-size: 12px;
    line-height: 1.45;
}

.DutyListBusinessFilterHint .fa {
    margin-right: 4px;
    color: #2d83b2;
}

.DutyListGroupFilterTree {
    min-height: 300px;
    max-height: 520px;
    overflow: auto;
    padding: 8px 4px;
    border: 1px solid #d7e6ef;
    border-radius: 4px;
    background: #fff;
}

#DutyListGroupFilterTree .k-in {
    line-height: 1.45;
}

.DutyListGroupFilterEmpty {
    padding: 25px 15px;
    color: #7890a0;
    text-align: center;
}

.DutyListWithoutGroupFilterOption {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin: 0 0 10px;
    background: #fffaf0;
    border: 1px solid #f1d9a7;
    border-radius: 4px;
}

.DutyListWithoutGroupFilterOption .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.DutyListWithoutGroupFilterOption > span {
    color: #7b6841;
    font-size: 12px;
    line-height: 1.4;
}

@media (max-width: 980px) {
    .DutyListBusinessFilterBar {
        flex-wrap: wrap;
    }

    .DutyListDocumentFilter,
    .DutyListGroupFilter {
        flex: 1 1 100%;
    }

    .DutyListBusinessFilterActions {
        flex: 1 1 100%;
        text-align: right;
    }
}

@media (max-width: 650px) {
    .DutyListBusinessFilterActions .btn,
    .DutyListWithoutGroupFilterOption,
    .DutyListWithoutGroupFilterOption .btn {
        width: 100%;
    }

    .DutyListWithoutGroupFilterOption {
        display: block;
    }

    .DutyListWithoutGroupFilterOption > span {
        display: block;
        margin-top: 7px;
    }
}

/* =================================================================================================
   Hotfix 83 - Dashboard: bộ lọc Văn bản nguồn/Nhóm dạng cây, bố cục KPI 2 hàng và biểu đồ dễ đọc.
   - Chỉ tác động trong vùng .DutyDashboard56 để không ảnh hưởng các màn hình Duty khác.
   - Ở màn hình rộng: 03 thẻ đầu chiếm hàng 1; 02 thẻ còn lại chiếm hàng 2.
   - Khi màn hình hẹp, tự hạ về 02/01 cột để các ô con trong từng KPI không bị ép quá nhỏ.
   ================================================================================================= */
.DutyDashboard56 .DutyDashboard83KpiGrid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
}

.DutyDashboard56 .DutyDashboard83KpiGrid > .DutyDashboard56Kpi:nth-child(-n+3) {
    grid-column: span 2;
}

.DutyDashboard56 .DutyDashboard83KpiGrid > .DutyDashboard56Kpi:nth-child(n+4) {
    grid-column: span 3;
}

/* Tiêu đề KPI cần nổi bật hơn nhưng vẫn cho phép xuống dòng khi tên dài. */
.DutyDashboard56 .DutyDashboard83KpiGrid .DutyDashboard53KpiHead span {
    font-size: 14px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: .12px;
    white-space: normal;
}

/* Con số tổng nhiệm vụ gốc/phạm vi theo dõi là số liệu điều hành chính nên tăng kích thước riêng. */
.DutyDashboard56 .DutyDashboard83ScopeKpi #DutyTotalDuty {
    font-size: 44px;
    line-height: 1;
    font-weight: 700;
}

/* Kendo DropDownTree của Nhóm nhiệm vụ phải có cùng chiều rộng với các control lọc hiện hữu. */
.DutyDashboard56 .DutyDashboard58Field .k-dropdowntree,
.k-window .DutyDashboard58FilterWindowContent .k-dropdowntree {
    width: 100% !important;
}

/*
   Biểu đồ Nhóm có thể có nhiều nhánh và nhãn rất dài. JS đặt chiều cao theo số dòng; viewport chỉ
   cuộn theo chiều dọc khi cần, tránh ép toàn bộ nhóm vào một khung 235px như trước Hotfix 83.
*/
.DutyDashboard56 .DutyDashboard83GroupChartViewport {
    width: 100%;
    max-height: 360px;
    min-height: 255px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
}

.DutyDashboard56 .DutyDashboard83GroupChartViewport #DutyDashboardGroupChart {
    width: 100%;
    min-height: 255px !important;
}

@media (max-width: 1250px) {
    .DutyDashboard56 .DutyDashboard83KpiGrid {
        grid-template-columns: repeat(2, minmax(280px, 1fr));
    }

    .DutyDashboard56 .DutyDashboard83KpiGrid > .DutyDashboard56Kpi:nth-child(n) {
        grid-column: span 1;
    }
}

@media (max-width: 700px) {
    .DutyDashboard56 .DutyDashboard83KpiGrid {
        grid-template-columns: 1fr;
    }

    .DutyDashboard56 .DutyDashboard83ScopeKpi #DutyTotalDuty {
        font-size: 38px;
    }
}