react-table-edit 1.5.2 → 1.5.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/component/type/index.d.ts +0 -4
  2. package/dist/index.d.ts +0 -4
  3. package/dist/index.js +36 -24
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +36 -24
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +1 -1
package/dist/index.mjs CHANGED
@@ -19872,7 +19872,7 @@ const calculateTableStructure = (columns, settingColumns) => {
19872
19872
  const setting = settingColumns?.find(s => s.field === cell.field);
19873
19873
  if (setting) {
19874
19874
  cell.sortOrder = setting.sortOrder;
19875
- cell.visible = setting.visible;
19875
+ cell.visible = setting.visible ?? true;
19876
19876
  if (setting.fixedType !== undefined && setting.fixedType !== null) {
19877
19877
  cell.fixedType = setting.fixedType;
19878
19878
  }
@@ -41283,13 +41283,15 @@ function styleInject(css, ref) {
41283
41283
  }
41284
41284
  }
41285
41285
 
41286
- var css_248z$2 = "@charset \"UTF-8\";\n.react-select-table .select-table-control {\n opacity: 1;\n border: 1px solid hsl(0, 0%, 80%);\n border-radius: 0.357rem;\n width: 100%;\n height: 28px;\n background-color: #FFFFFF;\n display: flex;\n align-items: center;\n padding: 2px 8px;\n}\n.react-select-table .select-table-control .select-table-indicator svg {\n fill: #c4c4c4 !important;\n}\n.react-select-table .select-table-control .icon-clear {\n font-size: 25px;\n margin-top: 2px;\n font-weight: 500;\n color: #c4c4c4;\n}\n.react-select-table .select-table-control .icon-clear:hover {\n color: rgba(0, 0, 0, 0.8705882353) !important;\n}\n.react-select-table .select-table-control.r-select-is-open .select-table-indicator svg {\n fill: rgba(0, 0, 0, 0.8705882353) !important;\n}\n.react-select-table .select-table-control.r-select-is-invalid {\n border: 1px solid red !important;\n}\n.react-select-table .select-table-control.r-select-is-focus {\n border: 1px solid #1989fa !important;\n}\n.react-select-table .select-table-control.r-select-is-disabled {\n background-color: #efefef !important;\n}\n.react-select-table .select-table-control .select-table-container {\n position: relative;\n flex: 1;\n}\n.react-select-table .select-table-control .select-table-container .input-container {\n background-color: transparent;\n white-space: nowrap;\n top: 0px;\n left: 0px;\n display: inline;\n}\n.react-select-table .select-table-control .select-table-container .input-container .select-input {\n background-color: transparent;\n text-align: center;\n width: 100%;\n box-sizing: border-box;\n margin-left: -3px;\n border: none;\n /* Loại bỏ border */\n outline: none;\n /* Loại bỏ outline khi input được chọn */\n}\n.react-select-table .select-table-control .select-table-container .input-container .select-input:focus {\n border-width: 0px !important;\n}\n.react-select-table .select-table-control .select-table-container .select-placeholder {\n position: absolute;\n color: #283046;\n margin-top: 1px;\n background-color: transparent;\n}\n.react-select-table .select-table-control .select-table-container .select-value {\n position: absolute;\n background-color: transparent;\n bottom: 0px;\n left: 0px;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.react-select-table .formula-dropdown {\n min-width: min-content !important;\n box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 15px;\n}\n.react-select-table input::placeholder {\n color: #000000 !important;\n opacity: 1;\n /* Firefox */\n}\n\n.r-select-grid.r-select-tree-grid .r-select-gridtable .r-select-row:hover {\n background-color: rgba(235, 70, 25, 0.1) !important;\n color: #eb4619;\n}\n\n.r-select-grid {\n font-size: 12px;\n font-family: Montserrat, Helvetica, Arial, serif;\n font-weight: 500 !important;\n border-radius: 4px !important;\n overflow: hidden;\n}\n.r-select-grid table {\n table-layout: fixed;\n border-collapse: separate;\n border-spacing: 0px;\n}\n.r-select-grid .r-select-gridtable {\n -webkit-overflow-scrolling: touch;\n overflow-x: auto;\n overflow-y: auto;\n position: relative;\n background-color: #FFFFFF;\n color: rgba(0, 0, 0, 0.8705882353) !important;\n font-weight: 400 !important;\n font-size: 13px !important;\n /* Toàn bộ thanh cuộn */\n}\n.r-select-grid .r-select-gridtable::-webkit-scrollbar {\n width: 9px;\n height: 9px;\n}\n.r-select-grid .r-select-gridtable::-webkit-scrollbar-track {\n background: #FCFCFC;\n}\n.r-select-grid .r-select-gridtable::-webkit-scrollbar-thumb {\n background: #8B8B8B;\n border-radius: 6px;\n}\n.r-select-grid .r-select-gridtable::-webkit-scrollbar-thumb:hover {\n background: #636363;\n}\n.r-select-grid .r-select-gridtable .r-select-gridheader .r-select-row .r-select-headercell {\n color: rgba(0, 0, 0, 0.8705882353) !important;\n position: sticky;\n padding: 0px;\n height: 35px;\n z-index: 1;\n border-width: 0px;\n line-height: 16px;\n}\n.r-select-grid .r-select-gridtable .r-select-gridheader .r-select-row .r-select-headercell .r-select-headercell-div {\n border-bottom: 1px solid #e0e0e0;\n background-color: #fafafa;\n display: flex;\n align-items: center;\n text-align: center;\n padding: 5px 10px;\n height: 100%;\n}\n.r-select-grid .r-select-gridtable .r-select-gridheader .r-select-row .r-select-headercell .r-select-headercell-text {\n width: 100%;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row {\n background-color: #FFFFFF;\n cursor: pointer;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .cell-fixed {\n position: sticky;\n z-index: 1;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row.fisrt-row .r-select-rowcell {\n border-top-width: 0px !important;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row.last-row .r-select-rowcell {\n border-bottom: 1px solid #e0e0e0;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell {\n border-top: 1px solid #e0e0e0;\n height: 30px !important;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n padding: 7px 9px;\n vertical-align: middle !important;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell.r-select-move {\n background-color: rgba(235, 70, 25, 0.1) !important;\n color: #eb4619 !important;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell.r-select-active {\n background-color: #eb4619 !important;\n color: #FFFFFF !important;\n}\n.r-tooltip .r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell.r-hidden {\n display: none;\n}\n.r-tooltip .r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell.r-hidden ::after {\n display: none;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell .r-icon-expand {\n transition: transform 0.3s ease !important;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell .r-icon-expand.is-open {\n transform: rotate(90deg) !important;\n -moz-transform: rotate(90deg);\n -webkit-transform: rotate(90deg);\n -o-transform: rotate(90deg);\n}\n.r-select-grid .r-select-gridtable.no-header .r-select-rowcell {\n border: none !important;\n}\n.r-select-grid .r-no-data {\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 14px;\n padding: 7px 9px;\n color: #8f8f8f;\n}\n.r-select-grid .r-select-footer {\n height: 30px;\n background-color: #fafafa;\n}\n.r-select-grid .r-select-footer button {\n font-weight: 400 !important;\n font-size: 13px;\n}\n.r-select-grid .r-select-footer .r-btn {\n border-width: 0px !important;\n}\n\n.r-pagesize .react-select-table .select-table-control {\n border-radius: 0px;\n border: 0px;\n border-bottom: 1px solid #e0e0e0 !important;\n}\n.r-pagesize .react-select-table .select-table-control.r-select-is-focus {\n border: 0px !important;\n border-bottom: 1px solid #1989fa !important;\n}\n\n.r-sidebar {\n width: 400px;\n right: -400px;\n padding: 0;\n background-color: #FFFFFF;\n z-index: 1051;\n position: fixed;\n top: 0;\n bottom: 0;\n height: 100vh;\n height: calc(var(--vh, 1vh) * 100);\n transition: right 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99);\n backface-visibility: hidden;\n border-left: 1px solid rgba(0, 0, 0, 0.05);\n}\n.r-sidebar.open {\n box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 5px 15px 0 rgba(0, 0, 0, 0.08);\n right: 0;\n}\n.r-sidebar .modal-header {\n background-color: #FFFFFF;\n}\n.r-sidebar .modal-header .btn-close {\n padding: 0.8rem;\n box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.1);\n border-radius: 0.357rem;\n background-color: #FFFFFF;\n opacity: 1;\n transition: all 0.23s ease 0.1s;\n position: relative;\n transform: translate(18px, -10px);\n}\n.r-sidebar .modal-header .btn-close:hover, .r-sidebar .modal-header .btn-close:focus, .r-sidebar .modal-header .btn-close:active {\n opacity: 1;\n outline: none;\n transform: translate(15px, -2px);\n box-shadow: none;\n}\n\n.r-sidebar .react-select {\n max-width: 100%;\n}\n\n.r-sidebar {\n width: 400px;\n right: -100vw;\n height: 100vh;\n}\n.r-sidebar .r-handle {\n position: fixed;\n background-color: #FFFFFF;\n top: 50%;\n transform: translate(-50%, -50%);\n filter: drop-shadow(0.9px 0.9px 1.5px);\n height: 50px;\n display: flex;\n align-items: center;\n border-radius: 0px 5px 5px 0px;\n cursor: pointer;\n margin-left: 7px;\n z-index: 9;\n}\n.r-sidebar.customizer-md {\n width: 600px;\n}\n.r-sidebar.customizer-lg {\n width: 800px;\n}\n.r-sidebar.customizer-500 {\n width: 500px;\n}\n@media (max-width: 500px) {\n .r-sidebar.customizer-500 {\n width: 100vw;\n }\n}\n.r-sidebar.customizer-600 {\n width: 600px;\n}\n@media (max-width: 600px) {\n .r-sidebar.customizer-600 {\n width: 100vw;\n }\n}\n.r-sidebar.customizer-700 {\n width: 700px;\n}\n@media (max-width: 700px) {\n .r-sidebar.customizer-700 {\n width: 100vw;\n }\n}\n.r-sidebar.customizer-800 {\n width: 800px;\n}\n@media (max-width: 800px) {\n .r-sidebar.customizer-800 {\n width: 100vw;\n }\n}\n.r-sidebar.customizer-900 {\n width: 900px;\n}\n@media (max-width: 900px) {\n .r-sidebar.customizer-900 {\n width: 100vw;\n }\n}\n.r-sidebar.customizer-1000 {\n width: 1000px;\n}\n@media (max-width: 1000px) {\n .r-sidebar.customizer-1000 {\n width: 100vw;\n }\n}\n.r-sidebar.customizer-1500 {\n width: 1500px;\n}\n@media (max-width: 1500px) {\n .r-sidebar.customizer-1500 {\n width: 100vw;\n }\n}\n.r-sidebar.fullscreen {\n width: 100%;\n}\n.r-sidebar.open {\n right: 0;\n}\n\n.r-table-edit .react-datepicker__year-read-view--down-arrow,\n.r-table-edit .react-datepicker__month-read-view--down-arrow,\n.r-table-edit .react-datepicker__month-year-read-view--down-arrow,\n.r-table-edit .react-datepicker__navigation-icon::before {\n border-color: #e0e0e0;\n border-style: solid;\n border-width: 3px 3px 0 0;\n content: \"\";\n display: block;\n height: 9px;\n position: absolute;\n top: 6px;\n width: 9px;\n}\n.r-table-edit .react-datepicker-wrapper {\n display: inline-block;\n width: 100% !important;\n padding: 0;\n border: 0;\n}\n.r-table-edit .react-datepicker-wrapper .react-datepicker__input-container input {\n height: 29px !important;\n}\n.r-table-edit .react-datepicker {\n font-family: \"Helvetica Neue\", helvetica, arial, sans-serif;\n font-size: 0.8rem;\n background-color: #FFFFFF;\n color: #000000;\n border: 1px solid #e0e0e0;\n border-radius: 0.3rem;\n display: inline-block;\n position: relative;\n line-height: initial;\n}\n.r-table-edit .react-datepicker--time-only .react-datepicker__time-container {\n border-left: 0;\n}\n.r-table-edit .react-datepicker--time-only .react-datepicker__time,\n.r-table-edit .react-datepicker--time-only .react-datepicker__time-box {\n border-bottom-left-radius: 0.3rem;\n border-bottom-right-radius: 0.3rem;\n}\n.r-table-edit .react-datepicker-popper {\n position: relative;\n line-height: 0;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__triangle {\n stroke: #e0e0e0;\n}\n.r-table-edit .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {\n fill: #f0f0f0;\n color: #f0f0f0;\n}\n.r-table-edit .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {\n fill: #FFFFFF;\n color: #FFFFFF;\n}\n.r-table-edit .react-datepicker__header {\n text-align: center;\n background-color: #FFFFFF;\n border-bottom: 1px solid #e0e0e0;\n border-top-left-radius: 0.3rem;\n padding: 8px 0;\n position: relative;\n}\n.r-table-edit .react-datepicker__header--time {\n padding-bottom: 8px;\n padding-left: 5px;\n padding-right: 5px;\n}\n.r-table-edit .react-datepicker__header--time:not(.react-datepicker__header--time--only) {\n border-top-left-radius: 0;\n}\n.r-table-edit .react-datepicker__header:not(.react-datepicker__header--has-time-select) {\n border-top-right-radius: 0.3rem;\n}\n.r-table-edit .react-datepicker__year-dropdown-container--select,\n.r-table-edit .react-datepicker__month-dropdown-container--select,\n.r-table-edit .react-datepicker__month-year-dropdown-container--select,\n.r-table-edit .react-datepicker__year-dropdown-container--scroll,\n.r-table-edit .react-datepicker__month-dropdown-container--scroll,\n.r-table-edit .react-datepicker__month-year-dropdown-container--scroll {\n display: inline-block;\n margin: 0 15px;\n}\n.r-table-edit .react-datepicker__current-month,\n.r-table-edit .react-datepicker-time__header,\n.r-table-edit .react-datepicker-year-header {\n margin-top: 0;\n color: #000000;\n font-weight: bold;\n font-size: 0.944rem;\n}\n.r-table-edit h2.react-datepicker__current-month {\n padding: 0;\n margin: 0;\n}\n.r-table-edit .react-datepicker-time__header {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n}\n.r-table-edit .react-datepicker__navigation {\n align-items: center;\n background: none;\n display: flex;\n justify-content: center;\n text-align: center;\n cursor: pointer;\n position: absolute;\n top: 2px;\n padding: 0;\n border: none;\n z-index: 1;\n height: 32px;\n width: 32px;\n text-indent: -999em;\n overflow: hidden;\n}\n.r-table-edit .react-datepicker__navigation--previous {\n left: 2px;\n}\n.r-table-edit .react-datepicker__navigation--next {\n right: 2px;\n}\n.r-table-edit .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {\n right: 85px;\n}\n.r-table-edit .react-datepicker__navigation--years {\n position: relative;\n top: 0;\n display: block;\n margin-left: auto;\n margin-right: auto;\n}\n.r-table-edit .react-datepicker__navigation--years-previous {\n top: 4px;\n}\n.r-table-edit .react-datepicker__navigation--years-upcoming {\n top: -4px;\n}\n.r-table-edit .react-datepicker__navigation:hover *::before {\n border-color: #eb4619;\n}\n.r-table-edit .react-datepicker__navigation-icon {\n position: relative;\n top: -1px;\n font-size: 20px;\n width: 0;\n}\n.r-table-edit .react-datepicker__navigation-icon--next {\n left: -2px;\n}\n.r-table-edit .react-datepicker__navigation-icon--next::before {\n transform: rotate(45deg);\n left: -7px;\n}\n.r-table-edit .react-datepicker__navigation-icon--previous {\n right: -2px;\n}\n.r-table-edit .react-datepicker__navigation-icon--previous::before {\n transform: rotate(225deg);\n right: -7px;\n}\n.r-table-edit .react-datepicker__month-container {\n float: left;\n}\n.r-table-edit .react-datepicker__year {\n margin: 0.4rem;\n text-align: center;\n}\n.r-table-edit .react-datepicker__year-wrapper {\n display: flex;\n flex-wrap: wrap;\n max-width: 180px;\n}\n.r-table-edit .react-datepicker__year .react-datepicker__year-text {\n display: inline-block;\n width: 4rem;\n margin: 2px;\n}\n.r-table-edit .react-datepicker__month {\n margin: 0.4rem;\n text-align: center;\n}\n.r-table-edit .react-datepicker__month .react-datepicker__month-text,\n.r-table-edit .react-datepicker__month .react-datepicker__quarter-text {\n display: inline-block;\n width: 4rem;\n margin: 2px;\n}\n.r-table-edit .react-datepicker__input-time-container {\n clear: both;\n width: 100%;\n float: left;\n margin: 5px 0 10px 15px;\n text-align: left;\n}\n.r-table-edit .react-datepicker__input-time-container .react-datepicker-time__caption {\n display: inline-block;\n}\n.r-table-edit .react-datepicker__input-time-container .react-datepicker-time__input-container {\n display: inline-block;\n}\n.r-table-edit .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {\n display: inline-block;\n margin-left: 10px;\n}\n.r-table-edit .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {\n width: auto;\n}\n.r-table-edit .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,\n.r-table-edit .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n.r-table-edit .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {\n margin-left: 5px;\n display: inline-block;\n}\n.r-table-edit .react-datepicker__time-container {\n float: right;\n border-left: 1px solid #e0e0e0;\n width: 85px;\n}\n.r-table-edit .react-datepicker__time-container--with-today-button {\n display: inline;\n border: 1px solid #e0e0e0;\n border-radius: 0.3rem;\n position: absolute;\n right: -87px;\n top: 0;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time {\n position: relative;\n background: white;\n border-bottom-right-radius: 0.3rem;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {\n width: 85px;\n overflow-x: hidden;\n margin: 0 auto;\n text-align: center;\n border-bottom-right-radius: 0.3rem;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {\n list-style: none;\n margin: 0;\n height: calc(195px + 0.85rem);\n overflow-y: scroll;\n padding-right: 0;\n padding-left: 0;\n width: 100%;\n box-sizing: content-box;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {\n height: 30px;\n padding: 5px 10px;\n white-space: nowrap;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {\n cursor: pointer;\n background-color: #f0f0f0;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {\n background-color: #216ba5;\n color: white;\n font-weight: bold;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {\n background-color: #216ba5;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {\n color: #ccc;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {\n cursor: default;\n background-color: transparent;\n}\n.r-table-edit .react-datepicker__week-number {\n color: #ccc;\n display: inline-block;\n width: 1.7rem;\n line-height: 1.7rem;\n text-align: center;\n margin: 0.166rem;\n}\n.r-table-edit .react-datepicker__week-number.react-datepicker__week-number--clickable {\n cursor: pointer;\n}\n.r-table-edit .react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected,\n.react-datepicker__week-number--keyboard-selected):hover {\n border-radius: 0.3rem;\n background-color: #f0f0f0;\n}\n.r-table-edit .react-datepicker__week-number--selected {\n border-radius: 0.3rem;\n background-color: #216ba5;\n color: #FFFFFF;\n}\n.r-table-edit .react-datepicker__week-number--selected:hover {\n background-color: rgb(28.75, 93.2196969697, 143.75);\n}\n.r-table-edit .react-datepicker__week-number--keyboard-selected {\n border-radius: 0.3rem;\n background-color: rgb(41.5, 134.5606060606, 207.5);\n color: #FFFFFF;\n}\n.r-table-edit .react-datepicker__week-number--keyboard-selected:hover {\n background-color: rgb(28.75, 93.2196969697, 143.75);\n}\n.r-table-edit .react-datepicker__day-names {\n white-space: nowrap;\n margin-bottom: -8px;\n}\n.r-table-edit .react-datepicker__week {\n white-space: nowrap;\n}\n.r-table-edit .react-datepicker__day-name,\n.r-table-edit .react-datepicker__day,\n.r-table-edit .react-datepicker__time-name {\n color: #000000;\n display: inline-block;\n width: 1.7rem;\n line-height: 1.7rem;\n text-align: center;\n margin: 0.166rem;\n}\n.r-table-edit .react-datepicker__day,\n.r-table-edit .react-datepicker__month-text,\n.r-table-edit .react-datepicker__quarter-text,\n.r-table-edit .react-datepicker__year-text {\n cursor: pointer;\n}\n.r-table-edit .react-datepicker__day:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__month-text:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__quarter-text:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__year-text:not([aria-disabled=true]):hover {\n border-radius: 0.3rem;\n background-color: #FFFFFF;\n}\n.r-table-edit .react-datepicker__day--today,\n.r-table-edit .react-datepicker__month-text--today,\n.r-table-edit .react-datepicker__quarter-text--today,\n.r-table-edit .react-datepicker__year-text--today {\n font-weight: bold;\n}\n.r-table-edit .react-datepicker__day--highlighted,\n.r-table-edit .react-datepicker__month-text--highlighted,\n.r-table-edit .react-datepicker__quarter-text--highlighted,\n.r-table-edit .react-datepicker__year-text--highlighted {\n border-radius: 0.3rem;\n background-color: #3dcc4a;\n color: #FFFFFF;\n}\n.r-table-edit .react-datepicker__day--highlighted:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__month-text--highlighted:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__quarter-text--highlighted:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__year-text--highlighted:not([aria-disabled=true]):hover {\n background-color: rgb(49.8551020408, 189.6448979592, 62.5632653061);\n}\n.r-table-edit .react-datepicker__day--highlighted-custom-1,\n.r-table-edit .react-datepicker__month-text--highlighted-custom-1,\n.r-table-edit .react-datepicker__quarter-text--highlighted-custom-1,\n.r-table-edit .react-datepicker__year-text--highlighted-custom-1 {\n color: magenta;\n}\n.r-table-edit .react-datepicker__day--highlighted-custom-2,\n.r-table-edit .react-datepicker__month-text--highlighted-custom-2,\n.r-table-edit .react-datepicker__quarter-text--highlighted-custom-2,\n.r-table-edit .react-datepicker__year-text--highlighted-custom-2 {\n color: green;\n}\n.r-table-edit .react-datepicker__day--holidays,\n.r-table-edit .react-datepicker__month-text--holidays,\n.r-table-edit .react-datepicker__quarter-text--holidays,\n.r-table-edit .react-datepicker__year-text--holidays {\n position: relative;\n border-radius: 0.3rem;\n background-color: #ff6803;\n color: #FFFFFF;\n}\n.r-table-edit .react-datepicker__day--holidays .overlay,\n.r-table-edit .react-datepicker__month-text--holidays .overlay,\n.r-table-edit .react-datepicker__quarter-text--holidays .overlay,\n.r-table-edit .react-datepicker__year-text--holidays .overlay {\n position: absolute;\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%);\n background-color: #333;\n color: #FFFFFF;\n padding: 4px;\n border-radius: 4px;\n white-space: nowrap;\n visibility: hidden;\n opacity: 0;\n transition: visibility 0s, opacity 0.3s ease-in-out;\n}\n.r-table-edit .react-datepicker__day--holidays:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__month-text--holidays:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__quarter-text--holidays:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__year-text--holidays:not([aria-disabled=true]):hover {\n background-color: rgb(207, 82.9642857143, 0);\n}\n.r-table-edit .react-datepicker__day--holidays:hover .overlay,\n.r-table-edit .react-datepicker__month-text--holidays:hover .overlay,\n.r-table-edit .react-datepicker__quarter-text--holidays:hover .overlay,\n.r-table-edit .react-datepicker__year-text--holidays:hover .overlay {\n visibility: visible;\n opacity: 1;\n}\n.r-table-edit .react-datepicker__day--selected,\n.r-table-edit .react-datepicker__day--in-selecting-range,\n.r-table-edit .react-datepicker__day--in-range,\n.r-table-edit .react-datepicker__month-text--selected,\n.r-table-edit .react-datepicker__month-text--in-selecting-range,\n.r-table-edit .react-datepicker__month-text--in-range,\n.r-table-edit .react-datepicker__quarter-text--selected,\n.r-table-edit .react-datepicker__quarter-text--in-selecting-range,\n.r-table-edit .react-datepicker__quarter-text--in-range,\n.r-table-edit .react-datepicker__year-text--selected,\n.r-table-edit .react-datepicker__year-text--in-selecting-range,\n.r-table-edit .react-datepicker__year-text--in-range {\n border-radius: 0.3rem;\n background-color: #216ba5;\n color: #FFFFFF;\n}\n.r-table-edit .react-datepicker__day--selected:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__day--in-selecting-range:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__day--in-range:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__month-text--selected:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__month-text--in-selecting-range:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__month-text--in-range:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__quarter-text--selected:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__quarter-text--in-selecting-range:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__quarter-text--in-range:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__year-text--selected:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__year-text--in-selecting-range:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__year-text--in-range:not([aria-disabled=true]):hover {\n background-color: rgb(28.75, 93.2196969697, 143.75);\n}\n.r-table-edit .react-datepicker__day--keyboard-selected,\n.r-table-edit .react-datepicker__month-text--keyboard-selected,\n.r-table-edit .react-datepicker__quarter-text--keyboard-selected,\n.r-table-edit .react-datepicker__year-text--keyboard-selected {\n border-radius: 0.3rem;\n background-color: rgb(186.25, 217.0833333333, 241.25);\n color: rgb(0, 0, 0);\n}\n.r-table-edit .react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__month-text--keyboard-selected:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__quarter-text--keyboard-selected:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__year-text--keyboard-selected:not([aria-disabled=true]):hover {\n background-color: rgb(28.75, 93.2196969697, 143.75);\n}\n.r-table-edit .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,\n.react-datepicker__month-text--in-range,\n.react-datepicker__quarter-text--in-range,\n.react-datepicker__year-text--in-range),\n.r-table-edit .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,\n.react-datepicker__month-text--in-range,\n.react-datepicker__quarter-text--in-range,\n.react-datepicker__year-text--in-range),\n.r-table-edit .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,\n.react-datepicker__month-text--in-range,\n.react-datepicker__quarter-text--in-range,\n.react-datepicker__year-text--in-range),\n.r-table-edit .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,\n.react-datepicker__month-text--in-range,\n.react-datepicker__quarter-text--in-range,\n.react-datepicker__year-text--in-range) {\n background-color: rgba(33, 107, 165, 0.5);\n}\n.r-table-edit .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.r-table-edit .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.r-table-edit .react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.r-table-edit .react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.r-table-edit .react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.r-table-edit .react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.r-table-edit .react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.r-table-edit .react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range) {\n background-color: #f0f0f0;\n color: #000000;\n}\n.r-table-edit .react-datepicker__day--disabled,\n.r-table-edit .react-datepicker__month-text--disabled,\n.r-table-edit .react-datepicker__quarter-text--disabled,\n.r-table-edit .react-datepicker__year-text--disabled {\n cursor: default;\n color: #ccc;\n}\n.r-table-edit .react-datepicker__day--disabled .overlay,\n.r-table-edit .react-datepicker__month-text--disabled .overlay,\n.r-table-edit .react-datepicker__quarter-text--disabled .overlay,\n.r-table-edit .react-datepicker__year-text--disabled .overlay {\n position: absolute;\n bottom: 70%;\n left: 50%;\n transform: translateX(-50%);\n background-color: #333;\n color: #FFFFFF;\n padding: 4px;\n border-radius: 4px;\n white-space: nowrap;\n visibility: hidden;\n opacity: 0;\n transition: visibility 0s, opacity 0.3s ease-in-out;\n}\n.r-table-edit .react-datepicker__input-container {\n position: relative;\n display: inline-block;\n width: 100%;\n}\n.r-table-edit .react-datepicker__input-container .react-datepicker__calendar-icon {\n position: absolute;\n padding: 0.5rem;\n box-sizing: content-box;\n}\n.r-table-edit .react-datepicker__view-calendar-icon input {\n padding: 6px 10px 5px 25px;\n}\n.r-table-edit .react-datepicker__year-read-view,\n.r-table-edit .react-datepicker__month-read-view,\n.r-table-edit .react-datepicker__month-year-read-view {\n border: 1px solid transparent;\n border-radius: 0.3rem;\n position: relative;\n}\n.r-table-edit .react-datepicker__year-read-view:hover,\n.r-table-edit .react-datepicker__month-read-view:hover,\n.r-table-edit .react-datepicker__month-year-read-view:hover {\n cursor: pointer;\n}\n.r-table-edit .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,\n.r-table-edit .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,\n.r-table-edit .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,\n.r-table-edit .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,\n.r-table-edit .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,\n.r-table-edit .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {\n border-top-color: rgb(178.5, 178.5, 178.5);\n}\n.r-table-edit .react-datepicker__year-read-view--down-arrow,\n.r-table-edit .react-datepicker__month-read-view--down-arrow,\n.r-table-edit .react-datepicker__month-year-read-view--down-arrow {\n transform: rotate(135deg);\n right: -16px;\n top: 0;\n}\n.r-table-edit .react-datepicker__year-dropdown,\n.r-table-edit .react-datepicker__month-dropdown,\n.r-table-edit .react-datepicker__month-year-dropdown {\n background-color: #f0f0f0;\n position: absolute;\n width: 50%;\n left: 25%;\n top: 30px;\n z-index: 1;\n text-align: center;\n border-radius: 0.3rem;\n border: 1px solid #e0e0e0;\n}\n.r-table-edit .react-datepicker__year-dropdown:hover,\n.r-table-edit .react-datepicker__month-dropdown:hover,\n.r-table-edit .react-datepicker__month-year-dropdown:hover {\n cursor: pointer;\n}\n.r-table-edit .react-datepicker__year-dropdown--scrollable,\n.r-table-edit .react-datepicker__month-dropdown--scrollable,\n.r-table-edit .react-datepicker__month-year-dropdown--scrollable {\n height: 150px;\n overflow-y: scroll;\n}\n.r-table-edit .react-datepicker__year-option,\n.r-table-edit .react-datepicker__month-option,\n.r-table-edit .react-datepicker__month-year-option {\n line-height: 20px;\n width: 100%;\n display: block;\n margin-left: auto;\n margin-right: auto;\n}\n.r-table-edit .react-datepicker__year-option:first-of-type,\n.r-table-edit .react-datepicker__month-option:first-of-type,\n.r-table-edit .react-datepicker__month-year-option:first-of-type {\n border-top-left-radius: 0.3rem;\n border-top-right-radius: 0.3rem;\n}\n.r-table-edit .react-datepicker__year-option:last-of-type,\n.r-table-edit .react-datepicker__month-option:last-of-type,\n.r-table-edit .react-datepicker__month-year-option:last-of-type {\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n border-bottom-left-radius: 0.3rem;\n border-bottom-right-radius: 0.3rem;\n}\n.r-table-edit .react-datepicker__year-option:hover,\n.r-table-edit .react-datepicker__month-option:hover,\n.r-table-edit .react-datepicker__month-year-option:hover {\n background-color: #ccc;\n}\n.r-table-edit .react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,\n.r-table-edit .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,\n.r-table-edit .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {\n border-bottom-color: rgb(178.5, 178.5, 178.5);\n}\n.r-table-edit .react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,\n.r-table-edit .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,\n.r-table-edit .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {\n border-top-color: rgb(178.5, 178.5, 178.5);\n}\n.r-table-edit .react-datepicker__year-option--selected,\n.r-table-edit .react-datepicker__month-option--selected,\n.r-table-edit .react-datepicker__month-year-option--selected {\n position: absolute;\n left: 15px;\n}\n.r-table-edit .react-datepicker__close-icon {\n cursor: pointer;\n background-color: transparent;\n border: 0;\n outline: 0;\n padding: 0 6px 0 0;\n position: absolute;\n top: 0;\n right: 0;\n height: 100%;\n display: table-cell;\n vertical-align: middle;\n}\n.r-table-edit .react-datepicker__close-icon::after {\n cursor: pointer;\n background-color: transparent;\n color: #c4c4c4;\n height: 16px;\n width: 16px;\n padding: 0px 2px;\n font-size: 25px;\n font-weight: 500;\n line-height: 0.5;\n text-align: center;\n display: table-cell;\n vertical-align: middle;\n content: \"×\";\n}\n.r-table-edit .react-datepicker__close-icon:hover::after {\n color: rgba(0, 0, 0, 0.8705882353) !important;\n}\n.r-table-edit .react-datepicker__close-icon--disabled {\n cursor: default;\n}\n.r-table-edit .react-datepicker__close-icon--disabled::after {\n cursor: default;\n background-color: #ccc;\n}\n.r-table-edit .react-datepicker__today-button {\n background: #f0f0f0;\n border-top: 1px solid #e0e0e0;\n cursor: pointer;\n text-align: center;\n font-weight: bold;\n padding: 5px 0;\n clear: left;\n}\n.r-table-edit .react-datepicker__portal {\n position: fixed;\n width: 100vw;\n height: 100vh;\n background-color: rgba(0, 0, 0, 0.8);\n left: 0;\n top: 0;\n justify-content: center;\n align-items: center;\n display: flex;\n z-index: 2147483647;\n}\n.r-table-edit .react-datepicker__portal .react-datepicker__day-name,\n.r-table-edit .react-datepicker__portal .react-datepicker__day,\n.r-table-edit .react-datepicker__portal .react-datepicker__time-name {\n width: 3rem;\n line-height: 3rem;\n}\n@media (max-width: 400px), (max-height: 550px) {\n .r-table-edit .react-datepicker__portal .react-datepicker__day-name,\n .r-table-edit .react-datepicker__portal .react-datepicker__day,\n .r-table-edit .react-datepicker__portal .react-datepicker__time-name {\n width: 2rem;\n line-height: 2rem;\n }\n}\n.r-table-edit .react-datepicker__portal .react-datepicker__current-month,\n.r-table-edit .react-datepicker__portal .react-datepicker-time__header {\n font-size: 1.44rem;\n}\n.r-table-edit .react-datepicker__children-container {\n width: 13.8rem;\n margin: 0.4rem;\n padding-right: 0.2rem;\n padding-left: 0.2rem;\n height: auto;\n}\n.r-table-edit .react-datepicker__aria-live {\n position: absolute;\n clip-path: circle(0);\n border: 0;\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n width: 1px;\n white-space: nowrap;\n}\n.r-table-edit .react-datepicker__calendar-icon {\n width: 1em;\n height: 1em;\n vertical-align: -0.125em;\n}\n.r-table-edit .react-datepicker-popper {\n z-index: 999 !important;\n position: fixed !important;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__current-month {\n color: rgba(0, 0, 0, 0.9) !important;\n font-weight: 500 !important;\n display: none;\n font-family: Montserrat, Helvetica, Arial, serif !important;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown {\n font-family: Montserrat, Helvetica, Arial, serif !important;\n /* Giao diện của menu dropdown (tháng và năm) */\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown .react-datepicker__month-dropdown-container {\n margin: 0px 3px 0px 0px;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown .react-datepicker__year-dropdown-container {\n margin: 0px 0px 0px 3px;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown .react-datepicker__month-select:focus,\n.r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown .react-datepicker__year-select:focus {\n border: 1px solid #1989fa !important;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown .react-datepicker__month-select,\n.r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown .react-datepicker__year-select {\n background-color: #FFFFFF;\n height: 22px;\n border-radius: 2px;\n padding: 2px 0;\n border: 1px solid hsl(0, 0%, 80%);\n outline: none;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__navigation {\n margin-top: 4px;\n color: #eb4619;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__day-name {\n font-family: Montserrat, Helvetica, Arial, serif !important;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__day {\n outline: none;\n border-radius: 20px !important;\n font-family: Montserrat, Helvetica, Arial, serif !important;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__day:hover {\n background-color: rgba(235, 70, 25, 0.1) !important;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__day--today {\n color: #eb4619;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__day--today.react-datepicker__day--selected {\n color: #FFFFFF;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__day--today.react-datepicker__day--keyboard-selected {\n background-color: rgba(235, 70, 25, 0.1);\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__day--selected {\n background-color: #eb4619 !important;\n}\n\n.tab-custom {\n font-family: Roboto, \"Segoe UI\", GeezaPro, \"DejaVu Serif\", \"sans-serif\", -apple-system, BlinkMacSystemFont;\n display: flex;\n}\n.tab-custom.tab-parent {\n border-bottom: solid 1px #c9c9c9;\n}\n.tab-custom .btn-scroll {\n cursor: pointer;\n display: flex;\n align-items: center;\n}\n.tab-custom .tab-component::-webkit-scrollbar {\n display: none;\n /* Ẩn thanh cuộn nếu không cần */\n}\n.tab-custom .tab-component {\n white-space: nowrap;\n overflow-x: hidden;\n scroll-behavior: smooth;\n}\n.tab-custom .tab-component > * {\n display: inline-block;\n}\n.tab-custom .tab-component .tab-custom-item {\n display: inline-block;\n padding: 3px 10px;\n line-height: 23px;\n cursor: pointer;\n font-size: 13px;\n font-weight: 500;\n text-transform: uppercase;\n height: 30px;\n color: rgba(0, 0, 0, 0.5);\n}\n.tab-custom .tab-component .tab-custom-item.active {\n border-bottom: solid 2px #eb4619 !important;\n color: #eb4619;\n}\n.tab-custom.tab-child .tab-custom-item {\n font-size: 12px !important;\n line-height: 23px !important;\n border-radius: 5px 5px 0px 0px;\n margin: 8px 3px 0px 3px;\n box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;\n}\n\n.bs-stepper {\n background-color: #FFFFFF;\n box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);\n border-radius: 0.5rem;\n}\n.bs-stepper .bs-stepper-header {\n padding: 1.5rem 1.5rem;\n flex-wrap: wrap;\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n margin: 0;\n}\n.bs-stepper .bs-stepper-header .line {\n flex: 0;\n min-width: auto;\n min-height: auto;\n background-color: transparent;\n margin: 0;\n padding: 0 1.75rem;\n color: #283046;\n font-size: 1.5rem;\n}\n.bs-stepper .bs-stepper-header .step {\n margin-bottom: 0.25rem;\n margin-top: 0.25rem;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger {\n flex-wrap: nowrap;\n padding: 0;\n font-weight: normal;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-box {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 38px;\n height: 38px;\n padding: 0.5em 0;\n font-weight: 500;\n color: #babfc7;\n background-color: rgba(186, 191, 199, 0.12);\n border-radius: 0.35rem;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-label {\n text-align: left;\n margin: 0;\n margin-top: 0.5rem;\n margin-left: 1rem;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-label .bs-stepper-title {\n display: inherit;\n color: #283046;\n font-weight: 600;\n line-height: 1rem;\n margin-bottom: 0rem;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-label .bs-stepper-subtitle {\n font-weight: 400;\n font-size: 0.85rem;\n color: #b9b9c3;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger:hover {\n background-color: transparent;\n}\n.bs-stepper .bs-stepper-header .step.active .step-trigger .bs-stepper-box {\n background-color: #eb4619;\n color: #FFFFFF;\n box-shadow: 0 3px 6px 0 rgba(235, 70, 25, 0.4);\n}\n.bs-stepper .bs-stepper-header .step.active .step-trigger .bs-stepper-label .bs-stepper-title {\n color: #eb4619;\n}\n.bs-stepper .bs-stepper-header .step.crossed .step-trigger .bs-stepper-box {\n background-color: rgba(235, 70, 25, 0.12);\n color: #eb4619;\n}\n.bs-stepper .bs-stepper-header .step.crossed .step-trigger .bs-stepper-label .bs-stepper-title {\n color: #b9b9c3;\n}\n.bs-stepper .bs-stepper-header .step.crossed + .line {\n color: #eb4619;\n}\n.bs-stepper .bs-stepper-content {\n padding: 1.5rem 1.5rem;\n}\n.bs-stepper .bs-stepper-content .content {\n margin-left: 0;\n}\n.bs-stepper .bs-stepper-content .content .content-header {\n margin-bottom: 1rem;\n}\n.bs-stepper.vertical .bs-stepper-header {\n border-right: 1px solid #e0e0e0;\n border-bottom: none;\n}\n.bs-stepper.vertical .bs-stepper-header .step .step-trigger {\n padding: 1rem 0;\n}\n.bs-stepper.vertical .bs-stepper-header .line {\n display: none;\n}\n.bs-stepper.vertical .bs-stepper-content {\n width: 100%;\n padding-top: 2.5rem;\n}\n.bs-stepper.vertical .bs-stepper-content .content:not(.active) {\n display: none;\n}\n.bs-stepper.vertical.wizard-icons .step {\n text-align: center;\n}\n.bs-stepper.wizard-modern {\n background-color: transparent;\n box-shadow: none;\n}\n.bs-stepper.wizard-modern .bs-stepper-header {\n border: none;\n}\n.bs-stepper.wizard-modern .bs-stepper-content {\n background-color: #FFFFFF;\n border-radius: 0.5rem;\n box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);\n}\n\n.horizontal-wizard,\n.vertical-wizard,\n.modern-horizontal-wizard,\n.modern-vertical-wizard {\n margin-bottom: 2.2rem;\n}\n\nhtml[data-textdirection=rtl] .btn-prev,\nhtml[data-textdirection=rtl] .btn-next {\n display: flex;\n}\nhtml[data-textdirection=rtl] .btn-prev i,\nhtml[data-textdirection=rtl] .btn-prev svg,\nhtml[data-textdirection=rtl] .btn-next i,\nhtml[data-textdirection=rtl] .btn-next svg {\n transform: rotate(-180deg);\n}\n\n@media (max-width: 992px) {\n .bs-stepper .bs-stepper-header {\n flex-direction: column;\n align-items: flex-start;\n }\n .bs-stepper .bs-stepper-header .step .step-trigger {\n padding: 0.5rem 0 !important;\n flex-direction: row;\n }\n .bs-stepper .bs-stepper-header .line {\n display: none;\n }\n .bs-stepper.vertical {\n flex-direction: column;\n }\n .bs-stepper.vertical .bs-stepper-header {\n align-items: flex-start;\n }\n .bs-stepper.vertical .bs-stepper-content {\n padding-top: 1.5rem;\n }\n}\n.r-table-edit .r-grid {\n font-size: 12px;\n}\n.r-table-edit .r-grid .r-search {\n display: flex;\n position: relative;\n align-items: center;\n}\n.r-table-edit .r-grid .r-search .input__value {\n z-index: 1;\n}\n.r-table-edit .r-grid .r-search .input__value.is-clearable {\n padding-right: 25px;\n}\n.r-table-edit .r-grid .r-search .input__clear-icon {\n position: absolute;\n right: 5px;\n z-index: 10;\n}\n.r-table-edit .r-grid .r-gridtable {\n -webkit-overflow-scrolling: touch;\n overflow-x: auto;\n overflow-y: scroll;\n position: relative;\n background-color: #FFFFFF;\n color: rgba(0, 0, 0, 0.8705882353);\n font-weight: 400;\n border: 1px solid #e0e0e0;\n /* Toàn bộ thanh cuộn */\n /* Nền của thanh cuộn */\n /* Thanh trượt (thumb) */\n /* Khi hover */\n}\n.r-table-edit .r-grid .r-gridtable table {\n table-layout: fixed;\n border-collapse: separate;\n border-spacing: 0px;\n}\n.r-table-edit .r-grid .r-gridtable::-webkit-scrollbar {\n width: 9px;\n /* Độ rộng của thanh cuộn */\n height: 9px;\n /* Độ cao của thanh cuộn */\n}\n.r-table-edit .r-grid .r-gridtable::-webkit-scrollbar-track {\n background: #FCFCFC;\n /* Màu nền nhạt */\n}\n.r-table-edit .r-grid .r-gridtable::-webkit-scrollbar-thumb {\n background: #8B8B8B;\n /* Màu xám nhạt */\n border-radius: 6px;\n /* Bo góc giống Edge */\n}\n.r-table-edit .r-grid .r-gridtable::-webkit-scrollbar-thumb:hover {\n background: #636363;\n /* Màu đậm hơn khi hover */\n}\n.r-table-edit .r-grid .r-gridtable .react-resizable-handle.react-resizable-handle-se {\n position: absolute;\n right: 0px;\n top: 0px;\n width: 10px;\n height: 100%;\n cursor: col-resize;\n background-image: none;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter svg.active {\n color: #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter-popup .react-select-table .select-value {\n line-height: 20px !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter-popup .react-select-table .select-placeholder {\n line-height: 20px !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter-popup .react-select-table .r-select-is-focus {\n border-color: #eb4619 !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter-popup .form-control:focus {\n border-color: #eb4619 !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-no-data {\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 14px;\n padding: 20px 9px;\n color: #8f8f8f;\n}\n.r-table-edit .r-grid .r-gridtable .r-loading-overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(255, 255, 255, 0.3);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 3;\n}\n.r-table-edit .r-grid .r-gridtable .r-loading-overlay .r-loading {\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 14px;\n padding: 7px 9px;\n color: #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed {\n z-index: 2 !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed.fix-right .r-headercell-div {\n border-left: 1px solid #e0e0e0;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed.fix-left .r-headercell-div {\n border-right: 1px solid #e0e0e0;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed.fix-left.fixed-last .r-headercell-div {\n box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed.fix-right.fixed-last .r-headercell-div {\n box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .r-headercell {\n color: rgba(0, 0, 0, 0.8705882353);\n position: sticky;\n padding: 0px;\n height: 42px;\n z-index: 1;\n border-width: 0px;\n line-height: 16px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .r-headercell .r-headercell-div {\n border-right: 1px solid #e0e0e0;\n border-bottom: 1px solid #e0e0e0;\n background-color: #FFFFFF;\n display: flex;\n align-items: center;\n text-align: center;\n padding: 5px 10px;\n height: 100%;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .r-headercell .header-content {\n display: flex;\n flex: 1 1 0%;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .r-headercell .header-content .text-content {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row:first-of-type .r-rowcell-div {\n border-top-color: #FFFFFF;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row {\n font-size: 13px;\n will-change: transform;\n backface-visibility: hidden;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .cell-fixed {\n position: sticky;\n z-index: 1;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .cell-fixed .r-rowcell.r-cell-selected-right {\n margin-right: 1px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell {\n background-color: #FFFFFF;\n border-bottom: 1px solid #e0e0e0;\n border-right: 1px solid #e0e0e0;\n vertical-align: middle;\n padding: 0;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.cell-fixed .r-rowcell-div.r-cell-selected-right {\n padding-right: 1px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.fix-right {\n border-left: 1px solid #e0e0e0;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.fix-right.fixed-last {\n border-left: 1px solid #e0e0e0;\n box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.fix-left.fixed-last {\n border-right: 1px solid #e0e0e0;\n box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.r-active-row {\n background-color: #fce6df;\n border-right: 2px solid #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div {\n min-height: 28px !important;\n border: 1px solid transparent;\n position: relative;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-icon-expand {\n transition: transform 0.3s ease;\n position: absolute;\n left: 3px;\n top: 8px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-icon-expand.is-open {\n transform: rotate(90deg);\n -moz-transform: rotate(90deg);\n -webkit-transform: rotate(90deg);\n -o-transform: rotate(90deg);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .arrow-context-menu {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 15px;\n width: 15px;\n background-color: #FFFFFF;\n border-radius: 10px;\n border: 1px solid #e0e0e0;\n box-shadow: 0px 0px 2px #e0e0e0;\n right: -5px;\n bottom: -5px;\n z-index: 10000;\n cursor: pointer;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.command {\n padding-top: 0px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div:focus {\n outline: none;\n /* bỏ viền focus mặc định */\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.r-cell-disable {\n background-color: #f9f9f9;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.r-active-cell {\n background-color: rgb(255, 240, 240);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-cell-text:focus {\n outline: none;\n /* bỏ viền focus mặc định */\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-icon-invalid {\n position: absolute;\n width: 10px;\n height: 10px;\n top: 0px;\n left: -6px;\n rotate: -90deg;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-drag-icon {\n position: absolute;\n border: 1px solid #FFFFFF;\n bottom: -2px;\n right: -2px;\n width: 7px;\n height: 7px;\n background-color: #eb4619;\n border-radius: 20%;\n cursor: crosshair;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-cell-text {\n padding: 0px 7px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n display: flex;\n align-items: center;\n min-width: 0;\n min-height: 28px;\n flex: 1;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-cell-text .r-drop-icon {\n position: absolute;\n fill: #c4c4c4 !important;\n right: 8.5px;\n top: 3.5px;\n cursor: pointer;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .is-invalid {\n border-width: 0px !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .is-invalid .r-select-is-invalid {\n border-width: 0px !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.r-cell-selected-top {\n border-top: 1px solid #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.r-cell-selected-bottom {\n border-bottom: 1px solid #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.r-cell-selected-left {\n border-left: 1px solid #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.r-cell-selected-right {\n border-right: 1px solid #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .react-select-table.is-invalid {\n border-width: 0px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .react-select-table .r-select-is-focus {\n border-width: 0px !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .react-select-table .select-table-control {\n border-radius: 0px;\n border-width: 0px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .react-select-table .select-table-control.r-select-is-focus {\n border: 1px solid #1989fa;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit .display-value {\n cursor: pointer;\n border-radius: 0px;\n background-color: #FFFFFF;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit .input-display {\n border-width: 0px;\n box-sizing: border-box;\n border: none;\n /* Loại bỏ border */\n outline: none;\n /* Loại bỏ outline khi input được chọn */\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit .form-input-content .form-control {\n border-radius: 4px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit .form-input-content .form-control:focus {\n border: 1px solid #1989fa;\n outline: none;\n box-shadow: none;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit input::placeholder {\n color: #eb4619;\n opacity: 1;\n /* Firefox */\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__display {\n vertical-align: middle;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__edit {\n display: none;\n text-align: left;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__edit.active {\n display: flex;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__edit .form-label {\n font-size: 10px;\n margin-bottom: 0px;\n text-align: left;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__edit .form-control {\n border-radius: 0px;\n height: 23px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__edit .form__element {\n margin: 0px 2px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-date-input {\n text-align: center;\n height: 29px;\n border: 1px solid #ccc;\n border-radius: 4px;\n padding: 5px;\n font-size: 14px;\n background-color: #f9f9f9;\n color: #333;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-control:focus {\n border-radius: 0px;\n border-width: 0px;\n background-color: #f8f8f8;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div input {\n font-size: 13px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridfoot {\n color: #283046;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridfoot .r-row {\n bottom: 0px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridfoot .r-row .r-footer {\n background-color: #fafafa;\n font-size: 14px;\n font-weight: 600;\n width: 100px;\n position: sticky;\n z-index: 1;\n bottom: 0;\n border-width: 0px;\n padding: 0px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridfoot .r-row .r-footer.cell-fixed {\n z-index: 2;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridfoot .r-row .r-footer .r-footer-div {\n height: 30px;\n padding: 5px 7px;\n}\n.r-table-edit .r-grid .r-gridtable .formula-dropdown {\n box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 15px;\n}\n.r-table-edit .r-grid .text-left .form-label {\n text-align: left;\n}\n.r-table-edit .r-grid .r-toolbar {\n border: 1px solid #e0e0e0;\n height: 44px;\n}\n.r-table-edit .r-grid .r-toolbar.r-toolbar-bottom {\n border-top-width: 0px;\n}\n.r-table-edit .r-grid .r-toolbar.r-toolbar-top {\n border-bottom-width: 0px;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-left {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-left .r-toolbar-item {\n margin: 7px 0px 7px 7px;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-center {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-center .r-toolbar-item {\n margin: 7px 3px 7px 3px;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-right {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-right .r-toolbar-item {\n margin: 7px 7px 7px 0px;\n}\n.r-table-edit .r-setting-container {\n margin: 0px 15px;\n}\n.r-table-edit .r-setting-container .r-setting-content {\n -webkit-overflow-scrolling: touch;\n overflow-x: auto;\n overflow-y: scroll;\n position: relative;\n background-color: #FFFFFF;\n color: rgba(0, 0, 0, 0.8705882353);\n font-weight: 400;\n border-left: 1px solid #e0e0e0;\n border-right: 1px solid #e0e0e0;\n /* Toàn bộ thanh cuộn */\n /* Nền của thanh cuộn */\n /* Thanh trượt (thumb) */\n /* Khi hover */\n}\n.r-table-edit .r-setting-container .r-setting-content::-webkit-scrollbar {\n width: 9px;\n /* Độ rộng của thanh cuộn */\n height: 9px;\n /* Độ cao của thanh cuộn */\n}\n.r-table-edit .r-setting-container .r-setting-content::-webkit-scrollbar-track {\n background: #FCFCFC;\n /* Màu nền nhạt */\n}\n.r-table-edit .r-setting-container .r-setting-content::-webkit-scrollbar-thumb {\n background: #8B8B8B;\n /* Màu xám nhạt */\n border-radius: 6px;\n /* Bo góc giống Edge */\n}\n.r-table-edit .r-setting-container .r-setting-content::-webkit-scrollbar-thumb:hover {\n background: #636363;\n /* Màu đậm hơn khi hover */\n}\n.r-table-edit .r-setting-container .r-setting-row {\n padding: 5px !important;\n margin: 0px;\n border-bottom: 1px solid #e0e0e0;\n font-size: 13px;\n display: flex;\n align-items: center;\n}\n.r-table-edit .r-setting-container .r-setting-row .r-setting-cell {\n padding-right: 10px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.r-table-edit .r-setting-container .r-setting-row .r-setting-cell .form-control {\n font-size: 13px !important;\n}\n.r-table-edit .r-setting-container .r-setting-row.r-setting-header {\n font-size: 12px !important;\n}\n.r-table-edit.r-virtualized-table .r-row:hover .r-rowcell {\n background-color: #fce6df !important;\n}\n.r-table-edit .r-pager {\n border: 1px solid #e0e0e0;\n border-top-width: 0px;\n min-height: 50px;\n width: 100%;\n display: inline-block;\n}\n.r-table-edit .r-pager .r-pagercontainer {\n margin-left: 10px;\n float: left;\n height: 100%;\n display: block;\n align-items: center;\n}\n.r-table-edit .r-pager .r-pagercontainer .r-button {\n display: inline-block;\n margin: 9px 6px;\n height: 30px;\n width: 30px;\n padding: 6px;\n border-width: 0px;\n background-color: transparent;\n}\n.r-table-edit .r-pager .r-pagercontainer .r-button svg {\n font-size: 16px;\n}\n.r-table-edit .r-pager .r-pagercontainer .r-number {\n display: inline-block;\n margin: 10px 4px 0px 0px;\n height: 25px;\n width: 25px;\n font-size: 13px;\n padding-top: 4px;\n text-align: center;\n cursor: pointer;\n border-radius: 5px;\n}\n.r-table-edit .r-pager .r-pagercontainer .r-number.r-active {\n background-color: rgba(235, 70, 25, 0.1);\n color: #eb4619;\n}\n.r-table-edit .r-pager .r-pagercontainer .r-number:hover {\n border: 1px solid #eb4619;\n}\n.r-table-edit .r-pager .r-pagesize {\n margin-left: 20px;\n font-size: 13px;\n display: inline-block;\n}\n.r-table-edit .r-pager .r-pagesize .select-pagesize__menu-portal {\n z-index: 5;\n}\n.r-table-edit .r-pager .r-parentmsgbar {\n font-size: 13px;\n float: right;\n padding-bottom: 9px;\n padding-right: 18px;\n padding-top: 14px;\n}\n\n.r-tooltip .tooltip-inner {\n font-size: 11px;\n}\n.r-tooltip.tooltip-error ::before {\n border-top-color: rgb(235, 78, 78);\n}\n.r-tooltip.tooltip-error .tooltip-inner {\n background-color: rgb(235, 78, 78);\n}\n\n.btn-input-style {\n font-weight: 500;\n text-transform: uppercase;\n border: 1px solid #e0e0e0;\n border-radius: 5px;\n margin-left: 3px;\n height: 28px;\n padding: 2px 5px;\n cursor: pointer;\n}\n.btn-input-style:hover {\n background-color: rgba(235, 70, 25, 0.1);\n color: #eb4619;\n}\n.btn-input-style.active-custom {\n background-color: #eb4619;\n color: #FFFFFF;\n}";
41286
+ var css_248z$2 = "@charset \"UTF-8\";\n.react-select-table .select-table-control {\n opacity: 1;\n border: 1px solid hsl(0, 0%, 80%);\n border-radius: 0.357rem;\n width: 100%;\n height: 28px;\n background-color: #FFFFFF;\n display: flex;\n align-items: center;\n padding: 2px 8px;\n}\n.react-select-table .select-table-control .select-table-indicator svg {\n fill: #c4c4c4 !important;\n}\n.react-select-table .select-table-control .icon-clear {\n font-size: 25px;\n margin-top: 2px;\n font-weight: 500;\n color: #c4c4c4;\n}\n.react-select-table .select-table-control .icon-clear:hover {\n color: rgba(0, 0, 0, 0.8705882353) !important;\n}\n.react-select-table .select-table-control.r-select-is-open .select-table-indicator svg {\n fill: rgba(0, 0, 0, 0.8705882353) !important;\n}\n.react-select-table .select-table-control.r-select-is-invalid {\n border: 1px solid red !important;\n}\n.react-select-table .select-table-control.r-select-is-focus {\n border: 1px solid #1989fa !important;\n}\n.react-select-table .select-table-control.r-select-is-disabled {\n background-color: #efefef !important;\n}\n.react-select-table .select-table-control .select-table-container {\n position: relative;\n flex: 1;\n}\n.react-select-table .select-table-control .select-table-container .input-container {\n background-color: transparent;\n white-space: nowrap;\n top: 0px;\n left: 0px;\n display: inline;\n}\n.react-select-table .select-table-control .select-table-container .input-container .select-input {\n background-color: transparent;\n text-align: center;\n width: 100%;\n box-sizing: border-box;\n margin-left: -3px;\n border: none;\n /* Loại bỏ border */\n outline: none;\n /* Loại bỏ outline khi input được chọn */\n}\n.react-select-table .select-table-control .select-table-container .input-container .select-input:focus {\n border-width: 0px !important;\n}\n.react-select-table .select-table-control .select-table-container .select-placeholder {\n position: absolute;\n color: #283046;\n margin-top: 1px;\n background-color: transparent;\n}\n.react-select-table .select-table-control .select-table-container .select-value {\n position: absolute;\n background-color: transparent;\n bottom: 0px;\n left: 0px;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.react-select-table .formula-dropdown {\n min-width: min-content !important;\n box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 15px;\n}\n.react-select-table input::placeholder {\n color: #000000 !important;\n opacity: 1;\n /* Firefox */\n}\n\n.r-select-grid.r-select-tree-grid .r-select-gridtable .r-select-row:hover {\n background-color: rgba(235, 70, 25, 0.1) !important;\n color: #eb4619;\n}\n\n.r-select-grid {\n font-size: 12px;\n font-family: Montserrat, Helvetica, Arial, serif;\n font-weight: 500 !important;\n border-radius: 4px !important;\n overflow: hidden;\n}\n.r-select-grid table {\n table-layout: fixed;\n border-collapse: separate;\n border-spacing: 0px;\n}\n.r-select-grid .r-select-gridtable {\n -webkit-overflow-scrolling: touch;\n overflow-x: auto;\n overflow-y: auto;\n position: relative;\n background-color: #FFFFFF;\n color: rgba(0, 0, 0, 0.8705882353) !important;\n font-weight: 400 !important;\n font-size: 13px !important;\n /* Toàn bộ thanh cuộn */\n}\n.r-select-grid .r-select-gridtable::-webkit-scrollbar {\n width: 9px;\n height: 9px;\n}\n.r-select-grid .r-select-gridtable::-webkit-scrollbar-track {\n background: #FCFCFC;\n}\n.r-select-grid .r-select-gridtable::-webkit-scrollbar-thumb {\n background: #8B8B8B;\n border-radius: 6px;\n}\n.r-select-grid .r-select-gridtable::-webkit-scrollbar-thumb:hover {\n background: #636363;\n}\n.r-select-grid .r-select-gridtable .r-select-gridheader .r-select-row .r-select-headercell {\n color: rgba(0, 0, 0, 0.8705882353) !important;\n position: sticky;\n padding: 0px;\n height: 35px;\n z-index: 1;\n border-width: 0px;\n line-height: 16px;\n}\n.r-select-grid .r-select-gridtable .r-select-gridheader .r-select-row .r-select-headercell .r-select-headercell-div {\n border-bottom: 1px solid #e0e0e0;\n background-color: #fafafa;\n display: flex;\n align-items: center;\n text-align: center;\n padding: 5px 10px;\n height: 100%;\n}\n.r-select-grid .r-select-gridtable .r-select-gridheader .r-select-row .r-select-headercell .r-select-headercell-text {\n width: 100%;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row {\n background-color: #FFFFFF;\n cursor: pointer;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .cell-fixed {\n position: sticky;\n z-index: 1;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row.fisrt-row .r-select-rowcell {\n border-top-width: 0px !important;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row.last-row .r-select-rowcell {\n border-bottom: 1px solid #e0e0e0;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell {\n border-top: 1px solid #e0e0e0;\n height: 30px !important;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n padding: 7px 9px;\n vertical-align: middle !important;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell.r-select-move {\n background-color: rgba(235, 70, 25, 0.1) !important;\n color: #eb4619 !important;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell.r-select-active {\n background-color: #eb4619 !important;\n color: #FFFFFF !important;\n}\n.r-tooltip .r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell.r-hidden {\n display: none;\n}\n.r-tooltip .r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell.r-hidden ::after {\n display: none;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell .r-icon-expand {\n transition: transform 0.3s ease !important;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell .r-icon-expand.is-open {\n transform: rotate(90deg) !important;\n -moz-transform: rotate(90deg);\n -webkit-transform: rotate(90deg);\n -o-transform: rotate(90deg);\n}\n.r-select-grid .r-select-gridtable.no-header .r-select-rowcell {\n border: none !important;\n}\n.r-select-grid .r-no-data {\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 14px;\n padding: 7px 9px;\n color: #8f8f8f;\n}\n.r-select-grid .r-select-footer {\n height: 30px;\n background-color: #fafafa;\n}\n.r-select-grid .r-select-footer button {\n font-weight: 400 !important;\n font-size: 13px;\n}\n.r-select-grid .r-select-footer .r-btn {\n border-width: 0px !important;\n}\n\n.r-pagesize .react-select-table .select-table-control {\n border-radius: 0px;\n border: 0px;\n border-bottom: 1px solid #e0e0e0 !important;\n}\n.r-pagesize .react-select-table .select-table-control.r-select-is-focus {\n border: 0px !important;\n border-bottom: 1px solid #1989fa !important;\n}\n\n.r-sidebar {\n width: 400px;\n right: -400px;\n padding: 0;\n background-color: #FFFFFF;\n z-index: 1051;\n position: fixed;\n top: 0;\n bottom: 0;\n height: 100vh;\n height: calc(var(--vh, 1vh) * 100);\n transition: right 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99);\n backface-visibility: hidden;\n border-left: 1px solid rgba(0, 0, 0, 0.05);\n}\n.r-sidebar.open {\n box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 5px 15px 0 rgba(0, 0, 0, 0.08);\n right: 0;\n}\n.r-sidebar .modal-header {\n background-color: #FFFFFF;\n}\n.r-sidebar .modal-header .btn-close {\n padding: 0.8rem;\n box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.1);\n border-radius: 0.357rem;\n background-color: #FFFFFF;\n opacity: 1;\n transition: all 0.23s ease 0.1s;\n position: relative;\n transform: translate(18px, -10px);\n}\n.r-sidebar .modal-header .btn-close:hover, .r-sidebar .modal-header .btn-close:focus, .r-sidebar .modal-header .btn-close:active {\n opacity: 1;\n outline: none;\n transform: translate(15px, -2px);\n box-shadow: none;\n}\n\n.r-sidebar .react-select {\n max-width: 100%;\n}\n\n.r-sidebar {\n width: 400px;\n right: -100vw;\n height: 100vh;\n}\n.r-sidebar .r-handle {\n position: fixed;\n background-color: #FFFFFF;\n top: 50%;\n transform: translate(-50%, -50%);\n filter: drop-shadow(0.9px 0.9px 1.5px);\n height: 50px;\n display: flex;\n align-items: center;\n border-radius: 0px 5px 5px 0px;\n cursor: pointer;\n margin-left: 7px;\n z-index: 9;\n}\n.r-sidebar.customizer-md {\n width: 600px;\n}\n.r-sidebar.customizer-lg {\n width: 800px;\n}\n.r-sidebar.customizer-500 {\n width: 500px;\n}\n@media (max-width: 500px) {\n .r-sidebar.customizer-500 {\n width: 100vw;\n }\n}\n.r-sidebar.customizer-600 {\n width: 600px;\n}\n@media (max-width: 600px) {\n .r-sidebar.customizer-600 {\n width: 100vw;\n }\n}\n.r-sidebar.customizer-700 {\n width: 700px;\n}\n@media (max-width: 700px) {\n .r-sidebar.customizer-700 {\n width: 100vw;\n }\n}\n.r-sidebar.customizer-800 {\n width: 800px;\n}\n@media (max-width: 800px) {\n .r-sidebar.customizer-800 {\n width: 100vw;\n }\n}\n.r-sidebar.customizer-900 {\n width: 900px;\n}\n@media (max-width: 900px) {\n .r-sidebar.customizer-900 {\n width: 100vw;\n }\n}\n.r-sidebar.customizer-1000 {\n width: 1000px;\n}\n@media (max-width: 1000px) {\n .r-sidebar.customizer-1000 {\n width: 100vw;\n }\n}\n.r-sidebar.customizer-1500 {\n width: 1500px;\n}\n@media (max-width: 1500px) {\n .r-sidebar.customizer-1500 {\n width: 100vw;\n }\n}\n.r-sidebar.fullscreen {\n width: 100%;\n}\n.r-sidebar.open {\n right: 0;\n}\n\n.r-table-edit .react-datepicker__year-read-view--down-arrow,\n.r-table-edit .react-datepicker__month-read-view--down-arrow,\n.r-table-edit .react-datepicker__month-year-read-view--down-arrow,\n.r-table-edit .react-datepicker__navigation-icon::before {\n border-color: #e0e0e0;\n border-style: solid;\n border-width: 3px 3px 0 0;\n content: \"\";\n display: block;\n height: 9px;\n position: absolute;\n top: 6px;\n width: 9px;\n}\n.r-table-edit .react-datepicker-wrapper {\n display: inline-block;\n width: 100% !important;\n padding: 0;\n border: 0;\n}\n.r-table-edit .react-datepicker-wrapper .react-datepicker__input-container input {\n height: 29px !important;\n}\n.r-table-edit .react-datepicker {\n font-family: \"Helvetica Neue\", helvetica, arial, sans-serif;\n font-size: 0.8rem;\n background-color: #FFFFFF;\n color: #000000;\n border: 1px solid #e0e0e0;\n border-radius: 0.3rem;\n display: inline-block;\n position: relative;\n line-height: initial;\n}\n.r-table-edit .react-datepicker--time-only .react-datepicker__time-container {\n border-left: 0;\n}\n.r-table-edit .react-datepicker--time-only .react-datepicker__time,\n.r-table-edit .react-datepicker--time-only .react-datepicker__time-box {\n border-bottom-left-radius: 0.3rem;\n border-bottom-right-radius: 0.3rem;\n}\n.r-table-edit .react-datepicker-popper {\n position: relative;\n line-height: 0;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__triangle {\n stroke: #e0e0e0;\n}\n.r-table-edit .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {\n fill: #f0f0f0;\n color: #f0f0f0;\n}\n.r-table-edit .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {\n fill: #FFFFFF;\n color: #FFFFFF;\n}\n.r-table-edit .react-datepicker__header {\n text-align: center;\n background-color: #FFFFFF;\n border-bottom: 1px solid #e0e0e0;\n border-top-left-radius: 0.3rem;\n padding: 8px 0;\n position: relative;\n}\n.r-table-edit .react-datepicker__header--time {\n padding-bottom: 8px;\n padding-left: 5px;\n padding-right: 5px;\n}\n.r-table-edit .react-datepicker__header--time:not(.react-datepicker__header--time--only) {\n border-top-left-radius: 0;\n}\n.r-table-edit .react-datepicker__header:not(.react-datepicker__header--has-time-select) {\n border-top-right-radius: 0.3rem;\n}\n.r-table-edit .react-datepicker__year-dropdown-container--select,\n.r-table-edit .react-datepicker__month-dropdown-container--select,\n.r-table-edit .react-datepicker__month-year-dropdown-container--select,\n.r-table-edit .react-datepicker__year-dropdown-container--scroll,\n.r-table-edit .react-datepicker__month-dropdown-container--scroll,\n.r-table-edit .react-datepicker__month-year-dropdown-container--scroll {\n display: inline-block;\n margin: 0 15px;\n}\n.r-table-edit .react-datepicker__current-month,\n.r-table-edit .react-datepicker-time__header,\n.r-table-edit .react-datepicker-year-header {\n margin-top: 0;\n color: #000000;\n font-weight: bold;\n font-size: 0.944rem;\n}\n.r-table-edit h2.react-datepicker__current-month {\n padding: 0;\n margin: 0;\n}\n.r-table-edit .react-datepicker-time__header {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n}\n.r-table-edit .react-datepicker__navigation {\n align-items: center;\n background: none;\n display: flex;\n justify-content: center;\n text-align: center;\n cursor: pointer;\n position: absolute;\n top: 2px;\n padding: 0;\n border: none;\n z-index: 1;\n height: 32px;\n width: 32px;\n text-indent: -999em;\n overflow: hidden;\n}\n.r-table-edit .react-datepicker__navigation--previous {\n left: 2px;\n}\n.r-table-edit .react-datepicker__navigation--next {\n right: 2px;\n}\n.r-table-edit .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {\n right: 85px;\n}\n.r-table-edit .react-datepicker__navigation--years {\n position: relative;\n top: 0;\n display: block;\n margin-left: auto;\n margin-right: auto;\n}\n.r-table-edit .react-datepicker__navigation--years-previous {\n top: 4px;\n}\n.r-table-edit .react-datepicker__navigation--years-upcoming {\n top: -4px;\n}\n.r-table-edit .react-datepicker__navigation:hover *::before {\n border-color: #eb4619;\n}\n.r-table-edit .react-datepicker__navigation-icon {\n position: relative;\n top: -1px;\n font-size: 20px;\n width: 0;\n}\n.r-table-edit .react-datepicker__navigation-icon--next {\n left: -2px;\n}\n.r-table-edit .react-datepicker__navigation-icon--next::before {\n transform: rotate(45deg);\n left: -7px;\n}\n.r-table-edit .react-datepicker__navigation-icon--previous {\n right: -2px;\n}\n.r-table-edit .react-datepicker__navigation-icon--previous::before {\n transform: rotate(225deg);\n right: -7px;\n}\n.r-table-edit .react-datepicker__month-container {\n float: left;\n}\n.r-table-edit .react-datepicker__year {\n margin: 0.4rem;\n text-align: center;\n}\n.r-table-edit .react-datepicker__year-wrapper {\n display: flex;\n flex-wrap: wrap;\n max-width: 180px;\n}\n.r-table-edit .react-datepicker__year .react-datepicker__year-text {\n display: inline-block;\n width: 4rem;\n margin: 2px;\n}\n.r-table-edit .react-datepicker__month {\n margin: 0.4rem;\n text-align: center;\n}\n.r-table-edit .react-datepicker__month .react-datepicker__month-text,\n.r-table-edit .react-datepicker__month .react-datepicker__quarter-text {\n display: inline-block;\n width: 4rem;\n margin: 2px;\n}\n.r-table-edit .react-datepicker__input-time-container {\n clear: both;\n width: 100%;\n float: left;\n margin: 5px 0 10px 15px;\n text-align: left;\n}\n.r-table-edit .react-datepicker__input-time-container .react-datepicker-time__caption {\n display: inline-block;\n}\n.r-table-edit .react-datepicker__input-time-container .react-datepicker-time__input-container {\n display: inline-block;\n}\n.r-table-edit .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {\n display: inline-block;\n margin-left: 10px;\n}\n.r-table-edit .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {\n width: auto;\n}\n.r-table-edit .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,\n.r-table-edit .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n.r-table-edit .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {\n margin-left: 5px;\n display: inline-block;\n}\n.r-table-edit .react-datepicker__time-container {\n float: right;\n border-left: 1px solid #e0e0e0;\n width: 85px;\n}\n.r-table-edit .react-datepicker__time-container--with-today-button {\n display: inline;\n border: 1px solid #e0e0e0;\n border-radius: 0.3rem;\n position: absolute;\n right: -87px;\n top: 0;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time {\n position: relative;\n background: white;\n border-bottom-right-radius: 0.3rem;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {\n width: 85px;\n overflow-x: hidden;\n margin: 0 auto;\n text-align: center;\n border-bottom-right-radius: 0.3rem;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {\n list-style: none;\n margin: 0;\n height: calc(195px + 0.85rem);\n overflow-y: scroll;\n padding-right: 0;\n padding-left: 0;\n width: 100%;\n box-sizing: content-box;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {\n height: 30px;\n padding: 5px 10px;\n white-space: nowrap;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {\n cursor: pointer;\n background-color: #f0f0f0;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {\n background-color: #216ba5;\n color: white;\n font-weight: bold;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {\n background-color: #216ba5;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {\n color: #ccc;\n}\n.r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {\n cursor: default;\n background-color: transparent;\n}\n.r-table-edit .react-datepicker__week-number {\n color: #ccc;\n display: inline-block;\n width: 1.7rem;\n line-height: 1.7rem;\n text-align: center;\n margin: 0.166rem;\n}\n.r-table-edit .react-datepicker__week-number.react-datepicker__week-number--clickable {\n cursor: pointer;\n}\n.r-table-edit .react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected,\n.react-datepicker__week-number--keyboard-selected):hover {\n border-radius: 0.3rem;\n background-color: #f0f0f0;\n}\n.r-table-edit .react-datepicker__week-number--selected {\n border-radius: 0.3rem;\n background-color: #216ba5;\n color: #FFFFFF;\n}\n.r-table-edit .react-datepicker__week-number--selected:hover {\n background-color: rgb(28.75, 93.2196969697, 143.75);\n}\n.r-table-edit .react-datepicker__week-number--keyboard-selected {\n border-radius: 0.3rem;\n background-color: rgb(41.5, 134.5606060606, 207.5);\n color: #FFFFFF;\n}\n.r-table-edit .react-datepicker__week-number--keyboard-selected:hover {\n background-color: rgb(28.75, 93.2196969697, 143.75);\n}\n.r-table-edit .react-datepicker__day-names {\n white-space: nowrap;\n margin-bottom: -8px;\n}\n.r-table-edit .react-datepicker__week {\n white-space: nowrap;\n}\n.r-table-edit .react-datepicker__day-name,\n.r-table-edit .react-datepicker__day,\n.r-table-edit .react-datepicker__time-name {\n color: #000000;\n display: inline-block;\n width: 1.7rem;\n line-height: 1.7rem;\n text-align: center;\n margin: 0.166rem;\n}\n.r-table-edit .react-datepicker__day,\n.r-table-edit .react-datepicker__month-text,\n.r-table-edit .react-datepicker__quarter-text,\n.r-table-edit .react-datepicker__year-text {\n cursor: pointer;\n}\n.r-table-edit .react-datepicker__day:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__month-text:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__quarter-text:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__year-text:not([aria-disabled=true]):hover {\n border-radius: 0.3rem;\n background-color: #FFFFFF;\n}\n.r-table-edit .react-datepicker__day--today,\n.r-table-edit .react-datepicker__month-text--today,\n.r-table-edit .react-datepicker__quarter-text--today,\n.r-table-edit .react-datepicker__year-text--today {\n font-weight: bold;\n}\n.r-table-edit .react-datepicker__day--highlighted,\n.r-table-edit .react-datepicker__month-text--highlighted,\n.r-table-edit .react-datepicker__quarter-text--highlighted,\n.r-table-edit .react-datepicker__year-text--highlighted {\n border-radius: 0.3rem;\n background-color: #3dcc4a;\n color: #FFFFFF;\n}\n.r-table-edit .react-datepicker__day--highlighted:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__month-text--highlighted:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__quarter-text--highlighted:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__year-text--highlighted:not([aria-disabled=true]):hover {\n background-color: rgb(49.8551020408, 189.6448979592, 62.5632653061);\n}\n.r-table-edit .react-datepicker__day--highlighted-custom-1,\n.r-table-edit .react-datepicker__month-text--highlighted-custom-1,\n.r-table-edit .react-datepicker__quarter-text--highlighted-custom-1,\n.r-table-edit .react-datepicker__year-text--highlighted-custom-1 {\n color: magenta;\n}\n.r-table-edit .react-datepicker__day--highlighted-custom-2,\n.r-table-edit .react-datepicker__month-text--highlighted-custom-2,\n.r-table-edit .react-datepicker__quarter-text--highlighted-custom-2,\n.r-table-edit .react-datepicker__year-text--highlighted-custom-2 {\n color: green;\n}\n.r-table-edit .react-datepicker__day--holidays,\n.r-table-edit .react-datepicker__month-text--holidays,\n.r-table-edit .react-datepicker__quarter-text--holidays,\n.r-table-edit .react-datepicker__year-text--holidays {\n position: relative;\n border-radius: 0.3rem;\n background-color: #ff6803;\n color: #FFFFFF;\n}\n.r-table-edit .react-datepicker__day--holidays .overlay,\n.r-table-edit .react-datepicker__month-text--holidays .overlay,\n.r-table-edit .react-datepicker__quarter-text--holidays .overlay,\n.r-table-edit .react-datepicker__year-text--holidays .overlay {\n position: absolute;\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%);\n background-color: #333;\n color: #FFFFFF;\n padding: 4px;\n border-radius: 4px;\n white-space: nowrap;\n visibility: hidden;\n opacity: 0;\n transition: visibility 0s, opacity 0.3s ease-in-out;\n}\n.r-table-edit .react-datepicker__day--holidays:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__month-text--holidays:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__quarter-text--holidays:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__year-text--holidays:not([aria-disabled=true]):hover {\n background-color: rgb(207, 82.9642857143, 0);\n}\n.r-table-edit .react-datepicker__day--holidays:hover .overlay,\n.r-table-edit .react-datepicker__month-text--holidays:hover .overlay,\n.r-table-edit .react-datepicker__quarter-text--holidays:hover .overlay,\n.r-table-edit .react-datepicker__year-text--holidays:hover .overlay {\n visibility: visible;\n opacity: 1;\n}\n.r-table-edit .react-datepicker__day--selected,\n.r-table-edit .react-datepicker__day--in-selecting-range,\n.r-table-edit .react-datepicker__day--in-range,\n.r-table-edit .react-datepicker__month-text--selected,\n.r-table-edit .react-datepicker__month-text--in-selecting-range,\n.r-table-edit .react-datepicker__month-text--in-range,\n.r-table-edit .react-datepicker__quarter-text--selected,\n.r-table-edit .react-datepicker__quarter-text--in-selecting-range,\n.r-table-edit .react-datepicker__quarter-text--in-range,\n.r-table-edit .react-datepicker__year-text--selected,\n.r-table-edit .react-datepicker__year-text--in-selecting-range,\n.r-table-edit .react-datepicker__year-text--in-range {\n border-radius: 0.3rem;\n background-color: #216ba5;\n color: #FFFFFF;\n}\n.r-table-edit .react-datepicker__day--selected:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__day--in-selecting-range:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__day--in-range:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__month-text--selected:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__month-text--in-selecting-range:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__month-text--in-range:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__quarter-text--selected:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__quarter-text--in-selecting-range:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__quarter-text--in-range:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__year-text--selected:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__year-text--in-selecting-range:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__year-text--in-range:not([aria-disabled=true]):hover {\n background-color: rgb(28.75, 93.2196969697, 143.75);\n}\n.r-table-edit .react-datepicker__day--keyboard-selected,\n.r-table-edit .react-datepicker__month-text--keyboard-selected,\n.r-table-edit .react-datepicker__quarter-text--keyboard-selected,\n.r-table-edit .react-datepicker__year-text--keyboard-selected {\n border-radius: 0.3rem;\n background-color: rgb(186.25, 217.0833333333, 241.25);\n color: rgb(0, 0, 0);\n}\n.r-table-edit .react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__month-text--keyboard-selected:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__quarter-text--keyboard-selected:not([aria-disabled=true]):hover,\n.r-table-edit .react-datepicker__year-text--keyboard-selected:not([aria-disabled=true]):hover {\n background-color: rgb(28.75, 93.2196969697, 143.75);\n}\n.r-table-edit .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,\n.react-datepicker__month-text--in-range,\n.react-datepicker__quarter-text--in-range,\n.react-datepicker__year-text--in-range),\n.r-table-edit .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,\n.react-datepicker__month-text--in-range,\n.react-datepicker__quarter-text--in-range,\n.react-datepicker__year-text--in-range),\n.r-table-edit .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,\n.react-datepicker__month-text--in-range,\n.react-datepicker__quarter-text--in-range,\n.react-datepicker__year-text--in-range),\n.r-table-edit .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,\n.react-datepicker__month-text--in-range,\n.react-datepicker__quarter-text--in-range,\n.react-datepicker__year-text--in-range) {\n background-color: rgba(33, 107, 165, 0.5);\n}\n.r-table-edit .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.r-table-edit .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.r-table-edit .react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.r-table-edit .react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.r-table-edit .react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.r-table-edit .react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.r-table-edit .react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.r-table-edit .react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range) {\n background-color: #f0f0f0;\n color: #000000;\n}\n.r-table-edit .react-datepicker__day--disabled,\n.r-table-edit .react-datepicker__month-text--disabled,\n.r-table-edit .react-datepicker__quarter-text--disabled,\n.r-table-edit .react-datepicker__year-text--disabled {\n cursor: default;\n color: #ccc;\n}\n.r-table-edit .react-datepicker__day--disabled .overlay,\n.r-table-edit .react-datepicker__month-text--disabled .overlay,\n.r-table-edit .react-datepicker__quarter-text--disabled .overlay,\n.r-table-edit .react-datepicker__year-text--disabled .overlay {\n position: absolute;\n bottom: 70%;\n left: 50%;\n transform: translateX(-50%);\n background-color: #333;\n color: #FFFFFF;\n padding: 4px;\n border-radius: 4px;\n white-space: nowrap;\n visibility: hidden;\n opacity: 0;\n transition: visibility 0s, opacity 0.3s ease-in-out;\n}\n.r-table-edit .react-datepicker__input-container {\n position: relative;\n display: inline-block;\n width: 100%;\n}\n.r-table-edit .react-datepicker__input-container .react-datepicker__calendar-icon {\n position: absolute;\n padding: 0.5rem;\n box-sizing: content-box;\n}\n.r-table-edit .react-datepicker__view-calendar-icon input {\n padding: 6px 10px 5px 25px;\n}\n.r-table-edit .react-datepicker__year-read-view,\n.r-table-edit .react-datepicker__month-read-view,\n.r-table-edit .react-datepicker__month-year-read-view {\n border: 1px solid transparent;\n border-radius: 0.3rem;\n position: relative;\n}\n.r-table-edit .react-datepicker__year-read-view:hover,\n.r-table-edit .react-datepicker__month-read-view:hover,\n.r-table-edit .react-datepicker__month-year-read-view:hover {\n cursor: pointer;\n}\n.r-table-edit .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,\n.r-table-edit .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,\n.r-table-edit .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,\n.r-table-edit .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,\n.r-table-edit .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,\n.r-table-edit .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {\n border-top-color: rgb(178.5, 178.5, 178.5);\n}\n.r-table-edit .react-datepicker__year-read-view--down-arrow,\n.r-table-edit .react-datepicker__month-read-view--down-arrow,\n.r-table-edit .react-datepicker__month-year-read-view--down-arrow {\n transform: rotate(135deg);\n right: -16px;\n top: 0;\n}\n.r-table-edit .react-datepicker__year-dropdown,\n.r-table-edit .react-datepicker__month-dropdown,\n.r-table-edit .react-datepicker__month-year-dropdown {\n background-color: #f0f0f0;\n position: absolute;\n width: 50%;\n left: 25%;\n top: 30px;\n z-index: 1;\n text-align: center;\n border-radius: 0.3rem;\n border: 1px solid #e0e0e0;\n}\n.r-table-edit .react-datepicker__year-dropdown:hover,\n.r-table-edit .react-datepicker__month-dropdown:hover,\n.r-table-edit .react-datepicker__month-year-dropdown:hover {\n cursor: pointer;\n}\n.r-table-edit .react-datepicker__year-dropdown--scrollable,\n.r-table-edit .react-datepicker__month-dropdown--scrollable,\n.r-table-edit .react-datepicker__month-year-dropdown--scrollable {\n height: 150px;\n overflow-y: scroll;\n}\n.r-table-edit .react-datepicker__year-option,\n.r-table-edit .react-datepicker__month-option,\n.r-table-edit .react-datepicker__month-year-option {\n line-height: 20px;\n width: 100%;\n display: block;\n margin-left: auto;\n margin-right: auto;\n}\n.r-table-edit .react-datepicker__year-option:first-of-type,\n.r-table-edit .react-datepicker__month-option:first-of-type,\n.r-table-edit .react-datepicker__month-year-option:first-of-type {\n border-top-left-radius: 0.3rem;\n border-top-right-radius: 0.3rem;\n}\n.r-table-edit .react-datepicker__year-option:last-of-type,\n.r-table-edit .react-datepicker__month-option:last-of-type,\n.r-table-edit .react-datepicker__month-year-option:last-of-type {\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n border-bottom-left-radius: 0.3rem;\n border-bottom-right-radius: 0.3rem;\n}\n.r-table-edit .react-datepicker__year-option:hover,\n.r-table-edit .react-datepicker__month-option:hover,\n.r-table-edit .react-datepicker__month-year-option:hover {\n background-color: #ccc;\n}\n.r-table-edit .react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,\n.r-table-edit .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,\n.r-table-edit .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {\n border-bottom-color: rgb(178.5, 178.5, 178.5);\n}\n.r-table-edit .react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,\n.r-table-edit .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,\n.r-table-edit .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {\n border-top-color: rgb(178.5, 178.5, 178.5);\n}\n.r-table-edit .react-datepicker__year-option--selected,\n.r-table-edit .react-datepicker__month-option--selected,\n.r-table-edit .react-datepicker__month-year-option--selected {\n position: absolute;\n left: 15px;\n}\n.r-table-edit .react-datepicker__close-icon {\n cursor: pointer;\n background-color: transparent;\n border: 0;\n outline: 0;\n padding: 0 6px 0 0;\n position: absolute;\n top: 0;\n right: 0;\n height: 100%;\n display: table-cell;\n vertical-align: middle;\n}\n.r-table-edit .react-datepicker__close-icon::after {\n cursor: pointer;\n background-color: transparent;\n color: #c4c4c4;\n height: 16px;\n width: 16px;\n padding: 0px 2px;\n font-size: 25px;\n font-weight: 500;\n line-height: 0.5;\n text-align: center;\n display: table-cell;\n vertical-align: middle;\n content: \"×\";\n}\n.r-table-edit .react-datepicker__close-icon:hover::after {\n color: rgba(0, 0, 0, 0.8705882353) !important;\n}\n.r-table-edit .react-datepicker__close-icon--disabled {\n cursor: default;\n}\n.r-table-edit .react-datepicker__close-icon--disabled::after {\n cursor: default;\n background-color: #ccc;\n}\n.r-table-edit .react-datepicker__today-button {\n background: #f0f0f0;\n border-top: 1px solid #e0e0e0;\n cursor: pointer;\n text-align: center;\n font-weight: bold;\n padding: 5px 0;\n clear: left;\n}\n.r-table-edit .react-datepicker__portal {\n position: fixed;\n width: 100vw;\n height: 100vh;\n background-color: rgba(0, 0, 0, 0.8);\n left: 0;\n top: 0;\n justify-content: center;\n align-items: center;\n display: flex;\n z-index: 2147483647;\n}\n.r-table-edit .react-datepicker__portal .react-datepicker__day-name,\n.r-table-edit .react-datepicker__portal .react-datepicker__day,\n.r-table-edit .react-datepicker__portal .react-datepicker__time-name {\n width: 3rem;\n line-height: 3rem;\n}\n@media (max-width: 400px), (max-height: 550px) {\n .r-table-edit .react-datepicker__portal .react-datepicker__day-name,\n .r-table-edit .react-datepicker__portal .react-datepicker__day,\n .r-table-edit .react-datepicker__portal .react-datepicker__time-name {\n width: 2rem;\n line-height: 2rem;\n }\n}\n.r-table-edit .react-datepicker__portal .react-datepicker__current-month,\n.r-table-edit .react-datepicker__portal .react-datepicker-time__header {\n font-size: 1.44rem;\n}\n.r-table-edit .react-datepicker__children-container {\n width: 13.8rem;\n margin: 0.4rem;\n padding-right: 0.2rem;\n padding-left: 0.2rem;\n height: auto;\n}\n.r-table-edit .react-datepicker__aria-live {\n position: absolute;\n clip-path: circle(0);\n border: 0;\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n width: 1px;\n white-space: nowrap;\n}\n.r-table-edit .react-datepicker__calendar-icon {\n width: 1em;\n height: 1em;\n vertical-align: -0.125em;\n}\n.r-table-edit .react-datepicker-popper {\n z-index: 999 !important;\n position: fixed !important;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__current-month {\n color: rgba(0, 0, 0, 0.9) !important;\n font-weight: 500 !important;\n display: none;\n font-family: Montserrat, Helvetica, Arial, serif !important;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown {\n font-family: Montserrat, Helvetica, Arial, serif !important;\n /* Giao diện của menu dropdown (tháng và năm) */\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown .react-datepicker__month-dropdown-container {\n margin: 0px 3px 0px 0px;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown .react-datepicker__year-dropdown-container {\n margin: 0px 0px 0px 3px;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown .react-datepicker__month-select:focus,\n.r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown .react-datepicker__year-select:focus {\n border: 1px solid #1989fa !important;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown .react-datepicker__month-select,\n.r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown .react-datepicker__year-select {\n background-color: #FFFFFF;\n height: 22px;\n border-radius: 2px;\n padding: 2px 0;\n border: 1px solid hsl(0, 0%, 80%);\n outline: none;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__navigation {\n margin-top: 4px;\n color: #eb4619;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__day-name {\n font-family: Montserrat, Helvetica, Arial, serif !important;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__day {\n outline: none;\n border-radius: 20px !important;\n font-family: Montserrat, Helvetica, Arial, serif !important;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__day:hover {\n background-color: rgba(235, 70, 25, 0.1) !important;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__day--today {\n color: #eb4619;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__day--today.react-datepicker__day--selected {\n color: #FFFFFF;\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__day--today.react-datepicker__day--keyboard-selected {\n background-color: rgba(235, 70, 25, 0.1);\n}\n.r-table-edit .react-datepicker-popper .react-datepicker__day--selected {\n background-color: #eb4619 !important;\n}\n\n.tab-custom {\n font-family: Roboto, \"Segoe UI\", GeezaPro, \"DejaVu Serif\", \"sans-serif\", -apple-system, BlinkMacSystemFont;\n display: flex;\n}\n.tab-custom.tab-parent {\n border-bottom: solid 1px #c9c9c9;\n}\n.tab-custom .btn-scroll {\n cursor: pointer;\n display: flex;\n align-items: center;\n}\n.tab-custom .tab-component::-webkit-scrollbar {\n display: none;\n /* Ẩn thanh cuộn nếu không cần */\n}\n.tab-custom .tab-component {\n white-space: nowrap;\n overflow-x: hidden;\n scroll-behavior: smooth;\n}\n.tab-custom .tab-component > * {\n display: inline-block;\n}\n.tab-custom .tab-component .tab-custom-item {\n display: inline-block;\n padding: 3px 10px;\n line-height: 23px;\n cursor: pointer;\n font-size: 13px;\n font-weight: 500;\n text-transform: uppercase;\n height: 30px;\n color: rgba(0, 0, 0, 0.5);\n}\n.tab-custom .tab-component .tab-custom-item.active {\n border-bottom: solid 2px #eb4619 !important;\n color: #eb4619;\n}\n.tab-custom.tab-child .tab-custom-item {\n font-size: 12px !important;\n line-height: 23px !important;\n border-radius: 5px 5px 0px 0px;\n margin: 8px 3px 0px 3px;\n box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;\n}\n\n.bs-stepper {\n background-color: #FFFFFF;\n box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);\n border-radius: 0.5rem;\n}\n.bs-stepper .bs-stepper-header {\n padding: 1.5rem 1.5rem;\n flex-wrap: wrap;\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n margin: 0;\n}\n.bs-stepper .bs-stepper-header .line {\n flex: 0;\n min-width: auto;\n min-height: auto;\n background-color: transparent;\n margin: 0;\n padding: 0 1.75rem;\n color: #283046;\n font-size: 1.5rem;\n}\n.bs-stepper .bs-stepper-header .step {\n margin-bottom: 0.25rem;\n margin-top: 0.25rem;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger {\n flex-wrap: nowrap;\n padding: 0;\n font-weight: normal;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-box {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 38px;\n height: 38px;\n padding: 0.5em 0;\n font-weight: 500;\n color: #babfc7;\n background-color: rgba(186, 191, 199, 0.12);\n border-radius: 0.35rem;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-label {\n text-align: left;\n margin: 0;\n margin-top: 0.5rem;\n margin-left: 1rem;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-label .bs-stepper-title {\n display: inherit;\n color: #283046;\n font-weight: 600;\n line-height: 1rem;\n margin-bottom: 0rem;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-label .bs-stepper-subtitle {\n font-weight: 400;\n font-size: 0.85rem;\n color: #b9b9c3;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger:hover {\n background-color: transparent;\n}\n.bs-stepper .bs-stepper-header .step.active .step-trigger .bs-stepper-box {\n background-color: #eb4619;\n color: #FFFFFF;\n box-shadow: 0 3px 6px 0 rgba(235, 70, 25, 0.4);\n}\n.bs-stepper .bs-stepper-header .step.active .step-trigger .bs-stepper-label .bs-stepper-title {\n color: #eb4619;\n}\n.bs-stepper .bs-stepper-header .step.crossed .step-trigger .bs-stepper-box {\n background-color: rgba(235, 70, 25, 0.12);\n color: #eb4619;\n}\n.bs-stepper .bs-stepper-header .step.crossed .step-trigger .bs-stepper-label .bs-stepper-title {\n color: #b9b9c3;\n}\n.bs-stepper .bs-stepper-header .step.crossed + .line {\n color: #eb4619;\n}\n.bs-stepper .bs-stepper-content {\n padding: 1.5rem 1.5rem;\n}\n.bs-stepper .bs-stepper-content .content {\n margin-left: 0;\n}\n.bs-stepper .bs-stepper-content .content .content-header {\n margin-bottom: 1rem;\n}\n.bs-stepper.vertical .bs-stepper-header {\n border-right: 1px solid #e0e0e0;\n border-bottom: none;\n}\n.bs-stepper.vertical .bs-stepper-header .step .step-trigger {\n padding: 1rem 0;\n}\n.bs-stepper.vertical .bs-stepper-header .line {\n display: none;\n}\n.bs-stepper.vertical .bs-stepper-content {\n width: 100%;\n padding-top: 2.5rem;\n}\n.bs-stepper.vertical .bs-stepper-content .content:not(.active) {\n display: none;\n}\n.bs-stepper.vertical.wizard-icons .step {\n text-align: center;\n}\n.bs-stepper.wizard-modern {\n background-color: transparent;\n box-shadow: none;\n}\n.bs-stepper.wizard-modern .bs-stepper-header {\n border: none;\n}\n.bs-stepper.wizard-modern .bs-stepper-content {\n background-color: #FFFFFF;\n border-radius: 0.5rem;\n box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);\n}\n\n.horizontal-wizard,\n.vertical-wizard,\n.modern-horizontal-wizard,\n.modern-vertical-wizard {\n margin-bottom: 2.2rem;\n}\n\nhtml[data-textdirection=rtl] .btn-prev,\nhtml[data-textdirection=rtl] .btn-next {\n display: flex;\n}\nhtml[data-textdirection=rtl] .btn-prev i,\nhtml[data-textdirection=rtl] .btn-prev svg,\nhtml[data-textdirection=rtl] .btn-next i,\nhtml[data-textdirection=rtl] .btn-next svg {\n transform: rotate(-180deg);\n}\n\n@media (max-width: 992px) {\n .bs-stepper .bs-stepper-header {\n flex-direction: column;\n align-items: flex-start;\n }\n .bs-stepper .bs-stepper-header .step .step-trigger {\n padding: 0.5rem 0 !important;\n flex-direction: row;\n }\n .bs-stepper .bs-stepper-header .line {\n display: none;\n }\n .bs-stepper.vertical {\n flex-direction: column;\n }\n .bs-stepper.vertical .bs-stepper-header {\n align-items: flex-start;\n }\n .bs-stepper.vertical .bs-stepper-content {\n padding-top: 1.5rem;\n }\n}\n.r-table-edit .r-grid {\n font-size: 12px;\n}\n.r-table-edit .r-grid .r-search {\n display: flex;\n position: relative;\n align-items: center;\n}\n.r-table-edit .r-grid .r-search .input__value {\n z-index: 1;\n}\n.r-table-edit .r-grid .r-search .input__value.is-clearable {\n padding-right: 25px;\n}\n.r-table-edit .r-grid .r-search .input__clear-icon {\n position: absolute;\n right: 5px;\n z-index: 10;\n}\n.r-table-edit .r-grid .r-gridtable {\n -webkit-overflow-scrolling: touch;\n overflow-x: auto;\n overflow-y: scroll;\n position: relative;\n background-color: #FFFFFF;\n color: rgba(0, 0, 0, 0.8705882353);\n font-weight: 400;\n border: 1px solid #e0e0e0;\n /* Toàn bộ thanh cuộn */\n /* Nền của thanh cuộn */\n /* Thanh trượt (thumb) */\n /* Khi hover */\n}\n.r-table-edit .r-grid .r-gridtable table {\n table-layout: fixed;\n border-collapse: separate;\n border-spacing: 0px;\n}\n.r-table-edit .r-grid .r-gridtable::-webkit-scrollbar {\n width: 9px;\n /* Độ rộng của thanh cuộn */\n height: 9px;\n /* Độ cao của thanh cuộn */\n}\n.r-table-edit .r-grid .r-gridtable::-webkit-scrollbar-track {\n background: #FCFCFC;\n /* Màu nền nhạt */\n}\n.r-table-edit .r-grid .r-gridtable::-webkit-scrollbar-thumb {\n background: #8B8B8B;\n /* Màu xám nhạt */\n border-radius: 6px;\n /* Bo góc giống Edge */\n}\n.r-table-edit .r-grid .r-gridtable::-webkit-scrollbar-thumb:hover {\n background: #636363;\n /* Màu đậm hơn khi hover */\n}\n.r-table-edit .r-grid .r-gridtable .react-resizable-handle.react-resizable-handle-se {\n position: absolute;\n right: 0px;\n top: 0px;\n width: 10px;\n height: 100%;\n cursor: col-resize;\n background-image: none;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter svg.active {\n color: #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter-popup .react-select-table .select-value {\n line-height: 20px !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter-popup .react-select-table .select-placeholder {\n line-height: 20px !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter-popup .react-select-table .r-select-is-focus {\n border-color: #eb4619 !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter-popup .form-control:focus {\n border-color: #eb4619 !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-no-data {\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 14px;\n padding: 20px 9px;\n color: #8f8f8f;\n}\n.r-table-edit .r-grid .r-gridtable .r-loading-overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(255, 255, 255, 0.3);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 3;\n}\n.r-table-edit .r-grid .r-gridtable .r-loading-overlay .r-loading {\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 14px;\n padding: 7px 9px;\n color: #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed {\n z-index: 2 !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed.fix-right .r-headercell-div {\n border-left: 1px solid #e0e0e0;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed.fix-left .r-headercell-div {\n border-right: 1px solid #e0e0e0;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed.fix-left.fixed-last .r-headercell-div {\n box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed.fix-right.fixed-last .r-headercell-div {\n box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .r-headercell {\n color: rgba(0, 0, 0, 0.8705882353);\n position: sticky;\n padding: 0px;\n height: 42px;\n z-index: 1;\n border-width: 0px;\n line-height: 16px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .r-headercell .r-headercell-div {\n border-right: 1px solid #e0e0e0;\n border-bottom: 1px solid #e0e0e0;\n background-color: #FFFFFF;\n display: flex;\n align-items: center;\n text-align: center;\n padding: 5px 10px;\n height: 100%;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .r-headercell .header-content {\n display: flex;\n flex: 1 1 0%;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .r-headercell .header-content .text-content {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row:first-of-type .r-rowcell-div {\n border-top-color: #FFFFFF;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row {\n font-size: 13px;\n transition: transform 0.05s linear;\n will-change: transform;\n backface-visibility: hidden;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .cell-fixed {\n position: sticky;\n z-index: 1;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .cell-fixed .r-rowcell.r-cell-selected-right {\n margin-right: 1px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell {\n background-color: #FFFFFF;\n border-bottom: 1px solid #e0e0e0;\n border-right: 1px solid #e0e0e0;\n vertical-align: middle;\n padding: 0;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.cell-fixed .r-rowcell-div.r-cell-selected-right {\n padding-right: 1px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.fix-right {\n border-left: 1px solid #e0e0e0;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.fix-right.fixed-last {\n border-left: 1px solid #e0e0e0;\n box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.fix-left.fixed-last {\n border-right: 1px solid #e0e0e0;\n box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.r-active-row {\n background-color: #fce6df;\n border-right: 2px solid #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div {\n min-height: 28px !important;\n border: 1px solid transparent;\n position: relative;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-icon-expand {\n transition: transform 0.3s ease;\n position: absolute;\n left: 3px;\n top: 8px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-icon-expand.is-open {\n transform: rotate(90deg);\n -moz-transform: rotate(90deg);\n -webkit-transform: rotate(90deg);\n -o-transform: rotate(90deg);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .arrow-context-menu {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 15px;\n width: 15px;\n background-color: #FFFFFF;\n border-radius: 10px;\n border: 1px solid #e0e0e0;\n box-shadow: 0px 0px 2px #e0e0e0;\n right: -5px;\n bottom: -5px;\n z-index: 10000;\n cursor: pointer;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.command {\n padding-top: 0px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div:focus {\n outline: none;\n /* bỏ viền focus mặc định */\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.r-cell-disable {\n background-color: #f9f9f9;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.r-active-cell {\n background-color: rgb(255, 240, 240);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-cell-text:focus {\n outline: none;\n /* bỏ viền focus mặc định */\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-icon-invalid {\n position: absolute;\n width: 10px;\n height: 10px;\n top: 0px;\n left: -6px;\n rotate: -90deg;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-drag-icon {\n position: absolute;\n border: 1px solid #FFFFFF;\n bottom: -2px;\n right: -2px;\n width: 7px;\n height: 7px;\n background-color: #eb4619;\n border-radius: 20%;\n cursor: crosshair;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-cell-text {\n padding: 0px 7px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n display: flex;\n align-items: center;\n min-width: 0;\n min-height: 28px;\n flex: 1;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-cell-text .r-drop-icon {\n position: absolute;\n fill: #c4c4c4 !important;\n right: 8.5px;\n top: 3.5px;\n cursor: pointer;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .is-invalid {\n border-width: 0px !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .is-invalid .r-select-is-invalid {\n border-width: 0px !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.r-cell-selected-top {\n border-top: 1px solid #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.r-cell-selected-bottom {\n border-bottom: 1px solid #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.r-cell-selected-left {\n border-left: 1px solid #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.r-cell-selected-right {\n border-right: 1px solid #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .react-select-table.is-invalid {\n border-width: 0px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .react-select-table .r-select-is-focus {\n border-width: 0px !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .react-select-table .select-table-control {\n border-radius: 0px;\n border-width: 0px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .react-select-table .select-table-control.r-select-is-focus {\n border: 1px solid #1989fa;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit .display-value {\n cursor: pointer;\n border-radius: 0px;\n background-color: #FFFFFF;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit .input-display {\n border-width: 0px;\n box-sizing: border-box;\n border: none;\n /* Loại bỏ border */\n outline: none;\n /* Loại bỏ outline khi input được chọn */\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit .form-input-content .form-control {\n border-radius: 4px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit .form-input-content .form-control:focus {\n border: 1px solid #1989fa;\n outline: none;\n box-shadow: none;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit input::placeholder {\n color: #eb4619;\n opacity: 1;\n /* Firefox */\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__display {\n vertical-align: middle;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__edit {\n display: none;\n text-align: left;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__edit.active {\n display: flex;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__edit .form-label {\n font-size: 10px;\n margin-bottom: 0px;\n text-align: left;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__edit .form-control {\n border-radius: 0px;\n height: 23px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__edit .form__element {\n margin: 0px 2px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-date-input {\n text-align: center;\n height: 29px;\n border: 1px solid #ccc;\n border-radius: 4px;\n padding: 5px;\n font-size: 14px;\n background-color: #f9f9f9;\n color: #333;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-control:focus {\n border-radius: 0px;\n border-width: 0px;\n background-color: #f8f8f8;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div input {\n font-size: 13px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridfoot {\n color: #283046;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridfoot .r-row {\n bottom: 0px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridfoot .r-row .r-footer {\n background-color: #fafafa;\n font-size: 14px;\n font-weight: 600;\n width: 100px;\n position: sticky;\n z-index: 1;\n bottom: 0;\n border-width: 0px;\n padding: 0px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridfoot .r-row .r-footer.cell-fixed {\n z-index: 2;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridfoot .r-row .r-footer .r-footer-div {\n height: 30px;\n padding: 5px 7px;\n}\n.r-table-edit .r-grid .r-gridtable .formula-dropdown {\n box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 15px;\n}\n.r-table-edit .r-grid .text-left .form-label {\n text-align: left;\n}\n.r-table-edit .r-grid .r-toolbar {\n border: 1px solid #e0e0e0;\n height: 44px;\n}\n.r-table-edit .r-grid .r-toolbar.r-toolbar-bottom {\n border-top-width: 0px;\n}\n.r-table-edit .r-grid .r-toolbar.r-toolbar-top {\n border-bottom-width: 0px;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-left {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-left .r-toolbar-item {\n margin: 7px 0px 7px 7px;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-center {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-center .r-toolbar-item {\n margin: 7px 3px 7px 3px;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-right {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-right .r-toolbar-item {\n margin: 7px 7px 7px 0px;\n}\n.r-table-edit .r-setting-container {\n margin: 0px 15px;\n}\n.r-table-edit .r-setting-container .r-setting-content {\n -webkit-overflow-scrolling: touch;\n overflow-x: auto;\n overflow-y: scroll;\n position: relative;\n background-color: #FFFFFF;\n color: rgba(0, 0, 0, 0.8705882353);\n font-weight: 400;\n border-left: 1px solid #e0e0e0;\n border-right: 1px solid #e0e0e0;\n /* Toàn bộ thanh cuộn */\n /* Nền của thanh cuộn */\n /* Thanh trượt (thumb) */\n /* Khi hover */\n}\n.r-table-edit .r-setting-container .r-setting-content::-webkit-scrollbar {\n width: 9px;\n /* Độ rộng của thanh cuộn */\n height: 9px;\n /* Độ cao của thanh cuộn */\n}\n.r-table-edit .r-setting-container .r-setting-content::-webkit-scrollbar-track {\n background: #FCFCFC;\n /* Màu nền nhạt */\n}\n.r-table-edit .r-setting-container .r-setting-content::-webkit-scrollbar-thumb {\n background: #8B8B8B;\n /* Màu xám nhạt */\n border-radius: 6px;\n /* Bo góc giống Edge */\n}\n.r-table-edit .r-setting-container .r-setting-content::-webkit-scrollbar-thumb:hover {\n background: #636363;\n /* Màu đậm hơn khi hover */\n}\n.r-table-edit .r-setting-container .r-setting-row {\n padding: 5px !important;\n margin: 0px;\n border-bottom: 1px solid #e0e0e0;\n font-size: 13px;\n display: flex;\n align-items: center;\n}\n.r-table-edit .r-setting-container .r-setting-row .r-setting-cell {\n padding-right: 10px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.r-table-edit .r-setting-container .r-setting-row .r-setting-cell .form-control {\n font-size: 13px !important;\n}\n.r-table-edit .r-setting-container .r-setting-row.r-setting-header {\n font-size: 12px !important;\n}\n.r-table-edit.r-virtualized-table .r-row:hover .r-rowcell {\n background-color: #fce6df !important;\n}\n.r-table-edit .r-pager {\n border: 1px solid #e0e0e0;\n border-top-width: 0px;\n min-height: 50px;\n width: 100%;\n display: inline-block;\n}\n.r-table-edit .r-pager .r-pagercontainer {\n margin-left: 10px;\n float: left;\n height: 100%;\n display: block;\n align-items: center;\n}\n.r-table-edit .r-pager .r-pagercontainer .r-button {\n display: inline-block;\n margin: 9px 6px;\n height: 30px;\n width: 30px;\n padding: 6px;\n border-width: 0px;\n background-color: transparent;\n}\n.r-table-edit .r-pager .r-pagercontainer .r-button svg {\n font-size: 16px;\n}\n.r-table-edit .r-pager .r-pagercontainer .r-number {\n display: inline-block;\n margin: 10px 4px 0px 0px;\n height: 25px;\n width: 25px;\n font-size: 13px;\n padding-top: 4px;\n text-align: center;\n cursor: pointer;\n border-radius: 5px;\n}\n.r-table-edit .r-pager .r-pagercontainer .r-number.r-active {\n background-color: rgba(235, 70, 25, 0.1);\n color: #eb4619;\n}\n.r-table-edit .r-pager .r-pagercontainer .r-number:hover {\n border: 1px solid #eb4619;\n}\n.r-table-edit .r-pager .r-pagesize {\n margin-left: 20px;\n font-size: 13px;\n display: inline-block;\n}\n.r-table-edit .r-pager .r-pagesize .select-pagesize__menu-portal {\n z-index: 5;\n}\n.r-table-edit .r-pager .r-parentmsgbar {\n font-size: 13px;\n float: right;\n padding-bottom: 9px;\n padding-right: 18px;\n padding-top: 14px;\n}\n\n.r-tooltip .tooltip-inner {\n font-size: 11px;\n}\n.r-tooltip.tooltip-error ::before {\n border-top-color: rgb(235, 78, 78);\n}\n.r-tooltip.tooltip-error .tooltip-inner {\n background-color: rgb(235, 78, 78);\n}\n\n.btn-input-style {\n font-weight: 500;\n text-transform: uppercase;\n border: 1px solid #e0e0e0;\n border-radius: 5px;\n margin-left: 3px;\n height: 28px;\n padding: 2px 5px;\n cursor: pointer;\n}\n.btn-input-style:hover {\n background-color: rgba(235, 70, 25, 0.1);\n color: #eb4619;\n}\n.btn-input-style.active-custom {\n background-color: #eb4619;\n color: #FFFFFF;\n}";
41287
41287
  styleInject(css_248z$2);
41288
41288
 
41289
- const getColumn = (contentColumns, col, index) => {
41290
- const column = contentColumns[col + index];
41291
- if (column) {
41292
- return { ...column };
41289
+ const getColumn = (contentColumns, col, count) => {
41290
+ for (let index = col + count; index < contentColumns.length; index++) {
41291
+ const column = contentColumns[index];
41292
+ if (column.visible !== false) {
41293
+ return { ...column };
41294
+ }
41293
41295
  }
41294
41296
  return undefined;
41295
41297
  };
@@ -41335,7 +41337,7 @@ const PasteData = async (props) => {
41335
41337
  const rs = column.resultValidate.find((item) => item[column.selectSettings?.fieldValue ?? "value"] === stringData);
41336
41338
  if (rs) {
41337
41339
  if (column.onPaste) {
41338
- column.onPaste(dataRow, stringData);
41340
+ dataRow[column.field] = column.onPaste(dataRow, stringData);
41339
41341
  }
41340
41342
  else {
41341
41343
  dataRow[column.field] = stringData;
@@ -41407,7 +41409,7 @@ const PasteData = async (props) => {
41407
41409
  else if (column.type === "select") {
41408
41410
  if (column.selectSettings?.allowCreate) {
41409
41411
  if (column.onPaste) {
41410
- column.onPaste(dataRow, stringData);
41412
+ dataRow[column.field] = column.onPaste(dataRow, stringData);
41411
41413
  }
41412
41414
  else {
41413
41415
  dataRow[column.field] = stringData;
@@ -41417,10 +41419,10 @@ const PasteData = async (props) => {
41417
41419
  }
41418
41420
  }
41419
41421
  else {
41420
- const rs = ((column.selectSettings?.optionsField ? item[column.selectSettings?.optionsField] : column.selectSettings?.options) ?? []).find((item) => item[column.selectSettings?.fieldValue ?? "value"] === stringData);
41422
+ const rs = (column.selectSettings?.options ?? []).find((item) => item[column.selectSettings?.fieldValue ?? "value"] === stringData);
41421
41423
  if (rs) {
41422
41424
  if (column.onPaste) {
41423
- column.onPaste(dataRow, stringData);
41425
+ dataRow[column.field] = column.onPaste(dataRow, stringData);
41424
41426
  }
41425
41427
  else {
41426
41428
  dataRow[column.field] = stringData;
@@ -41436,7 +41438,7 @@ const PasteData = async (props) => {
41436
41438
  }
41437
41439
  else {
41438
41440
  if (column.onPaste) {
41439
- column.onPaste(dataRow, stringData);
41441
+ dataRow[column.field] = column.onPaste(dataRow, stringData);
41440
41442
  }
41441
41443
  else {
41442
41444
  dataRow[column.field] = stringData;
@@ -41522,7 +41524,7 @@ const CellComponent = React__default.memo((props) => {
41522
41524
  }
41523
41525
  const commonTdProps = {
41524
41526
  role: "gridcell",
41525
- "aria-colindex": indexCol,
41527
+ "aria-colindex": indexCol + 1,
41526
41528
  key: `col-${indexRow}-${indexCol}`,
41527
41529
  className: classNames$1('r-rowcell ', { "fix-right": col.fixedType === 'right' }, { "fix-left": col.fixedType === 'left' }, { "cell-fixed": col.fixedType }, { "fixed-last": (col.fixedType === "left" && indexCol === lastObjWidthFixLeft) || (col.fixedType === "right" && indexCol === fisrtObjWidthFixRight) }, { "r-active-row": (isSelected && editDisable) || isActiveRow }),
41528
41530
  onMouseEnter: (e) => handleMouseEnter(e),
@@ -41570,6 +41572,7 @@ const CellComponent = React__default.memo((props) => {
41570
41572
  style: {
41571
41573
  left: col.fixedType === "left" ? objWidthFixLeft[indexCol] : undefined,
41572
41574
  right: col.fixedType === "right" ? objWidthFixRight[indexCol] : undefined,
41575
+ width: col.width ?? 100,
41573
41576
  textAlign: col.textAlign ?? "left"
41574
41577
  }
41575
41578
  };
@@ -43591,12 +43594,6 @@ const HeaderTableCol$1 = (props) => {
43591
43594
  if (size.width > 50) {
43592
43595
  const newColumns = [...columns];
43593
43596
  newColumns[indexCol].width = size.width;
43594
- if ((columns[indexCol]?.maxWidth ?? 0) < size.width) {
43595
- newColumns[indexCol].maxWidth = size.width;
43596
- }
43597
- if ((columns[indexCol]?.minWidth ?? 0) > size.width) {
43598
- newColumns[indexCol].minWidth = size.width;
43599
- }
43600
43597
  setContentColumns(newColumns);
43601
43598
  e.stopPropagation();
43602
43599
  e.preventDefault();
@@ -44667,17 +44664,29 @@ const TableEdit = forwardRef((props, ref) => {
44667
44664
  const handeCopyCell = async (indexColCopy, indexRowCopy, maxRowPaste) => {
44668
44665
  const column = contentColumns[indexColCopy];
44669
44666
  const rootData = dataSource[indexRowCopy];
44667
+ const copyData = rootData[column.field ?? ''];
44670
44668
  if (column.editEnable !== true || column.disabledCondition?.(rootData)) {
44671
44669
  return;
44672
44670
  }
44673
44671
  let objCallback;
44674
- if (column.onPasteValidate && rootData[column.field ?? '']) {
44675
- const rs = await column.onPasteValidate(rootData[column.field ?? ''], rootData, indexRowCopy);
44672
+ const ele = column.selectSettings?.options?.find((item) => item[column.selectSettings?.fieldValue ?? "value"] === copyData);
44673
+ if (ele) {
44674
+ objCallback = ele;
44675
+ }
44676
+ else if (column.onPasteValidate && copyData) {
44677
+ const rs = await column.onPasteValidate(copyData, rootData, indexRowCopy);
44676
44678
  if (rs && rs.length > 0) {
44677
- objCallback = rs[0];
44679
+ const itemValidate = rs.find((item) => item[column.selectSettings?.fieldValue ?? "value"] === copyData);
44680
+ if (itemValidate) {
44681
+ objCallback = itemValidate;
44682
+ }
44683
+ else {
44684
+ notificationError(t("PasteExcelNotExist", { index: indexRowCopy + 1, field: t(column.headerText ?? ""), value: copyData }));
44685
+ return;
44686
+ }
44678
44687
  }
44679
44688
  else {
44680
- notificationError(t("PasteExcelNotExist", { index: indexRowCopy + 1, field: t(column.headerText ?? ""), value: rootData[column.field ?? ''] }));
44689
+ notificationError(t("PasteExcelNotExist", { index: indexRowCopy + 1, field: t(column.headerText ?? ""), value: copyData }));
44681
44690
  return;
44682
44691
  }
44683
44692
  }
@@ -44686,10 +44695,10 @@ const TableEdit = forwardRef((props, ref) => {
44686
44695
  for (let index = startIndex; condition(index); (indexRowCopy > maxRowPaste ? index-- : index++)) {
44687
44696
  //copy dữ liệu
44688
44697
  if (column.onPaste) {
44689
- column.onPaste(dataSource[index], rootData[column.field ?? '']);
44698
+ dataSource[index][column.field ?? ''] = column.onPaste(dataSource[index], copyData);
44690
44699
  }
44691
44700
  else {
44692
- dataSource[index][column.field ?? ''] = rootData[column.field ?? ''];
44701
+ dataSource[index][column.field ?? ''] = copyData;
44693
44702
  }
44694
44703
  //callback
44695
44704
  if (column.callback) {
@@ -44702,6 +44711,9 @@ const TableEdit = forwardRef((props, ref) => {
44702
44711
  objCallback = column.callbackValue(rootData);
44703
44712
  column.callback(objCallback, index, dataSource[index]);
44704
44713
  }
44714
+ else {
44715
+ column.callback(copyData, index, dataSource[index]);
44716
+ }
44705
44717
  }
44706
44718
  if (rowChange) {
44707
44719
  rowChange(dataSource[index], index, column.field);