/* Shared responsive layout for the ERP screens. Loaded after the page styles. */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; }
img, svg, video, canvas { max-width: 100%; }
.mobile-nav-toggle { display: none; }
.mobile-quick-toggle { display: none; }
.mobile-chat-unread { display: none; }
.order-table-hint { display: none; }

@media (max-width: 1199px) {
    #header .wrap-header { height: 64px; align-items: center; }
    #header .left-header, #header .left-header .logo { height: 100%; }
    #header .right-header {
        width: auto;
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    #header .wrap-global-nav { margin-left: 0; align-items: center; }
    #header .mobile-nav-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        padding: 10px;
        border: 1px solid rgba(255,255,255,.5);
        background: transparent;
        border-radius: 9px;
    }
    #header .mobile-nav-toggle span {
        display: block;
        width: 100%;
        height: 2px;
        border-radius: 2px;
        background: #fff;
    }
    #header .mobile-nav-toggle:focus-visible, #header .global-nav a:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 3px;
    }
    #header .global-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        max-height: calc(100dvh - 64px);
        overflow-y: auto;
        padding: 8px 12px 14px;
        flex-direction: column;
        align-items: stretch;
        background: var(--gtt-primary-color);
        box-shadow: 0 12px 20px rgb(0 0 0 / 15%);
        z-index: 30;
    }
    #header.mobile-nav-open .global-nav { display: flex; }
    #header .global-nav li { width: 100%; height: auto; margin: 0; }
    #header .global-nav li a {
        display: block;
        width: 100%;
        padding: 12px 10px;
        font-size: 15px;
        line-height: 1.3;
    }
    #header .profile { margin-left: 0; }
    #header .profile .profile-dropdown { right: 0; left: auto; }

    .page_head .general_info .stats_section_left,
    .page_head .general_info .stats_section_right { width: 100%; min-width: 0; }
    .page_head .general_info .wrap_stats_section { gap: 18px; }
    .page_head .general_info .stats_section_right { margin: 0; }
    .main_content_wrapper .content_design { gap: 16px; }
    .main_content_wrapper .main_content_left { flex: 1 1 auto; min-width: 0; width: auto; }
    .main_content_wrapper .main_content_right { flex: 0 0 320px; min-width: 0; width: 320px; }
    .search_form { flex-wrap: wrap; gap: 10px; }
    .search_form .search_right { flex: 1 1 100%; margin-left: 0; min-width: 0; }
    .search_form .search_right .filters { flex-wrap: wrap; gap: 8px 14px; height: auto; bottom: 0; }
    .search_form .search_right .filters li { margin: 0; }
}

@media (max-width: 1199px) {
    .page_head .general_info { padding-bottom: 26px; margin-bottom: 0; }
    .page_head .general_info .stats_section_title { flex-wrap: wrap; gap: 8px 20px; }
    .page_head .general_info .stats_section_title p { margin: 0; }
    .page_head .general_info .stats_section_title .stats_time_filter {
        width: auto;
        min-width: 0;
        margin: 0;
        flex-wrap: wrap;
        gap: 8px 14px;
    }
    .page_head .general_info .stats_section_title .stats_time_filter .stats_by_days { margin: 0; }
    .page_head .general_info .wrap_stats_section { flex-direction: column; }
    .page_head .general_info .stats_section_right #kpiChart { margin-top: 0; }
    .page_head .general_info .head_actions { position: static; margin: 12px 0 0; }
    .page_head .general_info .head_actions .head_action { width: auto; display: flex; align-items: center; gap: 8px; }
    .page_head .general_info .head_actions .head_action button { margin: 0; flex: 0 0 46px; }
    .page_head .general_info .head_actions .head_action .head_action_title { color: #fff; }
    .page_body { margin-top: 14px; }
    .main_content_wrapper .content_design { flex-direction: column; }
    .main_content_wrapper .main_content_left,
    .main_content_wrapper .main_content_right { width: 100%; flex: 0 1 auto; margin-left: 0; }
    .main_content_wrapper .main_content_right.sticky { position: static; }
    .wrap_list_round_buttons .list_round_buttons li,
    .wrap_list_round_buttons .list_round_buttons.col_4 li { width: calc((100% - 30px) / 3); }
    .page_fixed_actions ul { right: 8px; }
}

@media (max-width: 1199px) {
    #main-content { padding-bottom: 65px; }
    #header .container, .page_head .container, .page_body.container { max-width: 100%; }
    #header .wrap-header { height: 60px; }
    #header .left-header .logo a img { height: 36px; }
    #header .left-header .logo a .badge-blink { right: -32px; top: 5px; font-size: 8px; }
    #header .profile .dropdown-toggler { width: 40px; height: 40px; }
    #header .profile .profile-dropdown { width: min(260px, calc(100vw - 20px)); }
    #header .global-nav { max-height: calc(100dvh - 60px); }

    .page_head .general_info { padding: 18px 0 22px; }
    .page_head .general_info .stats_section_title p { font-size: 21px; line-height: 1.25; }
    .page_head .general_info .stats_section_title .stats_time_filter { width: 100%; }
    .page_head .general_info .stats_body { align-items: center; gap: 12px; }
    .page_head .general_info .stats_body .wrap_kpi { width: 82px; flex: 0 0 82px; margin: 0; }
    .page_head .general_info .stats_body .wrap_circle_percent { --circle-size: 82px; }
    .page_head .general_info .stats_body .wrap_kpi_detail {
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
        padding-top: 0;
        gap: 10px;
    }
    .page_head .general_info .stats_body .wrap_kpi_detail .kpi_detail { width: 50%; min-width: 0; }
    .page_head .general_info .stats_body .wrap_kpi_detail .kpi_detail_title { font-size: 15px; line-height: 1.25; }
    .page_head .general_info .stats_body .wrap_kpi_detail .kpi_detail_point { font-size: 20px; }
    .page_head .general_info .stats_body .wrap_kpi_detail .kpi_filter_status { display: flex; flex-wrap: wrap; gap: 5px 10px; }
    .page_head .general_info .stats_body .wrap_kpi_detail .kpi_filter_status > label { margin: 0; }
    .page_head .general_info .stats_section_right { overflow: hidden; }

    .search_form { margin: 10px; }
    .search_form .search_left,
    .search_form .search_left.btn_on_field { width: 100%; min-width: 0; }
    .search_form .search_left input[type="text"] { width: 100%; min-width: 0; }
    .search_form .search_left.btn_on_field input[type="text"] { padding-right: 135px; }
    .search_form .search_left.btn_on_field button { font-size: 13px; height: 43px; max-width: 130px; }
    .search_form .search_right { align-items: flex-start; }
    .search_form .search_right .filters { flex: 1 1 auto; margin-right: 6px; padding-bottom: 0; }
    .search_form .search_right .filters li > label { font-size: 12px; }
    .search_form .search_right .search_right_button { flex: 0 0 43px; margin: 0; }

    .wrap_table { max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
    .wrap_table > table.table { min-width: 100%; width: 100%; max-width: none; }
    .wrap_table > table.table:has(thead th:nth-child(5)) { min-width: 720px; width: max-content; }
    .wrap_table > table.table.md_head,
    .wrap_table > table.table:has(thead th:nth-child(8)),
    .wrap_table > #order-table { min-width: 960px; width: max-content; }
    .wrap_table > table.table th, .wrap_table > table.table td { min-width: 70px; }
    .wrap_table > table.table .stt { min-width: 42px; }
    .table_foot button { max-width: 100%; }
    .wrap_filter_roles_san_xuat_mua_ngoai_setting { flex-wrap: wrap; gap: 8px; }
    .wrap_filter_roles_san_xuat_mua_ngoai_setting .wrap_tab_togglers { width: 100%; overflow-x: auto; }
    .wrap_filter_roles_san_xuat_mua_ngoai_setting .wrap_xuong_san_xuat_actions { margin-left: 0; }

    .page_fixed_actions { pointer-events: none; }
    .page_fixed_actions .container { padding: 0; }
    .page_fixed_actions ul { right: 10px; bottom: 10px; gap: 8px; }
    .page_fixed_actions ul li { margin: 0; }
    .page_fixed_actions button { pointer-events: auto; }
    body.mobile-dialog-open .page_fixed_actions { display: none; }
    .chat_widget #chat_widget_avatars > li:not(:first-child) { display: none; }
    .chat_widget .chat_widget_avatar_btn[data-action="toggle-chat-collapse"] { min-width: 48px; min-height: 48px; }
    .chat_widget .mobile-chat-unread {
        display: block; position: absolute; top: -5px; right: -7px; min-width: 22px; height: 22px;
        padding: 2px 4px; border-radius: 11px; color: #fff; background: #e53935;
        font: 700 11px/18px sans-serif; text-align: center;
    }
    .page_fixed_actions:not(.chat_widget) { bottom: 72px; z-index: 12; pointer-events: none; }
    .page_fixed_actions:not(.chat_widget):has(.fixed_xuong_tab_togglers) { bottom: 100px; }
    .page_fixed_actions:not(.chat_widget) .container { position: static; }
    .page_fixed_actions:not(.chat_widget) .mobile-quick-toggle {
        position: absolute; right: 10px; bottom: 0; display: flex;
        flex-direction: column; align-items: center; justify-content: center;
        width: 54px; height: 54px; padding: 4px; border: 0; border-radius: 15px;
        color: #fff; background: var(--gtt-primary-color); box-shadow: 0 3px 12px #0003;
        font-size: 10px; line-height: 1.2; pointer-events: auto;
    }
    .page_fixed_actions:not(.chat_widget) .mobile-quick-toggle span:first-child { font-size: 26px; line-height: 20px; }
    .page_fixed_actions:not(.chat_widget) ul,
    .page_fixed_actions:not(.chat_widget) ul.left {
        display: none; position: absolute; right: 10px; left: auto; bottom: 62px;
        min-width: 180px; max-width: calc(100vw - 20px); max-height: 55dvh;
        overflow: auto; padding: 10px; gap: 4px; border-radius: 14px;
        background: #fff; box-shadow: 0 5px 24px #0004; pointer-events: auto;
    }
    .page_fixed_actions:not(.chat_widget).mobile-quick-open ul { display: flex; }
    .page_fixed_actions:not(.chat_widget) ul li { width: 100%; margin: 0; }
    .page_fixed_actions:not(.chat_widget) ul li > button {
        display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px;
        padding: 6px 8px; text-align: left;
    }
    .page_fixed_actions:not(.chat_widget) ul li > button[data-mobile-label]::after {
        content: attr(data-mobile-label); font-size: 13px; color: #333;
    }
    .page_fixed_actions:not(.chat_widget) .fixed_xuong_tab_togglers_inner {
        display: flex; flex-wrap: wrap; gap: 6px;
    }
    .page_fixed_actions:not(.chat_widget) .fixed_xuong_tab_togglers_inner button {
        min-width: 100%; min-height: 44px; padding: 7px; border-radius: 8px;
        flex-direction: row-reverse; gap: 4px;
        background: #f2f7fb; color: var(--gtt-primary-color); font-size: 14px;
    }
    .page_fixed_actions:not(.chat_widget) .fixed_xuong_tab_togglers_inner button.active {
        background: var(--gtt-primary-color); color: #fff;
    }
    .page_fixed_actions:not(.chat_widget) .fixed_xuong_tab_togglers_inner button::after {
        content: attr(data-mobile-label); font-size: 13px;
    }
    .chat_widget_avatars .chat_widget_avatar_btn img { width: 40px; height: 40px; }
    .chat_widget_avatars .chat_widget_avatar_btn[data-action="toggle-chat-collapse"] img { width: 45px; height: 45px; left: 0; }

    .wrap_popup .popup_container,
    .wrap_popup .popup_container.width_auto,
    .wrap_popup .popup_container.xsm_container,
    .wrap_popup .popup_container.sm_container,
    .wrap_popup .popup_container.md_container,
    .wrap_popup .popup_container.lg_container,
    .wrap_popup .popup_container.xl_container {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
        height: auto;
        max-height: calc(100dvh - 16px);
        min-height: 0;
        padding: 12px;
        overflow: auto;
    }
    .wrap_popup .popup_container.xl_container { height: calc(100dvh - 16px); }
    .wrap_popup .popup_container.xl_container .wrap_model_detail,
    .popup_content_left_right { display: flex; flex-direction: column; width: 100%; height: auto; gap: 12px; }
    .wrap_popup .popup_container.xl_container .wrap_model_detail .model_detail_left,
    .wrap_popup .popup_container.xl_container .wrap_model_detail .model_detail_right,
    .popup_content_left_right .popup_content_left,
    .popup_content_left_right .popup_content_right {
        width: 100%; height: auto; min-width: 0; overflow: visible;
    }
    .popup_content_left_right .popup_content_left.border_right { width: 100%; margin-right: 0; }
    .popup_content_left_right .popup_content_left.border_right:after { display: none; }
    .wrap_popup .close_popup { right: 4px; top: 0; color: #333; z-index: 10; }
    .popup_content_left_right .popup_content_right_title { font-size: 21px; }
    .wrap_popup .popup_head .popup_head_title h3 { font-size: 20px; }
    .wrap_popup .popup_section.input_as_title input { width: 100%; }
    .wrap_popup .popup_body { min-height: 0; overflow: auto; }
    .wrap_popup .popup_body .wrap_tab_togglers ul { overflow-x: auto; justify-content: flex-start; }
    .wrap_popup .popup_section { max-width: 100%; }
    .wrap_popup .popup_section .wrap_comment_box:not(.chat_composer_box) .media_box {
        width: 100%; max-width: 100%; flex: 1 1 auto;
    }
    #popup-order-detail .popup_container { display: flex; flex-direction: column; overflow: hidden; }
    #popup-order-detail.wrap_popup .popup_head {
        position: relative; top: auto; right: auto; width: 100%; height: auto;
        flex: 0 0 auto; flex-direction: row; flex-wrap: wrap; align-items: center;
        gap: 4px 10px; padding: 0 4px 8px; border-bottom: 1px solid #eee;
    }
    #popup-order-detail.wrap_popup .popup_head button { margin: 0; font-size: 12px; line-height: 1.2; }
    #popup-order-detail.wrap_popup .popup_head .close_popup { order: -1; margin-left: auto; }
    #popup-order-detail.wrap_popup .popup_head .close_popup i { font-size: 28px; margin: 0; }
    #popup-order-detail.wrap_popup .popup_head .order_action i { font-size: 21px; }
    #popup-order-detail .popup_body { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; }
    #popup-order-detail .popup_content_left_title { font-size: 21px; }
    #popup-order-detail .popup_content_left_title .popup_content_left_title_tabs {
        position: static; transform: none; display: block; margin: 8px 0 0;
    }
    #popup-order-detail .popup_content_left_right .inline_label_value {
        width: 100%; padding: 8px 10px;
    }
    #popup-order-detail .inline_label_value ul li { gap: 8px; align-items: flex-start; }
    #popup-order-detail .inline_label_value ul li .label,
    #popup-order-detail .inline_label_value ul li .label.long_label {
        flex: 0 0 42%; width: 42%; min-width: 0;
    }
    #popup-order-detail .inline_label_value ul li p,
    #popup-order-detail .inline_label_value ul li.tong_tien_thanh_toan p {
        flex: 1 1 auto; width: auto; min-width: 0; white-space: normal;
        overflow-wrap: anywhere;
    }
    #popup-order-detail .popup_content_left_right .order_status_log,
    #popup-order-detail .popup_content_left_right #order_documents.is_expanded ~ .order_status_log {
        position: relative; left: auto; bottom: auto; transform: none;
        height: auto; min-height: 120px; margin-top: 14px;
    }
    #popup-order-detail .popup_content_left_right .order_status_log_detail {
        width: 100%; max-height: 180px; margin: 0; overflow-y: auto;
    }
    #popup-order-detail .popup_content_right_body { height: auto; overflow: visible; }
    #popup-order-detail .order_items_table {
        max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
    }
    #popup-order-detail .order_items_table table { min-width: 680px; }
    #popup-order-detail .popup_content_right_foot { position: static; width: 100%; }
    #popup-order-detail .popup_content_right_foot_info { width: 100%; flex-wrap: wrap; }
    #popup-order-detail .popup_content_right_foot .wrap_comment { width: 100%; }
    #popup-order-detail .popup_content_right_foot .wrap_comment_box { flex-direction: column; }
    #popup-order-detail .popup_content_right_foot .media_box {
        width: 100%; max-width: 100%; flex: 0 0 auto;
    }
    #popup-order-detail .popup_content_right_foot .uploaded_images {
        width: 100%; max-width: 100%; flex: 0 0 auto; margin: 8px 0 0;
    }
    #popup-order-detail .popup_content_right_foot .g-scrolling-carousel { max-width: 100%; }
    #popup-order-detail .hide_info_content .hide_info_thumb { width: min(150px, 45vw); }
    #popup-order-detail .hide_info_info .hide_info_title { font-size: 20px; }

    #popup-user-detail .model_detail_title {
        padding-right: 35px; font-size: 21px; line-height: 1.3; text-align: left;
    }
    #popup-user-detail #wrap_nghi_viec {
        position: static; margin: 12px 0 0; padding: 0 4px;
    }

    #popup-sales-reward-detail .popup_body { overflow-x: hidden; }
    #popup-sales-reward-detail .sales-reward-detail-info {
        flex-direction: column; gap: 24px; margin-top: 16px;
    }
    #popup-sales-reward-detail .sales-reward-detail-info .sales-reward-info-left,
    #popup-sales-reward-detail .sales-reward-detail-info .sales-reward-info-right {
        width: 100%; min-width: 0; margin: 0;
    }
    #popup-sales-reward-detail .sales-reward-detail-info .sales-reward-info-left:after { display: none; }
    #popup-sales-reward-detail .sales-reward-detail-info .sales-reward-info-title { font-size: 21px; }
    #popup-sales-reward-detail #sales-reward-milestones .sales_reward_info {
        display: flex; flex-wrap: wrap; gap: 8px 12px; padding: 10px;
        border-radius: 10px; background: #f4f8fb;
    }
    #popup-sales-reward-detail #sales-reward-milestones .sales_milestone {
        flex: 1 1 160px; width: auto; min-width: 0; margin: 0;
    }
    #popup-sales-reward-detail #sales-reward-milestones .sales_milestone_scope {
        flex: 1 1 145px; min-width: 0;
    }
    #popup-sales-reward-detail #sales-reward-values .sales_reward_info {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px; padding: 10px; border-radius: 10px; background: #f4f8fb;
    }
    #popup-sales-reward-detail #sales-reward-values .sales_reward_value_row {
        min-width: 0; margin: 0;
    }
    #popup-sales-reward-detail #sales-reward-values .sales_reward_value_row input { width: 100%; min-width: 0; }
    #popup-sales-reward-detail #sales-reward-values .sales_reward_label { height: auto; min-height: 34px; }

    #popup-create-update-material .wrap_material_content {
        width: 100%; flex-direction: column; align-items: stretch; gap: 14px;
    }
    #popup-create-update-material .wrap_material_content .wrap_material_images {
        width: 120px; height: 120px; margin: 0 auto;
    }
    #popup-create-update-material .wrap_material_content .wrap_material_info { width: 100%; min-width: 0; }
    #popup-create-update-material .wrap_material_content .wrap_material_info_row.d-flex {
        flex-wrap: wrap; gap: 10px;
    }
    #popup-create-update-material .wrap_material_content .wrap_material_info_row.d-flex .wrap_material_info_field {
        width: 100%; min-width: 0; margin: 0;
    }
    #popup-create-update-material .wrap_material_content .wrap_material_info_field input { width: 100%; min-width: 0; }
    #popup-create-update-material .update_material_types,
    #popup-create-update-material .update_material_chat_lieu_types { flex-wrap: wrap; gap: 8px 16px; }
    #popup-create-update-material .update_material_types li,
    #popup-create-update-material .update_material_chat_lieu_types li { margin: 0; }

    #popup-salary-payment-detail .popup_body { overflow-x: hidden; }
    #popup-salary-payment-detail .popup_content_left_title.left {
        display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
    }
    #popup-salary-payment-detail .popup_content_left_title_tabs {
        position: static; transform: none; margin: 0;
    }
    #popup-salary-payment-detail .popup_content_right_title { font-size: 21px; }
    #popup-salary-payment-detail .popup_content_right_title_wrap_actions.fixed {
        position: static; margin-top: 10px;
    }
    #popup-salary-payment-detail .popup_content_right_title_wrap_actions.fixed ul {
        height: auto; line-height: 1.3; overflow: visible;
        justify-content: flex-start; flex-wrap: wrap; gap: 8px;
    }
    #popup-salary-payment-detail .popup_content_right_title_actions li button,
    #popup-salary-payment-detail .popup_content_right_title_actions li a {
        margin: 0; padding: 6px 8px; min-height: 36px; display: inline-flex; align-items: center;
    }
    #popup-salary-payment-detail .wrap_list_title_content ul .list_title_content {
        height: auto; min-height: 44px; padding: 10px; gap: 6px; flex-wrap: wrap;
    }
    #popup-salary-payment-detail .wrap_list_title_content ul .list_title_content_title,
    #popup-salary-payment-detail .wrap_list_title_content ul .list_title_content_title.large {
        width: auto; min-width: 0; flex: 1 1 50%; margin: 0; overflow-wrap: anywhere;
    }
    #popup-salary-payment-detail .wrap_list_title_content ul .list_title_content_content {
        width: auto; min-width: 0; flex: 1 1 35%; margin-left: auto;
        justify-content: flex-end; flex-wrap: wrap; overflow-wrap: anywhere;
    }
    #popup-salary-payment-detail .wrap_list_title_content ul .list_title_content_value,
    #popup-salary-payment-detail .wrap_list_title_content ul .list_title_content_value.large {
        width: auto; min-width: 0; margin-left: 4px;
    }
    #popup-salary-payment-detail .wrap_list_title_content ul .cham_cong_detail_con_lai { padding-bottom: 70px; }
    #popup-salary-payment-detail .table_cham_cong_detail_head,
    #popup-salary-payment-detail .table_nhan_viec_log_detail_head {
        max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
    }
    #popup-salary-payment-detail .table_cham_cong_detail_head.over_height,
    #popup-salary-payment-detail .table_nhan_viec_log_detail_head.over_height {
        overflow-x: auto; overflow-y: hidden;
    }
    #popup-salary-payment-detail .table_cham_cong_detail_head table,
    #popup-salary-payment-detail .table_nhan_viec_log_detail_head table { min-width: 700px; }
    #popup-salary-payment-detail .popup_content_right_foot { position: static; width: 100%; }
    #popup-salary-payment-detail .popup_content_right_foot_info {
        width: 100%; flex-wrap: wrap;
    }
    #popup-salary-payment-detail #wrap_file_hop_dong {
        width: 100%; max-width: 100%; min-width: 0;
    }
    #popup-salary-payment-detail .popup_content_right_foot .wrap_comment { width: 100%; }
    #popup-salary-payment-detail .popup_content_right_foot .wrap_comment_box { flex-direction: column; }
    #popup-salary-payment-detail .popup_content_right_foot .media_box {
        width: 100%; max-width: 100%; flex: 0 0 auto;
    }
    #popup-salary-payment-detail .popup_content_right_foot .uploaded_images {
        width: 100%; max-width: 100%; flex: 0 0 auto; margin: 8px 0 0;
    }
    #popup-create-yeu-cau-chi-phi .new_yeu_cau_info,
    #popup-create-funding .new_fund_info {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    #popup-create-yeu-cau-chi-phi .new_yeu_cau_info input,
    #popup-create-funding .new_fund_info input {
        width: 100%; min-width: 0; margin: 0; padding: 8px; min-height: 40px;
    }
    #popup-create-yeu-cau-chi-phi .new_yeu_cau_title input { width: 100%; }

    #chat_layout .wrap_chat_layout {
        width: calc(100vw - 16px);
        max-width: none;
        height: calc(100dvh - 16px);
        flex-direction: column;
    }
    #chat_layout .chat_layout_close { right: 4px; top: 4px; color: #333; }
    #chat_layout .chat_main_head {
        height: auto; min-height: 50px; flex-wrap: wrap; gap: 4px;
        padding-right: 40px;
    }
    #chat_layout .chat_main_head .chat_room_title_row {
        max-width: none; flex: 1 1 calc(100% - 50px);
    }
    #chat_layout .chat_main_head .search_left {
        position: static; transform: none; width: 100%; flex: 1 1 100%;
        margin-top: 4px;
    }
    #chat_layout .chat_detail_section,
    #chat_layout .chat_list_section { width: 100%; min-height: 0; flex: 1 1 0; }
    #chat_layout .chat_detail_section { display: flex; flex-direction: column; overflow: hidden; }
    #chat_layout .chat_detail_section .chat_main_messages,
    #chat_layout .chat_detail_section .chat_main_messages.is_showing_reply {
        flex: 1 1 0; min-height: 0; max-height: none; margin-top: 10px;
    }
    #chat_layout .chat_main_composer {
        position: static; width: 100%; flex: 0 0 auto; margin-top: 10px;
    }
    #chat_layout #chat_message_comment_box { min-height: 80px; max-height: 150px; }
    #chat_layout .chat_main_composer .chat_composer_box .media_box { min-height: 80px; }
    #chat_layout .chat_room_item .chat_room_item_content {
        width: auto; min-width: 0; flex: 1 1 auto;
    }
    #chat_layout .chat_room_item .chat_room_last_message,
    #chat_layout .chat_room_item .chat_room_last_message > div { width: 100%; min-width: 0; }
    #chat_layout .chat_room_item .chat_room_item_top,
    #chat_layout .chat_room_item .chat_room_name { min-width: 0; }
    #chat_layout .chat_room_item .chat_room_name {
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }

    .login_form { width: calc(100vw - 24px); max-width: 400px; padding: 18px; }
}

