/* app.css — SINH RA TỪ CSS.html ở Phase 4 việc 4.1 (bỏ thẻ <style> bọc ngoài). */
/* Bản gốc CSS.html giữ làm mốc đối chiếu và đã đóng băng: chỉ sửa file này. */
    /* Custom Properties & Base Styles */
    :root {
        --glass-bg: rgba(255, 255, 255, 0.85);
        --glass-border: rgba(255, 255, 255, 0.2);
        --shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.08);
        --shadow-medium: 0 12px 40px rgba(0, 0, 0, 0.12);
        --shadow-strong: 0 20px 60px rgba(0, 0, 0, 0.16);
        --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        --gradient-success: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        --transition-bounce: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    * {
        box-sizing: border-box;
    }

    body {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        line-height: 1.6;
        color: #334155;
        overflow-x: hidden;
    }

    /* Scrollbar Styling */
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    ::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.05);
        border-radius: 3px;
    }

    ::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 3px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0.3);
    }

    .form-label.required::after {
        content: ' *';
        color: #ef4444;
    }

    /* Glass Morphism Components */
    .glass-card {
        background: var(--glass-bg);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid var(--glass-border);
        border-radius: 24px;
        box-shadow: var(--shadow-soft);
        padding: 12px;
        transition: var(--transition-smooth);
        position: relative;
        overflow: hidden;
    }

    .glass-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    }

    .glass-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-medium);
        border-color: rgba(255, 255, 255, 0.3);
    }

    /* Sửa lỗi 1 phase 8b (2026-09-06): 4 menu thả xuống ở đầu trang
       («Xuất Excel», «+ Tạo mới», chuông, Chat) mang cùng lúc hai class
       `absolute … glass-card`. Tailwind nạp trước khai báo `.absolute`,
       nhưng `position: relative` ở `.glass-card` bên trên có cùng độ ưu tiên
       (0,1,0) mà nạp sau nên thắng, khiến menu rơi vào dòng chảy bình thường
       và kéo dài khung đầu trang thay vì phủ lên nội dung bên dưới.
       Rule này độ ưu tiên cao hơn (0,2,0) nên lấy lại vị trí tuyệt đối;
       `position: relative` của .glass-card thuần vẫn giữ cho ::before. */
    .glass-card.absolute {
        position: absolute;
    }

    /* Navigation */
    .nav-link {
        color: #64748b;
        position: relative;
        overflow: hidden;
    }

    .nav-link::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
        transition: left 0.5s ease;
    }

    .nav-link:hover::before {
        left: 100%;
    }

    .nav-link.active {
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(147, 51, 234, 0.1));
        color: #3b82f6;
        border: 1px solid rgba(59, 130, 246, 0.2);
    }

    .nav-link.active .w-8 {
        background: linear-gradient(135deg, #3b82f6, #8b5cf6) !important;
    }

    .nav-link.active i {
        color: white !important;
    }

    /* Enhanced Buttons with Loading States */
    .btn-primary {
        background: linear-gradient(135deg, #3b82f6, #8b5cf6);
        color: white;
        border: none;
        border-radius: 12px;
        padding: 10px 20px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: var(--transition-smooth);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        min-height: 40px;
    }

    .btn-primary::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.6s ease;
    }

    .btn-primary:hover::before {
        left: 100%;
    }

    .btn-primary:hover:not(.loading) {
        transform: translateY(-1px);
        box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
    }

    .btn-primary.loading {
        opacity: 0.8;
        cursor: not-allowed;
    }

    .btn-primary.loading::after {
        content: '';
        position: absolute;
        width: 16px;
        height: 16px;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-top: 2px solid white;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    .btn-secondary {
        background: linear-gradient(135deg, #3b82f6, #8b5cf6);
        color: white;
        border: none;
        border-radius: 12px;
        padding: 10px 20px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: var(--transition-smooth);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        min-height: 40px;
    }

    .btn-secondary::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.6s ease;
    }

    .btn-secondary:hover::before {
        left: 100%;
    }

    .btn-secondary:hover:not(.loading) {
        transform: translateY(-1px);
        box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
    }

    .btn-secondary.loading {
        opacity: 0.8;
        cursor: not-allowed;
    }

    .btn-secondary.loading::after {
        content: '';
        position: absolute;
        width: 16px;
        height: 16px;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-top: 2px solid white;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    .btn-accent {
        background: linear-gradient(135deg, #f59e0b, #ef4444);
        color: white;
        border: none;
        border-radius: 12px;
        padding: 10px 20px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: var(--transition-smooth);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        min-height: 40px;
    }

    .btn-accent::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.6s ease;
    }

    .btn-accent:hover::before {
        left: 100%;
    }

    .btn-accent:hover:not(.loading) {
        transform: translateY(-1px);
        box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4);
    }

    .btn-accent.loading {
        opacity: 0.8;
        cursor: not-allowed;
    }

    .btn-accent.loading::after {
        content: '';
        position: absolute;
        width: 16px;
        height: 16px;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-top: 2px solid white;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    /* Animation for app permission indicator (red dot) */
    @keyframes pulse-dot {

        0%,
        100% {
            opacity: 1;
            transform: scale(1);
        }

        50% {
            opacity: 0.6;
            transform: scale(0.9);
        }
    }

    .permission-dot {
        animation: pulse-dot 2s ease-in-out infinite;
    }

    /* Stats Container */
    .stats-container {
        background: white;
        border-radius: 24px;
        padding: 32px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
        margin-bottom: 32px;
    }

    /* Modern Stats Cards */
    .modern-stat-card {
        position: relative;
        background: white;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .modern-stat-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

    .card-gradient {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        z-index: 1;
    }

    .card-content {
        padding: 24px;
        position: relative;
        z-index: 2;
    }

    .card-header {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 20px;
    }

    .icon-wrapper {
        width: 56px;
        height: 56px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: white;
        position: relative;
        overflow: hidden;
    }

    .icon-wrapper::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.3));
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .modern-stat-card:hover .icon-wrapper::before {
        opacity: 1;
    }

    .icon-wrapper.blue {
        background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    }

    .icon-wrapper.emerald {
        background: linear-gradient(135deg, #10b981, #047857);
    }

    .icon-wrapper.amber {
        background: linear-gradient(135deg, #f59e0b, #d97706);
    }

    .icon-wrapper.red {
        background: linear-gradient(135deg, #ef4444, #dc2626);
    }

    /* Card backgrounds */
    .modern-stat-card:nth-child(1) {
        background: linear-gradient(135deg, #eff6ff, #f8fafc);
    }

    .modern-stat-card:nth-child(2) {
        background: linear-gradient(135deg, #ecfdf5, #f8fafc);
    }

    .modern-stat-card:nth-child(3) {
        background: linear-gradient(135deg, #fffbeb, #f8fafc);
    }

    .modern-stat-card:nth-child(4) {
        background: linear-gradient(135deg, #fef2f2, #f8fafc);
    }

    .main-stat {
        flex: 1;
    }

    .stat-number {
        display: block;
        font-size: 32px;
        font-weight: 800;
        color: #1f2937;
        line-height: 1;
        margin-bottom: 4px;
        background: linear-gradient(135deg, #1f2937, #4b5563);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .stat-label {
        display: block;
        font-size: 12px;
        font-weight: 600;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .card-details {
        space-y: 12px;
    }

    .detail-item {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        color: #6b7280;
        margin-bottom: 12px;
    }

    .detail-item:last-child {
        margin-bottom: 0;
    }

    .detail-item i {
        width: 16px;
        font-size: 12px;
        color: #9ca3af;
    }

    .detail-item strong {
        color: #374151;
        font-weight: 700;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .modern-stat-card {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .card-content {
            display: flex;
            flex-direction: row;
            align-items: center;
            width: 100%;
            padding: 0;
        }

        .card-header {
            flex: 1;
            margin-bottom: 0;
        }

        .icon-wrapper {
            width: 40px;
            height: 40px;
            font-size: 18px;
        }

        .stat-number {
            font-size: 24px;
        }

        .card-details {
            flex-shrink: 0;
            min-width: 110px;
            text-align: right;
            space-y: 4px;
        }

        .detail-item {
            font-size: 11px;
            margin-bottom: 4px;
            justify-content: flex-end;
        }

        .detail-item i {
            width: 12px;
            font-size: 10px;
            order: 2;
            margin-left: 4px;
            margin-right: 0;
        }
    }

    /* Hover animations */
    .modern-stat-card .icon-wrapper {
        transition: transform 0.3s ease;
    }

    .modern-stat-card:hover .icon-wrapper {
        transform: scale(1.1) rotate(5deg);
    }

    .modern-stat-card .stat-number {
        transition: transform 0.3s ease;
    }

    .modern-stat-card:hover .stat-number {
        transform: scale(1.05);
    }

    /* Compact Project Tree Styles */
    .project-tree-item {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px);
        border: 2px solid rgba(59, 130, 246, 0.15);
        border-radius: 20px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        transition: var(--transition-smooth);
        position: relative;
        overflow: hidden;
    }

    .project-tree-item::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #3b82f6, #8b5cf6);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s ease;
    }

    .project-tree-item:hover::before {
        transform: scaleX(1);
    }

    .project-tree-item:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-medium);
        border-color: rgba(59, 130, 246, 0.3);
    }

    .project-header {
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }

    .project-expand-btn {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        border: none;
        background: rgba(59, 130, 246, 0.1);
        color: #3b82f6;
        cursor: pointer;
        transition: var(--transition-smooth);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        margin-top: 2px;
    }

    .project-expand-btn:hover {
        background: rgba(59, 130, 246, 0.2);
        transform: scale(1.1);
    }

    .project-expand-btn.expanded {
        transform: rotate(90deg);
    }

    .project-info {
        flex: 1;
        min-width: 0;
    }

    .project-title {
        font-size: 16px;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 4px;
        line-height: 1.4;
    }

    .project-description {
        font-size: 13px;
        color: #6b7280;
        margin-bottom: 8px;
        line-height: 1.4;
    }

    .project-meta {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 8px;
        font-size: 12px;
        color: #6b7280;
    }

    .project-stats {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
    }

    .project-tasks {
        margin-left: 40px;
        margin-top: 12px;
        border-left: 2px solid rgba(59, 130, 246, 0.2);
        padding-left: 12px;
        display: none;
        transition: all 0.3s ease;
        max-height: 0;
        overflow: hidden;
    }

    .project-tasks.expanded {
        display: block;
        max-height: 2000px;
    }

    .task-tree-item {
        background: rgba(255, 255, 255, 0.6);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 12px;
        padding: 12px;
        margin-bottom: 8px;
        transition: var(--transition-smooth);
        position: relative;
    }

    .task-tree-item::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, #10b981, #3b82f6);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s ease;
    }

    .task-tree-item:hover::before {
        transform: scaleX(1);
    }

    .task-tree-item:hover {
        background: rgba(255, 255, 255, 0.8);
        transform: translateX(4px);
    }

    .task-connection {
        position: relative;
    }

    .task-connection::after {
        content: '';
        position: absolute;
        left: -12px;
        top: 50%;
        width: 8px;
        height: 1px;
        background: rgba(59, 130, 246, 0.4);
        transform: translateY(-50%);
    }

    /* Compact task info layout */
    .task-info {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
    }

    .task-details {
        flex: 1;
        min-width: 0;
    }

    .task-title {
        font-size: 14px;
        font-weight: 500;
        color: #1f2937;
        margin-bottom: 4px;
        line-height: 1.3;
    }

    .task-meta {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 6px;
        font-size: 11px;
    }

    .task-assignee {
        font-size: 12px;
        color: #6b7280;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .task-progress {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 80px;
    }

    .task-progress-text {
        font-size: 12px;
        font-weight: 500;
        color: #374151;
        min-width: 30px;
    }

    .task-progress-bar {
        width: 40px;
        height: 4px;
        background: rgba(0, 0, 0, 0.1);
        border-radius: 2px;
        overflow: hidden;
    }

    .task-progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #10b981, #3b82f6);
        border-radius: 2px;
        transition: width 0.8s ease;
    }

    /* Project Card */
    .project-card {
        background: var(--glass-bg);
        backdrop-filter: blur(20px);
        border: 1px solid var(--glass-border);
        border-radius: 20px;
        padding: 20px;
        transition: var(--transition-smooth);
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }

    .project-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #3b82f6, #8b5cf6);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s ease;
    }

    .project-card:hover::before {
        transform: scaleX(1);
    }

    .project-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-strong);
        border-color: rgba(59, 130, 246, 0.3);
    }

    /* Task Card */
    .task-card {
        background: var(--glass-bg);
        backdrop-filter: blur(20px);
        border: 1px solid var(--glass-border);
        border-radius: 18px;
        padding: 18px;
        transition: var(--transition-smooth);
        position: relative;
        overflow: hidden;
    }

    .task-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #10b981, #3b82f6);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s ease;
    }

    .task-card:hover::before {
        transform: scaleX(1);
    }

    .task-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-medium);
        border-color: rgba(16, 185, 129, 0.3);
    }

    /* Priority Task Card - Updated for 2-column layout */
    .priority-task-card {
        background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(245, 158, 11, 0.1));
        border: 1px solid rgba(239, 68, 68, 0.2);
        border-radius: 12px;
        padding: 12px;
        transition: var(--transition-smooth);
        position: relative;
        overflow: hidden;
        min-height: 155px;
    }

    .priority-task-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, #ef4444, #f59e0b);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s ease;
    }

    .priority-task-card:hover::before {
        transform: scaleX(1);
    }

    .priority-task-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-medium);
        border-color: rgba(239, 68, 68, 0.3);
    }

    /* Priority tasks grid layout */
    #priority-tasks {
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
    }

    #priority-tasks::-webkit-scrollbar {
        width: 4px;
    }

    #priority-tasks::-webkit-scrollbar-track {
        background: transparent;
    }

    #priority-tasks::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 2px;
    }

    /* Search input styling for project-task section */
    #project-task-search {
        font-family: inherit;
    }

    #project-task-search:focus {
        transform: scale(1.01);
    }

    /* Staff Card */
    .staff-card {
        background: var(--glass-bg);
        backdrop-filter: blur(20px);
        border: 1px solid var(--glass-border);
        border-radius: 16px;
        padding: 20px;
        text-align: center;
        transition: var(--transition-smooth);
        position: relative;
        overflow: hidden;
    }

    .staff-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #f59e0b, #ef4444);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s ease;
    }

    .staff-card:hover::before {
        transform: scaleX(1);
    }

    .staff-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-medium);
        border-color: rgba(245, 158, 11, 0.3);
    }

    .staff-avatar {
        width: 50px;
        height: 50px;
        background: linear-gradient(135deg, #f59e0b, #ef4444);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 16px;
        font-size: 20px;
        color: white;
        font-weight: bold;
        transition: var(--transition-bounce);
    }

    .staff-card:hover .staff-avatar {
        transform: scale(1.1) rotate(5deg);
    }

    /* Progress Bar */
    .progress-bar {
        width: 100%;
        height: 8px;
        background: rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        overflow: hidden;
        position: relative;
    }

    .progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #10b981, #3b82f6);
        border-radius: 4px;
        transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
    }

    .progress-fill::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
        animation: shimmer 2s infinite;
    }

    @keyframes shimmer {
        0% {
            transform: translateX(-100%);
        }

        100% {
            transform: translateX(100%);
        }
    }

    /* Status Badges */
    .status-badge {
        padding: 1px 4px;
        border-radius: 12px;
        font-size: 9px;
        font-weight: 500;
        letter-spacing: 0.3px;
        display: inline-flex;
        align-items: center;
    }

    .status-pending {
        background: rgba(107, 114, 128, 0.1);
        color: #6b7280;
        border: 1px solid rgba(107, 114, 128, 0.2);
    }

    .status-active {
        background: rgba(59, 130, 246, 0.1);
        color: #3b82f6;
        border: 1px solid rgba(59, 130, 246, 0.2);
    }

    .status-completed {
        background: rgba(16, 185, 129, 0.1);
        color: #10b981;
        border: 1px solid rgba(16, 185, 129, 0.2);
    }

    .status-overdue {
        background: rgba(239, 68, 68, 0.1);
        color: #ef4444;
        border: 1px solid rgba(239, 68, 68, 0.2);
    }

    /* Nhãn vàng "Chờ duyệt" (việc 5.6). Tên là status-awaiting chứ không phải status-pending:
       status-pending đã là màu xám của trạng thái CÔNG VIỆC "Chưa bắt đầu", hai thứ khác nhau. */
    .status-awaiting {
        background: rgba(245, 158, 11, 0.15);
        color: #b45309;
        border: 1px solid rgba(245, 158, 11, 0.35);
    }

    /* Nhãn XÁM "Nháp" (012, Vòng 13) — bản lưu chưa gửi đi duyệt, chỉ người lập thấy.
       Xám nhạt hơn hẳn status-awaiting: vàng nghĩa là "đang chờ ai đó", xám nghĩa là
       "chưa gửi cho ai". Người dùng phải phân biệt được hai thứ đó bằng mắt, không phải đọc chữ. */
    .status-draft {
        background: rgba(107, 114, 128, 0.12);
        color: #4b5563;
        border: 1px dashed rgba(107, 114, 128, 0.45);
    }

    /* Nhãn ĐỎ "Đang xin xoá" (013, Vòng 13 đợt 2) — có yêu cầu xoá đang chờ duyệt.
       Đỏ vì đây là thứ SẮP MẤT nếu người duyệt đồng ý, khác hẳn vàng ("đang chờ duyệt nội dung")
       và xám ("chưa gửi cho ai"). Ba nhãn có thể cùng xuất hiện trên một danh sách nên màu phải
       tách nhau rõ; mục đang xin xoá VẪN hiện và VẪN được đếm (xem đầu migration 013). */
    .status-delete-req {
        background: rgba(239, 68, 68, 0.14);
        color: #b91c1c;
        border: 1px solid rgba(239, 68, 68, 0.4);
    }

    /* Priority Badges */
    .priority-low {
        background: rgba(34, 197, 94, 0.1);
        color: #22c55e;
        border: 1px solid rgba(34, 197, 94, 0.2);
    }

    .priority-medium {
        background: rgba(245, 158, 11, 0.1);
        color: #f59e0b;
        border: 1px solid rgba(245, 158, 11, 0.2);
    }

    .priority-high {
        background: rgba(239, 68, 68, 0.1);
        color: #ef4444;
        border: 1px solid rgba(239, 68, 68, 0.2);
    }

    /* Frequency Badges */
    .frequency-daily {
        background: rgba(168, 85, 247, 0.1);
        color: #a855f7;
        border: 1px solid rgba(168, 85, 247, 0.2);
    }

    .frequency-weekly {
        background: rgba(34, 211, 238, 0.1);
        color: #06b6d4;
        border: 1px solid rgba(34, 211, 238, 0.2);
    }

    .frequency-monthly {
        background: rgba(251, 146, 60, 0.1);
        color: #f97316;
        border: 1px solid rgba(251, 146, 60, 0.2);
    }

    /* Quick Add Menu */
    .quick-add-item {
        display: flex;
        align-items: center;
        padding: 12px 16px;
        color: #374151;
        text-decoration: none;
        transition: var(--transition-smooth);
        border-radius: 12px;
        margin: 4px;
        white-space: nowrap;
        font-size: 13px;
        /* THÊM dòng này */
    }

    .quick-add-item:hover {
        background: rgba(59, 130, 246, 0.1);
        color: #3b82f6;
        transform: translateX(4px);
    }

    .quick-add-item i {
        width: 20px;
        margin-right: 12px;
    }

    /* Activity Item */
    .activity-item {
        background: rgba(255, 255, 255, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 12px;
        padding: 4px;
        transition: var(--transition-smooth);
    }

    .activity-item:hover {
        background: rgba(255, 255, 255, 0.8);
        transform: translateX(4px);
    }

    /* Loading Card */
    .loading-card {
        background: var(--glass-bg);
        backdrop-filter: blur(20px);
        border: 1px solid var(--glass-border);
        border-radius: 16px;
        padding: 40px;
        text-align: center;
        color: #6b7280;
        animation: pulse 2s infinite;
    }

    @keyframes pulse {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: 0.5;
        }
    }

    /* Enhanced Modal Styles */
    .modal {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(8px);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 60;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    .modal.active {
        opacity: 1;
        visibility: visible;
    }

    .modal-content {
        background: var(--glass-bg);
        backdrop-filter: blur(20px);
        border: 1px solid var(--glass-border);
        border-radius: 24px;
        padding: 32px;
        max-width: 600px;
        width: 90%;
        max-height: 90vh;
        overflow-y: auto;
        transform: scale(0.9) translateY(20px);
        transition: var(--transition-bounce);
    }

    .modal.active .modal-content {
        transform: scale(1) translateY(0);
    }

    .form-label {
        display: block;
        font-size: 14px;
        font-weight: 500;
        color: #374151;
        margin-top: 8px;
    }

    .form-input {
        width: 100%;
        padding: 12px 16px;
        border: 1px solid rgba(209, 213, 219, 0.5);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(10px);
        transition: var(--transition-smooth);
        font-size: 14px;
    }

    .form-input:focus {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        background: rgba(255, 255, 255, 0.95);
    }

    .form-textarea {
        width: 100%;
        padding: 12px 16px;
        border: 1px solid rgba(209, 213, 219, 0.5);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(10px);
        transition: var(--transition-smooth);
        font-size: 14px;
        resize: vertical;
        min-height: 80px;
    }

    .form-textarea:focus {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        background: rgba(255, 255, 255, 0.95);
    }

    .form-select {
        width: 100%;
        padding: 12px 16px;
        border: 1px solid rgba(209, 213, 219, 0.5);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(10px);
        transition: var(--transition-smooth);
        font-size: 14px;
        cursor: pointer;
    }

    .form-select:focus {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        background: rgba(255, 255, 255, 0.95);
    }

    /* Toast Notifications */
    .toast {
        background: var(--glass-bg);
        backdrop-filter: blur(20px);
        border: 1px solid var(--glass-border);
        border-radius: 16px;
        padding: 16px 20px;
        box-shadow: var(--shadow-medium);
        transform: translateX(100%);
        opacity: 0;
        transition: var(--transition-smooth);
        max-width: 400px;
    }

    .toast.show {
        transform: translateX(0);
        opacity: 1;
    }

    .toast.success {
        border-left: 4px solid #10b981;
    }

    .toast.error {
        border-left: 4px solid #ef4444;
    }

    .toast.info {
        border-left: 4px solid #3b82f6;
    }

    /* Section Visibility */
    .section {
        display: none;
        animation: fadeInUp 0.5s ease;
    }

    .section.active {
        display: block;
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Action Buttons */
    .action-btn {
        width: 28px;
        height: 28px;
        border-radius: 6px;
        border: none;
        cursor: pointer;
        transition: var(--transition-smooth);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
    }

    .action-btn-edit {
        background: rgba(59, 130, 246, 0.1);
        color: #3b82f6;
    }

    .action-btn-edit:hover {
        background: rgba(59, 130, 246, 0.2);
        transform: scale(1.1);
    }

    .action-btn-delete {
        background: rgba(239, 68, 68, 0.1);
        color: #ef4444;
    }

    .action-btn-delete:hover {
        background: rgba(239, 68, 68, 0.2);
        transform: scale(1.1);
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        .glass-card {
            padding: 16px;
            border-radius: 16px;
        }

        .stat-card {
            padding: 16px;
        }

        .project-card,
        .task-card,
        .staff-card {
            padding: 16px;
        }

        .modal-content {
            padding: 24px;
            margin: 16px;
        }

        .project-tree-item {
            padding: 12px;
        }

        .project-header {
            flex-direction: column;
            gap: 8px;
        }

        .project-tasks {
            margin-left: 20px;
            padding-left: 12px;
        }

        .task-info {
            flex-direction: column;
            gap: 8px;
        }

        .task-progress {
            align-self: flex-start;
        }

        /* THÊM CÁC RULES MỚI */
        /* Header title responsive */
        #page-title {
            font-size: 18px !important;
            line-height: 1.3;
        }

        /* Button size cho mobile */
        .btn-primary,
        .btn-secondary,
        .btn-accent {
            padding: 8px 12px;
            font-size: 13px;
            min-height: 36px;
        }

        /* Stats card responsive */
        .modern-stat-card {
            margin-bottom: 16px;
        }

        .card-content {
            padding: 16px;
        }

        .stat-number {
            font-size: 24px;
        }

        .icon-wrapper {
            width: 44px;
            height: 44px;
            font-size: 18px;
        }

        /* Stats container responsive */
        .stats-container {
            padding: 16px;
            margin-bottom: 20px;
        }

        /* Grid stats responsive */
        .stats-container .grid {
            grid-template-columns: 1fr;
            gap: 16px;
        }

        /* Detail items trong stats card */
        .detail-item {
            font-size: 12px;
            margin-bottom: 8px;
            align-items: flex-start;
        }

        .detail-item i {
            width: 14px;
            font-size: 11px;
            margin-top: 1px;
            flex-shrink: 0;
        }

        .detail-item span {
            line-height: 1.3;
        }

        /* Project task section responsive */
        .glass-card h3 {
            font-size: 16px;
            margin-bottom: 16px;
        }

        /* Header buttons trong project task section */
        .glass-card .flex.items-center.justify-between {
            flex-direction: column;
            align-items: stretch;
            gap: 12px;
        }

        .glass-card .flex.items-center.justify-between .flex.items-center.space-x-3 {
            flex-direction: column;
            gap: 8px;
            align-items: stretch;
        }

        .glass-card .flex.space-x-2 {
            display: flex;
            gap: 8px;
            justify-content: center;
        }

        /* Search input trong project task */
        #project-task-search {
            width: 100% !important;
            font-size: 14px;
        }

        /* Grid layout cho mobile */
        .grid.grid-cols-1.lg\\:grid-cols-3 {
            grid-template-columns: 1fr !important;
            gap: 16px;
        }

        .lg\\:col-span-2 {
            grid-column: span 1 !important;
        }
    }

    /* Sidebar Mobile Animation */
    @media (max-width: 767px) {
        #sidebar.open {
            transform: translateX(0);
        }
    }

    /* Utilities */
    .text-gradient {
        background: linear-gradient(135deg, #3b82f6, #8b5cf6);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .bg-blur {
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }

    .border-gradient {
        border-image: linear-gradient(135deg, #3b82f6, #8b5cf6) 1;
    }

    /* Chart Container Enhancements */
    .chart-container {
        position: relative;
        height: 100%;
        width: 100%;
    }

    .chart-container canvas {
        border-radius: 12px;
    }

    /* Enhanced hover effects for interactive elements */
    .clickable {
        cursor: pointer;
        transition: var(--transition-smooth);
    }

    .clickable:hover {
        transform: translateY(-1px);
    }

    /* Project progress indicator */
    .project-progress {
        background: rgba(255, 255, 255, 0.3);
        border-radius: 8px;
        height: 6px;
        overflow: hidden;
    }

    .project-progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #10b981, #3b82f6);
        border-radius: 8px;
        transition: width 0.8s ease;
    }

    /* Project Task Tree Height Limit - Responsive */
    #project-task-tree {
        max-height: 500px;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
    }

    /* Larger screens */
    @media (min-width: 1024px) {
        #project-task-tree {
            max-height: 600px;
        }
    }

    /* Extra large screens */
    @media (min-width: 1280px) {
        #project-task-tree {
            max-height: 700px;
        }
    }

    #project-task-tree::-webkit-scrollbar {
        width: 6px;
    }

    #project-task-tree::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.05);
        border-radius: 3px;
    }

    #project-task-tree::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 3px;
    }

    #project-task-tree::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0.3);
    }

    /* Login Modal Enhancements */
    #login-modal {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    #login-modal.show {
        opacity: 1 !important;
        visibility: visible !important;
    }

    #login-modal .bg-white\/90 {
        transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    #login-modal.show .bg-white\/90 {
        transform: scale(1) !important;
    }

    /* User Info Section */
    #user-section {
        transition: all 0.3s ease;
    }

    #user-info {
        animation: slideInUp 0.5s ease-out;
    }

    #user-avatar {
        transition: all 0.3s ease;
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    }

    #user-info:hover #user-avatar {
        transform: scale(1.1);
        box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
    }

    /* Login Form Styling */
    #login-form input {
        transition: all 0.3s ease;
    }

    #login-form input:focus {
        transform: translateY(-1px);
        box-shadow: 0 8px 24px rgba(59, 130, 246, 0.15);
    }

    #login-error {
        animation: shake 0.5s ease-in-out;
    }

    #login-loading {
        animation: fadeIn 0.3s ease;
    }

    /* Enhanced Button States for Authentication */
    #logout-btn {
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    #logout-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.6s ease;
    }

    #logout-btn:hover::before {
        left: 100%;
    }

    #logout-btn:hover {
        background: linear-gradient(135deg, #dc2626, #b91c1c);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
    }

    #login-btn {
        position: relative;
        overflow: hidden;
    }

    #login-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.6s ease;
    }

    #login-btn:hover::before {
        left: 100%;
    }

    /* Loading States */
    .loading-overlay-auth {
        position: fixed;
        inset: 0;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(8px);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 999;
    }

    /* User Role Badge */
    .user-role-badge {
        display: inline-flex;
        align-items: center;
        padding: 2px 8px;
        border-radius: 8px;
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .user-role-admin {
        background: linear-gradient(135deg, #f59e0b, #d97706);
        color: white;
        box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
    }

    .user-role-user {
        background: linear-gradient(135deg, #10b981, #059669);
        color: white;
        box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
    }

    /* Restricted Access Indicators */
    .restricted-content {
        position: relative;
    }

    .restricted-content::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.05);
        border-radius: inherit;
        pointer-events: none;
    }

    .access-denied-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.1);
        border-radius: inherit;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(2px);
    }

    .access-denied-message {
        background: rgba(239, 68, 68, 0.9);
        color: white;
        padding: 8px 12px;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 500;
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
    }

    /* Enhanced Navigation for Role-based Access */
    .nav-link.disabled {
        opacity: 0.5;
        pointer-events: none;
        cursor: not-allowed;
    }

    .nav-link.admin-only {
        position: relative;
    }

    .nav-link.admin-only::after {
        content: 'ADMIN';
        position: absolute;
        top: 8px;
        right: 8px;
        font-size: 8px;
        background: linear-gradient(135deg, #f59e0b, #d97706);
        color: white;
        padding: 2px 4px;
        border-radius: 4px;
        font-weight: 600;
        letter-spacing: 0.5px;
    }

    /* Responsive Authentication UI */
    @media (max-width: 768px) {
        #login-modal .bg-white\/90 {
            margin: 16px;
            padding: 24px;
        }

        #user-info {
            padding: 12px;
        }

        #user-avatar {
            width: 32px;
            height: 32px;
            font-size: 12px;
        }

        .user-role-badge {
            font-size: 9px;
            padding: 1px 6px;
        }
    }

    /* Animations */
    @keyframes slideInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes shake {

        0%,
        100% {
            transform: translateX(0);
        }

        10%,
        30%,
        50%,
        70%,
        90% {
            transform: translateX(-5px);
        }

        20%,
        40%,
        60%,
        80% {
            transform: translateX(5px);
        }
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    /* Session Timeout Warning */
    .session-warning {
        position: fixed;
        top: 20px;
        right: 20px;
        background: linear-gradient(135deg, #f59e0b, #d97706);
        color: white;
        padding: 12px 16px;
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(245, 158, 11, 0.3);
        z-index: 60;
        display: flex;
        align-items: center;
        gap: 8px;
        animation: slideInRight 0.3s ease;
    }

    @keyframes slideInRight {
        from {
            opacity: 0;
            transform: translateX(100%);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* Permission-based Button States */
    .btn-restricted {
        opacity: 0.6;
        cursor: not-allowed;
        position: relative;
    }

    .btn-restricted::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.1);
        border-radius: inherit;
        pointer-events: none;
    }

    .btn-restricted:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    /* Enhanced Action Buttons for Role-based Access */
    .action-btn.hidden-for-user {
        display: none;
    }

    .action-btn.restricted {
        opacity: 0.3;
        pointer-events: none;
    }

    /* User Context Indicator */
    .user-context-badge {
        position: fixed;
        bottom: 20px;
        right: 20px;
        background: var(--glass-bg);
        backdrop-filter: blur(20px);
        border: 1px solid var(--glass-border);
        border-radius: 12px;
        padding: 8px 12px;
        font-size: 12px;
        color: #6b7280;
        z-index: 30;
        display: flex;
        align-items: center;
        gap: 6px;
        box-shadow: var(--shadow-soft);
    }

    .user-context-badge i {
        color: #3b82f6;
    }

    /* Login Form Focus States */
    #login-form .relative {
        position: relative;
    }

    #login-form .relative i {
        transition: all 0.3s ease;
    }

    #login-form input:focus+i {
        color: #3b82f6;
        transform: scale(1.1);
    }

    /* Enhanced Security Indicator */
    .security-indicator {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-top: 8px;
        padding: 4px 8px;
        background: rgba(16, 185, 129, 0.1);
        border-radius: 6px;
        font-size: 11px;
        color: #10b981;
    }

    .security-indicator i {
        font-size: 10px;
    }

    /* Loading States Specific to Auth */
    .auth-loading {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #6b7280;
        font-size: 14px;
    }

    .auth-loading .spinner {
        width: 16px;
        height: 16px;
        border: 2px solid #e5e7eb;
        border-top: 2px solid #3b82f6;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    /* Enhanced Modal Backdrop for Login */
    #login-modal {
        backdrop-filter: blur(12px);
        background: rgba(0, 0, 0, 0.6);
    }

    /* Task Assignment Indicator for Current User */
    .my-task {
        border-left: 4px solid #10b981;
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.05));
    }

    .my-task::before {
        content: 'Của tôi';
        position: absolute;
        top: 8px;
        right: 8px;
        background: #10b981;
        color: white;
        font-size: 10px;
        padding: 2px 6px;
        border-radius: 6px;
        font-weight: 500;
    }

    @media (max-width: 768px) {
        .project-tree-item {
            padding: 16px 12px;
        }

        .project-header {
            flex-wrap: wrap;
            gap: 8px;
        }

        .project-info {
            width: 100%;
            margin-bottom: 8px;
        }

        .project-info .flex.items-start.justify-between {
            flex-direction: column;
            gap: 8px;
        }

        .project-info .flex.items-start.justify-between>.flex-1 {
            width: 100%;
        }

        .project-info .flex.items-start.justify-between>.flex.items-center.space-x-2 {
            align-self: flex-end;
            margin-top: 8px;
        }

        /* Task tree mobile fix */
        .task-tree-item {
            padding: 12px;
        }

        .task-info {
            flex-direction: column;
            gap: 8px;
        }

        .task-details {
            width: 100%;
        }

        .task-info>.flex.items-center.space-x-3 {
            justify-content: space-between;
            width: 100%;
        }

        .task-progress {
            order: 1;
        }

        .flex.space-x-1 {
            order: 2;
            flex-shrink: 0;
        }

        /* Ensure action buttons are visible */
        .action-btn {
            min-width: 32px;
            min-height: 32px;
            flex-shrink: 0;
        }
    }

    .user-role-manager {
        background: linear-gradient(135deg, #3b82f6, #2563eb);
        color: white;
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
    }

    .action-btn-view {
        background: rgba(59, 130, 246, 0.05);
        color: #3b82f6;
    }

    .action-btn-view:hover {
        background: rgba(59, 130, 246, 0.1);
        transform: scale(1.1);
    }

    /* Gantt Chart Styles */
    .gantt-view-btn {
        background: white;
        color: #6b7280;
        transition: all 0.2s ease;
    }

    .gantt-view-btn.active {
        background: linear-gradient(135deg, #3b82f6, #8b5cf6);
        color: white;
    }

    .gantt-day.weekend {
        background-color: rgb(237 238 255);
    }

    .gantt-day.today {
        background-color: #dd4b39;
        color: #ffffff;
    }

    .gantt-day-number {
        margin-bottom: 4px;
        font-weight: 500;
    }

    .gantt-day-label {
        font-size: 9px;
        color: #9ca3af;
    }

    .gantt-item {
        display: flex;
        min-height: 32px;
        border-bottom: 1px solid rgba(229, 231, 235, 0.5);
        position: relative;
    }

    .gantt-item:hover {
        background-color: rgba(243, 244, 246, 0.5);
    }

    .gantt-item-label {
        position: relative;
        width: 22rem;
        min-width: 22rem;
        padding: 6px 10px;
        font-size: 13px;
        font-weight: 500;
        display: flex;
        align-items: center;
        background: white;
        border-right: 1px solid rgba(229, 231, 235, 0.8);
        overflow: hidden;
    }

    .gantt-item-label i {
        margin-right: 8px;
        width: 16px;
        text-align: center;
    }

    .gantt-item-actions {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        display: none;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 4px;
        padding: 2px;
        z-index: 10;
    }

    .gantt-item:hover .gantt-item-actions {
        display: flex;
    }

    /* Sticky cho cột tên trong mỗi item - cần min-width đủ lớn cho parent */
    .gantt-item {
        min-width: calc(22rem + 2160px);
        /* label + 90 ngày */
    }

    .gantt-item .gantt-item-label {
        position: sticky;
        left: 0;
        z-index: 10;
        flex-shrink: 0;
        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
    }

    .gantt-bar {
        position: absolute;
        height: 16px;
        top: 8px;
        border-radius: 4px;
        z-index: 5;
        transition: all 0.2s ease;
    }

    .gantt-bar-project {
        background: linear-gradient(135deg, #3b82f6, #818cf8);
        border: 1px solid #3b82f6;
    }

    .gantt-bar-task {
        background: linear-gradient(135deg, #10b981, #34d399);
        border: 1px solid #10b981;
    }

    .gantt-bar-overdue {
        background: linear-gradient(135deg, #ef4444, #f87171);
        border: 1px solid #ef4444;
    }

    .gantt-bar-label {
        position: absolute;
        font-size: 9px;
        color: white;
        font-weight: 500;
        top: 50%;
        transform: translateY(-50%);
        left: 8px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: calc(100% - 16px);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    }

    .gantt-progress {
        position: absolute;
        height: 4px;
        bottom: 3px;
        left: 0;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 2px;
    }

    .gantt-today-line {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 2px;
        background-color: #ef4444;
        z-index: 15;
    }

    /* Sửa CSS cho Gantt Chart để hiển thị các ngày theo hàng ngang */
    /* Container scroll cho Gantt */
    .gantt-scroll-container {
        overflow: auto;
        max-height: 70vh;
        position: relative;
    }

    #gantt-header {
        display: flex;
        flex-direction: row;
        align-items: center;
        border-bottom: 1px solid #e5e7eb;
        padding-bottom: 8px;
        margin-bottom: 8px;
    }

    /* Sticky header khi cuộn dọc */
    .gantt-header-sticky {
        position: sticky;
        top: 0;
        z-index: 20;
        background: white;
        min-width: calc(22rem + 2160px);
        /* Đảm bảo đủ rộng cho sticky ngang */
    }

    /* Sticky cột tên header khi cuộn ngang */
    .gantt-label-sticky {
        position: sticky;
        left: 0;
        z-index: 25;
        /* Cao hơn để nằm trên cả khi cuộn 2 hướng */
        background: white;
        flex-shrink: 0;
        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
    }

    /* Đánh dấu ngày đầu tháng */
    .gantt-day.first-of-month {
        border-left: 2px solid #3b82f6;
        background: rgba(59, 130, 246, 0.05);
    }

    .gantt-day {
        min-width: 24px;
        flex: 0 0 24px;
        max-width: 24px;
        font-size: 10px;
        text-align: center;
        border-right: 1px solid rgba(229, 231, 235, 0.5);
        position: relative;
        box-sizing: border-box;
    }

    .gantt-days {
        display: flex !important;
        flex-direction: row !important;
        flex: 1;
        min-width: 2160px;
        /* 90 ngày x 24px */
    }

    .gantt-item-timeline {
        display: flex;
        flex-direction: row;
        flex: 1;
        position: relative;
        min-width: 2160px;
        /* 90 ngày x 24px */
        box-sizing: border-box;
    }

    .gantt-item[data-type="task"] .gantt-item-label span {
        font-size: 0.7rem;
        /* Giảm kích thước chữ tên nhiệm vụ */
        color: #6b7280;
    }

    .gantt-item[data-type="task"] .gantt-item-label .text-xs {
        font-size: 0.5rem;
        /* Giảm kích thước chữ thông tin phụ */
        color: #6b7280;
    }

    /* Gantt task indent và icon nhỏ */
    .gantt-item[data-type="task"] .gantt-item-label {
        padding-left: 2rem;
        /* Tạo indent cho nhiệm vụ */
    }

    .gantt-item[data-type="task"] .gantt-item-label i {
        font-size: 8px;
        /* Giảm kích thước chấm màu */
    }

    /* Gantt tooltip */
    .gantt-bar {
        position: relative;
    }

    .gantt-bar::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.9);
        color: white;
        padding: 8px 12px;
        border-radius: 6px;
        font-size: 12px;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 1000;
        pointer-events: none;
    }

    .gantt-bar:hover::after {
        opacity: 1;
        visibility: visible;
    }

    /* Thêm vào file css.html */
    .gantt-link-icon {
        display: inline-flex;
        align-items: center;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 4px;
        padding: 0 4px;
        margin-left: 4px;
        color: white;
        font-size: 10px;
        line-height: 1.5;
        text-decoration: none;
        transition: all 0.2s ease;
    }

    .gantt-link-icon:hover {
        background: rgba(255, 255, 255, 0.5);
        transform: scale(1.1);
    }

    .gantt-link-icon i {
        font-size: 8px;
        margin-right: 2px;
    }

    /* Thêm vào file css.html */
    .gantt-item-label .flex.gap-2 {
        max-width: 200px;
        flex-wrap: wrap;
    }

    .gantt-item-label .flex.gap-2 a {
        background-color: rgba(59, 130, 246, 0.1);
        padding: 2px 6px;
        border-radius: 4px;
        transition: all 0.2s ease;
        white-space: nowrap;
        margin-bottom: 2px;
    }

    .gantt-item-label .flex.gap-2 a:hover {
        background-color: rgba(59, 130, 246, 0.2);
        transform: translateY(-1px);
    }

    /* CSS điều chỉnh cho Sơ đồ Gantt trên thiết bị di động - Fixed Version */
    @media (max-width: 767px) {

        /* Header và controls */
        #gantt-section .text-2xl {
            font-size: 1.25rem;
        }

        #gantt-section .flex.items-center.justify-between {
            flex-direction: column;
            gap: 12px;
            align-items: center;
        }

        #gantt-search {
            width: 100%;
            max-width: 280px;
        }

        /* Container chính với scroll ngang */
        #gantt-container {
            overflow-x: auto;
            overflow-y: visible;
            -webkit-overflow-scrolling: touch;
            margin-top: 16px;
            width: 100%;
        }

        /* Header layout - QUAN TRỌNG: Tính toán chính xác */
        #gantt-header {
            display: flex;
            width: max-content;
            min-width: calc(180px + 2880px);
            /* label + 90 ngày */
        }

        /* Label column EXACTLY match - STICKY */
        #gantt-header> :first-child {
            position: sticky;
            left: 0;
            z-index: 25;
            width: 180px;
            min-width: 180px;
            flex-shrink: 0;
            box-sizing: border-box;
            background: white;
            box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
        }

        /* Days container - 90 ngày × 32px = 2880px */
        .gantt-days {
            display: flex;
            flex-direction: row;
            width: calc(90 * 32px);
            min-width: 2880px;
            /* 90 ngày x 32px */
            flex-shrink: 0;
        }

        /* Mỗi ngày cố định 32px */
        .gantt-day {
            width: 32px;
            min-width: 32px;
            max-width: 32px;
            flex: 0 0 32px;
            font-size: 10px;
            text-align: center;
            padding: 3px 1px;
            border-right: 1px solid rgba(229, 231, 235, 0.4);
            box-sizing: border-box;
        }

        .gantt-day-number {
            font-size: 10px;
            font-weight: 600;
            margin-bottom: 1px;
            line-height: 1;
        }

        .gantt-day-label {
            font-size: 8px;
            color: #6b7280;
            line-height: 1;
        }

        /* Item layout khớp với header */
        .gantt-item {
            display: flex;
            width: max-content;
            min-width: calc(180px + 2880px);
            /* label + 90 ngày x 32px */
            min-height: 36px;
            border-bottom: 1px solid rgba(229, 231, 235, 0.3);
            align-items: center;
        }

        /* Label column khớp với header - STICKY */
        .gantt-item-label {
            position: sticky;
            left: 0;
            z-index: 10;
            width: 180px;
            min-width: 180px;
            padding: 6px 8px 6px 10px;
            font-size: 12px;
            font-weight: 500;
            box-sizing: border-box;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            background: white;
            border-right: 1px solid rgba(229, 231, 235, 0.8);
            overflow: hidden;
            box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
        }

        /* Timeline container khớp với .gantt-days - 90 ngày */
        .gantt-days,
        .gantt-item-timeline {
            width: calc(90 * 32px);
            min-width: 2880px;
            /* 90 ngày x 32px */
            position: relative;
            height: 36px;
            box-sizing: border-box;
        }

        /* Thanh tiến độ */
        .gantt-bar {
            position: absolute;
            height: 14px;
            top: 11px;
            transform: translateY(-50%);
            border-radius: 4px;
            z-index: 5;
            min-width: 8px;
            /* Đảm bảo visible ngay cả với task ngắn */
        }

        .gantt-bar-label {
            position: absolute;
            font-size: 9px;
            color: white;
            font-weight: 500;
            top: 50%;
            transform: translateY(-50%);
            left: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: calc(100% - 8px);
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
            line-height: 1;
        }

        /* Hover effects */
        .gantt-item:hover {
            background-color: rgba(243, 244, 246, 0.5);
        }

        /* Toggle button */
        .gantt-toggle-btn {
            width: 18px;
            height: 18px;
            padding: 0;
            margin-right: 4px;
            flex-shrink: 0;
            font-size: 9px;
        }

        /* Task indentation */
        .gantt-task-item .gantt-item-label {
            padding-left: 24px;
        }

        /* Action buttons */
        .gantt-item-actions {
            position: absolute;
            right: 2px;
            top: 50%;
            transform: translateY(-50%);
            display: none;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 4px;
            padding: 2px;
        }

        .gantt-item:hover .gantt-item-actions {
            display: flex;
            gap: 2px;
        }

        .gantt-item-actions .action-btn {
            width: 24px;
            height: 24px;
            font-size: 10px;
        }

        /* Scrollbar styling */
        #gantt-container::-webkit-scrollbar {
            height: 8px;
        }

        #gantt-container::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.05);
            border-radius: 4px;
        }

        #gantt-container::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.2);
            border-radius: 4px;
        }

        #gantt-container::-webkit-scrollbar-thumb:hover {
            background: rgba(0, 0, 0, 0.3);
        }

        /* Special day colors */
        .gantt-day.weekend {
            background-color: rgba(229, 231, 235, 0.4);
        }

        .gantt-day.today {
            background-color: #ef4444;
            color: white;
            font-weight: 700;
        }

        /* Progress bar inside gantt bar */
        .gantt-progress {
            position: absolute;
            height: 4px;
            bottom: 2px;
            left: 2px;
            background: rgba(255, 255, 255, 0.6);
            border-radius: 2px;
        }

        /* Bar colors */
        .gantt-bar-project {
            background: linear-gradient(135deg, #3b82f6, #818cf8);
            border: 1px solid #3b82f6;
        }

        .gantt-bar-task {
            background: linear-gradient(135deg, #10b981, #34d399);
            border: 1px solid #10b981;
        }

        .gantt-bar-overdue {
            background: linear-gradient(135deg, #ef4444, #f87171);
            border: 1px solid #ef4444;
        }

        /* Project task groups */
        .gantt-project-tasks:not(.hidden) {
            /* Tasks được render với cùng structure, không cần margin */
        }

        /* Text truncation trong label */
        .gantt-item-label span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex: 1;
        }

        /* Links trong task labels */
        .gantt-item-label .flex.gap-2 {
            flex-wrap: nowrap;
            overflow-x: auto;
            max-width: 100px;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .gantt-item-label .flex.gap-2::-webkit-scrollbar {
            display: none;
        }

        .gantt-item-label a {
            font-size: 9px !important;
            padding: 1px 3px !important;
            white-space: nowrap;
            flex-shrink: 0;
        }
    }

    .action-btn-copy {
        background: rgba(16, 185, 129, 0.1);
        color: #10b981;
    }

    .action-btn-copy:hover {
        background: rgba(16, 185, 129, 0.2);
        transform: scale(1.1);
    }

    #tasks-section table {
        border-collapse: separate;
        border-spacing: 0;
    }

    #tasks-section th {
        position: sticky;
        top: 0;
        z-index: 10;
    }

    #tasks-section tbody tr:hover {
        background-color: rgba(249, 250, 251, 0.8);
    }

    .form-input:disabled,
    .form-textarea:disabled,
    .form-select:disabled {
        background-color: #f3f4f6;
        color: #6c0000;
        cursor: not-allowed;
        border-color: #d1d5db;
    }

    .form-input:disabled:hover,
    .form-textarea:disabled:hover,
    .form-select:disabled:hover {
        background-color: #f3f4f6;
        border-color: #d1d5db;
        box-shadow: none;
    }

    @media (max-width: 768px) {
        #tasks-search {
            width: 100%
        }

        #projects-section .flex.items-center.justify-between,
        #tasks-section .flex.items-center.justify-between {
            flex-direction: column;
            align-items: center;
            gap: 12px;
        }

        #projects-section .flex.items-center.space-x-3,
        #tasks-section .flex.items-center.space-x-3 {
            flex-direction: column;
            gap: 8px;
            align-items: center;
            width: 100%;
            max-width: 320px;
        }

        #projects-search,
        #tasks-search {
            width: 100% !important;
            max-width: 280px;
        }

        #projects-status-filter,
        #tasks-status-filter {
            width: 100% !important;
            max-width: 200px;
        }

        #add-project-standalone,
        #add-task-standalone {
            width: 100%;
            max-width: 250px;
            justify-content: center;
        }

        #tasks-section .bg-gradient-to-r .flex.items-center.justify-between {
            flex-direction: column;
            align-items: flex-start;
            gap: 6px;
        }

        #tasks-section .bg-gradient-to-r .flex.items-center.space-x-3 {
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            flex-wrap: nowrap;
        }

        #tasks-section .bg-gradient-to-r .flex.items-center.space-x-3> :first-child {
            flex: 1;
            min-width: 0;
        }

        #tasks-section .bg-gradient-to-r .bg-white {
            flex-shrink: 0;
            margin-left: 8px;
        }

        #tasks-section .bg-gradient-to-r h3 {
            font-size: 12px;
            line-height: 1.2;
        }

        /* Fix table overflow on mobile */
        #tasks-section .overflow-x-auto {
            font-size: 12px;
        }

        #tasks-section th,
        #tasks-section td {
            padding: 8px 4px;
            white-space: nowrap;
            min-width: auto;
        }

        #tasks-section .font-medium {
            font-size: 12px;
            max-width: 120px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        #change-password-btn,
        #logout-btn {
            font-size: 10px;
            padding: 4px 8px;
        }

        #change-password-btn i,
        #logout-btn i {
            font-size: 8px;
            margin-right: 4px;
        }

        .status-badge {
            font-size: 9px;
            padding: 1px 4px;
        }

        .modal-content .grid.grid-cols-3 .form-label {
            font-size: 11px;
            line-height: 1.2;
            margin-bottom: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .modal-content .grid.grid-cols-3 .form-group {
            margin-bottom: 12px;
        }

        .modal-content .grid.grid-cols-3 .form-input,
        .modal-content .grid.grid-cols-3 .form-select {
            padding: 8px 10px;
            font-size: 13px;
        }

        /* Specific labels that are too long */
        .modal-content .grid.grid-cols-3 .form-label:contains("Ngày hoàn thành") {
            font-size: 10px;
        }

        #chat-btn+div {
            position: fixed !important;
            right: 16px !important;
            left: auto !important;
            top: 60px !important;
            width: calc(100vw - 32px) !important;
            max-width: 350px !important;
            transform: translateX(0) !important;
        }
    }

    #sidebar .absolute.bottom-6 .glass-card {
        padding: 8px;
    }

    #sidebar .absolute.bottom-6 .text-sm {
        font-size: 11px;
        margin-bottom: 4px
    }

    #sidebar .absolute.bottom-6 .w-8 {
        width: 24px;
        height: 24px;
    }

    #sidebar .absolute.bottom-6 .text-xs {
        font-size: 10px;
        margin-top: 4px;
    }

    #sidebar .absolute.bottom-6 .space-x-4 {
        gap: 8px;
    }

    .status-paused {
        background: rgba(245, 158, 11, 0.1);
        color: #f59e0b;
        border: 1px solid rgba(245, 158, 11, 0.2);
    }

    .status-canceled {
        background: rgba(239, 68, 68, 0.1);
        color: #ef4444;
        border: 1px solid rgba(239, 68, 68, 0.2);
    }

    .gantt-task-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        background: rgba(59, 130, 246, 0.12);
        color: #3b82f6;
        border-radius: 50%;
        font-size: 10px;
        font-weight: 600;
        margin-left: 6px;
        padding: 2px 4px;
        line-height: 1;
    }

    #tasks-section table th,
    #tasks-section table td {
        padding: 6px 4px;
        line-height: 1.2;
    }

    #tasks-section .font-medium {
        font-size: 13px;
        line-height: 1.3;
    }

    #tasks-section .text-sm {
        font-size: 12px;
        line-height: 1.2;
    }

    #tasks-section .text-xs {
        font-size: 11px;
        line-height: 1.1;
    }

    .glass-card table th,
    .glass-card table td {
        padding: 4px 8px;
        line-height: 1.2;
    }

    /* --- Custom Checkbox (Xanh lá) --- */
    .quick-complete-checkbox {
        appearance: none;
        -webkit-appearance: none;
        width: 16px;
        height: 16px;
        border: 2px solid #cbd5e1;
        border-radius: 4px;
        cursor: pointer;
        position: relative;
        margin-right: 8px;
        background-color: white;
        transition: all 0.2s ease;
        flex-shrink: 0;
    }

    .quick-complete-checkbox:checked {
        background-color: #3b82f6;
        border-color: #3b82f6;
    }

    .quick-complete-checkbox:checked::after {
        content: '\f00c';
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        color: white;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 10px;
        /* Giảm size icon cho vừa ô */
    }

    /* --- Custom Confirm Modal --- */
    .confirm-modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(4px);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    .confirm-modal-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .confirm-modal-box {
        background: white;
        border-radius: 20px;
        padding: 24px;
        width: 90%;
        max-width: 400px;
        text-align: center;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        transform: scale(0.9);
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .confirm-modal-overlay.active .confirm-modal-box {
        transform: scale(1);
    }

    /* --- Drag and Drop Styles --- */
    .draggable-item {
        cursor: grab;
    }

    .draggable-item:active {
        cursor: grabbing;
    }

    .draggable-item.dragging {
        opacity: 0.5;
        background-color: #f3f4f6;
        border: 2px dashed #3b82f6;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }

    /* Chỉ cho phép kéo thả trong container có class này */
    .sortable-list {
        position: relative;
    }

    /* Clickable Stat Cards */
    .modern-stat-card {
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .modern-stat-card:active {
        transform: scale(0.98);
    }

    /* Stat List Item Styles */
    .stat-list-item {
        padding: 12px;
        border-bottom: 1px solid #f3f4f6;
        cursor: pointer;
        transition: background-color 0.2s;
    }

    .stat-list-item:hover {
        background-color: #f9fafb;
    }

    .stat-list-item:last-child {
        border-bottom: none;
    }

    #task-modal,
    #project-modal,
    #staff-modal,
    #project-details-modal {
        z-index: 70 !important;
        /* Cao hơn z-index: 60 của modal danh sách */
    }

    @media (max-width: 767px) {
        .gantt-task-count {
            padding: 0;
        }

        .gantt-task-count {
            min-width: 16px;
            max-width: 16px;
            height: 16px;
            font-size: 9px;
            margin-left: 4px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
        }
    }

    /* Sticky first column for tasks table */
    #tasks-section table th:first-child,
    #tasks-section table td:first-child {
        position: sticky;
        left: 0;
        background: white;
        z-index: 2;
        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);

        /* THÊM 3 DÒNG SAU ĐỂ GIỚI HẠN CHIỀU RỘNG */
        width: 250px;
        /* Đặt chiều rộng cố định */
        max-width: 250px;
        /* Ngăn không cho giãn rộng hơn */
        white-space: normal;
        /* Cho phép xuống dòng nếu tên dài */
    }

    #tasks-section table thead th:first-child {
        z-index: 3;
        background: #f9fafb;
    }

    @media (max-width: 768px) {
        #tasks-section table th:first-child {}

        #tasks-section table th:first-child,
        #tasks-section table td:first-child {
            min-width: 140px;
            max-width: 140px;
        }
    }

    /* === REMINDER PANEL STYLES === */

    /* Expanded modal for task with reminders panel */
    .modal-content-expanded {
        max-width: 900px !important;
        width: 95% !important;
        max-height: 90vh;
        overflow-y: auto;
    }

    /* Reminders panel styling */
    .reminders-panel {
        min-width: 280px;
        flex-shrink: 0;
    }

    .reminders-list {
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.05);
    }

    .reminders-list::-webkit-scrollbar {
        width: 6px;
    }

    .reminders-list::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.05);
        border-radius: 3px;
    }

    .reminders-list::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 3px;
    }

    .reminders-list::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0.3);
    }

    /* Reminder item hover effect */
    .reminder-item {
        transition: all 0.2s ease;
    }

    .reminder-item:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    /* Preserve line breaks in reminder content */
    .reminder-content {
        white-space: pre-wrap;
        word-break: break-word;
    }

    /* Reminder action buttons */
    .reminder-item button {
        opacity: 0.6;
        transition: all 0.2s ease;
    }

    .reminder-item:hover button {
        opacity: 1;
    }

    /* Responsive adjustments for reminders panel */
    @media (max-width: 768px) {
        .modal-content-expanded {
            max-width: 100% !important;
        }

        .modal-content-expanded .flex.gap-6 {
            flex-direction: column;
        }

        .reminders-panel {
            width: 100% !important;
            min-width: 100%;
            border-left: none !important;
            border-top: 1px solid #e5e7eb;
            padding-left: 0 !important;
            padding-top: 1.5rem;
            margin-top: 1.5rem;
        }

        .reminders-list {
            max-height: 200px !important;
        }
    }

    /* Reminder modal overlay */
    #reminder-modal-container {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 200;
    }

    /* === PROPOSAL STATUS TABS === */
    .proposal-status-tab {
        padding: 8px 16px;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 8px;
        border: 1px solid transparent;
    }

    .proposal-status-tab:hover {
        transform: translateY(-1px);
    }

    .proposal-status-tab.active {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        border-color: currentColor;
    }

    .proposal-status-tab .count-badge {
        padding: 2px 8px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 600;
    }

    /* Proposal Table Styles */
    .proposal-group {
        margin-bottom: 24px;
    }

    .proposal-group-header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 16px;
        border-radius: 12px 12px 0 0;
        font-weight: 600;
    }

    .proposal-row {
        display: grid;
        grid-template-columns: 100px 1fr 1fr 120px 100px 80px;
        gap: 12px;
        padding: 12px 16px;
        border-bottom: 1px solid #e5e7eb;
        align-items: center;
        transition: background-color 0.2s;
    }

    .proposal-row:hover {
        background-color: #f9fafb;
    }

    .proposal-row.clickable {
        cursor: pointer;
    }

    .proposal-header-row {
        display: grid;
        gap: 8px;
        padding: 8px 12px;
        background-color: #f3f4f6;
        border-bottom: 1px solid #e5e7eb;
        font-size: 12px;
        min-width: 800px;
    }

    /* Wrapper for horizontal scroll on mobile */
    .proposal-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .proposal-row {
        min-width: 800px;
    }

    /* Uniform font size for all proposal content */
    .proposal-row,
    .proposal-row p,
    .proposal-row span,
    .proposal-row a,
    .proposal-row div {
        font-size: 12px !important;
    }

    .proposal-row {
        padding: 8px 12px;
        gap: 8px;
    }

    /* Modal Overlay Transition */
    .modal-overlay {
        opacity: 1;
        visibility: visible;
    }

    .modal-overlay.closing {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .modal-overlay .modal-content {
        transform: scale(1);
        opacity: 1;
    }

    .modal-overlay.closing .modal-content {
        transform: scale(1.05);
        opacity: 0;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    /* Mobile: Hide page title & collapse filter to icon */
    @media (max-width: 768px) {
        #page-title {
            display: none;
        }
        #overview-filter-container {
            position: static !important;
            transform: none !important;
        }

        #overview-filter-container > div > .relative {
            width: 38px;
            overflow: hidden;
            transition: width 0.3s ease;
            border-radius: 10px;
        }

        #overview-filter-container > div > .relative:focus-within {
            width: 220px;
        }

        #overview-project-filter {
            cursor: pointer;
            color: transparent;
            caret-color: transparent;
        }

        #overview-project-filter::placeholder {
            color: transparent;
        }

        #overview-filter-container > div > .relative:focus-within #overview-project-filter {
            color: inherit;
            caret-color: auto;
        }

        #overview-filter-container > div > .relative:focus-within #overview-project-filter::placeholder {
            color: #9ca3af;
        }

        #project-filter-error {
            left: 0 !important;
            transform: none !important;
        }
    }

    /* Modal Overlay Transition */
    .modal-overlay {
        opacity: 1;
        visibility: visible;
    }

