react-table-edit 1.4.68 → 1.5.1

package/dist/index.js

@@ -19960,7 +19960,9 @@ const calculateTableStructure = (columns, settingColumns) => {
         }, 0);
     };
     calcTotalRightWidth(columns);
-    applySetting(columns);
+    if ((settingColumns?.length ?? 0) > 0) {
+        applySetting(columns);
+    }
     traverse(columns);
     // Danh sách các cột được hiển thị
     const flatVisble = flat.filter((e) => e.visible !== false);
@@ -19971,7 +19973,6 @@ const calculateTableStructure = (columns, settingColumns) => {
     // Tính toán vị trí đầu tiên và cuối cùng của các cột có thể sửa
     const indexFirstEdit = flat.findIndex((item) => item.editEnable && item.visible !== false && !item.disabledCondition);
     const indexLastEdit = flat.map((item, idx) => (item.editEnable && item.visible !== false && !item.disabledCondition ? idx : -1)).reduce((acc, val) => (val > acc ? val : acc), -1);
-    console.log(flatVisble);
     return {
         levels,
         flat,
@@ -19987,6 +19988,50 @@ const calculateTableStructure = (columns, settingColumns) => {
         indexLastEdit
     };
 };
+/**
+* Kiểm tra row có thỏa mãn tất cả filter và chứa từ khóa tìm kiếm hay không
+*/
+const CheckRowMatch = (row, filters, keyword, searchKeys) => {
+    const isFilterMatch = filters.every((filter) => {
+        const { key, value, ope } = filter;
+        const rowValue = row[key];
+        if (rowValue === undefined || rowValue === null || value === undefined || value === null) {
+            return false;
+        }
+        const valStr = String(rowValue).toLowerCase();
+        const filterStr = String(value).toLowerCase();
+        /*eslint-disable*/
+        switch (ope) {
+            case "startswith":
+                return valStr.startsWith(filterStr);
+            case "endswith":
+                return valStr.endsWith(filterStr);
+            case "contains":
+                return valStr.includes(filterStr);
+            case "equal":
+                return rowValue == value;
+            case "notequal":
+                return rowValue != value;
+            case "greaterthan":
+                return rowValue > value;
+            case "greaterthanorequal":
+                return rowValue >= value;
+            case "lessthan":
+                return rowValue < value;
+            case "lessthanorequal":
+                return rowValue <= value;
+            default:
+                return false;
+        }
+        /*eslint-enable*/
+    });
+    const isSearchMatch = !keyword ||
+        searchKeys.some((key) => {
+            const val = row[key];
+            return val?.toString().toLowerCase().includes(keyword.trim().toLowerCase());
+        });
+    return isFilterMatch && isSearchMatch;
+};
 
 const defaultMaxHeight$1 = 250;
 const SelectTable = React$5.forwardRef((props, ref) => {
@@ -20441,26 +20486,20 @@ const RenderToolbarTop = ({ toolbarTopOption }) => {
                     }) })] }) }));
 };
 