@media (max-width: 479px) {
    .page_head .general_info .stats_body { align-items: flex-start; }
    .page_head .general_info .stats_body .wrap_kpi { width: 68px; flex-basis: 68px; }
    .page_head .general_info .stats_body .wrap_circle_percent { --circle-size: 68px; }
    .page_head .general_info .stats_body .wrap_kpi_detail { flex-wrap: wrap; }
    .page_head .general_info .stats_body .wrap_kpi_detail .kpi_detail { width: calc(50% - 5px); }
    .page_head .general_info .stats_body .wrap_kpi_detail .kpi_detail_title { font-size: 13px; }
    .page_head .general_info .stats_body .wrap_kpi_detail .kpi_detail_point { font-size: 18px; }
    .wrap_list_round_buttons .list_round_buttons li,
    .wrap_list_round_buttons .list_round_buttons.col_4 li { width: calc((100% - 15px) / 2); }
    .wrap_list_round_buttons .list_round_buttons li button img { height: 145px; }
    .wrap_list_round_buttons .wrap_list_round_button_search .list_round_button_search_left,
    .wrap_list_round_buttons .wrap_list_round_button_search .list_round_button_search_right { position: static; width: 100%; min-width: 0; margin-bottom: 8px; }
    #popup-create-order #create_order_form .order_info_row { flex-wrap: wrap; gap: 8px; }
    #popup-create-order #create_order_form .order_info_row.note_giao_hang.vat { width: 100%; margin-left: 0; }
    #popup-create-order .note_giao_hang li { width: auto; flex: 1 1 110px; }
    #popup-create-order #create_order_form .order_info_row > input[type="text"],
    #popup-create-order #create_order_form .order_info_row > select { width: 100%; margin: 0; }
    #popup-create-order #create_order_form .wrap_thanh_toan { width: 100%; }
    #popup-create-order #create_order_form #vat_cong_ty_fields .wrap_vat_cong_ty_section .wrap_vat_cong_ty_fields { grid-template-columns: 1fr; }
}

/* Order filters stay in place while only the order columns scroll. */
@media (max-width: 1199px) {
    .erp-production-page { overflow-x: clip; }
    .erp-summary-page .page_head .general_info .stats_section_right #kpiChart:not(.chart-empty) {
        height: 150px !important;
    }
    .erp-order-page .order-list-panel { overflow: visible; }
    .erp-order-page .order-list-panel .search_right .filters li > label {
        min-height: 38px;
        padding: 5px 7px;
        border: 1px solid #d8e7f2;
        border-radius: 9px;
        background: #f6faff;
        color: #354d5d;
        line-height: 1.15;
    }
    .erp-order-page .order-list-panel .search_right .filters li > label:has(input:checked) {
        border-color: var(--gtt-primary-color);
        background: #e7f4ff;
        color: #126caa;
    }
    .erp-order-page .order-table-scroll {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .erp-order-page .order-table-scroll #order-table {
        min-width: 960px;
        width: max-content;
        max-width: none;
    }
    .erp-order-page .order-table-scroll #order-table th,
    .erp-order-page .order-table-scroll #order-table td { min-width: 70px; }
    .erp-order-page .order-table-scroll #order-table .stt { min-width: 42px; }
    .erp-order-page .order-table-hint {
        display: block;
        margin: 0 12px 8px;
        color: #6b8495;
        font-size: 12px;
    }
    .erp-summary-page .stats_section_right #kpiChart.chart-empty {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 48px !important;
        width: 100% !important;
        margin: 0;
        border: 1px dashed rgb(255 255 255 / 45%);
        border-radius: 10px;
    }
    .erp-summary-page #kpiChart.chart-empty > div { display: none; }
    .erp-summary-page #kpiChart.chart-empty::after {
        content: "Chưa có số liệu trong kỳ này";
        color: #fff;
        font-size: 13px;
    }
}

@media (max-width: 767px) {
    .erp-summary-page .page_head .general_info { padding: 15px 0 18px; }
    .erp-summary-page .stats_section_title { display: block; }
    .erp-summary-page .page_head .general_info .stats_section_title p {
        margin: 0 0 6px;
        font-size: 20px;
    }
    .erp-summary-page .page_head .general_info .stats_time_filter {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        gap: 8px;
    }
    .erp-summary-page .stats_time_filter .stats_by_days { margin-left: 0; }
    .erp-summary-page .stats_time_filter .stats_by_days > label {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 13px;
        white-space: nowrap;
    }
    .erp-summary-page .page_head .general_info .wrap_stats_section { gap: 10px; }
    .erp-summary-page .page_head .general_info .stats_body {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr);
        align-items: center;
        gap: 8px;
        margin-top: 10px;
    }
    .erp-summary-page .page_head .general_info .stats_body .wrap_kpi {
        width: 64px;
        margin: 0;
    }
    .erp-summary-page .page_head .general_info .stats_body .wrap_circle_percent { --circle-size: 64px; }
    .erp-summary-page .page_head .general_info .stats_body .wrap_kpi_detail {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 7px;
        padding: 0;
    }
    .erp-summary-page .page_head .general_info .stats_body .wrap_kpi_detail .kpi_detail {
        width: auto;
        min-width: 0;
        min-height: 94px;
        padding: 7px;
        border: 1px solid rgb(255 255 255 / 24%);
        border-radius: 11px;
        background: rgb(255 255 255 / 9%);
    }
    .erp-summary-page .page_head .general_info .stats_body .kpi_detail_title {
        font-size: 12px;
        line-height: 1.2;
    }
    .erp-summary-page .page_head .general_info .stats_body .kpi_detail_point {
        display: block;
        margin-top: 4px;
        font-size: 16px;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }
    .erp-summary-page .page_head .general_info .stats_body .kpi_detail_point .desc_value {
        position: static;
        margin-left: 3px;
        font-size: 11px;
        vertical-align: baseline;
    }
    .erp-summary-page .page_head .general_info .stats_body .kpi_filter_status {
        display: flex;
        flex-wrap: wrap;
        gap: 3px 8px;
        margin-top: 5px;
    }
    .erp-summary-page .page_head .general_info .stats_body .kpi_filter_status > label {
        display: flex;
        align-items: center;
        gap: 3px;
        font-size: 11px;
        line-height: 1.2;
    }
    .erp-summary-page .page_head .general_info .stats_section_right {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        border-top: 1px solid rgb(255 255 255 / 18%);
        padding-top: 8px;
    }
    .erp-summary-page .page_head .general_info .stats_section_right::-webkit-scrollbar { display: none; }
    .erp-summary-page .page_head .general_info .stats_section_right #kpiChart:not(.chart-empty) {
        width: max(560px, 100%) !important;
        height: 100px !important;
    }
    .erp-summary-page .stats_section_right:has(#kpiChart:not(.chart-empty))::after {
        content: "Vuốt ngang để xem từng ngày";
        display: block;
        width: max-content;
        margin: 2px 0 0;
        color: rgb(255 255 255 / 85%);
        font-size: 11px;
    }
    .erp-summary-page:has(#is_stats_by_days:not(:checked)) .stats_section_right:has(#kpiChart:not(.chart-empty))::after {
        content: "Vuốt ngang để xem từng tháng";
    }
    .erp-order-page .page_head .general_info .head_actions { margin-top: 6px; }
    .erp-order-page .page_head .general_info .head_actions .head_action button {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }
    .erp-order-page .page_head .general_info .head_actions .head_action button::before {
        --width: 10px;
        left: 5px;
    }
    .erp-order-page .page_head .general_info .head_actions .head_action_title { font-size: 12px; }

    .erp-order-page .order-list-panel .search_form {
        display: grid;
        gap: 9px;
        margin: 0;
        padding: 12px 11px 10px;
    }
    .erp-order-page .order-list-panel .search_left.btn_on_field {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 7px;
        width: 100%;
    }
    .erp-order-page .order-list-panel .search_left.btn_on_field input[type="text"] {
        width: 100%;
        height: 42px;
        padding: 8px 11px;
        font-size: 13px;
    }
    .erp-order-page .order-list-panel .search_left.btn_on_field button {
        position: static;
        width: auto;
        max-width: none;
        height: 42px;
        padding: 0 12px;
        font-size: 13px;
        white-space: nowrap;
    }
    .erp-order-page .order-list-panel .search_left.btn_on_field button i { margin-left: 3px; }
    .erp-order-page .order-list-panel .search_right {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 7px;
        margin: 0;
    }
    .erp-order-page .order-list-panel .search_right .filters {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: 6px;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
        bottom: 0;
    }
    .erp-order-page .order-list-panel .search_right .filters li { min-width: 0; margin: 0; }
    .erp-order-page .order-list-panel .search_right .filters li > label {
        display: flex;
        align-items: center;
        gap: 5px;
        min-height: 39px;
        height: 100%;
        padding: 5px 7px;
        border: 1px solid #d8e7f2;
        border-radius: 9px;
        background: #f6faff;
        color: #354d5d;
        font-size: 12px;
        line-height: 1.15;
    }
    .erp-order-page .order-list-panel .search_right .filters li > label:has(input:checked) {
        border-color: var(--gtt-primary-color);
        background: #e7f4ff;
        color: #126caa;
    }
    .erp-order-page .order-list-panel .search_right .filters .checkbox { flex: 0 0 25px; }
    .erp-order-page .order-list-panel .search_right .search_right_button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        width: 100%;
        height: 36px;
        flex: 0 0 36px;
        margin: 0;
        border: 1px solid #d8e7f2;
        border-radius: 9px;
        background: #fff;
        color: var(--gtt-primary-color);
        font-size: 14px;
    }
    .erp-order-page .order-list-panel .search_right .search_right_button::after {
        content: "Lọc nâng cao";
        font-size: 12px;
        font-weight: 600;
    }
}

