body {
  margin-top: 20px;
  font-family: Arial, sans-serif;
}

.error {
  color: red;
  font-weight: bold;
}

.no-wrap td,
.no-wrap th {
  white-space: nowrap;
}

.table-responsive {
  overflow-x: auto;
}

.table td,
.table th {
  padding: .9375rem .4rem;
  vertical-align: middle;
  border-top: 1px solid rgba(120, 130, 140, .13);
}

table a {
  padding: 4px 12px;
  color: #fff;
  background-color: #28a745;
  text-decoration: none;
  border-radius: 4px;
  display: inline-block;
  transition: background-color 0.3s ease;
}
table a:hover {
  background-color: #23e7d7;
}
.font-light {
  font-weight: 300;
}

.btn-show-text,
.btn-edit,
.btn-edit-active {
  padding: 0 20px;
  cursor: pointer;
}

.btn-edit-active svg path {
  stroke: #2cd07e;
}

.title {
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.label {
  color: #333;
  font-size: 16px;
  font-weight: 600;
  padding-top: 22px;
}

.view-edit-or-text {
  color: #333;
  font-size: 14px;
  padding-top: 12px;
}

.view-edit-or-text textarea {
  width: 100%;
  border: 1px solid #B2B2B2;
  border-radius: 4px;
  padding: 6px;
  font-size: 14px;
  color: #333;
}

.view-btn-edit,
.view-btn-cancel,
.view-btn-save {
  border-radius: 100px;
  display: inline-flex;
  padding: 4px 16px;
  font-size: 14px;
  cursor: pointer;
}

.view-btn-edit {
  background: #2cd07e;
  color: #fff;
}

.view-btn-cancel {
  background: #B2B2B2;
  color: #fff;
  margin-right: 10px;
}

.view-btn-save {
  background: #2cd07e;
  color: #fff;
}

.view-main {
  flex: 1;
  user-select: text;
}

.view-main-scroll {
  overflow: auto;
  max-height: 350px;
}

.view-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.view-item {
  color: #2C2C2C;
  font-size: 10px;
  font-weight: 400;
  line-height: 12px;
  border-radius: 30px;
  background: #C8C7CC;
  display: inline-flex;
  padding: 4px 10px;
  justify-content: center;
  align-items: center;
}

.btn-item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: 56px;
  cursor: pointer;
}

.btn-item-show-text {
  padding-right: 0;
}

.btn-item-text {
  color: #B2B2B2;
  padding-left: 8px;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.otp-container {
  display: flex;
  align-items: center;
}

.otp-container .badge {
  margin-right: 5px; /* Hoặc thay bằng `me-2` nếu viết inline */
}

.created-container {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 768px) {
  .created-container {
      white-space: nowrap;
      overflow: auto;
  }
  .table td, .table th {
      padding: .5rem .2rem;
      font-size: 12px;
  }
  .otp-container .badge {
      font-size: 10px;
      padding: 0.2rem 0.4rem;
  }
  .otp-container b {
      font-size: 12px;
  }
}

.search-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.search-container input {
  width: 300px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}