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

body { 
    font-family: 'Plus Jakarta Sans', sans-serif; 
    background-color: #05050A; /* Đen sâu thẳm vũ trụ */
    color: #E2E8F0; 
    background-image: radial-gradient(circle at top right, rgba(124, 58, 237, 0.1), transparent 40%),
                      radial-gradient(circle at bottom left, rgba(219, 39, 119, 0.1), transparent 40%);
    background-attachment: fixed;
}

/* ==========================================
   1. HIỆU ỨNG KÍNH MỜ (GLASSMORPHISM)
   ========================================== */
.glass-panel { 
    background: rgba(15, 23, 42, 0.6); 
    backdrop-filter: blur(16px); 
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.05); 
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.glass-panel:hover {
    border-color: rgba(219, 39, 119, 0.3); /* Viền sáng màu hồng khi hover */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

/* Các item menu */
.nav-item { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 12px; margin: 0 12px; }
.nav-item:hover { background-color: rgba(255, 255, 255, 0.03); transform: translateX(5px); }
.nav-item.active { 
    background: linear-gradient(90deg, rgba(219, 39, 119, 0.15) 0%, rgba(124, 58, 237, 0.05) 100%); 
    color: #f472b6; 
    font-weight: 700; 
    border-left: 3px solid #db2777; 
    box-shadow: inset 0 0 20px rgba(219, 39, 119, 0.05);
}

/* Nút bấm phát sáng */
.glow-button {
    background: linear-gradient(135deg, #db2777 0%, #7c3aed 100%);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.glow-button::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, #7c3aed 0%, #db2777 100%);
    z-index: -1; transition: opacity 0.3s ease; opacity: 0;
}
.glow-button:hover::before { opacity: 1; }
.glow-button:hover {
    box-shadow: 0 0 20px rgba(219, 39, 119, 0.5);
    transform: translateY(-2px);
}

/* ==========================================
   2. CSS CHỮA LỖI TỪ VỰNG & NGỮ PHÁP (QUAN TRỌNG)
   ========================================== */
/* Định dạng chữ sai (Màu đỏ, gạch ngang) */
del {
    background-color: rgba(220, 38, 38, 0.2);
    color: #fca5a5;
    text-decoration: line-through;
    padding: 2px 6px;
    border-radius: 4px;
    margin: 0 2px;
    border: 1px solid rgba(220, 38, 38, 0.3);
}

/* Định dạng chữ sửa lại cho đúng (Màu xanh lá, in đậm) */
ins {
    background-color: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
    text-decoration: none;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    margin: 0 2px;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

/* ==========================================
   3. LƯỚI HEATMAP & SCROLLBAR
   ========================================== */
.heatmap-grid { display: grid; grid-template-rows: repeat(5, 1fr); grid-auto-flow: column; gap: 4px; overflow-x: auto; padding-bottom: 8px;}
.heatmap-cell { width: 14px; height: 14px; border-radius: 3px; background-color: rgba(255,255,255,0.05); transition: 0.2s;}
.heatmap-cell:hover { transform: scale(1.3); border: 1px solid #fff; z-index: 10; position: relative;}
.cell-low { background-color: #4c1d95; } 
.cell-med { background-color: #7c3aed; } 
.cell-high { background-color: #db2777; } 
.cell-max { background-color: #f472b6; box-shadow: 0 0 8px #f472b6;} 

/* Thanh cuộn tàng hình ảo diệu */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(219,39,119,0.5); }