@media (max-width: 399px) {
    .erp-order-page .page_head .general_info .stats_body .wrap_kpi_detail {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .erp-order-page .page_head .general_info .stats_body .wrap_kpi_detail .kpi_detail {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 3px 5px;
        min-height: 0;
        padding: 6px 8px;
    }
    .erp-order-page .page_head .general_info .stats_body .kpi_detail_point {
        margin: 0;
        font-size: 14px;
        letter-spacing: -.02em;
        white-space: nowrap;
    }
    .erp-order-page .page_head .general_info .stats_body .kpi_filter_status {
        grid-column: 1 / -1;
        margin-top: 2px;
    }
}

/* The order list uses two readable lines per order on phones. */
.mobile-status-toggle { display: none; }
@media (max-width: 767px) {
    .erp-order-page .page_head .general_info { padding-bottom: 12px; }
    .erp-order-page .page_head .general_info .wrap_stats_section { gap: 4px; }
    .erp-order-page .page_head .general_info .stats_section_right #kpiChart:not(.chart-empty) { height: 86px !important; }
    .erp-order-page .page_head .general_info .head_actions { margin-top: 2px; }
    .erp-order-page .page_body { margin-top: 10px; }
    .erp-order-page .order-list-panel .search_form { gap: 6px; padding: 9px; }
    .erp-order-page .order-list-panel .search_right {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px;
    }
    .erp-order-page .mobile-status-toggle {
        display: flex;
        align-items: center;
        gap: 5px;
        width: 100%;
        min-height: 38px;
        padding: 6px 10px;
        border: 1px solid #d8e7f2;
        border-radius: 9px;
        background: #f6faff;
        color: #126caa;
        font-size: 13px;
        font-weight: 600;
        text-align: left;
    }
    .erp-order-page .mobile-status-toggle i { margin-left: auto; transition: transform .2s; }
    .erp-order-page .mobile-status-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
    .erp-order-page .order-list-panel .search_right .search_right_button {
        width: 42px;
        height: 38px;
        flex: none;
        grid-column: 2;
        grid-row: 1;
    }
    .erp-order-page .order-list-panel .search_right .search_right_button::after { display: none; }
    .erp-order-page .order-list-panel .search_right .filters {
        display: none;
        grid-column: 1 / -1;
        margin: 1px 0 0;
    }
    .erp-order-page .order-list-panel .search_right .filters.mobile-filters-open { display: grid; }
    .erp-order-page .order-list-panel .search_right .filters li > label { min-height: 36px; }
    .erp-order-page .order-table-scroll { overflow: visible; }
    .erp-order-page .order-table-scroll #order-table {
        display: block;
        min-width: 0;
        width: 100%;
        max-width: 100%;
        border-collapse: separate;
    }
    .erp-order-page #order-table thead { display: none; }
    .erp-order-page #order-table #orders { display: block; width: 100%; }
    .erp-order-page #order-table #orders tr:not(.no_data) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-rows: auto auto;
        align-items: center;
        gap: 4px 7px;
        width: 100%;
        min-width: 0;
        padding: 10px 12px;
        border-top: 1px solid #edf1f4;
    }
    .erp-order-page #order-table #orders td {
        display: block;
        width: auto;
        min-width: 0;
        max-width: none;
        padding: 0;
        border: 0;
        text-align: left;
        line-height: 1.25;
    }
    .erp-order-page #order-table #orders .order_stt,
    .erp-order-page #order-table #orders .order_ngay_dat_hang,
    .erp-order-page #order-table #orders .ngay_giao,
    .erp-order-page #order-table #orders .order_khu_vuc,
    .erp-order-page #order-table #orders .order_da_thanh_toan,
    .erp-order-page #order-table #orders .order_remain,
    .erp-order-page #order-table #orders .order_danh_gia { display: none; }
    .erp-order-page #order-table #orders .order_don_hang { grid-column: 1; grid-row: 1; }
    .erp-order-page #order-table #orders .nguoi_lam {
        display: flex;
        grid-column: 2;
        grid-row: 1;
        justify-content: flex-end;
        width: auto;
    }
    .erp-order-page #order-table #orders .nguoi_lam p { width: 27px; height: 27px; }
    .erp-order-page #order-table #orders .order_doanh_thu {
        grid-column: 3;
        grid-row: 1;
        color: #243746;
        font-weight: 600;
        text-align: right;
        white-space: nowrap;
        font-size: 12px;
    }
    .erp-order-page #order-table #orders .order_khach_hang { grid-column: 1 / 3; grid-row: 2; }
    .erp-order-page #order-table #orders .order_status { grid-column: 3; grid-row: 2; text-align: right; }
    .erp-order-page #order-table #orders .order_status .badge { white-space: normal; line-height: 1.2; }
    .erp-order-page #order-table #orders .ten_khach,
    .erp-order-page #order-table #orders .ten_khach .receiver_name,
    .erp-order-page #order-table #orders .ten_khach.has_customer_order_count .receiver_name {
        display: inline;
        max-width: none;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: anywhere;
    }
    .erp-order-page #order-table #orders tr.no_data,
    .erp-order-page #order-table #orders tr.no_data td { display: block; width: 100%; text-align: center; }

    #popup-filter-orders .popup_container.xl_container.height_auto {
        display: flex;
        flex-direction: column;
        height: min(700px, calc(100dvh - 24px));
        max-height: calc(100dvh - 24px);
        padding: 12px 10px 10px;
        overflow: hidden;
    }
    #popup-filter-orders .popup_body { min-height: 0; overflow-y: auto; padding: 0 4px; }
    #popup-filter-orders .popup_section { margin: 12px 0 0; }
    #popup-filter-orders .popup_section_title { margin-bottom: 8px; font-size: 17px; }
    #popup-filter-orders .popup_foot { margin-top: 4px; padding: 5px 0 0; border-top: 1px solid #e8edf2; }
    #popup-filter-orders .popup_foot .popup_section { margin: 0; }
    #popup-filter-orders .popup_section .multi_options ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
        gap: 7px;
        width: 100%;
    }
    #popup-filter-orders .popup_section .multi_options li,
    #popup-filter-orders .popup_section .multi_options .cover_avatar,
    #popup-filter-orders .xl_container .popup_section .multi_options .cover_avatar {
        width: 100%;
        min-width: 0;
        margin: 0;
    }
    #popup-filter-orders #filter_sellers li button {
        display: flex;
        align-items: center;
        gap: 6px;
        width: 100%;
        height: auto;
        min-height: 49px;
        padding: 4px;
        border: 1px solid #dce6ee;
        border-radius: 10px;
        text-align: left;
    }
    #popup-filter-orders #filter_sellers li.active button { border-color: var(--gtt-primary-color); background: #eef8ff; }
    #popup-filter-orders #filter_sellers .option_covered {
        display: block;
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
    }
    #popup-filter-orders #filter_sellers .option_covered img { display: block; width: 100%; height: 100%; object-fit: cover; }
    #popup-filter-orders #filter_sellers .nhan_vien_name {
        display: -webkit-box;
        min-width: 0;
        margin: 0;
        overflow: hidden;
        overflow-wrap: anywhere;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        color: #2c678e;
        font-size: 12px;
        line-height: 1.25;
    }
    #popup-filter-orders #filter_sellers .active .option_covered::after { font-size: 19px; line-height: 36px; }
    #popup-filter-orders #filter_chi_nhanh_ids li button,
    #popup-filter-orders #filter_channels li button,
    #popup-filter-orders #filter_provinces li button {
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 38px;
        padding: 5px;
        font-size: 12px;
        line-height: 1.2;
        white-space: normal;
    }

    .erp-order-page #order_detail_report {
        width: 100%;
        min-width: 0;
        padding: 12px;
        overflow: hidden;
    }
    .erp-order-page #order_detail_report .detail_report_title { margin: 0 0 10px; font-size: 21px; }
    .erp-order-page #order_detail_report > .report_types {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .erp-order-page #order_detail_report > .report_types li { width: 100%; min-width: 0; margin: 0; }
    .erp-order-page #order_detail_report > .report_types li button {
        width: 100%;
        height: 38px;
        padding: 4px;
        font-size: 13px;
        line-height: 1.1;
    }
    .erp-order-page #order_detail_report .detail_report_content { display: block; min-height: 0; width: 100%; }
    .erp-order-page #order_detail_report .wrap_tab_contents { width: 100%; min-width: 0; margin-top: 12px; }
    .erp-order-page #tab-ban_hang .wrap_gtt_progress_bars { display: flex; flex-direction: column; min-height: 0; gap: 12px; }
    .erp-order-page #tab-ban_hang .sellers_progress {
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
    }
    .erp-order-page #tab-ban_hang .wrap_gtt_progress_bars .sellers_progress #remain_reward_lucky_wheel_btn {
        position: relative;
        top: auto;
        left: auto;
        display: block;
        width: 100%;
        min-height: 36px;
        margin: 0 0 8px;
        padding: 5px 8px 5px 43px;
        border-radius: 9px;
        font-size: 12px;
        text-align: left;
    }
    .erp-order-page #tab-ban_hang .wrap_gtt_progress_bars .sellers_progress #remain_reward_lucky_wheel_btn img { width: 29px; height: 29px; top: 3px; left: 7px; }
    .erp-order-page #tab-ban_hang #list_seller_sales {
        width: 100%;
        max-height: 328px;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        border: 1px solid #e6eef4;
        border-radius: 10px;
    }
    .erp-order-page #tab-ban_hang #list_seller_sales .gtt_progress_bar_row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px;
        min-width: 0;
        min-height: 48px;
        margin: 0;
        padding: 5px 7px;
        border-bottom: 1px solid #edf1f4;
        line-height: 1.2;
    }
    .erp-order-page #tab-ban_hang #list_seller_sales .gtt_progress_bar_row:last-child { border-bottom: 0; }
    .erp-order-page #tab-ban_hang #list_seller_sales .gtt_progress_row_label {
        align-items: center;
        min-width: 0;
        width: 100%;
        border: 0;
    }
    .erp-order-page #tab-ban_hang #list_seller_sales .gtt_progress_row_label img { flex: 0 0 32px; width: 32px; height: 32px; }
    .erp-order-page #tab-ban_hang #list_seller_sales .gtt_progress_row_label p {
        width: auto;
        min-width: 0;
        margin-left: 6px;
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: 12px;
        line-height: 1.2;
    }
    .erp-order-page #tab-ban_hang #list_seller_sales .gtt_progress {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        width: auto;
        height: auto;
        min-width: 0;
    }
    .erp-order-page #tab-ban_hang #list_seller_sales .gtt_progress::before { display: none; }
    .erp-order-page #tab-ban_hang #list_seller_sales .gtt_progress_bar {
        position: static;
        width: auto !important;
        min-width: 0;
        height: auto;
        border-radius: 0;
        background: none;
    }
    .erp-order-page #tab-ban_hang #list_seller_sales .gtt_progress_amount {
        position: static;
        order: -2;
        color: #287eae;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.2;
        white-space: nowrap;
    }
    .erp-order-page #tab-ban_hang #list_seller_sales .gtt_progress_bar.estimation { order: -1; }
    .erp-order-page #tab-ban_hang #list_seller_sales .gtt_progress_bar_tool_tip {
        display: block;
        position: static;
        margin: 0;
        padding: 0;
        background: none;
        color: #6f8798;
        font-size: 10px;
        line-height: 1.2;
    }
    .erp-order-page #tab-ban_hang #list_seller_sales .gtt_progress_bar_tool_tip::before { content: "Ước: "; }
    .erp-order-page #tab-ban_hang #list_seller_sales .sales_seller_reward.active {
        position: static;
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 2px;
        max-width: 110px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .erp-order-page #tab-ban_hang #list_seller_sales .sales_seller_reward button { height: 27px; }
    .erp-order-page #tab-ban_hang #list_seller_sales .sales_seller_reward img { height: 27px; top: 0; }
    .erp-order-page #tab-ban_hang #sales_reward_milestones { display: none; }
    .erp-order-page #tab-ban_hang #nguon_khach_chart {
        flex: none;
        width: min(300px, 100%);
        max-width: 100%;
        height: 270px;
        margin: 0 auto;
    }
    .erp-order-page #tab-san_pham,
    .erp-order-page #tab-dia_diem,
    .erp-order-page #tab-phan_hoi { min-width: 0; max-width: 100%; overflow-x: auto; }
    .erp-order-page #product_cates_chart,
    .erp-order-page #orders_district_chart { width: 100%; height: 370px; min-height: 370px; }
    .erp-order-page #tab-san_pham::before,
    .erp-order-page #tab-dia_diem::before {
        content: "Vuốt ngang để xem từng mục";
        display: block;
        margin: 0 0 4px;
        color: #68869a;
        font-size: 11px;
    }
    .erp-order-page #product_cates_chart:not(.no_data) { width: 1600px; min-width: 1600px; }
    .erp-order-page #orders_district_chart:not(.no_data) { width: 2500px; min-width: 2500px; }
    .erp-order-page #tab-phan_hoi { overflow-x: hidden; }
    .erp-order-page #tab-phan_hoi .wrap_reviews_report { width: 100%; min-width: 0; gap: 10px; padding: 0 0 8px; }
    .erp-order-page #tab-phan_hoi .reviews_summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        width: 100%;
    }
    .erp-order-page #tab-phan_hoi .reviews_summary > div {
        min-width: 0;
        gap: 5px;
        padding: 9px;
        border-radius: 10px;
        box-shadow: none;
    }
    .erp-order-page #tab-phan_hoi .card_total_reviews,
    .erp-order-page #tab-phan_hoi .card_avg_rate { min-height: 92px; }
    .erp-order-page #tab-phan_hoi .card_total_reviews .card_icon,
    .erp-order-page #tab-phan_hoi .card_avg_rate .card_icon { width: 30px; height: 30px; font-size: 18px; }
    .erp-order-page #tab-phan_hoi .reviews_summary .label { font-size: 12px; line-height: 1.2; text-align: center; }
    .erp-order-page #tab-phan_hoi .reviews_summary .value { font-size: 24px; }
    .erp-order-page #tab-phan_hoi .card_rate_distribution { grid-column: 1 / -1; }
    .erp-order-page #tab-phan_hoi .card_distribution_head .label { text-align: left; }
    .erp-order-page #tab-phan_hoi #reviews_distribution { gap: 4px; }
    .erp-order-page #tab-phan_hoi #reviews_distribution li { grid-template-columns: 50px minmax(0, 1fr) 35px; }
    .erp-order-page #tab-phan_hoi .filter_review_rate {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
        margin: 0;
    }
    .erp-order-page #tab-phan_hoi .filter_review_rate li { min-width: 0; margin: 0; }
    .erp-order-page #tab-phan_hoi .filter_review_rate li button {
        width: 100%;
        height: 36px;
        padding: 3px;
        font-size: 11px;
        line-height: 1.1;
    }
    .erp-order-page #tab-phan_hoi .wrap_table { max-width: 100%; }
}