/* ============================================================================
   GANTT XEM THEO THÁNG (2026-08-26) — ghi đè CỐ Ý nằm CUỐI file để thắng mọi
   luật cũ: cột ngày giãn full màn hình, thanh thời gian dày hơn, cột mũi tên
   riêng ngoài khối icon+tên, thẻ tooltip tự vẽ cho tên công việc/nhiệm vụ.
   ============================================================================ */

/* Ngày/thứ to ra và chiếm đều bề ngang (tháng 28–31 ngày vẫn full màn hình). */
.gantt-day {
    flex: 1 1 0 !important;
    min-width: 34px !important;
    max-width: none !important;
    padding-top: 3px;
}

.gantt-day-number {
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.15;
}

.gantt-day-label {
    font-size: 12.5px !important;
    color: #4b5563 !important;
}

/* Header ngày và timeline của MỌI hàng dùng CHUNG MỘT định nghĩa lưới cột:
   repeat(var(--gantt-so-ngay), minmax(0,1fr)) — số ngày do renderGanttChart đặt lên
   #gantt-container mỗi lần vẽ. Thanh đặt bằng grid-column nên KHÔNG THỂ lệch ô ngày. */
.gantt-days,
.gantt-item-timeline {
    display: grid !important;
    grid-template-columns: repeat(var(--gantt-so-ngay, 31), minmax(0, 1fr)) !important;
    min-width: 0 !important;
    align-items: stretch;
}

