input:disabled {
    color: #777777 !important;
}

.control-fix {
    padding-left: 0 !important;
    padding-top: 20px;
}

.fixed-ref-home {
    position: absolute !important;
    top: 5%;
    font-size: 125%;
}

canvas {
    display: block;
    position: fixed;
}

.zidx999 {
    z-index: 999;
}

//.bg-color-dark-1 {
//    background: #1b1c1d !important;
//}

//.bg-color-dark-2 {
//    background: #282a2c !important;
//}

//.bg-light-color-1 {
//    background: #f8f9fa;
//}

//.font-color-light-1 {
//    color: #e3e3e3 !important;
//}

.home-logo{
    max-width: 86px;
}

/* Dark mode modal styling */
.modal-dark .modal-content {
    background-color: #212529;
    color: #f8f9fa;
}

.modal-dark .modal-header {
    border-bottom-color: #343a40;
}

.modal-dark .modal-footer {
    border-top-color: #343a40;
}

.modal-dark .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.modal-dark .modal-title {
    color: #f8f9fa;
}

/* Success and error states for dark mode */
.modal-dark .modal-header.header-success {
    background-color: #198754;
}

.modal-dark .modal-header.header-error {
    background-color: #dc3545;
}

.modal-backdrop {
    z-index: 998;
}

.min-vh-80 {
  min-height: 80vh !important;
}

.min-vh-85 {
  min-height: 85vh !important;
}

.g_id_signin {
    justify-items: center;
}

.form-switch .form-check-input {
    cursor: pointer;
    width: 3.5em; /* Tăng chiều rộng */
    height: 1.8em; /* Tăng chiều cao */
    margin-top: 0.1em; /* Căn chỉnh dọc nếu cần */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e"); /* Màu nút tròn khi tắt */
    background-position: left center; /* Nút tròn bên trái khi tắt */
    transition: background-position 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; /* Thêm transition */
}

.form-switch .form-check-input:checked {
    background-color: #0d6efd; /* Màu nền khi bật (Bootstrap primary) */
    border-color: #0d6efd;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); /* Màu nút tròn khi bật */
    background-position: right center; /* Nút tròn bên phải khi bật */
}

/* Căn chỉnh cờ và toggle */
.navbar-nav .nav-item.d-flex.align-items-center {
    margin-left: 10px; /* Khoảng cách */
}
.navbar-nav .nav-item.d-flex.align-items-center > span {
    font-size: 1.4em; /* Kích thước cờ */
    line-height: 1;
}

.styled-table {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    min-width: 100%;
}

.styled-table thead tr {
    background-color: #009879;
    color: #ffffff;
    text-align: left;
}

.styled-table th,
.styled-table td {
    padding: 12px 15px;
}

.styled-table tbody tr {
    border-bottom: 1px solid #dddddd;
}

.styled-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

.styled-table tbody tr:last-of-type {
    border-bottom: 2px solid #009879;
}

.styled-table tbody tr.active-row {
    font-weight: bold;
    color: #009879;
}

.font-size-1-em {
    font-size: 1.0em !important;
}

.tooltipx {

}

.tooltipx .tooltiptext {
visibility: hidden;
    width: 125px;
    background-color: #444444;
    color: #fff;
    text-align: center;
    padding: 5px 5px;
    border-radius: 6px;
    transition: opacity .6s;
    position: absolute;
    z-index: 1;
    top: 70px;
    opacity: 0.8;
    font-size: 12px !important;
}

.tooltipx .tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #444444 transparent;
}

.tooltipx:hover .tooltiptext {
    visibility: visible;
}

body,
html {
  height: 100%;
}

.bg-gradient-primary-to-secondary {
  background: #1e30f3;
  background: linear-gradient(135deg, #1e30f3 0%, #e21e80 100%);
  background: linear-gradient(135deg,  var(--first-gradient-color), #DB4437, #820f9d);
}

.text-gradient {
 color: #39FF14;
 background-image: linear-gradient(45deg, var(--first-gradient-color), #DB4437, #820f9d);
 background-clip: text;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}

.rounded-4 {
  border-radius: 1rem !important;
}

.feature {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  width: 3rem;
  font-size: 1.5rem;
}

.profile {
  position: relative;
  height: 75vw;
  width: 75vw;
  border-radius: 5vw;
  margin-top: 5vw;
  max-height: 40rem;
  max-width: 40rem;
}
.profile .profile-img {
  height: 80vw;
  max-height: 45rem;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.profile .dots-1 {
  position: absolute;
  width: 3vw;
  right: 1.5vw;
  top: 4vw;
}
.profile .dots-1 svg {
  fill: var(--bg-color-3);
}
.profile .dots-2 {
  position: absolute;
  width: 3vw;
  right: -4vw;
  top: 6.05vw;
}
.profile .dots-2 svg {
  fill: #DB4437;
}
.profile .dots-3 {
  position: absolute;
  width: 3vw;
  left: 1.5vw;
  bottom: 6.05vw;
}
.profile .dots-3 svg {
  fill: var(--bg-color-3);
}
.profile .dots-4 {
  position: absolute;
  width: 3vw;
  left: -4vw;
  bottom: 4vw;
}
.profile .dots-4 svg {
  fill: #f1a607;
}

@media (min-width: 576px) {
  .profile {
    height: 60vw;
    width: 60vw;
  }
  .profile .profile-img {
    height: 65vw;
  }
  .profile .dots-1 {
    width: 3vw;
    right: 1.5vw;
  }
  .profile .dots-2 {
    width: 3vw;
    right: -4vw;
  }
  .profile .dots-3 {
    width: 3vw;
    left: 1.5vw;
  }
  .profile .dots-4 {
    width: 3vw;
    left: -4vw;
  }
}
@media (min-width: 768px) {
  .profile {
    height: 50vw;
    width: 50vw;
  }
  .profile .profile-img {
    height: 55vw;
  }
  .profile .dots-1 {
    width: 3vw;
    right: 1.5vw;
  }
  .profile .dots-2 {
    width: 3vw;
    right: -4vw;
  }
  .profile .dots-3 {
    width: 3vw;
    left: 1.5vw;
  }
  .profile .dots-4 {
    width: 3vw;
    left: -4vw;
  }
}
@media (min-width: 992px) {
  .profile {
    height: 40vw;
    width: 40vw;
  }
  .profile .profile-img {
    height: 45vw;
  }
  .profile .dots-1 {
    width: 1.5vw;
    right: 0.75vw;
  }
  .profile .dots-2 {
    width: 1.5vw;
    right: -2vw;
  }
  .profile .dots-3 {
    width: 1.5vw;
    left: 0.75vw;
  }
  .profile .dots-4 {
    width: 1.5vw;
    left: -2vw;
  }
}
@media (min-width: 1200px) {
  .profile {
    height: 35vw;
    width: 35vw;
  }
  .profile .profile-img {
    height: 40vw;
  }
  .profile .dots-1 {
    width: 1.5vw;
    right: 0.75vw;
  }
  .profile .dots-2 {
    width: 1.5vw;
    right: -2vw;
  }
  .profile .dots-3 {
    width: 1.5vw;
    left: 0.75vw;
  }
  .profile .dots-4 {
    width: 1.5vw;
    left: -2vw;
  }
}