/* Compact order dashboard: one metric card followed by a separate trend card. */
.erp-order-page .mobile-chart-caption { display: none; }
@media (max-width: 767px) {
    .erp-order-page .page_head .general_info .stats_section_title p { font-size: 19px; }
    .erp-order-page .page_head .general_info .stats_body {
        display: grid;
        grid-template-columns: 62px minmax(0, 1fr);
        align-items: center;
        gap: 6px 10px;
        width: 100%;
        margin-top: 8px;
        padding: 10px 12px;
        border: 1px solid rgb(255 255 255 / 26%);
        border-radius: 15px;
        background: rgb(255 255 255 / 9%);
    }
    .erp-order-page .page_head .general_info .stats_body .wrap_kpi {
        grid-column: 1;
        grid-row: 1;
        width: 62px;
        margin: 0;
    }
    .erp-order-page .page_head .general_info .stats_body .wrap_circle_percent { --circle-size: 62px; }
    .erp-order-page .page_head .general_info .stats_body .wrap_kpi_detail { display: contents; }
    .erp-order-page .page_head .general_info .stats_body .wrap_kpi_detail .kpi_detail {
        width: auto;
        min-width: 0;
        min-height: 0;
        border: 0;
        border-radius: 0;
        background: none;
    }
    .erp-order-page .page_head .general_info .stats_body .wrap_kpi_detail .kpi_detail:first-child {
        display: block;
        grid-column: 2;
        grid-row: 1;
        padding: 0;
    }
    .erp-order-page .page_head .general_info .stats_body .wrap_kpi_detail .kpi_detail:last-child {
        display: flex;
        grid-column: 1 / -1;
        grid-row: 2;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
        padding: 7px 0 0;
        border-top: 1px solid rgb(255 255 255 / 24%);
    }
    .erp-order-page .page_head .general_info .stats_body .kpi_detail_title {
        margin: 0 0 2px;
        font-size: 12px;
        line-height: 1.15;
        white-space: nowrap;
    }
    .erp-order-page .page_head .general_info .stats_body .kpi_detail_point {
        display: block;
        margin: 0;
        font-size: 20px;
        line-height: 1.15;
        letter-spacing: -.025em;
        white-space: nowrap;
        overflow-wrap: normal;
    }
    .erp-order-page .page_head .general_info .stats_body .kpi_detail:last-child .kpi_detail_point {
        font-size: 16px;
        text-align: right;
    }
    .erp-order-page .page_head .general_info .stats_body .kpi_filter_status {
        display: flex;
        grid-column: auto;
        flex-wrap: wrap;
        gap: 4px 9px;
        margin-top: 5px;
    }
    .erp-order-page .page_head .general_info .stats_body .kpi_filter_status > label {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        margin: 0;
        font-size: 11px;
        white-space: nowrap;
    }
    .erp-order-page .page_head .general_info .stats_section_right {
        width: 100%;
        margin: 8px 0 0;
        padding: 9px 10px 7px;
        overflow: hidden;
        border: 1px solid rgb(255 255 255 / 24%);
        border-radius: 15px;
        background: rgb(255 255 255 / 8%);
    }
    .erp-order-page .mobile-chart-caption {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
        color: #fff;
        font-size: 12px;
        line-height: 1.2;
    }
    .erp-order-page .mobile-chart-caption strong { font-size: 13px; font-weight: 700; }
    .erp-order-page .mobile-chart-caption span { opacity: .82; font-size: 10px; white-space: nowrap; }
    .erp-order-page .stats_section_right:has(#kpiChart.chart-empty) .mobile-chart-caption span { display: none; }
    .erp-order-page .mobile-chart-scroll {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .erp-order-page .mobile-chart-scroll::-webkit-scrollbar { display: none; }
    .erp-order-page .page_head .general_info .stats_section_right #kpiChart:not(.chart-empty) {
        width: max(560px, 100%) !important;
        height: 86px !important;
    }
    .erp-order-page .stats_section_right:has(#kpiChart:not(.chart-empty))::after {
        margin-top: 0;
        font-size: 10px;
        opacity: .85;
    }
    .erp-order-page .page_head .general_info .head_actions { margin-top: 6px; }
}

/* Order dashboard controls: compact touch targets with a clear selected state. */
@media (max-width: 767px) {
    .erp-order-page .page_head .general_info .stats_time_filter {
        gap: 8px;
        min-height: 34px;
    }
    .erp-order-page .page_head .general_info .stats_time_filter .datepicker {
        width: 124px;
        height: 34px;
        padding: 5px 24px 5px 9px;
        border: 1px solid rgb(255 255 255 / 30%);
        border-radius: 9px;
        background: rgb(255 255 255 / 9%);
        font-size: 12px;
    }
    .erp-order-page .page_head .general_info .stats_time_filter::before {
        left: 109px;
        border-left-width: 5px;
        border-right-width: 5px;
        border-top-width: 5px;
        pointer-events: none;
    }
    .erp-order-page .stats_time_filter .stats_by_days { margin: 0; }
    .erp-order-page .stats_time_filter .stats_by_days > label {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        min-height: 34px;
        margin: 0;
        padding: 4px 9px;
        border: 1px solid rgb(255 255 255 / 30%);
        border-radius: 9px;
        background: rgb(255 255 255 / 9%);
        color: #fff;
        font-size: 12px;
        line-height: 1.15;
        cursor: pointer;
    }
    .erp-order-page .stats_time_filter .stats_by_days > label:has(input:checked),
    .erp-order-page .page_head .general_info .stats_body .kpi_filter_status > label:has(input:checked) {
        border-color: rgb(255 255 255 / 75%);
        background: rgb(255 255 255 / 24%);
    }
    .erp-order-page .stats_by_days .checkbox,
    .erp-order-page .page_head .general_info .stats_body .kpi_filter_status .checkbox {
        --size: 16px;
        display: inline-block;
        flex: 0 0 16px;
        margin: 0;
    }
    .erp-order-page .stats_by_days .checkbox .icon_input,
    .erp-order-page .page_head .general_info .stats_body .kpi_filter_status .checkbox .icon_input {
        width: 16px;
        height: 16px;
        border: 1.5px solid #fff;
        border-radius: 4px;
        background: transparent;
        vertical-align: top;
    }
    .erp-order-page .stats_by_days .checkbox input:checked + .icon_input,
    .erp-order-page .page_head .general_info .stats_body .kpi_filter_status .checkbox input:checked + .icon_input {
        position: relative;
        background: #fff;
    }
    .erp-order-page .stats_by_days .checkbox input:checked + .icon_input::after,
    .erp-order-page .page_head .general_info .stats_body .kpi_filter_status .checkbox input:checked + .icon_input::after {
        content: "";
        position: absolute;
        top: 1px;
        left: 4px;
        width: 5px;
        height: 9px;
        border: solid #56a9e8;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }
    .erp-order-page .stats_by_days .checkbox input:focus-visible + .icon_input,
    .erp-order-page .page_head .general_info .stats_body .kpi_filter_status .checkbox input:focus-visible + .icon_input {
        outline: 2px solid #fff;
        outline-offset: 3px;
    }
    .erp-order-page .page_head .general_info .stats_body .kpi_filter_status {
        gap: 5px;
        margin-top: 5px;
    }
    .erp-order-page .page_head .general_info .stats_body .kpi_filter_status > label {
        gap: 5px;
        min-height: 30px;
        margin: 0;
        padding: 4px 7px;
        border: 1px solid rgb(255 255 255 / 30%);
        border-radius: 8px;
        background: rgb(255 255 255 / 9%);
        font-size: 12px;
        line-height: 1.1;
        cursor: pointer;
    }
    .erp-order-page .order-list-panel .mobile-status-toggle,
    .erp-order-page .order-list-panel .search_right .search_right_button {
        min-height: 35px;
        height: 35px;
    }
}

/* Let the blue header and the white order list be the two main surfaces. */
@media (max-width: 767px) {
    .erp-order-page .page_head .general_info .stats_body {
        padding: 8px 0 9px;
        border: 0;
        border-radius: 0;
        background: transparent;
    }
    .erp-order-page .page_head .general_info .stats_body .wrap_kpi_detail .kpi_detail:last-child {
        padding-top: 9px;
    }
    .erp-order-page .page_head .general_info .stats_body .kpi_filter_status {
        gap: 12px;
        margin-top: 3px;
    }
    .erp-order-page .page_head .general_info .stats_body .kpi_filter_status > label,
    .erp-order-page .page_head .general_info .stats_body .kpi_filter_status > label:has(input:checked) {
        min-height: 30px;
        padding: 5px 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }
    .erp-order-page .page_head .general_info .stats_body .kpi_filter_status > label:has(input:checked) {
        font-weight: 600;
    }
    .erp-order-page .page_head .general_info .stats_section_right {
        margin-top: 3px;
        padding: 11px 0 0;
        border: 0;
        border-top: 1px solid rgb(255 255 255 / 24%);
        border-radius: 0;
        background: transparent;
    }
    .erp-order-page .page_head .general_info .stats_section_right #kpiChart.chart-empty {
        justify-content: flex-start;
        height: 36px !important;
        border: 0;
        border-radius: 0;
    }
    .erp-order-page .stats_time_filter .stats_by_days > label,
    .erp-order-page .stats_time_filter .stats_by_days > label:has(input:checked) {
        padding: 4px 0 4px 9px;
        border: 0;
        border-radius: 0;
        background: transparent;
    }
    .erp-order-page .order-list-panel .search_right {
        padding-top: 5px;
        border-top: 1px solid #edf1f4;
    }
    .erp-order-page .order-list-panel .mobile-status-toggle,
    .erp-order-page .order-list-panel .search_right .search_right_button {
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    .erp-order-page .order-list-panel .mobile-status-toggle { padding: 5px 2px; }
    .erp-order-page .order-list-panel .search_right .filters {
        gap: 2px 12px;
        padding: 0 0 4px;
    }
    .erp-order-page .order-list-panel .search_right .filters li > label,
    .erp-order-page .order-list-panel .search_right .filters li > label:has(input:checked) {
        min-height: 34px;
        padding: 5px 1px;
        border: 0;
        border-radius: 0;
        background: transparent;
    }
    .erp-order-page .order-list-panel .search_right .filters li > label:has(input:checked) {
        color: #126caa;
        font-weight: 600;
    }
    .erp-order-page .order-list-panel .search_right .filters .checkbox {
        --size: 18px;
        flex: 0 0 18px;
    }
    .erp-order-page .order-list-panel .search_right .filters .checkbox .icon_input {
        width: 18px;
        height: 18px;
        border: 1.5px solid #819aab;
        border-radius: 4px;
        background: transparent;
        vertical-align: top;
    }
    .erp-order-page .order-list-panel .search_right .filters .checkbox input:checked + .icon_input {
        position: relative;
        border-color: #56a9e8;
        background: #56a9e8;
    }
    .erp-order-page .order-list-panel .search_right .filters .checkbox input:checked + .icon_input::after {
        content: "";
        position: absolute;
        top: 2px;
        left: 5px;
        width: 5px;
        height: 9px;
        border: solid #fff;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }
    .erp-order-page .order-list-panel .search_right .filters .checkbox input:focus-visible + .icon_input {
        outline: 2px solid #126caa;
        outline-offset: 2px;
    }
}

/* A selected city is exclusive; neither city selected means the combined total. */
.erp-order-page .mobile-report-label,
.finance_wrapper .mobile-report-label { display: none; }
.erp-order-page .wrap_kpi_detail .area-mode-control {
    display: flex;
    align-items: center;
    gap: 8px;
}
.erp-order-page .wrap_kpi_detail .area-mode-option {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 3px 0;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
}
.erp-order-page .wrap_kpi_detail .area-mode-option .area-choice-check {
    position: relative;
    display: inline-block;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    border: 1.5px solid #fff;
    border-radius: 4px;
    white-space: nowrap;
}
.erp-order-page .wrap_kpi_detail .area-mode-option[aria-pressed="true"] .area-choice-check {
    background: #fff;
}
.erp-order-page .wrap_kpi_detail .area-mode-option[aria-pressed="true"] .area-choice-check::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid #247ab8;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.erp-order-page .wrap_kpi_detail .area-mode-option:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
@media (min-width: 768px) {
    .erp-order-page .page_head .general_info .stats_body .wrap_kpi_detail {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 10px 18px;
    }
    .erp-order-page .page_head .general_info .stats_body .wrap_kpi_detail .kpi_detail {
        width: auto;
        min-width: 0;
    }
    .erp-order-page .wrap_kpi_detail .area-mode-control { grid-column: 1 / -1; }
    .erp-order-page .wrap_kpi_detail .area-mode-option { font-size: 14px; }
}
@media (max-width: 767px) {
    .erp-order-page .page_head .general_info { padding-bottom: 0; }
    .erp-order-page,
    .erp-order-page button,
    .erp-order-page input,
    body:has(.erp-order-page) #header button,
    body:has(.erp-order-page) #header a {
        font-family: "Montserrat", Arial, sans-serif;
    }
    .erp-order-page .page_head .general_info .stats_section_title {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
    }
    .erp-order-page .page_head .general_info .stats_section_title p {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        font-size: 19px;
        line-height: 1.25;
    }
    .erp-order-page .page_head .general_info .stats_time_filter {
        flex: 0 0 auto;
        width: auto;
        margin-left: auto;
        flex-wrap: nowrap;
    }
    .erp-order-page .page_head .general_info .stats_time_filter .datepicker {
        width: 112px;
        height: 36px;
        padding: 0 16px 0 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        font-size: 12px;
        font-weight: 600;
    }
    .erp-order-page .page_head .general_info .stats_time_filter::before { left: 98px; }
    .erp-order-page .page_head .general_info .stats_body {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 15px;
        padding: 9px 0 13px;
    }
    .erp-order-page .page_head .general_info .stats_body .wrap_kpi {
        flex: 0 0 80px;
        width: 80px;
    }
    .erp-order-page .page_head .general_info .stats_body .wrap_circle_percent { --circle-size: 80px; }
    .erp-order-page .page_head .general_info .stats_body .wrap_kpi_detail {
        display: grid;
        flex: 1 1 auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 8px;
        min-width: 0;
        padding: 0;
    }
    .erp-order-page .page_head .general_info .stats_body .wrap_kpi_detail .kpi_detail:first-child,
    .erp-order-page .page_head .general_info .stats_body .wrap_kpi_detail .kpi_detail:nth-child(2) {
        display: block;
        width: 100%;
        min-height: 0;
        padding: 0;
        border: 0;
        background: transparent;
    }
    .erp-order-page .page_head .general_info .stats_body .wrap_kpi_detail .kpi_detail:first-child {
        grid-column: 1;
        grid-row: 1;
    }
    .erp-order-page .page_head .general_info .stats_body .wrap_kpi_detail .kpi_detail:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }
    .erp-order-page .page_head .general_info .stats_body .kpi_detail_title {
        min-height: 28px;
        margin: 0 0 3px;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.18;
        white-space: normal;
    }
    .erp-order-page .page_head .general_info .stats_body .kpi_detail_point {
        font-size: clamp(13px, 3.8vw, 17px);
        font-weight: 700;
        letter-spacing: -.045em;
        line-height: 1.15;
    }
    .erp-order-page .page_head .general_info .stats_body .kpi_detail:nth-child(2) .kpi_detail_point {
        font-size: clamp(13px, 3.8vw, 17px);
        text-align: left;
    }
    .erp-order-page .page_head .general_info .stats_body .area-mode-control {
        grid-column: 1 / -1;
        grid-row: 2;
        margin-top: 8px;
    }
    .erp-order-page .page_head .general_info .stats_body .area-mode-option {
        min-height: 36px;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.15;
        white-space: nowrap;
    }
    .erp-order-page .stats_section_right::after { display: none !important; content: none !important; }
    .erp-order-page .mobile-chart-caption strong { font-size: 15px; line-height: 1.25; }
    body:has(.erp-order-page) #header .mobile-nav-toggle,
    body:has(.erp-order-page) #header .global-nav li a,
    .erp-order-page .page_head .general_info .head_actions .head_action button,
    .erp-order-page .order-list-panel .search_left.btn_on_field button,
    .erp-order-page .order-list-panel .search_right .search_right_button,
    .erp-order-page .order-list-panel .mobile-status-toggle,
    .erp-order-page #order_detail_report button,
    #popup-filter-orders button,
    #popup-filter-orders #filter_sellers li button,
    #popup-filter-orders #filter_chi_nhanh_ids li button,
    #popup-filter-orders #filter_channels li button,
    #popup-filter-orders #filter_provinces li button { border-radius: 999px; }
    .erp-order-page .page_head .general_info .head_actions {
        display: flex;
        justify-content: center;
        position: relative;
        top: 18px;
        right: auto;
        z-index: 5;
        margin: 8px 0 -18px;
    }
    .erp-order-page .page_head .general_info .head_actions .head_action {
        display: block;
        width: min(166px, 50vw);
    }
    .erp-order-page .page_head .general_info .head_actions .head_action button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 36px;
        margin: 0;
        padding: 0 9px 0 20px;
        border: 1px solid rgb(255 255 255 / 90%);
        border-radius: 999px;
        background: var(--gtt-primary-color);
        box-shadow: 0 3px 8px rgb(28 107 166 / 17%);
        color: #fff;
    }
    .erp-order-page .page_head .general_info .head_actions .head_action button::before {
        top: 11px;
        left: 13px;
        width: 7px;
        height: 7px;
        margin: 0;
        border: solid #fff;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }
    .erp-order-page .page_head .general_info .head_actions .head_action button.up { transform: none; }
    .erp-order-page .page_head .general_info .head_actions .head_action button.up::before {
        top: 16px;
        transform: rotate(225deg);
    }
    .erp-order-page .page_head .general_info .head_actions .mobile-report-label {
        display: inline;
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
    }
    .erp-order-page .page_head .general_info .head_actions .head_action_title { display: none; }
    .erp-order-page .page_body { margin-top: 52px; }
}
@media (max-width: 359px) {
    .erp-order-page .page_head .general_info .stats_section_title p { font-size: 17px; }
    .erp-order-page .page_head .general_info .stats_body { gap: 7px; }
    .erp-order-page .page_head .general_info .stats_body .wrap_kpi { flex-basis: 74px; width: 74px; }
    .erp-order-page .page_head .general_info .stats_body .wrap_circle_percent { --circle-size: 74px; }
    .erp-order-page .page_head .general_info .stats_body .wrap_kpi_detail { column-gap: 5px; }
    .erp-order-page .page_head .general_info .stats_body .kpi_detail_title { font-size: 11px; }
}

@media (max-width: 767px) {
    body button,
    body input[type="button"],
    body input[type="submit"],
    #header .global-nav li a { border-radius: 999px !important; }
}

/* Compact order cards and a shared status-chip language on mobile. */
.mobile_order_actions { display: none; }
.mobile_customer_name { display: none; }
.mobile-status-scroller { display: contents; }
.mobile-status-all, .mobile-status-more-item, .mobile-advanced-filter { display: none; }
.mobile-advanced-item { display: none; }
@media (max-width: 767px) {
    .erp-order-page .order-list-panel {
        overflow: visible;
        border-radius: 0;
        background: transparent;
        box-shadow: none !important;
    }
    .erp-order-page .order-list-panel .search_form {
        margin-bottom: 9px;
        padding: 9px;
        border-radius: 17px;
        background: #fff;
        box-shadow: 0 2px 11px rgb(25 61 88 / 7%);
    }
    .erp-order-page .order-list-panel .search_right {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 5px;
        min-width: 0;
        width: 100%;
        padding-top: 7px;
    }
    .erp-order-page .mobile-status-scroller {
        display: flex;
        align-items: center;
        gap: 5px;
        flex: 1;
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .erp-order-page .mobile-status-scroller::-webkit-scrollbar { display: none; }
    .erp-order-page .mobile-status-all,
    .erp-order-page .order-list-panel .search_right .filters li > label,
    .erp-order-page .order-list-panel .search_right .filters li > label:has(input:checked) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: auto;
        min-height: 32px;
        height: 32px;
        margin: 0;
        padding: 0 10px;
        border: 0;
        border-radius: 999px;
        background: #f3f6f9;
        color: #445565;
        font-size: 11px;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
        box-shadow: none;
    }
    .erp-order-page .mobile-status-all[aria-pressed="true"],
    .erp-order-page .order-list-panel .search_right .filters li > label:has(input:checked) {
        background: #3399e3;
        color: #fff;
    }
    .erp-order-page .order-list-panel .search_right .filters,
    .erp-order-page .order-list-panel .search_right .filters.mobile-filters-open {
        display: flex;
        align-items: center;
        gap: 5px;
        width: max-content;
        min-width: max-content;
        margin: 0;
        padding: 0;
    }
    .erp-order-page .order-list-panel .search_right .filters li { flex: none; }
    .erp-order-page .order-list-panel .search_right .filters .checkbox {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        overflow: hidden;
    }
    .erp-order-page .order-list-panel .search_right .search_right_button {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 34px;
        width: 34px;
        height: 32px;
        min-height: 32px;
        padding: 0;
        border-radius: 999px;
        background: #f3f6f9;
        color: #3399e3;
    }
    .erp-order-page .order-table-scroll #order-table #orders { display: grid; gap: 8px; }
    .erp-order-page #order-table #orders tr:not(.no_data) {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: auto auto auto auto;
        align-items: center;
        gap: 4px 6px;
        position: relative;
        padding: 12px 11px 10px;
        border: 0;
        border-radius: 15px;
        background: #fff;
        box-shadow: 0 2px 9px rgb(25 61 88 / 7%);
    }
    .erp-order-page #order-table #orders .order_stt,
    .erp-order-page #order-table #orders .order_danh_gia { display: none; }
    .erp-order-page #order-table #orders .order_don_hang {
        display: flex;
        align-items: flex-start;
        gap: 7px;
        grid-column: 1 / 3;
        grid-row: 1;
        min-width: 0;
    }
    .erp-order-page #order-table #orders .order_don_hang .order_no { font-size: 12px; font-weight: 700; white-space: nowrap; }
    .erp-order-page #order-table #orders .mobile_customer_name {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }
    .erp-order-page #order-table #orders .mobile_customer_name .customer_order_count,
    .erp-order-page #order-table #orders .mobile_customer_name .receiver_name {
        display: inline;
        max-width: 100%;
        white-space: normal;
        text-align: left;
    }
    .erp-order-page #order-table #orders .order_khach_hang { display: none !important; }
    .erp-order-page #order-table #orders .order_status {
        grid-column: 3;
        grid-row: 1;
        padding-right: 0;
        overflow: hidden;
        text-align: right;
    }
    .erp-order-page #order-table #orders .order_status .badge {
        display: inline-block;
        max-width: 100%;
        padding: 5px 6px;
        border-radius: 999px;
        font-size: 10px;
        line-height: 1.1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .erp-order-page #order-table #orders tr[data-order-id] { cursor: pointer; }
    .erp-order-page #order-table #orders tr[data-order-id]:active { background: #f4faff; }
    .erp-order-page #order-table #orders .nguoi_lam {
        display: flex;
        grid-column: 1;
        grid-row: 2 / 4;
        justify-content: flex-start;
        align-items: center;
        min-height: 42px;
    }
    .erp-order-page #order-table #orders .nguoi_lam p { width: 27px; height: 27px; }
    .erp-order-page #order-table #orders .order_ngay_dat_hang,
    .erp-order-page #order-table #orders .ngay_giao,
    .erp-order-page #order-table #orders .order_khu_vuc {
        display: block;
        color: #647282;
        font-size: 10px;
        white-space: nowrap;
    }
    .erp-order-page #order-table #orders .order_ngay_dat_hang { grid-column: 2; grid-row: 2; }
    .erp-order-page #order-table #orders .order_ngay_dat_hang::before { content: "▦ "; }
    .erp-order-page #order-table #orders .ngay_giao { grid-column: 3; grid-row: 2; }
    .erp-order-page #order-table #orders .ngay_giao::before { content: "→ "; }
    .erp-order-page #order-table #orders .order_khu_vuc { grid-column: 2 / 4; grid-row: 3; }
    .erp-order-page #order-table #orders .order_khu_vuc::before { content: "⌖ "; }
    .erp-order-page #order-table #orders .order_doanh_thu,
    .erp-order-page #order-table #orders .order_da_thanh_toan,
    .erp-order-page #order-table #orders .order_remain {
        display: block;
        grid-row: 4;
        min-width: 0;
        margin-top: 4px;
        padding-top: 7px;
        border-top: 1px solid #edf1f4;
        color: #171e2b;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.2;
        text-align: left;
        white-space: nowrap;
        letter-spacing: -.02em;
    }
    .erp-order-page #order-table #orders .order_doanh_thu { grid-column: 1; }
    .erp-order-page #order-table #orders .order_da_thanh_toan { grid-column: 2; }
    .erp-order-page #order-table #orders .order_remain { grid-column: 3; }
    .erp-order-page #order-table #orders .order_doanh_thu::before,
    .erp-order-page #order-table #orders .order_da_thanh_toan::before,
    .erp-order-page #order-table #orders .order_remain::before {
        display: block;
        margin-bottom: 3px;
        color: #8a96a2;
        font-size: 10px;
        font-weight: 400;
        letter-spacing: 0;
    }
    .erp-order-page #order-table #orders .order_doanh_thu::before { content: "Doanh thu"; }
    .erp-order-page #order-table #orders .order_da_thanh_toan::before { content: "Đã TT"; }
    .erp-order-page #order-table #orders .order_remain::before { content: "Còn lại"; }
    .erp-order-page #order-table #orders tr.no_data { padding: 13px; border-radius: 14px; background: #fff; }

    /* The design, production and customer-order lists use the same card surface.
       Keep their existing action buttons and nested work rows available. */
    :is(.wrap_danh_sach_don_hang, #popup-customer-orders) .wrap_table:has(> table > tbody.list_orders),
    #popup-customer-orders .wrap_table:has(> table > tbody#customer_orders) {
        overflow: visible;
        background: transparent;
        box-shadow: none !important;
    }
    :is(.wrap_danh_sach_don_hang, #popup-customer-orders) table:has(> tbody.list_orders),
    #popup-customer-orders table:has(> tbody#customer_orders) {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100%;
    }
    :is(.wrap_danh_sach_don_hang, #popup-customer-orders) table:has(> tbody.list_orders) > thead,
    #popup-customer-orders table:has(> tbody#customer_orders) > thead { display: none; }
    :is(.wrap_danh_sach_don_hang tbody.list_orders, #customer_orders) {
        display: grid;
        width: 100%;
        gap: 8px;
    }
    :is(.wrap_danh_sach_don_hang tbody.list_orders, #customer_orders) > tr.order_info_row,
    #customer_orders > tr:not(.no_data) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px 10px;
        width: 100%;
        min-width: 0;
        padding: 11px;
        border: 0;
        border-radius: 15px;
        background: #fff;
        box-shadow: 0 2px 9px rgb(25 61 88 / 7%);
    }
    :is(.wrap_danh_sach_don_hang tbody.list_orders, #customer_orders) > tr.order_info_row > td,
    #customer_orders > tr:not(.no_data) > td {
        display: block;
        width: auto;
        min-width: 0;
        max-width: none;
        padding: 0;
        border: 0;
        text-align: left;
        white-space: normal;
    }
    :is(.wrap_danh_sach_don_hang tbody.list_orders, #customer_orders) > tr > .stt { display: none !important; }
    :is(.wrap_danh_sach_don_hang tbody.list_orders, #customer_orders) > tr > .cong_viec { grid-column: 1 / -1; grid-row: 1; }
    :is(.wrap_danh_sach_don_hang tbody.list_orders, #customer_orders) > tr > .cong_viec .open_order_popup {
        max-width: 100%;
        color: #2585ca;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.35;
        text-align: left;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    :is(.wrap_danh_sach_don_hang tbody.list_orders, #customer_orders) > tr > .nguoi_lam { grid-column: 1; grid-row: 2; }
    :is(.wrap_danh_sach_don_hang tbody.list_orders, #customer_orders) > tr > .nguoi_lam {
        display: flex !important;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        gap: 2px;
        min-height: 28px;
    }
    :is(.wrap_danh_sach_don_hang tbody.list_orders, #customer_orders) > tr > .nguoi_lam p {
        width: 28px;
        height: 28px;
        margin: 0;
    }
    :is(.wrap_danh_sach_don_hang tbody.list_orders, #customer_orders) > tr > .nguoi_lam img {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        object-fit: cover;
    }
    :is(.wrap_danh_sach_don_hang tbody.list_orders, #customer_orders) > tr > .order_status { grid-column: 2; grid-row: 2; text-align: right; }
    :is(.wrap_danh_sach_don_hang tbody.list_orders, #customer_orders) > tr > .order_status .badge {
        display: inline-block;
        max-width: 100%;
        padding: 5px 9px;
        border-radius: 999px;
        font-size: 10px;
        white-space: normal;
    }
    :is(.wrap_danh_sach_don_hang tbody.list_orders, #customer_orders) > tr > .ngay_giao,
    :is(.wrap_danh_sach_don_hang tbody.list_orders, #customer_orders) > tr > .tinh_thanh {
        color: #677584;
        font-size: 11px;
    }
    :is(.wrap_danh_sach_don_hang tbody.list_orders, #customer_orders) > tr > .ngay_giao { grid-column: 1; grid-row: 3; }
    :is(.wrap_danh_sach_don_hang tbody.list_orders, #customer_orders) > tr > .ngay_giao::before { content: "Ngày giao: "; }
    :is(.wrap_danh_sach_don_hang tbody.list_orders, #customer_orders) > tr > .tinh_thanh { grid-column: 2; grid-row: 3; }
    :is(.wrap_danh_sach_don_hang tbody.list_orders, #customer_orders) > tr > .point {
        grid-column: 1 / -1;
        grid-row: 4;
        padding-top: 6px;
        border-top: 1px solid #edf1f4;
        color: #647282;
        font-size: 11px;
    }
    :is(.wrap_danh_sach_don_hang tbody.list_orders, #customer_orders) > tr > .point::before { content: "Điểm: "; }
    :is(.wrap_danh_sach_don_hang tbody.list_orders, #customer_orders) > tr.no_data {
        display: block;
        padding: 12px;
        border-radius: 15px;
        background: #fff;
    }
    :is(.wrap_danh_sach_don_hang tbody.list_orders, #customer_orders) > tr.no_data > td { display: block; width: 100%; text-align: center; }

    :is(#popup-finance-detail-report-orders, #popup-tax-report-blocking) .wrap_table:has(> table > tbody:is(#finance_detail_report_orders, #tax_blocking_orders_list)) {
        overflow: visible;
    }
    :is(#popup-finance-detail-report-orders, #popup-tax-report-blocking) table:has(> tbody:is(#finance_detail_report_orders, #tax_blocking_orders_list)) {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
    }
    :is(#popup-finance-detail-report-orders, #popup-tax-report-blocking) table:has(> tbody:is(#finance_detail_report_orders, #tax_blocking_orders_list)) > thead,
    #popup-finance-detail-report-orders table > colgroup { display: none; }
    :is(#finance_detail_report_orders, #tax_blocking_orders_list) { display: grid; gap: 8px; width: 100%; }
    :is(#finance_detail_report_orders, #tax_blocking_orders_list) > tr:not(.no_data) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px 10px;
        width: 100%;
        padding: 11px;
        border-radius: 15px;
        background: #fff;
        box-shadow: 0 2px 9px rgb(25 61 88 / 7%);
    }
    :is(#finance_detail_report_orders, #tax_blocking_orders_list) > tr > td {
        display: block;
        width: auto;
        min-width: 0;
        max-width: none;
        padding: 0;
        border: 0;
        font-size: 11px;
        text-align: left;
    }
    :is(#finance_detail_report_orders, #tax_blocking_orders_list) > tr > :is(.order_index, .stt) { display: none; }
    :is(#finance_detail_report_orders, #tax_blocking_orders_list) > tr > :is(.order_code, .order_don_hang) {
        grid-column: 1;
        grid-row: 1;
        color: #2585ca;
        font-size: 13px;
        font-weight: 700;
    }
    :is(#finance_detail_report_orders, #tax_blocking_orders_list) > tr > .nguoi_lam {
        display: flex;
        align-items: center;
        gap: 2px;
        grid-column: 2;
        grid-row: 1;
    }
    :is(#finance_detail_report_orders, #tax_blocking_orders_list) > tr > .nguoi_lam p { margin: 0; }
    :is(#finance_detail_report_orders, #tax_blocking_orders_list) > tr > .nguoi_lam img { width: 27px; height: 27px; border-radius: 50%; object-fit: cover; }
    :is(#finance_detail_report_orders, #tax_blocking_orders_list) > tr > :is(.order_ngay_nhan, .order_ngay_dat_hang) { grid-column: 1; grid-row: 2; }
    :is(#finance_detail_report_orders, #tax_blocking_orders_list) > tr > .order_ngay_hoan_tat { grid-column: 2; grid-row: 2; }
    #finance_detail_report_orders > tr > .order_ngay_nhan::before { content: "Nhận: "; }
    #finance_detail_report_orders > tr > .order_ngay_hoan_tat::before { content: "Hoàn tất: "; }
    #tax_blocking_orders_list > tr > .order_ngay_dat_hang::before { content: "Ngày tạo: "; }
    :is(#finance_detail_report_orders, #tax_blocking_orders_list) > tr > :is(.order_total, .order_doanh_thu, .order_ti_le, .order_status) {
        padding-top: 6px;
        border-top: 1px solid #edf1f4;
        font-weight: 700;
    }
    #finance_detail_report_orders > tr > .order_total::before { content: "Giá trị đơn: "; color: #8a96a2; font-weight: 400; }
    #finance_detail_report_orders > tr > .order_doanh_thu::before { content: "Doanh thu: "; color: #8a96a2; font-weight: 400; }
    #finance_detail_report_orders > tr > .order_ti_le::before { content: "Tỉ lệ: "; color: #8a96a2; font-weight: 400; }
    #tax_blocking_orders_list > tr > .order_total::before { content: "Tổng tiền: "; color: #8a96a2; font-weight: 400; }
    :is(#finance_detail_report_orders, #tax_blocking_orders_list) > tr.no_data { display: block; padding: 10px; background: #fff; border-radius: 15px; }
}

@media (max-width: 767px) {
    /* iOS Safari zooms focused fields whose text is smaller than 16px. */
    .erp-order-page .order-list-panel .search_left.btn_on_field #keyword,
    .erp-order-page .page_head .general_info .stats_time_filter .datepicker {
        font-size: 16px !important;
    }
    .erp-order-page .page_head .general_info .stats_time_filter .datepicker {
        width: 126px;
        letter-spacing: -.045em;
    }
    .erp-order-page .page_head .general_info .stats_time_filter::before { left: 112px; }
    .erp-order-page .page_head .general_info .stats_body .kpi_detail_point,
    .erp-order-page .page_head .general_info .stats_body .kpi_detail:nth-child(2) .kpi_detail_point {
        font-size: clamp(15px, 4.8vw, 18px);
    }
}
@media (max-width: 359px) {
    .erp-order-page .page_head .general_info .stats_time_filter .datepicker { width: 120px; }
    .erp-order-page .page_head .general_info .stats_time_filter::before { left: 106px; }
}
@media (max-width: 767px) {
    /* Restore the original blue mobile navigation. */
    #header {
        background: #208bcf;
        border-bottom: 1px solid rgb(255 255 255 / 32%);
        box-shadow: 0 3px 12px rgb(13 81 130 / 17%);
    }
    #header .global-nav { background: #208bcf; }
    .erp-order-page .page_head .general_info .stats_time_filter .datepicker {
        transform: scale(.9);
        transform-origin: right center;
    }
    .erp-summary-page .search_form input[type="text"]:not([readonly]) {
        font-size: 16px;
    }
    .air-datepicker:is(.order-stats-calendar, .erp-stats-calendar).-active- {
        left: calc(100vw - 10px) !important;
        right: auto !important;
        transform: translateX(-100%) !important;
        transition: none !important;
    }
    .air-datepicker:is(.order-stats-calendar, .erp-stats-calendar) .air-datepicker--pointer {
        left: auto !important;
        right: 16px !important;
    }
    .main_content_wrapper .page_head .general_info .stats_section_right #kpiChart.mobile-revenue-chart:not(.chart-empty) {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr);
        grid-template-rows: 23px 110px 18px;
        column-gap: 5px;
        width: 100% !important;
        height: 151px !important;
        margin-top: 5px;
        font-family: "Montserrat", Arial, sans-serif;
    }
    .main_content_wrapper .mobile-revenue-readout {
        grid-column: 1 / -1;
        grid-row: 1;
        justify-self: end;
        color: #fff;
        font-size: 10px;
        font-weight: 600;
        line-height: 18px;
    }
    .main_content_wrapper .mobile-revenue-scale {
        display: flex;
        grid-column: 1;
        grid-row: 2;
        flex-direction: column;
        justify-content: space-between;
        padding: 0 0 1px;
        color: rgb(255 255 255 / 78%);
        font-size: 9px;
        line-height: 1;
        white-space: nowrap;
    }
    .main_content_wrapper .mobile-revenue-plot {
        position: relative;
        grid-column: 2;
        grid-row: 2;
        min-width: 0;
        cursor: pointer;
        touch-action: manipulation;
    }
    .main_content_wrapper .mobile-revenue-plot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
    .main_content_wrapper .mobile-revenue-gridline {
        position: absolute;
        right: 0;
        left: 0;
        border-top: 1px solid rgb(255 255 255 / 25%);
        pointer-events: none;
    }
    .main_content_wrapper .mobile-revenue-bars {
        display: grid;
        position: absolute;
        inset: 0 1px;
        grid-template-columns: repeat(var(--days, 31), minmax(0, 1fr));
        align-items: end;
        gap: 2px;
        pointer-events: none;
    }
    .main_content_wrapper .mobile-revenue-bar {
        display: block;
        min-width: 0;
        border-radius: 3px 3px 0 0;
        background: rgb(255 255 255 / 70%);
    }
    .main_content_wrapper .mobile-revenue-bar.is-selected {
        background: #fff;
        box-shadow: 0 0 0 1px rgb(255 255 255 / 45%);
    }
    .main_content_wrapper .mobile-revenue-labels {
        display: flex;
        grid-column: 2;
        grid-row: 3;
        justify-content: space-between;
        padding-top: 5px;
        color: rgb(255 255 255 / 83%);
        font-size: 9px;
        line-height: 1;
    }
    .erp-summary-page .stats_section_right:has(#kpiChart.mobile-revenue-chart) {
        overflow: hidden;
    }
    .erp-summary-page .stats_section_right:has(#kpiChart.mobile-revenue-chart)::after {
        content: none;
        display: none;
    }
    .erp-summary-page .page_head .general_info .stats_section_right #kpiChart.mobile-revenue-chart:not(.chart-empty) {
        width: 100% !important;
    }
    .main_content_wrapper .mobile-revenue-bar.is-negative {
        background: #ffd6db;
    }
    .main_content_wrapper .mobile-revenue-bar.is-negative.is-selected {
        background: #fff0f2;
    }
    .erp-summary-page .page_head .general_info .stats_body .wrap_kpi_detail .kpi_detail {
        min-height: 0;
        padding: 3px 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }
    .erp-summary-page .stats_section_right #kpiChart.chart-empty {
        height: 30px !important;
        justify-content: flex-start;
        border: 0;
    }
    .erp-summary-page .page_head .general_info .stats_section_right:has(#kpiChart.chart-empty) {
        padding-top: 0;
    }

    /* Warehouse locations behave like the order filter strip. */
    #list_materials_table .search_right {
        display: flex;
        align-items: center;
        gap: 7px;
        width: 100%;
        height: 46px;
        min-height: 46px;
    }
    #slide_warehouses {
        flex: 1 1 auto;
        width: auto;
        height: 46px;
        min-width: 0;
        overflow: hidden;
    }
    #warehouse_filters {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
        width: 100%;
        height: 46px;
        min-height: 46px;
        margin: 0;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    #warehouse_filters::-webkit-scrollbar { display: none; }
    #warehouse_filters li.warehouse {
        flex: 0 0 auto;
        align-items: center;
        height: 36px;
        margin: 0;
        border: 1px solid #dceaf4;
        border-radius: 999px;
        background: #f5f9fc;
        color: #35617b;
        font-size: 12px;
    }
    #warehouse_filters li.warehouse.active {
        border-color: #2d9dd8;
        background: #2d9dd8;
        color: #fff;
    }
    #warehouse_filters li.warehouse > label {
        width: auto;
        min-width: 0;
        height: 34px;
        padding: 0 7px 0 11px;
        white-space: nowrap;
    }
    #warehouse_filters li.warehouse > button {
        position: static;
        flex: 0 0 28px;
        width: 28px;
        height: 34px;
        padding: 0 7px 0 0;
        color: inherit;
        font-size: 13px;
    }
    #list_materials_table .warehouse_filter_actions {
        position: static;
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
    }
    #list_materials_table .warehouse_filter_actions button {
        width: 40px;
        height: 40px;
        padding: 0;
        border-radius: 50%;
    }
    .warehouse_page #list_materials_table.materials_table {
        overflow-x: hidden;
        overflow-y: visible;
    }
    .warehouse_page #materials-table.table.md_head {
        display: block;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100%;
        background: transparent;
    }
    .warehouse_page #materials-table thead { display: none; }
    .warehouse_page #materials-table tbody { display: block; }
    .warehouse_page #materials-table tbody tr:not(.no_data) {
        display: grid;
        grid-template-columns: 58px repeat(2, minmax(0, 1fr));
        gap: 8px 10px;
        margin: 9px;
        padding: 11px;
        border: 1px solid #e8f0f5;
        border-radius: 15px;
        background: #fff;
        box-shadow: 0 2px 9px rgb(28 74 105 / 7%);
    }
    .warehouse_page #materials-table tbody tr:not(.no_data) > td {
        display: block;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100%;
        height: auto;
        padding: 0 !important;
        border: 0;
        text-align: left;
        font-family: "Montserrat", Arial, sans-serif;
        font-size: 12px;
    }
    .warehouse_page #materials-table td.material_stt { display: none !important; }
    .warehouse_page #materials-table td.material_image {
        grid-column: 1;
        grid-row: 1 / 3;
        align-self: center;
    }
    .warehouse_page #materials-table td.material_image img {
        width: 56px;
        height: 56px;
        border-radius: 9px;
        object-fit: cover;
    }
    .warehouse_page #materials-table td.material_name {
        grid-column: 2 / 4;
        grid-row: 1;
        align-self: end;
        color: #2c536b;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }
    .warehouse_page #materials-table td.material_name p { margin: 0; }
    .warehouse_page #materials-table td.material_unit {
        grid-column: 2;
        grid-row: 2;
        color: #6e8290;
    }
    .warehouse_page #materials-table td.material_price {
        grid-column: 3;
        grid-row: 2;
        justify-self: end;
        font-weight: 700;
    }
    .warehouse_page #materials-table td.material_tong_nhap,
    .warehouse_page #materials-table td.material_tong_xuat,
    .warehouse_page #materials-table td.material_tong_ton {
        grid-row: 3;
        padding-top: 7px !important;
        border-top: 1px solid #edf1f4;
        font-weight: 700;
    }
    .warehouse_page #materials-table td.material_tong_nhap { grid-column: 1; }
    .warehouse_page #materials-table td.material_tong_xuat { grid-column: 2; }
    .warehouse_page #materials-table td.material_tong_ton { grid-column: 3; }
    .warehouse_page #materials-table td.material_tong_nhap::before { content: "Nhập"; }
    .warehouse_page #materials-table td.material_tong_xuat::before { content: "Xuất"; }
    .warehouse_page #materials-table td.material_tong_ton::before { content: "Tồn"; }
    .warehouse_page #materials-table td:is(.material_tong_nhap, .material_tong_xuat, .material_tong_ton)::before {
        display: block;
        margin-bottom: 3px;
        color: #8296a4;
        font-size: 10px;
        font-weight: 500;
    }
    .warehouse_page #materials-table td.material_total {
        grid-column: 1 / 3;
        grid-row: 4;
        font-weight: 700;
    }
    .warehouse_page #materials-table td.material_total::before {
        content: "Giá trị tồn: ";
        color: #8296a4;
        font-weight: 500;
    }
    .warehouse_page #materials-table td.material_dinh_muc {
        grid-column: 3;
        grid-row: 4;
        align-self: center;
    }
    .warehouse_page #materials-table td.material_dinh_muc::before {
        content: "Định mức";
        display: block;
        margin-bottom: 3px;
        color: #8296a4;
        font-size: 10px;
    }
    .warehouse_page #materials-table td.material_dinh_muc input {
        width: 100%;
        height: 32px;
        padding: 4px 7px;
        font-size: 16px;
    }
    .warehouse_page #materials-table td.material_checkbox {
        grid-row: 5;
        display: flex !important;
        align-items: center;
        gap: 6px;
    }
    .warehouse_page #materials-table td.is_show_on_create_order { grid-column: 1 / 3; }
    .warehouse_page #materials-table td.is_free_on_create_order { grid-column: 3; }
    .warehouse_page #materials-table td.is_show_on_create_order::before { content: "Hiện trong đơn"; }
    .warehouse_page #materials-table td.is_free_on_create_order::before { content: "Free"; }
    .warehouse_page #materials-table td.material_actions {
        grid-column: 1 / -1;
        grid-row: 6;
        padding-top: 9px !important;
        border-top: 1px solid #edf1f4;
    }
    .warehouse_page #materials-table td.material_actions .wrap_button_xuat_nhap_kho {
        justify-content: space-between;
        width: 100%;
        max-width: 100%;
        gap: 5px;
    }
    .warehouse_page #materials-table td.material_actions .wrap_add_material_to_cart {
        min-width: 0;
        flex: 1 1 0;
    }
    .warehouse_page #materials-table td.material_actions .wrap_material_cart_item_quantity {
        width: 100%;
    }
    .warehouse_page #materials-table td.material_actions .wrap_material_cart_item_quantity input {
        width: 100%;
        max-width: none;
        font-size: 16px;
    }
    .warehouse_page #materials-table tbody tr.no_data {
        display: block;
        padding: 12px;
        text-align: center;
    }

    /* Finance requests use the same readable, stacked card rhythm as orders. */
    .finance_wrapper .main_content_left > .wrap_table {
        overflow-x: hidden;
        overflow-y: visible;
    }
    .finance_wrapper .yeu_cau_chi_phi_table.table.md_head {
        display: block;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100%;
        border: 0;
        background: transparent;
    }
    .finance_wrapper .yeu_cau_chi_phi_table thead { display: none; }
    .finance_wrapper .yeu_cau_chi_phi_table tbody { display: block; }
    .finance_wrapper .yeu_cau_chi_phi_table tbody tr:not(.no_data) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 7px 9px;
        margin: 8px 9px;
        padding: 12px;
        border: 1px solid #edf2f6;
        border-radius: 15px;
        background: #fff;
        box-shadow: 0 2px 9px rgb(28 74 105 / 7%);
    }
    .finance_wrapper .yeu_cau_chi_phi_table tbody tr:not(.no_data) > td {
        display: block;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100%;
        height: auto;
        padding: 0 !important;
        border: 0;
        text-align: left;
        font-family: "Montserrat", Arial, sans-serif;
        font-size: 12px;
    }
    .finance_wrapper .yeu_cau_chi_phi_table td.stt { display: none !important; }
    .finance_wrapper .yeu_cau_chi_phi_table td.ma_request { grid-column: 1; grid-row: 1; }
    .finance_wrapper .yeu_cau_chi_phi_table td.ma_request button {
        width: auto;
        color: #268fd1;
        font-size: 13px;
        font-weight: 700;
    }
    .finance_wrapper .yeu_cau_chi_phi_table td.yeu_cau_status {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }
    .finance_wrapper .yeu_cau_chi_phi_table td.yeu_cau_noi_dung {
        grid-column: 1 / -1;
        grid-row: 2;
        font-size: 13px;
        line-height: 1.35;
    }
    .finance_wrapper .yeu_cau_chi_phi_table td.nguoi_yeu_cau {
        grid-column: 1;
        grid-row: 3;
        justify-content: flex-start;
        align-items: center;
        gap: 2px;
    }
    .finance_wrapper .yeu_cau_chi_phi_table td.nguoi_yeu_cau p { margin: 0; }
    .finance_wrapper .yeu_cau_chi_phi_table td.ngay_request {
        grid-column: 1;
        grid-row: 4;
        color: #8595a1;
        font-size: 11px;
    }
    .finance_wrapper .yeu_cau_chi_phi_table td.point {
        grid-column: 2;
        grid-row: 4;
        justify-self: end;
        font-size: 13px;
        font-weight: 700;
    }
    .finance_wrapper .yeu_cau_chi_phi_table tbody tr.no_data {
        display: block;
        padding: 12px;
        text-align: center;
    }
    .finance_wrapper #list_funds .bubble_button {
        min-width: 0;
        overflow: hidden;
    }
    .finance_wrapper #list_funds .bubble_button_title,
    .finance_wrapper #list_funds .bubble_button_content {
        max-width: 100%;
        overflow-wrap: anywhere;
    }
    .finance_wrapper #list_funds .bubble_button_content {
        padding: 0 5px;
        font-size: clamp(13px, 4vw, 17px);
        line-height: 1.25;
    }

    /* The finance detail opens as a readable sheet instead of a desktop split view. */
    #popup-yeu-cau-detail .popup_container {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    #popup-yeu-cau-detail.wrap_popup .popup_head {
        position: relative;
        top: auto;
        right: auto;
        display: flex;
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 12px;
        width: 100%;
        min-height: 38px;
        padding: 0 3px 7px;
        border-bottom: 1px solid #e7edf2;
    }
    #popup-yeu-cau-detail.wrap_popup .popup_head button {
        display: flex;
        align-items: center;
        gap: 5px;
        width: auto;
        margin: 0;
        padding: 0 4px;
        font-size: 12px;
    }
    #popup-yeu-cau-detail.wrap_popup .popup_head .yeu_cau_action i,
    #popup-yeu-cau-detail.wrap_popup .close_popup i {
        display: inline-block;
        margin: 0;
        font-size: 21px;
    }
    #popup-yeu-cau-detail.wrap_popup .close_popup { order: 2; }
    #popup-yeu-cau-detail .popup_body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
    }
    #popup-yeu-cau-detail .popup_content_left_right.yeu_cau_detail {
        display: flex;
        flex-direction: column;
        gap: 14px;
        width: 100%;
        height: auto;
    }
    #popup-yeu-cau-detail .yeu_cau_detail .popup_content_left,
    #popup-yeu-cau-detail .yeu_cau_detail .popup_content_right {
        width: 100%;
        min-width: 0;
        height: auto;
        overflow: visible;
    }
    #popup-yeu-cau-detail .yeu_cau_detail .yeu_cau_title {
        margin: 2px 0 9px;
        text-align: left;
        font-size: 21px;
    }
    #popup-yeu-cau-detail .yeu_cau_detail .inline_label_value {
        width: 100%;
        margin: 0 0 12px;
        padding: 9px 11px;
    }
    #popup-yeu-cau-detail .yeu_cau_detail .inline_label_value ul li {
        display: grid;
        grid-template-columns: 43% minmax(0, 1fr);
        gap: 6px;
        align-items: start;
        padding: 3px 0;
        font-size: 11px;
        line-height: 1.35;
    }
    #popup-yeu-cau-detail .yeu_cau_detail .inline_label_value ul li .label,
    #popup-yeu-cau-detail .yeu_cau_detail .inline_label_value ul li p {
        width: auto;
        min-width: 0;
        margin: 0;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: anywhere;
    }
    #popup-yeu-cau-detail .yeu_cau_detail .inline_label_value ul li p:last-child {
        text-align: right;
    }
    #popup-yeu-cau-detail .yeu_cau_detail .yeu_cau_status_log { height: auto; }
    #popup-yeu-cau-detail .yeu_cau_detail .yeu_cau_status_log_title {
        margin: 0 0 8px;
        text-align: left;
        font-size: 13px;
    }
    #popup-yeu-cau-detail .yeu_cau_detail .yeu_cau_status_log_detail {
        width: 100%;
        max-height: none;
        margin: 0;
        padding: 0;
        overflow: visible;
    }
    #popup-yeu-cau-detail .yeu_cau_detail .yeu_cau_status_log_detail::before,
    #popup-yeu-cau-detail .yeu_cau_detail .yeu_cau_status_log_detail li::before,
    #popup-yeu-cau-detail .yeu_cau_detail .yeu_cau_status_log_detail li::after {
        display: none;
    }
    #popup-yeu-cau-detail .yeu_cau_detail .yeu_cau_status_log_detail li {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr);
        gap: 5px;
        align-items: center;
        min-height: 34px;
        font-size: 11px;
        line-height: 1.3;
    }
    #popup-yeu-cau-detail .yeu_cau_detail .yeu_cau_status_log_detail :is(.yeu_cau_status_log_label, .yeu_cau_status_log_time) {
        width: auto;
        min-width: 0;
        margin: 0;
        padding: 0;
        text-align: left;
        overflow-wrap: anywhere;
    }
    #popup-yeu-cau-detail .yeu_cau_detail .yeu_cau_status_log_detail .yeu_cau_status_log_avatar {
        position: static;
        width: 24px;
        height: 24px;
        margin: 0;
    }
    #popup-yeu-cau-detail .yeu_cau_detail #yeu_cau_actions .list_yeu_cau_actions {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 10px;
        margin: 0 0 10px;
    }
    #popup-yeu-cau-detail .yeu_cau_detail #yeu_cau_actions .list_yeu_cau_actions li button {
        margin: 0 6px;
        font-size: 12px;
    }
    #popup-yeu-cau-detail #wrap_yeu_cau_body {
        height: auto;
        min-width: 0;
    }
    #popup-yeu-cau-detail .dinh_khoan_items_table {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }
    #popup-yeu-cau-detail .dinh_khoan_items_table table {
        display: block;
        width: 100%;
        min-width: 0;
    }
    #popup-yeu-cau-detail .dinh_khoan_items_table thead { display: none; }
    #popup-yeu-cau-detail .dinh_khoan_items_table tbody { display: block; }
    #popup-yeu-cau-detail .dinh_khoan_items_table tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 5px 8px;
        padding: 9px 0;
        border-top: 1px solid #e8eff4;
    }
    #popup-yeu-cau-detail .dinh_khoan_items_table tbody tr td {
        display: block;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100%;
        padding: 0 !important;
        border: 0;
        text-align: left;
        font-size: 12px;
        overflow-wrap: anywhere;
    }
    #popup-yeu-cau-detail .dinh_khoan_items_table td.yeu_cau_index { display: none !important; }
    #popup-yeu-cau-detail .dinh_khoan_items_table td.yeu_cau_noi_dung { grid-column: 1 / -1; }
    #popup-yeu-cau-detail .dinh_khoan_items_table td.yeu_cau_item_price {
        grid-column: 1;
        font-weight: 700;
    }
    #popup-yeu-cau-detail .dinh_khoan_items_table td.yeu_cau_item_name { grid-column: 2; }
    #popup-yeu-cau-detail .popup_content_right_foot { position: static; width: 100%; }
    #popup-yeu-cau-detail .popup_content_right_foot .wrap_comment,
    #popup-yeu-cau-detail .popup_content_right_foot .wrap_comment_box,
    #popup-yeu-cau-detail .popup_content_right_foot .media_box {
        width: 100%;
        max-width: 100%;
    }
    #popup-yeu-cau-detail textarea { font-size: 16px; }
}

