react-table-edit 1.4.56 → 1.4.57

package/dist/index.mjs

@@ -19867,36 +19867,6 @@ const ReactInput = (props) => {
                 }), value: value, onChange: (val) => setValue(val.target.value) }), value ? jsx(SvgX, { className: 'input__clear-icon', onClick: handelClear, strokeWidth: 3, fontSize: 16 }) : ''] }));
 };
 
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-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.customizer-md {\n  width: 600px;\n}\n.r-sidebar.customizer-lg {\n  width: 800px;\n}\n.r-sidebar.customizer-500 {\n  width: 500px;\n}\n@media (max-width: 500px) {\n  .r-sidebar.customizer-500 {\n    width: 100vw;\n  }\n}\n.r-sidebar.customizer-600 {\n  width: 600px;\n}\n@media (max-width: 600px) {\n  .r-sidebar.customizer-600 {\n    width: 100vw;\n  }\n}\n.r-sidebar.customizer-700 {\n  width: 700px;\n}\n@media (max-width: 700px) {\n  .r-sidebar.customizer-700 {\n    width: 100vw;\n  }\n}\n.r-sidebar.customizer-800 {\n  width: 800px;\n}\n@media (max-width: 800px) {\n  .r-sidebar.customizer-800 {\n    width: 100vw;\n  }\n}\n.r-sidebar.customizer-900 {\n  width: 900px;\n}\n@media (max-width: 900px) {\n  .r-sidebar.customizer-900 {\n    width: 100vw;\n  }\n}\n.r-sidebar.customizer-1000 {\n  width: 1000px;\n}\n@media (max-width: 1000px) {\n  .r-sidebar.customizer-1000 {\n    width: 100vw;\n  }\n}\n.r-sidebar.customizer-1500 {\n  width: 1500px;\n}\n@media (max-width: 1500px) {\n  .r-sidebar.customizer-1500 {\n    width: 100vw;\n  }\n}\n.r-sidebar.fullscreen {\n  width: 100%;\n}\n.r-sidebar.open {\n  right: 0;\n}\n\n.r-table-edit .react-datepicker__year-read-view--down-arrow,\n.r-table-edit .react-datepicker__month-read-view--down-arrow,\n.r-table-edit .react-datepicker__month-year-read-view--down-arrow,\n.r-table-edit .react-datepicker__navigation-icon::before {\n  border-color: #e0e0e0;\n  border-style: solid;\n  border-width: 3px 3px 0 0;\n  content: \"\";\n  display: block;\n  height: 9px;\n  position: absolute;\n  top: 6px;\n  width: 9px;\n}\n.r-table-edit .react-datepicker-wrapper {\n  display: inline-block;\n  width: 100% !important;\n  padding: 0;\n  border: 0;\n}\n.r-table-edit .react-datepicker-wrapper .react-datepicker__input-container input {\n  height: 29px !important;\n}\n.r-table-edit .react-datepicker {\n  font-family: \"Helvetica Neue\", helvetica, arial, sans-serif;\n  font-size: 0.8rem;\n  background-color: #FFFFFF;\n  color: #000000;\n  border: 1px solid #e0e0e0;\n  border-radius: 0.3rem;\n  display: inline-block;\n  position: relative;\n  line-height: initial;\n}\n.r-table-edit .react-datepicker--time-only .react-datepicker__time-container {\n  border-left: 0;\n}\n.r-table-edit .react-datepicker--time-only .react-datepicker__time,\n.r-table-edit .react-datepicker--time-only .react-datepicker__time-box {\n  border-bottom-left-radius: 0.3rem;\n  border-bottom-right-radius: 0.3rem;\n}\n.r-table-edit .react-datepicker-popper {\n  position: relative;\n  line-height: 0;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__triangle {\n  stroke: #e0e0e0;\n}\n.r-table-edit .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {\n  fill: #f0f0f0;\n  color: #f0f0f0;\n}\n.r-table-edit .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {\n  fill: #FFFFFF;\n  color: #FFFFFF;\n}\n.r-table-edit .react-datepicker__header {\n  text-align: center;\n  background-color: #FFFFFF;\n  border-bottom: 1px solid #e0e0e0;\n  border-top-left-radius: 0.3rem;\n  padding: 8px 0;\n  position: relative;\n}\n.r-table-edit .react-datepicker__header--time {\n  padding-bottom: 8px;\n  padding-left: 5px;\n  padding-right: 5px;\n}\n.r-table-edit .react-datepicker__header--time:not(.react-datepicker__header--time--only) {\n  border-top-left-radius: 0;\n}\n.r-table-edit .react-datepicker__header:not(.react-datepicker__header--has-time-select) {\n  border-top-right-radius: 0.3rem;\n}\n.r-table-edit .react-datepicker__year-dropdown-container--select,\n.r-table-edit .react-datepicker__month-dropdown-container--select,\n.r-table-edit .react-datepicker__month-year-dropdown-container--select,\n.r-table-edit .react-datepicker__year-dropdown-container--scroll,\n.r-table-edit .react-datepicker__month-dropdown-container--scroll,\n.r-table-edit .react-datepicker__month-year-dropdown-container--scroll {\n  display: inline-block;\n  margin: 0 15px;\n}\n.r-table-edit .react-datepicker__current-month,\n.r-table-edit .react-datepicker-time__header,\n.r-table-edit .react-datepicker-year-header {\n  margin-top: 0;\n  color: #000000;\n  font-weight: bold;\n  font-size: 0.944rem;\n}\n.r-table-edit h2.react-datepicker__current-month {\n  padding: 0;\n  margin: 0;\n}\n.r-table-edit .react-datepicker-time__header {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n}\n.r-table-edit .react-datepicker__navigation {\n  align-items: center;\n  background: none;\n  display: flex;\n  justify-content: center;\n  text-align: center;\n  cursor: pointer;\n  position: absolute;\n  top: 2px;\n  padding: 0;\n  border: none;\n  z-index: 1;\n  height: 32px;\n  width: 32px;\n  text-indent: -999em;\n  overflow: hidden;\n}\n.r-table-edit .react-datepicker__navigation--previous {\n  left: 2px;\n}\n.r-table-edit .react-datepicker__navigation--next {\n  right: 2px;\n}\n.r-table-edit .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {\n  right: 85px;\n}\n.r-table-edit .react-datepicker__navigation--years {\n  position: relative;\n  top: 0;\n  display: block;\n  margin-left: auto;\n  margin-right: auto;\n}\n.r-table-edit .react-datepicker__navigation--years-previous {\n  top: 4px;\n}\n.r-table-edit .react-datepicker__navigation--years-upcoming {\n  top: -4px;\n}\n.r-table-edit .react-datepicker__navigation:hover *::before {\n  border-color: #eb4619;\n}\n.r-table-edit .react-datepicker__navigation-icon {\n  position: relative;\n  top: -1px;\n  font-size: 20px;\n  width: 0;\n}\n.r-table-edit .react-datepicker__navigation-icon--next {\n  left: -2px;\n}\n.r-table-edit .react-datepicker__navigation-icon--next::before {\n  transform: rotate(45deg);\n  left: -7px;\n}\n.r-table-edit .react-datepicker__navigation-icon--previous {\n  right: -2px;\n}\n.r-table-edit .react-datepicker__navigation-icon--previous::before {\n  transform: rotate(225deg);\n  right: -7px;\n}\n.r-table-edit .react-datepicker__month-container {\n  float: left;\n}\n.r-table-edit .react-datepicker__year {\n  margin: 0.4rem;\n  text-align: center;\n}\n.r-table-edit .react-datepicker__year-wrapper {\n  display: flex;\n  flex-wrap: wrap;\n  max-width: 180px;\n}\n.r-table-edit .react-datepicker__year .react-datepicker__year-text {\n  display: inline-block;\n  width: 4rem;\n  margin: 2px;\n}\n.r-table-edit .react-datepicker__month {\n  margin: 0.4rem;\n  text-align: center;\n}\n.r-table-edit .react-datepicker__month .react-datepicker__month-text,\n.r-table-edit .react-datepicker__month .react-datepicker__quarter-text {\n  display: inline-block;\n  width: 4rem;\n  margin: 2px;\n}\n.r-table-edit .react-datepicker__input-time-container {\n  clear: both;\n  width: 100%;\n  float: left;\n  margin: 5px 0 10px 15px;\n  text-align: left;\n}\n.r-table-edit .react-datepicker__input-time-container .react-datepicker-time__caption {\n  display: inline-block;\n}\n.r-table-edit .react-datepicker__input-time-container .react-datepicker-time__input-container {\n  display: inline-block;\n}\n.r-table-edit .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {\n  display: inline-block;\n  margin-left: 10px;\n}\n.r-table-edit .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {\n  width: auto;\n}\n.r-table-edit .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,\n.r-table-edit .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.r-table-edit .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {\n  margin-left: 5px;\n  display: inline-block;\n}\n.r-table-edit .react-datepicker__time-container {\n  float: right;\n  border-left: 1px solid #e0e0e0;\n  width: 85px;\n}\n.r-table-edit .react-datepicker__time-container--with-today-button {\n  display: inline;\n  border: 1px solid #e0e0e0;\n  border-radius: 0.3rem;\n  position: absolute;\n  right: -87px;\n  top: 0;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time {\n  position: relative;\n  background: white;\n  border-bottom-right-radius: 0.3rem;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {\n  width: 85px;\n  overflow-x: hidden;\n  margin: 0 auto;\n  text-align: center;\n  border-bottom-right-radius: 0.3rem;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {\n  list-style: none;\n  margin: 0;\n  height: calc(195px + 0.85rem);\n  overflow-y: scroll;\n  padding-right: 0;\n  padding-left: 0;\n  width: 100%;\n  box-sizing: content-box;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {\n  height: 30px;\n  padding: 5px 10px;\n  white-space: nowrap;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {\n  cursor: pointer;\n  background-color: #f0f0f0;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {\n  background-color: #216ba5;\n  color: white;\n  font-weight: bold;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {\n  background-color: #216ba5;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {\n  color: #ccc;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {\n  cursor: default;\n  background-color: transparent;\n}\n.r-table-edit .react-datepicker__week-number {\n  color: #ccc;\n  display: inline-block;\n  width: 1.7rem;\n  line-height: 1.7rem;\n  text-align: center;\n  margin: 0.166rem;\n}\n.r-table-edit .react-datepicker__week-number.react-datepicker__week-number--clickable {\n  cursor: pointer;\n}\n.r-table-edit .react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected,\n.react-datepicker__week-number--keyboard-selected):hover {\n  border-radius: 0.3rem;\n  background-color: #f0f0f0;\n}\n.r-table-edit .react-datepicker__week-number--selected {\n  border-radius: 0.3rem;\n  background-color: #216ba5;\n  color: #FFFFFF;\n}\n.r-table-edit .react-datepicker__week-number--selected:hover {\n  background-color: rgb(28.75, 93.2196969697, 143.75);\n}\n.r-table-edit .react-datepicker__week-number--keyboard-selected {\n  border-radius: 0.3rem;\n  background-color: rgb(41.5, 134.5606060606, 207.5);\n  color: #FFFFFF;\n}\n.r-table-edit .react-datepicker__week-number--keyboard-selected:hover {\n  background-color: rgb(28.75, 93.2196969697, 143.75);\n}\n.r-table-edit .react-datepicker__day-names {\n  white-space: nowrap;\n  margin-bottom: -8px;\n}\n.r-table-edit .react-datepicker__week {\n  white-space: nowrap;\n}\n.r-table-edit .react-datepicker__day-name,\n.r-table-edit .react-datepicker__day,\n.r-table-edit .react-datepicker__time-name {\n  color: #000000;\n  display: inline-block;\n  width: 1.7rem;\n  line-height: 1.7rem;\n  text-align: center;\n  margin: 0.166rem;\n}\n.r-table-edit .react-datepicker__day,\n.r-table-edit .react-datepicker__month-text,\n.r-table-edit .react-datepicker__quarter-text,\n.r-table-edit .react-datepicker__year-text {\n  cursor: pointer;\n}\n.r-table-edit .react-datepicker__day:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__month-text:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__quarter-text:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__year-text:not([aria-disabled=true]):hover {\n  border-radius: 0.3rem;\n  background-color: #FFFFFF;\n}\n.r-table-edit .react-datepicker__day--today,\n.r-table-edit .react-datepicker__month-text--today,\n.r-table-edit .react-datepicker__quarter-text--today,\n.r-table-edit .react-datepicker__year-text--today {\n  font-weight: bold;\n}\n.r-table-edit .react-datepicker__day--highlighted,\n.r-table-edit .react-datepicker__month-text--highlighted,\n.r-table-edit .react-datepicker__quarter-text--highlighted,\n.r-table-edit .react-datepicker__year-text--highlighted {\n  border-radius: 0.3rem;\n  background-color: #3dcc4a;\n  color: #FFFFFF;\n}\n.r-table-edit .react-datepicker__day--highlighted:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__month-text--highlighted:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__quarter-text--highlighted:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__year-text--highlighted:not([aria-disabled=true]):hover {\n  background-color: rgb(49.8551020408, 189.6448979592, 62.5632653061);\n}\n.r-table-edit .react-datepicker__day--highlighted-custom-1,\n.r-table-edit .react-datepicker__month-text--highlighted-custom-1,\n.r-table-edit .react-datepicker__quarter-text--highlighted-custom-1,\n.r-table-edit .react-datepicker__year-text--highlighted-custom-1 {\n  color: magenta;\n}\n.r-table-edit .react-datepicker__day--highlighted-custom-2,\n.r-table-edit .react-datepicker__month-text--highlighted-custom-2,\n.r-table-edit .react-datepicker__quarter-text--highlighted-custom-2,\n.r-table-edit .react-datepicker__year-text--highlighted-custom-2 {\n  color: green;\n}\n.r-table-edit .react-datepicker__day--holidays,\n.r-table-edit .react-datepicker__month-text--holidays,\n.r-table-edit .react-datepicker__quarter-text--holidays,\n.r-table-edit .react-datepicker__year-text--holidays {\n  position: relative;\n  border-radius: 0.3rem;\n  background-color: #ff6803;\n  color: #FFFFFF;\n}\n.r-table-edit .react-datepicker__day--holidays .overlay,\n.r-table-edit .react-datepicker__month-text--holidays .overlay,\n.r-table-edit .react-datepicker__quarter-text--holidays .overlay,\n.r-table-edit .react-datepicker__year-text--holidays .overlay {\n  position: absolute;\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: #333;\n  color: #FFFFFF;\n  padding: 4px;\n  border-radius: 4px;\n  white-space: nowrap;\n  visibility: hidden;\n  opacity: 0;\n  transition: visibility 0s, opacity 0.3s ease-in-out;\n}\n.r-table-edit .react-datepicker__day--holidays:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__month-text--holidays:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__quarter-text--holidays:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__year-text--holidays:not([aria-disabled=true]):hover {\n  background-color: rgb(207, 82.9642857143, 0);\n}\n.r-table-edit .react-datepicker__day--holidays:hover .overlay,\n.r-table-edit .react-datepicker__month-text--holidays:hover .overlay,\n.r-table-edit .react-datepicker__quarter-text--holidays:hover .overlay,\n.r-table-edit .react-datepicker__year-text--holidays:hover .overlay {\n  visibility: visible;\n  opacity: 1;\n}\n.r-table-edit .react-datepicker__day--selected,\n.r-table-edit .react-datepicker__day--in-selecting-range,\n.r-table-edit .react-datepicker__day--in-range,\n.r-table-edit .react-datepicker__month-text--selected,\n.r-table-edit .react-datepicker__month-text--in-selecting-range,\n.r-table-edit .react-datepicker__month-text--in-range,\n.r-table-edit .react-datepicker__quarter-text--selected,\n.r-table-edit .react-datepicker__quarter-text--in-selecting-range,\n.r-table-edit .react-datepicker__quarter-text--in-range,\n.r-table-edit .react-datepicker__year-text--selected,\n.r-table-edit .react-datepicker__year-text--in-selecting-range,\n.r-table-edit .react-datepicker__year-text--in-range {\n  border-radius: 0.3rem;\n  background-color: #216ba5;\n  color: #FFFFFF;\n}\n.r-table-edit .react-datepicker__day--selected:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__day--in-selecting-range:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__day--in-range:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__month-text--selected:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__month-text--in-selecting-range:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__month-text--in-range:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__quarter-text--selected:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__quarter-text--in-selecting-range:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__quarter-text--in-range:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__year-text--selected:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__year-text--in-selecting-range:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__year-text--in-range:not([aria-disabled=true]):hover {\n  background-color: rgb(28.75, 93.2196969697, 143.75);\n}\n.r-table-edit .react-datepicker__day--keyboard-selected,\n.r-table-edit .react-datepicker__month-text--keyboard-selected,\n.r-table-edit .react-datepicker__quarter-text--keyboard-selected,\n.r-table-edit .react-datepicker__year-text--keyboard-selected {\n  border-radius: 0.3rem;\n  background-color: rgb(186.25, 217.0833333333, 241.25);\n  color: rgb(0, 0, 0);\n}\n.r-table-edit .react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__month-text--keyboard-selected:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__quarter-text--keyboard-selected:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__year-text--keyboard-selected:not([aria-disabled=true]):hover {\n  background-color: rgb(28.75, 93.2196969697, 143.75);\n}\n.r-table-edit .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,\n.react-datepicker__month-text--in-range,\n.react-datepicker__quarter-text--in-range,\n.react-datepicker__year-text--in-range),\n.r-table-edit .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,\n.react-datepicker__month-text--in-range,\n.react-datepicker__quarter-text--in-range,\n.react-datepicker__year-text--in-range),\n.r-table-edit .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,\n.react-datepicker__month-text--in-range,\n.react-datepicker__quarter-text--in-range,\n.react-datepicker__year-text--in-range),\n.r-table-edit .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,\n.react-datepicker__month-text--in-range,\n.react-datepicker__quarter-text--in-range,\n.react-datepicker__year-text--in-range) {\n  background-color: rgba(33, 107, 165, 0.5);\n}\n.r-table-edit .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.r-table-edit .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.r-table-edit .react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.r-table-edit .react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.r-table-edit .react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.r-table-edit .react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.r-table-edit .react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.r-table-edit .react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range) {\n  background-color: #f0f0f0;\n  color: #000000;\n}\n.r-table-edit .react-datepicker__day--disabled,\n.r-table-edit .react-datepicker__month-text--disabled,\n.r-table-edit .react-datepicker__quarter-text--disabled,\n.r-table-edit .react-datepicker__year-text--disabled {\n  cursor: default;\n  color: #ccc;\n}\n.r-table-edit .react-datepicker__day--disabled .overlay,\n.r-table-edit .react-datepicker__month-text--disabled .overlay,\n.r-table-edit .react-datepicker__quarter-text--disabled .overlay,\n.r-table-edit .react-datepicker__year-text--disabled .overlay {\n  position: absolute;\n  bottom: 70%;\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: #333;\n  color: #FFFFFF;\n  padding: 4px;\n  border-radius: 4px;\n  white-space: nowrap;\n  visibility: hidden;\n  opacity: 0;\n  transition: visibility 0s, opacity 0.3s ease-in-out;\n}\n.r-table-edit .react-datepicker__input-container {\n  position: relative;\n  display: inline-block;\n  width: 100%;\n}\n.r-table-edit .react-datepicker__input-container .react-datepicker__calendar-icon {\n  position: absolute;\n  padding: 0.5rem;\n  box-sizing: content-box;\n}\n.r-table-edit .react-datepicker__view-calendar-icon input {\n  padding: 6px 10px 5px 25px;\n}\n.r-table-edit .react-datepicker__year-read-view,\n.r-table-edit .react-datepicker__month-read-view,\n.r-table-edit .react-datepicker__month-year-read-view {\n  border: 1px solid transparent;\n  border-radius: 0.3rem;\n  position: relative;\n}\n.r-table-edit .react-datepicker__year-read-view:hover,\n.r-table-edit .react-datepicker__month-read-view:hover,\n.r-table-edit .react-datepicker__month-year-read-view:hover {\n  cursor: pointer;\n}\n.r-table-edit .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,\n.r-table-edit .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,\n.r-table-edit .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,\n.r-table-edit .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,\n.r-table-edit .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,\n.r-table-edit .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {\n  border-top-color: rgb(178.5, 178.5, 178.5);\n}\n.r-table-edit .react-datepicker__year-read-view--down-arrow,\n.r-table-edit .react-datepicker__month-read-view--down-arrow,\n.r-table-edit .react-datepicker__month-year-read-view--down-arrow {\n  transform: rotate(135deg);\n  right: -16px;\n  top: 0;\n}\n.r-table-edit .react-datepicker__year-dropdown,\n.r-table-edit .react-datepicker__month-dropdown,\n.r-table-edit .react-datepicker__month-year-dropdown {\n  background-color: #f0f0f0;\n  position: absolute;\n  width: 50%;\n  left: 25%;\n  top: 30px;\n  z-index: 1;\n  text-align: center;\n  border-radius: 0.3rem;\n  border: 1px solid #e0e0e0;\n}\n.r-table-edit .react-datepicker__year-dropdown:hover,\n.r-table-edit .react-datepicker__month-dropdown:hover,\n.r-table-edit .react-datepicker__month-year-dropdown:hover {\n  cursor: pointer;\n}\n.r-table-edit .react-datepicker__year-dropdown--scrollable,\n.r-table-edit .react-datepicker__month-dropdown--scrollable,\n.r-table-edit .react-datepicker__month-year-dropdown--scrollable {\n  height: 150px;\n  overflow-y: scroll;\n}\n.r-table-edit .react-datepicker__year-option,\n.r-table-edit .react-datepicker__month-option,\n.r-table-edit .react-datepicker__month-year-option {\n  line-height: 20px;\n  width: 100%;\n  display: block;\n  margin-left: auto;\n  margin-right: auto;\n}\n.r-table-edit .react-datepicker__year-option:first-of-type,\n.r-table-edit .react-datepicker__month-option:first-of-type,\n.r-table-edit .react-datepicker__month-year-option:first-of-type {\n  border-top-left-radius: 0.3rem;\n  border-top-right-radius: 0.3rem;\n}\n.r-table-edit .react-datepicker__year-option:last-of-type,\n.r-table-edit .react-datepicker__month-option:last-of-type,\n.r-table-edit .react-datepicker__month-year-option:last-of-type {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  border-bottom-left-radius: 0.3rem;\n  border-bottom-right-radius: 0.3rem;\n}\n.r-table-edit .react-datepicker__year-option:hover,\n.r-table-edit .react-datepicker__month-option:hover,\n.r-table-edit .react-datepicker__month-year-option:hover {\n  background-color: #ccc;\n}\n.r-table-edit .react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,\n.r-table-edit .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,\n.r-table-edit .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {\n  border-bottom-color: rgb(178.5, 178.5, 178.5);\n}\n.r-table-edit .react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,\n.r-table-edit .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,\n.r-table-edit .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {\n  border-top-color: rgb(178.5, 178.5, 178.5);\n}\n.r-table-edit .react-datepicker__year-option--selected,\n.r-table-edit .react-datepicker__month-option--selected,\n.r-table-edit .react-datepicker__month-year-option--selected {\n  position: absolute;\n  left: 15px;\n}\n.r-table-edit .react-datepicker__close-icon {\n  cursor: pointer;\n  background-color: transparent;\n  border: 0;\n  outline: 0;\n  padding: 0 6px 0 0;\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 100%;\n  display: table-cell;\n  vertical-align: middle;\n}\n.r-table-edit .react-datepicker__close-icon::after {\n  cursor: pointer;\n  background-color: transparent;\n  color: #c4c4c4;\n  height: 16px;\n  width: 16px;\n  padding: 0px 2px;\n  font-size: 25px;\n  font-weight: 500;\n  line-height: 0.5;\n  text-align: center;\n  display: table-cell;\n  vertical-align: middle;\n  content: \"×\";\n}\n.r-table-edit .react-datepicker__close-icon:hover::after {\n  color: rgba(0, 0, 0, 0.8705882353) !important;\n}\n.r-table-edit .react-datepicker__close-icon--disabled {\n  cursor: default;\n}\n.r-table-edit .react-datepicker__close-icon--disabled::after {\n  cursor: default;\n  background-color: #ccc;\n}\n.r-table-edit .react-datepicker__today-button {\n  background: #f0f0f0;\n  border-top: 1px solid #e0e0e0;\n  cursor: pointer;\n  text-align: center;\n  font-weight: bold;\n  padding: 5px 0;\n  clear: left;\n}\n.r-table-edit .react-datepicker__portal {\n  position: fixed;\n  width: 100vw;\n  height: 100vh;\n  background-color: rgba(0, 0, 0, 0.8);\n  left: 0;\n  top: 0;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  z-index: 2147483647;\n}\n.r-table-edit .react-datepicker__portal .react-datepicker__day-name,\n.r-table-edit .react-datepicker__portal .react-datepicker__day,\n.r-table-edit .react-datepicker__portal .react-datepicker__time-name {\n  width: 3rem;\n  line-height: 3rem;\n}\n@media (max-width: 400px), (max-height: 550px) {\n  .r-table-edit .react-datepicker__portal .react-datepicker__day-name,\n  .r-table-edit .react-datepicker__portal .react-datepicker__day,\n  .r-table-edit .react-datepicker__portal .react-datepicker__time-name {\n    width: 2rem;\n    line-height: 2rem;\n  }\n}\n.r-table-edit .react-datepicker__portal .react-datepicker__current-month,\n.r-table-edit .react-datepicker__portal .react-datepicker-time__header {\n  font-size: 1.44rem;\n}\n.r-table-edit .react-datepicker__children-container {\n  width: 13.8rem;\n  margin: 0.4rem;\n  padding-right: 0.2rem;\n  padding-left: 0.2rem;\n  height: auto;\n}\n.r-table-edit .react-datepicker__aria-live {\n  position: absolute;\n  clip-path: circle(0);\n  border: 0;\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  width: 1px;\n  white-space: nowrap;\n}\n.r-table-edit .react-datepicker__calendar-icon {\n  width: 1em;\n  height: 1em;\n  vertical-align: -0.125em;\n}\n.r-table-edit .react-datepicker-popper {\n  z-index: 999 !important;\n  position: fixed !important;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__current-month {\n  color: rgba(0, 0, 0, 0.9) !important;\n  font-weight: 500 !important;\n  display: none;\n  font-family: Montserrat, Helvetica, Arial, serif !important;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown {\n  font-family: Montserrat, Helvetica, Arial, serif !important;\n  /* Giao diện của menu dropdown (tháng và năm) */\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown .react-datepicker__month-dropdown-container {\n  margin: 0px 3px 0px 0px;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown .react-datepicker__year-dropdown-container {\n  margin: 0px 0px 0px 3px;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown .react-datepicker__month-select:focus,\n.r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown .react-datepicker__year-select:focus {\n  border: 1px solid #1989fa !important;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown .react-datepicker__month-select,\n.r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown .react-datepicker__year-select {\n  background-color: #FFFFFF;\n  height: 22px;\n  border-radius: 2px;\n  padding: 2px 0;\n  border: 1px solid hsl(0, 0%, 80%);\n  outline: none;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__navigation {\n  margin-top: 4px;\n  color: #eb4619;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__day-name {\n  font-family: Montserrat, Helvetica, Arial, serif !important;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__day {\n  outline: none;\n  border-radius: 20px !important;\n  font-family: Montserrat, Helvetica, Arial, serif !important;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__day:hover {\n  background-color: rgba(235, 70, 25, 0.1) !important;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__day--today {\n  color: #eb4619;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__day--today.react-datepicker__day--selected {\n  color: #FFFFFF;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__day--today.react-datepicker__day--keyboard-selected {\n  background-color: rgba(235, 70, 25, 0.1);\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__day--selected {\n  background-color: #eb4619 !important;\n}\n\n.tab-custom {\n  font-family: Roboto, \"Segoe UI\", GeezaPro, \"DejaVu Serif\", \"sans-serif\", -apple-system, BlinkMacSystemFont;\n  display: flex;\n}\n.tab-custom.tab-parent {\n  border-bottom: solid 1px #c9c9c9;\n}\n.tab-custom .btn-scroll {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n}\n.tab-custom .tab-component::-webkit-scrollbar {\n  display: none;\n  /* Ẩn thanh cuộn nếu không cần */\n}\n.tab-custom .tab-component {\n  white-space: nowrap;\n  overflow-x: hidden;\n  scroll-behavior: smooth;\n}\n.tab-custom .tab-component > * {\n  display: inline-block;\n}\n.tab-custom .tab-component .tab-custom-item {\n  display: inline-block;\n  padding: 3px 10px;\n  line-height: 23px;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n  text-transform: uppercase;\n  height: 30px;\n  color: rgba(0, 0, 0, 0.5);\n}\n.tab-custom .tab-component .tab-custom-item.active {\n  border-bottom: solid 2px #eb4619 !important;\n  color: #eb4619;\n}\n.tab-custom.tab-child .tab-custom-item {\n  font-size: 12px !important;\n  line-height: 23px !important;\n  border-radius: 5px 5px 0px 0px;\n  margin: 8px 3px 0px 3px;\n  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;\n}\n\n.bs-stepper {\n  background-color: #FFFFFF;\n  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);\n  border-radius: 0.5rem;\n}\n.bs-stepper .bs-stepper-header {\n  padding: 1.5rem 1.5rem;\n  flex-wrap: wrap;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n  margin: 0;\n}\n.bs-stepper .bs-stepper-header .line {\n  flex: 0;\n  min-width: auto;\n  min-height: auto;\n  background-color: transparent;\n  margin: 0;\n  padding: 0 1.75rem;\n  color: #283046;\n  font-size: 1.5rem;\n}\n.bs-stepper .bs-stepper-header .step {\n  margin-bottom: 0.25rem;\n  margin-top: 0.25rem;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger {\n  flex-wrap: nowrap;\n  padding: 0;\n  font-weight: normal;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-box {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 38px;\n  height: 38px;\n  padding: 0.5em 0;\n  font-weight: 500;\n  color: #babfc7;\n  background-color: rgba(186, 191, 199, 0.12);\n  border-radius: 0.35rem;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-label {\n  text-align: left;\n  margin: 0;\n  margin-top: 0.5rem;\n  margin-left: 1rem;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-label .bs-stepper-title {\n  display: inherit;\n  color: #283046;\n  font-weight: 600;\n  line-height: 1rem;\n  margin-bottom: 0rem;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-label .bs-stepper-subtitle {\n  font-weight: 400;\n  font-size: 0.85rem;\n  color: #b9b9c3;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger:hover {\n  background-color: transparent;\n}\n.bs-stepper .bs-stepper-header .step.active .step-trigger .bs-stepper-box {\n  background-color: #eb4619;\n  color: #FFFFFF;\n  box-shadow: 0 3px 6px 0 rgba(235, 70, 25, 0.4);\n}\n.bs-stepper .bs-stepper-header .step.active .step-trigger .bs-stepper-label .bs-stepper-title {\n  color: #eb4619;\n}\n.bs-stepper .bs-stepper-header .step.crossed .step-trigger .bs-stepper-box {\n  background-color: rgba(235, 70, 25, 0.12);\n  color: #eb4619;\n}\n.bs-stepper .bs-stepper-header .step.crossed .step-trigger .bs-stepper-label .bs-stepper-title {\n  color: #b9b9c3;\n}\n.bs-stepper .bs-stepper-header .step.crossed + .line {\n  color: #eb4619;\n}\n.bs-stepper .bs-stepper-content {\n  padding: 1.5rem 1.5rem;\n}\n.bs-stepper .bs-stepper-content .content {\n  margin-left: 0;\n}\n.bs-stepper .bs-stepper-content .content .content-header {\n  margin-bottom: 1rem;\n}\n.bs-stepper.vertical .bs-stepper-header {\n  border-right: 1px solid #e0e0e0;\n  border-bottom: none;\n}\n.bs-stepper.vertical .bs-stepper-header .step .step-trigger {\n  padding: 1rem 0;\n}\n.bs-stepper.vertical .bs-stepper-header .line {\n  display: none;\n}\n.bs-stepper.vertical .bs-stepper-content {\n  width: 100%;\n  padding-top: 2.5rem;\n}\n.bs-stepper.vertical .bs-stepper-content .content:not(.active) {\n  display: none;\n}\n.bs-stepper.vertical.wizard-icons .step {\n  text-align: center;\n}\n.bs-stepper.wizard-modern {\n  background-color: transparent;\n  box-shadow: none;\n}\n.bs-stepper.wizard-modern .bs-stepper-header {\n  border: none;\n}\n.bs-stepper.wizard-modern .bs-stepper-content {\n  background-color: #FFFFFF;\n  border-radius: 0.5rem;\n  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);\n}\n\n.horizontal-wizard,\n.vertical-wizard,\n.modern-horizontal-wizard,\n.modern-vertical-wizard {\n  margin-bottom: 2.2rem;\n}\n\nhtml[data-textdirection=rtl] .btn-prev,\nhtml[data-textdirection=rtl] .btn-next {\n  display: flex;\n}\nhtml[data-textdirection=rtl] .btn-prev i,\nhtml[data-textdirection=rtl] .btn-prev svg,\nhtml[data-textdirection=rtl] .btn-next i,\nhtml[data-textdirection=rtl] .btn-next svg {\n  transform: rotate(-180deg);\n}\n\n@media (max-width: 992px) {\n  .bs-stepper .bs-stepper-header {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n  .bs-stepper .bs-stepper-header .step .step-trigger {\n    padding: 0.5rem 0 !important;\n    flex-direction: row;\n  }\n  .bs-stepper .bs-stepper-header .line {\n    display: none;\n  }\n  .bs-stepper.vertical {\n    flex-direction: column;\n  }\n  .bs-stepper.vertical .bs-stepper-header {\n    align-items: flex-start;\n  }\n  .bs-stepper.vertical .bs-stepper-content {\n    padding-top: 1.5rem;\n  }\n}\n.r-table-edit .r-grid {\n  font-size: 12px;\n}\n.r-table-edit .r-grid .r-search {\n  display: flex;\n  position: relative;\n  align-items: center;\n}\n.r-table-edit .r-grid .r-search .input__value {\n  z-index: 1;\n}\n.r-table-edit .r-grid .r-search .input__value.is-clearable {\n  padding-right: 25px;\n}\n.r-table-edit .r-grid .r-search .input__clear-icon {\n  position: absolute;\n  right: 5px;\n  z-index: 10;\n}\n.r-table-edit .r-grid .r-gridtable {\n  -webkit-overflow-scrolling: touch;\n  overflow-x: auto;\n  overflow-y: scroll;\n  position: relative;\n  background-color: #FFFFFF;\n  color: rgba(0, 0, 0, 0.8705882353);\n  font-weight: 400;\n  border: 1px solid #e0e0e0;\n  /* Toàn bộ thanh cuộn */\n  /* Nền của thanh cuộn */\n  /* Thanh trượt (thumb) */\n  /* Khi hover */\n}\n.r-table-edit .r-grid .r-gridtable table {\n  table-layout: fixed;\n  border-collapse: separate;\n  border-spacing: 0px;\n}\n.r-table-edit .r-grid .r-gridtable::-webkit-scrollbar {\n  width: 9px;\n  /* Độ rộng của thanh cuộn */\n  height: 9px;\n  /* Độ cao của thanh cuộn */\n}\n.r-table-edit .r-grid .r-gridtable::-webkit-scrollbar-track {\n  background: #FCFCFC;\n  /* Màu nền nhạt */\n}\n.r-table-edit .r-grid .r-gridtable::-webkit-scrollbar-thumb {\n  background: #8B8B8B;\n  /* Màu xám nhạt */\n  border-radius: 6px;\n  /* Bo góc giống Edge */\n}\n.r-table-edit .r-grid .r-gridtable::-webkit-scrollbar-thumb:hover {\n  background: #636363;\n  /* Màu đậm hơn khi hover */\n}\n.r-table-edit .r-grid .r-gridtable .react-resizable-handle.react-resizable-handle-se {\n  position: absolute;\n  right: 0px;\n  top: 0px;\n  width: 10px;\n  height: 100%;\n  cursor: col-resize;\n  background-image: none;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter svg.active {\n  color: #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter-popup .react-select-table .select-value {\n  line-height: 20px !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter-popup .react-select-table .select-placeholder {\n  line-height: 20px !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter-popup .react-select-table .r-select-is-focus {\n  border-color: #eb4619 !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter-popup .form-control:focus {\n  border-color: #eb4619 !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-no-data {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  padding: 20px 9px;\n  color: #8f8f8f;\n}\n.r-table-edit .r-grid .r-gridtable .r-loading-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(255, 255, 255, 0.3);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 3;\n}\n.r-table-edit .r-grid .r-gridtable .r-loading-overlay .r-loading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  padding: 7px 9px;\n  color: #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed {\n  z-index: 2 !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed.fix-right .r-headercell-div {\n  border-left: 1px solid #e0e0e0;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed.fix-left .r-headercell-div {\n  border-right: 1px solid #e0e0e0;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed.fix-left.fixed-last .r-headercell-div {\n  box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed.fix-right.fixed-last .r-headercell-div {\n  box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .r-headercell {\n  color: rgba(0, 0, 0, 0.8705882353);\n  position: sticky;\n  padding: 0px;\n  height: 42px;\n  z-index: 1;\n  border-width: 0px;\n  line-height: 16px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .r-headercell .r-headercell-div {\n  border-right: 1px solid #e0e0e0;\n  border-bottom: 1px solid #e0e0e0;\n  background-color: #FFFFFF;\n  display: flex;\n  align-items: center;\n  text-align: center;\n  padding: 5px 10px;\n  height: 100%;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .r-headercell .header-content {\n  display: flex;\n  flex: 1 1 0%;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .r-headercell .header-content .text-content {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row:first-of-type .r-rowcell-div {\n  border-top-color: #FFFFFF;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row {\n  font-size: 13px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .cell-fixed {\n  position: sticky;\n  z-index: 1;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell {\n  background-color: #FFFFFF;\n  border-bottom: 1px solid #e0e0e0;\n  border-right: 1px solid #e0e0e0;\n  vertical-align: middle;\n  padding: 0;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.fix-right {\n  border-left: 1px solid #e0e0e0;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.fix-right.fixed-last {\n  border-left: 1px solid #e0e0e0;\n  box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.fix-left.fixed-last {\n  border-right: 1px solid #e0e0e0;\n  box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.r-active-row {\n  background-color: #fce6df;\n  border-right: 2px solid #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div {\n  margin: 0px;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  user-select: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\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 .r-rowcell-content: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-rowcell-content {\n  min-height: 28px !important;\n  border: 1px solid transparent;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-rowcell-content.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-rowcell-content.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-rowcell-content .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-rowcell-content .r-drop-icon {\n  fill: #c4c4c4 !important;\n  position: absolute;\n  right: 8.5px;\n  top: 5px;\n  pointer-events: none;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-rowcell-content .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-rowcell-content .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-rowcell-content .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  user-select: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-rowcell-content .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-rowcell-content .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-rowcell-content.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-rowcell-content.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-rowcell-content.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-rowcell-content.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-rowcell-content .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 .r-rowcell-content .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 .r-rowcell-content .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 .r-rowcell-content .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 .r-rowcell-content .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 .r-rowcell-content .form-edit .display-value.r-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 .r-rowcell-content .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 .r-rowcell-content .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 .r-rowcell-content .form-edit .form-input-content .form-control:focus {\n  border: none;\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 .r-rowcell-content .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 .r-rowcell-content .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 .r-rowcell-content .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 .r-rowcell-content .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 .r-rowcell-content .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 .r-rowcell-content .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 .r-rowcell-content .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-rowcell-content .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 .r-rowcell-content .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 .r-rowcell-content input {\n  font-size: 13px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridfoot {\n  color: #283046;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridfoot .r-row {\n  bottom: 0px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridfoot .r-row .r-footer {\n  background-color: #fafafa;\n  font-size: 14px;\n  font-weight: 600;\n  width: 100px;\n  position: sticky;\n  z-index: 1;\n  bottom: 0;\n  border-width: 0px;\n  padding: 0px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridfoot .r-row .r-footer.cell-fixed {\n  z-index: 2;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridfoot .r-row .r-footer .r-footer-div {\n  height: 30px;\n  padding: 5px 7px;\n}\n.r-table-edit .r-grid .r-gridtable .formula-dropdown {\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 15px;\n}\n.r-table-edit .r-grid .text-left .form-label {\n  text-align: left;\n}\n.r-table-edit .r-grid .r-toolbar {\n  border: 1px solid #e0e0e0;\n  height: 44px;\n}\n.r-table-edit .r-grid .r-toolbar.r-toolbar-bottom {\n  border-top-width: 0px;\n}\n.r-table-edit .r-grid .r-toolbar.r-toolbar-top {\n  border-bottom-width: 0px;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-left {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-left .r-toolbar-item {\n  margin: 7px 0px 7px 7px;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-center {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-center .r-toolbar-item {\n  margin: 7px 3px 7px 3px;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-right {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-right .r-toolbar-item {\n  margin: 7px 7px 7px 0px;\n}\n.r-table-edit.r-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 RenderToolbarTop = ({ toolbarTopOption }) => {
     return (jsx("div", { id: "table_custom_top_toolbar", className: "r-toolbar r-toolbar-top", "aria-orientation": "horizontal", children: jsxs("div", { className: "r-toolbar-items", children: [jsx("div", { className: "r-toolbar-left", children: toolbarTopOption?.map((item, index) => {
                         return ((item.align === 'left') ? jsx(Fragment$1, { children: jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-left-${index}`) }) : '');
@@ -40689,14 +40659,14 @@ const RenderEditCellComponent = (props) => {
 
 const CellContentComponent = React__default.memo((props) => {
     const { col, row, indexRow, indexCol, idTable, gridRef, editDisable, formatSetting, displayValue, typeDis, content, handleMouseDown, handleKeyDown, focusEditElementCell, handleDataChange } = props;
-    return (jsx(Fragment$1, { children: typeDis === 'edit' ? jsx(RenderEditCellComponent, { idTable: idTable, col: col, handleKeyDown: handleKeyDown, handleDataChange: handleDataChange, indexCol: indexCol, indexRow: indexRow, row: row, editDisable: editDisable, formatSetting: formatSetting, gridRef: gridRef }) : jsxs(Fragment$1, { children: [jsx("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 (jsx(Fragment$1, { children: typeDis === 'edit' ? jsx(RenderEditCellComponent, { idTable: idTable, col: col, handleKeyDown: handleKeyDown, handleDataChange: handleDataChange, indexCol: indexCol, indexRow: indexRow, row: row, editDisable: editDisable, formatSetting: formatSetting, gridRef: gridRef }) : jsxs(Fragment$1, { children: [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 }), !!content && (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 && jsx("div", { className: "r-drop-icon", onClick: (e) => focusEditElementCell(e, indexRow, indexCol), children: jsx("svg", { height: "20", width: "20", viewBox: "0 0 20 20", children: 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 && (jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}-col${indexCol}`, children: displayValue }))] }) }));
 });
 
 const IconCustom = (props) => {
@@ -40724,6 +40694,36 @@ const CommandElement = (props) => {
             }) }) }));
 };
 
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+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.customizer-md {\n  width: 600px;\n}\n.r-sidebar.customizer-lg {\n  width: 800px;\n}\n.r-sidebar.customizer-500 {\n  width: 500px;\n}\n@media (max-width: 500px) {\n  .r-sidebar.customizer-500 {\n    width: 100vw;\n  }\n}\n.r-sidebar.customizer-600 {\n  width: 600px;\n}\n@media (max-width: 600px) {\n  .r-sidebar.customizer-600 {\n    width: 100vw;\n  }\n}\n.r-sidebar.customizer-700 {\n  width: 700px;\n}\n@media (max-width: 700px) {\n  .r-sidebar.customizer-700 {\n    width: 100vw;\n  }\n}\n.r-sidebar.customizer-800 {\n  width: 800px;\n}\n@media (max-width: 800px) {\n  .r-sidebar.customizer-800 {\n    width: 100vw;\n  }\n}\n.r-sidebar.customizer-900 {\n  width: 900px;\n}\n@media (max-width: 900px) {\n  .r-sidebar.customizer-900 {\n    width: 100vw;\n  }\n}\n.r-sidebar.customizer-1000 {\n  width: 1000px;\n}\n@media (max-width: 1000px) {\n  .r-sidebar.customizer-1000 {\n    width: 100vw;\n  }\n}\n.r-sidebar.customizer-1500 {\n  width: 1500px;\n}\n@media (max-width: 1500px) {\n  .r-sidebar.customizer-1500 {\n    width: 100vw;\n  }\n}\n.r-sidebar.fullscreen {\n  width: 100%;\n}\n.r-sidebar.open {\n  right: 0;\n}\n\n.r-table-edit .react-datepicker__year-read-view--down-arrow,\n.r-table-edit .react-datepicker__month-read-view--down-arrow,\n.r-table-edit .react-datepicker__month-year-read-view--down-arrow,\n.r-table-edit .react-datepicker__navigation-icon::before {\n  border-color: #e0e0e0;\n  border-style: solid;\n  border-width: 3px 3px 0 0;\n  content: \"\";\n  display: block;\n  height: 9px;\n  position: absolute;\n  top: 6px;\n  width: 9px;\n}\n.r-table-edit .react-datepicker-wrapper {\n  display: inline-block;\n  width: 100% !important;\n  padding: 0;\n  border: 0;\n}\n.r-table-edit .react-datepicker-wrapper .react-datepicker__input-container input {\n  height: 29px !important;\n}\n.r-table-edit .react-datepicker {\n  font-family: \"Helvetica Neue\", helvetica, arial, sans-serif;\n  font-size: 0.8rem;\n  background-color: #FFFFFF;\n  color: #000000;\n  border: 1px solid #e0e0e0;\n  border-radius: 0.3rem;\n  display: inline-block;\n  position: relative;\n  line-height: initial;\n}\n.r-table-edit .react-datepicker--time-only .react-datepicker__time-container {\n  border-left: 0;\n}\n.r-table-edit .react-datepicker--time-only .react-datepicker__time,\n.r-table-edit .react-datepicker--time-only .react-datepicker__time-box {\n  border-bottom-left-radius: 0.3rem;\n  border-bottom-right-radius: 0.3rem;\n}\n.r-table-edit .react-datepicker-popper {\n  position: relative;\n  line-height: 0;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__triangle {\n  stroke: #e0e0e0;\n}\n.r-table-edit .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {\n  fill: #f0f0f0;\n  color: #f0f0f0;\n}\n.r-table-edit .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {\n  fill: #FFFFFF;\n  color: #FFFFFF;\n}\n.r-table-edit .react-datepicker__header {\n  text-align: center;\n  background-color: #FFFFFF;\n  border-bottom: 1px solid #e0e0e0;\n  border-top-left-radius: 0.3rem;\n  padding: 8px 0;\n  position: relative;\n}\n.r-table-edit .react-datepicker__header--time {\n  padding-bottom: 8px;\n  padding-left: 5px;\n  padding-right: 5px;\n}\n.r-table-edit .react-datepicker__header--time:not(.react-datepicker__header--time--only) {\n  border-top-left-radius: 0;\n}\n.r-table-edit .react-datepicker__header:not(.react-datepicker__header--has-time-select) {\n  border-top-right-radius: 0.3rem;\n}\n.r-table-edit .react-datepicker__year-dropdown-container--select,\n.r-table-edit .react-datepicker__month-dropdown-container--select,\n.r-table-edit .react-datepicker__month-year-dropdown-container--select,\n.r-table-edit .react-datepicker__year-dropdown-container--scroll,\n.r-table-edit .react-datepicker__month-dropdown-container--scroll,\n.r-table-edit .react-datepicker__month-year-dropdown-container--scroll {\n  display: inline-block;\n  margin: 0 15px;\n}\n.r-table-edit .react-datepicker__current-month,\n.r-table-edit .react-datepicker-time__header,\n.r-table-edit .react-datepicker-year-header {\n  margin-top: 0;\n  color: #000000;\n  font-weight: bold;\n  font-size: 0.944rem;\n}\n.r-table-edit h2.react-datepicker__current-month {\n  padding: 0;\n  margin: 0;\n}\n.r-table-edit .react-datepicker-time__header {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n}\n.r-table-edit .react-datepicker__navigation {\n  align-items: center;\n  background: none;\n  display: flex;\n  justify-content: center;\n  text-align: center;\n  cursor: pointer;\n  position: absolute;\n  top: 2px;\n  padding: 0;\n  border: none;\n  z-index: 1;\n  height: 32px;\n  width: 32px;\n  text-indent: -999em;\n  overflow: hidden;\n}\n.r-table-edit .react-datepicker__navigation--previous {\n  left: 2px;\n}\n.r-table-edit .react-datepicker__navigation--next {\n  right: 2px;\n}\n.r-table-edit .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {\n  right: 85px;\n}\n.r-table-edit .react-datepicker__navigation--years {\n  position: relative;\n  top: 0;\n  display: block;\n  margin-left: auto;\n  margin-right: auto;\n}\n.r-table-edit .react-datepicker__navigation--years-previous {\n  top: 4px;\n}\n.r-table-edit .react-datepicker__navigation--years-upcoming {\n  top: -4px;\n}\n.r-table-edit .react-datepicker__navigation:hover *::before {\n  border-color: #eb4619;\n}\n.r-table-edit .react-datepicker__navigation-icon {\n  position: relative;\n  top: -1px;\n  font-size: 20px;\n  width: 0;\n}\n.r-table-edit .react-datepicker__navigation-icon--next {\n  left: -2px;\n}\n.r-table-edit .react-datepicker__navigation-icon--next::before {\n  transform: rotate(45deg);\n  left: -7px;\n}\n.r-table-edit .react-datepicker__navigation-icon--previous {\n  right: -2px;\n}\n.r-table-edit .react-datepicker__navigation-icon--previous::before {\n  transform: rotate(225deg);\n  right: -7px;\n}\n.r-table-edit .react-datepicker__month-container {\n  float: left;\n}\n.r-table-edit .react-datepicker__year {\n  margin: 0.4rem;\n  text-align: center;\n}\n.r-table-edit .react-datepicker__year-wrapper {\n  display: flex;\n  flex-wrap: wrap;\n  max-width: 180px;\n}\n.r-table-edit .react-datepicker__year .react-datepicker__year-text {\n  display: inline-block;\n  width: 4rem;\n  margin: 2px;\n}\n.r-table-edit .react-datepicker__month {\n  margin: 0.4rem;\n  text-align: center;\n}\n.r-table-edit .react-datepicker__month .react-datepicker__month-text,\n.r-table-edit .react-datepicker__month .react-datepicker__quarter-text {\n  display: inline-block;\n  width: 4rem;\n  margin: 2px;\n}\n.r-table-edit .react-datepicker__input-time-container {\n  clear: both;\n  width: 100%;\n  float: left;\n  margin: 5px 0 10px 15px;\n  text-align: left;\n}\n.r-table-edit .react-datepicker__input-time-container .react-datepicker-time__caption {\n  display: inline-block;\n}\n.r-table-edit .react-datepicker__input-time-container .react-datepicker-time__input-container {\n  display: inline-block;\n}\n.r-table-edit .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {\n  display: inline-block;\n  margin-left: 10px;\n}\n.r-table-edit .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {\n  width: auto;\n}\n.r-table-edit .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,\n.r-table-edit .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.r-table-edit .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {\n  margin-left: 5px;\n  display: inline-block;\n}\n.r-table-edit .react-datepicker__time-container {\n  float: right;\n  border-left: 1px solid #e0e0e0;\n  width: 85px;\n}\n.r-table-edit .react-datepicker__time-container--with-today-button {\n  display: inline;\n  border: 1px solid #e0e0e0;\n  border-radius: 0.3rem;\n  position: absolute;\n  right: -87px;\n  top: 0;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time {\n  position: relative;\n  background: white;\n  border-bottom-right-radius: 0.3rem;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {\n  width: 85px;\n  overflow-x: hidden;\n  margin: 0 auto;\n  text-align: center;\n  border-bottom-right-radius: 0.3rem;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {\n  list-style: none;\n  margin: 0;\n  height: calc(195px + 0.85rem);\n  overflow-y: scroll;\n  padding-right: 0;\n  padding-left: 0;\n  width: 100%;\n  box-sizing: content-box;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {\n  height: 30px;\n  padding: 5px 10px;\n  white-space: nowrap;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {\n  cursor: pointer;\n  background-color: #f0f0f0;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {\n  background-color: #216ba5;\n  color: white;\n  font-weight: bold;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {\n  background-color: #216ba5;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {\n  color: #ccc;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {\n  cursor: default;\n  background-color: transparent;\n}\n.r-table-edit .react-datepicker__week-number {\n  color: #ccc;\n  display: inline-block;\n  width: 1.7rem;\n  line-height: 1.7rem;\n  text-align: center;\n  margin: 0.166rem;\n}\n.r-table-edit .react-datepicker__week-number.react-datepicker__week-number--clickable {\n  cursor: pointer;\n}\n.r-table-edit .react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected,\n.react-datepicker__week-number--keyboard-selected):hover {\n  border-radius: 0.3rem;\n  background-color: #f0f0f0;\n}\n.r-table-edit .react-datepicker__week-number--selected {\n  border-radius: 0.3rem;\n  background-color: #216ba5;\n  color: #FFFFFF;\n}\n.r-table-edit .react-datepicker__week-number--selected:hover {\n  background-color: rgb(28.75, 93.2196969697, 143.75);\n}\n.r-table-edit .react-datepicker__week-number--keyboard-selected {\n  border-radius: 0.3rem;\n  background-color: rgb(41.5, 134.5606060606, 207.5);\n  color: #FFFFFF;\n}\n.r-table-edit .react-datepicker__week-number--keyboard-selected:hover {\n  background-color: rgb(28.75, 93.2196969697, 143.75);\n}\n.r-table-edit .react-datepicker__day-names {\n  white-space: nowrap;\n  margin-bottom: -8px;\n}\n.r-table-edit .react-datepicker__week {\n  white-space: nowrap;\n}\n.r-table-edit .react-datepicker__day-name,\n.r-table-edit .react-datepicker__day,\n.r-table-edit .react-datepicker__time-name {\n  color: #000000;\n  display: inline-block;\n  width: 1.7rem;\n  line-height: 1.7rem;\n  text-align: center;\n  margin: 0.166rem;\n}\n.r-table-edit .react-datepicker__day,\n.r-table-edit .react-datepicker__month-text,\n.r-table-edit .react-datepicker__quarter-text,\n.r-table-edit .react-datepicker__year-text {\n  cursor: pointer;\n}\n.r-table-edit .react-datepicker__day:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__month-text:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__quarter-text:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__year-text:not([aria-disabled=true]):hover {\n  border-radius: 0.3rem;\n  background-color: #FFFFFF;\n}\n.r-table-edit .react-datepicker__day--today,\n.r-table-edit .react-datepicker__month-text--today,\n.r-table-edit .react-datepicker__quarter-text--today,\n.r-table-edit .react-datepicker__year-text--today {\n  font-weight: bold;\n}\n.r-table-edit .react-datepicker__day--highlighted,\n.r-table-edit .react-datepicker__month-text--highlighted,\n.r-table-edit .react-datepicker__quarter-text--highlighted,\n.r-table-edit .react-datepicker__year-text--highlighted {\n  border-radius: 0.3rem;\n  background-color: #3dcc4a;\n  color: #FFFFFF;\n}\n.r-table-edit .react-datepicker__day--highlighted:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__month-text--highlighted:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__quarter-text--highlighted:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__year-text--highlighted:not([aria-disabled=true]):hover {\n  background-color: rgb(49.8551020408, 189.6448979592, 62.5632653061);\n}\n.r-table-edit .react-datepicker__day--highlighted-custom-1,\n.r-table-edit .react-datepicker__month-text--highlighted-custom-1,\n.r-table-edit .react-datepicker__quarter-text--highlighted-custom-1,\n.r-table-edit .react-datepicker__year-text--highlighted-custom-1 {\n  color: magenta;\n}\n.r-table-edit .react-datepicker__day--highlighted-custom-2,\n.r-table-edit .react-datepicker__month-text--highlighted-custom-2,\n.r-table-edit .react-datepicker__quarter-text--highlighted-custom-2,\n.r-table-edit .react-datepicker__year-text--highlighted-custom-2 {\n  color: green;\n}\n.r-table-edit .react-datepicker__day--holidays,\n.r-table-edit .react-datepicker__month-text--holidays,\n.r-table-edit .react-datepicker__quarter-text--holidays,\n.r-table-edit .react-datepicker__year-text--holidays {\n  position: relative;\n  border-radius: 0.3rem;\n  background-color: #ff6803;\n  color: #FFFFFF;\n}\n.r-table-edit .react-datepicker__day--holidays .overlay,\n.r-table-edit .react-datepicker__month-text--holidays .overlay,\n.r-table-edit .react-datepicker__quarter-text--holidays .overlay,\n.r-table-edit .react-datepicker__year-text--holidays .overlay {\n  position: absolute;\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: #333;\n  color: #FFFFFF;\n  padding: 4px;\n  border-radius: 4px;\n  white-space: nowrap;\n  visibility: hidden;\n  opacity: 0;\n  transition: visibility 0s, opacity 0.3s ease-in-out;\n}\n.r-table-edit .react-datepicker__day--holidays:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__month-text--holidays:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__quarter-text--holidays:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__year-text--holidays:not([aria-disabled=true]):hover {\n  background-color: rgb(207, 82.9642857143, 0);\n}\n.r-table-edit .react-datepicker__day--holidays:hover .overlay,\n.r-table-edit .react-datepicker__month-text--holidays:hover .overlay,\n.r-table-edit .react-datepicker__quarter-text--holidays:hover .overlay,\n.r-table-edit .react-datepicker__year-text--holidays:hover .overlay {\n  visibility: visible;\n  opacity: 1;\n}\n.r-table-edit .react-datepicker__day--selected,\n.r-table-edit .react-datepicker__day--in-selecting-range,\n.r-table-edit .react-datepicker__day--in-range,\n.r-table-edit .react-datepicker__month-text--selected,\n.r-table-edit .react-datepicker__month-text--in-selecting-range,\n.r-table-edit .react-datepicker__month-text--in-range,\n.r-table-edit .react-datepicker__quarter-text--selected,\n.r-table-edit .react-datepicker__quarter-text--in-selecting-range,\n.r-table-edit .react-datepicker__quarter-text--in-range,\n.r-table-edit .react-datepicker__year-text--selected,\n.r-table-edit .react-datepicker__year-text--in-selecting-range,\n.r-table-edit .react-datepicker__year-text--in-range {\n  border-radius: 0.3rem;\n  background-color: #216ba5;\n  color: #FFFFFF;\n}\n.r-table-edit .react-datepicker__day--selected:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__day--in-selecting-range:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__day--in-range:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__month-text--selected:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__month-text--in-selecting-range:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__month-text--in-range:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__quarter-text--selected:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__quarter-text--in-selecting-range:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__quarter-text--in-range:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__year-text--selected:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__year-text--in-selecting-range:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__year-text--in-range:not([aria-disabled=true]):hover {\n  background-color: rgb(28.75, 93.2196969697, 143.75);\n}\n.r-table-edit .react-datepicker__day--keyboard-selected,\n.r-table-edit .react-datepicker__month-text--keyboard-selected,\n.r-table-edit .react-datepicker__quarter-text--keyboard-selected,\n.r-table-edit .react-datepicker__year-text--keyboard-selected {\n  border-radius: 0.3rem;\n  background-color: rgb(186.25, 217.0833333333, 241.25);\n  color: rgb(0, 0, 0);\n}\n.r-table-edit .react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__month-text--keyboard-selected:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__quarter-text--keyboard-selected:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__year-text--keyboard-selected:not([aria-disabled=true]):hover {\n  background-color: rgb(28.75, 93.2196969697, 143.75);\n}\n.r-table-edit .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,\n.react-datepicker__month-text--in-range,\n.react-datepicker__quarter-text--in-range,\n.react-datepicker__year-text--in-range),\n.r-table-edit .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,\n.react-datepicker__month-text--in-range,\n.react-datepicker__quarter-text--in-range,\n.react-datepicker__year-text--in-range),\n.r-table-edit .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,\n.react-datepicker__month-text--in-range,\n.react-datepicker__quarter-text--in-range,\n.react-datepicker__year-text--in-range),\n.r-table-edit .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,\n.react-datepicker__month-text--in-range,\n.react-datepicker__quarter-text--in-range,\n.react-datepicker__year-text--in-range) {\n  background-color: rgba(33, 107, 165, 0.5);\n}\n.r-table-edit .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.r-table-edit .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.r-table-edit .react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.r-table-edit .react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.r-table-edit .react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.r-table-edit .react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.r-table-edit .react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.r-table-edit .react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range) {\n  background-color: #f0f0f0;\n  color: #000000;\n}\n.r-table-edit .react-datepicker__day--disabled,\n.r-table-edit .react-datepicker__month-text--disabled,\n.r-table-edit .react-datepicker__quarter-text--disabled,\n.r-table-edit .react-datepicker__year-text--disabled {\n  cursor: default;\n  color: #ccc;\n}\n.r-table-edit .react-datepicker__day--disabled .overlay,\n.r-table-edit .react-datepicker__month-text--disabled .overlay,\n.r-table-edit .react-datepicker__quarter-text--disabled .overlay,\n.r-table-edit .react-datepicker__year-text--disabled .overlay {\n  position: absolute;\n  bottom: 70%;\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: #333;\n  color: #FFFFFF;\n  padding: 4px;\n  border-radius: 4px;\n  white-space: nowrap;\n  visibility: hidden;\n  opacity: 0;\n  transition: visibility 0s, opacity 0.3s ease-in-out;\n}\n.r-table-edit .react-datepicker__input-container {\n  position: relative;\n  display: inline-block;\n  width: 100%;\n}\n.r-table-edit .react-datepicker__input-container .react-datepicker__calendar-icon {\n  position: absolute;\n  padding: 0.5rem;\n  box-sizing: content-box;\n}\n.r-table-edit .react-datepicker__view-calendar-icon input {\n  padding: 6px 10px 5px 25px;\n}\n.r-table-edit .react-datepicker__year-read-view,\n.r-table-edit .react-datepicker__month-read-view,\n.r-table-edit .react-datepicker__month-year-read-view {\n  border: 1px solid transparent;\n  border-radius: 0.3rem;\n  position: relative;\n}\n.r-table-edit .react-datepicker__year-read-view:hover,\n.r-table-edit .react-datepicker__month-read-view:hover,\n.r-table-edit .react-datepicker__month-year-read-view:hover {\n  cursor: pointer;\n}\n.r-table-edit .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,\n.r-table-edit .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,\n.r-table-edit .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,\n.r-table-edit .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,\n.r-table-edit .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,\n.r-table-edit .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {\n  border-top-color: rgb(178.5, 178.5, 178.5);\n}\n.r-table-edit .react-datepicker__year-read-view--down-arrow,\n.r-table-edit .react-datepicker__month-read-view--down-arrow,\n.r-table-edit .react-datepicker__month-year-read-view--down-arrow {\n  transform: rotate(135deg);\n  right: -16px;\n  top: 0;\n}\n.r-table-edit .react-datepicker__year-dropdown,\n.r-table-edit .react-datepicker__month-dropdown,\n.r-table-edit .react-datepicker__month-year-dropdown {\n  background-color: #f0f0f0;\n  position: absolute;\n  width: 50%;\n  left: 25%;\n  top: 30px;\n  z-index: 1;\n  text-align: center;\n  border-radius: 0.3rem;\n  border: 1px solid #e0e0e0;\n}\n.r-table-edit .react-datepicker__year-dropdown:hover,\n.r-table-edit .react-datepicker__month-dropdown:hover,\n.r-table-edit .react-datepicker__month-year-dropdown:hover {\n  cursor: pointer;\n}\n.r-table-edit .react-datepicker__year-dropdown--scrollable,\n.r-table-edit .react-datepicker__month-dropdown--scrollable,\n.r-table-edit .react-datepicker__month-year-dropdown--scrollable {\n  height: 150px;\n  overflow-y: scroll;\n}\n.r-table-edit .react-datepicker__year-option,\n.r-table-edit .react-datepicker__month-option,\n.r-table-edit .react-datepicker__month-year-option {\n  line-height: 20px;\n  width: 100%;\n  display: block;\n  margin-left: auto;\n  margin-right: auto;\n}\n.r-table-edit .react-datepicker__year-option:first-of-type,\n.r-table-edit .react-datepicker__month-option:first-of-type,\n.r-table-edit .react-datepicker__month-year-option:first-of-type {\n  border-top-left-radius: 0.3rem;\n  border-top-right-radius: 0.3rem;\n}\n.r-table-edit .react-datepicker__year-option:last-of-type,\n.r-table-edit .react-datepicker__month-option:last-of-type,\n.r-table-edit .react-datepicker__month-year-option:last-of-type {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  border-bottom-left-radius: 0.3rem;\n  border-bottom-right-radius: 0.3rem;\n}\n.r-table-edit .react-datepicker__year-option:hover,\n.r-table-edit .react-datepicker__month-option:hover,\n.r-table-edit .react-datepicker__month-year-option:hover {\n  background-color: #ccc;\n}\n.r-table-edit .react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,\n.r-table-edit .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,\n.r-table-edit .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {\n  border-bottom-color: rgb(178.5, 178.5, 178.5);\n}\n.r-table-edit .react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,\n.r-table-edit .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,\n.r-table-edit .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {\n  border-top-color: rgb(178.5, 178.5, 178.5);\n}\n.r-table-edit .react-datepicker__year-option--selected,\n.r-table-edit .react-datepicker__month-option--selected,\n.r-table-edit .react-datepicker__month-year-option--selected {\n  position: absolute;\n  left: 15px;\n}\n.r-table-edit .react-datepicker__close-icon {\n  cursor: pointer;\n  background-color: transparent;\n  border: 0;\n  outline: 0;\n  padding: 0 6px 0 0;\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 100%;\n  display: table-cell;\n  vertical-align: middle;\n}\n.r-table-edit .react-datepicker__close-icon::after {\n  cursor: pointer;\n  background-color: transparent;\n  color: #c4c4c4;\n  height: 16px;\n  width: 16px;\n  padding: 0px 2px;\n  font-size: 25px;\n  font-weight: 500;\n  line-height: 0.5;\n  text-align: center;\n  display: table-cell;\n  vertical-align: middle;\n  content: \"×\";\n}\n.r-table-edit .react-datepicker__close-icon:hover::after {\n  color: rgba(0, 0, 0, 0.8705882353) !important;\n}\n.r-table-edit .react-datepicker__close-icon--disabled {\n  cursor: default;\n}\n.r-table-edit .react-datepicker__close-icon--disabled::after {\n  cursor: default;\n  background-color: #ccc;\n}\n.r-table-edit .react-datepicker__today-button {\n  background: #f0f0f0;\n  border-top: 1px solid #e0e0e0;\n  cursor: pointer;\n  text-align: center;\n  font-weight: bold;\n  padding: 5px 0;\n  clear: left;\n}\n.r-table-edit .react-datepicker__portal {\n  position: fixed;\n  width: 100vw;\n  height: 100vh;\n  background-color: rgba(0, 0, 0, 0.8);\n  left: 0;\n  top: 0;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  z-index: 2147483647;\n}\n.r-table-edit .react-datepicker__portal .react-datepicker__day-name,\n.r-table-edit .react-datepicker__portal .react-datepicker__day,\n.r-table-edit .react-datepicker__portal .react-datepicker__time-name {\n  width: 3rem;\n  line-height: 3rem;\n}\n@media (max-width: 400px), (max-height: 550px) {\n  .r-table-edit .react-datepicker__portal .react-datepicker__day-name,\n  .r-table-edit .react-datepicker__portal .react-datepicker__day,\n  .r-table-edit .react-datepicker__portal .react-datepicker__time-name {\n    width: 2rem;\n    line-height: 2rem;\n  }\n}\n.r-table-edit .react-datepicker__portal .react-datepicker__current-month,\n.r-table-edit .react-datepicker__portal .react-datepicker-time__header {\n  font-size: 1.44rem;\n}\n.r-table-edit .react-datepicker__children-container {\n  width: 13.8rem;\n  margin: 0.4rem;\n  padding-right: 0.2rem;\n  padding-left: 0.2rem;\n  height: auto;\n}\n.r-table-edit .react-datepicker__aria-live {\n  position: absolute;\n  clip-path: circle(0);\n  border: 0;\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  width: 1px;\n  white-space: nowrap;\n}\n.r-table-edit .react-datepicker__calendar-icon {\n  width: 1em;\n  height: 1em;\n  vertical-align: -0.125em;\n}\n.r-table-edit .react-datepicker-popper {\n  z-index: 999 !important;\n  position: fixed !important;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__current-month {\n  color: rgba(0, 0, 0, 0.9) !important;\n  font-weight: 500 !important;\n  display: none;\n  font-family: Montserrat, Helvetica, Arial, serif !important;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown {\n  font-family: Montserrat, Helvetica, Arial, serif !important;\n  /* Giao diện của menu dropdown (tháng và năm) */\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown .react-datepicker__month-dropdown-container {\n  margin: 0px 3px 0px 0px;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown .react-datepicker__year-dropdown-container {\n  margin: 0px 0px 0px 3px;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown .react-datepicker__month-select:focus,\n.r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown .react-datepicker__year-select:focus {\n  border: 1px solid #1989fa !important;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown .react-datepicker__month-select,\n.r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown .react-datepicker__year-select {\n  background-color: #FFFFFF;\n  height: 22px;\n  border-radius: 2px;\n  padding: 2px 0;\n  border: 1px solid hsl(0, 0%, 80%);\n  outline: none;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__navigation {\n  margin-top: 4px;\n  color: #eb4619;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__day-name {\n  font-family: Montserrat, Helvetica, Arial, serif !important;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__day {\n  outline: none;\n  border-radius: 20px !important;\n  font-family: Montserrat, Helvetica, Arial, serif !important;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__day:hover {\n  background-color: rgba(235, 70, 25, 0.1) !important;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__day--today {\n  color: #eb4619;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__day--today.react-datepicker__day--selected {\n  color: #FFFFFF;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__day--today.react-datepicker__day--keyboard-selected {\n  background-color: rgba(235, 70, 25, 0.1);\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__day--selected {\n  background-color: #eb4619 !important;\n}\n\n.tab-custom {\n  font-family: Roboto, \"Segoe UI\", GeezaPro, \"DejaVu Serif\", \"sans-serif\", -apple-system, BlinkMacSystemFont;\n  display: flex;\n}\n.tab-custom.tab-parent {\n  border-bottom: solid 1px #c9c9c9;\n}\n.tab-custom .btn-scroll {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n}\n.tab-custom .tab-component::-webkit-scrollbar {\n  display: none;\n  /* Ẩn thanh cuộn nếu không cần */\n}\n.tab-custom .tab-component {\n  white-space: nowrap;\n  overflow-x: hidden;\n  scroll-behavior: smooth;\n}\n.tab-custom .tab-component > * {\n  display: inline-block;\n}\n.tab-custom .tab-component .tab-custom-item {\n  display: inline-block;\n  padding: 3px 10px;\n  line-height: 23px;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n  text-transform: uppercase;\n  height: 30px;\n  color: rgba(0, 0, 0, 0.5);\n}\n.tab-custom .tab-component .tab-custom-item.active {\n  border-bottom: solid 2px #eb4619 !important;\n  color: #eb4619;\n}\n.tab-custom.tab-child .tab-custom-item {\n  font-size: 12px !important;\n  line-height: 23px !important;\n  border-radius: 5px 5px 0px 0px;\n  margin: 8px 3px 0px 3px;\n  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;\n}\n\n.bs-stepper {\n  background-color: #FFFFFF;\n  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);\n  border-radius: 0.5rem;\n}\n.bs-stepper .bs-stepper-header {\n  padding: 1.5rem 1.5rem;\n  flex-wrap: wrap;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n  margin: 0;\n}\n.bs-stepper .bs-stepper-header .line {\n  flex: 0;\n  min-width: auto;\n  min-height: auto;\n  background-color: transparent;\n  margin: 0;\n  padding: 0 1.75rem;\n  color: #283046;\n  font-size: 1.5rem;\n}\n.bs-stepper .bs-stepper-header .step {\n  margin-bottom: 0.25rem;\n  margin-top: 0.25rem;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger {\n  flex-wrap: nowrap;\n  padding: 0;\n  font-weight: normal;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-box {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 38px;\n  height: 38px;\n  padding: 0.5em 0;\n  font-weight: 500;\n  color: #babfc7;\n  background-color: rgba(186, 191, 199, 0.12);\n  border-radius: 0.35rem;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-label {\n  text-align: left;\n  margin: 0;\n  margin-top: 0.5rem;\n  margin-left: 1rem;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-label .bs-stepper-title {\n  display: inherit;\n  color: #283046;\n  font-weight: 600;\n  line-height: 1rem;\n  margin-bottom: 0rem;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-label .bs-stepper-subtitle {\n  font-weight: 400;\n  font-size: 0.85rem;\n  color: #b9b9c3;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger:hover {\n  background-color: transparent;\n}\n.bs-stepper .bs-stepper-header .step.active .step-trigger .bs-stepper-box {\n  background-color: #eb4619;\n  color: #FFFFFF;\n  box-shadow: 0 3px 6px 0 rgba(235, 70, 25, 0.4);\n}\n.bs-stepper .bs-stepper-header .step.active .step-trigger .bs-stepper-label .bs-stepper-title {\n  color: #eb4619;\n}\n.bs-stepper .bs-stepper-header .step.crossed .step-trigger .bs-stepper-box {\n  background-color: rgba(235, 70, 25, 0.12);\n  color: #eb4619;\n}\n.bs-stepper .bs-stepper-header .step.crossed .step-trigger .bs-stepper-label .bs-stepper-title {\n  color: #b9b9c3;\n}\n.bs-stepper .bs-stepper-header .step.crossed + .line {\n  color: #eb4619;\n}\n.bs-stepper .bs-stepper-content {\n  padding: 1.5rem 1.5rem;\n}\n.bs-stepper .bs-stepper-content .content {\n  margin-left: 0;\n}\n.bs-stepper .bs-stepper-content .content .content-header {\n  margin-bottom: 1rem;\n}\n.bs-stepper.vertical .bs-stepper-header {\n  border-right: 1px solid #e0e0e0;\n  border-bottom: none;\n}\n.bs-stepper.vertical .bs-stepper-header .step .step-trigger {\n  padding: 1rem 0;\n}\n.bs-stepper.vertical .bs-stepper-header .line {\n  display: none;\n}\n.bs-stepper.vertical .bs-stepper-content {\n  width: 100%;\n  padding-top: 2.5rem;\n}\n.bs-stepper.vertical .bs-stepper-content .content:not(.active) {\n  display: none;\n}\n.bs-stepper.vertical.wizard-icons .step {\n  text-align: center;\n}\n.bs-stepper.wizard-modern {\n  background-color: transparent;\n  box-shadow: none;\n}\n.bs-stepper.wizard-modern .bs-stepper-header {\n  border: none;\n}\n.bs-stepper.wizard-modern .bs-stepper-content {\n  background-color: #FFFFFF;\n  border-radius: 0.5rem;\n  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);\n}\n\n.horizontal-wizard,\n.vertical-wizard,\n.modern-horizontal-wizard,\n.modern-vertical-wizard {\n  margin-bottom: 2.2rem;\n}\n\nhtml[data-textdirection=rtl] .btn-prev,\nhtml[data-textdirection=rtl] .btn-next {\n  display: flex;\n}\nhtml[data-textdirection=rtl] .btn-prev i,\nhtml[data-textdirection=rtl] .btn-prev svg,\nhtml[data-textdirection=rtl] .btn-next i,\nhtml[data-textdirection=rtl] .btn-next svg {\n  transform: rotate(-180deg);\n}\n\n@media (max-width: 992px) {\n  .bs-stepper .bs-stepper-header {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n  .bs-stepper .bs-stepper-header .step .step-trigger {\n    padding: 0.5rem 0 !important;\n    flex-direction: row;\n  }\n  .bs-stepper .bs-stepper-header .line {\n    display: none;\n  }\n  .bs-stepper.vertical {\n    flex-direction: column;\n  }\n  .bs-stepper.vertical .bs-stepper-header {\n    align-items: flex-start;\n  }\n  .bs-stepper.vertical .bs-stepper-content {\n    padding-top: 1.5rem;\n  }\n}\n.r-table-edit .r-grid {\n  font-size: 12px;\n}\n.r-table-edit .r-grid .r-search {\n  display: flex;\n  position: relative;\n  align-items: center;\n}\n.r-table-edit .r-grid .r-search .input__value {\n  z-index: 1;\n}\n.r-table-edit .r-grid .r-search .input__value.is-clearable {\n  padding-right: 25px;\n}\n.r-table-edit .r-grid .r-search .input__clear-icon {\n  position: absolute;\n  right: 5px;\n  z-index: 10;\n}\n.r-table-edit .r-grid .r-gridtable {\n  -webkit-overflow-scrolling: touch;\n  overflow-x: auto;\n  overflow-y: scroll;\n  position: relative;\n  background-color: #FFFFFF;\n  color: rgba(0, 0, 0, 0.8705882353);\n  font-weight: 400;\n  border: 1px solid #e0e0e0;\n  /* Toàn bộ thanh cuộn */\n  /* Nền của thanh cuộn */\n  /* Thanh trượt (thumb) */\n  /* Khi hover */\n}\n.r-table-edit .r-grid .r-gridtable table {\n  table-layout: fixed;\n  border-collapse: separate;\n  border-spacing: 0px;\n}\n.r-table-edit .r-grid .r-gridtable::-webkit-scrollbar {\n  width: 9px;\n  /* Độ rộng của thanh cuộn */\n  height: 9px;\n  /* Độ cao của thanh cuộn */\n}\n.r-table-edit .r-grid .r-gridtable::-webkit-scrollbar-track {\n  background: #FCFCFC;\n  /* Màu nền nhạt */\n}\n.r-table-edit .r-grid .r-gridtable::-webkit-scrollbar-thumb {\n  background: #8B8B8B;\n  /* Màu xám nhạt */\n  border-radius: 6px;\n  /* Bo góc giống Edge */\n}\n.r-table-edit .r-grid .r-gridtable::-webkit-scrollbar-thumb:hover {\n  background: #636363;\n  /* Màu đậm hơn khi hover */\n}\n.r-table-edit .r-grid .r-gridtable .react-resizable-handle.react-resizable-handle-se {\n  position: absolute;\n  right: 0px;\n  top: 0px;\n  width: 10px;\n  height: 100%;\n  cursor: col-resize;\n  background-image: none;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter svg.active {\n  color: #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter-popup .react-select-table .select-value {\n  line-height: 20px !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter-popup .react-select-table .select-placeholder {\n  line-height: 20px !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter-popup .react-select-table .r-select-is-focus {\n  border-color: #eb4619 !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter-popup .form-control:focus {\n  border-color: #eb4619 !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-no-data {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  padding: 20px 9px;\n  color: #8f8f8f;\n}\n.r-table-edit .r-grid .r-gridtable .r-loading-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(255, 255, 255, 0.3);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 3;\n}\n.r-table-edit .r-grid .r-gridtable .r-loading-overlay .r-loading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  padding: 7px 9px;\n  color: #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed {\n  z-index: 2 !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed.fix-right .r-headercell-div {\n  border-left: 1px solid #e0e0e0;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed.fix-left .r-headercell-div {\n  border-right: 1px solid #e0e0e0;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed.fix-left.fixed-last .r-headercell-div {\n  box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed.fix-right.fixed-last .r-headercell-div {\n  box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .r-headercell {\n  color: rgba(0, 0, 0, 0.8705882353);\n  position: sticky;\n  padding: 0px;\n  height: 42px;\n  z-index: 1;\n  border-width: 0px;\n  line-height: 16px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .r-headercell .r-headercell-div {\n  border-right: 1px solid #e0e0e0;\n  border-bottom: 1px solid #e0e0e0;\n  background-color: #FFFFFF;\n  display: flex;\n  align-items: center;\n  text-align: center;\n  padding: 5px 10px;\n  height: 100%;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .r-headercell .header-content {\n  display: flex;\n  flex: 1 1 0%;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .r-headercell .header-content .text-content {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row:first-of-type .r-rowcell-div {\n  border-top-color: #FFFFFF;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row {\n  font-size: 13px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .cell-fixed {\n  position: sticky;\n  z-index: 1;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell {\n  background-color: #FFFFFF;\n  border-bottom: 1px solid #e0e0e0;\n  border-right: 1px solid #e0e0e0;\n  vertical-align: middle;\n  padding: 0;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.fix-right {\n  border-left: 1px solid #e0e0e0;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.fix-right.fixed-last {\n  border-left: 1px solid #e0e0e0;\n  box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.fix-left.fixed-last {\n  border-right: 1px solid #e0e0e0;\n  box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.r-active-row {\n  background-color: #fce6df;\n  border-right: 2px solid #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div {\n  margin: 0px;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  user-select: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\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 .r-rowcell-content: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-rowcell-content {\n  min-height: 28px !important;\n  border: 1px solid transparent;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-rowcell-content.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-rowcell-content.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-rowcell-content .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-rowcell-content .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-rowcell-content .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-rowcell-content .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-rowcell-content .r-cell-text .r-drop-icon {\n  position: absolute;\n  fill: #c4c4c4 !important;\n  right: 9px;\n  top: 5px;\n  cursor: pointer;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-rowcell-content .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-rowcell-content .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-rowcell-content.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-rowcell-content.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-rowcell-content.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-rowcell-content.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-rowcell-content .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 .r-rowcell-content .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 .r-rowcell-content .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 .r-rowcell-content .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 .r-rowcell-content .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 .r-rowcell-content .form-edit .display-value.r-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 .r-rowcell-content .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 .r-rowcell-content .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 .r-rowcell-content .form-edit .form-input-content .form-control:focus {\n  border: none;\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 .r-rowcell-content .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 .r-rowcell-content .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 .r-rowcell-content .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 .r-rowcell-content .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 .r-rowcell-content .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 .r-rowcell-content .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 .r-rowcell-content .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-rowcell-content .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 .r-rowcell-content .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 .r-rowcell-content input {\n  font-size: 13px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridfoot {\n  color: #283046;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridfoot .r-row {\n  bottom: 0px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridfoot .r-row .r-footer {\n  background-color: #fafafa;\n  font-size: 14px;\n  font-weight: 600;\n  width: 100px;\n  position: sticky;\n  z-index: 1;\n  bottom: 0;\n  border-width: 0px;\n  padding: 0px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridfoot .r-row .r-footer.cell-fixed {\n  z-index: 2;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridfoot .r-row .r-footer .r-footer-div {\n  height: 30px;\n  padding: 5px 7px;\n}\n.r-table-edit .r-grid .r-gridtable .formula-dropdown {\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 15px;\n}\n.r-table-edit .r-grid .text-left .form-label {\n  text-align: left;\n}\n.r-table-edit .r-grid .r-toolbar {\n  border: 1px solid #e0e0e0;\n  height: 44px;\n}\n.r-table-edit .r-grid .r-toolbar.r-toolbar-bottom {\n  border-top-width: 0px;\n}\n.r-table-edit .r-grid .r-toolbar.r-toolbar-top {\n  border-bottom-width: 0px;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-left {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-left .r-toolbar-item {\n  margin: 7px 0px 7px 7px;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-center {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-center .r-toolbar-item {\n  margin: 7px 3px 7px 3px;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-right {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-right .r-toolbar-item {\n  margin: 7px 7px 7px 0px;\n}\n.r-table-edit.r-virtualized-table .r-row:hover .r-rowcell {\n  background-color: #fce6df !important;\n}\n.r-table-edit .r-pager {\n  border: 1px solid #e0e0e0;\n  border-top-width: 0px;\n  min-height: 50px;\n  width: 100%;\n  display: inline-block;\n}\n.r-table-edit .r-pager .r-pagercontainer {\n  margin-left: 10px;\n  float: left;\n  height: 100%;\n  display: block;\n  align-items: center;\n}\n.r-table-edit .r-pager .r-pagercontainer .r-button {\n  display: inline-block;\n  margin: 9px 6px;\n  height: 30px;\n  width: 30px;\n  padding: 6px;\n  border-width: 0px;\n  background-color: transparent;\n}\n.r-table-edit .r-pager .r-pagercontainer .r-button svg {\n  font-size: 16px;\n}\n.r-table-edit .r-pager .r-pagercontainer .r-number {\n  display: inline-block;\n  margin: 10px 4px 0px 0px;\n  height: 25px;\n  width: 25px;\n  font-size: 13px;\n  padding-top: 4px;\n  text-align: center;\n  cursor: pointer;\n  border-radius: 5px;\n}\n.r-table-edit .r-pager .r-pagercontainer .r-number.r-active {\n  background-color: rgba(235, 70, 25, 0.1);\n  color: #eb4619;\n}\n.r-table-edit .r-pager .r-pagercontainer .r-number:hover {\n  border: 1px solid #eb4619;\n}\n.r-table-edit .r-pager .r-pagesize {\n  margin-left: 20px;\n  font-size: 13px;\n  display: inline-block;\n}\n.r-table-edit .r-pager .r-pagesize .select-pagesize__menu-portal {\n  z-index: 5;\n}\n.r-table-edit .r-pager .r-parentmsgbar {\n  font-size: 13px;\n  float: right;\n  padding-bottom: 9px;\n  padding-right: 18px;\n  padding-top: 14px;\n}\n\n.r-tooltip .tooltip-inner {\n  font-size: 11px;\n}\n.r-tooltip.tooltip-error ::before {\n  border-top-color: rgb(235, 78, 78);\n}\n.r-tooltip.tooltip-error .tooltip-inner {\n  background-color: rgb(235, 78, 78);\n}\n\n.btn-input-style {\n  font-weight: 500;\n  text-transform: uppercase;\n  border: 1px solid #e0e0e0;\n  border-radius: 5px;\n  margin-left: 3px;\n  height: 28px;\n  padding: 2px 5px;\n  cursor: pointer;\n}\n.btn-input-style:hover {\n  background-color: rgba(235, 70, 25, 0.1);\n  color: #eb4619;\n}\n.btn-input-style.active-custom {\n  background-color: #eb4619;\n  color: #FFFFFF;\n}";
+styleInject(css_248z$2);
+
 const getColumn = (contentColumns, col, index) => {
     const column = contentColumns[col + index];
     if (column) {
@@ -40927,10 +40927,9 @@ const CellComponent = React__default.memo((props) => {
             if (!typeDragging.current) {
                 return;
             }
+            document.body.style.userSelect = ""; // bật lại select
             typeDragging.current = 0;
-            if (isCopying.current) {
-                isCopying.current = false;
-            }
+            isCopying.current = false;
         };
         window.addEventListener("mousemove", handleMouseMove);
         window.addEventListener("mouseup", handleMouseUp);
@@ -41022,6 +41021,7 @@ const CellComponent = React__default.memo((props) => {
             return;
         } // chỉ chuột trái
         typeDragging.current = type;
+        document.body.style.userSelect = "none"; // chặn select
         let minCol = indexCol;
         let maxCol = indexCol;
         let minRow = indexRow;
@@ -41096,6 +41096,7 @@ const CellComponent = React__default.memo((props) => {
         }
         typeDragging.current = 0;
         isCopying.current = false;
+        document.body.style.userSelect = ""; // bật lại select
     };
     /** ---------------- COMMAND COLUMN ---------------- */
     if (col.field === "command") {
@@ -41129,7 +41130,7 @@ const CellComponent = React__default.memo((props) => {
                             if (selectedCell && selectedCell?.minCol === selectedCell?.maxCol) {
                                 handeCopyCell(indexCol, indexRow, totalCount - 1);
                             }
-                        }, onMouseDown: (e) => handleMouseDown(e, 2) }), errorMessage && jsxs(Fragment$1, { children: [jsx("div", { id: `error-row${indexRow}-col${indexCol}`, className: classNames$1("cursor-pointer r-icon-invalid"), children: jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: [jsx("g", { "clip-path": "url(#clip0_537_2)", children: jsx("path", { d: "M18.0301 -0.0416304L17.9871 17.5138L0.474868 0.0404105L18.0301 -0.0416304Z", fill: "#da2626ff" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_537_2", children: jsx("rect", { width: "18", height: "18", fill: "white" }) }) })] }) }), jsx(UncontrolledTooltip, { target: `error-row${indexRow}-col${indexCol}`, className: "r-tooltip tooltip-error", children: errorMessage?.toString() ?? "" })] }), typeDis !== 'edit' && col.type === 'select' && jsx("div", { className: "r-drop-icon", children: jsx("svg", { height: "20", width: "20", viewBox: "0 0 20 20", children: 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" }) }) })] }) }) }));
+                        }, onMouseDown: (e) => handleMouseDown(e, 2) }), errorMessage && jsxs(Fragment$1, { children: [jsx("div", { id: `error-row${indexRow}-col${indexCol}`, className: classNames$1("cursor-pointer r-icon-invalid"), children: jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: [jsx("g", { "clip-path": "url(#clip0_537_2)", children: jsx("path", { d: "M18.0301 -0.0416304L17.9871 17.5138L0.474868 0.0404105L18.0301 -0.0416304Z", fill: "#da2626ff" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_537_2", children: jsx("rect", { width: "18", height: "18", fill: "white" }) }) })] }) }), jsx(UncontrolledTooltip, { target: `error-row${indexRow}-col${indexCol}`, className: "r-tooltip tooltip-error", children: errorMessage?.toString() ?? "" })] })] }) }) }));
 });
 
 const FooterCol = ({ col, indexCol, dataSource, objWidthFix, formatSetting }) => {
@@ -42999,7 +43000,7 @@ var css_248z$1 = ".react-resizable {\n  position: relative;\n}\n.react-resizable
 styleInject(css_248z$1);
 
 const HeaderTableCol$1 = (props) => {
-    const { selectEnable, dataSource, setSelectedRows, col, indexCol, indexParent, objHeaderWidthFixLeft, objHeaderWidthFixRight, totalCount, selectedRows, columns, setColumns, orderBy, changeFilter, filterBy, changeOrder, allowFilter, allowOrder, container, fisrtObjWidthFixRight, lastObjWidthFixLeft, formatSetting, optionsFilter, idTable, isMulti } = props;
+    const { selectEnable, dataSource, setSelectedRows, col, indexCol, indexParent, objHeaderWidthFixLeft, objHeaderWidthFixRight, totalCount, selectedRows, columns, orderBy, changeFilter, filterBy, changeOrder, allowFilter, allowOrder, container, fisrtObjWidthFixRight, lastObjWidthFixLeft, setContentColumns, formatSetting, optionsFilter, idTable, isMulti } = props;
     const { t } = useTranslation();
     const headerRef = useRef(null);
     const order = orderBy.find((item) => item.key === col.field);
@@ -43007,8 +43008,6 @@ const HeaderTableCol$1 = (props) => {
     const filter = filterBy.find((item) => item.key === col.field);
     const herderContent = col.headerDisplay ?? (col.headerText ?? '');
     const handleResize = (e, { size }) => {
-        // Update the column width here
-        // You might need to update the state or call a callback to update the width
         if (size.width > 50) {
             const newColumns = [...columns];
             newColumns[indexCol].width = size.width;
@@ -43018,15 +43017,15 @@ const HeaderTableCol$1 = (props) => {
             if ((columns[indexCol]?.minWidth ?? 0) > size.width) {
                 newColumns[indexCol].minWidth = size.width;
             }
-            if (setColumns) {
-                setColumns(newColumns);
-            }
+            setContentColumns(newColumns);
+            e.stopPropagation();
+            e.preventDefault();
         }
     };
     const checkOverflow = () => {
         return headerRef.current && headerRef.current.scrollHeight > headerRef.current.clientHeight;
     };
-    return (jsx(Fragment, { children: col.visible !== false && (jsx(Resizable, { className: "r-resize", width: typeof col.width === 'number' ? col.width : Number((col.width ?? "").replaceAll(new RegExp(`[^0-9]`, "g"), '')), height: 0, onResize: handleResize, draggableOpts: { enableUserSelectHack: false }, children: jsx("th", { rowSpan: col.rowspan !== 1 ? col.rowspan : 1, colSpan: col.columns?.filter(x => x.visible !== false)?.length ?? 1, className: classNames$1(`r-headercell fix-${col.fixedType}`, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'cell-fixed': col.fixedType }), style: {
+    return (jsx(Fragment, { children: col.visible !== false && (jsx(Resizable, { className: "r-resize", width: typeof col.width === 'number' ? col.width : Number((col.width ?? "").replaceAll(new RegExp(`[^0-9]`, "g"), '')), height: 0, onResize: handleResize, draggableOpts: { enableUserSelectHack: true }, children: jsx("th", { rowSpan: col.rowspan !== 1 ? col.rowspan : 1, colSpan: col.columns?.filter(x => x.visible !== false)?.length ?? 1, className: classNames$1(`r-headercell fix-${col.fixedType}`, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'cell-fixed': col.fixedType }), style: {
                     top: `${indexParent * 42}px`,
                     left: col.fixedType === 'left' ? objHeaderWidthFixLeft[`${indexParent}-${indexCol ?? 0}`] : undefined,
                     right: col.fixedType === 'right' ? objHeaderWidthFixRight[`${indexParent}-${indexCol ?? 0}`] : undefined
@@ -43058,7 +43057,7 @@ const HeaderTableCol$1 = (props) => {
                                                 e.stopPropagation();
                                             }, onClick: (e) => {
                                                 e.stopPropagation();
-                                            }, children: [jsx(DropdownToggle$1, { tag: 'div', className: 'p-0 r-filter', children: jsxs("svg", { className: classNames$1('cursor-pointer ms-25', { 'active': filter }), width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "stroke-width": "1.5", "font-size": "12", children: [jsx("path", { d: "M14.7 11.998v10.506c.052.4-.08.826-.381 1.106a1.306 1.306 0 0 1-.925.39 1.289 1.289 0 0 1-.926-.39l-2.637-2.68a1.323 1.323 0 0 1-.38-1.106v-7.826h-.04L1.85 2.16A1.348 1.348 0 0 1 2.076.293C2.325.107 2.6 0 2.888 0h18.373c.289 0 .564.107.814.293a1.348 1.348 0 0 1 .223 1.866L14.738 12H14.7Z", fill: "currentColor" }), " "] }) }), jsx(DropdownMenu$1, { container: container, className: 'formula-dropdown icon-dropdown p-0', style: {
+                                            }, children: [jsx(DropdownToggle$1, { tag: 'div', className: 'p-0 r-filter', children: jsxs("svg", { className: classNames$1('cursor-pointer ms-25', { active: filter }), width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "stroke-width": "1.5", "font-size": "12", children: [jsx("path", { d: "M14.7 11.998v10.506c.052.4-.08.826-.381 1.106a1.306 1.306 0 0 1-.925.39 1.289 1.289 0 0 1-.926-.39l-2.637-2.68a1.323 1.323 0 0 1-.38-1.106v-7.826h-.04L1.85 2.16A1.348 1.348 0 0 1 2.076.293C2.325.107 2.6 0 2.888 0h18.373c.289 0 .564.107.814.293a1.348 1.348 0 0 1 .223 1.866L14.738 12H14.7Z", fill: "currentColor" }), " "] }) }), jsx(DropdownMenu$1, { container: container, className: 'formula-dropdown icon-dropdown p-0', style: {
                                                         borderRadius: 8,
                                                         zIndex: 1056
                                                     }, children: jsx(DropdownItem$1, { className: 'p-1', style: { borderRadius: '6px' }, tag: 'div', header: true, children: jsx(RenderFilterElement$1, { setOpenFilter: setOpenFilter, filter: filter, filterBy: filterBy, optionsFilter: optionsFilter, formatSetting: formatSetting, changeFilter: changeFilter, column: col }) }) })] })] })] })] }) }) })) }, `header-${indexCol}`));
@@ -43131,7 +43130,7 @@ const RenderFilterElement$1 = ({ filter, optionsFilter, formatSetting, filterBy,
                 handleSave();
                 e.stopPropagation();
             }
-        }, children: [((!column.filterType && column.type === 'numeric') || column.filterType === 'numeric') ? jsxs(Fragment$1, { children: [RenderNumberFilter(), " "] }) : (column.filterType === 'select' ? jsxs(Fragment$1, { children: [RenderSelectFilter(), " "] }) : RenderStringFilter()), jsxs("div", { className: 'd-flex justify-content-end', children: [jsx(Button$1, { color: 'primary', style: { borderRadius: 3 }, className: 'me-50 py-25 px-50 fw-bold', onClick: handleSave, children: t('Filter') }), jsx(Button$1, { className: 'py-25 px-50 fw-bold', color: 'white', style: { borderRadius: 3, borderWidth: 0 }, onClick: () => {
+        }, children: [((!column.filterType && column.type === 'numeric') || column.filterType === 'numeric') ? jsxs(Fragment$1, { children: [RenderNumberFilter(), " "] }) : (column.filterType === 'select' ? jsxs(Fragment$1, { children: ["  ", RenderSelectFilter(), " "] }) : RenderStringFilter()), jsxs("div", { className: 'd-flex justify-content-end', children: [jsx(Button$1, { color: 'primary', style: { borderRadius: 3 }, className: 'me-50 py-25 px-50 fw-bold', onClick: handleSave, children: t('Filter') }), jsx(Button$1, { className: 'py-25 px-50 fw-bold', color: 'white', style: { borderRadius: 3, borderWidth: 0 }, onClick: () => {
                             if (filterBy) {
                                 changeFilter(filterBy.filter((x) => x.key !== fieldFilter));
                             }
@@ -43139,18 +43138,14 @@ const RenderFilterElement$1 = ({ filter, optionsFilter, formatSetting, filterBy,
                         }, children: t('Clear') })] })] }));
 };
 
-const TableComponent = ({ idTable, dataSource, contentColumns, headerColumns, visibleColumns, selectedRows, setSelectedRows, selectedCell, startCell, editCell, gridRef, objHeaderWidthFixLeft, objHeaderWidthFixRight, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight, totalCount, isMulti, selectEnable, editDisable, addDisable, defaultValue, fieldKey, fieldUniKey, formatSetting, toolbarSetting, buttonSetting, tableElement, handleDataChange, changeDataSource, handleCommandClick, handleDuplicate, handleKeyDown, onDuplicate, setSelectedCell, setStartCell, focusEditElementCell, handeCopyCell, isCopying, typeDragging, rowChange, visibleContentColumns, filterBy, setFilterBy, orderBy, setOrderBy, optionsFilter, allowFilter, allowOrder, saveSettingColumn, searchSetting, searchTerm, pagingClient, pagingSetting, checkRowMatch, haveSum }) => {
+const TableComponent = ({ idTable, dataSource, contentColumns, headerColumns, visibleColumns, selectedRows, setSelectedRows, selectedCell, startCell, editCell, gridRef, objHeaderWidthFixLeft, objHeaderWidthFixRight, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight, totalCount, isMulti, selectEnable, editDisable, addDisable, defaultValue, fieldKey, fieldUniKey, formatSetting, toolbarSetting, buttonSetting, tableElement, handleDataChange, changeDataSource, handleCommandClick, handleDuplicate, handleKeyDown, onDuplicate, setSelectedCell, setStartCell, focusEditElementCell, setContentColumns, handeCopyCell, isCopying, typeDragging, rowChange, visibleContentColumns, filterBy, setFilterBy, orderBy, setOrderBy, optionsFilter, allowFilter, allowOrder, searchSetting, searchTerm, pagingClient, pagingSetting, checkRowMatch, haveSum }) => {
     return (jsxs("table", { style: { width: "100%" }, role: "presentation", children: [jsx(RenderColGroup, { contentColumns: visibleColumns }), jsx("thead", { className: "r-gridheader", role: "rowgroup", children: headerColumns.map((element, indexParent) => {
                     return (jsx("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
                             return (jsx(HeaderTableCol$1, { col: col, idTable: idTable ?? "", dataSource: dataSource, indexCol: index, indexParent: indexParent, isMulti: isMulti ?? false, objHeaderWidthFixLeft: objHeaderWidthFixLeft, objHeaderWidthFixRight: objHeaderWidthFixRight, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, container: tableElement, filterBy: filterBy, orderBy: orderBy, optionsFilter: optionsFilter, allowFilter: allowFilter, allowOrder: allowOrder, formatSetting: formatSetting, changeFilter: (val) => {
                                     setFilterBy([...val]);
                                 }, changeOrder: (val) => {
                                     setOrderBy([...val]);
-                                }, columns: contentColumns, setColumns: (newColumns) => {
-                                    if (saveSettingColumn) {
-                                        saveSettingColumn(newColumns.map((x) => ({ field: x.field, headerText: x.headerText, visible: x.visible, fixedType: x.fixedType, width: x.width })));
-                                    }
-                                }, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, totalCount: totalCount }, `header-${indexParent}-${index}`));
+                                }, columns: contentColumns, setContentColumns: setContentColumns, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, totalCount: totalCount }, `header-${indexParent}-${index}`));
                         }) }, `header-${-indexParent}`));
                 }) }), jsx("tbody", { className: "r-gridcontent", role: "rowgroup", children: dataSource.map((row, indexRow) => {
                     const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
@@ -43554,11 +43549,16 @@ const TableEdit = forwardRef((props, ref) => {
     const [searchTerm, setSearchTerm] = useState("");
     const [orderBy, setOrderBy] = useState([]);
     const [filterBy, setFilterBy] = useState([]);
+    const [contentColumns, setContentColumns] = useState([]);
     //ref
     const tableElement = useRef(null);
     const gridRef = useRef(null);
     const typeDragging = useRef(0); // 0: không kéo, 1: kéo ô, 2: kéo dòng, 3: kéo copy , 3: kéo cột
     const isCopying = useRef(false);
+    const resizeTimeout = useRef(null);
+    useEffect(() => {
+        console.log(resizeTimeout);
+    }, [resizeTimeout]);
     const totalCount = dataSource.length;
     const pagingClient = pagingSetting?.allowPaging && (pagingSetting?.pagingClient || !(editDisable || addDisable));
     const searchClient = searchSetting?.searchEnable && (searchSetting?.searchClient || !(editDisable || addDisable));
@@ -43569,8 +43569,10 @@ const TableEdit = forwardRef((props, ref) => {
             pagingSetting.setCurrentPage(1);
         }
     }, [dataSource]);
-    const { levels: headerColumns, flat: contentColumns, flatVisble: visibleColumns, flatVisbleContent: visibleContentColumns, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight, objHeaderWidthFixLeft, objHeaderWidthFixRight, indexFirstEdit: indexFirstEdit, indexLastEdit: indexLastEdit } = useMemo(() => {
-        return calculateTableStructure(columns, settingColumns);
+    const { levels: headerColumns, flatVisble: visibleColumns, flatVisbleContent: visibleContentColumns, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight, objHeaderWidthFixLeft, objHeaderWidthFixRight, indexFirstEdit: indexFirstEdit, indexLastEdit: indexLastEdit } = useMemo(() => {
+        const rs = calculateTableStructure(columns, settingColumns);
+        setContentColumns(rs.flat);
+        return rs;
     }, [columns, settingColumns]);
     const handleRefeshRow = () => {
     };
@@ -43978,9 +43980,20 @@ const TableEdit = forwardRef((props, ref) => {
             pagingSetting?.setCurrentPage(1);
         }
     }, [searchTerm, searchSetting?.searchTerm]);
-    return (jsxs(Fragment, { children: [jsxs("div", { className: "r-table-edit", children: [jsxs("div", { className: "r-grid", ref: gridRef, children: [toolbarSetting?.showTopToolbar && jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), jsx("div", { ref: tableElement, className: "r-gridtable", style: { height: `${height ? `${height}px` : "auto"}`, minHeight: `${minHeight ? `${minHeight}px` : ""}`, maxHeight: `${maxHeight ? `${maxHeight}px` : "400px"}` }, children: jsx(TableComponent, { idTable: idTable, dataSource: dataSource, contentColumns: contentColumns, headerColumns: headerColumns, visibleColumns: visibleColumns, selectedRows: selectedRows, setSelectedRows: setSelectedRows, selectedCell: selectedCell, startCell: startCell, editCell: editCell, gridRef: gridRef, objHeaderWidthFixLeft: objHeaderWidthFixLeft, objHeaderWidthFixRight: objHeaderWidthFixRight, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, fisrtObjWidthFixRight: fisrtObjWidthFixRight, totalCount: totalCount, isMulti: isMulti, selectEnable: selectEnable, editDisable: editDisable, addDisable: addDisable, defaultValue: defaultValue, fieldKey: fieldKey, fieldUniKey: fieldUniKey, formatSetting: formatSetting, toolbarSetting: toolbarSetting, buttonSetting: buttonSetting, tableElement: tableElement, handleDataChange: handleDataChange, changeDataSource: changeDataSource, handleCommandClick: handleCommandClick, handleDuplicate: () => {
+    return (jsxs(Fragment, { children: [jsxs("div", { className: "r-table-edit", children: [jsxs("div", { className: "r-grid", ref: gridRef, children: [toolbarSetting?.showTopToolbar && jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), jsx("div", { ref: tableElement, className: "r-gridtable", style: { height: `${height ? `${height}px` : "auto"}`, minHeight: `${minHeight ? `${minHeight}px` : ""}`, maxHeight: `${maxHeight ? `${maxHeight}px` : "400px"}` }, children: jsx(TableComponent, { idTable: idTable, dataSource: dataSource, contentColumns: contentColumns, headerColumns: headerColumns, visibleColumns: visibleColumns, selectedRows: selectedRows, setSelectedRows: setSelectedRows, selectedCell: selectedCell, startCell: startCell, editCell: editCell, gridRef: gridRef, objHeaderWidthFixLeft: objHeaderWidthFixLeft, objHeaderWidthFixRight: objHeaderWidthFixRight, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, fisrtObjWidthFixRight: fisrtObjWidthFixRight, totalCount: totalCount, isMulti: isMulti, selectEnable: selectEnable, editDisable: editDisable, addDisable: addDisable, defaultValue: defaultValue, fieldKey: fieldKey, fieldUniKey: fieldUniKey, formatSetting: formatSetting, toolbarSetting: toolbarSetting, buttonSetting: buttonSetting, tableElement: tableElement, optionsFilter: optionsFilter, allowFilter: allowFilter, allowOrder: allowOrder, searchSetting: searchSetting, searchTerm: searchTerm, pagingClient: pagingClient, pagingSetting: pagingSetting, haveSum: haveSum, isCopying: isCopying, typeDragging: typeDragging, visibleContentColumns: visibleContentColumns, handleDataChange: handleDataChange, changeDataSource: changeDataSource, handleCommandClick: handleCommandClick, handleKeyDown: handleKeyDown, handeCopyCell: handeCopyCell, onDuplicate: onDuplicate, setSelectedCell: setSelectedCell, setStartCell: setStartCell, focusEditElementCell: focusEditElementCell, rowChange: rowChange, filterBy: filterBy, setFilterBy: setFilterBy, orderBy: orderBy, setOrderBy: setOrderBy, checkRowMatch: checkRowMatch, handleDuplicate: () => {
                                         handleDuplicate(dataSource, startCell.row, fieldKey, defaultValue, fieldUniKey, changeDataSource, tableElement, totalCount, toolbarSetting, buttonSetting, editDisable, addDisable, onDuplicate);
-                                    }, handleKeyDown: handleKeyDown, handeCopyCell: handeCopyCell, onDuplicate: onDuplicate, setSelectedCell: setSelectedCell, setStartCell: setStartCell, focusEditElementCell: focusEditElementCell, isCopying: isCopying, typeDragging: typeDragging, rowChange: rowChange, visibleContentColumns: visibleContentColumns, filterBy: filterBy, setFilterBy: setFilterBy, orderBy: orderBy, setOrderBy: setOrderBy, optionsFilter: optionsFilter, allowFilter: allowFilter, allowOrder: allowOrder, saveSettingColumn: saveSettingColumn, searchSetting: searchSetting, searchTerm: searchTerm, pagingClient: pagingClient, pagingSetting: pagingSetting, checkRowMatch: checkRowMatch, haveSum: haveSum }) }), toolbarSetting?.showBottomToolbar && (jsx(ToolbarBottom, { handleAdd: (numberOfRows) => {
+                                    }, setContentColumns: (newColumns) => {
+                                        setContentColumns(newColumns);
+                                        // clear timeout cũ
+                                        if (resizeTimeout.current) {
+                                            clearTimeout(resizeTimeout.current);
+                                        }
+                                        resizeTimeout.current = setTimeout(() => {
+                                            if (saveSettingColumn) {
+                                                saveSettingColumn(newColumns.map((x) => ({ field: x.field, headerText: x.headerText, visible: x.visible, fixedType: x.fixedType, width: x.width })));
+                                            }
+                                        }, 500);
+                                    } }) }), toolbarSetting?.showBottomToolbar && (jsx(ToolbarBottom, { handleAdd: (numberOfRows) => {
                                     handleAdd(dataSource, tableElement.current, indexFirstEdit, changeDataSource, pagingSetting, handleFocusCell, numberOfRows);
                                 }, handleDuplicate: () => {
                                     handleDuplicate(dataSource, startCell.row, fieldKey, defaultValue, fieldUniKey, changeDataSource, tableElement, totalCount, toolbarSetting, buttonSetting, editDisable, addDisable, onDuplicate);