/* ========================================================
   LQDOJ MODERN THEME - NEXA DARK THEME (v17.0)
   Table design matching User Reference Image 2:
   - Pure Black Canvas & Dark Charcoal Rows
   - White bold headers with white horizontal divider line
   - Horizontal dividers under rows, NO vertical borders
   - Neon Sky Blue (#60A5FA / #38BDF8) problem & code links
   - Lavender (#A5B4FC) categories with '#' prefix
   - Golden Yellow (#FFC000) bold points
   - Vibrant Neon Green (#34D399) bold AC% and AC counts
   - 100% Zero Navy, Zero-Jitter Sidebar
   ======================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ===== 1. DARK CANVAS & BASE (PURE BLACK - HOÀN TOÀN KHÔNG DÙNG NAVY) ===== */
html {
    background-color: #000000 !important;
    padding: 0 !important;
    margin: 0 !important;
}

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    background-color: #000000 !important;
    color: #E4E4E7 !important;
    padding: 58px 0 0 0 !important;
    margin: 0 !important;
    min-height: 100vh !important;
    -webkit-font-smoothing: antialiased !important;
}

code, pre, .mono, samp, kbd {
    font-family: 'JetBrains Mono', monospace !important;
}

/* ===== 2. FIXED TOP NAVBAR TRÊN DARK MODE (PURE BLACK) ===== */
.navbar,
#navigation,
#nav-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 58px !important;
    background: #000000 !important;
    background-color: #000000 !important;
    border-bottom: 1px solid #1F1F1F !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.8) !important;
    z-index: 1000 !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

#nav-list {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 16px !important;
    list-style: none !important;
    gap: 8px !important;
}

#nav-list li {
    display: inline-flex !important;
    align-items: center !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.nav-icon-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 8px !important;
    background: #1A1A1A !important;
    border: 1px solid #2A2A2A !important;
    position: relative !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
    text-decoration: none !important;
}

.nav-icon-link:hover {
    background: #1A1A1A !important;
    border-color: #333333 !important;
}

.nav-icon-link i {
    font-size: 1.15rem !important;
    transition: transform 0.15s ease !important;
}

.nav-icon-link:hover i {
    transform: scale(1.1) !important;
}

.nav-icon-link::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #181818 !important;
    color: #FFFFFF !important;
    border: 1px solid #2A2A2A !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    padding: 4px 8px !important;
    border-radius: 5px !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5) !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 9999 !important;
}