/* Thanh không bao giờ tràn ra ngoài lưới ngày — cắt đúng ranh ô ngày cuối. */
.gantt-item-timeline {
    overflow: hidden !important;
}

/* Ô ngày: kích thước do LƯỚI quyết định (1fr), hết flex/min-width cũ gây lệch. */
.gantt-day {
    min-width: 0 !important;
    max-width: none !important;
    padding-top: 3px;
}

/* Hàng CAO HƠN 1,5 LẦN (32px cũ → 48px) cho cả nhóm / công việc / CV con / nhiệm vụ. */
.gantt-item {
    min-width: 0 !important;
    min-height: 48px !important;
}

.gantt-item-label {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    font-size: 14px !important;
}

/* Thanh thời gian dày (~38px): là MỘT Ô của lưới (grid-column do JS tính theo ngày),
   position:relative để thanh tiến độ % bên trong neo đúng vào thanh. */
.gantt-bar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    height: 38px !important;
    border-radius: 7px !important;
    display: flex;
    align-items: center;
    align-self: center;
    overflow: hidden;
}

.gantt-bar .gantt-bar-label,
.gantt-bar-label {
    position: static !important;
    transform: none !important;
    font-size: 12px !important;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 0 10px !important;
}

/* Cột mũi tên riêng — mũi tên NẰM NGOÀI khối icon+tên nên mọi cấp thẳng hàng từ icon. */
.gantt-toggle-slot {
    display: inline-flex;
    width: 20px;
    min-width: 20px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.gantt-toggle-slot .gantt-node-toggle {
    margin-right: 0 !important;
}

/* Vùng đứng tên đã bỏ các padding-lệch cũ của mức nhiệm vụ/CV con. */
.gantt-item[data-type="task"] .gantt-item-label,
.gantt-item-subwork .gantt-item-label {
    padding-left: 0 !important;
}

/* Ghi chú «Không hiển thị trong khoảng này» trải trọn bề ngang lưới của hàng. */
.gantt-non-visible-task {
    grid-column: 1 / -1 !important;
}

/* Tên hover được gạch chấm nhạt gợi ý có thông tin thêm. */
.gantt-hover-name {
    cursor: help;
    border-bottom: 1px dashed rgba(59, 130, 246, 0.45);
}

/* Thẻ tooltip tự vẽ — hiện cạnh con trỏ khi rê lên TÊN. */
#tooltip-gantt {
    position: fixed;
    z-index: 90;
    pointer-events: none;
    display: none;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.14);
    padding: 10px 12px;
    font-size: 12.5px;
    line-height: 1.6;
    color: #374151;
    max-width: 360px;
}

