es-grid-template 1.8.64 → 1.8.66

package/es/grid-component/styles.scss

@@ -1,1438 +1,1438 @@
-$prefix: 'ui-rc' !default;
-$antdPrefix: 'ant' !default;
-$primary: #eb4619 !default;
-$rowHoverBg: #FBDED6 !default;
-$rowSelectedBg: #FEF2EF !default;
-//$tableBorderColor: red !default;
-$tableBorderColor: #e0e0e0 !default;
-//$tableBorderColor: #C4C4C4 !default;
-//$tableBorderColor: #f0f0f0 !default;
-$border-radius: 6px !default;
-$border-selected-color: #0550C5 !default;
-$body-color: #ffffff !default;
-//$cell-selected-bg: #E6EFFD !default;
-$cell-selected-bg: #F3F8FF !default;
-//$cell-index-selected-bg: #0550C5 !default;
-$cell-index-selected-bg: #1869E6 !default;
-//$cell-index-focus-bg: #CEDBEF !default;
-$cell-index-focus-bg: #E6EFFD !default;
-$rowSelectedHoverBg: 'ui-rc' !default;
-$boxShadowColor: rgba(5, 5, 5, 0.09) !default;
-$fontFamily: "Montserrat",Helvetica,Arial,serif !default;
-
-.react-hot-toast {
-  font-size: 1rem;
-  color: $body-color;
-  letter-spacing: 0.14px;
-  box-shadow: 0px 4px 10px -4px rgb(58 53 65 / 60%);
-  border-radius: $border-radius;
-}
-
-.popup-context-menu {
-  min-width: 200px;
-
-}
-.ant-dropdown-menu.popup-context-menu {
-  .ant-dropdown-menu-submenu {
-    .ant-dropdown-menu-submenu-title {
-      align-items: center;
-    }
-  }
-}
-
-// -------------- Table -------------
-
-.#{$prefix}-table-wrapper {
-
-  p {
-    margin: 0;
-  }
-
-  .ui-rc-table {
-    //font-family: $fontFamily;
-    color: #000000de;
-    //font-weight: 500;
-  }
-
-  .ui-rc-table {
-    .#{$prefix}-table-cell {
-      &.#{$prefix}-table-selection-column {
-        //padding: 6px 8px !important;
-        //padding: 6px 8px !important;
-      }
-    }
-  }
-
-
-  &.table-none-column-select {
-    .#{$prefix}-table-cell {
-      &.#{$prefix}-table-selection-column {
-        padding: 0 !important;
-        overflow: hidden !important;
-        border-inline-end: 0 !important;
-        //flex: 0 0 0 !important;
-        //width: 0 !important;
-      }
-    }
-  }
-
-  .#{$prefix}-table {
-    &.ui-rc-table-scroll-horizontal {
-
-      .ui-rc-table-container {
-
-        .#{$prefix}-table-tbody-virtual {
-
-          .ui-rc-table-tbody-virtual-scrollbar.ui-rc-table-tbody-virtual-scrollbar-horizontal {
-            visibility: visible !important;
-            bottom: -8px !important;
-            z-index: 5 !important;
-            background-color: #f0f0f0;
-          }
-
-        }
-
-        &:has(.ui-rc-table-summary) {
-
-          .#{$prefix}-table-tbody-virtual {
-
-            .ui-rc-table-tbody-virtual-scrollbar.ui-rc-table-tbody-virtual-scrollbar-horizontal {
-              visibility: visible !important;
-              //bottom: -40px !important;
-              bottom: -47px !important;
-              z-index: 5 !important;
-
-            }
-
-          }
-
-        }
-
-      }
-
-
-
-    }
-  }
-  .#{$prefix}-table {
-
-    //line-height: 20px;
-
-    .#{$prefix}-table-cell {
-      //min-height: 35px;
-      //height: 35px;
-
-      .#{$prefix}-table-filter-column {
-        .#{$prefix}-dropdown-trigger.#{$prefix}-table-filter-trigger {
-          margin-left: 0;
-        }
-      }
+// $prefix: 'ui-rc' !default;
+// $antdPrefix: 'ant' !default;
+// $primary: #eb4619 !default;
+// $rowHoverBg: #FBDED6 !default;
+// $rowSelectedBg: #FEF2EF !default;
+// //$tableBorderColor: red !default;
+// $tableBorderColor: #e0e0e0 !default;
+// //$tableBorderColor: #C4C4C4 !default;
+// //$tableBorderColor: #f0f0f0 !default;
+// $border-radius: 6px !default;
+// $border-selected-color: #0550C5 !default;
+// $body-color: #ffffff !default;
+// //$cell-selected-bg: #E6EFFD !default;
+// $cell-selected-bg: #F3F8FF !default;
+// //$cell-index-selected-bg: #0550C5 !default;
+// $cell-index-selected-bg: #1869E6 !default;
+// //$cell-index-focus-bg: #CEDBEF !default;
+// $cell-index-focus-bg: #E6EFFD !default;
+// $rowSelectedHoverBg: 'ui-rc' !default;
+// $boxShadowColor: rgba(5, 5, 5, 0.09) !default;
+// $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
+
+// .react-hot-toast {
+//   font-size: 1rem;
+//   color: $body-color;
+//   letter-spacing: 0.14px;
+//   box-shadow: 0px 4px 10px -4px rgb(58 53 65 / 60%);
+//   border-radius: $border-radius;
+// }
+
+// .popup-context-menu {
+//   min-width: 200px;
+
+// }
+// .ant-dropdown-menu.popup-context-menu {
+//   .ant-dropdown-menu-submenu {
+//     .ant-dropdown-menu-submenu-title {
+//       align-items: center;
+//     }
+//   }
+// }
+
+// // -------------- Table -------------
+
+// .#{$prefix}-table-wrapper {
+
+//   p {
+//     margin: 0;
+//   }
+
+//   .ui-rc-table {
+//     //font-family: $fontFamily;
+//     color: #000000de;
+//     //font-weight: 500;
+//   }
+
+//   .ui-rc-table {
+//     .#{$prefix}-table-cell {
+//       &.#{$prefix}-table-selection-column {
+//         //padding: 6px 8px !important;
+//         //padding: 6px 8px !important;
+//       }
+//     }
+//   }
+
+
+//   &.table-none-column-select {
+//     .#{$prefix}-table-cell {
+//       &.#{$prefix}-table-selection-column {
+//         padding: 0 !important;
+//         overflow: hidden !important;
+//         border-inline-end: 0 !important;
+//         //flex: 0 0 0 !important;
+//         //width: 0 !important;
+//       }
+//     }
+//   }
+
+//   .#{$prefix}-table {
+//     &.ui-rc-table-scroll-horizontal {
+
+//       .ui-rc-table-container {
+
+//         .#{$prefix}-table-tbody-virtual {
+
+//           .ui-rc-table-tbody-virtual-scrollbar.ui-rc-table-tbody-virtual-scrollbar-horizontal {
+//             visibility: visible !important;
+//             bottom: -8px !important;
+//             z-index: 5 !important;
+//             background-color: #f0f0f0;
+//           }
+
+//         }
+
+//         &:has(.ui-rc-table-summary) {
+
+//           .#{$prefix}-table-tbody-virtual {
+
+//             .ui-rc-table-tbody-virtual-scrollbar.ui-rc-table-tbody-virtual-scrollbar-horizontal {
+//               visibility: visible !important;
+//               //bottom: -40px !important;
+//               bottom: -47px !important;
+//               z-index: 5 !important;
+
+//             }
+
+//           }
+
+//         }
+
+//       }
+
+
+
+//     }
+//   }
+//   .#{$prefix}-table {
+
+//     //line-height: 20px;
+
+//     .#{$prefix}-table-cell {
+//       //min-height: 35px;
+//       //height: 35px;
+
+//       .#{$prefix}-table-filter-column {
+//         .#{$prefix}-dropdown-trigger.#{$prefix}-table-filter-trigger {
+//           margin-left: 0;
+//         }
+//       }
 
-      &.cell-group {
-        font-weight: 600;
-        background-color: #f5f5f5;
-        border-inline-end-color: transparent !important;
-      }
-
-      &.cell-group.cell-number {
-        border-inline-end-color: $tableBorderColor !important;
-      }
+//       &.cell-group {
+//         font-weight: 600;
+//         background-color: #f5f5f5;
+//         border-inline-end-color: transparent !important;
+//       }
+
+//       &.cell-group.cell-number {
+//         border-inline-end-color: $tableBorderColor !important;
+//       }
 
-      &.cell-group-fixed {
-        font-weight: 600;
-        position: sticky;
-        text-align: left !important;
-        left: 0;
-        z-index: 15;
-      }
-
-    }
-
-  }
-
-  .#{$prefix}-table-tbody-virtual {
-    .#{$prefix}-table-cell {
-      border-bottom: 1px solid $tableBorderColor;
-    }
-  }
+//       &.cell-group-fixed {
+//         font-weight: 600;
+//         position: sticky;
+//         text-align: left !important;
+//         left: 0;
+//         z-index: 15;
+//       }
+
+//     }
+
+//   }
+
+//   .#{$prefix}-table-tbody-virtual {
+//     .#{$prefix}-table-cell {
+//       border-bottom: 1px solid $tableBorderColor;
+//     }
+//   }
 
-  .#{$prefix}-table-bordered {
+//   .#{$prefix}-table-bordered {
 
-    .#{$prefix}-table-tbody-virtual {
-      .#{$prefix}-table-cell {
-        //display: flex;
-        border-inline-end: 1px solid $tableBorderColor;
-      }
-    }
-    .#{$prefix}-table-container {
-      .#{$prefix}-table-thead {
-
-        > tr{
-          > th.#{$prefix}-table-cell:last-of-type {
-            //border-inline-end: 0;
-          }
-        }
+//     .#{$prefix}-table-tbody-virtual {
+//       .#{$prefix}-table-cell {
+//         //display: flex;
+//         border-inline-end: 1px solid $tableBorderColor;
+//       }
+//     }
+//     .#{$prefix}-table-container {
+//       .#{$prefix}-table-thead {
+
+//         > tr{
+//           > th.#{$prefix}-table-cell:last-of-type {
+//             //border-inline-end: 0;
+//           }
+//         }
 