-const handleAdd = (dataSource, tableElement, indexFirstEdit, 
+const handleAdd = (dataSource, containerRef, indexFirstEdit, 
 /*eslint-disable*/
-changeDataSource, pagingSetting, handleFocusCell, 
+changeDataSource, handleFocusCell, 
 /*eslint-enable*/
 numberOfRows) => {
     const lengthData = dataSource.length;
     changeDataSource(dataSource, numberOfRows ?? 1);
-    if (pagingSetting?.setCurrentPage) {
-        pagingSetting?.setCurrentPage(Math.floor(lengthData / (pagingSetting?.pageSize ?? 0)) + 1);
-    }
-    if (tableElement) {
+    if (containerRef) {
         handleFocusCell(lengthData, indexFirstEdit);
     }
 };
 const handleDuplicate = async (dataSource, indexFocus, fieldKey, defaultValue, fieldUniKey, 
 /*eslint-disable*/
-changeDataSource, tableElement, totalCount, toolbarSetting, buttonSetting, editDisable, addDisable, onDuplicate, // sự kiện khi duplicate
-pagingClient, pagingSetting
-/*eslint-enable*/
-) => {
+changeDataSource, containerRef, totalCount, toolbarSetting, buttonSetting, editDisable, addDisable, onDuplicate) => {
     const newData = { ...dataSource[indexFocus] };
     if (toolbarSetting?.showBottomToolbar && !buttonSetting?.duplicateDisable && !editDisable && !addDisable) {
         if (fieldKey && defaultValue) {
@@ -20472,16 +20511,11 @@ pagingClient, pagingSetting
         if (onDuplicate) {
             await onDuplicate(newData, indexFocus);
         }
-        if (pagingClient) {
-            dataSource.splice(((((pagingSetting?.currentPage ?? 1) - 1) * (pagingSetting?.pageSize ?? 0)) + indexFocus) + 1, 0, newData);
-        }
-        else {
-            dataSource.splice(indexFocus + 1, 0, newData);
-        }
+        dataSource.splice(indexFocus + 1, 0, newData);
         changeDataSource(dataSource);
-        if (tableElement && indexFocus === totalCount) {
+        if (containerRef && indexFocus === totalCount) {
             setTimeout(() => {
-                tableElement.current?.scrollTo(0, tableElement.current.scrollHeight);
+                containerRef.current?.scrollTo(0, containerRef.current.scrollHeight);
             }, 100);
         }
     }
@@ -20490,18 +20524,13 @@ const handleInsertAfter = (dataSource, indexFocus, defaultValue,
 /*eslint-disable*/
 changeDataSource, 
 /*eslint-enable*/
-tableElement, totalCount, pagingClient, pagingSetting, toolbarSetting, buttonSetting, editDisable, addDisable) => {
+containerRef, totalCount, toolbarSetting, buttonSetting, editDisable, addDisable) => {
     if (toolbarSetting?.showBottomToolbar && !buttonSetting?.insertAfterDisable && !editDisable && !addDisable) {
-        if (pagingClient) {
-            dataSource.splice(((((pagingSetting?.currentPage ?? 1) - 1) * (pagingSetting?.pageSize ?? 0)) + (indexFocus ?? -1) + 1), 0, { ...{ ...defaultValue } });
-        }
-        else {
-            dataSource.splice((indexFocus ?? -1) + 1, 0, { ...defaultValue });
-        }
+        dataSource.splice((indexFocus ?? -1) + 1, 0, { ...defaultValue });
         changeDataSource(dataSource);
-        if (tableElement && indexFocus === totalCount) {
+        if (containerRef && indexFocus === totalCount) {
             setTimeout(() => {
-                tableElement.current?.scrollTo(0, tableElement.current.scrollHeight);
+                containerRef.current?.scrollTo(0, containerRef.current.scrollHeight);
             }, 100);
         }
     }
@@ -20510,14 +20539,9 @@ const handleInsertBefore = (dataSource, indexFocus, defaultValue,
 /*eslint-disable*/
 changeDataSource, 
 /*eslint-enable*/
-pagingClient, pagingSetting, toolbarSetting, buttonSetting, editDisable, addDisable) => {
+toolbarSetting, buttonSetting, editDisable, addDisable) => {
     if (toolbarSetting?.showBottomToolbar && !buttonSetting?.insertBeforeDisable && !editDisable && !addDisable) {
-        if (pagingClient) {
-            dataSource.splice(((((pagingSetting?.currentPage ?? 1) - 1) * (pagingSetting?.pageSize ?? 0)) + (indexFocus ?? -1)), 0, { ...{ ...defaultValue } });
-        }
-        else {
-            dataSource.splice((indexFocus ?? -1), 0, { ...defaultValue });
-        }
+        dataSource.splice((indexFocus ?? -1), 0, { ...defaultValue });
         changeDataSource(dataSource);
     }
 };
@@ -41287,7 +41311,7 @@ function styleInject(css, ref) {
   }
 }
 
-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-table-edit .react-datepicker__year-read-view--down-arrow,\n.r-table-edit .react-datepicker__month-read-view--down-arrow,\n.r-table-edit .react-datepicker__month-year-read-view--down-arrow,\n.r-table-edit .react-datepicker__navigation-icon::before {\n  border-color: #e0e0e0;\n  border-style: solid;\n  border-width: 3px 3px 0 0;\n  content: \"\";\n  display: block;\n  height: 9px;\n  position: absolute;\n  top: 6px;\n  width: 9px;\n}\n.r-table-edit .react-datepicker-wrapper {\n  display: inline-block;\n  width: 100% !important;\n  padding: 0;\n  border: 0;\n}\n.r-table-edit .react-datepicker-wrapper .react-datepicker__input-container input {\n  height: 29px !important;\n}\n.r-table-edit .react-datepicker {\n  font-family: \"Helvetica Neue\", helvetica, arial, sans-serif;\n  font-size: 0.8rem;\n  background-color: #FFFFFF;\n  color: #000000;\n  border: 1px solid #e0e0e0;\n  border-radius: 0.3rem;\n  display: inline-block;\n  position: relative;\n  line-height: initial;\n}\n.r-table-edit .react-datepicker--time-only .react-datepicker__time-container {\n  border-left: 0;\n}\n.r-table-edit .react-datepicker--time-only .react-datepicker__time,\n.r-table-edit .react-datepicker--time-only .react-datepicker__time-box {\n  border-bottom-left-radius: 0.3rem;\n  border-bottom-right-radius: 0.3rem;\n}\n.r-table-edit .react-datepicker-popper {\n  position: relative;\n  line-height: 0;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__triangle {\n  stroke: #e0e0e0;\n}\n.r-table-edit .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {\n  fill: #f0f0f0;\n  color: #f0f0f0;\n}\n.r-table-edit .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {\n  fill: #FFFFFF;\n  color: #FFFFFF;\n}\n.r-table-edit .react-datepicker__header {\n  text-align: center;\n  background-color: #FFFFFF;\n  border-bottom: 1px solid #e0e0e0;\n  border-top-left-radius: 0.3rem;\n  padding: 8px 0;\n  position: relative;\n}\n.r-table-edit .react-datepicker__header--time {\n  padding-bottom: 8px;\n  padding-left: 5px;\n  padding-right: 5px;\n}\n.r-table-edit .react-datepicker__header--time:not(.react-datepicker__header--time--only) {\n  border-top-left-radius: 0;\n}\n.r-table-edit .react-datepicker__header:not(.react-datepicker__header--has-time-select) {\n  border-top-right-radius: 0.3rem;\n}\n.r-table-edit .react-datepicker__year-dropdown-container--select,\n.r-table-edit .react-datepicker__month-dropdown-container--select,\n.r-table-edit .react-datepicker__month-year-dropdown-container--select,\n.r-table-edit .react-datepicker__year-dropdown-container--scroll,\n.r-table-edit .react-datepicker__month-dropdown-container--scroll,\n.r-table-edit .react-datepicker__month-year-dropdown-container--scroll {\n  display: inline-block;\n  margin: 0 15px;\n}\n.r-table-edit .react-datepicker__current-month,\n.r-table-edit .react-datepicker-time__header,\n.r-table-edit .react-datepicker-year-header {\n  margin-top: 0;\n  color: #000000;\n  font-weight: bold;\n  font-size: 0.944rem;\n}\n.r-table-edit h2.react-datepicker__current-month {\n  padding: 0;\n  margin: 0;\n}\n.r-table-edit .react-datepicker-time__header {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n}\n.r-table-edit .react-datepicker__navigation {\n  align-items: center;\n  background: none;\n  display: flex;\n  justify-content: center;\n  text-align: center;\n  cursor: pointer;\n  position: absolute;\n  top: 2px;\n  padding: 0;\n  border: none;\n  z-index: 1;\n  height: 32px;\n  width: 32px;\n  text-indent: -999em;\n  overflow: hidden;\n}\n.r-table-edit .react-datepicker__navigation--previous {\n  left: 2px;\n}\n.r-table-edit .react-datepicker__navigation--next {\n  right: 2px;\n}\n.r-table-edit .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {\n  right: 85px;\n}\n.r-table-edit .react-datepicker__navigation--years {\n  position: relative;\n  top: 0;\n  display: block;\n  margin-left: auto;\n  margin-right: auto;\n}\n.r-table-edit .react-datepicker__navigation--years-previous {\n  top: 4px;\n}\n.r-table-edit .react-datepicker__navigation--years-upcoming {\n  top: -4px;\n}\n.r-table-edit .react-datepicker__navigation:hover *::before {\n  border-color: #eb4619;\n}\n.r-table-edit .react-datepicker__navigation-icon {\n  position: relative;\n  top: -1px;\n  font-size: 20px;\n  width: 0;\n}\n.r-table-edit .react-datepicker__navigation-icon--next {\n  left: -2px;\n}\n.r-table-edit .react-datepicker__navigation-icon--next::before {\n  transform: rotate(45deg);\n  left: -7px;\n}\n.r-table-edit .react-datepicker__navigation-icon--previous {\n  right: -2px;\n}\n.r-table-edit .react-datepicker__navigation-icon--previous::before {\n  transform: rotate(225deg);\n  right: -7px;\n}\n.r-table-edit .react-datepicker__month-container {\n  float: left;\n}\n.r-table-edit .react-datepicker__year {\n  margin: 0.4rem;\n  text-align: center;\n}\n.r-table-edit .react-datepicker__year-wrapper {\n  display: flex;\n  flex-wrap: wrap;\n  max-width: 180px;\n}\n.r-table-edit .react-datepicker__year .react-datepicker__year-text {\n  display: inline-block;\n  width: 4rem;\n  margin: 2px;\n}\n.r-table-edit .react-datepicker__month {\n  margin: 0.4rem;\n  text-align: center;\n}\n.r-table-edit .react-datepicker__month .react-datepicker__month-text,\n.r-table-edit .react-datepicker__month .react-datepicker__quarter-text {\n  display: inline-block;\n  width: 4rem;\n  margin: 2px;\n}\n.r-table-edit .react-datepicker__input-time-container {\n  clear: both;\n  width: 100%;\n  float: left;\n  margin: 5px 0 10px 15px;\n  text-align: left;\n}\n.r-table-edit .react-datepicker__input-time-container .react-datepicker-time__caption {\n  display: inline-block;\n}\n.r-table-edit .react-datepicker__input-time-container .react-datepicker-time__input-container {\n  display: inline-block;\n}\n.r-table-edit .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {\n  display: inline-block;\n  margin-left: 10px;\n}\n.r-table-edit .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {\n  width: auto;\n}\n.r-table-edit .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,\n.r-table-edit .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.r-table-edit .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {\n  margin-left: 5px;\n  display: inline-block;\n}\n.r-table-edit .react-datepicker__time-container {\n  float: right;\n  border-left: 1px solid #e0e0e0;\n  width: 85px;\n}\n.r-table-edit .react-datepicker__time-container--with-today-button {\n  display: inline;\n  border: 1px solid #e0e0e0;\n  border-radius: 0.3rem;\n  position: absolute;\n  right: -87px;\n  top: 0;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time {\n  position: relative;\n  background: white;\n  border-bottom-right-radius: 0.3rem;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {\n  width: 85px;\n  overflow-x: hidden;\n  margin: 0 auto;\n  text-align: center;\n  border-bottom-right-radius: 0.3rem;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {\n  list-style: none;\n  margin: 0;\n  height: calc(195px + 0.85rem);\n  overflow-y: scroll;\n  padding-right: 0;\n  padding-left: 0;\n  width: 100%;\n  box-sizing: content-box;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {\n  height: 30px;\n  padding: 5px 10px;\n  white-space: nowrap;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {\n  cursor: pointer;\n  background-color: #f0f0f0;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {\n  background-color: #216ba5;\n  color: white;\n  font-weight: bold;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {\n  background-color: #216ba5;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {\n  color: #ccc;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {\n  cursor: default;\n  background-color: transparent;\n}\n.r-table-edit .react-datepicker__week-number {\n  color: #ccc;\n  display: inline-block;\n  width: 1.7rem;\n  line-height: 1.7rem;\n  text-align: center;\n  margin: 0.166rem;\n}\n.r-table-edit .react-datepicker__week-number.react-datepicker__week-number--clickable {\n  cursor: pointer;\n}\n.r-table-edit .react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected,\n.react-datepicker__week-number--keyboard-selected):hover {\n  border-radius: 0.3rem;\n  background-color: #f0f0f0;\n}\n.r-table-edit .react-datepicker__week-number--selected {\n  border-radius: 0.3rem;\n  background-color: #216ba5;\n  color: #FFFFFF;\n}\n.r-table-edit .react-datepicker__week-number--selected:hover {\n  background-color: rgb(28.75, 93.2196969697, 143.75);\n}\n.r-table-edit .react-datepicker__week-number--keyboard-selected {\n  border-radius: 0.3rem;\n  background-color: rgb(41.5, 134.5606060606, 207.5);\n  color: #FFFFFF;\n}\n.r-table-edit .react-datepicker__week-number--keyboard-selected:hover {\n  background-color: rgb(28.75, 93.2196969697, 143.75);\n}\n.r-table-edit .react-datepicker__day-names {\n  white-space: nowrap;\n  margin-bottom: -8px;\n}\n.r-table-edit .react-datepicker__week {\n  white-space: nowrap;\n}\n.r-table-edit .react-datepicker__day-name,\n.r-table-edit .react-datepicker__day,\n.r-table-edit .react-datepicker__time-name {\n  color: #000000;\n  display: inline-block;\n  width: 1.7rem;\n  line-height: 1.7rem;\n  text-align: center;\n  margin: 0.166rem;\n}\n.r-table-edit .react-datepicker__day,\n.r-table-edit .react-datepicker__month-text,\n.r-table-edit .react-datepicker__quarter-text,\n.r-table-edit .react-datepicker__year-text {\n  cursor: pointer;\n}\n.r-table-edit .react-datepicker__day:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__month-text:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__quarter-text:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__year-text:not([aria-disabled=true]):hover {\n  border-radius: 0.3rem;\n  background-color: #FFFFFF;\n}\n.r-table-edit .react-datepicker__day--today,\n.r-table-edit .react-datepicker__month-text--today,\n.r-table-edit .react-datepicker__quarter-text--today,\n.r-table-edit .react-datepicker__year-text--today {\n  font-weight: bold;\n}\n.r-table-edit .react-datepicker__day--highlighted,\n.r-table-edit .react-datepicker__month-text--highlighted,\n.r-table-edit .react-datepicker__quarter-text--highlighted,\n.r-table-edit .react-datepicker__year-text--highlighted {\n  border-radius: 0.3rem;\n  background-color: #3dcc4a;\n  color: #FFFFFF;\n}\n.r-table-edit .react-datepicker__day--highlighted:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__month-text--highlighted:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__quarter-text--highlighted:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__year-text--highlighted:not([aria-disabled=true]):hover {\n  background-color: rgb(49.8551020408, 189.6448979592, 62.5632653061);\n}\n.r-table-edit .react-datepicker__day--highlighted-custom-1,\n.r-table-edit .react-datepicker__month-text--highlighted-custom-1,\n.r-table-edit .react-datepicker__quarter-text--highlighted-custom-1,\n.r-table-edit .react-datepicker__year-text--highlighted-custom-1 {\n  color: magenta;\n}\n.r-table-edit .react-datepicker__day--highlighted-custom-2,\n.r-table-edit .react-datepicker__month-text--highlighted-custom-2,\n.r-table-edit .react-datepicker__quarter-text--highlighted-custom-2,\n.r-table-edit .react-datepicker__year-text--highlighted-custom-2 {\n  color: green;\n}\n.r-table-edit .react-datepicker__day--holidays,\n.r-table-edit .react-datepicker__month-text--holidays,\n.r-table-edit .react-datepicker__quarter-text--holidays,\n.r-table-edit .react-datepicker__year-text--holidays {\n  position: relative;\n  border-radius: 0.3rem;\n  background-color: #ff6803;\n  color: #FFFFFF;\n}\n.r-table-edit .react-datepicker__day--holidays .overlay,\n.r-table-edit .react-datepicker__month-text--holidays .overlay,\n.r-table-edit .react-datepicker__quarter-text--holidays .overlay,\n.r-table-edit .react-datepicker__year-text--holidays .overlay {\n  position: absolute;\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: #333;\n  color: #FFFFFF;\n  padding: 4px;\n  border-radius: 4px;\n  white-space: nowrap;\n  visibility: hidden;\n  opacity: 0;\n  transition: visibility 0s, opacity 0.3s ease-in-out;\n}\n.r-table-edit .react-datepicker__day--holidays:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__month-text--holidays:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__quarter-text--holidays:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__year-text--holidays:not([aria-disabled=true]):hover {\n  background-color: rgb(207, 82.9642857143, 0);\n}\n.r-table-edit .react-datepicker__day--holidays:hover .overlay,\n.r-table-edit .react-datepicker__month-text--holidays:hover .overlay,\n.r-table-edit .react-datepicker__quarter-text--holidays:hover .overlay,\n.r-table-edit .react-datepicker__year-text--holidays:hover .overlay {\n  visibility: visible;\n  opacity: 1;\n}\n.r-table-edit .react-datepicker__day--selected,\n.r-table-edit .react-datepicker__day--in-selecting-range,\n.r-table-edit .react-datepicker__day--in-range,\n.r-table-edit .react-datepicker__month-text--selected,\n.r-table-edit .react-datepicker__month-text--in-selecting-range,\n.r-table-edit .react-datepicker__month-text--in-range,\n.r-table-edit .react-datepicker__quarter-text--selected,\n.r-table-edit .react-datepicker__quarter-text--in-selecting-range,\n.r-table-edit .react-datepicker__quarter-text--in-range,\n.r-table-edit .react-datepicker__year-text--selected,\n.r-table-edit .react-datepicker__year-text--in-selecting-range,\n.r-table-edit .react-datepicker__year-text--in-range {\n  border-radius: 0.3rem;\n  background-color: #216ba5;\n  color: #FFFFFF;\n}\n.r-table-edit .react-datepicker__day--selected:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__day--in-selecting-range:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__day--in-range:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__month-text--selected:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__month-text--in-selecting-range:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__month-text--in-range:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__quarter-text--selected:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__quarter-text--in-selecting-range:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__quarter-text--in-range:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__year-text--selected:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__year-text--in-selecting-range:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__year-text--in-range:not([aria-disabled=true]):hover {\n  background-color: rgb(28.75, 93.2196969697, 143.75);\n}\n.r-table-edit .react-datepicker__day--keyboard-selected,\n.r-table-edit .react-datepicker__month-text--keyboard-selected,\n.r-table-edit .react-datepicker__quarter-text--keyboard-selected,\n.r-table-edit .react-datepicker__year-text--keyboard-selected {\n  border-radius: 0.3rem;\n  background-color: rgb(186.25, 217.0833333333, 241.25);\n  color: rgb(0, 0, 0);\n}\n.r-table-edit .react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__month-text--keyboard-selected:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__quarter-text--keyboard-selected:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__year-text--keyboard-selected:not([aria-disabled=true]):hover {\n  background-color: rgb(28.75, 93.2196969697, 143.75);\n}\n.r-table-edit .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,\n.react-datepicker__month-text--in-range,\n.react-datepicker__quarter-text--in-range,\n.react-datepicker__year-text--in-range),\n.r-table-edit .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,\n.react-datepicker__month-text--in-range,\n.react-datepicker__quarter-text--in-range,\n.react-datepicker__year-text--in-range),\n.r-table-edit .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,\n.react-datepicker__month-text--in-range,\n.react-datepicker__quarter-text--in-range,\n.react-datepicker__year-text--in-range),\n.r-table-edit .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,\n.react-datepicker__month-text--in-range,\n.react-datepicker__quarter-text--in-range,\n.react-datepicker__year-text--in-range) {\n  background-color: rgba(33, 107, 165, 0.5);\n}\n.r-table-edit .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.r-table-edit .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.r-table-edit .react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.r-table-edit .react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.r-table-edit .react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.r-table-edit .react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.r-table-edit .react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.r-table-edit .react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range) {\n  background-color: #f0f0f0;\n  color: #000000;\n}\n.r-table-edit .react-datepicker__day--disabled,\n.r-table-edit .react-datepicker__month-text--disabled,\n.r-table-edit .react-datepicker__quarter-text--disabled,\n.r-table-edit .react-datepicker__year-text--disabled {\n  cursor: default;\n  color: #ccc;\n}\n.r-table-edit .react-datepicker__day--disabled .overlay,\n.r-table-edit .react-datepicker__month-text--disabled .overlay,\n.r-table-edit .react-datepicker__quarter-text--disabled .overlay,\n.r-table-edit .react-datepicker__year-text--disabled .overlay {\n  position: absolute;\n  bottom: 70%;\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: #333;\n  color: #FFFFFF;\n  padding: 4px;\n  border-radius: 4px;\n  white-space: nowrap;\n  visibility: hidden;\n  opacity: 0;\n  transition: visibility 0s, opacity 0.3s ease-in-out;\n}\n.r-table-edit .react-datepicker__input-container {\n  position: relative;\n  display: inline-block;\n  width: 100%;\n}\n.r-table-edit .react-datepicker__input-container .react-datepicker__calendar-icon {\n  position: absolute;\n  padding: 0.5rem;\n  box-sizing: content-box;\n}\n.r-table-edit .react-datepicker__view-calendar-icon input {\n  padding: 6px 10px 5px 25px;\n}\n.r-table-edit .react-datepicker__year-read-view,\n.r-table-edit .react-datepicker__month-read-view,\n.r-table-edit .react-datepicker__month-year-read-view {\n  border: 1px solid transparent;\n  border-radius: 0.3rem;\n  position: relative;\n}\n.r-table-edit .react-datepicker__year-read-view:hover,\n.r-table-edit .react-datepicker__month-read-view:hover,\n.r-table-edit .react-datepicker__month-year-read-view:hover {\n  cursor: pointer;\n}\n.r-table-edit .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,\n.r-table-edit .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,\n.r-table-edit .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,\n.r-table-edit .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,\n.r-table-edit .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,\n.r-table-edit .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {\n  border-top-color: rgb(178.5, 178.5, 178.5);\n}\n.r-table-edit .react-datepicker__year-read-view--down-arrow,\n.r-table-edit .react-datepicker__month-read-view--down-arrow,\n.r-table-edit .react-datepicker__month-year-read-view--down-arrow {\n  transform: rotate(135deg);\n  right: -16px;\n  top: 0;\n}\n.r-table-edit .react-datepicker__year-dropdown,\n.r-table-edit .react-datepicker__month-dropdown,\n.r-table-edit .react-datepicker__month-year-dropdown {\n  background-color: #f0f0f0;\n  position: absolute;\n  width: 50%;\n  left: 25%;\n  top: 30px;\n  z-index: 1;\n  text-align: center;\n  border-radius: 0.3rem;\n  border: 1px solid #e0e0e0;\n}\n.r-table-edit .react-datepicker__year-dropdown:hover,\n.r-table-edit .react-datepicker__month-dropdown:hover,\n.r-table-edit .react-datepicker__month-year-dropdown:hover {\n  cursor: pointer;\n}\n.r-table-edit .react-datepicker__year-dropdown--scrollable,\n.r-table-edit .react-datepicker__month-dropdown--scrollable,\n.r-table-edit .react-datepicker__month-year-dropdown--scrollable {\n  height: 150px;\n  overflow-y: scroll;\n}\n.r-table-edit .react-datepicker__year-option,\n.r-table-edit .react-datepicker__month-option,\n.r-table-edit .react-datepicker__month-year-option {\n  line-height: 20px;\n  width: 100%;\n  display: block;\n  margin-left: auto;\n  margin-right: auto;\n}\n.r-table-edit .react-datepicker__year-option:first-of-type,\n.r-table-edit .react-datepicker__month-option:first-of-type,\n.r-table-edit .react-datepicker__month-year-option:first-of-type {\n  border-top-left-radius: 0.3rem;\n  border-top-right-radius: 0.3rem;\n}\n.r-table-edit .react-datepicker__year-option:last-of-type,\n.r-table-edit .react-datepicker__month-option:last-of-type,\n.r-table-edit .react-datepicker__month-year-option:last-of-type {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  border-bottom-left-radius: 0.3rem;\n  border-bottom-right-radius: 0.3rem;\n}\n.r-table-edit .react-datepicker__year-option:hover,\n.r-table-edit .react-datepicker__month-option:hover,\n.r-table-edit .react-datepicker__month-year-option:hover {\n  background-color: #ccc;\n}\n.r-table-edit .react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,\n.r-table-edit .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,\n.r-table-edit .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {\n  border-bottom-color: rgb(178.5, 178.5, 178.5);\n}\n.r-table-edit .react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,\n.r-table-edit .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,\n.r-table-edit .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {\n  border-top-color: rgb(178.5, 178.5, 178.5);\n}\n.r-table-edit .react-datepicker__year-option--selected,\n.r-table-edit .react-datepicker__month-option--selected,\n.r-table-edit .react-datepicker__month-year-option--selected {\n  position: absolute;\n  left: 15px;\n}\n.r-table-edit .react-datepicker__close-icon {\n  cursor: pointer;\n  background-color: transparent;\n  border: 0;\n  outline: 0;\n  padding: 0 6px 0 0;\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 100%;\n  display: table-cell;\n  vertical-align: middle;\n}\n.r-table-edit .react-datepicker__close-icon::after {\n  cursor: pointer;\n  background-color: transparent;\n  color: #c4c4c4;\n  height: 16px;\n  width: 16px;\n  padding: 0px 2px;\n  font-size: 25px;\n  font-weight: 500;\n  line-height: 0.5;\n  text-align: center;\n  display: table-cell;\n  vertical-align: middle;\n  content: \"×\";\n}\n.r-table-edit .react-datepicker__close-icon:hover::after {\n  color: rgba(0, 0, 0, 0.8705882353) !important;\n}\n.r-table-edit .react-datepicker__close-icon--disabled {\n  cursor: default;\n}\n.r-table-edit .react-datepicker__close-icon--disabled::after {\n  cursor: default;\n  background-color: #ccc;\n}\n.r-table-edit .react-datepicker__today-button {\n  background: #f0f0f0;\n  border-top: 1px solid #e0e0e0;\n  cursor: pointer;\n  text-align: center;\n  font-weight: bold;\n  padding: 5px 0;\n  clear: left;\n}\n.r-table-edit .react-datepicker__portal {\n  position: fixed;\n  width: 100vw;\n  height: 100vh;\n  background-color: rgba(0, 0, 0, 0.8);\n  left: 0;\n  top: 0;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  z-index: 2147483647;\n}\n.r-table-edit .react-datepicker__portal .react-datepicker__day-name,\n.r-table-edit .react-datepicker__portal .react-datepicker__day,\n.r-table-edit .react-datepicker__portal .react-datepicker__time-name {\n  width: 3rem;\n  line-height: 3rem;\n}\n@media (max-width: 400px), (max-height: 550px) {\n  .r-table-edit .react-datepicker__portal .react-datepicker__day-name,\n  .r-table-edit .react-datepicker__portal .react-datepicker__day,\n  .r-table-edit .react-datepicker__portal .react-datepicker__time-name {\n    width: 2rem;\n    line-height: 2rem;\n  }\n}\n.r-table-edit .react-datepicker__portal .react-datepicker__current-month,\n.r-table-edit .react-datepicker__portal .react-datepicker-time__header {\n  font-size: 1.44rem;\n}\n.r-table-edit .react-datepicker__children-container {\n  width: 13.8rem;\n  margin: 0.4rem;\n  padding-right: 0.2rem;\n  padding-left: 0.2rem;\n  height: auto;\n}\n.r-table-edit .react-datepicker__aria-live {\n  position: absolute;\n  clip-path: circle(0);\n  border: 0;\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  width: 1px;\n  white-space: nowrap;\n}\n.r-table-edit .react-datepicker__calendar-icon {\n  width: 1em;\n  height: 1em;\n  vertical-align: -0.125em;\n}\n.r-table-edit .react-datepicker-popper {\n  z-index: 999 !important;\n  position: fixed !important;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__current-month {\n  color: rgba(0, 0, 0, 0.9) !important;\n  font-weight: 500 !important;\n  display: none;\n  font-family: Montserrat, Helvetica, Arial, serif !important;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown {\n  font-family: Montserrat, Helvetica, Arial, serif !important;\n  /* Giao diện của menu dropdown (tháng và năm) */\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown .react-datepicker__month-dropdown-container {\n  margin: 0px 3px 0px 0px;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown .react-datepicker__year-dropdown-container {\n  margin: 0px 0px 0px 3px;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown .react-datepicker__month-select:focus,\n.r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown .react-datepicker__year-select:focus {\n  border: 1px solid #1989fa !important;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown .react-datepicker__month-select,\n.r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown .react-datepicker__year-select {\n  background-color: #FFFFFF;\n  height: 22px;\n  border-radius: 2px;\n  padding: 2px 0;\n  border: 1px solid hsl(0, 0%, 80%);\n  outline: none;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__navigation {\n  margin-top: 4px;\n  color: #eb4619;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__day-name {\n  font-family: Montserrat, Helvetica, Arial, serif !important;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__day {\n  outline: none;\n  border-radius: 20px !important;\n  font-family: Montserrat, Helvetica, Arial, serif !important;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__day:hover {\n  background-color: rgba(235, 70, 25, 0.1) !important;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__day--today {\n  color: #eb4619;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__day--today.react-datepicker__day--selected {\n  color: #FFFFFF;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__day--today.react-datepicker__day--keyboard-selected {\n  background-color: rgba(235, 70, 25, 0.1);\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__day--selected {\n  background-color: #eb4619 !important;\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-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}\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 .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.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}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-icon-expand {\n  transition: transform 0.3s ease;\n  position: absolute;\n  left: 3px;\n  top: 8px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-icon-expand.is-open {\n  transform: rotate(90deg);\n  -moz-transform: rotate(90deg);\n  -webkit-transform: rotate(90deg);\n  -o-transform: rotate(90deg);\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  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\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: 9px;\n  top: 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 .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 7px;\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 .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-table-edit .react-datepicker__year-read-view--down-arrow,\n.r-table-edit .react-datepicker__month-read-view--down-arrow,\n.r-table-edit .react-datepicker__month-year-read-view--down-arrow,\n.r-table-edit .react-datepicker__navigation-icon::before {\n  border-color: #e0e0e0;\n  border-style: solid;\n  border-width: 3px 3px 0 0;\n  content: \"\";\n  display: block;\n  height: 9px;\n  position: absolute;\n  top: 6px;\n  width: 9px;\n}\n.r-table-edit .react-datepicker-wrapper {\n  display: inline-block;\n  width: 100% !important;\n  padding: 0;\n  border: 0;\n}\n.r-table-edit .react-datepicker-wrapper .react-datepicker__input-container input {\n  height: 29px !important;\n}\n.r-table-edit .react-datepicker {\n  font-family: \"Helvetica Neue\", helvetica, arial, sans-serif;\n  font-size: 0.8rem;\n  background-color: #FFFFFF;\n  color: #000000;\n  border: 1px solid #e0e0e0;\n  border-radius: 0.3rem;\n  display: inline-block;\n  position: relative;\n  line-height: initial;\n}\n.r-table-edit .react-datepicker--time-only .react-datepicker__time-container {\n  border-left: 0;\n}\n.r-table-edit .react-datepicker--time-only .react-datepicker__time,\n.r-table-edit .react-datepicker--time-only .react-datepicker__time-box {\n  border-bottom-left-radius: 0.3rem;\n  border-bottom-right-radius: 0.3rem;\n}\n.r-table-edit .react-datepicker-popper {\n  position: relative;\n  line-height: 0;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__triangle {\n  stroke: #e0e0e0;\n}\n.r-table-edit .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {\n  fill: #f0f0f0;\n  color: #f0f0f0;\n}\n.r-table-edit .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {\n  fill: #FFFFFF;\n  color: #FFFFFF;\n}\n.r-table-edit .react-datepicker__header {\n  text-align: center;\n  background-color: #FFFFFF;\n  border-bottom: 1px solid #e0e0e0;\n  border-top-left-radius: 0.3rem;\n  padding: 8px 0;\n  position: relative;\n}\n.r-table-edit .react-datepicker__header--time {\n  padding-bottom: 8px;\n  padding-left: 5px;\n  padding-right: 5px;\n}\n.r-table-edit .react-datepicker__header--time:not(.react-datepicker__header--time--only) {\n  border-top-left-radius: 0;\n}\n.r-table-edit .react-datepicker__header:not(.react-datepicker__header--has-time-select) {\n  border-top-right-radius: 0.3rem;\n}\n.r-table-edit .react-datepicker__year-dropdown-container--select,\n.r-table-edit .react-datepicker__month-dropdown-container--select,\n.r-table-edit .react-datepicker__month-year-dropdown-container--select,\n.r-table-edit .react-datepicker__year-dropdown-container--scroll,\n.r-table-edit .react-datepicker__month-dropdown-container--scroll,\n.r-table-edit .react-datepicker__month-year-dropdown-container--scroll {\n  display: inline-block;\n  margin: 0 15px;\n}\n.r-table-edit .react-datepicker__current-month,\n.r-table-edit .react-datepicker-time__header,\n.r-table-edit .react-datepicker-year-header {\n  margin-top: 0;\n  color: #000000;\n  font-weight: bold;\n  font-size: 0.944rem;\n}\n.r-table-edit h2.react-datepicker__current-month {\n  padding: 0;\n  margin: 0;\n}\n.r-table-edit .react-datepicker-time__header {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n}\n.r-table-edit .react-datepicker__navigation {\n  align-items: center;\n  background: none;\n  display: flex;\n  justify-content: center;\n  text-align: center;\n  cursor: pointer;\n  position: absolute;\n  top: 2px;\n  padding: 0;\n  border: none;\n  z-index: 1;\n  height: 32px;\n  width: 32px;\n  text-indent: -999em;\n  overflow: hidden;\n}\n.r-table-edit .react-datepicker__navigation--previous {\n  left: 2px;\n}\n.r-table-edit .react-datepicker__navigation--next {\n  right: 2px;\n}\n.r-table-edit .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {\n  right: 85px;\n}\n.r-table-edit .react-datepicker__navigation--years {\n  position: relative;\n  top: 0;\n  display: block;\n  margin-left: auto;\n  margin-right: auto;\n}\n.r-table-edit .react-datepicker__navigation--years-previous {\n  top: 4px;\n}\n.r-table-edit .react-datepicker__navigation--years-upcoming {\n  top: -4px;\n}\n.r-table-edit .react-datepicker__navigation:hover *::before {\n  border-color: #eb4619;\n}\n.r-table-edit .react-datepicker__navigation-icon {\n  position: relative;\n  top: -1px;\n  font-size: 20px;\n  width: 0;\n}\n.r-table-edit .react-datepicker__navigation-icon--next {\n  left: -2px;\n}\n.r-table-edit .react-datepicker__navigation-icon--next::before {\n  transform: rotate(45deg);\n  left: -7px;\n}\n.r-table-edit .react-datepicker__navigation-icon--previous {\n  right: -2px;\n}\n.r-table-edit .react-datepicker__navigation-icon--previous::before {\n  transform: rotate(225deg);\n  right: -7px;\n}\n.r-table-edit .react-datepicker__month-container {\n  float: left;\n}\n.r-table-edit .react-datepicker__year {\n  margin: 0.4rem;\n  text-align: center;\n}\n.r-table-edit .react-datepicker__year-wrapper {\n  display: flex;\n  flex-wrap: wrap;\n  max-width: 180px;\n}\n.r-table-edit .react-datepicker__year .react-datepicker__year-text {\n  display: inline-block;\n  width: 4rem;\n  margin: 2px;\n}\n.r-table-edit .react-datepicker__month {\n  margin: 0.4rem;\n  text-align: center;\n}\n.r-table-edit .react-datepicker__month .react-datepicker__month-text,\n.r-table-edit .react-datepicker__month .react-datepicker__quarter-text {\n  display: inline-block;\n  width: 4rem;\n  margin: 2px;\n}\n.r-table-edit .react-datepicker__input-time-container {\n  clear: both;\n  width: 100%;\n  float: left;\n  margin: 5px 0 10px 15px;\n  text-align: left;\n}\n.r-table-edit .react-datepicker__input-time-container .react-datepicker-time__caption {\n  display: inline-block;\n}\n.r-table-edit .react-datepicker__input-time-container .react-datepicker-time__input-container {\n  display: inline-block;\n}\n.r-table-edit .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {\n  display: inline-block;\n  margin-left: 10px;\n}\n.r-table-edit .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {\n  width: auto;\n}\n.r-table-edit .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,\n.r-table-edit .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.r-table-edit .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {\n  margin-left: 5px;\n  display: inline-block;\n}\n.r-table-edit .react-datepicker__time-container {\n  float: right;\n  border-left: 1px solid #e0e0e0;\n  width: 85px;\n}\n.r-table-edit .react-datepicker__time-container--with-today-button {\n  display: inline;\n  border: 1px solid #e0e0e0;\n  border-radius: 0.3rem;\n  position: absolute;\n  right: -87px;\n  top: 0;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time {\n  position: relative;\n  background: white;\n  border-bottom-right-radius: 0.3rem;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {\n  width: 85px;\n  overflow-x: hidden;\n  margin: 0 auto;\n  text-align: center;\n  border-bottom-right-radius: 0.3rem;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {\n  list-style: none;\n  margin: 0;\n  height: calc(195px + 0.85rem);\n  overflow-y: scroll;\n  padding-right: 0;\n  padding-left: 0;\n  width: 100%;\n  box-sizing: content-box;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {\n  height: 30px;\n  padding: 5px 10px;\n  white-space: nowrap;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {\n  cursor: pointer;\n  background-color: #f0f0f0;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {\n  background-color: #216ba5;\n  color: white;\n  font-weight: bold;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {\n  background-color: #216ba5;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {\n  color: #ccc;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {\n  cursor: default;\n  background-color: transparent;\n}\n.r-table-edit .react-datepicker__week-number {\n  color: #ccc;\n  display: inline-block;\n  width: 1.7rem;\n  line-height: 1.7rem;\n  text-align: center;\n  margin: 0.166rem;\n}\n.r-table-edit .react-datepicker__week-number.react-datepicker__week-number--clickable {\n  cursor: pointer;\n}\n.r-table-edit .react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected,\n.react-datepicker__week-number--keyboard-selected):hover {\n  border-radius: 0.3rem;\n  background-color: #f0f0f0;\n}\n.r-table-edit .react-datepicker__week-number--selected {\n  border-radius: 0.3rem;\n  background-color: #216ba5;\n  color: #FFFFFF;\n}\n.r-table-edit .react-datepicker__week-number--selected:hover {\n  background-color: rgb(28.75, 93.2196969697, 143.75);\n}\n.r-table-edit .react-datepicker__week-number--keyboard-selected {\n  border-radius: 0.3rem;\n  background-color: rgb(41.5, 134.5606060606, 207.5);\n  color: #FFFFFF;\n}\n.r-table-edit .react-datepicker__week-number--keyboard-selected:hover {\n  background-color: rgb(28.75, 93.2196969697, 143.75);\n}\n.r-table-edit .react-datepicker__day-names {\n  white-space: nowrap;\n  margin-bottom: -8px;\n}\n.r-table-edit .react-datepicker__week {\n  white-space: nowrap;\n}\n.r-table-edit .react-datepicker__day-name,\n.r-table-edit .react-datepicker__day,\n.r-table-edit .react-datepicker__time-name {\n  color: #000000;\n  display: inline-block;\n  width: 1.7rem;\n  line-height: 1.7rem;\n  text-align: center;\n  margin: 0.166rem;\n}\n.r-table-edit .react-datepicker__day,\n.r-table-edit .react-datepicker__month-text,\n.r-table-edit .react-datepicker__quarter-text,\n.r-table-edit .react-datepicker__year-text {\n  cursor: pointer;\n}\n.r-table-edit .react-datepicker__day:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__month-text:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__quarter-text:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__year-text:not([aria-disabled=true]):hover {\n  border-radius: 0.3rem;\n  background-color: #FFFFFF;\n}\n.r-table-edit .react-datepicker__day--today,\n.r-table-edit .react-datepicker__month-text--today,\n.r-table-edit .react-datepicker__quarter-text--today,\n.r-table-edit .react-datepicker__year-text--today {\n  font-weight: bold;\n}\n.r-table-edit .react-datepicker__day--highlighted,\n.r-table-edit .react-datepicker__month-text--highlighted,\n.r-table-edit .react-datepicker__quarter-text--highlighted,\n.r-table-edit .react-datepicker__year-text--highlighted {\n  border-radius: 0.3rem;\n  background-color: #3dcc4a;\n  color: #FFFFFF;\n}\n.r-table-edit .react-datepicker__day--highlighted:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__month-text--highlighted:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__quarter-text--highlighted:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__year-text--highlighted:not([aria-disabled=true]):hover {\n  background-color: rgb(49.8551020408, 189.6448979592, 62.5632653061);\n}\n.r-table-edit .react-datepicker__day--highlighted-custom-1,\n.r-table-edit .react-datepicker__month-text--highlighted-custom-1,\n.r-table-edit .react-datepicker__quarter-text--highlighted-custom-1,\n.r-table-edit .react-datepicker__year-text--highlighted-custom-1 {\n  color: magenta;\n}\n.r-table-edit .react-datepicker__day--highlighted-custom-2,\n.r-table-edit .react-datepicker__month-text--highlighted-custom-2,\n.r-table-edit .react-datepicker__quarter-text--highlighted-custom-2,\n.r-table-edit .react-datepicker__year-text--highlighted-custom-2 {\n  color: green;\n}\n.r-table-edit .react-datepicker__day--holidays,\n.r-table-edit .react-datepicker__month-text--holidays,\n.r-table-edit .react-datepicker__quarter-text--holidays,\n.r-table-edit .react-datepicker__year-text--holidays {\n  position: relative;\n  border-radius: 0.3rem;\n  background-color: #ff6803;\n  color: #FFFFFF;\n}\n.r-table-edit .react-datepicker__day--holidays .overlay,\n.r-table-edit .react-datepicker__month-text--holidays .overlay,\n.r-table-edit .react-datepicker__quarter-text--holidays .overlay,\n.r-table-edit .react-datepicker__year-text--holidays .overlay {\n  position: absolute;\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: #333;\n  color: #FFFFFF;\n  padding: 4px;\n  border-radius: 4px;\n  white-space: nowrap;\n  visibility: hidden;\n  opacity: 0;\n  transition: visibility 0s, opacity 0.3s ease-in-out;\n}\n.r-table-edit .react-datepicker__day--holidays:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__month-text--holidays:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__quarter-text--holidays:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__year-text--holidays:not([aria-disabled=true]):hover {\n  background-color: rgb(207, 82.9642857143, 0);\n}\n.r-table-edit .react-datepicker__day--holidays:hover .overlay,\n.r-table-edit .react-datepicker__month-text--holidays:hover .overlay,\n.r-table-edit .react-datepicker__quarter-text--holidays:hover .overlay,\n.r-table-edit .react-datepicker__year-text--holidays:hover .overlay {\n  visibility: visible;\n  opacity: 1;\n}\n.r-table-edit .react-datepicker__day--selected,\n.r-table-edit .react-datepicker__day--in-selecting-range,\n.r-table-edit .react-datepicker__day--in-range,\n.r-table-edit .react-datepicker__month-text--selected,\n.r-table-edit .react-datepicker__month-text--in-selecting-range,\n.r-table-edit .react-datepicker__month-text--in-range,\n.r-table-edit .react-datepicker__quarter-text--selected,\n.r-table-edit .react-datepicker__quarter-text--in-selecting-range,\n.r-table-edit .react-datepicker__quarter-text--in-range,\n.r-table-edit .react-datepicker__year-text--selected,\n.r-table-edit .react-datepicker__year-text--in-selecting-range,\n.r-table-edit .react-datepicker__year-text--in-range {\n  border-radius: 0.3rem;\n  background-color: #216ba5;\n  color: #FFFFFF;\n}\n.r-table-edit .react-datepicker__day--selected:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__day--in-selecting-range:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__day--in-range:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__month-text--selected:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__month-text--in-selecting-range:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__month-text--in-range:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__quarter-text--selected:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__quarter-text--in-selecting-range:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__quarter-text--in-range:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__year-text--selected:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__year-text--in-selecting-range:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__year-text--in-range:not([aria-disabled=true]):hover {\n  background-color: rgb(28.75, 93.2196969697, 143.75);\n}\n.r-table-edit .react-datepicker__day--keyboard-selected,\n.r-table-edit .react-datepicker__month-text--keyboard-selected,\n.r-table-edit .react-datepicker__quarter-text--keyboard-selected,\n.r-table-edit .react-datepicker__year-text--keyboard-selected {\n  border-radius: 0.3rem;\n  background-color: rgb(186.25, 217.0833333333, 241.25);\n  color: rgb(0, 0, 0);\n}\n.r-table-edit .react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__month-text--keyboard-selected:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__quarter-text--keyboard-selected:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__year-text--keyboard-selected:not([aria-disabled=true]):hover {\n  background-color: rgb(28.75, 93.2196969697, 143.75);\n}\n.r-table-edit .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,\n.react-datepicker__month-text--in-range,\n.react-datepicker__quarter-text--in-range,\n.react-datepicker__year-text--in-range),\n.r-table-edit .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,\n.react-datepicker__month-text--in-range,\n.react-datepicker__quarter-text--in-range,\n.react-datepicker__year-text--in-range),\n.r-table-edit .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,\n.react-datepicker__month-text--in-range,\n.react-datepicker__quarter-text--in-range,\n.react-datepicker__year-text--in-range),\n.r-table-edit .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,\n.react-datepicker__month-text--in-range,\n.react-datepicker__quarter-text--in-range,\n.react-datepicker__year-text--in-range) {\n  background-color: rgba(33, 107, 165, 0.5);\n}\n.r-table-edit .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.r-table-edit .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.r-table-edit .react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.r-table-edit .react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.r-table-edit .react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.r-table-edit .react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.r-table-edit .react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.r-table-edit .react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range) {\n  background-color: #f0f0f0;\n  color: #000000;\n}\n.r-table-edit .react-datepicker__day--disabled,\n.r-table-edit .react-datepicker__month-text--disabled,\n.r-table-edit .react-datepicker__quarter-text--disabled,\n.r-table-edit .react-datepicker__year-text--disabled {\n  cursor: default;\n  color: #ccc;\n}\n.r-table-edit .react-datepicker__day--disabled .overlay,\n.r-table-edit .react-datepicker__month-text--disabled .overlay,\n.r-table-edit .react-datepicker__quarter-text--disabled .overlay,\n.r-table-edit .react-datepicker__year-text--disabled .overlay {\n  position: absolute;\n  bottom: 70%;\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: #333;\n  color: #FFFFFF;\n  padding: 4px;\n  border-radius: 4px;\n  white-space: nowrap;\n  visibility: hidden;\n  opacity: 0;\n  transition: visibility 0s, opacity 0.3s ease-in-out;\n}\n.r-table-edit .react-datepicker__input-container {\n  position: relative;\n  display: inline-block;\n  width: 100%;\n}\n.r-table-edit .react-datepicker__input-container .react-datepicker__calendar-icon {\n  position: absolute;\n  padding: 0.5rem;\n  box-sizing: content-box;\n}\n.r-table-edit .react-datepicker__view-calendar-icon input {\n  padding: 6px 10px 5px 25px;\n}\n.r-table-edit .react-datepicker__year-read-view,\n.r-table-edit .react-datepicker__month-read-view,\n.r-table-edit .react-datepicker__month-year-read-view {\n  border: 1px solid transparent;\n  border-radius: 0.3rem;\n  position: relative;\n}\n.r-table-edit .react-datepicker__year-read-view:hover,\n.r-table-edit .react-datepicker__month-read-view:hover,\n.r-table-edit .react-datepicker__month-year-read-view:hover {\n  cursor: pointer;\n}\n.r-table-edit .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,\n.r-table-edit .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,\n.r-table-edit .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,\n.r-table-edit .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,\n.r-table-edit .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,\n.r-table-edit .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {\n  border-top-color: rgb(178.5, 178.5, 178.5);\n}\n.r-table-edit .react-datepicker__year-read-view--down-arrow,\n.r-table-edit .react-datepicker__month-read-view--down-arrow,\n.r-table-edit .react-datepicker__month-year-read-view--down-arrow {\n  transform: rotate(135deg);\n  right: -16px;\n  top: 0;\n}\n.r-table-edit .react-datepicker__year-dropdown,\n.r-table-edit .react-datepicker__month-dropdown,\n.r-table-edit .react-datepicker__month-year-dropdown {\n  background-color: #f0f0f0;\n  position: absolute;\n  width: 50%;\n  left: 25%;\n  top: 30px;\n  z-index: 1;\n  text-align: center;\n  border-radius: 0.3rem;\n  border: 1px solid #e0e0e0;\n}\n.r-table-edit .react-datepicker__year-dropdown:hover,\n.r-table-edit .react-datepicker__month-dropdown:hover,\n.r-table-edit .react-datepicker__month-year-dropdown:hover {\n  cursor: pointer;\n}\n.r-table-edit .react-datepicker__year-dropdown--scrollable,\n.r-table-edit .react-datepicker__month-dropdown--scrollable,\n.r-table-edit .react-datepicker__month-year-dropdown--scrollable {\n  height: 150px;\n  overflow-y: scroll;\n}\n.r-table-edit .react-datepicker__year-option,\n.r-table-edit .react-datepicker__month-option,\n.r-table-edit .react-datepicker__month-year-option {\n  line-height: 20px;\n  width: 100%;\n  display: block;\n  margin-left: auto;\n  margin-right: auto;\n}\n.r-table-edit .react-datepicker__year-option:first-of-type,\n.r-table-edit .react-datepicker__month-option:first-of-type,\n.r-table-edit .react-datepicker__month-year-option:first-of-type {\n  border-top-left-radius: 0.3rem;\n  border-top-right-radius: 0.3rem;\n}\n.r-table-edit .react-datepicker__year-option:last-of-type,\n.r-table-edit .react-datepicker__month-option:last-of-type,\n.r-table-edit .react-datepicker__month-year-option:last-of-type {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  border-bottom-left-radius: 0.3rem;\n  border-bottom-right-radius: 0.3rem;\n}\n.r-table-edit .react-datepicker__year-option:hover,\n.r-table-edit .react-datepicker__month-option:hover,\n.r-table-edit .react-datepicker__month-year-option:hover {\n  background-color: #ccc;\n}\n.r-table-edit .react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,\n.r-table-edit .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,\n.r-table-edit .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {\n  border-bottom-color: rgb(178.5, 178.5, 178.5);\n}\n.r-table-edit .react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,\n.r-table-edit .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,\n.r-table-edit .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {\n  border-top-color: rgb(178.5, 178.5, 178.5);\n}\n.r-table-edit .react-datepicker__year-option--selected,\n.r-table-edit .react-datepicker__month-option--selected,\n.r-table-edit .react-datepicker__month-year-option--selected {\n  position: absolute;\n  left: 15px;\n}\n.r-table-edit .react-datepicker__close-icon {\n  cursor: pointer;\n  background-color: transparent;\n  border: 0;\n  outline: 0;\n  padding: 0 6px 0 0;\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 100%;\n  display: table-cell;\n  vertical-align: middle;\n}\n.r-table-edit .react-datepicker__close-icon::after {\n  cursor: pointer;\n  background-color: transparent;\n  color: #c4c4c4;\n  height: 16px;\n  width: 16px;\n  padding: 0px 2px;\n  font-size: 25px;\n  font-weight: 500;\n  line-height: 0.5;\n  text-align: center;\n  display: table-cell;\n  vertical-align: middle;\n  content: \"×\";\n}\n.r-table-edit .react-datepicker__close-icon:hover::after {\n  color: rgba(0, 0, 0, 0.8705882353) !important;\n}\n.r-table-edit .react-datepicker__close-icon--disabled {\n  cursor: default;\n}\n.r-table-edit .react-datepicker__close-icon--disabled::after {\n  cursor: default;\n  background-color: #ccc;\n}\n.r-table-edit .react-datepicker__today-button {\n  background: #f0f0f0;\n  border-top: 1px solid #e0e0e0;\n  cursor: pointer;\n  text-align: center;\n  font-weight: bold;\n  padding: 5px 0;\n  clear: left;\n}\n.r-table-edit .react-datepicker__portal {\n  position: fixed;\n  width: 100vw;\n  height: 100vh;\n  background-color: rgba(0, 0, 0, 0.8);\n  left: 0;\n  top: 0;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  z-index: 2147483647;\n}\n.r-table-edit .react-datepicker__portal .react-datepicker__day-name,\n.r-table-edit .react-datepicker__portal .react-datepicker__day,\n.r-table-edit .react-datepicker__portal .react-datepicker__time-name {\n  width: 3rem;\n  line-height: 3rem;\n}\n@media (max-width: 400px), (max-height: 550px) {\n  .r-table-edit .react-datepicker__portal .react-datepicker__day-name,\n  .r-table-edit .react-datepicker__portal .react-datepicker__day,\n  .r-table-edit .react-datepicker__portal .react-datepicker__time-name {\n    width: 2rem;\n    line-height: 2rem;\n  }\n}\n.r-table-edit .react-datepicker__portal .react-datepicker__current-month,\n.r-table-edit .react-datepicker__portal .react-datepicker-time__header {\n  font-size: 1.44rem;\n}\n.r-table-edit .react-datepicker__children-container {\n  width: 13.8rem;\n  margin: 0.4rem;\n  padding-right: 0.2rem;\n  padding-left: 0.2rem;\n  height: auto;\n}\n.r-table-edit .react-datepicker__aria-live {\n  position: absolute;\n  clip-path: circle(0);\n  border: 0;\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  width: 1px;\n  white-space: nowrap;\n}\n.r-table-edit .react-datepicker__calendar-icon {\n  width: 1em;\n  height: 1em;\n  vertical-align: -0.125em;\n}\n.r-table-edit .react-datepicker-popper {\n  z-index: 999 !important;\n  position: fixed !important;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__current-month {\n  color: rgba(0, 0, 0, 0.9) !important;\n  font-weight: 500 !important;\n  display: none;\n  font-family: Montserrat, Helvetica, Arial, serif !important;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown {\n  font-family: Montserrat, Helvetica, Arial, serif !important;\n  /* Giao diện của menu dropdown (tháng và năm) */\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown .react-datepicker__month-dropdown-container {\n  margin: 0px 3px 0px 0px;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown .react-datepicker__year-dropdown-container {\n  margin: 0px 0px 0px 3px;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown .react-datepicker__month-select:focus,\n.r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown .react-datepicker__year-select:focus {\n  border: 1px solid #1989fa !important;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown .react-datepicker__month-select,\n.r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown .react-datepicker__year-select {\n  background-color: #FFFFFF;\n  height: 22px;\n  border-radius: 2px;\n  padding: 2px 0;\n  border: 1px solid hsl(0, 0%, 80%);\n  outline: none;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__navigation {\n  margin-top: 4px;\n  color: #eb4619;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__day-name {\n  font-family: Montserrat, Helvetica, Arial, serif !important;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__day {\n  outline: none;\n  border-radius: 20px !important;\n  font-family: Montserrat, Helvetica, Arial, serif !important;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__day:hover {\n  background-color: rgba(235, 70, 25, 0.1) !important;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__day--today {\n  color: #eb4619;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__day--today.react-datepicker__day--selected {\n  color: #FFFFFF;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__day--today.react-datepicker__day--keyboard-selected {\n  background-color: rgba(235, 70, 25, 0.1);\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__day--selected {\n  background-color: #eb4619 !important;\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-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  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-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.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 .r-icon-expand {\n  transition: transform 0.3s ease;\n  position: absolute;\n  left: 3px;\n  top: 8px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-icon-expand.is-open {\n  transform: rotate(90deg);\n  -moz-transform: rotate(90deg);\n  -webkit-transform: rotate(90deg);\n  -o-transform: rotate(90deg);\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  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\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 .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 7px;\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 .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}";
 styleInject(css_248z$2);
 
 const getColumn = (contentColumns, col, index) => {
@@ -41462,38 +41486,44 @@ const PasteData = async (props) => {
 };
 
 const CellComponent = React__default["default"].memo((props) => {
-    const { col, row, indexRow, indexCol, isSelected, setSelectedCell, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight, editCell, selectedCell, startCell, editDisable, addDisable, fieldKey, defaultValue, dataSource, formatSetting, selectEnable, isMulti, selectedRows, setStartCell, setSelectedRows, handleCommandClick, handleDuplicate, changeDataSource, handleKeyDown, onDuplicate, focusEditElementCell, tableElement, totalCount, toolbarSetting, buttonSetting, gridRef, handleDataChange, handeCopyCell, idTable, visibleContentColumns, isCopying, typeDragging, contentColumns, fieldUniKey, rowChange } = props;
+    const { col, row, indexRow, indexCol, isSelected, setSelectedCell, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight, editCell, selectedCell, startCell, editDisable, addDisable, fieldKey, defaultValue, dataSource, formatSetting, selectEnable, isMulti, selectedRows, setStartCell, setSelectedRows, handleCommandClick, handleDuplicate, changeDataSource, handleKeyDown, onDuplicate, focusEditElementCell, containerRef, totalCount, toolbarSetting, buttonSetting, gridRef, handleDataChange, handeCopyCell, idTable, visibleContentColumns, isCopying, typeDragging, contentColumns, fieldUniKey, rowChange } = props;
     const { t } = reactI18next.useTranslation();
     const isActiveCell = col.field !== '#' && selectedCell && indexRow >= selectedCell.minRow && indexRow <= selectedCell.maxRow && indexCol >= selectedCell.minCol && indexCol <= selectedCell.maxCol;
     const isActiveRow = col.field === '#' && selectedCell && indexRow >= selectedCell.minRow && indexRow <= selectedCell.maxRow;
     React$5.useEffect(() => {
+        if (!containerRef?.current)
+            return;
+        const rafId = { current: 0 }; // hoặc useRef<number | null>(null)
         const handleMouseMove = (e) => {
-            if (!typeDragging.current || !tableElement?.current) {
+            if (!typeDragging.current)
                 return;
-            } // safe to return here
-            const container = tableElement.current;
+            const container = containerRef.current;
             const rect = container.getBoundingClientRect();
-            const scrollStep = 100;
-            const scrollStepHor = 200;
-            if (e.clientY < rect.top + 30) {
-                container.scrollTo({ behavior: "smooth", top: container.scrollTop - scrollStep });
-                container.scrollTop -= scrollStep;
-            }
-            else if (e.clientY > rect.bottom - 30) {
-                container.scrollTo({ behavior: "smooth", top: container.scrollTop + scrollStep });
-            }
-            if (e.clientX < rect.left + 30) {
-                container.scrollTo({ behavior: "smooth", left: container.scrollLeft - scrollStepHor });
-            }
-            else if (e.clientX > rect.right - 30) {
-                container.scrollTo({ behavior: "smooth", left: container.scrollLeft + scrollStepHor });
+            const scrollStepVert = 50;
+            const scrollStepHor = 100;
+            let newTop = container.scrollTop;
+            let newLeft = container.scrollLeft;
+            if (e.clientY < rect.top + 30)
+                newTop -= scrollStepVert;
+            else if (e.clientY > rect.bottom - 30)
+                newTop += scrollStepVert;
+            if (e.clientX < rect.left + 30)
+                newLeft -= scrollStepHor;
+            else if (e.clientX > rect.right - 30)
+                newLeft += scrollStepHor;
+            // Scroll smooth, chỉ khi cần
+            if (newTop !== container.scrollTop || newLeft !== container.scrollLeft) {
+                if (rafId.current)
+                    cancelAnimationFrame(rafId.current);
+                rafId.current = requestAnimationFrame(() => {
+                    container.scrollTo({ top: newTop, left: newLeft, behavior: "smooth" });
+                });
             }
         };
         const handleMouseUp = () => {
-            if (!typeDragging.current) {
+            if (!typeDragging.current)
                 return;
-            }
-            document.body.style.userSelect = ""; // bật lại select
+            document.body.style.userSelect = "";
             typeDragging.current = 0;
             isCopying.current = false;
         };
@@ -41502,8 +41532,10 @@ const CellComponent = React__default["default"].memo((props) => {
         return () => {
             window.removeEventListener("mousemove", handleMouseMove);
             window.removeEventListener("mouseup", handleMouseUp);
+            if (rafId.current)
+                cancelAnimationFrame(rafId.current);
         };
-    }, [tableElement, startCell]);
+    }, [containerRef]);
     if (col.visible === false) {
         return null;
     }
@@ -41549,7 +41581,7 @@ const CellComponent = React__default["default"].memo((props) => {
         },
         onKeyDown: (e) => {
             if (e.code === "KeyD" && e.ctrlKey && !editDisable && !addDisable) {
-                handleDuplicate(dataSource, startCell.row, fieldKey, defaultValue, fieldUniKey, changeDataSource, tableElement, totalCount, toolbarSetting, buttonSetting, editDisable, addDisable, onDuplicate);
+                handleDuplicate(dataSource, startCell.row, fieldKey, defaultValue, fieldUniKey, changeDataSource, containerRef, totalCount, toolbarSetting, buttonSetting, editDisable, addDisable, onDuplicate);
                 e.preventDefault();
                 e.stopPropagation();
             }
@@ -41585,14 +41617,14 @@ const CellComponent = React__default["default"].memo((props) => {
         } // chỉ chuột trái
         if (editDisable) {
             return;
-        } // chỉ chuột trái
+        } // chỉ chuột trái  
         typeDragging.current = type;
         document.body.style.userSelect = "none"; // chặn select
         let minCol = indexCol;
         let maxCol = indexCol;
         let minRow = indexRow;
         if (type === 2) {
-            if (selectedCell && selectedCell?.maxCol === selectedCell?.minCol && selectedCell?.maxRow === selectedCell?.minRow) {
+            if (selectedCell && selectedCell.maxCol === selectedCell.minCol && selectedCell.maxRow === selectedCell.minRow) {
                 isCopying.current = true;
             }
             minCol = startCell?.col ?? indexCol;
@@ -41602,6 +41634,7 @@ const CellComponent = React__default["default"].memo((props) => {
             minCol = visibleContentColumns[0].index;
             maxCol = visibleContentColumns[visibleContentColumns.length - 1].index;
         }
+        //tránh trường hợp nhấn ra ngoài không ăn dữ liệu trong edit element
         if (editCell) {
             requestAnimationFrame(() => {
                 setStartCell({ row: minRow, col: minCol });
@@ -41670,7 +41703,7 @@ const CellComponent = React__default["default"].memo((props) => {
     }
     /** ---------------- INDEX COLUMN (“#”) ---------------- */
     if (col.field === "#") {
-        return (jsxRuntime.jsx("td", { ...commonTdProps, tabIndex: Number(`${indexRow}${indexCol}`), onMouseDown: (e) => handleMouseDown(e, 3), className: classNames$1(commonTdProps.className, "cursor-pointer"), style: { ...commonTdProps.style, textAlign: "center" }, children: jsxRuntime.jsx("div", { className: "r-rowcell-div", children: indexRow + 1 }) }));
+        return (jsxRuntime.jsx("td", { ...commonTdProps, tabIndex: Number(`${indexRow}${indexCol}`), onMouseDown: (e) => handleMouseDown(e, 3), className: classNames$1('index-cell', commonTdProps.className, "cursor-pointer"), style: { ...commonTdProps.style, textAlign: "center" }, children: jsxRuntime.jsx("div", { className: "r-rowcell-div", children: indexRow + 1 }) }));
     }
     /** ---------------- CHECKBOX COLUMN ---------------- */
     if (col.field === "checkbox") {
@@ -43704,25 +43737,54 @@ const RenderFilterElement$1 = ({ filter, optionsFilter, formatSetting, filterBy,
                         }, children: t('Clear') })] })] }));
 };
 
-const TableComponent = ({ idTable, dataSource, contentColumns, headerColumns, visibleColumns, selectedRows, setSelectedRows, selectedCell, startCell, editCell, gridRef, objHeaderWidthFixLeft, objHeaderWidthFixRight, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight, totalCount, isMulti, selectEnable, editDisable, addDisable, defaultValue, fieldKey, fieldUniKey, formatSetting, toolbarSetting, buttonSetting, tableElement, handleDataChange, changeDataSource, handleCommandClick, handleDuplicate, handleKeyDown, onDuplicate, setSelectedCell, setStartCell, focusEditElementCell, setContentColumns, handeCopyCell, isCopying, typeDragging, rowChange, visibleContentColumns, filterBy, setFilterBy, orderBy, setOrderBy, optionsFilter, allowFilter, allowOrder, searchSetting, searchTerm, pagingClient, pagingSetting, checkRowMatch, haveSum }) => {
-    return (jsxRuntime.jsxs("table", { style: { width: "100%" }, role: "presentation", children: [jsxRuntime.jsx(RenderColGroup, { contentColumns: visibleColumns }), jsxRuntime.jsx("thead", { className: "r-gridheader", role: "rowgroup", children: headerColumns.map((element, indexParent) => {
-                    return (jsxRuntime.jsx("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
-                            return (jsxRuntime.jsx(HeaderTableCol$1, { col: col, idTable: idTable ?? "", dataSource: dataSource, indexCol: index, indexParent: indexParent, isMulti: isMulti ?? false, objHeaderWidthFixLeft: objHeaderWidthFixLeft, objHeaderWidthFixRight: objHeaderWidthFixRight, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, container: tableElement, filterBy: filterBy, orderBy: orderBy, optionsFilter: optionsFilter, allowFilter: allowFilter, allowOrder: allowOrder, formatSetting: formatSetting, changeFilter: (val) => {
-                                    setFilterBy([...val]);
-                                }, changeOrder: (val) => {
-                                    setOrderBy([...val]);
-                                }, columns: contentColumns, setContentColumns: setContentColumns, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, totalCount: totalCount }, `header-${indexParent}-${index}`));
-                        }) }, `header-${-indexParent}`));
-                }) }), jsxRuntime.jsx("tbody", { className: "r-gridcontent", role: "rowgroup", children: dataSource.map((row, indexRow) => {
-                    const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
-                    const flagSearch = checkRowMatch(row, filterBy, searchSetting?.searchTerm !== undefined ? searchSetting?.searchTerm : searchTerm, searchSetting?.keyField ?? []);
-                    if (flagSearch) {
-                        const flagDisplay = !pagingClient || (indexRow + 1 > (pagingSetting?.pageSize ?? 0) * ((pagingSetting?.currentPage ?? 0) - 1) && indexRow + 1 <= (pagingSetting?.pageSize ?? 0) * (pagingSetting?.currentPage ?? 0));
-                        return (flagDisplay && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("tr", { "aria-rowindex": indexRow + 1, role: "row", className: classNames$1("r-row"), children: contentColumns.map((col, indexCol) => jsxRuntime.jsx(CellComponent, { col: col, row: row, idTable: idTable, gridRef: gridRef, indexRow: indexRow, indexCol: indexCol, isSelected: isSelected, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, fisrtObjWidthFixRight: fisrtObjWidthFixRight, selectedCell: selectedCell, startCell: startCell, editCell: editCell, editDisable: editDisable, addDisable: addDisable, fieldKey: fieldKey, defaultValue: defaultValue, dataSource: dataSource, formatSetting: formatSetting, selectEnable: selectEnable, isMulti: isMulti, selectedRows: selectedRows, tableElement: tableElement, totalCount: totalCount, toolbarSetting: toolbarSetting, buttonSetting: buttonSetting, fieldUniKey: fieldUniKey, handleDataChange: handleDataChange, changeDataSource: changeDataSource, setSelectedRows: setSelectedRows, handleCommandClick: handleCommandClick, handleDuplicate: handleDuplicate, handleKeyDown: handleKeyDown, onDuplicate: onDuplicate, setSelectedCell: setSelectedCell, setStartCell: setStartCell, focusEditElementCell: focusEditElementCell, handeCopyCell: handeCopyCell, isCopying: isCopying, typeDragging: typeDragging, contentColumns: contentColumns, rowChange: rowChange, visibleContentColumns: visibleContentColumns })) }, `row-${indexRow}`) })));
-                    }
-                }) }), jsxRuntime.jsx("tfoot", { className: "r-gridfoot", children: haveSum && jsxRuntime.jsx("tr", { className: "r-row", children: contentColumns.map((col, index) => {
-                        return (jsxRuntime.jsx(FooterCol, { col: col, dataSource: dataSource, indexCol: index, objWidthFix: { ...objWidthFixLeft, ...objWidthFixRight }, formatSetting: formatSetting }));
-                    }) }) })] }));
+const TableComponent = ({ idTable, dataSource, contentColumns, headerColumns, visibleColumns, selectedRows, setSelectedRows, selectedCell, startCell, editCell, gridRef, objHeaderWidthFixLeft, objHeaderWidthFixRight, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight, totalCount, isMulti, selectEnable, editDisable, addDisable, defaultValue, fieldKey, fieldUniKey, formatSetting, toolbarSetting, buttonSetting, containerRef, handleDataChange, changeDataSource, handleCommandClick, handleDuplicate, handleKeyDown, onDuplicate, setSelectedCell, setStartCell, focusEditElementCell, setContentColumns, handeCopyCell, isCopying, typeDragging, rowChange, visibleContentColumns, filterBy, setFilterBy, orderBy, setOrderBy, optionsFilter, allowFilter, allowOrder, searchSetting, searchTerm, searchClient, height, rowHeight, haveSum }) => {
+    let filteredData = dataSource.map((row, index) => ({ data: row, indexRow: index }));
+    if (((filterBy && filterBy.length > 0) || (searchSetting?.searchTerm !== undefined ? searchSetting?.searchTerm : searchTerm)) && !searchClient) {
+        filteredData = filteredData.filter(({ data }) => CheckRowMatch(data, filterBy, searchSetting?.searchTerm !== undefined ? searchSetting?.searchTerm : searchTerm, searchSetting?.keyField ?? []));
+    }
+    const [scrollTop, setScrollTop] = React$5.useState(0);
+    const totalHeight = filteredData.length * rowHeight;
+    const visibleCount = Math.ceil(height / rowHeight) + 5; // buffer
+    const startIndex = Math.floor(scrollTop / rowHeight);
+    const endIndex = Math.min(startIndex + visibleCount, filteredData.length);
+    const offsetY = (startIndex * rowHeight);
+    const rafId = React$5.useRef(null);
+    React$5.useEffect(() => {
+        const el = containerRef.current;
+        if (!el) {
+            return;
+        }
+        const onScroll = () => {
+            if (rafId.current) {
+                cancelAnimationFrame(rafId.current);
+            }
+            rafId.current = requestAnimationFrame(() => {
+                setScrollTop(el.scrollTop);
+            });
+        };
+        el.addEventListener("scroll", onScroll);
+        return () => {
+            el.removeEventListener("scroll", onScroll);
+            if (rafId.current) {
+                cancelAnimationFrame(rafId.current);
+            }
+        };
+    }, []);
+    return (jsxRuntime.jsx("div", { ref: containerRef, className: "r-gridtable", style: { maxHeight: `${height ? `${height}px` : "auto"}` }, children: jsxRuntime.jsxs("table", { style: { width: "100%" }, role: "presentation", children: [jsxRuntime.jsx(RenderColGroup, { contentColumns: visibleColumns }), jsxRuntime.jsx("thead", { className: "r-gridheader", role: "rowgroup", children: headerColumns.map((element, indexParent) => {
+                        return (jsxRuntime.jsx("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
+                                return (jsxRuntime.jsx(HeaderTableCol$1, { col: col, idTable: idTable ?? "", dataSource: dataSource, indexCol: index, indexParent: indexParent, isMulti: isMulti ?? false, objHeaderWidthFixLeft: objHeaderWidthFixLeft, objHeaderWidthFixRight: objHeaderWidthFixRight, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, container: containerRef, filterBy: filterBy, orderBy: orderBy, optionsFilter: optionsFilter, allowFilter: allowFilter, allowOrder: allowOrder, formatSetting: formatSetting, changeFilter: (val) => {
+                                        setFilterBy([...val]);
+                                    }, changeOrder: (val) => {
+                                        setOrderBy([...val]);
+                                    }, columns: contentColumns, setContentColumns: setContentColumns, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, totalCount: totalCount }, `header-${indexParent}-${index}`));
+                            }) }, `header-${-indexParent}`));
+                    }) }), jsxRuntime.jsxs("tbody", { className: "r-gridcontent", role: "rowgroup", children: [jsxRuntime.jsx("tr", { style: { height: offsetY } }), filteredData.slice(startIndex, endIndex).map((row) => {
+                            const indexRow = row.indexRow;
+                            const isSelected = selectedRows?.some((x) => x[fieldKey] === row.data[fieldKey]);
+                            return (jsxRuntime.jsx("tr", { "aria-rowindex": indexRow + 1, role: "row", style: { height: rowHeight }, className: classNames$1("r-row"), children: contentColumns.map((col, indexCol) => jsxRuntime.jsx(CellComponent, { col: col, row: row.data, idTable: idTable, gridRef: gridRef, indexRow: indexRow, indexCol: indexCol, isSelected: isSelected, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, fisrtObjWidthFixRight: fisrtObjWidthFixRight, selectedCell: selectedCell, startCell: startCell, editCell: editCell, editDisable: editDisable, addDisable: addDisable, fieldKey: fieldKey, defaultValue: defaultValue, dataSource: dataSource, formatSetting: formatSetting, selectEnable: selectEnable, isMulti: isMulti, selectedRows: selectedRows, containerRef: containerRef, totalCount: totalCount, toolbarSetting: toolbarSetting, buttonSetting: buttonSetting, fieldUniKey: fieldUniKey, handleDataChange: handleDataChange, changeDataSource: changeDataSource, setSelectedRows: setSelectedRows, handleCommandClick: handleCommandClick, handleDuplicate: handleDuplicate, handleKeyDown: handleKeyDown, onDuplicate: onDuplicate, setSelectedCell: setSelectedCell, setStartCell: setStartCell, focusEditElementCell: focusEditElementCell, handeCopyCell: handeCopyCell, isCopying: isCopying, typeDragging: typeDragging, contentColumns: contentColumns, rowChange: rowChange, visibleContentColumns: visibleContentColumns })) }, row.data[fieldKey] ?? indexRow));
+                        }), jsxRuntime.jsx("tr", { style: { height: totalHeight - (endIndex * rowHeight) } })] }), jsxRuntime.jsx("tfoot", { className: "r-gridfoot", children: haveSum && jsxRuntime.jsx("tr", { className: "r-row", children: contentColumns.map((col, index) => {
+                            return (jsxRuntime.jsx(FooterCol, { col: col, dataSource: filteredData, indexCol: index, objWidthFix: { ...objWidthFixLeft, ...objWidthFixRight }, formatSetting: formatSetting }));
+                        }) }) })] }) }));
 };
 
 const handleArrowRight = (e, params) => {
@@ -43754,45 +43816,36 @@ const handleArrowLeft = (e, params) => {
     }
 };
 const handleArrowUp = async (e, params) => {
-    const { startCell, pagingClient, pagingSetting, handeCopyCell, handleFocusCell } = params;
+    const { startCell, handeCopyCell, handleFocusCell } = params;
     if (startCell.row > 0) {
         if ((e.ctrlKey || e.metaKey || e.altKey) && e.shiftKey) {
             handeCopyCell(startCell.col, startCell.row, 0);
         }
         else {
-            if (pagingClient && (pagingSetting?.currentPage ?? 0) !== 1 && ((startCell.row) % (pagingSetting?.pageSize ?? 1000)) === 0 && pagingSetting?.setCurrentPage) {
-                pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) - 1);
-            }
             handleFocusCell(startCell.row - 1, startCell.col, 1);
         }
         e.preventDefault();
     }
 };
 const handleArrowDown = async (e, params) => {
-    const { startCell, totalCount, pagingClient, pagingSetting, handleFocusCell, handeCopyCell } = params;
+    const { startCell, totalCount, handleFocusCell, handeCopyCell } = params;
     if (startCell.row < totalCount - 1) {
         if ((e.ctrlKey || e.metaKey || e.altKey) && e.shiftKey) {
             handeCopyCell(startCell.col, startCell.row, totalCount - 1);
         }
         else {
-            if (pagingClient && ((startCell.row + 1) % (pagingSetting?.pageSize ?? 1000)) === 0 && pagingSetting?.setCurrentPage) {
-                pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
-            }
             handleFocusCell(startCell.row + 1, startCell.col, 1);
         }
         e.preventDefault();
     }
 };
 const handleTab = (e, params) => {
-    const { startCell, indexLastEdit, totalCount, handleAdd, contentColumns, pagingClient, pagingSetting, handleFocusCell } = params;
+    const { startCell, indexLastEdit, totalCount, handleAdd, contentColumns, handleFocusCell } = params;
     if (startCell.col === indexLastEdit) {
         if (startCell.row === totalCount - 1) {
             handleAdd();
         }
         else {
-            if (pagingClient && (startCell.row % (pagingSetting?.pageSize ?? 1000)) === 0 && pagingSetting?.setCurrentPage) {
-                pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
-            }
             handleFocusCell(startCell.row + 1, startCell.col, 1);
         }
         e.preventDefault();
@@ -43813,15 +43866,12 @@ const handleTab = (e, params) => {
     }
 };
 const handleEnter = (e, params) => {
-    const { addDisable, editDisable, addMoveNewCell, startCell, totalCount, pagingClient, pagingSetting, handleFocusCell } = params;
+    const { addDisable, editDisable, addMoveNewCell, startCell, totalCount, handleFocusCell } = params;
     if (!editDisable && !addDisable) {
         if (startCell.row === totalCount - 1) {
             addMoveNewCell();
         }
         else {
-            if (pagingClient && ((startCell.row + 1) % (pagingSetting?.pageSize ?? 1000)) === 0 && pagingSetting?.setCurrentPage) {
-                pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
-            }
             handleFocusCell(startCell.row + 1, startCell.col, 1);
         }
         e.preventDefault();
@@ -44438,7 +44488,7 @@ const SettingColumn = (props) => {
 
 const ToolbarBottom = ({ handleAdd, handleDuplicate, handleInsertBefore, handleInsertAfter, handleDeleteAll, setOpenPopupSetupColumn, focusRow, editDisable, addDisable, buttonSetting, toolbarSetting, headerColumns }) => {
     const { t } = reactI18next.useTranslation();
-    return (jsxRuntime.jsx("div", { id: "table_custom_bottom_toolbar", className: "r-toolbar r-toolbar-bottom", role: "toolbar", "aria-disabled": "false", "aria-haspopup": "false", "aria-orientation": "horizontal", children: jsxRuntime.jsxs("div", { className: "r-toolbar-items", children: [jsxRuntime.jsxs("div", { className: "r-toolbar-left", children: [jsxRuntime.jsxs("div", { className: classNames$1('r-toolbar-item d-flex', { 'd-none': editDisable || addDisable }), "aria-disabled": "false", children: [jsxRuntime.jsx(Button$1, { color: 'success', outline: true, onClick: () => handleAdd(1), className: 'd-flex', children: t('Add item') }), jsxRuntime.jsxs(UncontrolledDropdown, { className: 'nav-item', children: [jsxRuntime.jsx(DropdownToggle$1, { tag: 'div', className: 'me-0 d-flex', children: jsxRuntime.jsx(Button$1, { type: 'button', color: 'success', outline: true, style: { marginLeft: -1 }, className: 'px-25', children: jsxRuntime.jsx("svg", { fill: '#28c76f', height: "15", width: "20", viewBox: "0 0 20 20", children: jsxRuntime.jsx("path", { d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z" }) }) }) }), jsxRuntime.jsxs(DropdownMenu$1, { className: "formula-dropdown icon-dropdown p-0", children: [jsxRuntime.jsx(DropdownItem$1, { className: 'py-25', tag: 'div', onClick: () => handleAdd(10), children: "10 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: 'py-25', tag: 'div', onClick: () => handleAdd(20), children: "20 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: 'py-25', tag: 'div', onClick: () => handleAdd(30), children: "30 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: 'py-25', tag: 'div', onClick: () => handleAdd(40), children: "40 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: 'py-25', tag: 'div', onClick: () => handleAdd(50), children: "50 h\u00E0ng" })] })] })] }), (focusRow ?? -1) > -1 ? jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.duplicateDisable }), "aria-disabled": "false", children: jsxRuntime.jsx(Button$1, { color: 'success', outline: true, onClick: () => { handleDuplicate(); }, className: 'd-flex', children: t('Duplicate') }) }), jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.insertBeforeDisable }), "aria-disabled": "false", children: jsxRuntime.jsx(Button$1, { color: 'success', outline: true, onClick: handleInsertBefore, className: 'd-flex', children: t('Insert item before') }) }), jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.insertAfterDisable }), "aria-disabled": "false", children: jsxRuntime.jsx(Button$1, { color: 'success', outline: true, onClick: handleInsertAfter, className: 'd-flex', children: t('Insert item after') }) })] }) : jsxRuntime.jsx(jsxRuntime.Fragment, { children: " " }), jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item', { 'd-none': editDisable || buttonSetting?.deleteAllDisable }), "aria-disabled": "false", children: jsxRuntime.jsx(Button$1, { color: 'primary', outline: true, onClick: handleDeleteAll, className: 'd-flex', children: t('Delete all item') }) }), toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
+    return (jsxRuntime.jsx("div", { id: "table_custom_bottom_toolbar", className: "r-toolbar r-toolbar-bottom", role: "toolbar", "aria-disabled": "false", "aria-haspopup": "false", "aria-orientation": "horizontal", children: jsxRuntime.jsxs("div", { className: "r-toolbar-items", children: [jsxRuntime.jsxs("div", { className: "r-toolbar-left", children: [jsxRuntime.jsxs("div", { className: classNames$1('r-toolbar-item d-flex', { 'd-none': editDisable || addDisable }), "aria-disabled": "false", children: [jsxRuntime.jsx(Button$1, { color: 'success', outline: true, onClick: () => handleAdd(1), className: 'd-flex', children: t('Add item') }), jsxRuntime.jsxs(UncontrolledDropdown, { className: 'nav-item', children: [jsxRuntime.jsx(DropdownToggle$1, { tag: 'div', className: 'me-0 d-flex', children: jsxRuntime.jsx(Button$1, { type: 'button', color: 'success', outline: true, style: { marginLeft: -1 }, className: 'px-25', children: jsxRuntime.jsx("svg", { fill: '#28c76f', height: "15", width: "20", viewBox: "0 0 20 20", children: jsxRuntime.jsx("path", { d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z" }) }) }) }), jsxRuntime.jsxs(DropdownMenu$1, { className: "formula-dropdown icon-dropdown p-0", children: [jsxRuntime.jsx(DropdownItem$1, { className: 'py-25', tag: 'div', onClick: () => handleAdd(10), children: "10 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: 'py-25', tag: 'div', onClick: () => handleAdd(20), children: "20 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: 'py-25', tag: 'div', onClick: () => handleAdd(30), children: "30 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: 'py-25', tag: 'div', onClick: () => handleAdd(40), children: "40 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: 'py-25', tag: 'div', onClick: () => handleAdd(50), children: "50 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: 'py-25', tag: 'div', onClick: () => handleAdd(100), children: "100 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: 'py-25', tag: 'div', onClick: () => handleAdd(1000), children: "1000 h\u00E0ng" })] })] })] }), (focusRow ?? -1) > -1 ? jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.duplicateDisable }), "aria-disabled": "false", children: jsxRuntime.jsx(Button$1, { color: 'success', outline: true, onClick: () => { handleDuplicate(); }, className: 'd-flex', children: t('Duplicate') }) }), jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.insertBeforeDisable }), "aria-disabled": "false", children: jsxRuntime.jsx(Button$1, { color: 'success', outline: true, onClick: handleInsertBefore, className: 'd-flex', children: t('Insert item before') }) }), jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.insertAfterDisable }), "aria-disabled": "false", children: jsxRuntime.jsx(Button$1, { color: 'success', outline: true, onClick: handleInsertAfter, className: 'd-flex', children: t('Insert item after') }) })] }) : jsxRuntime.jsx(jsxRuntime.Fragment, { children: " " }), jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item', { 'd-none': editDisable || buttonSetting?.deleteAllDisable }), "aria-disabled": "false", children: jsxRuntime.jsx(Button$1, { color: 'primary', outline: true, onClick: handleDeleteAll, className: 'd-flex', children: t('Delete all item') }) }), toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
                             return ((item.align === 'left') ? jsxRuntime.jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-left-${index}`) : '');
                         })] }), jsxRuntime.jsx("div", { className: "r-toolbar-center", children: toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
                         return ((item.align === 'center') ? jsxRuntime.jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-center-${index}`) : '');
@@ -44449,7 +44499,7 @@ const ToolbarBottom = ({ handleAdd, handleDuplicate, handleInsertBefore, handleI
 
 const TableEdit = React$5.forwardRef((props, ref) => {
     const { t } = reactI18next.useTranslation();
-    const { idTable, dataSource, columns, pagingSetting, setDataSource, height, maxHeight, minHeight, defaultValue, toolbarSetting, searchSetting, selectedItem, selectEnable, editDisable, addDisable, buttonSetting, formatSetting, haveSum, isMulti, disableAutoKey, commandClick, dataSourceChange, rowChange, setSelectedItem, handleSelect, onDuplicate, saveSettingColumn, allowFilter = true, allowOrder, settingColumns, optionsFilter, resetDefaultColumns } = props;
+    const { idTable, dataSource, columns, setDataSource, height = 400, rowHeight = 31.3, defaultValue, toolbarSetting, searchSetting, selectedItem, selectEnable, editDisable, addDisable, buttonSetting, formatSetting, haveSum, isMulti, disableAutoKey, commandClick, dataSourceChange, rowChange, setSelectedItem, handleSelect, onDuplicate, saveSettingColumn, allowFilter = true, allowOrder, settingColumns, optionsFilter, pagingSetting, resetDefaultColumns } = props;
     React$5.useImperativeHandle(ref, () => {
         return {
             refeshFocusRow: handleRefeshRow
@@ -44466,21 +44516,15 @@ const TableEdit = React$5.forwardRef((props, ref) => {
     const [filterBy, setFilterBy] = React$5.useState([]);
     const [contentColumns, setContentColumns] = React$5.useState([]);
     //ref
-    const tableElement = React$5.useRef(null);
+    const containerRef = React$5.useRef(null);
     const gridRef = React$5.useRef(null);
     const typeDragging = React$5.useRef(0); // 0: không kéo, 1: kéo ô, 2: kéo dòng, 3: kéo copy , 3: kéo cột
     const isCopying = React$5.useRef(false);
     const resizeTimeout = React$5.useRef(null);
     const totalCount = dataSource.length;
-    const pagingClient = pagingSetting?.allowPaging && (pagingSetting?.pagingClient || !(editDisable || addDisable));
     const searchClient = searchSetting?.searchEnable && (searchSetting?.searchClient || !(editDisable || addDisable));
     const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ?? "id";
     const fieldUniKey = columns.filter((item) => item.isUnikey === true)?.map((item) => item.field);
-    React$5.useEffect(() => {
-        if (pagingClient && pagingSetting.setCurrentPage && Math.ceil(totalCount / (pagingSetting?.pageSize ?? 1)) < (pagingSetting.currentPage ?? 1)) {
-            pagingSetting.setCurrentPage(1);
-        }
-    }, [dataSource]);
     const { levels: headerColumns, flatVisble: visibleColumns, flatVisbleContent: visibleContentColumns, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight, objHeaderWidthFixLeft, objHeaderWidthFixRight, indexFirstEdit, indexLastEdit } = React$5.useMemo(() => {
         const rs = calculateTableStructure(columns, settingColumns?.value);
         setContentColumns(rs.flat);
@@ -44531,16 +44575,13 @@ const TableEdit = React$5.forwardRef((props, ref) => {
     //Thêm dòng mới và focus vào dòng mới, cột bằng với cột đang focus
     const addMoveNewCell = () => {
         changeDataSource(dataSource, 1);
-        if (pagingClient && pagingSetting?.setCurrentPage && totalCount % (pagingSetting?.pageSize ?? 0) === 0) {
-            pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 0) + 1);
-        }
-        if (tableElement) {
+        if (containerRef) {
             const col = startCell.col >= 0 ? startCell.col : indexFirstEdit;
             setSelectedCell({ maxCol: col, minCol: col, maxRow: totalCount, minRow: totalCount });
             setStartCell({ row: totalCount, col });
         }
     };
-    const handleFocusCell = (row = -1, col = -1, type = 0) => {
+    const handleFocusCell = (row = -1, col = -1, type = -1) => {
         if (row >= 0 && col >= 0) {
             handleScrollVertical(col, row, type);
             setSelectedCell({ maxCol: col, minCol: col, maxRow: row, minRow: row });
@@ -44566,14 +44607,12 @@ const TableEdit = React$5.forwardRef((props, ref) => {
             contentColumns,
             addDisable,
             editDisable,
-            handleDuplicate: () => handleDuplicate(dataSource, startCell.row, fieldKey, defaultValue, fieldUniKey, changeDataSource, tableElement, totalCount, toolbarSetting, buttonSetting, editDisable, addDisable, onDuplicate),
+            handleDuplicate: () => handleDuplicate(dataSource, startCell.row, fieldKey, defaultValue, fieldUniKey, changeDataSource, containerRef, totalCount, toolbarSetting, buttonSetting, editDisable, addDisable, onDuplicate),
             handleAdd: () => {
-                handleAdd(dataSource, tableElement.current, indexFirstEdit, changeDataSource, pagingSetting, handleFocusCell, 1);
+                handleAdd(dataSource, containerRef.current, indexFirstEdit, changeDataSource, handleFocusCell, 1);
             },
             handleFocusCell,
             addMoveNewCell,
-            pagingClient,
-            pagingSetting,
             row,
             startCell,
             totalCount,
@@ -44731,50 +44770,38 @@ const TableEdit = React$5.forwardRef((props, ref) => {
     };
     //type0: ngang, type1: doc
     const handleScrollVertical = (col, row, type) => {
-        if (col >= 0 && row >= 0 && tableElement.current) {
-            setTimeout(() => {
+        if (col < 0 || row < 0) {
+            return;
+        }
+        // scroll ngang: vẫn như cũ
+        requestAnimationFrame(() => {
+            const parent = containerRef.current;
+            if (type === 0 || type === -1) {
                 const element = document.getElementById(`content-${idTable}-row${row}-col${col}`);
-                if (element && tableElement.current) {
-                    const parent = tableElement.current;
-                    if (type === 0) {
-                        // --- Scroll ngang: canh cell ra giữa bảng ---
-                        const parentRect = parent.getBoundingClientRect();
-                        const childRect = element.getBoundingClientRect();
-                        const offsetX = childRect.left - parentRect.left + parent.scrollLeft - (parentRect.width / 2) + (childRect.width / 2);
-                        parent.scrollTo({ left: offsetX, behavior: "smooth" });
-                    }
-                    else if ((tableElement.current?.scrollHeight ?? 0) > 0) {
-                        if ((tableElement.current?.scrollTop ?? 0) > ((row - 1) % (pagingSetting?.pageSize ?? 1)) * 34) {
-                            tableElement.current?.scrollTo({ behavior: "smooth", top: ((row - 1) % (pagingSetting?.pageSize ?? 1)) * 34 });
-                        }
-                        else if ((tableElement.current?.clientHeight ?? 0) - (haveSum ? 30 : 0) - (headerColumns.length * 42) <
-                            ((row % (pagingSetting?.pageSize ?? 1)) * 34) - (tableElement.current?.scrollTop ?? 0)) {
-                            tableElement.current?.scrollTo({ behavior: "smooth", top: (tableElement.current?.scrollTop ?? 0) + 34 });
-                        }
-                    }
+                if (element && containerRef.current) {
+                    const parent = containerRef.current;
+                    const parentRect = parent.getBoundingClientRect();
+                    const childRect = element.getBoundingClientRect();
+                    const offsetX = childRect.left -
+                        parentRect.left +
+                        parent.scrollLeft -
+                        (parentRect.width / 2) +
+                        (childRect.width / 2);
+                    parent.scrollTo({ left: offsetX, behavior: "smooth" });
                 }
-            }, 100);
-        }
-    };
-    const onChangePage = (args) => {
-        if (pagingSetting?.setCurrentPage) {
-            if (args.currentPage === args.oldPage) {
-                return;
             }
-            pagingSetting.setCurrentPage(args.currentPage);
-        }
-    };
-    const onChangePageSize = (args) => {
-        if (pagingSetting?.allowPaging) {
-            if (pagingSetting?.pageSize !== args.pageSize) {
-                if (pagingSetting?.setPageSize) {
-                    pagingSetting.setPageSize(args.pageSize);
+            if (type === 1 || type === -1) {
+                const targetTop = row * rowHeight;
+                if (targetTop < parent.scrollTop) {
+                    // scroll lên trên
+                    parent.scrollTo({ top: targetTop, behavior: "smooth" });
                 }
-                if (pagingSetting?.setCurrentPage) {
-                    pagingSetting.setCurrentPage(1);
+                else if (targetTop + rowHeight + 64 > parent.scrollTop + parent.clientHeight) {
+                    // scroll xuống dưới
+                    parent.scrollTo({ top: targetTop - parent.clientHeight + (rowHeight * 4), behavior: "smooth" });
                 }
             }
-        }
+        });
     };
     useOnClickOutside(gridRef, () => {
         if (!editCell) {
@@ -44842,82 +44869,50 @@ const TableEdit = React$5.forwardRef((props, ref) => {
             }
         }
     }, [selectedItem]);
-    /**
-    * Kiểm tra row có thỏa mãn tất cả filter và chứa từ khóa tìm kiếm hay không
-    */
-    function checkRowMatch(row, filters, keyword, searchKeys) {
-        if ((!filters || filters.length === 0) && (!keyword || !searchClient)) {
-            return true;
-        } // Không có filter thì mặc định là match
-        const isFilterMatch = filters.every((filter) => {
-            const { key, value, ope } = filter;
-            const rowValue = row[key];
-            if (rowValue === undefined || rowValue === null || value === undefined || value === null) {
-                return false;
+    const onChangePage = (args) => {
+        if (pagingSetting?.setCurrentPage) {
+            if (args.currentPage === args.oldPage) {
+                return;
             }
-            const valStr = String(rowValue).toLowerCase();
-            const filterStr = String(value).toLowerCase();
-            /*eslint-disable*/
-            switch (ope) {
-                case "startswith":
-                    return valStr.startsWith(filterStr);
-                case "endswith":
-                    return valStr.endsWith(filterStr);
-                case "contains":
-                    return valStr.includes(filterStr);
-                case "equal":
-                    return rowValue == value;
-                case "notequal":
-                    return rowValue != value;
-                case "greaterthan":
-                    return rowValue > value;
-                case "greaterthanorequal":
-                    return rowValue >= value;
-                case "lessthan":
-                    return rowValue < value;
-                case "lessthanorequal":
-                    return rowValue <= value;
-                default:
-                    return false;
+            pagingSetting.setCurrentPage(args.currentPage);
+        }
+    };
+    const onChangePageSize = (args) => {
+        if (pagingSetting?.allowPaging) {
+            if (pagingSetting?.pageSize !== args.pageSize) {
+                if (pagingSetting?.setPageSize) {
+                    pagingSetting.setPageSize(args.pageSize);
+                }
+                if (pagingSetting?.setCurrentPage) {
+                    pagingSetting.setCurrentPage(1);
+                }
             }
-            /*eslint-enable*/
-        });
-        const isSearchMatch = !keyword ||
-            searchKeys.some((key) => {
-                const val = row[key];
-                return val?.toString().toLowerCase().includes(keyword.trim().toLowerCase());
-            });
-        return isFilterMatch && isSearchMatch;
-    }
-    React$5.useEffect(() => {
-        if (pagingClient && pagingSetting?.setCurrentPage && (searchSetting?.searchTerm !== undefined ? searchSetting?.searchTerm : searchTerm)) {
-            pagingSetting?.setCurrentPage(1);
         }
-    }, [searchTerm, searchSetting?.searchTerm]);
-    return (jsxRuntime.jsx(React$5.Fragment, { children: jsxRuntime.jsxs("div", { className: "r-table-edit", children: [jsxRuntime.jsxs("div", { className: "r-grid", ref: gridRef, children: [toolbarSetting?.showTopToolbar && jsxRuntime.jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), jsxRuntime.jsx("div", { ref: tableElement, className: "r-gridtable", style: { height: `${height ? `${height}px` : "auto"}`, minHeight: `${minHeight ? `${minHeight}px` : ""}`, maxHeight: `${maxHeight ? `${maxHeight}px` : "400px"}` }, children: jsxRuntime.jsx(TableComponent, { idTable: idTable, dataSource: dataSource, contentColumns: contentColumns, headerColumns: headerColumns, visibleColumns: visibleColumns, selectedRows: selectedRows, setSelectedRows: setSelectedRows, selectedCell: selectedCell, startCell: startCell, editCell: editCell, gridRef: gridRef, objHeaderWidthFixLeft: objHeaderWidthFixLeft, objHeaderWidthFixRight: objHeaderWidthFixRight, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, fisrtObjWidthFixRight: fisrtObjWidthFixRight, totalCount: totalCount, isMulti: isMulti, selectEnable: selectEnable, editDisable: editDisable, addDisable: addDisable, defaultValue: defaultValue, fieldKey: fieldKey, fieldUniKey: fieldUniKey, formatSetting: formatSetting, toolbarSetting: toolbarSetting, buttonSetting: buttonSetting, tableElement: tableElement, optionsFilter: optionsFilter, allowFilter: allowFilter, allowOrder: allowOrder, searchSetting: searchSetting, searchTerm: searchTerm, pagingClient: pagingClient, pagingSetting: pagingSetting, haveSum: haveSum, isCopying: isCopying, typeDragging: typeDragging, visibleContentColumns: visibleContentColumns, handleDataChange: handleDataChange, changeDataSource: changeDataSource, handleCommandClick: handleCommandClick, handleKeyDown: handleKeyDown, handeCopyCell: handeCopyCell, onDuplicate: onDuplicate, setSelectedCell: setSelectedCell, setStartCell: setStartCell, focusEditElementCell: focusEditElementCell, rowChange: rowChange, filterBy: filterBy, setFilterBy: setFilterBy, orderBy: orderBy, setOrderBy: setOrderBy, checkRowMatch: checkRowMatch, handleDuplicate: () => {
-                                    handleDuplicate(dataSource, startCell.row, fieldKey, defaultValue, fieldUniKey, changeDataSource, tableElement, totalCount, toolbarSetting, buttonSetting, editDisable, addDisable, onDuplicate);
-                                }, setContentColumns: (newColumns) => {
-                                    setContentColumns(newColumns);
-                                    // clear timeout cũ
-                                    if (resizeTimeout.current) {
-                                        clearTimeout(resizeTimeout.current);
+    };
+    return (jsxRuntime.jsx(React$5.Fragment, { children: jsxRuntime.jsxs("div", { className: "r-table-edit", children: [jsxRuntime.jsxs("div", { className: "r-grid", ref: gridRef, children: [toolbarSetting?.showTopToolbar && jsxRuntime.jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), jsxRuntime.jsx(TableComponent, { idTable: idTable, height: height, dataSource: dataSource, contentColumns: contentColumns, headerColumns: headerColumns, visibleColumns: visibleColumns, selectedRows: selectedRows, setSelectedRows: setSelectedRows, selectedCell: selectedCell, startCell: startCell, editCell: editCell, gridRef: gridRef, objHeaderWidthFixLeft: objHeaderWidthFixLeft, objHeaderWidthFixRight: objHeaderWidthFixRight, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, fisrtObjWidthFixRight: fisrtObjWidthFixRight, totalCount: totalCount, isMulti: isMulti, selectEnable: selectEnable, editDisable: editDisable, addDisable: addDisable, defaultValue: defaultValue, fieldKey: fieldKey, fieldUniKey: fieldUniKey, formatSetting: formatSetting, toolbarSetting: toolbarSetting, buttonSetting: buttonSetting, containerRef: containerRef, optionsFilter: optionsFilter, allowFilter: allowFilter, allowOrder: allowOrder, searchSetting: searchSetting, searchTerm: searchTerm, haveSum: haveSum, isCopying: isCopying, typeDragging: typeDragging, visibleContentColumns: visibleContentColumns, rowHeight: rowHeight, changeDataSource: changeDataSource, handleCommandClick: handleCommandClick, handleKeyDown: handleKeyDown, handeCopyCell: handeCopyCell, onDuplicate: onDuplicate, setSelectedCell: setSelectedCell, setStartCell: setStartCell, focusEditElementCell: focusEditElementCell, rowChange: rowChange, filterBy: filterBy, setFilterBy: setFilterBy, orderBy: orderBy, setOrderBy: setOrderBy, searchClient: searchClient, handleDataChange: handleDataChange, handleDuplicate: () => {
+                                handleDuplicate(dataSource, startCell.row, fieldKey, defaultValue, fieldUniKey, changeDataSource, containerRef, totalCount, toolbarSetting, buttonSetting, editDisable, addDisable, onDuplicate);
+                            }, setContentColumns: (newColumns) => {
+                                setContentColumns(newColumns);
+                                // clear timeout cũ
+                                if (resizeTimeout.current) {
+                                    clearTimeout(resizeTimeout.current);
+                                }
+                                resizeTimeout.current = setTimeout(() => {
+                                    if (saveSettingColumn) {
+                                        saveSettingColumn(newColumns.map((x, index) => ({ field: x.field, headerText: x.headerText, visible: x.visible, fixedType: x.fixedType, width: x.width, sortOrder: index + 1 })));
                                     }
-                                    resizeTimeout.current = setTimeout(() => {
-                                        if (saveSettingColumn) {
-                                            saveSettingColumn(newColumns.map((x, index) => ({ field: x.field, headerText: x.headerText, visible: x.visible, fixedType: x.fixedType, width: x.width, sortOrder: index + 1 })));
-                                        }
-                                    }, 500);
-                                } }) }), toolbarSetting?.showBottomToolbar && (jsxRuntime.jsx(ToolbarBottom, { handleAdd: (numberOfRows) => {
-                                handleAdd(dataSource, tableElement.current, indexFirstEdit, changeDataSource, pagingSetting, handleFocusCell, numberOfRows);
+                                }, 500);
+                            } }), toolbarSetting?.showBottomToolbar && (jsxRuntime.jsx(ToolbarBottom, { handleAdd: (numberOfRows) => {
+                                handleAdd(dataSource, containerRef.current, indexFirstEdit, changeDataSource, handleFocusCell, numberOfRows);
                             }, handleDuplicate: () => {
-                                handleDuplicate(dataSource, startCell.row, fieldKey, defaultValue, fieldUniKey, changeDataSource, tableElement, totalCount, toolbarSetting, buttonSetting, editDisable, addDisable, onDuplicate);
+                                handleDuplicate(dataSource, startCell.row, fieldKey, defaultValue, fieldUniKey, changeDataSource, containerRef, totalCount, toolbarSetting, buttonSetting, editDisable, addDisable, onDuplicate);
                             }, handleInsertAfter: () => {
-                                handleInsertAfter(dataSource, startCell.row, defaultValue, changeDataSource, tableElement, totalCount, pagingClient, pagingSetting, toolbarSetting, buttonSetting, editDisable, addDisable);
+                                handleInsertAfter(dataSource, startCell.row, defaultValue, changeDataSource, containerRef, totalCount, toolbarSetting, buttonSetting, editDisable, addDisable);
                             }, handleInsertBefore: () => {
-                                handleInsertBefore(dataSource, startCell.row, defaultValue, changeDataSource, pagingClient, pagingSetting, toolbarSetting, buttonSetting, editDisable, addDisable);
+                                handleInsertBefore(dataSource, startCell.row, defaultValue, changeDataSource, toolbarSetting, buttonSetting, editDisable, addDisable);
                             }, handleDeleteAll: () => {
                                 handleDeleteAll(t, messageBoxConfirmDelete, handleFocusCell, changeDataSource, editDisable, addDisable, toolbarSetting, buttonSetting);
-                            }, setOpenPopupSetupColumn: setOpenPopupSetupColumn, focusRow: startCell.row, editDisable: editDisable, addDisable: addDisable, buttonSetting: buttonSetting, toolbarSetting: toolbarSetting, headerColumns: headerColumns }))] }), pagingSetting?.allowPaging && jsxRuntime.jsx(PagingComponent, { gridRef: gridRef, onChangePage: onChangePage, pageSize: pagingSetting?.pageSize ?? 0, currentPage: pagingSetting?.currentPage ?? 0, pageOptions: pagingSetting?.pageOptions ?? [20, 30, 50, 100], totalItem: pagingClient ? totalCount : pagingSetting?.totalItem ?? 0, onChangePageSize: onChangePageSize }), jsxRuntime.jsx(SettingColumn, { gridRef: gridRef, handleSidebar: () => {
+                            }, setOpenPopupSetupColumn: setOpenPopupSetupColumn, focusRow: startCell.row, editDisable: editDisable, addDisable: addDisable, buttonSetting: buttonSetting, toolbarSetting: toolbarSetting, headerColumns: headerColumns }))] }), pagingSetting?.allowPaging && jsxRuntime.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 }), jsxRuntime.jsx(SettingColumn, { gridRef: gridRef, handleSidebar: () => {
                         setOpenPopupSetupColumn(!openPopupSetupColumn);
                     }, settingColumns: settingColumns, openSidebar: openPopupSetupColumn, column: [...contentColumns], resetDefaultColumns: resetDefaultColumns, setColumn: (newColumns) => {
                         if (saveSettingColumn) {
@@ -47468,7 +47463,7 @@ const ExportExcelComponent = ({ openModal, typeModal, handleModal, windowSize, d
                                                 showTopToolbar: true,
                                                 showBottomToolbar: true,
                                                 toolbarBottomOptions: toolbarTopOptions
-                                            }, maxHeight: windowSize.innerHeight - 525, minHeight: 150, columns: [
+                                            }, height: windowSize.innerHeight - 525, columns: [
                                                 {
                                                     field: "checkbox",
                                                     headerText: "",
@@ -53766,10 +53761,8 @@ const Wizard = React$5.forwardRef((props, ref) => {
 });
 
 const TabHandleErrorImportExcel = (props) => {
-    const { dataError, windowSize, formatNumber, pageSizeDefault, pageOptions, headerHandleErrorExcelColumns } = props;
+    const { dataError, windowSize, formatNumber, headerHandleErrorExcelColumns } = props;
     const { t } = reactI18next.useTranslation();
-    const [currentPage, setCurrentPage] = React$5.useState(1);
-    const [pageSize, setPageSize] = React$5.useState(pageSizeDefault ?? 50);
     const errorTemplate = () => {
         return (jsxRuntime.jsx("div", { style: { fontFamily: 'Montserrat,Helvetica,Arial,serif' }, children: jsxRuntime.jsxs(Badge$1, { className: 'text-capitalize mx-50', style: { fontSize: '11px' }, color: 'danger', pill: true, children: [dataError.length, " ", t('Invalid')] }) }));
     };
@@ -53786,15 +53779,7 @@ const TabHandleErrorImportExcel = (props) => {
                             align: 'left'
                         }
                     ]
-                }, editDisable: true, dataSource: dataError, columns: headerHandleErrorExcelColumns, pagingSetting: {
-                    allowPaging: true,
-                    pageOptions,
-                    pagingClient: true,
-                    setCurrentPage,
-                    pageSize,
-                    setPageSize,
-                    currentPage
-                } }, 'HandleErrorExcel')] }));
+                }, editDisable: true, dataSource: dataError, columns: headerHandleErrorExcelColumns }, 'HandleErrorExcel')] }));
 };
 
 const TabMergeImportExcel = (props) => {
@@ -53849,7 +53834,7 @@ const TabMergeImportExcel = (props) => {
                         minWidth: 250,
                         maxWidth: 350
                     }
-                ], rowChange: () => { }, addDisable: true, dataSource: watch('dataMap'), maxHeight: windowSize.innerHeight - 410, dataSourceChange: (val) => setValue('dataMap', [...val]), setDataSource: (val) => setValue('dataMap', val), toolbarSetting: {
+                ], rowChange: () => { }, addDisable: true, dataSource: watch('dataMap'), height: windowSize.innerHeight - 410, dataSourceChange: (val) => setValue('dataMap', [...val]), setDataSource: (val) => setValue('dataMap', val), toolbarSetting: {
                     showTopToolbar: false
                 } }, 'MapColumnImportExcel')] }));
 };
@@ -72987,11 +72972,9 @@ const TabSelectFileImportExcel = (props) => {
 };
 
 const TabValidateImportExcel = (props) => {
-    const { dataInvalid, dataValid, dataValidate, windowSize, formatNumber, pageSizeDefault, pageOptions, headerValidateExcelColumns } = props;
+    const { dataInvalid, dataValid, dataValidate, windowSize, formatNumber, headerValidateExcelColumns } = props;
     const [resultView, setResultView] = React$5.useState(0);
     const { t } = reactI18next.useTranslation();
-    const [currentPage, setCurrentPage] = React$5.useState(1);
-    const [pageSize, setPageSize] = React$5.useState(pageSizeDefault ?? 50);
     const dataTemplate = () => {
         return (jsxRuntime.jsxs("div", { style: { fontFamily: 'Montserrat,Helvetica,Arial,serif' }, children: [jsxRuntime.jsxs(Badge$1, { className: 'text-capitalize mx-50', style: { fontSize: '11px' }, color: `${resultView === 0 ? 'info' : 'light-info'}`, pill: true, onClick: () => setResultView(0), children: [dataValidate.length, " ", t('All')] }), jsxRuntime.jsxs(Badge$1, { className: 'text-capitalize mx-50', style: { fontSize: '11px' }, color: `${resultView === 1 ? 'success' : 'light-success'}`, pill: true, onClick: () => setResultView(1), children: [dataValid.length, " ", t('Valid')] }), jsxRuntime.jsxs(Badge$1, { className: 'text-capitalize mx-50', style: { fontSize: '11px' }, color: `${resultView === 2 ? 'danger' : 'light-danger'}`, pill: true, onClick: () => setResultView(2), children: [dataInvalid.length, " ", t('Invalid')] })] }));
     };
@@ -73009,20 +72992,12 @@ const TabValidateImportExcel = (props) => {
                             align: 'left'
                         }
                     ]
-                }, editDisable: true, dataSource: resultView === 0 ? dataValidate : resultView === 1 ? dataValid : dataInvalid, columns: headerValidateExcelColumns, pagingSetting: {
-                    allowPaging: true,
-                    pageOptions,
-                    pagingClient: true,
-                    setCurrentPage,
-                    pageSize,
-                    setPageSize,
-                    currentPage
-                } }, 'ValidateExcel')] }));
+                }, editDisable: true, dataSource: resultView === 0 ? dataValidate : resultView === 1 ? dataValid : dataInvalid, columns: headerValidateExcelColumns }, 'ValidateExcel')] }));
 };
 
 const ModalImportComponent = (props) => {
     const { t } = reactI18next.useTranslation();
-    const { windowSize, openModal, handleModal, handleValidate, importExcelApi, validateExcelApi, getGeneralSettingApi, updateGeneralSettingApi, headerErrorExcelColumns, templateUrl, defaultHeaderRow, pageOptions, pageSizeDefault, formatNumber, mapColumn, headerValidateExcelColumns } = props;
+    const { windowSize, openModal, handleModal, handleValidate, importExcelApi, validateExcelApi, getGeneralSettingApi, updateGeneralSettingApi, headerErrorExcelColumns, templateUrl, defaultHeaderRow, formatNumber, mapColumn, headerValidateExcelColumns } = props;
     const [optionField, setOptionField] = React$5.useState([]);
     const [dataMerge, setDataMerge] = React$5.useState([]);
     const [dataValidate, setDataValidate] = React$5.useState([]);
@@ -73030,7 +73005,7 @@ const ModalImportComponent = (props) => {
     const [dataInvalid, setDataInvalid] = React$5.useState([]);
     const [checkInit, setCheckInit] = React$5.useState(false);
     const [checkInitValidate, setCheckInitValidate] = React$5.useState(false);
-    const [validateExcelColumns, setValidateExcelColumns] = React$5.useState([]);
+    const [validateExcelColumns, setValidateExcelColumns] = React$5.useState(mapColumn);
     const [dataError, setDataError] = React$5.useState([]);
     const [isSaveSetting, setIsSaveSetting] = React$5.useState(true);
     const formSchema = create().shape({
@@ -73163,10 +73138,13 @@ const ModalImportComponent = (props) => {
             }
         }
     ];
+    React$5.useEffect(() => {
+        console.log(watch('dataMap'));
+    }, [watch('dataMap')]);
     const handleFormOpened = () => {
         getGeneralSettingApi().then((rs) => {
             const arr = rs?.value ? JSON.parse(rs.value) : [];
-            setValue('dataMap', mapColumn.map((x) => {
+            setValue('dataMap', [...mapColumn].map((x) => {
                 const ele = arr.find(y => x.field === y.field);
                 if (ele) {
                     x.headerDefault = ele.headerDefault;
@@ -73174,7 +73152,7 @@ const ModalImportComponent = (props) => {
                 return x;
             }));
         }).catch(() => {
-            setValue('dataMap', mapColumn);
+            setValue('dataMap', [...mapColumn]);
         });
         if (headerValidateExcelColumns && headerValidateExcelColumns.length > 0) {
             setValidateExcelColumns(headerValidateExcelColumns);
@@ -73217,13 +73195,13 @@ const ModalImportComponent = (props) => {
                                     {
                                         id: 'validate-data',
                                         title: t('Validate data'),
-                                        content: jsxRuntime.jsx(TabValidateImportExcel, { formatNumber: formatNumber, pageOptions: pageOptions, pageSizeDefault: pageSizeDefault, dataInvalid: dataInvalid, dataValid: dataValid, dataValidate: dataValidate, headerValidateExcelColumns: validateExcelColumns, windowSize: windowSize })
+                                        content: jsxRuntime.jsx(TabValidateImportExcel, { formatNumber: formatNumber, dataInvalid: dataInvalid, dataValid: dataValid, dataValidate: dataValidate, headerValidateExcelColumns: validateExcelColumns, windowSize: windowSize })
                                     },
                                     {
                                         id: 'handle-error',
                                         title: t('Error result'),
                                         visiable: !!headerErrorExcelColumns,
-                                        content: jsxRuntime.jsx(TabHandleErrorImportExcel, { formatNumber: formatNumber, pageOptions: pageOptions, pageSizeDefault: pageSizeDefault, dataError: dataError, headerHandleErrorExcelColumns: headerErrorExcelColumns ?? [], windowSize: windowSize })
+                                        content: jsxRuntime.jsx(TabHandleErrorImportExcel, { formatNumber: formatNumber, dataError: dataError, headerHandleErrorExcelColumns: headerErrorExcelColumns ?? [], windowSize: windowSize })
                                     }
                                 ] }) }) }) }), jsxRuntime.jsxs("div", { className: "d-flex justify-content-between align-items-center p-1", style: { boxShadow: "0 4px 24px 0 rgb(34 41 47 / 10%)" }, children: [jsxRuntime.jsx("div", { className: "d-flex align-items-center", children: watch('step') === 2 && jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Input$1, { checked: isSaveSetting, type: 'checkbox', className: 'me-50', onChange: (val) => {
                                             setIsSaveSetting(val.target.checked);
@@ -73391,34 +73369,34 @@ const RenderContentCol = (props) => {
                     }, children: [jsxRuntime.jsx("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: (col.type === 'numeric' && Number(row[col.field]) < 0 ? jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) }), col.haveToolTip && jsxRuntime.jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: (col.type === 'numeric' && Number(row[col.field]) < 0 ? jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) })] }) }));
         }
     };
-    return (col.visible !== false && jsxRuntime.jsx("td", { className: classNames$1(`r-rowcell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'r-active': isSelected }), style: {
-            left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
-            right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined
-        }, onClick: (e) => {
-            if (e.target.nodeName === 'DIV' || e.target.nodeName === 'TD') {
-                if (selectEnable) {
-                    const index = selectedRows?.findIndex((x) => x[fieldKey] === row[fieldKey]);
-                    if (index > -1) {
-                        if (isMulti) {
-                            selectedRows?.splice(index, 1);
-                            setSelectedRows([...selectedRows]);
-                        }
-                        else {
-                            setSelectedRows([]);
-                        }
-                    }
-                    else {
-                        if (isMulti) {
-                            setSelectedRows([...selectedRows, row]);
+    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: (col.visible !== false && jsxRuntime.jsx("td", { className: classNames$1(`r-rowcell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'r-active': isSelected }), style: {
+                left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
+                right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined
+            }, onClick: (e) => {
+                if (e.target.nodeName === 'DIV' || e.target.nodeName === 'TD') {
+                    if (selectEnable) {
+                        const index = selectedRows?.findIndex((x) => x[fieldKey] === row[fieldKey]);
+                        if (index > -1) {
+                            if (isMulti) {
+                                selectedRows?.splice(index, 1);
+                                setSelectedRows([...selectedRows]);
+                            }
+                            else {
+                                setSelectedRows([]);
+                            }
                         }
                         else {
-                            setSelectedRows([row]);
+                            if (isMulti) {
+                                setSelectedRows([...selectedRows, row]);
+                            }
+                            else {
+                                setSelectedRows([row]);
+                            }
                         }
                     }
+                    e.stopPropagation();
                 }
-                e.stopPropagation();
-            }
-        }, children: RenderElement() }, `col-${indexRow}-${indexCol}`));
+            }, children: RenderElement() }, `col-${indexRow}-${indexCol}`)) });
 };
 
 const HeaderTableCol = (props) => {
@@ -73643,35 +73621,22 @@ const TableView = ({ idTable, dataSource, rowHeight = 33, height = 400, columns,
         }
         return datas;
     }, [searchTerm, filterBy, orderBy, dataSource]);
-    // Lấy dữ liệu hiển thị với phân trang 
-    const pagingData = React$5.useMemo(() => {
-        if (!viewData || viewData.length === 0) {
-            return [];
-        }
-        let datas = viewData;
-        if (pagingSetting?.allowPaging && pagingSetting?.currentPage && pagingSetting?.pageSize && pagingSetting.pagingClient) {
-            const start = (pagingSetting.currentPage - 1) * pagingSetting.pageSize;
-            const end = start + pagingSetting.pageSize;
-            datas = datas.slice(start, end);
-        }
-        return datas;
-    }, [viewData, pagingSetting?.pageSize, pagingSetting?.currentPage]);
     // Tính toán chỉ số bắt đầu và kết thúc của dữ liệu hiển thị
     const { adjustedStartIndex, adjustedEndIndex } = React$5.useMemo(() => {
-        if (!pagingData || pagingData.length === 0 || !isVirtualList) {
+        if (!viewData || viewData.length === 0 || !isVirtualList) {
             return { adjustedStartIndex: 0, adjustedEndIndex: 0 };
         }
         return {
             adjustedStartIndex: Math.max(startIndex - buffer, 0),
             adjustedEndIndex: Math.min(startIndex + visibleRowCount + buffer, dataSource.length)
         };
-    }, [startIndex, pagingData]);
+    }, [startIndex, viewData]);
     const visibleData = React$5.useMemo(() => {
-        if (!pagingData || pagingData.length === 0) {
+        if (!viewData || viewData.length === 0) {
             return [];
         }
-        return isVirtualList ? pagingData.slice(adjustedStartIndex, adjustedEndIndex) : pagingData;
-    }, [pagingData]);
+        return isVirtualList ? viewData.slice(adjustedStartIndex, adjustedEndIndex) : viewData;
+    }, [viewData]);
     const { levels: headerColumns, flat: contentColumns, flatVisble, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight } = React$5.useMemo(() => calculateTableStructure(columns), [columns]);
     const scrollTimeoutRef = React$5.useRef(null);
     const lastScrollTop = React$5.useRef(0);
@@ -73802,7 +73767,7 @@ const TableView = ({ idTable, dataSource, rowHeight = 33, height = 400, columns,
                                                 const indexRow = index + startIndex;
                                                 const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
                                                 return (jsxRuntime.jsx("tr", { "aria-rowindex": indexRow + 1, role: "row", className: 'r-row', children: contentColumns.map((column, indexCol) => (jsxRuntime.jsx(RenderContentCol, { idTable: idTable, col: column, fieldKey: fieldKey, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, isMulti: isMutil ?? false, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, formatSetting: formatSetting, handleCommandClick: handleCommandClick, indexCol: indexCol, indexRow: indexRow, isSelected: isSelected, row: row }, indexCol))) }, `row-content-${indexRow}`));
-                                            }), adjustedEndIndex > 0 && pagingData.length > adjustedEndIndex && (jsxRuntime.jsx("tr", { style: { height: (pagingData.length - adjustedEndIndex) * rowHeight }, children: jsxRuntime.jsx("td", { style: { padding: 0 }, colSpan: flatVisble.length }) }))] }), viewData.length > 0 && jsxRuntime.jsx("tfoot", { className: "r-gridfoot", children: (columnsAggregate?.length ?? 0) > 0 ? jsxRuntime.jsx("tr", { className: 'r-row', children: contentColumns.map((col, indexCol) => {
+                                            }), adjustedEndIndex > 0 && viewData.length > adjustedEndIndex && (jsxRuntime.jsx("tr", { style: { height: (viewData.length - adjustedEndIndex) * rowHeight }, children: jsxRuntime.jsx("td", { style: { padding: 0 }, colSpan: flatVisble.length }) }))] }), viewData.length > 0 && jsxRuntime.jsx("tfoot", { className: "r-gridfoot", children: (columnsAggregate?.length ?? 0) > 0 ? jsxRuntime.jsx("tr", { className: 'r-row', children: contentColumns.map((col, indexCol) => {
                                                 const item = columnsAggregate?.find((x) => x.field === col.field);
                                                 let sumValue = item?.value;
                                                 if (!item && col.haveSum === true && col.type === "numeric") {
@@ -73813,9 +73778,10 @@ const TableView = ({ idTable, dataSource, rowHeight = 33, height = 400, columns,
                                                         right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
                                                         textAlign: col.textAlign ? col.textAlign : 'left'
                                                     }, children: jsxRuntime.jsxs("div", { className: "r-footer-div", children: [(item || (col.haveSum === true && col.type === "numeric")) && col.type === "numeric" && (Number(sumValue) >= 0) && jsxRuntime.jsx(jsxRuntime.Fragment, { children: formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) }), (item || (col.haveSum === true && col.type === "numeric")) && col.type === "numeric" && (Number(sumValue) < 0) && jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false)}${formatSetting?.suffixNegative ?? ''}`] })] }) }, `summarycell-${indexCol}`);
-                                            }) }) : jsxRuntime.jsx(jsxRuntime.Fragment, {}) })] }), (((viewData.length ?? 0) === 0) && !isLoading) && jsxRuntime.jsxs("div", { className: "r-no-data", children: [jsxRuntime.jsx("svg", { width: "64", height: "41", viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsxs("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd", children: [jsxRuntime.jsx("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }), jsxRuntime.jsxs("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [jsxRuntime.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" }), jsxRuntime.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 && jsxRuntime.jsx("div", { className: "r-loading-overlay", children: jsxRuntime.jsxs("div", { className: "r-loading", children: [jsxRuntime.jsx(Spinner$1, { className: "me-1" }), t('Loading...')] }) })] })] }), pagingSetting?.allowPaging ? jsxRuntime.jsx(PagingComponent, { onChangePage: onChangePage, pageSize: pagingSetting?.pageSize ?? 0, currentPage: pagingSetting?.currentPage ?? 0, pageOptions: pagingSetting?.pageOptions ?? [20, 30, 50, 100], totalItem: (pagingSetting?.pagingClient ? viewData.length : pagingSetting?.totalItem ?? 0), onChangePageSize: onChangePageSize }) : jsxRuntime.jsx(jsxRuntime.Fragment, {})] }));
+                                            }) }) : jsxRuntime.jsx(jsxRuntime.Fragment, {}) })] }), (((viewData.length ?? 0) === 0) && !isLoading) && jsxRuntime.jsxs("div", { className: "r-no-data", children: [jsxRuntime.jsx("svg", { width: "64", height: "41", viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsxs("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd", children: [jsxRuntime.jsx("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }), jsxRuntime.jsxs("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [jsxRuntime.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" }), jsxRuntime.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 && jsxRuntime.jsx("div", { className: "r-loading-overlay", children: jsxRuntime.jsxs("div", { className: "r-loading", children: [jsxRuntime.jsx(Spinner$1, { className: "me-1" }), t('Loading...')] }) })] })] }), pagingSetting?.allowPaging ? jsxRuntime.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 }) : jsxRuntime.jsx(jsxRuntime.Fragment, {})] }));
 };
 
+exports.CheckRowMatch = CheckRowMatch;
 exports.ExportExcelComponent = ExportExcelComponent;
 exports.FindNodeByPath = FindNodeByPath;
 exports.InputStyleComponent = InputStyleComponent;