#tooltip-gantt .tieu-de {
    font-weight: 700;
    color: #111827;
    font-size: 13px;
    margin-bottom: 4px;
}

#tooltip-gantt .dong b {
    color: #6b7280;
    font-weight: 600;
}

/* MỌI hàng THẲNG LỀ TRÁI — phân cấp chỉ bằng cột mũi tên + màu icon, hết thụt dòng
   theo cấp (phản hồi 2026-08-27: công việc / CV con / nhiệm vụ không được lệch lề). */
.gantt-item,
.gantt-project-group > div[id^="gantt-"] {
    padding-left: 0 !important;
}

/* MÀU THANH GANTT — ghim đè để không bao giờ mất màu: công việc (xanh), CV con (cam),
   nhiệm vụ (xanh lá), trễ hạn (đỏ). .gantt-bar-subwork trước giờ KHÔNG có luật màu nào
   ⇒ thanh công việc con trong suốt (đúng phản hồi «một số công việc bị mất màu»). */
.gantt-bar-project {
    background: linear-gradient(135deg, #3b82f6, #818cf8) !important;
    border: 1px solid #3b82f6 !important;
}

.gantt-bar-subwork {
    background: linear-gradient(135deg, #f59e0b, #fbbf24) !important;
    border: 1px solid #f59e0b !important;
}

.gantt-bar-task {
    background: linear-gradient(135deg, #10b981, #34d399) !important;
    border: 1px solid #10b981 !important;
}

.gantt-bar-overdue {
    background: linear-gradient(135deg, #ef4444, #f87171) !important;
    border: 1px solid #ef4444 !important;
}

.gantt-progress {
    background: rgba(255, 255, 255, 0.55) !important;
}

/* THỦ PHẠM LỆCH CUỐI CÙNG (2026-08-27): luật cũ ép #gantt-header tối thiểu
   calc(180px + 2880px) và .gantt-days/.gantt-item-timeline min-width 2880px ⇒ header
   ~90px/ô trong khi hàng co về bề rộng màn hình ~40px/ô ⇒ hai lưới khác cỡ, thanh
   không bao giờ khớp ô ngày. Khử hết — header và hàng cùng bề rộng, cùng số cột. */
#gantt-header,
.gantt-header-sticky {
    min-width: 0 !important;
    width: auto !important;
}

#gantt-header > :first-child,
.gantt-label-sticky,
.gantt-item .gantt-item-label {
    min-width: 22rem !important;
    width: 22rem !important;
    max-width: 22rem !important;
}

/* ============================================================================
   THANH BỘ LỌC MỘT DÒNG (2026-08-28 — yêu cầu «đưa tất cả bộ lọc trên cùng 1 dòng»)
   Vì tailwind.min.css ở đây là BẢN DỰNG SẴN (không có flex-nowrap) nên luật một
   dòng phải viết bằng CSS thường, không thêm class Tailwind mới vào HTML.
   Dùng cho đầu trang «Quản lý công việc» và «Quản lý nhiệm vụ».
   ========================================================================== */
.thanh-loc {
    display: flex;
    flex-wrap: nowrap; /* KHÔNG cho rớt dòng — đúng yêu cầu «cùng 1 dòng» */
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 1 1 auto;
    justify-content: flex-end;
    overflow-x: auto; /* màn hình hẹp thì cuộn ngang, vẫn một dòng */
    overflow-y: hidden;
    padding-bottom: 2px;
}

/* Mọi ô trong thanh lọc: không co méo, không tự xuống dòng chữ */
.thanh-loc > * {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Ô tìm kiếm là phần tử DUY NHẤT được co lại khi hết chỗ */
.thanh-loc .thanh-loc-tim {
    flex: 0 1 16rem;
    min-width: 9rem;
}

.thanh-loc .thanh-loc-icon {
    margin-left: 0.25rem;
}

/* Chữ trong nút bị xếp DỌC ở ảnh phản hồi 2026-08-28 vì nút bị bóp còn ~40px */
.thanh-loc .thanh-loc-nut {
    white-space: nowrap;
    flex: 0 0 auto;
}

.thanh-loc select,
.thanh-loc .form-select {
    width: auto;
    min-width: 6rem;
}

/* Bề rộng từng ô đặt Ở ĐÂY (không đặt bằng class Tailwind w-* vì bản dựng sẵn
   thiếu w-28/w-32, và `.thanh-loc select` vẫn thắng `.w-40` về độ ưu tiên). */
#projects-month-select,
#tasks-month-select {
    width: 8rem;
}

#projects-year-select,
#tasks-year-select {
    width: 6.5rem;
}

#projects-dept-filter,
#tasks-dept-filter,
#tasks-staff-filter {
    width: 10rem;
}

#projects-status-filter,
#tasks-status-filter {
    width: 9rem;
}

/* Tiêu đề mục không được ăn hết chỗ của thanh lọc */
.tieu-de-thanh-loc {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* ============================================================================
   TRANG QUẢN LÝ TÀI KHOẢN (2026-08-28)
   ========================================================================== */
.the-tai-khoan {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 0.75rem 1.5rem;
}

/* Xếp dọc cách nhau 1rem — bản tailwind dựng sẵn KHÔNG có space-y-4 */
.khoi-doc {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.the-tai-khoan .dong-tt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid rgba(209, 213, 219, 0.5);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.6);
}

.the-tai-khoan .dong-tt .nhan {
    font-size: 12px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.the-tai-khoan .dong-tt .gia-tri {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    word-break: break-word;
}

/* ============================================================================
   HÀNG CHỜ PHÊ DUYỆT (2026-09-02) — hai tab con của trang #cho-duyet-section.
   Kiểu tab gạch chân, cùng tinh thần với các tab của modal nhiệm vụ nhưng khai riêng vì đó là
   tab TRONG modal (class `.tab-btn`), còn đây là tab của một TRANG.
   ============================================================================ */
.tab-cho-duyet {
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.tab-cho-duyet:hover {
    color: #374151;
}

.tab-cho-duyet.active {
    color: #2563eb;
    border-bottom-color: #2563eb;
}

/* Một dòng trong «Phê duyệt kết quả» — khung nhẹ, không dùng glass-card lồng nhau. */
.dong-kq-cho-duyet {
    border-bottom: 1px solid #f3f4f6;
}

.dong-kq-cho-duyet:hover {
    background: #f9fafb;
}

/* ============================================================================
   BẢNG «Kết quả» (modal nhiệm vụ) và «Phê duyệt kết quả» (hàng chờ) — thiết kế lại
   2026-09-03 theo hai sheet của người dùng: bảng PHẲNG, ba cấp cây thành ba cột, mọi
   hành động gộp vào MỘT menu ⋯. Hàng tiêu đề cây (hang-cay-1/2/3) đã gỡ.
   ============================================================================ */

/* Dòng cha của một kết quả — đậm hơn dòng bản để nhìn ra tầng. */
.bang-ket-qua .dong-kq-nhom {
    background: #fff;
}

.bang-ket-qua .dong-kq-nhom:hover,
.bang-kq-cho-duyet .dong-kq-cho-duyet:hover {
    background: #f9fafb;
}

/* Dòng BẢN (1.1, 1.2 …) — nền xám nhạt + vạch trái, thụt vào so với dòng cha. */
.bang-ket-qua .dong-ban-kq {
    background: #fafafa;
}

.bang-ket-qua .dong-ban-kq td:first-child {
    border-left: 3px solid #dbeafe;
}

/* Dòng giữ hai khung «Ý kiến» / «Lịch sử» — không viền trên, dính vào dòng cha. */
.bang-ket-qua .dong-kq-panel > td {
    border-top: 0;
}

/* Nút ▸/▾ bung danh sách bản. Ô trống cùng bề rộng để cột 2 không lệch khi chưa có bản. */
.kq-nut-bung,
.kq-nut-bung-trong {
    display: inline-block;
    width: 1.25rem;
    text-align: center;
    color: #9ca3af;
}

.kq-nut-bung:hover {
    color: #2563eb;
}

/* ── MENU «Nút chức năng» ────────────────────────────────────────────────────
   Sheet ghi: «ấn vào đây hiển thị các Hành động để chọn». Trước đây mỗi hành động là
   một nút riêng nên hàng nút tràn ngang bảng; nay một nút ⋯ mở danh sách dọc.
   `position: absolute` + `right: 0` để menu không đẩy giãn ô bảng.

   2026-09-04: hai khai báo dưới chỉ là VỊ TRÍ DỰ PHÒNG. Lúc mở, `batTatMenuKq` DỜI thẻ
   menu ra `<body>` và đặt `position: fixed` bằng JS — vì `.glass-card` / `.modal-content`
   vừa `overflow` cắt vừa có `backdrop-filter` (thẻ có backdrop-filter là khối chứa của cả
   `fixed`, nên đổi sang fixed tại chỗ vẫn bị cắt). Đó là lỗi «bị vấn trong hộp, phải kéo
   chuột xuống mới thấy» người dùng báo.
   ──────────────────────────────────────────────────────────────────────────── */
.kq-menu-boc {
    position: relative;
    display: inline-block;
}

.kq-menu {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 200;
    min-width: 13rem;
    margin-top: 0.25rem;
    padding: 0.25rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px rgb(0 0 0 / 12%);
    text-align: left;
}

.kq-menu-muc {
    display: block;
    width: 100%;
    padding: 0.375rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    color: #374151;
    text-align: left;
    white-space: nowrap;
}

.kq-menu-muc:hover {
    background: #f3f4f6;
    color: #111827;
}

.bang-ket-qua td {
    vertical-align: middle;
}

.bang-ket-qua .form-input {
    width: 100%;
}

/* Hai cột riêng mới: không ép ô số hẹp đến mức che mất giá trị khi modal có thanh nhắc việc. */
.bang-ket-qua th:nth-child(5),
.bang-ket-qua td:nth-child(5) {
    min-width: 7.5rem;
}

.bang-ket-qua th:nth-child(6),
.bang-ket-qua td:nth-child(6) {
    min-width: 5rem;
    white-space: nowrap;
}

.bang-ket-qua input[data-ty-le-file] {
    min-width: 5rem;
}

.kq-menu-muc-chot {
    font-weight: 600;
    color: #1d4ed8;
}

/* ============================================================================
   KHỐI PHÂN CÔNG THU GỌN của modal chi tiết công việc (2026-09-02: «thu gọn đoạn phân
   công ... bé đi»). Trước là thẻ trắng cao ~120px với lưới 5 ô; nay là một dòng chip
   chữ 11px, phần chi tiết ẩn sau nút «Chi tiết».
   ============================================================================ */
.khoi-phan-cong-gon {
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 10px;
    padding: 6px 10px;
}

.phan-cong-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #eef2f7;
    max-width: 100%;
}

.phan-cong-chip-nhan {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #94a3b8;
    white-space: nowrap;
}

.phan-cong-chip-gia {
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    word-break: break-word;
}

.phan-cong-chip-trong {
    font-size: 12px;
    font-style: italic;
    color: #cbd5e1;
}

.nut-chi-tiet-phan-cong {
    font-size: 11px;
    color: #2563eb;
    background: transparent;
    border: 0;
    padding: 2px 6px;
    cursor: pointer;
}

.nut-chi-tiet-phan-cong:hover {
    text-decoration: underline;
}

/* ============================================================================
   CÂY CÔNG VIỆC trong modal chi tiết (2026-09-02: «cây công việc đẹp hơn, thể hiện rõ,
   nhiệm vụ nào thuộc cây con nào, tách bạch giữa các cây con»).
   Mỗi công việc con = một NHÁNH có viền trái đậm; nhiệm vụ bên trong thụt vào sau một
   đường kẻ dọc nhạt nên không thể lẫn nhiệm vụ của nhánh này với nhánh kia.
   ============================================================================ */
.cay-nhanh {
    border-left-width: 4px;
    border-left-color: #60a5fa;
    position: relative;
}

/* Nhánh «Nhiệm vụ trực thuộc công việc» (không qua công việc con) — màu khác để tách bạch. */
.cay-nhanh-le {
    background: #fefce8;
    border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b;
}

.cay-la {
    margin-left: 10px;
    padding-left: 12px;
    border-left: 2px dashed #cbd5e1;
}

/* ============================================================================
   LỚP TAILWIND TRANG DÙNG NHƯNG BẢN ĐÓNG GÓI KHÔNG CÓ (2026-09-04).

   `assets/vendor/tailwind/tailwind.min.css` là bản CẮT SẴN 39 KB (§7 việc 4.3: thư viện
   phải tự chứa, không CDN) nên thiếu một số lớp trang vẫn dùng. Thiếu lớp `text-*` thì
   chữ chỉ sai cỡ/màu; nhưng thiếu lớp `bg-*` của một badge chữ TRẮNG thì badge biến mất
   hẳn — đúng lỗi người dùng báo 2026-09-04: «Số đang hiển thị ở tab hàng chờ màu trắng
   cùng màu với nền nên ko nhìn rõ». `#nav-cho-duyet-badge` mang `bg-rose-600 text-white`
   mà `.bg-rose-600` không tồn tại ⇒ số trắng trên nền trắng.

   Chỉ khai đúng những lớp ĐANG dùng, cùng giá trị với Tailwind — không nhồi cả bảng màu,
   bản đóng gói phải giữ nhỏ. Soát lại bằng: node tools/_tam-soat-lop.mjs (nếu còn).
   ============================================================================ */

/* Mục «Hàng chờ phê duyệt» trên thanh điều hướng: badge số + ô biểu tượng. */
.bg-rose-600 {
    background-color: #e11d48;
}

.bg-rose-100 {
    background-color: #ffe4e6;
}

.text-rose-600 {
    color: #e11d48;
}

/* Badge trạng thái của hai bảng «Kết quả» / «Phê duyệt kết quả» (MAU_TRANG_THAI_FILE):
   «Chờ TP/PP xem» (vàng) mất nền, và «Đã duyệt» (xanh đậm, chữ trắng) mất hẳn như badge trên. */
.bg-yellow-100 {
    background-color: #fef9c3;
}

.text-yellow-700 {
    color: #a16207;
}

.bg-green-800 {
    background-color: #166534;
}

/* Cỡ chữ 11px của badge + hàng tiêu đề hai bảng, và màu ô «—» khi không có gì để hiện. */
.text-\[11px\] {
    font-size: 11px;
    line-height: 16px;
}

.text-gray-300 {
    color: #d1d5db;
}

/* Thông báo phải nằm trên modal chỉnh sửa, hộp xác nhận và trình xem tài liệu. */
#toast-container {
    position: fixed;
    z-index: 2147483647;
    pointer-events: none;
    max-width: min(420px, calc(100vw - 32px));
}
#toast-container .toast { pointer-events: auto; }

.qlcv-dialog { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgb(15 23 42 / 55%); }
.qlcv-dialog > section { background: white; border-radius: 16px; padding: 24px; width: min(760px, 100%); max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 20px 70px #0005; }
.qlcv-dialog h3 { font-size: 20px; font-weight: 700; margin-bottom: 12px; }
.qlcv-dialog-content { overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.qlcv-dialog h4 { font-weight: 600; margin-top: 16px; }
.qlcv-dialog li { margin: 8px 0; }
.qlcv-dialog footer, .review-form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; padding-top: 16px; }
.review-form-actions { position: sticky; bottom: 0; background: white; padding: 16px 20px; border-top: 1px solid #e5e7eb; z-index: 15; flex-shrink: 0; }

/* ─── TAB NHIỆM VỤ — bảng 11 cột, thiết kế lại 2026-09-10 (đợt 3) + chỉnh đợt 4 cùng ngày ──────────
   Yêu cầu người dùng đợt 3: CÙNG một cỡ chữ · tiêu đề cột CĂN GIỮA · cột ít chữ (Ưu tiên, Tỷ lệ,
   Tiến độ, Ngày bắt đầu, Hạn chót, Số bản) thì HẸP lại · tên file dài cắt «…» kèm tooltip ·
   nhìn là phân biệt được từng NHIỆM VỤ và từng FILE KẾT QUẢ.
   ĐỢT 4 thêm: cột RIÊNG «Tên file» nên hàng file LÙI VỀ PHẢI so với tên nhiệm vụ · NÚT MŨI TÊN ▼/▲
   thay cho dấu tích · «Người thực hiện» CĂN GIỮA ô · tên nhiệm vụ TO HƠN tên file đúng 2 CỠ (15px/13px)
   · MÀU CHỮ tên file đổi THEO TIẾN ĐỘ (100% xanh lá, dưới 20% đỏ).
   Phải viết ở app.css chứ không dùng class Tailwind: Tailwind của dự án là BẢN BIÊN DỊCH SẴN
   (assets/vendor/tailwind/tailwind.min.css) nên giá trị tuỳ ý kiểu `w-[86px]` không tồn tại —
   viết vào là class chết mà không một dòng nào báo lỗi. */
.tasks-results-table {
    width: 100%;
    min-width: 1180px;
    table-layout: fixed;
    border-collapse: collapse;
    font-family: inherit;
    font-size: 13px;
    color: #374151;
}
.tasks-results-table th {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #6b7280;
    background: #f9fafb;
    padding: 8px 6px;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
}
.tasks-results-table td {
    padding: 8px;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
    overflow: hidden;
}
.tasks-results-table td.c-giua { text-align: center; }
.tasks-results-table .c-trong { color: #d1d5db; }
/* c-task không khai bề rộng: nó ăn phần còn lại sau MƯỜI cột kia (tổng chín cột số = 63%,
   c-file 15% ⇒ c-task còn 22%, ≈ 260px ở min-width 1180px). */
.tasks-results-table col.c-file  { width: 15%; }
.tasks-results-table col.c-who   { width: 9%; }
.tasks-results-table col.c-prio  { width: 6%; }
.tasks-results-table col.c-ratio { width: 6%; }
.tasks-results-table col.c-prog  { width: 6%; }
.tasks-results-table col.c-start { width: 7%; }
.tasks-results-table col.c-due   { width: 7%; }
.tasks-results-table col.c-vers  { width: 4%; }
.tasks-results-table col.c-state { width: 11%; }
.tasks-results-table col.c-act   { width: 7%; }

/* HÀNG NHIỆM VỤ — gờ đậm phía trên để mỗi nhiệm vụ tách hẳn khỏi nhiệm vụ trước nó. */
.tasks-results-table tr.task-row-chinh { background: #fff; }
.tasks-results-table tr.task-row-chinh > td { border-top: 2px solid #cbd5e1; }
.task-ten-wrap { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
/* NÚT MŨI TÊN ▼/▲ — là NÚT chứ không phải checkbox (TC-KQ-UI-03: tab nhiệm vụ không còn checkbox
   nào sau đợt «bỏ checkbox Hoàn thành»). Mũi tên chỉ HÀNH ĐỘNG: đang gập → ▼ bấm để mở rộng,
   đang mở → ▲ bấm để ẩn. */
.task-files-toggle {
    margin-top: 3px; flex-shrink: 0; cursor: pointer;
    width: 18px; height: 18px; padding: 0; border: 1px solid #cbd5e1; border-radius: 4px;
    background: #fff; color: #2563eb; font-size: 10px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
}
.task-files-toggle:hover { border-color: #2563eb; background: #eff6ff; }
/* Đang ẨN: nút mờ đi — vẫn nhìn thấy là có file, chỉ là đang gập. */
.task-files-toggle-an { color: #9ca3af; background: #f8fafc; }
.task-files-toggle-off { width: 18px; flex-shrink: 0; }
.task-ten { min-width: 0; }
.task-ten-chinh { font-weight: 600; color: #111827; }
/* TÊN NHIỆM VỤ to hơn TÊN FILE đúng HAI cỡ chữ: 15px so với 13px của `.task-file-name`. */
.task-ten-nhiem-vu { font-size: 15px; line-height: 1.3; }
.task-so-file { margin-left: 6px; color: #6b7280; font-size: 11px; }
.task-nhan { display: block; color: #6b7280; font-size: 11px; margin-top: 2px; }
.task-nhan-xong { color: #16a34a; }
.task-hanh-dong { display: flex; justify-content: center; gap: 4px; }

/* HÀNG FILE — nền xám nhạt, thụt vào, gạch ĐỨT: từng file tách biệt nhau và tách khỏi nhiệm vụ. */
.tasks-results-table tr.task-result-row { background: #f8fafc; }
.tasks-results-table tr.task-result-row > td { border-bottom: 1px dashed #e2e8f0; }
/* Ô ĐẦU của hàng file: chỉ còn dấu nối thụt vào (tên file đã dời sang cột `c-file` riêng) — chính
   chỗ thụt này làm hàng file LÙI VỀ PHẢI so với tên nhiệm vụ. */
.task-file-lui {
    display: flex; align-items: center; gap: 4px;
    padding-left: 26px; color: #cbd5e1; font-size: 12px;
}
.task-file-noi { line-height: 1; }
.task-file-icon { color: #9ca3af; font-size: 12px; flex: 0 0 auto; }
/* Tên file: mọi hàng RỘNG BẰNG NHAU (cột c-file cố định + table-layout:fixed) nên các tên thẳng
   hàng dọc; dài quá thì «…», di chuột ra tên đầy đủ qua title. */
.task-file-name {
    display: block; font-weight: 600; font-size: 13px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ĐỢT 5 (2026-09-11): «Kết quả làm được» dọn VỀ CỘT NHIỆM VỤ, nằm cạnh icon tệp giấy trong một
   khung flex. Flex item mặc định `min-width:auto` nên KHÔNG BAO GIỜ cắt «…» — nó đẩy rộng khung ra
   và tràn sang cột bên. Phải `min-width:0` thì `text-overflow:ellipsis` mới có tác dụng. */
.task-file-lui .task-file-name { min-width: 0; }
/* MÀU CHỮ THEO TIẾN ĐỘ — bốn bậc, hai mốc do người dùng nêu (100% xanh lá, dưới 20% đỏ). */
.task-file-name.td-mau-xanh-la    { color: #16a34a; }
.task-file-name.td-mau-xanh-duong { color: #2563eb; }
.task-file-name.td-mau-cam        { color: #ea580c; }
.task-file-name.td-mau-do         { color: #dc2626; }
/* ĐỢT 5: cột «Tên file» nay chứa TÊN FILE VẬT LÝ của bản cuối (`ten_ban_cuoi`), chữ màu trung tính —
   màu theo tiến độ đã nằm ở «Kết quả làm được» bên cột Nhiệm vụ, tô cả hai chỗ là rối mắt. */
.task-file-ten-that {
    display: block; color: #374151; font-size: 13px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.task-file-phu {
    display: block; color: #6b7280; font-size: 11px; margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.task-file-history-btn {
    background: none; border: 0; padding: 0; color: #2563eb; font-size: 12px; cursor: pointer;
}
.task-file-history-btn:hover { text-decoration: underline; }
.tasks-results-table td.task-chua-co-file { padding-left: 30px; color: #9ca3af; font-size: 11px; }

/* ─── BỐN THẺ THỐNG KÊ CỦA TAB NHIỆM VỤ — MỘT DÒNG (đợt 4, 2026-09-10) ─────────────────────────────
   index.html để `grid-cols-2 md:grid-cols-4`: dưới breakpoint md (768px) là rớt còn 2 cột = 2 dòng.
   Người dùng đòi «Tổng số, Đã duyệt đủ kết quả, Chưa duyệt đủ kết quả, Quá hạn ở 1 dòng thôi» nên ép
   4 cột ở MỌI bề rộng, đổi lại phải thu chữ và khoảng đệm để nhãn dài không tràn. */
#tasks-the-tong-ke {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px;
}
#tasks-the-tong-ke .glass-card { padding: 8px 6px; }
#tasks-the-tong-ke h4 { font-size: 17px; line-height: 1.2; }
#tasks-the-tong-ke p { font-size: 10.5px; line-height: 1.25; margin-top: 2px; }

/* ─── POPUP «NHẬT KÝ FILE KẾT QUẢ» — dùng lại khung .qlcv-dialog, chỉ thêm bố cục bên trong ─── */
.nk-file-dialog > section { width: min(880px, 100%); }
/* .qlcv-dialog-content đặt white-space:pre-wrap (hợp với đoạn văn bản thô của hộp 8b) — nhật ký
   này dựng bằng thẻ nên phải trả về normal, không thì khoảng trắng trong mã nguồn thành dòng trống. */
.nk-noi-dung { white-space: normal; }
.nk-tom-tat { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.nk-chip { display: inline-flex; align-items: baseline; gap: 6px; background: #f3f4f6; border-radius: 999px; padding: 3px 10px; font-size: 12px; }
.nk-chip-nhan { color: #6b7280; }
.nk-chip-gia-tri { font-weight: 600; color: #111827; }
.nk-tieu-de { font-weight: 600; margin-top: 16px; color: #111827; }
.nk-danh-sach { margin: 6px 0 0 18px; font-size: 13px; }
.nk-danh-sach li { margin: 3px 0; }
/* KHỐI «1. ai đăng ký / 2. ai thực hiện» — đợt 4 người dùng đòi BỎ hai tiêu đề «Ai đăng ký kết quả
   này» và «Ai thực hiện», chỉ còn bốn dòng đánh số. Không dùng <ul>: số 1./2. đã nằm trong chữ, thêm
   dấu đầu dòng nữa là thành hai loại dấu một lúc. */
.nk-dong-dau { margin-top: 10px; font-size: 13px; }
.nk-dong { margin: 3px 0; color: #374151; }
.nk-trong { color: #9ca3af; font-size: 12px; margin: 6px 0 0 18px; }
.nk-ban { margin: 8px 0 0 18px; font-size: 13px; }
.nk-ban-muc { margin: 8px 0; padding-bottom: 8px; border-bottom: 1px solid #f1f5f9; }
.nk-ban-dau { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.nk-ban-so { font-weight: 600; color: #1f2937; }
.nk-ban-ten { color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.nk-ban-nut { display: inline-flex; gap: 8px; }
.nk-link { background: none; border: 0; padding: 0; color: #2563eb; font-size: 12px; cursor: pointer; }
.nk-link:hover { text-decoration: underline; }
.nk-ban-ai { color: #6b7280; font-size: 12px; margin-top: 2px; }
.nk-bao-cao { white-space: pre-line; color: #374151; font-size: 12px; margin-top: 4px; }
.nk-y-kien { margin: 6px 0 0 16px; }
.nk-y-ai { color: #6b7280; font-size: 12px; }
.nk-y-noi-dung { color: #374151; font-size: 13px; }
/* Dòng thời gian: trục dọc bên trái, mỗi diễn biến một chấm. */
.nk-dong-thoi-gian { margin: 8px 0 0 6px; list-style: none; padding: 0; }
.nk-dong-thoi-gian li { position: relative; padding: 0 0 10px 14px; border-left: 2px solid #e5e7eb; margin: 0; }
.nk-dong-thoi-gian li::before {
    content: ""; position: absolute; left: -5px; top: 5px;
    width: 8px; height: 8px; border-radius: 50%; background: #94a3b8;
}
.nk-tg-luc { color: #6b7280; font-size: 11px; margin-right: 8px; white-space: nowrap; }
.nk-tg-gi { font-weight: 600; color: #1f2937; font-size: 13px; }
.nk-tg-ai { color: #6b7280; font-size: 12px; display: block; }
.nk-tg-noi { color: #374151; font-size: 13px; margin-top: 2px; }

/* ─── BẢNG «KẾT QUẢ» TRONG MODAL NHIỆM VỤ — cân đối lại mười cột (đợt 4, 2026-09-10) ────────────────
   Người dùng: «Trang sửa nhiệm vụ chỉnh lại giao diện phần file kết quả, Tỷ lệ công việc (%) Tiến độ,
   độ rộng bé đi… sửa để cân đối hơn». Trước đợt này bảng KHÔNG có colgroup và không `table-layout:
   fixed`, nên trình duyệt tự chia theo nội dung: hai cột chỉ chứa một con số («Tỷ lệ», «Tiến độ») phình
   ra bằng cột «Kết quả làm được» chỉ vì TIÊU ĐỀ của chúng dài. Nay bề rộng là SỐ, khai ở colgroup do
   `buildColgroupKetQua()` vẽ ra (mảng `COT_BANG_KET_QUA` trong app.js).
   `c-kq-ten` không khai ⇒ ăn phần còn lại: tổng chín cột số là 81%, cột tên còn 19%. */
.bang-ket-qua {
    table-layout: fixed;
    min-width: 1080px;
    border-collapse: collapse;
}
.bang-ket-qua col.c-kq-thoi-gian   { width: 9%; }
.bang-ket-qua col.c-kq-dinh-dang   { width: 6%; }
.bang-ket-qua col.c-kq-file        { width: 13%; }
.bang-ket-qua col.c-kq-ty-le       { width: 8%; }
.bang-ket-qua col.c-kq-tien-do     { width: 6%; }
.bang-ket-qua col.c-kq-nguoi       { width: 8%; }
.bang-ket-qua col.c-kq-y-kien      { width: 14%; }
.bang-ket-qua col.c-kq-trang-thai  { width: 11%; }
.bang-ket-qua col.c-kq-hanh-dong   { width: 6%; }
/* Tiêu đề «Tỷ lệ công việc (%)» dài hơn cột 8%: cho XUỐNG DÒNG trong ô thay vì đẩy cột phình ra. */
/* ĐỢT 5 (2026-09-11) — «tiêu đề cột căn giữa». `text-center` trong `buildOTieuDeKq` là class Tailwind
   có thật, nhưng ép thêm ở đây để tiêu đề căn giữa KHÔNG PHỤ THUỘC bản vendor biên dịch sẵn. */
.bang-ket-qua thead th { white-space: normal; word-break: break-word; hyphens: auto; text-align: center; }
.bang-ket-qua td { overflow-wrap: anywhere; }

/* Ô TỶ LỆ: input và nút «Lưu tỷ lệ» XẾP DỌC, căn giữa — cột chỉ còn 8% nên xếp ngang là tràn. */
.kq-o-ty-le { text-align: center; }
.kq-o-ty-le-trong { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.kq-o-ty-le-nhap { width: 58px; min-width: 0; padding: 2px 4px; text-align: center; font-size: 12px; }
.kq-nut-luu-ty-le { font-size: 11px; line-height: 1.2; white-space: nowrap; }
.kq-o-tien-do { font-size: 12px; color: #374151; }

/* ĐỢT 5 (2026-09-11) — «Người thực hiện cũng sẽ căn giữa»: cả dòng cha lẫn dòng bản 1.1/1.2. */
.kq-o-nguoi { text-align: center; }

/* Ô «GHI Ý KIẾN» — ĐỢT 5: nội dung KHÔNG in tại chỗ nữa, ô chỉ còn chữ «Xem ý kiến» (+ «Lịch sử»)
   mở POPUP `moYKienKetQua`. Nguồn dữ liệu trong popup vẫn là `danhSachYKien()` — GỘP góp ý với LÝ DO
   của mỗi lần yêu cầu sửa / trả về / từ chối, vì `verdict()` của máy chủ chỉ ghi `task_file_flow`
   chứ không ghi `task_file_comments` (bẫy đợt 4, giữ nguyên). */
.kq-o-y-kien { font-size: 12px; text-align: center; }
.kq-y-kien-nut { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.y-kien-muc {
    border-left: 2px solid #dbeafe; padding: 2px 0 2px 6px;
    font-size: 11.5px; line-height: 1.35; color: #374151;
}
.y-kien-ai { font-weight: 600; color: #1f2937; }
.y-kien-vai { color: #9ca3af; }
/* NHÃN HÀNH ĐỘNG — chính nó làm đọc ra ý kiến này là của lần «Yêu cầu sửa» hay một câu «Góp ý» thường. */
.y-kien-nhan {
    color: #1d4ed8; background: #eff6ff; border-radius: 999px;
    padding: 0 6px; font-size: 10.5px; white-space: nowrap;
}
.y-kien-luc { color: #9ca3af; font-size: 10.5px; white-space: nowrap; }
.y-kien-ban { color: #6b7280; font-size: 10.5px; white-space: nowrap; }
.y-kien-noi { color: #374151; margin-top: 1px; white-space: pre-line; }

/* ─── POPUP «XEM Ý KIẾN» — đợt 5 (2026-09-11), `moYKienKetQua` ──────────────────────────────────────
   Dùng lại khung `.qlcv-dialog` của popup nhật ký file nên chỉ cần chỉnh vài điểm riêng. Hẹp hơn popup
   nhật ký (880px): popup này chỉ có một danh sách ý kiến + ô nhập, 880px là chữ dài khó đọc.
   `.qlcv-dialog-content` đặt `white-space:pre-wrap` (hợp với đoạn văn bản thô của hộp 8b) — popup này
   dựng bằng chuỗi HTML nối nhiều dòng mã nguồn nên PHẢI trả về `normal`, đúng bẫy của `.nk-noi-dung`.
   `.y-kien-noi` bên trong vẫn giữ `pre-line` để không mất xuống dòng người dùng gõ trong ý kiến. */
.yk-dialog > section { width: min(620px, 100%); }
.yk-noi-dung { white-space: normal; }
.yk-danh-sach { display: flex; flex-direction: column; gap: 8px; }
.yk-chu-thich {
    margin-top: 12px; padding: 8px 10px; background: #f9fafb;
    border-left: 2px solid #e5e7eb; border-radius: 4px;
    color: #6b7280; font-size: 11.5px; line-height: 1.45;
}

/* ─── NÚT BÉ TRONG BA BẢNG CHỜ DUYỆT — MỚI-4 (2026-09-12) ───────────────────────────────────────────
   Người dùng: «phần Xem chi tiết / Duyệt / Trả lại để sửa / Từ chối bé lại». Một dòng của bảng
   «Chờ duyệt» có tới BỐN nút cộng hai hộp nhập ẩn, cỡ nút mặc định (40px cao, chữ 14px, đệm
   10px 20px) làm bảng cao gấp đôi phần chữ và khó quét mắt.
   PHẢI viết ở app.css: `.btn-primary`/`.btn-secondary` cũng nằm ở đây mà app.css lại nạp SAU
   `tailwind.min.css` (index.html dòng 12 so với 21), cùng độ đặc hiệu nên cái sau thắng — mọi class
   cỡ Tailwind gắn trên nút (`py-1 px-3 text-xs`) bấy lâu bị đè mất, đổi chúng là công cốc. Luật này
   dùng `.approval-row button` (0,1,1) thắng `.btn-primary` (0,1,0) nên không cần `!important`.
   Ba class dòng là ba builder riêng: `buildPendingApprovalRowHtml` / `buildPendingDeleteRowHtml` /
   `buildChangeApprovalRowHtml` — thiếu một là bảng đó lạc lõng nút to cạnh nút bé.
   `min-height: 24px` chứ không phải 0: giữ nút bấm được bằng ngón tay và đủ chỗ cho vòng xoay
   `.loading::after` 16px nếu sau này có ai gọi `setButtonLoading` lên mấy nút này. */
.approval-row button,
.approval-delete-row button,
.change-row button {
    padding: 3px 9px;
    font-size: 11px;
    min-height: 24px;
    border-radius: 8px;
    line-height: 1.4;
}
.approval-row button i,
.approval-delete-row button i,
.change-row button i { font-size: 10px; }

/* ─── NHÃN «ĐÂY LÀ DUYỆT CÁI GÌ» — MỚI-3 (2026-09-12) ────────────────────────────────────────────────
   Người dùng: «thêm cột thông tin về đây là duyệt công việc mới tạo, hay sửa chữa/xóa … công việc
   cha, công việc con., nhiệm vụ, file kết quả». Một dòng chờ nay mang HAI nhãn: hành động (Mới tạo /
   Sửa / Xoá) rồi đối tượng (Công việc cha / Công việc con / Nhiệm vụ / File kết quả).
   Chữ `nhanDuyetHtml` + `NHAN_DUYET` trong app.js là nguồn chữ; luật này chỉ lo hình dáng, dùng
   chung cho cả ba builder (`buildPendingApprovalRowHtml` / `buildPendingDeleteRowHtml` /
   `buildChangeApprovalRowHtml`) — thiếu nó là chip rơi về cỡ chữ thân 16px.
   BẪY ĐÃ TRẢ GIÁ: chip cũ gắn `text-[11px] px-2 py-0.5 rounded-full`, mà `tailwind.min.css` là
   artifact ĐÓNG BĂNG (commit db382d0, không build lại) KHÔNG CÓ `text-[11px]` — nên bấy lâu chip
   render 16px chứ không phải 11px như tên class hứa. Mọi cỡ chữ nhỏ của giao diện này phải nằm ở
   app.css, không được đặt vào class arbitrary. */
.duyet-nhan {
    font-size: 11px;
    line-height: 1.5;
    font-weight: 500;
    padding: 1px 8px;
    border-radius: 999px;
    white-space: nowrap;
}
/* Hai nhãn đứng SÁT nhau (4px thay vì `gap-2` 8px của hàng) để mắt đọc thành MỘT cụm «Sửa · Nhiệm
   vụ», rồi mới tới tên đầu việc. Chỉ nhãn SAU bị kéo về trái nên khoảng cách từ nhãn cuối tới tên
   vẫn nguyên 8px — đặt `margin-right` âm cho mọi nhãn là dính luôn cả khe đó, cụm thành không ra cụm. */
.duyet-nhan + .duyet-nhan { margin-left: -4px; }

/* ─── POPUP «XEM CÁC THAY ĐỔI» — MỚI-3 (2026-09-12) ──────────────────────────────────────────────────
   Popup dùng lại khung `.qlcv-dialog yk-dialog` của «Xem ý kiến», mà `.yk-dialog > section` bóp bề
   ngang còn 620px: một lượt sửa có thể đổi nhiều cột, 620px làm mỗi dòng «cũ → mới» phải xuống hai
   hàng. Luật này trả về đúng 760px của khung gốc (id thắng class nên không cần `!important`); chiều
   cao và cuộn thì khung gốc đã lo — `section` có `max-height:90vh` + `.qlcv-dialog-content` có
   `overflow:auto`, đừng đặt thêm ở đây.
   `white-space:pre-wrap` của `.qlcv-dialog-content` cũng đã bị `.yk-noi-dung { white-space:normal }`
   chặn sẵn, vì nhật ký dựng bằng thẻ HTML chứ không phải văn bản thô. */
#thay-doi-cho-duyet-dialog > section { width: min(760px, 100%); }

/* Read-only results in project detail task cards. */
.task-detail-card { background: #fff; border: 1px solid #e5e7eb; }
.task-detail-card.border-l-4 { border-left-width: 4px; border-left-color: #ef4444; }
.task-detail-heading { min-width: 0; }
.task-detail-heading + div { align-self: flex-start; flex-shrink: 0; }
.task-detail-name { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.task-detail-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(180px, 1fr); gap: 16px; align-items: center; margin-top: 12px; font-size: 14px; color: #4b5563; }
.task-detail-assignee, .task-detail-due, .task-detail-progress { display: flex; align-items: center; gap: 8px; min-width: 0; }
.task-detail-assignee span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-detail-due, .task-detail-progress > span { white-space: nowrap; }
.task-detail-progress-track { flex: 1; min-width: 48px; height: 8px; border-radius: 999px; overflow: hidden; }
.task-detail-results { margin-top: 12px; }
.task-detail-files-toggle { font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px 0; }
.task-detail-results-body.hidden { display: none; }
.task-detail-results-list { margin: 0; padding: 0; list-style: none; font-size: 13px; }
.task-detail-file-header, .task-detail-file-row { display: grid; grid-template-columns: minmax(0, 1fr) 130px 70px minmax(110px, 160px); align-items: center; gap: 12px; padding: 8px 0; }
.task-detail-file-header { font-size: 13px; font-weight: 600; color: #4b5563; border-bottom: 1px solid #e5e7eb; }
.task-detail-file-row { border-bottom: 1px dashed #e5e7eb; }
.task-detail-file-title { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; }
.task-detail-result-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-detail-result-name.td-mau-xanh-la { color: #16a34a; }
.task-detail-result-name.td-mau-xanh-duong { color: #2563eb; }
.task-detail-result-name.td-mau-cam { color: #ea580c; }
.task-detail-result-name.td-mau-do { color: #dc2626; }
.task-detail-file-ratio, .task-detail-file-progress { text-align: center; }
.task-detail-file-status { min-width: 0; overflow-wrap: anywhere; }
.task-detail-file-status .status-badge { font-size: 13px; white-space: normal; }
@media (max-width: 640px) {
    .task-detail-meta { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
    .task-detail-progress { grid-column: 1 / -1; }
    .task-detail-file-header { display: none; }
    .task-detail-file-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; }
    .task-detail-file-title, .task-detail-file-status { grid-column: 1 / -1; }
    .task-detail-file-ratio, .task-detail-file-progress { text-align: left; }
    .task-detail-file-row [data-label]::before { content: attr(data-label) ": "; font-size: 13px; color: #4b5563; }
}
@media (max-width: 380px) {
    .task-detail-meta { grid-template-columns: minmax(0, 1fr); }
    .task-detail-file-row { grid-template-columns: minmax(0, 1fr); }
}