.nav-icon-link:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Navbar buttons: each has its OWN color - dark bg, light icon */
/* Home - Blue */
.nav-home.nav-icon-link, a.nav-home.nav-icon-link, #nav-list .nav-home { background: #1E3A8A !important; border-color: #1E40AF !important; }
#nav-list .nav-home i, #nav-list a.nav-home i, .nav-home .nav-icon-container i { color: #93C5FD !important; }
.nav-home.nav-icon-link:hover, a.nav-home.nav-icon-link:hover { background: #1D4ED8 !important; }

/* Problems - Green */
.nav-problems.nav-icon-link, a.nav-problems.nav-icon-link, #nav-list .nav-problems { background: #064E3B !important; border-color: #047857 !important; }
#nav-list .nav-problems i, #nav-list a.nav-problems i, .nav-problems .nav-icon-container i { color: #6EE7B7 !important; }
.nav-problems.nav-icon-link:hover, a.nav-problems.nav-icon-link:hover { background: #047857 !important; }

/* Submit - Purple */
.nav-submit.nav-icon-link, a.nav-submit.nav-icon-link, #nav-list .nav-submit { background: #4C1D95 !important; border-color: #6D28D9 !important; }
#nav-list .nav-submit i, #nav-list a.nav-submit i, .nav-submit .nav-icon-container i { color: #C4B5FD !important; }
.nav-submit.nav-icon-link:hover, a.nav-submit.nav-icon-link:hover { background: #5B21B6 !important; }

/* User - Amber */
.nav-user.nav-icon-link, a.nav-user.nav-icon-link, #nav-list .nav-user { background: #78350F !important; border-color: #92400E !important; }
#nav-list .nav-user i, #nav-list a.nav-user i, .nav-user .nav-icon-container i { color: #FCD34D !important; }
.nav-user.nav-icon-link:hover, a.nav-user.nav-icon-link:hover { background: #92400E !important; }

/* Contest - Red */
.nav-contest.nav-icon-link, a.nav-contest.nav-icon-link, #nav-list .nav-contest { background: #7F1D1D !important; border-color: #991B1B !important; }
#nav-list .nav-contest i, #nav-list a.nav-contest i, .nav-contest .nav-icon-container i { color: #FCA5A5 !important; }
.nav-contest.nav-icon-link:hover, a.nav-contest.nav-icon-link:hover { background: #991B1B !important; }

/* Chat - Cyan */
.nav-chat.nav-icon-link, a.nav-chat.nav-icon-link, #nav-list .nav-chat { background: #0C4A6E !important; border-color: #075985 !important; }
#nav-list .nav-chat i, #nav-list a.nav-chat i, .nav-chat .nav-icon-container i { color: #7DD3FC !important; }
.nav-chat.nav-icon-link:hover, a.nav-chat.nav-icon-link:hover { background: #075985 !important; }

/* About/Info - Slate */
.nav-about.nav-icon-link, a.nav-about.nav-icon-link, #nav-list .nav-about { background: #1E293B !important; border-color: #334155 !important; }
#nav-list .nav-about i, #nav-list a.nav-about i, .nav-about .nav-icon-container i { color: #94A3B8 !important; }
.nav-about.nav-icon-link:hover, a.nav-about.nav-icon-link:hover { background: #334155 !important; }

/* Generic fallback */
.nav-icon-link:not(.nav-home):not(.nav-problems):not(.nav-submit):not(.nav-user):not(.nav-contest):not(.nav-chat):not(.nav-about) {
    background: #1E293B !important; border-color: #334155 !important;
}
.nav-icon-link:not(.nav-home):not(.nav-problems):not(.nav-submit):not(.nav-user):not(.nav-contest):not(.nav-chat):not(.nav-about) i {
    color: #94A3B8 !important;
}

/* Right-side nav icons - color-matched */
#nav-darkmode-icon { background: #78350F !important; border-color: #92400E !important; color: #FCD34D !important; }
#nav-darkmode-icon:hover { background: #92400E !important; }
#nav-lang-icon { background: #1E293B !important; border-color: #334155 !important; color: #94A3B8 !important; }
#nav-lang-icon:hover { background: #334155 !important; }
#notification { background: #7F1D1D !important; border-color: #991B1B !important; color: #FCA5A5 !important; }
#notification:hover { background: #991B1B !important; }
#chat-icon { background: #0C4A6E !important; border-color: #075985 !important; color: #7DD3FC !important; }
#chat-icon:hover { background: #075985 !important; }

#nav-lang-icon,
#nav-darkmode-icon,
#notification,
#chat-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important;
    background: #111111 !important;
    border: 1px solid #222222 !important;
    color: #D4D4D8 !important;
    border-radius: 8px !important;
    padding: 0 10px !important;
}

#nav-darkmode-icon { color: #FBBF24 !important; }

/* ===== 3. LAYOUT CỘT DARK MODE (PURE BLACK BACKGROUND) ===== */
#page-container {
    max-width: 1440px !important;
    margin: 0 auto !important;
    padding: 16px 20px !important;
    background: #000000 !important;
    background-color: #000000 !important;
    border: none !important;
    box-shadow: none !important;
    min-height: calc(100vh - 120px) !important;
    box-sizing: border-box !important;
}

#content, #content-body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    border: none !important;
    background: #000000 !important;
    background-color: #000000 !important;
}

#three-col-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 20px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* ===== 4. SIDEBAR ITEMS & VIBRANT ICONS (DARK MODE) - ZERO JITTER ===== */
.left-sidebar {
    position: sticky !important;
    top: 74px !important;
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    flex: 0 0 200px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    contain: layout !important;
}

.left-sidebar-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 14px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    background: #111111 !important;
    border: 1px solid #222222 !important;
    color: #D4D4D8 !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
    box-sizing: border-box !important;
    transform: none !important;
    contain: layout !important;
}

.left-sidebar-item:hover {
    background: #1A1A1A !important;
    color: #FFFFFF !important;
    border-color: #333333 !important;
    transform: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 14px !important;
}

.left-sidebar-item .sidebar-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    min-width: 22px !important;
    font-size: 1.05rem !important;
    background: transparent !important;
    flex-shrink: 0 !important;
}

.left-sidebar-item .sidebar-text {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    flex: 1 1 auto !important;
}

/* Sidebar tab neon colors */
#detail-tab .sidebar-icon i, .left-sidebar-item:has(.fa-info-circle) .sidebar-icon i { color: #38BDF8 !important; }
#detail-tab.active, .left-sidebar-item.active:has(.fa-info-circle) {
    background: rgba(56, 189, 248, 0.15) !important; border-color: #0284C7 !important; border-left: 4px solid #38BDF8 !important; color: #FFFFFF !important;
}

#problems-tab .sidebar-icon i, .left-sidebar-item:has(.fa-question-circle) .sidebar-icon i { color: #34D399 !important; }
#problems-tab.active, .left-sidebar-item.active:has(.fa-question-circle) {
    background: rgba(52, 211, 153, 0.15) !important; border-color: #059669 !important; border-left: 4px solid #34D399 !important; color: #FFFFFF !important;
}

#submissions-tab .sidebar-icon i, .left-sidebar-item:has(.fa-code) .sidebar-icon i { color: #C084FC !important; }
#submissions-tab.active, .left-sidebar-item.active:has(.fa-code) {
    background: rgba(192, 132, 252, 0.15) !important; border-color: #7C3AED !important; border-left: 4px solid #C084FC !important; color: #FFFFFF !important;
}