/* Shared mobile type scale and card language for the ERP lists. */
@media (max-width: 767px) {
    .main_content_wrapper {
        --erp-mobile-title-size: 14px;
        --erp-mobile-meta-size: 12px;
        --erp-mobile-money-size: 13px;
        --erp-mobile-caption-size: 10px;
        --erp-mobile-card-radius: 15px;
        --erp-mobile-card-shadow: 0 2px 9px rgb(25 61 88 / 7%);
    }

    /* Orders: give the three amounts and the district enough visual weight. */
    .erp-order-page #order-table #orders .order_don_hang .order_no,
    .erp-order-page #order-table #orders .mobile_customer_name {
        font-size: var(--erp-mobile-title-size);
        line-height: 1.35;
    }
    .erp-order-page #order-table #orders .order_khu_vuc {
        font-size: 12.5px;
        font-weight: 500;
        line-height: 1.4;
        white-space: normal;
    }
    .erp-order-page #order-table #orders .order_ngay_dat_hang,
    .erp-order-page #order-table #orders .ngay_giao { font-size: 11px; }
    .erp-order-page #order-table #orders .order_doanh_thu,
    .erp-order-page #order-table #orders .order_da_thanh_toan,
    .erp-order-page #order-table #orders .order_remain {
        font-size: var(--erp-mobile-money-size);
        line-height: 1.3;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .erp-order-page #order-table #orders .order_doanh_thu::before,
    .erp-order-page #order-table #orders .order_da_thanh_toan::before,
    .erp-order-page #order-table #orders .order_remain::before {
        font-size: var(--erp-mobile-caption-size);
    }

    /* Design and production: retain every work action while matching order cards. */
    :is(.wrap_danh_sach_don_hang tbody.list_orders, #customer_orders) > tr.order_info_row,
    #customer_orders > tr:not(.no_data) {
        border-radius: var(--erp-mobile-card-radius);
        box-shadow: var(--erp-mobile-card-shadow);
    }
    :is(.wrap_danh_sach_don_hang tbody.list_orders, #customer_orders) > tr > .cong_viec .open_order_popup {
        font-size: var(--erp-mobile-title-size);
    }
    :is(.wrap_danh_sach_don_hang tbody.list_orders, #customer_orders) > tr > .tinh_thanh {
        font-size: 12.5px;
        font-weight: 500;
    }
    :is(.wrap_danh_sach_don_hang tbody.list_orders, #customer_orders) > tr > .ngay_giao {
        font-size: var(--erp-mobile-meta-size);
    }
    :is(.wrap_danh_sach_don_hang tbody.list_orders, #customer_orders) > tr > .point {
        font-size: var(--erp-mobile-money-size);
        font-weight: 700;
    }
    :is(.wrap_danh_sach_don_hang tbody.list_orders, #customer_orders) > tr > .order_status .badge {
        font-size: 11px;
    }

    /* Warehouse: use the same sizes for product name, stock and money. */
    .warehouse_page #materials-table tbody tr:not(.no_data) > td.material_name { font-size: var(--erp-mobile-title-size); }
    .warehouse_page #materials-table tbody tr:not(.no_data) > td.material_unit { font-size: var(--erp-mobile-meta-size); }
    .warehouse_page #materials-table tbody tr:not(.no_data) > td:is(.material_price, .material_tong_nhap, .material_tong_xuat, .material_tong_ton, .material_total) {
        font-size: var(--erp-mobile-money-size);
        line-height: 1.35;
    }
    .warehouse_page #materials-table tbody tr:not(.no_data) {
        border-radius: var(--erp-mobile-card-radius);
        box-shadow: var(--erp-mobile-card-shadow);
    }

    /* Finance: separate the filters from the request cards. */
    .finance_wrapper .main_content_left > .wrap_table {
        overflow: visible;
        border-radius: 0;
        background: transparent;
        box-shadow: none !important;
    }
    .finance_wrapper .main_content_left > .wrap_table > .search_form {
        margin: 0 0 10px;
        padding: 11px;
        border-radius: var(--erp-mobile-card-radius);
        background: #fff;
        box-shadow: var(--erp-mobile-card-shadow);
    }
    .finance_wrapper .yeu_cau_chi_phi_table tbody tr:not(.no_data) {
        margin: 0 0 8px;
        border: 0;
        border-radius: var(--erp-mobile-card-radius);
        box-shadow: var(--erp-mobile-card-shadow);
    }
    .finance_wrapper .yeu_cau_chi_phi_table td.ma_request button { font-size: var(--erp-mobile-title-size); }
    .finance_wrapper .yeu_cau_chi_phi_table tbody tr:not(.no_data) > td.yeu_cau_noi_dung { font-size: var(--erp-mobile-title-size); }
    .finance_wrapper .yeu_cau_chi_phi_table tbody tr:not(.no_data) > td.ngay_request { font-size: var(--erp-mobile-meta-size); }
    .finance_wrapper .yeu_cau_chi_phi_table tbody tr:not(.no_data) > td.point { font-size: var(--erp-mobile-money-size); }

    /* Finance and HRM filters follow the order status pills. */
    :is(.finance_wrapper, .hrm_index) .search_form .search_right {
        display: flex;
        align-items: center;
        gap: 6px;
    }
    :is(.finance_wrapper, .hrm_index) .search_form .search_right .filters {
        display: flex;
        flex: 1 1 auto;
        flex-wrap: nowrap;
        gap: 6px;
        min-width: 0;
        margin: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }
    :is(.finance_wrapper, .hrm_index) .search_form .search_right .filters::-webkit-scrollbar { display: none; }
    :is(.finance_wrapper, .hrm_index) .search_form .search_right .filters li { flex: 0 0 auto; }
    :is(.finance_wrapper, .hrm_index) .search_form .search_right .filters li > label {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        padding: 0 11px;
        border: 0;
        border-radius: 999px;
        background: #f3f6f9;
        color: #445565;
        font-size: 11px;
        font-weight: 600;
        white-space: nowrap;
    }
    :is(.finance_wrapper, .hrm_index) .search_form .search_right .filters li > label:has(input:checked) {
        background: #3399e3;
        color: #fff;
    }
    :is(.finance_wrapper, .hrm_index) .search_form .search_right .filters .checkbox {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        overflow: hidden;
    }
    :is(.finance_wrapper, .hrm_index) .search_form .search_right .search_right_button {
        flex: 0 0 34px;
        width: 34px;
        height: 32px;
        min-height: 32px;
        padding: 0;
        border-radius: 999px;
        background: #f3f6f9;
        color: #3399e3;
    }

    /* HRM: keep staff names readable even on cards for inactive staff. */
    .hrm_index #cham-congs.list_round_buttons { gap: 8px; padding: 0; }
    .hrm_index #cham-congs.list_round_buttons li {
        width: calc((100% - 8px) / 2);
        margin: 0;
    }
    .hrm_index #cham-congs.list_round_buttons li button {
        min-height: 157px;
        padding: 0 0 9px;
        border: 0;
        border-radius: var(--erp-mobile-card-radius) !important;
        background: #fff;
        box-shadow: var(--erp-mobile-card-shadow);
        color: #263642;
        font-size: var(--erp-mobile-title-size);
        font-weight: 700;
        line-height: 1.3;
        overflow: hidden;
        overflow-wrap: anywhere;
    }
    .hrm_index #cham-congs.list_round_buttons li button img {
        height: 108px;
        margin-bottom: 7px;
        border-radius: 15px 15px 0 0;
    }
    .hrm_index #cham-congs.list_round_buttons li button.toggle_active:not(.active)::after {
        height: 108px;
        border-radius: 15px 15px 0 0;
        background: rgb(0 0 0 / 30%);
    }
    .hrm_index #cham-congs.list_round_buttons li button .list_round_button_sticker.active {
        display: block;
        position: static;
        width: max-content;
        min-width: 0;
        height: auto;
        margin: 6px auto 0;
        padding: 3px 10px;
        transform: none;
        border-radius: 999px;
        background: #f3f6f9;
        color: #52677a;
        font-size: var(--erp-mobile-meta-size);
        font-weight: 600;
        line-height: 1.4;
    }
}