-      }
-      .#{$prefix}-table-summary {
-        > tr{
-          > td.#{$prefix}-table-cell:last-of-type {
-            //border-inline-end: 0;
-          }
-        }
-      }
-    }
-
-  }
-
-  .#{$prefix}-table-tbody {
-
-
-    .#{$prefix}-table-cell {
-      line-height: 22px;
-      &:focus-visible {
-        outline: none;
-      }
-
-
-      &.disable {
-        background-color: #f0f0f0;
-      }
-
-      //&.selected {
-      //  //background: red;
-      //  background-color: $cell-selected-bg !important;
-      //}
-      &.selected-bg {
-        //background: red;
-        background-color: $cell-selected-bg !important;
-      }
-
-      .ui-rc-table-cell-content {
-        line-height: 22px;
-      }
-
-      &.#{$prefix}-table-cell-fix-left-last {
-        .#{$prefix}-table-cell-content {
-        }
-      }
-
-    }
-
-    .#{$prefix}-table-row {
-
-      &.#{$prefix}-table-row-selected {
-        > .#{$prefix}-table-cell {
-          background: #FEF2EF;
-        }
-      }
-
-      &.row-disabled {
-        .#{$prefix}-table-cell {
-          //background-color: #f5f5f5;
-        }
-      }
-
-      > .#{$prefix}-table-cell {
-        &.#{$prefix}-table-cell-row-hover {
-          background: #FBDED6;
-        }
-
-        &.#{$prefix}-cell-command {
-          padding: 5px 8px;
-
-          .#{$prefix}-cell-command__content {
-            display: flex;
-            gap: 5px;
-            overflow: hidden;
-          }
-        }
-
-
-      }
-
-      .#{$prefix}-table-cell:last-of-type {
-        //border-inline-end: 0;
-      }
-
-
-      @for $i from 0 through 10 {
-        &:has(.indent-level-#{$i}) {
-          .#{$prefix}-table-cell {
-            &.cell-number {
-              .ui-rc_content {
-                padding-left: $i * 10px;
-              }
-            }
-          }
-        }
-      }
-
-    }
-
-    .#{$prefix}-table-placeholder {
-      .#{$prefix}-table-cell {
-        padding-top: 0 !important;
-        padding-bottom: 0 !important;
-        .#{$prefix}-table-expanded-row-fixed {
-          margin-top: 0 !important;
-          margin-bottom: 0 !important;
-        }
-      }
-    }
-  }
-
-  .#{$prefix}-table-thead {
-    //font-weight: 400;
-
-    > tr {
-      > th,
-      > td {
-        border-bottom: 1px solid $tableBorderColor;
-        //background: #fff;
-        font-weight: 500;
-        //line-height: 23px;
-        //height: 40px;
-      }
-    }
-
-    .#{$prefix}-table-cell {
-
-      .ui-rc-table-column-sorter{
-        line-height: normal !important;
-      }
-
-      &:hover {
-        .ui-rc-table-column-sorter-up.active {
-          opacity: 1 !important;
-        }
-      }
-
-      .ui-rc-table-cell-content {
-        line-height: 22px;
-      }
-
-      &.#{$prefix}-table-cell-fix-left-last {
-        .#{$prefix}-table-cell-content {
-          //overflow: visible;
-        }
-      }
-
-      .#{$prefix}-table-column-title {
-        //overflow: unset;
-        //position: unset;
-        //display: flex;
-      }
-
-      &.head-align-center {
-        text-align: center;
-      }
-
-      &.head-align-right {
-        text-align: right;
-      }
-
-      .ui-rc-table-column-title {
-        .header-text-wrap {
-          white-space: normal !important;
-        }
-      }
-
-
-    }
-  }
-
-  .#{$prefix}-table-summary {
-    .#{$prefix}-table-cell {
-      background-color: #fafafa;
-      height: 39px;
-      font-weight: 600;
-    }
-
-    > tr > td {
-      border-bottom: 1px solid $tableBorderColor;
-    }
-  }
-
-  //.#{$prefix}-table-bordered .#{$prefix}-table-tbody-virtual .#{$prefix}-table-cell.#{$prefix}-table-cell-fix-right-first:before {
-  //  border-inline-start: 1px solid $tableBorderColor;
-  //}
-
-  .#{$prefix}-table-bordered .#{$prefix}-table-tbody-virtual .#{$prefix}-table-cell.#{$prefix}-table-cell-fix-right-first {
-    &::before {
-      border-inline-start: 1px solid $tableBorderColor;
-    }
-    &.has-before::before {
-      border-inline-start: 1px solid $border-selected-color;
-    }
-    &.cell-border-left.selected-bg::before {
-      border-inline-start: 1px solid $border-selected-color;
-    }
-  }
-
-
-
-  .#{$prefix}-table {
-
-    &.#{$prefix}-table-bordered {
-      > .#{$prefix}-table-container {
-        border-inline-start: 1px solid $tableBorderColor;
-        border-top: 1px solid $tableBorderColor;
-
-        &::after {
-          border-inline-end: 1px solid $tableBorderColor;
-        }
-
-        > .#{$prefix}-table-content,
-        > .#{$prefix}-table-header,
-        > .#{$prefix}-table-body,
-        > .#{$prefix}-table-summary {
-          > table {
-            > thead {
-              > tr:not(:last-child) {
-                > th {
-                  border-bottom: 1px solid $tableBorderColor;
-                }
-              }
-            }
-          }
-        }
-
-
-        > .#{$prefix}-table-content,
-        > .#{$prefix}-table-header,
-        > .#{$prefix}-table-body,
-        > .#{$prefix}-table-summary {
-          > table {
-            > thead,
-            > tbody,
-            > tfoot {
-              > tr {
-                > th,
-                > td {
-                  border-inline-end: 1px solid $tableBorderColor;
-                }
-              }
-            }
-          }
-        }
-
-      }
-
-      > .#{$prefix}-table-title {
-        border: 1px solid $tableBorderColor;
-        border-bottom: 0;
-      }
-    }
-
-    &.#{$prefix}-table-ping-right:not(.#{$prefix}-table-has-fix-right) .#{$prefix}-table-container::after {
-      box-shadow: inset -10px 0 8px -8px $boxShadowColor;
-      //box-shadow: none;
-    }
-
-
-  }
-
-  .#{$prefix}-table-ping-left {
-    .#{$prefix}-table-cell-fix-left-first::after,
-    .#{$prefix}-table-cell-fix-left-last::after {
-      box-shadow: inset 10px 0 8px -8px $boxShadowColor;
-    }
-  }
-
-  .#{$prefix}-table-ping-right {
-    .#{$prefix}-table-cell-fix-right-first::after,
-    .#{$prefix}-table-cell-fix-right-last::after {
-      box-shadow: inset -10px 0 8px -8px $boxShadowColor;
-    }
-  }
-
-
-  .#{$prefix}-table.#{$prefix}-table-bordered {
-    > .#{$prefix}-table-container {
-      > .#{$prefix}-table-header > table > thead > tr,
-      > .#{$prefix}-table-summary > table > tfoot > tr {
-        > .#{$prefix}-table-cell-fix-right-first::before {
-          border-inline-start: 1px solid $tableBorderColor;
-          content: "";
-          position: absolute;
-          inset-block: 0;
-          inset-inline-start: -1px;
-        }
-      }
-    }
-  }
-
-
-}
-
-// -------------- Table edit-------------
-
-.#{$prefix}-table-wrapper {
-
-  .#{$prefix}-table.#{$prefix}-table-small {
-    .ui-rc-table-thead {
-      >tr >th.#{$prefix}-table-selection-column{
-        //padding-block: 7px;
-        padding: 0;
-        //padding: 6px 8px;
-      }
-    }
-    //.#{$prefix}-table-selection-column{
-    //  padding-block: 7px;
-    //  padding: 0;
-    //  //padding: 6px 8px;
-    //}
-  }
-
-  &.grid-editable {
-
-    .#{$prefix}-table-row {
-      &:has(+ .#{$prefix}-table-cell) {
-
-      }
-    }
-
-    .#{$prefix}-table .#{$prefix}-table-tbody .rc-ui-cell-editable {
-      overflow: unset;
-      display: flex;
-      height: 37px;
-      //--------
-      padding: 0;
-
-      .#{$prefix}-table-row-expand-icon {
-        top: 8px;
-        left: 8px;
-      }
-
-      &.rc-ui-cell-index {
-        &.focus {
-          background-color: $cell-index-focus-bg;
-          //font-weight: 500;
-        }
-        &.selected-index {
-          background-color: $cell-index-selected-bg !important;
-          color: #fff;
-          //font-weight: 500;
-        }
-      }
-
-      &.cell-editable {
-
-        &.cell-border-top {
-          //border-bottom: 1px solid $border-selected-color;
-          &::after {
-            content: "";
-            position: absolute;
-            top: -1px;
-            left: 0;
-            //right: 0;
-            //bottom: 0;
-            height: 1px;
-            width: 100%;
-            border-top: 1px solid $border-selected-color; /* line đè lên border gốc */
-            pointer-events: none; /* không ảnh hưởng đến tương tác */
-            z-index: 1;
-          }
-          &.ui-rc-table-cell-fix-left.ui-rc-table-cell-fix-left-last {
-            &::after {
-              left: -100%;
-            }
-          }
-          &.ui-rc-table-cell-fix-right.ui-rc-table-cell-fix-right-first {
-            &::after {
-              left: 100%;
-            }
-          }
-        }
-
-        &.cell-border-bottom {
-          border-bottom: 1px solid $border-selected-color;
-          //position: relative;
-          //&::before {
-          //  content: "";
-          //  position: absolute;
-          //  //top: 0;
-          //  left: 0;
-          //  //right: 0;
-          //  bottom: 0;
-          //  height: 1px;
-          //  width: 100%;
-          //  border: 1px solid red; /* line đè lên border gốc */
-          //  pointer-events: none;  /* không ảnh hưởng đến tương tác */
-          //  z-index: 1;
-          //}
-
-        }
-
-        &.cell-border-left {
-          //overflow: hidden;
-          //border-inline-end: 1px solid $border-selected-color;
-          &::before {
-            content: "";
-            position: absolute;
-            top: 0;
-            left: 0;
-            //right: 0;
-            //bottom: 0;
-            height: 102%;
-            width: 1px;
-            border-left: 1px solid $border-selected-color; /* line đè lên border gốc */
-            pointer-events: none; /* không ảnh hưởng đến tương tác */
-            z-index: 1;
-          }
-        }
-
-        &.cell-border-right {
-          border-inline-end: 1px solid $border-selected-color;
-          //&::before {
-          //  content: "";
-          //  position: absolute;
-          //  top: 0;
-          //  //left: 0;
-          //  right: 0;
-          //  //bottom: 0;
-          //  height: 100%;
-          //  width: 1px;
-          //  border: 1px solid red; /* line đè lên border gốc */
-          //  pointer-events: none; /* không ảnh hưởng đến tương tác */
-          //  z-index: 1;
-          //}
-        }
-
-        &.cell-paste-border-top {
-          border-bottom: 1px dashed #949494;
-        }
-
-        &.cell-paste-border-bottom {
-          border-bottom: 1px dashed #949494;
-        }
-
-        &.cell-paste-border-left {
-          border-inline-end: 1px dashed #949494;
-        }
-
-        &.cell-paste-border-right {
-          border-inline-end: 1px dashed #949494;
-        }
-
-
-        &.#{$prefix}-table-cell-fix-left {
-          &:has(.ui-rc_cell-content.selected) {
-          }
-
-        }
-
-        &.#{$prefix}-table-cell-fix-right {
-          &:has(.ui-rc_cell-content.selected) {
-          }
-
-          &.cell-border-end {
-            z-index: 3;
-          }
-
-        }
-
-
-        &.cell-border-end {
-          z-index: 1;
-        }
+//       }
+//       .#{$prefix}-table-summary {
+//         > tr{
+//           > td.#{$prefix}-table-cell:last-of-type {
+//             //border-inline-end: 0;
+//           }
+//         }
+//       }
+//     }
+
+//   }
+
+//   .#{$prefix}-table-tbody {
+
+
+//     .#{$prefix}-table-cell {
+//       line-height: 22px;
+//       &:focus-visible {
+//         outline: none;
+//       }
+
+
+//       &.disable {
+//         background-color: #f0f0f0;
+//       }
+
+//       //&.selected {
+//       //  //background: red;
+//       //  background-color: $cell-selected-bg !important;
+//       //}
+//       &.selected-bg {
+//         //background: red;
+//         background-color: $cell-selected-bg !important;
+//       }
+
+//       .ui-rc-table-cell-content {
+//         line-height: 22px;
+//       }
+
+//       &.#{$prefix}-table-cell-fix-left-last {
+//         .#{$prefix}-table-cell-content {
+//         }
+//       }
+
+//     }
+
+//     .#{$prefix}-table-row {
+
+//       &.#{$prefix}-table-row-selected {
+//         > .#{$prefix}-table-cell {
+//           background: #FEF2EF;
+//         }
+//       }
+
+//       &.row-disabled {
+//         .#{$prefix}-table-cell {
+//           //background-color: #f5f5f5;
+//         }
+//       }
+
+//       > .#{$prefix}-table-cell {
+//         &.#{$prefix}-table-cell-row-hover {
+//           background: #FBDED6;
+//         }
+
+//         &.#{$prefix}-cell-command {
+//           padding: 5px 8px;
+
+//           .#{$prefix}-cell-command__content {
+//             display: flex;
+//             gap: 5px;
+//             overflow: hidden;
+//           }
+//         }
+
+
+//       }
+
+//       .#{$prefix}-table-cell:last-of-type {
+//         //border-inline-end: 0;
+//       }
+
+
+//       @for $i from 0 through 10 {
+//         &:has(.indent-level-#{$i}) {
+//           .#{$prefix}-table-cell {
+//             &.cell-number {
+//               .ui-rc_content {
+//                 padding-left: $i * 10px;
+//               }
+//             }
+//           }
+//         }
+//       }
+
+//     }
+
+//     .#{$prefix}-table-placeholder {
+//       .#{$prefix}-table-cell {
+//         padding-top: 0 !important;
+//         padding-bottom: 0 !important;
+//         .#{$prefix}-table-expanded-row-fixed {
+//           margin-top: 0 !important;
+//           margin-bottom: 0 !important;
+//         }
+//       }
+//     }
+//   }
+
+//   .#{$prefix}-table-thead {
+//     //font-weight: 400;
+
+//     > tr {
+//       > th,
+//       > td {
+//         border-bottom: 1px solid $tableBorderColor;
+//         //background: #fff;
+//         font-weight: 500;
+//         //line-height: 23px;
+//         //height: 40px;
+//       }
+//     }
+
+//     .#{$prefix}-table-cell {
+
+//       .ui-rc-table-column-sorter{
+//         line-height: normal !important;
+//       }
+
+//       &:hover {
+//         .ui-rc-table-column-sorter-up.active {
+//           opacity: 1 !important;
+//         }
+//       }
+
+//       .ui-rc-table-cell-content {
+//         line-height: 22px;
+//       }
+
+//       &.#{$prefix}-table-cell-fix-left-last {
+//         .#{$prefix}-table-cell-content {
+//           //overflow: visible;
+//         }
+//       }
+
+//       .#{$prefix}-table-column-title {
+//         //overflow: unset;
+//         //position: unset;
+//         //display: flex;
+//       }
+
+//       &.head-align-center {
+//         text-align: center;
+//       }
+
+//       &.head-align-right {
+//         text-align: right;
+//       }
+
+//       .ui-rc-table-column-title {
+//         .header-text-wrap {
+//           white-space: normal !important;
+//         }
+//       }
+
+
+//     }
+//   }
+
+//   .#{$prefix}-table-summary {
+//     .#{$prefix}-table-cell {
+//       background-color: #fafafa;
+//       height: 39px;
+//       font-weight: 600;
+//     }
+
+//     > tr > td {
+//       border-bottom: 1px solid $tableBorderColor;
+//     }
+//   }
+
+//   //.#{$prefix}-table-bordered .#{$prefix}-table-tbody-virtual .#{$prefix}-table-cell.#{$prefix}-table-cell-fix-right-first:before {
+//   //  border-inline-start: 1px solid $tableBorderColor;
+//   //}
+
+//   .#{$prefix}-table-bordered .#{$prefix}-table-tbody-virtual .#{$prefix}-table-cell.#{$prefix}-table-cell-fix-right-first {
+//     &::before {
+//       border-inline-start: 1px solid $tableBorderColor;
+//     }
+//     &.has-before::before {
+//       border-inline-start: 1px solid $border-selected-color;
+//     }
+//     &.cell-border-left.selected-bg::before {
+//       border-inline-start: 1px solid $border-selected-color;
+//     }
+//   }
+
+
+
+//   .#{$prefix}-table {
+
+//     &.#{$prefix}-table-bordered {
+//       > .#{$prefix}-table-container {
+//         border-inline-start: 1px solid $tableBorderColor;
+//         border-top: 1px solid $tableBorderColor;
+
+//         &::after {
+//           border-inline-end: 1px solid $tableBorderColor;
+//         }
+
+//         > .#{$prefix}-table-content,
+//         > .#{$prefix}-table-header,
+//         > .#{$prefix}-table-body,
+//         > .#{$prefix}-table-summary {
+//           > table {
+//             > thead {
+//               > tr:not(:last-child) {
+//                 > th {
+//                   border-bottom: 1px solid $tableBorderColor;
+//                 }
+//               }
+//             }
+//           }
+//         }
+
+
+//         > .#{$prefix}-table-content,
+//         > .#{$prefix}-table-header,
+//         > .#{$prefix}-table-body,
+//         > .#{$prefix}-table-summary {
+//           > table {
+//             > thead,
+//             > tbody,
+//             > tfoot {
+//               > tr {
+//                 > th,
+//                 > td {
+//                   border-inline-end: 1px solid $tableBorderColor;
+//                 }
+//               }
+//             }
+//           }
+//         }
+
+//       }
+
+//       > .#{$prefix}-table-title {
+//         border: 1px solid $tableBorderColor;
+//         border-bottom: 0;
+//       }
+//     }
+
+//     &.#{$prefix}-table-ping-right:not(.#{$prefix}-table-has-fix-right) .#{$prefix}-table-container::after {
+//       box-shadow: inset -10px 0 8px -8px $boxShadowColor;
+//       //box-shadow: none;
+//     }
+
+
+//   }
+
+//   .#{$prefix}-table-ping-left {
+//     .#{$prefix}-table-cell-fix-left-first::after,
+//     .#{$prefix}-table-cell-fix-left-last::after {
+//       box-shadow: inset 10px 0 8px -8px $boxShadowColor;
+//     }
+//   }
+
+//   .#{$prefix}-table-ping-right {
+//     .#{$prefix}-table-cell-fix-right-first::after,
+//     .#{$prefix}-table-cell-fix-right-last::after {
+//       box-shadow: inset -10px 0 8px -8px $boxShadowColor;
+//     }
+//   }
+
+
+//   .#{$prefix}-table.#{$prefix}-table-bordered {
+//     > .#{$prefix}-table-container {
+//       > .#{$prefix}-table-header > table > thead > tr,
+//       > .#{$prefix}-table-summary > table > tfoot > tr {
+//         > .#{$prefix}-table-cell-fix-right-first::before {
+//           border-inline-start: 1px solid $tableBorderColor;
+//           content: "";
+//           position: absolute;
+//           inset-block: 0;
+//           inset-inline-start: -1px;
+//         }
+//       }
+//     }
+//   }
+
+
+// }
+
+// // -------------- Table edit-------------
+
+// .#{$prefix}-table-wrapper {
+
+//   .#{$prefix}-table.#{$prefix}-table-small {
+//     .ui-rc-table-thead {
+//       >tr >th.#{$prefix}-table-selection-column{
+//         //padding-block: 7px;
+//         padding: 0;
+//         //padding: 6px 8px;
+//       }
+//     }
+//     //.#{$prefix}-table-selection-column{
+//     //  padding-block: 7px;
+//     //  padding: 0;
+//     //  //padding: 6px 8px;
+//     //}
+//   }
+
+//   &.grid-editable {
+
+//     .#{$prefix}-table-row {
+//       &:has(+ .#{$prefix}-table-cell) {
+
+//       }
+//     }
+
+//     .#{$prefix}-table .#{$prefix}-table-tbody .rc-ui-cell-editable {
+//       overflow: unset;
+//       display: flex;
+//       height: 37px;
+//       //--------
+//       padding: 0;
+
+//       .#{$prefix}-table-row-expand-icon {
+//         top: 8px;
+//         left: 8px;
+//       }
+
+//       &.rc-ui-cell-index {
+//         &.focus {
+//           background-color: $cell-index-focus-bg;
+//           //font-weight: 500;
+//         }
+//         &.selected-index {
+//           background-color: $cell-index-selected-bg !important;
+//           color: #fff;
+//           //font-weight: 500;
+//         }
+//       }
+
+//       &.cell-editable {
+
+//         &.cell-border-top {
+//           //border-bottom: 1px solid $border-selected-color;
+//           &::after {
+//             content: "";
+//             position: absolute;
+//             top: -1px;
+//             left: 0;
+//             //right: 0;
+//             //bottom: 0;
+//             height: 1px;
+//             width: 100%;
+//             border-top: 1px solid $border-selected-color; /* line đè lên border gốc */
+//             pointer-events: none; /* không ảnh hưởng đến tương tác */
+//             z-index: 1;
+//           }
+//           &.ui-rc-table-cell-fix-left.ui-rc-table-cell-fix-left-last {
+//             &::after {
+//               left: -100%;
+//             }
+//           }
+//           &.ui-rc-table-cell-fix-right.ui-rc-table-cell-fix-right-first {
+//             &::after {
+//               left: 100%;
+//             }
+//           }
+//         }
+
+//         &.cell-border-bottom {
+//           border-bottom: 1px solid $border-selected-color;
+//           //position: relative;
+//           //&::before {
+//           //  content: "";
+//           //  position: absolute;
+//           //  //top: 0;
+//           //  left: 0;
+//           //  //right: 0;
+//           //  bottom: 0;
+//           //  height: 1px;
+//           //  width: 100%;
+//           //  border: 1px solid red; /* line đè lên border gốc */
+//           //  pointer-events: none;  /* không ảnh hưởng đến tương tác */
+//           //  z-index: 1;
+//           //}
+
+//         }
+
+//         &.cell-border-left {
+//           //overflow: hidden;
+//           //border-inline-end: 1px solid $border-selected-color;
+//           &::before {
+//             content: "";
+//             position: absolute;
+//             top: 0;
+//             left: 0;
+//             //right: 0;
+//             //bottom: 0;
+//             height: 102%;
+//             width: 1px;
+//             border-left: 1px solid $border-selected-color; /* line đè lên border gốc */
+//             pointer-events: none; /* không ảnh hưởng đến tương tác */
+//             z-index: 1;
+//           }
+//         }
+
+//         &.cell-border-right {
+//           border-inline-end: 1px solid $border-selected-color;
+//           //&::before {
+//           //  content: "";
+//           //  position: absolute;
+//           //  top: 0;
+//           //  //left: 0;
+//           //  right: 0;
+//           //  //bottom: 0;
+//           //  height: 100%;
+//           //  width: 1px;
+//           //  border: 1px solid red; /* line đè lên border gốc */
+//           //  pointer-events: none; /* không ảnh hưởng đến tương tác */
+//           //  z-index: 1;
+//           //}
+//         }
+
+//         &.cell-paste-border-top {
+//           border-bottom: 1px dashed #949494;
+//         }
+
+//         &.cell-paste-border-bottom {
+//           border-bottom: 1px dashed #949494;
+//         }
+
+//         &.cell-paste-border-left {
+//           border-inline-end: 1px dashed #949494;
+//         }
+
+//         &.cell-paste-border-right {
+//           border-inline-end: 1px dashed #949494;
+//         }
+
+
+//         &.#{$prefix}-table-cell-fix-left {
+//           &:has(.ui-rc_cell-content.selected) {
+//           }
+
+//         }
+
+//         &.#{$prefix}-table-cell-fix-right {
+//           &:has(.ui-rc_cell-content.selected) {
+//           }
+
+//           &.cell-border-end {
+//             z-index: 3;
+//           }
+
+//         }
+
+
+//         &.cell-border-end {
+//           z-index: 1;
+//         }
 
