react-table-edit 1.5.12 → 1.5.14

package/dist/component/table/cell-content.d.ts

@@ -1,5 +1,5 @@
-import React, { KeyboardEvent } from "react";
-import { IColumnTable } from "../type";
+import React, { KeyboardEvent } from 'react';
+import { IColumnTable } from '../type';
 interface CellContentComponentProps {
     col: IColumnTable;
     row: any;
@@ -9,7 +9,7 @@ interface CellContentComponentProps {
     editDisable?: boolean;
     idTable?: string;
     formatSetting?: any;
-    typeDis: "edit" | "template" | "data";
+    typeDis: 'edit' | 'template' | 'data';
     displayValue: string | number | boolean | null | undefined;
     content: any;
     focusEditElementCell: (e: KeyboardEvent<any> | React.MouseEvent<HTMLDivElement, MouseEvent>, row: number, rol: number, isOpenDropDown?: boolean) => void;

package/dist/component/type/index.d.ts

@@ -49,6 +49,8 @@ export type IFSettingColumns = {
     fixedType?: 'left' | 'right';
     /** Chiều rộng cột */
     width?: number | string;
+    /** Số ký tự sau dấu phẩy */
+    fraction?: number;
     /** Sắp xếp */
     sortOrder: number;
 };

package/dist/index.d.ts

@@ -53,6 +53,8 @@ type IFSettingColumns = {
     fixedType?: 'left' | 'right';
     /** Chiều rộng cột */
     width?: number | string;
+    /** Số ký tự sau dấu phẩy */
+    fraction?: number;
     /** Sắp xếp */
     sortOrder: number;
 };

package/dist/index.js

@@ -19908,6 +19908,14 @@ const calculateTableStructure = (columns, settingColumns) => {
                 if (setting.width !== undefined && setting.width !== null) {
                     cell.width = setting.width;
                 }
+                if (setting.fraction !== undefined && setting.fraction !== null) {
+                    if (cell.numericSettings) {
+                        cell.numericSettings.fraction = setting.fraction;
+                    }
+                    else {
+                        cell.numericSettings = { fraction: setting.fraction };
+                    }
+                }
                 cell.headerDisplay = setting.headerText || cell.headerText;
             }
             else {
@@ -30585,6 +30593,36 @@ function setYear(date, year, options) {
   return date_;
 }
 
+/**
+ * The subMonths function options.
+ */
+
+/**
+ * @name subMonths
+ * @category Month Helpers
+ * @summary Subtract the specified number of months from the given date.
+ *
+ * @description
+ * Subtract the specified number of months from the given date.
+ *
+ * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
+ * @typeParam ResultDate - The result `Date` type, it is the type returned from the context function if it is passed, or inferred from the arguments.
+ *
+ * @param date - The date to be changed
+ * @param amount - The amount of months to be subtracted.
+ * @param options - An object with options
+ *
+ * @returns The new date with the months subtracted
+ *
+ * @example
+ * // Subtract 5 months from 1 February 2015:
+ * const result = subMonths(new Date(2015, 1, 1), 5)
+ * //=> Mon Sep 01 2014 00:00:00
+ */
+function subMonths(date, amount, options) {
+  return addMonths(date, -amount, options);
+}
+
 /**
  * Time zone name format.
  */
@@ -36280,14 +36318,14 @@ const RenderEditCellComponent = (props) => {
 
 const CellContentComponent = React__default["default"].memo((props) => {
     const { col, row, indexRow, indexCol, idTable, gridRef, editDisable, formatSetting, displayValue, typeDis, content, handleMouseDown, handleKeyDown, focusEditElementCell, handleDataChange } = props;
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: typeDis === 'edit' ? jsxRuntime.jsx(RenderEditCellComponent, { idTable: idTable, col: col, handleKeyDown: handleKeyDown, handleDataChange: handleDataChange, indexCol: indexCol, indexRow: indexRow, row: row, editDisable: editDisable, formatSetting: formatSetting, gridRef: gridRef }) : jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { id: `content-${idTable}-row${indexRow}-col${indexCol}`, tabIndex: Number(`${indexRow + 1}${indexCol + 1}`), onKeyDown: (e) => handleKeyDown(e, row), onMouseDown: (e) => handleMouseDown(e, 1), onDoubleClick: (e) => focusEditElementCell(e, indexRow, indexCol), 
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: typeDis === 'edit' ? (jsxRuntime.jsx(RenderEditCellComponent, { idTable: idTable, col: col, handleKeyDown: handleKeyDown, handleDataChange: handleDataChange, indexCol: indexCol, indexRow: indexRow, row: row, editDisable: editDisable, formatSetting: formatSetting, gridRef: gridRef })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { id: `content-${idTable}-row${indexRow}-col${indexCol}`, tabIndex: Number(`${indexRow + 1}${indexCol + 1}`), onKeyDown: (e) => handleKeyDown(e, row), onMouseDown: (e) => handleMouseDown(e, 1), onDoubleClick: (e) => focusEditElementCell(e, indexRow, indexCol), 
                     // onBlur={() => {
                     //   if (startCell.col === indexCol && startCell.row === indexRow) {
                     //     setSelectedCell(undefined)
                     //     setStartCell({ col: -1, row: -1 })
                     //   }
                     // }}
-                    style: { justifyContent: col.textAlign === "center" ? "center" : col.textAlign === "right" ? "flex-end" : "flex-start" }, className: "r-cell-text", children: [displayValue, col.type === 'select' && !editDisable && !displayValue && jsxRuntime.jsx("div", { className: "r-drop-icon", onClick: (e) => focusEditElementCell(e, indexRow, indexCol, true), children: jsxRuntime.jsx("svg", { height: "20", 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" }) }) })] }), !!content && (jsxRuntime.jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}-col${indexCol}`, children: displayValue }))] }) }));
+                    style: { justifyContent: col.textAlign === 'center' ? 'center' : col.textAlign === 'right' ? 'flex-end' : 'flex-start' }, className: "r-cell-text", children: [displayValue, col.type === 'select' && !editDisable && !displayValue && (jsxRuntime.jsx("div", { className: "r-drop-icon", onClick: (e) => focusEditElementCell(e, indexRow, indexCol, true), children: jsxRuntime.jsx("svg", { height: "20", 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" }) }) }))] }), !!content && (jsxRuntime.jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}-col${indexCol}`, children: displayValue }))] })) }));
 });
 
 const IconCustom = (props) => {
@@ -36315,7 +36353,7 @@ const CommandElement = (props) => {
             }) }) }));
 };
 
-var css_248z$2 = "@charset \"UTF-8\";\n.react-select-table .select-table-control {\n  opacity: 1;\n  border: 1px solid hsl(0, 0%, 80%);\n  border-radius: 0.357rem;\n  width: 100%;\n  height: 28px;\n  background-color: #FFFFFF;\n  display: flex;\n  align-items: center;\n  padding: 2px 8px;\n}\n.react-select-table .select-table-control .select-table-indicator svg {\n  fill: #c4c4c4 !important;\n}\n.react-select-table .select-table-control .icon-clear {\n  font-size: 25px;\n  margin-top: 2px;\n  font-weight: 500;\n  color: #c4c4c4;\n}\n.react-select-table .select-table-control .icon-clear:hover {\n  color: rgba(0, 0, 0, 0.8705882353) !important;\n}\n.react-select-table .select-table-control.r-select-is-open .select-table-indicator svg {\n  fill: rgba(0, 0, 0, 0.8705882353) !important;\n}\n.react-select-table .select-table-control.r-select-is-invalid {\n  border: 1px solid red !important;\n}\n.react-select-table .select-table-control.r-select-is-focus {\n  border: 1px solid #1989fa !important;\n}\n.react-select-table .select-table-control.r-select-is-disabled {\n  background-color: #efefef !important;\n}\n.react-select-table .select-table-control .select-table-container {\n  position: relative;\n  flex: 1;\n}\n.react-select-table .select-table-control .select-table-container .input-container {\n  background-color: transparent;\n  white-space: nowrap;\n  top: 0px;\n  left: 0px;\n  display: inline;\n}\n.react-select-table .select-table-control .select-table-container .input-container .select-input {\n  background-color: transparent;\n  text-align: center;\n  width: 100%;\n  box-sizing: border-box;\n  margin-left: -3px;\n  border: none;\n  /* Loại bỏ border */\n  outline: none;\n  /* Loại bỏ outline khi input được chọn */\n}\n.react-select-table .select-table-control .select-table-container .input-container .select-input:focus {\n  border-width: 0px !important;\n}\n.react-select-table .select-table-control .select-table-container .select-placeholder {\n  position: absolute;\n  color: #283046;\n  margin-top: 1px;\n  background-color: transparent;\n}\n.react-select-table .select-table-control .select-table-container .select-value {\n  position: absolute;\n  background-color: transparent;\n  bottom: 0px;\n  left: 0px;\n  width: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.react-select-table .formula-dropdown {\n  min-width: min-content !important;\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 15px;\n}\n.react-select-table input::placeholder {\n  color: #000000 !important;\n  opacity: 1;\n  /* Firefox */\n}\n\n.r-select-grid.r-select-tree-grid .r-select-gridtable .r-select-row:hover {\n  background-color: rgba(235, 70, 25, 0.1) !important;\n  color: #eb4619;\n}\n\n.r-select-grid {\n  font-size: 12px;\n  font-family: Montserrat, Helvetica, Arial, serif;\n  font-weight: 500 !important;\n  border-radius: 4px !important;\n  overflow: hidden;\n}\n.r-select-grid table {\n  table-layout: fixed;\n  border-collapse: separate;\n  border-spacing: 0px;\n}\n.r-select-grid .r-select-gridtable {\n  -webkit-overflow-scrolling: touch;\n  overflow-x: auto;\n  overflow-y: auto;\n  position: relative;\n  background-color: #FFFFFF;\n  color: rgba(0, 0, 0, 0.8705882353) !important;\n  font-weight: 400 !important;\n  font-size: 13px !important;\n  /* Toàn bộ thanh cuộn */\n}\n.r-select-grid .r-select-gridtable::-webkit-scrollbar {\n  width: 9px;\n  height: 9px;\n}\n.r-select-grid .r-select-gridtable::-webkit-scrollbar-track {\n  background: #FCFCFC;\n}\n.r-select-grid .r-select-gridtable::-webkit-scrollbar-thumb {\n  background: #8B8B8B;\n  border-radius: 6px;\n}\n.r-select-grid .r-select-gridtable::-webkit-scrollbar-thumb:hover {\n  background: #636363;\n}\n.r-select-grid .r-select-gridtable .r-select-gridheader .r-select-row .r-select-headercell {\n  color: rgba(0, 0, 0, 0.8705882353) !important;\n  position: sticky;\n  padding: 0px;\n  height: 35px;\n  z-index: 1;\n  border-width: 0px;\n  line-height: 16px;\n}\n.r-select-grid .r-select-gridtable .r-select-gridheader .r-select-row .r-select-headercell .r-select-headercell-div {\n  border-bottom: 1px solid #e0e0e0;\n  background-color: #fafafa;\n  display: flex;\n  align-items: center;\n  text-align: center;\n  padding: 5px 10px;\n  height: 100%;\n}\n.r-select-grid .r-select-gridtable .r-select-gridheader .r-select-row .r-select-headercell .r-select-headercell-text {\n  width: 100%;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row {\n  background-color: #FFFFFF;\n  cursor: pointer;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .cell-fixed {\n  position: sticky;\n  z-index: 1;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row.fisrt-row .r-select-rowcell {\n  border-top-width: 0px !important;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row.last-row .r-select-rowcell {\n  border-bottom: 1px solid #e0e0e0;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell {\n  border-top: 1px solid #e0e0e0;\n  height: 30px !important;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  padding: 7px 9px;\n  vertical-align: middle !important;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell.r-select-move {\n  background-color: rgba(235, 70, 25, 0.1) !important;\n  color: #eb4619 !important;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell.r-select-active {\n  background-color: #eb4619 !important;\n  color: #FFFFFF !important;\n}\n.r-tooltip .r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell.r-hidden {\n  display: none;\n}\n.r-tooltip .r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell.r-hidden ::after {\n  display: none;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell .r-icon-expand {\n  transition: transform 0.3s ease !important;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell .r-icon-expand.is-open {\n  transform: rotate(90deg) !important;\n  -moz-transform: rotate(90deg);\n  -webkit-transform: rotate(90deg);\n  -o-transform: rotate(90deg);\n}\n.r-select-grid .r-select-gridtable.no-header .r-select-rowcell {\n  border: none !important;\n}\n.r-select-grid .r-no-data {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  padding: 7px 9px;\n  color: #8f8f8f;\n}\n.r-select-grid .r-select-footer {\n  height: 30px;\n  background-color: #fafafa;\n}\n.r-select-grid .r-select-footer button {\n  font-weight: 400 !important;\n  font-size: 13px;\n}\n.r-select-grid .r-select-footer .r-btn {\n  border-width: 0px !important;\n}\n\n.r-pagesize .react-select-table .select-table-control {\n  border-radius: 0px;\n  border: 0px;\n  border-bottom: 1px solid #e0e0e0 !important;\n}\n.r-pagesize .react-select-table .select-table-control.r-select-is-focus {\n  border: 0px !important;\n  border-bottom: 1px solid #1989fa !important;\n}\n\n.r-sidebar {\n  width: 400px;\n  right: -400px;\n  padding: 0;\n  background-color: #FFFFFF;\n  z-index: 1051;\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  height: 100vh;\n  height: calc(var(--vh, 1vh) * 100);\n  transition: right 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99);\n  backface-visibility: hidden;\n  border-left: 1px solid rgba(0, 0, 0, 0.05);\n}\n.r-sidebar.open {\n  box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 5px 15px 0 rgba(0, 0, 0, 0.08);\n  right: 0;\n}\n.r-sidebar .modal-header {\n  background-color: #FFFFFF;\n}\n.r-sidebar .modal-header .btn-close {\n  padding: 0.8rem;\n  box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.1);\n  border-radius: 0.357rem;\n  background-color: #FFFFFF;\n  opacity: 1;\n  transition: all 0.23s ease 0.1s;\n  position: relative;\n  transform: translate(18px, -10px);\n}\n.r-sidebar .modal-header .btn-close:hover, .r-sidebar .modal-header .btn-close:focus, .r-sidebar .modal-header .btn-close:active {\n  opacity: 1;\n  outline: none;\n  transform: translate(15px, -2px);\n  box-shadow: none;\n}\n\n.r-sidebar .react-select {\n  max-width: 100%;\n}\n\n.r-sidebar {\n  width: 400px;\n  right: -100vw;\n  height: 100vh;\n}\n.r-sidebar .r-handle {\n  position: fixed;\n  background-color: #FFFFFF;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  filter: drop-shadow(0.9px 0.9px 1.5px);\n  height: 50px;\n  display: flex;\n  align-items: center;\n  border-radius: 0px 5px 5px 0px;\n  cursor: pointer;\n  margin-left: 7px;\n  z-index: 9;\n}\n.r-sidebar.customizer-md {\n  width: 600px;\n}\n.r-sidebar.customizer-lg {\n  width: 800px;\n}\n.r-sidebar.customizer-500 {\n  width: 500px;\n}\n@media (max-width: 500px) {\n  .r-sidebar.customizer-500 {\n    width: 100vw;\n  }\n}\n.r-sidebar.customizer-600 {\n  width: 600px;\n}\n@media (max-width: 600px) {\n  .r-sidebar.customizer-600 {\n    width: 100vw;\n  }\n}\n.r-sidebar.customizer-700 {\n  width: 700px;\n}\n@media (max-width: 700px) {\n  .r-sidebar.customizer-700 {\n    width: 100vw;\n  }\n}\n.r-sidebar.customizer-800 {\n  width: 800px;\n}\n@media (max-width: 800px) {\n  .r-sidebar.customizer-800 {\n    width: 100vw;\n  }\n}\n.r-sidebar.customizer-900 {\n  width: 900px;\n}\n@media (max-width: 900px) {\n  .r-sidebar.customizer-900 {\n    width: 100vw;\n  }\n}\n.r-sidebar.customizer-1000 {\n  width: 1000px;\n}\n@media (max-width: 1000px) {\n  .r-sidebar.customizer-1000 {\n    width: 100vw;\n  }\n}\n.r-sidebar.customizer-1500 {\n  width: 1500px;\n}\n@media (max-width: 1500px) {\n  .r-sidebar.customizer-1500 {\n    width: 100vw;\n  }\n}\n.r-sidebar.fullscreen {\n  width: 100%;\n}\n.r-sidebar.open {\n  right: 0;\n}\n\n.r-datepicker {\n  position: relative;\n}\n.r-datepicker .form-control {\n  height: 28px;\n}\n\n.r-datepicker-popup {\n  background: white;\n  border: 1px solid #e0e0e0;\n  padding: 15px 5px !important;\n}\n.r-datepicker-popup .rdp-nav {\n  display: none;\n}\n.r-datepicker-popup .rdp-month_caption {\n  display: none;\n}\n.r-datepicker-popup .select-month-year {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  padding: 5px 5px 8px 5px;\n}\n.r-datepicker-popup .select-month-year .select-month {\n  text-align: right;\n  width: 90px !important;\n}\n.r-datepicker-popup .select-month-year .select-year {\n  text-align: left;\n  width: 65px !important;\n}\n.r-datepicker-popup .select-month-year svg:hover {\n  color: #eb4619;\n}\n.r-datepicker-popup .select-month-year .select-table-control .select-table-container {\n  color: rgba(0, 0, 0, 0.8705882353) !important;\n  font-size: 14px !important;\n  font-weight: 600;\n}\n.r-datepicker-popup .select-month-year .select-table-control .select-table-container .select-input {\n  cursor: pointer !important;\n}\n.r-datepicker-popup .select-month-year .react-select-table .select-table-control {\n  border: none;\n}\n.r-datepicker-popup .select-month-year .react-select-table .r-select-is-focus {\n  border: none !important;\n}\n.r-datepicker-popup .select-month-year .select-table-indicator {\n  display: none;\n}\n.r-datepicker-popup .rdp-weekday {\n  color: rgba(0, 0, 0, 0.8705882353) !important;\n  opacity: 1 !important;\n  font-weight: 500;\n  font-size: 14px !important;\n}\n.r-datepicker-popup .rdp-day {\n  color: rgba(0, 0, 0, 0.8705882353) !important;\n  font-size: 13.5px !important;\n  height: 32px !important;\n  width: 32px !important;\n}\n.r-datepicker-popup .rdp-day .rdp-day_button {\n  height: 32px !important;\n  width: 32px !important;\n}\n.r-datepicker-popup .rdp-day.rdp-today {\n  font-weight: bold;\n  color: #eb4619;\n}\n.r-datepicker-popup .rdp-day.rdp-today .rdp-day_button {\n  border: 1px solid #eb4619;\n  border-radius: 8px;\n}\n.r-datepicker-popup .rdp-day.rdp-selected .rdp-day_button {\n  border: 1px solid #eb4619;\n  background-color: #eb4619;\n  color: #FFFFFF;\n  border-radius: 8px;\n}\n.r-datepicker-popup .rdp-day.rdp-in-range .rdp-day_button {\n  background-color: #fce6df;\n  color: #eb4619;\n  border-radius: 2px;\n  height: 22px !important;\n  border-width: 0px !important;\n}\n.r-datepicker-popup .rdp-day .rdp-day_button:hover {\n  background-color: #fce6df;\n  color: #eb4619;\n  border-radius: 8px;\n}\n.r-datepicker-popup .btn-today {\n  margin-top: 5px;\n  text-align: center;\n  font-size: 13px;\n  color: #eb4619;\n  cursor: pointer;\n  user-select: none;\n  font-weight: 500;\n}\n.r-datepicker-popup .btn-today:hover {\n  text-decoration: underline;\n}\n\n.tab-custom {\n  font-family: Roboto, \"Segoe UI\", GeezaPro, \"DejaVu Serif\", \"sans-serif\", -apple-system, BlinkMacSystemFont;\n  display: flex;\n}\n.tab-custom.tab-parent {\n  border-bottom: solid 1px #c9c9c9;\n}\n.tab-custom .btn-scroll {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n}\n.tab-custom .tab-component::-webkit-scrollbar {\n  display: none;\n  /* Ẩn thanh cuộn nếu không cần */\n}\n.tab-custom .tab-component {\n  white-space: nowrap;\n  overflow-x: hidden;\n  scroll-behavior: smooth;\n}\n.tab-custom .tab-component > * {\n  display: inline-block;\n}\n.tab-custom .tab-component .tab-custom-item {\n  display: inline-block;\n  padding: 3px 10px;\n  line-height: 23px;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n  text-transform: uppercase;\n  height: 30px;\n  color: rgba(0, 0, 0, 0.5);\n}\n.tab-custom .tab-component .tab-custom-item.active {\n  border-bottom: solid 2px #eb4619 !important;\n  color: #eb4619;\n}\n.tab-custom.tab-child .tab-custom-item {\n  font-size: 12px !important;\n  line-height: 23px !important;\n  border-radius: 5px 5px 0px 0px;\n  margin: 8px 3px 0px 3px;\n  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;\n}\n\n.bs-stepper {\n  background-color: #FFFFFF;\n  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);\n  border-radius: 0.5rem;\n}\n.bs-stepper .bs-stepper-header {\n  padding: 1.5rem 1.5rem;\n  flex-wrap: wrap;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n  margin: 0;\n}\n.bs-stepper .bs-stepper-header .line {\n  flex: 0;\n  min-width: auto;\n  min-height: auto;\n  background-color: transparent;\n  margin: 0;\n  padding: 0 1.75rem;\n  color: #283046;\n  font-size: 1.5rem;\n}\n.bs-stepper .bs-stepper-header .step {\n  margin-bottom: 0.25rem;\n  margin-top: 0.25rem;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger {\n  flex-wrap: nowrap;\n  padding: 0;\n  font-weight: normal;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-box {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 38px;\n  height: 38px;\n  padding: 0.5em 0;\n  font-weight: 500;\n  color: #babfc7;\n  background-color: rgba(186, 191, 199, 0.12);\n  border-radius: 0.35rem;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-label {\n  text-align: left;\n  margin: 0;\n  margin-top: 0.5rem;\n  margin-left: 1rem;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-label .bs-stepper-title {\n  display: inherit;\n  color: #283046;\n  font-weight: 600;\n  line-height: 1rem;\n  margin-bottom: 0rem;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-label .bs-stepper-subtitle {\n  font-weight: 400;\n  font-size: 0.85rem;\n  color: #b9b9c3;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger:hover {\n  background-color: transparent;\n}\n.bs-stepper .bs-stepper-header .step.active .step-trigger .bs-stepper-box {\n  background-color: #eb4619;\n  color: #FFFFFF;\n  box-shadow: 0 3px 6px 0 rgba(235, 70, 25, 0.4);\n}\n.bs-stepper .bs-stepper-header .step.active .step-trigger .bs-stepper-label .bs-stepper-title {\n  color: #eb4619;\n}\n.bs-stepper .bs-stepper-header .step.crossed .step-trigger .bs-stepper-box {\n  background-color: rgba(235, 70, 25, 0.12);\n  color: #eb4619;\n}\n.bs-stepper .bs-stepper-header .step.crossed .step-trigger .bs-stepper-label .bs-stepper-title {\n  color: #b9b9c3;\n}\n.bs-stepper .bs-stepper-header .step.crossed + .line {\n  color: #eb4619;\n}\n.bs-stepper .bs-stepper-content {\n  padding: 1.5rem 1.5rem;\n}\n.bs-stepper .bs-stepper-content .content {\n  margin-left: 0;\n}\n.bs-stepper .bs-stepper-content .content .content-header {\n  margin-bottom: 1rem;\n}\n.bs-stepper.vertical .bs-stepper-header {\n  border-right: 1px solid #e0e0e0;\n  border-bottom: none;\n}\n.bs-stepper.vertical .bs-stepper-header .step .step-trigger {\n  padding: 1rem 0;\n}\n.bs-stepper.vertical .bs-stepper-header .line {\n  display: none;\n}\n.bs-stepper.vertical .bs-stepper-content {\n  width: 100%;\n  padding-top: 2.5rem;\n}\n.bs-stepper.vertical .bs-stepper-content .content:not(.active) {\n  display: none;\n}\n.bs-stepper.vertical.wizard-icons .step {\n  text-align: center;\n}\n.bs-stepper.wizard-modern {\n  background-color: transparent;\n  box-shadow: none;\n}\n.bs-stepper.wizard-modern .bs-stepper-header {\n  border: none;\n}\n.bs-stepper.wizard-modern .bs-stepper-content {\n  background-color: #FFFFFF;\n  border-radius: 0.5rem;\n  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);\n}\n\n.horizontal-wizard,\n.vertical-wizard,\n.modern-horizontal-wizard,\n.modern-vertical-wizard {\n  margin-bottom: 2.2rem;\n}\n\nhtml[data-textdirection=rtl] .btn-prev,\nhtml[data-textdirection=rtl] .btn-next {\n  display: flex;\n}\nhtml[data-textdirection=rtl] .btn-prev i,\nhtml[data-textdirection=rtl] .btn-prev svg,\nhtml[data-textdirection=rtl] .btn-next i,\nhtml[data-textdirection=rtl] .btn-next svg {\n  transform: rotate(-180deg);\n}\n\n@media (max-width: 992px) {\n  .bs-stepper .bs-stepper-header {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n  .bs-stepper .bs-stepper-header .step .step-trigger {\n    padding: 0.5rem 0 !important;\n    flex-direction: row;\n  }\n  .bs-stepper .bs-stepper-header .line {\n    display: none;\n  }\n  .bs-stepper.vertical {\n    flex-direction: column;\n  }\n  .bs-stepper.vertical .bs-stepper-header {\n    align-items: flex-start;\n  }\n  .bs-stepper.vertical .bs-stepper-content {\n    padding-top: 1.5rem;\n  }\n}\n.r-table-edit .r-grid {\n  font-size: 12px;\n}\n.r-table-edit .r-grid .r-search {\n  display: flex;\n  position: relative;\n  align-items: center;\n}\n.r-table-edit .r-grid .r-search .input__value {\n  z-index: 1;\n}\n.r-table-edit .r-grid .r-search .input__value.is-clearable {\n  padding-right: 25px;\n}\n.r-table-edit .r-grid .r-search .input__clear-icon {\n  position: absolute;\n  right: 5px;\n  z-index: 10;\n}\n.r-table-edit .r-grid .r-gridtable {\n  -webkit-overflow-scrolling: touch;\n  overflow-x: auto;\n  overflow-y: scroll;\n  position: relative;\n  background-color: #FFFFFF;\n  color: rgba(0, 0, 0, 0.8705882353);\n  font-weight: 400;\n  border: 1px solid #e0e0e0;\n  /* Toàn bộ thanh cuộn */\n  /* Nền của thanh cuộn */\n  /* Thanh trượt (thumb) */\n  /* Khi hover */\n}\n.r-table-edit .r-grid .r-gridtable table {\n  table-layout: fixed;\n  border-collapse: separate;\n  border-spacing: 0px;\n}\n.r-table-edit .r-grid .r-gridtable::-webkit-scrollbar {\n  width: 9px;\n  /* Độ rộng của thanh cuộn */\n  height: 9px;\n  /* Độ cao của thanh cuộn */\n}\n.r-table-edit .r-grid .r-gridtable::-webkit-scrollbar-track {\n  background: #FCFCFC;\n  /* Màu nền nhạt */\n}\n.r-table-edit .r-grid .r-gridtable::-webkit-scrollbar-thumb {\n  background: #8B8B8B;\n  /* Màu xám nhạt */\n  border-radius: 6px;\n  /* Bo góc giống Edge */\n}\n.r-table-edit .r-grid .r-gridtable::-webkit-scrollbar-thumb:hover {\n  background: #636363;\n  /* Màu đậm hơn khi hover */\n}\n.r-table-edit .r-grid .r-gridtable .react-resizable-handle.react-resizable-handle-se {\n  position: absolute;\n  right: 0px;\n  top: 0px;\n  width: 10px;\n  height: 100%;\n  cursor: col-resize;\n  background-image: none;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter svg.active {\n  color: #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter-popup .react-select-table .select-value {\n  line-height: 20px !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter-popup .react-select-table .select-placeholder {\n  line-height: 20px !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter-popup .react-select-table .r-select-is-focus {\n  border-color: #eb4619 !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter-popup .form-control:focus {\n  border-color: #eb4619 !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-no-data {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  padding: 20px 9px;\n  color: #8f8f8f;\n}\n.r-table-edit .r-grid .r-gridtable .r-loading-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(255, 255, 255, 0.3);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 3;\n}\n.r-table-edit .r-grid .r-gridtable .r-loading-overlay .r-loading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  padding: 7px 9px;\n  color: #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed {\n  z-index: 2 !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed.fix-right .r-headercell-div {\n  border-left: 1px solid #e0e0e0;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed.fix-left .r-headercell-div {\n  border-right: 1px solid #e0e0e0;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed.fix-left.fixed-last .r-headercell-div {\n  box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed.fix-right.fixed-last .r-headercell-div {\n  box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .r-headercell {\n  color: rgba(0, 0, 0, 0.8705882353);\n  position: sticky;\n  padding: 0px;\n  height: 42px;\n  z-index: 1;\n  border-width: 0px;\n  line-height: 16px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .r-headercell .r-headercell-div {\n  border-right: 1px solid #e0e0e0;\n  border-bottom: 1px solid #e0e0e0;\n  background-color: #FFFFFF;\n  display: flex;\n  align-items: center;\n  text-align: center;\n  padding: 5px 10px;\n  height: 100%;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .r-headercell .header-content {\n  display: flex;\n  flex: 1 1 0%;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .r-headercell .header-content .text-content {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row:first-of-type .r-rowcell-div {\n  border-top-color: #FFFFFF;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row {\n  font-size: 13px;\n  transition: transform 0.05s linear;\n  will-change: transform;\n  backface-visibility: hidden;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .cell-fixed {\n  position: sticky;\n  z-index: 1;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .cell-fixed .r-rowcell.r-cell-selected-right {\n  margin-right: 1px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell {\n  background-color: #FFFFFF;\n  border-bottom: 1px solid #e0e0e0;\n  border-right: 1px solid #e0e0e0;\n  vertical-align: middle;\n  padding: 0;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.r-cell-group {\n  left: 0px;\n  position: sticky;\n  z-index: 1;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.r-cell-group .r-rowcell-div {\n  padding-left: 10px;\n  padding-right: 15px;\n  display: flex;\n  align-items: center;\n  background-color: #fafafa;\n  font-weight: 550;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.r-cell-group .r-rowcell-div svg {\n  margin-right: 10px;\n  cursor: pointer;\n  user-select: none;\n  transition: transform 0.2s ease-in-out;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.r-cell-group .r-rowcell-div svg:hover {\n  color: #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.cell-fixed .r-rowcell-div.r-cell-selected-right {\n  padding-right: 1px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.fix-right {\n  border-left: 1px solid #e0e0e0;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.fix-right.fixed-last {\n  border-left: 1px solid #e0e0e0;\n  box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.fix-left.fixed-last {\n  border-right: 1px solid #e0e0e0;\n  box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.r-active-row {\n  background-color: #fce6df;\n  border-right: 2px solid #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div {\n  min-height: 28px !important;\n  border: 1px solid transparent;\n  position: relative;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .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 .r-datepicker .form-control {\n  padding: 0px 4px;\n  border-radius: 0px;\n  border-width: 0px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .react-select-table.is-invalid {\n  border-width: 0px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .react-select-table .r-select-is-focus {\n  border-width: 0px !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .react-select-table .select-table-control {\n  border-radius: 0px;\n  border-width: 0px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .react-select-table .select-table-control.r-select-is-focus {\n  border: 1px solid #1989fa;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit .display-value {\n  cursor: pointer;\n  border-radius: 0px;\n  background-color: #FFFFFF;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit .input-display {\n  border-width: 0px;\n  box-sizing: border-box;\n  border: none;\n  /* Loại bỏ border */\n  outline: none;\n  /* Loại bỏ outline khi input được chọn */\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit .form-input-content .form-control {\n  border-radius: 4px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit .form-input-content .form-control:focus {\n  border: 1px solid #1989fa;\n  outline: none;\n  box-shadow: none;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit input::placeholder {\n  color: #eb4619;\n  opacity: 1;\n  /* Firefox */\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__display {\n  vertical-align: middle;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__edit {\n  display: none;\n  text-align: left;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__edit.active {\n  display: flex;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__edit .form-label {\n  font-size: 10px;\n  margin-bottom: 0px;\n  text-align: left;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__edit .form-control {\n  border-radius: 0px;\n  height: 23px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__edit .form__element {\n  margin: 0px 2px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-date-input {\n  text-align: center;\n  height: 29px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  padding: 5px;\n  font-size: 14px;\n  background-color: #f9f9f9;\n  color: #333;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-control:focus {\n  border-radius: 0px;\n  border-width: 0px;\n  background-color: #f8f8f8;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div input {\n  font-size: 13px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridfoot {\n  color: #283046;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridfoot .r-row {\n  bottom: 0px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridfoot .r-row .r-footer {\n  background-color: #fafafa;\n  font-size: 14px;\n  font-weight: 600;\n  width: 100px;\n  position: sticky;\n  z-index: 1;\n  bottom: 0;\n  border-width: 0px;\n  padding: 0px;\n  border-top: 1px solid #e0e0e0;\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 svg {\n  cursor: pointer;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items svg:hover {\n  color: #eb4619;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-left {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-left .r-toolbar-item {\n  margin: 7px 0px 7px 7px;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-center {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-center .r-toolbar-item {\n  margin: 7px 3px 7px 3px;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-right {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-right .r-toolbar-item {\n  margin: 7px 7px 7px 0px;\n}\n.r-table-edit .r-setting-container {\n  margin: 0px 15px;\n}\n.r-table-edit .r-setting-container .r-setting-content {\n  -webkit-overflow-scrolling: touch;\n  overflow-x: auto;\n  overflow-y: scroll;\n  position: relative;\n  background-color: #FFFFFF;\n  color: rgba(0, 0, 0, 0.8705882353);\n  font-weight: 400;\n  border-left: 1px solid #e0e0e0;\n  border-right: 1px solid #e0e0e0;\n  /* Toàn bộ thanh cuộn */\n  /* Nền của thanh cuộn */\n  /* Thanh trượt (thumb) */\n  /* Khi hover */\n}\n.r-table-edit .r-setting-container .r-setting-content::-webkit-scrollbar {\n  width: 9px;\n  /* Độ rộng của thanh cuộn */\n  height: 9px;\n  /* Độ cao của thanh cuộn */\n}\n.r-table-edit .r-setting-container .r-setting-content::-webkit-scrollbar-track {\n  background: #FCFCFC;\n  /* Màu nền nhạt */\n}\n.r-table-edit .r-setting-container .r-setting-content::-webkit-scrollbar-thumb {\n  background: #8B8B8B;\n  /* Màu xám nhạt */\n  border-radius: 6px;\n  /* Bo góc giống Edge */\n}\n.r-table-edit .r-setting-container .r-setting-content::-webkit-scrollbar-thumb:hover {\n  background: #636363;\n  /* Màu đậm hơn khi hover */\n}\n.r-table-edit .r-setting-container .r-setting-row {\n  padding: 5px !important;\n  margin: 0px;\n  border-bottom: 1px solid #e0e0e0;\n  font-size: 13px;\n  display: flex;\n  align-items: center;\n}\n.r-table-edit .r-setting-container .r-setting-row .r-setting-cell {\n  padding-right: 10px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.r-table-edit .r-setting-container .r-setting-row .r-setting-cell .form-control {\n  font-size: 13px !important;\n}\n.r-table-edit .r-setting-container .r-setting-row.r-setting-header {\n  font-size: 12px !important;\n}\n.r-table-edit.r-virtualized-table .r-row:hover .r-rowcell {\n  background-color: #fce6df !important;\n}\n.r-table-edit .r-pager {\n  border: 1px solid #e0e0e0;\n  border-top-width: 0px;\n  min-height: 50px;\n  width: 100%;\n  display: inline-block;\n}\n.r-table-edit .r-pager .r-pagercontainer {\n  margin-left: 10px;\n  float: left;\n  height: 100%;\n  display: block;\n  align-items: center;\n}\n.r-table-edit .r-pager .r-pagercontainer .r-button {\n  display: inline-block;\n  margin: 9px 6px;\n  height: 30px;\n  width: 30px;\n  padding: 6px;\n  border-width: 0px;\n  background-color: transparent;\n}\n.r-table-edit .r-pager .r-pagercontainer .r-button svg {\n  font-size: 16px;\n}\n.r-table-edit .r-pager .r-pagercontainer .r-number {\n  display: inline-block;\n  margin: 10px 4px 0px 0px;\n  height: 25px;\n  width: 25px;\n  font-size: 13px;\n  padding-top: 4px;\n  text-align: center;\n  cursor: pointer;\n  border-radius: 5px;\n}\n.r-table-edit .r-pager .r-pagercontainer .r-number.r-active {\n  background-color: rgba(235, 70, 25, 0.1);\n  color: #eb4619;\n}\n.r-table-edit .r-pager .r-pagercontainer .r-number:hover {\n  border: 1px solid #eb4619;\n}\n.r-table-edit .r-pager .r-pagesize {\n  margin-left: 20px;\n  font-size: 13px;\n  display: inline-block;\n}\n.r-table-edit .r-pager .r-pagesize .select-pagesize__menu-portal {\n  z-index: 5;\n}\n.r-table-edit .r-pager .r-parentmsgbar {\n  font-size: 13px;\n  float: right;\n  padding-bottom: 9px;\n  padding-right: 18px;\n  padding-top: 14px;\n}\n\n.r-tooltip .tooltip-inner {\n  font-size: 11px;\n}\n.r-tooltip.tooltip-error ::before {\n  border-top-color: rgb(235, 78, 78);\n}\n.r-tooltip.tooltip-error .tooltip-inner {\n  background-color: rgb(235, 78, 78);\n}\n\n.btn-input-style {\n  font-weight: 500;\n  text-transform: uppercase;\n  border: 1px solid #e0e0e0;\n  border-radius: 5px;\n  margin-left: 3px;\n  height: 28px;\n  padding: 2px 5px;\n  cursor: pointer;\n}\n.btn-input-style:hover {\n  background-color: rgba(235, 70, 25, 0.1);\n  color: #eb4619;\n}\n.btn-input-style.active-custom {\n  background-color: #eb4619;\n  color: #FFFFFF;\n}";
+var css_248z$2 = "@charset \"UTF-8\";\n.react-select-table .select-table-control {\n  opacity: 1;\n  border: 1px solid hsl(0, 0%, 80%);\n  border-radius: 0.357rem;\n  width: 100%;\n  height: 28px;\n  background-color: #FFFFFF;\n  display: flex;\n  align-items: center;\n  padding: 2px 8px;\n}\n.react-select-table .select-table-control .select-table-indicator svg {\n  fill: #c4c4c4 !important;\n}\n.react-select-table .select-table-control .icon-clear {\n  font-size: 25px;\n  margin-top: 2px;\n  font-weight: 500;\n  color: #c4c4c4;\n}\n.react-select-table .select-table-control .icon-clear:hover {\n  color: rgba(0, 0, 0, 0.8705882353) !important;\n}\n.react-select-table .select-table-control.r-select-is-open .select-table-indicator svg {\n  fill: rgba(0, 0, 0, 0.8705882353) !important;\n}\n.react-select-table .select-table-control.r-select-is-invalid {\n  border: 1px solid red !important;\n}\n.react-select-table .select-table-control.r-select-is-focus {\n  border: 1px solid #1989fa !important;\n}\n.react-select-table .select-table-control.r-select-is-disabled {\n  background-color: #efefef !important;\n}\n.react-select-table .select-table-control .select-table-container {\n  position: relative;\n  flex: 1;\n}\n.react-select-table .select-table-control .select-table-container .input-container {\n  background-color: transparent;\n  white-space: nowrap;\n  top: 0px;\n  left: 0px;\n  display: inline;\n}\n.react-select-table .select-table-control .select-table-container .input-container .select-input {\n  background-color: transparent;\n  text-align: center;\n  width: 100%;\n  box-sizing: border-box;\n  margin-left: -3px;\n  border: none;\n  /* Loại bỏ border */\n  outline: none;\n  /* Loại bỏ outline khi input được chọn */\n}\n.react-select-table .select-table-control .select-table-container .input-container .select-input:focus {\n  border-width: 0px !important;\n}\n.react-select-table .select-table-control .select-table-container .select-placeholder {\n  position: absolute;\n  color: #283046;\n  margin-top: 1px;\n  background-color: transparent;\n}\n.react-select-table .select-table-control .select-table-container .select-value {\n  position: absolute;\n  background-color: transparent;\n  bottom: 0px;\n  left: 0px;\n  width: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.react-select-table .formula-dropdown {\n  min-width: min-content !important;\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 15px;\n}\n.react-select-table input::placeholder {\n  color: #000000 !important;\n  opacity: 1;\n  /* Firefox */\n}\n\n.r-select-grid.r-select-tree-grid .r-select-gridtable .r-select-row:hover {\n  background-color: rgba(235, 70, 25, 0.1) !important;\n  color: #eb4619;\n}\n\n.r-select-grid {\n  font-size: 12px;\n  font-family: Montserrat, Helvetica, Arial, serif;\n  font-weight: 500 !important;\n  border-radius: 4px !important;\n  overflow: hidden;\n}\n.r-select-grid table {\n  table-layout: fixed;\n  border-collapse: separate;\n  border-spacing: 0px;\n}\n.r-select-grid .r-select-gridtable {\n  -webkit-overflow-scrolling: touch;\n  overflow-x: auto;\n  overflow-y: auto;\n  position: relative;\n  background-color: #FFFFFF;\n  color: rgba(0, 0, 0, 0.8705882353) !important;\n  font-weight: 400 !important;\n  font-size: 13px !important;\n  /* Toàn bộ thanh cuộn */\n}\n.r-select-grid .r-select-gridtable::-webkit-scrollbar {\n  width: 9px;\n  height: 9px;\n}\n.r-select-grid .r-select-gridtable::-webkit-scrollbar-track {\n  background: #FCFCFC;\n}\n.r-select-grid .r-select-gridtable::-webkit-scrollbar-thumb {\n  background: #8B8B8B;\n  border-radius: 6px;\n}\n.r-select-grid .r-select-gridtable::-webkit-scrollbar-thumb:hover {\n  background: #636363;\n}\n.r-select-grid .r-select-gridtable .r-select-gridheader .r-select-row .r-select-headercell {\n  color: rgba(0, 0, 0, 0.8705882353) !important;\n  position: sticky;\n  padding: 0px;\n  height: 35px;\n  z-index: 1;\n  border-width: 0px;\n  line-height: 16px;\n}\n.r-select-grid .r-select-gridtable .r-select-gridheader .r-select-row .r-select-headercell .r-select-headercell-div {\n  border-bottom: 1px solid #e0e0e0;\n  background-color: #fafafa;\n  display: flex;\n  align-items: center;\n  text-align: center;\n  padding: 5px 10px;\n  height: 100%;\n}\n.r-select-grid .r-select-gridtable .r-select-gridheader .r-select-row .r-select-headercell .r-select-headercell-text {\n  width: 100%;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row {\n  background-color: #FFFFFF;\n  cursor: pointer;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .cell-fixed {\n  position: sticky;\n  z-index: 1;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row.fisrt-row .r-select-rowcell {\n  border-top-width: 0px !important;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row.last-row .r-select-rowcell {\n  border-bottom: 1px solid #e0e0e0;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell {\n  border-top: 1px solid #e0e0e0;\n  height: 30px !important;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  padding: 7px 9px;\n  vertical-align: middle !important;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell.r-select-move {\n  background-color: rgba(235, 70, 25, 0.1) !important;\n  color: #eb4619 !important;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell.r-select-active {\n  background-color: #eb4619 !important;\n  color: #FFFFFF !important;\n}\n.r-tooltip .r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell.r-hidden {\n  display: none;\n}\n.r-tooltip .r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell.r-hidden ::after {\n  display: none;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell .r-icon-expand {\n  transition: transform 0.3s ease !important;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell .r-icon-expand.is-open {\n  transform: rotate(90deg) !important;\n  -moz-transform: rotate(90deg);\n  -webkit-transform: rotate(90deg);\n  -o-transform: rotate(90deg);\n}\n.r-select-grid .r-select-gridtable.no-header .r-select-rowcell {\n  border: none !important;\n}\n.r-select-grid .r-no-data {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  padding: 7px 9px;\n  color: #8f8f8f;\n}\n.r-select-grid .r-select-footer {\n  height: 30px;\n  background-color: #fafafa;\n}\n.r-select-grid .r-select-footer button {\n  font-weight: 400 !important;\n  font-size: 13px;\n}\n.r-select-grid .r-select-footer .r-btn {\n  border-width: 0px !important;\n}\n\n.r-pagesize .react-select-table .select-table-control {\n  border-radius: 0px;\n  border: 0px;\n  border-bottom: 1px solid #e0e0e0 !important;\n}\n.r-pagesize .react-select-table .select-table-control.r-select-is-focus {\n  border: 0px !important;\n  border-bottom: 1px solid #1989fa !important;\n}\n\n.r-sidebar {\n  width: 400px;\n  right: -400px;\n  padding: 0;\n  background-color: #FFFFFF;\n  z-index: 1051;\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  height: 100vh;\n  height: calc(var(--vh, 1vh) * 100);\n  transition: right 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99);\n  backface-visibility: hidden;\n  border-left: 1px solid rgba(0, 0, 0, 0.05);\n}\n.r-sidebar.open {\n  box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 5px 15px 0 rgba(0, 0, 0, 0.08);\n  right: 0;\n}\n.r-sidebar .modal-header {\n  background-color: #FFFFFF;\n}\n.r-sidebar .modal-header .btn-close {\n  padding: 0.8rem;\n  box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.1);\n  border-radius: 0.357rem;\n  background-color: #FFFFFF;\n  opacity: 1;\n  transition: all 0.23s ease 0.1s;\n  position: relative;\n  transform: translate(18px, -10px);\n}\n.r-sidebar .modal-header .btn-close:hover, .r-sidebar .modal-header .btn-close:focus, .r-sidebar .modal-header .btn-close:active {\n  opacity: 1;\n  outline: none;\n  transform: translate(15px, -2px);\n  box-shadow: none;\n}\n\n.r-sidebar .react-select {\n  max-width: 100%;\n}\n\n.r-sidebar {\n  width: 400px;\n  right: -100vw;\n  height: 100vh;\n}\n.r-sidebar .r-handle {\n  position: fixed;\n  background-color: #FFFFFF;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  filter: drop-shadow(0.9px 0.9px 1.5px);\n  height: 50px;\n  display: flex;\n  align-items: center;\n  border-radius: 0px 5px 5px 0px;\n  cursor: pointer;\n  margin-left: 7px;\n  z-index: 9;\n}\n.r-sidebar.customizer-md {\n  width: 600px;\n}\n.r-sidebar.customizer-lg {\n  width: 800px;\n}\n.r-sidebar.customizer-500 {\n  width: 500px;\n}\n@media (max-width: 500px) {\n  .r-sidebar.customizer-500 {\n    width: 100vw;\n  }\n}\n.r-sidebar.customizer-600 {\n  width: 600px;\n}\n@media (max-width: 600px) {\n  .r-sidebar.customizer-600 {\n    width: 100vw;\n  }\n}\n.r-sidebar.customizer-700 {\n  width: 700px;\n}\n@media (max-width: 700px) {\n  .r-sidebar.customizer-700 {\n    width: 100vw;\n  }\n}\n.r-sidebar.customizer-800 {\n  width: 800px;\n}\n@media (max-width: 800px) {\n  .r-sidebar.customizer-800 {\n    width: 100vw;\n  }\n}\n.r-sidebar.customizer-900 {\n  width: 900px;\n}\n@media (max-width: 900px) {\n  .r-sidebar.customizer-900 {\n    width: 100vw;\n  }\n}\n.r-sidebar.customizer-1000 {\n  width: 1000px;\n}\n@media (max-width: 1000px) {\n  .r-sidebar.customizer-1000 {\n    width: 100vw;\n  }\n}\n.r-sidebar.customizer-1500 {\n  width: 1500px;\n}\n@media (max-width: 1500px) {\n  .r-sidebar.customizer-1500 {\n    width: 100vw;\n  }\n}\n.r-sidebar.fullscreen {\n  width: 100%;\n}\n.r-sidebar.open {\n  right: 0;\n}\n\n.r-datepicker {\n  position: relative;\n}\n.r-datepicker .form-control {\n  height: 28px;\n}\n\n.r-datepicker-popup {\n  background: white;\n  border: 1px solid #e0e0e0;\n  padding: 15px 5px !important;\n}\n.r-datepicker-popup .rdp-nav {\n  display: none;\n}\n.r-datepicker-popup .rdp-month_caption {\n  display: none;\n}\n.r-datepicker-popup .select-month-year {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  padding: 5px 5px 8px 5px;\n}\n.r-datepicker-popup .select-month-year .select-month {\n  text-align: right;\n  width: 90px !important;\n}\n.r-datepicker-popup .select-month-year .select-year {\n  text-align: left;\n  width: 65px !important;\n}\n.r-datepicker-popup .select-month-year svg:hover {\n  color: #eb4619;\n}\n.r-datepicker-popup .select-month-year .select-table-control .select-table-container {\n  color: rgba(0, 0, 0, 0.8705882353) !important;\n  font-size: 14px !important;\n  font-weight: 600;\n}\n.r-datepicker-popup .select-month-year .select-table-control .select-table-container .select-input {\n  cursor: pointer !important;\n}\n.r-datepicker-popup .select-month-year .react-select-table .select-table-control {\n  border: none;\n}\n.r-datepicker-popup .select-month-year .react-select-table .r-select-is-focus {\n  border: none !important;\n}\n.r-datepicker-popup .select-month-year .select-table-indicator {\n  display: none;\n}\n.r-datepicker-popup .rdp-weekday {\n  color: rgba(0, 0, 0, 0.8705882353) !important;\n  opacity: 1 !important;\n  font-weight: 500;\n  font-size: 14px !important;\n}\n.r-datepicker-popup .rdp-day {\n  color: rgba(0, 0, 0, 0.8705882353) !important;\n  font-size: 13.5px !important;\n  height: 32px !important;\n  width: 32px !important;\n}\n.r-datepicker-popup .rdp-day .rdp-day_button {\n  height: 32px !important;\n  width: 32px !important;\n}\n.r-datepicker-popup .rdp-day.rdp-today {\n  font-weight: bold;\n  color: #eb4619;\n}\n.r-datepicker-popup .rdp-day.rdp-today .rdp-day_button {\n  border: 1px solid #eb4619;\n  border-radius: 8px;\n}\n.r-datepicker-popup .rdp-day.rdp-selected .rdp-day_button {\n  border: 1px solid #eb4619;\n  background-color: #eb4619;\n  color: #FFFFFF;\n  border-radius: 8px;\n}\n.r-datepicker-popup .rdp-day.rdp-in-range .rdp-day_button {\n  background-color: #fce6df;\n  color: #eb4619;\n  border-radius: 2px;\n  height: 22px !important;\n  border-width: 0px !important;\n}\n.r-datepicker-popup .rdp-day .rdp-day_button:hover {\n  background-color: #fce6df;\n  color: #eb4619;\n  border-radius: 8px;\n}\n.r-datepicker-popup .btn-today {\n  margin-top: 5px;\n  text-align: center;\n  font-size: 13px;\n  color: #eb4619;\n  cursor: pointer;\n  user-select: none;\n  font-weight: 500;\n}\n.r-datepicker-popup .btn-today:hover {\n  text-decoration: underline;\n}\n\n.tab-custom {\n  font-family: Roboto, \"Segoe UI\", GeezaPro, \"DejaVu Serif\", \"sans-serif\", -apple-system, BlinkMacSystemFont;\n  display: flex;\n}\n.tab-custom.tab-parent {\n  border-bottom: solid 1px #c9c9c9;\n}\n.tab-custom .btn-scroll {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n}\n.tab-custom .tab-component::-webkit-scrollbar {\n  display: none;\n  /* Ẩn thanh cuộn nếu không cần */\n}\n.tab-custom .tab-component {\n  white-space: nowrap;\n  overflow-x: hidden;\n  scroll-behavior: smooth;\n}\n.tab-custom .tab-component > * {\n  display: inline-block;\n}\n.tab-custom .tab-component .tab-custom-item {\n  display: inline-block;\n  padding: 3px 10px;\n  line-height: 23px;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n  text-transform: uppercase;\n  height: 30px;\n  color: rgba(0, 0, 0, 0.5);\n}\n.tab-custom .tab-component .tab-custom-item.active {\n  border-bottom: solid 2px #eb4619 !important;\n  color: #eb4619;\n}\n.tab-custom.tab-child .tab-custom-item {\n  font-size: 12px !important;\n  line-height: 23px !important;\n  border-radius: 5px 5px 0px 0px;\n  margin: 8px 3px 0px 3px;\n  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;\n}\n\n.bs-stepper {\n  background-color: #FFFFFF;\n  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);\n  border-radius: 0.5rem;\n}\n.bs-stepper .bs-stepper-header {\n  padding: 1.5rem 1.5rem;\n  flex-wrap: wrap;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n  margin: 0;\n}\n.bs-stepper .bs-stepper-header .line {\n  flex: 0;\n  min-width: auto;\n  min-height: auto;\n  background-color: transparent;\n  margin: 0;\n  padding: 0 1.75rem;\n  color: #283046;\n  font-size: 1.5rem;\n}\n.bs-stepper .bs-stepper-header .step {\n  margin-bottom: 0.25rem;\n  margin-top: 0.25rem;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger {\n  flex-wrap: nowrap;\n  padding: 0;\n  font-weight: normal;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-box {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 38px;\n  height: 38px;\n  padding: 0.5em 0;\n  font-weight: 500;\n  color: #babfc7;\n  background-color: rgba(186, 191, 199, 0.12);\n  border-radius: 0.35rem;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-label {\n  text-align: left;\n  margin: 0;\n  margin-top: 0.5rem;\n  margin-left: 1rem;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-label .bs-stepper-title {\n  display: inherit;\n  color: #283046;\n  font-weight: 600;\n  line-height: 1rem;\n  margin-bottom: 0rem;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-label .bs-stepper-subtitle {\n  font-weight: 400;\n  font-size: 0.85rem;\n  color: #b9b9c3;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger:hover {\n  background-color: transparent;\n}\n.bs-stepper .bs-stepper-header .step.active .step-trigger .bs-stepper-box {\n  background-color: #eb4619;\n  color: #FFFFFF;\n  box-shadow: 0 3px 6px 0 rgba(235, 70, 25, 0.4);\n}\n.bs-stepper .bs-stepper-header .step.active .step-trigger .bs-stepper-label .bs-stepper-title {\n  color: #eb4619;\n}\n.bs-stepper .bs-stepper-header .step.crossed .step-trigger .bs-stepper-box {\n  background-color: rgba(235, 70, 25, 0.12);\n  color: #eb4619;\n}\n.bs-stepper .bs-stepper-header .step.crossed .step-trigger .bs-stepper-label .bs-stepper-title {\n  color: #b9b9c3;\n}\n.bs-stepper .bs-stepper-header .step.crossed + .line {\n  color: #eb4619;\n}\n.bs-stepper .bs-stepper-content {\n  padding: 1.5rem 1.5rem;\n}\n.bs-stepper .bs-stepper-content .content {\n  margin-left: 0;\n}\n.bs-stepper .bs-stepper-content .content .content-header {\n  margin-bottom: 1rem;\n}\n.bs-stepper.vertical .bs-stepper-header {\n  border-right: 1px solid #e0e0e0;\n  border-bottom: none;\n}\n.bs-stepper.vertical .bs-stepper-header .step .step-trigger {\n  padding: 1rem 0;\n}\n.bs-stepper.vertical .bs-stepper-header .line {\n  display: none;\n}\n.bs-stepper.vertical .bs-stepper-content {\n  width: 100%;\n  padding-top: 2.5rem;\n}\n.bs-stepper.vertical .bs-stepper-content .content:not(.active) {\n  display: none;\n}\n.bs-stepper.vertical.wizard-icons .step {\n  text-align: center;\n}\n.bs-stepper.wizard-modern {\n  background-color: transparent;\n  box-shadow: none;\n}\n.bs-stepper.wizard-modern .bs-stepper-header {\n  border: none;\n}\n.bs-stepper.wizard-modern .bs-stepper-content {\n  background-color: #FFFFFF;\n  border-radius: 0.5rem;\n  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);\n}\n\n.horizontal-wizard,\n.vertical-wizard,\n.modern-horizontal-wizard,\n.modern-vertical-wizard {\n  margin-bottom: 2.2rem;\n}\n\nhtml[data-textdirection=rtl] .btn-prev,\nhtml[data-textdirection=rtl] .btn-next {\n  display: flex;\n}\nhtml[data-textdirection=rtl] .btn-prev i,\nhtml[data-textdirection=rtl] .btn-prev svg,\nhtml[data-textdirection=rtl] .btn-next i,\nhtml[data-textdirection=rtl] .btn-next svg {\n  transform: rotate(-180deg);\n}\n\n@media (max-width: 992px) {\n  .bs-stepper .bs-stepper-header {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n  .bs-stepper .bs-stepper-header .step .step-trigger {\n    padding: 0.5rem 0 !important;\n    flex-direction: row;\n  }\n  .bs-stepper .bs-stepper-header .line {\n    display: none;\n  }\n  .bs-stepper.vertical {\n    flex-direction: column;\n  }\n  .bs-stepper.vertical .bs-stepper-header {\n    align-items: flex-start;\n  }\n  .bs-stepper.vertical .bs-stepper-content {\n    padding-top: 1.5rem;\n  }\n}\n.r-table-edit .r-grid {\n  font-size: 12px;\n}\n.r-table-edit .r-grid .r-search {\n  display: flex;\n  position: relative;\n  align-items: center;\n}\n.r-table-edit .r-grid .r-search .input__value {\n  z-index: 1;\n}\n.r-table-edit .r-grid .r-search .input__value.is-clearable {\n  padding-right: 25px;\n}\n.r-table-edit .r-grid .r-search .input__clear-icon {\n  position: absolute;\n  right: 5px;\n  z-index: 10;\n}\n.r-table-edit .r-grid .r-gridtable {\n  -webkit-overflow-scrolling: touch;\n  overflow-x: auto;\n  overflow-y: scroll;\n  position: relative;\n  background-color: #FFFFFF;\n  color: rgba(0, 0, 0, 0.8705882353);\n  font-weight: 400;\n  border: 1px solid #e0e0e0;\n  /* Toàn bộ thanh cuộn */\n  /* Nền của thanh cuộn */\n  /* Thanh trượt (thumb) */\n  /* Khi hover */\n}\n.r-table-edit .r-grid .r-gridtable table {\n  table-layout: fixed;\n  border-collapse: separate;\n  border-spacing: 0px;\n}\n.r-table-edit .r-grid .r-gridtable::-webkit-scrollbar {\n  width: 9px;\n  /* Độ rộng của thanh cuộn */\n  height: 9px;\n  /* Độ cao của thanh cuộn */\n}\n.r-table-edit .r-grid .r-gridtable::-webkit-scrollbar-track {\n  background: #FCFCFC;\n  /* Màu nền nhạt */\n}\n.r-table-edit .r-grid .r-gridtable::-webkit-scrollbar-thumb {\n  background: #8B8B8B;\n  /* Màu xám nhạt */\n  border-radius: 6px;\n  /* Bo góc giống Edge */\n}\n.r-table-edit .r-grid .r-gridtable::-webkit-scrollbar-thumb:hover {\n  background: #636363;\n  /* Màu đậm hơn khi hover */\n}\n.r-table-edit .r-grid .r-gridtable .react-resizable-handle.react-resizable-handle-se {\n  position: absolute;\n  right: 0px;\n  top: 0px;\n  width: 10px;\n  height: 100%;\n  cursor: col-resize;\n  background-image: none;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter svg.active {\n  color: #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter-popup .react-select-table .select-value {\n  line-height: 20px !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter-popup .react-select-table .select-placeholder {\n  line-height: 20px !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter-popup .react-select-table .r-select-is-focus {\n  border-color: #eb4619 !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter-popup .form-control:focus {\n  border-color: #eb4619 !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-no-data {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  padding: 20px 9px;\n  color: #8f8f8f;\n}\n.r-table-edit .r-grid .r-gridtable .r-loading-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(255, 255, 255, 0.3);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 3;\n}\n.r-table-edit .r-grid .r-gridtable .r-loading-overlay .r-loading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  padding: 7px 9px;\n  color: #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed {\n  z-index: 2 !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed.fix-right .r-headercell-div {\n  border-left: 1px solid #e0e0e0;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed.fix-left .r-headercell-div {\n  border-right: 1px solid #e0e0e0;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed.fix-left.fixed-last .r-headercell-div {\n  box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed.fix-right.fixed-last .r-headercell-div {\n  box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .r-headercell {\n  color: rgba(0, 0, 0, 0.8705882353);\n  position: sticky;\n  padding: 0px;\n  height: 42px;\n  z-index: 1;\n  border-width: 0px;\n  line-height: 16px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .r-headercell .r-headercell-div {\n  border-right: 1px solid #e0e0e0;\n  border-bottom: 1px solid #e0e0e0;\n  background-color: #FFFFFF;\n  display: flex;\n  align-items: center;\n  text-align: center;\n  padding: 5px 10px;\n  height: 100%;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .r-headercell .header-content {\n  display: flex;\n  flex: 1 1 0%;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .r-headercell .header-content .text-content {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row:first-of-type .r-rowcell-div {\n  border-top-color: #FFFFFF;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row {\n  font-size: 13px;\n  transition: transform 0.05s linear;\n  will-change: transform;\n  backface-visibility: hidden;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .cell-fixed {\n  position: sticky;\n  z-index: 1;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .cell-fixed .r-rowcell.r-cell-selected-right {\n  margin-right: 1px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell {\n  background-color: #FFFFFF;\n  border-bottom: 1px solid #e0e0e0;\n  border-right: 1px solid #e0e0e0;\n  vertical-align: middle;\n  padding: 0;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.r-cell-sum-group {\n  background-color: #fafafa;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.r-cell-sum-group .r-rowcell-div {\n  padding-left: 10px;\n  padding-right: 5px;\n  display: flex;\n  align-items: center;\n  background-color: #fafafa;\n  font-weight: 550;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.r-cell-group {\n  left: 0px;\n  position: sticky;\n  z-index: 1;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.r-cell-group .r-rowcell-div {\n  padding-left: 10px;\n  padding-right: 5px !important;\n  display: flex;\n  align-items: center;\n  background-color: #fafafa;\n  font-weight: 550;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.r-cell-group .r-rowcell-div svg {\n  margin-right: 10px;\n  cursor: pointer;\n  user-select: none;\n  transition: transform 0.2s ease-in-out;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.r-cell-group .r-rowcell-div svg:hover {\n  color: #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.cell-fixed .r-rowcell-div.r-cell-selected-right {\n  padding-right: 1px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.fix-right {\n  border-left: 1px solid #e0e0e0;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.fix-right.fixed-last {\n  border-left: 1px solid #e0e0e0;\n  box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.fix-left.fixed-last {\n  border-right: 1px solid #e0e0e0;\n  box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.r-active-row {\n  background-color: #fce6df;\n  border-right: 2px solid #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div {\n  min-height: 28px !important;\n  border: 1px solid transparent;\n  position: relative;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .arrow-context-menu {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 15px;\n  width: 15px;\n  background-color: #FFFFFF;\n  border-radius: 10px;\n  border: 1px solid #e0e0e0;\n  box-shadow: 0px 0px 2px #e0e0e0;\n  right: -5px;\n  bottom: -5px;\n  z-index: 10000;\n  cursor: pointer;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.command {\n  padding-top: 0px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div:focus {\n  outline: none;\n  /* bỏ viền focus mặc định */\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.r-cell-disable {\n  background-color: #f9f9f9;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.r-active-cell {\n  background-color: rgb(255, 240, 240);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-cell-text:focus {\n  outline: none;\n  /* bỏ viền focus mặc định */\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-icon-invalid {\n  position: absolute;\n  width: 10px;\n  height: 10px;\n  top: 0px;\n  left: -6px;\n  rotate: -90deg;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-drag-icon {\n  position: absolute;\n  border: 1px solid #FFFFFF;\n  bottom: -2px;\n  right: -2px;\n  width: 7px;\n  height: 7px;\n  background-color: #eb4619;\n  border-radius: 20%;\n  cursor: crosshair;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-cell-text {\n  padding: 0px 7px;\n  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 .r-datepicker .form-control {\n  padding: 0px 4px;\n  border-radius: 0px;\n  border-width: 0px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .react-select-table.is-invalid {\n  border-width: 0px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .react-select-table .r-select-is-focus {\n  border-width: 0px !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .react-select-table .select-table-control {\n  border-radius: 0px;\n  border-width: 0px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .react-select-table .select-table-control.r-select-is-focus {\n  border: 1px solid #1989fa;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit .display-value {\n  cursor: pointer;\n  border-radius: 0px;\n  background-color: #FFFFFF;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit .input-display {\n  border-width: 0px;\n  box-sizing: border-box;\n  border: none;\n  /* Loại bỏ border */\n  outline: none;\n  /* Loại bỏ outline khi input được chọn */\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit .form-input-content .form-control {\n  border-radius: 4px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit .form-input-content .form-control:focus {\n  border: 1px solid #1989fa;\n  outline: none;\n  box-shadow: none;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit input::placeholder {\n  color: #eb4619;\n  opacity: 1;\n  /* Firefox */\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__display {\n  vertical-align: middle;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__edit {\n  display: none;\n  text-align: left;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__edit.active {\n  display: flex;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__edit .form-label {\n  font-size: 10px;\n  margin-bottom: 0px;\n  text-align: left;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__edit .form-control {\n  border-radius: 0px;\n  height: 23px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__edit .form__element {\n  margin: 0px 2px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-date-input {\n  text-align: center;\n  height: 29px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  padding: 5px;\n  font-size: 14px;\n  background-color: #f9f9f9;\n  color: #333;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-control:focus {\n  border-radius: 0px;\n  border-width: 0px;\n  background-color: #f8f8f8;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div input {\n  font-size: 13px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridfoot {\n  color: #283046;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridfoot .r-row {\n  bottom: 0px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridfoot .r-row .r-footer {\n  background-color: #fafafa;\n  font-size: 14px;\n  font-weight: 600;\n  width: 100px;\n  position: sticky;\n  z-index: 1;\n  bottom: 0;\n  border-width: 0px;\n  padding: 0px;\n  border-top: 1px solid #e0e0e0;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridfoot .r-row .r-footer.cell-fixed {\n  z-index: 2;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridfoot .r-row .r-footer .r-footer-div {\n  height: 30px;\n  padding: 5px 0px;\n}\n.r-table-edit .r-grid .r-gridtable .formula-dropdown {\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 15px;\n}\n.r-table-edit .r-grid .text-left .form-label {\n  text-align: left;\n}\n.r-table-edit .r-grid .r-toolbar {\n  border: 1px solid #e0e0e0;\n  height: 44px;\n}\n.r-table-edit .r-grid .r-toolbar.r-toolbar-bottom {\n  border-top-width: 0px;\n}\n.r-table-edit .r-grid .r-toolbar.r-toolbar-top {\n  border-bottom-width: 0px;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items svg {\n  cursor: pointer;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items svg:hover {\n  color: #eb4619;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-left {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-left .r-toolbar-item {\n  margin: 7px 0px 7px 7px;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-center {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-center .r-toolbar-item {\n  margin: 7px 3px 7px 3px;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-right {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-right .r-toolbar-item {\n  margin: 7px 7px 7px 0px;\n}\n.r-table-edit .r-setting-container {\n  margin: 0px 15px;\n}\n.r-table-edit .r-setting-container .r-setting-content {\n  -webkit-overflow-scrolling: touch;\n  overflow-x: auto;\n  overflow-y: scroll;\n  position: relative;\n  background-color: #FFFFFF;\n  color: rgba(0, 0, 0, 0.8705882353);\n  font-weight: 400;\n  border-left: 1px solid #e0e0e0;\n  border-right: 1px solid #e0e0e0;\n  /* Toàn bộ thanh cuộn */\n  /* Nền của thanh cuộn */\n  /* Thanh trượt (thumb) */\n  /* Khi hover */\n}\n.r-table-edit .r-setting-container .r-setting-content::-webkit-scrollbar {\n  width: 9px;\n  /* Độ rộng của thanh cuộn */\n  height: 9px;\n  /* Độ cao của thanh cuộn */\n}\n.r-table-edit .r-setting-container .r-setting-content::-webkit-scrollbar-track {\n  background: #FCFCFC;\n  /* Màu nền nhạt */\n}\n.r-table-edit .r-setting-container .r-setting-content::-webkit-scrollbar-thumb {\n  background: #8B8B8B;\n  /* Màu xám nhạt */\n  border-radius: 6px;\n  /* Bo góc giống Edge */\n}\n.r-table-edit .r-setting-container .r-setting-content::-webkit-scrollbar-thumb:hover {\n  background: #636363;\n  /* Màu đậm hơn khi hover */\n}\n.r-table-edit .r-setting-container .r-setting-row {\n  padding: 5px !important;\n  margin: 0px;\n  border-bottom: 1px solid #e0e0e0;\n  font-size: 13px;\n  display: flex;\n  align-items: center;\n}\n.r-table-edit .r-setting-container .r-setting-row .r-setting-cell {\n  padding-right: 10px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.r-table-edit .r-setting-container .r-setting-row .r-setting-cell .form-control {\n  font-size: 13px !important;\n}\n.r-table-edit .r-setting-container .r-setting-row.r-setting-header {\n  font-size: 12px !important;\n}\n.r-table-edit.r-virtualized-table .r-row:hover .r-rowcell {\n  background-color: #fce6df !important;\n}\n.r-table-edit .r-pager {\n  border: 1px solid #e0e0e0;\n  border-top-width: 0px;\n  min-height: 50px;\n  width: 100%;\n  display: inline-block;\n}\n.r-table-edit .r-pager .r-pagercontainer {\n  margin-left: 10px;\n  float: left;\n  height: 100%;\n  display: block;\n  align-items: center;\n}\n.r-table-edit .r-pager .r-pagercontainer .r-button {\n  display: inline-block;\n  margin: 9px 6px;\n  height: 30px;\n  width: 30px;\n  padding: 6px;\n  border-width: 0px;\n  background-color: transparent;\n}\n.r-table-edit .r-pager .r-pagercontainer .r-button svg {\n  font-size: 16px;\n}\n.r-table-edit .r-pager .r-pagercontainer .r-number {\n  display: inline-block;\n  margin: 10px 4px 0px 0px;\n  height: 25px;\n  width: 25px;\n  font-size: 13px;\n  padding-top: 4px;\n  text-align: center;\n  cursor: pointer;\n  border-radius: 5px;\n}\n.r-table-edit .r-pager .r-pagercontainer .r-number.r-active {\n  background-color: rgba(235, 70, 25, 0.1);\n  color: #eb4619;\n}\n.r-table-edit .r-pager .r-pagercontainer .r-number:hover {\n  border: 1px solid #eb4619;\n}\n.r-table-edit .r-pager .r-pagesize {\n  margin-left: 20px;\n  font-size: 13px;\n  display: inline-block;\n}\n.r-table-edit .r-pager .r-pagesize .select-pagesize__menu-portal {\n  z-index: 5;\n}\n.r-table-edit .r-pager .r-parentmsgbar {\n  font-size: 13px;\n  float: right;\n  padding-bottom: 9px;\n  padding-right: 18px;\n  padding-top: 14px;\n}\n\n.r-tooltip .tooltip-inner {\n  font-size: 11px;\n}\n.r-tooltip.tooltip-error ::before {\n  border-top-color: rgb(235, 78, 78);\n}\n.r-tooltip.tooltip-error .tooltip-inner {\n  background-color: rgb(235, 78, 78);\n}\n\n.btn-input-style {\n  font-weight: 500;\n  text-transform: uppercase;\n  border: 1px solid #e0e0e0;\n  border-radius: 5px;\n  margin-left: 3px;\n  height: 28px;\n  padding: 2px 5px;\n  cursor: pointer;\n}\n.btn-input-style:hover {\n  background-color: rgba(235, 70, 25, 0.1);\n  color: #eb4619;\n}\n.btn-input-style.active-custom {\n  background-color: #eb4619;\n  color: #FFFFFF;\n}";
 styleInject(css_248z$2);
 
 const getColumn = (contentColumns, col, count) => {
@@ -38618,10 +38656,10 @@ const DateRangePicker = React$5.forwardRef((props, ref) => {
     const { id, onKeyDown, className, invalid, container, onPaste, onChange, value } = props;
     const dateFormat = props.dateFormat ?? 'dd/MM/yyyy';
     const { from, to } = value || {};
-    const currentDate = new Date();
+    const today = new Date();
     const { t } = reactI18next.useTranslation();
-    const [viewDateFrom, setViewDateFrom] = React$5.useState(from ? new Date(from) : currentDate);
-    const [viewDateTo, setViewDateTo] = React$5.useState(to ? new Date(to) : addMonths(currentDate, 1));
+    const [viewDateFrom, setViewDateFrom] = React$5.useState(from ? new Date(from) : today);
+    const [viewDateTo, setViewDateTo] = React$5.useState(to ? new Date(to) : addMonths(today, 1));
     const [open, setOpen] = React$5.useState(false);
     const formatDisplay = (f, t) => {
         if (f && t) {
@@ -38634,19 +38672,24 @@ const DateRangePicker = React$5.forwardRef((props, ref) => {
     };
     const [inputValue, setInputValue] = React$5.useState(formatDisplay(from, to));
     const toggle = () => setOpen((prev) => !prev);
-    const handleSelect = (selected) => {
+    const handleSelect = (selected, selectedTo) => {
         let newRange = { from, to };
-        if (!newRange.from || (selected && selected < newRange.from)) {
+        if (selectedTo) {
+            newRange = { from: selected, to: selectedTo };
+            setViewDateFrom(selected || today);
+            setViewDateTo(selectedTo || today);
+        }
+        else if (!newRange.from || (selected && selected < newRange.from)) {
             newRange = { from: selected, to };
-            setViewDateFrom(selected || currentDate);
+            setViewDateFrom(selected || today);
         }
         else if (newRange.from && selected && selected > newRange.from && (!newRange.to || selected < newRange.to)) {
             newRange = { from, to: selected };
-            setViewDateTo(selected || currentDate);
+            setViewDateTo(selected || today);
         }
         else if (newRange.to && selected && selected > newRange.to) {
             newRange = { from, to: selected };
-            setViewDateTo(selected || currentDate);
+            setViewDateTo(selected || today);
         }
         onChange(newRange);
         setInputValue(formatDisplay(newRange.from, newRange.to));
@@ -38656,8 +38699,8 @@ const DateRangePicker = React$5.forwardRef((props, ref) => {
         setInputValue(v);
         const parts = v.split('-').map((p) => p.trim());
         if (parts.length === 2 && parts[0].length === 10 && parts[1].length === 10) {
-            const parsedFrom = parse(parts[0], dateFormat, currentDate);
-            const parsedTo = parse(parts[1], dateFormat, currentDate);
+            const parsedFrom = parse(parts[0], dateFormat, today);
+            const parsedTo = parse(parts[1], dateFormat, today);
             if (!isNaN(parsedFrom.getTime()) && !isNaN(parsedTo.getTime())) {
                 onChange({ from: parsedFrom, to: parsedTo });
             }
@@ -38743,7 +38786,23 @@ const DateRangePicker = React$5.forwardRef((props, ref) => {
                                                 inRange: 'rdp-in-range',
                                                 rangeStart: 'rdp-selected',
                                                 rangeEnd: 'rdp-selected'
-                                            } })] })] }), jsxRuntime.jsxs("div", { className: "d-flex border-top ms-50", style: { gap: 20, paddingTop: 10 }, children: [jsxRuntime.jsx("div", { className: "btn-today", onClick: () => onChange({ from: currentDate, to: currentDate }), children: t('Today') }), jsxRuntime.jsx("div", { className: "btn-today", onClick: () => onChange({ from: currentDate, to: currentDate }), children: t('Yesterday') }), jsxRuntime.jsx("div", { className: "btn-today", onClick: () => onChange({ from: currentDate, to: currentDate }), children: t('This week') }), jsxRuntime.jsx("div", { className: "btn-today", onClick: () => onChange({ from: currentDate, to: currentDate }), children: t('This month') })] })] })] }) }));
+                                            } })] })] }), jsxRuntime.jsxs("div", { className: "d-flex border-top ms-50", style: { gap: 20, paddingTop: 10 }, children: [jsxRuntime.jsx("div", { className: "btn-today", onClick: () => {
+                                        handleSelect(today, today);
+                                        setOpen(false);
+                                    }, children: t('Today') }), jsxRuntime.jsx("div", { className: "btn-today", onClick: () => {
+                                        handleSelect(addDays(today, -1), addDays(today, -1));
+                                        setOpen(false);
+                                    }, children: t('Yesterday') }), jsxRuntime.jsx("div", { className: "btn-today", onClick: () => {
+                                        handleSelect(startOfWeek(today, { weekStartsOn: 1 }), endOfWeek(today, { weekStartsOn: 1 }));
+                                        setOpen(false);
+                                    }, children: t('This week') }), jsxRuntime.jsx("div", { className: "btn-today", onClick: () => {
+                                        handleSelect(startOfMonth(today), endOfMonth(today));
+                                        setOpen(false);
+                                    }, children: t('This month') }), jsxRuntime.jsx("div", { className: "btn-today", onClick: () => {
+                                        const lastMonth = subMonths(today, 1);
+                                        handleSelect(startOfMonth(lastMonth), endOfMonth(lastMonth));
+                                        setOpen(false);
+                                    }, children: t('Last month') })] })] })] }) }));
 });
 
 const FilterComponent = ({ optionsFilter, formatSetting, filterBy, setOpenFilter, changeFilter, column }) => {
@@ -68623,9 +68682,7 @@ const RenderContentCol = (props) => {
             if (col.template) {
                 value = col.template(row, indexRow) ?? '';
             }
-            return (jsxRuntime.jsx("div", { className: classNames$1('r-rowcell-div'), children: jsxRuntime.jsxs("div", { className: classNames$1('r-rowcell-content'), style: {
-                        textAlign: col.textAlign ? col.textAlign : 'left'
-                    }, 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 (jsxRuntime.jsxs("div", { className: classNames$1('r-rowcell-div'), children: [jsxRuntime.jsx("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, style: { justifyContent: col.textAlign === 'center' ? 'center' : col.textAlign === 'right' ? 'flex-end' : 'flex-start' }, 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 (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: {
@@ -68681,7 +68738,7 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
         setContentColumns(rs.flat);
         return rs;
     }, [columns, settingColumns]);
-    const optionGroupColumns = React$5.useMemo(() => contentColumns.filter((x) => !groupColumns.includes(x.field)).map((x) => ({ ...x, headerDisplay: t(x.headerDisplay) })), [groupColumns, contentColumns]);
+    const optionGroupColumns = React$5.useMemo(() => contentColumns.filter((x) => !groupColumns.includes(x.field)).map((x) => ({ ...x, headerDisplay: t(x.headerDisplay ?? x.headerText) })), [groupColumns, contentColumns]);
     // Tính toán dữ liệu hiển thị dựa trên các điều kiện lọc, tìm kiếm và sắp xếp
     const viewData = React$5.useMemo(() => {
         if (!dataSource || dataSource.length === 0) {
@@ -68766,7 +68823,7 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
         return (jsxRuntime.jsx("div", { className: "me-50 r-search", children: jsxRuntime.jsx(ReactInput, { style: { width: '230px' }, value: searchSetting?.searchTerm !== undefined ? searchSetting?.searchTerm : searchTerm, setSearchTerm: searchSetting?.setSearchTerm ? searchSetting?.setSearchTerm : setSearchTerm, placeholder: t('Search'), onKeyPress: handleKeyPress }) }));
     };
     const groupbtnTemplate = () => {
-        return (jsxRuntime.jsxs(UncontrolledDropdown, { children: [jsxRuntime.jsx(DropdownToggle$1, { tag: "div", id: "group-dropdown-toggle", style: { position: 'relative' }, onClick: (e) => e.preventDefault(), children: jsxRuntime.jsx(GroupIcon, { color: "#7F7F7F", size: 24 }) }), jsxRuntime.jsxs(DropdownMenu$1, { className: "formula-dropdown icon-dropdown p-1", children: [jsxRuntime.jsx("div", { className: "mb-1", style: { fontSize: 16, fontWeight: 500 }, children: "Nh\u00F3m d\u1EEF li\u1EC7u theo c\u1ED9t" }), jsxRuntime.jsxs("div", { className: 'form-group', children: [jsxRuntime.jsx(Label$1, { id: `label-group-1`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 1" }), jsxRuntime.jsx("div", { className: "form-input", children: jsxRuntime.jsx(SelectTable, { options: optionGroupColumns, fieldLabel: 'headerDisplay', fieldValue: 'field', value: groupColumns[0] ? { headerDisplay: t(contentColumns.find((x) => x.field === groupColumns[0])?.headerDisplay) } : undefined, onChange: (val) => {
+        return (jsxRuntime.jsxs(UncontrolledDropdown, { children: [jsxRuntime.jsx(DropdownToggle$1, { tag: "div", id: "group-dropdown-toggle", style: { position: 'relative' }, onClick: (e) => e.preventDefault(), children: jsxRuntime.jsx(GroupIcon, { color: "#7F7F7F", size: 24 }) }), jsxRuntime.jsxs(DropdownMenu$1, { className: "formula-dropdown icon-dropdown p-1", children: [jsxRuntime.jsx("div", { className: "mb-1", style: { fontSize: 16, fontWeight: 500 }, children: "Nh\u00F3m d\u1EEF li\u1EC7u theo c\u1ED9t" }), jsxRuntime.jsxs("div", { className: 'form-group', children: [jsxRuntime.jsx(Label$1, { id: `label-group-1`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 1" }), jsxRuntime.jsx("div", { className: "form-input", children: jsxRuntime.jsx(SelectTable, { options: optionGroupColumns, fieldLabel: 'headerDisplay', fieldValue: 'field', value: groupColumns[0] ? { headerDisplay: t(contentColumns.find((x) => x.field === groupColumns[0])?.headerDisplay ?? contentColumns.find((x) => x.field === groupColumns[0])?.headerText) } : undefined, onChange: (val) => {
                                             if (val) {
                                                 groupColumns[0] = val.field;
                                             }
@@ -68774,7 +68831,7 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
                                                 groupColumns.pop();
                                             }
                                             setGroupColumns([...groupColumns]);
-                                        }, isClearable: groupColumns?.length === 1 }) })] }), jsxRuntime.jsxs("div", { className: 'form-group', children: [jsxRuntime.jsx(Label$1, { id: `label-group-2`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 2" }), jsxRuntime.jsx("div", { className: "form-input", children: jsxRuntime.jsx(SelectTable, { options: optionGroupColumns, fieldLabel: 'headerDisplay', fieldValue: 'field', value: groupColumns[1] ? { headerDisplay: t(contentColumns.find((x) => x.field === groupColumns[1])?.headerDisplay) } : undefined, onChange: (val) => {
+                                        }, isClearable: groupColumns?.length === 1 }) })] }), jsxRuntime.jsxs("div", { className: 'form-group', children: [jsxRuntime.jsx(Label$1, { id: `label-group-2`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 2" }), jsxRuntime.jsx("div", { className: "form-input", children: jsxRuntime.jsx(SelectTable, { options: optionGroupColumns, fieldLabel: 'headerDisplay', fieldValue: 'field', value: groupColumns[1] ? { headerDisplay: t(contentColumns.find((x) => x.field === groupColumns[1])?.headerDisplay ?? contentColumns.find((x) => x.field === groupColumns[1])?.headerText) } : undefined, onChange: (val) => {
                                             if (val) {
                                                 groupColumns[1] = val.field;
                                             }
@@ -68782,7 +68839,7 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
                                                 groupColumns.pop();
                                             }
                                             setGroupColumns([...groupColumns]);
-                                        }, isClearable: groupColumns?.length === 2 }) })] }), jsxRuntime.jsxs("div", { className: 'form-group', children: [jsxRuntime.jsx(Label$1, { id: `label-group-3`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 3" }), jsxRuntime.jsx("div", { className: "form-input", children: jsxRuntime.jsx(SelectTable, { options: optionGroupColumns, fieldLabel: 'headerDisplay', fieldValue: 'field', value: groupColumns[2] ? { headerDisplay: t(contentColumns.find((x) => x.field === groupColumns[2])?.headerDisplay) } : undefined, onChange: (val) => {
+                                        }, isClearable: groupColumns?.length === 2 }) })] }), jsxRuntime.jsxs("div", { className: 'form-group', children: [jsxRuntime.jsx(Label$1, { id: `label-group-3`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 3" }), jsxRuntime.jsx("div", { className: "form-input", children: jsxRuntime.jsx(SelectTable, { options: optionGroupColumns, fieldLabel: 'headerDisplay', fieldValue: 'field', value: groupColumns[2] ? { headerDisplay: t(contentColumns.find((x) => x.field === groupColumns[2])?.headerDisplay ?? contentColumns.find((x) => x.field === groupColumns[2])?.headerText) } : undefined, onChange: (val) => {
                                             if (groupSetting) {
                                                 if (val) {
                                                     groupColumns[2] = val.field;
@@ -68801,7 +68858,7 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
                                     }, children: `${t('Delete')}` })] })] })] }));
     };
     const chooseColumnsTemplate = () => {
-        return jsxRuntime.jsx(SvgSettings, { className: "me-1 r-toolbar-icon", fontSize: 20, color: "#7F7F7F", onClick: () => setOpenPopupSetupColumn(true) });
+        return jsxRuntime.jsx(SvgSettings, { className: "r-toolbar-icon", fontSize: 20, color: "#7F7F7F", onClick: () => setOpenPopupSetupColumn(true) });
     };
     const expandTemplate = () => {
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!expandsAll && (jsxRuntime.jsx(ExpandAllIcon, { onClick: () => {
@@ -68919,8 +68976,8 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
                                                         setExpand(!expand);
                                                         setExpandsAll(undefined);
                                                         row.expand = !expand;
-                                                    } }), t(col.headerDisplay), ": ", value, " (", row.children.length, ")"] }) }), contentColumns.map((colSum, indexCol) => {
-                                        if (indexCol < firstColSpan) {
+                                                    } }), t(col.headerDisplay ?? col.headerText), ": ", value, " (", row.children.length, ")"] }) }), contentColumns.map((colSum, indexCol) => {
+                                        if (indexCol < firstColSpan || colSum.visible === false) {
                                             return;
                                         }
                                         let sumValue = row[colSum.field];
@@ -68930,8 +68987,11 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
                                                 return Number(accumulator ?? 0) + Number(currentValue[colSum.field] ?? 0);
                                             }, 0);
                                         }
-                                        return (colSum.visible !== false && (jsxRuntime.jsx("td", { className: "r-rowcell r-cell-group", children: jsxRuntime.jsxs("div", { className: "r-rowcell-div", style: { justifyContent: colSum.textAlign ? colSum.textAlign : 'left' }, children: [(haveSum || (colSum.haveSum === true && colSum.type === 'numeric')) && colSum.type === 'numeric' && Number(sumValue) >= 0 && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', colSum.numericSettings?.fraction, true, false) })), (haveSum || (colSum.haveSum === true && colSum.type === 'numeric')) && colSum.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 ?? ''}`] }))] }) }, `group-sum-cell-${level}-${indexCol}`)));
-                                    })] }), expand && jsxRuntime.jsx(RenderContent, { datas: row.children, level: level + 1 })] }));
+                                        if (colSum.type === 'numeric') {
+                                            sumValue = formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', colSum.numericSettings?.fraction, true, false);
+                                        }
+                                        return (jsxRuntime.jsx("td", { className: "r-rowcell r-cell-sum-group", children: jsxRuntime.jsx("div", { className: "r-rowcell-div", style: { justifyContent: colSum.textAlign ? colSum.textAlign : 'left' }, children: (haveSum || colSum.haveSum === true) && Number(sumValue) < 0 ? (jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${sumValue}${formatSetting?.suffixNegative ?? ''}`] })) : (sumValue) }) }, `group-sum-cell-${level}-${indexRow}-${indexCol}`));
+                                    })] }), expand && jsxRuntime.jsx(RenderContent, { datas: row.children, level: level + 1 })] }, `row-${level}-${indexRow}`));
                 }
                 else {
                     const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
@@ -68952,6 +69012,9 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
                                                         }
                                                     }, columns: contentColumns, setContentColumns: setContentColumns, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, totalCount: dataSource?.length ?? 0 }, `header-${indexParent}-${index}`))) }, `header-${-indexParent}`));
                                         }) }), jsxRuntime.jsx("tbody", { className: "r-gridcontent", role: "rowgroup", children: jsxRuntime.jsx(RenderContent, { datas: viewData }) }), jsxRuntime.jsx("tfoot", { className: "r-gridfoot", children: (columnsAggregate?.length ?? 0) > 0 && (jsxRuntime.jsx("tr", { className: "r-row", children: contentColumns.map((col, indexCol) => {
+                                                if (col.visible === false) {
+                                                    return;
+                                                }
                                                 const item = columnsAggregate?.find((x) => x.field === col.field);
                                                 let sumValue = item?.value;
                                                 if (!item && col.haveSum === true && col.type === 'numeric') {
@@ -68959,15 +69022,17 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
                                                         return Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0);
                                                     }, 0);
                                                 }
-                                                return (col.visible !== false && (jsxRuntime.jsx("td", { className: classNames$1(`p-0 px-50 r-footer fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }), style: {
+                                                if (col.type === 'numeric') {
+                                                    sumValue = formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false);
+                                                }
+                                                return (jsxRuntime.jsx("td", { className: classNames$1(`p-0 px-50 r-footer fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }), style: {
                                                         left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
                                                         right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
                                                         textAlign: col.textAlign ? col.textAlign : 'left'
-                                                    }, children: 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}`)));
+                                                    }, children: jsxRuntime.jsx("div", { className: "r-footer-div", children: (item || col.haveSum === true) && Number(sumValue) < 0 ? (jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${sumValue}${formatSetting?.suffixNegative ?? ''}`] })) : (sumValue) }) }, `summarycell-${indexCol}`));
                                             }) })) })] }), (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(SettingColumn, { gridRef: gridRef, handleSidebar: () => {
                     setOpenPopupSetupColumn(!openPopupSetupColumn);
                 }, settingColumns: settingColumns, openSidebar: openPopupSetupColumn, column: [...contentColumns], resetDefaultColumns: resetDefaultColumns, setColumn: (newColumns) => {
-                    console.log(newColumns);
                     if (saveSettingColumn) {
                         saveSettingColumn(newColumns.map((x, index) => ({ field: x.field, headerText: x.headerDisplay, visible: x.visible, fixedType: x.fixedType, width: x.width, sortOrder: index + 1 })));
                     }