/* Give every dashboard header the same mobile hierarchy as Orders. */
@media (max-width: 767px) {
    .erp-summary-page:not(.erp-order-page) .page_head .general_info {
        padding-top: 15px;
        padding-bottom: 18px;
    }
    .erp-summary-page:not(.erp-order-page),
    .erp-summary-page:not(.erp-order-page) button,
    .erp-summary-page:not(.erp-order-page) input {
        font-family: "Montserrat", Arial, sans-serif;
    }
    .erp-summary-page:not(.erp-order-page) .page_head .general_info .stats_section_title {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        min-height: 42px;
    }
    .erp-summary-page:not(.erp-order-page) .page_head .general_info .stats_section_title > p {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        color: #fff;
        font-size: 19px;
        font-weight: 700;
        line-height: 1.25;
        white-space: nowrap;
    }
    .erp-summary-page:not(.erp-order-page) .page_head .general_info .stats_time_filter {
        position: relative;
        display: block;
        flex: 0 0 121px;
        width: 121px;
        min-height: 36px;
        margin: 0 0 0 auto;
    }
    .erp-summary-page:not(.erp-order-page) .page_head .general_info .stats_time_filter .datepicker {
        display: block;
        width: 145px;
        height: 42px;
        margin-left: -24px;
        padding: 0 19px 0 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: #fff;
        font-size: 16px;
        font-weight: 600;
        text-align: right;
        transform: scale(.83);
        transform-origin: right center;
        cursor: pointer;
    }
    .erp-summary-page:not(.erp-order-page) .page_head .general_info .stats_time_filter::before {
        top: 21px;
        right: 0;
        left: auto;
        border-left-width: 5px;
        border-right-width: 5px;
        border-top-width: 5px;
        pointer-events: none;
    }
    .erp-summary-page:not(.erp-order-page) .stats_time_filter .stats_by_days {
        display: none;
    }
    .erp-summary-page:not(.erp-order-page) .stats_time_filter .stats_by_days > label {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        min-height: 25px;
        margin: 0;
        color: #fff;
        font-size: 11px;
        font-weight: 500;
        line-height: 1.2;
        white-space: nowrap;
    }
    .erp-summary-page:not(.erp-order-page) .stats_time_filter .stats_by_days .checkbox,
    .erp-summary-page:not(.erp-order-page) .stats_body .kpi_filter_status .checkbox {
        --size: 17px;
        display: inline-block;
        flex: 0 0 17px;
        width: 17px;
        height: 17px;
        margin: 0;
    }
    .erp-summary-page:not(.erp-order-page) .stats_time_filter .stats_by_days .icon_input,
    .erp-summary-page:not(.erp-order-page) .stats_body .kpi_filter_status .icon_input {
        width: 17px;
        height: 17px;
        border: 1.5px solid #fff;
        border-radius: 4px;
        background: transparent;
        vertical-align: top;
    }
    .erp-summary-page:not(.erp-order-page) .stats_time_filter .stats_by_days input:checked + .icon_input,
    .erp-summary-page:not(.erp-order-page) .stats_body .kpi_filter_status input:checked + .icon_input {
        position: relative;
        background: #fff;
    }
    .erp-summary-page:not(.erp-order-page) .stats_time_filter .stats_by_days input:checked + .icon_input::after,
    .erp-summary-page:not(.erp-order-page) .stats_body .kpi_filter_status input:checked + .icon_input::after {
        content: "";
        position: absolute;
        top: 1px;
        left: 4px;
        width: 5px;
        height: 10px;
        border: solid #56a9e8;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }
    .erp-summary-page:not(.erp-order-page) .page_head .general_info .wrap_stats_section {
        gap: 0;
    }
    .erp-summary-page:not(.erp-order-page) .page_head .general_info .stats_body {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 0;
        margin-top: 15px;
        padding: 9px 0 13px;
    }
    .erp-summary-page:not(.erp-order-page) .page_head .general_info .stats_body .wrap_kpi {
        flex: 0 0 80px;
        width: 80px;
        margin: 0;
    }
    .erp-summary-page:not(.erp-order-page) .page_head .general_info .stats_body .wrap_circle_percent {
        --circle-size: 80px;
    }
    .erp-summary-page:not(.erp-order-page) .page_head .general_info .stats_body .wrap_kpi_detail {
        display: grid;
        flex: 1 1 auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 8px;
        width: auto;
        min-width: 0;
        padding: 0;
    }
    .erp-summary-page:not(.erp-order-page) .page_head .general_info .stats_body .wrap_kpi_detail .kpi_detail {
        display: block;
        width: 100%;
        min-width: 0;
        min-height: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }
    .erp-summary-page:not(.erp-order-page) .page_head .general_info .stats_body .kpi_detail_title {
        min-height: 27px;
        margin: 0 0 3px;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.18;
    }
    .erp-summary-page:not(.erp-order-page) .page_head .general_info .stats_body .kpi_detail_point {
        display: block;
        margin: 0;
        font-size: clamp(13px, 3.8vw, 17px);
        font-weight: 700;
        line-height: 1.18;
        letter-spacing: -.035em;
        overflow-wrap: anywhere;
    }
    .erp-summary-page:not(.erp-order-page) .page_head .general_info .stats_body .kpi_sub_detail {
        margin: 6px 0 0;
        font-size: 11px;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }
    .erp-summary-page:not(.erp-order-page) .page_head .general_info .stats_body .kpi_filter_status {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 8px;
        margin-top: 6px;
    }
    .erp-summary-page:not(.erp-order-page) .page_head .general_info .stats_body .kpi_filter_status > label {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        margin: 0;
        font-size: 11px;
        font-weight: 500;
        line-height: 1.2;
    }
    /* Match the Orders controls: place status toggles on a row below both KPI values. */
    .erp-summary-page:not(.erp-order-page) .page_head .general_info .stats_body .wrap_kpi_detail:has(.kpi_filter_status) {
        position: relative;
        padding-bottom: 30px;
    }
    .erp-summary-page:not(.erp-order-page) .page_head .general_info .stats_body .kpi_filter_status {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        min-height: 30px;
        margin: 0;
        align-items: center;
    }
    .erp-summary-page:not(.erp-order-page) .page_head .general_info .stats_body .wrap_kpi_detail:has(.kpi_detail:first-child .kpi_filter_status) .kpi_detail .kpi_filter_status {
        width: calc(50% - 4px);
    }
    .erp-summary-page:not(.erp-order-page) .page_head .general_info .stats_body .wrap_kpi_detail:has(.kpi_detail:first-child .kpi_filter_status) .kpi_detail:nth-child(2) .kpi_filter_status {
        left: calc(50% + 4px);
    }
    .erp-summary-page:not(.erp-order-page) .page_head .general_info .stats_body .kpi_filter_status > label {
        min-height: 30px;
        padding: 5px 0;
        gap: 5px;
        font-size: 11px;
        line-height: 1.15;
        white-space: nowrap;
    }
    .erp-summary-page:not(.erp-order-page) .page_head .general_info .stats_body .kpi_filter_status > label:has(input:checked) {
        font-weight: 600;
    }
    .erp-summary-page:not(.erp-order-page) .page_head .general_info .stats_body .kpi_filter_status .checkbox,
    .erp-summary-page:not(.erp-order-page) .page_head .general_info .stats_body .kpi_filter_status .icon_input {
        --size: 16px;
        flex: 0 0 16px;
        width: 16px;
        height: 16px;
    }
    .erp-summary-page:not(.erp-order-page) .page_head .general_info .stats_section_right {
        width: 100%;
        margin: 4px 0 0;
        padding: 11px 0 0;
        border: 0;
        border-top: 1px solid rgb(255 255 255 / 24%);
        border-radius: 0;
        background: transparent;
    }
    .erp-summary-page:not(.erp-order-page) .page_head .general_info .stats_section_right::before {
        content: "Thống kê theo ngày";
        display: block;
        width: 100%;
        margin: 0 0 6px;
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.25;
    }
    .erp-summary-page:not(.erp-order-page):has(#is_stats_by_days:not(:checked)) .page_head .general_info .stats_section_right::before {
        content: "Thống kê theo tháng";
    }
    .erp-summary-page:not(.erp-order-page) .stats_section_right::after {
        display: none !important;
        content: none !important;
    }
    .finance_wrapper .page_head .general_info .head_actions {
        display: flex;
        justify-content: center;
        position: relative;
        top: 18px;
        right: auto;
        z-index: 5;
        margin: 8px 0 -18px;
    }
    .finance_wrapper .page_head .general_info .head_actions .head_action {
        display: block;
        width: min(166px, 50vw);
    }
    .finance_wrapper .page_head .general_info .head_actions .head_action button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 36px;
        margin: 0;
        padding: 0 9px 0 20px;
        border: 1px solid rgb(255 255 255 / 90%);
        border-radius: 999px;
        background: var(--gtt-primary-color);
        box-shadow: 0 3px 8px rgb(28 107 166 / 17%);
        color: #fff;
    }
    .finance_wrapper .page_head .general_info .head_actions .head_action button::before {
        top: 11px;
        left: 13px;
        width: 7px;
        height: 7px;
        margin: 0;
        border: solid #fff;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }
    .finance_wrapper .page_head .general_info .head_actions .head_action button.up { transform: none; }
    .finance_wrapper .page_head .general_info .head_actions .head_action button.up::before {
        top: 16px;
        transform: rotate(225deg);
    }
    .finance_wrapper .page_head .general_info .head_actions .mobile-report-label {
        display: inline;
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
    }
    .finance_wrapper .page_head .general_info .head_actions .head_action_title { display: none; }
    .finance_wrapper .page_body { margin-top: 52px; }

    /* Keep the expanded finance report usable inside a phone viewport. */
    .finance_wrapper #finance_detail_report {
        width: 100%;
        min-width: 0;
        padding: 14px 12px 18px;
    }
    .finance_wrapper #finance_detail_report .detail_report_tabs {
        position: static;
        display: flex;
        justify-content: center;
        width: 100%;
        margin: 0 0 10px;
        transform: none;
    }
    .finance_wrapper #finance_detail_report .detail_report_tabs button {
        padding: 5px 14px;
        border: 1px solid #d7eaf8;
        border-radius: 8px;
        color: #287ab3;
        font-size: 12px;
    }
    .finance_wrapper #finance_detail_report .detail_report_tabs button.active {
        border-color: var(--gtt-primary-color);
        background: var(--gtt-primary-color);
        color: #fff;
    }
    .finance_wrapper #finance_detail_report .detail_report_tabs button::after { display: none; }
    .finance_wrapper #finance_detail_report .report_types {
        justify-content: flex-start;
        gap: 7px;
        width: 100%;
        min-width: 0;
        padding: 0 0 18px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .finance_wrapper #finance_detail_report .report_types::-webkit-scrollbar { display: none; }
    .finance_wrapper #finance_detail_report .report_types li {
        flex: 0 0 auto;
        margin: 0;
    }
    .finance_wrapper #finance_detail_report .report_types li button[data-action="get-finance-detail-report"] {
        height: 34px;
        padding: 0 9px;
        font-size: 12px;
        white-space: nowrap;
    }
    .finance_wrapper #finance_detail_report .detail_report_title {
        margin: 2px 0 12px;
        font-size: 19px;
        line-height: 1.3;
    }
    .finance_wrapper #finance_detail_report .detail_report_content {
        display: block;
        min-height: 0;
    }
    .finance_wrapper #finance_detail_report .detail_report_content .detail_report_left,
    .finance_wrapper #finance_detail_report .detail_report_content .detail_report_right {
        width: 100%;
        min-width: 0;
        margin: 0;
    }
    .finance_wrapper #finance_detail_report .detail_report_content .detail_report_right { margin-top: 18px; }
    .finance_wrapper #finance_detail_report .detail_report_content ul li .label {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        white-space: normal;
    }
    .finance_wrapper #finance_detail_report .detail_report_content ul li .value {
        flex: 0 0 auto;
        width: auto;
        max-width: 50%;
        margin-left: 8px;
        overflow-wrap: anywhere;
    }
    .finance_wrapper #finance_detail_report .detail_report_content ul li .percent {
        flex: 0 0 auto;
        width: auto;
        margin-left: 8px;
    }
    .finance_wrapper #finance_detail_report .wrap_update_qr_thanh_toan_image {
        position: relative;
        right: auto;
        bottom: auto;
        width: 120px;
        height: 120px;
        margin: 16px auto 0;
    }
    .finance_wrapper #finance_detail_report_thue .wrap_finance_detail_report_thue_left,
    .finance_wrapper #finance_detail_report_thue .wrap_finance_detail_report_thue_right {
        width: 100%;
        min-width: 0;
    }
    .finance_wrapper #finance_detail_report_thue #tax_report_chi_nhanh_chart {
        max-width: 100%;
        margin: 0 auto;
    }
}
@media (max-width: 359px) {
    .erp-summary-page:not(.erp-order-page) .page_head .general_info .stats_section_title > p { font-size: 17px; }
    .erp-summary-page:not(.erp-order-page) .page_head .general_info .stats_body { gap: 7px; }
    .erp-summary-page:not(.erp-order-page) .page_head .general_info .stats_body .wrap_kpi { flex-basis: 74px; width: 74px; }
    .erp-summary-page:not(.erp-order-page) .page_head .general_info .stats_body .wrap_circle_percent { --circle-size: 74px; }
    .erp-summary-page:not(.erp-order-page) .page_head .general_info .stats_body .wrap_kpi_detail { column-gap: 5px; }
}