-        &.#{$prefix}-table-cell-fix-right-first {
+//         &.#{$prefix}-table-cell-fix-right-first {
 
-          &.cell-border-end {
-            z-index: 3;
-          }
+//           &.cell-border-end {
+//             z-index: 3;
+//           }
 
-          &.next-cell-border-left {
-            &::before {
-              border-inline-start: 1px solid $border-selected-color;
-            }
-          }
+//           &.next-cell-border-left {
+//             &::before {
+//               border-inline-start: 1px solid $border-selected-color;
+//             }
+//           }
 
 
-          &.next-cell-paste-border-left {
-            &::before {
-              border-inline-start: 1px dashed #949494;
-            }
-          }
+//           &.next-cell-paste-border-left {
+//             &::before {
+//               border-inline-start: 1px dashed #949494;
+//             }
+//           }
 
-          &.fixed-cell-border-left {
-            &::before {
-              border-inline-start: 1px solid $border-selected-color;
-            }
-          }
-          &.fixed-cell-paste-border-left {
-            &::before {
-              border-inline-start: 1px dashed #949494;
-            }
-          }
+//           &.fixed-cell-border-left {
+//             &::before {
+//               border-inline-start: 1px solid $border-selected-color;
+//             }
+//           }
+//           &.fixed-cell-paste-border-left {
+//             &::before {
+//               border-inline-start: 1px dashed #949494;
+//             }
+//           }
 
