react-table-edit 1.5.41 → 1.5.42

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,6 +20114,136 @@ 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;
@@ -20128,9 +20258,7 @@ 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',
@@ -20155,7 +20283,7 @@ 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 });
             }
@@ -20208,8 +20336,8 @@ const SelectTable = forwardRef((props, ref) => {
         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);
         }
@@ -20225,7 +20353,7 @@ const SelectTable = forwardRef((props, ref) => {
                     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);
@@ -20249,7 +20377,7 @@ const SelectTable = forwardRef((props, ref) => {
                     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 +20386,15 @@ 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 +20410,21 @@ 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;
                 }
@@ -20339,17 +20467,6 @@ const SelectTable = forwardRef((props, ref) => {
             });
         }, 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;
@@ -20372,7 +20489,7 @@ 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,9 +20499,9 @@ 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']));
                             if (index > -1) {
@@ -20452,33 +20569,15 @@ const SelectTable = forwardRef((props, ref) => {
                                 }, 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);
@@ -20506,7 +20605,7 @@ const SelectTable = forwardRef((props, ref) => {
                                         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 +36421,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 +39088,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 +39148,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 +39946,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,7 +68863,7 @@ 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 RenderContentCol = React__default.memo((props) => {
     const { col, indexCol, indexRow, isSelected, row, zeroVisiable, formatSetting, idTable, fisrtObjWidthFixRight, lastObjWidthFixLeft, objWidthFixLeft, objWidthFixRight, selectedRows, setSelectedRows, handleCloseContext, handleDoubleClick, fieldKey, isMulti } = props;
     const cellId = `content-${idTable}-row${indexRow}col-${indexCol}`;
     const checkOverflow = () => {
@@ -68778,7 +68913,7 @@ const RenderContentCol = (props) => {
             // ✅ 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)) {
+                if (!zeroVisiable && !col.zeroVisiable && !(row?.sortOrder < 0 || row?.sortOrder > 100000) && (value === '0' || value === 0)) {
                     value = '';
                 }
             }
@@ -68852,20 +68987,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, 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 +69001,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;
@@ -68969,6 +69095,178 @@ 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 }, 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, 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 +69280,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 +69300,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 +69313,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 +69330,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 +69339,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 +69357,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 +69391,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 +69402,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 +69422,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 +69432,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, 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 +69454,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,
                         })));
                     }
                 } })] }));