/* Repeated buyers: readable names and a compact order-count badge. */
@media (max-width: 767px) {
    .erp-order-page #order-table #orders .order_don_hang:has(.mobile_customer_name .customer_order_count) {
        flex-wrap: nowrap;
        gap: 7px;
    }
    .erp-order-page #order-table #orders .mobile_customer_name:has(.customer_order_count) {
        flex: 1 1 auto;
        width: auto;
        font-weight: 700;
    }
    .erp-order-page #order-table #orders .mobile_customer_name .customer_order_count {
        display: inline;
        width: auto;
        max-width: none;
        height: auto;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: inherit;
        font: inherit;
        text-align: left;
        white-space: normal;
        box-shadow: none;
    }
    .erp-order-page #order-table #orders .mobile_customer_name .customer_order_count .receiver_name {
        display: inline;
        min-width: 0;
        max-width: none;
        margin: 0;
        overflow-wrap: anywhere;
        text-transform: lowercase;
    }
    .erp-order-page #order-table #orders .mobile_customer_name .customer_order_count .order_count,
    :is(.wrap_danh_sach_don_hang, #popup-customer-orders) .customer_order_count .order_count {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        position: static;
        width: 25px;
        height: 25px;
        min-width: 25px;
        margin: 0;
        padding: 0;
        border: 1px solid #55acee;
        border-radius: 50%;
        background: #eef8ff;
        color: #2585ca;
        font-size: 10px;
        font-weight: 700;
        line-height: 1.2;
        white-space: nowrap;
    }
    .erp-order-page #order-table #orders .order_status { align-self: start; }
    .erp-order-page #order-table #orders .mobile_customer_name .customer_order_count .order_count {
        margin-left: 4px;
        vertical-align: text-top;
    }
}

/* Finance mobile navigation and readable fund balances. */
.finance_wrapper .finance-mobile-sections { display: none; }
@media (max-width: 767px) {
    .finance_wrapper .finance-mobile-sections {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        position: sticky;
        top: 0;
        z-index: 20;
        margin: -8px 0 5px;
        padding: 8px 0 7px;
        background: #f3f4f5;
    }
    .finance_wrapper .finance-mobile-section {
        min-width: 0;
        min-height: 38px;
        padding: 6px 5px;
        border: 1px solid #d9e5ee;
        border-radius: 9px !important;
        background: #fff;
        color: #3c5870;
        font-family: "Montserrat", Arial, sans-serif;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.2;
        text-align: center;
        box-shadow: 0 1px 5px rgb(28 74 105 / 5%);
    }
    .finance_wrapper .finance-mobile-section[aria-selected="true"] {
        border-color: #55acee;
        background: #55acee;
        color: #fff;
    }
    .finance_wrapper.finance-mobile-show-funds .main_content_left,
    .finance_wrapper.finance-mobile-show-requests .main_content_right { display: none; }
    .finance_wrapper .main_content_right .main_content_right_content {
        padding: 0;
        border-radius: 0;
        background: transparent;
    }
    .finance_wrapper .main_content_right .filter_orders_by_area ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        overflow: hidden;
        border: 1px solid #d9e5ee;
        border-radius: 9px;
        background: #eaf3f9;
    }
    .finance_wrapper .main_content_right .filter_orders_by_area ul li,
    .finance_wrapper .main_content_right .filter_orders_by_area ul li.active:last-child {
        width: auto;
        min-width: 0;
        margin: 0 !important;
    }
    .finance_wrapper .main_content_right .filter_orders_by_area ul li button,
    .finance_wrapper .main_content_right .filter_orders_by_area ul li.active button {
        width: 100%;
        min-height: 36px;
        padding: 4px 6px;
        border: 0;
        border-radius: 0;
        font-family: "Montserrat", Arial, sans-serif;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.2;
    }
    .finance_wrapper .main_content_right .filter_orders_by_area ul li button {
        background: transparent;
        color: #397396;
    }
    .finance_wrapper .main_content_right .filter_orders_by_area ul li.active button {
        background: #55acee;
        color: #fff;
    }
    .finance_wrapper .main_content_right .filter_orders_by_area ul li button,
    .finance_wrapper .main_content_right .filter_orders_by_area ul li.active button {
        border-radius: 0 !important;
    }
    .finance_wrapper .main_content_right .wrap_tab_togglers {
        margin: 6px 0 4px;
    }
    .finance_wrapper .main_content_right .wrap_tab_togglers ul {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        flex-wrap: nowrap;
        justify-content: stretch;
        overflow: visible;
        border-bottom: 1px solid #dce6ee;
    }
    .finance_wrapper .main_content_right .wrap_tab_togglers ul::-webkit-scrollbar { display: none; }
    .finance_wrapper .main_content_right .wrap_tab_togglers ul li {
        min-width: 0;
        padding: 0;
    }
    .finance_wrapper .main_content_right .wrap_tab_togglers ul li::after { display: none; }
    .finance_wrapper .main_content_right .wrap_tab_togglers ul li button {
        display: block;
        width: 100%;
        min-height: 38px;
        padding: 7px 3px;
        border: 0;
        border-bottom: 2px solid transparent;
        border-radius: 0 !important;
        background: transparent;
        box-shadow: none;
        color: #61798b;
        font-family: "Montserrat", Arial, sans-serif;
        font-size: 11px;
        font-weight: 600;
        white-space: nowrap;
    }
    .finance_wrapper .main_content_right .wrap_tab_togglers ul li.active button {
        border-radius: 0 !important;
        background: transparent;
        border-bottom-color: #55acee;
        color: #238bd0;
    }
    .finance_wrapper .main_content_right .wrap_tab_togglers ul li button:focus-visible,
    .finance_wrapper .main_content_right .filter_orders_by_area button:focus-visible,
    .finance_wrapper .finance-mobile-section:focus-visible {
        outline: 2px solid #187fc4;
        outline-offset: -2px;
    }
    .finance_wrapper #list_funds {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        margin-top: 8px;
    }
    .finance_wrapper #list_funds .bubble_button,
    .finance_wrapper #list_funds .bubble_button:nth-child(2n+2) {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
        width: 100%;
        min-width: 0;
        min-height: 0;
        margin: 0;
        padding: 11px 80px 11px 13px;
        overflow: visible;
        border: 1px solid #e3edf3;
        border-left: 3px solid #55acee;
        border-radius: 11px;
        background: #fff;
        color: #263d50;
        box-shadow: 0 2px 9px rgb(28 74 105 / 6%);
    }
    .finance_wrapper #list_funds .bubble_button_title {
        max-width: 100%;
        color: #268fd1;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.3;
        text-align: left;
    }
    .finance_wrapper #list_funds .bubble_button_content {
        max-width: 100%;
        margin: 0;
        padding: 0;
        color: #1c3041;
        font-size: 19px;
        font-weight: 700;
        line-height: 1.25;
        text-align: left;
        overflow-wrap: anywhere;
    }
    .finance_wrapper #list_funds .bubble_button_content::after {
        content: "đ";
        margin-left: 2px;
        font-size: 12px;
        font-weight: 600;
    }
    .finance_wrapper #list_funds .bubble_button_subcontent {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 2px 7px;
        margin: 5px 0 0;
        color: #61798b;
        font-size: 10px;
        line-height: 1.3;
        text-align: left;
    }
    .finance_wrapper #list_funds .bubble_button_subcontent::before {
        content: attr(data-label);
    }
    .finance_wrapper #list_funds .bubble_button_subcontent span {
        display: inline;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: #385b71;
        font-size: 11px;
        font-weight: 700;
    }
    .finance_wrapper #list_funds .bubble_button_subcontent span::after {
        content: "đ";
        margin-left: 1px;
    }
    .finance_wrapper #list_funds .bubble_button_subcontent.is-negative span {
        color: #c25d5b;
    }
    .finance_wrapper #list_funds .bubble_button_actions {
        top: 10px;
        right: 9px;
        left: auto;
        display: flex;
        gap: 5px;
        width: auto;
    }
    .finance_wrapper #list_funds .bubble_button_actions button {
        position: static;
        width: 32px;
        height: 32px;
        border-radius: 8px !important;
        background: #eef5fa;
        color: #4388b8;
        font-size: 12px;
    }
    .finance_wrapper #list_funds .bubble_button.add_new {
        min-height: 48px;
        padding: 0;
        border: 1px dashed #98c9eb;
        background: #f6fbff;
        box-shadow: none;
    }
    .finance_wrapper #list_funds .bubble_button.add_new button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        color: #268fd1;
        font-size: 15px;
        font-weight: 700;
    }
    .finance_wrapper #list_funds .bubble_button.add_new button::after {
        content: "Thêm quỹ";
        font-size: 12px;
    }
    .finance_wrapper #tab-fund .list_thong_bao_work {
        margin-top: 12px;
        padding: 14px;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 3px 12px rgb(28 74 105 / 8%);
    }
    .finance_wrapper #tab-fund .thong_bao_work_title {
        font-size: 14px;
        font-weight: 700;
        line-height: 1.35;
    }
    #popup-fund-log .popup_container.lg_container {
        display: flex;
        flex-direction: column;
        height: auto;
        max-height: calc(100dvh - 24px);
        min-height: min(360px, calc(100dvh - 24px));
        padding: 14px 12px;
        overflow: hidden;
    }
    #popup-fund-log .popup_head {
        flex: 0 0 auto;
        padding: 0 28px 10px;
        border-bottom: 1px solid #e3ebf1;
    }
    #popup-fund-log .popup_head .popup_head_title h3 {
        margin: 0;
        font-size: 17px;
        line-height: 1.35;
    }
    #popup-fund-log .popup_body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
    }
    #popup-fund-log .wrap_tab_togglers { margin: 9px 0 10px; }
    #popup-fund-log .wrap_tab_togglers ul { justify-content: flex-start; }
    #popup-fund-log .wrap_tab_togglers li button {
        min-height: 34px;
        padding: 5px 10px;
        font-size: 12px;
    }
    #popup-fund-log #tab-fund-request-logs .popup_section { margin-top: 0; }
    #popup-fund-log .popup_section,
    #popup-fund-log .wrap_table { width: 100%; min-width: 0; }
    #popup-fund-log .wrap_table {
        padding: 0;
        overflow: visible;
        border: 0;
        box-shadow: none;
    }
    #popup-fund-log .search_form {
        margin: 0 0 9px;
        padding: 0;
        gap: 6px;
    }
    #popup-fund-log .search_form .search_left,
    #popup-fund-log .search_form .search_left input {
        width: 100%;
        min-width: 0;
    }
    #popup-fund-log .search_form .search_right {
        display: flex;
        align-items: center;
        gap: 7px;
        width: 100%;
    }
    #popup-fund-log .search_form .search_right .filters {
        display: flex;
        flex: 1 1 auto;
        flex-wrap: nowrap;
        gap: 9px;
        min-width: 0;
        margin: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }
    #popup-fund-log .search_form .search_right .filters::-webkit-scrollbar { display: none; }
    #popup-fund-log .search_form .search_right .filters li {
        flex: 0 0 auto;
        margin: 0;
        font-size: 12px;
    }
    #popup-fund-log .search_form .search_right .search_right_button {
        flex: 0 0 34px;
        width: 34px;
        height: 34px;
        margin: 0;
    }
    #popup-fund-log .yeu_cau_chi_phi_table.table.md_head {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100%;
        border: 0;
    }
    #popup-fund-log .yeu_cau_chi_phi_table thead { display: none; }
    #popup-fund-log .yeu_cau_chi_phi_table tbody { display: block; }
    #popup-fund-log .yeu_cau_chi_phi_table tbody tr:not(.no_data) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 7px 9px;
        width: 100%;
        margin: 0 0 8px;
        padding: 11px;
        border: 1px solid #e5edf3;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 2px 8px rgb(28 74 105 / 6%);
    }
    #popup-fund-log .yeu_cau_chi_phi_table tbody tr:not(.no_data) > td {
        display: block;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100%;
        height: auto;
        padding: 0 !important;
        border: 0;
        font-family: "Montserrat", Arial, sans-serif;
        font-size: 12px;
        line-height: 1.35;
        text-align: left;
        overflow-wrap: anywhere;
    }
    #popup-fund-log .yeu_cau_chi_phi_table td.stt { display: none !important; }
    #popup-fund-log #fund-requests-logs-table td.ma_request { grid-column: 1; grid-row: 1; }
    #popup-fund-log #fund-requests-logs-table td.yeu_cau_status { grid-column: 2; grid-row: 1; }
    #popup-fund-log #fund-requests-logs-table td.yeu_cau_noi_dung { grid-column: 1 / -1; grid-row: 2; }
    #popup-fund-log #fund-requests-logs-table td.nguoi_yeu_cau { grid-column: 1; grid-row: 3; }
    #popup-fund-log #fund-requests-logs-table td.ngay_request { grid-column: 1; grid-row: 4; }
    #popup-fund-log #fund-requests-logs-table td.point {
        grid-column: 2;
        grid-row: 4;
        justify-self: end;
        font-weight: 700;
    }
    #popup-fund-log #fund-logs-table td.td_favorite { grid-column: 2; grid-row: 1; justify-self: end; }
    #popup-fund-log #fund-logs-table td.nguoi_yeu_cau { grid-column: 1; grid-row: 1; }
    #popup-fund-log #fund-logs-table td.yc_noi_dung { grid-column: 1 / -1; grid-row: 2; }
    #popup-fund-log #fund-logs-table td.ngay_update { grid-column: 1; grid-row: 3; }
    #popup-fund-log #fund-logs-table td.amount { grid-column: 2; grid-row: 3; justify-self: end; font-weight: 700; }
    #popup-fund-log #fund-logs-table td.remain { grid-column: 1; grid-row: 4; }
    #popup-fund-log #fund-logs-table td.remain::before { content: "Số dư: "; color: #708597; }
    #popup-fund-log #fund-logs-table td.yeu_cau_status { grid-column: 2; grid-row: 4; justify-self: end; }
    #popup-fund-log .yeu_cau_chi_phi_table tbody tr.no_data {
        display: block;
        width: 100%;
        padding: 14px 8px;
        text-align: center;
    }
    #popup-fund-log .pagination { margin: 8px 0 0; }
}