-        }
+//         }
 
-        &.#{$prefix}-table-cell-fix-left-last {
+//         &.#{$prefix}-table-cell-fix-left-last {
 
-          &.cell-border-end {
-            z-index: 3;
-          }
+//           &.cell-border-end {
+//             z-index: 3;
+//           }
 
-        }
+//         }
 
-      }
+//       }
 
 
-    }
+//     }
 
-    .#{$prefix}-table.#{$prefix}-table-ping-left {
-      .#{$prefix}-table-tbody .rc-ui-cell-editable{
-        &.cell-editable {
+//     .#{$prefix}-table.#{$prefix}-table-ping-left {
+//       .#{$prefix}-table-tbody .rc-ui-cell-editable{
+//         &.cell-editable {
 
 
-          &.#{$prefix}-table-cell-fix-left-last {
+//           &.#{$prefix}-table-cell-fix-left-last {
 
-            //&.cell-border-left {
-            //  border-inline-end: 1px solid $tableBorderColor;
-            //}
+//             //&.cell-border-left {
+//             //  border-inline-end: 1px solid $tableBorderColor;
+//             //}
 
-          }
+//           }
 
 
 
-        }
-      }
+//         }
+//       }
 
-      &:not(.#{$prefix}-table.#{$prefix}-table-ping-right) {
+//       &:not(.#{$prefix}-table.#{$prefix}-table-ping-right) {
 
-        .#{$prefix}-table-tbody .rc-ui-cell-editable {
-          &.cell-editable {
+//         .#{$prefix}-table-tbody .rc-ui-cell-editable {
+//           &.cell-editable {
 
-            // //&.cell-border-end {
-            //  //  z-index: 1;
-            //  //}
+//             // //&.cell-border-end {
+//             //  //  z-index: 1;
+//             //  //}
 
-            &.#{$prefix}-table-cell-fix-right {
-              z-index: 0 !important;
+//             &.#{$prefix}-table-cell-fix-right {
+//               z-index: 0 !important;
 
-              &:has(.dragging-point.show) {
-                z-index: 3 !important;
-            }
+//               &:has(.dragging-point.show) {
+//                 z-index: 3 !important;
+//             }
 
-              &.cell-border-end {
-                z-index: 3;
-              }
-            }
+//               &.cell-border-end {
+//                 z-index: 3;
+//               }
+//             }
 
-          }
-        }
+//           }
+//         }
 
-      }
+//       }
 
-    }
+//     }
 
-    .#{$prefix}-table.#{$prefix}-table-ping-right {
-      .#{$prefix}-table-tbody .rc-ui-cell-editable{
+//     .#{$prefix}-table.#{$prefix}-table-ping-right {
+//       .#{$prefix}-table-tbody .rc-ui-cell-editable{
 