#ranking-tab .sidebar-icon i, #final_ranking-tab .sidebar-icon i, .left-sidebar-item:has(.fa-bar-chart) .sidebar-icon i, .left-sidebar-item:has(.fa-trophy) .sidebar-icon i { color: #FBBF24 !important; }
#ranking-tab.active, #final_ranking-tab.active, .left-sidebar-item.active:has(.fa-bar-chart), .left-sidebar-item.active:has(.fa-trophy) {
    background: rgba(251, 191, 36, 0.15) !important; border-color: #D97706 !important; border-left: 4px solid #FBBF24 !important; color: #FFFFFF !important;
}

#participation-tab .sidebar-icon i, .left-sidebar-item:has(.fa-users) .sidebar-icon i { color: #60A5FA !important; }
#participation-tab.active, .left-sidebar-item.active:has(.fa-users) {
    background: rgba(96, 165, 250, 0.15) !important; border-color: #2563EB !important; border-left: 4px solid #60A5FA !important; color: #FFFFFF !important;
}

#stats-tab .sidebar-icon i, .left-sidebar-item:has(.fa-pie-chart) .sidebar-icon i { color: #2DD4BF !important; }
#stats-tab.active, .left-sidebar-item.active:has(.fa-pie-chart) {
    background: rgba(45, 212, 191, 0.15) !important; border-color: #0D9488 !important; border-left: 4px solid #2DD4BF !important; color: #FFFFFF !important;
}

#clone-tab .sidebar-icon i, .left-sidebar-item:has(.fa-clone) .sidebar-icon i { color: #818CF8 !important; }
#clone-tab.active, .left-sidebar-item.active:has(.fa-clone) {
    background: rgba(129, 140, 248, 0.15) !important; border-color: #4F46E5 !important; border-left: 4px solid #818CF8 !important; color: #FFFFFF !important;
}

#edit-tab .sidebar-icon i, .left-sidebar-item:has(.fa-edit) .sidebar-icon i { color: #FB923C !important; }
#edit-tab.active, .left-sidebar-item.active:has(.fa-edit) {
    background: rgba(251, 146, 60, 0.15) !important; border-color: #EA580C !important; border-left: 4px solid #FB923C !important; color: #FFFFFF !important;
}

#log-tab .sidebar-icon i, .left-sidebar-item:has(.fa-history) .sidebar-icon i { color: #A5B4FC !important; }
#log-tab.active, .left-sidebar-item.active:has(.fa-history) {
    background: rgba(165, 180, 252, 0.15) !important; border-color: #6366F1 !important; border-left: 4px solid #A5B4FC !important; color: #FFFFFF !important;
}

#review-tab .sidebar-icon i, .left-sidebar-item:has(.fa-clipboard-check) .sidebar-icon i { color: #FB923C !important; }
#review-tab.active, .left-sidebar-item.active:has(.fa-clipboard-check) {
    background: rgba(251, 146, 60, 0.15) !important; border-color: #EA580C !important; border-left: 4px solid #FB923C !important; color: #FFFFFF !important;
}

#admin-tab .sidebar-icon i, .left-sidebar-item:has(.fa-cog) .sidebar-icon i { color: #F43F5E !important; }
#admin-tab.active, .left-sidebar-item.active:has(.fa-cog) {
    background: rgba(244, 63, 94, 0.15) !important; border-color: #E11D48 !important; border-left: 4px solid #F43F5E !important; color: #FFFFFF !important;
}

#feed-tab .sidebar-icon i { color: #60A5FA !important; }
#feed-tab.active { background: rgba(37, 99, 235, 0.15) !important; border-color: #2563EB !important; border-left: 4px solid #60A5FA !important; color: #FFFFFF !important; }

#all_submissions_list-tab .sidebar-icon i { color: #C084FC !important; }
#all_submissions_list-tab.active { background: rgba(124, 58, 237, 0.15) !important; border-color: #7C3AED !important; border-left: 4px solid #C084FC !important; color: #FFFFFF !important; }

#list-tab:has(.fa-list) .sidebar-icon i, #list-tab.active:not(:has(.fa-trophy)) .sidebar-icon i { color: #34D399 !important; }
#list-tab:has(.fa-list).active, #list-tab.active:not(:has(.fa-trophy)) {
    background: rgba(5, 150, 105, 0.15) !important; border-color: #059669 !important; border-left: 4px solid #34D399 !important; color: #FFFFFF !important;
}

#add-tab .sidebar-icon i { color: #38BDF8 !important; }
#add-tab.active { background: rgba(2, 132, 199, 0.15) !important; border-color: #0284C7 !important; border-left: 4px solid #38BDF8 !important; color: #FFFFFF !important; }

/* ===== 5. CARDS & TABLES DARK MODE - EXACT MATCH TO IMAGE 2 ===== */
.middle-right-content {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: calc(100% - 220px) !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 20px !important;
    align-items: flex-start !important;
    box-sizing: border-box !important;
}

.middle-content {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
}

