react-table-edit 1.5.41 → 1.5.43

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import * as React$5 from 'react';
-import React__default, { Fragment, forwardRef, Component, useEffect, useRef, useState, useMemo, useLayoutEffect, createContext, useContext, useCallback, useImperativeHandle } from 'react';
+import React__default, { Fragment, forwardRef, Component, useEffect, useRef, useMemo, useState, useLayoutEffect, createContext, useContext, useCallback, useImperativeHandle } from 'react';
 import { useTranslation } from 'react-i18next';
 import toast from 'react-hot-toast';
 import { createRoot } from 'react-dom/client';
@@ -20114,9 +20114,139 @@ const findItemInTree = (items, filter, keyFilter = 'value', keyChildren = 'child
     }
 };
 
+const RenderElement = React__default.memo((props) => {
+    const { indexRow, formatSetting, currentOptions, id, defaultColumns, closeMenu, setIndexFocus, setSearchTerm, indexFocus, columns, compareFunction, fieldValue, value, handChange, isMulti, row, isSelected, level = 0 } = props;
+    const checkOverflow = (indexRow, indexCol) => {
+        const element = document.getElementById(`select-${id}-${indexRow}-${indexCol}`);
+        return element && element.scrollWidth > element.clientWidth;
+    };
+    return (jsxs("tr", { id: `row-select-table-${indexRow}`, style: { paddingLeft: 10 * level }, className: classNames$1('r-select-row', { 'last-row': indexRow === currentOptions.length - 1 }, { 'fisrt-row': indexRow === 0 }), children: [isMulti && (jsx("td", { className: classNames$1(`r-select-rowcell`, { 'r-select-move': indexFocus === indexRow, 'r-select-active': !isMulti && value && (compareFunction ? compareFunction(row) : value[fieldValue ?? 'value'] === row[fieldValue ?? 'value']) }), style: { width: 40, textAlign: 'center', padding: 0, paddingBottom: 6 }, onClick: (e) => {
+                    if (isMulti) {
+                        const index = value?.findIndex((x) => (compareFunction ? compareFunction(row) : x[fieldValue ?? 'value'] === row[fieldValue ?? 'value']));
+                        if (index > -1) {
+                            value?.splice(index, 1);
+                            handChange([...value]);
+                        }
+                        else {
+                            if (value) {
+                                value?.push(row);
+                                handChange([...value]);
+                            }
+                            else {
+                                handChange([row]);
+                            }
+                        }
+                        e.stopPropagation();
+                    }
+                }, children: jsx(Input$1, { checked: isSelected, type: "checkbox", className: "cursor-pointer", onChange: () => { }, style: { textAlign: 'center', marginTop: 6 } }) })), (columns ? columns : defaultColumns).map((col, indexCol) => {
+                let valueDisplay = row[col.field];
+                if (col.type === 'numeric' || (col.typeCondition && col.typeCondition(row) === 'numeric')) {
+                    valueDisplay = formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? '.', formatSetting?.thousandSeparator ?? ',', col.fraction ?? 0, true, false) ?? 0;
+                }
+                else if (col.type === 'date') {
+                    valueDisplay = valueDisplay ? formatDateTime(valueDisplay, formatSetting?.dateFormat) : '';
+                }
+                else if (col.type === 'datetime') {
+                    valueDisplay = valueDisplay ? formatDateTime(valueDisplay, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm') : '';
+                }
+                return (jsxs(Fragment, { children: [col.visible !== false && (jsx("td", { id: `select-${id}-${indexRow}-${indexCol}`, 
+                            // ref={refRow}
+                            className: classNames$1(`r-select-rowcell`, { 'r-select-move': indexFocus === indexRow, 'r-select-active': !isMulti && value && (compareFunction ? compareFunction(row) : value[fieldValue ?? 'value'] === row[fieldValue ?? 'value']) }), style: {
+                                minWidth: col.minWidth,
+                                width: col.width,
+                                maxWidth: col.maxWidth,
+                                textAlign: col.textAlign ? col.textAlign : 'left'
+                            }, onClick: (e) => {
+                                if (isMulti) {
+                                    const index = value?.findIndex((x) => (compareFunction ? compareFunction(row) : x[fieldValue ?? 'value'] === row[fieldValue ?? 'value']));
+                                    if (index > -1) {
+                                        value?.splice(index, 1);
+                                        handChange([...value]);
+                                    }
+                                    else {
+                                        if (value) {
+                                            value?.push(row);
+                                            handChange([...value]);
+                                        }
+                                        else {
+                                            handChange([row]);
+                                        }
+                                    }
+                                }
+                                else {
+                                    handChange(row);
+                                    setSearchTerm('');
+                                    closeMenu();
+                                }
+                                e.preventDefault();
+                                e.stopPropagation();
+                            }, onMouseMove: (e) => {
+                                if (indexRow !== indexFocus) {
+                                    setIndexFocus(indexRow);
+                                }
+                                e.stopPropagation();
+                            }, children: col.template ? col.template(row, indexRow) : col.type === 'numeric' && Number(row[col.field]) < 0 ? jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : valueDisplay }, `col-${indexRow}-${indexCol}`)), checkOverflow(indexRow, indexCol) && (jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `select-${id}-${indexRow}-${indexCol}`, children: col.template ? col.template(row, indexRow) : valueDisplay }))] }, indexCol));
+            })] }, `row-${indexRow}`));
+});
+
+const TableElement$1 = React__default.memo((props) => {
+    const { currentOptions, isMulti, closeMenu, indexFocus, setIndexFocus, setSearchTerm, formatSetting, defaultColumns, haveCreateNew, isLoading, searchTerm, compareFunction, handChange, columns, fieldLabel, fieldValue, noHeader, value } = props;
+    const { t } = useTranslation();
+    const checkboxRef = useRef(null);
+    const typeSelected = useMemo(() => {
+        // 0: none selected, 1: some selected, 2: all selected
+        if (!isMulti || currentOptions.length === 0 || !value?.length) {
+            return 0;
+        }
+        else if (value?.length < currentOptions.length) {
+            return 1;
+        }
+        else if (!currentOptions.some((item) => !value.some((x) => x[fieldValue ?? 'value'] === item[fieldValue ?? 'value']))) {
+            return 2;
+        }
+        return 1;
+    }, [currentOptions, value]);
+    useEffect(() => {
+        if (checkboxRef.current) {
+            checkboxRef.current.checked = typeSelected === 2;
+            checkboxRef.current.indeterminate = typeSelected === 1;
+        }
+    }, [typeSelected]);
+    return (jsxs(Fragment$1, { children: [jsxs("table", { style: { width: '100%' }, children: [!(noHeader || (columns?.length ?? 0) === 0) && (jsx("thead", { className: "r-select-gridheader", children: jsxs("tr", { className: "r-select-row", role: "row", children: [isMulti && (jsx("th", { className: classNames$1(`r-select-headercell`), style: { width: 40, top: `0px` }, children: jsx("div", { style: { justifyContent: 'center' }, className: classNames$1('r-select-headercell-div'), children: jsx(Input$1, { innerRef: (el) => {
+                                                checkboxRef.current = el;
+                                            }, type: "checkbox", onClick: (e) => {
+                                                if (isMulti) {
+                                                    if (typeSelected === 2) {
+                                                        handChange([]);
+                                                    }
+                                                    else if (typeSelected === 0) {
+                                                        handChange([...currentOptions]);
+                                                    }
+                                                    else {
+                                                        const notSelectedRows = currentOptions.filter((item) => !value.some((x) => x[fieldValue ?? 'value'] === item[fieldValue ?? 'value']));
+                                                        handChange([...value, ...notSelectedRows]);
+                                                    }
+                                                    e.stopPropagation();
+                                                }
+                                            }, readOnly: true, className: classNames$1('cursor-pointer', { 'd-none': !isMulti }), style: { textAlign: 'center', marginTop: 6 } }) }) })), (columns ? columns : defaultColumns).map((col, indexCol) => {
+                                    return (col.visible !== false && (jsx("th", { className: classNames$1(`r-select-headercell `), style: {
+                                            width: Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? 'auto'),
+                                            minWidth: Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? 'auto'),
+                                            top: `${0 * 35}px`,
+                                            maxWidth: col.maxWidth
+                                        }, children: jsx("div", { role: "textbox", title: t(col.headerText ?? ''), style: {
+                                                height: `${1 * 35}px`,
+                                                justifyContent: col.textAlign ?? 'left'
+                                            }, className: "r-select-headercell-div", children: t(col.headerText ?? '') }) }, `header-select-${indexCol}`)));
+                                })] }) })), currentOptions && !isLoading && (jsxs("tbody", { className: "r-select-gridcontent", children: [haveCreateNew && (jsx(RenderElement, { indexRow: 0, isSelected: false, closeMenu: closeMenu, value: value, isMulti: isMulti, currentOptions: currentOptions, fieldValue: fieldValue, columns: columns, defaultColumns: defaultColumns, indexFocus: indexFocus, formatSetting: formatSetting, handChange: handChange, compareFunction: compareFunction, setIndexFocus: setIndexFocus, setSearchTerm: setSearchTerm, row: { valueCreate: searchTerm, [fieldValue ?? 'value']: searchTerm, [fieldLabel ?? 'label']: `${t('Create')} '${searchTerm}'`, isCreated: true } })), currentOptions?.map((row, indexRow) => {
+                                const isSelected = isMulti && value?.some((x) => (compareFunction ? compareFunction(row) : x[fieldValue ?? 'value'] === row[fieldValue ?? 'value']));
+                                return (jsx(RenderElement, { isSelected: isSelected ?? false, indexRow: indexRow + (haveCreateNew ? 1 : 0), closeMenu: closeMenu, value: value, isMulti: isMulti, currentOptions: currentOptions, fieldValue: fieldValue, columns: columns, defaultColumns: defaultColumns, indexFocus: indexFocus, formatSetting: formatSetting, handChange: handChange, compareFunction: compareFunction, setIndexFocus: setIndexFocus, setSearchTerm: setSearchTerm, row: row }, `select-table-${indexRow}`));
+                            })] }))] }), (currentOptions?.length ?? 0) === 0 && !haveCreateNew && !isLoading && (jsxs("div", { className: "r-no-data", children: [jsx("svg", { width: "64", height: "41", viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: jsxs("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd", children: [jsx("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }), jsxs("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [jsx("path", { d: "M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" }), jsx("path", { d: "M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z", fill: "#fafafa" })] })] }) }), t('No data available.')] })), isLoading && (jsxs("div", { className: "r-no-data", children: [jsx(Spinner$1, { className: "me-1", children: " " }), t('Loading...')] }))] }));
+});
+
 const defaultMaxHeight$1 = 250;
 const SelectTable = forwardRef((props, ref) => {
-    const { id, menuWidth, width, invalid, placeholder, textAlign, options, columns, value, fieldValue, fieldLabel, maxHeight, isClearable, component, isMulti, noHeader, isDisabled, showFooter, formatSetting, allowCreate, onPaste, onChange, handleAdd, onKeyDown, onOpenMenu, loadOptions, onCloseMenu, footerComponent, formatOptionLabel, compareFunction } = props;
+    const { id, menuWidth, width, invalid, placeholder, textAlign, options, columns, value, fieldValue, fieldLabel, maxHeight, isClearable, component, isMulti, noHeader, isDisabled, showFooter, formatSetting, allowCreate, onPaste, onChange, handleAdd, onKeyDown, onOpenMenu, loadOptions, onCloseMenu, footerComponent, formatOptionLabel, compareFunction, } = props;
     const selectTableRef = useRef(null);
     const selectMenuTableRef = useRef(null);
     const inputRef = useRef(null);
@@ -20128,15 +20258,13 @@ const SelectTable = forwardRef((props, ref) => {
     const [optionsLoad, setOptionsLoad] = useState();
     const [haveCreateNew, setHaveCreateNew] = useState(false);
     const { t } = useTranslation();
-    const isSelectedAll = useMemo(() => {
-        return isMulti === true && (optionsLoad ? optionsLoad : options).length > 0 && value?.length >= (optionsLoad ? optionsLoad : options).length;
-    }, [optionsLoad, options, value]);
+    const currentOptions = useMemo(() => optionsLoad || options || [], [optionsLoad, options]);
     const defaultColumns = [
         {
             headerText: 'Name',
             field: fieldLabel ?? 'label',
-            width: menuWidth
-        }
+            width: menuWidth,
+        },
     ];
     const closeMenu = () => {
         setDropdownOpen(false);
@@ -20146,7 +20274,12 @@ const SelectTable = forwardRef((props, ref) => {
     };
     const handChange = (val) => {
         if (val && val.isCreated) {
-            const newVal = { ...val, [fieldLabel ?? 'label']: val.valueCreate, isCreated: undefined, isCreatedItem: true };
+            const newVal = {
+                ...val,
+                [fieldLabel ?? 'label']: val.valueCreate,
+                isCreated: undefined,
+                isCreatedItem: true,
+            };
             options.unshift(newVal);
             onChange(newVal);
             return;
@@ -20155,7 +20288,9 @@ const SelectTable = forwardRef((props, ref) => {
     };
     useEffect(() => {
         if (dropdownOpen && value && !isMulti && selectMenuTableRef) {
-            const index = (optionsLoad ? optionsLoad : options)?.findIndex((row) => (compareFunction ? compareFunction(row) : row[fieldValue ?? 'value'] === value[fieldValue ?? 'value']));
+            const index = currentOptions?.findIndex((row) => compareFunction
+                ? compareFunction(row)
+                : row[fieldValue ?? 'value'] === value[fieldValue ?? 'value']);
             if (index >= 0) {
                 selectMenuTableRef.current.scrollTo({ top: (index - 1) * 30 });
             }
@@ -20202,14 +20337,28 @@ const SelectTable = forwardRef((props, ref) => {
             }
         }
     };
-    const listKeyUse = ['Escape', 'Space', 'Enter', 'Tab', 'NumpadEnter', 'ArrowDown', 'ArrowUp', 'F9'];
+    const listKeyUse = [
+        'Escape',
+        'Space',
+        'Enter',
+        'Tab',
+        'NumpadEnter',
+        'ArrowDown',
+        'ArrowUp',
+        'F9',
+    ];
     const handleOnKeyDown = (e) => {
         let key = '';
         if (onKeyDown &&
             (!dropdownOpen ||
                 !listKeyUse.includes(e.code) ||
-                ((e.code === 'Enter' || e.code === 'Tab' || e.code === 'NumpadEnter' || e.code === 'Space') && !((optionsLoad ? optionsLoad : options)[indexFocus] || haveCreateNew)) ||
-                ((e.code === 'ArrowDown' || e.code === 'ArrowUp') && (optionsLoad?.length ?? 0) === 0 && options.length === 0) ||
+                ((e.code === 'Enter' ||
+                    e.code === 'Tab' ||
+                    e.code === 'NumpadEnter' ||
+                    e.code === 'Space') &&
+                    !(currentOptions[indexFocus] || haveCreateNew)) ||
+                ((e.code === 'ArrowDown' || e.code === 'ArrowUp') &&
+                    currentOptions.length === 0) ||
                 (e.code === 'Escape' && !(isClearable && value && !isDisabled)))) {
             key = onKeyDown(e);
         }
@@ -20222,10 +20371,15 @@ const SelectTable = forwardRef((props, ref) => {
             else if (e.code === 'Space') {
                 let newItem;
                 if (haveCreateNew && indexFocus === 0) {
-                    newItem = { valueCreate: searchTerm, [fieldValue ?? 'value']: searchTerm, [fieldLabel ?? 'label']: `${t('Create')} '${searchTerm}'`, isCreated: true };
+                    newItem = {
+                        valueCreate: searchTerm,
+                        [fieldValue ?? 'value']: searchTerm,
+                        [fieldLabel ?? 'label']: `${t('Create')} '${searchTerm}'`,
+                        isCreated: true,
+                    };
                 }
                 else {
-                    newItem = (optionsLoad ? optionsLoad : options)[indexFocus];
+                    newItem = currentOptions[indexFocus];
                 }
                 if (dropdownOpen && newItem) {
                     handChange(newItem);
@@ -20243,13 +20397,20 @@ const SelectTable = forwardRef((props, ref) => {
                     flag = true;
                 }
             }
-            else if (e.code === 'Enter' || e.code === 'Tab' || e.code === 'NumpadEnter') {
+            else if (e.code === 'Enter' ||
+                e.code === 'Tab' ||
+                e.code === 'NumpadEnter') {
                 let newItem;
                 if (haveCreateNew && indexFocus === 0) {
-                    newItem = { valueCreate: searchTerm, [fieldValue ?? 'value']: searchTerm, [fieldLabel ?? 'label']: `${t('Create')} '${searchTerm}'`, isCreated: true };
+                    newItem = {
+                        valueCreate: searchTerm,
+                        [fieldValue ?? 'value']: searchTerm,
+                        [fieldLabel ?? 'label']: `${t('Create')} '${searchTerm}'`,
+                        isCreated: true,
+                    };
                 }
                 else {
-                    newItem = (optionsLoad ? optionsLoad : options)[indexFocus];
+                    newItem = currentOptions[indexFocus];
                 }
                 if (dropdownOpen && newItem) {
                     handChange(newItem);
@@ -20258,15 +20419,18 @@ const SelectTable = forwardRef((props, ref) => {
                 }
             }
             else if (e.code === 'ArrowDown') {
-                if (dropdownOpen && ((optionsLoad?.length ?? 0) > 0 || options.length > 0 || haveCreateNew)) {
+                if (dropdownOpen && (currentOptions.length > 0 || haveCreateNew)) {
                     let newIndex = 0;
                     if (indexFocus >= 0) {
                         newIndex = indexFocus + 1;
                     }
                     else if (value) {
-                        newIndex = (optionsLoad ? optionsLoad : options)?.findIndex((row) => (compareFunction ? compareFunction(row) : row[fieldValue ?? 'value'] === value[fieldValue ?? 'value'])) + 1;
+                        newIndex =
+                            currentOptions?.findIndex((row) => compareFunction
+                                ? compareFunction(row)
+                                : row[fieldValue ?? 'value'] === value[fieldValue ?? 'value']) + 1;
                     }
-                    if (newIndex < (optionsLoad ? optionsLoad : options).length) {
+                    if (newIndex < currentOptions.length) {
                         setIndexFocus(newIndex);
                         checkIfElementIsOutOfScroll(0, newIndex);
                     }
@@ -20282,21 +20446,24 @@ const SelectTable = forwardRef((props, ref) => {
                 }
             }
             else if (e.code === 'ArrowUp') {
-                if (dropdownOpen && ((optionsLoad?.length ?? 0) > 0 || options.length > 0 || haveCreateNew)) {
+                if (dropdownOpen && (currentOptions.length > 0 || haveCreateNew)) {
                     let newIndex = 0;
                     if (indexFocus >= 0) {
                         newIndex = indexFocus - 1;
                     }
                     else if (value) {
-                        newIndex = (optionsLoad ? optionsLoad : options)?.findIndex((row) => (compareFunction ? compareFunction(row) : row[fieldValue ?? 'value'] === value[fieldValue ?? 'value'])) - 1;
+                        newIndex =
+                            currentOptions?.findIndex((row) => compareFunction
+                                ? compareFunction(row)
+                                : row[fieldValue ?? 'value'] === value[fieldValue ?? 'value']) - 1;
                     }
                     if (newIndex >= 0) {
                         setIndexFocus(newIndex);
                         checkIfElementIsOutOfScroll(2, newIndex);
                     }
                     else {
-                        setIndexFocus((optionsLoad ? optionsLoad : options).length - 1);
-                        checkIfElementIsOutOfScroll(3, (optionsLoad ? optionsLoad : options).length - 1);
+                        setIndexFocus(currentOptions.length - 1);
+                        checkIfElementIsOutOfScroll(3, currentOptions.length - 1);
                     }
                     flag = true;
                 }
@@ -20321,7 +20488,11 @@ const SelectTable = forwardRef((props, ref) => {
                     scrollToElement(selectMenuTableRef.current, selectMenuTableRef.current.scrollHeight);
                 }
                 else if (flag === 0 && rect.bottom + 30 > parentRect.bottom) {
-                    scrollToElement(selectMenuTableRef.current, elementFocus.offsetTop - selectMenuTableRef.current.offsetTop - parentRect.height + rect.height + 50);
+                    scrollToElement(selectMenuTableRef.current, elementFocus.offsetTop -
+                        selectMenuTableRef.current.offsetTop -
+                        parentRect.height +
+                        rect.height +
+                        50);
                 }
                 else if (flag === 2 && rect.top < parentRect.top + 50) {
                     scrollToElement(selectMenuTableRef.current, elementFocus.offsetTop - 65);
@@ -20335,28 +20506,22 @@ const SelectTable = forwardRef((props, ref) => {
         timeOutElement = setTimeout(() => {
             elemment.scrollTo({
                 top,
-                behavior: 'smooth'
+                behavior: 'smooth',
             });
         }, 100);
     };
-    const renderHeaderCol = (col, indexCol) => {
-        return (jsx(Fragment, { children: col.visible !== false && (jsx("th", { className: classNames$1(`r-select-headercell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }), style: {
-                    width: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? 'auto') : col.width,
-                    minWidth: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? 'auto') : col.minWidth,
-                    top: `${0 * 35}px`,
-                    maxWidth: col.maxWidth
-                }, children: jsx("div", { role: "textbox", title: t(col.headerText ?? ''), style: {
-                        height: `${1 * 35}px`,
-                        justifyContent: col.textAlign ?? 'left'
-                    }, className: "r-select-headercell-div", children: t(col.headerText ?? '') }) })) }, `header-select-${indexCol}`));
-    };
     const checkSearch = (keyword, data, columnsSearch) => {
         if (!keyword || columnsSearch.length === 0) {
             return true;
         }
         for (let index = 0; index < columnsSearch.length; index++) {
             const key = columnsSearch[index].field.trim();
-            if (data[key] && data[key].toString().trim().toLowerCase().includes(keyword.trim().toLowerCase())) {
+            if (data[key] &&
+                data[key]
+                    .toString()
+                    .trim()
+                    .toLowerCase()
+                    .includes(keyword.trim().toLowerCase())) {
                 return true;
             }
         }
@@ -20372,7 +20537,8 @@ const SelectTable = forwardRef((props, ref) => {
         if (!searchTerm) {
             setOptionsLoad(undefined);
         }
-        else if (allowCreate && !(optionsLoad ? optionsLoad : options)?.find((x) => x[fieldLabel ?? 'label'] === searchTerm)) {
+        else if (allowCreate &&
+            !currentOptions?.find((x) => x[fieldLabel ?? 'label'] === searchTerm)) {
             setHaveCreateNew(true);
             return;
         }
@@ -20382,11 +20548,26 @@ const SelectTable = forwardRef((props, ref) => {
         const element = document.getElementById(`select-${id}-${indexRow}-${indexCol}`);
         return element && element.scrollWidth > element.clientWidth;
     };
-    const RenderElement = React__default.memo((props) => {
+    React__default.memo((props) => {
         const { indexRow, row, isSelected, level = 0 } = props;
-        return (jsxs("tr", { id: `row-select-table-${indexRow}`, style: { paddingLeft: 10 * level }, className: classNames$1('r-select-row', { 'last-row': indexRow === (optionsLoad ? optionsLoad : options).length - 1 }, { 'fisrt-row': indexRow === 0 }), children: [isMulti && (jsx("td", { className: classNames$1(`r-select-rowcell`, { 'r-select-move': indexFocus === indexRow, 'r-select-active': !isMulti && value && (compareFunction ? compareFunction(row) : value[fieldValue ?? 'value'] === row[fieldValue ?? 'value']) }), style: { width: 40, textAlign: 'center', padding: 0, paddingBottom: 6 }, onClick: (e) => {
+        return (jsxs("tr", { id: `row-select-table-${indexRow}`, style: { paddingLeft: 10 * level }, className: classNames$1('r-select-row', { 'last-row': indexRow === currentOptions.length - 1 }, { 'fisrt-row': indexRow === 0 }), children: [isMulti && (jsx("td", { className: classNames$1(`r-select-rowcell`, {
+                        'r-select-move': indexFocus === indexRow,
+                        'r-select-active': !isMulti &&
+                            value &&
+                            (compareFunction
+                                ? compareFunction(row)
+                                : value[fieldValue ?? 'value'] ===
+                                    row[fieldValue ?? 'value']),
+                    }), style: {
+                        width: 40,
+                        textAlign: 'center',
+                        padding: 0,
+                        paddingBottom: 6,
+                    }, onClick: (e) => {
                         if (isMulti) {
-                            const index = value?.findIndex((x) => (compareFunction ? compareFunction(row) : x[fieldValue ?? 'value'] === row[fieldValue ?? 'value']));
+                            const index = value?.findIndex((x) => compareFunction
+                                ? compareFunction(row)
+                                : x[fieldValue ?? 'value'] === row[fieldValue ?? 'value']);
                             if (index > -1) {
                                 value?.splice(index, 1);
                                 handChange([...value]);
@@ -20404,25 +20585,42 @@ const SelectTable = forwardRef((props, ref) => {
                         }
                     }, children: jsx(Input$1, { checked: isSelected, type: "checkbox", className: "cursor-pointer", onChange: () => { }, style: { textAlign: 'center', marginTop: 6 } }) })), (columns ? columns : defaultColumns).map((col, indexCol) => {
                     let valueDisplay = row[col.field];
-                    if (col.type === 'numeric' || (col.typeCondition && col.typeCondition(row) === 'numeric')) {
-                        valueDisplay = formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? '.', formatSetting?.thousandSeparator ?? ',', col.fraction ?? 0, true, false) ?? 0;
+                    if (col.type === 'numeric' ||
+                        (col.typeCondition && col.typeCondition(row) === 'numeric')) {
+                        valueDisplay =
+                            formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? '.', formatSetting?.thousandSeparator ?? ',', col.fraction ?? 0, true, false) ?? 0;
                     }
                     else if (col.type === 'date') {
-                        valueDisplay = valueDisplay ? formatDateTime(valueDisplay, formatSetting?.dateFormat) : '';
+                        valueDisplay = valueDisplay
+                            ? formatDateTime(valueDisplay, formatSetting?.dateFormat)
+                            : '';
                     }
                     else if (col.type === 'datetime') {
-                        valueDisplay = valueDisplay ? formatDateTime(valueDisplay, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm') : '';
+                        valueDisplay = valueDisplay
+                            ? formatDateTime(valueDisplay, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm')
+                            : '';
                     }
                     return (jsxs(Fragment, { children: [col.visible !== false && (jsx("td", { id: `select-${id}-${indexRow}-${indexCol}`, 
                                 // ref={refRow}
-                                className: classNames$1(`r-select-rowcell`, { 'r-select-move': indexFocus === indexRow, 'r-select-active': !isMulti && value && (compareFunction ? compareFunction(row) : value[fieldValue ?? 'value'] === row[fieldValue ?? 'value']) }), style: {
+                                className: classNames$1(`r-select-rowcell`, {
+                                    'r-select-move': indexFocus === indexRow,
+                                    'r-select-active': !isMulti &&
+                                        value &&
+                                        (compareFunction
+                                            ? compareFunction(row)
+                                            : value[fieldValue ?? 'value'] ===
+                                                row[fieldValue ?? 'value']),
+                                }), style: {
                                     minWidth: col.minWidth,
                                     width: col.width,
                                     maxWidth: col.maxWidth,
-                                    textAlign: col.textAlign ? col.textAlign : 'left'
+                                    textAlign: col.textAlign ? col.textAlign : 'left',
                                 }, onClick: (e) => {
                                     if (isMulti) {
-                                        const index = value?.findIndex((x) => (compareFunction ? compareFunction(row) : x[fieldValue ?? 'value'] === row[fieldValue ?? 'value']));
+                                        const index = value?.findIndex((x) => compareFunction
+                                            ? compareFunction(row)
+                                            : x[fieldValue ?? 'value'] ===
+                                                row[fieldValue ?? 'value']);
                                         if (index > -1) {
                                             value?.splice(index, 1);
                                             handChange([...value]);
@@ -20449,36 +20647,36 @@ const SelectTable = forwardRef((props, ref) => {
                                         setIndexFocus(indexRow);
                                     }
                                     e.stopPropagation();
-                                }, children: col.template ? col.template(row, indexRow) : col.type === 'numeric' && Number(row[col.field]) < 0 ? jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : valueDisplay }, `col-${indexRow}-${indexCol}`)), checkOverflow(indexRow, indexCol) && (jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `select-${id}-${indexRow}-${indexCol}`, children: col.template ? col.template(row, indexRow) : valueDisplay }))] }, indexCol));
+                                }, children: col.template ? (col.template(row, indexRow)) : col.type === 'numeric' && Number(row[col.field]) < 0 ? (jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [' ', `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] })) : (valueDisplay) }, `col-${indexRow}-${indexCol}`)), checkOverflow(indexRow, indexCol) && (jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `select-${id}-${indexRow}-${indexCol}`, children: col.template ? col.template(row, indexRow) : valueDisplay }))] }, indexCol));
                 })] }, `row-${indexRow}`));
     });
-    const RenderTable = (props) => {
-        return (jsxs(Fragment$1, { children: [jsxs("table", { style: { width: '100%' }, children: [!(noHeader || (columns?.length ?? 0) === 0) && (jsx("thead", { className: "r-select-gridheader", children: jsxs("tr", { className: "r-select-row", role: "row", children: [isMulti && (jsx("th", { className: classNames$1(`r-select-headercell`), style: { width: 40, top: `0px` }, children: jsx("div", { style: { justifyContent: 'center' }, className: classNames$1('r-select-headercell-div'), children: jsx(Input$1, { checked: isSelectedAll, type: "checkbox", onClick: (e) => {
-                                                    if (isMulti) {
-                                                        if (isSelectedAll) {
-                                                            handChange([]);
-                                                        }
-                                                        else {
-                                                            handChange([...(optionsLoad ? optionsLoad : options)]);
-                                                        }
-                                                        e.stopPropagation();
-                                                    }
-                                                }, readOnly: true, className: classNames$1('cursor-pointer', { 'd-none': !isMulti }), style: { textAlign: 'center', marginTop: 6 } }) }) })), (columns ? columns : defaultColumns).map((col, index) => {
-                                        return renderHeaderCol(col, index);
-                                    })] }) })), (optionsLoad ? optionsLoad : options) && !isLoading && (jsx(Fragment$1, { children: jsxs("tbody", { className: "r-select-gridcontent", children: [haveCreateNew && jsx(RenderElement, { isSelected: false, indexRow: 0, row: { valueCreate: searchTerm, [fieldValue ?? 'value']: searchTerm, [fieldLabel ?? 'label']: `${t('Create')} '${searchTerm}'`, isCreated: true } }), (optionsLoad ? optionsLoad : options)?.map((row, indexRow) => {
-                                        const isSelected = isMulti && value?.some((x) => (compareFunction ? compareFunction(row) : x[fieldValue ?? 'value'] === row[fieldValue ?? 'value']));
-                                        return jsx(RenderElement, { isSelected: isSelected ?? false, indexRow: indexRow + (haveCreateNew ? 1 : 0), row: row }, `select-table-${indexRow}`);
-                                    })] }) }))] }), ((optionsLoad ? optionsLoad : options)?.length ?? 0) === 0 && !haveCreateNew && !isLoading && (jsxs("div", { className: "r-no-data", children: [jsx("svg", { width: "64", height: "41", viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: jsxs("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd", children: [jsx("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }), jsxs("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [jsx("path", { d: "M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" }), jsx("path", { d: "M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z", fill: "#fafafa" })] })] }) }), t('No data available.')] })), isLoading && (jsxs("div", { className: "r-no-data", children: [jsx(Spinner$1, { className: "me-1", children: " " }), t('Loading...')] }))] }));
-    };
     return (jsx("div", { className: classNames$1('react-select-table', { 'is-invalid': invalid }), ref: ref, id: id, children: jsx("div", { ref: selectTableRef, children: jsxs(Dropdown$1$1, { isOpen: dropdownOpen, toggle: () => { }, onMouseDown: (e) => e.preventDefault(), children: [jsxs(DropdownToggle$1, { onClick: (e) => {
                             if (!isDisabled) {
                                 inputRef?.current.focus();
                                 handleOpenClose();
                             }
                             e.preventDefault();
-                        }, tag: "div", style: { width: width ? width : selectTableRef?.current?.clientWidth ? selectTableRef?.current?.clientWidth : 'auto' }, className: classNames$1('select-table-control', { 'r-select-is-disabled': isDisabled }, { 'r-select-is-open': dropdownOpen }, { 'r-select-is-focus': isFocus }, { 'r-select-is-invalid': invalid }), children: [jsxs("div", { className: "select-table-container", children: [isMulti ? (jsx(Fragment$1, { children: jsx("div", { className: classNames$1('select-value is-mutil', { 'd-none': searchTerm }), children: value?.map((ele, index) => {
-                                                return (jsxs("span", { children: [index === 0 ? '' : ', ', formatOptionLabel ? formatOptionLabel(ele) : ele[fieldLabel ?? 'label']] }, index));
-                                            }) }) })) : (jsx(Fragment$1, { children: jsxs("div", { className: classNames$1('select-value', { 'd-none': searchTerm }), children: [value ? (formatOptionLabel ? formatOptionLabel(value) : value[fieldLabel ?? 'label']) : '', " "] }) })), !((isMulti ? value?.length > 0 : value) || isDisabled || searchTerm) && jsx("div", { className: classNames$1('select-placeholder'), children: placeholder }), jsx("div", { className: "input-container", children: jsx("input", { style: { textAlign: textAlign ?? 'left' }, ref: inputRef, className: classNames$1('select-input'), readOnly: isDisabled, value: searchTerm, onPaste: (e) => onPaste && !dropdownOpen && onPaste(e), onChange: (val) => {
+                        }, tag: "div", style: {
+                            width: width
+                                ? width
+                                : selectTableRef?.current?.clientWidth
+                                    ? selectTableRef?.current?.clientWidth
+                                    : 'auto',
+                        }, className: classNames$1('select-table-control', { 'r-select-is-disabled': isDisabled }, { 'r-select-is-open': dropdownOpen }, { 'r-select-is-focus': isFocus }, { 'r-select-is-invalid': invalid }), children: [jsxs("div", { className: "select-table-container", children: [isMulti ? (jsx("div", { className: classNames$1('select-value is-mutil', {
+                                            'd-none': searchTerm,
+                                        }), children: value?.map((ele, index) => {
+                                            return (jsxs("span", { children: [index === 0 ? '' : ', ', formatOptionLabel
+                                                        ? formatOptionLabel(ele)
+                                                        : ele[fieldLabel ?? 'label']] }, index));
+                                        }) })) : (jsxs("div", { className: classNames$1('select-value', {
+                                            'd-none': searchTerm,
+                                        }), children: [value
+                                                ? formatOptionLabel
+                                                    ? formatOptionLabel(value)
+                                                    : value[fieldLabel ?? 'label']
+                                                : '', ' '] })), !((isMulti ? value?.length > 0 : value) ||
+                                        isDisabled ||
+                                        searchTerm) && (jsx("div", { className: classNames$1('select-placeholder'), children: placeholder })), jsx("div", { className: "input-container", children: jsx("input", { style: { textAlign: textAlign ?? 'left' }, ref: inputRef, className: classNames$1('select-input'), readOnly: isDisabled, value: searchTerm, onPaste: (e) => onPaste && !dropdownOpen && onPaste(e), onChange: (val) => {
                                                 if (val.target.value) {
                                                     if (loadOptions && val.target.value) {
                                                         setIsLoading(true);
@@ -20500,13 +20698,23 @@ const SelectTable = forwardRef((props, ref) => {
                             width: width ? width + 2 : 'min-content',
                             position: 'fixed',
                             borderRadius: 4,
-                            zIndex: 9999
+                            zIndex: 9999,
                         }, children: jsx(DropdownItem$1, { className: classNames$1('p-0 menu-select-table'), tag: "div", header: true, children: dropdownOpen && (jsx("div", { style: { backgroundColor: 'none' }, onMouseDown: (e) => {
                                     if (!isDisabled) {
                                         inputRef?.current.focus();
                                         e.preventDefault();
                                     }
-                                }, children: jsxs("div", { className: "r-select-grid", children: [jsx("div", { className: classNames$1('r-select-gridtable', { 'no-header': noHeader || (columns?.length ?? 0) === 0 }), ref: selectMenuTableRef, style: { width: menuWidth, minWidth: selectTableRef?.current?.clientWidth, maxHeight: maxHeight ?? defaultMaxHeight$1 }, children: jsx(RenderTable, {}) }), jsxs("div", { className: classNames$1('r-select-footer', { 'd-none': !(showFooter === true || handleAdd || isMulti) }), children: [jsxs(Button$1$1, { outline: true, color: "primary", onClick: () => handleAdd?.(), className: classNames$1('r-btn d-flex align-items-center', { 'd-none': !handleAdd }), children: [jsx(SvgPlus, { className: "me-50", fontSize: 16 }), t('AddNew'), " (F9)"] }), isMulti && jsx("div", { className: "ms-50 text-primary h-100 d-flex align-items-center", children: t('countSelected', { item: value?.length ?? 0 }) }), footerComponent ? footerComponent() : null] })] }) })) }) })] }) }) }));
+                                }, children: jsxs("div", { className: "r-select-grid", children: [jsx("div", { className: classNames$1('r-select-gridtable', {
+                                                'no-header': noHeader || (columns?.length ?? 0) === 0,
+                                            }), ref: selectMenuTableRef, style: {
+                                                width: menuWidth,
+                                                minWidth: selectTableRef?.current?.clientWidth,
+                                                maxHeight: maxHeight ?? defaultMaxHeight$1,
+                                            }, children: jsx(TableElement$1, { haveCreateNew: haveCreateNew, isLoading: isLoading, searchTerm: searchTerm, fieldLabel: fieldLabel, noHeader: noHeader, closeMenu: closeMenu, value: value, isMulti: isMulti, currentOptions: currentOptions, fieldValue: fieldValue, columns: columns, defaultColumns: defaultColumns, indexFocus: indexFocus, formatSetting: formatSetting, handChange: handChange, compareFunction: compareFunction, setIndexFocus: setIndexFocus, setSearchTerm: setSearchTerm }) }), jsxs("div", { className: classNames$1('r-select-footer', {
+                                                'd-none': !(showFooter === true ||
+                                                    handleAdd ||
+                                                    isMulti),
+                                            }), children: [jsxs(Button$1$1, { outline: true, color: "primary", onClick: () => handleAdd?.(), className: classNames$1('r-btn d-flex align-items-center', { 'd-none': !handleAdd }), children: [jsx(SvgPlus, { className: "me-50", fontSize: 16 }), t('AddNew'), " (F9)"] }), isMulti && (jsx("div", { className: "ms-50 text-primary h-100 d-flex align-items-center", children: t('countSelected', { item: value?.length ?? 0 }) })), footerComponent ? footerComponent() : null] })] }) })) }) })] }) }) }));
 });
 
 const PagingComponent = ({ totalItem, gridRef, pageSize, currentPage, onChangePage, pageOptions, onChangePageSize }) => {
@@ -36322,7 +36530,7 @@ const RenderEditCellComponent = (props) => {
     }
 };
 
-var css_248z$2 = "@charset \"UTF-8\";\n.react-select-table .select-table-control {\n  opacity: 1;\n  border: 1px solid hsl(0, 0%, 80%);\n  border-radius: 0.357rem;\n  width: 100%;\n  height: 28px;\n  background-color: #FFFFFF;\n  display: flex;\n  align-items: center;\n  padding: 2px 8px;\n}\n.react-select-table .select-table-control .select-table-indicator svg {\n  fill: #c4c4c4 !important;\n}\n.react-select-table .select-table-control .icon-clear {\n  font-size: 25px;\n  margin-top: 2px;\n  font-weight: 500;\n  color: #c4c4c4;\n}\n.react-select-table .select-table-control .icon-clear:hover {\n  color: rgba(0, 0, 0, 0.8705882353) !important;\n}\n.react-select-table .select-table-control.r-select-is-open .select-table-indicator svg {\n  fill: rgba(0, 0, 0, 0.8705882353) !important;\n}\n.react-select-table .select-table-control.r-select-is-invalid {\n  border: 1px solid red !important;\n}\n.react-select-table .select-table-control.r-select-is-focus {\n  border: 1px solid #1989fa !important;\n}\n.react-select-table .select-table-control.r-select-is-disabled {\n  background-color: #efefef !important;\n}\n.react-select-table .select-table-control .select-table-container {\n  position: relative;\n  flex: 1;\n}\n.react-select-table .select-table-control .select-table-container .input-container {\n  background-color: transparent;\n  white-space: nowrap;\n  top: 0px;\n  left: 0px;\n  display: inline;\n}\n.react-select-table .select-table-control .select-table-container .input-container .select-input {\n  background-color: transparent;\n  text-align: center;\n  width: 100%;\n  box-sizing: border-box;\n  margin-left: -3px;\n  border: none;\n  /* Loại bỏ border */\n  outline: none;\n  /* Loại bỏ outline khi input được chọn */\n}\n.react-select-table .select-table-control .select-table-container .input-container .select-input:focus {\n  border-width: 0px !important;\n}\n.react-select-table .select-table-control .select-table-container .select-placeholder {\n  position: absolute;\n  color: #283046;\n  margin-top: 1px;\n  background-color: transparent;\n}\n.react-select-table .select-table-control .select-table-container .select-value {\n  position: absolute;\n  background-color: transparent;\n  bottom: 0px;\n  left: 0px;\n  width: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.react-select-table .formula-dropdown {\n  min-width: min-content !important;\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 15px;\n}\n.react-select-table input::placeholder {\n  color: #000000 !important;\n  opacity: 1;\n  /* Firefox */\n}\n\n.r-select-grid.r-select-tree-grid .r-select-gridtable .r-select-row:hover {\n  background-color: rgba(235, 70, 25, 0.1) !important;\n  color: #eb4619;\n}\n\n.r-select-grid {\n  font-size: 12px;\n  font-family: Montserrat, Helvetica, Arial, serif;\n  font-weight: 500 !important;\n  border-radius: 4px !important;\n  overflow: hidden;\n}\n.r-select-grid table {\n  table-layout: fixed;\n  border-collapse: separate;\n  border-spacing: 0px;\n}\n.r-select-grid .r-select-gridtable {\n  -webkit-overflow-scrolling: touch;\n  overflow-x: auto;\n  overflow-y: auto;\n  position: relative;\n  background-color: #FFFFFF;\n  color: rgba(0, 0, 0, 0.8705882353) !important;\n  font-weight: 400 !important;\n  font-size: 13px !important;\n  /* Toàn bộ thanh cuộn */\n}\n.r-select-grid .r-select-gridtable::-webkit-scrollbar {\n  width: 9px;\n  height: 9px;\n}\n.r-select-grid .r-select-gridtable::-webkit-scrollbar-track {\n  background: #FCFCFC;\n}\n.r-select-grid .r-select-gridtable::-webkit-scrollbar-thumb {\n  background: #8B8B8B;\n  border-radius: 6px;\n}\n.r-select-grid .r-select-gridtable::-webkit-scrollbar-thumb:hover {\n  background: #636363;\n}\n.r-select-grid .r-select-gridtable .r-select-gridheader .r-select-row .r-select-headercell {\n  color: rgba(0, 0, 0, 0.8705882353) !important;\n  position: sticky;\n  padding: 0px;\n  height: 35px;\n  z-index: 1;\n  border-width: 0px;\n  line-height: 16px;\n}\n.r-select-grid .r-select-gridtable .r-select-gridheader .r-select-row .r-select-headercell .r-select-headercell-div {\n  border-bottom: 1px solid #e0e0e0;\n  background-color: #fafafa;\n  display: flex;\n  align-items: center;\n  text-align: center;\n  padding: 5px 10px;\n  height: 100%;\n}\n.r-select-grid .r-select-gridtable .r-select-gridheader .r-select-row .r-select-headercell .r-select-headercell-text {\n  width: 100%;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row {\n  background-color: #FFFFFF;\n  cursor: pointer;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .cell-fixed {\n  position: sticky;\n  z-index: 1;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row.fisrt-row .r-select-rowcell {\n  border-top-width: 0px !important;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row.last-row .r-select-rowcell {\n  border-bottom: 1px solid #e0e0e0;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell {\n  border-top: 1px solid #e0e0e0;\n  height: 30px !important;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  padding: 7px 9px;\n  vertical-align: middle !important;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell.r-select-move {\n  background-color: rgba(235, 70, 25, 0.1) !important;\n  color: #eb4619 !important;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell.r-select-active {\n  background-color: #eb4619 !important;\n  color: #FFFFFF !important;\n}\n.r-tooltip .r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell.r-hidden {\n  display: none;\n}\n.r-tooltip .r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell.r-hidden ::after {\n  display: none;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell .r-icon-expand {\n  transition: transform 0.3s ease !important;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell .r-icon-expand.is-open {\n  transform: rotate(90deg) !important;\n  -moz-transform: rotate(90deg);\n  -webkit-transform: rotate(90deg);\n  -o-transform: rotate(90deg);\n}\n.r-select-grid .r-select-gridtable.no-header .r-select-rowcell {\n  border: none !important;\n}\n.r-select-grid .r-no-data {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  padding: 7px 9px;\n  color: #8f8f8f;\n}\n.r-select-grid .r-select-footer {\n  height: 30px;\n  background-color: #fafafa;\n}\n.r-select-grid .r-select-footer button {\n  font-weight: 400 !important;\n  font-size: 13px;\n}\n.r-select-grid .r-select-footer .r-btn {\n  border-width: 0px !important;\n}\n\n.r-pagesize .react-select-table .select-table-control {\n  border-radius: 0px;\n  border: 0px;\n  border-bottom: 1px solid #e0e0e0 !important;\n}\n.r-pagesize .react-select-table .select-table-control.r-select-is-focus {\n  border: 0px !important;\n  border-bottom: 1px solid #1989fa !important;\n}\n\n.r-sidebar {\n  width: 400px;\n  right: -400px;\n  padding: 0;\n  background-color: #FFFFFF;\n  z-index: 1051;\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  height: 100vh;\n  height: calc(var(--vh, 1vh) * 100);\n  transition: right 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99);\n  backface-visibility: hidden;\n  border-left: 1px solid rgba(0, 0, 0, 0.05);\n}\n.r-sidebar.open {\n  box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 5px 15px 0 rgba(0, 0, 0, 0.08);\n  right: 0;\n}\n.r-sidebar .modal-header {\n  background-color: #FFFFFF;\n}\n.r-sidebar .modal-header .btn-close {\n  padding: 0.8rem;\n  box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.1);\n  border-radius: 0.357rem;\n  background-color: #FFFFFF;\n  opacity: 1;\n  transition: all 0.23s ease 0.1s;\n  position: relative;\n  transform: translate(18px, -10px);\n}\n.r-sidebar .modal-header .btn-close:hover, .r-sidebar .modal-header .btn-close:focus, .r-sidebar .modal-header .btn-close:active {\n  opacity: 1;\n  outline: none;\n  transform: translate(15px, -2px);\n  box-shadow: none;\n}\n\n.r-sidebar .react-select {\n  max-width: 100%;\n}\n\n.r-sidebar {\n  width: 400px;\n  right: -100vw;\n  height: 100vh;\n}\n.r-sidebar .r-handle {\n  position: fixed;\n  background-color: #FFFFFF;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  filter: drop-shadow(0.9px 0.9px 1.5px);\n  height: 50px;\n  display: flex;\n  align-items: center;\n  border-radius: 0px 5px 5px 0px;\n  cursor: pointer;\n  margin-left: 7px;\n  z-index: 9;\n}\n.r-sidebar.customizer-md {\n  width: 600px;\n}\n.r-sidebar.customizer-lg {\n  width: 800px;\n}\n.r-sidebar.customizer-500 {\n  width: 500px;\n}\n@media (max-width: 500px) {\n  .r-sidebar.customizer-500 {\n    width: 100vw;\n  }\n}\n.r-sidebar.customizer-600 {\n  width: 600px;\n}\n@media (max-width: 600px) {\n  .r-sidebar.customizer-600 {\n    width: 100vw;\n  }\n}\n.r-sidebar.customizer-700 {\n  width: 700px;\n}\n@media (max-width: 700px) {\n  .r-sidebar.customizer-700 {\n    width: 100vw;\n  }\n}\n.r-sidebar.customizer-800 {\n  width: 800px;\n}\n@media (max-width: 800px) {\n  .r-sidebar.customizer-800 {\n    width: 100vw;\n  }\n}\n.r-sidebar.customizer-900 {\n  width: 900px;\n}\n@media (max-width: 900px) {\n  .r-sidebar.customizer-900 {\n    width: 100vw;\n  }\n}\n.r-sidebar.customizer-1000 {\n  width: 1000px;\n}\n@media (max-width: 1000px) {\n  .r-sidebar.customizer-1000 {\n    width: 100vw;\n  }\n}\n.r-sidebar.customizer-1500 {\n  width: 1500px;\n}\n@media (max-width: 1500px) {\n  .r-sidebar.customizer-1500 {\n    width: 100vw;\n  }\n}\n.r-sidebar.fullscreen {\n  width: 100%;\n}\n.r-sidebar.open {\n  right: 0;\n}\n\n.r-datepicker {\n  position: relative;\n}\n.r-datepicker .form-control {\n  height: 28px;\n}\n\n.r-datepicker-popup {\n  background: white;\n  border: 1px solid #e0e0e0;\n  padding: 15px 5px !important;\n}\n.r-datepicker-popup .rdp-nav {\n  display: none;\n}\n.r-datepicker-popup .rdp-month_caption {\n  display: none;\n}\n.r-datepicker-popup .select-month-year {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  padding: 5px 5px 8px 5px;\n}\n.r-datepicker-popup .select-month-year .select-month {\n  text-align: right;\n  width: 90px !important;\n}\n.r-datepicker-popup .select-month-year .select-year {\n  text-align: left;\n  width: 65px !important;\n}\n.r-datepicker-popup .select-month-year svg:hover {\n  color: #eb4619;\n}\n.r-datepicker-popup .select-month-year .select-table-control .select-table-container {\n  color: rgba(0, 0, 0, 0.8705882353) !important;\n  font-size: 14px !important;\n  font-weight: 600;\n}\n.r-datepicker-popup .select-month-year .select-table-control .select-table-container .select-input {\n  cursor: pointer !important;\n}\n.r-datepicker-popup .select-month-year .react-select-table .select-table-control {\n  border: none;\n}\n.r-datepicker-popup .select-month-year .react-select-table .r-select-is-focus {\n  border: none !important;\n}\n.r-datepicker-popup .select-month-year .select-table-indicator {\n  display: none;\n}\n.r-datepicker-popup .rdp-weekday {\n  color: rgba(0, 0, 0, 0.8705882353) !important;\n  opacity: 1 !important;\n  font-weight: 500;\n  font-size: 14px !important;\n}\n.r-datepicker-popup .rdp-day {\n  color: rgba(0, 0, 0, 0.8705882353) !important;\n  font-size: 13.5px !important;\n  height: 32px !important;\n  width: 32px !important;\n}\n.r-datepicker-popup .rdp-day .rdp-day_button {\n  height: 32px !important;\n  width: 32px !important;\n}\n.r-datepicker-popup .rdp-day.rdp-today {\n  font-weight: bold;\n  color: #eb4619;\n}\n.r-datepicker-popup .rdp-day.rdp-today .rdp-day_button {\n  border: 1px solid #eb4619;\n  border-radius: 8px;\n}\n.r-datepicker-popup .rdp-day.rdp-selected .rdp-day_button {\n  border: 1px solid #eb4619;\n  background-color: #eb4619;\n  color: #FFFFFF;\n  border-radius: 8px;\n}\n.r-datepicker-popup .rdp-day.rdp-in-range .rdp-day_button {\n  background-color: #fce6df;\n  color: #eb4619;\n  border-radius: 2px;\n  height: 22px !important;\n  border-width: 0px !important;\n}\n.r-datepicker-popup .rdp-day .rdp-day_button:hover {\n  background-color: #fce6df;\n  color: #eb4619;\n  border-radius: 8px;\n}\n.r-datepicker-popup .btn-today {\n  margin-top: 5px;\n  text-align: center;\n  font-size: 13px;\n  color: #eb4619;\n  cursor: pointer;\n  user-select: none;\n  font-weight: 500;\n}\n.r-datepicker-popup .btn-today:hover {\n  text-decoration: underline;\n}\n\n.tab-custom {\n  font-family: Roboto, \"Segoe UI\", GeezaPro, \"DejaVu Serif\", \"sans-serif\", -apple-system, BlinkMacSystemFont;\n  display: flex;\n}\n.tab-custom.tab-parent {\n  border-bottom: solid 1px #c9c9c9;\n}\n.tab-custom .btn-scroll {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n}\n.tab-custom .tab-component::-webkit-scrollbar {\n  display: none;\n  /* Ẩn thanh cuộn nếu không cần */\n}\n.tab-custom .tab-component {\n  white-space: nowrap;\n  overflow-x: hidden;\n  scroll-behavior: smooth;\n}\n.tab-custom .tab-component > * {\n  display: inline-block;\n}\n.tab-custom .tab-component .tab-custom-item {\n  display: inline-block;\n  padding: 3px 10px;\n  line-height: 23px;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n  text-transform: uppercase;\n  height: 30px;\n  color: rgba(0, 0, 0, 0.5);\n}\n.tab-custom .tab-component .tab-custom-item.active {\n  border-bottom: solid 2px #eb4619 !important;\n  color: #eb4619;\n}\n.tab-custom.tab-child .tab-custom-item {\n  font-size: 12px !important;\n  line-height: 23px !important;\n  border-radius: 5px 5px 0px 0px;\n  margin: 8px 3px 0px 3px;\n  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;\n}\n\n.bs-stepper {\n  background-color: #FFFFFF;\n  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);\n  border-radius: 0.5rem;\n}\n.bs-stepper .bs-stepper-header {\n  padding: 1.5rem 1.5rem;\n  flex-wrap: wrap;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n  margin: 0;\n}\n.bs-stepper .bs-stepper-header .line {\n  flex: 0;\n  min-width: auto;\n  min-height: auto;\n  background-color: transparent;\n  margin: 0;\n  padding: 0 1.75rem;\n  color: #283046;\n  font-size: 1.5rem;\n}\n.bs-stepper .bs-stepper-header .step {\n  margin-bottom: 0.25rem;\n  margin-top: 0.25rem;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger {\n  flex-wrap: nowrap;\n  padding: 0;\n  font-weight: normal;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-box {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 38px;\n  height: 38px;\n  padding: 0.5em 0;\n  font-weight: 500;\n  color: #babfc7;\n  background-color: rgba(186, 191, 199, 0.12);\n  border-radius: 0.35rem;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-label {\n  text-align: left;\n  margin: 0;\n  margin-top: 0.5rem;\n  margin-left: 1rem;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-label .bs-stepper-title {\n  display: inherit;\n  color: #283046;\n  font-weight: 600;\n  line-height: 1rem;\n  margin-bottom: 0rem;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-label .bs-stepper-subtitle {\n  font-weight: 400;\n  font-size: 0.85rem;\n  color: #b9b9c3;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger:hover {\n  background-color: transparent;\n}\n.bs-stepper .bs-stepper-header .step.active .step-trigger .bs-stepper-box {\n  background-color: #eb4619;\n  color: #FFFFFF;\n  box-shadow: 0 3px 6px 0 rgba(235, 70, 25, 0.4);\n}\n.bs-stepper .bs-stepper-header .step.active .step-trigger .bs-stepper-label .bs-stepper-title {\n  color: #eb4619;\n}\n.bs-stepper .bs-stepper-header .step.crossed .step-trigger .bs-stepper-box {\n  background-color: rgba(235, 70, 25, 0.12);\n  color: #eb4619;\n}\n.bs-stepper .bs-stepper-header .step.crossed .step-trigger .bs-stepper-label .bs-stepper-title {\n  color: #b9b9c3;\n}\n.bs-stepper .bs-stepper-header .step.crossed + .line {\n  color: #eb4619;\n}\n.bs-stepper .bs-stepper-content {\n  padding: 1.5rem 1.5rem;\n}\n.bs-stepper .bs-stepper-content .content {\n  margin-left: 0;\n}\n.bs-stepper .bs-stepper-content .content .content-header {\n  margin-bottom: 1rem;\n}\n.bs-stepper.vertical .bs-stepper-header {\n  border-right: 1px solid #e0e0e0;\n  border-bottom: none;\n}\n.bs-stepper.vertical .bs-stepper-header .step .step-trigger {\n  padding: 1rem 0;\n}\n.bs-stepper.vertical .bs-stepper-header .line {\n  display: none;\n}\n.bs-stepper.vertical .bs-stepper-content {\n  width: 100%;\n  padding-top: 2.5rem;\n}\n.bs-stepper.vertical .bs-stepper-content .content:not(.active) {\n  display: none;\n}\n.bs-stepper.vertical.wizard-icons .step {\n  text-align: center;\n}\n.bs-stepper.wizard-modern {\n  background-color: transparent;\n  box-shadow: none;\n}\n.bs-stepper.wizard-modern .bs-stepper-header {\n  border: none;\n}\n.bs-stepper.wizard-modern .bs-stepper-content {\n  background-color: #FFFFFF;\n  border-radius: 0.5rem;\n  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);\n}\n\n.horizontal-wizard,\n.vertical-wizard,\n.modern-horizontal-wizard,\n.modern-vertical-wizard {\n  margin-bottom: 2.2rem;\n}\n\nhtml[data-textdirection=rtl] .btn-prev,\nhtml[data-textdirection=rtl] .btn-next {\n  display: flex;\n}\nhtml[data-textdirection=rtl] .btn-prev i,\nhtml[data-textdirection=rtl] .btn-prev svg,\nhtml[data-textdirection=rtl] .btn-next i,\nhtml[data-textdirection=rtl] .btn-next svg {\n  transform: rotate(-180deg);\n}\n\n@media (max-width: 992px) {\n  .bs-stepper .bs-stepper-header {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n  .bs-stepper .bs-stepper-header .step .step-trigger {\n    padding: 0.5rem 0 !important;\n    flex-direction: row;\n  }\n  .bs-stepper .bs-stepper-header .line {\n    display: none;\n  }\n  .bs-stepper.vertical {\n    flex-direction: column;\n  }\n  .bs-stepper.vertical .bs-stepper-header {\n    align-items: flex-start;\n  }\n  .bs-stepper.vertical .bs-stepper-content {\n    padding-top: 1.5rem;\n  }\n}\n.r-context-popover .popover-arrow {\n  display: none !important;\n}\n.r-context-popover .popover-body {\n  padding: 5px !important;\n  border: none !important;\n  border-radius: 10px;\n}\n.r-context-popover .popover-body .r-context-item {\n  padding: 5px 10px;\n  font-size: 13px;\n  cursor: pointer;\n  border-radius: 5px;\n  display: flex;\n  align-items: center;\n}\n.r-context-popover .popover-body .r-context-item:hover {\n  background-color: rgba(235, 70, 25, 0.1);\n  color: #eb4619;\n}\n\n.r-table-edit .r-grid {\n  font-size: 12px;\n}\n.r-table-edit .r-grid .r-search {\n  display: flex;\n  position: relative;\n  align-items: center;\n}\n.r-table-edit .r-grid .r-search .input__value {\n  z-index: 1;\n}\n.r-table-edit .r-grid .r-search .input__value.is-clearable {\n  padding-right: 25px;\n}\n.r-table-edit .r-grid .r-search .input__clear-icon {\n  position: absolute;\n  right: 5px;\n  z-index: 10;\n}\n.r-table-edit .r-grid .r-gridtable {\n  -webkit-overflow-scrolling: touch;\n  overflow-x: auto;\n  overflow-y: scroll;\n  position: relative;\n  background-color: #FFFFFF;\n  color: rgba(0, 0, 0, 0.8705882353);\n  font-weight: 400;\n  border: 1px solid #e0e0e0;\n  /* Toàn bộ thanh cuộn */\n  /* Nền của thanh cuộn */\n  /* Thanh trượt (thumb) */\n  /* Khi hover */\n}\n.r-table-edit .r-grid .r-gridtable table {\n  table-layout: fixed;\n  border-collapse: separate;\n  border-spacing: 0px;\n}\n.r-table-edit .r-grid .r-gridtable::-webkit-scrollbar {\n  width: 9px;\n  /* Độ rộng của thanh cuộn */\n  height: 9px;\n  /* Độ cao của thanh cuộn */\n}\n.r-table-edit .r-grid .r-gridtable::-webkit-scrollbar-track {\n  background: #FCFCFC;\n  /* Màu nền nhạt */\n}\n.r-table-edit .r-grid .r-gridtable::-webkit-scrollbar-thumb {\n  background: #8B8B8B;\n  /* Màu xám nhạt */\n  border-radius: 6px;\n  /* Bo góc giống Edge */\n}\n.r-table-edit .r-grid .r-gridtable::-webkit-scrollbar-thumb:hover {\n  background: #636363;\n  /* Màu đậm hơn khi hover */\n}\n.r-table-edit .r-grid .r-gridtable .react-resizable-handle.react-resizable-handle-se {\n  position: absolute;\n  right: 0px;\n  top: 0px;\n  width: 10px;\n  height: 100%;\n  cursor: col-resize;\n  background-image: none;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter svg.active {\n  color: #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter-popup .react-select-table .select-value {\n  line-height: 20px !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter-popup .react-select-table .select-placeholder {\n  line-height: 20px !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter-popup .react-select-table .r-select-is-focus {\n  border-color: #eb4619 !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter-popup .form-control:focus {\n  border-color: #eb4619 !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-no-data {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  padding: 20px 9px;\n  color: #8f8f8f;\n}\n.r-table-edit .r-grid .r-gridtable .r-loading-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(255, 255, 255, 0.3);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 3;\n}\n.r-table-edit .r-grid .r-gridtable .r-loading-overlay .r-loading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  padding: 7px 9px;\n  color: #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed {\n  z-index: 2 !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed.fix-right .r-headercell-div {\n  border-left: 1px solid #e0e0e0;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed.fix-left .r-headercell-div {\n  border-right: 1px solid #e0e0e0;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed.fix-left.fixed-last .r-headercell-div {\n  box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed.fix-right.fixed-last .r-headercell-div {\n  box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .r-headercell {\n  color: rgba(0, 0, 0, 0.8705882353);\n  position: sticky;\n  padding: 0px;\n  height: 42px;\n  z-index: 1;\n  border-width: 0px;\n  line-height: 16px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .r-headercell .r-headercell-div {\n  border-right: 1px solid #e0e0e0;\n  border-bottom: 1px solid #e0e0e0;\n  background-color: #FFFFFF;\n  display: flex;\n  align-items: center;\n  text-align: center;\n  padding: 5px 10px;\n  height: 100%;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .r-headercell .header-content {\n  display: flex;\n  flex: 1 1 0%;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .r-headercell .header-content .text-content {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row:first-of-type .r-rowcell-div {\n  border-top-color: #FFFFFF;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row {\n  font-size: 13px;\n  transition: transform 0.05s linear;\n  will-change: transform;\n  backface-visibility: hidden;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .cell-fixed {\n  position: sticky;\n  z-index: 1;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .cell-fixed .r-rowcell.r-cell-selected-right {\n  margin-right: 1px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row.r-last-row .r-rowcell .r-rowcell-div {\n  border-bottom: 1px solid #e0e0e0;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell {\n  background-color: #FFFFFF;\n  border-bottom: 1px solid #e0e0e0;\n  border-right: 1px solid #e0e0e0;\n  vertical-align: middle;\n  padding: 0;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.r-cell-sum-group {\n  background-color: #fafafa;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.r-cell-sum-group .r-rowcell-div {\n  padding-left: 10px;\n  padding-right: 5px;\n  display: flex;\n  align-items: center;\n  background-color: #fafafa;\n  font-weight: 550;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.r-cell-group {\n  left: 0px;\n  position: sticky;\n  z-index: 1;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.r-cell-group .r-rowcell-div {\n  padding-left: 10px;\n  padding-right: 5px !important;\n  display: flex;\n  align-items: center;\n  background-color: #fafafa;\n  font-weight: 550;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.r-cell-group .r-rowcell-div svg {\n  margin-right: 10px;\n  cursor: pointer;\n  user-select: none;\n  transition: transform 0.2s ease-in-out;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.r-cell-group .r-rowcell-div svg:hover {\n  color: #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.cell-fixed .r-rowcell-div.r-cell-selected-right {\n  padding-right: 1px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.fix-right {\n  border-left: 1px solid #e0e0e0;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.fix-right.fixed-last {\n  border-left: 1px solid #e0e0e0;\n  box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.fix-left.fixed-last {\n  border-right: 1px solid #e0e0e0;\n  box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.r-active-row {\n  background-color: #fce6df;\n  border-right: 2px solid #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div {\n  min-height: 28px !important;\n  border: 1px solid transparent;\n  position: relative;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .arrow-context-menu {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 15px;\n  width: 15px;\n  background-color: #FFFFFF;\n  border-radius: 10px;\n  border: 1px solid #e0e0e0;\n  box-shadow: 0px 0px 2px #e0e0e0;\n  right: -5px;\n  bottom: -5px;\n  z-index: 10000;\n  cursor: pointer;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.command {\n  padding-top: 0px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div:focus {\n  outline: none;\n  /* bỏ viền focus mặc định */\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.r-cell-disable {\n  background-color: #f9f9f9;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.r-active-cell {\n  background-color: rgb(255, 240, 240);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-cell-text:focus {\n  outline: none;\n  /* bỏ viền focus mặc định */\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-icon-invalid {\n  position: absolute;\n  width: 10px;\n  height: 10px;\n  top: 0px;\n  left: -6px;\n  rotate: -90deg;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-drag-icon {\n  position: absolute;\n  border: 1px solid #FFFFFF;\n  bottom: -2px;\n  right: -2px;\n  width: 7px;\n  height: 7px;\n  background-color: #eb4619;\n  border-radius: 20%;\n  cursor: crosshair;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-cell-text {\n  padding: 0px 7px;\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  min-height: 28px;\n  flex: 1;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-cell-text .r-drop-icon {\n  position: absolute;\n  fill: #c4c4c4 !important;\n  right: 8.5px;\n  top: 3.5px;\n  cursor: pointer;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .is-invalid {\n  border-width: 0px !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .is-invalid .r-select-is-invalid {\n  border-width: 0px !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.r-cell-selected-top {\n  border-top: 1px solid #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.r-cell-selected-bottom {\n  border-bottom: 1px solid #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.r-cell-selected-left {\n  border-left: 1px solid #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.r-cell-selected-right {\n  border-right: 1px solid #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-datepicker .form-control {\n  padding: 0px 4px;\n  border-radius: 0px;\n  border-width: 0px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .react-select-table.is-invalid {\n  border-width: 0px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .react-select-table .r-select-is-focus {\n  border-width: 0px !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .react-select-table .select-table-control {\n  border-radius: 0px;\n  border-width: 0px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .react-select-table .select-table-control.r-select-is-focus {\n  border: 1px solid #1989fa;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit .display-value {\n  cursor: pointer;\n  border-radius: 0px;\n  background-color: #FFFFFF;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit .input-display {\n  border-width: 0px;\n  box-sizing: border-box;\n  border: none;\n  /* Loại bỏ border */\n  outline: none;\n  /* Loại bỏ outline khi input được chọn */\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit .form-input-content .form-control {\n  border-radius: 4px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit .form-input-content .form-control:focus {\n  border: 1px solid #1989fa;\n  outline: none;\n  box-shadow: none;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit input::placeholder {\n  color: #eb4619;\n  opacity: 1;\n  /* Firefox */\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__display {\n  vertical-align: middle;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__edit {\n  display: none;\n  text-align: left;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__edit.active {\n  display: flex;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__edit .form-label {\n  font-size: 10px;\n  margin-bottom: 0px;\n  text-align: left;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__edit .form-control {\n  border-radius: 0px;\n  height: 23px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__edit .form__element {\n  margin: 0px 2px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-date-input {\n  text-align: center;\n  height: 29px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  padding: 5px;\n  font-size: 14px;\n  background-color: #f9f9f9;\n  color: #333;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-control:focus {\n  border-radius: 0px;\n  border-width: 0px;\n  background-color: #f8f8f8;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div input {\n  font-size: 13px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridfoot {\n  color: #283046;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridfoot .r-row {\n  bottom: 0px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridfoot .r-row .r-footer {\n  background-color: #fafafa;\n  font-size: 14px;\n  font-weight: 600;\n  width: 100px;\n  position: sticky;\n  z-index: 1;\n  bottom: 0;\n  border-width: 0px;\n  padding: 0px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridfoot .r-row .r-footer.cell-fixed {\n  z-index: 2;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridfoot .r-row .r-footer .r-footer-div {\n  height: 30px;\n  padding: 5px 0px;\n}\n.r-table-edit .r-grid .r-gridtable .formula-dropdown {\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 15px;\n}\n.r-table-edit .r-grid .text-left .form-label {\n  text-align: left;\n}\n.r-table-edit .r-grid .r-toolbar {\n  border: 1px solid #e0e0e0;\n  height: 44px;\n}\n.r-table-edit .r-grid .r-toolbar.r-toolbar-bottom {\n  border-top-width: 0px;\n}\n.r-table-edit .r-grid .r-toolbar.r-toolbar-top {\n  border-bottom-width: 0px;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items svg {\n  cursor: pointer;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items svg:hover {\n  color: #eb4619;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-left {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-left .r-toolbar-item {\n  margin: 7px 0px 7px 7px;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-center {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-center .r-toolbar-item {\n  margin: 7px 3px 7px 3px;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-right {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-right .r-toolbar-item {\n  margin: 7px 7px 7px 0px;\n}\n.r-table-edit .r-setting-container {\n  margin: 0px 15px;\n}\n.r-table-edit .r-setting-container .r-setting-content {\n  -webkit-overflow-scrolling: touch;\n  overflow-x: auto;\n  overflow-y: scroll;\n  position: relative;\n  background-color: #FFFFFF;\n  color: rgba(0, 0, 0, 0.8705882353);\n  font-weight: 400;\n  border-left: 1px solid #e0e0e0;\n  border-right: 1px solid #e0e0e0;\n  /* Toàn bộ thanh cuộn */\n  /* Nền của thanh cuộn */\n  /* Thanh trượt (thumb) */\n  /* Khi hover */\n}\n.r-table-edit .r-setting-container .r-setting-content::-webkit-scrollbar {\n  width: 9px;\n  /* Độ rộng của thanh cuộn */\n  height: 9px;\n  /* Độ cao của thanh cuộn */\n}\n.r-table-edit .r-setting-container .r-setting-content::-webkit-scrollbar-track {\n  background: #FCFCFC;\n  /* Màu nền nhạt */\n}\n.r-table-edit .r-setting-container .r-setting-content::-webkit-scrollbar-thumb {\n  background: #8B8B8B;\n  /* Màu xám nhạt */\n  border-radius: 6px;\n  /* Bo góc giống Edge */\n}\n.r-table-edit .r-setting-container .r-setting-content::-webkit-scrollbar-thumb:hover {\n  background: #636363;\n  /* Màu đậm hơn khi hover */\n}\n.r-table-edit .r-setting-container .r-setting-row {\n  padding: 5px !important;\n  margin: 0px;\n  border-bottom: 1px solid #e0e0e0;\n  font-size: 13px;\n  display: flex;\n  align-items: center;\n}\n.r-table-edit .r-setting-container .r-setting-row .r-setting-cell {\n  padding-right: 10px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.r-table-edit .r-setting-container .r-setting-row .r-setting-cell .form-control {\n  font-size: 13px !important;\n}\n.r-table-edit .r-setting-container .r-setting-row.r-setting-header {\n  font-size: 12px !important;\n}\n.r-table-edit.r-virtualized-table .r-row:hover .r-rowcell {\n  background-color: #fce6df !important;\n}\n.r-table-edit .r-pager {\n  border: 1px solid #e0e0e0;\n  border-top-width: 0px;\n  min-height: 50px;\n  width: 100%;\n  display: inline-block;\n}\n.r-table-edit .r-pager .r-pagercontainer {\n  margin-left: 10px;\n  float: left;\n  height: 100%;\n  display: block;\n  align-items: center;\n}\n.r-table-edit .r-pager .r-pagercontainer .r-button {\n  display: inline-block;\n  margin: 9px 6px;\n  height: 30px;\n  width: 30px;\n  padding: 6px;\n  border-width: 0px;\n  background-color: transparent;\n}\n.r-table-edit .r-pager .r-pagercontainer .r-button svg {\n  font-size: 16px;\n}\n.r-table-edit .r-pager .r-pagercontainer .r-number {\n  display: inline-block;\n  margin: 10px 4px 0px 0px;\n  height: 25px;\n  width: 25px;\n  font-size: 13px;\n  padding-top: 4px;\n  text-align: center;\n  cursor: pointer;\n  border-radius: 5px;\n}\n.r-table-edit .r-pager .r-pagercontainer .r-number.r-active {\n  background-color: rgba(235, 70, 25, 0.1);\n  color: #eb4619;\n}\n.r-table-edit .r-pager .r-pagercontainer .r-number:hover {\n  border: 1px solid #eb4619;\n}\n.r-table-edit .r-pager .r-pagesize {\n  margin-left: 20px;\n  font-size: 13px;\n  display: inline-block;\n}\n.r-table-edit .r-pager .r-pagesize .select-pagesize__menu-portal {\n  z-index: 5;\n}\n.r-table-edit .r-pager .r-parentmsgbar {\n  font-size: 13px;\n  float: right;\n  padding-bottom: 9px;\n  padding-right: 18px;\n  padding-top: 14px;\n}\n\n.r-tooltip .tooltip-inner {\n  font-size: 11px;\n}\n.r-tooltip.tooltip-error ::before {\n  border-top-color: rgb(235, 78, 78);\n}\n.r-tooltip.tooltip-error .tooltip-inner {\n  background-color: rgb(235, 78, 78);\n}\n\n.btn-input-style {\n  font-weight: 500;\n  text-transform: uppercase;\n  border: 1px solid #e0e0e0;\n  border-radius: 5px;\n  margin-left: 3px;\n  height: 28px;\n  padding: 2px 5px;\n  cursor: pointer;\n}\n.btn-input-style:hover {\n  background-color: rgba(235, 70, 25, 0.1);\n  color: #eb4619;\n}\n.btn-input-style.active-custom {\n  background-color: #eb4619;\n  color: #FFFFFF;\n}";
+var css_248z$2 = "@charset \"UTF-8\";\n.react-select-table .select-table-control {\n  opacity: 1;\n  border: 1px solid hsl(0, 0%, 80%);\n  border-radius: 0.357rem;\n  width: 100%;\n  height: 28px;\n  background-color: #FFFFFF;\n  display: flex;\n  align-items: center;\n  padding: 2px 8px;\n}\n.react-select-table .select-table-control .select-table-indicator svg {\n  fill: #c4c4c4 !important;\n}\n.react-select-table .select-table-control .icon-clear {\n  font-size: 25px;\n  margin-top: 2px;\n  font-weight: 500;\n  color: #c4c4c4;\n}\n.react-select-table .select-table-control .icon-clear:hover {\n  color: rgba(0, 0, 0, 0.8705882353) !important;\n}\n.react-select-table .select-table-control.r-select-is-open .select-table-indicator svg {\n  fill: rgba(0, 0, 0, 0.8705882353) !important;\n}\n.react-select-table .select-table-control.r-select-is-invalid {\n  border: 1px solid red !important;\n}\n.react-select-table .select-table-control.r-select-is-focus {\n  border: 1px solid #1989fa !important;\n}\n.react-select-table .select-table-control.r-select-is-disabled {\n  background-color: #efefef !important;\n}\n.react-select-table .select-table-control .select-table-container {\n  position: relative;\n  flex: 1;\n}\n.react-select-table .select-table-control .select-table-container .input-container {\n  background-color: transparent;\n  white-space: nowrap;\n  top: 0px;\n  left: 0px;\n  display: inline;\n}\n.react-select-table .select-table-control .select-table-container .input-container .select-input {\n  background-color: transparent;\n  text-align: center;\n  width: 100%;\n  box-sizing: border-box;\n  margin-left: -3px;\n  border: none;\n  /* Loại bỏ border */\n  outline: none;\n  /* Loại bỏ outline khi input được chọn */\n}\n.react-select-table .select-table-control .select-table-container .input-container .select-input:focus {\n  border-width: 0px !important;\n}\n.react-select-table .select-table-control .select-table-container .select-placeholder {\n  position: absolute;\n  color: #283046;\n  margin-top: 1px;\n  background-color: transparent;\n}\n.react-select-table .select-table-control .select-table-container .select-value {\n  position: absolute;\n  background-color: transparent;\n  bottom: 0px;\n  left: 0px;\n  width: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.react-select-table .formula-dropdown {\n  min-width: min-content !important;\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 15px;\n}\n.react-select-table input::placeholder {\n  color: #000000 !important;\n  opacity: 1;\n  /* Firefox */\n}\n\n.r-select-grid.r-select-tree-grid .r-select-gridtable .r-select-row:hover {\n  background-color: rgba(235, 70, 25, 0.1) !important;\n  color: #eb4619;\n}\n\n.r-select-grid {\n  font-size: 12px;\n  font-family: Montserrat, Helvetica, Arial, serif;\n  font-weight: 500 !important;\n  border-radius: 4px !important;\n  overflow: hidden;\n}\n.r-select-grid table {\n  table-layout: fixed;\n  border-collapse: separate;\n  border-spacing: 0px;\n}\n.r-select-grid .r-select-gridtable {\n  -webkit-overflow-scrolling: touch;\n  overflow-x: auto;\n  overflow-y: auto;\n  position: relative;\n  background-color: #FFFFFF;\n  color: rgba(0, 0, 0, 0.8705882353) !important;\n  font-weight: 400 !important;\n  font-size: 13px !important;\n  /* Toàn bộ thanh cuộn */\n}\n.r-select-grid .r-select-gridtable::-webkit-scrollbar {\n  width: 9px;\n  height: 9px;\n}\n.r-select-grid .r-select-gridtable::-webkit-scrollbar-track {\n  background: #FCFCFC;\n}\n.r-select-grid .r-select-gridtable::-webkit-scrollbar-thumb {\n  background: #8B8B8B;\n  border-radius: 6px;\n}\n.r-select-grid .r-select-gridtable::-webkit-scrollbar-thumb:hover {\n  background: #636363;\n}\n.r-select-grid .r-select-gridtable .r-select-gridheader .r-select-row .r-select-headercell {\n  color: rgba(0, 0, 0, 0.8705882353) !important;\n  position: sticky;\n  padding: 0px;\n  height: 35px;\n  z-index: 1;\n  border-width: 0px;\n  line-height: 16px;\n}\n.r-select-grid .r-select-gridtable .r-select-gridheader .r-select-row .r-select-headercell .r-select-headercell-div {\n  border-bottom: 1px solid #e0e0e0;\n  background-color: #fafafa;\n  display: flex;\n  align-items: center;\n  text-align: center;\n  padding: 5px 10px;\n  height: 100%;\n}\n.r-select-grid .r-select-gridtable .r-select-gridheader .r-select-row .r-select-headercell .r-select-headercell-text {\n  width: 100%;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row {\n  background-color: #FFFFFF;\n  cursor: pointer;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .cell-fixed {\n  position: sticky;\n  z-index: 1;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row.fisrt-row .r-select-rowcell {\n  border-top-width: 0px !important;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row.last-row .r-select-rowcell {\n  border-bottom: 1px solid #e0e0e0;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell {\n  border-top: 1px solid #e0e0e0;\n  height: 30px !important;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  padding: 7px 9px;\n  vertical-align: middle !important;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell.r-select-move {\n  background-color: rgba(235, 70, 25, 0.1) !important;\n  color: #eb4619 !important;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell.r-select-active {\n  background-color: #eb4619 !important;\n  color: #FFFFFF !important;\n}\n.r-tooltip .r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell.r-hidden {\n  display: none;\n}\n.r-tooltip .r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell.r-hidden ::after {\n  display: none;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell .r-icon-expand {\n  transition: transform 0.3s ease !important;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell .r-icon-expand.is-open {\n  transform: rotate(90deg) !important;\n  -moz-transform: rotate(90deg);\n  -webkit-transform: rotate(90deg);\n  -o-transform: rotate(90deg);\n}\n.r-select-grid .r-select-gridtable.no-header .r-select-rowcell {\n  border: none !important;\n}\n.r-select-grid .r-no-data {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  padding: 7px 9px;\n  color: #8f8f8f;\n}\n.r-select-grid .r-select-footer {\n  height: 30px;\n  background-color: #fafafa;\n}\n.r-select-grid .r-select-footer button {\n  font-weight: 400 !important;\n  font-size: 13px;\n}\n.r-select-grid .r-select-footer .r-btn {\n  border-width: 0px !important;\n}\n\n.r-pagesize .react-select-table .select-table-control {\n  border-radius: 0px;\n  border: 0px;\n  border-bottom: 1px solid #e0e0e0 !important;\n}\n.r-pagesize .react-select-table .select-table-control.r-select-is-focus {\n  border: 0px !important;\n  border-bottom: 1px solid #1989fa !important;\n}\n\n.r-sidebar {\n  width: 400px;\n  right: -400px;\n  padding: 0;\n  background-color: #FFFFFF;\n  z-index: 1051;\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  height: 100vh;\n  height: calc(var(--vh, 1vh) * 100);\n  transition: right 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99);\n  backface-visibility: hidden;\n  border-left: 1px solid rgba(0, 0, 0, 0.05);\n}\n.r-sidebar.open {\n  box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 5px 15px 0 rgba(0, 0, 0, 0.08);\n  right: 0;\n}\n.r-sidebar .modal-header {\n  background-color: #FFFFFF;\n}\n.r-sidebar .modal-header .btn-close {\n  padding: 0.8rem;\n  box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.1);\n  border-radius: 0.357rem;\n  background-color: #FFFFFF;\n  opacity: 1;\n  transition: all 0.23s ease 0.1s;\n  position: relative;\n  transform: translate(18px, -10px);\n}\n.r-sidebar .modal-header .btn-close:hover, .r-sidebar .modal-header .btn-close:focus, .r-sidebar .modal-header .btn-close:active {\n  opacity: 1;\n  outline: none;\n  transform: translate(15px, -2px);\n  box-shadow: none;\n}\n\n.r-sidebar .react-select {\n  max-width: 100%;\n}\n\n.r-sidebar {\n  width: 400px;\n  right: -100vw;\n  height: 100vh;\n}\n.r-sidebar .r-handle {\n  position: fixed;\n  background-color: #FFFFFF;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  filter: drop-shadow(0.9px 0.9px 1.5px);\n  height: 50px;\n  display: flex;\n  align-items: center;\n  border-radius: 0px 5px 5px 0px;\n  cursor: pointer;\n  margin-left: 7px;\n  z-index: 9;\n}\n.r-sidebar.customizer-md {\n  width: 600px;\n}\n.r-sidebar.customizer-lg {\n  width: 800px;\n}\n.r-sidebar.customizer-500 {\n  width: 500px;\n}\n@media (max-width: 500px) {\n  .r-sidebar.customizer-500 {\n    width: 100vw;\n  }\n}\n.r-sidebar.customizer-600 {\n  width: 600px;\n}\n@media (max-width: 600px) {\n  .r-sidebar.customizer-600 {\n    width: 100vw;\n  }\n}\n.r-sidebar.customizer-700 {\n  width: 700px;\n}\n@media (max-width: 700px) {\n  .r-sidebar.customizer-700 {\n    width: 100vw;\n  }\n}\n.r-sidebar.customizer-800 {\n  width: 800px;\n}\n@media (max-width: 800px) {\n  .r-sidebar.customizer-800 {\n    width: 100vw;\n  }\n}\n.r-sidebar.customizer-900 {\n  width: 900px;\n}\n@media (max-width: 900px) {\n  .r-sidebar.customizer-900 {\n    width: 100vw;\n  }\n}\n.r-sidebar.customizer-1000 {\n  width: 1000px;\n}\n@media (max-width: 1000px) {\n  .r-sidebar.customizer-1000 {\n    width: 100vw;\n  }\n}\n.r-sidebar.customizer-1500 {\n  width: 1500px;\n}\n@media (max-width: 1500px) {\n  .r-sidebar.customizer-1500 {\n    width: 100vw;\n  }\n}\n.r-sidebar.fullscreen {\n  width: 100%;\n}\n.r-sidebar.open {\n  right: 0;\n}\n\n.r-datepicker {\n  position: relative;\n}\n.r-datepicker .form-control {\n  height: 28px;\n}\n\n.r-datepicker-popup {\n  background: white;\n  border: 1px solid #e0e0e0;\n  padding: 15px 5px !important;\n}\n.r-datepicker-popup .rdp-nav {\n  display: none;\n}\n.r-datepicker-popup .rdp-month_caption {\n  display: none;\n}\n.r-datepicker-popup .select-month-year {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  padding: 5px 5px 8px 5px;\n}\n.r-datepicker-popup .select-month-year .select-month {\n  text-align: right;\n  width: 90px !important;\n}\n.r-datepicker-popup .select-month-year .select-year {\n  text-align: left;\n  width: 65px !important;\n}\n.r-datepicker-popup .select-month-year svg:hover {\n  color: #eb4619;\n}\n.r-datepicker-popup .select-month-year .select-table-control .select-table-container {\n  color: rgba(0, 0, 0, 0.8705882353) !important;\n  font-size: 14px !important;\n  font-weight: 600;\n}\n.r-datepicker-popup .select-month-year .select-table-control .select-table-container .select-input {\n  cursor: pointer !important;\n}\n.r-datepicker-popup .select-month-year .react-select-table .select-table-control {\n  border: none;\n}\n.r-datepicker-popup .select-month-year .react-select-table .r-select-is-focus {\n  border: none !important;\n}\n.r-datepicker-popup .select-month-year .select-table-indicator {\n  display: none;\n}\n.r-datepicker-popup .rdp-weekday {\n  color: rgba(0, 0, 0, 0.8705882353) !important;\n  opacity: 1 !important;\n  font-weight: 500;\n  font-size: 14px !important;\n}\n.r-datepicker-popup .rdp-day {\n  color: rgba(0, 0, 0, 0.8705882353) !important;\n  font-size: 13.5px !important;\n  height: 32px !important;\n  width: 32px !important;\n}\n.r-datepicker-popup .rdp-day .rdp-day_button {\n  height: 32px !important;\n  width: 32px !important;\n}\n.r-datepicker-popup .rdp-day.rdp-today {\n  font-weight: bold;\n  color: #eb4619;\n}\n.r-datepicker-popup .rdp-day.rdp-today .rdp-day_button {\n  border: 1px solid #eb4619;\n  border-radius: 8px;\n}\n.r-datepicker-popup .rdp-day.rdp-selected .rdp-day_button {\n  border: 1px solid #eb4619;\n  background-color: #eb4619;\n  color: #FFFFFF;\n  border-radius: 8px;\n}\n.r-datepicker-popup .rdp-day.rdp-in-range .rdp-day_button {\n  background-color: #fce6df;\n  color: #eb4619;\n  border-radius: 2px;\n  height: 22px !important;\n  border-width: 0px !important;\n}\n.r-datepicker-popup .rdp-day .rdp-day_button:hover {\n  background-color: #fce6df;\n  color: #eb4619;\n  border-radius: 8px;\n}\n.r-datepicker-popup .btn-today {\n  margin-top: 5px;\n  text-align: center;\n  font-size: 13px;\n  color: #eb4619;\n  cursor: pointer;\n  user-select: none;\n  font-weight: 500;\n}\n.r-datepicker-popup .btn-today:hover {\n  text-decoration: underline;\n}\n\n.tab-custom {\n  font-family: Roboto, \"Segoe UI\", GeezaPro, \"DejaVu Serif\", \"sans-serif\", -apple-system, BlinkMacSystemFont;\n  display: flex;\n}\n.tab-custom.tab-parent {\n  border-bottom: solid 1px #c9c9c9;\n}\n.tab-custom .btn-scroll {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n}\n.tab-custom .tab-component::-webkit-scrollbar {\n  display: none;\n  /* Ẩn thanh cuộn nếu không cần */\n}\n.tab-custom .tab-component {\n  white-space: nowrap;\n  overflow-x: hidden;\n  scroll-behavior: smooth;\n}\n.tab-custom .tab-component > * {\n  display: inline-block;\n}\n.tab-custom .tab-component .tab-custom-item {\n  display: inline-block;\n  padding: 3px 10px;\n  line-height: 23px;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n  text-transform: uppercase;\n  height: 30px;\n  color: rgba(0, 0, 0, 0.5);\n}\n.tab-custom .tab-component .tab-custom-item.active {\n  border-bottom: solid 2px #eb4619 !important;\n  color: #eb4619;\n}\n.tab-custom.tab-child .tab-custom-item {\n  font-size: 12px !important;\n  line-height: 23px !important;\n  border-radius: 5px 5px 0px 0px;\n  margin: 8px 3px 0px 3px;\n  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;\n}\n\n.bs-stepper {\n  background-color: #FFFFFF;\n  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);\n  border-radius: 0.5rem;\n}\n.bs-stepper .bs-stepper-header {\n  padding: 1.5rem 1.5rem;\n  flex-wrap: wrap;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n  margin: 0;\n}\n.bs-stepper .bs-stepper-header .line {\n  flex: 0;\n  min-width: auto;\n  min-height: auto;\n  background-color: transparent;\n  margin: 0;\n  padding: 0 1.75rem;\n  color: #283046;\n  font-size: 1.5rem;\n}\n.bs-stepper .bs-stepper-header .step {\n  margin-bottom: 0.25rem;\n  margin-top: 0.25rem;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger {\n  flex-wrap: nowrap;\n  padding: 0;\n  font-weight: normal;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-box {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 38px;\n  height: 38px;\n  padding: 0.5em 0;\n  font-weight: 500;\n  color: #babfc7;\n  background-color: rgba(186, 191, 199, 0.12);\n  border-radius: 0.35rem;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-label {\n  text-align: left;\n  margin: 0;\n  margin-top: 0.5rem;\n  margin-left: 1rem;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-label .bs-stepper-title {\n  display: inherit;\n  color: #283046;\n  font-weight: 600;\n  line-height: 1rem;\n  margin-bottom: 0rem;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-label .bs-stepper-subtitle {\n  font-weight: 400;\n  font-size: 0.85rem;\n  color: #b9b9c3;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger:hover {\n  background-color: transparent;\n}\n.bs-stepper .bs-stepper-header .step.active .step-trigger .bs-stepper-box {\n  background-color: #eb4619;\n  color: #FFFFFF;\n  box-shadow: 0 3px 6px 0 rgba(235, 70, 25, 0.4);\n}\n.bs-stepper .bs-stepper-header .step.active .step-trigger .bs-stepper-label .bs-stepper-title {\n  color: #eb4619;\n}\n.bs-stepper .bs-stepper-header .step.crossed .step-trigger .bs-stepper-box {\n  background-color: rgba(235, 70, 25, 0.12);\n  color: #eb4619;\n}\n.bs-stepper .bs-stepper-header .step.crossed .step-trigger .bs-stepper-label .bs-stepper-title {\n  color: #b9b9c3;\n}\n.bs-stepper .bs-stepper-header .step.crossed + .line {\n  color: #eb4619;\n}\n.bs-stepper .bs-stepper-content {\n  padding: 1.5rem 1.5rem;\n}\n.bs-stepper .bs-stepper-content .content {\n  margin-left: 0;\n}\n.bs-stepper .bs-stepper-content .content .content-header {\n  margin-bottom: 1rem;\n}\n.bs-stepper.vertical .bs-stepper-header {\n  border-right: 1px solid #e0e0e0;\n  border-bottom: none;\n}\n.bs-stepper.vertical .bs-stepper-header .step .step-trigger {\n  padding: 1rem 0;\n}\n.bs-stepper.vertical .bs-stepper-header .line {\n  display: none;\n}\n.bs-stepper.vertical .bs-stepper-content {\n  width: 100%;\n  padding-top: 2.5rem;\n}\n.bs-stepper.vertical .bs-stepper-content .content:not(.active) {\n  display: none;\n}\n.bs-stepper.vertical.wizard-icons .step {\n  text-align: center;\n}\n.bs-stepper.wizard-modern {\n  background-color: transparent;\n  box-shadow: none;\n}\n.bs-stepper.wizard-modern .bs-stepper-header {\n  border: none;\n}\n.bs-stepper.wizard-modern .bs-stepper-content {\n  background-color: #FFFFFF;\n  border-radius: 0.5rem;\n  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);\n}\n\n.horizontal-wizard,\n.vertical-wizard,\n.modern-horizontal-wizard,\n.modern-vertical-wizard {\n  margin-bottom: 2.2rem;\n}\n\nhtml[data-textdirection=rtl] .btn-prev,\nhtml[data-textdirection=rtl] .btn-next {\n  display: flex;\n}\nhtml[data-textdirection=rtl] .btn-prev i,\nhtml[data-textdirection=rtl] .btn-prev svg,\nhtml[data-textdirection=rtl] .btn-next i,\nhtml[data-textdirection=rtl] .btn-next svg {\n  transform: rotate(-180deg);\n}\n\n@media (max-width: 992px) {\n  .bs-stepper .bs-stepper-header {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n  .bs-stepper .bs-stepper-header .step .step-trigger {\n    padding: 0.5rem 0 !important;\n    flex-direction: row;\n  }\n  .bs-stepper .bs-stepper-header .line {\n    display: none;\n  }\n  .bs-stepper.vertical {\n    flex-direction: column;\n  }\n  .bs-stepper.vertical .bs-stepper-header {\n    align-items: flex-start;\n  }\n  .bs-stepper.vertical .bs-stepper-content {\n    padding-top: 1.5rem;\n  }\n}\n.r-context-popover .popover-arrow {\n  display: none !important;\n}\n.r-context-popover .popover-body {\n  padding: 5px !important;\n  border: none !important;\n  border-radius: 10px;\n}\n.r-context-popover .popover-body .r-context-item {\n  padding: 5px 10px;\n  font-size: 13px;\n  cursor: pointer;\n  border-radius: 5px;\n  display: flex;\n  align-items: center;\n}\n.r-context-popover .popover-body .r-context-item:hover {\n  background-color: rgba(235, 70, 25, 0.1);\n  color: #eb4619;\n}\n\n.r-table-edit .r-grid {\n  font-size: 12px;\n}\n.r-table-edit .r-grid .r-search {\n  display: flex;\n  position: relative;\n  align-items: center;\n}\n.r-table-edit .r-grid .r-search .input__value {\n  z-index: 1;\n}\n.r-table-edit .r-grid .r-search .input__value.is-clearable {\n  padding-right: 25px;\n}\n.r-table-edit .r-grid .r-search .input__clear-icon {\n  position: absolute;\n  right: 5px;\n  z-index: 10;\n}\n.r-table-edit .r-grid .r-gridtable {\n  -webkit-overflow-scrolling: touch;\n  overflow-x: auto;\n  overflow-y: scroll;\n  position: relative;\n  background-color: #FFFFFF;\n  color: rgba(0, 0, 0, 0.8705882353);\n  font-weight: 400;\n  border: 1px solid #e0e0e0;\n  /* Toàn bộ thanh cuộn */\n  /* Nền của thanh cuộn */\n  /* Thanh trượt (thumb) */\n  /* Khi hover */\n}\n.r-table-edit .r-grid .r-gridtable table {\n  table-layout: fixed;\n  border-collapse: separate;\n  border-spacing: 0px;\n}\n.r-table-edit .r-grid .r-gridtable::-webkit-scrollbar {\n  width: 9px;\n  /* Độ rộng của thanh cuộn */\n  height: 9px;\n  /* Độ cao của thanh cuộn */\n}\n.r-table-edit .r-grid .r-gridtable::-webkit-scrollbar-track {\n  background: #FCFCFC;\n  /* Màu nền nhạt */\n}\n.r-table-edit .r-grid .r-gridtable::-webkit-scrollbar-thumb {\n  background: #8B8B8B;\n  /* Màu xám nhạt */\n  border-radius: 6px;\n  /* Bo góc giống Edge */\n}\n.r-table-edit .r-grid .r-gridtable::-webkit-scrollbar-thumb:hover {\n  background: #636363;\n  /* Màu đậm hơn khi hover */\n}\n.r-table-edit .r-grid .r-gridtable .react-resizable-handle.react-resizable-handle-se {\n  position: absolute;\n  right: 0px;\n  top: 0px;\n  width: 10px;\n  height: 100%;\n  cursor: col-resize;\n  background-image: none;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter svg.active {\n  color: #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter-popup .react-select-table .select-value {\n  line-height: 20px !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter-popup .react-select-table .select-placeholder {\n  line-height: 20px !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter-popup .react-select-table .r-select-is-focus {\n  border-color: #eb4619 !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter-popup .form-control:focus {\n  border-color: #eb4619 !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-no-data {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  padding: 20px 9px;\n  color: #8f8f8f;\n}\n.r-table-edit .r-grid .r-gridtable .r-loading-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(255, 255, 255, 0.3);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 3;\n}\n.r-table-edit .r-grid .r-gridtable .r-loading-overlay .r-loading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  padding: 7px 9px;\n  color: #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed {\n  z-index: 2 !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed.fix-right .r-headercell-div {\n  border-left: 1px solid #e0e0e0;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed.fix-left .r-headercell-div {\n  border-right: 1px solid #e0e0e0;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed.fix-left.fixed-last .r-headercell-div {\n  box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed.fix-right.fixed-last .r-headercell-div {\n  box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .r-headercell {\n  color: rgba(0, 0, 0, 0.8705882353);\n  position: sticky;\n  padding: 0px;\n  height: 42px;\n  z-index: 1;\n  border-width: 0px;\n  line-height: 16px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .r-headercell .r-headercell-div {\n  border-right: 1px solid #e0e0e0;\n  border-bottom: 1px solid #e0e0e0;\n  background-color: #FFFFFF;\n  display: flex;\n  align-items: center;\n  text-align: center;\n  padding: 5px 10px;\n  height: 100%;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .r-headercell .header-content {\n  display: flex;\n  flex: 1 1 0%;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .r-headercell .header-content .text-content {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row:first-of-type .r-rowcell-div {\n  border-top-color: #FFFFFF;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row {\n  font-size: 13px;\n  transition: transform 0.05s linear;\n  will-change: transform;\n  backface-visibility: hidden;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .cell-fixed {\n  position: sticky;\n  z-index: 1;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .cell-fixed .r-rowcell.r-cell-selected-right {\n  margin-right: 1px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row.r-last-row .r-rowcell .r-rowcell-div {\n  border-bottom: 1px solid #e0e0e0;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell {\n  background-color: #FFFFFF;\n  border-bottom: 1px solid #e0e0e0;\n  border-right: 1px solid #e0e0e0;\n  vertical-align: middle;\n  padding: 0;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.r-cell-sum-group {\n  background-color: #fafafa;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.r-cell-sum-group .r-rowcell-div {\n  padding-left: 10px;\n  padding-right: 5px;\n  display: flex;\n  align-items: center;\n  background-color: #fafafa;\n  font-weight: 550;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.r-cell-group {\n  left: 0px;\n  position: sticky;\n  z-index: 1;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.r-cell-group .r-rowcell-div {\n  padding-left: 10px;\n  padding-right: 5px !important;\n  display: flex;\n  align-items: center;\n  background-color: #fafafa;\n  font-weight: 550;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.r-cell-group .r-rowcell-div svg {\n  margin-right: 10px;\n  cursor: pointer;\n  user-select: none;\n  transition: transform 0.2s ease-in-out;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.r-cell-group .r-rowcell-div svg:hover {\n  color: #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.cell-fixed .r-rowcell-div.r-cell-selected-right {\n  padding-right: 1px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.fix-right {\n  border-left: 1px solid #e0e0e0;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.fix-right.fixed-last {\n  border-left: 1px solid #e0e0e0;\n  box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.fix-left.fixed-last {\n  border-right: 1px solid #e0e0e0;\n  box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.r-active-row {\n  background-color: #fce6df;\n  border-right: 2px solid #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div {\n  min-height: 28px !important;\n  border: 1px solid transparent;\n  position: relative;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .arrow-context-menu {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 15px;\n  width: 15px;\n  background-color: #FFFFFF;\n  border-radius: 10px;\n  border: 1px solid #e0e0e0;\n  box-shadow: 0px 0px 2px #e0e0e0;\n  right: -5px;\n  bottom: -5px;\n  z-index: 10000;\n  cursor: pointer;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.command {\n  padding-top: 0px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div:focus {\n  outline: none;\n  /* bỏ viền focus mặc định */\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.r-cell-disable {\n  background-color: #f9f9f9;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.r-active-cell {\n  background-color: rgb(255, 240, 240);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-cell-text:focus {\n  outline: none;\n  /* bỏ viền focus mặc định */\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-icon-invalid {\n  position: absolute;\n  width: 10px;\n  height: 10px;\n  top: 0px;\n  left: -6px;\n  rotate: -90deg;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-drag-icon {\n  position: absolute;\n  border: 1px solid #FFFFFF;\n  bottom: -2px;\n  right: -2px;\n  width: 7px;\n  height: 7px;\n  background-color: #eb4619;\n  border-radius: 20%;\n  cursor: crosshair;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-cell-text {\n  padding: 0px 7px;\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  min-height: 28px;\n  flex: 1;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-cell-text .r-drop-icon {\n  position: absolute;\n  fill: #c4c4c4 !important;\n  right: 8.5px;\n  top: 3.5px;\n  cursor: pointer;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .is-invalid {\n  border-width: 0px !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .is-invalid .r-select-is-invalid {\n  border-width: 0px !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.r-cell-selected-top {\n  border-top: 1px solid #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.r-cell-selected-bottom {\n  border-bottom: 1px solid #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.r-cell-selected-left {\n  border-left: 1px solid #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.r-cell-selected-right {\n  border-right: 1px solid #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-datepicker .form-control {\n  padding: 0px 4px;\n  border-radius: 0px;\n  border-width: 0px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .react-select-table.is-invalid {\n  border-width: 0px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .react-select-table .r-select-is-focus {\n  border-width: 0px !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .react-select-table .select-table-control {\n  border-radius: 0px;\n  border-width: 0px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .react-select-table .select-table-control.r-select-is-focus {\n  border: 1px solid #1989fa;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit .display-value {\n  cursor: pointer;\n  border-radius: 0px;\n  background-color: #FFFFFF;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit .input-display {\n  border-width: 0px;\n  box-sizing: border-box;\n  border: none;\n  /* Loại bỏ border */\n  outline: none;\n  /* Loại bỏ outline khi input được chọn */\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit .form-input-content .form-control {\n  border-radius: 4px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit .form-input-content .form-control:focus {\n  border: 1px solid #1989fa;\n  outline: none;\n  box-shadow: none;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit input::placeholder {\n  color: #eb4619;\n  opacity: 1;\n  /* Firefox */\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__display {\n  vertical-align: middle;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__edit {\n  display: none;\n  text-align: left;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__edit.active {\n  display: flex;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__edit .form-label {\n  font-size: 10px;\n  margin-bottom: 0px;\n  text-align: left;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__edit .form-control {\n  border-radius: 0px;\n  height: 23px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__edit .form__element {\n  margin: 0px 2px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-date-input {\n  text-align: center;\n  height: 29px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  padding: 5px;\n  font-size: 14px;\n  background-color: #f9f9f9;\n  color: #333;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-control:focus {\n  border-radius: 0px;\n  border-width: 0px;\n  background-color: #f8f8f8;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div input {\n  font-size: 13px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridfoot {\n  color: #283046;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridfoot .r-row {\n  bottom: 0px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridfoot .r-row .r-footer {\n  background-color: #fafafa;\n  font-size: 14px;\n  font-weight: 600;\n  width: 100px;\n  position: sticky;\n  z-index: 1;\n  bottom: 0;\n  border-width: 0px;\n  padding: 0px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridfoot .r-row .r-footer.cell-fixed {\n  z-index: 2;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridfoot .r-row .r-footer .r-footer-div {\n  height: 30px;\n  padding: 5px 0px;\n}\n.r-table-edit .r-grid .r-gridtable .formula-dropdown {\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 15px;\n}\n.r-table-edit .r-grid .text-left .form-label {\n  text-align: left;\n}\n.r-table-edit .r-grid .r-toolbar {\n  border: 1px solid #e0e0e0;\n  height: 44px;\n}\n.r-table-edit .r-grid .r-toolbar.r-toolbar-bottom {\n  border-top-width: 0px;\n}\n.r-table-edit .r-grid .r-toolbar.r-toolbar-top {\n  border-bottom-width: 0px;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items svg {\n  cursor: pointer;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items svg:hover {\n  color: #eb4619;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-left {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-left .r-toolbar-item {\n  margin: 7px 0px 7px 7px;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-center {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-center .r-toolbar-item {\n  margin: 7px 3px 7px 3px;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-right {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-right .r-toolbar-item {\n  margin: 7px 7px 7px 0px;\n}\n.r-table-edit .r-setting-container {\n  margin: 0px 15px;\n}\n.r-table-edit .r-setting-container .r-setting-content {\n  -webkit-overflow-scrolling: touch;\n  overflow-x: auto;\n  overflow-y: scroll;\n  position: relative;\n  background-color: #FFFFFF;\n  color: rgba(0, 0, 0, 0.8705882353);\n  font-weight: 400;\n  border-left: 1px solid #e0e0e0;\n  border-right: 1px solid #e0e0e0;\n  /* Toàn bộ thanh cuộn */\n  /* Nền của thanh cuộn */\n  /* Thanh trượt (thumb) */\n  /* Khi hover */\n}\n.r-table-edit .r-setting-container .r-setting-content::-webkit-scrollbar {\n  width: 9px;\n  /* Độ rộng của thanh cuộn */\n  height: 9px;\n  /* Độ cao của thanh cuộn */\n}\n.r-table-edit .r-setting-container .r-setting-content::-webkit-scrollbar-track {\n  background: #FCFCFC;\n  /* Màu nền nhạt */\n}\n.r-table-edit .r-setting-container .r-setting-content::-webkit-scrollbar-thumb {\n  background: #8B8B8B;\n  /* Màu xám nhạt */\n  border-radius: 6px;\n  /* Bo góc giống Edge */\n}\n.r-table-edit .r-setting-container .r-setting-content::-webkit-scrollbar-thumb:hover {\n  background: #636363;\n  /* Màu đậm hơn khi hover */\n}\n.r-table-edit .r-setting-container .r-setting-row {\n  padding: 5px !important;\n  margin: 0px;\n  border-bottom: 1px solid #e0e0e0;\n  font-size: 13px;\n  display: flex;\n  align-items: center;\n}\n.r-table-edit .r-setting-container .r-setting-row .r-setting-cell {\n  padding-right: 10px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.r-table-edit .r-setting-container .r-setting-row .r-setting-cell .form-control {\n  font-size: 13px !important;\n}\n.r-table-edit .r-setting-container .r-setting-row.r-setting-header {\n  font-size: 12px !important;\n}\n.r-table-edit.r-virtualized-table {\n  transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease;\n}\n.r-table-edit.r-virtualized-table .r-row:hover .r-rowcell {\n  background-color: #fce6df !important;\n}\n.r-table-edit.r-virtualized-table.is-maximized {\n  position: fixed;\n  inset: 0;\n  width: 100vw;\n  height: 100vh;\n  z-index: 9999;\n  background: #fff;\n}\n@keyframes zoomFeel {\n  0% {\n    transform: scale(0.98);\n  }\n  55% {\n    transform: scale(1.02);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n.r-table-edit .r-pager {\n  border: 1px solid #e0e0e0;\n  border-top-width: 0px;\n  min-height: 50px;\n  width: 100%;\n  display: inline-block;\n}\n.r-table-edit .r-pager .r-pagercontainer {\n  margin-left: 10px;\n  float: left;\n  height: 100%;\n  display: block;\n  align-items: center;\n}\n.r-table-edit .r-pager .r-pagercontainer .r-button {\n  display: inline-block;\n  margin: 9px 6px;\n  height: 30px;\n  width: 30px;\n  padding: 6px;\n  border-width: 0px;\n  background-color: transparent;\n}\n.r-table-edit .r-pager .r-pagercontainer .r-button svg {\n  font-size: 16px;\n}\n.r-table-edit .r-pager .r-pagercontainer .r-number {\n  display: inline-block;\n  margin: 10px 4px 0px 0px;\n  height: 25px;\n  width: 25px;\n  font-size: 13px;\n  padding-top: 4px;\n  text-align: center;\n  cursor: pointer;\n  border-radius: 5px;\n}\n.r-table-edit .r-pager .r-pagercontainer .r-number.r-active {\n  background-color: rgba(235, 70, 25, 0.1);\n  color: #eb4619;\n}\n.r-table-edit .r-pager .r-pagercontainer .r-number:hover {\n  border: 1px solid #eb4619;\n}\n.r-table-edit .r-pager .r-pagesize {\n  margin-left: 20px;\n  font-size: 13px;\n  display: inline-block;\n}\n.r-table-edit .r-pager .r-pagesize .select-pagesize__menu-portal {\n  z-index: 5;\n}\n.r-table-edit .r-pager .r-parentmsgbar {\n  font-size: 13px;\n  float: right;\n  padding-bottom: 9px;\n  padding-right: 18px;\n  padding-top: 14px;\n}\n\n.r-tooltip .tooltip-inner {\n  font-size: 11px;\n}\n.r-tooltip.tooltip-error ::before {\n  border-top-color: rgb(235, 78, 78);\n}\n.r-tooltip.tooltip-error .tooltip-inner {\n  background-color: rgb(235, 78, 78);\n}\n\n.btn-input-style {\n  font-weight: 500;\n  text-transform: uppercase;\n  border: 1px solid #e0e0e0;\n  border-radius: 5px;\n  margin-left: 3px;\n  height: 28px;\n  padding: 2px 5px;\n  cursor: pointer;\n}\n.btn-input-style:hover {\n  background-color: rgba(235, 70, 25, 0.1);\n  color: #eb4619;\n}\n.btn-input-style.active-custom {\n  background-color: #eb4619;\n  color: #FFFFFF;\n}";
 styleInject(css_248z$2);
 
 const getColumn = (contentColumns, col, count) => {
@@ -38989,13 +39197,33 @@ const DateRangeFilterComponent = ({ fieldFilter, filterBy, handleSave }) => {
 };
 
 const HeaderTableCol = (props) => {
-    const { selectEnable, dataSource, setSelectedRows, col, indexCol, indexParent, objHeaderWidthFixLeft, objHeaderWidthFixRight, totalCount, selectedRows, columns, orderBy, changeFilter, filterBy, changeOrder, allowFiltering, allowSorting, container, fisrtObjWidthFixRight, lastObjWidthFixLeft, setContentColumns, formatSetting, optionsFilter, idTable, isMulti } = props;
+    const { selectEnable, dataSource, setSelectedRows, col, indexCol, indexParent, objHeaderWidthFixLeft, objHeaderWidthFixRight, selectedRows, columns, orderBy, changeFilter, filterBy, changeOrder, allowFiltering, allowSorting, container, fisrtObjWidthFixRight, lastObjWidthFixLeft, setContentColumns, formatSetting, optionsFilter, idTable, isMulti, fieldKey } = props;
     const { t } = useTranslation();
     const headerRef = useRef(null);
     const order = orderBy.find((item) => item.key === col.field);
     const [openFilter, setOpenFilter] = useState(false);
     const filter = filterBy.find((item) => item.key === col.field);
     const herderContent = col.headerDisplay ?? col.headerText ?? '';
+    const headerCheckboxRef = useRef(null);
+    const typeSelected = useMemo(() => {
+        // 0: none selected, 1: some selected, 2: all selected
+        if (!isMulti || !selectEnable || dataSource.length === 0 || !selectedRows?.length) {
+            return 0;
+        }
+        else if (selectedRows?.length < dataSource.length) {
+            return 1;
+        }
+        else if (!dataSource.some((item) => !selectedRows.some((y) => y[fieldKey] === item[fieldKey]))) {
+            return 2;
+        }
+        return 1;
+    }, [dataSource, selectedRows]);
+    useEffect(() => {
+        if (headerCheckboxRef.current) {
+            headerCheckboxRef.current.checked = typeSelected === 2;
+            headerCheckboxRef.current.indeterminate = typeSelected === 1;
+        }
+    }, [typeSelected]);
     const handleResize = (e, { size }) => {
         if (size.width > 50) {
             const newColumns = [...columns];
@@ -39029,12 +39257,20 @@ const HeaderTableCol = (props) => {
                             orderBy.push({ direction: 'asc', key: col.field });
                             changeOrder(orderBy);
                         }
-                    }, className: classNames$1('r-headercell-div', { 'cursor-pointer': allowSorting && !col.columns?.length }), children: [col.field === 'checkbox' && (jsx(Input$1, { checked: !!(totalCount > 0 && selectedRows?.length >= totalCount), type: "checkbox", className: classNames$1('cursor-pointer', { 'd-none': !isMulti }), style: { textAlign: col.textAlign ?? 'left', marginTop: 6 }, onChange: (e) => {
+                    }, className: classNames$1('r-headercell-div', { 'cursor-pointer': allowSorting && !col.columns?.length }), children: [col.field === 'checkbox' && (jsx(Input$1, { innerRef: (el) => {
+                                headerCheckboxRef.current = el;
+                            }, type: "checkbox", style: {
+                                marginTop: 6,
+                                textAlign: 'center',
+                                cursor: 'pointer'
+                            }, onChange: () => {
                                 if (selectEnable) {
-                                    if (e.target.checked) {
-                                        setSelectedRows(dataSource.map((item) => {
-                                            return item;
-                                        }));
+                                    if (typeSelected === 0) {
+                                        setSelectedRows([...dataSource]);
+                                    }
+                                    else if (typeSelected === 1) {
+                                        const notSelectedRows = dataSource.filter((item) => !selectedRows.some((x) => x[fieldKey] === item[fieldKey]));
+                                        setSelectedRows([...selectedRows, ...notSelectedRows]);
                                     }
                                     else {
                                         setSelectedRows([]);
@@ -39819,14 +40055,22 @@ const ToolbarBottom = ({ handleAdd, handleDuplicate, handleInsertBefore, handleI
                         }), !toolbarSetting?.hiddenSetting && (jsxs(Fragment$1, { children: [jsx("div", { className: classNames$1('r-toolbar-item me-25'), "aria-disabled": "false", children: jsx(SvgSettings, { className: "text-primary cursor-pointer", onClick: () => setOpenPopupSetupColumn(true) }) }), jsx("div", { className: classNames$1('r-toolbar-item me-25', { 'd-none': editDisable || addDisable }), "aria-disabled": "false", children: jsxs(UncontrolledDropdown, { className: "dropdown-user nav-item", children: [jsx(DropdownToggle$1, { tag: "div", color: "primary", onClick: (e) => e.preventDefault(), children: jsx(SvgInfo, { className: "cursor-pointer text-primary" }) }), jsx(DropdownMenu$1, { className: "formula-dropdown icon-dropdown", children: jsxs("ul", { className: "mb-0 pe-50", children: [jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\u00E0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\u00E0ng v\u00E0 nh\u1EA5n Ctrl + D \u0111\u1EC3 nh\u00E2n b\u1EA3n" }), jsx("li", { style: { fontSize: 13 }, children: "Ch\u1ECDn \u00F4 v\u00E0 Ctrl + V \u0111\u1EC3 d\u00E1n th\u00F4ng tin t\u1EEB excel" }), jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\u00E0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\u00E0ng v\u00E0 nh\u1EA5n Ctrl + C \u0111\u1EC3 sao ch\u00E9p h\u00E0ng" }), jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\u00E0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\u00E0ng v\u00E0 nh\u1EA5n Ctrl + V \u0111\u1EC3 d\u00E1n h\u00E0ng" }), jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n Ctrl ho\u1EB7c Alt + Shift + \u2193 \u0111\u1EC3 sao ch\u00E9p d\u1EEF li\u1EC7u \u00F4 cho c\u00E1c d\u00F2ng d\u01B0\u1EDBi" }), jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n Ctrl ho\u1EB7c Alt + Shift + \u2191 \u0111\u1EC3 sao ch\u00E9p d\u1EEF li\u1EC7u \u00F4 cho c\u00E1c d\u00F2ng tr\u00EAn" })] }) })] }) })] }))] })] }) }));
 };
 
-const RenderToolbarTop = ({ toolbarTopOption }) => {
+const RenderToolbarTop = ({ toolbarTopOption, maximize, setMaximize }) => {
     return (jsx("div", { id: "table_custom_top_toolbar", className: "r-toolbar r-toolbar-top", "aria-orientation": "horizontal", children: jsxs("div", { className: "r-toolbar-items", children: [jsx("div", { className: "r-toolbar-left", children: toolbarTopOption?.map((item, index) => {
                         return item.align === 'left' ? jsx(ToolBarElement, { item: item, index: index }) : '';
                     }) }), jsx("div", { className: "r-toolbar-center", children: toolbarTopOption?.map((item, index) => {
                         return item.align === 'center' ? jsx(ToolBarElement, { item: item, index: index }) : '';
-                    }) }), jsx("div", { className: "r-toolbar-right", children: toolbarTopOption?.map((item, index) => {
-                        return item.align === 'right' ? jsx(ToolBarElement, { item: item, index: index }) : '';
-                    }) })] }) }));
+                    }) }), jsxs("div", { className: "r-toolbar-right", children: [toolbarTopOption?.map((item, index) => {
+                            return item.align === 'right' ? jsx(ToolBarElement, { item: item, index: index }) : '';
+                        }), jsxs("div", { className: "r-toolbar-item", "aria-disabled": "false", children: [maximize === true && (jsx(SvgMinimize, { fontSize: 18, color: "#7F7F7F", className: "mx-25", onClick: () => {
+                                        if (setMaximize) {
+                                            setMaximize(!maximize);
+                                        }
+                                    } })), maximize === false && (jsx(SvgMaximize, { fontSize: 18, style: { strokeWidth: 2 }, className: "mx-25", color: "#7F7F7F", onClick: () => {
+                                        if (setMaximize) {
+                                            setMaximize(!maximize);
+                                        }
+                                    } }))] })] })] }) }));
 };
 const ToolBarElement = ({ item, index }) => {
     return (jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template?.() }, `toolbar-top-${index}`));
@@ -68728,8 +68972,8 @@ const UnExpandAllIcon = ({ className, color = '#7F7F7F', size = 24, onClick, sty
         }, onClick: onClick, children: [jsx("path", { d: "M18 8H8V18H6V8C6 7.46957 6.21071 6.96086 6.58579 6.58579C6.96086 6.21071 7.46957 6 8 6H18V8ZM14 2H4C3.46957 2 2.96086 2.21071 2.58579 2.58579C2.21071 2.96086 2 3.46957 2 4V14H4V4H14V2ZM22 12V20C22 20.5304 21.7893 21.0391 21.4142 21.4142C21.0391 21.7893 20.5304 22 20 22H12C11.4696 22 10.9609 21.7893 10.5858 21.4142C10.2107 21.0391 10 20.5304 10 20V12C10 11.4696 10.2107 10.9609 10.5858 10.5858C10.9609 10.2107 11.4696 10 12 10H20C20.5304 10 21.0391 10.2107 21.4142 10.5858C21.7893 10.9609 22 11.4696 22 12ZM20 15H17V12H15V15H12V17H15V20H17V17H20V15Z", fill: "currentColor" }), jsx("rect", { x: "14", y: "11", width: "4", height: "4", fill: "currentColor" }), jsx("rect", { x: "14", y: "17", width: "4", height: "4", fill: "currentColor" })] }));
 };
 
-const RenderContentCol = (props) => {
-    const { col, indexCol, indexRow, isSelected, row, zeroVisiable, formatSetting, idTable, fisrtObjWidthFixRight, lastObjWidthFixLeft, objWidthFixLeft, objWidthFixRight, selectedRows, setSelectedRows, handleCloseContext, handleDoubleClick, fieldKey, isMulti } = props;
+const RenderContentCol = React__default.memo((props) => {
+    const { col, indexCol, indexRow, isSelected, row, zeroVisiable, formatSetting, idTable, fisrtObjWidthFixRight, lastObjWidthFixLeft, objWidthFixLeft, objWidthFixRight, selectedRows, setSelectedRows, handleCloseContext, handleDoubleClick, handleCellClick, fieldKey, isMulti, } = props;
     const cellId = `content-${idTable}-row${indexRow}col-${indexCol}`;
     const checkOverflow = () => {
         const element = document.getElementById(cellId);
@@ -68751,10 +68995,12 @@ const RenderContentCol = (props) => {
     const RenderElement = () => {
         if (col.field === '#' || col.type === '#') {
             return (jsx("div", { className: classNames$1('r-rowcell-div cursor-pointer text-center', {
-                    'r-active-cell': isSelected
+                    'r-active-cell': isSelected,
                 }), style: {
-                    fontWeight: row.sortOrder < 0 || row.sortOrder > 100000 || row.haveBoldType ? 600 : 400,
-                    fontStyle: row.haveItalicType ? 'italic' : 'normal'
+                    fontWeight: row.sortOrder < 0 || row.sortOrder > 100000 || row.haveBoldType
+                        ? 600
+                        : 400,
+                    fontStyle: row.haveItalicType ? 'italic' : 'normal',
                 }, onDoubleClick: (e) => {
                     e.preventDefault();
                     handleCloseContext();
@@ -68763,11 +69009,15 @@ const RenderContentCol = (props) => {
         }
         else if (col.type === 'checkbox' || col.field === 'checkbox') {
             return (jsx("div", { className: classNames$1('r-rowcell-div cursor-pointer', {
-                    'r-active-cell': isSelected
+                    'r-active-cell': isSelected,
                 }), style: {
                     display: 'flex',
-                    justifyContent: col.textAlign === 'center' ? 'center' : col.textAlign === 'right' ? 'flex-end' : 'flex-start',
-                    alignItems: 'center'
+                    justifyContent: col.textAlign === 'center'
+                        ? 'center'
+                        : col.textAlign === 'right'
+                            ? 'flex-end'
+                            : 'flex-start',
+                    alignItems: 'center',
                 }, onClick: (e) => {
                     setSelectedRows(toggleSelect());
                     e.stopPropagation();
@@ -68777,8 +69027,12 @@ const RenderContentCol = (props) => {
             let value = row[col.field];
             // ✅ Format dữ liệu theo loại cột
             if (col.type === 'numeric') {
-                value = formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) ?? 0;
-                if (!zeroVisiable && !(row?.sortOrder < 0 || row?.sortOrder > 100000) && (value === '0' || value === 0)) {
+                value =
+                    formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) ?? 0;
+                if (!zeroVisiable &&
+                    !col.zeroVisiable &&
+                    !(row?.sortOrder < 0 || row?.sortOrder > 100000) &&
+                    (value === '0' || value === 0)) {
                     value = '';
                 }
             }
@@ -68786,31 +69040,43 @@ const RenderContentCol = (props) => {
                 value = value ? formatDateTime(value, formatSetting?.dateFormat) : '';
             }
             else if (col.type === 'datetime') {
-                value = value ? formatDateTime(value, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm') : '';
+                value = value
+                    ? formatDateTime(value, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm')
+                    : '';
             }
             if (col.template) {
                 value = col.template(row, indexRow) ?? '';
             }
             const isNegative = col.type === 'numeric' && Number(row[col.field]) < 0;
-            const textColor = isNegative ? formatSetting?.colorNegative ?? 'red' : undefined;
-            const prefix = isNegative ? formatSetting?.prefixNegative ?? '-' : '';
-            const suffix = isNegative ? formatSetting?.suffixNegative ?? '' : '';
-            const displayText = isNegative ? `${prefix}${value}${suffix}` : value ?? '';
+            const textColor = isNegative
+                ? (formatSetting?.colorNegative ?? 'red')
+                : undefined;
+            const prefix = isNegative ? (formatSetting?.prefixNegative ?? '-') : '';
+            const suffix = isNegative ? (formatSetting?.suffixNegative ?? '') : '';
+            const displayText = isNegative
+                ? `${prefix}${value}${suffix}`
+                : (value ?? '');
             return (jsxs("div", { className: classNames$1('r-rowcell-div cursor-pointer', {
-                    'r-active-cell': isSelected
+                    'r-active-cell': isSelected,
                 }), style: {
-                    fontWeight: row.sortOrder < 0 || row.sortOrder > 100000 || row.haveBoldType ? 600 : 400,
-                    fontStyle: row.haveItalicType ? 'italic' : 'normal'
+                    fontWeight: row.sortOrder < 0 || row.sortOrder > 100000 || row.haveBoldType
+                        ? 600
+                        : 400,
+                    fontStyle: row.haveItalicType ? 'italic' : 'normal',
                 }, children: [jsx("div", { className: "r-cell-text", style: {
                             display: 'flex',
-                            justifyContent: col.textAlign === 'center' ? 'center' : col.textAlign === 'right' ? 'flex-end' : 'flex-start',
-                            alignItems: 'center'
+                            justifyContent: col.textAlign === 'center'
+                                ? 'center'
+                                : col.textAlign === 'right'
+                                    ? 'flex-end'
+                                    : 'flex-start',
+                            alignItems: 'center',
                         }, children: jsx("div", { id: cellId, style: {
                                 color: textColor,
                                 overflow: 'hidden',
                                 textOverflow: 'ellipsis',
                                 whiteSpace: 'pre',
-                                maxWidth: '100%'
+                                maxWidth: '100%',
                             }, children: displayText }) }), checkOverflow() && (jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: cellId, placement: "top", children: jsx("div", { style: { color: textColor }, onClick: (e) => {
                                 e.stopPropagation();
                                 e.preventDefault();
@@ -68819,15 +69085,21 @@ const RenderContentCol = (props) => {
     };
     const clickTimerRef = useRef(null);
     return (jsx(Fragment$1, { children: col.visible !== false && col.isGroup !== true && (jsx("td", { className: classNames$1(`r-rowcell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, {
-                'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight)
+                'fixed-last': (col.fixedType === 'left' &&
+                    indexCol === lastObjWidthFixLeft) ||
+                    (col.fixedType === 'right' &&
+                        indexCol === fisrtObjWidthFixRight),
             }, { 'r-active': isSelected }), style: {
                 left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
-                right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined
+                right: col.fixedType === 'right'
+                    ? objWidthFixRight[indexCol]
+                    : undefined,
             }, onClick: (e) => {
                 const tag = e.target?.nodeName;
                 if (tag !== 'DIV' && tag !== 'TD') {
                     return;
                 }
+                handleCellClick?.(row, col);
                 if (clickTimerRef.current) {
                     window.clearTimeout(clickTimerRef.current);
                 }
@@ -68852,20 +69124,11 @@ const RenderContentCol = (props) => {
                 e.preventDefault();
                 e.stopPropagation();
             }, children: RenderElement() }, `col-${indexRow}-${indexCol}`)) }));
-};
+});
 
-const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoading, formatSetting, querySetting, pagingSetting, searchSetting, columnsAggregate, toolbarSetting, selectedItem, setSelectedItem, handleSelect, saveSettingColumn, resetDefaultColumns, settingColumns, headerComponent, groupSetting, zeroVisiable, isMulti, handleDoubleClick, contextMenuItems, handleContextMenuClick }) => {
+const TableElement = React__default.memo((props) => {
+    const { contentColumns, dataSource, fieldKey, filterBy, fisrtObjWidthFixRight, lastObjWidthFixLeft, objWidthFixLeft, objWidthFixRight, orderBy, selectedRows, setContentColumns, setSelectedRows, formatSetting, gridRef, idTable, headerColumns, objHeaderWidthFixLeft, objHeaderWidthFixRight, isMulti, querySetting, searchSetting, searchTerm, columnsAggregate, haveSum, expandsAll, zeroVisiable, setFilterBy, setOrderBy, setExpandsAll, handleDoubleClick, handleCellClick, contextMenuItems, handleContextMenuClick, isLoading, } = props;
     const { t } = useTranslation();
-    const gridRef = useRef(null);
-    const [openPopupSetupColumn, setOpenPopupSetupColumn] = useState(false);
-    const [selectedRows, setSelectedRows] = useState([]);
-    const [orderBy, setOrderBy] = useState([]);
-    const [filterBy, setFilterBy] = useState([]);
-    const [searchTerm, setSearchTerm] = useState('');
-    const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ?? 'id';
-    const [contentColumns, setContentColumns] = useState([]);
-    const [groupColumns, setGroupColumns] = useState([]);
-    const [expandsAll, setExpandsAll] = useState(true);
     const [context, setContext] = useState(null);
     const virtualDivRef = useRef(null);
     useOnClickOutside(virtualDivRef, () => {
@@ -68875,17 +69138,17 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
             }, 100);
         }
     });
+    const handleCloseContext = () => setContext((prev) => (prev ? { ...prev, show: false } : null));
     useEffect(() => {
-        if (groupSetting?.groupColumns) {
-            setGroupColumns([...groupSetting.groupColumns]);
+        if (virtualDivRef.current && context) {
+            // đặt vị trí div ảo tại con trỏ chuột
+            virtualDivRef.current.style.position = 'fixed';
+            virtualDivRef.current.style.top = `${context.y}px`;
+            virtualDivRef.current.style.left = `${context.x}px`;
+            virtualDivRef.current.style.width = '0px';
+            virtualDivRef.current.style.height = '0px';
         }
-        setExpandsAll(true);
-    }, [groupSetting?.groupColumns]);
-    const { levels: headerColumns, objHeaderWidthFixLeft, objHeaderWidthFixRight, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight } = useMemo(() => {
-        const rs = calculateTableStructure(columns, settingColumns?.value, groupSetting?.groupColumns);
-        setContentColumns(rs.flat);
-        return rs;
-    }, [columns, settingColumns, groupSetting?.groupColumns]);
+    }, [context]);
     const firstColSpan = useMemo(() => {
         let count = 0;
         let index = 3;
@@ -68910,7 +69173,10 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
         if (searchTerm) {
             datas = datas.filter((row) => {
                 return searchSetting?.keyField?.some((key) => {
-                    return row[key]?.toString().toLowerCase().includes(searchTerm.trim().toLowerCase());
+                    return row[key]
+                        ?.toString()
+                        .toLowerCase()
+                        .includes(searchTerm.trim().toLowerCase());
                 });
             });
         }
@@ -68919,7 +69185,10 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
                 return filterBy.every((filter) => {
                     const { key, value, ope } = filter;
                     const rowValue = row[key];
-                    if (rowValue === undefined || rowValue === null || value === undefined || value === null) {
+                    if (rowValue === undefined ||
+                        rowValue === null ||
+                        value === undefined ||
+                        value === null) {
                         return false;
                     }
                     const valStr = String(rowValue).toLowerCase();
@@ -68969,6 +69238,202 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
         }
         return datas;
     }, [searchTerm, filterBy, orderBy, dataSource]);
+    const RenderContent = React__default.memo(({ datas, level = 0 }) => {
+        return (jsx(Fragment$1, { children: datas.map((row, indexRow) => {
+                const [expand, setExpand] = useState(row.expand ?? true);
+                useEffect(() => {
+                    if (expandsAll !== undefined) {
+                        setExpand(expandsAll);
+                        row.expand = expandsAll;
+                    }
+                }, [expandsAll]);
+                if (row.children?.length) {
+                    const col = contentColumns.find((x) => x.field === row.field);
+                    if (!col) {
+                        return;
+                    }
+                    let value = row[col.field];
+                    if (col.type === 'numeric') {
+                        value =
+                            formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) ?? 0;
+                    }
+                    else if (col.type === 'date') {
+                        value = value
+                            ? formatDateTime(value, formatSetting?.dateFormat)
+                            : '';
+                    }
+                    else if (col.type === 'datetime') {
+                        value = value
+                            ? formatDateTime(value, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm')
+                            : '';
+                    }
+                    if (col.template) {
+                        value = col.template(row, indexRow) ?? '';
+                    }
+                    return (jsxs(Fragment$1, { children: [jsxs("tr", { "aria-rowindex": indexRow + 1, role: "row", className: "r-row", children: [jsx("td", { className: "r-rowcell r-cell-group", colSpan: 3, children: jsxs("div", { className: "r-rowcell-div", children: [jsx(SvgChevronRight, { style: {
+                                                        marginLeft: level * 20,
+                                                        transform: expand ? 'rotate(90deg)' : 'rotate(0deg)',
+                                                    }, fontSize: 15, onClick: () => {
+                                                        setExpand(!expand);
+                                                        setExpandsAll(undefined);
+                                                        row.expand = !expand;
+                                                    } }), t(col.headerDisplay ?? col.headerText ?? ''), ": ", value, " (", row.children.length, ")"] }) }), contentColumns.map((colSum, indexCol) => {
+                                        if (indexCol <= firstColSpan ||
+                                            colSum.visible === false ||
+                                            colSum.isGroup === true) {
+                                            return;
+                                        }
+                                        let sumValue = row[colSum.field];
+                                        const haveSum = row[colSum.field] !== undefined &&
+                                            row[colSum.field] !== null;
+                                        if (!haveSum &&
+                                            colSum.haveSum === true &&
+                                            colSum.type === 'numeric') {
+                                            sumValue = row.children.reduce(function (accumulator, currentValue) {
+                                                return (Number(accumulator ?? 0) +
+                                                    Number(currentValue[colSum.field] ?? 0));
+                                            }, 0);
+                                        }
+                                        if (colSum.type === 'numeric') {
+                                            sumValue = formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', colSum.numericSettings?.fraction, true, false);
+                                            if (!zeroVisiable &&
+                                                !col.zeroVisiable &&
+                                                (sumValue === '0' || sumValue === 0)) {
+                                                sumValue = '';
+                                            }
+                                        }
+                                        return (jsx("td", { className: "r-rowcell r-cell-sum-group", children: jsx("div", { className: "r-rowcell-div", style: {
+                                                    justifyContent: colSum.textAlign
+                                                        ? colSum.textAlign
+                                                        : 'left',
+                                                }, children: (haveSum || colSum.haveSum === true) &&
+                                                    Number(row[colSum.field] ?? '0') < 0 ? (jsxs("div", { style: {
+                                                        color: formatSetting?.colorNegative ?? 'red',
+                                                    }, children: [' ', `${formatSetting?.prefixNegative ?? '-'}${sumValue}${formatSetting?.suffixNegative ?? ''}`] })) : (sumValue) }) }, `group-sum-cell-${level}-${indexRow}-${indexCol}`));
+                                    })] }), expand && (jsx(RenderContent, { datas: row.children, level: level + 1 }))] }, `row-${level}-${indexRow}`));
+                }
+                else {
+                    const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
+                    return (jsx("tr", { id: `row-content-${indexRow}`, "aria-rowindex": indexRow + 1, role: "row", className: classNames$1('r-row', {
+                            'r-last-row': level === 0 && indexRow === viewData.length - 1,
+                        }), onContextMenu: (e) => {
+                            e.preventDefault();
+                            handleContextMenu(e, row);
+                        }, children: contentColumns.map((column, indexCol) => (jsx(RenderContentCol, { idTable: idTable, col: column, fieldKey: fieldKey, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, isMulti: isMulti, selectedRows: selectedRows, setSelectedRows: setSelectedRows, formatSetting: formatSetting, indexCol: indexCol, indexRow: indexRow, isSelected: isSelected, row: row, zeroVisiable: zeroVisiable, handleCloseContext: handleCloseContext, handleDoubleClick: handleDoubleClick, handleCellClick: handleCellClick }, indexCol))) }, `row-content-${indexRow}`));
+                }
+            }) }));
+    });
+    const handleContextMenu = (e, row) => {
+        e.preventDefault();
+        setContext(null);
+        setTimeout(() => {
+            setContext({
+                x: e.clientX,
+                y: e.clientY,
+                row,
+                show: true,
+            });
+        }, 100);
+    };
+    return (jsxs(Fragment$1, { children: [jsxs("table", { role: "presentation", style: { width: '100%' }, children: [jsx(RenderColGroup, { contentColumns: contentColumns }), jsx("thead", { className: "r-gridheader", role: "rowgroup", children: headerColumns.map((rowColumn, indexParent) => {
+                            return (jsx("tr", { className: "r-row", role: "row", children: rowColumn.map((col, index) => (jsx(HeaderTableCol, { col: col, idTable: idTable ?? '', dataSource: dataSource, indexCol: index, indexParent: indexParent, isMulti: isMulti ?? false, objHeaderWidthFixLeft: objHeaderWidthFixLeft, objHeaderWidthFixRight: objHeaderWidthFixRight, selectEnable: true, selectedRows: selectedRows, setSelectedRows: setSelectedRows, container: gridRef, filterBy: filterBy, orderBy: orderBy, optionsFilter: querySetting?.optionsFilter, allowFiltering: querySetting?.allowFiltering, allowSorting: querySetting?.allowSorting, formatSetting: formatSetting, changeFilter: (val) => {
+                                        setFilterBy([...val]);
+                                        if (querySetting?.changeFilter) {
+                                            querySetting.changeFilter(val);
+                                        }
+                                    }, changeOrder: (val) => {
+                                        setOrderBy([...val]);
+                                        if (querySetting?.changeOrder) {
+                                            querySetting.changeOrder(val);
+                                        }
+                                    }, columns: contentColumns, setContentColumns: setContentColumns, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, fieldKey: fieldKey }, `header-${indexParent}-${index}`))) }, `header-${-indexParent}`));
+                        }) }), jsx("tbody", { className: "r-gridcontent", role: "rowgroup", children: jsx(RenderContent, { datas: viewData }) }), jsx("tfoot", { className: "r-gridfoot", children: ((columnsAggregate?.length ?? 0) > 0 || haveSum) && (jsx("tr", { className: "r-row", children: contentColumns.map((col, indexCol) => {
+                                if (col.visible === false || col.isGroup === true) {
+                                    return;
+                                }
+                                const item = columnsAggregate?.find((x) => x.field === col.field);
+                                let sumValue = item?.value;
+                                if (!item && col.haveSum === true && col.type === 'numeric') {
+                                    sumValue = viewData.reduce(function (accumulator, currentValue) {
+                                        return (Number(accumulator ?? 0) +
+                                            Number(currentValue[col.field] ?? 0));
+                                    }, 0);
+                                }
+                                if (col.type === 'numeric') {
+                                    sumValue = formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false);
+                                }
+                                return (jsx("td", { className: classNames$1(`p-0 px-50 r-footer fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }), style: {
+                                        left: col.fixedType === 'left'
+                                            ? objWidthFixLeft[indexCol]
+                                            : undefined,
+                                        right: col.fixedType === 'right'
+                                            ? objWidthFixRight[indexCol]
+                                            : undefined,
+                                        textAlign: col.textAlign ? col.textAlign : 'left',
+                                    }, children: jsx("div", { className: "r-footer-div", children: (item || col.haveSum === true) &&
+                                            Number(item?.value ?? '0') < 0 ? (jsxs("div", { style: {
+                                                color: formatSetting?.colorNegative ?? 'red',
+                                            }, children: [' ', `${formatSetting?.prefixNegative ?? '-'}${sumValue}${formatSetting?.suffixNegative ?? ''}`] })) : (sumValue) }) }, `summarycell-${indexCol}`));
+                            }) })) })] }), jsx("div", { ref: virtualDivRef }), context &&
+                (contextMenuItems?.length ?? 0) > 0 &&
+                handleContextMenuClick && (jsx(Popover$1, { className: "r-context-popover", placement: "right-start", isOpen: context.show, target: virtualDivRef.current, toggle: handleCloseContext, fade: false, children: jsx(PopoverBody$1, { children: contextMenuItems?.map((item, index) => {
+                        return (jsxs("div", { className: "r-context-item", onClick: () => {
+                                handleCloseContext();
+                                handleContextMenuClick?.(item, context.row);
+                            }, children: [item.icon && (jsx("div", { className: "me-75", children: jsx(IconCustom, { iconName: item.icon, size: 16 }) })), jsx("span", { children: t(item.text) })] }, `context-${index}`));
+                    }) }) })), (viewData.length ?? 0) === 0 && !isLoading && (jsxs("div", { className: "r-no-data", children: [jsx("svg", { width: "64", height: "41", viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: jsxs("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd", children: [jsx("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }), jsxs("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [jsx("path", { d: "M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" }), jsx("path", { d: "M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z", fill: "#fafafa" })] })] }) }), t('No data available.')] }))] }));
+});
+
+const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoading, formatSetting, querySetting, pagingSetting, searchSetting, columnsAggregate, toolbarSetting, selectedItem, setSelectedItem, handleSelect, saveSettingColumn, resetDefaultColumns, settingColumns, headerComponent, groupSetting, zeroVisiable, isMulti, handleDoubleClick, handleCellClick, contextMenuItems, headerHeight, handleContextMenuClick, }) => {
+    const { t } = useTranslation();
+    const gridRef = useRef(null);
+    const [openPopupSetupColumn, setOpenPopupSetupColumn] = useState(false);
+    const [selectedRows, setSelectedRows] = useState([]);
+    const [orderBy, setOrderBy] = useState([]);
+    const [filterBy, setFilterBy] = useState([]);
+    const [searchTerm, setSearchTerm] = useState('');
+    const [contentColumns, setContentColumns] = useState([]);
+    const [groupColumns, setGroupColumns] = useState([]);
+    const [expandsAll, setExpandsAll] = useState(true);
+    const [maximize, setMaximize] = useState(false);
+    const [windowHeight, setWindowHeight] = useState(window.innerHeight);
+    const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ??
+        'id';
+    useEffect(() => {
+        const handleResize = () => {
+            setWindowHeight(window.innerHeight);
+        };
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+    const heightTable = useMemo(() => {
+        if (maximize) {
+            return (windowHeight -
+                (pagingSetting?.allowPaging ? 50 : 0) -
+                (haveSum ? 30 : 0) -
+                (headerHeight ?? 59) -
+                (toolbarSetting?.showBottomToolbar ? 42 : 0) -
+                (toolbarSetting?.showTopToolbar ? 42 : 0));
+        }
+        return height;
+    }, [height, maximize, windowHeight]);
+    const optionsGroupColumn = useMemo(() => {
+        return contentColumns.map((col) => ({
+            ...col,
+            headerText: t(col.headerText),
+        }));
+    }, [contentColumns]);
+    useEffect(() => {
+        if (groupSetting?.groupColumns) {
+            setGroupColumns([...groupSetting.groupColumns]);
+        }
+        setExpandsAll(true);
+    }, [groupSetting?.groupColumns]);
+    const { levels: headerColumns, objHeaderWidthFixLeft, objHeaderWidthFixRight, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight, } = useMemo(() => {
+        const rs = calculateTableStructure(columns, settingColumns?.value, groupSetting?.groupColumns);
+        setContentColumns(rs.flat);
+        return rs;
+    }, [columns, settingColumns, groupSetting?.groupColumns]);
     const handleKeyPress = (e) => {
         if (e.code === 'Enter' || e.code === 'NumpadEnter') {
             if (searchSetting?.setSearchTerm) {
@@ -68982,12 +69447,17 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
         }
     };
     const searchTemplate = () => {
-        return (jsx("div", { className: "me-50 r-search", children: jsx(ReactInput, { style: { width: '230px' }, value: searchSetting?.searchTerm !== undefined ? searchSetting?.searchTerm : searchTerm, setSearchTerm: searchSetting?.setSearchTerm ? searchSetting?.setSearchTerm : setSearchTerm, placeholder: t('Search'), onKeyPress: handleKeyPress }) }));
+        return (jsx("div", { className: "me-50 r-search", children: jsx(ReactInput, { style: { width: '230px' }, value: searchSetting?.searchTerm !== undefined
+                    ? searchSetting?.searchTerm
+                    : searchTerm, setSearchTerm: searchSetting?.setSearchTerm
+                    ? searchSetting?.setSearchTerm
+                    : setSearchTerm, placeholder: t('Search'), onKeyPress: handleKeyPress }) }));
     };
     const groupbtnTemplate = () => {
-        return (jsxs(UncontrolledDropdown, { children: [jsx(DropdownToggle$1, { tag: "div", id: "group-dropdown-toggle", style: { position: 'relative' }, onClick: (e) => e.preventDefault(), children: jsx(GroupIcon, { color: "#7F7F7F", size: 24 }) }), jsxs(DropdownMenu$1, { className: "formula-dropdown icon-dropdown p-1", children: [jsx("div", { className: "mb-1", style: { fontSize: 16, fontWeight: 500 }, children: "Nh\u00F3m d\u1EEF li\u1EC7u theo c\u1ED9t" }), jsxs("div", { className: 'form-group', children: [jsx(Label$1, { id: `label-group-1`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 1" }), jsx("div", { className: "form-input", children: jsx(SelectTable, { options: contentColumns, fieldLabel: 'headerText', fieldValue: 'field', value: groupColumns[0]
+        return (jsxs(UncontrolledDropdown, { children: [jsx(DropdownToggle$1, { tag: "div", id: "group-dropdown-toggle", style: { position: 'relative' }, onClick: (e) => e.preventDefault(), children: jsx(GroupIcon, { color: "#7F7F7F", size: 24 }) }), jsxs(DropdownMenu$1, { className: "formula-dropdown icon-dropdown p-1", children: [jsx("div", { className: "mb-1", style: { fontSize: 16, fontWeight: 500 }, children: "Nh\u00F3m d\u1EEF li\u1EC7u theo c\u1ED9t" }), jsxs("div", { className: 'form-group', children: [jsx(Label$1, { id: `label-group-1`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 1" }), jsx("div", { className: "form-input", children: jsx(SelectTable, { options: optionsGroupColumn, fieldLabel: 'headerText', fieldValue: 'field', value: groupColumns[0]
                                             ? {
-                                                headerText: t(contentColumns.find((x) => x.field === groupColumns[0])?.headerText ?? contentColumns.find((x) => x.field === groupColumns[0])?.headerText)
+                                                headerText: t(contentColumns.find((x) => x.field === groupColumns[0])?.headerText ??
+                                                    contentColumns.find((x) => x.field === groupColumns[0])?.headerText),
                                             }
                                             : undefined, onChange: (val) => {
                                             if (val) {
@@ -68997,9 +69467,10 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
                                                 groupColumns.pop();
                                             }
                                             setGroupColumns([...groupColumns]);
-                                        }, isClearable: groupColumns?.length === 1 }) })] }), jsxs("div", { className: 'form-group', children: [jsx(Label$1, { id: `label-group-2`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 2" }), jsx("div", { className: "form-input", children: jsx(SelectTable, { options: contentColumns, fieldLabel: 'headerText', fieldValue: 'field', value: groupColumns[1]
+                                        }, isClearable: groupColumns?.length === 1 }) })] }), jsxs("div", { className: 'form-group', children: [jsx(Label$1, { id: `label-group-2`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 2" }), jsx("div", { className: "form-input", children: jsx(SelectTable, { options: optionsGroupColumn, fieldLabel: 'headerText', fieldValue: 'field', value: groupColumns[1]
                                             ? {
-                                                headerText: t(contentColumns.find((x) => x.field === groupColumns[1])?.headerText ?? contentColumns.find((x) => x.field === groupColumns[1])?.headerText)
+                                                headerText: t(contentColumns.find((x) => x.field === groupColumns[1])?.headerText ??
+                                                    contentColumns.find((x) => x.field === groupColumns[1])?.headerText),
                                             }
                                             : undefined, onChange: (val) => {
                                             if (val) {
@@ -69009,9 +69480,10 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
                                                 groupColumns.pop();
                                             }
                                             setGroupColumns([...groupColumns]);
-                                        }, isClearable: groupColumns?.length === 2 }) })] }), jsxs("div", { className: 'form-group', children: [jsx(Label$1, { id: `label-group-3`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 3" }), jsx("div", { className: "form-input", children: jsx(SelectTable, { options: contentColumns, fieldLabel: 'headerText', fieldValue: 'field', value: groupColumns[2]
+                                        }, isClearable: groupColumns?.length === 2 }) })] }), jsxs("div", { className: 'form-group', children: [jsx(Label$1, { id: `label-group-3`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 3" }), jsx("div", { className: "form-input", children: jsx(SelectTable, { options: optionsGroupColumn, fieldLabel: 'headerText', fieldValue: 'field', value: groupColumns[2]
                                             ? {
-                                                headerText: t(contentColumns.find((x) => x.field === groupColumns[2])?.headerText ?? contentColumns.find((x) => x.field === groupColumns[2])?.headerText)
+                                                headerText: t(contentColumns.find((x) => x.field === groupColumns[2])?.headerText ??
+                                                    contentColumns.find((x) => x.field === groupColumns[2])?.headerText),
                                             }
                                             : undefined, onChange: (val) => {
                                             if (groupSetting) {
@@ -69025,7 +69497,7 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
                                             }
                                         }, isClearable: groupColumns?.length === 3 }) })] }), jsxs("div", { className: "border-top d-flex justify-content-end mt-1", children: [jsx(Button$1$1, { color: "primary", className: "mt-1 me-50 rounded", size: "sm", onClick: () => {
                                         groupSetting?.onGroup({
-                                            columnGrouped: groupColumns.filter((x) => x)
+                                            columnGrouped: groupColumns.filter((x) => x),
                                         });
                                         document.getElementById('group-dropdown-toggle')?.click();
                                     }, children: `${t('Apply')}` }), jsx(Button$1$1, { color: "secondary", outline: true, className: "mt-1 rounded", size: "sm", onClick: () => {
@@ -69034,14 +69506,16 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
                                     }, children: `${t('Delete')}` })] })] })] }));
     };
     const chooseColumnsTemplate = () => {
-        return jsx(SvgSettings, { className: "r-toolbar-icon", fontSize: 20, color: "#7F7F7F", onClick: () => setOpenPopupSetupColumn(true) });
+        return (jsx(SvgSettings, { className: "r-toolbar-icon", fontSize: 20, color: "#7F7F7F", onClick: () => setOpenPopupSetupColumn(true) }));
     };
     const expandTemplate = () => {
         return (jsxs(Fragment$1, { children: [!expandsAll && (jsx(ExpandAllIcon, { onClick: () => {
                         setExpandsAll(true);
-                    }, color: "#7F7F7F", size: 24 })), expandsAll && jsx(UnExpandAllIcon, { onClick: () => setExpandsAll(false), color: "#7F7F7F", size: 24 })] }));
+                    }, color: "#7F7F7F", size: 24 })), expandsAll && (jsx(UnExpandAllIcon, { onClick: () => setExpandsAll(false), color: "#7F7F7F", size: 24 }))] }));
     };
-    const defaultToolbarOption = searchSetting?.searchEnable ? [{ template: searchTemplate, align: 'left' }] : [];
+    const defaultToolbarOption = searchSetting?.searchEnable
+        ? [{ template: searchTemplate, align: 'left' }]
+        : [];
     if (groupSetting) {
         defaultToolbarOption.push({ template: groupbtnTemplate, align: 'left' });
     }
@@ -69050,7 +69524,10 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
     }
     let toolbarTopOption = [];
     if (toolbarSetting?.toolbarOptions) {
-        toolbarTopOption = [...defaultToolbarOption, ...toolbarSetting?.toolbarOptions];
+        toolbarTopOption = [
+            ...defaultToolbarOption,
+            ...toolbarSetting?.toolbarOptions,
+        ];
     }
     else {
         toolbarTopOption = [...defaultToolbarOption];
@@ -69081,7 +69558,9 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
     useEffect(() => {
         if (setSelectedItem) {
             if (isMulti) {
-                if (dataSource && selectedRows && selectedRows?.length !== selectedItem?.length) {
+                if (dataSource &&
+                    selectedRows &&
+                    selectedRows?.length !== selectedItem?.length) {
                     setSelectedItem([...selectedRows]);
                     if (handleSelect) {
                         handleSelect([...selectedRows]);
@@ -69090,7 +69569,8 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
             }
             else {
                 if (dataSource && selectedRows?.length > 0) {
-                    if (!selectedItem || selectedItem[fieldKey] !== selectedRows[0][fieldKey]) {
+                    if (!selectedItem ||
+                        selectedItem[fieldKey] !== selectedRows[0][fieldKey]) {
                         setSelectedItem({ ...selectedRows[0] });
                         if (handleSelect) {
                             handleSelect({ ...selectedRows[0] });
@@ -69109,7 +69589,8 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
     useEffect(() => {
         if (!isMulti) {
             if (dataSource && selectedItem && selectedItem[fieldKey]) {
-                if (selectedRows?.length === 0 || selectedItem[fieldKey] !== selectedRows[0][fieldKey]) {
+                if (selectedRows?.length === 0 ||
+                    selectedItem[fieldKey] !== selectedRows[0][fieldKey]) {
                     setSelectedRows([selectedItem]);
                 }
             }
@@ -69118,142 +69599,19 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
             }
         }
         else {
-            if (dataSource && selectedItem && selectedRows?.length !== selectedItem.length) {
+            if (dataSource &&
+                selectedItem &&
+                selectedRows?.length !== selectedItem.length) {
                 setSelectedRows(selectedItem ? [...selectedItem] : []);
             }
         }
     }, [selectedItem]);
-    const RenderContent = ({ datas, level = 0 }) => {
-        return (jsx(Fragment$1, { children: datas.map((row, indexRow) => {
-                const [expand, setExpand] = useState(row.expand ?? true);
-                useEffect(() => {
-                    if (expandsAll !== undefined) {
-                        setExpand(expandsAll);
-                        row.expand = expandsAll;
-                    }
-                }, [expandsAll]);
-                if (row.children?.length) {
-                    const col = contentColumns.find((x) => x.field === row.field);
-                    let value = row[col.field];
-                    if (col.type === 'numeric') {
-                        value = formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) ?? 0;
-                    }
-                    else if (col.type === 'date') {
-                        value = value ? formatDateTime(value, formatSetting?.dateFormat) : '';
-                    }
-                    else if (col.type === 'datetime') {
-                        value = value ? formatDateTime(value, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm') : '';
-                    }
-                    if (col.template) {
-                        value = col.template(row, indexRow) ?? '';
-                    }
-                    return (jsxs(Fragment$1, { children: [jsxs("tr", { "aria-rowindex": indexRow + 1, role: "row", className: "r-row", children: [jsx("td", { className: "r-rowcell r-cell-group", colSpan: 3, children: jsxs("div", { className: "r-rowcell-div", children: [jsx(SvgChevronRight, { style: {
-                                                        marginLeft: level * 20,
-                                                        transform: expand ? 'rotate(90deg)' : 'rotate(0deg)'
-                                                    }, fontSize: 15, onClick: () => {
-                                                        setExpand(!expand);
-                                                        setExpandsAll(undefined);
-                                                        row.expand = !expand;
-                                                    } }), t(col.headerDisplay ?? col.headerText), ": ", value, " (", row.children.length, ")"] }) }), contentColumns.map((colSum, indexCol) => {
-                                        if (indexCol <= firstColSpan || colSum.visible === false || colSum.isGroup === true) {
-                                            return;
-                                        }
-                                        let sumValue = row[colSum.field];
-                                        const haveSum = row[colSum.field] !== undefined && row[colSum.field] !== null;
-                                        if (!haveSum && colSum.haveSum === true && colSum.type === 'numeric') {
-                                            sumValue = row.children.reduce(function (accumulator, currentValue) {
-                                                return Number(accumulator ?? 0) + Number(currentValue[colSum.field] ?? 0);
-                                            }, 0);
-                                        }
-                                        if (colSum.type === 'numeric') {
-                                            sumValue = formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', colSum.numericSettings?.fraction, true, false);
-                                            if (!zeroVisiable && (sumValue === '0' || sumValue === 0)) {
-                                                sumValue = '';
-                                            }
-                                        }
-                                        return (jsx("td", { className: "r-rowcell r-cell-sum-group", children: jsx("div", { className: "r-rowcell-div", style: {
-                                                    justifyContent: colSum.textAlign ? colSum.textAlign : 'left'
-                                                }, children: (haveSum || colSum.haveSum === true) && Number(row[colSum.field] ?? '0') < 0 ? (jsxs("div", { style: {
-                                                        color: formatSetting?.colorNegative ?? 'red'
-                                                    }, children: [' ', `${formatSetting?.prefixNegative ?? '-'}${sumValue}${formatSetting?.suffixNegative ?? ''}`] })) : (sumValue) }) }, `group-sum-cell-${level}-${indexRow}-${indexCol}`));
-                                    })] }), expand && jsx(RenderContent, { datas: row.children, level: level + 1 })] }, `row-${level}-${indexRow}`));
-                }
-                else {
-                    const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
-                    return (jsx("tr", { id: `row-content-${indexRow}`, "aria-rowindex": indexRow + 1, role: "row", className: classNames$1('r-row', {
-                            'r-last-row': level === 0 && indexRow === viewData.length - 1
-                        }), onContextMenu: (e) => {
-                            e.preventDefault();
-                            handleContextMenu(e, row);
-                        }, children: contentColumns.map((column, indexCol) => (jsx(RenderContentCol, { idTable: idTable, col: column, fieldKey: fieldKey, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, isMulti: isMulti, selectedRows: selectedRows, setSelectedRows: setSelectedRows, formatSetting: formatSetting, indexCol: indexCol, indexRow: indexRow, isSelected: isSelected, row: row, zeroVisiable: zeroVisiable, handleCloseContext: handleCloseContext, handleDoubleClick: handleDoubleClick }, indexCol))) }, `row-content-${indexRow}`));
-                }
-            }) }));
-    };
-    const handleContextMenu = (e, row) => {
-        e.preventDefault();
-        setContext(null);
-        setTimeout(() => {
-            setContext({
-                x: e.clientX,
-                y: e.clientY,
-                row,
-                show: true
-            });
-        }, 100);
-    };
-    const handleCloseContext = () => setContext((prev) => (prev ? { ...prev, show: false } : null));
-    useEffect(() => {
-        if (virtualDivRef.current && context) {
-            // đặt vị trí div ảo tại con trỏ chuột
-            virtualDivRef.current.style.position = 'fixed';
-            virtualDivRef.current.style.top = `${context.y}px`;
-            virtualDivRef.current.style.left = `${context.x}px`;
-            virtualDivRef.current.style.width = '0px';
-            virtualDivRef.current.style.height = '0px';
-        }
-    }, [context]);
-    return (jsxs("div", { className: "r-table-edit r-virtualized-table", children: [jsxs("div", { className: "r-grid", children: [toolbarSetting?.showTopToolbar && jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), headerComponent && headerComponent(), jsxs("div", { ref: gridRef, className: "r-gridtable", style: {
-                            height: `${height ? `${height}px` : 'auto'}`,
-                            position: 'relative'
-                        }, children: [jsxs("table", { role: "presentation", style: { width: '100%' }, children: [jsx(RenderColGroup, { contentColumns: contentColumns }), jsx("thead", { className: "r-gridheader", role: "rowgroup", children: headerColumns.map((rowColumn, indexParent) => {
-                                            return (jsx("tr", { className: "r-row", role: "row", children: rowColumn.map((col, index) => (jsx(HeaderTableCol, { col: col, idTable: idTable ?? '', dataSource: dataSource, indexCol: index, indexParent: indexParent, isMulti: isMulti ?? false, objHeaderWidthFixLeft: objHeaderWidthFixLeft, objHeaderWidthFixRight: objHeaderWidthFixRight, selectEnable: true, selectedRows: selectedRows, setSelectedRows: setSelectedRows, container: gridRef, filterBy: filterBy, orderBy: orderBy, optionsFilter: querySetting?.optionsFilter, allowFiltering: querySetting?.allowFiltering, allowSorting: querySetting?.allowSorting, formatSetting: formatSetting, changeFilter: (val) => {
-                                                        setFilterBy([...val]);
-                                                        if (querySetting?.changeFilter) {
-                                                            querySetting.changeFilter(val);
-                                                        }
-                                                    }, changeOrder: (val) => {
-                                                        setOrderBy([...val]);
-                                                        if (querySetting?.changeOrder) {
-                                                            querySetting.changeOrder(val);
-                                                        }
-                                                    }, columns: contentColumns, setContentColumns: setContentColumns, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, totalCount: dataSource?.length ?? 0 }, `header-${indexParent}-${index}`))) }, `header-${-indexParent}`));
-                                        }) }), jsx("tbody", { className: "r-gridcontent", role: "rowgroup", children: jsx(RenderContent, { datas: viewData }) }), jsx("tfoot", { className: "r-gridfoot", children: ((columnsAggregate?.length ?? 0) > 0 || haveSum) && (jsx("tr", { className: "r-row", children: contentColumns.map((col, indexCol) => {
-                                                if (col.visible === false || col.isGroup === true) {
-                                                    return;
-                                                }
-                                                const item = columnsAggregate?.find((x) => x.field === col.field);
-                                                let sumValue = item?.value;
-                                                if (!item && col.haveSum === true && col.type === 'numeric') {
-                                                    sumValue = viewData.reduce(function (accumulator, currentValue) {
-                                                        return Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0);
-                                                    }, 0);
-                                                }
-                                                if (col.type === 'numeric') {
-                                                    sumValue = formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false);
-                                                }
-                                                return (jsx("td", { className: classNames$1(`p-0 px-50 r-footer fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }), style: {
-                                                        left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
-                                                        right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
-                                                        textAlign: col.textAlign ? col.textAlign : 'left'
-                                                    }, children: jsx("div", { className: "r-footer-div", children: (item || col.haveSum === true) && Number(item?.value ?? '0') < 0 ? (jsxs("div", { style: {
-                                                                color: formatSetting?.colorNegative ?? 'red'
-                                                            }, children: [' ', `${formatSetting?.prefixNegative ?? '-'}${sumValue}${formatSetting?.suffixNegative ?? ''}`] })) : (sumValue) }) }, `summarycell-${indexCol}`));
-                                            }) })) })] }), jsx("div", { ref: virtualDivRef }), context && (contextMenuItems?.length ?? 0) > 0 && handleContextMenuClick && (jsx(Popover$1, { className: "r-context-popover", placement: "right-start", isOpen: context.show, target: virtualDivRef.current, toggle: handleCloseContext, fade: false, children: jsx(PopoverBody$1, { children: contextMenuItems?.map((item, index) => {
-                                        return (jsxs("div", { className: "r-context-item", onClick: () => {
-                                                handleCloseContext();
-                                                handleContextMenuClick?.(item, context.row);
-                                            }, children: [item.icon && (jsx("div", { className: "me-75", children: jsx(IconCustom, { iconName: item.icon, size: 16 }) })), jsx("span", { children: t(item.text) })] }, `context-${index}`));
-                                    }) }) })), (viewData.length ?? 0) === 0 && !isLoading && (jsxs("div", { className: "r-no-data", children: [jsx("svg", { width: "64", height: "41", viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: jsxs("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd", children: [jsx("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }), jsxs("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [jsx("path", { d: "M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" }), jsx("path", { d: "M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z", fill: "#fafafa" })] })] }) }), t('No data available.')] })), isLoading && (jsx("div", { className: "r-loading-overlay", children: jsxs("div", { className: "r-loading", children: [jsx(Spinner$1, { className: "me-1" }), t('Loading...')] }) }))] })] }), pagingSetting?.allowPaging && (jsx(PagingComponent, { gridRef: gridRef, onChangePage: onChangePage, pageSize: pagingSetting?.pageSize ?? 0, currentPage: pagingSetting?.currentPage ?? 0, pageOptions: pagingSetting?.pageOptions ?? [20, 30, 50, 100], totalItem: pagingSetting?.totalItem ?? 0, onChangePageSize: onChangePageSize })), jsx(SettingColumn, { gridRef: gridRef, handleSidebar: () => {
+    return (jsxs("div", { className: classNames$1('r-table-edit r-virtualized-table', {
+            'is-maximized': maximize,
+        }), children: [jsxs("div", { className: "r-grid", children: [toolbarSetting?.showTopToolbar && (jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption, maximize: maximize, setMaximize: setMaximize })), headerComponent && headerComponent(), jsxs("div", { ref: gridRef, className: "r-gridtable", style: {
+                            height: `${heightTable ? `${heightTable}px` : 'auto'}`,
+                            position: 'relative',
+                        }, children: [jsx(TableElement, { idTable: idTable, gridRef: gridRef, isLoading: isLoading, dataSource: dataSource, objHeaderWidthFixLeft: objHeaderWidthFixLeft, objHeaderWidthFixRight: objHeaderWidthFixRight, fieldKey: fieldKey, lastObjWidthFixLeft: lastObjWidthFixLeft, fisrtObjWidthFixRight: fisrtObjWidthFixRight, selectedRows: selectedRows, isMulti: isMulti, filterBy: filterBy, orderBy: orderBy, formatSetting: formatSetting, contentColumns: contentColumns, headerColumns: headerColumns, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, searchTerm: searchTerm, searchSetting: searchSetting, columnsAggregate: columnsAggregate, haveSum: haveSum, expandsAll: expandsAll, zeroVisiable: zeroVisiable, contextMenuItems: contextMenuItems, handleContextMenuClick: handleContextMenuClick, setFilterBy: setFilterBy, setSelectedRows: setSelectedRows, setOrderBy: setOrderBy, handleDoubleClick: handleDoubleClick, handleCellClick: handleCellClick, querySetting: querySetting, setContentColumns: setContentColumns, setExpandsAll: setExpandsAll }), isLoading && (jsx("div", { className: "r-loading-overlay", children: jsxs("div", { className: "r-loading", children: [jsx(Spinner$1, { className: "me-1" }), t('Loading...')] }) }))] })] }), pagingSetting?.allowPaging && (jsx(PagingComponent, { gridRef: gridRef, onChangePage: onChangePage, pageSize: pagingSetting?.pageSize ?? 0, currentPage: pagingSetting?.currentPage ?? 0, pageOptions: pagingSetting?.pageOptions ?? [20, 30, 50, 100], totalItem: pagingSetting?.totalItem ?? 0, onChangePageSize: onChangePageSize })), jsx(SettingColumn, { gridRef: gridRef, handleSidebar: () => {
                     setOpenPopupSetupColumn(!openPopupSetupColumn);
                 }, settingColumns: settingColumns, openSidebar: openPopupSetupColumn, column: [...contentColumns], resetDefaultColumns: resetDefaultColumns, setColumn: (newColumns) => {
                     if (saveSettingColumn) {
@@ -69263,7 +69621,7 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
                             visible: x.visible,
                             fixedType: x.fixedType,
                             width: x.width,
-                            sortOrder: index + 1
+                            sortOrder: index + 1,
                         })));
                     }
                 } })] }));