-        &.cell-editable {
+//         &.cell-editable {
 
-          &.#{$prefix}-table-cell-fix-right-first {
+//           &.#{$prefix}-table-cell-fix-right-first {
 
-            &.next-cell-border-left {
-              &::before {
-                border-inline-start: 1px solid $tableBorderColor;
-              }
-            }
+//             &.next-cell-border-left {
+//               &::before {
+//                 border-inline-start: 1px solid $tableBorderColor;
+//               }
+//             }
 
 
 
-          }
-
-          &.#{$prefix}-table-cell-fix-left-last {
-            &.cell-border-end {
-              z-index: 3;
-            }
-          }
-
-        }
-
-        &.cell-border-end {
-          z-index: 1;
-        }
-
-      }
-
-    }
+//           }
+
+//           &.#{$prefix}-table-cell-fix-left-last {
+//             &.cell-border-end {
+//               z-index: 3;
+//             }
+//           }
+
+//         }
+
+//         &.cell-border-end {
+//           z-index: 1;
+//         }
+
+//       }
+
+//     }
 
 
-    .#{$prefix}-table.#{$prefix}-table-small {
-      .#{$prefix}-table-thead > tr > th,
-      tfoot > tr > th,
-      tfoot > tr > td,
-      tfoot > tr > td.#{$prefix}-table-cell
-      {
-        //padding: 8px 8px;
-      }
-    }
-
-    .#{$prefix}-table.#{$prefix}-table-small {
-      .#{$prefix}-table-selection-column{
-        //padding: 8px 8px;
-        //padding: 6px 8px;
-      }
-    }
-
-    .ui-rc_cell-content {
-      user-select: none;
-      //padding: 7px 8px;
-      padding: 2px 8px;
-      display: flex;
-      align-items: center;
-      overflow: hidden;
-
-      .ui-rc_content {
-        width: 100%;
-      }
-      &:hover {
-        .dragging-point {
-          //visibility: visible;
-        }
-      }
-
-      .dragging-point {
-        //visibility: hidden;
-        width: 10px;
-        height: 10px;
-        position: absolute;
-        cursor: crosshair;
-        right: -1px;
-        bottom: -1px;
-        //background: red;
-
-        &.hidden {
-          display: none;
-        }
-
-        .dot-point {
-          position: absolute;
-          width: 8px;
-          height: 8px;
-          border-radius: 6px;
-          background-color: $border-selected-color;
-          bottom: -3px;
-          right: -3px;
-        }
-
-      }
-    }
-
-    .ui-rc_cell-content.selected {
-      background-color: $cell-selected-bg;
-    }
-    .ui-rc_cell-content {
-      //position: relative;
-      &.isValid {
-        &::after {
-          content: "";
-          position: absolute;
-          top: 0;
-          right: 0;
-          width: 0;
-          height: 0;
-          border-top: 0 solid transparent;
-          border-right: 8px solid red;
-          border-bottom: 8px solid transparent;
-        }
-      }
-    }
-
-    //.ui-rc_cell-content.disable {
-    //  background-color: #f0f0f0;
-    //}
-
-    //.ui-rc_cell-content--index {
-    //  &.focus {
-    //    background-color: $cell-index-focus-bg;
-    //    //color: #fff;
-    //    //font-weight: 500;
-    //  }
-    //  &.selected {
-    //    background-color: $cell-index-selected-bg;
-    //    color: #fff;
-    //    //font-weight: 500;
-    //  }
-    //}
-
-    .#{$prefix}-table-tbody {
-
-      .#{$prefix}-table-row {
-        &.#{$prefix}-table-row-selected {
-          >.#{$prefix}-table-cell {
-            //background: #FEF2EF;
-          }
-        }
-        >.#{$prefix}-table-cell {
-          &.#{$prefix}-table-cell-row-hover {
-            //background: #FBDED6;
-          }
-        }
-
-        .#{$prefix}-table-cell {
-
-          .#{$prefix}-table-row-indent {
-            position: absolute;
-            @for $i from 1 through 10 {
-              &.indent-level-#{$i} {
-                padding-left: $i * 25px;;
-              }
-            }
-          }
-
-          @for $i from 0 through 10 {
-            &:has(.indent-level-#{$i}) {
-
-              .#{$prefix}-table-row-expand-icon {
-                position: absolute;
-                //.ui-rc_content {
-                //padding-left: $i * 10px;
-                //}
-              }
-
-              .ui-rc_cell-content {
-                padding-left: $i * 25px + 8px;
-              }
-
-            }
-          }
-
-          @for $i from 0 through 10 {
-            &:has(.indent-level-#{$i}) {
-
-              .#{$prefix}-table-row-expand-icon {
-                position: absolute;
-                left: $i * 25px + 8px !important;
-              }
-
-              .ui-rc_cell-content {
-                padding-left: ($i + 1)* 25px + 8px;
-              }
-
-            }
-          }
-        }
-      }
-
-
-      .#{$prefix}-table-cell{
-
-        &.#{$prefix}-table-cell-ellipsis {
-          .ui-rc_cell-content {
-
-            .ui-rc_content {
-              text-overflow: ellipsis;
-              text-decoration: none;
-              transition: 0.3s;
-              white-space: nowrap;
-              overflow: hidden;
-              line-height: 22px;
-            }
-          }
-        }
-
-        &.cell-editing {
-          //padding: 0 !important;
-          &:focus-visible {
-            outline: none;
-          }
-          .ant-form-item ,
-          .ant-row.ant-form-item-row,
-          .ant-col.ant-form-item-control,
-          .ant-form-item-control-input,
-          .ant-form-item-control-input-content,
-          .ant-input{
-            height: 100% !important;
-            max-height: unset !important;
-            &:focus-visible {
-              outline: none;
-            }
-          }
-          textarea.ant-input {
-            line-height: 1.8;
-          }
-
-          input.be-cell-editing, .ant-picker, .ui-rc-select-selector, .ui-rc-table-select-selector {
-            padding-inline: 7px;
-          }
-
-          .#{$prefix}-checkbox-wrapper {
-            .#{$prefix}-checkbox {
-              background-color: red;
-            }
-            .#{$prefix}-checkbox-input {
-              &:focus-visible {
-                outline: none;
-              }
-            }
-          }
-
-
-          .ant-input, .ant-picker{
-            border-radius: 0;
-          }
-
-          // color picker
-
-          .ant-color-picker-trigger{
-            height: 100%;
-            border-radius: 0;
-            .ant-color-picker-color-block {
-              height: 100%;
-              width: 100%;
-            }
-
-          }
-
-
-          // ------------ select  ---------------
-
-          .#{$prefix}-table-select-single .#{$prefix}-table-select-selector,
-          .#{$prefix}-select-single .#{$prefix}-select-selector {
-
-            border-radius: 0;
-
-          }
-
-          .#{$prefix}-table-select-single:not(.#{$prefix}-table-select-customize-input) {
-            .#{$prefix}-table-select-selector {
-              .#{$prefix}-table-select-selection-search-input {
-                height: auto;
-              }
-            }
-          }
-
-          // ------------ select  ---------------
-
-
-        }
-        &.cell-editable {
-
-          &:focus-visible {
-            outline: none;
-          }
-          .ui-rc_content {
-            //display: flex;
-            //justify-content: space-between;
-            &.select-cell {
-              padding-right: 18px;
-              position: relative;
-              //&::after {
-              //  position: absolute;
-              //  right: 0;
-              //  content: '';
-              //  display: inline-block;
-              //  margin-left: 4px;
-              //  vertical-align: middle;
-              //  width: 0;
-              //  height: 0;
-              //  border-left: 5px solid transparent;
-              //  border-right: 5px solid transparent;
-              //  border-top: 5px solid black;
-              //}
-            }
-          }
-          .caret-down {
-            float: right;
-            position: absolute;
-            right: 0;
-            &::before {
-              content: '';
-              display: inline-block;
-              margin-left: 4px;
-              vertical-align: middle;
-              width: 0;
-              height: 0;
-              border-left: 5px solid transparent;
-              border-right: 5px solid transparent;
-              border-top: 5px solid #6f7777;
-            }
-          }
-
-        }
-        .#{$prefix}-table-cell-content {
-          display: flex;
-          height: 100%;
-        }
-
-        .ui-rc_cell-content,
-        .#{$prefix}-table-cell-content{
-          //width: 100%;
-          flex: 1;
-        }
-        .ui-rc_content {
-          //padding: 5px 8px;
-        }
-        .ui-rc_content:has(.ant-color-picker-trigger) {
-          padding: 1px 8px;
-        }
-      }
-    }
-
-  }
-
-}
-// ---------------- Table edit end---------------
-
-
-// -------------- Checkbox ----------
-
-.#{$prefix}-checkbox-indeterminate {
-  &:hover {
-    .#{$prefix}-checkbox-inner {
-      border-color: $primary !important;;
-    }
-  }
-
-  .#{$prefix}-checkbox-inner {
-    &:after {
-      background-color: $primary;
-    }
-  }
-}
-//.#{$prefix}-checkbox-input {
-//  &:focus-visible {
-//    outline: none;
-//  }
-//}
-
-.#{$prefix}-checkbox .#{$prefix}-checkbox-input:focus-visible+.#{$prefix}-checkbox-inner {
-  outline: none;
-}
-
-.#{$prefix}-checkbox {
-  &.#{$prefix}-checkbox-checked {
-    &:hover {
-      .#{$prefix}-checkbox-inner {
-        background-color: $primary;
-        border-color: $primary;
-      }
-    }
-
-    .#{$prefix}-checkbox-inner {
-      background-color: $primary;
-      border-color: $primary;
-    }
-  }
-}
-
-.#{$prefix}-checkbox:not(.#{$prefix}-checkbox-disabled):hover {
-  .#{$prefix}-checkbox-inner {
-    border-color: $primary;
-  }
-}
-
-.#{$prefix}-checkbox-wrapper:not(.#{$prefix}-checkbox-wrapper-disabled):hover {
-  .#{$prefix}-checkbox-inner {
-    border-color: $primary;
-  }
-
-  .#{$prefix}-checkbox-checked:not(.#{$prefix}-checkbox-disabled) {
-    .#{$prefix}-checkbox-inner {
-      background-color: $primary;
-    }
-  }
-}
-
-
-// -------------- radio ----------
-
-.ui-rc-radio-wrapper {
-  .ui-rc-radio-checked {
-    .ui-rc-radio-inner {
-      background-color: $primary;
-      border-color: $primary;
-    }
-  }
-  &:hover {
-    .ui-rc-radio-inner {
-      border-color: $primary;
-    }
-  }
-}
-
-// ------------ Tree ---------------
-
-.#{$prefix}-tree {
-  .#{$prefix}-tree-checkbox-checked {
-    .#{$prefix}-tree-checkbox-inner {
-      background-color: $primary;
-      border-color: $primary;
-    }
-  }
-
-  .#{$prefix}-tree-checkbox-wrapper-checked:not(.#{$prefix}-tree-checkbox-wrapper-disabled):hover,
-  .#{$prefix}-tree-checkbox-checked:not(.#{$prefix}-tree-checkbox-disabled):hover {
-    .#{$prefix}-tree-checkbox-inner {
-      background-color: $primary;
-    }
-  }
-
-  .#{$prefix}-tree-checkbox-wrapper:not(.#{$prefix}-tree-checkbox-wrapper-disabled):hover,
-  .#{$prefix}-tree-checkbox:not(.#{$prefix}-tree-checkbox-disabled):hover {
-    .#{$prefix}-tree-checkbox-inner {
-      border-color: $primary;
-    }
-  }
-}
-
-
-// ------------ ant Tree ---------------
-
-.#{$antdPrefix}-tree {
-  .#{$antdPrefix}-tree-checkbox-checked {
-    .#{$antdPrefix}-tree-checkbox-inner {
-      background-color: $primary;
-      border-color: $primary;
-    }
-  }
-
-  .#{$antdPrefix}-tree-checkbox-wrapper-checked:not(.#{$antdPrefix}-tree-checkbox-wrapper-disabled):hover,
-  .#{$antdPrefix}-tree-checkbox-checked:not(.#{$antdPrefix}-tree-checkbox-disabled):hover {
-    .#{$antdPrefix}-tree-checkbox-inner {
-      background-color: $primary;
-    }
-  }
-
-  .#{$antdPrefix}-tree-checkbox-wrapper:not(.#{$antdPrefix}-tree-checkbox-wrapper-disabled):hover,
-  .#{$antdPrefix}-tree-checkbox:not(.#{$antdPrefix}-tree-checkbox-disabled):hover {
-    .#{$antdPrefix}-tree-checkbox-inner {
-      border-color: $primary;
-    }
-  }
-}
-
-
-// ------------ paging ---------------
-
-.#{$prefix}-table-wrapper .#{$prefix}-table-pagination.#{$prefix}-pagination {
-  margin: 0;
-}
-
-.#{$prefix}-table-wrapper {
-  .#{$prefix}-table {
-    .#{$prefix}-pagination {
-      &::before {
-        content: "";
-        position: absolute;
-        border-left: 1px solid $tableBorderColor;
-        height: 55px;
-        bottom: 0;
-        left: 0;
-      }
-
-      &::after {
-        content: "";
-        position: absolute;
-        border-left: 1px solid $tableBorderColor;
-        height: 55px;
-        bottom: 0;
-        visibility: visible;
-        right: 0;
-      }
-
-      &.top-pagination {
-        border: none;
-        padding-top: 0;
-        padding-bottom: 0;
-        .#{$prefix}-pagination-total-text {
-          margin-left: auto;
-        }
-      }
-      border-bottom: 1px solid $tableBorderColor;
-
-    }
-  }
-}
-
-
-.#{$prefix}-pagination {
-
-  .#{$prefix}-pagination-total-text {
-    white-space: nowrap;
-  }
-
-  .#{$prefix}-pagination-item-active {
-    border-color: $primary;
-
-    &:hover {
-      border-color: $primary;
-
-      a {
-        color: $primary;
-      }
-    }
-
-    a {
-      color: $primary;
-    }
-  }
-
-  .#{$prefix}-pagination-jump-prev, .#{$prefix}-pagination-jump-next {
-    .#{$prefix}-pagination-item-container {
-      .#{$prefix}-pagination-item-link-icon {
-        color: $primary;
-      }
-    }
-  }
-}
-
-
-
-//.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-content >table >tbody>tr>td >.#{$prefix}-table-expanded-row-fixed {
-//  border-inline-end: 1px solid $tableBorderColor;
-//}
-//
-//.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-content >table >tbody>tr>td >.#{$prefix}-table-expanded-row-fixed::after {
-//  //border-inline-end: 1px solid $tableBorderColor;
-//  border-inline-end: 0 solid $tableBorderColor;
-//}
-//
-//
-//.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered.#{$prefix}-table-small >.#{$prefix}-table-container >.#{$prefix}-table-body >table>tbody>tr>td >.#{$prefix}-table-expanded-row-fixed {
-//  margin-top: 0;
-//  margin-bottom: 0;
-//  border-inline-end: 1px solid $tableBorderColor;
-//}
-//
-//.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered.#{$prefix}-table-small >.#{$prefix}-table-container >.#{$prefix}-table-body >table>tbody>tr>td >.#{$prefix}-table-expanded-row-fixed::after {
-//  border-inline-end: 0 solid $tableBorderColor;
-//}
-
-
-.#{$prefix}-table-wrapper {
-  .#{$prefix}-table {
-    &.#{$prefix}-table-bordered {
-      > .#{$prefix}-table-container {
-        > .#{$prefix}-table-content,
-        > .#{$prefix}-table-header,
-        > .#{$prefix}-table-body,
-        > .#{$prefix}-table-summary {
-          > table > tbody > tr {
-            > th,
-            > td {
-              > .#{$prefix}-table-expanded-row-fixed::after {
-                // Thêm CSS ở đây
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-
-.#{$prefix}-table-wrapper {
-  .#{$prefix}-table.#{$prefix}-table-small {
-    .#{$prefix}-table-title,
-    .#{$prefix}-table-footer,
-    .#{$prefix}-table-cell,
-    .#{$prefix}-table-thead > tr > th,
-    .#{$prefix}-table-tbody > tr > th,
-    .#{$prefix}-table-tbody > tr > td,
-    tfoot > tr > th,
-    tfoot > tr > td {
-      //padding: 8px 8px;
-      //font-size: 13px;
-    }
-  }
-}
-.#{$prefix}-table-wrapper {
-  .#{$prefix}-table.#{$prefix}-table-small {
-    .#{$prefix}-table-cell {
-      &:has(.ant-color-picker-trigger) {
-        padding: 1px 8px;
-      }
-      .ant-color-picker-trigger{
-        width: 100%;
-        min-height: 20px;
-        .ant-color-picker-clear {
-          height: 20px;
-        }
-      }
-    }
-  }
-}
-
-
-
-//ui-rc-table-ping-right
-
-.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-content >table >thead>tr >.#{$prefix}-table-cell-fix-right-first::after,
-.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-header >table >thead>tr >.#{$prefix}-table-cell-fix-right-first::after,
-.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-body >table >thead>tr >.#{$prefix}-table-cell-fix-right-first::after,
-.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-summary >table >thead>tr >.#{$prefix}-table-cell-fix-right-first::after,
-.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-content >table >tbody>tr >.#{$prefix}-table-cell-fix-right-first::after,
-.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-header >table >tbody>tr >.#{$prefix}-table-cell-fix-right-first::after,
-.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-body >table >tbody>tr >.#{$prefix}-table-cell-fix-right-first::after,
-.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-summary >table >tbody>tr >.#{$prefix}-table-cell-fix-right-first::after,
-.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-content >table >tfoot>tr >.#{$prefix}-table-cell-fix-right-first::after,
-.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-header >table >tfoot>tr >.#{$prefix}-table-cell-fix-right-first::after,
-.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-body >table >tfoot>tr >.#{$prefix}-table-cell-fix-right-first::after,
-.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-summary >table >tfoot>tr >.#{$prefix}-table-cell-fix-right-first::after {
-  border-inline-end: 1px solid $tableBorderColor;
-}
-
-
-// toolbar
-
-.ui-rc-toolbar-bottom {
-  .be-toolbar-item {
-    .toolbar-dropdown-button {
-      .ant-btn.ant-btn-default.ant-btn-variant-outlined.ant-btn-compact-item.ant-btn-compact-first-item {
-        border-color: #28c76f;
-      }
-      .ant-btn.ant-btn-default.ant-btn-variant-outlined.ant-btn-compact-item.ant-btn-compact-last-item {
-        border-color: #28c76f;
-        .ant-btn-icon {
-          color: #28c76f;
-        }
-      }
-    }
-
-  }
-}
-
-
-.react-resizable {
-  position: relative;
-  background-clip: padding-box;
-}
-
-.rc-resizable-handle {
-  position: absolute;
-  //right: 10px;
-  right: 0px;
-  bottom: 0;
-  z-index: 1;
-  width: 5px;
-  height: 100%;
-  cursor: col-resize;
-  //transform: translateY(-50%);
-  &.none {
-    cursor: auto;
-    display: none;
-  }
-}
-
-.rs-picker-popup {
-  z-index: 1660;
-}
-
-.select__menu-portal {
-  z-index: 9999 !important;
-}
-
-.rc-fullscreen {
-  background-color: #ffffff85;
-}
-.be-popup-container {
-  z-index: 1070 !important;
-}
+//     .#{$prefix}-table.#{$prefix}-table-small {
+//       .#{$prefix}-table-thead > tr > th,
+//       tfoot > tr > th,
+//       tfoot > tr > td,
+//       tfoot > tr > td.#{$prefix}-table-cell
+//       {
+//         //padding: 8px 8px;
+//       }
+//     }
+
+//     .#{$prefix}-table.#{$prefix}-table-small {
+//       .#{$prefix}-table-selection-column{
+//         //padding: 8px 8px;
+//         //padding: 6px 8px;
+//       }
+//     }
+
+//     .ui-rc_cell-content {
+//       user-select: none;
+//       //padding: 7px 8px;
+//       padding: 2px 8px;
+//       display: flex;
+//       align-items: center;
+//       overflow: hidden;
+
+//       .ui-rc_content {
+//         width: 100%;
+//       }
+//       &:hover {
+//         .dragging-point {
+//           //visibility: visible;
+//         }
+//       }
+
+//       .dragging-point {
+//         //visibility: hidden;
+//         width: 10px;
+//         height: 10px;
+//         position: absolute;
+//         cursor: crosshair;
+//         right: -1px;
+//         bottom: -1px;
+//         //background: red;
+
+//         &.hidden {
+//           display: none;
+//         }
+
+//         .dot-point {
+//           position: absolute;
+//           width: 8px;
+//           height: 8px;
+//           border-radius: 6px;
+//           background-color: $border-selected-color;
+//           bottom: -3px;
+//           right: -3px;
+//         }
+
+//       }
+//     }
+
+//     .ui-rc_cell-content.selected {
+//       background-color: $cell-selected-bg;
+//     }
+//     .ui-rc_cell-content {
+//       //position: relative;
+//       &.isValid {
+//         &::after {
+//           content: "";
+//           position: absolute;
+//           top: 0;
+//           right: 0;
+//           width: 0;
+//           height: 0;
+//           border-top: 0 solid transparent;
+//           border-right: 8px solid red;
+//           border-bottom: 8px solid transparent;
+//         }
+//       }
+//     }
+
+//     //.ui-rc_cell-content.disable {
+//     //  background-color: #f0f0f0;
+//     //}
+
+//     //.ui-rc_cell-content--index {
+//     //  &.focus {
+//     //    background-color: $cell-index-focus-bg;
+//     //    //color: #fff;
+//     //    //font-weight: 500;
+//     //  }
+//     //  &.selected {
+//     //    background-color: $cell-index-selected-bg;
+//     //    color: #fff;
+//     //    //font-weight: 500;
+//     //  }
+//     //}
+
+//     .#{$prefix}-table-tbody {
+
+//       .#{$prefix}-table-row {
+//         &.#{$prefix}-table-row-selected {
+//           >.#{$prefix}-table-cell {
+//             //background: #FEF2EF;
+//           }
+//         }
+//         >.#{$prefix}-table-cell {
+//           &.#{$prefix}-table-cell-row-hover {
+//             //background: #FBDED6;
+//           }
+//         }
+
+//         .#{$prefix}-table-cell {
+
+//           .#{$prefix}-table-row-indent {
+//             position: absolute;
+//             @for $i from 1 through 10 {
+//               &.indent-level-#{$i} {
+//                 padding-left: $i * 25px;;
+//               }
+//             }
+//           }
+
+//           @for $i from 0 through 10 {
+//             &:has(.indent-level-#{$i}) {
+
+//               .#{$prefix}-table-row-expand-icon {
+//                 position: absolute;
+//                 //.ui-rc_content {
+//                 //padding-left: $i * 10px;
+//                 //}
+//               }
+
+//               .ui-rc_cell-content {
+//                 padding-left: $i * 25px + 8px;
+//               }
+
+//             }
+//           }
+
+//           @for $i from 0 through 10 {
+//             &:has(.indent-level-#{$i}) {
+
+//               .#{$prefix}-table-row-expand-icon {
+//                 position: absolute;
+//                 left: $i * 25px + 8px !important;
+//               }
+
+//               .ui-rc_cell-content {
+//                 padding-left: ($i + 1)* 25px + 8px;
+//               }
+
+//             }
+//           }
+//         }
+//       }
+
+
+//       .#{$prefix}-table-cell{
+
+//         &.#{$prefix}-table-cell-ellipsis {
+//           .ui-rc_cell-content {
+
+//             .ui-rc_content {
+//               text-overflow: ellipsis;
+//               text-decoration: none;
+//               transition: 0.3s;
+//               white-space: nowrap;
+//               overflow: hidden;
+//               line-height: 22px;
+//             }
+//           }
+//         }
+
+//         &.cell-editing {
+//           //padding: 0 !important;
+//           &:focus-visible {
+//             outline: none;
+//           }
+//           .ant-form-item ,
+//           .ant-row.ant-form-item-row,
+//           .ant-col.ant-form-item-control,
+//           .ant-form-item-control-input,
+//           .ant-form-item-control-input-content,
+//           .ant-input{
+//             height: 100% !important;
+//             max-height: unset !important;
+//             &:focus-visible {
+//               outline: none;
+//             }
+//           }
+//           textarea.ant-input {
+//             line-height: 1.8;
+//           }
+
+//           input.be-cell-editing, .ant-picker, .ui-rc-select-selector, .ui-rc-table-select-selector {
+//             padding-inline: 7px;
+//           }
+
+//           .#{$prefix}-checkbox-wrapper {
+//             .#{$prefix}-checkbox {
+//               background-color: red;
+//             }
+//             .#{$prefix}-checkbox-input {
+//               &:focus-visible {
+//                 outline: none;
+//               }
+//             }
+//           }
+
+
+//           .ant-input, .ant-picker{
+//             border-radius: 0;
+//           }
+
+//           // color picker
+
+//           .ant-color-picker-trigger{
+//             height: 100%;
+//             border-radius: 0;
+//             .ant-color-picker-color-block {
+//               height: 100%;
+//               width: 100%;
+//             }
+
+//           }
+
+
+//           // ------------ select  ---------------
+
+//           .#{$prefix}-table-select-single .#{$prefix}-table-select-selector,
+//           .#{$prefix}-select-single .#{$prefix}-select-selector {
+
+//             border-radius: 0;
+
+//           }
+
+//           .#{$prefix}-table-select-single:not(.#{$prefix}-table-select-customize-input) {
+//             .#{$prefix}-table-select-selector {
+//               .#{$prefix}-table-select-selection-search-input {
+//                 height: auto;
+//               }
+//             }
+//           }
+
+//           // ------------ select  ---------------
+
+
+//         }
+//         &.cell-editable {
+
+//           &:focus-visible {
+//             outline: none;
+//           }
+//           .ui-rc_content {
+//             //display: flex;
+//             //justify-content: space-between;
+//             &.select-cell {
+//               padding-right: 18px;
+//               position: relative;
+//               //&::after {
+//               //  position: absolute;
+//               //  right: 0;
+//               //  content: '';
+//               //  display: inline-block;
+//               //  margin-left: 4px;
+//               //  vertical-align: middle;
+//               //  width: 0;
+//               //  height: 0;
+//               //  border-left: 5px solid transparent;
+//               //  border-right: 5px solid transparent;
+//               //  border-top: 5px solid black;
+//               //}
+//             }
+//           }
+//           .caret-down {
+//             float: right;
+//             position: absolute;
+//             right: 0;
+//             &::before {
+//               content: '';
+//               display: inline-block;
+//               margin-left: 4px;
+//               vertical-align: middle;
+//               width: 0;
+//               height: 0;
+//               border-left: 5px solid transparent;
+//               border-right: 5px solid transparent;
+//               border-top: 5px solid #6f7777;
+//             }
+//           }
+
+//         }
+//         .#{$prefix}-table-cell-content {
+//           display: flex;
+//           height: 100%;
+//         }
+
+//         .ui-rc_cell-content,
+//         .#{$prefix}-table-cell-content{
+//           //width: 100%;
+//           flex: 1;
+//         }
+//         .ui-rc_content {
+//           //padding: 5px 8px;
+//         }
+//         .ui-rc_content:has(.ant-color-picker-trigger) {
+//           padding: 1px 8px;
+//         }
+//       }
+//     }
+
+//   }
+
+// }
+// // ---------------- Table edit end---------------
+
+
+// // -------------- Checkbox ----------
+
+// .#{$prefix}-checkbox-indeterminate {
+//   &:hover {
+//     .#{$prefix}-checkbox-inner {
+//       border-color: $primary !important;;
+//     }
+//   }
+
+//   .#{$prefix}-checkbox-inner {
+//     &:after {
+//       background-color: $primary;
+//     }
+//   }
+// }
+// //.#{$prefix}-checkbox-input {
+// //  &:focus-visible {
+// //    outline: none;
+// //  }
+// //}
+
+// .#{$prefix}-checkbox .#{$prefix}-checkbox-input:focus-visible+.#{$prefix}-checkbox-inner {
+//   outline: none;
+// }
+
+// .#{$prefix}-checkbox {
+//   &.#{$prefix}-checkbox-checked {
+//     &:hover {
+//       .#{$prefix}-checkbox-inner {
+//         background-color: $primary;
+//         border-color: $primary;
+//       }
+//     }
+
+//     .#{$prefix}-checkbox-inner {
+//       background-color: $primary;
+//       border-color: $primary;
+//     }
+//   }
+// }
+
+// .#{$prefix}-checkbox:not(.#{$prefix}-checkbox-disabled):hover {
+//   .#{$prefix}-checkbox-inner {
+//     border-color: $primary;
+//   }
+// }
+
+// .#{$prefix}-checkbox-wrapper:not(.#{$prefix}-checkbox-wrapper-disabled):hover {
+//   .#{$prefix}-checkbox-inner {
+//     border-color: $primary;
+//   }
+
+//   .#{$prefix}-checkbox-checked:not(.#{$prefix}-checkbox-disabled) {
+//     .#{$prefix}-checkbox-inner {
+//       background-color: $primary;
+//     }
+//   }
+// }
+
+
+// // -------------- radio ----------
+
+// .ui-rc-radio-wrapper {
+//   .ui-rc-radio-checked {
+//     .ui-rc-radio-inner {
+//       background-color: $primary;
+//       border-color: $primary;
+//     }
+//   }
+//   &:hover {
+//     .ui-rc-radio-inner {
+//       border-color: $primary;
+//     }
+//   }
+// }
+
+// // ------------ Tree ---------------
+
+// .#{$prefix}-tree {
+//   .#{$prefix}-tree-checkbox-checked {
+//     .#{$prefix}-tree-checkbox-inner {
+//       background-color: $primary;
+//       border-color: $primary;
+//     }
+//   }
+
+//   .#{$prefix}-tree-checkbox-wrapper-checked:not(.#{$prefix}-tree-checkbox-wrapper-disabled):hover,
+//   .#{$prefix}-tree-checkbox-checked:not(.#{$prefix}-tree-checkbox-disabled):hover {
+//     .#{$prefix}-tree-checkbox-inner {
+//       background-color: $primary;
+//     }
+//   }
+
+//   .#{$prefix}-tree-checkbox-wrapper:not(.#{$prefix}-tree-checkbox-wrapper-disabled):hover,
+//   .#{$prefix}-tree-checkbox:not(.#{$prefix}-tree-checkbox-disabled):hover {
+//     .#{$prefix}-tree-checkbox-inner {
+//       border-color: $primary;
+//     }
+//   }
+// }
+
+
+// // ------------ ant Tree ---------------
+
+// .#{$antdPrefix}-tree {
+//   .#{$antdPrefix}-tree-checkbox-checked {
+//     .#{$antdPrefix}-tree-checkbox-inner {
+//       background-color: $primary;
+//       border-color: $primary;
+//     }
+//   }
+
+//   .#{$antdPrefix}-tree-checkbox-wrapper-checked:not(.#{$antdPrefix}-tree-checkbox-wrapper-disabled):hover,
+//   .#{$antdPrefix}-tree-checkbox-checked:not(.#{$antdPrefix}-tree-checkbox-disabled):hover {
+//     .#{$antdPrefix}-tree-checkbox-inner {
+//       background-color: $primary;
+//     }
+//   }
+
+//   .#{$antdPrefix}-tree-checkbox-wrapper:not(.#{$antdPrefix}-tree-checkbox-wrapper-disabled):hover,
+//   .#{$antdPrefix}-tree-checkbox:not(.#{$antdPrefix}-tree-checkbox-disabled):hover {
+//     .#{$antdPrefix}-tree-checkbox-inner {
+//       border-color: $primary;
+//     }
+//   }
+// }
+
+
+// // ------------ paging ---------------
+
+// .#{$prefix}-table-wrapper .#{$prefix}-table-pagination.#{$prefix}-pagination {
+//   margin: 0;
+// }
+
+// .#{$prefix}-table-wrapper {
+//   .#{$prefix}-table {
+//     .#{$prefix}-pagination {
+//       &::before {
+//         content: "";
+//         position: absolute;
+//         border-left: 1px solid $tableBorderColor;
+//         height: 55px;
+//         bottom: 0;
+//         left: 0;
+//       }
+
+//       &::after {
+//         content: "";
+//         position: absolute;
+//         border-left: 1px solid $tableBorderColor;
+//         height: 55px;
+//         bottom: 0;
+//         visibility: visible;
+//         right: 0;
+//       }
+
+//       &.top-pagination {
+//         border: none;
+//         padding-top: 0;
+//         padding-bottom: 0;
+//         .#{$prefix}-pagination-total-text {
+//           margin-left: auto;
+//         }
+//       }
+//       border-bottom: 1px solid $tableBorderColor;
+
+//     }
+//   }
+// }
+
+
+// .#{$prefix}-pagination {
+
+//   .#{$prefix}-pagination-total-text {
+//     white-space: nowrap;
+//   }
+
+//   .#{$prefix}-pagination-item-active {
+//     border-color: $primary;
+
+//     &:hover {
+//       border-color: $primary;
+
+//       a {
+//         color: $primary;
+//       }
+//     }
+
+//     a {
+//       color: $primary;
+//     }
+//   }
+
+//   .#{$prefix}-pagination-jump-prev, .#{$prefix}-pagination-jump-next {
+//     .#{$prefix}-pagination-item-container {
+//       .#{$prefix}-pagination-item-link-icon {
+//         color: $primary;
+//       }
+//     }
+//   }
+// }
+
+
+
+// //.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-content >table >tbody>tr>td >.#{$prefix}-table-expanded-row-fixed {
+// //  border-inline-end: 1px solid $tableBorderColor;
+// //}
+// //
+// //.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-content >table >tbody>tr>td >.#{$prefix}-table-expanded-row-fixed::after {
+// //  //border-inline-end: 1px solid $tableBorderColor;
+// //  border-inline-end: 0 solid $tableBorderColor;
+// //}
+// //
+// //
+// //.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered.#{$prefix}-table-small >.#{$prefix}-table-container >.#{$prefix}-table-body >table>tbody>tr>td >.#{$prefix}-table-expanded-row-fixed {
+// //  margin-top: 0;
+// //  margin-bottom: 0;
+// //  border-inline-end: 1px solid $tableBorderColor;
+// //}
+// //
+// //.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered.#{$prefix}-table-small >.#{$prefix}-table-container >.#{$prefix}-table-body >table>tbody>tr>td >.#{$prefix}-table-expanded-row-fixed::after {
+// //  border-inline-end: 0 solid $tableBorderColor;
+// //}
+
+
+// .#{$prefix}-table-wrapper {
+//   .#{$prefix}-table {
+//     &.#{$prefix}-table-bordered {
+//       > .#{$prefix}-table-container {
+//         > .#{$prefix}-table-content,
+//         > .#{$prefix}-table-header,
+//         > .#{$prefix}-table-body,
+//         > .#{$prefix}-table-summary {
+//           > table > tbody > tr {
+//             > th,
+//             > td {
+//               > .#{$prefix}-table-expanded-row-fixed::after {
+//                 // Thêm CSS ở đây
+//               }
+//             }
+//           }
+//         }
+//       }
+//     }
+//   }
+// }
+
+
+// .#{$prefix}-table-wrapper {
+//   .#{$prefix}-table.#{$prefix}-table-small {
+//     .#{$prefix}-table-title,
+//     .#{$prefix}-table-footer,
+//     .#{$prefix}-table-cell,
+//     .#{$prefix}-table-thead > tr > th,
+//     .#{$prefix}-table-tbody > tr > th,
+//     .#{$prefix}-table-tbody > tr > td,
+//     tfoot > tr > th,
+//     tfoot > tr > td {
+//       //padding: 8px 8px;
+//       //font-size: 13px;
+//     }
+//   }
+// }
+// .#{$prefix}-table-wrapper {
+//   .#{$prefix}-table.#{$prefix}-table-small {
+//     .#{$prefix}-table-cell {
+//       &:has(.ant-color-picker-trigger) {
+//         padding: 1px 8px;
+//       }
+//       .ant-color-picker-trigger{
+//         width: 100%;
+//         min-height: 20px;
+//         .ant-color-picker-clear {
+//           height: 20px;
+//         }
+//       }
+//     }
+//   }
+// }
+
+
+
+// //ui-rc-table-ping-right
+
+// .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-content >table >thead>tr >.#{$prefix}-table-cell-fix-right-first::after,
+// .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-header >table >thead>tr >.#{$prefix}-table-cell-fix-right-first::after,
+// .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-body >table >thead>tr >.#{$prefix}-table-cell-fix-right-first::after,
+// .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-summary >table >thead>tr >.#{$prefix}-table-cell-fix-right-first::after,
+// .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-content >table >tbody>tr >.#{$prefix}-table-cell-fix-right-first::after,
+// .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-header >table >tbody>tr >.#{$prefix}-table-cell-fix-right-first::after,
+// .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-body >table >tbody>tr >.#{$prefix}-table-cell-fix-right-first::after,
+// .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-summary >table >tbody>tr >.#{$prefix}-table-cell-fix-right-first::after,
+// .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-content >table >tfoot>tr >.#{$prefix}-table-cell-fix-right-first::after,
+// .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-header >table >tfoot>tr >.#{$prefix}-table-cell-fix-right-first::after,
+// .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-body >table >tfoot>tr >.#{$prefix}-table-cell-fix-right-first::after,
+// .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-summary >table >tfoot>tr >.#{$prefix}-table-cell-fix-right-first::after {
+//   border-inline-end: 1px solid $tableBorderColor;
+// }
+
+
+// // toolbar
+
+// .ui-rc-toolbar-bottom {
+//   .be-toolbar-item {
+//     .toolbar-dropdown-button {
+//       .ant-btn.ant-btn-default.ant-btn-variant-outlined.ant-btn-compact-item.ant-btn-compact-first-item {
+//         border-color: #28c76f;
+//       }
+//       .ant-btn.ant-btn-default.ant-btn-variant-outlined.ant-btn-compact-item.ant-btn-compact-last-item {
+//         border-color: #28c76f;
+//         .ant-btn-icon {
+//           color: #28c76f;
+//         }
+//       }
+//     }
+
+//   }
+// }
+
+
+// .react-resizable {
+//   position: relative;
+//   background-clip: padding-box;
+// }
+
+// .rc-resizable-handle {
+//   position: absolute;
+//   //right: 10px;
+//   right: 0px;
+//   bottom: 0;
+//   z-index: 1;
+//   width: 5px;
+//   height: 100%;
+//   cursor: col-resize;
+//   //transform: translateY(-50%);
+//   &.none {
+//     cursor: auto;
+//     display: none;
+//   }
+// }
+
+// .rs-picker-popup {
+//   z-index: 1660;
+// }
+
+// .select__menu-portal {
+//   z-index: 9999 !important;
+// }
+
+// .rc-fullscreen {
+//   background-color: #ffffff85;
+// }
+// .be-popup-container {
+//   z-index: 1070 !important;
+// }