#content-left,
#content-left.problems,
#content-left.users,
#content-left.submission {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow-x: auto !important;
}

.sidebox,
.blog-sidebox,
.blog-box,
.feed-item,
.list-contest {
    background: #111111 !important;
    border: 1px solid #222222 !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important;
    overflow: hidden !important;
}

.sidebox h3,
.blog-sidebox h3 {
    background: #1A1A1A !important;
    color: #FFFFFF !important;
    border-bottom: 2px solid #262626 !important;
    padding: 13px 16px !important;
    margin: 0 !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
}

/* BẢNG BÀI TẬP DARK MODE: CHUẨN XÁC THEO ẢNH MẪU 2 (ZERO NAVY) */
.table,
#problem-table,
#contest-problems,
#users-table,
.submission-table {
    background: #000000 !important;
    background-color: #000000 !important;
    border: none !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    margin-bottom: 24px !important;
}

/* HÀNG TIÊU ĐỀ DARK MODE: CHỮ TRẮNG ĐẬM, ĐƯỜNG KẺ NGANG TRẮNG DÀY PHÍA DƯỚI, KHÔNG VIỀN DỌC */
.table th,
.table thead th,
#problem-table thead th,
#contest-problems thead th,
#users-table thead th,
.contest-ranking-page #users-table thead th {
    background: transparent !important;
    background-color: transparent !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    font-size: 0.9rem !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 2.5px solid #FFFFFF !important;
    padding: 10px 10px !important;
    text-transform: none !important;
    white-space: nowrap !important;
}

.table th a,
.table thead th a,
#problem-table thead th a,
#contest-problems thead th a,
#users-table thead th a,
.contest-ranking-page #users-table thead th a {
    color: #FFFFFF !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}

/* Header alignment matching data columns */
#problem-table thead th:nth-last-child(-n+3),
#contest-problems thead th:nth-last-child(-n+3),
.table thead th:nth-last-child(-n+3) {
    text-align: right !important;
}

/* CÁC Ô NỘI DUNG DARK MODE: ĐƯỜNG KẺ NGANG TRẮNG/XÁM, KHÔNG VIỀN DỌC */
.table td,
#users-table td,
#problem-table td,
#contest-problems td,
.contest-ranking-page #users-table td {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 2px solid #FFFFFF !important; /* Đường kẻ ngang phân cách hàng trên dark mode */
    padding: 12px 14px !important;
    vertical-align: middle !important;
    font-size: 0.95rem !important;
    white-space: nowrap !important;
    background: #000000 !important;
}

.table.striped tbody tr:nth-child(odd),
#problem-table tbody tr:nth-child(odd),
#contest-problems tbody tr:nth-child(odd),
#users-table tbody tr:nth-child(odd),
.submission-table tbody tr:nth-child(odd),
.table.striped tbody tr:nth-child(even),
#problem-table tbody tr:nth-child(even),
#contest-problems tbody tr:nth-child(even),
#users-table tbody tr:nth-child(even),
.submission-table tbody tr:nth-child(even) {
    background-color: #000000 !important;
    background: #000000 !important;
}

.table tbody tr:hover,
#users-table tbody tr:hover,
#problem-table tbody tr:hover,
#contest-problems tbody tr:hover,
.submission-table tbody tr:hover {
    background-color: #1A1A1A !important;
}

/* CỘT 1: STATUS (CĂN GIỮA, ICON ĐỎ/XANH TRÒN) */
.table th.solved,
#problem-table th.solved,
#contest-problems th.solved,
.table td[solved],
#problem-table td[solved],
#contest-problems td[solved] {
    text-align: center !important;
    width: 60px !important;
}

.solved-problem-color, .fa-check-circle {
    color: #10B981 !important;
    font-size: 1.25rem !important;
}

.attempted-problem-color, .unsolved-problem-color, .fa-minus-circle {
    color: #EF4444 !important;
    font-size: 1.25rem !important;
}

.fa-lock {
    color: #F59E0B !important;
    font-size: 1.25rem !important;
}