@media print { .mobile-nav-toggle { display: none !important; } }

/* Finance and production: use the same quiet mobile card language as Orders. */
@media (max-width: 767px) {
    .finance_wrapper .finance-mobile-sections {
        gap: 0;
        margin: -8px 0 10px;
        padding: 0;
        border-bottom: 1px solid #e1e9ef;
        background: #f3f4f5;
    }
    .finance_wrapper .finance-mobile-section,
    .finance_wrapper .finance-mobile-section[aria-selected="true"] {
        min-height: 43px;
        border: 0;
        border-bottom: 2px solid transparent;
        border-radius: 0 !important;
        background: transparent;
        box-shadow: none;
        color: #607487;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0;
    }
    .finance_wrapper .finance-mobile-section[aria-selected="true"] {
        border-bottom-color: #55acee;
        color: #258fce;
    }
    .finance_wrapper .main_content_right .filter_orders_by_area ul {
        gap: 6px;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
    }
    .finance_wrapper .main_content_right .filter_orders_by_area ul li button,
    .finance_wrapper .main_content_right .filter_orders_by_area ul li.active button {
        min-height: 34px;
        border: 0;
        border-radius: 9px !important;
        background: #eef3f7;
        color: #4f6678;
        font-size: 11px;
        font-weight: 600;
    }
    .finance_wrapper .main_content_right .filter_orders_by_area ul li.active button {
        background: #55acee;
        color: #fff;
    }
    .finance_wrapper .main_content_right .wrap_tab_togglers { margin: 7px 0 5px; }
    .finance_wrapper .main_content_right .wrap_tab_togglers ul {
        display: flex;
        gap: 5px;
        overflow-x: auto;
        border: 0;
        scrollbar-width: none;
    }
    .finance_wrapper .main_content_right .wrap_tab_togglers ul li { flex: 1 0 auto; }
    .finance_wrapper .main_content_right .wrap_tab_togglers ul li button,
    .finance_wrapper .main_content_right .wrap_tab_togglers ul li.active button {
        min-height: 32px;
        padding: 6px 9px;
        border: 0;
        border-radius: 9px !important;
        background: #eef3f7;
        color: #526879;
        font-size: 11px;
        line-height: 1.2;
    }
    .finance_wrapper .main_content_right .wrap_tab_togglers ul li.active button {
        background: #e4f2fc;
        color: #258fce;
    }
    .finance_wrapper #list_funds { gap: 8px; margin-top: 11px; }
    .finance_wrapper #list_funds .bubble_button,
    .finance_wrapper #list_funds .bubble_button:nth-child(2n+2) {
        gap: 2px;
        padding: 12px;
        border: 0;
        border-radius: var(--erp-mobile-card-radius);
        box-shadow: var(--erp-mobile-card-shadow);
    }
    .finance_wrapper #list_funds .bubble_button_title,
    .finance_wrapper #list_funds .bubble_button_content { padding-right: 72px; }
    .finance_wrapper #list_funds .bubble_button_title {
        color: #238dcf;
        font-size: var(--erp-mobile-title-size);
        font-weight: 700;
        line-height: 1.32;
    }
    .finance_wrapper #list_funds .bubble_button_content {
        padding-left: 0;
        color: #1f3445;
        font-size: 18px;
        line-height: 1.3;
    }
    .finance_wrapper #list_funds .bubble_button_subcontent {
        justify-content: space-between;
        gap: 4px 8px;
        width: 100%;
        margin-top: 8px;
        padding-top: 7px;
        border-top: 1px solid #edf1f4;
        color: #81919d;
        font-size: var(--erp-mobile-caption-size);
    }
    .finance_wrapper #list_funds .bubble_button_subcontent span {
        color: #344d60;
        font-size: var(--erp-mobile-meta-size);
    }
    .finance_wrapper #list_funds .bubble_button_actions { top: 8px; right: 8px; }
    .finance_wrapper #list_funds .bubble_button_actions button {
        width: 32px;
        height: 32px;
        border: 0;
        border-radius: 8px !important;
        background: transparent;
        color: #7092a7;
    }
    .finance_wrapper #list_funds .bubble_button_actions button:active { background: #eef5fa; }
    .finance_wrapper #list_funds .bubble_button.add_new {
        min-height: 43px;
        border: 1px dashed #a8cfeb;
        border-radius: var(--erp-mobile-card-radius);
        background: #f7fbfe;
    }

    .erp-production-page .wrap_filter_roles_san_xuat_mua_ngoai_setting {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        margin: 2px 0 12px !important;
    }
    .erp-production-page .wrap_filter_roles_san_xuat_mua_ngoai_setting .wrap_tab_togglers {
        width: 100%;
        min-width: 0;
        margin: 0;
        overflow-x: auto;
        text-align: left;
        scrollbar-width: none;
    }
    .erp-production-page .wrap_filter_roles_san_xuat_mua_ngoai_setting .wrap_tab_togglers ul {
        display: flex;
        justify-content: flex-start;
        gap: 6px;
        width: max-content;
    }
    .erp-production-page .wrap_filter_roles_san_xuat_mua_ngoai_setting .wrap_tab_togglers li,
    .erp-production-page .wrap_filter_roles_san_xuat_mua_ngoai_setting .wrap_tab_togglers li.active:last-child {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
        width: auto !important;
        margin: 0 !important;
        padding: 0;
        border-radius: 9px;
        background: #eef3f7;
    }
    .erp-production-page .wrap_filter_roles_san_xuat_mua_ngoai_setting .wrap_tab_togglers li.active { background: #55acee; }
    .erp-production-page .wrap_filter_roles_san_xuat_mua_ngoai_setting .wrap_tab_togglers li::after { display: none; }
    .erp-production-page .wrap_filter_roles_san_xuat_mua_ngoai_setting .wrap_tab_togglers li button[data-action="order-san-xuat-tab-toggler"],
    .erp-production-page .wrap_filter_roles_san_xuat_mua_ngoai_setting .wrap_tab_togglers li.active button[data-action="order-san-xuat-tab-toggler"] {
        width: auto !important;
        min-height: 34px;
        padding: 5px 9px;
        border: 0;
        border-radius: 9px 0 0 9px !important;
        background: transparent;
        color: #526879;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.2;
    }
    .erp-production-page .wrap_filter_roles_san_xuat_mua_ngoai_setting .wrap_tab_togglers li.active button[data-action="order-san-xuat-tab-toggler"] { color: #fff; }
    .erp-production-page .wrap_filter_roles_san_xuat_mua_ngoai_setting .wrap_tab_togglers li button[data-action="edit-san-xuat-mua-ngoai-setting-popup"] {
        position: static !important;
        top: auto !important;
        right: auto !important;
        width: 28px !important;
        flex: 0 0 28px;
        min-height: 34px;
        padding: 0;
        border: 0;
        border-radius: 0 9px 9px 0 !important;
        background: transparent;
        color: #47748e;
        font-size: 12px !important;
    }
    .erp-production-page #xuong_san_xuat_tab_togglers .active [data-action="edit-san-xuat-mua-ngoai-setting-popup"] { right: auto !important; }
    .erp-production-page .wrap_filter_roles_san_xuat_mua_ngoai_setting .wrap_tab_togglers li.active button[data-action="edit-san-xuat-mua-ngoai-setting-popup"] { color: #fff; }
    .erp-production-page .wrap_filter_roles_san_xuat_mua_ngoai_setting .wrap_xuong_san_xuat_actions { margin: 0; }
    .erp-production-page .wrap_filter_roles_san_xuat_mua_ngoai_setting [data-action="create-xuong-san-xuat"] {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 4px;
        min-height: 34px;
        padding: 5px 8px;
        border: 1px solid #bcdcf2;
        border-radius: 9px !important;
        background: #fff;
        color: #238dcf;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.2;
    }
    .erp-production-page .wrap_danh_sach_don_hang tbody.list_orders > tr.order_info_row > .cong_viec,
    .erp-production-page .wrap_ke_hoach_giao_hang tbody.list_orders > tr.order_info_row > .cong_viec {
        display: flex;
        align-items: flex-start;
        gap: 5px;
        text-align: left;
    }
    .erp-production-page tbody.list_orders > tr .cong_viec .wrap_cong_viec_actions.include_sticker { padding-left: 0; }
    .erp-production-page tbody.list_orders > tr .cong_viec .wrap_cong_viec_actions {
        flex: 0 1 auto;
        align-items: flex-start;
        flex-wrap: wrap;
        min-width: 0;
        gap: 3px;
        text-align: left;
    }
    .erp-production-page tbody.list_orders > tr .cong_viec .row_orders_action {
        position: static;
        order: 2;
        flex: 0 0 auto;
        transform: none;
    }
    .erp-production-page tbody.list_orders > tr .cong_viec .open_order_popup {
        max-width: 100% !important;
        padding: 0;
        text-align: left;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
    .erp-production-page tbody.list_orders > tr .cong_viec .cong_viec_customer_name {
        color: #253b4d;
        font-weight: 700;
    }
    .erp-production-page tbody.list_orders > tr .cong_viec .customer_order_count { flex: 0 0 auto; padding: 0; }

    .erp-production-page .wrap_ke_hoach_giao_hang .wrap_table {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none !important;
    }
    .erp-production-page .wrap_ke_hoach_giao_hang .search_form {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 8px;
        margin: 0 0 8px;
        padding: 10px 11px;
        border-radius: var(--erp-mobile-card-radius);
        background: #fff;
        box-shadow: var(--erp-mobile-card-shadow);
    }
    .erp-production-page .wrap_ke_hoach_giao_hang .search_form .search_left {
        display: flex;
        align-items: center;
        flex: 1 1 170px;
        min-width: 0;
        gap: 3px;
    }
    .erp-production-page .wrap_ke_hoach_giao_hang .ke_hoach_ngay_giao_hang {
        min-width: 0;
        padding: 0 !important;
        color: #2b4b60;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.35;
    }
    .erp-production-page .wrap_ke_hoach_giao_hang .ke_hoach_ngay_giao_hang .thu_giao_hang {
        display: none;
    }
    .erp-production-page .wrap_ke_hoach_giao_hang .ke_hoach_addr_giao_hang > button { margin: 0; padding: 2px; }
    .erp-production-page .wrap_ke_hoach_giao_hang .ke_hoach_addr_giao_hang .ke_hoach_addr_giao_hangs {
        width: min(310px, calc(100vw - 42px));
        max-height: 65vh;
        overflow-y: auto;
    }
    .erp-production-page .wrap_ke_hoach_giao_hang .search_form .search_right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex: 0 1 auto;
        gap: 4px;
        width: auto;
        min-width: 0;
        margin: 0;
        line-height: 1.2;
    }
    .erp-production-page .wrap_ke_hoach_giao_hang .search_form .search_right .ke_hoach_giao_action,
    .erp-production-page .wrap_ke_hoach_giao_hang .wrap_table .search_form .search_right .ke_hoach_expand_toggle {
        position: static;
        width: 29px;
        height: 29px;
        padding: 0;
        border: 0;
        border-radius: 8px !important;
        background: #eef4f8;
        color: #3f7797;
        font-size: 14px;
        line-height: 1;
    }
    .erp-production-page .wrap_ke_hoach_giao_hang .ke_hoach_total_point {
        margin-left: 2px;
        color: #324e62;
        font-size: 11px;
        font-weight: 700;
        white-space: nowrap;
    }
    .erp-production-page .wrap_ke_hoach_giao_hang table:has(> tbody.list_orders) {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100%;
        border: 0;
        background: transparent;
    }
    .erp-production-page .wrap_ke_hoach_giao_hang table:has(> tbody.list_orders) > thead { display: none; }
    .erp-production-page .wrap_ke_hoach_giao_hang tbody.list_orders { display: grid; width: 100%; gap: 8px; }
    .erp-production-page .wrap_ke_hoach_giao_hang tbody.list_orders > tr.order_info_row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px 10px;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 11px;
        border: 0;
        border-radius: var(--erp-mobile-card-radius);
        background: #fff;
        box-shadow: var(--erp-mobile-card-shadow);
    }
    .erp-production-page .wrap_ke_hoach_giao_hang tbody.list_orders > tr.order_info_row > td {
        display: block;
        width: auto !important;
        min-width: 0;
        max-width: none;
        height: auto;
        padding: 0 !important;
        border: 0;
        text-align: left;
        white-space: normal;
    }
    .erp-production-page .wrap_ke_hoach_giao_hang tbody.list_orders > tr > .stt { display: none !important; }
    .erp-production-page .wrap_ke_hoach_giao_hang tbody.list_orders > tr > .cong_viec { grid-column: 1 / -1; grid-row: 1; }
    .erp-production-page .wrap_ke_hoach_giao_hang tbody.list_orders > tr > .nguoi_lam {
        display: flex !important;
        align-items: center;
        grid-column: 1;
        grid-row: 2;
        gap: 2px;
        min-height: 28px;
    }
    .erp-production-page .wrap_ke_hoach_giao_hang tbody.list_orders > tr > .nguoi_lam p { width: 28px; height: 28px; margin: 0; }
    .erp-production-page .wrap_ke_hoach_giao_hang tbody.list_orders > tr > .nguoi_lam img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
    .erp-production-page .wrap_ke_hoach_giao_hang tbody.list_orders > tr > .order_status { grid-column: 2; grid-row: 2; text-align: right; }
    .erp-production-page .wrap_ke_hoach_giao_hang tbody.list_orders > tr > .ngay_giao,
    .erp-production-page .wrap_ke_hoach_giao_hang tbody.list_orders > tr > .tinh_thanh { color: #71808d; font-size: var(--erp-mobile-meta-size); }
    .erp-production-page .wrap_ke_hoach_giao_hang tbody.list_orders > tr > .ngay_giao { grid-column: 1; grid-row: 3; }
    .erp-production-page .wrap_ke_hoach_giao_hang tbody.list_orders > tr > .ngay_giao::before { content: "Ngày giao: "; }
    .erp-production-page .wrap_ke_hoach_giao_hang tbody.list_orders > tr > .tinh_thanh { grid-column: 2; grid-row: 3; }
    .erp-production-page .wrap_ke_hoach_giao_hang tbody.list_orders > tr > .point {
        grid-column: 1 / -1;
        grid-row: 4;
        padding-top: 7px !important;
        border-top: 1px solid #edf1f4;
        color: #344f62;
        font-size: var(--erp-mobile-money-size);
        font-weight: 700;
    }
    .erp-production-page .wrap_ke_hoach_giao_hang tbody.list_orders > tr > .point::before { content: "Điểm: "; color: #83919e; font-size: var(--erp-mobile-caption-size); font-weight: 500; }
    .erp-production-page .wrap_ke_hoach_giao_hang tbody.list_orders > tr > .point button { color: #344f62; font-size: var(--erp-mobile-money-size); font-weight: 700; }
    .erp-production-page .wrap_ke_hoach_giao_hang tbody.list_orders > tr.no_data {
        display: block;
        padding: 12px;
        border-radius: var(--erp-mobile-card-radius);
        background: #fff;
    }
    .erp-production-page .wrap_ke_hoach_giao_hang tbody.list_orders > tr.no_data td { display: block; width: 100%; text-align: center; }

    .erp-production-page .main_content_right .filter_orders_by_area ul {
        display: flex;
        gap: 6px;
        padding: 0;
        border: 0;
        background: transparent;
    }
    .erp-production-page .main_content_right .filter_orders_by_area ul li { flex: 1 1 0; margin: 0 !important; }
    .erp-production-page .main_content_right .filter_orders_by_area ul li button {
        width: 100%;
        min-height: 34px;
        border: 0;
        border-radius: 9px !important;
        background: #eef3f7;
        color: #4f6678;
        font-size: 11px;
        font-weight: 600;
    }
    .erp-production-page .main_content_right .filter_orders_by_area ul li.active button {
        background: #55acee;
        color: #fff;
    }
    .erp-production-page .main_content_right .wrap_tab_togglers { margin: 7px 0 9px; }
    .erp-production-page .main_content_right .wrap_tab_togglers ul { display: flex; gap: 5px; border: 0; }
    .erp-production-page .main_content_right .wrap_tab_togglers li { flex: 1 1 0; min-width: 0; }
    .erp-production-page .main_content_right .wrap_tab_togglers li button {
        width: 100%;
        min-height: 32px;
        padding: 5px;
        border: 0;
        border-radius: 9px !important;
        background: #eef3f7;
        color: #526879;
        font-size: 11px;
        font-weight: 600;
    }
    .erp-production-page .main_content_right .wrap_tab_togglers li.active button {
        background: #e4f2fc;
        color: #258fce;
    }
    .erp-production-page #bubble_buttons .slick-single-slide {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        gap: 8px;
    }
    .erp-production-page #bubble_buttons .bubble_button,
    .erp-production-page #bubble_buttons .bubble_button:nth-child(2n+2) {
        display: grid;
        grid-template-columns: 32px minmax(0, 1fr) 64px;
        align-items: center;
        gap: 7px 5px;
        width: 100%;
        min-height: 0;
        margin: 0;
        padding: 10px;
        border: 0;
        border-radius: var(--erp-mobile-card-radius);
        background: #fff;
        box-shadow: var(--erp-mobile-card-shadow);
    }
    .erp-production-page #bubble_buttons .bubble_button.primary {
        background: #e8f5fd;
        outline: 1px solid #55acee;
    }
    .erp-production-page #bubble_buttons .bubble_button_members {
        position: static;
        grid-column: 1;
        grid-row: 1;
        justify-content: flex-start;
        width: auto;
    }
    .erp-production-page #bubble_buttons .bubble_button_members img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
    .erp-production-page #bubble_buttons .bubble_button_title {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        color: #238dcf;
        font-size: var(--erp-mobile-title-size);
        font-weight: 700;
        line-height: 1.25;
        text-align: left;
        overflow-wrap: anywhere;
    }
    .erp-production-page #bubble_buttons .bubble_button_actions {
        position: static;
        display: flex;
        grid-column: 3;
        grid-row: 1;
        justify-content: flex-end;
        gap: 2px;
        width: auto;
    }
    .erp-production-page #bubble_buttons .bubble_button_actions button {
        position: static;
        width: 29px;
        height: 29px;
        border: 0;
        border-radius: 8px !important;
        background: transparent;
        color: #7092a7;
    }
    .erp-production-page #bubble_buttons .bubble_button_orders {
        grid-column: 1 / 3;
        grid-row: 2;
        margin: 0;
        padding: 6px 0 0;
        border-top: 1px solid #edf1f4;
    }
    .erp-production-page #bubble_buttons .bubble_button_orders ul { min-height: 0; gap: 5px; }
    .erp-production-page #bubble_buttons .bubble_button_orders ul li {
        width: auto;
        min-width: 72px;
        height: 26px;
        margin: 0;
        padding: 0 8px;
        border: 1px solid #d6e9f5;
        border-radius: 8px;
        background: #f4f9fc;
        color: #40718f;
        font-size: 11px;
        line-height: 24px;
    }
    .erp-production-page #bubble_buttons .bubble_button_bot_actions {
        position: static;
        grid-column: 3;
        grid-row: 2;
        justify-self: end;
        align-self: center;
    }
    .erp-production-page #bubble_buttons .bubble_button_bot_actions button {
        width: 29px;
        height: 29px;
        border-radius: 8px !important;
        background: #eef3f7;
        color: #7092a7;
    }
    .erp-production-page #bubble_buttons .bubble_button.add_new { min-height: 50px; border: 1px dashed #a8cfeb; box-shadow: none; }
    .erp-production-page #bubble_buttons .bubble_button.add_new button { position: static; font-size: 26px; color: #238dcf; }
}