/*Thong ke*/
/* Light Mode Styling */
.top-content {
   align-items: center;
   background: var(--white);
   color: var(--bs-gray-700);
   box-shadow: 0 7px 16px rgba(0, 0, 0, 0.03);
   border-radius: 12px;
   display: flex;
   padding: 12px;
   text-decoration: none;
   border: 1px solid var(--bs-gray-400);
   transition: all 0.15s ease-in-out;
}

.top-content:hover {
   background: #efefef69;
   border-radius: 12px;
   box-shadow: 0 10px 25px rgb(55 55 55 / 15%);
   outline: 1px solid var(--bs-gray-500) !important;
   transform: translate(0, 0) rotate(0) skewX(0) skewY(0) scaleX(1.025) scaleY(1.025);
   transition-duration: 0.15s;
}

.statistic-content {
   align-items: center;
   background: var(--white);
   border-radius: 12px;
   display: flex;
   padding: 16px;
   text-decoration: none;
   border: 1px solid var(--bs-gray-400);
   transition: all 0.15s ease-in-out;
   box-shadow: 0 7px 16px rgba(0, 0, 0, 0.03);
}

.statistic-content:hover {
   background: #efefef69;
   box-shadow: 0 10px 25px rgb(55 55 55 / 15%);
   outline: 1px solid var(--bs-gray-500) !important;
   transform: scale(1.025);
}

.statistic-content .statistic-icon {
   background: #ebebeb;
   border-radius: 8px;
   height: 48px;
   line-height: 48px;
   text-align: center;
   width: 48px;
}

.statistic-content .statistic-icon i {
   color: var(--bs-gray-700);
   font-size: 24px;
}

/* Text styling for both modes */
.text-muted {
   font-weight: 600 !important;
}

/* Dark Mode Styling */
body.dark-only .statistic-content {
   background: #1a1b22;
   box-shadow: 0 7px 16px rgba(0, 0, 0, 0.2);
   border: 1px solid #2c2d36;
}

body.dark-only .statistic-content:hover {
   background: #212229;
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
   outline: 1px solid #35363f !important;
}

body.dark-only .statistic-content .statistic-icon {
   background: #15161d;
}

body.dark-only .statistic-content .statistic-icon i {
   color: #e0e0e5;
}

body.dark-only .top-content {
   background: #1a1b22;
   color: #e0e0e5;
   box-shadow: 0 7px 16px rgba(0, 0, 0, 0.2);
   border: 1px solid #2c2d36;
}

body.dark-only .top-content:hover {
   background: #212229;
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
   outline: 1px solid #35363f !important;
}

/* Make text-muted more visible in dark mode with font-weight 600 */
body.dark-only .text-muted,
body.dark-only .statistic-content .text-muted,
body.dark-only .top-content .text-muted {
   color: #a0a0b0 !important;
   font-weight: 600 !important;
}

/* Additional specificity for different elements with text-muted */
body.dark-only span.text-muted,
body.dark-only .statistic-content span.text-muted,
body.dark-only .top-content span.text-muted {
   color: #a0a0b0 !important;
   font-weight: 600 !important;
}

/* Ensure counter text is still properly visible */
body.dark-only .statistic-content .count,
body.dark-only .top-content .count,
body.dark-only span.count,
body.dark-only .fw-bold {
   color: #e0e0e5 !important;
}

/* Make sure all text is visible in statistic-content */
body.dark-only .statistic-content .statistic-text h3,
body.dark-only .statistic-content .statistic-text p,
body.dark-only .statistic-content .ps-3 span:not(.text-muted) {
   color: #e0e0e5;
}