/* CỘT 2: BÀI TẬP (MÀU XANH DƯƠNG NEON #60A5FA, IN ĐẬM) */
#problem-table td.problem a,
#contest-problems td.problem a,
.table td.problem a,
td.problem a {
    color: #60A5FA !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

/* Bài tập column - left align */
#problem-table td.problem,
#contest-problems td.problem,
.table td.problem {
    text-align: left !important;
}

#problem-table td.problem a:hover,
#contest-problems td.problem a:hover,
.table td.problem a:hover {
    color: #93C5FD !important;
    text-decoration: underline !important;
}

/* CỘT 3: MÃ BÀI (MÀU XANH DƯƠNG NEON #60A5FA, IN ĐẬM) */
#problem-table td.pcode a,
#contest-problems td.pcode a,
.table td.pcode a,
td.pcode a,
.pcodecell {
    color: #60A5FA !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

/* Mã bài column - left align */
#problem-table td.pcode,
#contest-problems td.pcode,
.table td.pcode {
    text-align: left !important;
}

#problem-table td.pcode a:hover,
#contest-problems td.pcode a:hover,
.table td.pcode a:hover {
    color: #93C5FD !important;
    text-decoration: underline !important;
}

/* CỘT 4: LOẠI (#CODEFORCE, #VOI... MÀU TÍM/CHÀM SÁNG #A5B4FC, IN ĐẬM) */
#problem-table td.category,
#contest-problems td.category,
.table td.category,
.type-tag,
td.types {
    color: #A5B4FC !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    white-space: nowrap !important;
    text-align: left !important;
}

/* CỘT 5: ĐIỂM (MÀU VÀNG CAM #FFC000, IN ĐẬM) */
#problem-table td.p,
#problem-table td.points,
#contest-problems td.p,
#contest-problems td.points,
.table td.p,
.table td.points {
    color: #FFC000 !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    white-space: nowrap !important;
    background: transparent !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 2px solid #FFFFFF !important;
    box-shadow: none !important;
    padding: 8px 10px !important;
    text-align: right !important;
}

/* CỘT 6: AC% (MÀU XANH LÁ NEON #34D399, IN ĐẬM) */
#problem-table td.ac-rate,
#contest-problems td.ac-rate,
.table td.ac-rate {
    color: #34D399 !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    white-space: nowrap !important;
    background: transparent !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 2px solid #FFFFFF !important;
    box-shadow: none !important;
    padding: 8px 10px !important;
    text-align: right !important;
}

/* CỘT 7: AC (MÀU XANH LÁ NEON #34D399, IN ĐẬM) */
#problem-table td.users a,
#contest-problems td.users a,
.table td.users a,
#problem-table td.users,
#contest-problems td.users,
.table td.users {
    color: #34D399 !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    text-align: right !important;
}

#problem-table td.users a:hover,
#contest-problems td.users a:hover {
    text-decoration: underline !important;
}

/* ===== 6. TÌM KIẾM BÀI TẬP HIỆN ĐẠI (DARK MODE - ĐEN & XÁM ĐEN) ===== */
.right-sidebar,
#content-right,
#content-right.problems,
#content-right.users,
#content-right.submission {
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    flex: 0 0 280px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    box-sizing: border-box !important;
}

#filter-form {
    padding: 18px !important;
    background: #111111 !important;
    border: 1px solid #222222 !important;
    border-radius: 14px !important;
}

#filter-form input[type="text"],
#filter-form input[type="search"],
#filter-form select,
.ranking-search-input,
.contest-search-input {
    background: #181818 !important;
    border: 1px solid #2E2E2E !important;
    color: #FFFFFF !important;
    border-radius: 8px !important;
    padding: 9px 12px !important;
    font-size: 0.88rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    outline: none !important;
}

#filter-form input[type="text"]:focus,
#filter-form select:focus,
.ranking-search-input:focus {
    border-color: #2563EB !important;
    background: #1C1C1C !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3) !important;
}

#filter-form input::placeholder {
    color: #71717A !important;
}

#filter-form select option {
    background: #181818 !important;
    color: #FFFFFF !important;
}

#filter-form label {
    color: #D4D4D8 !important;
    font-size: 0.85rem !important;
    cursor: pointer !important;
}

#filter-form .filter-form-group {
    margin-top: 14px !important;
}

#filter-form .form-submit-group {
    display: flex !important;
    gap: 10px !important;
    margin-top: 16px !important;
    width: 100% !important;
}

#go.action-btn {
    flex: 1 1 50% !important;
    background: #2563EB !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    text-align: center !important;
    justify-content: center !important;
    height: 38px !important;
    padding: 0 !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35) !important;
}

#go.action-btn:hover {
    background: #1D4ED8 !important;
}

#random.action-btn {
    flex: 1 1 50% !important;
    background: #1E1E1E !important;
    color: #EDEDED !important;
    border: 1px solid #333333 !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    text-align: center !important;
    justify-content: center !important;
    height: 38px !important;
    padding: 0 !important;
    cursor: pointer !important;
}

#random.action-btn:hover {
    background: #282828 !important;
    color: #FFFFFF !important;
    border-color: #444444 !important;
}

#point-slider.noUi-target {
    background: #242424 !important;
    border: none !important;
    height: 6px !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    margin: 10px 0 !important;
}

#point-slider .noUi-connect {
    background: #2563EB !important;
}

#point-slider .noUi-handle {
    background: #FFFFFF !important;
    border: 2px solid #2563EB !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.6) !important;
    border-radius: 50% !important;
    width: 16px !important;
    height: 16px !important;
    top: -5px !important;
    right: -8px !important;
    cursor: pointer !important;
}

#point-slider .noUi-handle::before, #point-slider .noUi-handle::after { display: none !important; }

#point-slider .noUi-tooltip {
    background: #000000 !important;
    color: #FFFFFF !important;
    border: 1px solid #333333 !important;
    font-size: 0.75rem !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
}

