/* Giao diện Dark */
:root[data-theme="dark"] {
  /* Các biến màu chính (có thể ghi đè các biến của Bootstrap) */
  --bs-body-bg: #121212;
  --bs-body-color: #e0e0e0;
  --bs-primary: #bb86fc;
  --bs-secondary: #03dac6;
  --bs-success: #03dac6;
  --bs-info: #2196F3;
  --bs-warning: #FFC107;
  --bs-danger: #CF6679;
  --bs-light: #2c2c2c;
  --bs-dark: #ffffff;
}

/* Áp dụng màu nền và màu chữ cho body */
[data-theme="dark"] body {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

/*Thẻ card */
[data-theme="dark"] .card {
  background-color: #1e1e1e;
  color: var(--bs-body-color);
  border-color: #333;
}

/* Navbar */
[data-theme="dark"] .navbar {
  background-color: #1e1e1e;
}

/* Dropdown */
[data-theme="dark"] .dropdown-menu {
  background-color: #1e1e1e;
  color: var(--bs-body-color);
}

/* Liên kết */
[data-theme="dark"] a {
  color: var(--bs-primary);
}

[data-theme="dark"] a:hover {
  color: #cf93ff;
}

/* Nút bấm (button) */
[data-theme="dark"] .btn-primary {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

[data-theme="dark"] .btn-primary:hover {
  background-color: #a55dfc;
  border-color: #a55dfc;
}

/* Dark mode cho sidebar */
[data-theme="dark"] aside.sidebar {
  background-color: #1e1e1e;
  color: #e0e0e0;
  border-right: 1px solid #333;
}

/* Áp dụng cho các liên kết trong sidebar */
[data-theme="dark"] aside.sidebar .sidebar-nav li a {
  color: #e0e0e0;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hiệu ứng hover cho liên kết */
[data-theme="dark"] aside.sidebar .sidebar-nav li a:hover,
[data-theme="dark"] aside.sidebar .sidebar-nav li a:focus {
  background-color: #333;
  color: #fff;
}

/* Nếu có icon bên trong các liên kết */
[data-theme="dark"] aside.sidebar .sidebar-nav li a i {
  color: #bb86fc;
  transition: color 0.3s ease;
}

/* Nếu có tiêu đề nhóm (nav-heading) */
[data-theme="dark"] aside.sidebar .nav-heading {
  color: #aaa;
  border-bottom: 1px solid #333;
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Đối với các submenu (ul.nav-content) bên trong sidebar */
[data-theme="dark"] aside.sidebar .nav-content {
  background-color: #2c2c2c;
  border-left: 3px solid #bb86fc;
}

[data-theme="dark"] aside.sidebar .nav-content li a {
  padding-left: 2rem;
}

/* Dark mode cho header chung */
[data-theme="dark"] header.header {
  background-color: #1e1e1e;
  color: #e0e0e0;
  border-bottom: 1px solid #333;
}

/* Đảm bảo các phần tử con trong header hiển thị đúng màu chữ */
[data-theme="dark"] header.header * {
  color: inherit;
}

/* Logo và văn bản bên trong logo */
[data-theme="dark"] header.header .logo span {
  color: #e0e0e0;
}

/* Liên kết và dropdown items */
[data-theme="dark"] header.header a.nav-link,
[data-theme="dark"] header.header a.dropdown-item {
  color: #e0e0e0;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hiệu ứng hover cho liên kết trong header */
[data-theme="dark"] header.header a.nav-link:hover,
[data-theme="dark"] header.header a.dropdown-item:hover {
  background-color: #333;
  color: #fff;
}

/* Các biểu tượng (icon) bên trong header */
[data-theme="dark"] header.header i {
  color: #e0e0e0;
}

/* Nếu có các thẻ font inline thì ghi đè màu của chúng */
[data-theme="dark"] header.header font {
  color: #e0e0e0 !important;
}

/* Dropdown menu trong header (ví dụ thông báo, profile, ...) */
[data-theme="dark"] header.header .dropdown-menu {
  background-color: #2c2c2c;
  color: #e0e0e0;
  border: 1px solid #333;
}

/* Các item trong dropdown menu */
[data-theme="dark"] header.header .dropdown-menu .dropdown-item {
  color: #e0e0e0;
}

/* Hover cho dropdown items */
[data-theme="dark"] header.header .dropdown-menu .dropdown-item:hover {
  background-color: #333;
  color: #fff;
}

/* Các nút (button) trong header */
[data-theme="dark"] header.header button.btn {
  background-color: #bb86fc;
  border-color: #bb86fc;
  color: #fff;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Input, nếu có trong header (ví dụ: tìm kiếm, lệnh AT+) */
[data-theme="dark"] header.header input.form-control {
  background-color: #333;
  color: #e0e0e0;
  border: 1px solid #555;
}

/* Nếu có modal hoặc các thành phần pop-up nằm trong header (hoặc có thể áp dụng chung cho toàn trang) */
[data-theme="dark"] .modal-content {
  background-color: #1e1e1e;
  color: #e0e0e0;
  border: 1px solid #333;
}

/* Màu nền cho thẻ li trong dark mode */
[data-theme="dark"] li.nav-item {
  background-color: #1e1e1e;
  color: var(--bs-body-color);
}

/* Màu nền và chữ cho liên kết bên trong li */
[data-theme="dark"] li.nav-item a.nav-link {
  background-color: #1e1e1e;
  color: var(--bs-body-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hiệu ứng hover cho liên kết trong li */
[data-theme="dark"] li.nav-item a.nav-link:hover,
[data-theme="dark"] li.nav-item a.nav-link:focus {
  background-color: #333;
  color: #fff;
}

/* Dark mode cho container_time */
[data-theme="dark"] #container_time {
  background-color: #1e1e1e;
  color: #e0e0e0;
  border-color: #333 !important;
  /* padding: 0.5rem; */
}

/* Ghi đè màu cho các thẻ bên trong, kể cả thẻ font */
[data-theme="dark"] #container_time * {
  color: #e0e0e0 !important;
}

/* Dark mode cho modal-body chứa chatbox */
[data-theme="dark"] .modal-body {
  background-color: #1e1e1e;
  color: #e0e0e0;
}

/* Chatbox wrapper */
[data-theme="dark"] #chatbox_wrapper {
  background-color: #1e1e1e;
  color: #e0e0e0;
  padding: 1rem;
  border: 1px solid #333;
  border-radius: 5px;
  max-height: 400px;
  overflow-y: auto;
}

/* Chatbox chính */
[data-theme="dark"] #chatbox {
  background-color: #1e1e1e;
  color: #e0e0e0;
}

/* Quy tắc chung cho các tin nhắn */
[data-theme="dark"] .message {
  background-color: #2c2c2c;
  padding: 0.5rem 0.8rem;
  margin-bottom: 0.5rem;
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
  position: relative;
}

/* Tin nhắn của người dùng */
[data-theme="dark"] .message.user-message {
  background-color: #333;
}

/* Tin nhắn của bot */
[data-theme="dark"] .message.bot-message {
  background-color: #2a2a2a;
}

/* Thời gian tin nhắn */
[data-theme="dark"] .message .message-time {
  color: #bbb;
  font-size: 0.8rem;
  margin-bottom: 0.3rem;
}

/* Icon xóa tin nhắn */
[data-theme="dark"] .delete_message_chatbox {
  color: #cf6679;
  cursor: pointer;
  position: absolute;
  top: 5px;
  right: 5px;
}

/* Nếu có thẻ font inline, đảm bảo màu chữ cũng được đè */
[data-theme="dark"] .modal-body font {
  color: #e0e0e0 !important;
}

/* Các biểu tượng (icon) trong Chatbot */
[data-theme="dark"] .icon-group_chatbot i {
  color: #d4d4d4 !important;
  transition: color 0.3s ease;
}

/* Hiệu ứng hover cho các icon trong Chatbot */
[data-theme="dark"] .icon-group_chatbot i:hover {
  color: #ffcc00 !important;
}

/* Tăng độ tương phản cho tiêu đề card trong Dark Mode */
[data-theme="dark"] h5.card-title {
  color: #ffffff;
  /* font-weight: bold; */
}

/* Nếu tiêu đề nằm trong accordion button */
[data-theme="dark"] h5.card-title.accordion-button {
  background-color: #e2a3e561;
  color: #ffffff;
}

/* Màu chữ cho phần "(Bắt Buộc)" để dễ nhìn */
[data-theme="dark"] h5.card-title font[color="red"] {
  color: #ff5555 !important;
  font-weight: bold;
}

/* Dark Mode: Tùy chỉnh input bị disabled */
[data-theme="dark"] input.form-control:disabled {
  background-color: #2c2c2c !important;
  color: #bbbbbb !important;
  border-color: #ff4444 !important;
  opacity: 1;
  cursor: not-allowed;
}

/* Tăng độ tương phản khi có viền đỏ cảnh báo */
[data-theme="dark"] input.form-control.border-danger:disabled {
  border-color: #ff5555 !important;
  color: #ff9999 !important; 
}

/* Dark Mode: Tiêu đề trang */
[data-theme="dark"] .pagetitle h1 {
  color: #ffffff !important;
  font-weight: bold;
}

/* Dark Mode: Breadcrumb */
[data-theme="dark"] .breadcrumb {
  background-color: transparent;
  color: #e0e0e0; 
}

/* Breadcrumb items */
[data-theme="dark"] .breadcrumb-item {
  color: #bbbbbb !important;
}

/* Breadcrumb link */
[data-theme="dark"] .breadcrumb-item a {
  color: #03dac6 !important;
  text-decoration: none;
}

/* Breadcrumb link khi hover */
[data-theme="dark"] .breadcrumb-item a:hover {
  color: #00ffcc !important;
}

/* Breadcrumb active (trang hiện tại) */
[data-theme="dark"] .breadcrumb-item.active {
  color: #ffffff !important;
  font-weight: bold;
}

/* Dark Mode: Bảng tổng thể */
[data-theme="dark"] .table {
  background-color: #1e1e1e !important;
  color: #e0e0e0 !important;
  border-color: #444 !important; 
}

/* Tiêu đề bảng */
[data-theme="dark"] .table th {
  background-color: #333 !important;
  color: #ffffff !important;
  border-color: #555 !important;
  font-weight: bold;
  text-transform: uppercase;
}

/* Nội dung bảng */
[data-theme="dark"] .table td {
  background-color: #2c2c2c !important;
  color: #e0e0e0 !important;
  border-color: #555 !important;
}

/* Ô trống không có nội dung */
[data-theme="dark"] .table td:empty {
  background-color: #222 !important;
}

/* Hover hàng trong bảng */
[data-theme="dark"] .table tbody tr:hover {
  background-color: #444 !important;
}

/* Đường viền bảng */
[data-theme="dark"] .table-bordered {
  border: 1px solid #555 !important;
}

/* Dark Mode: Checkbox (chưa được tích) */
[data-theme="dark"] .form-check-input {
  background-color: #444 !important;
  border: 2px solid #777 !important;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Checkbox khi được hover */
[data-theme="dark"] .form-check-input:hover {
  background-color: #666 !important;
  border-color: #bbb !important;
}

/* Checkbox khi được tích */
[data-theme="dark"] .form-check-input:checked {
  background-color: #198754 !important;
  border-color: #198754 !important;
}

/* Bo tròn và hiệu ứng mượt hơn */
[data-theme="dark"] .form-check-input {
  border-radius: 50px !important;
}

/* Màu chữ cho thẻ font color="blue" trong Light Mode */
font[color="blue"] {
  color: #0056b3 !important;
}

/* Màu chữ trong Dark Mode */
[data-theme="dark"] font[color="blue"] {
  color: #4da3ff !important;
}

/* Dark Mode: Cập nhật các thành phần để dễ nhìn hơn */
[data-theme="dark"] .profile-overview {
  color: #e0e0e0;
}

/* Tiêu đề card-title */
[data-theme="dark"] .profile-overview .card-title {
  font-weight: bold;
  color: #ffffff;
}

/* Định dạng nhãn (label) */
[data-theme="dark"] .profile-overview .label {
  font-weight: bold;
  color: #4da3ff;
}

/* Cải thiện khoảng cách giữa các hàng và đường viền */
[data-theme="dark"] .profile-overview .row {
  padding: 5px 0;
  border-bottom: 1px solid #444;
}

/* Đảm bảo tất cả các phần tử bên trong thẻ profile-overview có màu chữ sáng */
[data-theme="dark"] .profile-overview * {
  color: #e0e0e0 !important;
}

/* Cập nhật giao diện form trong chế độ tối */
[data-theme="dark"] form {
  color: #e0e0e0;
}

/* Màu chữ cho nhãn (label) */
[data-theme="dark"] .form-label {
  color: #ffffff; 
}

/* Nền tối cho các trường nhập liệu */
[data-theme="dark"] .form-control {
  background-color: #444;
  border: 1px solid #555;
  color: #e0e0e0;
}

/* Đổi màu đường viền khi focus vào trường nhập liệu */
[data-theme="dark"] .form-control:focus {
  border-color: #4da3ff;
  box-shadow: 0 0 0 0.25rem rgba(77, 163, 255, 0.25);
}

 /* Màu chữ cho thông báo lỗi (đỏ sáng) */
[data-theme="dark"] .invalid-feedback {
  color: #ff4d4d;
}

/* Cập nhật các nút 
[data-theme="dark"] .btn {
  background-color: #4da3ff;
  color: #ffffff;
  border: 1px solid #4da3ff;
}
*/

/* Màu nền thay đổi khi hover */
[data-theme="dark"] .btn:hover {
  background-color: #337ab7;
}

[data-theme="dark"] .btn-danger {
  background-color: #f44336;
  border: 1px solid #f44336;
}

/* Thay đổi màu khi hover trên nút xóa */
[data-theme="dark"] .btn-danger:hover {
  background-color: #d32f2f;
}

/* Nền tối cho các input-group */
[data-theme="dark"] .input-group-text {
  background-color: #555;
  color: #ffffff;
  border: 1px solid #444;
}

/* Cập nhật màu sắc cho các label trong chế độ dark */
[data-theme="dark"] .profile .profile-edit label {
  font-weight: 600;
  color: #e0e0e0;
}

[data-theme="dark"] .profile .profile-card h2 {
  color: #c800ed;
}

[data-theme="dark"] .header-nav .profile .dropdown-header h6 {
  color: #c800ed;
}

/* Đổi màu chữ các nav-link */
[data-theme="dark"] .nav-link {
  color: #e0e0e0;
}

/* Khi hover hoặc nav-link được chọn */
[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link.active {
  color: #fb0000;
}

/* Thay đổi màu placeholder cho các input */
[data-theme="dark"] ::placeholder {
  color: #c0c0c0;
}

/* Áp dụng màu nền cho #welcome-message*/
[data-theme="dark"] #welcome-message {
  background-color: #3a4d59;

}

[data-theme="dark"] #footer .copyright,
[data-theme="dark"] #footer .credits {
  color: #c0c0c0;
}

/* Chỉnh sửa màu chữ trong các thẻ card-title trong chế độ dark */
[data-theme="dark"] .card-title label {
  color: #e0e0e0;
}

/* Cập nhật màu nền và chữ trong các thẻ card trong chế độ dark */
[data-theme="dark"] .col-xxl-4 .card.info-card.revenue-card {
  background-color: #333;
  color: #e0e0e0;
}

[data-theme="dark"] .col-xxl-4 .card-body {
  background-color: #444;
  color: #e0e0e0;
}

[data-theme="dark"] .col-xxl-4 .card-title {
  color: #fff;
}

[data-theme="dark"] .col-xxl-4 #show_description {
  color: #a0a0a0;
}

[data-theme="dark"] .col-xxl-4 .text-muted {
  color: #bbb;
}

[data-theme="dark"] .col-xxl-4 .text-success {
  color: #90ee90;
}

/* 
[data-theme="dark"] .col-xxl-4 .card-icon img {
  filter: brightness(0) invert(1); Chuyển màu ảnh icon cho phù hợp với nền tối
}
 */

/* Cập nhật màu chữ cho text-muted trong chế độ dark */
[data-theme="dark"] .text-muted {
  color: #dcdcdc !important;
}

[data-theme="dark"] .dashboard .info-card h6 {
  color: #e0e0e0;
}

[data-theme="dark"] .form-floating label {
  color: #e0e0e0 !important;
}

[data-theme="dark"] input[type="file"] {
  background-color: #555;
  color: #fff;
  border: 1px solid #444;
}

[data-theme="dark"] input[type="file"]::-webkit-file-upload-button {
  background-color: #4da3ff;
  color: #fff;
  border: 1px solid #4da3ff;
  padding: 5px 10px;
}

[data-theme="dark"] input[type="file"]:hover::-webkit-file-upload-button {
  background-color: #00509e;
  border-color: #00509e;
  color: #00509e;
}

[data-theme="dark"] .notification-item:hover {
  background-color: #333  !important;
}