.title {
    background-color: light-dark(var(white), var(--mantine-color-dark-7));
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--mantine-spacing-sm) var(--mantine-spacing-lg)
      var(--mantine-spacing-sm);
    border-bottom: solid rgba(201, 201, 201, 0.377) 1px;
  }

  .optionIcon {
    display: flex;
    justify-content: space-evenly;
  }

  .deleteIcon {
    color: red;
    cursor: pointer;
    padding: 2px;
    border-radius: 25%;
  }

  
  .editIcon {
    color: rgb(9, 132, 132);
    cursor: pointer;
    padding: 2px;
    border-radius: 25%;
  }

  .editIcon:hover {
    background-color: rgba(203, 203, 203, 0.809);
  }
  
  .deleteIcon:hover {
    background-color: rgba(203, 203, 203, 0.809);
  }
  
  .dialog {
    background-color: light-dark(white, #2d353c);
    text-align: center;
    border: solid 1px rgb(255, 145, 0);
  }
  
  .dialogText {
    color: light-dark(#2d353c, white);
  }

  /* Thêm styles cho Modal xác nhận xóa */
.deleteModal {
  background-color: light-dark(white, #2d353c);
  text-align: center;
  border: solid 1px #ff4646;
}

.deleteModalTitle {
  color: #ff4646;
  font-weight: 600;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.deleteModalContent {
  color: light-dark(#2d353c, white);
  margin-bottom: 1.5rem;
}

.deleteModalFooter {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 1rem;
}

.deleteButton {
  background-color: #ff4646;
}

.deleteButton:hover {
  background-color: #ff6b6b;
}