/* ===== 7. RATING & USERNAME TRÊN DARK MODE (GIỮ NGUYÊN MÀU RATING) ===== */
.rate-candidate-master,
.rate-candidate-master a,
.rate-candidate-master a:visited,
.rate-candidate-master a:hover,
.user-name .rate-candidate-master a,
.user-name span.rate-candidate-master a,
#users-table .rate-candidate-master a,
#users-table td.user-name .rate-candidate-master a,
.contest-ranking-page #users-table .rate-candidate-master a,
.contest-ranking-page #users-table td.user-name .rate-candidate-master a,
span.rate-candidate-master a,
span.rate-candidate-master {
    color: #E879F9 !important;
    font-weight: 700 !important;
}

.rate-grandmaster,
.rate-grandmaster a,
.rate-grandmaster a:visited,
.rate-grandmaster a:hover,
.user-name .rate-grandmaster a,
.user-name span.rate-grandmaster a,
#users-table .rate-grandmaster a,
#users-table td.user-name .rate-grandmaster a,
.contest-ranking-page #users-table .rate-grandmaster a,
.contest-ranking-page #users-table td.user-name .rate-grandmaster a,
span.rate-grandmaster a,
span.rate-grandmaster {
    color: #FB7185 !important;
    font-weight: 700 !important;
}

.rate-target,
.rate-target a,
.rate-target a:visited,
.rate-target a:hover,
.user-name .rate-target a,
.user-name span.rate-target a,
#users-table .rate-target a,
#users-table td.user-name .rate-target a,
.contest-ranking-page #users-table .rate-target a,
.contest-ranking-page #users-table td.user-name .rate-target a,
span.rate-target a,
span.rate-target {
    color: #F87171 !important;
    font-weight: 700 !important;
}

.rate-master,
.rate-master a,
.rate-master a:visited,
.rate-master a:hover,
.user-name .rate-master a,
.user-name span.rate-master a,
#users-table .rate-master a,
#users-table td.user-name .rate-master a,
.contest-ranking-page #users-table .rate-master a,
.contest-ranking-page #users-table td.user-name .rate-master a,
span.rate-master a,
span.rate-master {
    color: #FB923C !important;
    font-weight: 700 !important;
}

.rate-expert,
.rate-expert a,
.rate-expert a:visited,
.rate-expert a:hover,
.user-name .rate-expert a,
.user-name span.rate-expert a,
#users-table .rate-expert a,
#users-table td.user-name .rate-expert a,
.contest-ranking-page #users-table .rate-expert a,
.contest-ranking-page #users-table td.user-name .rate-expert a,
span.rate-expert a,
span.rate-expert {
    color: #60A5FA !important;
    font-weight: 700 !important;
}

/* ===== 8. FOOTER CỐ ĐỊNH Ở ĐÁY, KHÔNG ĐÈ PHÂN TRANG (DARK MODE) ===== */
#footer {
    position: static !important;
    margin-top: 40px !important;
    margin-bottom: 0 !important;
    padding: 24px 0 !important;
    background: #000000 !important;
    background-color: #000000 !important;
    border-top: 1px solid #1F1F1F !important;
    color: #71717A !important;
    font-size: 0.85rem !important;
    width: 100% !important;
    clear: both !important;
}

/* ===== 9. CĂN CHUẨN NÚT PHÂN TRANG (DARK MODE) ===== */
.pagination,
.paginator,
ul.pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: 24px 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.pagination li a,
.pagination a,
.paginator a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    background: #111111 !important;
    border: 1px solid #222222 !important;
    color: #D4D4D8 !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    text-decoration: none !important;
}

.pagination li a:hover,
.pagination a:hover {
    background: #1E1E1E !important;
    color: #FFFFFF !important;
    border-color: #333333 !important;
}

.pagination li.active a,
.pagination .current,
.pagination li.active span {
    background: #2563EB !important;
    color: #FFFFFF !important;
    border-color: #2563EB !important;
    font-weight: 700 !important;
}

/* ===== HORIZONTAL TAB BAR (CODEFORCES-STYLE) ===== */
/* Override three-col-container to column layout so sidebar sits on top */
#three-col-container {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Left sidebar becomes horizontal tab bar */
.left-sidebar {
    position: static !important;
    top: auto !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    margin: 0 0 16px 0 !important;
    padding: 8px 16px !important;
    height: auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    contain: layout !important;
    background: #0A0A0A !important;
    border-bottom: 2px solid #1F1F1F !important;
    border-radius: 0 !important;
}

/* Sidebar items become horizontal pills/tabs */
.left-sidebar-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 16px !important;
    margin: 0 !important;
    border-radius: 8px !important;
    border: 1px solid #1F1F1F !important;
    background: #111111 !important;
    color: #A1A1AA !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    transform: none !important;
    contain: layout !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
}

.left-sidebar-item:hover {
    background: #1A1A1A !important;
    color: #E4E4E7 !important;
    border-color: #333333 !important;
    transform: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 16px !important;
}

