/* Tách từ app.R — login overlay + dark mode + overrides */

      /* Ẩn login page mặc định */
      #login_page_wrapper {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
      }
      /* Hiển thị login page khi có class show-login */
      #login_page_wrapper.show-login {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 99999 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        min-height: 100vh !important;
      }
      
      /* ========== DARK MODE VARIABLES ========== */
      :root {
        --bg-light: #ffffff;
        --bg-dark: #2b2b2b;
        --text-light: #1a1a1a;
        --text-dark: #f0f0f0;
        --card-bg-light: #ffffff;
        --card-bg-dark: #3a3a3a;
        --border-light: rgba(0, 0, 0, 0.1);
        --border-dark: rgba(255, 255, 255, 0.15);
        --shadow-light: rgba(0, 0, 0, 0.1);
        --shadow-dark: rgba(0, 0, 0, 0.3);
      }
      
      /* Dark mode class */
      html.dark-mode,
      html.dark-mode body {
        background-color: var(--bg-dark) !important;
        color: var(--text-dark) !important;
      }
      
      body.dark-mode {
        background-color: var(--bg-dark) !important;
        color: var(--text-dark) !important;
      }
      
      body.dark-mode,
      html.dark-mode {
        background-color: var(--bg-dark) !important;
      }
      
      body.dark-mode .navbar-custom {
        background-color: #2b2b2b !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
      }
      
      body.dark-mode .navbar-links a {
        color: #e5e5e5 !important;
      }
      
      body.dark-mode .navbar-links a:hover {
        color: #ffffff !important;
      }
      
      body.dark-mode .main-container,
      body.dark-mode #main_grid_view {
        background-color: var(--bg-dark) !important;
        color: var(--text-dark) !important;
      }
      
      body.dark-mode .container {
        background-color: var(--bg-dark) !important;
      }
      
      body.dark-mode .agent-card {
        background-color: var(--card-bg-dark) !important;
        border-color: var(--border-dark) !important;
        color: var(--text-dark) !important;
      }
      
      body.dark-mode .agent-header {
        background: linear-gradient(135deg, #3a3a3a 0%, #2b2b2b 100%) !important;
      }
      
      body.dark-mode .agent-title {
        color: #f5f5f5 !important;
      }
      
      body.dark-mode .agent-stats,
      body.dark-mode .agent-stats p {
        color: #d0d0d0 !important;
      }
      
      body.dark-mode .agent-body {
        color: #f0f0f0 !important;
      }
      
      /* ========== NAVBAR LINKS STYLING ========== */
      .navbar-links a {
        white-space: nowrap;
        margin-right: 0;
        flex-shrink: 0;
      }
      
      /* Layout hàng link do .navbar-menu-inner (code_css_4.2025.css) đảm nhiệm:
         hẹp thì wrap xuống dòng, KHÔNG overflow-x (tránh thanh cuộn trong navbar) */

      .navbar-links div[data-display-if] {
        display: inline-block !important;
      }
      
      /* Đảm bảo uiOutput containers trong navbar hiển thị đúng */
      .navbar-links .shiny-html-output {
        display: inline-block !important;
      }
      .navbar-links .shiny-html-output:empty {
        display: none !important;
      }
      .navbar-links .shiny-html-output a {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
      }
      
      /* Đảm bảo user_info_navbar hiển thị đúng trong navbar-buttons */
      .navbar-buttons .shiny-html-output {
        display: flex !important;
      }
      .navbar-buttons .shiny-html-output:empty {
        display: none !important;
      }
      #user_info_navbar {
        display: flex !important;
        align-items: center !important;
      }
      
      .navbar-links {
        flex: 1;
        min-width: 0;
      }
      
      /* Menu items được render bởi uiOutput - không cần CSS đặc biệt */
      
      /* Đảm bảo navbar-custom có layout flex đúng */
      .navbar-custom {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 20px !important;
        width: 100% !important;
      }
      
      /* Đảm bảo navbar-buttons không bị co lại */
      .navbar-buttons {
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
      }
      
      /* ========== ACCOUNT BADGE STYLES ========== */
      .account-badge-basic {
        display: inline-block;
        font-size: 0.7rem;
        font-weight: 700;
        color: #ffffff;
        background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
        padding: 4px 10px;
        border-radius: 12px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        box-shadow: 0 2px 8px rgba(107, 114, 128, 0.4),
                    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
      
      .account-badge-basic:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(107, 114, 128, 0.5),
                    0 0 0 1px rgba(255, 255, 255, 0.2) inset;
      }
      
      .account-badge-plus {
        display: inline-block;
        font-size: 0.7rem;
        font-weight: 700;
        color: #ffffff;
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
        padding: 4px 10px;
        border-radius: 12px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4),
                    0 0 0 1px rgba(255, 255, 255, 0.15) inset;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
      
      .account-badge-plus:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.5),
                    0 0 0 1px rgba(255, 255, 255, 0.25) inset;
      }
      
      .account-badge-pro {
        display: inline-block;
        font-size: 0.7rem;
        font-weight: 800;
        color: #1a1a1a;
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #f59e0b 100%);
        background-size: 200% 200%;
        padding: 4px 10px;
        border-radius: 12px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4),
                    0 0 0 1px rgba(255, 255, 255, 0.2) inset;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        animation: shimmer 3s ease-in-out infinite;
      }
      
      @keyframes shimmer {
        0%, 100% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
      }
      
      .account-badge-pro:hover {
        transform: translateY(-1px) scale(1.05);
        box-shadow: 0 4px 15px rgba(245, 158, 11, 0.6),
                    0 0 0 1px rgba(255, 255, 255, 0.4) inset,
                    0 0 25px rgba(255, 215, 0, 0.5);
      }
      
      .account-badge-admin {
        display: inline-block;
        font-size: 0.7rem;
        font-weight: 800;
        color: #ffffff;
        background: linear-gradient(135deg, #dc2626 0%, #b91c1c 50%, #dc2626 100%);
        background-size: 200% 200%;
        padding: 4px 10px;
        border-radius: 12px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4),
                    0 0 0 1px rgba(255, 255, 255, 0.15) inset;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        animation: shimmer 3s ease-in-out infinite;
      }
      
      .account-badge-admin:hover {
        transform: translateY(-1px) scale(1.05);
        box-shadow: 0 4px 15px rgba(220, 38, 38, 0.6),
                    0 0 0 1px rgba(255, 255, 255, 0.3) inset,
                    0 0 25px rgba(220, 38, 38, 0.6);
      }
      
      /* Giữ nguyên màu nền và viền của box-header như light mode - không override */
      /* Chỉ đổi nền nội dung của box sang màu tối */
      body.dark-mode .box-body,
      body.dark-mode .box-footer {
        background-color: var(--card-bg-dark) !important;
        color: #f0f0f0 !important;
      }
      
      /* Nội dung trong box - chữ trắng */
      body.dark-mode .box-body *,
      body.dark-mode .box-footer * {
        color: #f0f0f0 !important;
      }
      
      /* Giữ nguyên màu viền của box như light mode - không override */
      /* Giữ nguyên màu header như light mode - không override */
      
      body.dark-mode .sidebar-panel,
      body.dark-mode .main-panel,
      body.dark-mode .shiny-input-container,
      body.dark-mode .shiny-input-panel,
      body.dark-mode .sidebarPanel,
      body.dark-mode .mainPanel {
        background-color: var(--card-bg-dark) !important;
        color: #f0f0f0 !important;
        border-color: var(--border-dark) !important;
      }
      
      body.dark-mode [class*="sidebar"],
      body.dark-mode [class*="panel"] {
        background-color: var(--card-bg-dark) !important;
        color: #f0f0f0 !important;
      }
      
      body.dark-mode .sidebarLayout,
      body.dark-mode .fluidRow,
      body.dark-mode .row {
        background-color: var(--bg-dark) !important;
      }
      
      /* Giữ nguyên màu box-title như light mode - không override */
      /* Chỉ đổi màu heading trong box-body */
      body.dark-mode .box-body h1,
      body.dark-mode .box-body h2,
      body.dark-mode .box-body h3,
      body.dark-mode .box-body h4,
      body.dark-mode .box-body h5,
      body.dark-mode .box-body h6 {
        color: #f5f5f5 !important;
      }
      
      /* Heading ngoài box-body */
      body.dark-mode h1:not(.box-title):not(.box-header h1),
      body.dark-mode h2:not(.box-title):not(.box-header h2),
      body.dark-mode h3:not(.box-title):not(.box-header h3),
      body.dark-mode h4:not(.box-title):not(.box-header h4),
      body.dark-mode h5:not(.box-title):not(.box-header h5),
      body.dark-mode h6:not(.box-title):not(.box-header h6) {
        color: #f5f5f5 !important;
      }
      
      /* Text mặc định trong dark mode. KHÔNG dùng :not(#id) vì nó độn
         specificity lên 2 IDs → đè mọi rule màu accent (logo, hero, tab).
         Login wrapper được bảo vệ riêng bằng #id selector bên dưới. */
      body.dark-mode p,
      body.dark-mode span,
      body.dark-mode td,
      body.dark-mode th {
        color: #f0f0f0 !important;
      }
      
      /* Giữ nguyên text color tối trong login modal */
      body.dark-mode #login_page_wrapper h2,
      body.dark-mode #login_page_wrapper p,
      body.dark-mode #login_page_wrapper span,
      body.dark-mode #login_page_wrapper div {
        color: inherit !important;
      }
      
      body.dark-mode #login_page_wrapper h2 {
        color: #111827 !important;
      }
      
      body.dark-mode #login_page_wrapper p {
        color: #6b7280 !important;
      }
      
      body.dark-mode .module-view {
        background-color: var(--bg-dark) !important;
        color: var(--text-dark) !important;
      }
      
      body.dark-mode .module-title {
        color: var(--text-dark) !important;
      }
      
      body.dark-mode .tab-content,
      body.dark-mode .tab-pane,
      body.dark-mode .tabset-panel {
        background-color: var(--bg-dark) !important;
        color: var(--text-dark) !important;
      }
      
      body.dark-mode .nav-tabs {
        border-bottom-color: var(--border-dark) !important;
        background-color: var(--bg-dark) !important;
      }
      
      body.dark-mode .nav-tabs .nav-link {
        color: var(--text-dark) !important;
        background-color: var(--card-bg-dark) !important;
        border-color: var(--border-dark) !important;
      }
      
      body.dark-mode .nav-tabs .nav-link:hover {
        background-color: #4a4a4a !important;
        border-color: var(--border-dark) !important;
      }
      
      body.dark-mode .nav-tabs .nav-link.active {
        background-color: var(--bg-dark) !important;
        border-color: var(--border-dark) var(--border-dark) var(--bg-dark) !important;
        color: var(--text-dark) !important;
      }
      
      body.dark-mode .nav-pills .nav-link {
        color: var(--text-dark) !important;
        background-color: var(--card-bg-dark) !important;
      }
      
      body.dark-mode .nav-pills .nav-link.active {
        background-color: #4a4a4a !important;
        color: var(--text-dark) !important;
      }
      
      body.dark-mode .form-control,
      body.dark-mode .selectize-input,
      body.dark-mode input,
      body.dark-mode select,
      body.dark-mode textarea {
        background-color: var(--card-bg-dark) !important;
        color: var(--text-dark) !important;
        border-color: var(--border-dark) !important;
      }
      
      body.dark-mode .dataTables_wrapper,
      body.dark-mode .DT-wrapper,
      body.dark-mode .dataTables_scroll,
      body.dark-mode .dataTables_scrollHead,
      body.dark-mode .dataTables_scrollBody {
        background-color: var(--card-bg-dark) !important;
        color: var(--text-dark) !important;
      }
      
      body.dark-mode table.dataTable {
        background-color: var(--card-bg-dark) !important;
        color: var(--text-dark) !important;
      }
      
      body.dark-mode table.dataTable thead th {
        background-color: #4a4a4a !important;
        color: var(--text-dark) !important;
        border-color: var(--border-dark) !important;
      }
      
      body.dark-mode table.dataTable tbody td {
        background-color: var(--card-bg-dark) !important;
        color: #f0f0f0 !important;
        border-color: var(--border-dark) !important;
      }
      
      body.dark-mode table.dataTable thead th {
        color: #f5f5f5 !important;
      }
      
      body.dark-mode table.dataTable tbody tr {
        background-color: var(--card-bg-dark) !important;
      }
      
      body.dark-mode table.dataTable tbody tr:hover {
        background-color: #4a4a4a !important;
      }
      
      body.dark-mode table.dataTable tbody tr.odd {
        background-color: var(--card-bg-dark) !important;
      }
      
      body.dark-mode table.dataTable tbody tr.even {
        background-color: #3f3f3f !important;
      }
      
      /* Dark mode toggle button */
      .dark-mode-toggle {
        background: rgba(255, 255, 255, 0.1);
        border: 2px solid #f5f5f5 !important;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        color: #f5f5f5;
        font-size: 18px;
      }
      
      .dark-mode-toggle i {
        color: #f5f5f5 !important;
      }
      
      body.dark-mode .dark-mode-toggle {
        color: #f5f5f5;
        border-color: #f5f5f5 !important;
        background-color: rgba(245, 245, 245, 0.15);
      }
      
      .dark-mode-toggle:hover {
        transform: scale(1.1);
        box-shadow: 0 4px 8px rgba(245, 245, 245, 0.3);
        background-color: rgba(245, 245, 245, 0.2);
        border-color: #f5f5f5 !important;
      }
      
      body.dark-mode .dark-mode-toggle:hover {
        box-shadow: 0 4px 8px rgba(245, 245, 245, 0.4);
        background-color: rgba(245, 245, 245, 0.25);
        border-color: #f5f5f5 !important;
      }
      
      body.dark-mode .dark-mode-toggle i {
        color: #f5f5f5 !important;
      }
      
      /* Dam bao vien luon sang trong moi truong hop */
      .dark-mode-toggle,
      .dark-mode-toggle:focus,
      .dark-mode-toggle:active,
      .dark-mode-toggle:visited {
        border-color: #f5f5f5 !important;
      }
      
      /* Agent cards in dark mode */
      body.dark-mode #agent_grid_standard .agent-card,
      body.dark-mode #agent_grid_standard_view .agent-card {
        background: linear-gradient(135deg, #3a3a3a 0%, #2b2b2b 100%) !important;
      }
      
      body.dark-mode #agent_grid_plus .agent-card,
      body.dark-mode #agent_grid_plus_view .agent-card {
        background: linear-gradient(135deg, #3a3a3a 0%, #2b2b2b 100%) !important;
      }
      
      body.dark-mode #agent_grid_pro .agent-card,
      body.dark-mode #agent_grid_pro_view .agent-card {
        background: linear-gradient(135deg, #4a4a3a 0%, #3a3a2b 100%) !important;
      }
      
      body.dark-mode .shiny-output-container,
      body.dark-mode .shiny-html-output,
      body.dark-mode .shiny-text-output {
        background-color: var(--bg-dark) !important;
        color: var(--text-dark) !important;
      }
      
      body.dark-mode .well,
      body.dark-mode .panel,
      body.dark-mode .panel-body,
      body.dark-mode .panel-default {
        background-color: var(--card-bg-dark) !important;
        color: var(--text-dark) !important;
        border-color: var(--border-dark) !important;
      }
      
      body.dark-mode .panel-heading,
      body.dark-mode .panel-title {
        background-color: #4a4a4a !important;
        color: var(--text-dark) !important;
        border-color: var(--border-dark) !important;
      }
      
      body.dark-mode label,
      body.dark-mode .control-label {
        color: #f0f0f0 !important;
      }
      
      body.dark-mode .help-block,
      body.dark-mode .help-text {
        color: #d0d0d0 !important;
      }
      
      body.dark-mode code,
      body.dark-mode pre,
      body.dark-mode .verbatim {
        background-color: #4a4a4a !important;
        color: var(--text-dark) !important;
        border-color: var(--border-dark) !important;
      }
      
      body.dark-mode .gt_table,
      body.dark-mode .gt_summary {
        background-color: var(--card-bg-dark) !important;
        color: var(--text-dark) !important;
      }
      
      body.dark-mode .rating,
      body.dark-mode .rating span {
        color: #b0b0b0 !important;
      }
      
      body.dark-mode .btn-go {
        background-color: transparent !important;
        color: #f5f5f5 !important;
        border-color: #f5f5f5 !important;
      }
      
      body.dark-mode .btn-go:hover {
        background-color: rgba(245, 245, 245, 0.1) !important;
        color: #ffffff !important;
        border-color: #ffffff !important;
      }
      
      /* Nút Coming soon (disabled) trong dark mode */
      body.dark-mode .btn-go.disabled {
        background-color: transparent !important;
        color: #f5f5f5 !important;
        border-color: #f5f5f5 !important;
        opacity: 0.7 !important;
      }
      
      body.dark-mode .btn-go.disabled:hover {
        background-color: transparent !important;
        color: #f5f5f5 !important;
        border-color: #f5f5f5 !important;
        opacity: 0.8 !important;
      }
      
      /* Nút browse trong fileInput - dark mode */
      body.dark-mode .btn-file,
      body.dark-mode .shiny-file-input-progress .btn,
      body.dark-mode .sh-file-input-progress .btn,
      body.dark-mode input[type="file"] + .btn,
      body.dark-mode .file-input-wrapper .btn,
      body.dark-mode .shiny-file-input-progress button,
      body.dark-mode .sh-file-input-progress button,
      body.dark-mode .shiny-input-container .btn-file,
      body.dark-mode .form-group .btn-file {
        background-color: transparent !important;
        color: #f5f5f5 !important;
        border-color: #f5f5f5 !important;
      }
      
      body.dark-mode .btn-file:hover,
      body.dark-mode .shiny-file-input-progress .btn:hover,
      body.dark-mode .sh-file-input-progress .btn:hover,
      body.dark-mode .shiny-file-input-progress button:hover,
      body.dark-mode .sh-file-input-progress button:hover {
        background-color: rgba(245, 245, 245, 0.1) !important;
        color: #ffffff !important;
        border-color: #ffffff !important;
      }
      
      /* Label của fileInput trong dark mode */
      body.dark-mode label[for*="file"],
      body.dark-mode .control-label,
      body.dark-mode label {
        color: #f5f5f5 !important;
      }
      
      /* Text trong fileInput wrapper */
      body.dark-mode .shiny-file-input-progress,
      body.dark-mode .sh-file-input-progress {
        color: #f5f5f5 !important;
      }
      
      body.dark-mode .search-input,
      body.dark-mode #agent_search,
      body.dark-mode #agent_search_standard {
        background-color: var(--card-bg-dark) !important;
        color: var(--text-dark) !important;
        border-color: var(--border-dark) !important;
      }
      
      body.dark-mode .selectize-input,
      body.dark-mode .selectize-control.single .selectize-input {
        background-color: var(--card-bg-dark) !important;
        color: var(--text-dark) !important;
        border-color: var(--border-dark) !important;
      }
      
      body.dark-mode .selectize-dropdown {
        background-color: var(--card-bg-dark) !important;
        color: var(--text-dark) !important;
        border-color: var(--border-dark) !important;
      }
      
      body.dark-mode .selectize-dropdown .option {
        color: var(--text-dark) !important;
      }
      
      body.dark-mode .selectize-dropdown .option:hover,
      body.dark-mode .selectize-dropdown .option.active {
        background-color: var(--bg-dark) !important;
      }
      
      body.dark-mode ::-webkit-scrollbar-track {
        background: #3a3a3a !important;
      }
      
      body.dark-mode ::-webkit-scrollbar-thumb {
        background: #666 !important;
        border-color: #3a3a3a !important;
      }
      
      body.dark-mode ::-webkit-scrollbar-thumb:hover {
        background: #777 !important;
      }
      
      body.dark-mode * {
        scrollbar-color: #666 #3a3a3a !important;
      }
      
      body.dark-mode .box::-webkit-scrollbar-track,
      body.dark-mode .sidebar-panel::-webkit-scrollbar-track,
      body.dark-mode .main-panel::-webkit-scrollbar-track {
        background: #3a3a3a !important;
      }
      
      body.dark-mode .box::-webkit-scrollbar-thumb,
      body.dark-mode .sidebar-panel::-webkit-scrollbar-thumb,
      body.dark-mode .main-panel::-webkit-scrollbar-thumb {
        background: #666 !important;
        border-color: #3a3a3a !important;
      }
      
      body.dark-mode .box::-webkit-scrollbar-thumb:hover,
      body.dark-mode .sidebar-panel::-webkit-scrollbar-thumb:hover,
      body.dark-mode .main-panel::-webkit-scrollbar-thumb:hover {
        background: #777 !important;
      }
      
      body.dark-mode h1,
      body.dark-mode h2,
      body.dark-mode h3,
      body.dark-mode h4,
      body.dark-mode h5,
      body.dark-mode h6 {
        color: #f5f5f5 !important;
      }
      
      body.dark-mode p {
        color: #f0f0f0 !important;
      }
      
      body.dark-mode .shiny-text-output,
      body.dark-mode .shiny-html-output,
      body.dark-mode .shiny-output-container {
        color: #f0f0f0 !important;
      }
      
      body.dark-mode .pricing-container,
      body.dark-mode .pricing-card,
      body.dark-mode .comparison-table,
      body.dark-mode .pricing-footer {
        background-color: var(--card-bg-dark) !important;
        color: #f0f0f0 !important;
        border-color: var(--border-dark) !important;
      }
      
      /* Đảm bảo tất cả các phần tử đều có nền tối */
      html.dark-mode,
      html.dark-mode body,
      html.dark-mode .shiny-app,
      html.dark-mode .container-fluid,
      html.dark-mode .container,
      html.dark-mode .shiny-bound-output,
      html.dark-mode .shiny-html-output,
      html.dark-mode .shiny-text-output {
        background-color: var(--bg-dark) !important;
      }
      
      /* Sidebar và các phần bên */
      body.dark-mode .col-sm-3,
      body.dark-mode .col-sm-4,
      body.dark-mode .col-sm-6,
      body.dark-mode .col-sm-9,
      body.dark-mode .col-md-3,
      body.dark-mode .col-md-4,
      body.dark-mode .col-md-6,
      body.dark-mode .col-md-9,
      body.dark-mode .col-lg-3,
      body.dark-mode .col-lg-4,
      body.dark-mode .col-lg-6,
      body.dark-mode .col-lg-9 {
        background-color: transparent !important;
      }
      
      body.dark-mode [class*="col-"] {
        background-color: transparent !important;
      }
      
      body.dark-mode .sidebarPanel > *,
      body.dark-mode .mainPanel > * {
        background-color: var(--card-bg-dark) !important;
        color: #f0f0f0 !important;
      }
      
      body.dark-mode .content-wrapper,
      body.dark-mode .right-side,
      body.dark-mode .dashboard-body {
        background-color: var(--bg-dark) !important;
      }
      
      /* Tất cả text trong dark mode sáng hơn */
      body.dark-mode * {
        color: inherit;
      }
      
      body.dark-mode .text-muted,
      body.dark-mode .text-secondary {
        color: #d0d0d0 !important;
      }
      
      body.dark-mode .navbar-logo,
      body.dark-mode .logo-main {
        color: #f5f5f5 !important;
      }
      
      /* Giu mau cam cho logo-version 3.0 trong dark mode */
      body.dark-mode .logo-version {
        color: #E67E58 !important;
      }
      
      /* Giu mau cam cho Phan tich du lieu trong dark mode */
      body.dark-mode h1 span {
        color: #E67E58 !important;
      }
      
      body.dark-mode h2 span,
      body.dark-mode h3 span {
        color: #E67E58 !important;
      }
      
      /* ========== IMPROVED DARK MODE STYLES ========== */
      
      /* Input placeholders */
      body.dark-mode input::placeholder,
      body.dark-mode textarea::placeholder,
      body.dark-mode .selectize-input::placeholder {
        color: #888 !important;
        opacity: 1 !important;
      }
      
      /* Better input focus states */
      body.dark-mode .form-control:focus,
      body.dark-mode input:focus,
      body.dark-mode select:focus,
      body.dark-mode textarea:focus,
      body.dark-mode .selectize-input.focus {
        border-color: #E67E58 !important;
        box-shadow: 0 0 0 3px rgba(230, 126, 88, 0.25) !important;
        outline: none !important;
      }
      
      /* Box styling improvements */
      body.dark-mode .box {
        background-color: var(--card-bg-dark) !important;
        border-color: var(--border-dark) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
      }
      
      body.dark-mode .box-header {
        background-color: #4a4a4a !important;
        border-bottom-color: var(--border-dark) !important;
      }
      
      body.dark-mode .box-header .box-title {
        color: #f5f5f5 !important;
      }
      
      body.dark-mode .box.box-solid.box-primary > .box-header,
      body.dark-mode .box.box-solid.box-warning > .box-header,
      body.dark-mode .box.box-solid.box-danger > .box-header,
      body.dark-mode .box.box-solid.box-info > .box-header {
        background-color: #4a4a4a !important;
      }
      
      /* Collapsible boxes */
      body.dark-mode .box-header > .box-tools > .btn,
      body.dark-mode .box-header .btn-box-tool {
        color: #d0d0d0 !important;
      }
      
      body.dark-mode .box-header > .box-tools > .btn:hover,
      body.dark-mode .box-header .btn-box-tool:hover {
        color: #fff !important;
      }
      
      /* Action buttons */
      body.dark-mode .btn-default {
        background-color: #4a4a4a !important;
        color: #f0f0f0 !important;
        border-color: #5a5a5a !important;
      }
      
      body.dark-mode .btn-default:hover {
        background-color: #5a5a5a !important;
        border-color: #6a6a6a !important;
      }
      
      body.dark-mode .btn-primary {
        background-color: #E67E58 !important;
        border-color: #E67E58 !important;
      }
      
      body.dark-mode .btn-primary:hover {
        background-color: #d66d47 !important;
        border-color: #d66d47 !important;
      }
      
      /* Notifications */
      body.dark-mode .shiny-notification {
        background-color: #4a4a4a !important;
        color: #f0f0f0 !important;
        border-color: var(--border-dark) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
      }
      
      /* Radio buttons and checkboxes */
      body.dark-mode .radio label,
      body.dark-mode .checkbox label,
      body.dark-mode .shiny-options-group label {
        color: #f0f0f0 !important;
      }
      
      /* Select dropdowns */
      body.dark-mode .selectize-dropdown-content .option,
      body.dark-mode .dropdown-menu > li > a {
        color: #f0f0f0 !important;
      }
      
      body.dark-mode .selectize-dropdown-content .option:hover,
      body.dark-mode .dropdown-menu > li > a:hover {
        background-color: #4a4a4a !important;
      }
      
      body.dark-mode .dropdown-menu {
        background-color: var(--card-bg-dark) !important;
        border-color: var(--border-dark) !important;
      }
      
      /* File input styling */
      body.dark-mode .shiny-file-input-progress {
        background-color: var(--card-bg-dark) !important;
      }
      
      body.dark-mode .progress {
        background-color: #4a4a4a !important;
      }
      
      body.dark-mode .progress-bar {
        background-color: #E67E58 !important;
      }
      
      /* Horizontal rules */
      body.dark-mode hr {
        border-color: var(--border-dark) !important;
      }
      
      /* Links (chỉ link nội dung — loại trừ pagination, download, tab DT).
         :not(.nav *): tab (.nav-tabs/.nav-pills) không bị tô xanh như link; luật này
         có độ ưu tiên rất cao nên trước đây đè lên màu tab của mọi module. */
      body.dark-mode a:not(.btn):not(.nav-link):not(.nav *):not(.agent-card *):not(.paginate_button):not(.shiny-download-link):not(.dataTables_paginate *) {
        color: #7cb8f7 !important;
      }

      body.dark-mode a:not(.btn):not(.nav-link):not(.nav *):not(.agent-card *):not(.paginate_button):not(.shiny-download-link):not(.dataTables_paginate *):hover {
        color: #9ecbfa !important;
      }

      /* Bảng chuẩn (ds_gt_style / ds_gt_flag, docs/TABLE_STANDARDS.md mục 6) ở dark mode:
         giữ dòng sole và màu đạt (xanh) / không đạt (đỏ) bằng tông trầm, chữ trắng.
         Độ ưu tiên cao hơn luật nền ô bảng chung của module-dark-theme.css. */
      body.dark-mode .module-view table:not(.dataTable):not(.handsontable) td.gt_striped,
      body.dark-mode .module-view table:not(.dataTable):not(.handsontable) td[style*="f5f6f7" i] {
        background-color: #333333 !important;
      }
      body.dark-mode .module-view table:not(.dataTable):not(.handsontable) td[style*="d4edda" i] {
        background-color: rgba(46, 160, 67, 0.30) !important;
        color: #f0f0f0 !important;
      }
      body.dark-mode .module-view table:not(.dataTable):not(.handsontable) td[style*="f8d7da" i] {
        background-color: rgba(218, 54, 51, 0.32) !important;
        color: #f0f0f0 !important;
      }

      /* Nút radio / checkbox: màu cam thương hiệu thay cho xanh mặc định của trình duyệt */
      body.dark-mode input[type="radio"],
      body.dark-mode input[type="checkbox"] {
        accent-color: #E67E58;
      }
      
      /* MathJax formulas */
      body.dark-mode .MathJax,
      body.dark-mode .MathJax_Display,
      body.dark-mode .mjx-chtml {
        color: #f0f0f0 !important;
      }
      
      /* Tables general */
      body.dark-mode table {
        background-color: var(--card-bg-dark) !important;
      }
      
      body.dark-mode table th,
      body.dark-mode table td {
        border-color: var(--border-dark) !important;
      }
      
      /* DataTables pagination */
      body.dark-mode .dataTables_paginate .paginate_button {
        background-color: #4a4a4a !important;
        color: #f0f0f0 !important;
        border-color: var(--border-dark) !important;
      }
      
      body.dark-mode .dataTables_paginate .paginate_button:hover {
        background-color: #5a5a5a !important;
        color: #fff !important;
      }
      
      body.dark-mode .dataTables_paginate .paginate_button.current {
        background-color: #E67E58 !important;
        border-color: #E67E58 !important;
      }
      
      body.dark-mode .dataTables_info,
      body.dark-mode .dataTables_length,
      body.dark-mode .dataTables_filter {
        color: #d0d0d0 !important;
      }
      
      /* Alert boxes */
      body.dark-mode .alert {
        background-color: #4a4a4a !important;
        border-color: var(--border-dark) !important;
        color: #f0f0f0 !important;
      }
      
      body.dark-mode .alert-info {
        background-color: rgba(66, 133, 244, 0.2) !important;
        border-color: rgba(66, 133, 244, 0.4) !important;
      }
      
      body.dark-mode .alert-warning {
        background-color: rgba(255, 193, 7, 0.2) !important;
        border-color: rgba(255, 193, 7, 0.4) !important;
      }
      
      body.dark-mode .alert-danger {
        background-color: rgba(220, 53, 69, 0.2) !important;
        border-color: rgba(220, 53, 69, 0.4) !important;
      }
      
      body.dark-mode .alert-success {
        background-color: rgba(40, 167, 69, 0.2) !important;
        border-color: rgba(40, 167, 69, 0.4) !important;
      }
      
      /* Tooltips */
      body.dark-mode .tooltip-inner {
        background-color: #1a1a1a !important;
        color: #f0f0f0 !important;
      }
      
      /* Modal improvements */
      body.dark-mode .modal-content {
        background-color: var(--card-bg-dark) !important;
        border-color: var(--border-dark) !important;
      }
      
      body.dark-mode .modal-header {
        border-bottom-color: var(--border-dark) !important;
      }
      
      body.dark-mode .modal-footer {
        border-top-color: var(--border-dark) !important;
      }
      
      /* Better contrast for disabled elements */
      body.dark-mode .disabled,
      body.dark-mode [disabled],
      body.dark-mode .btn.disabled {
        opacity: 0.5 !important;
      }
      
      /* GTSummary tables */
      body.dark-mode .gt_table,
      body.dark-mode .gt_table th,
      body.dark-mode .gt_table td {
        background-color: var(--card-bg-dark) !important;
        color: #f0f0f0 !important;
        border-color: var(--border-dark) !important;
      }
      
      body.dark-mode .gt_table thead th {
        background-color: #4a4a4a !important;
      }
      
      /* Rhandsontable */
      body.dark-mode .handsontable {
        background-color: var(--card-bg-dark) !important;
        color: #f0f0f0 !important;
      }
      
      body.dark-mode .handsontable th,
      body.dark-mode .handsontable td {
        background-color: var(--card-bg-dark) !important;
        color: #f0f0f0 !important;
        border-color: var(--border-dark) !important;
      }
      
      body.dark-mode .handsontable th {
        background-color: #4a4a4a !important;
      }
      
      /* Flextable */
      body.dark-mode .flextable-default,
      body.dark-mode .flextable-default th,
      body.dark-mode .flextable-default td {
        background-color: var(--card-bg-dark) !important;
        color: #f0f0f0 !important;
        border-color: var(--border-dark) !important;
      }
      
      /* Better scrollbar styling */
      body.dark-mode *::-webkit-scrollbar {
        width: 10px;
        height: 10px;
      }
      
      body.dark-mode *::-webkit-scrollbar-track {
        background: #2b2b2b !important;
        border-radius: 5px;
      }
      
      body.dark-mode *::-webkit-scrollbar-thumb {
        background: #555 !important;
        border-radius: 5px;
        border: 2px solid #2b2b2b;
      }
      
      body.dark-mode *::-webkit-scrollbar-thumb:hover {
        background: #666 !important;
      }
      
      /* Nav tabs improved */
      body.dark-mode .nav-tabs > li > a {
        color: #d0d0d0 !important;
        background-color: transparent !important;
        border-color: transparent !important;
      }
      
      body.dark-mode .nav-tabs > li > a:hover {
        color: #f5f5f5 !important;
        background-color: rgba(255, 255, 255, 0.05) !important;
        border-color: transparent !important;
      }
      
      body.dark-mode .nav-tabs > li.active > a,
      body.dark-mode .nav-tabs > li.active > a:hover,
      body.dark-mode .nav-tabs > li.active > a:focus {
        color: #f5f5f5 !important;
        background-color: var(--card-bg-dark) !important;
        border-color: var(--border-dark) var(--border-dark) transparent !important;
      }
      
      /* Upload complete styling */
      body.dark-mode .upload-complete {
        background-color: rgba(40, 167, 69, 0.15) !important;
        border-color: rgba(40, 167, 69, 0.4) !important;
      }
      
      body.dark-mode .upload-complete .fa-check-circle {
        color: #28a745 !important;
      }
      
      /* Card body text */
      body.dark-mode .card-body,
      body.dark-mode .card-text {
        color: #f0f0f0 !important;
      }
      
      /* Sidebar layout */
      body.dark-mode .well {
        background-color: var(--card-bg-dark) !important;
        border-color: var(--border-dark) !important;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3) !important;
      }
      
      /* ========== PRICING PAGE - DARK MODE với nền tối ========== */
      /* Thay đổi pricing cards sang nền tối thay vì trắng */
      body.dark-mode .pricing-card {
        background: linear-gradient(135deg, #3a3a3a 0%, #2d2d2d 100%) !important;
        border-color: rgba(255, 255, 255, 0.15) !important;
      }
      
      body.dark-mode .pricing-card.standard-card {
        background: linear-gradient(135deg, #3a3a3a 0%, #2d2d2d 100%) !important;
        border-color: #555 !important;
      }
      
      body.dark-mode .pricing-card.plus-card {
        background: linear-gradient(135deg, #3d3d3d 0%, #2f2f2f 100%) !important;
        border-color: #888 !important;
      }
      
      body.dark-mode .pricing-card.pro-card {
        background: linear-gradient(135deg, #3f3a2f 0%, #302c22 100%) !important;
        border-color: #c9a227 !important;
      }
      
      /* All text in pricing cards - light colors */
      body.dark-mode .pricing-card h3,
      body.dark-mode .pricing-card .pricing-card-title {
        color: #f5f5f5 !important;
      }
      
      body.dark-mode .pricing-card p,
      body.dark-mode .pricing-card span,
      body.dark-mode .pricing-card div,
      body.dark-mode .pricing-card-desc,
      body.dark-mode .pricing-card-subtitle {
        color: #d0d0d0 !important;
      }
      
      body.dark-mode .pricing-card-price {
        color: #f5f5f5 !important;
      }
      
      body.dark-mode .pricing-card.standard-card .pricing-card-price {
        color: #f5f5f5 !important;
      }
      
      body.dark-mode .pricing-card.plus-card .pricing-card-price {
        color: #e0e0e0 !important;
      }
      
      body.dark-mode .pricing-card.pro-card .pricing-card-price {
        color: #F4D03F !important;
      }
      
      body.dark-mode .pricing-features li {
        color: #e0e0e0 !important;
      }
      
      body.dark-mode .pricing-features li::before {
        color: #10b981 !important;
      }
      
      /* Duration selector in pricing */
      body.dark-mode .pricing-card .duration-selector select,
      body.dark-mode .pricing-card .form-control,
      body.dark-mode .pricing-card select {
        background-color: #4a4a4a !important;
        color: #f0f0f0 !important;
        border-color: #666 !important;
      }
      
      body.dark-mode .pricing-card .duration-selector label {
        color: #d0d0d0 !important;
      }
      
      /* Price display box */
      body.dark-mode .pricing-card .price-display {
        background: linear-gradient(135deg, #4a4a4a 0%, #3a3a3a 100%) !important;
        border-color: #555 !important;
      }
      
      body.dark-mode .pricing-card .price-original {
        color: #999 !important;
      }
      
      body.dark-mode .pricing-card .price-hmu {
        color: #4ade80 !important;
      }
      
      body.dark-mode .pricing-card .price-per-month {
        color: #b0b0b0 !important;
      }
      
      /* Pricing card header */
      body.dark-mode .pricing-card-header {
        border-bottom-color: rgba(255, 255, 255, 0.1) !important;
      }
      
      /* Pricing buttons */
      body.dark-mode .pricing-btn.standard {
        background: linear-gradient(135deg, #555 0%, #444 100%) !important;
        color: #fff !important;
      }
      
      body.dark-mode .pricing-btn.plus {
        background: linear-gradient(135deg, #888 0%, #777 100%) !important;
        color: #1a1a1a !important;
      }
      
      body.dark-mode .pricing-btn.pro {
        background: linear-gradient(135deg, #F4D03F 0%, #c9a227 100%) !important;
        color: #1a1a1a !important;
      }
      
      /* Comparison table - dark mode */
      body.dark-mode .comparison-table {
        background: #3a3a3a !important;
      }
      
      body.dark-mode .comparison-table h2 {
        color: #f5f5f5 !important;
      }
      
      body.dark-mode .comparison-table th {
        background: #4a4a4a !important;
        color: #f5f5f5 !important;
        border-color: #555 !important;
      }
      
      body.dark-mode .comparison-table td {
        color: #e0e0e0 !important;
        border-color: #555 !important;
      }
      
      body.dark-mode .comparison-table tr:hover {
        background: #4a4a4a !important;
      }
      
      /* Pricing footer - dark mode */
      body.dark-mode .pricing-footer {
        background: #3a3a3a !important;
      }
      
      body.dark-mode .pricing-footer .footer-title {
        color: #f5f5f5 !important;
      }
      
      body.dark-mode .pricing-footer .footer-content {
        color: #d0d0d0 !important;
      }
      
      body.dark-mode .commitment-box {
        background: linear-gradient(135deg, #4a4a4a 0%, #3a3a3a 100%) !important;
        border-left-color: #4A90E2 !important;
      }
      
      /* Pricing header */
      body.dark-mode .pricing-header,
      body.dark-mode .pricing-title {
        color: #f5f5f5 !important;
      }
      
      /* Free activation box */
      body.dark-mode .free-activation-box,
      body.dark-mode .hmu-discount-box {
        background: linear-gradient(135deg, #3a3a3a 0%, #2b2b2b 100%) !important;
        border-color: rgba(255, 255, 255, 0.15) !important;
      }
      
      body.dark-mode .free-activation-box *,
      body.dark-mode .hmu-discount-box * {
        color: #f0f0f0 !important;
      }
      
      body.dark-mode .free-activation-title,
      body.dark-mode .hmu-discount-title {
        color: #f5f5f5 !important;
      }
      
      body.dark-mode .free-activation-desc,
      body.dark-mode .hmu-discount-desc {
        color: #d0d0d0 !important;
      }
      
      body.dark-mode .hmu-login-hint {
        background: #4a4a4a !important;
        border-left-color: #4A90E2 !important;
        color: #e0e0e0 !important;
      }
      
      body.dark-mode .class-code-input input {
        background-color: #4a4a4a !important;
        color: #f0f0f0 !important;
        border-color: #5a5a5a !important;
      }
      
      /* ========== AGENT CARDS (Trang chủ) - DARK MODE ========== */
      /* Card body text in dark mode */
      body.dark-mode .agent-card .agent-body {
        color: #f0f0f0 !important;
      }
      
      body.dark-mode .agent-card .agent-title {
        color: #f5f5f5 !important;
      }
      
      body.dark-mode .agent-card .agent-stats,
      body.dark-mode .agent-card .agent-stats p {
        color: #d0d0d0 !important;
      }
      
      body.dark-mode .agent-card .agent-author {
        color: #b0b0b0 !important;
      }
      
      body.dark-mode .agent-card .rating span,
      body.dark-mode .agent-card .reviews {
        color: #c0c0c0 !important;
      }
      
      /* ========== CARD CONTENT (Nội dung bên trong từng card) - DARK MODE ========== */
      
      /* Module view container */
      body.dark-mode .module-view {
        background-color: var(--bg-dark) !important;
        color: var(--text-dark) !important;
      }
      
      /* Box components - shinydashboard boxes */
      body.dark-mode .box {
        background-color: var(--card-bg-dark) !important;
        border-color: var(--border-dark) !important;
        color: #f0f0f0 !important;
      }
      
      body.dark-mode .box-header {
        background-color: #4a4a4a !important;
        border-bottom-color: var(--border-dark) !important;
      }
      
      body.dark-mode .box-title {
        color: #f5f5f5 !important;
      }
      
      body.dark-mode .box-body {
        background-color: var(--card-bg-dark) !important;
        color: #f0f0f0 !important;
      }
      
      body.dark-mode .box-body * {
        color: #f0f0f0 !important;
      }
      
      body.dark-mode .box-footer {
        background-color: var(--card-bg-dark) !important;
        border-top-color: var(--border-dark) !important;
        color: #f0f0f0 !important;
      }
      
      /* Box status colors */
      body.dark-mode .box.box-solid.box-primary > .box-header {
        background-color: #4a4a4a !important;
        color: #f5f5f5 !important;
      }
      
      body.dark-mode .box.box-solid.box-warning > .box-header {
        background-color: #5a4a3a !important;
        color: #f5f5f5 !important;
      }
      
      body.dark-mode .box.box-solid.box-danger > .box-header {
        background-color: #5a3a3a !important;
        color: #f5f5f5 !important;
      }
      
      body.dark-mode .box.box-solid.box-info > .box-header {
        background-color: #3a4a5a !important;
        color: #f5f5f5 !important;
      }
      
      body.dark-mode .box.box-solid.box-success > .box-header {
        background-color: #3a5a4a !important;
        color: #f5f5f5 !important;
      }
      
      /* Sidebar and main panels */
      body.dark-mode .sidebarPanel,
      body.dark-mode .mainPanel {
        background-color: var(--bg-dark) !important;
        color: #f0f0f0 !important;
      }
      
      body.dark-mode .sidebarPanel *,
      body.dark-mode .mainPanel * {
        color: #f0f0f0 !important;
      }
      
      /* Upload complete message */
      /* Khớp cả style viết liền (background-color:#d4edda) lẫn có dấu cách; chữ trắng
         trên nền xanh lá trầm, viền xanh lá để vẫn nhận ra là thông báo thành công */
      body.dark-mode div[style*="background-color: #d4edda"],
      body.dark-mode div[style*="background-color:#d4edda"] {
        background-color: rgba(40, 167, 69, 0.16) !important;
        border-color: rgba(74, 222, 128, 0.45) !important;
      }
      
      body.dark-mode div[style*="background-color: #d4edda"] *,
      body.dark-mode div[style*="background-color:#d4edda"] * {
        color: #f0f0f0 !important;
      }
      
      body.dark-mode div[style*="color: #155724"],
      body.dark-mode [style*="color:#155724"] {
        color: #f0f0f0 !important;
      }
      
      /* File input styling */
      body.dark-mode .shiny-file-input-progress {
        background-color: var(--card-bg-dark) !important;
      }
      
      /* RHandsontable */
      body.dark-mode .handsontable {
        background-color: var(--card-bg-dark) !important;
      }
      
      body.dark-mode .handsontable th,
      body.dark-mode .handsontable td {
        background-color: var(--card-bg-dark) !important;
        color: #f0f0f0 !important;
        border-color: var(--border-dark) !important;
      }
      
      body.dark-mode .handsontable th {
        background-color: #4a4a4a !important;
        color: #f5f5f5 !important;
      }
      
      body.dark-mode .handsontable tbody tr:hover {
        background-color: #4a4a4a !important;
      }
      
      /* Select inputs in cards - FIXED: Đảm bảo tất cả select đều tối */
      body.dark-mode .shiny-input-container select,
      body.dark-mode .shiny-input-container .selectize-input,
      body.dark-mode select,
      body.dark-mode .selectize-input {
        background-color: var(--card-bg-dark) !important;
        color: #f0f0f0 !important;
        border-color: var(--border-dark) !important;
      }
      
      body.dark-mode .selectize-input input {
        color: #f0f0f0 !important;
      }
      
      body.dark-mode .selectize-input .item {
        color: #f0f0f0 !important;
        background-color: #4a4a4a !important;
      }
      
      body.dark-mode .selectize-dropdown {
        background-color: var(--card-bg-dark) !important;
        border-color: var(--border-dark) !important;
      }
      
      body.dark-mode .selectize-dropdown .option {
        color: #f0f0f0 !important;
        background-color: var(--card-bg-dark) !important;
      }
      
      body.dark-mode .selectize-dropdown .option:hover,
      body.dark-mode .selectize-dropdown .option.active {
        background-color: #4a4a4a !important;
        color: #f5f5f5 !important;
      }
      
      body.dark-mode .selectize-dropdown .option.selected {
        background-color: #5a5a5a !important;
        color: #fff !important;
      }
      
      /* Numeric inputs - FIXED */
      body.dark-mode .shiny-input-container input[type="number"],
      body.dark-mode .shiny-input-container input[type="text"],
      body.dark-mode input[type="number"],
      body.dark-mode input[type="text"] {
        background-color: var(--card-bg-dark) !important;
        color: #f0f0f0 !important;
        border-color: var(--border-dark) !important;
      }
      
      /* Labels - FIXED: Đảm bảo tất cả labels đều sáng */
      body.dark-mode .shiny-input-container label,
      body.dark-mode label,
      body.dark-mode .control-label {
        color: #e0e0e0 !important;
      }
      
      body.dark-mode .shiny-input-container .control-label {
        color: #e0e0e0 !important;
      }
      
      /* Radio buttons and checkboxes */
      body.dark-mode .shiny-input-container .radio label,
      body.dark-mode .shiny-input-container .checkbox label {
        color: #f0f0f0 !important;
      }
      
      /* Action buttons in cards */
      body.dark-mode .shiny-input-container .btn,
      body.dark-mode .action-button {
        background-color: #4a4a4a !important;
        color: #f0f0f0 !important;
        border-color: #5a5a5a !important;
      }
      
      body.dark-mode .shiny-input-container .btn:hover,
      body.dark-mode .action-button:hover {
        background-color: #5a5a5a !important;
        border-color: #6a6a6a !important;
      }
      
      body.dark-mode .btn-primary {
        background-color: #E67E58 !important;
        border-color: #E67E58 !important;
        color: #fff !important;
      }
      
      body.dark-mode .btn-primary:hover {
        background-color: #d66d47 !important;
        border-color: #d66d47 !important;
      }
      
      /* Download buttons — chữ xám sáng, hover GIỮ NGUYÊN màu (không xanh) */
      body.dark-mode .download-button,
      body.dark-mode .shiny-download-link,
      body.dark-mode .download-button:hover,
      body.dark-mode .shiny-download-link:hover,
      body.dark-mode .download-button:focus,
      body.dark-mode .shiny-download-link:focus {
        color: #f0f0f0 !important;
      }
      
      /* Help text and descriptions */
      body.dark-mode .help-block,
      body.dark-mode .help-text,
      body.dark-mode .shiny-help-inline {
        color: #b0b0b0 !important;
      }
      
      /* Text outputs */
      body.dark-mode .shiny-text-output,
      body.dark-mode .text-output {
        color: #f0f0f0 !important;
      }
      
      /* HTML outputs */
      body.dark-mode .shiny-html-output {
        color: #f0f0f0 !important;
      }
      
      body.dark-mode .shiny-html-output * {
        color: #f0f0f0 !important;
      }
      
      /* Plot outputs */
      body.dark-mode .shiny-plot-output {
        background-color: var(--card-bg-dark) !important;
      }
      
      /* Conditional panels */
      body.dark-mode .conditional-panel {
        background-color: transparent !important;
      }
      
      /* Tabs in cards - FIXED: Active tab không có nền trắng */
      body.dark-mode .nav-tabs {
        border-bottom-color: var(--border-dark) !important;
        background-color: transparent !important;
      }
      
      body.dark-mode .nav-tabs > li > a {
        color: #d0d0d0 !important;
        background-color: transparent !important;
        border-color: transparent !important;
      }
      
      body.dark-mode .nav-tabs > li > a:hover {
        color: #f5f5f5 !important;
        background-color: rgba(255, 255, 255, 0.05) !important;
        border-color: transparent !important;
      }
      
      body.dark-mode .nav-tabs > li.active > a,
      body.dark-mode .nav-tabs > li.active > a:hover,
      body.dark-mode .nav-tabs > li.active > a:focus {
        color: #f5f5f5 !important;
        background-color: var(--card-bg-dark) !important;
        border-color: var(--border-dark) var(--border-dark) transparent !important;
      }
      
      /* Override any white background on active tabs */
      body.dark-mode .nav-tabs > li.active > a[style*="background"],
      body.dark-mode .nav-tabs > li.active > a[style*="color"] {
        background-color: var(--card-bg-dark) !important;
        color: #f5f5f5 !important;
      }
      
      /* Tab content area */
      body.dark-mode .tab-content {
        background-color: var(--bg-dark) !important;
      }
      
      body.dark-mode .tab-pane {
        background-color: var(--bg-dark) !important;
        color: #f0f0f0 !important;
      }
      
      body.dark-mode .tab-pane * {
        color: #f0f0f0 !important;
      }
      
      /* Nav pills */
      body.dark-mode .nav-pills > li > a {
        color: #d0d0d0 !important;
        background-color: transparent !important;
      }
      
      body.dark-mode .nav-pills > li > a:hover {
        color: #f5f5f5 !important;
        background-color: rgba(255, 255, 255, 0.1) !important;
      }
      
      body.dark-mode .nav-pills > li.active > a,
      body.dark-mode .nav-pills > li.active > a:hover,
      body.dark-mode .nav-pills > li.active > a:focus {
        color: #fff !important;
        background-color: #E67E58 !important;
      }
      
      /* Fluid rows and columns */
      body.dark-mode .fluid-row,
      body.dark-mode .row {
        background-color: transparent !important;
      }
      
      /* Container fluid */
      body.dark-mode .container-fluid {
        background-color: var(--bg-dark) !important;
      }
      
      /* All text elements in cards - FIXED: Override inline styles */
      body.dark-mode .module-view p,
      body.dark-mode .module-view span,
      body.dark-mode .module-view div:not(.box):not(.box-header):not(.box-body):not(.box-footer) {
        color: #f0f0f0 !important;
      }
      
      /* Override inline styles on spans (tab titles) */
      body.dark-mode span[style*="color:#514945"],
      body.dark-mode span[style*="color: #514945"] {
        color: #f5f5f5 !important;
      }
      
      body.dark-mode span[style*="font-weight:bold"] {
        color: #f5f5f5 !important;
      }
      
      /* Override any white backgrounds */
      body.dark-mode [style*="background-color: white"],
      body.dark-mode [style*="background-color: #fff"],
      body.dark-mode [style*="background-color:#fff"] {
        background-color: var(--card-bg-dark) !important;
      }
      
      body.dark-mode [style*="background: white"],
      body.dark-mode [style*="background: #fff"] {
        background: var(--card-bg-dark) !important;
      }
      
      /* Override dark text on dark background */
      body.dark-mode [style*="color: #514945"],
      body.dark-mode [style*="color:#514945"],
      body.dark-mode [style*="color: #333"],
      body.dark-mode [style*="color:#333"] {
        color: #f0f0f0 !important;
      }
      
      /* Strong and bold text */
      body.dark-mode strong,
      body.dark-mode b {
        color: #f5f5f5 !important;
      }
      
      /* Links in card content */
      body.dark-mode .module-view a:not(.btn):not(.nav *):not(.paginate_button) {
        color: #7cb8f7 !important;
      }
      
      body.dark-mode .module-view a:not(.btn):not(.nav *):not(.paginate_button):hover {
        color: #9ecbfa !important;
      }
      
      /* Horizontal rules */
      body.dark-mode hr {
        border-color: var(--border-dark) !important;
        background-color: var(--border-dark) !important;
      }
      
      /* Lists */
      body.dark-mode ul,
      body.dark-mode ol {
        color: #f0f0f0 !important;
      }
      
      body.dark-mode li {
        color: #f0f0f0 !important;
      }
      
      /* Code blocks in cards */
      body.dark-mode .module-view code,
      body.dark-mode .module-view pre {
        background-color: #4a4a4a !important;
        color: #f0f0f0 !important;
        border-color: var(--border-dark) !important;
      }
      
      /* MathJax in cards */
      body.dark-mode .module-view .MathJax,
      body.dark-mode .module-view .MathJax_Display {
        color: #f0f0f0 !important;
      }
      
      /* TabsetPanel - FIXED */
      body.dark-mode .tabset-panel {
        background-color: var(--bg-dark) !important;
      }
      
      body.dark-mode .tabset-panel .tab-content {
        background-color: var(--bg-dark) !important;
      }
      
      /* Shiny input panel */
      body.dark-mode .shiny-input-panel {
        background-color: var(--card-bg-dark) !important;
        color: #f0f0f0 !important;
      }
      
      /* Form groups */
      body.dark-mode .form-group {
        color: #f0f0f0 !important;
      }
      
      body.dark-mode .form-group * {
        color: #f0f0f0 !important;
      }
      
      body.dark-mode .form-group label {
        color: #e0e0e0 !important;
      }
      
      /* Shiny bound output */
      body.dark-mode .shiny-bound-output {
        background-color: transparent !important;
        color: #f0f0f0 !important;
      }
      
      body.dark-mode .shiny-bound-output * {
        color: #f0f0f0 !important;
      }
      
      /* Data table outputs */
      body.dark-mode .shiny-bound-output .dataTables_wrapper {
        background-color: var(--card-bg-dark) !important;
      }
      
      /* Ensure all text in module view is visible */
      body.dark-mode .module-view *:not(script):not(style) {
        color: inherit;
      }
      
      body.dark-mode .module-view h1,
      body.dark-mode .module-view h2,
      body.dark-mode .module-view h3,
      body.dark-mode .module-view h4,
      body.dark-mode .module-view h5,
      body.dark-mode .module-view h6 {
        color: #f5f5f5 !important;
      }
      
      /* Placeholder text */
      body.dark-mode input::placeholder,
      body.dark-mode textarea::placeholder {
        color: #888 !important;
        opacity: 1 !important;
      }
      
      /* Focus states */
      body.dark-mode input:focus,
      body.dark-mode select:focus,
      body.dark-mode textarea:focus {
        border-color: #E67E58 !important;
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(230, 126, 88, 0.25) !important;
      }
      
      /* Disabled inputs */
      body.dark-mode input:disabled,
      body.dark-mode select:disabled,
      body.dark-mode textarea:disabled {
        background-color: #2a2a2a !important;
        color: #888 !important;
        opacity: 0.6 !important;
      }

/* ================================================================
   THANH TIÊU ĐỀ MODULE (.module-header.centered) — DARK MODE
   Nền sáng #F7F8FA → tối, chữ đen → sáng
================================================================ */
body.dark-mode .module-header.centered {
  background-color: #1f1f1f !important;
  border-bottom: 1px solid rgba(255,255,255,0.15) !important;
}
body.dark-mode .module-header.centered .module-title {
  color: #f0f0f0 !important;
}
/* Nền tổng thể của module-view */
body.dark-mode .module-view {
  background-color: #181818 !important;
}

/* ================================================================
   MODULE QUẢN LÝ SỐ LIỆU — LIGHT MODE BASE STYLES
   (thay thế inline styles đã xóa khỏi server_data_cards.R)
================================================================ */

.dm-upload-success {
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 15px;
}
.dm-upload-icon  { color: #28a745; }
.dm-upload-title { color: #155724; }
.dm-upload-text  { color: #155724; }

.dm-vartype-info {
  background-color: #e3f2fd;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
}
.dm-vartype-value { color: #1565c0; }

/* ================================================================
   MODULE QUẢN LÝ SỐ LIỆU — DARK MODE
   Tăng contrast để box "Tải dữ liệu" hiển thị rõ ràng
================================================================ */

/* Tab chính (TẢI DỮ LIỆU / QUẢN LÝ DỮ LIỆU)
   inactive: chữ xám sáng; active: chữ đỏ đun in đậm, nền tối */
body.dark-mode #data_management_view .nav-tabs {
  background-color: #1a1a1a !important;
  border-bottom: 2px solid rgba(255,255,255,0.2) !important;
}
body.dark-mode #data_management_view .nav-tabs .nav-link,
body.dark-mode #data_management_view .nav-tabs > li > a {
  background-color: #222222 !important;
  border-color: transparent !important;
  border-radius: 4px 4px 0 0 !important;
}
/* active: nền trắng + chữ đỏ đun #894242 in đậm — giống hệt light mode */
body.dark-mode #data_management_view .nav-tabs .nav-link.active,
body.dark-mode #data_management_view .nav-tabs > li.active > a {
  background-color: #ffffff !important;
  border-bottom-color: #ffffff !important;
}
body.dark-mode #data_management_view .nav-tabs .nav-link:hover,
body.dark-mode #data_management_view .nav-tabs > li > a:hover {
  background-color: #2a2a2a !important;
}
/* Tab label "TẢI DỮ LIỆU" — inactive xám sáng, active đỏ đun in đậm */
body.dark-mode #data_management_view .nav-tabs > li > a .ds-tab-label {
  color: #bdbdbd !important;
  font-weight: 500 !important;
}
body.dark-mode #data_management_view .nav-tabs > li.active > a .ds-tab-label {
  color: #894242 !important;
  font-weight: 700 !important;
}

/* Tab content: nền tối hơn để box nổi bật */
body.dark-mode #data_management_view .tab-content,
body.dark-mode #data_management_view .tab-pane {
  background-color: #1a1a1a !important;
}

/* Panel/sidebar container */
body.dark-mode #data_management_view .sidebarPanel,
body.dark-mode #data_management_view .mainPanel,
body.dark-mode #data_management_view [class*="sidebar"],
body.dark-mode #data_management_view [class*="panel"] {
  background-color: #1a1a1a !important;
}

/* (Box header/border/body cho data_management được chuẩn hóa ở block
   "BOX DARK MODE — CHUẨN HÓA" cuối file, giữ header màu như light mode) */

/* Upload success box — dark mode */
body.dark-mode .dm-upload-success {
  background-color: #1a3a28 !important;
  border-color: #2d5a3d !important;
}
body.dark-mode .dm-upload-icon  { color: #4caf7d !important; }
body.dark-mode .dm-upload-title { color: #a8dfc0 !important; }
body.dark-mode .dm-upload-text  { color: #a8dfc0 !important; }

/* Kiểu biến info box — dark mode */
body.dark-mode .dm-vartype-info {
  background-color: #1a2a3a !important;
}
body.dark-mode .dm-vartype-value { color: #90caf9 !important; }
body.dark-mode .dm-vartype-info b { color: #c8c8c8 !important; }

/* Tab pills con trong .dm-module-quanly */
body.dark-mode .dm-module-quanly .nav-pills > li > a,
body.dark-mode .dm-module-quanly .nav-tabs > li > a,
body.dark-mode .dm-module-quanly .tab-content .nav-pills > li > a,
body.dark-mode .dm-module-quanly .tab-content .nav-tabs > li > a {
  background-color: transparent !important;
  color: #c0c0c0 !important;
}
body.dark-mode .dm-module-quanly .nav-pills > li.active > a,
body.dark-mode .dm-module-quanly .nav-pills > li.active > a:hover,
body.dark-mode .dm-module-quanly .nav-pills > li.active > a:focus,
body.dark-mode .dm-module-quanly .nav-tabs > li.active > a,
body.dark-mode .dm-module-quanly .nav-tabs > li.active > a:hover,
body.dark-mode .dm-module-quanly .nav-tabs > li.active > a:focus {
  background-color: #2c2c2c !important;
  color: #d4695c !important;
  font-weight: 700 !important;
}
body.dark-mode .dm-module-quanly .nav-pills > li > a:hover,
body.dark-mode .dm-module-quanly .nav-tabs > li > a:hover {
  background-color: #333333 !important;
  color: #e0e0e0 !important;
}

/* rhandsontable */
body.dark-mode .handsontable,
body.dark-mode .htCore,
body.dark-mode .wtHolder,
body.dark-mode .handsontable table {
  background-color: #2c2c2c !important;
  color: #f0f0f0 !important;
}
body.dark-mode .handsontable th {
  background-color: #383838 !important;
  color: #e0e0e0 !important;
  border-color: rgba(255,255,255,0.15) !important;
}
body.dark-mode .handsontable td {
  background-color: #2c2c2c !important;
  color: #f0f0f0 !important;
  border-color: rgba(255,255,255,0.1) !important;
}
body.dark-mode .handsontable tr:nth-child(even) td {
  background-color: #323232 !important;
}
body.dark-mode .handsontable td.current,
body.dark-mode .handsontable td.area {
  background-color: #3d4f3d !important;
}
body.dark-mode .handsontable .colHeader {
  color: #e0e0e0 !important;
}
body.dark-mode .ht_master .wtHolder {
  background-color: #2c2c2c !important;
}

/* ================================================================
   MÀU CAM CHỦ ĐẠO (#E67E58) — GIỮ NGUYÊN KHI DARK MODE
   Các rule * quá rộng có thể override màu cam → cần ưu tiên lại
================================================================ */

body.dark-mode .text-accent,
body.dark-mode .text-orange,
body.dark-mode [class*="accent"] {
  color: #E67E58 !important;
}

/* Bảo vệ màu cam trong box-body (bị override bởi .box-body * { color: #f0f0f0 }) */
body.dark-mode .box-body .text-accent,
body.dark-mode .box-body .text-orange,
body.dark-mode .box-body [style*="color: #E67E58"],
body.dark-mode .box-body [style*="color:#E67E58"],
body.dark-mode .box-body [style*="color: rgb(230, 126, 88)"] {
  color: #E67E58 !important;
}

/* ================================================================
   QUY TẮC CHUNG — NGHỊCH ĐẢO NỀN/CHỮ TRONG DARK MODE
   • Nền trắng/sáng → tối
   • Chữ đen/tối → trắng/sáng
   • Chữ trắng trên nền sáng → tối (tránh invisible)
   • Màu cam giữ nguyên
================================================================ */

/* Chữ trắng hardcoded → đổi về tối, NHƯNG chỉ khi element KHÔNG có
   background riêng (nút/badge màu có background → giữ chữ trắng).
   :not([style*="background"]) bảo vệ nút "Thoát", badge, v.v. */
body.dark-mode [style*="color: white"]:not([style*="background"]),
body.dark-mode [style*="color:white"]:not([style*="background"]),
body.dark-mode [style*="color: #fff"]:not([style*="background"]),
body.dark-mode [style*="color:#fff"]:not([style*="background"]),
body.dark-mode [style*="color: #ffffff"]:not([style*="background"]),
body.dark-mode [style*="color:#ffffff"]:not([style*="background"]) {
  color: #1a1a1a !important;
}

/* Chữ đen hardcoded → trắng (cũng chỉ khi không có background riêng) */
body.dark-mode [style*="color: black"]:not([style*="background"]),
body.dark-mode [style*="color:black"]:not([style*="background"]),
body.dark-mode [style*="color: #000"]:not([style*="background"]),
body.dark-mode [style*="color:#000"]:not([style*="background"]) {
  color: #f0f0f0 !important;
}

/* ================================================================
   GIỮ NGUYÊN MÀU CAM (#E67E58) VÀ ĐỎ — OVERRIDE SAU CÁC RULE *
   Rule body.dark-mode .box-body * { color: #f0f0f0 } đang nuốt màu
================================================================ */

/* Cam (#E67E58 và các biến thể) */
body.dark-mode [style*="color: #E67E58"],
body.dark-mode [style*="color:#E67E58"],
body.dark-mode [style*="color: #e67e58"],
body.dark-mode [style*="color:#e67e58"],
body.dark-mode .text-accent,
body.dark-mode .version-text,
body.dark-mode .logo-version { color: #E67E58 !important; }

/* Đỏ (màu cảnh báo/lỗi thường gặp) */
body.dark-mode [style*="color: red"],
body.dark-mode [style*="color:red"],
body.dark-mode [style*="color: #dc3545"],
body.dark-mode [style*="color:#dc3545"],
body.dark-mode [style*="color: #e74c3c"],
body.dark-mode [style*="color:#e74c3c"],
body.dark-mode .text-danger { color: #ff6b6b !important; }

/* Xanh lá (thành công) */
body.dark-mode [style*="color: #28a745"],
body.dark-mode [style*="color:#28a745"],
body.dark-mode [style*="color: green"],
body.dark-mode .text-success { color: #4caf7d !important; }

/* Xanh dương (info/link) */
body.dark-mode [style*="color: #007bff"],
body.dark-mode [style*="color:#007bff"],
body.dark-mode [style*="color: #3498db"],
body.dark-mode .text-info,
body.dark-mode .text-primary { color: #6eb3f7 !important; }

/* ================================================================
   CHỮ XÁM → XÁM SÁNG HƠN (nổi bật trên nền đen)
   Các class text-muted, help-block thường dùng grey
================================================================ */

body.dark-mode .text-muted,
body.dark-mode .help-block,
body.dark-mode .help-text,
body.dark-mode small,
body.dark-mode .small { color: #a0a0a0 !important; }

/* Override cho màu xám hardcoded (phổ biến trong Shiny) */
body.dark-mode [style*="color: #666"],
body.dark-mode [style*="color:#666"],
body.dark-mode [style*="color: #6b7280"],
body.dark-mode [style*="color: #777"],
body.dark-mode [style*="color: #888"],
body.dark-mode [style*="color: #999"] {
  color: #a8a8a8 !important;
}

/* ================================================================
   LOGO — GIỮ NGUYÊN (img không bị ảnh hưởng bởi color rule,
   nhưng nếu có filter thì bỏ)
================================================================ */

body.dark-mode img,
body.dark-mode .logo img,
body.dark-mode .module-header img,
body.dark-mode .agent-icon img,
body.dark-mode .navbar-brand img {
  filter: none !important;
}

/* ================================================================
   NỀN SÁNG → TỐI (tương ứng độ đậm nhạt)
   off-white nhạt → dark nhạt hơn, trắng hoàn toàn → dark nhất
================================================================ */

body.dark-mode [style*="background-color: #f8f9fa"],
body.dark-mode [style*="background-color:#f8f9fa"] {
  background-color: #242424 !important;
}
body.dark-mode [style*="background-color: #f5f5f5"],
body.dark-mode [style*="background-color:#f5f5f5"] {
  background-color: #2a2a2a !important;
}
body.dark-mode [style*="background-color: #eeeeee"],
body.dark-mode [style*="background-color:#eeeeee"],
body.dark-mode [style*="background-color: #e8e8e8"] {
  background-color: #303030 !important;
}

/* ================================================================
   OVERRIDE CÓ ĐỘ ƯU TIÊN CAO (ID) — phải đặt CUỐI để thắng các rule rộng
================================================================ */

/* Navbar links (Trang chủ, Standard, Plus, Pro...) → trắng trong dark mode.
   #navbar-menu (id) thắng rule a:not(...) màu xanh ở trên. */
body.dark-mode #navbar-menu a,
html.dark-mode #navbar-menu a {
  color: #f0f0f0 !important;
}
body.dark-mode #navbar-menu a:hover,
html.dark-mode #navbar-menu a:hover {
  color: #ffffff !important;
}

/* "3.0" cạnh DATASTAT → giữ màu cam */
body.dark-mode .navbar-logo .logo-version,
html.dark-mode .navbar-logo .logo-version {
  color: #E67E58 !important;
}

/* Hero title accent "Phân tích dữ liệu" → giữ màu cam thương hiệu */
body.dark-mode .ds-hero-accent,
html.dark-mode .ds-hero-accent {
  color: #E67E58 !important;
}

/* Nút "Thoát" → giữ nền đỏ + chữ trắng (thắng rule .btn-default nền xám) */
body.dark-mode #logout,
html.dark-mode #logout {
  background-color: #ef4444 !important;
  color: #ffffff !important;
  border-color: #ef4444 !important;
}
body.dark-mode #logout:hover,
html.dark-mode #logout:hover {
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
}

/* ================================================================
   BOX DARK MODE — CHUẨN HÓA (đặt CUỐI để thắng mọi rule phía trên)
   • Header + viền trên: GIỮ màu trạng thái như light mode, chữ trắng
   • Thân box: nền tối ĐỒNG NHẤT (#2b2b2b), không bị 2 màu
================================================================ */

/* Thân box nền tối đồng nhất */
body.dark-mode .box {
  background-color: #2b2b2b !important;
  border: 1px solid #4a4a4a !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35) !important;
}
body.dark-mode .box-body,
body.dark-mode .box-footer {
  background-color: #2b2b2b !important;
  color: #e8e8e8 !important;
}

/* Header + viền trên: TÔNG TRẦM (muted) hợp dark mode, chữ trắng —
   KHÔNG dùng xanh/đỏ tươi của AdminLTE */
body.dark-mode .box.box-primary  { border-top-color: #4a4540 !important; }
body.dark-mode .box.box-danger   { border-top-color: #6e413d !important; }
body.dark-mode .box.box-warning  { border-top-color: #6e5a3d !important; }
body.dark-mode .box.box-info     { border-top-color: #3d4a55 !important; }
body.dark-mode .box.box-success  { border-top-color: #3d5547 !important; }

body.dark-mode .box.box-solid.box-primary  > .box-header { background-color: #4a4540 !important; color: #fff !important; }
body.dark-mode .box.box-solid.box-danger   > .box-header { background-color: #6e413d !important; color: #fff !important; }
body.dark-mode .box.box-solid.box-warning  > .box-header { background-color: #6e5a3d !important; color: #fff !important; }
body.dark-mode .box.box-solid.box-info     > .box-header { background-color: #3d4a55 !important; color: #fff !important; }
body.dark-mode .box.box-solid.box-success  > .box-header { background-color: #3d5547 !important; color: #fff !important; }

body.dark-mode .box-header { border-bottom-color: rgba(255,255,255,0.12) !important; }
body.dark-mode .box-solid > .box-header .box-title,
body.dark-mode .box-solid > .box-header,
body.dark-mode .box-solid > .box-header * { color: #ffffff !important; }

/* Tránh 2 màu: panel/container con trong box → trong suốt (đồng nhất với body) */
body.dark-mode .box-body .shiny-input-container,
body.dark-mode .box-body .form-group,
body.dark-mode .box-body .well,
body.dark-mode .box-body .sidebarPanel,
body.dark-mode .box-body .mainPanel,
body.dark-mode .box-body .row,
body.dark-mode .box-body .fluid-row {
  background-color: transparent !important;
}

/* Sub-tabs (Xem & Sửa số liệu, Thông tin, Giá trị...) — thắng rule #id agent-grids
   inactive: xám sáng; active: đỏ đun in đậm, nền tối (không phải nền trắng) */
body.dark-mode #data_management_view .nav-pills > li > a,
body.dark-mode #data_management_view .nav-tabs:not(.nav-justified) > li > a,
body.dark-mode #descriptive_view .nav-pills > li > a,
body.dark-mode #data_transform_view .nav-pills > li > a {
  background-color: transparent !important;
  color: #d6d6d6 !important;
}
body.dark-mode #data_management_view .nav-pills > li > a:hover,
body.dark-mode #descriptive_view .nav-pills > li > a:hover,
body.dark-mode #data_transform_view .nav-pills > li > a:hover {
  background-color: #333333 !important;
  color: #f0f0f0 !important;
}
body.dark-mode #data_management_view .nav-pills > li.active > a,
body.dark-mode #data_management_view .nav-pills > li.active > a:hover,
body.dark-mode #data_management_view .nav-pills > li.active > a:focus,
body.dark-mode #descriptive_view .nav-pills > li.active > a,
body.dark-mode #descriptive_view .nav-pills > li.active > a:hover,
body.dark-mode #descriptive_view .nav-pills > li.active > a:focus,
body.dark-mode #data_transform_view .nav-pills > li.active > a,
body.dark-mode #data_transform_view .nav-pills > li.active > a:hover,
body.dark-mode #data_transform_view .nav-pills > li.active > a:focus {
  background-color: #2c2c2c !important;
  color: #d4695c !important;
  font-weight: 700 !important;
}

/* Badge "STANDARD" cạnh tên module → hộp TRẮNG chữ ĐEN trong dark mode */
body.dark-mode #descriptive_view .module-title::after,
body.dark-mode #data_management_view .module-title::after,
body.dark-mode #data_transform_view .module-title::after,
body.dark-mode #comau_view .module-title::after {
  background: #ffffff !important;
  color: #1a1a1a !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
}

/* ================================================================
   DATATABLE (DT) — DARK MODE
   • Pagination/Search/Info: chữ trắng (không để xanh do rule link)
   • Bảng: nền đồng nhất với box (#2b2b2b)
================================================================ */

/* Nền bảng đồng nhất */
body.dark-mode .dataTables_wrapper,
body.dark-mode table.dataTable,
body.dark-mode table.dataTable tbody,
body.dark-mode table.dataTable tbody tr,
body.dark-mode table.dataTable tbody td,
body.dark-mode table.dataTable thead th,
body.dark-mode table.dataTable tfoot th {
  background-color: #2b2b2b !important;
  color: #e8e8e8 !important;
  border-color: rgba(255,255,255,0.12) !important;
}
body.dark-mode table.dataTable thead th {
  color: #ffffff !important;
}
body.dark-mode table.dataTable tbody tr:hover td {
  background-color: #353535 !important;
}

/* Info "Showing..." + Search label → trắng */
body.dark-mode .dataTables_info,
body.dark-mode .dataTables_filter,
body.dark-mode .dataTables_filter label,
body.dark-mode .dataTables_length,
body.dark-mode .dataTables_length label {
  color: #e8e8e8 !important;
}

/* Ô Search input */
body.dark-mode .dataTables_filter input {
  background-color: #3a3a3a !important;
  color: #f0f0f0 !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
}

/* Pagination: nút Previous/Next/số trang → CHỮ TRẮNG (không xanh).
   Thắng rule a:not(.btn) màu xanh nhờ class .paginate_button + .dataTables_wrapper */
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button,
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
body.dark-mode .dataTables_wrapper .dataTables_paginate a {
  color: #e8e8e8 !important;
}
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: #ffffff !important;
  background: #3a3a3a !important;
  border-color: rgba(255,255,255,0.3) !important;
}
/* Trang hiện tại → giữ nền cam thương hiệu, chữ trắng */
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  color: #ffffff !important;
  background: #E67E58 !important;
  border-color: #E67E58 !important;
}

/* ================================================================
   ĐỒNG NHẤT NỀN TRONG BOX-BODY (tránh 2 màu trong khu vực upload)
   Mọi container con → trong suốt, chỉ box-body giữ 1 màu nền
================================================================ */
body.dark-mode #data_management_view .box-body {
  background-color: #2b2b2b !important;
}
body.dark-mode #data_management_view .box-body > div,
body.dark-mode #data_management_view .box-body .form-group,
body.dark-mode #data_management_view .box-body .shiny-input-container,
body.dark-mode #data_management_view .box-body .input-group,
body.dark-mode #data_management_view .box-body .tab-content,
body.dark-mode #data_management_view .box-body [class*="conditional"] {
  background-color: transparent !important;
}