/* Active tab style */
.left-sidebar-item.active {
    border-left: 1px solid !important;
    border-bottom: 3px solid !important;
    padding-bottom: 0 !important;
    background: #1A1A1A !important;
    font-weight: 700 !important;
}

/* Middle-right content takes full width */
.middle-right-content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    flex: 1 1 100% !important;
}

/* Middle content stretches fully */
.middle-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    flex: 1 1 auto !important;
}

/* Override the inline <style> from three-column-content.html */
@media (min-width: 800px) {
    .middle-right-content {
        margin-left: 0 !important;
    }
    .middle-right-content.no-left-sidebar {
        margin-left: 0 !important;
    }
}

/* Override style.css fixed sidebar */
@media (min-width: 800px) {
    .left-sidebar {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }
}

@media (max-width: 799px) {
    .left-sidebar {
        position: static !important;
        width: 100% !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        padding: 8px 8px !important;
        gap: 6px !important;
    }
    .left-sidebar-item {
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        padding: 0 12px !important;
        font-size: 0.8rem !important;
        display: inline-flex !important;
    }
    .left-sidebar-item:hover {
        padding: 0 12px !important;
    }
}


/* ===== COLOR-MATCHED SIDEBAR TABS (DARK MODE) ===== */
/* Each tab: dark bg of its color, light icon/text of same color */

/* Feed/Gợi ý - Blue */
#feed-tab.left-sidebar-item { background: #1E3A8A !important; border-color: #1D4ED8 !important; color: #93C5FD !important; }
#feed-tab.left-sidebar-item:hover { background: #1D4ED8 !important; }
#feed-tab .sidebar-icon i { color: #93C5FD !important; }
#feed-tab.active { background: #1D4ED8 !important; border-bottom: 3px solid #60A5FA !important; color: #BFDBFE !important; border-left: 1px solid #1D4ED8 !important; border-color: #1D4ED8 !important; }

/* List/Danh sách - Green */
#list-tab.left-sidebar-item { background: #064E3B !important; border-color: #047857 !important; color: #6EE7B7 !important; }
#list-tab.left-sidebar-item:hover { background: #047857 !important; }
#list-tab .sidebar-icon i { color: #6EE7B7 !important; }
#list-tab.active { background: #047857 !important; border-bottom: 3px solid #34D399 !important; color: #A7F3D0 !important; border-left: 1px solid #047857 !important; border-color: #047857 !important; }

/* Submissions/Bài nộp - Purple */
#all_submissions_list-tab.left-sidebar-item { background: #4C1D95 !important; border-color: #6D28D9 !important; color: #C4B5FD !important; }
#all_submissions_list-tab.left-sidebar-item:hover { background: #5B21B6 !important; }
#all_submissions_list-tab .sidebar-icon i { color: #C4B5FD !important; }
#all_submissions_list-tab.active { background: #5B21B6 !important; border-bottom: 3px solid #8B5CF6 !important; color: #DDD6FE !important; border-left: 1px solid #5B21B6 !important; border-color: #5B21B6 !important; }

/* Review/Xem xét - Orange */
#review-tab.left-sidebar-item { background: #7C2D12 !important; border-color: #9A3412 !important; color: #FDBA74 !important; }
#review-tab.left-sidebar-item:hover { background: #9A3412 !important; }
#review-tab .sidebar-icon i { color: #FDBA74 !important; }
#review-tab.active { background: #9A3412 !important; border-bottom: 3px solid #FB923C !important; color: #FFEDD5 !important; border-left: 1px solid #9A3412 !important; border-color: #9A3412 !important; }

/* Add/Thêm mới - Cyan */
#add-tab.left-sidebar-item { background: #0C4A6E !important; border-color: #075985 !important; color: #7DD3FC !important; }
#add-tab.left-sidebar-item:hover { background: #075985 !important; }
#add-tab .sidebar-icon i { color: #7DD3FC !important; }
#add-tab.active { background: #075985 !important; border-bottom: 3px solid #38BDF8 !important; color: #BAE6FD !important; border-left: 1px solid #075985 !important; border-color: #075985 !important; }

/* Admin - Red/Pink */
#admin-tab.left-sidebar-item { background: #7F1D1D !important; border-color: #991B1B !important; color: #FCA5A5 !important; }
#admin-tab.left-sidebar-item:hover { background: #991B1B !important; }
#admin-tab .sidebar-icon i { color: #FCA5A5 !important; }
#admin-tab.active { background: #991B1B !important; border-bottom: 3px solid #F87171 !important; color: #FECACA !important; border-left: 1px solid #991B1B !important; border-color: #991B1B !important; }

/* Contest page tabs */
#detail-tab.left-sidebar-item { background: #0C4A6E !important; border-color: #075985 !important; color: #7DD3FC !important; }
#detail-tab.left-sidebar-item:hover { background: #075985 !important; }
#detail-tab .sidebar-icon i { color: #7DD3FC !important; }
#detail-tab.active { background: #075985 !important; border-bottom: 3px solid #38BDF8 !important; color: #BAE6FD !important; border-left: 1px solid #075985 !important; border-color: #075985 !important; }

#problems-tab.left-sidebar-item { background: #064E3B !important; border-color: #047857 !important; color: #6EE7B7 !important; }
#problems-tab.left-sidebar-item:hover { background: #047857 !important; }
#problems-tab .sidebar-icon i { color: #6EE7B7 !important; }
#problems-tab.active { background: #047857 !important; border-bottom: 3px solid #34D399 !important; color: #A7F3D0 !important; border-left: 1px solid #047857 !important; border-color: #047857 !important; }

#submissions-tab.left-sidebar-item { background: #4C1D95 !important; border-color: #6D28D9 !important; color: #C4B5FD !important; }
#submissions-tab.left-sidebar-item:hover { background: #5B21B6 !important; }
#submissions-tab .sidebar-icon i { color: #C4B5FD !important; }
#submissions-tab.active { background: #5B21B6 !important; border-bottom: 3px solid #8B5CF6 !important; color: #DDD6FE !important; border-left: 1px solid #5B21B6 !important; border-color: #5B21B6 !important; }

#ranking-tab.left-sidebar-item, #final_ranking-tab.left-sidebar-item { background: #78350F !important; border-color: #92400E !important; color: #FCD34D !important; }
#ranking-tab.left-sidebar-item:hover, #final_ranking-tab.left-sidebar-item:hover { background: #92400E !important; }
#ranking-tab .sidebar-icon i, #final_ranking-tab .sidebar-icon i { color: #FCD34D !important; }
#ranking-tab.active, #final_ranking-tab.active { background: #92400E !important; border-bottom: 3px solid #FBBF24 !important; color: #FDE68A !important; border-left: 1px solid #92400E !important; border-color: #92400E !important; }

#participation-tab.left-sidebar-item { background: #1E3A8A !important; border-color: #1D4ED8 !important; color: #93C5FD !important; }
#participation-tab.left-sidebar-item:hover { background: #1D4ED8 !important; }
#participation-tab .sidebar-icon i { color: #93C5FD !important; }
#participation-tab.active { background: #1D4ED8 !important; border-bottom: 3px solid #60A5FA !important; color: #BFDBFE !important; border-left: 1px solid #1D4ED8 !important; border-color: #1D4ED8 !important; }

#stats-tab.left-sidebar-item { background: #115E59 !important; border-color: #0F766E !important; color: #5EEAD4 !important; }
#stats-tab.left-sidebar-item:hover { background: #0F766E !important; }
#stats-tab .sidebar-icon i { color: #5EEAD4 !important; }
#stats-tab.active { background: #0F766E !important; border-bottom: 3px solid #2DD4BF !important; color: #99F6E4 !important; border-left: 1px solid #0F766E !important; border-color: #0F766E !important; }

#clone-tab.left-sidebar-item { background: #312E81 !important; border-color: #4338CA !important; color: #A5B4FC !important; }
#clone-tab.left-sidebar-item:hover { background: #3730A3 !important; }
#clone-tab .sidebar-icon i { color: #A5B4FC !important; }
#clone-tab.active { background: #3730A3 !important; border-bottom: 3px solid #818CF8 !important; color: #C7D2FE !important; border-left: 1px solid #3730A3 !important; border-color: #3730A3 !important; }

#edit-tab.left-sidebar-item { background: #7C2D12 !important; border-color: #9A3412 !important; color: #FDBA74 !important; }
#edit-tab.left-sidebar-item:hover { background: #9A3412 !important; }
#edit-tab .sidebar-icon i { color: #FDBA74 !important; }
#edit-tab.active { background: #9A3412 !important; border-bottom: 3px solid #FB923C !important; color: #FFEDD5 !important; border-left: 1px solid #9A3412 !important; border-color: #9A3412 !important; }

#log-tab.left-sidebar-item { background: #312E81 !important; border-color: #4338CA !important; color: #A5B4FC !important; }
#log-tab.left-sidebar-item:hover { background: #3730A3 !important; }
#log-tab .sidebar-icon i { color: #A5B4FC !important; }
#log-tab.active { background: #3730A3 !important; border-bottom: 3px solid #818CF8 !important; color: #C7D2FE !important; border-left: 1px solid #3730A3 !important; border-color: #3730A3 !important; }

/* Pagination active - Blue */
.pagination li.active a,
.pagination .current,
.pagination li.active span {
    background: #1E3A8A !important;
    color: #93C5FD !important;
    border-color: #1D4ED8 !important;
}

/* Search button - Blue */
#go.action-btn {
    background: #1E3A8A !important;
    color: #93C5FD !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(30, 58, 138, 0.4) !important;
}
#go.action-btn:hover {
    background: #1D4ED8 !important;
}

/* Random button - Slate */
#random.action-btn {
    background: #1E293B !important;
    color: #94A3B8 !important;
    border: 1px solid #334155 !important;
}
#random.action-btn:hover {
    background: #334155 !important;
    color: #CBD5E1 !important;
}