@import '_content/Blazored.Toast/Blazored.Toast.bundle.scp.css';

/* _content/ltia.portal.web/Components/App.razor.rz.scp.css */
/* ==========================================
   BASE STYLES - Cho toàn bộ ứng dụng
   Sử dụng :global() để áp dụng cho toàn bộ ứng dụng
   ========================================== */

/*:global(html),
:global(body) {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

:global(a),
:global(.btn-link) {
    color: #006bb7;
}

:global(.content) {
    padding-top: 1.1rem;
}

:global(h1:focus) {
    outline: none;
}

:global(.blazor-error-boundary) {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

:global(.blazor-error-boundary::after) {
    content: "An error has occurred.";
}

:global(.darker-border-checkbox.form-check-input) {
    border-color: #929292;
}*/

/* _content/ltia.portal.web/Components/Assets/Admin/Layout/AdminLayout.razor.rz.scp.css */
.page[b-fhz0ypff69] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-fhz0ypff69] {
    flex: 1;
}

.sidebar[b-fhz0ypff69] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-fhz0ypff69] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-fhz0ypff69]  a, .top-row[b-fhz0ypff69]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-fhz0ypff69]  a:hover, .top-row[b-fhz0ypff69]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-fhz0ypff69]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-fhz0ypff69] {
        justify-content: space-between;
    }

    .top-row[b-fhz0ypff69]  a, .top-row[b-fhz0ypff69]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-fhz0ypff69] {
        flex-direction: row;
    }

    .sidebar[b-fhz0ypff69] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-fhz0ypff69] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-fhz0ypff69]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-fhz0ypff69], article[b-fhz0ypff69] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-fhz0ypff69] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-fhz0ypff69] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* _content/ltia.portal.web/Components/Assets/Admin/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-omnoi4n361] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-omnoi4n361] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-omnoi4n361] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-omnoi4n361] {
    font-size: 1.1rem;
}

.bi[b-omnoi4n361] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-omnoi4n361] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-omnoi4n361] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-omnoi4n361] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-omnoi4n361] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-omnoi4n361] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-omnoi4n361] {
        padding-bottom: 1rem;
    }

    .nav-item[b-omnoi4n361]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-omnoi4n361]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-omnoi4n361]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-omnoi4n361] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-omnoi4n361] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-omnoi4n361] {
        display: none;
    }

    .nav-scrollable[b-omnoi4n361] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem) !important;
        max-height: calc(100vh - 3.5rem) !important; /* Giới hạn chiều cao khi zoom */
        overflow-y: auto !important; /* Cho phép scroll khi nội dung vượt quá - QUAN TRỌNG khi zoom */
        overflow-x: hidden !important;
        min-height: 0 !important; /* Cho phép flex shrink - QUAN TRỌNG cho scroll khi zoom */
    }
}

/* Custom scrollbar cho nav-scrollable */
.nav-scrollable[b-omnoi4n361]::-webkit-scrollbar {
    width: 6px;
}

.nav-scrollable[b-omnoi4n361]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.nav-scrollable[b-omnoi4n361]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.nav-scrollable[b-omnoi4n361]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* _content/ltia.portal.web/Components/Commons/AccountInfo.razor.rz.scp.css */
/* Account Info Component - Professional Design */
.account-info-page[b-2yxhiznk8p] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
}

/* Not Found State */
.not-found-container[b-2yxhiznk8p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
    background: var(--acv-white);
    border-radius: 16px;
    padding: 3rem 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.not-found-icon i[b-2yxhiznk8p] {
    font-size: 4rem;
    color: var(--gray-400);
    margin-bottom: 1rem;
}

.not-found-container h3[b-2yxhiznk8p] {
    color: var(--gray-800);
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}

.not-found-container p[b-2yxhiznk8p] {
    color: var(--gray-600);
    margin-bottom: 1.5rem;
}

/* Card Header Section */
.card-header-section[b-2yxhiznk8p] {
    background: var(--acv-white);
    border-radius: 12px;
    padding: 2rem 2.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--gray-200);
}

.card-header-content[b-2yxhiznk8p] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.card-header-icon[b-2yxhiznk8p] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.card-header-text h1[b-2yxhiznk8p] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
}

.card-header-text p[b-2yxhiznk8p] {
    font-size: 0.95rem;
    color: var(--gray-600);
    margin: 0.25rem 0 0 0;
}

/* Main Content Container */
.account-details-container[b-2yxhiznk8p] {
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 1.75rem;
    margin-top: 0;
}

@media (max-width: 1200px) {
    .account-details-container[b-2yxhiznk8p] {
        grid-template-columns: 1fr;
    }
}

/* Card Styles */
.detail-card[b-2yxhiznk8p] {
    background: var(--acv-white);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--gray-200);
    overflow: hidden;
    transition: all 0.2s ease;
}

.detail-card:hover[b-2yxhiznk8p] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: var(--gray-300);
}

.card-header[b-2yxhiznk8p] {
    background: var(--gray-50);
    padding: 1.25rem 1.5rem;
    border-bottom: 2px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-title[b-2yxhiznk8p] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    letter-spacing: -0.01em;
}

.card-title i[b-2yxhiznk8p] {
    color: var(--acv-primary);
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

.card-content[b-2yxhiznk8p] {
    padding: 1.75rem 1.5rem;
}

/* Details Grid */
.details-grid[b-2yxhiznk8p] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem 2rem;
}

.detail-item[b-2yxhiznk8p] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--gray-100);
}

.detail-item:last-child[b-2yxhiznk8p] {
    border-bottom: none;
    padding-bottom: 0;
}

.detail-item.full-width[b-2yxhiznk8p] {
    grid-column: 1 / -1;
}

.detail-label[b-2yxhiznk8p] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.detail-label i[b-2yxhiznk8p] {
    color: var(--acv-primary);
    font-size: 0.875rem;
    width: 16px;
    text-align: center;
    opacity: 0.8;
}

.detail-value[b-2yxhiznk8p] {
    font-size: 1rem;
    color: var(--gray-900);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
    line-height: 1.5;
}

.detail-value strong[b-2yxhiznk8p] {
    font-weight: 600;
    color: var(--gray-900);
    font-size: 1.05rem;
}

/* Status Badge */
.status-badge[b-2yxhiznk8p] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.status-badge.active[b-2yxhiznk8p] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: var(--acv-white);
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}

.status-badge.inactive[b-2yxhiznk8p] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: var(--acv-white);
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
}

/* Verified Badge */
.verified-badge[b-2yxhiznk8p] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: var(--acv-white);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.25);
}

.unverified-badge[b-2yxhiznk8p] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: var(--acv-white);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(245, 158, 11, 0.25);
}

/* Empty Value */
.empty-value[b-2yxhiznk8p] {
    color: var(--gray-400);
    font-style: italic;
    font-size: 0.9375rem;
    font-weight: 400;
}

/* Avatar Image */
.avatar-image[b-2yxhiznk8p] {
    width: 140px;
    height: 140px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 3px solid var(--gray-200);
    transition: transform 0.2s ease;
}

.avatar-image:hover[b-2yxhiznk8p] {
    transform: scale(1.02);
}

/* Form Actions */
.form-actions[b-2yxhiznk8p] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 2px solid var(--gray-200);
    flex-wrap: wrap;
}

.btn-primary[b-2yxhiznk8p] {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.75rem;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    border: none;
    min-width: 180px;
    justify-content: center;
    background: var(--acv-primary);
    color: var(--acv-white);
    box-shadow: 0 2px 6px rgba(33, 76, 166, 0.2);
}

.btn-primary:hover[b-2yxhiznk8p] {
    background: var(--acv-primary-700);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
    text-decoration: none;
    color: var(--acv-white);
}

.btn-primary:active[b-2yxhiznk8p] {
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 1024px) {
    .account-details-container[b-2yxhiznk8p] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .card-header-section[b-2yxhiznk8p] {
        padding: 1.5rem;
    }

    .card-header-text h1[b-2yxhiznk8p] {
        font-size: 1.5rem;
    }
    
    .card-header[b-2yxhiznk8p] {
        padding: 1rem 1.25rem;
    }

    .card-content[b-2yxhiznk8p] {
        padding: 1.25rem 1rem;
    }

    .details-grid[b-2yxhiznk8p] {
        grid-template-columns: 1fr;
        gap: 1.25rem 1rem;
    }

    .detail-item[b-2yxhiznk8p] {
        gap: 0.375rem;
        padding-bottom: 1rem;
    }

    .form-actions[b-2yxhiznk8p] {
        flex-direction: column;
        gap: 0.75rem;
        margin-top: 2rem;
        padding-top: 1.5rem;
    }

    .btn-primary[b-2yxhiznk8p] {
        min-width: 100%;
        width: 100%;
    }
}

@media (max-width: 600px) {
    .card-header-content[b-2yxhiznk8p] {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .avatar-image[b-2yxhiznk8p] {
        width: 120px;
        height: 120px;
    }

    .card-title[b-2yxhiznk8p] {
        font-size: 1rem;
    }

    .detail-label[b-2yxhiznk8p] {
        font-size: 0.75rem;
    }

    .detail-value[b-2yxhiznk8p] {
        font-size: 0.9375rem;
    }
}

/* _content/ltia.portal.web/Components/Commons/Breadcrumb.razor.rz.scp.css */
/* Breadcrumb Component Styles - Based on MVC Design */
.custom-breadcrumb[b-1bx115j45i] {
    margin-bottom: 0;
}

.custom-breadcrumb .breadcrumb[b-1bx115j45i] {
    background: #ffffff;
    border-radius: 12px;
    padding: 0.75rem 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
    font-size: 0.9rem;
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.custom-breadcrumb .breadcrumb-link[b-1bx115j45i] {
    color: #214ca6;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.custom-breadcrumb .breadcrumb-link:hover[b-1bx115j45i] {
    color: #1e40af;
    text-decoration: none;
    background-color: #f9fafb;
    transform: translateX(2px);
}

.custom-breadcrumb .breadcrumb-link i[b-1bx115j45i] {
    font-size: 0.8rem;
    opacity: 0.8;
}

.custom-breadcrumb .breadcrumb-separator[b-1bx115j45i] {
    color: #6b7280;
    font-weight: 500;
    margin: 0 0.25rem;
    user-select: none;
}

.custom-breadcrumb .breadcrumb-current[b-1bx115j45i] {
    color: #374151;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    background-color: #f9fafb;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.custom-breadcrumb .breadcrumb-current i[b-1bx115j45i] {
    font-size: 0.8rem;
    opacity: 0.8;
}

/* Responsive */
@media (max-width: 768px) {
    .custom-breadcrumb .breadcrumb[b-1bx115j45i] {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
    }

    .custom-breadcrumb .breadcrumb-link[b-1bx115j45i],
    .custom-breadcrumb .breadcrumb-current[b-1bx115j45i] {
        padding: 0.2rem 0.4rem;
    }
}

/* _content/ltia.portal.web/Components/Commons/ChangePasswordModal.razor.rz.scp.css */
/* Change Password Modal - Professional Design */
.change-password-modal-overlay[b-vjwbm33f9r] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 1rem;
    animation: fadeIn-b-vjwbm33f9r 0.2s ease-in-out;
}

.change-password-modal-container[b-vjwbm33f9r] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 550px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp-b-vjwbm33f9r 0.3s ease-out;
    border: 1px solid #e5e7eb;
}

/* Modal Header - Style giống card-header-section */
.change-password-modal-header[b-vjwbm33f9r] {
    padding: 2rem 2.5rem;
    border-bottom: 1px solid #e5e7eb;
    background: white;
    border-radius: 16px 16px 0 0;
}

.change-password-modal-header .modal-header-content[b-vjwbm33f9r] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.change-password-modal-header .modal-icon[b-vjwbm33f9r] {
    width: 48px;
    height: 48px;
    background: #214ca6;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.25);
}

.change-password-modal-header .modal-icon i[b-vjwbm33f9r] {
    font-size: 1.5rem;
    color: white;
}

.change-password-modal-header .modal-title-section[b-vjwbm33f9r] {
    flex: 1;
}

.change-password-modal-header .modal-title[b-vjwbm33f9r] {
    margin: 0 0 0.25rem 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
}

.change-password-modal-header .modal-subtitle[b-vjwbm33f9r] {
    margin: 0;
    font-size: 1rem;
    color: #4b5563;
    line-height: 1.5;
}

/* Modal Body */
.change-password-modal-body[b-vjwbm33f9r] {
    padding: 2.5rem;
}

/* Error Alert */
.change-password-modal-body .error-alert[b-vjwbm33f9r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: #fee2e2;
    border: 1px solid #ef4444;
    border-radius: 8px;
    margin-bottom: 2rem;
    animation: slideDown-b-vjwbm33f9r 0.3s ease;
}

.change-password-modal-body .error-alert-content[b-vjwbm33f9r] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #dc2626;
    font-size: 0.9375rem;
    font-weight: 500;
    flex: 1;
}

.change-password-modal-body .error-alert-content i[b-vjwbm33f9r] {
    font-size: 1.125rem;
}

.change-password-modal-body .error-alert-close[b-vjwbm33f9r] {
    background: none;
    border: none;
    color: #dc2626;
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
    font-size: 1rem;
}

.change-password-modal-body .error-alert-close:hover[b-vjwbm33f9r] {
    opacity: 0.7;
}

@keyframes slideDown-b-vjwbm33f9r {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Form Groups */
.change-password-modal-body .form-group[b-vjwbm33f9r] {
    margin-bottom: 2rem;
}

.change-password-modal-body .form-label[b-vjwbm33f9r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.625rem;
}

.change-password-modal-body .form-label i[b-vjwbm33f9r] {
    color: #214ca6;
    font-size: 0.875rem;
    width: 16px;
    text-align: center;
}

.change-password-modal-body .form-label .required[b-vjwbm33f9r] {
    color: #ef4444;
    margin-left: 0.25rem;
}

/* Password Input Wrapper */
.change-password-modal-body .password-input-wrapper[b-vjwbm33f9r] {
    position: relative;
    display: flex;
    align-items: center;
}

.change-password-modal-body .form-input[b-vjwbm33f9r] {
    width: 100%;
    padding: 0.875rem 3rem 0.875rem 1rem;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    font-size: 1rem;
    color: #111827;
    transition: all 0.2s ease;
    background: white;
    font-family: inherit;
}

.change-password-modal-body .form-input:focus[b-vjwbm33f9r] {
    outline: none;
    border-color: #214ca6;
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.change-password-modal-body .form-input[b-vjwbm33f9r]::placeholder {
    color: #9ca3af;
}

.change-password-modal-body .form-input.error[b-vjwbm33f9r] {
    border-color: #ef4444;
}

.change-password-modal-body .form-input.error:focus[b-vjwbm33f9r] {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.change-password-modal-body .password-toggle[b-vjwbm33f9r] {
    position: absolute;
    right: 0.75rem;
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    font-size: 1rem;
}

.change-password-modal-body .password-toggle:hover[b-vjwbm33f9r] {
    color: #214ca6;
}

/* Caps Lock Warning */
.change-password-modal-body .capslock-warning[b-vjwbm33f9r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.625rem;
    font-size: 0.875rem;
    color: #f59e0b;
    padding: 0.5rem 0.75rem;
    background: #fef3c7;
    border: 1px solid #fbbf24;
    border-radius: 6px;
}

.change-password-modal-body .capslock-warning i[b-vjwbm33f9r] {
    font-size: 0.875rem;
}

/* Password Requirements */
.change-password-modal-body .password-requirements[b-vjwbm33f9r] {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    outline: none !important;
    box-shadow: none !important;
}

.change-password-modal-body .password-requirements .requirement-item[b-vjwbm33f9r] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0;
    font-size: 0.875rem;
    color: #4b5563;
    transition: color 0.2s ease;
    outline: none !important;
    border: none !important;
}

.change-password-modal-body .password-requirements .requirement-item i[b-vjwbm33f9r] {
    font-size: 0.875rem;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.change-password-modal-body .password-requirements .requirement-item.valid[b-vjwbm33f9r] {
    color: #10b981;
}

.change-password-modal-body .password-requirements .requirement-item.valid i[b-vjwbm33f9r] {
    color: #10b981;
}

.change-password-modal-body .password-requirements .requirement-item.invalid[b-vjwbm33f9r] {
    color: #6b7280;
    outline: none !important;
    border: none !important;
}

.change-password-modal-body .password-requirements .requirement-item.invalid i[b-vjwbm33f9r] {
    color: #ef4444;
}

/* Field Error */
.change-password-modal-body .field-error[b-vjwbm33f9r] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.625rem;
    font-size: 0.875rem;
    color: #dc2626;
    padding: 0.5rem 0.75rem;
    background: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    animation: slideDown-b-vjwbm33f9r 0.2s ease;
}

.change-password-modal-body .field-error i[b-vjwbm33f9r] {
    font-size: 0.875rem;
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.change-password-modal-body .field-error span[b-vjwbm33f9r] {
    line-height: 1.5;
}

/* Field Success */
.change-password-modal-body .field-success[b-vjwbm33f9r] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.625rem;
    font-size: 0.875rem;
    color: #059669;
    padding: 0.5rem 0.75rem;
    background: #d1fae5;
    border: 1px solid #a7f3d0;
    border-radius: 6px;
    animation: slideDown-b-vjwbm33f9r 0.2s ease;
}

.change-password-modal-body .field-success i[b-vjwbm33f9r] {
    font-size: 0.875rem;
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.change-password-modal-body .field-success span[b-vjwbm33f9r] {
    line-height: 1.5;
}

/* Form Actions */
.change-password-modal-body .form-actions[b-vjwbm33f9r] {
    margin-top: 2rem;
    position: relative;
    z-index: 1;
    pointer-events: auto;
}

.change-password-modal-body .btn[b-vjwbm33f9r] {
    width: 100%;
    padding: 0.875rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    transition: all 0.2s ease;
    position: relative;
    z-index: 1;
    pointer-events: auto;
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.25);
}

.change-password-modal-body .btn-primary[b-vjwbm33f9r] {
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%);
    color: white;
}

.change-password-modal-body .btn-primary:hover:not(:disabled)[b-vjwbm33f9r] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(33, 76, 166, 0.35);
}

.change-password-modal-body .btn-primary:active:not(:disabled)[b-vjwbm33f9r] {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.25);
}

.change-password-modal-body .btn:disabled[b-vjwbm33f9r] {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
}

.change-password-modal-body .btn i[b-vjwbm33f9r] {
    font-size: 1rem;
}

/* Animations */
@keyframes fadeIn-b-vjwbm33f9r {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp-b-vjwbm33f9r {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Responsive */
@media (max-width: 640px) {
    .change-password-modal-container[b-vjwbm33f9r] {
        max-width: 100%;
        margin: 0.5rem;
        border-radius: 12px;
    }

    .change-password-modal-header[b-vjwbm33f9r] {
        padding: 1.5rem;
        border-radius: 12px 12px 0 0;
    }

    .change-password-modal-header .modal-icon[b-vjwbm33f9r] {
        width: 48px;
        height: 48px;
    }

    .change-password-modal-header .modal-icon i[b-vjwbm33f9r] {
        font-size: 24px;
    }

    .change-password-modal-header .modal-title[b-vjwbm33f9r] {
        font-size: 1.5rem;
    }

    .change-password-modal-header .modal-subtitle[b-vjwbm33f9r] {
        font-size: 0.875rem;
    }

    .change-password-modal-body[b-vjwbm33f9r] {
        padding: 1.5rem;
    }

    .change-password-modal-body .form-group[b-vjwbm33f9r] {
        margin-bottom: 1.5rem;
    }
}
/* _content/ltia.portal.web/Components/Commons/ConfirmationModal.razor.rz.scp.css */
/* ========================================
   CONFIRMATION MODAL STYLES FOR BLAZOR
   ======================================== */

/* Block scroll khi modal hiển thị - Chỉ dùng overflow: hidden, không dùng position: fixed để tránh tạo khoảng trắng */
html.modal-open[b-0f5kyz090s] {
    overflow: hidden !important;
    height: 100% !important;
}

body.modal-open[b-0f5kyz090s] {
    overflow: hidden !important;
    height: 100% !important;
    position: relative !important;
    margin: 0 !important;
}

/* Đảm bảo main content area cũng không scroll khi modal mở */
body.modal-open main[b-0f5kyz090s] {
    overflow: hidden !important;
}

/* Đảm bảo không có element nào có z-index cao hơn modal overlay khi modal mở */
/* Giảm z-index của các elements trong Account page khi modal mở để tránh che phủ modal */
html.modal-open .account-page[b-0f5kyz090s],
html.modal-open .account-search-section[b-0f5kyz090s],
html.modal-open .list-header[b-0f5kyz090s],
html.modal-open .account-list-container[b-0f5kyz090s],
html.modal-open .card-header-section[b-0f5kyz090s],
html.modal-open .account-list-table[b-0f5kyz090s],
html.modal-open .table-footer[b-0f5kyz090s],
html.modal-open .account-table-container[b-0f5kyz090s],
html.modal-open .account-list[b-0f5kyz090s] {
    z-index: 1 !important;
    position: relative !important;
}


/* Đảm bảo modal overlay luôn ở trên cùng với z-index cao nhất */
/* Tăng z-index cao hơn modal "Thêm giảng viên" (999999) để hiển thị trên cùng */
.simple-modal-overlay.show[b-0f5kyz090s] {
    z-index: 10000000 !important;
    position: fixed !important;
}

/* Đảm bảo modal container cũng có z-index cao */
.simple-modal-overlay.show .simple-modal-container[b-0f5kyz090s] {
    z-index: 10000001 !important;
    position: relative !important;
}

/* Fallback cho browsers cũ - sử dụng :has() selector nếu được hỗ trợ */
@supports selector(:has(*)) {
    html:has(.simple-modal-overlay.show)[b-0f5kyz090s] {
        overflow: hidden !important;
        height: 100% !important;
    }
    
    body:has(.simple-modal-overlay.show)[b-0f5kyz090s] {
        overflow: hidden !important;
        height: 100% !important;
        position: relative !important;
        margin: 0 !important;
    }
    
    body:has(.simple-modal-overlay.show) main[b-0f5kyz090s] {
        overflow: hidden !important;
    }
}

/* Simple Modal Overlay - Full Screen với z-index cao nhất */
.simple-modal-overlay[b-0f5kyz090s] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    background: rgba(0, 0, 0, 0.5) !important;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000000 !important; /* Cao hơn modal "Thêm giảng viên" (999999) và tất cả elements khác */
    backdrop-filter: blur(2px);
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: auto !important;
    /* Đảm bảo overlay che phủ toàn bộ viewport, không bị che bởi elements khác */
    inset: 0 !important;
}

.simple-modal-overlay.show[b-0f5kyz090s] {
    display: flex !important;
    position: fixed !important;
    z-index: 10000000 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
}

/* Modal Container */
.simple-modal-container[b-0f5kyz090s] {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    width: 90%;
    max-width: 420px;
    overflow: hidden;
    animation: modalSlideIn-b-0f5kyz090s 0.3s ease-out;
}

@keyframes modalSlideIn-b-0f5kyz090s {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Modal Header */
.simple-modal-header[b-0f5kyz090s] {
    padding: 1.5rem 1.5rem 1rem 1.5rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    border-bottom: 1px solid #e5e7eb;
}

.modal-icon-title[b-0f5kyz090s] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.modal-icon-circle[b-0f5kyz090s] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.modal-icon-circle.delete[b-0f5kyz090s] {
    background: #FEF2F2;
    color: #DC2626;
}

.modal-icon-circle.warning[b-0f5kyz090s] {
    background: #FFFBEB;
    color: #D97706;
}

.modal-icon-circle.default[b-0f5kyz090s] {
    background: #EFF6FF;
    color: #2563EB;
}

.modal-icon-circle.info[b-0f5kyz090s] {
    background: #F0F9FF;
    color: #0284C7;
}

.modal-icon-circle.success[b-0f5kyz090s] {
    background: #F0FDF4;
    color: #16A34A;
}

.modal-title[b-0f5kyz090s] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

.modal-close-btn[b-0f5kyz090s] {
    background: none;
    border: none;
    color: #6b7280;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.modal-close-btn:hover[b-0f5kyz090s] {
    background: #f3f4f6;
    color: #374151;
}

/* Modal Content */
.simple-modal-content[b-0f5kyz090s] {
    padding: 1rem 1.5rem 1.5rem 1.5rem;
}

.modal-message[b-0f5kyz090s] {
    font-size: 0.95rem;
    color: #374151;
    line-height: 1.5;
    margin: 0;
}

.modal-message strong[b-0f5kyz090s] {
    color: #214ca6;
    font-weight: 600;
}

.modal-warning[b-0f5kyz090s] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.75rem;
    background: #FEF3C7;
    border: 1px solid #FDE68A;
    border-radius: 6px;
    font-size: 0.875rem;
    color: #92400E;
}

.modal-warning i[b-0f5kyz090s] {
    color: #D97706;
    font-size: 0.9rem;
}

/* Modal Actions */
.simple-modal-actions[b-0f5kyz090s] {
    padding: 1rem 1.5rem 1.5rem 1.5rem;
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    border-top: 1px solid #e5e7eb;
}

.modal-btn[b-0f5kyz090s] {
    padding: 0.625rem 1.25rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 80px;
    justify-content: center;
}

.modal-btn:disabled[b-0f5kyz090s] {
    cursor: not-allowed;
    opacity: 0.6;
}

.modal-btn-cancel[b-0f5kyz090s] {
    background: #ffffff;
    color: #6b7280;
    border-color: #d1d5db;
}

.modal-btn-cancel:hover:not(:disabled)[b-0f5kyz090s] {
    background: #f9fafb;
    color: #374151;
    border-color: #9ca3af;
}

.modal-btn-confirm.delete[b-0f5kyz090s] {
    background: #ef4444;
    color: #ffffff;
    border-color: #ef4444;
}

.modal-btn-confirm.delete:hover:not(:disabled)[b-0f5kyz090s] {
    background: #dc2626;
    border-color: #dc2626;
}

.modal-btn-confirm.warning[b-0f5kyz090s] {
    background: #f59e0b;
    color: #ffffff;
    border-color: #f59e0b;
}

.modal-btn-confirm.warning:hover:not(:disabled)[b-0f5kyz090s] {
    background: #d97706;
    border-color: #d97706;
}

.modal-btn-confirm.default[b-0f5kyz090s] {
    background: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
}

.modal-btn-confirm.default:hover:not(:disabled)[b-0f5kyz090s] {
    background: #2563eb;
    border-color: #2563eb;
}

.modal-btn-confirm.info[b-0f5kyz090s] {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
}

.modal-btn-confirm.info:hover:not(:disabled)[b-0f5kyz090s] {
    background: #0369a1;
    border-color: #0369a1;
}

.modal-btn-confirm.success[b-0f5kyz090s] {
    background: #16A34A;
    color: #ffffff;
    border-color: #16A34A;
}

.modal-btn-confirm.success:hover:not(:disabled)[b-0f5kyz090s] {
    background: #15803D;
    border-color: #15803D;
}

/* Loading State */
.modal-btn.loading[b-0f5kyz090s] {
    pointer-events: none;
}

.modal-btn.loading i.fa-spinner[b-0f5kyz090s] {
    animation: spin-b-0f5kyz090s 1s linear infinite;
}

@keyframes spin-b-0f5kyz090s {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Responsive Design */
@media (max-width: 480px) {
    .simple-modal-container[b-0f5kyz090s] {
        width: 95%;
        margin: 1rem;
    }

    .simple-modal-actions[b-0f5kyz090s] {
        flex-direction: column;
    }

    .modal-btn[b-0f5kyz090s] {
        width: 100%;
    }
}
/* _content/ltia.portal.web/Components/Commons/ConfirmModal.razor.rz.scp.css */
.modal-overlay[b-ofpbr4qmkw] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn-b-ofpbr4qmkw 0.2s;
    pointer-events: auto;
}

@keyframes fadeIn-b-ofpbr4qmkw {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-dialog[b-ofpbr4qmkw] {
    background: white;
    border-radius: 6px;
    width: 90%;
    max-width: 450px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    animation: slideIn-b-ofpbr4qmkw 0.2s;
    position: relative;
    z-index: 10001;
    pointer-events: auto;
}

@keyframes slideIn-b-ofpbr4qmkw {
    from {
        transform: translateY(-30px);
        opacity: 0;
    }

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

.modal-header[b-ofpbr4qmkw] {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f1f3f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h5[b-ofpbr4qmkw] {
    margin: 0;
    font-size: 1.125rem;
    color: #2c3e50;
    font-weight: 600;
}

.btn-close[b-ofpbr4qmkw] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #95a5a6;
    cursor: pointer;
    padding: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    transition: all 0.2s;
    position: relative;
    z-index: 10002;
    pointer-events: auto;
}

.btn-close:hover[b-ofpbr4qmkw] {
    background: #f1f3f5;
    color: #2c3e50;
}

.modal-body[b-ofpbr4qmkw] {
    padding: 1.5rem 1.25rem;
    color: #495057;
    font-size: 0.95rem;
    line-height: 1.6;
}

.modal-footer[b-ofpbr4qmkw] {
    padding: 1rem 1.25rem;
    border-top: 1px solid #f1f3f5;
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.btn-cancel[b-ofpbr4qmkw],
.btn-confirm[b-ofpbr4qmkw] {
    padding: 0.6rem 1.25rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
    position: relative;
    z-index: 10002;
    pointer-events: auto;
}

.btn-cancel[b-ofpbr4qmkw] {
    background: #ecf0f1;
    color: #2c3e50;
}

.btn-cancel:hover[b-ofpbr4qmkw] {
    background: #bdc3c7;
}

.btn-confirm[b-ofpbr4qmkw] {
    background: #e74c3c;
    color: white;
}

.btn-confirm:hover[b-ofpbr4qmkw] {
    background: #c0392b;
}

/* Đảm bảo modal hoạt động trên mọi trình duyệt */
.modal-overlay *[b-ofpbr4qmkw] {
    box-sizing: border-box;
}

/* Responsive */
@media (max-width: 768px) {
    .modal-dialog[b-ofpbr4qmkw] {
        width: 95%;
        margin: 1rem;
    }

    .modal-footer[b-ofpbr4qmkw] {
        flex-direction: column-reverse;
    }

    .btn-cancel[b-ofpbr4qmkw],
    .btn-confirm[b-ofpbr4qmkw] {
        width: 100%;
    }
}

/* Debug styles - có thể xóa sau khi test */
.modal-overlay[b-ofpbr4qmkw] {
    /* border: 2px solid red; */
    /* Uncomment để debug */
}

.modal-dialog[b-ofpbr4qmkw] {
    /* border: 2px solid blue; */
    /* Uncomment để debug */
}
/* _content/ltia.portal.web/Components/Commons/DateTimeInput.razor.rz.scp.css */
/* DateTimeInput Component Styles - MVC Style */
.datetime-input-group[b-y64y5elp7l] {
    position: relative;
    margin-bottom: 1rem;
}

.datetime-label[b-y64y5elp7l] {
    display: block;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.datetime-label i[b-y64y5elp7l] {
    margin-right: 0.5rem;
    color: #214ca6;
}

.datetime-label .required[b-y64y5elp7l] {
    color: #dc2626;
    margin-left: 0.25rem;
}

.datetime-input-group-wrapper[b-y64y5elp7l] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.datetime-input-wrapper[b-y64y5elp7l] {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 400px !important;
}

.time-input-wrapper[b-y64y5elp7l] {
    flex: 0 0 auto;
    position: relative;
}

.time-input[b-y64y5elp7l] {
    width: 120px;
    padding: 0.75rem 2.5rem 0.75rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.875rem;
    color: #374151;
    background-color: #ffffff;
    transition: all 0.2s ease;
    cursor: text;
}

.time-picker-btn[b-y64y5elp7l] {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: color 0.2s ease;
}

.time-picker-btn:hover[b-y64y5elp7l] {
    color: #214ca6;
}

.time-input:focus[b-y64y5elp7l] {
    outline: none;
    border-color: #214ca6;
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.time-input:disabled[b-y64y5elp7l] {
    background-color: #f9fafb;
    color: #6b7280;
    cursor: not-allowed;
}

.datetime-input[b-y64y5elp7l] {
    width: 100%;
    padding: 0.75rem 2.5rem 0.75rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.875rem;
    color: #374151;
    background-color: #ffffff;
    transition: all 0.2s ease;
}

.datetime-input:focus[b-y64y5elp7l] {
    outline: none;
    border-color: #214ca6;
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.datetime-input:disabled[b-y64y5elp7l] {
    background-color: #f9fafb;
    color: #6b7280;
    cursor: not-allowed;
}

.datetime-clear-btn[b-y64y5elp7l],
.datetime-calendar-btn[b-y64y5elp7l] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: #6b7280;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 4px;
}

.datetime-clear-btn[b-y64y5elp7l] {
    right: 2.5rem;
}

.datetime-calendar-btn[b-y64y5elp7l] {
    right: 0.5rem;
}

.datetime-clear-btn:hover[b-y64y5elp7l],
.datetime-calendar-btn:hover[b-y64y5elp7l] {
    background-color: #f3f4f6;
    color: #374151;
}

.datetime-clear-btn:active[b-y64y5elp7l],
.datetime-calendar-btn:active[b-y64y5elp7l] {
    background-color: #e5e7eb;
    transform: translateY(-50%) scale(0.95);
}

/* Calendar Picker Styles */
.datetime-picker[b-y64y5elp7l] {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 1rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    width: 73%;
    margin-top: -1.5rem;
}

.datetime-picker-header[b-y64y5elp7l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}

.picker-nav-btn[b-y64y5elp7l] {
    background: transparent;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 0.5rem;
    cursor: pointer;
    color: #6b7280;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
}

.picker-nav-btn:hover[b-y64y5elp7l] {
    background: #f3f4f6;
    border-color: #9ca3af;
    color: #374151;
}

.picker-nav-btn:active[b-y64y5elp7l] {
    background: #e5e7eb;
    transform: translateY(1px);
}

.picker-month-year[b-y64y5elp7l] {
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
    text-transform: capitalize;
}

.datetime-picker-body[b-y64y5elp7l] {
    margin-bottom: 1rem;
}

.picker-weekdays[b-y64y5elp7l] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

.picker-weekday[b-y64y5elp7l] {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    padding: 0.5rem 0;
}

.picker-days[b-y64y5elp7l] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.25rem;
}

.picker-day[b-y64y5elp7l] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    color: #374151;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    background: transparent;
    margin: 0 auto;
}

.picker-day:hover:not(:disabled)[b-y64y5elp7l] {
    background: #e5e7eb;
    border-color: #9ca3af;
    color: #1f2937;
}

.picker-day.selected[b-y64y5elp7l] {
    background: #214ca6;
    color: #ffffff !important;
    border-color: #214ca6;
    font-weight: 600;
    text-shadow: none;
    opacity: 1;
}

.picker-day.selected:hover[b-y64y5elp7l] {
    background: #214ca6 !important;
    color: #ffffff !important;
    border-color: #214ca6 !important;
}

.picker-day.today[b-y64y5elp7l] {
    border-color: #214ca6;
    color: #214ca6;
    font-weight: 600;
}

.picker-day.today:hover:not(:disabled)[b-y64y5elp7l] {
    background: rgba(33, 76, 166, 0.15);
    border-color: #214ca6;
    color: #214ca6;
}

.picker-day.other-month[b-y64y5elp7l] {
    color: #9ca3af;
}

.picker-day.other-month:hover:not(:disabled)[b-y64y5elp7l] {
    background: #f3f4f6;
    color: #6b7280;
    border-color: #d1d5db;
}

.picker-day:disabled[b-y64y5elp7l] {
    opacity: 0.5;
    cursor: not-allowed;
}

.datetime-picker-footer[b-y64y5elp7l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.75rem;
    border-top: 1px solid #e5e7eb;
}

.picker-today-btn[b-y64y5elp7l],
.picker-clear-btn[b-y64y5elp7l] {
    background: transparent;
    border: none;
    color: #214ca6;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.picker-today-btn:hover[b-y64y5elp7l],
.picker-clear-btn:hover[b-y64y5elp7l] {
    background: rgba(33, 76, 166, 0.1);
    color: #1e40af;
}

.picker-today-btn:active[b-y64y5elp7l],
.picker-clear-btn:active[b-y64y5elp7l] {
    background: rgba(33, 76, 166, 0.2);
    transform: translateY(1px);
}

/* Responsive Design */
@media (max-width: 640px) {
    .datetime-input-group-wrapper[b-y64y5elp7l] {
        flex-direction: column;
        gap: 0.5rem;
        align-items: stretch;
    }
    
    .time-input-wrapper[b-y64y5elp7l] {
        flex: 1;
    }
    
    .time-input[b-y64y5elp7l] {
        width: 100%;
    }
    
    .datetime-picker[b-y64y5elp7l] {
        min-width: 260px;
        padding: 0.75rem;
    }
    
    .picker-day[b-y64y5elp7l] {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 0.75rem;
    }
    
    .picker-weekday[b-y64y5elp7l] {
        font-size: 0.625rem;
        padding: 0.25rem 0;
    }
}

/* Animation for picker show/hide */
.datetime-picker[b-y64y5elp7l] {
    animation: fadeInDown-b-y64y5elp7l 0.2s ease-out;
}

@keyframes fadeInDown-b-y64y5elp7l {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Time Picker Dropdown */
.time-picker-dropdown[b-y64y5elp7l] {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    z-index: 1000;
    margin-top: 0.25rem;
    min-width: 280px;
    max-width: 320px;
}

.time-picker-content[b-y64y5elp7l] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 1rem;
}

.time-column[b-y64y5elp7l] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.time-scroll-container[b-y64y5elp7l] {
    max-height: 200px;
    overflow-y: auto;
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
}

.time-item[b-y64y5elp7l] {
    width: 100%;
    padding: 0.75rem 0.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #6b7280;
    font-size: 0.875rem;
    border: none;
    background: none;
    border-bottom: 1px solid #e5e7eb;
}

.time-item:last-child[b-y64y5elp7l] {
    border-bottom: none;
}

.time-item:hover[b-y64y5elp7l] {
    background-color: #f3f4f6;
    color: #374151;
}

.time-item.selected[b-y64y5elp7l] {
    background-color: #e5e7eb;
    color: #1f2937;
    font-weight: 600;
}

.time-picker-footer[b-y64y5elp7l] {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 0 0 8px 8px;
}

.time-picker-cancel[b-y64y5elp7l],
.time-picker-ok[b-y64y5elp7l] {
    background: none;
    border: none;
    color: #214ca6;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

.time-picker-cancel:hover[b-y64y5elp7l],
.time-picker-ok:hover[b-y64y5elp7l] {
    background-color: #f3f4f6;
}

/* Focus styles for accessibility */
.datetime-input:focus-visible[b-y64y5elp7l],
.picker-nav-btn:focus-visible[b-y64y5elp7l],
.picker-day:focus-visible[b-y64y5elp7l],
.picker-today-btn:focus-visible[b-y64y5elp7l],
.picker-clear-btn:focus-visible[b-y64y5elp7l] {
    outline-offset: 2px;
}

/* Time Input Styles */
.time-input-wrapper[b-y64y5elp7l] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.time-spinner-group[b-y64y5elp7l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.time-spinner-input[b-y64y5elp7l] {
    width: 3rem;
    height: 2.8rem;
    text-align: center;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    background-color: #ffffff;
    transition: all 0.2s ease;
    padding: 0;
}

.time-spinner-input:focus[b-y64y5elp7l] {
    outline: none;
    border-color: #214ca6;
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.time-spinner-btn[b-y64y5elp7l] {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    color: #6b7280;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 4px;
}

.time-spinner-btn:hover[b-y64y5elp7l] {
    background-color: #f3f4f6;
    color: #374151;
}

.time-spinner-btn:active[b-y64y5elp7l] {
    background-color: #e5e7eb;
    transform: scale(0.95);
}

.time-spinner-btn i[b-y64y5elp7l] {
    font-size: 0.75rem;
}

.time-separator[b-y64y5elp7l] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0.25rem;
    align-self: center;
}
/* _content/ltia.portal.web/Components/Commons/InputWithStatus.razor.rz.scp.css */
/* Input Wrapper */
.input-with-status[b-2v5f3zr2c9] {
    width: 100%;
}

.input-wrapper[b-2v5f3zr2c9] {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

/* Input Field */
.status-input[b-2v5f3zr2c9] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s ease;
    background: white;
    padding-right: 3rem; /* Reserve space for icon */
}

.status-input:focus[b-2v5f3zr2c9] {
    outline: none;
    border-color: #214ca6;
    border-width: 1px;
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.status-input:disabled[b-2v5f3zr2c9] {
    background: #f3f4f6;
    cursor: not-allowed;
}

/* Status Icon in Input */
.status-icon-wrapper[b-2v5f3zr2c9] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.status-icon[b-2v5f3zr2c9] {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
}

.status-icon.loading[b-2v5f3zr2c9] {
    color: #214ca6;
}

.status-icon.success[b-2v5f3zr2c9] {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.status-icon.error[b-2v5f3zr2c9] {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

/* Status Message Box */
.status-message[b-2v5f3zr2c9] {
    margin-top: 16px;
    padding: 16px 20px;
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    animation: slideDown-b-2v5f3zr2c9 0.3s ease-out;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

@keyframes slideDown-b-2v5f3zr2c9 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.status-message.loading[b-2v5f3zr2c9] {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #0ea5e9;
}

.status-message.success[b-2v5f3zr2c9] {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #10b981;
}

.status-message.error[b-2v5f3zr2c9] {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 1px solid #ef4444;
}

.status-message-icon[b-2v5f3zr2c9] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.status-message.loading .status-message-icon[b-2v5f3zr2c9] {
    background: #0ea5e9;
    color: white;
}

.status-message.success .status-message-icon[b-2v5f3zr2c9] {
    background: #10b981;
    color: white;
}

.status-message.error .status-message-icon[b-2v5f3zr2c9] {
    background: #ef4444;
    color: white;
}

.status-message-content[b-2v5f3zr2c9] {
    flex: 1;
    min-width: 0;
}

.status-message-title[b-2v5f3zr2c9] {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    line-height: 1.4;
}

.status-message.loading .status-message-title[b-2v5f3zr2c9] {
    color: #0369a1;
}

.status-message.success .status-message-title[b-2v5f3zr2c9] {
    color: #047857;
}

.status-message.error .status-message-title[b-2v5f3zr2c9] {
    color: #dc2626;
}

.status-message-text[b-2v5f3zr2c9] {
    font-size: 14px;
    font-weight: 500;
    opacity: 0.9;
    line-height: 1.4;
}

.status-message.loading .status-message-text[b-2v5f3zr2c9] {
    color: #0369a1;
}

.status-message.success .status-message-text[b-2v5f3zr2c9] {
    color: #047857;
}

.status-message.error .status-message-text[b-2v5f3zr2c9] {
    color: #dc2626;
}

/* Responsive */
@media (max-width: 768px) {
    .status-input[b-2v5f3zr2c9] {
        padding: 14px 16px;
        padding-right: 2.75rem;
        font-size: 15px;
    }

    .status-icon[b-2v5f3zr2c9] {
        width: 20px;
        height: 20px;
        font-size: 12px;
    }

    .status-message[b-2v5f3zr2c9] {
        padding: 14px 16px;
        gap: 12px;
    }

    .status-message-icon[b-2v5f3zr2c9] {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .status-message-title[b-2v5f3zr2c9] {
        font-size: 15px;
    }

    .status-message-text[b-2v5f3zr2c9] {
        font-size: 13px;
    }
}

/* _content/ltia.portal.web/Components/Commons/Loading.razor.rz.scp.css */
/* Loading State - Based on Scores/Index.razor */
.empty-state[b-sez1eqx04q] {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--gray-600);
}

.empty-state-icon[b-sez1eqx04q] {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--gray-400);
}

.empty-state-icon i.fa-spin[b-sez1eqx04q] {
    color: var(--acv-primary);
}

.empty-state h3[b-sez1eqx04q] {
    margin-bottom: 0.5rem;
    color: var(--gray-700);
    font-size: 1.25rem;
    font-weight: 600;
}

.empty-state p[b-sez1eqx04q] {
    margin-bottom: 2rem;
    color: var(--gray-600);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}
/* _content/ltia.portal.web/Components/Commons/LoadingOverlay.razor.rz.scp.css */
/* ===========================================
   ACV LOGO LOADING OVERLAY
   =========================================== */

/* Global Loading Overlay */
.loading-overlay[b-owctetalx6] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: #ffffff;
    overflow: hidden;
}

.loading-overlay.show[b-owctetalx6] {
    opacity: 1;
    visibility: visible;
}

/* Loading Container */
.loading-container[b-owctetalx6] {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 0 30px rgba(33, 76, 166, 0.2));
    animation: containerFloat-b-owctetalx6 3s ease-in-out infinite;
}

@keyframes containerFloat-b-owctetalx6 {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* Logo Wrapper */
.logo-wrapper[b-owctetalx6] {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.acv-logo[b-owctetalx6] {
    width: 80px;
    height: 80px;
    object-fit: contain;
    filter: drop-shadow(0 4px 20px rgba(33, 76, 166, 0.2)) drop-shadow(0 0 30px rgba(33, 76, 166, 0.3));
    animation: logoPulse-b-owctetalx6 3s ease-in-out infinite;
}

@keyframes logoPulse-b-owctetalx6 {

    0%,
    100% {
        transform: scale(1);
        filter: drop-shadow(0 4px 20px rgba(33, 76, 166, 0.2)) drop-shadow(0 0 30px rgba(33, 76, 166, 0.3));
    }

    50% {
        transform: scale(1.05);
        filter: drop-shadow(0 6px 25px rgba(33, 76, 166, 0.4)) drop-shadow(0 0 40px rgba(33, 76, 166, 0.5));
    }
}

/* Airplane Orbit */
.airplane-orbit[b-owctetalx6] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 160px;
    height: 160px;
    transform: translate(-50%, -50%);
    animation: airplaneOrbit-b-owctetalx6 3s linear infinite;
}

.airplane-orbit[b-owctetalx6]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border: 2px solid rgba(33, 76, 166, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: orbitGlow-b-owctetalx6 2s ease-in-out infinite;
}

@keyframes orbitGlow-b-owctetalx6 {

    0%,
    100% {
        border-color: rgba(33, 76, 166, 0.1);
        box-shadow: 0 0 20px rgba(33, 76, 166, 0.1);
    }

    50% {
        border-color: rgba(33, 76, 166, 0.3);
        box-shadow: 0 0 30px rgba(33, 76, 166, 0.2);
    }
}

.airplane[b-owctetalx6] {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.airplane[b-owctetalx6]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    background: radial-gradient(circle, rgba(33, 76, 166, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: airplaneTrail-b-owctetalx6 0.5s ease-out infinite;
}

@keyframes airplaneTrail-b-owctetalx6 {
    0% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(0.5);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

.airplane-icon[b-owctetalx6] {
    width: 24px;
    height: 24px;
    color: #214ca6;
    transform: rotate(90deg) !important;
    filter: drop-shadow(0 2px 8px rgba(33, 76, 166, 0.4)) drop-shadow(0 0 15px rgba(33, 76, 166, 0.6));
    animation: airplaneGlow-b-owctetalx6 1.5s ease-in-out infinite;
    z-index: 2;
    position: relative;
}

@keyframes airplaneGlow-b-owctetalx6 {

    0%,
    100% {
        filter: drop-shadow(0 2px 8px rgba(33, 76, 166, 0.4)) drop-shadow(0 0 15px rgba(33, 76, 166, 0.6));
        transform: rotate(45deg) scale(1);
    }

    50% {
        filter: drop-shadow(0 3px 12px rgba(33, 76, 166, 0.6)) drop-shadow(0 0 20px rgba(33, 76, 166, 0.8));
        transform: rotate(45deg) scale(1.1);
    }
}



/* ===========================================
   PARTICLES ANIMATION
   =========================================== */

.particles-container[b-owctetalx6] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.particle[b-owctetalx6] {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(33, 76, 166, 0.6);
    border-radius: 50%;
    animation: particleFloat-b-owctetalx6 6s ease-in-out infinite;
}

.particle-1[b-owctetalx6] {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
    animation-duration: 8s;
}

.particle-2[b-owctetalx6] {
    top: 30%;
    right: 15%;
    animation-delay: 1s;
    animation-duration: 7s;
}

.particle-3[b-owctetalx6] {
    top: 60%;
    left: 20%;
    animation-delay: 2s;
    animation-duration: 9s;
}

.particle-4[b-owctetalx6] {
    top: 70%;
    right: 25%;
    animation-delay: 3s;
    animation-duration: 6s;
}

.particle-5[b-owctetalx6] {
    top: 40%;
    left: 50%;
    animation-delay: 4s;
    animation-duration: 8s;
}

.particle-6[b-owctetalx6] {
    top: 80%;
    left: 70%;
    animation-delay: 5s;
    animation-duration: 7s;
}

@keyframes particleFloat-b-owctetalx6 {

    0%,
    100% {
        transform: translateY(0px) translateX(0px) scale(1);
        opacity: 0.6;
    }

    25% {
        transform: translateY(-20px) translateX(10px) scale(1.2);
        opacity: 0.8;
    }

    50% {
        transform: translateY(-10px) translateX(-15px) scale(0.8);
        opacity: 0.4;
    }

    75% {
        transform: translateY(-30px) translateX(5px) scale(1.1);
        opacity: 0.7;
    }
}


/* ===========================================
   ANIMATIONS - ACV LOGO LOADING
   =========================================== */

/* Airplane Orbit Animation */
@keyframes airplaneOrbit-b-owctetalx6 {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Airplane Tilt Animation */
@keyframes airplaneTilt-b-owctetalx6 {

    0%,
    25%,
    50%,
    75%,
    100% {
        transform: translateX(-50%) rotate(45deg);
    }
}

/* ===========================================
   RESPONSIVE DESIGN
   =========================================== */

@media (max-width: 768px) {
    .loading-container[b-owctetalx6] {
        width: 180px;
        height: 180px;
    }

    .acv-logo[b-owctetalx6] {
        width: 70px;
        height: 70px;
    }

    .airplane-orbit[b-owctetalx6] {
        width: 140px;
        height: 140px;
    }

    .airplane[b-owctetalx6] {
        width: 28px;
        height: 28px;
    }

    .airplane-icon[b-owctetalx6] {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 480px) {
    .loading-container[b-owctetalx6] {
        width: 160px;
        height: 160px;
    }

    .acv-logo[b-owctetalx6] {
        width: 60px;
        height: 60px;
    }

    .airplane-orbit[b-owctetalx6] {
        width: 120px;
        height: 120px;
    }

    .airplane[b-owctetalx6] {
        width: 24px;
        height: 24px;
    }

    .airplane-icon[b-owctetalx6] {
        width: 18px;
        height: 18px;
    }
}

/* ===========================================
   ACCESSIBILITY
   =========================================== */

@media (prefers-reduced-motion: reduce) {

    .acv-logo[b-owctetalx6],
    .airplane-orbit[b-owctetalx6],
    .airplane-icon[b-owctetalx6] {
        animation: none;
    }
}

@media (prefers-contrast: high) {
    .acv-logo[b-owctetalx6] {
        filter: contrast(1.5) brightness(0.8);
    }

    .airplane-icon[b-owctetalx6] {
        color: #000;
    }
}


/* _content/ltia.portal.web/Components/Commons/NavMenu.razor.rz.scp.css */
/* ========== Mobile Toggle Button ========== */
.navbar-toggler[b-zt30oqqti5] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
    transition: background-color 0.2s ease;
}

.navbar-toggler:hover[b-zt30oqqti5] {
    background-color: rgba(255, 255, 255, 0.15);
}

.navbar-toggler:checked[b-zt30oqqti5] {
    background-color: rgba(255, 255, 255, 0.2);
}

/* ========== Top Row (Brand) ========== */
.top-row[b-zt30oqqti5] {
    height: 4rem;
    background-color: #1A2B4C;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    padding: 1rem 1.5rem;
}

.navbar-brand[b-zt30oqqti5] {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* ========== Icons (Bootstrap Icons) ========== */
.nav-item[b-zt30oqqti5]  .bi,
.submenu-item .bi[b-zt30oqqti5] {
    margin-right: 0.85rem;
    font-size: 1.15rem;
    flex-shrink: 0;
    width: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.submenu-toggle[b-zt30oqqti5] {
    margin-left: auto;
    font-size: 0.85rem;
    transition: transform 0.3s ease;
    color: rgba(255, 255, 255, 0.8);
}

.parent-menu.expanded .submenu-toggle[b-zt30oqqti5] {
    transform: rotate(0deg);
}

.parent-menu:not(.expanded) .submenu-toggle[b-zt30oqqti5] {
    transform: rotate(0deg);
}

/* ========== Nav Items ========== */
.nav-item[b-zt30oqqti5] {
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
}

.nav-item:first-of-type[b-zt30oqqti5] {
    margin-top: 1rem;
}

.nav-item:last-of-type[b-zt30oqqti5] {
    margin-bottom: 1rem;
}

/* ========== Nav Links ========== */
.nav-item[b-zt30oqqti5]  .nav-link {
    color: rgba(255, 255, 255, 0.95);
    background: none;
    border-radius: 0;
    min-height: 3rem;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.75rem 1.25rem;
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.2s ease;
    border-left: 4px solid transparent;
    position: relative;
}

/* Button với class nav-link cũng cần style giống NavLink */
.nav-item[b-zt30oqqti5]  button.nav-link {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-item[b-zt30oqqti5]  button.nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.nav-item[b-zt30oqqti5]  a.active {
    background-color: #3B5998;
    color: white;
    border-left-color: white;
    font-weight: 600;
}

.nav-item[b-zt30oqqti5]  .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: white;
}

/* ========== Submenu Styles ========== */
.submenu[b-zt30oqqti5] {
    margin: 0;
    padding: 0.5rem 0;
    background-color: rgba(0, 0, 0, 0.15);
    border-left: 3px solid rgba(255, 255, 255, 0.3);
}

.submenu-item[b-zt30oqqti5] {
    color: rgba(255, 255, 255, 0.9) !important;
    background: none !important;
    border-radius: 0;
    min-height: 2.8rem !important;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.6rem 1.25rem 0.6rem 2rem !important;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.2s ease;
    margin-bottom: 0;
    border-left: 3px solid transparent;
}

.submenu-item:hover[b-zt30oqqti5] {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
}

.submenu-item.active[b-zt30oqqti5] {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    font-weight: 600;
    border-left-color: white;
}

/* ========== Parent Menu with Children ========== */
.parent-menu[b-zt30oqqti5] {
    user-select: none;
    color: rgba(255, 255, 255, 0.95);
    background: none;
    border-radius: 0;
    min-height: 3rem;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.75rem 1.25rem;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    border-left: 4px solid transparent;
    position: relative;
}

.parent-menu:hover[b-zt30oqqti5] {
    background-color: rgba(255, 255, 255, 0.08);
    color: white;
}

.parent-menu.expanded[b-zt30oqqti5] {
    background-color: #3B5998;
    color: white;
    border-left-color: white;
}

/* ========== Scrollable Container ========== */
.nav-scrollable[b-zt30oqqti5] {
    display: none;
}

.navbar-toggler:checked~.nav-scrollable[b-zt30oqqti5] {
    display: block;
}

/* ========== Custom Scrollbar ========== */
.nav-scrollable[b-zt30oqqti5]::-webkit-scrollbar {
    width: 5px;
}

.nav-scrollable[b-zt30oqqti5]::-webkit-scrollbar-track {
    background: transparent;
}

.nav-scrollable[b-zt30oqqti5]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
}

.nav-scrollable[b-zt30oqqti5]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* ========== Responsive Design ========== */
@media (min-width: 641px) {
    .navbar-toggler[b-zt30oqqti5] {
        display: none;
    }

    .nav-scrollable[b-zt30oqqti5] {
        display: block;
        height: calc(100vh - 3.5rem) !important;
        max-height: calc(100vh - 3.5rem) !important; /* Giới hạn chiều cao khi zoom */
        overflow-y: auto !important; /* Cho phép scroll khi nội dung vượt quá - QUAN TRỌNG khi zoom */
        overflow-x: hidden !important;
        padding-right: 0.5rem;
        min-height: 0 !important; /* Cho phép flex shrink - QUAN TRỌNG cho scroll khi zoom */
    }
}
/* _content/ltia.portal.web/Components/Commons/NotificationBell.razor.rz.scp.css */
.notification-bell-container[b-sshalbkrmp] {
    position: relative;
    display: inline-block;
}

.notification-bell-button[b-sshalbkrmp] {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #f5f7fa;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #5A6C7D;
    transition: all 0.3s ease;
}

.notification-bell-button:hover[b-sshalbkrmp] {
    background-color: #e8ecf0;
    color: #4A90E2;
    transform: scale(1.05);
}

.notification-bell-button i[b-sshalbkrmp] {
    font-size: 1.25rem;
}

.notification-badge[b-sshalbkrmp] {
    position: absolute;
    top: -4px;
    right: -4px;
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    border-radius: 12px;
    padding: 2px 6px;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 20px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
    border: 2px solid white;
    z-index: 1;
}

.notification-badge.pulse[b-sshalbkrmp] {
    animation: pulse-badge-b-sshalbkrmp 0.6s ease-in-out 3;
}

@keyframes pulse-badge-b-sshalbkrmp {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
    }
    50% {
        transform: scale(1.15);
        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.5);
    }
}

.notification-bell-button.has-new[b-sshalbkrmp] {
    animation: bell-shake-b-sshalbkrmp 0.5s ease-in-out;
}

.notification-bell-button i.ringing[b-sshalbkrmp] {
    animation: bell-ring-b-sshalbkrmp 0.5s ease-in-out 3;
}

@keyframes bell-shake-b-sshalbkrmp {
    0%, 100% { transform: rotate(0deg); }
    10%, 30%, 50%, 70%, 90% { transform: rotate(-10deg); }
    20%, 40%, 60%, 80% { transform: rotate(10deg); }
}

@keyframes bell-ring-b-sshalbkrmp {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-15deg); }
    75% { transform: rotate(15deg); }
}

.notification-panel[b-sshalbkrmp] {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    transform: translateX(0);
    width: 450px;
    max-width: calc(100vw - 40px);
    max-height: 600px;
    background: white;
    border: 1px solid #ced0d4;
    border-radius: 8px;
    box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.notification-header[b-sshalbkrmp] {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #e8ecf0;
    background: white;
    position: relative;
}

.notification-header-top[b-sshalbkrmp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1rem;
}

.notification-header h4[b-sshalbkrmp] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #050505;
}

.notification-header-actions[b-sshalbkrmp] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.menu-button[b-sshalbkrmp] {
    background: transparent;
    border: none;
    font-size: 1.25rem;
    color: #5A6C7D;
    cursor: pointer;
    padding: 0;
    width: 36px;
    height: 36px;
    line-height: 1;
    border-radius: 50%;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-button:hover[b-sshalbkrmp] {
    background-color: #f2f3f5;
}

.close-button[b-sshalbkrmp] {
    display: none;
}

/* Dropdown Menu */
.notification-menu[b-sshalbkrmp] {
    position: absolute;
    top: 55px;
    right: 50px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    z-index: 1060;
    min-width: 280px;
    padding: 0.5rem 0;
    border: 1px solid #e4e6eb;
}

.menu-item[b-sshalbkrmp] {
    width: 100%;
    padding: 0.75rem 1rem;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    color: #050505;
    font-size: 0.9375rem;
    text-align: left;
}

.menu-item:hover[b-sshalbkrmp] {
    background-color: #f2f3f5;
}

.menu-item i[b-sshalbkrmp] {
    font-size: 1.25rem;
    color: #5A6C7D;
}

.menu-item span[b-sshalbkrmp] {
    flex: 1;
}

/* Tabs */
.notification-tabs[b-sshalbkrmp] {
    display: flex;
    padding: 0.5rem 1rem;
    gap: 0.5rem;
    justify-content: flex-start;
}

.tab-button[b-sshalbkrmp] {
    padding: 0.5rem 0.875rem;
    background: transparent;
    border: none;
    color: #65676b;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 18px;
    transition: all 0.2s ease;
    position: relative;
    white-space: nowrap;
}

.tab-button:hover[b-sshalbkrmp] {
    background-color: #e7f3ff;
}

.tab-button.active[b-sshalbkrmp] {
    color: #1877f2;
    background-color: #e7f3ff;
}

.tab-button.active:hover[b-sshalbkrmp] {
    background-color: #d8ebff;
}

.notification-body[b-sshalbkrmp] {
    flex: 1;
    overflow-y: auto;
    max-height: 400px;
}

.notification-list[b-sshalbkrmp] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.notification-section[b-sshalbkrmp] {
    margin-bottom: 0.5rem;
}

.notification-section-header[b-sshalbkrmp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem 0.25rem 1rem;
    font-size: 1rem;
    font-weight: 700;
    color: #050505;
}

.notification-section-title[b-sshalbkrmp] {
    margin: 0;
}

.notification-section-link[b-sshalbkrmp] {
    color: #1877f2;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.notification-section-link:hover[b-sshalbkrmp] {
    text-decoration: underline;
}

.notification-item[b-sshalbkrmp] {
    display: flex;
    align-items: flex-start;
    padding: 0.75rem;
    margin: 0.25rem 0.5rem;
    border-radius: 8px;
    border-bottom: none;
    cursor: pointer;
    position: relative;
    transition: all 0.15s ease;
}

.notification-item:hover[b-sshalbkrmp] {
    background: #f2f3f5;
}

.notification-item:first-child[b-sshalbkrmp] {
    margin-top: 0.5rem;
}

.notification-item:last-child[b-sshalbkrmp] {
    border-bottom: none;
    margin-bottom: 0.5rem;
}

.notification-item.unread[b-sshalbkrmp] {
    background: #e7f3ff;
}

.notification-item.unread:hover[b-sshalbkrmp] {
    background: #d8ebff;
}

.notification-item.read[b-sshalbkrmp] {
    background: white;
}

.notification-item.read:hover[b-sshalbkrmp] {
    background: #f2f3f5;
}

.notification-icon[b-sshalbkrmp] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
}

.notification-icon i[b-sshalbkrmp] {
    font-size: 1.25rem;
}

.icon-info[b-sshalbkrmp] {
    background: rgba(74, 144, 226, 0.15);
    color: #4A90E2;
}

.icon-success[b-sshalbkrmp] {
    background: rgba(40, 167, 69, 0.15);
    color: #28a745;
}

.icon-warning[b-sshalbkrmp] {
    background: rgba(255, 193, 7, 0.15);
    color: #ff9800;
}

.icon-error[b-sshalbkrmp] {
    background: rgba(220, 53, 69, 0.15);
    color: #dc3545;
}

.notification-content[b-sshalbkrmp] {
    flex: 1;
    min-width: 0;
}

.notification-badge-small[b-sshalbkrmp] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1875rem 0.5rem;
    background: linear-gradient(135deg, rgba(33, 76, 166, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);
    border: 1px solid rgba(33, 76, 166, 0.15);
    border-radius: 10px;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #214CA6;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.375rem;
    width: fit-content;
}

.notification-badge-small i[b-sshalbkrmp] {
    font-size: 0.625rem;
    color: #214CA6;
}

.notification-title[b-sshalbkrmp] {
    font-weight: 600;
    font-size: 0.9375rem;
    color: #050505;
    margin-bottom: 0.125rem;
    line-height: 1.3333;
}

.notification-message[b-sshalbkrmp] {
    font-size: 0.9375rem;
    color: #050505;
    margin-bottom: 0.25rem;
    line-height: 1.3333;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notification-time[b-sshalbkrmp] {
    font-size: 0.8125rem;
    color: #1877f2;
    font-weight: 500;
}

.notification-dot[b-sshalbkrmp] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #1877f2;
    flex-shrink: 0;
    margin-left: 0.5rem;
    margin-top: 0.25rem;
}

.notification-empty[b-sshalbkrmp] {
    text-align: center;
    padding: 3rem 1.5rem;
    color: #9CA8B3;
}

.notification-empty i[b-sshalbkrmp] {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.notification-empty p[b-sshalbkrmp] {
    margin: 0;
    font-size: 0.95rem;
    color: #5A6C7D;
}

.notification-footer[b-sshalbkrmp] {
    padding: 0.875rem 1.25rem;
    border-top: 1px solid #e8ecf0;
    text-align: center;
    background: #f8f9fa;
}

.btn-link[b-sshalbkrmp] {
    background: transparent;
    border: none;
    color: #4A90E2;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.btn-link:hover[b-sshalbkrmp] {
    background-color: rgba(74, 144, 226, 0.08);
    color: #357ABD;
}

/* Popup notification giống Facebook */
.notification-popup[b-sshalbkrmp] {
    position: fixed;
    top: 70px;
    right: 20px;
    width: 350px;
    max-width: calc(100vw - 40px);
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    z-index: 1060;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    pointer-events: none;
    border: 1px solid #e8ecf0;
}

.notification-popup.show[b-sshalbkrmp] {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

.notification-popup-content[b-sshalbkrmp] {
    display: flex;
    align-items: center;
    padding: 1rem;
    gap: 0.875rem;
}

.notification-popup-icon[b-sshalbkrmp] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notification-popup-icon i[b-sshalbkrmp] {
    font-size: 1.5rem;
}

.notification-popup-icon.icon-info[b-sshalbkrmp] {
    background: rgba(74, 144, 226, 0.15);
    color: #4A90E2;
}

.notification-popup-icon.icon-success[b-sshalbkrmp] {
    background: rgba(40, 167, 69, 0.15);
    color: #28a745;
}

.notification-popup-icon.icon-warning[b-sshalbkrmp] {
    background: rgba(255, 193, 7, 0.15);
    color: #ff9800;
}

.notification-popup-icon.icon-error[b-sshalbkrmp] {
    background: rgba(220, 53, 69, 0.15);
    color: #dc3545;
}

.notification-popup-text[b-sshalbkrmp] {
    flex: 1;
    min-width: 0;
}

.notification-popup-badge[b-sshalbkrmp] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    background: linear-gradient(135deg, rgba(33, 76, 166, 0.12) 0%, rgba(59, 130, 246, 0.12) 100%);
    border: 1px solid rgba(33, 76, 166, 0.2);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #214CA6;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    box-shadow: 0 1px 3px rgba(33, 76, 166, 0.1);
}

.notification-popup-badge i[b-sshalbkrmp] {
    font-size: 0.7rem;
    color: #214CA6;
}

.notification-popup-title[b-sshalbkrmp] {
    font-weight: 600;
    font-size: 0.95rem;
    color: #2C3E50;
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

.notification-popup-message[b-sshalbkrmp] {
    font-size: 0.85rem;
    color: #5A6C7D;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notification-popup-message b[b-sshalbkrmp],
.notification-popup-message strong[b-sshalbkrmp] {
    font-weight: 700;
    color: #2C3E50;
}

.notification-popup-message i[b-sshalbkrmp],
.notification-popup-message em[b-sshalbkrmp] {
    font-style: italic;
}

.notification-popup:hover[b-sshalbkrmp] {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    transform: translateY(-2px) scale(1.01);
}

/* _content/ltia.portal.web/Components/Commons/SelectSearch.razor.rz.scp.css */
/* Wrapper */

/* Input wrapper and icons */
.select-search-input-wrapper[b-aaojz213vj] {
    cursor: text;
}

.select-search-input[b-aaojz213vj] {
    /* Align sizing to global .search-input on Index page */
    padding: 0.75rem 1rem; /* vertical 12px, horizontal 16px */
    padding-right: 3rem;   /* reserve space for icons */
    border: 1px solid #d1d5db; /* Thinner, lighter border */
    border-radius: 8px;
    font-size: 0.95rem; /* ~15px */
    background: #ffffff;
    transition: all 0.2s ease;
}

.select-search-input:focus[b-aaojz213vj] {
    outline: none;
    box-shadow: 0 0 0 0.25rem rgba(33, 76, 166, 0.15);
    border-color: #214ca6;
}

.select-search-input-icons[b-aaojz213vj] {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.select-search-clear-btn[b-aaojz213vj],
.select-search-dropdown-btn[b-aaojz213vj] {
    border: none;
    background: transparent;
    color: #6b7280;
    padding: 0.25rem 0.375rem;
    border-radius: 6px;
}

.select-search-clear-btn:hover[b-aaojz213vj],
.select-search-dropdown-btn:hover[b-aaojz213vj] {
    background: #f3f4f6;
    color: #374151;
}

.select-search-dropdown-icon[b-aaojz213vj] {
    transition: transform 0.2s ease;
}

.select-search-dropdown-icon.rotated[b-aaojz213vj] {
    transform: rotate(180deg);
}

/* Dropdown */
.select-search-dropdown[b-aaojz213vj] {
    z-index: 1050;
    max-height: 192px; /* Giảm từ 224px xuống 192px (4 * ~44px + border) để phù hợp với height mới */
    overflow-y: auto; /* Thêm scrollbar khi có nhiều hơn 4 items */
    top: 100%;
    margin-top: 0.375rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    will-change: opacity, transform;
}

.select-search-dropdown-loading[b-aaojz213vj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    color: #374151;
}

.select-search-loading-text[b-aaojz213vj] {
    font-size: 0.875rem;
}

.select-search-dropdown-empty[b-aaojz213vj] {
    padding: 0.875rem 1rem;
    color: #6b7280;
    font-size: 0.875rem;
}

/* Item */
.select-search-item[b-aaojz213vj] {
    padding: 0.625rem 1rem; /* Giảm từ 1rem (16px) xuống 0.625rem (10px) */
    cursor: pointer;
    transition: background-color 150ms ease, box-shadow 150ms ease;
    border-bottom: 1px solid #f3f4f6;
    background: #ffffff;
    will-change: background-color, box-shadow;
    min-height: auto; /* Cho phép height tự động */
}

.select-search-item:last-child[b-aaojz213vj] {
    border-bottom: none;
}

.select-search-item:hover[b-aaojz213vj] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    /* Use inset shadow instead of border/padding changes to avoid layout shift */
    box-shadow: inset 3px 0 0 0 #214ca6;
}

.select-search-item:active[b-aaojz213vj] {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    box-shadow: inset 3px 0 0 0 #214ca6;
}

.select-search-item-content[b-aaojz213vj] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem; /* Giảm gap từ 0.5rem xuống 0.375rem */
}

.select-search-item-text[b-aaojz213vj] {
    font-weight: 600;
    font-size: 0.875rem; /* Giảm font-size từ 0.9375rem xuống 0.875rem */
    color: #1f2937;
    line-height: 1.35; /* Giảm line-height từ 1.4 xuống 1.35 */
}

.select-search-selected[b-aaojz213vj] {
    margin-top: 0.875rem;
}

/* Row layout for subject items - code on left, name on right */
.select-search-item-row[b-aaojz213vj] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.subject-code-display[b-aaojz213vj] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-weight: 500;
    font-size: 0.8125rem;
    color: #4b5563;
    background-color: #f3f4f6;
    padding: 0.25rem 0.625rem;
    border-radius: 6px;
    flex-shrink: 0;
}

.subject-code-display i[b-aaojz213vj] {
    color: #214ca6;
    font-size: 0.75rem;
}

.select-search-item-name[b-aaojz213vj] {
    font-weight: 600;
    font-size: 0.9375rem;
    color: #1f2937;
    line-height: 1.4;
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* _content/ltia.portal.web/Components/Commons/StatusChangeModal.razor.rz.scp.css */
/* Status Change Modal - Base styles from ConfirmModal */
.modal-overlay[b-j31oxw622y] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn-b-j31oxw622y 0.2s;
    pointer-events: auto;
}

@keyframes fadeIn-b-j31oxw622y {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-dialog[b-j31oxw622y] {
    background: white;
    border-radius: 6px;
    width: 90%;
    max-width: 450px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    animation: slideIn-b-j31oxw622y 0.2s;
    position: relative;
    z-index: 10001;
    pointer-events: auto;
}

.status-modal .modal-dialog[b-j31oxw622y] {
    max-width: 500px;
}

@keyframes slideIn-b-j31oxw622y {
    from {
        transform: translateY(-30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header[b-j31oxw622y] {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f1f3f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h5[b-j31oxw622y] {
    margin: 0;
    font-size: 1.125rem;
    color: #2c3e50;
    font-weight: 600;
}

.btn-close[b-j31oxw622y] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #95a5a6;
    cursor: pointer;
    padding: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    transition: all 0.2s;
    position: relative;
    z-index: 10002;
    pointer-events: auto;
}

.btn-close:hover[b-j31oxw622y] {
    background: #f1f3f5;
    color: #2c3e50;
}

.modal-body[b-j31oxw622y] {
    padding: 1.5rem 1.25rem;
    color: #495057;
    font-size: 0.95rem;
    line-height: 1.6;
}

.status-modal .modal-body[b-j31oxw622y] {
    padding: 1.5rem 1.25rem;
}

.modal-info[b-j31oxw622y] {
    margin-bottom: 1.25rem;
    color: #495057;
    font-size: 0.95rem;
}

.current-status-display[b-j31oxw622y] {
    margin-bottom: 1rem;
}

.current-status-display .status-badge[b-j31oxw622y] {
    display: inline-block;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
}

.status-modal .form-group[b-j31oxw622y] {
    margin-bottom: 1.25rem;
}

.status-modal .form-label[b-j31oxw622y] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #374151;
    font-size: 0.9rem;
}

.status-modal .form-label .required[b-j31oxw622y] {
    color: #dc2626;
    margin-left: 2px;
}

.status-modal .form-select[b-j31oxw622y],
.status-modal .form-control[b-j31oxw622y] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
    font-family: inherit;
}

.status-modal .form-select:focus[b-j31oxw622y],
.status-modal .form-control:focus[b-j31oxw622y] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.status-modal .form-select:disabled[b-j31oxw622y],
.status-modal .form-control:disabled[b-j31oxw622y] {
    background-color: #f3f4f6;
    cursor: not-allowed;
    opacity: 0.6;
}

.status-modal .form-control[b-j31oxw622y] {
    resize: vertical;
    min-height: 80px;
}

.form-hint[b-j31oxw622y] {
    display: block;
    margin-top: 0.375rem;
    color: #6b7280;
    font-size: 0.8rem;
}

.validation-message[b-j31oxw622y] {
    display: block;
    margin-top: 0.375rem;
    color: #dc2626;
    font-size: 0.85rem;
}

.modal-footer[b-j31oxw622y] {
    padding: 1rem 1.25rem;
    border-top: 1px solid #f1f3f5;
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.status-modal .modal-footer[b-j31oxw622y] {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #f1f3f5;
}

.btn-cancel[b-j31oxw622y],
.btn-confirm[b-j31oxw622y] {
    padding: 0.6rem 1.25rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
    position: relative;
    z-index: 10002;
    pointer-events: auto;
}

.btn-cancel[b-j31oxw622y] {
    background: #ecf0f1;
    color: #2c3e50;
}

.btn-cancel:hover:not(:disabled)[b-j31oxw622y] {
    background: #bdc3c7;
}

.btn-cancel:disabled[b-j31oxw622y] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-confirm[b-j31oxw622y] {
    background: #3498db;
    color: white;
}

.btn-confirm:hover:not(:disabled)[b-j31oxw622y] {
    background: #2980b9;
}

.btn-confirm:disabled[b-j31oxw622y] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Đảm bảo modal hoạt động trên mọi trình duyệt */
.modal-overlay *[b-j31oxw622y] {
    box-sizing: border-box;
}

/* Responsive */
@media (max-width: 768px) {
    .modal-dialog[b-j31oxw622y] {
        width: 95%;
        margin: 1rem;
    }

    .modal-footer[b-j31oxw622y] {
        flex-direction: column-reverse;
    }

    .btn-cancel[b-j31oxw622y],
    .btn-confirm[b-j31oxw622y] {
        width: 100%;
    }
}

/* Status Badge Colors */
.status-badge.status-new[b-j31oxw622y] {
    background: #fef3c7;
    color: #92400e;
}

.status-badge.status-assigned[b-j31oxw622y] {
    background: #dbeafe;
    color: #1e40af;
}

.status-badge.status-inprogress[b-j31oxw622y] {
    background: #dbeafe;
    color: #1e40af;
}

.status-badge.status-notachieved[b-j31oxw622y] {
    background: #fee2e2;
    color: #991b1b;
}

.status-badge.status-paused[b-j31oxw622y] {
    background: #fef3c7;
    color: #92400e;
}

.status-badge.status-completed[b-j31oxw622y] {
    background: #d1fae5;
    color: #065f46;
}

.status-badge.status-closed[b-j31oxw622y] {
    background: #e5e7eb;
    color: #374151;
}

.status-badge.status-cancelled[b-j31oxw622y] {
    background: #fee2e2;
    color: #991b1b;
}

.status-badge.status-unknown[b-j31oxw622y] {
    background: #e5e7eb;
    color: #374151;
}

/* _content/ltia.portal.web/Components/Commons/TaskFileManager.razor.rz.scp.css */
.task-file-manager[b-lgcj8dzt17] {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 1.75rem 2rem;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.12), 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.18);
    animation: slideUp-b-lgcj8dzt17 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all 0.3s ease;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    margin-top: 10px;
}

    .task-file-manager:hover[b-lgcj8dzt17] {
        box-shadow: 0 12px 40px rgba(31, 38, 135, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08);
    }

.task-file-manager--compact[b-lgcj8dzt17] {
    border: 1px solid #d1d5db;
    background-color: #f9fafb;
    padding: 1rem;
}

.task-file-manager--minimal[b-lgcj8dzt17] {
    border: none;
    border-left: 3px solid #e5e7eb;
    background-color: transparent;
    padding-left: 1rem;
    box-shadow: none;
}

.task-file-manager--progress[b-lgcj8dzt17] {
    border: 1px dashed #60a5fa;
    background-color: #eff6ff;
    box-shadow: none;
}

.file-manager-header[b-lgcj8dzt17] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 2px solid rgba(33, 76, 166, 0.1);
    position: relative;
}

    .file-manager-header[b-lgcj8dzt17]::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 100px;
        height: 2px;
        background: linear-gradient(90deg, #214ca6 0%, transparent 100%);
    }

.section-title[b-lgcj8dzt17] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.file-icon[b-lgcj8dzt17] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
    font-size: 1.5rem;
    color: #214ca6;
    -webkit-text-fill-color: currentColor;
}

.header-actions[b-lgcj8dzt17] {
    display: flex;
    gap: 0.75rem;
}

.file-search-bar[b-lgcj8dzt17] {
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(33, 76, 166, 0.04) 0%, rgba(30, 64, 175, 0.04) 100%);
    border-radius: 16px;
    border: 1px solid rgba(33, 76, 166, 0.08);
}

.file-search-row[b-lgcj8dzt17] {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.search-field[b-lgcj8dzt17] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 140px;
}

.search-label[b-lgcj8dzt17] {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    margin: 0;
}

.search-label--icon[b-lgcj8dzt17] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
}

    .search-label--icon i[b-lgcj8dzt17] {
        color: #214ca6;
    }

.search-input[b-lgcj8dzt17],
.search-select[b-lgcj8dzt17],
.search-clear-btn[b-lgcj8dzt17] {
    height: 38px !important;
    padding: 6px 12px;
    font-size: 14px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background-color: #fff;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.2s;
    flex: none;
}

    .search-input:focus[b-lgcj8dzt17],
    .search-select:focus[b-lgcj8dzt17] {
        outline: none;
        border-color: #214ca6;
        box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
    }

.search-clear-btn[b-lgcj8dzt17] {
    width: auto;
    min-width: 60px;
    background-color: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .search-clear-btn:hover:not(:disabled)[b-lgcj8dzt17] {
        background-color: #e5e7eb;
        border-color: #9ca3af;
    }

.file-filter-section[b-lgcj8dzt17] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.filter-select[b-lgcj8dzt17] {
    padding: 6px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
}

.file-list[b-lgcj8dzt17] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 500px;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.file-attachment-row[b-lgcj8dzt17] {
    width: 100%;
    animation: slideInRight-b-lgcj8dzt17 0.4s ease-out backwards;
}

@keyframes slideInRight-b-lgcj8dzt17 {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

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

.file-item[b-lgcj8dzt17] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    transition: all 0.2s;
    position: relative;
}

    .file-item:hover[b-lgcj8dzt17] {
        border-color: #214ca6;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        transform: translateY(-2px);
    }

.file-attachment-row.file-pending .file-item[b-lgcj8dzt17] {
    border: 1px dashed #f59e0b;
    background-color: #fffbeb;
}

.file-attachment-row.file-inactive .file-item[b-lgcj8dzt17] {
    opacity: 0.6;
    background-color: #f3f4f6;
}

.file-subtask-hint[b-lgcj8dzt17], .file-uploader-hint[b-lgcj8dzt17] {
    margin-top: 4px;
    margin-left: 1rem;
    font-size: 12px;
    color: #6b7280;
    font-style: italic;
}

.btn-icon[b-lgcj8dzt17] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-icon:hover:not(:disabled)[b-lgcj8dzt17] {
        background-color: #f3f4f6;
        border-color: #9ca3af;
    }

.btn-download:hover[b-lgcj8dzt17] {
    color: #2563eb;
    border-color: #2563eb;
}

.btn-delete:hover[b-lgcj8dzt17] {
    color: #dc2626;
    border-color: #dc2626;
}

.modal-overlay[b-lgcj8dzt17] {
    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: 1050;
    animation: fadeIn-b-lgcj8dzt17 0.2s ease-out;
}

.modal-content[b-lgcj8dzt17] {
    background: #fff;
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    animation: slideUp-b-lgcj8dzt17 0.3s ease-out;
    display: flex;
    flex-direction: column;
}

.modal-header[b-lgcj8dzt17] {
    padding: 1.25rem;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .modal-header h3[b-lgcj8dzt17] {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 600;
    }

.modal-close[b-lgcj8dzt17] {
    border: none;
    background: transparent;
    font-size: 1.5rem;
    cursor: pointer;
    color: #6b7280;
}

.modal-body[b-lgcj8dzt17] {
    padding: 1.5rem;
}

.modal-footer[b-lgcj8dzt17] {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.dropzone-wrapper[b-lgcj8dzt17] {
    position: relative;
    margin-top: 8px;
}

.file-input-hidden[b-lgcj8dzt17] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.dropzone[b-lgcj8dzt17] {
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

    .dropzone:hover[b-lgcj8dzt17] {
        border-color: #214ca6;
        background-color: #eff6ff;
    }

.upload-progress[b-lgcj8dzt17] {
    margin-top: 1rem;
}

.progress-bar[b-lgcj8dzt17] {
    height: 6px;
    background-color: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill[b-lgcj8dzt17] {
    height: 100%;
    background-color: #214ca6;
    transition: width 0.3s ease;
}

.btn[b-lgcj8dzt17] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.btn-primary[b-lgcj8dzt17] {
    background: #214ca6;
    color: white;
}

    .btn-primary:hover[b-lgcj8dzt17] {
        background: #1e40af;
    }

.btn-secondary[b-lgcj8dzt17] {
    background: #6b7280;
    color: white;
}

    .btn-secondary:hover[b-lgcj8dzt17] {
        background: #4b5563;
    }

.btn-danger[b-lgcj8dzt17] {
    background: #dc2626;
    color: white;
}

    .btn-danger:hover[b-lgcj8dzt17] {
        background: #b91c1c;
    }

.btn-light[b-lgcj8dzt17] {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}

.btn-sm[b-lgcj8dzt17] {
    padding: 8px 16px;
    font-size: 14px;
}

.empty-state[b-lgcj8dzt17] {
    text-align: center;
    padding: 3rem;
    color: #6b7280;
}

.empty-icon[b-lgcj8dzt17] {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.loading-state[b-lgcj8dzt17] {
    text-align: center;
    padding: 2rem;
    color: #6b7280;
}

.loading-spinner[b-lgcj8dzt17] {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #214ca6;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin-b-lgcj8dzt17 1s linear infinite;
    margin: 0 auto 10px;
}

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

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

@keyframes slideUp-b-lgcj8dzt17 {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

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

@keyframes fadeIn-b-lgcj8dzt17 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.file-pagination[b-lgcj8dzt17] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

.date-range-wrapper[b-lgcj8dzt17] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.date-separator[b-lgcj8dzt17] {
    color: #6b7280;
    font-weight: 600;
    flex-shrink: 0;
}

.search-input-date[b-lgcj8dzt17] {
    display: block;
    width: 100%;
    height: 48px !important;
    padding: 0 1rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background-color: #fff;
    color: #374151;
    font-size: 0.95rem;
    font-family: inherit;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

    .search-input-date:focus[b-lgcj8dzt17] {
        outline: none;
        border-color: #214ca6;
        box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
    }

    .search-input-date[b-lgcj8dzt17]::-webkit-date-and-time-value {
        display: flex;
        align-items: center;
        height: 100%;
        margin: 0;
        line-height: normal;
    }

@media (max-width: 768px) {
    .file-manager-header[b-lgcj8dzt17] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .header-actions[b-lgcj8dzt17] {
        width: 100%;
    }

        .header-actions .btn[b-lgcj8dzt17] {
            flex: 1;
        }
}
/* Hiệu ứng khi click vào ô ngày (Focus) */
.search-input-date:focus[b-lgcj8dzt17] {
    border-color: #214ca6 !important; /* Đổi viền sang màu xanh chủ đạo */
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1) !important; /* Tạo vầng sáng xanh nhạt quanh viền */
    transition: all 0.2s ease;
}
/* _content/ltia.portal.web/Components/Exams/Admin/Commons/TagMultiSelect.razor.rz.scp.css */
.tag-multi-select[b-dj2dqdvi0r] {
    position: relative;
    width: 100%;
    z-index: 1000;
}

.tag-select-wrapper[b-dj2dqdvi0r] {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    background: var(--acv-white);
    transition: all 0.2s ease;
    cursor: text;
}

.tag-select-wrapper:focus-within[b-dj2dqdvi0r] {
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.tag-select-wrapper:hover[b-dj2dqdvi0r] {
    border-color: var(--acv-primary);
}

.tag-select-input[b-dj2dqdvi0r] {
    flex: 1;
    padding: 0.75rem 1rem;
    border: none;
    outline: none;
    font-size: 0.95rem;
    color: var(--gray-700);
    background: transparent;
    cursor: text;
    height: 48px;
}

.tag-select-input[b-dj2dqdvi0r]::placeholder {
    color: var(--gray-400);
}

.tag-select-icons[b-dj2dqdvi0r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-right: 0.5rem;
}

.tag-select-clear-btn[b-dj2dqdvi0r],
.tag-select-dropdown-btn[b-dj2dqdvi0r] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gray-500);
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border-radius: 4px;
}

.tag-select-clear-btn:hover[b-dj2dqdvi0r] {
    background: var(--gray-100);
    color: var(--acv-primary);
}

.tag-select-dropdown-btn:hover[b-dj2dqdvi0r] {
    background: var(--gray-100);
}

.tag-select-dropdown-btn i[b-dj2dqdvi0r] {
    transition: transform 0.2s ease;
}

.tag-select-dropdown-btn i.rotated[b-dj2dqdvi0r] {
    transform: rotate(180deg);
}

.tag-select-overlay[b-dj2dqdvi0r] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: transparent;
}

.tag-select-dropdown[b-dj2dqdvi0r] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--acv-white);
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-height: 208px; /* Hiển thị tối đa 4 items (4 * ~48px + padding) */
    overflow-y: auto;
    z-index: 10000;
    margin-top: 4px;
}

.tag-select-list[b-dj2dqdvi0r] {
    padding: 0;
}

.tag-select-item[b-dj2dqdvi0r] {
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid var(--gray-100);
}

.tag-select-item:last-child[b-dj2dqdvi0r] {
    border-bottom: none;
}

.tag-select-item:hover[b-dj2dqdvi0r] {
    background: var(--gray-50);
}

.tag-select-item.selected[b-dj2dqdvi0r] {
    background: var(--acv-primary-lighter);
}

.tag-select-checkbox-label[b-dj2dqdvi0r] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    width: 100%;
    margin: 0;
    font-weight: 500;
    color: var(--gray-700);
    pointer-events: none; /* Prevent label from intercepting clicks */
}

.tag-select-checkbox[b-dj2dqdvi0r] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
    pointer-events: none; /* Prevent checkbox from intercepting clicks */
}

.tag-select-checkmark[b-dj2dqdvi0r] {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--gray-400);
    border-radius: 4px;
    background: var(--acv-white);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.tag-select-checkbox:checked ~ .tag-select-checkmark[b-dj2dqdvi0r] {
    background: var(--acv-primary);
    border-color: var(--acv-primary);
}

.tag-select-checkbox:checked ~ .tag-select-checkmark[b-dj2dqdvi0r]::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.tag-select-checkbox:focus ~ .tag-select-checkmark[b-dj2dqdvi0r] {
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.tag-select-icon[b-dj2dqdvi0r] {
    color: var(--acv-primary);
    font-size: 0.9rem;
    flex-shrink: 0;
}

.tag-select-name[b-dj2dqdvi0r] {
    flex: 1;
    font-size: 0.95rem;
}

.tag-select-item.selected .tag-select-name[b-dj2dqdvi0r] {
    color: var(--acv-primary);
    font-weight: 600;
}

.tag-select-loading[b-dj2dqdvi0r] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    color: var(--gray-600);
    font-size: 0.9rem;
}

.tag-select-empty[b-dj2dqdvi0r] {
    padding: 1rem;
    text-align: center;
    color: var(--gray-500);
    font-size: 0.9rem;
}

/* Scrollbar styling */
.tag-select-dropdown[b-dj2dqdvi0r]::-webkit-scrollbar {
    width: 6px;
}

.tag-select-dropdown[b-dj2dqdvi0r]::-webkit-scrollbar-track {
    background: var(--gray-100);
    border-radius: 8px;
}

.tag-select-dropdown[b-dj2dqdvi0r]::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 8px;
}

.tag-select-dropdown[b-dj2dqdvi0r]::-webkit-scrollbar-thumb:hover {
    background: var(--gray-400);
}

/* Selected Tags Chips */
.tag-select-chips-container[b-dj2dqdvi0r] {
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
}

.tag-select-chips-label[b-dj2dqdvi0r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-700);
}

.tag-select-chips-label i[b-dj2dqdvi0r] {
    color: var(--acv-primary);
    font-size: 0.9rem;
}

.tag-select-chips[b-dj2dqdvi0r] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0;
}

.tag-select-chip[b-dj2dqdvi0r] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: var(--acv-primary-lighter);
    border: 1px solid var(--acv-primary);
    border-radius: 6px;
    font-size: 0.875rem;
    color: var(--acv-primary);
    transition: all 0.2s ease;
}

.tag-select-chip:hover[b-dj2dqdvi0r] {
    background: var(--acv-primary);
    color: var(--acv-white);
}

.tag-select-chip-text[b-dj2dqdvi0r] {
    font-weight: 500;
    line-height: 1.2;
}

.tag-select-chip-remove[b-dj2dqdvi0r] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    transition: all 0.2s ease;
    font-size: 0.75rem;
    line-height: 1;
}

.tag-select-chip-remove:hover[b-dj2dqdvi0r] {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.tag-select-chip:hover .tag-select-chip-remove[b-dj2dqdvi0r] {
    color: var(--acv-white);
}

/* _content/ltia.portal.web/Components/Exams/Admin/Layout/AdminLayout.razor.rz.scp.css */
/* Layout cho Admin area với sidebar cố định */
.admin-layout[b-z9xukimno0] {
    min-height: 100vh;
    display: flex;
    position: relative;
}

.main-content[b-z9xukimno0] {
    flex: 1;
    min-height: 100vh;
    padding: 0;
    padding-top: 64px; /* Tránh header fixed */
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    margin-left: 250px; /* Tránh sidebar */
    transition: margin-left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.content-wrapper[b-z9xukimno0] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Header Styles */
.app__header[b-z9xukimno0] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 24px;
    height: 64px;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    left: 250px; /* Bắt đầu sau sidebar (width: 250px) */
    right: 0;
    width: calc(100% - 250px); /* Chiếm phần còn lại */
    z-index: var(--z-header, 1000);
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1), width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Header Actions */
.header-actions[b-z9xukimno0] {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Portal Wrapper */
.portal-wrapper[b-z9xukimno0] {
    position: relative;
}

.btn-portal[b-z9xukimno0] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-portal:hover[b-z9xukimno0] {
    background: #f3f4f6;
    color: #374151;
    text-decoration: none;
}

.btn-portal i[b-z9xukimno0] {
    font-size: 18px;
}

/* Notification Wrapper */
.notification-wrapper[b-z9xukimno0] {
    position: relative;
}

.btn-notification[b-z9xukimno0] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-notification:hover[b-z9xukimno0] {
    background: #f3f4f6;
    color: #374151;
}

.btn-notification i[b-z9xukimno0] {
    font-size: 18px;
}

.notification-badge[b-z9xukimno0] {
    position: absolute;
    top: 6px;
    right: 6px;
    background: #ef4444;
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.notification-dropdown[b-z9xukimno0] {
    position: absolute;
    top: 100%;
    right: 0;
    width: 320px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 1001;
    margin-top: 8px;
}

.notification-dropdown.show[b-z9xukimno0] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.notification-header[b-z9xukimno0] {
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
}

.notification-header h6[b-z9xukimno0] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.notification-content[b-z9xukimno0] {
    padding: 16px 20px;
}

.text-muted[b-z9xukimno0] {
    color: #6b7280;
    font-size: 14px;
    margin: 0;
}

/* User Profile */
.user-profile[b-z9xukimno0] {
    position: relative;
}

.user-button[b-z9xukimno0] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #374151;
}

.user-button:hover[b-z9xukimno0] {
    background: #f3f4f6;
}

.user-avatar[b-z9xukimno0] {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%) !important;
    color: white !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.3);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.user-button:hover .user-avatar[b-z9xukimno0] {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.4);
}

.user-info[b-z9xukimno0] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.user-name[b-z9xukimno0] {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    line-height: 1.2;
}

.user-role[b-z9xukimno0] {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.2;
}

.user-arrow[b-z9xukimno0] {
    font-size: 12px;
    color: #6b7280;
    transition: transform 0.2s ease;
    margin-left: auto;
}

.user-button:hover .user-arrow[b-z9xukimno0] {
    transform: rotate(180deg);
}

.user-profile:hover .user-arrow[b-z9xukimno0],
.user-profile:has(.user-dropdown.show) .user-arrow[b-z9xukimno0] {
    transform: rotate(180deg);
}

/* User Dropdown */
.user-dropdown[b-z9xukimno0] {
    position: absolute;
    top: 100%;
    right: 0;
    width: 280px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 1001;
    margin-top: 8px;
}

.user-dropdown.show[b-z9xukimno0] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-dropdown-header[b-z9xukimno0] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    border-bottom: 1px solid #e5e7eb;
}

.user-avatar-large[b-z9xukimno0] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%) !important;
    color: white !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
    flex-shrink: 0;
}

.user-details[b-z9xukimno0] {
    flex: 1;
}

.user-details .user-name[b-z9xukimno0] {
    font-size: 16px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 4px;
}

.user-email[b-z9xukimno0] {
    font-size: 14px;
    color: #6b7280;
}

.user-dropdown-menu[b-z9xukimno0] {
    padding: 8px 0;
}

.dropdown-item[b-z9xukimno0] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: #374151;
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.2s ease;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.dropdown-item:hover[b-z9xukimno0] {
    background: #f3f4f6;
    color: #374151;
}

.dropdown-item i[b-z9xukimno0] {
    width: 16px;
    color: #6b7280;
}

.dropdown-item-form[b-z9xukimno0] {
    margin: 0;
    padding: 0;
}

.logout-btn[b-z9xukimno0] {
    color: #dc2626;
}

.logout-btn:hover[b-z9xukimno0] {
    background: #fef2f2;
    color: #dc2626;
}

.logout-btn i[b-z9xukimno0] {
    color: #dc2626;
}

.dropdown-divider[b-z9xukimno0] {
    height: 1px;
    background: #e5e7eb;
    margin: 8px 0;
}

/* Header cố định, điều chỉnh khi sidebar collapsed */
.admin-layout .sidebar.collapsed ~ .main-content .app__header[b-z9xukimno0] {
    left: 64px; /* Khi sidebar collapsed (width: 64px) */
    width: calc(100% - 64px);
}

/* Main content điều chỉnh khi sidebar collapsed */
.admin-layout .sidebar.collapsed ~ .main-content[b-z9xukimno0] {
    margin-left: 64px;
}

/* Responsive cho mobile */
@media (max-width: 768px) {
    .main-content[b-z9xukimno0] {
        margin-left: 0 !important;
        padding-top: 64px !important;
    }

    .app__header[b-z9xukimno0] {
        left: 0 !important;
        width: 100% !important;
        padding: 0 16px;
    }

    .admin-layout .sidebar.collapsed ~ .main-content .app__header[b-z9xukimno0] {
        left: 0 !important;
        width: 100% !important;
    }

    :global(.sidebar)[b-z9xukimno0] {
        transform: translateX(-100%);
    }
    
    :global(.sidebar.show)[b-z9xukimno0] {
        transform: translateX(0);
    }

    .user-info[b-z9xukimno0] {
        display: none;
    }

    .user-dropdown[b-z9xukimno0] {
        width: 240px;
    }

    .notification-dropdown[b-z9xukimno0] {
        width: 280px;
    }
}

/* Blazor Error UI */
#blazor-error-ui[b-z9xukimno0] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: var(--z-error, 10000);
}

#blazor-error-ui .dismiss[b-z9xukimno0] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* Toast Close Button Style */
.myCloseButtonStyleClass[b-z9xukimno0] {
    font-size: 1.25rem;
    font-weight: bold;
    color: #6b7280;
    cursor: pointer;
    transition: color 0.2s ease;
}

.myCloseButtonStyleClass:hover[b-z9xukimno0] {
    color: #374151;
}

/* _content/ltia.portal.web/Components/Exams/Admin/Layout/NavMenu.razor.rz.scp.css */
/* ==========================================
   E-TESTING PORTAL - SIDEBAR NAVIGATION
   Copy chính xác từ MVC portal_style.css
   ========================================== */

:global(:root)[b-014vxujqns] {
    --font-family-sans: "Roboto", "Segoe UI", Arial, sans-serif;
    --acv-primary: #214CA6;
    --acv-primary-dark: #183B86;
    --acv-white: #ffffff;
}

:global(body)[b-014vxujqns] {
    font-family: var(--font-family-sans);
    background: #f8f9fa;
    transition: all 0.3s ease;
    margin: 0;
    padding: 0;
}

/* Sidebar Base */
.sidebar[b-014vxujqns] {
    height: 100vh;
    max-height: 100vh !important; /* Giới hạn chiều cao khi zoom */
    background: #fff;
    border-right: 1px solid #dee2e6;
    width: 250px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: fixed;
    left: 0;
    top: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 1000;
    font-family: var(--font-family-sans);
    will-change: width;
}

/* Nav Link Styles - Global scope để CSS penetrate vào NavLink component */
.sidebar :global(.nav-link)[b-014vxujqns],
.sidebar :global(a.nav-link)[b-014vxujqns] {
    color: rgba(0, 0, 0, 0.87) !important;
    padding: 12px 16px;
    border-radius: 8px;
    margin: 4px 8px;
    transition: background-color 0.2s ease-out, color 0.2s ease-out, padding 0.25s ease-out;
    position: relative;
    display: flex;
    align-items: center;
    min-height: 48px;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    text-decoration: none;
    background-color: transparent;
}

/* Override Bootstrap link colors */
.sidebar :global(.nav-link:link)[b-014vxujqns],
.sidebar :global(.nav-link:visited)[b-014vxujqns] {
    color: rgba(0, 0, 0, 0.87) !important;
}

.sidebar :global(.nav-link.active)[b-014vxujqns],
.sidebar :global(a.nav-link.active)[b-014vxujqns],
.sidebar :global(.nav-link.active:link)[b-014vxujqns],
.sidebar :global(.nav-link.active:visited)[b-014vxujqns] {
    color: var(--acv-primary) !important;
    font-weight: 600;
    background-color: rgba(33, 76, 166, 0.08) !important;
    border-radius: 8px;
    padding: 12px 16px;
}

.sidebar :global(.nav-link.active)[b-014vxujqns]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background-color: var(--acv-primary);
    border-radius: 0 2px 2px 0;
    z-index: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.sidebar :global(.nav-link:hover)[b-014vxujqns],
.sidebar :global(.nav-link:focus)[b-014vxujqns] {
    background-color: rgba(0, 0, 0, 0.04) !important;
    color: rgba(0, 0, 0, 0.87) !important;
    padding: 12px 16px;
    outline: none;
}

.sidebar :global(.nav-link.active) i[b-014vxujqns],
.sidebar :global(.nav-link:hover) i[b-014vxujqns] {
    color: var(--acv-primary) !important;
}

.sidebar :global(.nav-link) i[b-014vxujqns] {
    width: 24px;
    height: 24px;
    margin-right: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    color: rgba(0, 0, 0, 0.6) !important;
    transition: color 0.2s ease-out,
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        margin 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    min-width: 24px;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    will-change: transform, margin;
}

.sidebar :global(.nav-link) span[b-014vxujqns] {
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: inherit;
    display: flex;
    align-items: center;
    will-change: opacity, transform, width;
}

/* Tăng kích thước tab cho màn hình lớn */
@media (min-width: 1200px) {
    .sidebar :global(.nav-link)[b-014vxujqns],
    .sidebar :global(a.nav-link)[b-014vxujqns] {
        padding: 14px 18px;
        min-height: 52px;
    }

    .sidebar :global(.nav-link.active)[b-014vxujqns],
    .sidebar :global(a.nav-link.active)[b-014vxujqns] {
        padding: 14px 18px;
    }

    .sidebar :global(.nav-link:hover)[b-014vxujqns],
    .sidebar :global(.nav-link:focus)[b-014vxujqns] {
        padding: 14px 18px;
    }

    .sidebar :global(.nav-link) i[b-014vxujqns] {
        width: 26px;
        height: 26px;
        margin-right: 14px;
        font-size: 20px;
        min-width: 26px;
    }

    .sidebar :global(.nav-link) span[b-014vxujqns] {
        font-size: 15px;
    }

    .sidebar :global(.nav-link.active) span[b-014vxujqns] {
        font-size: 15px;
    }

    .sidebar :global(.nav-link.active)[b-014vxujqns]::before {
        height: 24px;
        width: 4px;
    }
}

@media (min-width: 1400px) {
    .sidebar :global(.nav-link)[b-014vxujqns],
    .sidebar :global(a.nav-link)[b-014vxujqns] {
        padding: 16px 20px;
        min-height: 56px;
    }

    .sidebar :global(.nav-link.active)[b-014vxujqns],
    .sidebar :global(a.nav-link.active)[b-014vxujqns] {
        padding: 16px 20px;
    }

    .sidebar :global(.nav-link:hover)[b-014vxujqns],
    .sidebar :global(.nav-link:focus)[b-014vxujqns] {
        padding: 16px 20px;
    }

    .sidebar :global(.nav-link) i[b-014vxujqns] {
        width: 28px;
        height: 28px;
        margin-right: 16px;
        font-size: 22px;
        min-width: 28px;
    }

    .sidebar :global(.nav-link) span[b-014vxujqns] {
        font-size: 16px;
    }

    .sidebar :global(.nav-link.active) span[b-014vxujqns] {
        font-size: 16px;
    }

    .sidebar :global(.nav-link.active)[b-014vxujqns]::before {
        height: 28px;
        width: 4px;
    }
}

.sidebar :global(.nav-link.active) span[b-014vxujqns] {
    color: var(--acv-primary) !important;
    font-weight: 600;
}

/* Sidebar Header */
.sidebar .sidebar-header[b-014vxujqns] {
    font-size: 1.3rem;
    font-weight: bold;
    padding: 24px 20px 12px 20px;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    max-height: 96px; /* Giới hạn chiều cao header khi zoom */
    box-sizing: border-box;
    flex-shrink: 0; /* Không cho phép header bị co lại */
}

.sidebar .sidebar-logo[b-014vxujqns] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    transition: all 0.3s ease;
    position: relative;
}

/* Logo full - hiển thị khi expand */
.sidebar .logo-full[b-014vxujqns] {
    height: 100%;
    max-height: 60px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    transition: opacity 0.25s ease-out, transform 0.25s ease-out;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    display: block;
}

/* Logo mini - ẩn khi expand, hiển thị khi collapse */
.sidebar .logo-mini[b-014vxujqns] {
    display: none;
    width: 40px;
    height: 40px;
    object-fit: contain;
    transition: opacity 0.25s ease-out, transform 0.25s ease-out;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

/* Legacy styles for icon and text (no longer used but kept for reference) */
.sidebar .logo-icon[b-014vxujqns] {
    font-size: 1.5rem;
    color: var(--acv-primary);
    transition: all 0.3s ease;
}

.sidebar .logo-text[b-014vxujqns] {
    font-size: 1.3rem;
    font-weight: bold;
    color: #333;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    will-change: opacity, transform, width;
}

/* Sidebar Content */
.sidebar .sidebar-content[b-014vxujqns] {
    flex: 1 1 auto; /* Cho phép grow, shrink và có base size */
    overflow-y: auto !important; /* Cho phép scroll khi nội dung vượt quá - QUAN TRỌNG khi zoom */
    overflow-x: hidden !important; /* Ẩn scrollbar ngang */
    padding: 8px;
    padding-bottom: 80px;
    min-height: 0 !important; /* Cho phép flex shrink - QUAN TRỌNG cho scroll khi zoom */
    max-height: 100%; /* Đảm bảo không vượt quá container */
    height: 0; /* Force flexbox tính toán đúng khi zoom */
}

/* Custom scrollbar cho sidebar-content */
.sidebar .sidebar-content[b-014vxujqns]::-webkit-scrollbar {
    width: 6px;
}

.sidebar .sidebar-content[b-014vxujqns]::-webkit-scrollbar-track {
    background: var(--gray-100, #f3f4f6);
    border-radius: 3px;
}

.sidebar .sidebar-content[b-014vxujqns]::-webkit-scrollbar-thumb {
    background: var(--gray-400, #9ca3af);
    border-radius: 3px;
}

.sidebar .sidebar-content[b-014vxujqns]::-webkit-scrollbar-thumb:hover {
    background: var(--gray-500, #6b7280);
}

.sidebar.collapsed .sidebar-content[b-014vxujqns] {
    padding: 8px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Nav Item spacing */
.sidebar :global(.nav-item)[b-014vxujqns] {
    margin-bottom: 2px;
    width: 100%;
}

.sidebar :global(.nav-item:last-child)[b-014vxujqns] {
    margin-bottom: 0;
}

.sidebar :global(.nav.flex-column)[b-014vxujqns] {
    padding: 0;
    margin: 0;
    list-style: none;
    width: 100%;
}

.sidebar.collapsed :global(.nav.flex-column)[b-014vxujqns] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sidebar.collapsed :global(.nav-item)[b-014vxujqns] {
    width: auto;
    margin: 2px 0;
}

/* Sidebar Footer */
.sidebar .sidebar-footer[b-014vxujqns] {
    border-top: 1px solid #dee2e6;
    padding: 16px;
    display: flex;
    justify-content: center;
    margin-top: auto;
    flex-shrink: 0 !important; /* Không cho phép footer bị co lại khi zoom */
    position: sticky;
    bottom: 0;
    background: white;
    z-index: 10;
}

.sidebar .sidebar-toggle-btn[b-014vxujqns] {
    background: white;
    color: #666;
    border: 1px solid #ddd;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
    min-width: 120px;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    pointer-events: auto;
    user-select: none;
}

.sidebar .sidebar-toggle-btn:hover[b-014vxujqns] {
    background: #f5f5f5;
    color: #333;
    border-color: #ccc;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.sidebar .toggle-text[b-014vxujqns] {
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    will-change: opacity, transform, width;
}

/* ==========================================
   COLLAPSED SIDEBAR STYLES
   ========================================== */
.sidebar.collapsed[b-014vxujqns] {
    width: 64px;
}

.sidebar.collapsed .sidebar-header[b-014vxujqns] {
    padding: 28px 8px;
    justify-content: center;
    min-height: 96px;
    box-sizing: border-box;
}

/* Khi collapsed: ẩn logo-full, hiển thị logo-mini */
.sidebar.collapsed .logo-full[b-014vxujqns] {
    display: none;
}

.sidebar.collapsed .logo-mini[b-014vxujqns] {
    display: block;
    margin: 0 auto;
}

/* Legacy styles for collapsed icon and text (no longer used) */
.sidebar.collapsed .logo-text[b-014vxujqns] {
    opacity: 0;
    transform: translateX(-20px);
    width: 0;
    overflow: hidden;
    visibility: hidden;
}

.sidebar.collapsed .logo-icon[b-014vxujqns] {
    font-size: 1.8rem;
}

.sidebar.collapsed :global(.nav-link)[b-014vxujqns] {
    padding: 12px 0;
    margin: 4px auto;
    justify-content: center;
    position: relative;
    width: 48px;
    height: 48px;
    color: rgba(0, 0, 0, 0.87) !important;
    display: flex !important;
    align-items: center !important;
}

.sidebar.collapsed :global(.nav-link) span[b-014vxujqns] {
    opacity: 0;
    transform: translateX(-20px);
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
}

.sidebar.collapsed :global(.nav-link) i[b-014vxujqns] {
    margin: 0 !important;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-shrink: 0;
    position: static;
    transform: none;
    color: rgba(0, 0, 0, 0.6) !important;
    font-size: 20px;
}

.sidebar.collapsed :global(.nav-link.active)[b-014vxujqns]::before {
    display: none;
}

.sidebar.collapsed :global(.nav-link.active)[b-014vxujqns] {
    background-color: rgba(33, 76, 166, 0.12) !important;
    color: var(--acv-primary) !important;
    border-radius: 8px;
}

.sidebar.collapsed :global(.nav-link.active) i[b-014vxujqns] {
    color: var(--acv-primary) !important;
}

.sidebar.collapsed :global(.nav-link:hover)[b-014vxujqns] {
    background-color: rgba(0, 0, 0, 0.08) !important;
    border-radius: 8px;
}

.sidebar.collapsed :global(.nav-link:hover) i[b-014vxujqns] {
    color: var(--acv-primary) !important;
}

.sidebar.collapsed .sidebar-footer[b-014vxujqns] {
    padding: 12px 8px;
    justify-content: center;
    position: sticky;
    bottom: 0;
    background: white;
    z-index: 10;
}

.sidebar.collapsed .sidebar-toggle-btn[b-014vxujqns] {
    padding: 8px;
    border-radius: 50%;
    gap: 0;
    min-width: 40px;
    width: 40px;
    height: 40px;
    background: white;
    color: #666;
    border: 1px solid #ddd;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.sidebar.collapsed .sidebar-toggle-btn:hover[b-014vxujqns] {
    background: #f5f5f5;
    color: #333;
    border-color: #ccc;
    transform: translateY(-1px) scale(1.05);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.sidebar.collapsed .sidebar-toggle-btn i[b-014vxujqns] {
    transform: rotate(180deg);
}

.sidebar.collapsed .toggle-text[b-014vxujqns] {
    opacity: 0;
    transform: translateX(-20px);
    width: 0;
    overflow: hidden;
    visibility: hidden;
}

/* ==========================================
   SMOOTH TRANSITIONS & PERFORMANCE
   ========================================== */
.sidebar[b-014vxujqns] {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

.sidebar :global(.nav-link)[b-014vxujqns],
.sidebar :global(.nav-link) span[b-014vxujqns],
.sidebar :global(.nav-link) i[b-014vxujqns] {
    contain: layout style paint;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
}

/* Disable will-change after transition */
.sidebar:not(.transitioning)[b-014vxujqns] {
    will-change: auto;
}

.sidebar:not(.transitioning) .logo-text[b-014vxujqns],
.sidebar:not(.transitioning) :global(.nav-link) span[b-014vxujqns],
.sidebar:not(.transitioning) :global(.nav-link) i[b-014vxujqns],
.sidebar:not(.transitioning) .toggle-text[b-014vxujqns] {
    will-change: auto;
}
/* _content/ltia.portal.web/Components/Exams/Admin/Pages/Account.razor.rz.scp.css */
/* Account Info Page - Professional Design */
.account-info-page[b-a67hlvh337] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Loading & Not Found States */
.loading-container[b-a67hlvh337],
.not-found-container[b-a67hlvh337] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
    background: var(--acv-white);
    border-radius: 16px;
    padding: 3rem 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.loading-spinner i[b-a67hlvh337] {
    font-size: 3rem;
    color: var(--acv-primary);
    animation: spin-b-a67hlvh337 1s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin-b-a67hlvh337 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-a67hlvh337] {
    color: var(--gray-600);
    font-size: 1rem;
    margin: 0;
}

.not-found-icon i[b-a67hlvh337] {
    font-size: 4rem;
    color: var(--gray-400);
    margin-bottom: 1rem;
}

.not-found-container h3[b-a67hlvh337] {
    color: var(--gray-800);
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}

.not-found-container p[b-a67hlvh337] {
    color: var(--gray-600);
    margin-bottom: 1.5rem;
}

/* Card Header Section */
.card-header-section[b-a67hlvh337] {
    background: var(--acv-white);
    border-radius: 12px;
    padding: 2rem 2.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--gray-200);
}

.card-header-content[b-a67hlvh337] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.card-header-icon[b-a67hlvh337] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.card-header-text h1[b-a67hlvh337] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
}

.card-header-text p[b-a67hlvh337] {
    font-size: 0.95rem;
    color: var(--gray-600);
    margin: 0.25rem 0 0 0;
}

/* Main Content Container */
.account-details-container[b-a67hlvh337] {
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 1.75rem;
    margin-top: 0;
}

@media (max-width: 1200px) {
    .account-details-container[b-a67hlvh337] {
        grid-template-columns: 1fr;
    }
}

/* Card Styles */
.detail-card[b-a67hlvh337] {
    background: var(--acv-white);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--gray-200);
    overflow: hidden;
    transition: all 0.2s ease;
}

.detail-card:hover[b-a67hlvh337] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: var(--gray-300);
}

.card-header[b-a67hlvh337] {
    background: var(--gray-50);
    padding: 1.25rem 1.5rem;
    border-bottom: 2px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-title[b-a67hlvh337] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    letter-spacing: -0.01em;
}

.card-title i[b-a67hlvh337] {
    color: var(--acv-primary);
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

.card-content[b-a67hlvh337] {
    padding: 1.75rem 1.5rem;
}

/* Details Grid */
.details-grid[b-a67hlvh337] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem 2rem;
}

.detail-item[b-a67hlvh337] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--gray-100);
}

.detail-item:last-child[b-a67hlvh337] {
    border-bottom: none;
    padding-bottom: 0;
}

.detail-item.full-width[b-a67hlvh337] {
    grid-column: 1 / -1;
}

.detail-label[b-a67hlvh337] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.detail-label i[b-a67hlvh337] {
    color: var(--acv-primary);
    font-size: 0.875rem;
    width: 16px;
    text-align: center;
    opacity: 0.8;
}

.detail-value[b-a67hlvh337] {
    font-size: 1rem;
    color: var(--gray-900);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
    line-height: 1.5;
}

.detail-value strong[b-a67hlvh337] {
    font-weight: 600;
    color: var(--gray-900);
    font-size: 1.05rem;
}

/* Status Badge */
.status-badge[b-a67hlvh337] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.status-badge.active[b-a67hlvh337] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: var(--acv-white);
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}

.status-badge.inactive[b-a67hlvh337] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: var(--acv-white);
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
}

/* Verified Badge */
.verified-badge[b-a67hlvh337] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: var(--acv-white);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.25);
}

.unverified-badge[b-a67hlvh337] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: var(--acv-white);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(245, 158, 11, 0.25);
}

/* Empty Value */
.empty-value[b-a67hlvh337] {
    color: var(--gray-400);
    font-style: italic;
    font-size: 0.9375rem;
    font-weight: 400;
}

/* Avatar Image */
.avatar-image[b-a67hlvh337] {
    width: 140px;
    height: 140px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 3px solid var(--gray-200);
    transition: transform 0.2s ease;
}

.avatar-image:hover[b-a67hlvh337] {
    transform: scale(1.02);
}

/* Form Actions */
.form-actions[b-a67hlvh337] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 2px solid var(--gray-200);
    flex-wrap: wrap;
}

.btn-primary[b-a67hlvh337] {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.75rem;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    border: none;
    min-width: 180px;
    justify-content: center;
    background: var(--acv-primary);
    color: var(--acv-white);
    box-shadow: 0 2px 6px rgba(33, 76, 166, 0.2);
}

.btn-primary:hover[b-a67hlvh337] {
    background: var(--acv-primary-700);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
    text-decoration: none;
    color: var(--acv-white);
}

.btn-primary:active[b-a67hlvh337] {
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 1024px) {
    .account-details-container[b-a67hlvh337] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .account-info-page[b-a67hlvh337] {
        padding: 0.5rem 1rem;
    }

    .card-header-section[b-a67hlvh337] {
        padding: 1.5rem;
    }

    .card-header-text h1[b-a67hlvh337] {
        font-size: 1.5rem;
    }
    
    .card-header[b-a67hlvh337] {
        padding: 1rem 1.25rem;
    }

    .card-content[b-a67hlvh337] {
        padding: 1.25rem 1rem;
    }

    .details-grid[b-a67hlvh337] {
        grid-template-columns: 1fr;
        gap: 1.25rem 1rem;
    }

    .detail-item[b-a67hlvh337] {
        gap: 0.375rem;
        padding-bottom: 1rem;
    }

    .form-actions[b-a67hlvh337] {
        flex-direction: column;
        gap: 0.75rem;
        margin-top: 2rem;
        padding-top: 1.5rem;
    }

    .btn-primary[b-a67hlvh337] {
        min-width: 100%;
        width: 100%;
    }
}

@media (max-width: 600px) {
    .card-header-content[b-a67hlvh337] {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .avatar-image[b-a67hlvh337] {
        width: 120px;
        height: 120px;
    }

    .card-title[b-a67hlvh337] {
        font-size: 1rem;
    }

    .detail-label[b-a67hlvh337] {
        font-size: 0.75rem;
    }

    .detail-value[b-a67hlvh337] {
        font-size: 0.9375rem;
    }
}
/* _content/ltia.portal.web/Components/Exams/Admin/Pages/AuditLog/Index.razor.rz.scp.css */
/* CSS Variables - Đặt trực tiếp vào .auditlog-page */
.auditlog-page[b-wdleokjg04] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    
    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Card Header Section */
.card-header-section[b-wdleokjg04] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.card-header-content[b-wdleokjg04] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.card-header-icon[b-wdleokjg04] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
}

.card-header-text h1[b-wdleokjg04] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-800);
}

.card-header-text p[b-wdleokjg04] {
    margin: 0.25rem 0 0 0;
    color: var(--gray-600);
    font-size: 1rem;
}

/* Search Section */
.auditlog-search-section[b-wdleokjg04] {
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    margin-bottom: 2rem;
    overflow: visible;
    position: relative;
    z-index: 100;
}

.search-container[b-wdleokjg04] {
    padding: 2rem;
}

.search-header[b-wdleokjg04] {
    margin-bottom: 1.5rem;
    text-align: center;
}

.search-title[b-wdleokjg04] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 0.5rem 0;
}

.search-title i[b-wdleokjg04] {
    color: var(--acv-primary);
    font-size: 1.3rem;
}

.search-subtitle[b-wdleokjg04] {
    color: var(--gray-600);
    font-size: 1rem;
    margin: 0;
    font-weight: 400;
}

.search-content[b-wdleokjg04] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.search-main-row[b-wdleokjg04] {
    display: grid;
    grid-template-columns: 400px 180px 180px 240px 240px auto;
    gap: 1rem;
    align-items: flex-end;
}

.filter-group[b-wdleokjg04] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-group-search[b-wdleokjg04] {
    max-width: 400px;
}

.filter-group-small[b-wdleokjg04] {
    width: 180px;
}

.search-controls[b-wdleokjg04] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.search-controls-buttons[b-wdleokjg04] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}

.filter-label[b-wdleokjg04] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-700);
    margin: 0;
}

.filter-label i[b-wdleokjg04] {
    color: var(--acv-primary);
    font-size: 0.8rem;
}

.filter-input[b-wdleokjg04],
.filter-select[b-wdleokjg04] {
    width: 100%;
    height: 48px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--acv-white);
    box-sizing: border-box;
    color: var(--gray-800);
}

.filter-input:focus[b-wdleokjg04],
.filter-select:focus[b-wdleokjg04] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.filter-input[b-wdleokjg04]::placeholder {
    color: var(--gray-400);
}

/* SelectSearch styling */
.filter-group[b-wdleokjg04]  .select-search {
    width: 100%;
    position: relative;
    z-index: 1000;
}

.filter-group[b-wdleokjg04]  .select-search-input-wrapper {
    position: relative;
    z-index: 1000;
}

.filter-group[b-wdleokjg04]  .select-search-input {
    width: 100%;
    height: 48px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--acv-white);
    box-sizing: border-box;
    color: var(--gray-800);
}

.filter-group[b-wdleokjg04]  .select-search-input:focus {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.filter-group[b-wdleokjg04]  .select-search-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    background: var(--acv-white);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    max-height: calc(4 * 48px + 0.5rem);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 10000 !important;
    margin-top: 0.5rem;
}

/* Custom scrollbar for dropdown */
.filter-group[b-wdleokjg04]  .select-search-dropdown::-webkit-scrollbar {
    width: 6px;
}

.filter-group[b-wdleokjg04]  .select-search-dropdown::-webkit-scrollbar-track {
    background: var(--gray-100);
    border-radius: 3px;
}

.filter-group[b-wdleokjg04]  .select-search-dropdown::-webkit-scrollbar-thumb {
    background: var(--gray-400);
    border-radius: 3px;
}

.filter-group[b-wdleokjg04]  .select-search-dropdown::-webkit-scrollbar-thumb:hover {
    background: var(--gray-500);
}

.filter-group[b-wdleokjg04]  .select-search-item {
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid var(--gray-100);
    min-height: 48px;
    display: flex;
    align-items: center;
}

.filter-group[b-wdleokjg04]  .select-search-item:last-child {
    border-bottom: none;
}

.filter-group[b-wdleokjg04]  .select-search-item:hover {
    background: var(--acv-primary-lighter);
    color: var(--acv-primary);
}

.filter-group[b-wdleokjg04]  .dropdown-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.filter-group[b-wdleokjg04]  .option-name {
    color: var(--gray-800);
    font-size: 0.95rem;
}

/* DateTimeInput styling */
.filter-group-date[b-wdleokjg04] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-group-date[b-wdleokjg04]  .datetime-input-group {
    position: relative;
    margin-bottom: 0;
    width: 100%;
}

.filter-group-date[b-wdleokjg04]  .datetime-input-group-wrapper {
    display: flex;
    width: 100%;
    min-width: auto !important;
}

.filter-group-date[b-wdleokjg04]  .datetime-input-wrapper {
    min-width: auto !important;
    width: 100%;
    flex: 1;
}

.filter-group-date[b-wdleokjg04]  .datetime-input {
    width: 100%;
    height: 48px;
    padding: 0.75rem 2.5rem 0.75rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--acv-white);
    box-sizing: border-box;
    color: var(--gray-800);
}

.filter-group-date[b-wdleokjg04]  .datetime-input:focus {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.filter-group-date[b-wdleokjg04]  .datetime-picker {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    width: 100% !important;
    max-width: 100% !important;
    min-width: auto !important;
    z-index: 10000 !important;
    background: var(--acv-white);
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    padding: 0.75rem;
    margin-top: 0;
    animation: fadeInDown-b-wdleokjg04 0.2s ease-out;
}

.filter-group-date[b-wdleokjg04]  .datetime-picker-header {
    padding: 0.5rem 0;
    margin-bottom: 0.5rem;
}

.filter-group-date[b-wdleokjg04]  .picker-month-year {
    font-size: 0.875rem;
    font-weight: 600;
}

.filter-group-date[b-wdleokjg04]  .picker-nav-btn {
    width: 28px;
    height: 28px;
    padding: 0.25rem;
    font-size: 0.75rem;
}

.filter-group-date[b-wdleokjg04]  .datetime-picker-body {
    margin-bottom: 0.5rem;
}

.filter-group-date[b-wdleokjg04]  .picker-weekdays {
    gap: 0.125rem;
    margin-bottom: 0.5rem;
}

.filter-group-date[b-wdleokjg04]  .picker-weekday {
    font-size: 0.7rem;
    padding: 0.25rem 0;
}

.filter-group-date[b-wdleokjg04]  .picker-days {
    gap: 0.125rem;
}

.filter-group-date[b-wdleokjg04]  .picker-day {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.8rem;
    border-radius: 4px;
}

.filter-group-date[b-wdleokjg04]  .datetime-picker-footer {
    padding-top: 0.5rem;
    gap: 0.5rem;
}

.filter-group-date[b-wdleokjg04]  .picker-today-btn,
.filter-group-date[b-wdleokjg04]  .picker-clear-btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.8rem;
}

@keyframes fadeInDown-b-wdleokjg04 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.filter-group-date[b-wdleokjg04]  .datetime-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-700);
    margin: 0;
}

.filter-group-date[b-wdleokjg04]  .datetime-label i {
    color: var(--acv-primary);
    font-size: 0.8rem;
}

.filter-group-date[b-wdleokjg04]  .datetime-calendar-btn,
.filter-group-date[b-wdleokjg04]  .datetime-clear-btn {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--gray-600);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.filter-group-date[b-wdleokjg04]  .datetime-clear-btn {
    right: 2.5rem;
}

.filter-group-date[b-wdleokjg04]  .datetime-calendar-btn:hover,
.filter-group-date[b-wdleokjg04]  .datetime-clear-btn:hover {
    color: var(--acv-primary);
    background: var(--gray-100);
}


.search-btn[b-wdleokjg04] {
    width: 48px;
    height: 48px;
    border: 2px solid var(--acv-primary);
    border-radius: 8px;
    background: var(--acv-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
}

.search-btn:hover:not(:disabled)[b-wdleokjg04] {
    background: var(--acv-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

.search-btn:disabled[b-wdleokjg04] {
    opacity: 0.6;
    cursor: not-allowed;
}

.clear-btn[b-wdleokjg04] {
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 8px;
    background: var(--gray-500);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
}

.clear-btn:hover[b-wdleokjg04] {
    background: var(--gray-600);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* List Container */
.auditlog-list-container[b-wdleokjg04] {
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    overflow: hidden;
}

.list-header[b-wdleokjg04] {
    padding: 1.5rem;
    border-bottom: 1px solid var(--gray-200);
    background: var(--gray-50);
    border-radius: 16px 16px 0 0;
    position: relative;
}

.list-header[b-wdleokjg04]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 16px 0 0 0;
}

.list-header-content[b-wdleokjg04] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.list-title-section[b-wdleokjg04] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.list-title[b-wdleokjg04] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.list-title i[b-wdleokjg04] {
    color: var(--acv-primary);
    font-size: 1.25rem;
}

.list-count[b-wdleokjg04] {
    background: var(--acv-primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Sort Controls */
.sort-controls[b-wdleokjg04] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.sort-dropdown[b-wdleokjg04] {
    position: relative;
}

.sort-dropdown-btn[b-wdleokjg04] {
    padding: 0.5rem 1rem;
    border: 2px solid var(--acv-primary);
    border-radius: 12px;
    background: white;
    color: var(--acv-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
    font-size: 0.9rem;
}

.sort-dropdown-btn:hover[b-wdleokjg04],
.sort-dropdown-btn.active[b-wdleokjg04] {
    background: var(--acv-primary);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

.sort-dropdown-btn:focus[b-wdleokjg04] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.sort-dropdown-menu[b-wdleokjg04] {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    background: var(--acv-white);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    overflow: hidden;
    min-width: 200px;
    display: none;
}

.sort-dropdown-menu.show[b-wdleokjg04] {
    display: block;
}

.sort-option[b-wdleokjg04] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    width: 100%;
    background: var(--acv-white);
    border: none;
    color: var(--acv-primary);
    font-size: 0.875rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    border-bottom: 1px solid var(--gray-100);
}

.sort-option:hover[b-wdleokjg04] {
    color: var(--acv-primary);
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.1);
}

.sort-option.active[b-wdleokjg04] {
    background: var(--acv-primary-lighter);
    color: var(--acv-primary);
    font-weight: 600;
}

.sort-icons[b-wdleokjg04] {
    margin-left: auto;
    display: none;
}

.sort-icon-default[b-wdleokjg04],
.sort-icon-asc[b-wdleokjg04],
.sort-icon-desc[b-wdleokjg04] {
    font-size: 0.8rem;
    opacity: 0.5;
}

.sort-icon-default.active[b-wdleokjg04],
.sort-icon-asc.active[b-wdleokjg04],
.sort-icon-desc.active[b-wdleokjg04] {
    opacity: 1;
    color: var(--acv-primary);
}

.sort-option.active .sort-icon-default.active[b-wdleokjg04],
.sort-option.active .sort-icon-asc.active[b-wdleokjg04],
.sort-option.active .sort-icon-desc.active[b-wdleokjg04] {
    color: var(--acv-primary);
}

.refresh-btn[b-wdleokjg04] {
    padding: 0.5rem 1rem;
    border: 2px solid var(--acv-primary);
    border-radius: 12px;
    background: white;
    color: var(--acv-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
    font-size: 0.9rem;
}

.refresh-btn:hover:not(:disabled)[b-wdleokjg04] {
    background: var(--acv-primary);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

.refresh-btn:disabled[b-wdleokjg04] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Empty State */
.empty-state[b-wdleokjg04] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.empty-state-icon[b-wdleokjg04] {
    font-size: 4rem;
    color: var(--gray-400);
    margin-bottom: 1rem;
}

.empty-state h3[b-wdleokjg04] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 0.5rem 0;
}

.empty-state p[b-wdleokjg04] {
    color: var(--gray-600);
    font-size: 1rem;
    margin: 0;
}

/* Error State */
.error-state[b-wdleokjg04] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.error-icon[b-wdleokjg04] {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.error-content h3[b-wdleokjg04] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--error-main);
    margin: 0 0 0.5rem 0;
}

.error-content p[b-wdleokjg04] {
    color: var(--gray-600);
    font-size: 1rem;
    margin: 0 0 1.5rem 0;
}

.error-content .btn[b-wdleokjg04] {
    padding: 0.75rem 1.5rem;
    background: var(--acv-primary);
    color: var(--acv-white);
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.error-content .btn:hover[b-wdleokjg04] {
    background: var(--acv-primary-700);
}

/* Table Container */
.auditlog-table-container[b-wdleokjg04] {
    overflow-x: auto;
}

.table-wrapper[b-wdleokjg04] {
    min-width: 100%;
}

.data-table[b-wdleokjg04] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.data-table thead[b-wdleokjg04] {
    background: var(--gray-50);
}

.data-table th[b-wdleokjg04] {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--gray-700);
    border-bottom: 2px solid var(--gray-200);
    white-space: nowrap;
}

.data-table th.text-end[b-wdleokjg04] {
    text-align: right;
    padding-right: 3rem;
}

.data-table th.col-stt[b-wdleokjg04] {
    width: 60px;
    text-align: center;
}

.data-table tbody tr[b-wdleokjg04] {
    border-bottom: 1px solid var(--gray-200);
    transition: background-color 0.15s ease;
}

.data-table tbody tr:hover[b-wdleokjg04] {
    background: var(--gray-50);
}

.data-table td[b-wdleokjg04] {
    padding: 1rem;
    color: var(--gray-700);
    vertical-align: middle;
}

.data-table td.col-stt[b-wdleokjg04] {
    text-align: center;
}

.data-table td.text-end[b-wdleokjg04] {
    text-align: right;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 3rem !important;
}

.stt-number[b-wdleokjg04] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: var(--gray-100);
    color: var(--gray-700);
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.875rem;
    min-width: 32px;
    text-align: center;
}

.date-text[b-wdleokjg04] {
    color: var(--gray-700);
    font-weight: 500;
}

.badge[b-wdleokjg04] {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
}

.badge-info[b-wdleokjg04] {
    background: var(--acv-primary-lighter);
    color: var(--acv-primary);
}

.badge-action[b-wdleokjg04] {
    padding: 0.375rem 0.75rem;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
}

.badge-action.badge-success[b-wdleokjg04] {
    background: var(--success-lighter);
    color: var(--success-dark);
}

.badge-action.badge-warning[b-wdleokjg04] {
    background: var(--warning-lighter);
    color: var(--warning-dark);
}

.badge-action.badge-danger[b-wdleokjg04] {
    background: var(--error-lighter);
    color: var(--error-dark);
}

.badge-action.badge-primary[b-wdleokjg04] {
    background: var(--acv-primary-lighter);
    color: var(--acv-primary);
}

.badge-action.badge-secondary[b-wdleokjg04] {
    background: var(--gray-200);
    color: var(--gray-700);
}

.action-display[b-wdleokjg04] {
    color: var(--gray-700);
    max-width: 400px;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    line-height: 1.5;
}

.user-cell[b-wdleokjg04] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.user-cell i[b-wdleokjg04] {
    color: var(--acv-primary);
    font-size: 0.875rem;
}

.user-id[b-wdleokjg04] {
    color: var(--gray-700);
    font-size: 0.9rem;
    font-weight: 500;
}

.record-id[b-wdleokjg04] {
    color: var(--gray-600);
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
}

.btn[b-wdleokjg04] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-sm[b-wdleokjg04] {
    padding: 0.375rem 0.75rem;
    font-size: 0.8rem;
}

.action-btn[b-wdleokjg04] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.action-btn.view[b-wdleokjg04] {
    background: linear-gradient(135deg, rgba(33, 76, 166, 0.1) 0%, rgba(33, 76, 166, 0.15) 100%);
    color: var(--acv-primary);
    border: 1px solid rgba(33, 76, 166, 0.2);
}

.action-btn.view:hover[b-wdleokjg04] {
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(33, 76, 166, 0.3);
}

.btn-info[b-wdleokjg04] {
    background: var(--acv-primary-lighter);
    color: var(--acv-primary);
}

.btn-info:hover[b-wdleokjg04] {
    background: var(--acv-primary);
    color: var(--acv-white);
}

.btn-secondary[b-wdleokjg04] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--gray-500) !important;
    background: #E5E7EB !important;
    color: #374151 !important;
    border: 1px solid var(--gray-300);
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-secondary:hover[b-wdleokjg04] {
    background: var(--gray-600);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Pagination */
.pagination-container[b-wdleokjg04] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem 2rem;
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50);
    flex-wrap: wrap;
    gap: 2rem;
}

.pagination-info[b-wdleokjg04] {
    color: var(--gray-600);
    font-size: 0.9rem;
    font-weight: 500;
}

.pagination-controls[b-wdleokjg04] {
    display: flex;
    align-items: center;
}

.pagination-nav[b-wdleokjg04] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagination-btn[b-wdleokjg04] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: var(--acv-white);
    color: var(--gray-600);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s ease;
    cursor: pointer;
}

.pagination-btn:hover:not(:disabled)[b-wdleokjg04] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border-color: var(--acv-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.15);
}

.pagination-btn:disabled[b-wdleokjg04] {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-btn.active[b-wdleokjg04] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border-color: var(--acv-primary);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
}

/* Modal - Define CSS variables here to ensure they're available */
.modal-overlay[b-wdleokjg04] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-primary-50: rgba(33, 76, 166, 0.05);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 2rem;
    animation: fadeIn-b-wdleokjg04 0.2s ease;
}

@keyframes fadeIn-b-wdleokjg04 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-content[b-wdleokjg04] {
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-wdleokjg04 0.3s ease;
    overflow: hidden;
}

@keyframes slideUp-b-wdleokjg04 {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header[b-wdleokjg04] {
    padding: 1.5rem;
    /* border-bottom: 1px solid var(--gray-300) !important; */
    background: var(--gray-50);
    border-radius: 16px 16px 0 0;
    position: relative;
}

.modal-header[b-wdleokjg04]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #214ca6 0%, #1e40af 100%);
    border-radius: 16px 0 0 0;
}

.modal-header-content[b-wdleokjg04] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    position: relative;
}

.modal-title[b-wdleokjg04] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.modal-title i[b-wdleokjg04] {
    color: var(--acv-primary);
    font-size: 1.25rem;
}

.modal-close[b-wdleokjg04] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--gray-100);
    border-radius: 8px;
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-left: auto;
}


.modal-body[b-wdleokjg04] {
    padding: 2rem;
    overflow-y: auto;
    flex: 1;
    /* display: flex; */
    flex-direction: column;
    gap: 2.5rem;
    background: var(--gray-50);
}

.modal-footer[b-wdleokjg04] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.5rem 2rem;
    border-top: 1px solid var(--gray-200);
    background: var(--acv-white);
}

/* Detail Card */
.detail-card[b-wdleokjg04] {
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid #d1d5db;
    overflow: hidden;
    transition: all 0.2s ease;
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
}

.detail-card:last-child[b-wdleokjg04] {
    margin-bottom: 0;
}


.card-header[b-wdleokjg04] {
    background: var(--gray-50);
    padding: 1.5rem;
    border-bottom: 1px solid #d1d5db;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    border-left: 4px solid #214ca6;
    border-top: none;
    border-right: none;
}

.card-title[b-wdleokjg04] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.card-title i[b-wdleokjg04] {
    color: #214ca6 !important;
    font-size: 1.1rem;
}

.card-body[b-wdleokjg04] {
    padding: 1.5rem;
}

.info-item[b-wdleokjg04] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--gray-100);
}

.info-item:last-child[b-wdleokjg04] {
    border-bottom: none;
}

.info-label[b-wdleokjg04] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    color: var(--gray-700);
    font-size: 0.95rem;
    flex-shrink: 0;
}

.info-label i[b-wdleokjg04] {
    color: #214ca6 !important;
    width: 20px;
    text-align: center;
    font-size: 1rem;
}

.info-value[b-wdleokjg04] {
    font-weight: 600;
    color: var(--gray-800);
    font-size: 0.95rem;
    text-align: right;
    flex: 1;
    margin-left: 1rem;
}

/* Make badge and record-id stand out with primary color in modal */
.modal-body .info-value .badge-info[b-wdleokjg04],
.modal-body .info-value .badge-action.badge-primary[b-wdleokjg04] {
    background: #dbeafe !important;
    color: #214ca6 !important;
}

.modal-body .info-value .audit-record-id[b-wdleokjg04] {
    background: rgba(33, 76, 166, 0.05) !important;
    color: #214ca6 !important;
    border: 1px solid #dbeafe !important;
}

.audit-record-id[b-wdleokjg04] {
    display: inline-flex;
    align-items: center;
    font-family: 'Courier New', monospace;
    font-size: 0.95rem;
    font-weight: 600;
    color: #214ca6 !important;
    background: rgba(33, 76, 166, 0.05) !important;
    padding: 0.375rem 0.75rem;
    border-radius: 8px;
    border: 1px solid #dbeafe !important;
    letter-spacing: 0.5px;
}

.values-comparison[b-wdleokjg04] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}

.values-panel[b-wdleokjg04] {
    background: var(--acv-white);
    border-radius: 12px;
    padding: 0;
    border: 1px solid #d1d5db;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
}


.values-panel.old-values[b-wdleokjg04] {
    border-left: 1px solid #d1d5db !important;
}

.values-panel.new-values[b-wdleokjg04] {
    border-left: 1px solid #d1d5db !important;
}

.values-panel-header[b-wdleokjg04] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
    background: var(--gray-50);
}

.values-panel-icon[b-wdleokjg04] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
}

.values-panel-icon.old-icon[b-wdleokjg04] {
    background: rgba(255, 87, 34, 0.1);
    color: var(--error-dark);
    border: 1px solid rgba(255, 87, 34, 0.4);
}

.values-panel-icon.new-icon[b-wdleokjg04] {
    background: rgba(0, 200, 83, 0.1);
    color: var(--success-dark);
    border: 1px solid rgba(0, 200, 83, 0.4);
}

.values-panel h5[b-wdleokjg04] {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    color: var(--gray-800);
}

.values-panel.old-values h5[b-wdleokjg04] {
    color: var(--error-dark);
}

.values-panel.new-values h5[b-wdleokjg04] {
    color: var(--success-dark);
}

.values-fields[b-wdleokjg04] {
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.value-field-item[b-wdleokjg04] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--gray-50);
    border-radius: 8px;
    border: 1px solid #d1d5db;
    transition: all 0.2s ease;
}


.value-field-label[b-wdleokjg04] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.field-label-text[b-wdleokjg04] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-700);
    text-transform: none;
    letter-spacing: 0.3px;
}

.values-panel.old-values .value-field-item[b-wdleokjg04] {
    background: rgba(255, 87, 34, 0.05);
    border: 1px solid rgba(255, 87, 34, 0.4);
}


.values-panel.new-values .value-field-item[b-wdleokjg04] {
    background: rgba(0, 200, 83, 0.05);
    border: 1px solid rgba(0, 200, 83, 0.4);
}


.value-field-content[b-wdleokjg04] {
    display: flex;
    align-items: flex-start;
    min-height: 2.5rem;
    padding: 0.75rem;
    background: var(--acv-white);
    border-radius: 6px;
    border: 1px solid var(--gray-200);
}

.field-value[b-wdleokjg04] {
    font-size: 0.9rem;
    color: var(--gray-800);
    font-weight: 500;
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
}

.values-panel.old-values .field-value[b-wdleokjg04] {
    color: var(--error-dark);
}

.values-panel.new-values .field-value[b-wdleokjg04] {
    color: var(--success-dark);
}


.json-viewer[b-wdleokjg04] {
    margin: 0;
    padding: 1rem;
    background: var(--acv-white);
    border-radius: 8px;
    border: 1px solid var(--gray-200);
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--gray-800);
    overflow-x: auto;
    max-height: 400px;
    overflow-y: auto;
}

.json-table-container[b-wdleokjg04] {
    margin: 0;
    background: var(--acv-white);
    border-radius: 8px;
    border: 1px solid var(--gray-200);
    overflow: hidden;
    max-height: 400px;
    overflow-y: auto;
}

.json-table[b-wdleokjg04] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.json-table tbody tr[b-wdleokjg04] {
    border-bottom: 1px solid var(--gray-200);
    transition: background-color 0.15s ease;
}

.json-table tbody tr:last-child[b-wdleokjg04] {
    border-bottom: none;
}


.json-table .json-key[b-wdleokjg04] {
    padding: 0.875rem 1rem;
    font-weight: 600;
    color: var(--gray-700);
    background: var(--gray-50);
    width: 35%;
    vertical-align: top;
    border-right: 1px solid var(--gray-200);
    word-break: break-word;
}

.json-table .json-value[b-wdleokjg04] {
    padding: 0.875rem 1rem;
    color: var(--gray-800);
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
    word-break: break-word;
    white-space: pre-wrap;
}


/* Responsive */
@media (max-width: 1400px) {
    .search-main-row[b-wdleokjg04] {
        grid-template-columns: 180px 180px 1fr auto auto;
    }
}

@media (max-width: 1200px) {
    .search-main-row[b-wdleokjg04] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .filter-group-small[b-wdleokjg04] {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .auditlog-page[b-wdleokjg04] {
        padding: 0.5rem;
    }

    .card-header-section[b-wdleokjg04],
    .auditlog-search-section[b-wdleokjg04],
    .auditlog-list-container[b-wdleokjg04] {
        border-radius: 12px;
        padding: 1rem;
    }

    .search-main-row[b-wdleokjg04] {
        grid-template-columns: 1fr;
    }

    .list-header-content[b-wdleokjg04] {
        flex-direction: column;
        align-items: flex-start;
    }

    .pagination-container[b-wdleokjg04] {
        flex-direction: column;
        align-items: stretch;
    }

    .pagination-controls[b-wdleokjg04] {
        justify-content: center;
    }

    .modal-content[b-wdleokjg04] {
        max-width: 100%;
        margin: 1rem;
    }

    .modal-body[b-wdleokjg04] {
        padding: 1.5rem;
        gap: 1.5rem;
    }

    .card-header[b-wdleokjg04] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .info-item[b-wdleokjg04] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .info-value[b-wdleokjg04] {
        text-align: left;
        margin-left: 0;
        width: 100%;
    }

    .values-comparison[b-wdleokjg04] {
        grid-template-columns: 1fr;
    }

    .filter-group-date[b-wdleokjg04]  .datetime-picker {
        max-width: 100%;
        min-width: auto;
        left: 0;
        right: 0;
    }

    .list-header-content[b-wdleokjg04] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    
    .sort-controls[b-wdleokjg04] {
        justify-content: space-between;
    }
}

/* _content/ltia.portal.web/Components/Exams/Admin/Pages/CertificationNotifications/Index.razor.rz.scp.css */
/* CSS Variables - Đặt trực tiếp vào .certification-notifications-page */
.certification-notifications-page[b-girjvzehpj] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    
    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: var(--gray-100);
}

/* Header Section */
.page-header[b-girjvzehpj] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.header-content[b-girjvzehpj] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-icon[b-girjvzehpj] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
}

.header-text[b-girjvzehpj] {
    flex: 1;
}

.header-title[b-girjvzehpj] {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
    color: var(--gray-800);
}

.header-subtitle[b-girjvzehpj] {
    font-size: 1rem;
    margin: 0.25rem 0 0 0;
    color: var(--gray-600);
}

/* Main Content */
.main-content[b-girjvzehpj] {
    margin-top: 24px;
}

.card[b-girjvzehpj] {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.card-header[b-girjvzehpj] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 2px solid #dee2e6;
    padding: 1.25rem 1.5rem;
    border-radius: 12px 12px 0 0;
}

.card-header h5[b-girjvzehpj] {
    margin: 0;
    color: #495057;
    font-weight: 600;
}

.card-body[b-girjvzehpj] {
    padding: 1.5rem;
}

/* Main Card */
.certification-card[b-girjvzehpj] {
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    overflow: hidden;
}

.certification-table-container[b-girjvzehpj] {
    padding: 0;
}

/* List Header */
.list-header[b-girjvzehpj] {
    background: var(--acv-white) !important;
    padding: 1.75rem 2rem;
    border-bottom: 1px solid var(--gray-200);
    border-radius: 16px 16px 0 0;
    position: relative;
    z-index: 100;
    overflow: visible;
}

.certification-list[b-girjvzehpj] {
    padding: 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .certification-list[b-girjvzehpj] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .certification-list[b-girjvzehpj] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1400px) {
    .certification-list[b-girjvzehpj] {
        grid-template-columns: repeat(4, 1fr);
    }
}

.list-header[b-girjvzehpj]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 16px 0 0 0;
}

.list-header-content[b-girjvzehpj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.list-title-section[b-girjvzehpj] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.list-title[b-girjvzehpj] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.list-count[b-girjvzehpj] {
    background: var(--acv-primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.sort-controls[b-girjvzehpj] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.list-title i[b-girjvzehpj] {
    color: var(--acv-primary);
    font-size: 1.25rem;
}

.list-stats[b-girjvzehpj] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.stats-badge[b-girjvzehpj] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--acv-white);
    border: 1px solid var(--gray-300);
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--gray-700);
    transition: all 0.2s ease;
}

.stats-badge:hover[b-girjvzehpj] {
    border-color: var(--acv-primary);
    color: var(--acv-primary);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.1);
}

.stats-badge i[b-girjvzehpj] {
    color: var(--acv-primary);
    font-size: 0.875rem;
}

/* Accordion Section */
.accordion-section[b-girjvzehpj] {
    margin-top: 24px;
}

.exam-card[b-girjvzehpj] {
    background: var(--acv-white);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: all 0.2s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.exam-card:hover[b-girjvzehpj] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-color: var(--acv-primary);
}

/* Exam Summary Section */
.exam-summary[b-girjvzehpj] {
    background: linear-gradient(135deg, #fef9e7 0%, #fef5e7 100%);
    border: 1px solid #fbd38d;
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    height: 100%;
}

.exam-card:hover .exam-summary[b-girjvzehpj] {
    background: linear-gradient(135deg, #ffe7a3 0%, #fef5e7 100%);
}

.summary-arrow[b-girjvzehpj] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--warning-main);
    align-self: center;
    margin-top: 0.5rem;
}

.summary-arrow i[b-girjvzehpj] {
    font-size: 1.2rem;
}

/* Back Button */
.back-button[b-girjvzehpj] {
    padding: 0.75rem 1rem;
    border: 2px solid var(--gray-400);
    border-radius: 8px;
    background: var(--acv-white);
    color: var(--gray-600);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.25s ease;
    font-weight: 600;
    font-size: 0.9rem;
    min-width: 120px;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.back-button:hover[b-girjvzehpj] {
    background: var(--gray-100);
    color: var(--gray-800);
    border-color: var(--gray-500);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.back-button:active[b-girjvzehpj] {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Detail View */
.detail-view[b-girjvzehpj] {
    padding: 1.5rem;
}

/* Exam Info Header */
.exam-info-header[b-girjvzehpj] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.exam-info-content[b-girjvzehpj] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.exam-info-icon[b-girjvzehpj] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
}

.exam-info-text[b-girjvzehpj] {
    flex: 1;
}

.exam-info-title[b-girjvzehpj] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 0.25rem 0;
}

.exam-info-subtitle[b-girjvzehpj] {
    font-size: 0.95rem;
    color: var(--gray-600);
    margin: 0;
}

.exam-info-stats[b-girjvzehpj] {
    display: flex;
    align-items: center;
}

.exam-info-badge[b-girjvzehpj] {
    background: var(--acv-primary);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.detail-view[b-girjvzehpj] {
    padding: 1.5rem;
    min-height: 200px;
}

.detail-view .table-responsive[b-girjvzehpj] {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow-x: auto;
}

.detail-view .action-buttons[b-girjvzehpj] {
    background: linear-gradient(135deg, #f8f9fa 0%, #f0f0f0 100%);
    border-top: 2px solid var(--gray-200);
    padding: 1.5rem !important;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    border-radius: 0 0 12px 12px;
}

.summary-icon[b-girjvzehpj] {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--warning-main) 0%, var(--warning-dark) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
    box-shadow: 0 4px 12px rgba(255, 171, 0, 0.3);
    align-self: center;
}

.summary-content[b-girjvzehpj] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
}

.summary-title[b-girjvzehpj] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gray-800);
    line-height: 1.4;
    word-break: break-word;
}

.summary-meta[b-girjvzehpj] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--gray-600);
    align-items: center;
}

.summary-meta .meta-item[b-girjvzehpj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.summary-meta i[b-girjvzehpj] {
    color: var(--warning-main);
}

/* Data Table Section */
.data-table-section[b-girjvzehpj] {
    margin-bottom: 24px;
}

/* Certification Table */
.certification-table[b-girjvzehpj] {
    width: 100%;
    border-collapse: collapse;
    background: var(--acv-white);
    border-radius: 12px;
    overflow: hidden;
    margin: 0;
    font-size: 0.95rem;
}

/* Table Header */
.certification-table thead[b-girjvzehpj] {
    background: var(--gray-50);
    border-bottom: 2px solid var(--gray-200);
}

.certification-table thead th[b-girjvzehpj] {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--gray-700);
    font-size: 0.9rem;
    border-bottom: 2px solid var(--gray-200);
    position: relative;
}

.certification-table thead th:not(:first-child)[b-girjvzehpj] {
    border-left: none;
}

/* Table Body */
.certification-table tbody[b-girjvzehpj] {
    background: white;
}

.certification-table tbody td[b-girjvzehpj] {
    padding: 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--gray-200);
    color: var(--gray-700);
    font-size: 0.9rem;
}

.certification-table tbody tr[b-girjvzehpj] {
    border-bottom: 1px solid var(--gray-200);
}

.certification-table tbody tr:last-child[b-girjvzehpj] {
    border-bottom: none;
}

/* STT Column */
.certification-table thead th:nth-child(2)[b-girjvzehpj],
.certification-table thead th.col-stt[b-girjvzehpj] {
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    text-align: center !important;
}

.certification-table tbody td:nth-child(2)[b-girjvzehpj],
.certification-table tbody td.col-stt[b-girjvzehpj] {
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    text-align: center !important;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.stt-number[b-girjvzehpj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--gray-100);
    color: var(--gray-600);
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
}

.employee-checkbox[b-girjvzehpj] {
    transform: scale(1.25);
    cursor: pointer;
    accent-color: var(--acv-primary);
}

.select-all-checkbox[b-girjvzehpj] {
    cursor: pointer;
    transform: scale(1.2);
    accent-color: var(--acv-primary);
}

/* Sortable columns */
.certification-table .sortable[b-girjvzehpj] {
    cursor: pointer;
    user-select: none;
    position: relative;
}

.certification-table .sortable i[b-girjvzehpj] {
    margin-left: 0.5rem;
    font-size: 0.8rem;
    opacity: 0.7;
}

.certification-table .sort-asc i[b-girjvzehpj],
.certification-table .sort-desc i[b-girjvzehpj] {
    opacity: 1;
    color: var(--acv-primary);
}

/* Action Buttons Section */
.action-buttons-section[b-girjvzehpj] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1.5rem;
    background-color: var(--gray-50);
    border-top: 1px solid var(--gray-200);
}

.btn-schedule[b-girjvzehpj],
.btn-process[b-girjvzehpj] {
    border: none;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.25s ease;
    min-width: 120px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-schedule[b-girjvzehpj] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.btn-schedule:hover[b-girjvzehpj] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.btn-schedule:active[b-girjvzehpj] {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}

.btn-process[b-girjvzehpj] {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: white;
}

.btn-process:hover[b-girjvzehpj] {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(107, 114, 128, 0.4);
}

.btn-process:active[b-girjvzehpj] {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(107, 114, 128, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
    .certification-notifications-page[b-girjvzehpj] {
        padding: 0.5rem;
    }
    
    .page-header[b-girjvzehpj] {
        padding: 1.5rem;
    }
    
    .header-content[b-girjvzehpj] {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .list-header-content[b-girjvzehpj] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    
    .list-title-section[b-girjvzehpj] {
        flex-wrap: wrap;
    }
    
    .exam-summary[b-girjvzehpj] {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .summary-meta[b-girjvzehpj] {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .action-buttons[b-girjvzehpj] {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .detail-view .action-buttons[b-girjvzehpj] {
        flex-direction: column;
    }
    
    .btn-schedule[b-girjvzehpj],
    .btn-process[b-girjvzehpj] {
        width: 100%;
        min-width: unset;
    }
}

/* Search Box */
.search-container[b-girjvzehpj] {
    margin-bottom: 1.5rem;
}

.search-container .search-header[b-girjvzehpj] {
    margin-bottom: 1.5rem;
    text-align: center;
}

.search-container .search-title[b-girjvzehpj] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 0.5rem 0;
}

.search-container .search-title i[b-girjvzehpj] {
    color: var(--acv-primary);
    font-size: 1.3rem;
}

.search-container .search-subtitle[b-girjvzehpj] {
    color: var(--gray-600);
    font-size: 1rem;
    margin: 0;
    font-weight: 400;
}

.search-box[b-girjvzehpj] {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.search-input-group[b-girjvzehpj] {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

.search-icon[b-girjvzehpj] {
    position: absolute;
    left: 1rem;
    color: var(--gray-500);
    z-index: 2;
    font-size: 0.9rem;
}

.search-input[b-girjvzehpj] {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border: 2px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    background: white;
    transition: all 0.2s ease;
}

.search-input:focus[b-girjvzehpj] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(var(--acv-primary-rgb), 0.1);
}

.search-buttons[b-girjvzehpj] {
    display: flex;
    gap: 0.5rem;
}

.search-btn[b-girjvzehpj],
.clear-btn[b-girjvzehpj] {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.search-btn[b-girjvzehpj] {
    background: var(--acv-primary);
    color: white;
}

.search-btn:hover[b-girjvzehpj] {
    background: var(--acv-primary-700);
    transform: translateY(-1px);
}

.clear-btn[b-girjvzehpj] {
    background: var(--gray-500);
    color: white;
}

.clear-btn:hover[b-girjvzehpj] {
    background: var(--gray-600);
    transform: translateY(-1px);
}

.search-result-info[b-girjvzehpj] {
    color: var(--acv-primary);
    font-weight: 600;
    margin-left: 0.5rem;
}

/* Table Footer */
.table-footer[b-girjvzehpj] {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--acv-white);
    border-top: 1px solid var(--gray-200);
    border-radius: 0 0 16px 16px;
    gap: 2rem;
}

.results-info[b-girjvzehpj] {
    font-size: 0.9rem;
    color: var(--gray-600);
    font-weight: 500;
}

/* Pagination */
.pagination-container[b-girjvzehpj] {
    display: flex;
    /* flex-direction: row; */
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
    gap: 2rem;
}

.pagination-info[b-girjvzehpj] {
    font-size: 0.9rem;
        color: var(--gray-600);
  
    font-weight: 500;
}

.pagination-nav[b-girjvzehpj] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Pagination nav for detail view */
nav.pagination-nav[b-girjvzehpj] {
    display: flex;
    justify-content: center;
}

.pagination-btn[b-girjvzehpj] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: var(--acv-white);
    color: var(--gray-600);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s ease;
    cursor: pointer;
}

.pagination-btn:hover:not(:disabled)[b-girjvzehpj] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border-color: var(--acv-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.15);
}

.pagination-btn.active[b-girjvzehpj] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border-color: var(--acv-primary);
    font-weight: 600;
    font-size: 0.9rem;
    min-width: 40px;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
    cursor: default;
}

.pagination-btn.active:hover[b-girjvzehpj] {
    background: var(--acv-primary);
    color: var(--acv-white);
    transform: none;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
}

.pagination-btn:disabled[b-girjvzehpj] {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination[b-girjvzehpj] {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.5rem;
}

.page-item[b-girjvzehpj] {
    margin: 0;
}

.page-link[b-girjvzehpj] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    background: white;
    border: 1px solid var(--gray-300);
    color: var(--gray-700);
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    min-width: 40px;
    height: 40px;
    transition: all 0.2s ease;
}

.page-link:hover:not(:disabled)[b-girjvzehpj] {
    background: var(--acv-primary);
    color: white;
    border-color: var(--acv-primary);
    transform: translateY(-1px);
}

.page-item.active .page-link[b-girjvzehpj] {
    background: var(--acv-primary);
    color: white;
    border-color: var(--acv-primary);
    font-weight: 600;
    font-size: 0.9rem;
    min-width: 40px;
    cursor: default;
}

.page-item.active .page-link:hover[b-girjvzehpj] {
    background: var(--acv-primary);
    color: white;
    transform: none;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
}

.page-item.disabled .page-link[b-girjvzehpj] {
    background: #f8f9fa;
    color: var(--gray-400);
    border-color: var(--gray-200);
    cursor: not-allowed;
}

.page-item.disabled .page-link:hover[b-girjvzehpj] {
    background: #f8f9fa;
    color: var(--gray-400);
    border-color: var(--gray-200);
    transform: none;
}

/* Modal icons styling */
.modal .fas.fa-calendar-plus[b-girjvzehpj],
.modal .fas.fa-users[b-girjvzehpj],
.modal .fas.fa-calendar[b-girjvzehpj],
.modal .fas.fa-clock[b-girjvzehpj],
.modal .fas.fa-hourglass-half[b-girjvzehpj] {
    color: #214ca6;
}

/* Schedule Exam Modal */
.exam-info-card[b-girjvzehpj] {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border: 1px solid #e3f2fd;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(33, 76, 166, 0.08);
    position: relative;
    overflow: hidden;
}

.exam-info-card[b-girjvzehpj]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #214ca6;
}

.exam-info-card .exam-info-header[b-girjvzehpj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 0;
}

.exam-info-card .exam-info-content[b-girjvzehpj] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.exam-info-card .exam-info-badge[b-girjvzehpj] {
    background: #214ca6 ;
    color: white;
    padding: 0.5rem 0.875rem;
    border-radius: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.375rem;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
    min-width: auto;
}

.exam-info-card .badge-count[b-girjvzehpj] {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}

.exam-info-card .badge-text[b-girjvzehpj] {
    font-size: 0.8rem;
    font-weight: 500;
    opacity: 0.9;
    text-transform: lowercase;
    letter-spacing: 0;
}

.exam-info-card .exam-info-icon[b-girjvzehpj] {
    width: 56px;
    height: 56px;
    background: #214ca6;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white !important;
    font-size: 1.5rem;
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
    position: relative;
    flex-shrink: 0;
}

.exam-info-card .exam-info-icon i[b-girjvzehpj] {
    color: white !important;
}

.exam-info-card .exam-info-icon[b-girjvzehpj]::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: #214ca6;
    border-radius: 18px;
    z-index: -1;
    opacity: 0.2;
}

.exam-info-card .exam-title[b-girjvzehpj] {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1a202c;
    margin: 0;
    line-height: 1.3;
}

.selected-employees[b-girjvzehpj] {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.selected-employees h6[b-girjvzehpj] {
    color: var(--gray-800);
    font-weight: 600;
    margin-bottom: 1rem;
}

.employees-list[b-girjvzehpj] {
    max-height: 200px;
    overflow-y: auto;
}

.employee-item[b-girjvzehpj] {
    padding: 0.75rem;
    border: 1px solid var(--gray-100);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    background: #f8f9fa;
    transition: all 0.2s ease;
}

.employee-item:hover[b-girjvzehpj] {
    background: #e9ecef;
    border-color: var(--acv-primary);
}

.employee-item:last-child[b-girjvzehpj] {
    margin-bottom: 0;
}

.employee-info[b-girjvzehpj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.employee-name[b-girjvzehpj] {
    font-weight: 600;
    color: var(--gray-800);
}

.employee-id[b-girjvzehpj] {
    font-size: 0.85rem;
    color: var(--gray-500);
}

.schedule-form .form-label[b-girjvzehpj] {
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
}

.schedule-form .form-control[b-girjvzehpj] {
    border: 2px solid var(--gray-200);
    border-radius: 8px;
    padding: 0.75rem;
    transition: all 0.2s ease;
}

.schedule-form .form-control:focus[b-girjvzehpj] {
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(var(--acv-primary-rgb), 0.1);
}

/* Loading & Empty State */
.loading-container[b-girjvzehpj] {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.loading-container p[b-girjvzehpj] {
    margin-top: 1rem;
    color: var(--gray-600);
    font-size: 1.1rem;
    font-weight: 500;
}

.empty-state[b-girjvzehpj] {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.empty-state i[b-girjvzehpj] {
    font-size: 4rem;
    color: var(--success-main);
    margin-bottom: 1.5rem;
}

.empty-state h4[b-girjvzehpj] {
    color: var(--gray-700);
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: 1.5rem;
}

.empty-state p[b-girjvzehpj] {
    margin-bottom: 0;
    color: var(--gray-600);
    font-size: 1rem;
}

/* Modal XL Styles */
.modal-xl[b-girjvzehpj] {
    max-width: 1200px;
}

.modal .modal-content[b-girjvzehpj] {
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.modal .modal-header[b-girjvzehpj] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid var(--gray-200);
    border-radius: 12px 12px 0 0;
    padding: 1.5rem;
}

.modal .modal-title[b-girjvzehpj] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0;
}

.modal .modal-body[b-girjvzehpj] {
    padding: 2rem;
    max-height: 70vh;
    overflow-y: auto;
}

.modal .modal-footer[b-girjvzehpj] {
    background: #f8f9fa;
    border-top: 1px solid var(--gray-200);
    border-radius: 0 0 12px 12px;
    padding: 1.5rem;
}

/* Enhanced Form Styles */
.schedule-form .form-label[b-girjvzehpj] {
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.schedule-form .form-control[b-girjvzehpj] {
    border: 1px solid #9ca3af;
    border-radius: 8px;
    padding: 0.875rem;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    margin-bottom: 0.5rem;
}

/* Apply styles to all inputs in modal */
.modal .form-control[b-girjvzehpj] {
    border: 1px solid #9ca3af;
    border-radius: 8px;
    padding: 0.875rem;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    margin-bottom: 0.5rem;
}

.schedule-form .form-control:focus[b-girjvzehpj] {
    border-color: #214ca6;
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

/* Apply focus styles to all inputs in modal */
.modal .form-control:focus[b-girjvzehpj] {
    border-color: #214ca6;
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.modal .input-group .form-control:focus[b-girjvzehpj] {
    border-color: #214ca6;
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.schedule-form .form-control[readonly][b-girjvzehpj] {
    background-color: #f8f9fa;
    color: var(--gray-600);
}

.schedule-form .form-text[b-girjvzehpj] {
    font-size: 0.85rem;
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.schedule-form .input-group .form-control[b-girjvzehpj] {
    border-radius: 0;
    border-right: 1px solid #9ca3af;
}

.schedule-form .input-group .form-control:first-child[b-girjvzehpj] {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-right: 1px solid #9ca3af;
}

.schedule-form .input-group .form-control:last-child[b-girjvzehpj] {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-left: 1px solid #9ca3af;
}

.schedule-form .input-group .form-control:not(:first-child):not(:last-child)[b-girjvzehpj] {
    border-left: 1px solid #9ca3af;
    border-right: 1px solid #9ca3af;
}

.modal .input-group .form-control[b-girjvzehpj] {
    border-radius: 0;
    border-right: 1px solid #9ca3af;
}

.modal .input-group .form-control:first-child[b-girjvzehpj] {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-right: 1px solid #9ca3af;
}

.modal .input-group .form-control:last-child[b-girjvzehpj] {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-left: 1px solid #9ca3af;
}

.modal .input-group .form-control:not(:first-child):not(:last-child)[b-girjvzehpj] {
    border-left: 1px solid #9ca3af;
    border-right: 1px solid #9ca3af;
}

.schedule-form .input-group .btn[b-girjvzehpj] {
    border-radius: 0 8px 8px 0;
    border: 1px solid #9ca3af;
    border-left: 1px solid #9ca3af;
}

.modal .input-group .btn[b-girjvzehpj] {
    border-radius: 0 8px 8px 0;
    border: 1px solid #9ca3af;
    border-left: 1px solid #9ca3af;
    height: 53px; /* Cân đối với input field */
    padding: 0.375rem 0.75rem; /* Padding chuẩn */
    font-size: 0.875rem; /* Font size chuẩn */
    line-height: 2; /* Line height chuẩn */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Đảm bảo icon hiển thị rõ ràng trên button "Tự động" */
.modal .input-group .btn-outline-secondary[b-girjvzehpj] {
    color: #6b7280 !important;
    border-color: #9ca3af !important;
    background-color: #ffffff !important;
}

.modal .input-group .btn-outline-secondary i[b-girjvzehpj] {
    color: #6b7280 !important;
    opacity: 1 !important;
}

.modal .input-group .btn-outline-secondary:hover[b-girjvzehpj] {
    color: #ffffff !important;
    background-color: #6b7280 !important;
    border-color: #6b7280 !important;
}

.modal .input-group .btn-outline-secondary:hover i[b-girjvzehpj] {
    color: #ffffff !important;
}

.modal .input-group .btn-outline-secondary:focus[b-girjvzehpj] {
    box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.25) !important;
}

/* Instructor input với icons bên trong */
.instructor-input-wrapper[b-girjvzehpj] {
    position: relative;
}

.instructor-search-input[b-girjvzehpj] {
    padding-right: 80px; /* Tạo khoảng trống cho icons bên phải */
}

.instructor-input-icons[b-girjvzehpj] {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding-right: 0.5rem;
    pointer-events: none; /* Cho phép click xuyên qua đến input */
}

.instructor-input-icons button[b-girjvzehpj] {
    pointer-events: auto; /* Bật lại click cho buttons */
    background: transparent;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    transition: color 0.2s ease;
}

.instructor-input-icons button:hover[b-girjvzehpj] {
    color: #214ca6;
}

.instructor-dropdown-btn i[b-girjvzehpj] {
    font-size: 0.875rem;
}

.instructor-dropdown-icon[b-girjvzehpj] {
    transition: transform 0.2s ease;
}

.instructor-dropdown-icon.rotated[b-girjvzehpj] {
    transform: rotate(180deg);
}

.instructor-clear-btn i[b-girjvzehpj] {
    font-size: 0.875rem;
}

/* Row spacing in modal */
.modal .row[b-girjvzehpj] {
    margin-bottom: 0.75rem;
}

.modal .mb-3[b-girjvzehpj] {
    margin-bottom: 0.75rem !important;
}


.badge .fas.fa-times[b-girjvzehpj] {
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.badge .fas.fa-times:hover[b-girjvzehpj] {
    opacity: 1;
}

/* Text Colors */
.text-danger[b-girjvzehpj] {
    color: #dc3545 !important;
}

.text-success[b-girjvzehpj] {
    color: #198754 !important;
}

/* Enhanced Icon Colors */
.modal .fas.fa-calendar-plus[b-girjvzehpj],
.modal .fas.fa-users[b-girjvzehpj],
.modal .fas.fa-calendar[b-girjvzehpj],
.modal .fas.fa-clock[b-girjvzehpj],
.modal .fas.fa-hourglass-half[b-girjvzehpj],
.modal .fas.fa-book[b-girjvzehpj],
.modal .fas.fa-user[b-girjvzehpj],
.modal .fas.fa-calendar-alt[b-girjvzehpj],
.modal .fas.fa-question-circle[b-girjvzehpj],
.modal .fas.fa-redo[b-girjvzehpj],
.modal .fas.fa-check-circle[b-girjvzehpj],
.modal .fas.fa-link[b-girjvzehpj],
.modal .fas.fa-info-circle[b-girjvzehpj] {
    color: #214ca6;
}

/* Modal Button Styles - Giống với project style */
.modal .btn[b-girjvzehpj] {
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0.625rem 1.25rem;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    cursor: pointer;
}

.modal .btn:focus[b-girjvzehpj] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.modal .btn-secondary[b-girjvzehpj] {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #ffffff;
}

.modal .btn-secondary:hover[b-girjvzehpj] {
    background-color: #5a6268;
    border-color: #545b62;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
}

.modal .btn-secondary:active[b-girjvzehpj] {
    background-color: #545b62;
    border-color: #4e555b;
    transform: translateY(0);
}

.modal .btn-primary[b-girjvzehpj] {
    background-color: #214ca6;
    border-color: #214ca6;
    color: #ffffff;
}

.modal .btn-primary:hover[b-girjvzehpj] {
    background-color: #1e40af;
    border-color: #1d3a8a;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(33, 76, 166, 0.3);
}

.modal .btn-primary:active[b-girjvzehpj] {
    background-color: #1d3a8a;
    border-color: #1e3a8a;
    transform: translateY(0);
}

.modal .btn-primary:disabled[b-girjvzehpj] {
    background-color: #9ca3af;
    border-color: #9ca3af;
    color: #ffffff;
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
    box-shadow: none;
}

.modal .btn-primary:disabled:hover[b-girjvzehpj] {
    background-color: #9ca3af;
    border-color: #9ca3af;
    transform: none;
    box-shadow: none;
}

/* Button icons */
.modal .btn i[b-girjvzehpj] {
    font-size: 0.875rem;
    color: inherit;
}

/* Ensure icons in buttons are white - Higher specificity */
.modal .btn-primary i[b-girjvzehpj],
.modal .btn-secondary i[b-girjvzehpj],
.modal .btn i[b-girjvzehpj] {
    color: #ffffff !important;
}

/* Override specific icon colors in buttons */
.modal .btn-primary .fas.fa-calendar-plus[b-girjvzehpj],
.modal .btn-primary .fas.fa-times[b-girjvzehpj],
.modal .btn-secondary .fas.fa-times[b-girjvzehpj] {
    color: #ffffff !important;
}

/* Specific icon spacing */
.modal .btn i.me-2[b-girjvzehpj] {
    margin-right: 0.5rem !important;
}

/* Spinner in button */
.modal .btn .spinner-border-sm[b-girjvzehpj] {
    width: 1rem;
    height: 1rem;
}

/* Remove button styles - Make it clearly visible */
.modal .btn-outline-danger[b-girjvzehpj] {
    color: #dc3545 !important;
    border-color: #dc3545 !important;
    background-color: transparent !important;
}

.modal .btn-outline-danger:hover[b-girjvzehpj] {
    color: #ffffff !important;
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
}

.modal .btn-outline-danger:focus[b-girjvzehpj] {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25) !important;
}

.modal .btn-outline-danger i[b-girjvzehpj] {
    color: inherit !important;
}

/* Custom Number Input Spinner Arrows */
.modal input[type="number"][b-girjvzehpj] {
    -moz-appearance: textfield; /* Firefox */
    appearance: textfield; /* Standard */
}

.modal input[type="number"][b-girjvzehpj]::-webkit-outer-spin-button,
.modal input[type="number"][b-girjvzehpj]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.modal .number-input-wrapper[b-girjvzehpj] {
    position: relative;
    display: inline-block;
    width: 100%;
}

.modal .number-input-wrapper[b-girjvzehpj] {
    position: relative;
}

.modal .number-input-wrapper input[type="number"][b-girjvzehpj] {
    padding-right: 2.5rem; /* Space for custom arrows */
    width: 100%;
}

.modal .number-input-wrapper input[type="number"].is-invalid[b-girjvzehpj] {
    padding-right: 4.5rem; /* Extra space for validation icon + spinner */
    background-image: none; /* Disable Bootstrap default validation icon */
}

/* Custom validation icon with Font Awesome */
.modal .number-input-wrapper .validation-icon-error[b-girjvzehpj] {
    position: absolute;
    right: 2.5rem; /* Position before spinner */
    top: 50%;
    left: auto;
    width: auto;
    height: auto;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #dc3545;
    font-size: 1rem;
    z-index: 1;
    pointer-events: none;
    margin: 0;
    padding: 0;
    line-height: 0;
}

.modal .number-input-wrapper .validation-icon-error i[b-girjvzehpj] {
    font-size: 1rem;
    line-height: 1;
    display: inline-block;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    /* Điều chỉnh để căn giữa chính xác - di chuyển lên trên thêm */
    transform: translateY(-0.25em);
    position: relative;
}

.modal .number-spinner[b-girjvzehpj] {
    position: absolute;
    right: 0;
    top: 0;
    width: 2rem;
    height: 53px;
    display: flex;
    flex-direction: column;
    background: #f8f9fa;
    border-left: 2px solid #9ca3af;
    border-top: 1px solid #9ca3af;
    border-bottom: 1px solid #9ca3af;
    border-right: 1px solid #9ca3af;
    border-radius: 0 6px 6px 0;
    box-sizing: border-box;
}

.modal .spinner-btn[b-girjvzehpj] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #6c757d;
    font-size: 0.7rem;
    font-weight: bold;
    min-height: 0;
    padding: 0;
    height: 50%;
    border-bottom: 1px solid #e5e7eb;
}

.modal .spinner-btn:last-child[b-girjvzehpj] {
    border-bottom: none;
}

.modal .spinner-btn .fas[b-girjvzehpj] {
    font-size: 0.6rem;
    line-height: 1;
}

.modal .spinner-btn:hover[b-girjvzehpj] {
    background: rgba(33, 76, 166, 0.1);
    color: #214ca6;
}

.modal .spinner-btn:active[b-girjvzehpj] {
    background: rgba(33, 76, 166, 0.2);
    color: #1e40af;
}

.modal .spinner-btn:focus[b-girjvzehpj] {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(33, 76, 166, 0.3);
}

.modal .spinner-btn:disabled[b-girjvzehpj] {
    opacity: 0.5;
    cursor: not-allowed;
}

.modal .spinner-btn:disabled:hover[b-girjvzehpj] {
    background: transparent;
    color: #6c757d;
}

/* Custom arrow icons */
.modal .spinner-btn .fas.fa-chevron-up[b-girjvzehpj],
.modal .spinner-btn .fas.fa-chevron-down[b-girjvzehpj] {
    font-size: 0.7rem;
    line-height: 1;
}

/* Focus state for number input */
.modal .number-input-wrapper:focus-within .number-spinner[b-girjvzehpj] {
    border-left-color: #214ca6;
    background: rgba(33, 76, 166, 0.05);
}

/* Instructor dropdown menu */
.instructor-dropdown[b-girjvzehpj] {
    z-index: 1050;
    max-height: 320px;
    overflow-y: auto;
    top: 100%;
    margin-top: 0.375rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* Instructor dropdown item */
.instructor-item[b-girjvzehpj] {
    padding: 1rem 1.25rem;
    cursor: pointer;
    transition: background-color 150ms ease, box-shadow 150ms ease;
    border-bottom: 1px solid #f3f4f6;
    background: #ffffff;
    will-change: background-color, box-shadow;
}

.instructor-item:last-child[b-girjvzehpj] {
    border-bottom: none;
}

.instructor-item:hover[b-girjvzehpj] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    /* Use inset shadow instead of border/padding changes to avoid layout shift */
    box-shadow: inset 3px 0 0 0 #214ca6;
}

.instructor-item:active[b-girjvzehpj] {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    box-shadow: inset 3px 0 0 0 #214ca6;
}

.instructor-item-content[b-girjvzehpj] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.instructor-item-header[b-girjvzehpj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.instructor-name[b-girjvzehpj] {
    font-weight: 600;
    font-size: 0.9375rem;
    color: #1f2937;
    line-height: 1.4;
}

.instructor-item-details[b-girjvzehpj] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
    align-items: center;
}

.instructor-detail-item[b-girjvzehpj] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: #6b7280;
}

.instructor-detail-item i[b-girjvzehpj] {
    color: #9ca3af;
    font-size: 0.75rem;
    width: 14px;
    text-align: center;
}

.instructor-detail-item span[b-girjvzehpj] {
    color: #4b5563;
}

/* Loading và empty state */
.instructor-dropdown-loading[b-girjvzehpj] {
    padding: 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.instructor-loading-text[b-girjvzehpj] {
    color: #6b7280;
    font-size: 0.875rem;
}

.instructor-dropdown-empty[b-girjvzehpj] {
    padding: 1.5rem;
    text-align: center;
    color: #9ca3af;
    font-size: 0.875rem;
}

/* Selected instructor card */
.selected-instructor-card[b-girjvzehpj] {
    margin-top: 0.875rem;
    background: #ffffff;
    border: 1px solid #d1fae5;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.08);
}

.selected-instructor-header[b-girjvzehpj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid #f0fdf4;
}

.selected-instructor-name[b-girjvzehpj] {
    font-weight: 600;
    font-size: 1rem;
    color: #10b981;
    line-height: 1.5;
}

.selected-instructor-badge[b-girjvzehpj] {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}

.selected-instructor-details[b-girjvzehpj] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.selected-instructor-detail[b-girjvzehpj] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.5;
}

.selected-instructor-detail i[b-girjvzehpj] {
    color: #214ca6;
    font-size: 0.875rem;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.selected-instructor-detail span[b-girjvzehpj] {
    color: #4b5563;
}
/* _content/ltia.portal.web/Components/Exams/Admin/Pages/ChangePassword.razor.rz.scp.css */
/* Change Password Page */
.change-password-page[b-3vfgg2s735] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --success: #10b981;
    --success-light: #d1fae5;
    --error: #ef4444;
    --error-light: #fee2e2;

    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Card Header Section */
.card-header-section[b-3vfgg2s735] {
    background: var(--acv-white);
    border-radius: 12px;
    padding: 2rem 2.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--gray-200);
}

.card-header-content[b-3vfgg2s735] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.card-header-icon[b-3vfgg2s735] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.25);
}

.card-header-text h1[b-3vfgg2s735] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 0.25rem 0;
    line-height: 1.3;
}

.card-header-text p[b-3vfgg2s735] {
    font-size: 1rem;
    color: var(--gray-600);
    margin: 0;
    line-height: 1.5;
}

/* Form Container */
.form-container[b-3vfgg2s735] {
    max-width: 700px;
    margin: 0 auto;
}

.form-card[b-3vfgg2s735] {
    background: var(--acv-white);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--gray-200);
    overflow: hidden;
}

.form-header[b-3vfgg2s735] {
    padding: 2rem 2.5rem;
    border-bottom: 2px solid var(--gray-100);
    background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
}

.form-title-section[b-3vfgg2s735] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-title[b-3vfgg2s735] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.form-title i[b-3vfgg2s735] {
    color: var(--acv-primary);
    font-size: 1.25rem;
}

.form-subtitle[b-3vfgg2s735] {
    font-size: 0.9375rem;
    color: var(--gray-600);
    margin-left: 2rem;
}

.form-body[b-3vfgg2s735] {
    padding: 2.5rem;
}

/* Error Alert */
.error-alert[b-3vfgg2s735] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--error-light);
    border: 1px solid var(--error);
    border-radius: 8px;
    margin-bottom: 2rem;
    animation: slideDown-b-3vfgg2s735 0.3s ease;
}

.error-alert-content[b-3vfgg2s735] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--error);
    font-size: 0.9375rem;
    font-weight: 500;
    flex: 1;
}

.error-alert-content i[b-3vfgg2s735] {
    font-size: 1.125rem;
}

.error-alert-close[b-3vfgg2s735] {
    background: none;
    border: none;
    color: var(--error);
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
    font-size: 1rem;
}

.error-alert-close:hover[b-3vfgg2s735] {
    opacity: 0.7;
}

@keyframes slideDown-b-3vfgg2s735 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Form Groups */
.form-group[b-3vfgg2s735] {
    margin-bottom: 2rem;
}

.form-label[b-3vfgg2s735] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.625rem;
}

.form-label i[b-3vfgg2s735] {
    color: var(--acv-primary);
    font-size: 0.875rem;
    width: 16px;
    text-align: center;
}

.required[b-3vfgg2s735] {
    color: var(--error);
    margin-left: 0.25rem;
}

/* Password Input Wrapper */
.password-input-wrapper[b-3vfgg2s735] {
    position: relative;
    display: flex;
    align-items: center;
}

.form-input[b-3vfgg2s735] {
    width: 100%;
    padding: 0.875rem 3rem 0.875rem 1rem;
    border: 2px solid var(--gray-300);
    border-radius: 8px;
    font-size: 1rem;
    color: var(--gray-900);
    transition: all 0.2s ease;
    background: var(--acv-white);
    font-family: inherit;
}

.form-input:focus[b-3vfgg2s735] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.form-input[b-3vfgg2s735]::placeholder {
    color: var(--gray-400);
}

.form-input.error[b-3vfgg2s735] {
    border-color: var(--error);
}

.form-input.error:focus[b-3vfgg2s735] {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.password-toggle[b-3vfgg2s735] {
    position: absolute;
    right: 0.75rem;
    background: none;
    border: none;
    color: var(--gray-500);
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    font-size: 1rem;
}

.password-toggle:hover[b-3vfgg2s735] {
    color: var(--acv-primary);
}

/* Password Requirements */
.password-requirements[b-3vfgg2s735] {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
}

.requirement-item[b-3vfgg2s735] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0;
    font-size: 0.875rem;
    color: var(--gray-600);
    transition: color 0.2s ease;
}

.requirement-item i[b-3vfgg2s735] {
    font-size: 0.875rem;
    width: 16px;
    text-align: center;
}

.requirement-item.valid[b-3vfgg2s735] {
    color: var(--success);
}

.requirement-item.valid i[b-3vfgg2s735] {
    color: var(--success);
}

.requirement-item.invalid[b-3vfgg2s735] {
    color: var(--gray-500);
}

.requirement-item.invalid i[b-3vfgg2s735] {
    color: var(--error);
}

/* Field Error */
.field-error[b-3vfgg2s735] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    color: var(--error);
    font-size: 0.875rem;
    font-weight: 500;
}

.field-error i[b-3vfgg2s735] {
    font-size: 0.875rem;
}

/* Field Success */
.field-success[b-3vfgg2s735] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    color: var(--success);
    font-size: 0.875rem;
    font-weight: 500;
}

.field-success i[b-3vfgg2s735] {
    font-size: 0.875rem;
}

/* Form Actions */
.form-actions[b-3vfgg2s735] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 2px solid var(--gray-200);
    flex-wrap: wrap;
}

.btn-cancel[b-3vfgg2s735],
.btn-submit[b-3vfgg2s735] {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.75rem;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    min-width: 140px;
    justify-content: center;
}

.btn-cancel[b-3vfgg2s735] {
    background: var(--gray-100);
    color: var(--gray-700);
}

.btn-cancel:hover:not(:disabled)[b-3vfgg2s735] {
    background: var(--gray-200);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-cancel:disabled[b-3vfgg2s735] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-submit[b-3vfgg2s735] {
    background: var(--acv-primary);
    color: var(--acv-white);
    box-shadow: 0 2px 6px rgba(33, 76, 166, 0.2);
}

.btn-submit:hover:not(:disabled)[b-3vfgg2s735] {
    background: var(--acv-primary-700);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

.btn-submit:disabled[b-3vfgg2s735] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Responsive */
@media (max-width: 768px) {
    .change-password-page[b-3vfgg2s735] {
        padding: 0.5rem 1rem;
    }

    .card-header-section[b-3vfgg2s735] {
        padding: 1.5rem 1.25rem;
    }

    .card-header-text h1[b-3vfgg2s735] {
        font-size: 1.5rem;
    }

    .form-header[b-3vfgg2s735] {
        padding: 1.5rem 1.25rem;
    }

    .form-body[b-3vfgg2s735] {
        padding: 1.5rem 1.25rem;
    }

    .form-title[b-3vfgg2s735] {
        font-size: 1.25rem;
    }

    .form-subtitle[b-3vfgg2s735] {
        margin-left: 0;
        font-size: 0.875rem;
    }

    .form-actions[b-3vfgg2s735] {
        flex-direction: column-reverse;
    }

    .btn-cancel[b-3vfgg2s735],
    .btn-submit[b-3vfgg2s735] {
        width: 100%;
    }
}

/* _content/ltia.portal.web/Components/Exams/Admin/Pages/Exams/Create.razor.rz.scp.css */
/* Exam Form Page - Based on Instructor Create Design */
.exam-form-page[b-loz0a6gas6] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;

    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Main Layout */
.main-content-container[b-loz0a6gas6] {
    display: flex;
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.form-column[b-loz0a6gas6] {
    flex: 2;
    background: white;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.preview-column[b-loz0a6gas6] {
    flex: 1;
    min-width: 300px;
}

/* Form Sections */
.form-section[b-loz0a6gas6] {
    margin-bottom: 32px;
}

.section-header[b-loz0a6gas6] {
    margin-bottom: 20px;
}

.section-title[b-loz0a6gas6] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 700;
    color: #2d3748;
    margin: 0;
}

.section-title i[b-loz0a6gas6] {
    color: var(--acv-primary);
    font-size: 16px;
}

.form-grid[b-loz0a6gas6] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group-full-width[b-loz0a6gas6] {
    grid-column: 1 / -1; /* Span full width across all columns */
}

/* Form Controls */
.form-control[b-loz0a6gas6] {
    width: 100%;
    padding: 0.875rem;
    border: 1px solid #9ca3af;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--acv-white);
    margin-bottom: 0.5rem;
}

.form-control:focus[b-loz0a6gas6] {
    outline: none;
    border-color: #214ca6;
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.form-control:disabled[b-loz0a6gas6] {
    background: var(--gray-100);
    color: var(--gray-500);
    cursor: not-allowed;
}

.form-select[b-loz0a6gas6] {
    width: 100%;
    padding: 0.875rem;
    border: 1px solid #9ca3af;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--acv-white);
    cursor: pointer;
}

.form-select:focus[b-loz0a6gas6] {
    outline: none;
    border-color: #214ca6;
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.form-label[b-loz0a6gas6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.form-label i[b-loz0a6gas6] {
    color: var(--acv-primary);
    font-size: 0.9rem;
    width: 16px;
}

.form-text[b-loz0a6gas6] {
    font-size: 0.85rem;
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.form-text i[b-loz0a6gas6] {
    font-size: 0.8rem;
    color: inherit;
}

.text-success[b-loz0a6gas6] {
    color: var(--success-dark) !important;
}

.text-danger[b-loz0a6gas6] {
    color: var(--error-dark) !important;
}

.text-muted[b-loz0a6gas6] {
    color: var(--gray-500) !important;
}

/* Input Group */
.input-group[b-loz0a6gas6] {
    display: flex;
    align-items: stretch;
}

.input-group .form-control[b-loz0a6gas6] {
    flex: 1;
    border-radius: 0;
    border-right: 1px solid #9ca3af;
}

.input-group .form-control:first-child[b-loz0a6gas6] {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-right: 1px solid #9ca3af;
}

.input-group .form-control:last-child[b-loz0a6gas6] {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-left: 1px solid #9ca3af;
}

.input-group .form-control:focus[b-loz0a6gas6] {
    border-color: #214ca6;
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.input-group-text[b-loz0a6gas6] {
    display: flex;
    align-items: center;
    padding: 0.875rem;
    background-color: var(--gray-50);
    border: 1px solid #9ca3af;
    border-left: none;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    font-size: 0.95rem;
    color: var(--gray-700);
}

.input-group .btn-outline-secondary[b-loz0a6gas6] {
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
    border-width: 1px;
    height: 100%;
    align-items: center;
    display: flex;
    border-radius: 0 8px 8px 0;
    min-height: calc(0.95rem * 1.5 + 0.875rem * 2 + 2px); /* Match input height: font-size * line-height + padding * 2 + border */
    box-sizing: border-box;
}

.btn-outline-secondary[b-loz0a6gas6],
.btn-outline-primary[b-loz0a6gas6] {
    padding: 0.75rem 1rem;
    border: 2px solid;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-outline-secondary[b-loz0a6gas6] {
    background: var(--acv-white);
    color: var(--gray-600);
    border-color: var(--gray-300);
}

.btn-outline-secondary:hover[b-loz0a6gas6] {
    background: var(--gray-50);
    border-color: var(--gray-400);
}

.btn-outline-primary[b-loz0a6gas6] {
    background: var(--acv-white);
    color: var(--acv-primary);
    border-color: var(--acv-primary);
}

.btn-outline-primary:hover[b-loz0a6gas6] {
    background: var(--acv-primary-lighter);
    border-color: var(--acv-primary-700);
}

.btn-outline-primary:disabled[b-loz0a6gas6] {
    background: var(--gray-100);
    color: var(--gray-400);
    border-color: var(--gray-300);
    cursor: not-allowed;
}

/* Table Styles */
.table-responsive[b-loz0a6gas6] {
    overflow-x: auto;
    margin-top: 1rem;
}

.table[b-loz0a6gas6] {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.table thead th[b-loz0a6gas6] {
    background: var(--gray-50);
    color: var(--gray-700);
    font-weight: 600;
    font-size: 0.875rem;
    padding: 1rem;
    text-align: left;
    border-bottom: 2px solid var(--gray-200);
}

.table tbody td[b-loz0a6gas6] {
    padding: 1rem;
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.875rem;
    color: var(--gray-800);
}

.table tbody tr:hover[b-loz0a6gas6] {
    background: var(--gray-50);
}

/* Small Button Styles */
.btn-sm[b-loz0a6gas6] {
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    min-width: auto;
}

.btn-sm.btn-outline-secondary[b-loz0a6gas6] {
    background: var(--acv-white);
    color: var(--gray-600);
    border-color: var(--gray-300);
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
}

.btn-sm.btn-outline-secondary:hover[b-loz0a6gas6] {
    background: var(--gray-50);
    border-color: var(--gray-400);
}

.btn-outline-danger[b-loz0a6gas6] {
    background: var(--acv-white);
    color: var(--error-dark);
    border: 1px solid var(--error-dark);
}

.btn-outline-danger:hover[b-loz0a6gas6] {
    background: var(--error-dark);
    color: var(--acv-white);
}

.text-center[b-loz0a6gas6] {
    text-align: center;
}

.text-nowrap[b-loz0a6gas6] {
    white-space: nowrap;
}

/* Alert */
.alert[b-loz0a6gas6] {
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin: 1rem 0;
    border: 1px solid;
}

.alert-secondary[b-loz0a6gas6] {
    background: var(--gray-50);
    color: var(--gray-700);
    border-color: var(--gray-200);
}

/* Input with Validation */
.input-with-validation[b-loz0a6gas6] {
    position: relative;
}

.form-input[b-loz0a6gas6] {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s ease;
    background: white;
}

.form-input:focus[b-loz0a6gas6] {
    outline: none;
    border-color: var(--acv-primary);
    border-width: 1px;
    box-shadow: 0 0 0 2px rgba(33, 76, 166, 0.15);
}

.validation-icon[b-loz0a6gas6] {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
}

.validation-icon.loading[b-loz0a6gas6] {
    color: var(--acv-primary);
    animation: pulse-b-loz0a6gas6 1.5s ease-in-out infinite;
}

.validation-icon.success[b-loz0a6gas6] {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.validation-icon.error[b-loz0a6gas6] {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

@keyframes pulse-b-loz0a6gas6 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Slug Validation Message */
.slug-status-message[b-loz0a6gas6] {
    margin-top: 16px;
    padding: 16px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 16px;
    animation: slideDown-b-loz0a6gas6 0.3s ease-out;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

@keyframes slideDown-b-loz0a6gas6 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slug-status-message.loading[b-loz0a6gas6] {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #0ea5e9;
}

.slug-status-message.success[b-loz0a6gas6] {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #10b981;
}

.slug-status-message.error[b-loz0a6gas6] {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 1px solid #ef4444;
}

.status-icon[b-loz0a6gas6] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.slug-status-message.loading .status-icon[b-loz0a6gas6] {
    background: #0ea5e9;
    color: white;
}

.slug-status-message.success .status-icon[b-loz0a6gas6] {
    background: #10b981;
    color: white;
}

.slug-status-message.error .status-icon[b-loz0a6gas6] {
    background: #ef4444;
    color: white;
}

.status-content[b-loz0a6gas6] {
    flex: 1;
    min-width: 0;
}

.status-title[b-loz0a6gas6] {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    line-height: 1.4;
}

.slug-status-message.loading .status-title[b-loz0a6gas6] {
    color: #0369a1;
}

.slug-status-message.success .status-title[b-loz0a6gas6] {
    color: #047857;
}

.slug-status-message.error .status-title[b-loz0a6gas6] {
    color: #dc2626;
}

.status-subtitle[b-loz0a6gas6] {
    font-size: 14px;
    font-weight: 500;
    opacity: 0.8;
    line-height: 1.4;
}

.slug-status-message.loading .status-subtitle[b-loz0a6gas6] {
    color: #0369a1;
}

.slug-status-message.success .status-subtitle[b-loz0a6gas6] {
    color: #047857;
}

.slug-status-message.error .status-subtitle[b-loz0a6gas6] {
    color: #dc2626;
}

/* Textarea */
.form-textarea[b-loz0a6gas6] {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    resize: vertical;
    min-height: 100px;
    transition: all 0.2s ease;
    font-family: inherit;
}

.form-textarea:focus[b-loz0a6gas6] {
    outline: none;
    border-color: var(--acv-primary);
    border-width: 1px;
    box-shadow: 0 0 0 2px rgba(33, 76, 166, 0.15);
}

.form-hint[b-loz0a6gas6] {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
}

/* Subject Select Container */
.subject-select-container[b-loz0a6gas6] {
    position: relative;
}

.subject-select-wrapper[b-loz0a6gas6] {
    position: relative;
}

.selected-subjects[b-loz0a6gas6] {
    min-height: 48px;
    padding: 8px 12px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff !important;
    color: #374151;
}

.selected-subjects:hover[b-loz0a6gas6] {
    border-color: var(--acv-primary);
    border-width: 1px;
}

.selected-subjects:focus-within[b-loz0a6gas6] {
    border-color: var(--acv-primary);
    border-width: 1px;
    box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.2);
}

.selected-items[b-loz0a6gas6] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
}

.selected-item[b-loz0a6gas6] {
    display: flex;
    align-items: center;
    background: #e6f3ff;
    border: 1px solid var(--acv-primary);
    border-radius: 20px;
    padding: 4px 8px;
    font-size: 13px;
    color: #1a3d8a;
    transition: all 0.2s ease;
}

.selected-item:hover[b-loz0a6gas6] {
    background: #bfdbfe;
}

.remove-btn[b-loz0a6gas6] {
    background: none;
    border: none;
    color: #1a3d8a;
    cursor: pointer;
    padding: 2px;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    margin-left: 4px;
}

.remove-btn:hover[b-loz0a6gas6] {
    background: var(--acv-primary);
    color: white;
}

.placeholder[b-loz0a6gas6] {
    color: #9ca3af !important;
    font-style: italic;
    font-size: 14px;
    font-weight: 400;
    flex: 1;
    background-color: transparent !important;
}

.dropdown-icon[b-loz0a6gas6] {
    color: #6b7280;
    transition: transform 0.2s ease;
    margin-left: 8px;
}

.dropdown-icon.rotated[b-loz0a6gas6] {
    transform: rotate(180deg);
}

/* Subject Dropdown */
.subject-dropdown[b-loz0a6gas6] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 2px solid #e5e7eb;
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 50;
    max-height: 300px;
    overflow-y: auto;
}

.dropdown-search[b-loz0a6gas6] {
    padding: 12px;
    border-bottom: 1px solid #e5e7eb;
    position: relative;
}

.search-icon[b-loz0a6gas6] {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    font-size: 14px;
}

.search-input[b-loz0a6gas6] {
    width: 100%;
    padding: 8px 8px 8px 32px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.search-input:focus[b-loz0a6gas6] {
    outline: none;
    border-color: var(--acv-primary);
    border-width: 1px;
    box-shadow: 0 0 0 2px rgba(33, 76, 166, 0.15);
}

.dropdown-options[b-loz0a6gas6] {
    padding: 8px 0;
}

.dropdown-option[b-loz0a6gas6] {
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dropdown-option:hover[b-loz0a6gas6] {
    background: #f3f4f6;
}

.option-name[b-loz0a6gas6] {
    font-weight: 500;
    color: #374151;
}

.option-code[b-loz0a6gas6] {
    font-size: 12px;
    color: #6b7280;
    background: #f3f4f6;
    padding: 2px 8px;
    border-radius: 12px;
}

/* Giảm height của dropdown option trong SelectSearch */
[b-loz0a6gas6] .select-search-item {
    padding: 0.625rem 1rem !important; /* Giảm padding để giảm height */
}

[b-loz0a6gas6] .dropdown-option {
    padding: 0.5rem 0.75rem !important; /* Giảm padding của option */
    min-height: auto !important;
}

[b-loz0a6gas6] .option-name {
    font-size: 0.875rem !important; /* Giảm font-size */
    line-height: 1.35 !important;
}

[b-loz0a6gas6] .option-code {
    font-size: 0.75rem !important; /* Giảm font-size của badge */
    padding: 0.125rem 0.5rem !important; /* Giảm padding */
}

.no-results[b-loz0a6gas6] {
    padding: 20px;
    text-align: center;
    color: #6b7280;
    font-style: italic;
}

.no-results i[b-loz0a6gas6] {
    font-size: 24px;
    margin-bottom: 8px;
    display: block;
}

.search-prompt[b-loz0a6gas6] {
    padding: 20px;
    text-align: center;
    color: #9ca3af;
    font-style: italic;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: #f8f9fa;
    border-radius: 8px;
    margin: 8px;
}

.search-prompt i[b-loz0a6gas6] {
    font-size: 28px;
    opacity: 0.6;
}

.search-prompt span[b-loz0a6gas6] {
    font-size: 14px;
    font-weight: 500;
}

/* Instructor Select Container */
.instructor-select-container[b-loz0a6gas6] {
    position: relative;
}

.instructor-select-wrapper[b-loz0a6gas6] {
    position: relative;
}

.selected-instructor[b-loz0a6gas6] {
    min-height: 48px;
    padding: 8px 12px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff !important;
    color: #374151;
}

.selected-instructor:hover[b-loz0a6gas6] {
    border-color: var(--acv-primary);
    border-width: 1px;
}

.selected-instructor:focus-within[b-loz0a6gas6] {
    border-color: var(--acv-primary);
    border-width: 1px;
    box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.2);
}

.selected-instructor-item[b-loz0a6gas6] {
    display: flex;
    align-items: center;
    background: #e6f3ff;
    border: 1px solid var(--acv-primary);
    border-radius: 20px;
    padding: 4px 8px;
    font-size: 13px;
    color: #1a3d8a;
    transition: all 0.2s ease;
}

.selected-instructor-item:hover[b-loz0a6gas6] {
    background: #bfdbfe;
}

/* Student Management */
.student-management[b-loz0a6gas6] {
    margin-top: 1rem;
}

.student-input-container[b-loz0a6gas6] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.student-input[b-loz0a6gas6] {
    flex: 1;
    padding: 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.875rem;
}

.student-input:focus[b-loz0a6gas6] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 2px rgba(33, 76, 166, 0.1);
}

.add-student-btn[b-loz0a6gas6] {
    padding: 0.75rem 1rem;
    background: var(--acv-primary);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    font-weight: 500;
}

.add-student-btn:hover[b-loz0a6gas6] {
    background: var(--acv-primary-700);
    transform: translateY(-1px);
}

.add-student-btn:disabled[b-loz0a6gas6] {
    background: var(--gray-400);
    cursor: not-allowed;
    transform: none;
}

.students-list[b-loz0a6gas6] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 200px;
    overflow-y: auto;
    padding: 0.5rem;
    background: var(--gray-50);
    border-radius: 8px;
}

.student-item[b-loz0a6gas6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.student-item:hover[b-loz0a6gas6] {
    background: var(--gray-50);
    border-color: var(--acv-primary);
}

.student-info[b-loz0a6gas6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.student-code[b-loz0a6gas6] {
    font-weight: 600;
    color: var(--gray-800);
    font-size: 0.875rem;
}

.student-name[b-loz0a6gas6] {
    color: var(--gray-600);
    font-size: 0.8rem;
}

.remove-student-btn[b-loz0a6gas6] {
    background: var(--error-lighter);
    color: var(--error-dark);
    border: none;
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.75rem;
}

.remove-student-btn:hover[b-loz0a6gas6] {
    background: var(--error-main);
    color: white;
}

/* Preview Card */
.preview-card[b-loz0a6gas6] {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    height: fit-content;
    position: sticky;
    top: 20px;
}

.preview-header[b-loz0a6gas6] {
    text-align: center;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e7eb;
}

.preview-icon[b-loz0a6gas6] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: white;
    font-size: 32px;
}

.preview-title[b-loz0a6gas6] {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 4px 0;
}

.preview-subtitle[b-loz0a6gas6] {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

.preview-details[b-loz0a6gas6] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.detail-item[b-loz0a6gas6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #e5e7eb;
}

.detail-item:last-child[b-loz0a6gas6] {
    border-bottom: none;
}

.detail-label[b-loz0a6gas6] {
    font-weight: 600;
    color: #111827;
    font-size: 14px;
}

.detail-value[b-loz0a6gas6] {
    color: #111827;
    font-size: 14px;
    text-align: right;
    max-width: 60%;
    word-wrap: break-word;
}

/* Form Actions */
.form-actions[b-loz0a6gas6] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-200);
    flex-wrap: wrap;
}

.btn-primary[b-loz0a6gas6],
.btn-secondary[b-loz0a6gas6],
.btn-danger[b-loz0a6gas6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    border: none;
    min-width: 160px;
    justify-content: center;
}

.btn-primary[b-loz0a6gas6] {
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.15);
}

.btn-primary:hover[b-loz0a6gas6] {
    background: linear-gradient(135deg, var(--acv-primary-700) 0%, var(--acv-primary-800) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.25);
    text-decoration: none;
    color: var(--acv-white);
}

.btn-primary:disabled[b-loz0a6gas6] {
    background: var(--gray-400);
    border-color: var(--gray-400);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-primary:disabled:hover[b-loz0a6gas6] {
    background: var(--gray-400);
    border-color: var(--gray-400);
    transform: none;
    box-shadow: none;
}

.btn-secondary[b-loz0a6gas6] {
    background: var(--acv-white);
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.btn-secondary:hover[b-loz0a6gas6] {
    background: var(--gray-50);
    border-color: var(--gray-400);
    transform: translateY(-1px);
    color: var(--gray-800);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-danger[b-loz0a6gas6] {
    background: linear-gradient(135deg, #ff5630 0%, #ff8a65 100%);
    color: var(--acv-white);
    box-shadow: 0 2px 8px rgba(255, 86, 48, 0.25);
}

.btn-danger:hover[b-loz0a6gas6] {
    background: linear-gradient(135deg, #e53e3e 0%, #ff6b47 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 86, 48, 0.35);
}

/* Subject Display Card */
.subject-display-card[b-loz0a6gas6] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border-top: 4px solid #214ca6;
}

.subject-card-icon[b-loz0a6gas6] {
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%);
    border-radius: 10px;
    color: #ffffff;
    font-size: 1.25rem;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
}

.subject-card-content[b-loz0a6gas6] {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
}

.subject-card-title[b-loz0a6gas6] {
    font-size: 1.0625rem;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.5;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.subject-card-badge[b-loz0a6gas6] {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%);
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(33, 76, 166, 0.2);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Instructor input với icons bên trong */
.instructor-input-wrapper[b-loz0a6gas6] {
    position: relative;
}

.instructor-search-input[b-loz0a6gas6] {
    padding-right: 80px; /* Tạo khoảng trống cho icons bên phải */
}

.instructor-input-icons[b-loz0a6gas6] {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding-right: 0.5rem;
    pointer-events: none; /* Cho phép click xuyên qua đến input */
}

.instructor-input-icons button[b-loz0a6gas6] {
    pointer-events: auto; /* Bật lại click cho buttons */
    background: transparent;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    transition: color 0.2s ease;
}

.instructor-input-icons button:hover[b-loz0a6gas6] {
    color: #214ca6;
}

.instructor-dropdown-btn i[b-loz0a6gas6] {
    font-size: 0.875rem;
}

.instructor-dropdown-icon-container[b-loz0a6gas6] {
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.instructor-dropdown-icon[b-loz0a6gas6] {
    transition: transform 0.2s ease;
    font-size: 0.875rem;
    color: #6b7280;
}

.instructor-dropdown-icon.rotated[b-loz0a6gas6] {
    transform: rotate(180deg);
}

.instructor-clear-btn i[b-loz0a6gas6] {
    font-size: 0.875rem;
}

/* Instructor dropdown menu */
.instructor-dropdown[b-loz0a6gas6] {
    z-index: 1050;
    max-height: calc(4 * 70px); /* 4 items với height ~70px mỗi item */
    overflow-y: auto;
    top: 100%;
    margin-top: 0.375rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.instructor-dropdown-items[b-loz0a6gas6] {
    display: flex;
    flex-direction: column;
}

/* Instructor dropdown item */
.instructor-item[b-loz0a6gas6] {
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background-color 150ms ease, box-shadow 150ms ease;
    border-bottom: 1px solid #f3f4f6;
    background: #ffffff;
    will-change: background-color, box-shadow;
    min-height: 60px;
    display: flex;
    align-items: center;
}

.instructor-item:last-child[b-loz0a6gas6] {
    border-bottom: none;
}

.instructor-item:hover[b-loz0a6gas6] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    /* Use inset shadow instead of border/padding changes to avoid layout shift */
    box-shadow: inset 3px 0 0 0 #214ca6;
}

.instructor-item:active[b-loz0a6gas6] {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    box-shadow: inset 3px 0 0 0 #214ca6;
}

.instructor-item-content[b-loz0a6gas6] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    width: 100%;
}

.instructor-item-header[b-loz0a6gas6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.instructor-name[b-loz0a6gas6] {
    font-weight: 600;
    font-size: 0.9rem;
    color: #1f2937;
    line-height: 1.4;
}

.instructor-item-details[b-loz0a6gas6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.instructor-detail-item[b-loz0a6gas6] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8rem;
    color: #6b7280;
}

.instructor-detail-item i[b-loz0a6gas6] {
    color: #9ca3af;
    font-size: 0.7rem;
    width: 14px;
    text-align: center;
}

.instructor-detail-item span[b-loz0a6gas6] {
    color: #4b5563;
}

/* Loading và empty state */
.instructor-dropdown-loading[b-loz0a6gas6] {
    padding: 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.instructor-loading-text[b-loz0a6gas6] {
    color: #6b7280;
    font-size: 0.875rem;
}

.instructor-dropdown-empty[b-loz0a6gas6] {
    padding: 1.5rem;
    text-align: center;
    color: #9ca3af;
    font-size: 0.875rem;
}

/* Selected instructor card */
.selected-instructor-card[b-loz0a6gas6] {
    margin-top: 0.875rem;
    background: #ffffff;
    border: 1px solid #d1fae5;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.08);
}

.selected-instructor-header[b-loz0a6gas6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid #f0fdf4;
}

.selected-instructor-name[b-loz0a6gas6] {
    font-weight: 600;
    font-size: 1rem;
    color: #10b981;
    line-height: 1.5;
}

.selected-instructor-badge[b-loz0a6gas6] {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}

.selected-instructor-details[b-loz0a6gas6] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.selected-instructor-detail[b-loz0a6gas6] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.5;
}

.selected-instructor-detail i[b-loz0a6gas6] {
    color: #214ca6;
    font-size: 0.875rem;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.selected-instructor-detail span[b-loz0a6gas6] {
    color: #4b5563;
}

/* DateTimeInput width adjustment */
.datepicker-col[b-loz0a6gas6] {
    position: relative;
}

.datepicker-col[b-loz0a6gas6]  .datetime-input-wrapper {
    min-width: 520px !important; /* Tăng width để vừa khít trang */
    width: 100% !important;
    flex: 1 1 auto !important;
    max-width: 100% !important;
}

.datepicker-col[b-loz0a6gas6]  .datetime-input {
    width: 100% !important;
    flex: 1 !important;
}

.datepicker-col[b-loz0a6gas6]  .datetime-input-group-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    display: flex !important;
    gap: 0.5rem !important;
}

/* Number Input Spinner Styles */
.number-input-wrapper[b-loz0a6gas6] {
    position: relative;
    display: inline-block;
    width: 100%;
}

.number-input-wrapper input[type="number"][b-loz0a6gas6] {
    padding-right: 2.5rem; /* Space for custom arrows */
    width: 100%;
    /* Hide default browser spinner */
    -moz-appearance: textfield;
}

.number-input-wrapper input[type="number"][b-loz0a6gas6]::-webkit-inner-spin-button,
.number-input-wrapper input[type="number"][b-loz0a6gas6]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.number-input-wrapper input[type="number"].is-invalid[b-loz0a6gas6] {
    padding-right: 4.5rem; /* Extra space for validation icon + spinner */
    background-image: none; /* Disable Bootstrap default validation icon */
}

/* Custom validation icon with Font Awesome */
.number-input-wrapper .validation-icon-error[b-loz0a6gas6] {
    position: absolute;
    right: 2.5rem; /* Position before spinner */
    top: 50%;
    left: auto;
    width: auto;
    height: auto;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #dc3545;
    font-size: 1rem;
    z-index: 1;
    pointer-events: none;
    margin: 0;
    padding: 0;
    line-height: 0;
}

.number-input-wrapper .validation-icon-error i[b-loz0a6gas6] {
    font-size: 1rem;
    line-height: 1;
    display: inline-block;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    transform: translateY(-0.25em);
    position: relative;
}

.number-spinner[b-loz0a6gas6] {
    position: absolute;
    right: 0;
    top: 0;
    width: 2rem;
    height: calc(0.95rem * 1.5 + 0.875rem * 2 + 2px); /* Match input height: font-size * line-height + padding * 2 + border */
    display: flex;
    flex-direction: column;
    background: #f8f9fa;
    border-left: 2px solid #9ca3af;
    border-top: 1px solid #9ca3af;
    border-bottom: 1px solid #9ca3af;
    border-right: 1px solid #9ca3af;
    border-radius: 0 6px 6px 0;
    box-sizing: border-box;
}

.spinner-btn[b-loz0a6gas6] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #6c757d;
    font-size: 0.7rem;
    font-weight: bold;
    min-height: 0;
    padding: 0;
    height: 50%;
    border-bottom: 1px solid #e5e7eb;
}

.spinner-btn:last-child[b-loz0a6gas6] {
    border-bottom: none;
}

.spinner-btn .fas[b-loz0a6gas6] {
    font-size: 0.6rem;
    line-height: 1;
}

.spinner-btn:hover[b-loz0a6gas6] {
    background: rgba(33, 76, 166, 0.1);
    color: #214ca6;
}

.spinner-btn:active[b-loz0a6gas6] {
    background: rgba(33, 76, 166, 0.2);
    color: #1e40af;
}

.spinner-btn:focus[b-loz0a6gas6] {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(33, 76, 166, 0.3);
}

.spinner-btn:disabled[b-loz0a6gas6] {
    opacity: 0.5;
    cursor: not-allowed;
}

.spinner-btn:disabled:hover[b-loz0a6gas6] {
    background: transparent;
    color: #6c757d;
}

/* Focus state for number input */
.number-input-wrapper:focus-within .number-spinner[b-loz0a6gas6] {
    border-left-color: #214ca6;
    background: rgba(33, 76, 166, 0.05);
}

/* Responsive */
@media (max-width: 1024px) {
    .main-content-container[b-loz0a6gas6] {
        flex-direction: column;
    }
    
    .preview-column[b-loz0a6gas6] {
        min-width: unset;
    }
    
    .preview-card[b-loz0a6gas6] {
        position: static;
    }
    
    .form-grid[b-loz0a6gas6] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .main-content-container[b-loz0a6gas6] {
        padding: 0 16px;
    }
    
    .form-column[b-loz0a6gas6] {
        padding: 24px;
    }
    
    .form-actions[b-loz0a6gas6] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .btn-primary[b-loz0a6gas6],
    .btn-secondary[b-loz0a6gas6],
    .btn-danger[b-loz0a6gas6] {
        min-width: 100%;
        justify-content: center;
    }
    
    .student-input-container[b-loz0a6gas6] {
        flex-direction: column;
    }
    
    .add-student-btn[b-loz0a6gas6] {
        width: 100%;
    }
}

/* Loading & Error States */
.loading-container[b-loz0a6gas6],
.error-state[b-loz0a6gas6],
.empty-state[b-loz0a6gas6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
    background: var(--acv-white);
    border-radius: 16px;
    padding: 3rem 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.loading-container .spinner-border[b-loz0a6gas6] {
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
}

.loading-container p[b-loz0a6gas6] {
    color: #718096;
    font-size: 1.1rem;
    margin: 0;
}

.error-icon[b-loz0a6gas6],
.empty-state-icon[b-loz0a6gas6] {
    font-size: 4rem;
    margin-bottom: 1.5rem;
}

.error-icon[b-loz0a6gas6] {
    color: #e53e3e;
}

.empty-state-icon[b-loz0a6gas6] {
    color: var(--gray-400);
}

.error-state h3[b-loz0a6gas6],
.empty-state h3[b-loz0a6gas6] {
    color: #2d3748;
    margin-bottom: 1rem;
}

.error-state p[b-loz0a6gas6],
.empty-state p[b-loz0a6gas6] {
    color: #718096;
    margin-bottom: 2rem;
}

/* Form Cards */
.form-card[b-loz0a6gas6] {
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    overflow: hidden;
    margin-bottom: 2rem;
}

.card-header[b-loz0a6gas6] {
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--acv-white) 100%);
    padding: 1.5rem;
    border-bottom: 1px solid var(--gray-200);
    position: relative;
}

.card-header[b-loz0a6gas6]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
}

.card-header h3[b-loz0a6gas6] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.card-header h3 i[b-loz0a6gas6] {
    color: var(--acv-primary);
    font-size: 1.1rem;
}

.card-body[b-loz0a6gas6] {
    padding: 1.5rem;
}

/* Header Section */
.exam-form-header[b-loz0a6gas6] {
    background: #ffffff;
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-content[b-loz0a6gas6] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-icon[b-loz0a6gas6] {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.5rem;
}

.header-text[b-loz0a6gas6] {
    flex: 1;
}

.header-title[b-loz0a6gas6] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #2d3748;
    margin: 0 0 0.5rem 0;
}

/* Header Actions */
.header-actions[b-loz0a6gas6] {
    display: flex;
    gap: 1rem;
}

.btn[b-loz0a6gas6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
    text-decoration: none;
    border: 1px solid;
    cursor: pointer;
}

.btn.secondary[b-loz0a6gas6] {
    background: #ffffff;
    color: #718096;
    border: 2px solid #e2e8f0;
}

.btn.secondary:hover[b-loz0a6gas6] {
    background: #f7fafc;
    border-color: #cbd5e0;
    transform: translateY(-1px);
    text-decoration: none;
    color: #718096;
}

.btn.primary[b-loz0a6gas6] {
    background: var(--acv-primary);
    color: #ffffff;
    border: 2px solid var(--acv-primary);
}

.btn.primary:hover[b-loz0a6gas6] {
    background: var(--acv-primary-700);
    border-color: var(--acv-primary-700);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
    text-decoration: none;
    color: #ffffff;
}

/* Feedback Validation Alert */
.feedback-validation-alert[b-loz0a6gas6] {
    margin-top: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    animation: slideDown-b-loz0a6gas6 0.3s ease-out;
}

/* Loading State */
.feedback-validation-alert.loading[b-loz0a6gas6] {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #0ea5e9;
}

.feedback-validation-alert.loading .feedback-validation-icon[b-loz0a6gas6] {
    background: #0ea5e9;
    color: white;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);
}

.feedback-validation-alert.loading .feedback-validation-title[b-loz0a6gas6] {
    color: #0369a1;
}

.feedback-validation-alert.loading .feedback-validation-message[b-loz0a6gas6] {
    color: #0369a1;
    opacity: 0.9;
}

/* Success State */
.feedback-validation-alert.success[b-loz0a6gas6] {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #10b981;
}

.feedback-validation-alert.success .feedback-validation-icon[b-loz0a6gas6] {
    background: #10b981;
    color: white;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.feedback-validation-alert.success .feedback-validation-title[b-loz0a6gas6] {
    color: #047857;
}

.feedback-validation-alert.success .feedback-validation-message[b-loz0a6gas6] {
    color: #047857;
    opacity: 0.9;
}

.feedback-validation-alert.success .feedback-validation-message strong[b-loz0a6gas6] {
    color: #047857;
    font-weight: 600;
}

/* Error State */
.feedback-validation-alert.error[b-loz0a6gas6] {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 1px solid #ef4444;
    margin-bottom: 1rem;
}

.feedback-validation-alert.error .feedback-validation-icon[b-loz0a6gas6] {
    background: #ef4444;
    color: white;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.feedback-validation-alert.error .feedback-validation-title[b-loz0a6gas6] {
    color: #dc2626;
}

.feedback-validation-alert.error .feedback-validation-message[b-loz0a6gas6] {
    color: #dc2626;
    opacity: 0.9;
}

.feedback-validation-alert.error .feedback-validation-message strong[b-loz0a6gas6] {
    color: #dc2626;
    font-weight: 600;
}

.feedback-validation-icon[b-loz0a6gas6] {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.feedback-validation-content[b-loz0a6gas6] {
    flex: 1;
    min-width: 0;
}

.feedback-validation-header[b-loz0a6gas6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
}

.feedback-validation-text[b-loz0a6gas6] {
    flex: 1;
    min-width: 0;
}

.feedback-validation-title[b-loz0a6gas6] {
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.feedback-validation-message[b-loz0a6gas6] {
    font-size: 0.875rem;
    line-height: 1.5;
}

.btn-feedback-link[b-loz0a6gas6] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: #ef4444;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
    white-space: nowrap;
    flex-shrink: 0;
    height: fit-content;
}

.btn-feedback-link:hover[b-loz0a6gas6] {
    background: #dc2626;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3);
    color: white;
    text-decoration: none;
}

.btn-feedback-link i[b-loz0a6gas6] {
    font-size: 0.75rem;
}

@keyframes slideDown-b-loz0a6gas6 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* _content/ltia.portal.web/Components/Exams/Admin/Pages/Exams/Details.razor.rz.scp.css */
/* Exam Details Page - Based on Instructor/Subject Design */
.exam-details-page[b-6d0yn9smim] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;

    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Header Section */
.exam-details-header[b-6d0yn9smim] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-content[b-6d0yn9smim] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-icon[b-6d0yn9smim] {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.5rem;
}

.header-text[b-6d0yn9smim] {
    flex: 1;
}

.header-title[b-6d0yn9smim] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #2d3748;
    margin: 0 0 0.5rem 0;
}

.header-subtitle[b-6d0yn9smim] {
    font-size: 1rem;
    color: #718096;
    margin: 0;
}


.btn[b-6d0yn9smim] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
    text-decoration: none;
    border: 1px solid;
    cursor: pointer;
}

.btn.secondary[b-6d0yn9smim] {
    background: #ffffff;
    color: #718096;
    border: 2px solid #e2e8f0;
}

.btn.secondary:hover[b-6d0yn9smim] {
    background: #f7fafc;
    border-color: #cbd5e0;
    transform: translateY(-1px);
    text-decoration: none;
    color: #718096;
}

.btn.primary[b-6d0yn9smim] {
    background: var(--acv-primary);
    color: #ffffff;
    border: 2px solid var(--acv-primary);
}

.btn.primary:hover[b-6d0yn9smim] {
    background: var(--acv-primary-700);
    border-color: var(--acv-primary-700);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
    text-decoration: none;
    color: #ffffff;
}

/* Loading & Error States */
.loading-container[b-6d0yn9smim],
.error-state[b-6d0yn9smim],
.empty-state[b-6d0yn9smim] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
    background: var(--acv-white);
    border-radius: 16px;
    padding: 3rem 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.loading-container .spinner-border[b-6d0yn9smim] {
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
}

.loading-container p[b-6d0yn9smim] {
    color: #718096;
    font-size: 1.1rem;
    margin: 0;
}

.error-icon[b-6d0yn9smim],
.empty-state-icon[b-6d0yn9smim] {
    font-size: 4rem;
    margin-bottom: 1.5rem;
}

.error-icon[b-6d0yn9smim] {
    color: #e53e3e;
}

.empty-state-icon[b-6d0yn9smim] {
    color: var(--gray-400);
}

.error-state h3[b-6d0yn9smim],
.empty-state h3[b-6d0yn9smim] {
    color: #2d3748;
    margin-bottom: 1rem;
}

.error-state p[b-6d0yn9smim],
.empty-state p[b-6d0yn9smim] {
    color: #718096;
    margin-bottom: 2rem;
}

/* Exam Info Card */
.exam-info-card[b-6d0yn9smim] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.exam-info-header[b-6d0yn9smim] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
}

.exam-title-section[b-6d0yn9smim] {
    flex: 1;
}

.exam-subject[b-6d0yn9smim] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: 1rem;
}

.exam-meta[b-6d0yn9smim] {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.meta-item[b-6d0yn9smim] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--gray-600);
}

.meta-item i[b-6d0yn9smim] {
    color: var(--acv-primary);
    width: 16px;
}

.exam-status-section[b-6d0yn9smim] {
    flex-shrink: 0;
}

.status-badge[b-6d0yn9smim] {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.status-badge.active[b-6d0yn9smim] {
    background: linear-gradient(135deg, var(--success-main) 0%, var(--success-dark) 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(0, 200, 83, 0.3);
}

.status-badge.pending[b-6d0yn9smim] {
    background: linear-gradient(135deg, var(--warning-main) 0%, var(--warning-dark) 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(255, 171, 0, 0.3);
}

.status-badge.ended[b-6d0yn9smim] {
    background: linear-gradient(135deg, var(--gray-500) 0%, var(--gray-600) 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(107, 114, 128, 0.3);
}

/* Details Grid */
.details-grid[b-6d0yn9smim] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

/* Details Cards */
.details-card[b-6d0yn9smim] {
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    overflow: hidden;
    transition: all 0.2s ease;
}

.details-card:hover[b-6d0yn9smim] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.details-card.highlight[b-6d0yn9smim] {
    /* border-color: var(--acv-primary); */
    box-shadow: 0 4px 6px -1px rgba(33, 76, 166, 0.1), 0 2px 4px -1px rgba(33, 76, 166, 0.06);
}

.card-header[b-6d0yn9smim] {
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--acv-white) 100%);
    padding: 1.5rem;
    border-bottom: 1px solid var(--gray-200);
    position: relative;
}

.card-header[b-6d0yn9smim]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
}

.card-header h3[b-6d0yn9smim] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.card-header h3 i[b-6d0yn9smim] {
    color: var(--acv-primary);
    font-size: 1.1rem;
}

.card-body[b-6d0yn9smim] {
    padding: 1.5rem;
}

/* Info Grid */
.info-grid[b-6d0yn9smim] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.info-item[b-6d0yn9smim] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
}

/* Chỉ hiển thị border-bottom cho các item ở 2 hàng đầu (4 item đầu tiên) */
.info-item:nth-child(-n+4)[b-6d0yn9smim] {
    border-bottom: 1px solid var(--gray-200);
}

.info-label[b-6d0yn9smim] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    color: var(--gray-600);
    font-size: 0.95rem;
}

.info-label i[b-6d0yn9smim] {
    color: var(--acv-primary);
    width: 16px;
}

.info-value[b-6d0yn9smim] {
    font-weight: 600;
    color: var(--gray-800);
    font-size: 0.95rem;
}

/* Instructor Section */
.instructor-info[b-6d0yn9smim] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--gray-50);
    border-radius: 12px;
    border: 1px solid var(--gray-200);
}

.instructor-avatar[b-6d0yn9smim] {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.instructor-details[b-6d0yn9smim] {
    flex: 1;
}

.instructor-details h4[b-6d0yn9smim] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0 0 0.25rem 0;
}

.instructor-code[b-6d0yn9smim] {
    font-size: 0.9rem;
    color: var(--gray-600);
    margin: 0 0 0.75rem 0;
}

.instructor-contact[b-6d0yn9smim] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.contact-item[b-6d0yn9smim] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--gray-600);
}

.contact-item i[b-6d0yn9smim] {
    width: 14px;
    color: var(--gray-400);
}

/* Students Card */
.students-card[b-6d0yn9smim] {
    grid-column: 1 / -1;
}

.students-card .card-header[b-6d0yn9smim] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.count-badge[b-6d0yn9smim] {
    background: var(--acv-primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Table Styles */
.table-responsive[b-6d0yn9smim] {
    overflow-x: auto;
}

.table[b-6d0yn9smim] {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.table thead th[b-6d0yn9smim] {
    background: var(--gray-50);
    color: var(--gray-700);
    font-weight: 600;
    font-size: 0.875rem;
    padding: 1rem;
    text-align: left;
    border-bottom: 2px solid var(--gray-200);
}

.table tbody td[b-6d0yn9smim] {
    padding: 1rem;
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.875rem;
    color: var(--gray-800);
}

.table tbody tr:hover[b-6d0yn9smim] {
    background: var(--gray-50);
}

/* Empty State Compact */
.empty-state.compact[b-6d0yn9smim] {
    padding: 2rem;
    min-height: auto;
}

.empty-state.compact h4[b-6d0yn9smim] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-700);
    margin: 0 0 0.5rem 0;
}

.empty-state.compact p[b-6d0yn9smim] {
    font-size: 0.9rem;
    color: var(--gray-600);
    margin: 0;
}

/* Schedule Card */
.schedule-grid[b-6d0yn9smim] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.schedule-item[b-6d0yn9smim] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--gray-50);
    border-radius: 8px;
    border: 1px solid var(--gray-200);
}

.schedule-label[b-6d0yn9smim] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.schedule-value[b-6d0yn9smim] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gray-800);
}

/* Instructor Card */
.instructor-profile[b-6d0yn9smim] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--gray-50);
    border-radius: 12px;
    border: 1px solid var(--gray-200);
}

.instructor-avatar[b-6d0yn9smim] {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.instructor-info[b-6d0yn9smim] {
    flex: 1;
}

.instructor-name[b-6d0yn9smim] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0 0 0.25rem 0;
}

.instructor-code[b-6d0yn9smim] {
    font-size: 0.85rem;
    color: var(--gray-600);
    margin: 0;
}

/* Students List */
.students-list[b-6d0yn9smim] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.student-item[b-6d0yn9smim] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.student-item:hover[b-6d0yn9smim] {
    background: var(--gray-100);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.student-info[b-6d0yn9smim] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.student-avatar[b-6d0yn9smim] {
    width: 40px;
    height: 40px;
    background: var(--acv-white);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-primary);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.student-details[b-6d0yn9smim] {
    flex: 1;
}

.student-name[b-6d0yn9smim] {
    font-weight: 500;
    color: var(--gray-900);
    font-size: 0.95rem;
}

.student-code[b-6d0yn9smim] {
    font-size: 0.825rem;
    color: var(--gray-600);
    margin-top: 0.125rem;
}

.student-actions[b-6d0yn9smim] {
    display: flex;
    gap: 0.5rem;
}

.student-actions .action-btn[b-6d0yn9smim] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--acv-white);
    color: var(--acv-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.student-actions .action-btn:hover[b-6d0yn9smim] {
    background: var(--acv-primary);
    color: var(--acv-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(33, 76, 166, 0.3);
}

.no-students-message[b-6d0yn9smim] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
    background: var(--gray-50);
    border-radius: 12px;
}

.no-students-message i[b-6d0yn9smim] {
    font-size: 3rem;
    color: var(--gray-300);
    margin-bottom: 1rem;
}

.no-students-message h5[b-6d0yn9smim] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-700);
    margin: 0 0 0.5rem 0;
}

.no-students-message p[b-6d0yn9smim] {
    font-size: 0.95rem;
    color: var(--gray-600);
    margin: 0;
}

/* Form Actions */
.form-actions[b-6d0yn9smim] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-200);
    flex-wrap: wrap;
}

.btn-primary[b-6d0yn9smim],
.btn-secondary[b-6d0yn9smim],
.btn-danger[b-6d0yn9smim] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    border: none;
    min-width: 160px;
    justify-content: center;
}

.btn-primary[b-6d0yn9smim] {
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.15);
}

.btn-primary:hover[b-6d0yn9smim] {
    background: linear-gradient(135deg, var(--acv-primary-700) 0%, var(--acv-primary-800) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.25);
    text-decoration: none;
    color: var(--acv-white);
}

.btn-secondary[b-6d0yn9smim] {
    background: var(--acv-white);
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.btn-secondary:hover[b-6d0yn9smim] {
    background: var(--gray-50);
    border-color: var(--gray-400);
    transform: translateY(-1px);
    color: var(--gray-800);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-danger[b-6d0yn9smim] {
    background: linear-gradient(135deg, #ff5630 0%, #ff8a65 100%);
    color: var(--acv-white);
    box-shadow: 0 2px 8px rgba(255, 86, 48, 0.25);
}

.btn-danger:hover[b-6d0yn9smim] {
    background: linear-gradient(135deg, #e53e3e 0%, #ff6b47 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 86, 48, 0.35);
}

/* Responsive Design */
@media (max-width: 768px) {
    .exam-details-page[b-6d0yn9smim] {
        padding: 0.5rem 1rem;
    }
    
    .exam-details-header[b-6d0yn9smim] {
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
    }
    
    .header-content[b-6d0yn9smim] {
        justify-content: center;
    }
    
    .exam-info-header[b-6d0yn9smim] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    
    .exam-meta[b-6d0yn9smim] {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .details-grid[b-6d0yn9smim] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .info-grid[b-6d0yn9smim] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .instructor-info[b-6d0yn9smim] {
        flex-direction: column;
        text-align: center;
    }
    
    .table-responsive[b-6d0yn9smim] {
        font-size: 0.8rem;
    }
    
    .table thead th[b-6d0yn9smim],
    .table tbody td[b-6d0yn9smim] {
        padding: 0.75rem 0.5rem;
    }

    .form-actions[b-6d0yn9smim] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .btn-primary[b-6d0yn9smim],
    .btn-secondary[b-6d0yn9smim],
    .btn-danger[b-6d0yn9smim] {
        min-width: 100%;
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .header-title[b-6d0yn9smim] {
        font-size: 1.5rem;
    }
    
    .exam-subject[b-6d0yn9smim] {
        font-size: 1.1rem;
    }
    
    .card-header h3[b-6d0yn9smim] {
        font-size: 1.1rem;
    }
    
    .btn[b-6d0yn9smim] {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }
}
/* _content/ltia.portal.web/Components/Exams/Admin/Pages/Exams/Edit.razor.rz.scp.css */
/* Exam Form Page - Based on Instructor Create Design */
.exam-form-page[b-xlwjzjw65s] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;

    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Main Layout */
.main-content-container[b-xlwjzjw65s] {
    display: flex;
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.form-column[b-xlwjzjw65s] {
    flex: 2;
    background: white;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.preview-column[b-xlwjzjw65s] {
    flex: 1;
    min-width: 300px;
}

/* Form Sections */
.form-section[b-xlwjzjw65s] {
    margin-bottom: 32px;
}

.section-header[b-xlwjzjw65s] {
    margin-bottom: 20px;
}

.section-title[b-xlwjzjw65s] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 700;
    color: #2d3748;
    margin: 0;
}

.section-title i[b-xlwjzjw65s] {
    color: var(--acv-primary);
    font-size: 16px;
}

.form-grid[b-xlwjzjw65s] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group-full-width[b-xlwjzjw65s] {
    grid-column: 1 / -1; /* Span full width across all columns */
}

/* Form Controls */
.form-control[b-xlwjzjw65s] {
    width: 100%;
    padding: 0.875rem;
    border: 1px solid #9ca3af;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--acv-white);
    margin-bottom: 0.5rem;
}

.form-control:focus[b-xlwjzjw65s] {
    outline: none;
    border-color: #214ca6;
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.form-control:disabled[b-xlwjzjw65s] {
    background: var(--gray-100);
    color: var(--gray-500);
    cursor: not-allowed;
}

.form-select[b-xlwjzjw65s] {
    width: 100%;
    padding: 0.875rem;
    border: 1px solid #9ca3af;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--acv-white);
    cursor: pointer;
}

.form-select:focus[b-xlwjzjw65s] {
    outline: none;
    border-color: #214ca6;
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.form-label[b-xlwjzjw65s] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.form-label i[b-xlwjzjw65s] {
    color: var(--acv-primary);
    font-size: 0.9rem;
    width: 16px;
}

.form-text[b-xlwjzjw65s] {
    font-size: 0.85rem;
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.form-text i[b-xlwjzjw65s] {
    font-size: 0.8rem;
    color: inherit;
}

.text-success[b-xlwjzjw65s] {
    color: var(--success-dark) !important;
}

.text-danger[b-xlwjzjw65s] {
    color: var(--error-dark) !important;
}

.text-muted[b-xlwjzjw65s] {
    color: var(--gray-500) !important;
}

/* Input Group */
.input-group[b-xlwjzjw65s] {
    display: flex;
    align-items: stretch;
}

.input-group .form-control[b-xlwjzjw65s] {
    flex: 1;
    border-radius: 0;
    border-right: 1px solid #9ca3af;
}

.input-group .form-control:first-child[b-xlwjzjw65s] {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-right: 1px solid #9ca3af;
}

.input-group .form-control:last-child[b-xlwjzjw65s] {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-left: 1px solid #9ca3af;
}

.input-group .form-control:focus[b-xlwjzjw65s] {
    border-color: #214ca6;
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.input-group-text[b-xlwjzjw65s] {
    display: flex;
    align-items: center;
    padding: 0.875rem;
    background-color: var(--gray-50);
    border: 1px solid #9ca3af;
    border-left: none;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    font-size: 0.95rem;
    color: var(--gray-700);
}

.input-group .btn-outline-secondary[b-xlwjzjw65s] {
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
    border-width: 1px;
    height: 100%;
    align-items: center;
    display: flex;
    border-radius: 0 8px 8px 0;
    min-height: calc(0.95rem * 1.5 + 0.875rem * 2 + 2px); /* Match input height: font-size * line-height + padding * 2 + border */
    box-sizing: border-box;
}

.btn-outline-secondary[b-xlwjzjw65s],
.btn-outline-primary[b-xlwjzjw65s] {
    padding: 0.75rem 1rem;
    border: 2px solid;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-outline-secondary[b-xlwjzjw65s] {
    background: var(--acv-white);
    color: var(--gray-600);
    border-color: var(--gray-300);
}

.btn-outline-secondary:hover[b-xlwjzjw65s] {
    background: var(--gray-50);
    border-color: var(--gray-400);
}

.btn-outline-primary[b-xlwjzjw65s] {
    background: var(--acv-white);
    color: var(--acv-primary);
    border-color: var(--acv-primary);
}

.btn-outline-primary:hover[b-xlwjzjw65s] {
    background: var(--acv-primary-lighter);
    border-color: var(--acv-primary-700);
}

.btn-outline-primary:disabled[b-xlwjzjw65s] {
    background: var(--gray-100);
    color: var(--gray-400);
    border-color: var(--gray-300);
    cursor: not-allowed;
}

/* Table Styles */
.table-responsive[b-xlwjzjw65s] {
    overflow-x: auto;
    margin-top: 1rem;
}

.table[b-xlwjzjw65s] {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.table thead th[b-xlwjzjw65s] {
    background: var(--gray-50);
    color: var(--gray-700);
    font-weight: 600;
    font-size: 0.875rem;
    padding: 1rem;
    text-align: left;
    border-bottom: 2px solid var(--gray-200);
}

.table tbody td[b-xlwjzjw65s] {
    padding: 1rem;
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.875rem;
    color: var(--gray-800);
}

.table tbody tr:hover[b-xlwjzjw65s] {
    background: var(--gray-50);
}

/* Small Button Styles */
.btn-sm[b-xlwjzjw65s] {
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    min-width: auto;
}

.btn-sm.btn-outline-secondary[b-xlwjzjw65s] {
    background: var(--acv-white);
    color: var(--gray-600);
    border-color: var(--gray-300);
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
}

.btn-sm.btn-outline-secondary:hover[b-xlwjzjw65s] {
    background: var(--gray-50);
    border-color: var(--gray-400);
}

.btn-outline-danger[b-xlwjzjw65s] {
    background: var(--acv-white);
    color: var(--error-dark);
    border: 1px solid var(--error-dark);
}

.btn-outline-danger:hover[b-xlwjzjw65s] {
    background: var(--error-dark);
    color: var(--acv-white);
}

.text-center[b-xlwjzjw65s] {
    text-align: center;
}

.text-nowrap[b-xlwjzjw65s] {
    white-space: nowrap;
}

/* Alert */
.alert[b-xlwjzjw65s] {
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin: 1rem 0;
    border: 1px solid;
}

.alert-secondary[b-xlwjzjw65s] {
    background: var(--gray-50);
    color: var(--gray-700);
    border-color: var(--gray-200);
}

/* Input with Validation */
.input-with-validation[b-xlwjzjw65s] {
    position: relative;
}

.form-input[b-xlwjzjw65s] {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s ease;
    background: white;
}

.form-input:focus[b-xlwjzjw65s] {
    outline: none;
    border-color: var(--acv-primary);
    border-width: 1px;
    box-shadow: 0 0 0 2px rgba(33, 76, 166, 0.15);
}

.validation-icon[b-xlwjzjw65s] {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
}

.validation-icon.loading[b-xlwjzjw65s] {
    color: var(--acv-primary);
    animation: pulse-b-xlwjzjw65s 1.5s ease-in-out infinite;
}

.validation-icon.success[b-xlwjzjw65s] {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.validation-icon.error[b-xlwjzjw65s] {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

@keyframes pulse-b-xlwjzjw65s {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Slug Validation Message */
.slug-status-message[b-xlwjzjw65s] {
    margin-top: 16px;
    padding: 16px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 16px;
    animation: slideDown-b-xlwjzjw65s 0.3s ease-out;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

@keyframes slideDown-b-xlwjzjw65s {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slug-status-message.loading[b-xlwjzjw65s] {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #0ea5e9;
}

.slug-status-message.success[b-xlwjzjw65s] {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #10b981;
}

.slug-status-message.error[b-xlwjzjw65s] {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 1px solid #ef4444;
}

.status-icon[b-xlwjzjw65s] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.slug-status-message.loading .status-icon[b-xlwjzjw65s] {
    background: #0ea5e9;
    color: white;
}

.slug-status-message.success .status-icon[b-xlwjzjw65s] {
    background: #10b981;
    color: white;
}

.slug-status-message.error .status-icon[b-xlwjzjw65s] {
    background: #ef4444;
    color: white;
}

.status-content[b-xlwjzjw65s] {
    flex: 1;
    min-width: 0;
}

.status-title[b-xlwjzjw65s] {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    line-height: 1.4;
}

.slug-status-message.loading .status-title[b-xlwjzjw65s] {
    color: #0369a1;
}

.slug-status-message.success .status-title[b-xlwjzjw65s] {
    color: #047857;
}

.slug-status-message.error .status-title[b-xlwjzjw65s] {
    color: #dc2626;
}

.status-subtitle[b-xlwjzjw65s] {
    font-size: 14px;
    font-weight: 500;
    opacity: 0.8;
    line-height: 1.4;
}

.slug-status-message.loading .status-subtitle[b-xlwjzjw65s] {
    color: #0369a1;
}

.slug-status-message.success .status-subtitle[b-xlwjzjw65s] {
    color: #047857;
}

.slug-status-message.error .status-subtitle[b-xlwjzjw65s] {
    color: #dc2626;
}

/* Textarea */
.form-textarea[b-xlwjzjw65s] {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    resize: vertical;
    min-height: 100px;
    transition: all 0.2s ease;
    font-family: inherit;
}

.form-textarea:focus[b-xlwjzjw65s] {
    outline: none;
    border-color: var(--acv-primary);
    border-width: 1px;
    box-shadow: 0 0 0 2px rgba(33, 76, 166, 0.15);
}

.form-hint[b-xlwjzjw65s] {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
}

/* Subject Select Container */
.subject-select-container[b-xlwjzjw65s] {
    position: relative;
}

.subject-select-wrapper[b-xlwjzjw65s] {
    position: relative;
}

.selected-subjects[b-xlwjzjw65s] {
    min-height: 48px;
    padding: 8px 12px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff !important;
    color: #374151;
}

.selected-subjects:hover[b-xlwjzjw65s] {
    border-color: var(--acv-primary);
    border-width: 1px;
}

.selected-subjects:focus-within[b-xlwjzjw65s] {
    border-color: var(--acv-primary);
    border-width: 1px;
    box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.2);
}

.selected-items[b-xlwjzjw65s] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
}

.selected-item[b-xlwjzjw65s] {
    display: flex;
    align-items: center;
    background: #e6f3ff;
    border: 1px solid var(--acv-primary);
    border-radius: 20px;
    padding: 4px 8px;
    font-size: 13px;
    color: #1a3d8a;
    transition: all 0.2s ease;
}

.selected-item:hover[b-xlwjzjw65s] {
    background: #bfdbfe;
}

.remove-btn[b-xlwjzjw65s] {
    background: none;
    border: none;
    color: #1a3d8a;
    cursor: pointer;
    padding: 2px;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    margin-left: 4px;
}

.remove-btn:hover[b-xlwjzjw65s] {
    background: var(--acv-primary);
    color: white;
}

.placeholder[b-xlwjzjw65s] {
    color: #9ca3af !important;
    font-style: italic;
    font-size: 14px;
    font-weight: 400;
    flex: 1;
    background-color: transparent !important;
}

.dropdown-icon[b-xlwjzjw65s] {
    color: #6b7280;
    transition: transform 0.2s ease;
    margin-left: 8px;
}

.dropdown-icon.rotated[b-xlwjzjw65s] {
    transform: rotate(180deg);
}

/* Subject Dropdown */
.subject-dropdown[b-xlwjzjw65s] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 2px solid #e5e7eb;
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 50;
    max-height: 300px;
    overflow-y: auto;
}

.dropdown-search[b-xlwjzjw65s] {
    padding: 12px;
    border-bottom: 1px solid #e5e7eb;
    position: relative;
}

.search-icon[b-xlwjzjw65s] {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    font-size: 14px;
}

.search-input[b-xlwjzjw65s] {
    width: 100%;
    padding: 8px 8px 8px 32px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.search-input:focus[b-xlwjzjw65s] {
    outline: none;
    border-color: var(--acv-primary);
    border-width: 1px;
    box-shadow: 0 0 0 2px rgba(33, 76, 166, 0.15);
}

.dropdown-options[b-xlwjzjw65s] {
    padding: 8px 0;
}

.dropdown-option[b-xlwjzjw65s] {
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dropdown-option:hover[b-xlwjzjw65s] {
    background: #f3f4f6;
}

.option-name[b-xlwjzjw65s] {
    font-weight: 500;
    color: #374151;
}

.option-code[b-xlwjzjw65s] {
    font-size: 12px;
    color: #6b7280;
    background: #f3f4f6;
    padding: 2px 8px;
    border-radius: 12px;
}

/* Giảm height của dropdown option trong SelectSearch */
[b-xlwjzjw65s] .select-search-item {
    padding: 0.625rem 1rem !important; /* Giảm padding để giảm height */
}

[b-xlwjzjw65s] .dropdown-option {
    padding: 0.5rem 0.75rem !important; /* Giảm padding của option */
    min-height: auto !important;
}

[b-xlwjzjw65s] .option-name {
    font-size: 0.875rem !important; /* Giảm font-size */
    line-height: 1.35 !important;
}

[b-xlwjzjw65s] .option-code {
    font-size: 0.75rem !important; /* Giảm font-size của badge */
    padding: 0.125rem 0.5rem !important; /* Giảm padding */
}

.no-results[b-xlwjzjw65s] {
    padding: 20px;
    text-align: center;
    color: #6b7280;
    font-style: italic;
}

.no-results i[b-xlwjzjw65s] {
    font-size: 24px;
    margin-bottom: 8px;
    display: block;
}

.search-prompt[b-xlwjzjw65s] {
    padding: 20px;
    text-align: center;
    color: #9ca3af;
    font-style: italic;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: #f8f9fa;
    border-radius: 8px;
    margin: 8px;
}

.search-prompt i[b-xlwjzjw65s] {
    font-size: 28px;
    opacity: 0.6;
}

.search-prompt span[b-xlwjzjw65s] {
    font-size: 14px;
    font-weight: 500;
}

/* Instructor Select Container */
.instructor-select-container[b-xlwjzjw65s] {
    position: relative;
}

.instructor-select-wrapper[b-xlwjzjw65s] {
    position: relative;
}

.selected-instructor[b-xlwjzjw65s] {
    min-height: 48px;
    padding: 8px 12px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff !important;
    color: #374151;
}

.selected-instructor:hover[b-xlwjzjw65s] {
    border-color: var(--acv-primary);
    border-width: 1px;
}

.selected-instructor:focus-within[b-xlwjzjw65s] {
    border-color: var(--acv-primary);
    border-width: 1px;
    box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.2);
}

.selected-instructor-item[b-xlwjzjw65s] {
    display: flex;
    align-items: center;
    background: #e6f3ff;
    border: 1px solid var(--acv-primary);
    border-radius: 20px;
    padding: 4px 8px;
    font-size: 13px;
    color: #1a3d8a;
    transition: all 0.2s ease;
}

.selected-instructor-item:hover[b-xlwjzjw65s] {
    background: #bfdbfe;
}

/* Student Management */
.student-management[b-xlwjzjw65s] {
    margin-top: 1rem;
}

.student-input-container[b-xlwjzjw65s] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.student-input[b-xlwjzjw65s] {
    flex: 1;
    padding: 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.875rem;
}

.student-input:focus[b-xlwjzjw65s] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 2px rgba(33, 76, 166, 0.1);
}

.add-student-btn[b-xlwjzjw65s] {
    padding: 0.75rem 1rem;
    background: var(--acv-primary);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    font-weight: 500;
}

.add-student-btn:hover[b-xlwjzjw65s] {
    background: var(--acv-primary-700);
    transform: translateY(-1px);
}

.add-student-btn:disabled[b-xlwjzjw65s] {
    background: var(--gray-400);
    cursor: not-allowed;
    transform: none;
}

.students-list[b-xlwjzjw65s] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 200px;
    overflow-y: auto;
    padding: 0.5rem;
    background: var(--gray-50);
    border-radius: 8px;
}

.student-item[b-xlwjzjw65s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.student-item:hover[b-xlwjzjw65s] {
    background: var(--gray-50);
    border-color: var(--acv-primary);
}

.student-info[b-xlwjzjw65s] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.student-code[b-xlwjzjw65s] {
    font-weight: 600;
    color: var(--gray-800);
    font-size: 0.875rem;
}

.student-name[b-xlwjzjw65s] {
    color: var(--gray-600);
    font-size: 0.8rem;
}

.remove-student-btn[b-xlwjzjw65s] {
    background: var(--error-lighter);
    color: var(--error-dark);
    border: none;
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.75rem;
}

.remove-student-btn:hover[b-xlwjzjw65s] {
    background: var(--error-main);
    color: white;
}

/* Preview Card */
.preview-card[b-xlwjzjw65s] {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    height: fit-content;
    position: sticky;
    top: 20px;
}

.preview-header[b-xlwjzjw65s] {
    text-align: center;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e7eb;
}

.preview-icon[b-xlwjzjw65s] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: white;
    font-size: 32px;
}

.preview-title[b-xlwjzjw65s] {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 4px 0;
}

.preview-subtitle[b-xlwjzjw65s] {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

.preview-details[b-xlwjzjw65s] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.detail-item[b-xlwjzjw65s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #e5e7eb;
}

.detail-item:last-child[b-xlwjzjw65s] {
    border-bottom: none;
}

.detail-label[b-xlwjzjw65s] {
    font-weight: 600;
    color: #111827;
    font-size: 14px;
}

.detail-value[b-xlwjzjw65s] {
    color: #111827;
    font-size: 14px;
    text-align: right;
    max-width: 60%;
    word-wrap: break-word;
}

/* Form Actions */
.form-actions[b-xlwjzjw65s] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-200);
    flex-wrap: wrap;
}

.btn-primary[b-xlwjzjw65s],
.btn-secondary[b-xlwjzjw65s],
.btn-danger[b-xlwjzjw65s] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    border: none;
    min-width: 160px;
    justify-content: center;
}

.btn-primary[b-xlwjzjw65s] {
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.15);
}

.btn-primary:hover[b-xlwjzjw65s] {
    background: linear-gradient(135deg, var(--acv-primary-700) 0%, var(--acv-primary-800) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.25);
    text-decoration: none;
    color: var(--acv-white);
}

.btn-primary:disabled[b-xlwjzjw65s] {
    background: var(--gray-400);
    border-color: var(--gray-400);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-primary:disabled:hover[b-xlwjzjw65s] {
    background: var(--gray-400);
    border-color: var(--gray-400);
    transform: none;
    box-shadow: none;
}

.btn-secondary[b-xlwjzjw65s] {
    background: var(--acv-white);
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.btn-secondary:hover[b-xlwjzjw65s] {
    background: var(--gray-50);
    border-color: var(--gray-400);
    transform: translateY(-1px);
    color: var(--gray-800);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-danger[b-xlwjzjw65s] {
    background: linear-gradient(135deg, #ff5630 0%, #ff8a65 100%);
    color: var(--acv-white);
    box-shadow: 0 2px 8px rgba(255, 86, 48, 0.25);
}

.btn-danger:hover[b-xlwjzjw65s] {
    background: linear-gradient(135deg, #e53e3e 0%, #ff6b47 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 86, 48, 0.35);
}

/* Subject Display Card */
.subject-display-card[b-xlwjzjw65s] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border-top: 4px solid #214ca6;
}

.subject-card-icon[b-xlwjzjw65s] {
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%);
    border-radius: 10px;
    color: #ffffff;
    font-size: 1.25rem;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
}

.subject-card-content[b-xlwjzjw65s] {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
}

.subject-card-title[b-xlwjzjw65s] {
    font-size: 1.0625rem;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.5;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.subject-card-badge[b-xlwjzjw65s] {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%);
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(33, 76, 166, 0.2);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Instructor input với icons bên trong */
.instructor-input-wrapper[b-xlwjzjw65s] {
    position: relative;
}

.instructor-search-input[b-xlwjzjw65s] {
    padding-right: 80px; /* Tạo khoảng trống cho icons bên phải */
}

.instructor-input-icons[b-xlwjzjw65s] {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding-right: 0.5rem;
    pointer-events: none; /* Cho phép click xuyên qua đến input */
}

.instructor-input-icons button[b-xlwjzjw65s] {
    pointer-events: auto; /* Bật lại click cho buttons */
    background: transparent;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    transition: color 0.2s ease;
}

.instructor-input-icons button:hover[b-xlwjzjw65s] {
    color: #214ca6;
}

.instructor-dropdown-btn i[b-xlwjzjw65s] {
    font-size: 0.875rem;
}

.instructor-dropdown-icon-container[b-xlwjzjw65s] {
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.instructor-dropdown-icon[b-xlwjzjw65s] {
    transition: transform 0.2s ease;
    font-size: 0.875rem;
    color: #6b7280;
}

.instructor-dropdown-icon.rotated[b-xlwjzjw65s] {
    transform: rotate(180deg);
}

.instructor-clear-btn i[b-xlwjzjw65s] {
    font-size: 0.875rem;
}

/* Instructor dropdown menu */
.instructor-dropdown[b-xlwjzjw65s] {
    z-index: 1050;
    max-height: calc(4 * 70px); /* 4 items với height ~70px mỗi item */
    overflow-y: auto;
    top: 100%;
    margin-top: 0.375rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.instructor-dropdown-items[b-xlwjzjw65s] {
    display: flex;
    flex-direction: column;
}

/* Instructor dropdown item */
.instructor-item[b-xlwjzjw65s] {
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background-color 150ms ease, box-shadow 150ms ease;
    border-bottom: 1px solid #f3f4f6;
    background: #ffffff;
    will-change: background-color, box-shadow;
    min-height: 60px;
    display: flex;
    align-items: center;
}

.instructor-item:last-child[b-xlwjzjw65s] {
    border-bottom: none;
}

.instructor-item:hover[b-xlwjzjw65s] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    /* Use inset shadow instead of border/padding changes to avoid layout shift */
    box-shadow: inset 3px 0 0 0 #214ca6;
}

.instructor-item:active[b-xlwjzjw65s] {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    box-shadow: inset 3px 0 0 0 #214ca6;
}

.instructor-item-content[b-xlwjzjw65s] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    width: 100%;
}

.instructor-item-header[b-xlwjzjw65s] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.instructor-name[b-xlwjzjw65s] {
    font-weight: 600;
    font-size: 0.9rem;
    color: #1f2937;
    line-height: 1.4;
}

.instructor-item-details[b-xlwjzjw65s] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.instructor-detail-item[b-xlwjzjw65s] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8rem;
    color: #6b7280;
}

.instructor-detail-item i[b-xlwjzjw65s] {
    color: #9ca3af;
    font-size: 0.7rem;
    width: 14px;
    text-align: center;
}

.instructor-detail-item span[b-xlwjzjw65s] {
    color: #4b5563;
}

/* Loading và empty state */
.instructor-dropdown-loading[b-xlwjzjw65s] {
    padding: 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.instructor-loading-text[b-xlwjzjw65s] {
    color: #6b7280;
    font-size: 0.875rem;
}

.instructor-dropdown-empty[b-xlwjzjw65s] {
    padding: 1.5rem;
    text-align: center;
    color: #9ca3af;
    font-size: 0.875rem;
}

/* Selected instructor card */
.selected-instructor-card[b-xlwjzjw65s] {
    margin-top: 0.875rem;
    background: #ffffff;
    border: 1px solid #d1fae5;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.08);
}

.selected-instructor-header[b-xlwjzjw65s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid #f0fdf4;
}

.selected-instructor-name[b-xlwjzjw65s] {
    font-weight: 600;
    font-size: 1rem;
    color: #10b981;
    line-height: 1.5;
}

.selected-instructor-badge[b-xlwjzjw65s] {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}

.selected-instructor-details[b-xlwjzjw65s] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.selected-instructor-detail[b-xlwjzjw65s] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.5;
}

.selected-instructor-detail i[b-xlwjzjw65s] {
    color: #214ca6;
    font-size: 0.875rem;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.selected-instructor-detail span[b-xlwjzjw65s] {
    color: #4b5563;
}

/* DateTimeInput width adjustment */
.datepicker-col[b-xlwjzjw65s] {
    position: relative;
}

.datepicker-col[b-xlwjzjw65s]  .datetime-input-wrapper {
    min-width: 520px !important; /* Tăng width để vừa khít trang */
    width: 100% !important;
    flex: 1 1 auto !important;
    max-width: 100% !important;
}

.datepicker-col[b-xlwjzjw65s]  .datetime-input {
    width: 100% !important;
    flex: 1 !important;
}

.datepicker-col[b-xlwjzjw65s]  .datetime-input-group-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    display: flex !important;
    gap: 0.5rem !important;
}

/* Number Input Spinner Styles */
.number-input-wrapper[b-xlwjzjw65s] {
    position: relative;
    display: inline-block;
    width: 100%;
}

.number-input-wrapper input[type="number"][b-xlwjzjw65s] {
    padding-right: 2.5rem; /* Space for custom arrows */
    width: 100%;
    /* Hide default browser spinner */
    -moz-appearance: textfield;
}

.number-input-wrapper input[type="number"][b-xlwjzjw65s]::-webkit-inner-spin-button,
.number-input-wrapper input[type="number"][b-xlwjzjw65s]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.number-input-wrapper input[type="number"].is-invalid[b-xlwjzjw65s] {
    padding-right: 4.5rem; /* Extra space for validation icon + spinner */
    background-image: none; /* Disable Bootstrap default validation icon */
}

/* Custom validation icon with Font Awesome */
.number-input-wrapper .validation-icon-error[b-xlwjzjw65s] {
    position: absolute;
    right: 2.5rem; /* Position before spinner */
    top: 50%;
    left: auto;
    width: auto;
    height: auto;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #dc3545;
    font-size: 1rem;
    z-index: 1;
    pointer-events: none;
    margin: 0;
    padding: 0;
    line-height: 0;
}

.number-input-wrapper .validation-icon-error i[b-xlwjzjw65s] {
    font-size: 1rem;
    line-height: 1;
    display: inline-block;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    transform: translateY(-0.25em);
    position: relative;
}

.number-spinner[b-xlwjzjw65s] {
    position: absolute;
    right: 0;
    top: 0;
    width: 2rem;
    height: calc(0.95rem * 1.5 + 0.875rem * 2 + 2px); /* Match input height: font-size * line-height + padding * 2 + border */
    display: flex;
    flex-direction: column;
    background: #f8f9fa;
    border-left: 2px solid #9ca3af;
    border-top: 1px solid #9ca3af;
    border-bottom: 1px solid #9ca3af;
    border-right: 1px solid #9ca3af;
    border-radius: 0 6px 6px 0;
    box-sizing: border-box;
}

.spinner-btn[b-xlwjzjw65s] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #6c757d;
    font-size: 0.7rem;
    font-weight: bold;
    min-height: 0;
    padding: 0;
    height: 50%;
    border-bottom: 1px solid #e5e7eb;
}

.spinner-btn:last-child[b-xlwjzjw65s] {
    border-bottom: none;
}

.spinner-btn .fas[b-xlwjzjw65s] {
    font-size: 0.6rem;
    line-height: 1;
}

.spinner-btn:hover[b-xlwjzjw65s] {
    background: rgba(33, 76, 166, 0.1);
    color: #214ca6;
}

.spinner-btn:active[b-xlwjzjw65s] {
    background: rgba(33, 76, 166, 0.2);
    color: #1e40af;
}

.spinner-btn:focus[b-xlwjzjw65s] {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(33, 76, 166, 0.3);
}

.spinner-btn:disabled[b-xlwjzjw65s] {
    opacity: 0.5;
    cursor: not-allowed;
}

.spinner-btn:disabled:hover[b-xlwjzjw65s] {
    background: transparent;
    color: #6c757d;
}

/* Focus state for number input */
.number-input-wrapper:focus-within .number-spinner[b-xlwjzjw65s] {
    border-left-color: #214ca6;
    background: rgba(33, 76, 166, 0.05);
}

/* Responsive */
@media (max-width: 1024px) {
    .main-content-container[b-xlwjzjw65s] {
        flex-direction: column;
    }
    
    .preview-column[b-xlwjzjw65s] {
        min-width: unset;
    }
    
    .preview-card[b-xlwjzjw65s] {
        position: static;
    }
    
    .form-grid[b-xlwjzjw65s] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .main-content-container[b-xlwjzjw65s] {
        padding: 0 16px;
    }
    
    .form-column[b-xlwjzjw65s] {
        padding: 24px;
    }
    
    .form-actions[b-xlwjzjw65s] {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .btn-primary[b-xlwjzjw65s],
    .btn-secondary[b-xlwjzjw65s],
    .btn-danger[b-xlwjzjw65s] {
        min-width: 100%;
        justify-content: center;
    }
    
    .student-input-container[b-xlwjzjw65s] {
        flex-direction: column;
    }
    
    .add-student-btn[b-xlwjzjw65s] {
        width: 100%;
    }
}

/* Loading & Error States */
.loading-container[b-xlwjzjw65s],
.error-state[b-xlwjzjw65s],
.empty-state[b-xlwjzjw65s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
    background: var(--acv-white);
    border-radius: 16px;
    padding: 3rem 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.loading-container .spinner-border[b-xlwjzjw65s] {
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
}

.loading-container p[b-xlwjzjw65s] {
    color: #718096;
    font-size: 1.1rem;
    margin: 0;
}

.error-icon[b-xlwjzjw65s],
.empty-state-icon[b-xlwjzjw65s] {
    font-size: 4rem;
    margin-bottom: 1.5rem;
}

.error-icon[b-xlwjzjw65s] {
    color: #e53e3e;
}

.empty-state-icon[b-xlwjzjw65s] {
    color: var(--gray-400);
}

.error-state h3[b-xlwjzjw65s],
.empty-state h3[b-xlwjzjw65s] {
    color: #2d3748;
    margin-bottom: 1rem;
}

.error-state p[b-xlwjzjw65s],
.empty-state p[b-xlwjzjw65s] {
    color: #718096;
    margin-bottom: 2rem;
}

/* Form Cards */
.form-card[b-xlwjzjw65s] {
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    overflow: hidden;
    margin-bottom: 2rem;
}

.card-header[b-xlwjzjw65s] {
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--acv-white) 100%);
    padding: 1.5rem;
    border-bottom: 1px solid var(--gray-200);
    position: relative;
}

.card-header[b-xlwjzjw65s]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
}

.card-header h3[b-xlwjzjw65s] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.card-header h3 i[b-xlwjzjw65s] {
    color: var(--acv-primary);
    font-size: 1.1rem;
}

.card-body[b-xlwjzjw65s] {
    padding: 1.5rem;
}

/* Header Section */
.exam-form-header[b-xlwjzjw65s] {
    background: #ffffff;
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-content[b-xlwjzjw65s] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-icon[b-xlwjzjw65s] {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.5rem;
}

.header-text[b-xlwjzjw65s] {
    flex: 1;
}

.header-title[b-xlwjzjw65s] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #2d3748;
    margin: 0 0 0.5rem 0;
}

/* Header Actions */
.header-actions[b-xlwjzjw65s] {
    display: flex;
    gap: 1rem;
}

.btn[b-xlwjzjw65s] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
    text-decoration: none;
    border: 1px solid;
    cursor: pointer;
}

.btn.secondary[b-xlwjzjw65s] {
    background: #ffffff;
    color: #718096;
    border: 2px solid #e2e8f0;
}

.btn.secondary:hover[b-xlwjzjw65s] {
    background: #f7fafc;
    border-color: #cbd5e0;
    transform: translateY(-1px);
    text-decoration: none;
    color: #718096;
}

.btn.primary[b-xlwjzjw65s] {
    background: var(--acv-primary);
    color: #ffffff;
    border: 2px solid var(--acv-primary);
}

.btn.primary:hover[b-xlwjzjw65s] {
    background: var(--acv-primary-700);
    border-color: var(--acv-primary-700);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
    text-decoration: none;
    color: #ffffff;
}

/* Feedback Validation Alert */
.feedback-validation-alert[b-xlwjzjw65s] {
    margin-top: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    animation: slideDown-b-xlwjzjw65s 0.3s ease-out;
}

/* Loading State */
.feedback-validation-alert.loading[b-xlwjzjw65s] {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #0ea5e9;
}

.feedback-validation-alert.loading .feedback-validation-icon[b-xlwjzjw65s] {
    background: #0ea5e9;
    color: white;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);
}

.feedback-validation-alert.loading .feedback-validation-title[b-xlwjzjw65s] {
    color: #0369a1;
}

.feedback-validation-alert.loading .feedback-validation-message[b-xlwjzjw65s] {
    color: #0369a1;
    opacity: 0.9;
}

/* Success State */
.feedback-validation-alert.success[b-xlwjzjw65s] {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #10b981;
}

.feedback-validation-alert.success .feedback-validation-icon[b-xlwjzjw65s] {
    background: #10b981;
    color: white;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.feedback-validation-alert.success .feedback-validation-title[b-xlwjzjw65s] {
    color: #047857;
}

.feedback-validation-alert.success .feedback-validation-message[b-xlwjzjw65s] {
    color: #047857;
    opacity: 0.9;
}

.feedback-validation-alert.success .feedback-validation-message strong[b-xlwjzjw65s] {
    color: #047857;
    font-weight: 600;
}

/* Error State */
.feedback-validation-alert.error[b-xlwjzjw65s] {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 1px solid #ef4444;
    margin-bottom: 1rem;
}

.feedback-validation-alert.error .feedback-validation-icon[b-xlwjzjw65s] {
    background: #ef4444;
    color: white;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.feedback-validation-alert.error .feedback-validation-title[b-xlwjzjw65s] {
    color: #dc2626;
}

.feedback-validation-alert.error .feedback-validation-message[b-xlwjzjw65s] {
    color: #dc2626;
    opacity: 0.9;
}

.feedback-validation-alert.error .feedback-validation-message strong[b-xlwjzjw65s] {
    color: #dc2626;
    font-weight: 600;
}

.feedback-validation-icon[b-xlwjzjw65s] {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.feedback-validation-content[b-xlwjzjw65s] {
    flex: 1;
    min-width: 0;
}

.feedback-validation-header[b-xlwjzjw65s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
}

.feedback-validation-text[b-xlwjzjw65s] {
    flex: 1;
    min-width: 0;
}

.feedback-validation-title[b-xlwjzjw65s] {
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.feedback-validation-message[b-xlwjzjw65s] {
    font-size: 0.875rem;
    line-height: 1.5;
}

.btn-feedback-link[b-xlwjzjw65s] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: #ef4444;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
    white-space: nowrap;
    flex-shrink: 0;
    height: fit-content;
}

.btn-feedback-link:hover[b-xlwjzjw65s] {
    background: #dc2626;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3);
    color: white;
    text-decoration: none;
}

.btn-feedback-link i[b-xlwjzjw65s] {
    font-size: 0.75rem;
}

@keyframes slideDown-b-xlwjzjw65s {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* _content/ltia.portal.web/Components/Exams/Admin/Pages/Exams/Index.razor.rz.scp.css */
/* CSS Variables - Đặt trực tiếp vào .exams-page */
.exams-page[b-u1npz5v3fg] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    
    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Header Section */
.exams-card-header[b-u1npz5v3fg] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.header-content[b-u1npz5v3fg] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-icon[b-u1npz5v3fg] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
}

.header-text[b-u1npz5v3fg] {
    flex: 1;
}

.header-title[b-u1npz5v3fg] {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
    color: var(--gray-800);
}

.header-subtitle[b-u1npz5v3fg] {
    font-size: 1rem;
    margin: 0.25rem 0 0 0;
    color: var(--gray-600);
}

/* Search Section */
.exams-search-section[b-u1npz5v3fg] {
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    margin-bottom: 2rem;
    overflow: visible;
    position: relative;
    z-index: 100;
}

.search-container[b-u1npz5v3fg] {
    padding: 1.5rem;
}

.search-header[b-u1npz5v3fg] {
    margin-bottom: 1.5rem;
    text-align: center;
}

.search-title[b-u1npz5v3fg] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 0.5rem 0;
}

.search-title i[b-u1npz5v3fg] {
    color: var(--acv-primary);
    font-size: 1.3rem;
}

.search-subtitle[b-u1npz5v3fg] {
    color: var(--gray-600);
    font-size: 1rem;
    margin: 0;
    font-weight: 400;
}

.search-content[b-u1npz5v3fg] {
    width: 100%;
}

.search-main-row[b-u1npz5v3fg] {
    display: flex;
    align-items: end;
    gap: 1rem;
    flex-wrap: nowrap;
    justify-content: center;
    width: 100%;
}

.search-input-group[b-u1npz5v3fg] {
    flex: 1 1 auto;
    min-width: 350px;
    max-width: 500px;
    position: relative;
    z-index: 20;
}

.filter-group[b-u1npz5v3fg] {
    flex: 0 0 600px;
    min-width: 600px;
    position: relative;
    z-index: 100;
}

.filter-group-date[b-u1npz5v3fg] {
    flex: 1 1 auto;
    min-width: 280px;
    max-width: 300px;
    position: relative;
    z-index: 200;
}

.search-controls[b-u1npz5v3fg] {
    display: flex;
    gap: 0.5rem;
    align-items: end;
    flex-shrink: 0;
}

/* Override DateTimeInput styles trong context của Exams Index */
.filter-group-date[b-u1npz5v3fg]  .datetime-input-group {
    position: relative;
    margin-bottom: 0;
}

.filter-group-date[b-u1npz5v3fg]  .datetime-input-wrapper {
    min-width: auto !important;
    width: 100%;
}

.filter-group-date[b-u1npz5v3fg]  .datetime-input {
    width: 100%;
    height: 48px;
    padding: 0.75rem 2.5rem 0.75rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.filter-group-date[b-u1npz5v3fg]  .datetime-input:focus {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.filter-group-date[b-u1npz5v3fg]  .datetime-picker {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    width: 100% !important;
    max-width: 340px;
    min-width: 300px;
    z-index: 10000;
    background: var(--acv-white);
    border: 1px solid var(--gray-300);
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    padding: 1rem;
    margin-top: 0;
    animation: fadeInDown-b-u1npz5v3fg 0.2s ease-out;
}

.filter-group-date[b-u1npz5v3fg]  .datetime-clear-btn,
.filter-group-date[b-u1npz5v3fg]  .datetime-calendar-btn {
    color: var(--gray-500);
}

.filter-group-date[b-u1npz5v3fg]  .datetime-clear-btn:hover,
.filter-group-date[b-u1npz5v3fg]  .datetime-calendar-btn:hover {
    background-color: var(--gray-100);
    color: var(--acv-primary);
}

.filter-label[b-u1npz5v3fg] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-label i[b-u1npz5v3fg] {
    color: var(--acv-primary);
}

.search-input-wrapper[b-u1npz5v3fg] {
    position: relative;
}

.search-icon[b-u1npz5v3fg] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    z-index: 1;
}

.search-input[b-u1npz5v3fg] {
    width: 100%;
    height: 48px;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--acv-white);
    box-sizing: border-box;
}

.search-input:focus[b-u1npz5v3fg] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

/* Filter Dropdown */
.filter-dropdown[b-u1npz5v3fg] {
    position: relative;
}

.filter-dropdown-btn[b-u1npz5v3fg] {
    width: 100%;
    height: 48px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    background: var(--acv-white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.95rem;
    box-sizing: border-box;
}

.filter-dropdown-btn:hover[b-u1npz5v3fg] {
    border-color: var(--acv-primary);
}

.filter-dropdown-btn.open[b-u1npz5v3fg] {
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.filter-dropdown-text[b-u1npz5v3fg] {
    flex: 1;
    text-align: left;
    color: var(--gray-700);
}

.filter-dropdown-icon[b-u1npz5v3fg] {
    color: var(--gray-400);
    transition: transform 0.2s ease;
}

.filter-dropdown-icon.rotated[b-u1npz5v3fg] {
    transform: rotate(180deg);
}

.filter-dropdown-menu[b-u1npz5v3fg] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--acv-white);
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    z-index: 1000;
    margin-top: 0.25rem;
    max-height: 300px;
    overflow: hidden;
    display: none;
}

.filter-dropdown-menu.show[b-u1npz5v3fg] {
    display: block;
}

.filter-dropdown-search[b-u1npz5v3fg] {
    padding: 0.75rem;
    border-bottom: 1px solid var(--gray-200);
}

.filter-search-input[b-u1npz5v3fg] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    font-size: 0.875rem;
    color: var(--gray-700);
    background: var(--gray-50);
}

.filter-search-input:focus[b-u1npz5v3fg] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 2px rgba(33, 76, 166, 0.1);
    background: var(--acv-white);
}

.filter-dropdown-list[b-u1npz5v3fg] {
    max-height: 200px;
    overflow-y: auto;
}

.filter-dropdown-item[b-u1npz5v3fg] {
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid var(--gray-100);
}

.filter-dropdown-item:hover[b-u1npz5v3fg] {
    background: var(--gray-50);
}

.filter-dropdown-item.selected[b-u1npz5v3fg] {
    background: var(--acv-primary-lighter);
    color: var(--acv-primary);
}

/* Search Controls */
.search-controls[b-u1npz5v3fg] {
    display: flex;
    gap: 0.5rem;
    align-items: end;
    flex-shrink: 0;
}

.search-btn[b-u1npz5v3fg] {
    width: 48px;
    height: 48px;
    border: 2px solid var(--acv-primary);
    border-radius: 8px;
    background: var(--acv-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
}

.search-btn:hover[b-u1npz5v3fg] {
    background: var(--acv-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

.clear-btn[b-u1npz5v3fg] {
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 8px;
    background: var(--gray-500);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
}

.clear-btn:hover[b-u1npz5v3fg] {
    background: var(--gray-600);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* List Container */
.exams-list-container[b-u1npz5v3fg] {
    background: var(--acv-white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
}

/* List Header */
.list-header[b-u1npz5v3fg] {
    background: var(--acv-white) !important;
    padding: 1.75rem 2rem;
    border-bottom: 1px solid var(--gray-200);
    border-radius: 16px 16px 0 0;
    position: relative;
    z-index: 100;
    overflow: visible;
}

.list-header[b-u1npz5v3fg]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 16px 0 0 0;
}

.list-header-content[b-u1npz5v3fg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.list-title-section[b-u1npz5v3fg] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.list-title[b-u1npz5v3fg] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.list-title i[b-u1npz5v3fg] {
    color: var(--acv-primary);
    font-size: 1.25rem;
}

.list-count[b-u1npz5v3fg] {
    background: var(--acv-primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Sort Controls */
.sort-controls[b-u1npz5v3fg] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.sort-dropdown[b-u1npz5v3fg] {
    position: relative;
}

.sort-dropdown-btn[b-u1npz5v3fg] {
    padding: 0.5rem 1rem;
    border: 2px solid var(--acv-primary);
    border-radius: 12px;
    background: white;
    color: var(--acv-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
    font-size: 0.9rem;
}

.sort-dropdown-btn:hover[b-u1npz5v3fg],
.sort-dropdown-btn.active[b-u1npz5v3fg] {
    background: var(--acv-primary);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

.sort-dropdown-btn:focus[b-u1npz5v3fg] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.sort-dropdown-menu[b-u1npz5v3fg] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--acv-white);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 50;
    margin-top: 0.5rem;
    overflow: hidden;
    min-width: 200px;
    display: none;
}

.sort-dropdown-menu.show[b-u1npz5v3fg] {
    display: block;
}

.sort-option[b-u1npz5v3fg] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    width: 100%;
    background: var(--acv-white);
    border: none;
    color: var(--acv-primary);
    font-size: 0.875rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    border-bottom: 1px solid var(--gray-100);
}

.sort-option:hover[b-u1npz5v3fg] {
    background: var(--acv-primary-50);
    color: var(--acv-primary);
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.1);
}

.sort-option.active[b-u1npz5v3fg] {
    background: var(--acv-primary-50);
    color: var(--acv-primary);
    font-weight: 600;
}

.sort-icons[b-u1npz5v3fg] {
    margin-left: auto;
    display: none;  /* ✅ Ẩn mũi tên */
}

.sort-icon-default[b-u1npz5v3fg],
.sort-icon-asc[b-u1npz5v3fg],
.sort-icon-desc[b-u1npz5v3fg] {
    font-size: 0.8rem;
    opacity: 0.5;
}

.sort-icon-default.active[b-u1npz5v3fg],
.sort-icon-asc.active[b-u1npz5v3fg],
.sort-icon-desc.active[b-u1npz5v3fg] {
    opacity: 1;
    color: var(--acv-primary);
}

.sort-option.active .sort-icon-default.active[b-u1npz5v3fg],
.sort-option.active .sort-icon-asc.active[b-u1npz5v3fg],
.sort-option.active .sort-icon-desc.active[b-u1npz5v3fg] {
    color: white;
}

.refresh-btn[b-u1npz5v3fg] {
    padding: 0.5rem 1rem;
    border: 2px solid var(--acv-primary);
    border-radius: 12px;
    background: var(--acv-white);
    color: var(--acv-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
}

.refresh-btn:hover[b-u1npz5v3fg] {
    background: var(--acv-primary);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

.add-exam-btn[b-u1npz5v3fg] {
    padding: 0.5rem 1rem;
    border: 2px solid var(--acv-primary);
    border-radius: 12px;
    background: var(--acv-white);
    color: var(--acv-primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
}

.add-exam-btn:hover[b-u1npz5v3fg] {
    background: var(--acv-primary);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

/* Exams List */
.exams-list[b-u1npz5v3fg] {
    padding: 1.5rem;
}

.loading-container[b-u1npz5v3fg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--gray-600);
}

.empty-state[b-u1npz5v3fg] {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--gray-600);
}

.empty-state-icon[b-u1npz5v3fg] {
    font-size: 4rem;
    color: var(--gray-300);
    margin-bottom: 1.5rem;
    opacity: 0.7;
}

.empty-state h3[b-u1npz5v3fg] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--gray-700);
    margin: 0 0 0.75rem 0;
}

.empty-state p[b-u1npz5v3fg] {
    margin: 0 0 2rem 0;
    color: var(--gray-600);
    font-size: 1rem;
}

.empty-state-actions[b-u1npz5v3fg] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.empty-state-actions .clear-btn[b-u1npz5v3fg] {
    padding: 0.5rem 1rem;
    border: 2px solid var(--gray-400);
    border-radius: 8px;
    background: white;
    color: var(--gray-600);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
    font-size: 0.9rem;
}

.empty-state-actions .clear-btn:hover[b-u1npz5v3fg] {
    border-color: var(--gray-600);
    color: var(--gray-800);
    background: var(--gray-50);
}

.empty-state-actions .add-exam-btn[b-u1npz5v3fg] {
    padding: 0.5rem 1rem;
    border: 2px solid var(--acv-primary);
    border-radius: 8px;
    background: var(--acv-primary);
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
    font-size: 0.9rem;
}

.empty-state-actions .add-exam-btn:hover[b-u1npz5v3fg] {
    background: var(--acv-primary);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

/* Exams Grid */
.exams-grid[b-u1npz5v3fg] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    padding: 1.5rem;
}

.exam-card[b-u1npz5v3fg] {
    background: var(--acv-white);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    z-index: 5;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    height: auto;
}

.exam-card[b-u1npz5v3fg]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--acv-primary);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.exam-card:hover[b-u1npz5v3fg] {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: var(--acv-primary);
}

.exam-card:hover[b-u1npz5v3fg]::before {
    opacity: 1;
}

.exam-card-header[b-u1npz5v3fg] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.5rem 1.5rem 1rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    position: relative;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}

.exam-card-header[b-u1npz5v3fg]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--acv-primary) 0%, #1e40af 100%);
    border-radius: 0 2px 2px 0;
}

.exam-title[b-u1npz5v3fg] {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
    line-height: 1.4;
    flex: 1;
    padding-right: 1rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    letter-spacing: -0.025em;
    min-height: 3.36rem; /* 2 lines: 1.2rem * 1.4 * 2 = 3.36rem */
    max-height: 3.36rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
}

.exam-actions[b-u1npz5v3fg] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.action-btn[b-u1npz5v3fg] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.action-btn[b-u1npz5v3fg]::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.5s ease;
    z-index: 1;
}

.action-btn:hover[b-u1npz5v3fg]::before {
    left: 100%;
}

.action-btn[b-u1npz5v3fg]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    transition: width 0.3s ease;
    z-index: 1;
}

.action-btn:hover[b-u1npz5v3fg]::after {
    width: 100%;
    height: 100%;
}

.action-btn.view[b-u1npz5v3fg] {
    background: linear-gradient(135deg, rgba(33, 76, 166, 0.1) 0%, rgba(33, 76, 166, 0.15) 100%);
    color: var(--acv-primary);
    border: 1px solid rgba(33, 76, 166, 0.2);
}

.action-btn.view:hover[b-u1npz5v3fg] {
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
    border-color: var(--acv-primary);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(33, 76, 166, 0.3);
}

.action-btn.edit[b-u1npz5v3fg] {
    background: linear-gradient(135deg, var(--warning-lighter) 0%, rgba(255, 171, 0, 0.1) 100%);
    color: var(--warning-dark);
    border: 1px solid var(--warning-light);
}

.action-btn.edit:hover[b-u1npz5v3fg] {
    background: linear-gradient(135deg, var(--warning-main) 0%, var(--warning-dark) 100%);
    color: var(--acv-white);
    border-color: var(--warning-main);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(255, 171, 0, 0.3);
}

.action-btn.delete[b-u1npz5v3fg] {
    background: linear-gradient(135deg, var(--error-lighter) 0%, rgba(255, 86, 48, 0.1) 100%);
    color: var(--error-dark);
    border: 1px solid var(--error-light);
}

.action-btn.delete:hover[b-u1npz5v3fg] {
    background: linear-gradient(135deg, var(--error-main) 0%, var(--error-dark) 100%);
    color: var(--acv-white);
    border-color: var(--error-main);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(255, 86, 48, 0.3);
}

.action-btn.results[b-u1npz5v3fg] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.15) 100%);
    color: var(--success-dark);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.action-btn.results:hover[b-u1npz5v3fg] {
    background: linear-gradient(135deg, var(--success-main) 0%, var(--success-dark) 100%);
    color: var(--acv-white);
    border-color: var(--success-main);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 200, 83, 0.3);
}

.action-btn i[b-u1npz5v3fg] {
    font-size: 0.9rem;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
    position: relative;
}

.action-btn:hover i[b-u1npz5v3fg] {
    transform: scale(1.1);
}

.exam-card-body[b-u1npz5v3fg] {
    padding: 1.25rem 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    background: #ffffff;
}

.exam-meta[b-u1npz5v3fg] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.exam-instructor[b-u1npz5v3fg], .exam-dates[b-u1npz5v3fg] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--gray-600);
    font-size: 1rem;
    font-weight: 600;
}

.exam-instructor i[b-u1npz5v3fg], .exam-dates i[b-u1npz5v3fg] {
    color: var(--acv-primary);
    font-size: 1rem;
    width: 20px;
    text-align: center;
}

.exam-details[b-u1npz5v3fg] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.exam-detail-item[b-u1npz5v3fg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: var(--gray-50);
    border-radius: 6px;
    border: 1px solid var(--gray-200);
}

.detail-label[b-u1npz5v3fg] {
    font-weight: 500;
    color: var(--gray-700);
    font-size: 0.8rem;
}

.detail-value[b-u1npz5v3fg] {
    font-weight: 600;
    color: var(--acv-primary);
    font-size: 0.8rem;
}

.detail-value.badge[b-u1npz5v3fg] {
    background: var(--acv-primary-lighter);
    color: var(--acv-primary);
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Exam Card Footer */
.exam-card-footer[b-u1npz5v3fg] {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 0 0 12px 12px;
}

.exam-status-badge[b-u1npz5v3fg] {
    color: var(--acv-white);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-block;
}

.exam-status-badge:hover[b-u1npz5v3fg] {
    transform: translateY(-1px);
}

/* Status variants */
.exam-status-badge.active[b-u1npz5v3fg] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.15);
}

.exam-status-badge.active:hover[b-u1npz5v3fg] {
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.25);
}

.exam-status-badge.pending[b-u1npz5v3fg] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.15);
}

.exam-status-badge.pending:hover[b-u1npz5v3fg] {
    box-shadow: 0 4px 8px rgba(245, 158, 11, 0.25);
}

.exam-status-badge.inactive[b-u1npz5v3fg] {
    background: linear-gradient(135deg, var(--gray-500) 0%, var(--gray-600) 100%);
    box-shadow: 0 2px 4px rgba(107, 114, 128, 0.15);
}

.exam-status-badge.inactive:hover[b-u1npz5v3fg] {
    box-shadow: 0 4px 8px rgba(107, 114, 128, 0.25);
}

.exam-status-badge.ended[b-u1npz5v3fg] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.15);
}

.exam-status-badge.ended:hover[b-u1npz5v3fg] {
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.25);
}

.exam-student-count[b-u1npz5v3fg] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--gray-600);
    font-size: 1rem;
    font-weight: 600;
}

.exam-student-count i[b-u1npz5v3fg] {
    color: var(--acv-primary);
    font-size: 1rem;
}

/* Table Footer */
.table-footer[b-u1npz5v3fg] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    gap: 2rem;
    margin-top: 2rem;
}

.results-info[b-u1npz5v3fg] {
    font-size: 0.9rem;
    color: var(--gray-600);
    font-weight: 500;
}

.pagination-container[b-u1npz5v3fg] {
    display: flex;
    align-items: center;
}

.pagination-nav[b-u1npz5v3fg] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagination-btn[b-u1npz5v3fg] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: var(--acv-white);
    color: var(--gray-600);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s ease;
    cursor: pointer;
}

.pagination-btn:hover[b-u1npz5v3fg] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border-color: var(--acv-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.15);
}

.pagination-btn.active[b-u1npz5v3fg] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border-color: var(--acv-primary);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
}

/* Modal Styles */
.modal-overlay[b-u1npz5v3fg] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content[b-u1npz5v3fg] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.modal-header[b-u1npz5v3fg] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.modal-icon[b-u1npz5v3fg] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--error-main) 0%, var(--error-dark) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
}

.modal-title[b-u1npz5v3fg] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
}

.modal-body[b-u1npz5v3fg] {
    margin-bottom: 2rem;
}

.modal-message[b-u1npz5v3fg] {
    color: var(--gray-600);
    font-size: 1rem;
    line-height: 1.6;
}

.modal-footer[b-u1npz5v3fg] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

.modal-btn[b-u1npz5v3fg] {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.modal-btn.cancel[b-u1npz5v3fg] {
    background: var(--gray-200);
    color: var(--gray-700);
}

.modal-btn.cancel:hover[b-u1npz5v3fg] {
    background: var(--gray-300);
}

.modal-btn.confirm[b-u1npz5v3fg] {
    background: linear-gradient(135deg, var(--error-main) 0%, var(--error-dark) 100%);
    color: white;
}

.modal-btn.confirm:hover[b-u1npz5v3fg] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 86, 48, 0.3);
}

/* Animation cho datepicker dropdown */
@keyframes fadeInDown-b-u1npz5v3fg {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .exams-page[b-u1npz5v3fg] {
        padding: 1rem;
    }
    
    .search-main-row[b-u1npz5v3fg] {
        flex-direction: column;
        align-items: stretch;
        flex-wrap: wrap;
    }
    
    .search-input-group[b-u1npz5v3fg],
    .filter-group[b-u1npz5v3fg] {
        min-width: auto;
        max-width: none;
        flex: 1 1 100%;
    }
    
    .filter-group-date[b-u1npz5v3fg] {
        min-width: auto;
        max-width: none;
        flex: 1 1 100%;
    }
    
    .filter-group-date[b-u1npz5v3fg]  .datetime-picker {
        position: fixed;
        left: 50% !important;
        transform: translateX(-50%);
        width: 90vw !important;
        max-width: 340px;
        min-width: 280px;
    }
    
    .search-controls[b-u1npz5v3fg] {
        justify-content: center;
    }
}

/* Additional Responsive Breakpoints */
@media (max-width: 1200px) {
    .exams-grid[b-u1npz5v3fg] {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
    }
}

@media (max-width: 900px) {
    .exams-grid[b-u1npz5v3fg] {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

@media (max-width: 768px) {
    .list-header-content[b-u1npz5v3fg] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    
    .sort-controls[b-u1npz5v3fg] {
        justify-content: space-between;
    }
    
    .exams-grid[b-u1npz5v3fg] {
        grid-template-columns: 1fr;
        padding: 1rem;
    }
    
    .table-footer[b-u1npz5v3fg] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    
    .pagination-nav[b-u1npz5v3fg] {
        justify-content: center;
    }
}
/* _content/ltia.portal.web/Components/Exams/Admin/Pages/Exams/Results.razor.rz.scp.css */
/* CSS Variables - Đặt trực tiếp vào .exams-page */
.exams-page[b-nqrcmscko6] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    
    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Header Section - Reuse from Index.razor.css */
.exams-card-header[b-nqrcmscko6] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.header-content[b-nqrcmscko6] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-icon[b-nqrcmscko6] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
}

.header-text[b-nqrcmscko6] {
    flex: 1;
}

.header-title[b-nqrcmscko6] {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
    color: var(--gray-800);
}

.header-subtitle[b-nqrcmscko6] {
    font-size: 1rem;
    margin: 0.25rem 0 0 0;
    color: var(--gray-600);
}

/* Exam Info Card */
.exam-info-card[b-nqrcmscko6] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.exam-info-header[b-nqrcmscko6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.exam-title-section[b-nqrcmscko6] {
    flex: 1;
}

.exam-subject[b-nqrcmscko6] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 0.5rem;
}

.exam-meta[b-nqrcmscko6] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.meta-item[b-nqrcmscko6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--gray-600);
    font-size: 0.9rem;
}

.meta-item i[b-nqrcmscko6] {
    color: var(--gray-400);
}

/* Statistics Cards */
.stat-card[b-nqrcmscko6] {
    display: flex;
    align-items: center;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background: var(--acv-white);
    margin-bottom: 1rem;
    border: 1px solid var(--gray-200);
    transition: all 0.3s ease;
}

.stat-card:hover[b-nqrcmscko6] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.stat-icon[b-nqrcmscko6] {
    font-size: 2.5rem;
    margin-right: 1rem;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.stat-success .stat-icon[b-nqrcmscko6] {
    background: linear-gradient(135deg, var(--success-lighter) 0%, rgba(0, 200, 83, 0.1) 100%);
    color: var(--success-main);
}

.stat-danger .stat-icon[b-nqrcmscko6] {
    background: linear-gradient(135deg, var(--error-lighter) 0%, rgba(255, 86, 48, 0.1) 100%);
    color: var(--error-main);
}

.stat-warning .stat-icon[b-nqrcmscko6] {
    background: linear-gradient(135deg, var(--warning-lighter) 0%, rgba(255, 171, 0, 0.1) 100%);
    color: var(--warning-main);
}

.stat-content[b-nqrcmscko6] {
    flex: 1;
}

.stat-value[b-nqrcmscko6] {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: var(--gray-800);
}

.stat-label[b-nqrcmscko6] {
    font-size: 0.9rem;
    color: var(--gray-600);
    font-weight: 500;
}

/* Search Section - Reuse from Index.razor.css */
.exams-search-section[b-nqrcmscko6] {
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    margin-bottom: 2rem;
    overflow: visible;
    position: relative;
    z-index: 100;
}

.search-container[b-nqrcmscko6] {
    padding: 1.5rem;
}

.search-header[b-nqrcmscko6] {
    margin-bottom: 1.5rem;
    text-align: center;
}

.search-title[b-nqrcmscko6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 0.5rem 0;
}

.search-title i[b-nqrcmscko6] {
    color: var(--acv-primary);
    font-size: 1.3rem;
}

.search-subtitle[b-nqrcmscko6] {
    color: var(--gray-600);
    font-size: 1rem;
    margin: 0;
    font-weight: 400;
}

.search-content[b-nqrcmscko6] {
    width: 100%;
}

.search-main-row[b-nqrcmscko6] {
    display: flex;
    align-items: end;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.search-input-group[b-nqrcmscko6] {
    flex: 1 1 auto;
    min-width: 300px;
    max-width: 500px;
    position: relative;
    z-index: 20;
}

.filter-label[b-nqrcmscko6] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-label i[b-nqrcmscko6] {
    color: var(--acv-primary);
}

.search-input-wrapper[b-nqrcmscko6] {
    position: relative;
}

.search-icon[b-nqrcmscko6] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    z-index: 1;
}

.search-input[b-nqrcmscko6] {
    width: 100%;
    height: 48px;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--acv-white);
    box-sizing: border-box;
}

.search-input:focus[b-nqrcmscko6] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

/* Filter Dropdown - Reuse from Index.razor.css */
.filter-group[b-nqrcmscko6] {
    flex: 0 0 300px;
    min-width: 300px;
    position: relative;
    z-index: 100;
}

.filter-dropdown[b-nqrcmscko6] {
    position: relative;
}

.filter-dropdown-btn[b-nqrcmscko6] {
    width: 100%;
    height: 48px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    background: var(--acv-white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.95rem;
    box-sizing: border-box;
}

.filter-dropdown-btn:hover[b-nqrcmscko6] {
    border-color: var(--acv-primary);
}

.filter-dropdown-btn.open[b-nqrcmscko6] {
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.filter-dropdown-text[b-nqrcmscko6] {
    flex: 1;
    text-align: left;
    color: var(--gray-700);
}

.filter-dropdown-icon[b-nqrcmscko6] {
    color: var(--gray-400);
    transition: transform 0.2s ease;
}

.filter-dropdown-icon.rotated[b-nqrcmscko6] {
    transform: rotate(180deg);
}

.filter-dropdown-menu[b-nqrcmscko6] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--acv-white);
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    z-index: 1000;
    margin-top: 0.25rem;
    max-height: 300px;
    overflow: hidden;
    display: none;
}

.filter-dropdown-menu.show[b-nqrcmscko6] {
    display: block;
}

.filter-dropdown-list[b-nqrcmscko6] {
    max-height: 200px;
    overflow-y: auto;
}

.filter-dropdown-item[b-nqrcmscko6] {
    padding: 0.625rem 1rem;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 1px solid var(--gray-100);
    background: var(--acv-white);
    position: relative;
}

.filter-dropdown-item:last-child[b-nqrcmscko6] {
    border-bottom: none;
}

.filter-dropdown-item:hover[b-nqrcmscko6] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    box-shadow: inset 3px 0 0 0 var(--acv-primary);
}

.filter-dropdown-item.selected[b-nqrcmscko6] {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    box-shadow: inset 3px 0 0 0 var(--acv-primary);
    color: var(--acv-primary);
}

.filter-checkbox[b-nqrcmscko6] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 0.75rem;
    flex-shrink: 0;
    color: var(--gray-400);
    transition: color 0.2s ease;
}

.filter-checkbox i[b-nqrcmscko6] {
    font-size: 0.875rem;
}

.filter-dropdown-item.selected .filter-checkbox[b-nqrcmscko6] {
    color: var(--acv-primary);
}

.filter-item-text[b-nqrcmscko6] {
    flex: 1;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--gray-800);
    line-height: 1.4;
}

.filter-dropdown-item.selected .filter-item-text[b-nqrcmscko6] {
    color: var(--acv-primary);
    font-weight: 600;
}

.filter-item-badge[b-nqrcmscko6] {
    font-size: 0.8125rem;
    color: var(--gray-600);
    background-color: var(--gray-100);
    padding: 0.25rem 0.625rem;
    border-radius: 6px;
    font-weight: 500;
    flex-shrink: 0;
}

.filter-dropdown-item.selected .filter-item-badge[b-nqrcmscko6] {
    background-color: rgba(33, 76, 166, 0.1);
    color: var(--acv-primary);
}

/* Search Controls - Reuse from Index.razor.css */
.search-controls[b-nqrcmscko6] {
    display: flex;
    gap: 0.5rem;
    align-items: end;
    flex-shrink: 0;
}

.search-btn[b-nqrcmscko6] {
    width: 48px;
    height: 48px;
    border: 2px solid var(--acv-primary);
    border-radius: 8px;
    background: var(--acv-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
}

.search-btn:hover[b-nqrcmscko6] {
    background: var(--acv-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

.clear-btn[b-nqrcmscko6] {
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 8px;
    background: var(--gray-500);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
}

.clear-btn:hover[b-nqrcmscko6] {
    background: var(--gray-600);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* List Container - Reuse from Index.razor.css */
.exams-list-container[b-nqrcmscko6] {
    background: var(--acv-white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
}

.exams-list-container > .results-table-container[b-nqrcmscko6] {
    padding: 0;
    border-radius: 0;
}

.list-header[b-nqrcmscko6] {
    background: var(--acv-white) !important;
    padding: 1.75rem 2rem;
    border-bottom: 1px solid var(--gray-200);
    border-radius: 16px 16px 0 0;
    position: relative;
    z-index: 100;
    overflow: visible;
}

.list-header[b-nqrcmscko6]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 16px 0 0 0;
}

.list-header-content[b-nqrcmscko6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.list-title-section[b-nqrcmscko6] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.list-title[b-nqrcmscko6] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.list-title i[b-nqrcmscko6] {
    color: var(--acv-primary);
    font-size: 1.25rem;
}

.list-count[b-nqrcmscko6] {
    background: var(--acv-primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.sort-controls[b-nqrcmscko6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.add-question-btn[b-nqrcmscko6] {
    padding: 0.5rem 1rem;
    border: 2px solid var(--acv-primary);
    border-radius: 12px;
    background: var(--acv-white);
    color: var(--acv-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
}

.add-question-btn:hover:not(:disabled)[b-nqrcmscko6] {
    background: var(--acv-primary);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

.add-question-btn:disabled[b-nqrcmscko6] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Table Container */
.results-table-container[b-nqrcmscko6] {
    overflow-x: auto;
    border-radius: 12px;
    padding: 1.5rem;
}

.results-table[b-nqrcmscko6] {
    width: 100%;
    border-collapse: collapse;
    background: var(--acv-white);
    border-radius: 12px;
    overflow: hidden;
}

/* Table Header */
.table-header-row[b-nqrcmscko6] {
    background: var(--gray-50);
    border-bottom: 2px solid var(--gray-200);
}

.table-header-row th[b-nqrcmscko6] {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--gray-700);
    font-size: 0.9rem;
    border-bottom: 2px solid var(--gray-200);
    position: relative;
}

/* Column Widths */
.col-checkbox[b-nqrcmscko6] {
    width: 60px;
    text-align: center !important;
}

.col-stt[b-nqrcmscko6] {
    width: 60px;
    text-align: center !important;
}

.col-employee-code[b-nqrcmscko6] {
    width: 120px;
    text-align: center !important;
}

.col-fullname[b-nqrcmscko6] {
    width: auto;
    min-width: 200px;
}

.col-email[b-nqrcmscko6] {
    width: auto;
    min-width: 180px;
}

.col-attempts[b-nqrcmscko6] {
    width: 100px;
    text-align: center !important;
}

.col-score[b-nqrcmscko6] {
    width: 120px;
    text-align: center !important;
}

.col-date[b-nqrcmscko6] {
    width: auto;
    min-width: 150px;
}

.col-status[b-nqrcmscko6] {
    width: 140px;
    text-align: center !important;
}

.col-actions[b-nqrcmscko6] {
    width: 100px;
    text-align: center !important;
}

.action-buttons[b-nqrcmscko6] {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    align-items: center;
}

.action-btn-table[b-nqrcmscko6] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 32px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    text-decoration: none;
}

.action-btn-table.detail[b-nqrcmscko6] {
    background: linear-gradient(135deg, rgba(33, 76, 166, 0.1) 0%, rgba(33, 76, 166, 0.15) 100%);
    color: var(--acv-primary);
    border: 1px solid rgba(33, 76, 166, 0.2);
}

.action-btn-table.detail:hover[b-nqrcmscko6] {
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(33, 76, 166, 0.3);
}

/* Table Body */
.table-row[b-nqrcmscko6] {
    border-bottom: 1px solid var(--gray-200);
    transition: all 0.2s ease;
}

.table-row:hover[b-nqrcmscko6] {
    background: var(--gray-50);
}

.table-row:last-child[b-nqrcmscko6] {
    border-bottom: none;
}

.table-row.selected[b-nqrcmscko6] {
    background-color: var(--acv-primary-lighter);
}

.table-row td[b-nqrcmscko6] {
    padding: 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--gray-200);
}

/* Checkbox styling */
.results-table .form-check-input[b-nqrcmscko6] {
    margin: 0;
    cursor: pointer;
    width: 18px;
    height: 18px;
    display: block;
    margin: 0 auto;
}

/* STT Column */
.stt-number[b-nqrcmscko6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--gray-100);
    color: var(--gray-600);
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Status Badge */
.status-badge[b-nqrcmscko6] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    line-height: 1.2;
}

.status-success[b-nqrcmscko6] {
    background: linear-gradient(135deg, rgba(0, 200, 83, 0.1) 0%, rgba(0, 200, 83, 0.08) 100%);
    color: var(--success-dark);
    border: 1px solid rgba(0, 200, 83, 0.2);
}

.status-danger[b-nqrcmscko6] {
    background: linear-gradient(135deg, rgba(255, 86, 48, 0.1) 0%, rgba(255, 86, 48, 0.08) 100%);
    color: var(--error-dark);
    border: 1px solid rgba(255, 86, 48, 0.2);
}

.status-warning[b-nqrcmscko6] {
    background: linear-gradient(135deg, rgba(255, 171, 0, 0.1) 0%, rgba(255, 171, 0, 0.08) 100%);
    color: var(--warning-dark);
    border: 1px solid rgba(255, 171, 0, 0.2);
}

/* Table Footer - Reuse from Index.razor.css */
.table-footer[b-nqrcmscko6] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding: 1.5rem 2rem;
    background: var(--acv-white);
    border-top: 1px solid var(--gray-200);
    border-radius: 0 0 16px 16px;
    flex-wrap: wrap;
}

.results-info[b-nqrcmscko6] {
    color: var(--gray-600);
    font-size: 0.9rem;
    font-weight: 500;
}

.pagination-container[b-nqrcmscko6] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination-nav[b-nqrcmscko6] {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.5rem;
}

.pagination-btn[b-nqrcmscko6] {
    min-width: 40px;
    height: 40px;
    padding: 0.5rem;
    border: 1px solid var(--gray-300);
    background: var(--acv-white);
    color: var(--gray-700);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
}

.pagination-btn:hover:not(:disabled)[b-nqrcmscko6] {
    background-color: var(--acv-primary);
    border-color: var(--acv-primary);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
}

.pagination-btn:disabled[b-nqrcmscko6] {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-btn.active[b-nqrcmscko6] {
    background-color: var(--acv-primary);
    border-color: var(--acv-primary);
    color: white;
}

/* Error and Empty States */
.error-state[b-nqrcmscko6],
.empty-state[b-nqrcmscko6] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 3rem 2rem;
    text-align: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    margin-bottom: 2rem;
}

.error-icon[b-nqrcmscko6],
.empty-state-icon[b-nqrcmscko6] {
    font-size: 4rem;
    color: var(--gray-300);
    margin-bottom: 1.5rem;
    opacity: 0.7;
}

.error-state h3[b-nqrcmscko6],
.empty-state h3[b-nqrcmscko6] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 0.5rem;
}

.error-state p[b-nqrcmscko6],
.empty-state p[b-nqrcmscko6] {
    color: var(--gray-600);
    margin-bottom: 1.5rem;
}

/* Empty state in table */
.empty-table-state[b-nqrcmscko6] {
    padding: 3rem 2rem !important;
    text-align: center;
    background: var(--acv-white);
}

.empty-state-inline[b-nqrcmscko6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.empty-state-icon-inline[b-nqrcmscko6] {
    font-size: 3rem;
    color: var(--gray-300);
    margin-bottom: 1rem;
    opacity: 0.7;
}

.empty-state-inline h3[b-nqrcmscko6] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0 0 0.5rem 0;
}

.empty-state-inline p[b-nqrcmscko6] {
    color: var(--gray-600);
    margin: 0 0 1.5rem 0;
    font-size: 0.9375rem;
}

.btn-clear-filter-inline[b-nqrcmscko6] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--gray-300);
    background: var(--acv-white);
    color: var(--gray-700);
}

.btn-clear-filter-inline:hover[b-nqrcmscko6] {
    background: var(--gray-50);
    border-color: var(--gray-400);
    color: var(--gray-900);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn[b-nqrcmscko6],
.btn-secondary[b-nqrcmscko6] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid var(--gray-300);
    background: var(--acv-white);
    color: var(--gray-700);
}

.btn:hover[b-nqrcmscko6],
.btn-secondary:hover[b-nqrcmscko6] {
    background: var(--gray-100);
    border-color: var(--gray-400);
    transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 768px) {
    .exams-page[b-nqrcmscko6] {
        padding: 0.5rem 1rem;
    }

    .exams-card-header[b-nqrcmscko6] {
    padding: 1.5rem;
    }

    .search-main-row[b-nqrcmscko6] {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group[b-nqrcmscko6] {
        flex: 1 1 100%;
        min-width: 100%;
    }

    .list-header[b-nqrcmscko6] {
        padding: 1.25rem 1.5rem;
    }

    .list-header-content[b-nqrcmscko6] {
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
    }

    .results-table-container[b-nqrcmscko6] {
        margin: 0 -1.5rem;
        border-radius: 0;
    }

    .results-table[b-nqrcmscko6] {
        min-width: 800px;
    }

    .table-header-row th[b-nqrcmscko6],
    .table-row td[b-nqrcmscko6] {
        padding: 0.75rem 0.5rem;
    }

    .stt-number[b-nqrcmscko6] {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    .col-fullname[b-nqrcmscko6] {
        min-width: 150px;
    }

    .col-email[b-nqrcmscko6] {
        min-width: 150px;
    }

    .table-footer[b-nqrcmscko6] {
        flex-direction: column;
        align-items: stretch;
        padding: 1rem 1.5rem;
    }

    .pagination-container[b-nqrcmscko6] {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .table-header-row th[b-nqrcmscko6],
    .table-row td[b-nqrcmscko6] {
        padding: 0.5rem 0.25rem;
    }

    .stt-number[b-nqrcmscko6] {
        width: 24px;
        height: 24px;
        font-size: 0.7rem;
    }
}

/* ============================================
   Create Exam Modal Styles - Match Schedule Exam Modal
   ============================================ */

/* Exam Info Card */
.exam-info-card[b-nqrcmscko6] {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border: 1px solid #e3f2fd;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(33, 76, 166, 0.08);
    position: relative;
    overflow: hidden;
}

.exam-info-card[b-nqrcmscko6]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #214ca6;
}

.exam-info-card .exam-info-header[b-nqrcmscko6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 0;
}

.exam-info-card .exam-info-content[b-nqrcmscko6] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.exam-info-card .exam-info-badge[b-nqrcmscko6] {
    background: #214ca6;
    color: white;
    padding: 0.5rem 0.875rem;
    border-radius: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.375rem;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
    min-width: auto;
}

.exam-info-card .badge-count[b-nqrcmscko6] {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}

.exam-info-card .badge-text[b-nqrcmscko6] {
    font-size: 0.8rem;
    font-weight: 500;
    opacity: 0.9;
    text-transform: lowercase;
    letter-spacing: 0;
}

.exam-info-card .exam-info-icon[b-nqrcmscko6] {
    width: 56px;
    height: 56px;
    background: #214ca6;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white !important;
    font-size: 1.5rem;
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
    position: relative;
    flex-shrink: 0;
}

.exam-info-card .exam-info-icon i[b-nqrcmscko6] {
    color: white !important;
}

.exam-info-card .exam-info-icon[b-nqrcmscko6]::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: #214ca6;
    border-radius: 18px;
    z-index: -1;
    opacity: 0.2;
}

.exam-info-card .exam-title[b-nqrcmscko6] {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1a202c;
    margin: 0;
    line-height: 1.3;
}

/* Modal XL Styles */
.modal-xl[b-nqrcmscko6] {
    max-width: 1200px;
}

.modal .modal-content[b-nqrcmscko6] {
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.modal .modal-header[b-nqrcmscko6] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid var(--gray-200);
    border-radius: 12px 12px 0 0;
    padding: 1.5rem;
}

.modal .modal-title[b-nqrcmscko6] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0;
}

.modal .modal-body[b-nqrcmscko6] {
    padding: 2rem;
    max-height: 70vh;
    overflow-y: auto;
}

.modal .modal-footer[b-nqrcmscko6] {
    background: #f8f9fa;
    border-top: 1px solid var(--gray-200);
    border-radius: 0 0 12px 12px;
    padding: 1.5rem;
}

/* Enhanced Form Styles */
.schedule-form .form-label[b-nqrcmscko6] {
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.schedule-form .form-control[b-nqrcmscko6] {
    border: 1px solid #9ca3af;
    border-radius: 8px;
    padding: 0.875rem;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    margin-bottom: 0.5rem;
}

/* Apply styles to all inputs in modal */
.modal .form-control[b-nqrcmscko6] {
    border: 1px solid #9ca3af;
    border-radius: 8px;
    padding: 0.875rem;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    margin-bottom: 0.5rem;
}

.schedule-form .form-control:focus[b-nqrcmscko6] {
    border-color: #214ca6;
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

/* Apply focus styles to all inputs in modal */
.modal .form-control:focus[b-nqrcmscko6] {
    border-color: #214ca6;
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.modal .input-group .form-control:focus[b-nqrcmscko6] {
    border-color: #214ca6;
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.schedule-form .form-control[readonly][b-nqrcmscko6] {
    background-color: #f8f9fa;
    color: var(--gray-600);
}

.schedule-form .form-text[b-nqrcmscko6] {
    font-size: 0.85rem;
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.schedule-form .input-group .form-control[b-nqrcmscko6] {
    border-radius: 0;
    border-right: 1px solid #9ca3af;
}

.schedule-form .input-group .form-control:first-child[b-nqrcmscko6] {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-right: 1px solid #9ca3af;
}

.schedule-form .input-group .form-control:last-child[b-nqrcmscko6] {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-left: 1px solid #9ca3af;
}

.schedule-form .input-group .form-control:not(:first-child):not(:last-child)[b-nqrcmscko6] {
    border-left: 1px solid #9ca3af;
    border-right: 1px solid #9ca3af;
}

.modal .input-group .form-control[b-nqrcmscko6] {
    border-radius: 0;
    border-right: 1px solid #9ca3af;
}

.modal .input-group .form-control:first-child[b-nqrcmscko6] {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-right: 1px solid #9ca3af;
}

.modal .input-group .form-control:last-child[b-nqrcmscko6] {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-left: 1px solid #9ca3af;
}

.modal .input-group .form-control:not(:first-child):not(:last-child)[b-nqrcmscko6] {
    border-left: 1px solid #9ca3af;
    border-right: 1px solid #9ca3af;
}

.schedule-form .input-group .btn[b-nqrcmscko6] {
    border-radius: 0 8px 8px 0;
    border: 1px solid #9ca3af;
    border-left: 1px solid #9ca3af;
}

.modal .input-group .btn[b-nqrcmscko6] {
    border-radius: 0 8px 8px 0;
    border: 1px solid #9ca3af;
    border-left: 1px solid #9ca3af;
    height: 53px;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    line-height: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Đảm bảo icon hiển thị rõ ràng trên button "Tự động" */
.modal .input-group .btn-outline-secondary[b-nqrcmscko6] {
    color: #6b7280 !important;
    border-color: #9ca3af !important;
    background-color: #ffffff !important;
}

.modal .input-group .btn-outline-secondary i[b-nqrcmscko6] {
    color: #6b7280 !important;
    opacity: 1 !important;
}

.modal .input-group .btn-outline-secondary:hover[b-nqrcmscko6] {
    color: #ffffff !important;
    background-color: #6b7280 !important;
    border-color: #6b7280 !important;
}

.modal .input-group .btn-outline-secondary:hover i[b-nqrcmscko6] {
    color: #ffffff !important;
}

.modal .input-group .btn-outline-secondary:focus[b-nqrcmscko6] {
    box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.25) !important;
}

/* Instructor input với icons bên trong */
.instructor-input-wrapper[b-nqrcmscko6] {
    position: relative;
}

.instructor-search-input[b-nqrcmscko6] {
    padding-right: 80px;
}

.instructor-input-icons[b-nqrcmscko6] {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding-right: 0.5rem;
    pointer-events: none;
}

.instructor-input-icons button[b-nqrcmscko6] {
    pointer-events: auto;
    background: transparent;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    transition: color 0.2s ease;
}

.instructor-input-icons button:hover[b-nqrcmscko6] {
    color: #214ca6;
}

.instructor-dropdown-btn i[b-nqrcmscko6] {
    font-size: 0.875rem;
}

.instructor-dropdown-icon[b-nqrcmscko6] {
    transition: transform 0.2s ease;
}

.instructor-dropdown-icon.rotated[b-nqrcmscko6] {
    transform: rotate(180deg);
}

.instructor-clear-btn i[b-nqrcmscko6] {
    font-size: 0.875rem;
}

/* Row spacing in modal */
.modal .row[b-nqrcmscko6] {
    margin-bottom: 0.75rem;
}

.modal .mb-3[b-nqrcmscko6] {
    margin-bottom: 0.75rem !important;
}

/* Text Colors */
.text-danger[b-nqrcmscko6] {
    color: #dc3545 !important;
}

.text-success[b-nqrcmscko6] {
    color: #198754 !important;
}

/* Enhanced Icon Colors */
.modal .fas.fa-calendar-plus[b-nqrcmscko6],
.modal .fas.fa-users[b-nqrcmscko6],
.modal .fas.fa-calendar[b-nqrcmscko6],
.modal .fas.fa-clock[b-nqrcmscko6],
.modal .fas.fa-hourglass-half[b-nqrcmscko6],
.modal .fas.fa-book[b-nqrcmscko6],
.modal .fas.fa-user[b-nqrcmscko6],
.modal .fas.fa-calendar-alt[b-nqrcmscko6],
.modal .fas.fa-question-circle[b-nqrcmscko6],
.modal .fas.fa-redo[b-nqrcmscko6],
.modal .fas.fa-check-circle[b-nqrcmscko6],
.modal .fas.fa-link[b-nqrcmscko6],
.modal .fas.fa-info-circle[b-nqrcmscko6] {
    color: #214ca6;
}

/* Modal Button Styles */
.modal .btn[b-nqrcmscko6] {
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0.625rem 1.25rem;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    cursor: pointer;
}

.modal .btn:focus[b-nqrcmscko6] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.modal .btn-secondary[b-nqrcmscko6] {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #ffffff;
}

.modal .btn-secondary:hover[b-nqrcmscko6] {
    background-color: #5a6268;
    border-color: #545b62;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
}

.modal .btn-secondary:active[b-nqrcmscko6] {
    background-color: #545b62;
    border-color: #4e555b;
    transform: translateY(0);
}

.modal .btn-primary[b-nqrcmscko6] {
    background-color: #214ca6;
    border-color: #214ca6;
    color: #ffffff;
}

.modal .btn-primary:hover[b-nqrcmscko6] {
    background-color: #1e40af;
    border-color: #1d3a8a;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(33, 76, 166, 0.3);
}

.modal .btn-primary:active[b-nqrcmscko6] {
    background-color: #1d3a8a;
    border-color: #1e3a8a;
    transform: translateY(0);
}

.modal .btn-primary:disabled[b-nqrcmscko6] {
    background-color: #9ca3af;
    border-color: #9ca3af;
    color: #ffffff;
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
    box-shadow: none;
}

.modal .btn-primary:disabled:hover[b-nqrcmscko6] {
    background-color: #9ca3af;
    border-color: #9ca3af;
    transform: none;
    box-shadow: none;
}

/* Button icons */
.modal .btn i[b-nqrcmscko6] {
    font-size: 0.875rem;
    color: inherit;
}

/* Ensure icons in buttons are white */
.modal .btn-primary i[b-nqrcmscko6],
.modal .btn-secondary i[b-nqrcmscko6],
.modal .btn i[b-nqrcmscko6] {
    color: #ffffff !important;
}

/* Override specific icon colors in buttons */
.modal .btn-primary .fas.fa-calendar-plus[b-nqrcmscko6],
.modal .btn-primary .fas.fa-times[b-nqrcmscko6],
.modal .btn-secondary .fas.fa-times[b-nqrcmscko6] {
    color: #ffffff !important;
}

/* Specific icon spacing */
.modal .btn i.me-2[b-nqrcmscko6] {
    margin-right: 0.5rem !important;
}

/* Spinner in button */
.modal .btn .spinner-border-sm[b-nqrcmscko6] {
    width: 1rem;
    height: 1rem;
}

/* Custom Number Input Spinner Arrows */
.modal input[type="number"][b-nqrcmscko6] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.modal input[type="number"][b-nqrcmscko6]::-webkit-outer-spin-button,
.modal input[type="number"][b-nqrcmscko6]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.modal .number-input-wrapper[b-nqrcmscko6] {
    position: relative;
    display: inline-block;
    width: 100%;
}

.modal .number-input-wrapper input[type="number"][b-nqrcmscko6] {
    padding-right: 2.5rem;
    width: 100%;
}

.modal .number-input-wrapper input[type="number"].is-invalid[b-nqrcmscko6] {
    padding-right: 4.5rem;
    background-image: none;
}

/* Custom validation icon with Font Awesome */
.modal .number-input-wrapper .validation-icon-error[b-nqrcmscko6] {
    position: absolute;
    right: 2.5rem;
    top: 50%;
    left: auto;
    width: auto;
    height: auto;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #dc3545;
    font-size: 1rem;
    z-index: 1;
    pointer-events: none;
    margin: 0;
    padding: 0;
    line-height: 0;
}

.modal .number-input-wrapper .validation-icon-error i[b-nqrcmscko6] {
    font-size: 1rem;
    line-height: 1;
    display: inline-block;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    transform: translateY(-0.25em);
    position: relative;
}

.modal .number-spinner[b-nqrcmscko6] {
    position: absolute;
    right: 0;
    top: 0;
    width: 2rem;
    height: 53px;
    display: flex;
    flex-direction: column;
    background: #f8f9fa;
    border-left: 2px solid #9ca3af;
    border-top: 1px solid #9ca3af;
    border-bottom: 1px solid #9ca3af;
    border-right: 1px solid #9ca3af;
    border-radius: 0 6px 6px 0;
    box-sizing: border-box;
}

.modal .spinner-btn[b-nqrcmscko6] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #6c757d;
    font-size: 0.7rem;
    font-weight: bold;
    min-height: 0;
    padding: 0;
    height: 50%;
    border-bottom: 1px solid #e5e7eb;
}

.modal .spinner-btn:last-child[b-nqrcmscko6] {
    border-bottom: none;
}

.modal .spinner-btn .fas[b-nqrcmscko6] {
    font-size: 0.6rem;
    line-height: 1;
}

.modal .spinner-btn:hover[b-nqrcmscko6] {
    background: rgba(33, 76, 166, 0.1);
    color: #214ca6;
}

.modal .spinner-btn:active[b-nqrcmscko6] {
    background: rgba(33, 76, 166, 0.2);
    color: #1e40af;
}

.modal .spinner-btn:focus[b-nqrcmscko6] {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(33, 76, 166, 0.3);
}

.modal .spinner-btn:disabled[b-nqrcmscko6] {
    opacity: 0.5;
    cursor: not-allowed;
}

.modal .spinner-btn:disabled:hover[b-nqrcmscko6] {
    background: transparent;
    color: #6c757d;
}

/* Custom arrow icons */
.modal .spinner-btn .fas.fa-chevron-up[b-nqrcmscko6],
.modal .spinner-btn .fas.fa-chevron-down[b-nqrcmscko6] {
    font-size: 0.7rem;
    line-height: 1;
}

/* Focus state for number input */
.modal .number-input-wrapper:focus-within .number-spinner[b-nqrcmscko6] {
    border-left-color: #214ca6;
    background: rgba(33, 76, 166, 0.05);
}

/* Instructor dropdown menu */
.instructor-dropdown[b-nqrcmscko6] {
    z-index: 1050;
    max-height: 320px;
    overflow-y: auto;
    top: 100%;
    margin-top: 0.375rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* Instructor dropdown item */
.instructor-item[b-nqrcmscko6] {
    padding: 1rem 1.25rem;
    cursor: pointer;
    transition: background-color 150ms ease, box-shadow 150ms ease;
    border-bottom: 1px solid #f3f4f6;
    background: #ffffff;
    will-change: background-color, box-shadow;
}

.instructor-item:last-child[b-nqrcmscko6] {
    border-bottom: none;
}

.instructor-item:hover[b-nqrcmscko6] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    box-shadow: inset 3px 0 0 0 #214ca6;
}

.instructor-item:active[b-nqrcmscko6] {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    box-shadow: inset 3px 0 0 0 #214ca6;
}

.instructor-item-content[b-nqrcmscko6] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.instructor-item-header[b-nqrcmscko6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.instructor-name[b-nqrcmscko6] {
    font-weight: 600;
    font-size: 0.9375rem;
    color: #1f2937;
    line-height: 1.4;
}

.instructor-item-details[b-nqrcmscko6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
    align-items: center;
}

.instructor-detail-item[b-nqrcmscko6] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: #6b7280;
}

.instructor-detail-item i[b-nqrcmscko6] {
    color: #9ca3af;
    font-size: 0.75rem;
    width: 14px;
    text-align: center;
}

.instructor-detail-item span[b-nqrcmscko6] {
    color: #4b5563;
}

/* Loading và empty state */
.instructor-dropdown-loading[b-nqrcmscko6] {
    padding: 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.instructor-loading-text[b-nqrcmscko6] {
    color: #6b7280;
    font-size: 0.875rem;
}

.instructor-dropdown-empty[b-nqrcmscko6] {
    padding: 1.5rem;
    text-align: center;
    color: #9ca3af;
    font-size: 0.875rem;
}

/* Selected instructor card */
.selected-instructor-card[b-nqrcmscko6] {
    margin-top: 0.875rem;
    background: #ffffff;
    border: 1px solid #d1fae5;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.08);
}

.selected-instructor-header[b-nqrcmscko6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid #f0fdf4;
}

.selected-instructor-name[b-nqrcmscko6] {
    font-weight: 600;
    font-size: 1rem;
    color: #10b981;
    line-height: 1.5;
}

.selected-instructor-badge[b-nqrcmscko6] {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}

.selected-instructor-details[b-nqrcmscko6] {
    display: flex;
        flex-direction: column;
    gap: 0.75rem;
}

.selected-instructor-detail[b-nqrcmscko6] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.5;
    }

.selected-instructor-detail i[b-nqrcmscko6] {
    color: #214ca6;
    font-size: 0.875rem;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    }

.selected-instructor-detail span[b-nqrcmscko6] {
    color: #4b5563;
}

/* ============================================
   Student Accept List Table - Button Delete
   ============================================ */

/* Button delete trong bảng Student Accept List - Match CertificationNotifications */
.modal .btn-outline-danger[b-nqrcmscko6] {
    color: #dc3545 !important;
    border-color: #dc3545 !important;
    background-color: transparent !important;
}

.modal .btn-outline-danger:hover[b-nqrcmscko6] {
    color: #ffffff !important;
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    }

.modal .btn-outline-danger:focus[b-nqrcmscko6] {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25) !important;
}

.modal .btn-outline-danger i[b-nqrcmscko6] {
    color: inherit !important;
    }
/* _content/ltia.portal.web/Components/Exams/Admin/Pages/Feedbacks/Details.razor.rz.scp.css */
.feedback-details-page[b-pbf2f1ni9m] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-50: rgba(33, 76, 166, 0.05);
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    
    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

.details-header[b-pbf2f1ni9m] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.header-content[b-pbf2f1ni9m] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-icon[b-pbf2f1ni9m] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
}

.header-title[b-pbf2f1ni9m] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 0.5rem 0;
}

.header-subtitle[b-pbf2f1ni9m] {
    font-size: 1rem;
    color: var(--gray-600);
    margin: 0;
}

/* Empty State */
.empty-state[b-pbf2f1ni9m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.empty-state-icon[b-pbf2f1ni9m] {
    font-size: 4rem;
    color: var(--gray-400);
    margin-bottom: 1rem;
}

.empty-state-icon i.fa-spin[b-pbf2f1ni9m] {
    color: var(--acv-primary);
}

.empty-state h3[b-pbf2f1ni9m] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 0.5rem 0;
}

.empty-state p[b-pbf2f1ni9m] {
    color: var(--gray-600);
    font-size: 1rem;
    margin: 0 0 1.5rem 0;
}

.empty-state-actions[b-pbf2f1ni9m] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Error State */
.error-state[b-pbf2f1ni9m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.error-icon[b-pbf2f1ni9m] {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.error-content h3[b-pbf2f1ni9m] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--error-main);
    margin: 0 0 0.5rem 0;
}

.error-content p[b-pbf2f1ni9m] {
    color: var(--gray-600);
    font-size: 1rem;
    margin: 0 0 1.5rem 0;
}

.error-content .btn[b-pbf2f1ni9m] {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.error-content .btn-primary[b-pbf2f1ni9m] {
    background: var(--acv-primary);
    color: var(--acv-white);
}

.error-content .btn-primary:hover[b-pbf2f1ni9m] {
    background: var(--acv-primary-700);
}

.error-content .btn-secondary[b-pbf2f1ni9m] {
    background: var(--gray-500);
    color: white;
}

.error-content .btn-secondary:hover[b-pbf2f1ni9m] {
    background: var(--gray-600);
}

.details-content[b-pbf2f1ni9m] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.details-content-wrapper[b-pbf2f1ni9m] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-left: 14rem;
    padding-right: 14rem;
}

.detail-card[b-pbf2f1ni9m] {
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    overflow: hidden;
    transition: all 0.2s ease;
}

.detail-card:hover[b-pbf2f1ni9m] {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-color: var(--acv-primary);
}

.card-header[b-pbf2f1ni9m] {
    background: var(--gray-50);
    padding: 1.5rem;
    border-bottom: 2px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.card-title[b-pbf2f1ni9m] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.card-title i[b-pbf2f1ni9m] {
    color: var(--acv-primary);
    font-size: 1.1rem;
}

.card-body[b-pbf2f1ni9m] {
    padding: 1.5rem;
}

.info-item[b-pbf2f1ni9m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--gray-100);
}

    .info-item:last-child[b-pbf2f1ni9m] {
        border-bottom: none;
    }

.info-label[b-pbf2f1ni9m] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
    color: var(--gray-700);
    font-size: 0.95rem;
    flex-shrink: 0;
}

    .info-label i[b-pbf2f1ni9m] {
    color: var(--acv-primary);
    width: 20px;
    text-align: center;
    font-size: 1rem;
    }

.info-value[b-pbf2f1ni9m] {
    font-weight: 600;
    color: var(--gray-800);
    font-size: 0.95rem;
    text-align: right;
    flex: 1;
    margin-left: 1rem;
}

.info-value .text-muted[b-pbf2f1ni9m] {
    color: var(--gray-500);
    font-weight: 400;
}

.info-value small[b-pbf2f1ni9m] {
    font-size: 0.85rem;
    color: var(--gray-500);
    font-weight: 400;
}

/* Comment Item */
.comment-item[b-pbf2f1ni9m] {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--gray-200);
    margin-top: 0.5rem;
}

.comment-value[b-pbf2f1ni9m] {
    width: 100%;
    padding: 1rem;
    background: var(--gray-50);
    border-radius: 8px;
    border: 1px solid var(--gray-200);
    white-space: pre-wrap;
    word-wrap: break-word;
    line-height: 1.6;
    margin-left: 0;
    text-align: left;
    font-weight: 400;
    color: var(--gray-700);
}

/* Answers Section */
.answers-section[b-pbf2f1ni9m] {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid var(--gray-200);
}

.answers-header[b-pbf2f1ni9m] {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.answers-title[b-pbf2f1ni9m] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.answers-title i[b-pbf2f1ni9m] {
    color: var(--acv-primary);
    font-size: 1rem;
}

.answers-summary[b-pbf2f1ni9m] {
    display: flex;
    align-items: center;
}

.total-rating-badge[b-pbf2f1ni9m] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--warning-lighter);
    color: var(--warning-dark);
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid rgba(255, 171, 0, 0.3);
    box-shadow: 0 2px 4px rgba(255, 171, 0, 0.15);
}

.total-rating-badge i[b-pbf2f1ni9m] {
    font-size: 0.85rem;
    color: var(--warning-dark);
}

/* Badge Count */
.badge-count[b-pbf2f1ni9m] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-600);
    background: var(--gray-100);
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    margin-left: 0.5rem;
}

/* Feedback ID Badge */
.feedback-id-badge[b-pbf2f1ni9m] {
    display: inline-flex;
    align-items: center;
    font-family: 'Courier New', monospace;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--acv-primary);
    background: var(--acv-primary-50);
    padding: 0.375rem 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--acv-primary-lighter);
    letter-spacing: 0.5px;
}

/* Exam Link */
.exam-link[b-pbf2f1ni9m] {
    color: var(--acv-primary);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
}

.exam-link:hover[b-pbf2f1ni9m] {
    color: var(--acv-primary-700);
    text-decoration: underline;
}

/* Subject Link */
.subject-link[b-pbf2f1ni9m] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--gray-800);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
}

.subject-link:hover[b-pbf2f1ni9m] {
    color: var(--acv-primary);
    background: var(--acv-primary-50);
    text-decoration: none;
}

.subject-link i[b-pbf2f1ni9m] {
    color: var(--acv-primary);
    font-size: 0.9rem;
}

.subject-link:hover i[b-pbf2f1ni9m] {
    color: var(--acv-primary-700);
}

/* Rating Badge */
.rating-badge[b-pbf2f1ni9m] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    background: var(--warning-lighter);
    color: var(--warning-dark);
    border: 1px solid rgba(255, 171, 0, 0.3);
    box-shadow: 0 2px 4px rgba(255, 171, 0, 0.15);
}

.rating-badge i[b-pbf2f1ni9m] {
    font-size: 0.8rem;
    color: var(--warning-dark);
}

/* Answers Table */
.answers-table[b-pbf2f1ni9m] {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.answers-table thead[b-pbf2f1ni9m] {
    background: var(--gray-50);
}

.answers-table th[b-pbf2f1ni9m] {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--gray-800);
    font-size: 0.95rem;
    border-bottom: 2px solid var(--gray-200);
}

.answers-table td[b-pbf2f1ni9m] {
    padding: 1rem;
    border-bottom: 1px solid var(--gray-100);
    color: var(--gray-700);
    font-size: 0.95rem;
}

.answers-table tbody tr:last-child td[b-pbf2f1ni9m] {
    border-bottom: none;
}

.answers-table tbody tr:hover[b-pbf2f1ni9m] {
    background: var(--gray-50);
}

.col-stt[b-pbf2f1ni9m] {
    width: 60px;
    text-align: center;
}

.answers-table th.col-stt[b-pbf2f1ni9m],
.answers-table td.col-stt[b-pbf2f1ni9m] {
    text-align: center;
    vertical-align: middle;
}

.col-question[b-pbf2f1ni9m] {
    width: auto;
}

.col-rating[b-pbf2f1ni9m] {
    width: 150px;
    text-align: center;
}

.answers-table th.col-rating[b-pbf2f1ni9m],
.answers-table td.col-rating[b-pbf2f1ni9m] {
    text-align: center;
    vertical-align: middle;
}

.answers-table td.col-rating[b-pbf2f1ni9m] {
    display: table-cell;
}

/* Answer Rating Badge */
.answer-rating-badge[b-pbf2f1ni9m] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    background: var(--success-lighter);
    color: var(--success-dark);
    border: 1px solid rgba(0, 200, 83, 0.3);
    box-shadow: 0 2px 4px rgba(0, 200, 83, 0.15);
}

.answer-rating-badge i[b-pbf2f1ni9m] {
    font-size: 0.8rem;
    color: var(--success-dark);
}

.empty-answers[b-pbf2f1ni9m] {
    text-align: center;
    padding: 2rem;
    color: var(--gray-500);
}

/* Form Actions */
.form-actions[b-pbf2f1ni9m] {
    display: flex;
    justify-content: flex-start;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--gray-200);
    }

.btn-secondary[b-pbf2f1ni9m] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--acv-white);
    color: var(--acv-primary);
    border: 2px solid var(--acv-primary);
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

    .btn-secondary:hover[b-pbf2f1ni9m] {
        background: var(--acv-primary);
        color: var(--acv-white);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(33, 76, 166, 0.2);
    }

.btn-header[b-pbf2f1ni9m] {
    flex-shrink: 0;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    }

@media (max-width: 768px) {
    .feedback-details-page[b-pbf2f1ni9m] {
        padding: 1rem;
    }

    .details-header[b-pbf2f1ni9m] {
        padding: 1.5rem;
    }

    .header-content[b-pbf2f1ni9m] {
        flex-direction: column;
        text-align: center;
    }

    .details-content[b-pbf2f1ni9m] {
        gap: 1.5rem;
    }

    .details-content-wrapper[b-pbf2f1ni9m] {
        gap: 1.5rem;
    }

    .card-header[b-pbf2f1ni9m] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .card-title[b-pbf2f1ni9m] {
        width: 100%;
    }

    .btn-header[b-pbf2f1ni9m] {
        width: 100%;
        justify-content: center;
    }

    .card-body[b-pbf2f1ni9m] {
        padding: 1rem;
    }

    .info-item[b-pbf2f1ni9m] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .info-value[b-pbf2f1ni9m] {
        text-align: left;
        margin-left: 0;
        width: 100%;
    }

    .answers-table[b-pbf2f1ni9m] {
        font-size: 0.875rem;
    }

    .answers-table th[b-pbf2f1ni9m],
    .answers-table td[b-pbf2f1ni9m] {
        padding: 0.75rem;
    }

    .form-actions[b-pbf2f1ni9m] {
        flex-direction: column;
    }

    .btn-secondary[b-pbf2f1ni9m] {
        width: 100%;
        justify-content: center;
    }
}
/* _content/ltia.portal.web/Components/Exams/Admin/Pages/Feedbacks/Index.razor.rz.scp.css */
.feedbacks-page[b-g4rn8x8ty2] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-50: rgba(33, 76, 166, 0.05);
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    
    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* feedbacks Page Styles - Based on MVC Design System */
label[b-g4rn8x8ty2] {
    color: var(--gray-700);
    margin: 0;
}

/* Card Header Section */
.card-header-section[b-g4rn8x8ty2] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.card-header-content[b-g4rn8x8ty2] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.card-header-icon[b-g4rn8x8ty2] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
}

.card-header-text h1[b-g4rn8x8ty2] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-800);
}

.card-header-text p[b-g4rn8x8ty2] {
    margin: 0.25rem 0 0 0;
    color: var(--gray-600);
    font-size: 1rem;
}

/* Search Section */
.feedbacks-search-section[b-g4rn8x8ty2] {
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    margin-bottom: 2rem;
    overflow: visible;
    position: relative;
    z-index: 200;
}

.search-container[b-g4rn8x8ty2] {
    padding: 2rem;
}

.search-header[b-g4rn8x8ty2] {
    margin-bottom: 1.5rem;
    text-align: center;
}

.search-title[b-g4rn8x8ty2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 0.5rem 0;
}

.search-title i[b-g4rn8x8ty2] {
    color: var(--acv-primary);
    font-size: 1.3rem;
}

.search-subtitle[b-g4rn8x8ty2] {
    color: var(--gray-600);
    font-size: 1rem;
    margin: 0;
    font-weight: 400;
}

.search-content[b-g4rn8x8ty2] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow: visible;
}

.search-main-row[b-g4rn8x8ty2] {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 1.5rem;
    position: relative;
    z-index: 20;
    flex-wrap: wrap;
    overflow: visible;
}

.search-input-group[b-g4rn8x8ty2] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
    z-index: 20;
}

.search-input-main[b-g4rn8x8ty2] {
    flex: 1;
    min-width: 400px;
    max-width: 700px;
}

.search-input-filter[b-g4rn8x8ty2] {
    flex: 0 0 auto;
    min-width: 200px;
    max-width: 250px;
    position: relative;
    z-index: 1000;
    overflow: visible;
}

.search-input-date[b-g4rn8x8ty2] {
    flex: 0 0 auto;
    min-width: 300px;
    max-width: 400px;
    position: relative;
    z-index: 1000;
    overflow: visible;
}

.form-label[b-g4rn8x8ty2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-700);
    margin: 0;
}

.form-label i[b-g4rn8x8ty2] {
    color: var(--acv-primary);
    font-size: 0.8rem;
}

.form-input[b-g4rn8x8ty2] {
    min-width: 0;
    width: 100%;
    height: 48px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--acv-white);
    box-sizing: border-box;
}

.form-input:focus[b-g4rn8x8ty2] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.search-controls[b-g4rn8x8ty2] {
    display: flex;
    gap: 0.75rem;
    align-items: end;
    position: relative;
    z-index: 20;
    flex-shrink: 0;
    min-width: 120px;
    flex: 0 0 120px;
}

.search-btn[b-g4rn8x8ty2], .clear-btn[b-g4rn8x8ty2] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border: none;
    padding: 0.75rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 20;
    width: 48px;
    height: 48px;
    box-sizing: border-box;
}

.search-btn:hover[b-g4rn8x8ty2] {
    background: var(--acv-primary-700);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

.clear-btn[b-g4rn8x8ty2] {
    background: var(--gray-500);
}

.clear-btn:hover[b-g4rn8x8ty2] {
    background: var(--gray-600);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* DateTimeInput styling trong search section */
.search-input-date[b-g4rn8x8ty2]  .datetime-input-group {
    margin-bottom: 0;
    position: relative;
    z-index: 1000;
}

.search-input-date[b-g4rn8x8ty2]  .datetime-label {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-700);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.search-input-date[b-g4rn8x8ty2]  .datetime-label i {
    color: var(--acv-primary);
    font-size: 0.8rem;
}

.search-input-date[b-g4rn8x8ty2]  .datetime-input-group-wrapper {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.search-input-date[b-g4rn8x8ty2]  .datetime-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0 !important;
    width: 100%;
}

.search-input-date[b-g4rn8x8ty2]  .datetime-input {
    width: 100%;
    height: 48px;
    padding: 0.75rem 2.5rem 0.75rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--acv-white);
    box-sizing: border-box;
}

.search-input-date[b-g4rn8x8ty2]  .datetime-input:focus {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

/* Calendar picker positioning */
.search-input-date[b-g4rn8x8ty2]  .datetime-picker {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    width: 100% !important;
    min-width: 280px;
    max-width: 320px;
    margin-top: 0 !important;
    z-index: 10000 !important;
}

/* feedbacks Table Styling */
.feedbacks-table-container[b-g4rn8x8ty2] {
    overflow-x: auto;
    border-radius: 12px;
}

.feedbacks-table[b-g4rn8x8ty2] {
    width: 100%;
    border-collapse: collapse;
    background: var(--acv-white);
    border-radius: 12px;
    overflow: hidden;
}

/* Table Header */
.table-header-row[b-g4rn8x8ty2] {
    background: var(--gray-50);
    border-bottom: 2px solid var(--gray-200);
}

.table-header-row th[b-g4rn8x8ty2] {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--gray-700);
    font-size: 0.9rem;
    border-bottom: 2px solid var(--gray-200);
    position: relative;
}

/* Column Widths */
.col-stt[b-g4rn8x8ty2] {
    width: 60px;
    text-align: center !important;
}

.col-name[b-g4rn8x8ty2] {
    width: auto;
    min-width: 200px;
}

.col-slug[b-g4rn8x8ty2] {
    width: 200px;
}

.col-id[b-g4rn8x8ty2] {
    width: 100px;
    text-align: center !important;
}

.col-actions[b-g4rn8x8ty2] {
/*    width: 180px;*/
    text-align: center !important;
}

/* Table Body */
.table-row[b-g4rn8x8ty2] {
    border-bottom: 1px solid var(--gray-200);
    transition: all 0.2s ease;
}

.table-row:hover[b-g4rn8x8ty2] {
    background: var(--gray-50);
}

.table-row:last-child[b-g4rn8x8ty2] {
    border-bottom: none;
}

.table-row td[b-g4rn8x8ty2] {
    padding: 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--gray-200);
}

/* STT Column */
.stt-number[b-g4rn8x8ty2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--gray-100);
    color: var(--gray-600);
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Tag Name Column */
.tag-name-cell[b-g4rn8x8ty2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.tag-icon[b-g4rn8x8ty2] {
    color: var(--acv-primary, #214ca6);
    font-size: 1rem;
    width: 20px;
    text-align: center;
}

.tag-name-text[b-g4rn8x8ty2] {
    font-weight: 500;
    color: var(--gray-800, #1f2937);
    font-size: 0.95rem;
    line-height: 1.4;
}

/* Slug Column */
.tag-slug[b-g4rn8x8ty2] {
    color: var(--gray-600, #4b5563);
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    background: var(--gray-100, #f3f4f6);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    display: inline-block;
}

/* ID Column */
.tag-id[b-g4rn8x8ty2] {
    color: var(--gray-600, #4b5563);
    font-weight: 600;
    font-size: 0.9rem;
}

/* Action Buttons */
.action-buttons[b-g4rn8x8ty2] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
}

.action-btn-table[b-g4rn8x8ty2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    text-decoration: none;
    background: linear-gradient(135deg, rgba(33, 76, 166, 0.1) 0%, rgba(33, 76, 166, 0.15) 100%);
    color: var(--acv-primary);
    border: 1px solid rgba(33, 76, 166, 0.2);
}

.action-btn-table:hover[b-g4rn8x8ty2] {
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
    border-color: var(--acv-primary);
}

.action-btn-table.edit[b-g4rn8x8ty2] {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 193, 7, 0.15) 100%);
    color: #ffc107;
    border-color: rgba(255, 193, 7, 0.3);
}

.action-btn-table.edit:hover[b-g4rn8x8ty2] {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
    color: var(--acv-white);
    border-color: #ffc107;
}

.action-btn-table.delete[b-g4rn8x8ty2] {
    background: linear-gradient(135deg, rgba(255, 86, 48, 0.1) 0%, rgba(255, 86, 48, 0.15) 100%);
    color: var(--error-main);
    border-color: rgba(255, 86, 48, 0.3);
}

.action-btn-table.delete:hover[b-g4rn8x8ty2] {
    background: linear-gradient(135deg, var(--error-main) 0%, var(--error-dark) 100%);
    color: var(--acv-white);
    border-color: var(--error-main);
}

.action-btn-table.view[b-g4rn8x8ty2] {
    background: linear-gradient(135deg, rgba(33, 76, 166, 0.1) 0%, rgba(33, 76, 166, 0.15) 100%);
    color: var(--acv-primary);
    border: 1px solid rgba(33, 76, 166, 0.2);
}

.action-btn-table.view:hover[b-g4rn8x8ty2] {
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
    border-color: var(--acv-primary);
}

/* Exam Link Styling */
.exam-link[b-g4rn8x8ty2] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--acv-primary);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
}

.exam-link:hover[b-g4rn8x8ty2] {
    color: var(--acv-primary-700);
    background: var(--acv-primary-50);
    text-decoration: none;
}

.exam-link i[b-g4rn8x8ty2] {
    color: var(--acv-primary);
    font-size: 0.9rem;
}

.exam-link:hover i[b-g4rn8x8ty2] {
    color: var(--acv-primary-700);
}

/* Subject Link Styling */
.subject-link[b-g4rn8x8ty2] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--gray-800);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
}

.subject-link:hover[b-g4rn8x8ty2] {
    color: var(--acv-primary);
    background: var(--acv-primary-50);
    text-decoration: none;
}

.subject-link i[b-g4rn8x8ty2] {
    color: var(--acv-primary);
    font-size: 0.9rem;
}

.subject-link:hover i[b-g4rn8x8ty2] {
    color: var(--acv-primary-700);
}

/* Rating Badge Styling */
.rating-badge[b-g4rn8x8ty2] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    background: var(--warning-lighter);
    color: var(--warning-dark);
    border: 1px solid rgba(255, 171, 0, 0.3);
    box-shadow: 0 2px 4px rgba(255, 171, 0, 0.15);
}

.rating-badge i[b-g4rn8x8ty2] {
    font-size: 0.8rem;
    color: var(--warning-dark);
}

/* List Container */
.feedbacks-list-container[b-g4rn8x8ty2] {
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    overflow: hidden;
}

.feedbacks-list[b-g4rn8x8ty2] {
    padding: 1.5rem;
    min-height: 200px;
}

/* List Header Styling - Match QuestionBank/Details */
.list-header[b-g4rn8x8ty2] {
    background: var(--acv-white) !important;
    padding: 1.75rem 2rem;
    border-bottom: 1px solid var(--gray-200);
    border-radius: 16px 16px 0 0;
    position: relative;
    z-index: 100;
    overflow: visible;
}

.list-header[b-g4rn8x8ty2]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 16px 0 0 0;
    z-index: 1;
}

.list-header-content[b-g4rn8x8ty2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0;
    flex-wrap: wrap;
}

.list-title-section[b-g4rn8x8ty2] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.list-title[b-g4rn8x8ty2] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.list-title i[b-g4rn8x8ty2] {
    color: var(--acv-primary);
    font-size: 1.25rem;
}

.list-count[b-g4rn8x8ty2] {
    background: var(--acv-primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Sort Controls - Match QuestionBank/Details */
.sort-controls[b-g4rn8x8ty2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.sort-dropdown-btn[b-g4rn8x8ty2],
.refresh-btn[b-g4rn8x8ty2],
.add-tag-btn[b-g4rn8x8ty2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--acv-white, #ffffff);
    color: var(--acv-primary, #214ca6);
    border: 2px solid var(--acv-primary, #214ca6);
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 120px;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.15);
    text-decoration: none;
}

.sort-dropdown-btn[b-g4rn8x8ty2] {
    justify-content: space-between;
}

.add-tag-btn[b-g4rn8x8ty2] {
    background: var(--acv-primary, #214ca6);
    color: var(--acv-white, #ffffff);
}

.sort-dropdown-btn:hover[b-g4rn8x8ty2],
.refresh-btn:hover[b-g4rn8x8ty2] {
    background: var(--acv-primary, #214ca6);
    color: var(--acv-white, #ffffff);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(33, 76, 166, 0.3);
    text-decoration: none;
}

.add-tag-btn:hover[b-g4rn8x8ty2] {
    background: var(--acv-primary-700, #1e40af);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(33, 76, 166, 0.4);
    text-decoration: none;
}

/* Sort Dropdown */
.sort-dropdown[b-g4rn8x8ty2] {
    position: relative;
    display: inline-block;
    z-index: 10000;
}

.sort-dropdown.active .sort-dropdown-btn[b-g4rn8x8ty2] {
    background: var(--acv-primary, #214ca6);
    color: var(--acv-white, #ffffff);
}

.sort-dropdown-btn i.rotate[b-g4rn8x8ty2] {
    transform: rotate(180deg);
}

/* Sort Dropdown Menu */
.sort-dropdown-menu[b-g4rn8x8ty2] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--acv-white, #ffffff);
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    margin-top: 0.5rem;
    padding: 0.5rem;
    z-index: 10001;
    min-width: 200px;
    animation: dropdownFadeIn-b-g4rn8x8ty2 0.2s ease-out;
}

@keyframes dropdownFadeIn-b-g4rn8x8ty2 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sort-option[b-g4rn8x8ty2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.875rem 1rem;
    background: var(--acv-white);
    border: none;
    color: var(--acv-primary);
    font-size: 0.875rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    border-bottom: 1px solid var(--gray-100);
}

.sort-option:last-child[b-g4rn8x8ty2] {
    border-bottom: none;
}

.sort-option:hover[b-g4rn8x8ty2] {
    background: var(--acv-primary-50, rgba(33, 76, 166, 0.05));
    color: var(--acv-primary, #214ca6);
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.1);
}

.sort-option.active[b-g4rn8x8ty2] {
    background: var(--acv-primary-50, rgba(33, 76, 166, 0.05));
    color: var(--acv-primary, #214ca6);
    font-weight: 600;
}

.sort-option i[b-g4rn8x8ty2] {
    color: var(--acv-primary, #214ca6);
    font-size: 0.9rem;
    width: 16px;
    text-align: center;
}

.sort-option span[b-g4rn8x8ty2] {
    flex: 1;
}

.sort-option .check-icon[b-g4rn8x8ty2] {
    color: var(--acv-primary, #214ca6);
    font-size: 0.8rem;
    margin-left: auto;
}

.sort-divider[b-g4rn8x8ty2] {
    height: 1px;
    background: var(--gray-200, #e5e7eb);
    margin: 0.5rem 0;
}

/* Table Footer Styling - Match QuestionBank/Details */
.table-footer[b-g4rn8x8ty2] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--acv-white);
    border-top: 1px solid var(--gray-200);
    border-radius: 0 0 16px 16px;
    gap: 2rem;
    flex-wrap: wrap;
}

.results-info[b-g4rn8x8ty2] {
    font-size: 0.9rem;
    color: var(--gray-600);
    font-weight: 500;
}

.pagination-container[b-g4rn8x8ty2] {
    display: flex;
    align-items: center;
}

.pagination-nav[b-g4rn8x8ty2] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagination-btn[b-g4rn8x8ty2] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: var(--acv-white);
    color: var(--gray-600);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s ease;
    cursor: pointer;
}

.pagination-btn:hover:not(:disabled)[b-g4rn8x8ty2] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border-color: var(--acv-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.15);
}

.pagination-btn.active[b-g4rn8x8ty2] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border-color: var(--acv-primary);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
}

.pagination-btn:disabled[b-g4rn8x8ty2] {
    background: var(--gray-100);
    border-color: var(--gray-200);
    color: var(--gray-400);
    cursor: not-allowed;
}

/* Empty State Styling */
.empty-state[b-g4rn8x8ty2] {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--gray-600);
}

.empty-state-icon[b-g4rn8x8ty2] {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--gray-400);
}

.empty-state-icon i.fa-spin[b-g4rn8x8ty2] {
    color: var(--acv-primary);
}

.empty-state h3[b-g4rn8x8ty2] {
    margin-bottom: 0.5rem;
    color: var(--gray-700);
    font-size: 1.25rem;
    font-weight: 600;
}

.empty-state p[b-g4rn8x8ty2] {
    margin-bottom: 2rem;
    color: var(--gray-600);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.empty-state-actions[b-g4rn8x8ty2] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-primary[b-g4rn8x8ty2] {
    background: var(--acv-primary, #214ca6);
    color: var(--acv-white, #ffffff);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(33, 76, 166, 0.2);
}

.btn-primary:hover[b-g4rn8x8ty2] {
    background: var(--acv-primary-700, #1e40af);
    color: var(--acv-white, #ffffff);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

/* SelectSearch styling */
.search-input-filter[b-g4rn8x8ty2]  .select-search {
    width: 100%;
    position: relative;
    z-index: 1000;
}

.search-input-filter[b-g4rn8x8ty2]  .select-search-input-wrapper {
    position: relative;
    z-index: 1000;
}

.search-input-filter[b-g4rn8x8ty2]  .select-search-input {
    width: 100%;
    height: 48px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--acv-white);
    box-sizing: border-box;
}

.search-input-filter[b-g4rn8x8ty2]  .select-search-input:focus {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.search-input-filter[b-g4rn8x8ty2]  .select-search-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    background: var(--acv-white);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    max-height: calc(4 * 48px + 0.5rem);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 10000 !important;
    margin-top: 0.5rem;
}

/* Custom scrollbar for dropdown */
.search-input-filter[b-g4rn8x8ty2]  .select-search-dropdown::-webkit-scrollbar {
    width: 6px;
}

.search-input-filter[b-g4rn8x8ty2]  .select-search-dropdown::-webkit-scrollbar-track {
    background: var(--gray-100);
    border-radius: 3px;
}

.search-input-filter[b-g4rn8x8ty2]  .select-search-dropdown::-webkit-scrollbar-thumb {
    background: var(--gray-400);
    border-radius: 3px;
}

.search-input-filter[b-g4rn8x8ty2]  .select-search-dropdown::-webkit-scrollbar-thumb:hover {
    background: var(--gray-500);
}

.search-input-filter[b-g4rn8x8ty2]  .select-search-item {
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid var(--gray-100);
    min-height: 48px;
    display: flex;
    align-items: center;
}

.search-input-filter[b-g4rn8x8ty2]  .select-search-item:last-child {
    border-bottom: none;
}

.search-input-filter[b-g4rn8x8ty2]  .select-search-item:hover {
    background: var(--acv-primary-50);
    color: var(--acv-primary);
}

.search-input-filter[b-g4rn8x8ty2]  .dropdown-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.search-input-filter[b-g4rn8x8ty2]  .option-name {
    flex: 1;
    font-weight: 500;
    color: var(--gray-800);
}

.search-input-filter[b-g4rn8x8ty2]  .option-code {
    font-size: 0.875rem;
    color: var(--gray-600);
    background: var(--gray-100);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
}

/* Responsive Design */
@media (max-width: 768px) {
    /* List Header Responsive */
    .list-header[b-g4rn8x8ty2] {
        padding: 1.25rem 1.5rem;
    }
    
    .list-header-content[b-g4rn8x8ty2] {
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
    }
    
    .list-title-section[b-g4rn8x8ty2] {
        justify-content: space-between;
    }
    
    .list-title[b-g4rn8x8ty2] {
        font-size: 1.25rem;
    }
    
    /* Sort Controls Responsive */
    .sort-controls[b-g4rn8x8ty2] {
        gap: 0.5rem;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    
    .sort-dropdown-btn[b-g4rn8x8ty2],
    .refresh-btn[b-g4rn8x8ty2],
    .add-tag-btn[b-g4rn8x8ty2] {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
        min-width: 100px;
    }
    
    .sort-dropdown-menu[b-g4rn8x8ty2] {
        min-width: 180px;
    }
    
    .sort-option[b-g4rn8x8ty2] {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }
    
    /* Table Responsive */
    .feedbacks-table-container[b-g4rn8x8ty2] {
        margin: 0 -1.5rem;
        border-radius: 0;
    }
    
    .feedbacks-table[b-g4rn8x8ty2] {
        min-width: 600px;
    }
    
    .table-header-row th[b-g4rn8x8ty2],
    .table-row td[b-g4rn8x8ty2] {
        padding: 0.75rem 0.5rem;
    }

    .table-header-row th[role="button"][b-g4rn8x8ty2] {
        cursor: pointer;
        user-select: none;
        transition: color 0.15s;
    }
    .table-header-row th[role="button"]:hover[b-g4rn8x8ty2] {
        color: var(--acv-primary);
        background: var(--gray-100);
    }
    .table-header-row th[role="button"] i.fas[b-g4rn8x8ty2] {
        margin-left: .5em;
        color: var(--acv-primary);
    }
    
    .col-name[b-g4rn8x8ty2] {
        min-width: 150px;
    }
    
    .col-slug[b-g4rn8x8ty2] {
        width: 150px;
    }
    
    .col-id[b-g4rn8x8ty2] {
        width: 80px;
    }
    
    .col-actions[b-g4rn8x8ty2] {
        width: 140px;
    }
    
    .stt-number[b-g4rn8x8ty2] {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }
    
    .action-btn-table[b-g4rn8x8ty2] {
        width: 40px;
        height: 28px;
        font-size: 0.8rem;
    }
    
    .tag-name-cell[b-g4rn8x8ty2] {
        gap: 0.5rem;
    }
    
    .tag-name-text[b-g4rn8x8ty2] {
        font-size: 0.9rem;
    }
    
    /* Table Footer Responsive */
    .table-footer[b-g4rn8x8ty2] {
        padding: 1rem;
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        text-align: center;
    }
    
    .results-info[b-g4rn8x8ty2] {
        font-size: 0.8rem;
    }
    
    .pagination-container[b-g4rn8x8ty2] {
        justify-content: center;
    }
    
    .pagination-btn[b-g4rn8x8ty2] {
        min-width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .table-header-row th[b-g4rn8x8ty2],
    .table-row td[b-g4rn8x8ty2] {
        padding: 0.5rem 0.25rem;
    }
    
    .tag-slug[b-g4rn8x8ty2] {
        font-size: 0.8rem;
        padding: 0.2rem 0.4rem;
    }
    
    .action-buttons[b-g4rn8x8ty2] {
        gap: 0.125rem;
    }
    
    .action-btn-table[b-g4rn8x8ty2] {
        width: 36px;
        height: 26px;
        font-size: 0.75rem;
    }
    
    /* Mobile List Header */
    .list-header[b-g4rn8x8ty2] {
        padding: 1rem;
    }
    
    .list-title[b-g4rn8x8ty2] {
        font-size: 1.1rem;
    }
    
    .list-count[b-g4rn8x8ty2] {
        padding: 0.2rem 0.6rem;
        font-size: 0.75rem;
    }
    
    /* Mobile Sort Controls */
    .sort-controls[b-g4rn8x8ty2] {
        width: 100%;
        justify-content: space-between;
    }
    
    .sort-dropdown[b-g4rn8x8ty2] {
        flex: 1;
    }
    
    .sort-dropdown-btn[b-g4rn8x8ty2] {
        width: 100%;
        min-width: auto;
    }
    
    .refresh-btn[b-g4rn8x8ty2],
    .add-tag-btn[b-g4rn8x8ty2] {
        flex-shrink: 0;
        min-width: 80px;
    }
    
    /* Mobile Pagination */
    .pagination-btn[b-g4rn8x8ty2] {
        min-width: 28px;
        height: 28px;
        font-size: 0.75rem;
        padding: 0 0.5rem;
    }
}
/* _content/ltia.portal.web/Components/Exams/Admin/Pages/Index.razor.rz.scp.css */
/* CSS Variables - Đặt trực tiếp vào .exams-admin-home-page */
.exams-admin-home-page[b-oocp0ybv69] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --success-main: #00c853;
    --success-dark: #00a152;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --info-main: #3b82f6;
    --info-dark: #2563eb;
    
    min-height: 100vh;
    padding: 2rem 1.5rem;
    background-color: var(--gray-100);
}

/* Welcome Section */
.welcome-section[b-oocp0ybv69] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 3rem 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    text-align: center;
}

.welcome-icon[b-oocp0ybv69] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: var(--acv-white);
    font-size: 2.5rem;
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

.welcome-section h1[b-oocp0ybv69] {
    margin: 0 0 1rem 0;
    font-size: 2rem;
    font-weight: 700;
    color: var(--gray-800);
}

.welcome-section p[b-oocp0ybv69] {
    margin: 0;
    color: var(--gray-600);
    font-size: 1.125rem;
    line-height: 1.6;
}

/* User Info Section */
.user-info-section[b-oocp0ybv69] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.user-info-header[b-oocp0ybv69] {
    margin-bottom: 1.5rem;
}

.user-info-header h2[b-oocp0ybv69] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-info-header h2 i[b-oocp0ybv69] {
    color: var(--acv-primary);
    font-size: 1.75rem;
}

/* User Info Grid */
.user-info-grid[b-oocp0ybv69] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.user-info-card[b-oocp0ybv69] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.user-info-card:hover[b-oocp0ybv69] {
    background: var(--acv-primary-lighter);
    border-color: var(--acv-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.15);
}

.user-info-card-full[b-oocp0ybv69] {
    grid-column: 1 / -1;
}

.user-info-icon[b-oocp0ybv69] {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.user-info-content[b-oocp0ybv69] {
    flex: 1;
    min-width: 0;
}

.user-info-label[b-oocp0ybv69] {
    font-size: 0.875rem;
    color: var(--gray-600);
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.user-info-value[b-oocp0ybv69] {
    font-size: 1rem;
    color: var(--gray-800);
    font-weight: 600;
    word-break: break-word;
}

.user-info-roles[b-oocp0ybv69] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.role-badge[b-oocp0ybv69] {
    background: linear-gradient(45deg, var(--acv-primary), var(--acv-primary-700));
    color: var(--acv-white);
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Statistics Section */
.statistics-section[b-oocp0ybv69] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.statistics-header[b-oocp0ybv69] {
    margin-bottom: 1.5rem;
}

.statistics-header h2[b-oocp0ybv69] {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.statistics-header h2 i[b-oocp0ybv69] {
    color: var(--acv-primary);
    font-size: 1.75rem;
}

.statistics-header p[b-oocp0ybv69] {
    margin: 0;
    color: var(--gray-600);
    font-size: 1rem;
}

/* Statistics Grid */
.statistics-grid[b-oocp0ybv69] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.stat-card[b-oocp0ybv69] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.stat-card:hover[b-oocp0ybv69] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-icon[b-oocp0ybv69] {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    flex-shrink: 0;
}

.stat-icon-primary[b-oocp0ybv69] {
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
}

.stat-icon-success[b-oocp0ybv69] {
    background: linear-gradient(135deg, #00c853 0%, #00a152 100%);
    color: var(--acv-white);
}

.stat-icon-warning[b-oocp0ybv69] {
    background: linear-gradient(135deg, #ffab00 0%, #f57c00 100%);
    color: var(--acv-white);
}

.stat-icon-info[b-oocp0ybv69] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: var(--acv-white);
}

.stat-icon-danger[b-oocp0ybv69] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: var(--acv-white);
}

.stat-content[b-oocp0ybv69] {
    flex: 1;
}

.stat-value[b-oocp0ybv69] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-800);
    line-height: 1.2;
    margin-bottom: 0.25rem;
}

.stat-label[b-oocp0ybv69] {
    font-size: 0.875rem;
    color: var(--gray-600);
    font-weight: 500;
}

/* Responsive */
@media (max-width: 768px) {
    .exams-admin-home-page[b-oocp0ybv69] {
        padding: 1.5rem 1rem;
    }

    .welcome-section[b-oocp0ybv69] {
        padding: 2rem 1.5rem;
    }

    .welcome-icon[b-oocp0ybv69] {
        width: 60px;
        height: 60px;
        font-size: 2rem;
    }

    .welcome-section h1[b-oocp0ybv69] {
        font-size: 1.5rem;
    }

    .welcome-section p[b-oocp0ybv69] {
        font-size: 1rem;
    }

    .user-info-section[b-oocp0ybv69],
    .statistics-section[b-oocp0ybv69] {
        padding: 1.5rem;
    }

    .user-info-grid[b-oocp0ybv69] {
        grid-template-columns: 1fr;
    }

    .statistics-grid[b-oocp0ybv69] {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .user-info-card[b-oocp0ybv69] {
        padding: 1rem;
    }

    .stat-card[b-oocp0ybv69] {
        padding: 1.25rem;
    }
}

@media (max-width: 480px) {
    .exams-admin-home-page[b-oocp0ybv69] {
        padding: 1rem 0.75rem;
    }

    .welcome-section[b-oocp0ybv69] {
        padding: 1.5rem 1rem;
    }

    .user-info-section[b-oocp0ybv69],
    .statistics-section[b-oocp0ybv69] {
        padding: 1rem;
    }

    .statistics-grid[b-oocp0ybv69] {
        grid-template-columns: 1fr;
    }

    .stat-value[b-oocp0ybv69] {
        font-size: 1.5rem;
    }
}

/* _content/ltia.portal.web/Components/Exams/Admin/Pages/Instructors/Create.razor.rz.scp.css */
/* Main Layout */
.instructors-page[b-9slnj26wfs] {
    padding: 2rem;
    background: #f8f9fa;
    min-height: 100vh;
}

.main-content-container[b-9slnj26wfs] {
    display: flex;
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.form-column[b-9slnj26wfs] {
    flex: 2;
    background: white;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.profile-column[b-9slnj26wfs] {
    flex: 1;
    min-width: 300px;
}

/* Form Sections */
.form-section[b-9slnj26wfs] {
    margin-bottom: 32px;
}

.section-header[b-9slnj26wfs] {
    margin-bottom: 20px;
}

.section-title[b-9slnj26wfs] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 700;
    color: #2d3748;
    margin: 0;
}

.section-title i[b-9slnj26wfs] {
    color: #214ca6;
    font-size: 16px;
}

.form-grid[b-9slnj26wfs] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Form Styling */
.form-group[b-9slnj26wfs] {
    margin-bottom: 24px;
}

.form-group.full-width[b-9slnj26wfs] {
    grid-column: 1 / -1;
    width: 100%;
}

.form-label[b-9slnj26wfs] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 8px;
    font-size: 14px;
}

.form-label i[b-9slnj26wfs] {
    color: #214ca6;
    width: 16px;
}

/* Employee Code Container - Full Width */
.employee-code-container[b-9slnj26wfs] {
    width: 100%;
}

.employee-input-wrapper[b-9slnj26wfs] {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.employee-code-input[b-9slnj26wfs] {
    width: 100%;
    padding: 16px 20px;
    padding-right: 60px;
    border: 1px solid #d1d5db; /* Giống Index: var(--gray-300) */
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    background: #ffffff;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.employee-code-input:focus[b-9slnj26wfs] {
    outline: none;
    border-color: #214ca6; /* Giống Index: var(--acv-primary) */
    border-width: 1px; /* Giữ nguyên độ dày để không nhảy layout khi focus */
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1); /* Giống Index */
    transform: translateY(-1px);
}

.employee-code-input[b-9slnj26wfs]::placeholder {
    color: #9ca3af;
    font-weight: 400;
}

/* Input with Validation */
.input-with-validation[b-9slnj26wfs] {
    position: relative;
}

.form-input[b-9slnj26wfs] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #d1d5db; /* Giống Index: var(--gray-300) */
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s ease;
    background: white;
}

.form-input:focus[b-9slnj26wfs] {
    outline: none;
    border-color: #214ca6; /* Giống Index: var(--acv-primary) */
    border-width: 1px; /* Giữ nguyên độ dày để không nhảy layout khi focus */
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1); /* Giống Index */
}

.validation-icon[b-9slnj26wfs] {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
}

.validation-icon.loading[b-9slnj26wfs] {
    color: #214ca6;
    animation: pulse-b-9slnj26wfs 1.5s ease-in-out infinite;
}

.validation-icon.success[b-9slnj26wfs] {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.validation-icon.error[b-9slnj26wfs] {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

@keyframes pulse-b-9slnj26wfs {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Employee Status Message */
.employee-status-message[b-9slnj26wfs] {
    margin-top: 16px;
    padding: 16px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 16px;
    animation: slideDown-b-9slnj26wfs 0.3s ease-out;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

@keyframes slideDown-b-9slnj26wfs {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.employee-status-message.loading[b-9slnj26wfs] {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #0ea5e9;
}

.employee-status-message.success[b-9slnj26wfs] {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #10b981;
}

.employee-status-message.error[b-9slnj26wfs] {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 1px solid #ef4444;
}

.status-icon[b-9slnj26wfs] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.employee-status-message.loading .status-icon[b-9slnj26wfs] {
    background: #0ea5e9;
    color: white;
}

.employee-status-message.success .status-icon[b-9slnj26wfs] {
    background: #10b981;
    color: white;
}

.employee-status-message.error .status-icon[b-9slnj26wfs] {
    background: #ef4444;
    color: white;
}

.status-content[b-9slnj26wfs] {
    flex: 1;
    min-width: 0;
}

.status-title[b-9slnj26wfs] {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    line-height: 1.4;
}

.employee-status-message.loading .status-title[b-9slnj26wfs] {
    color: #0369a1;
}

.employee-status-message.success .status-title[b-9slnj26wfs] {
    color: #047857;
}

.employee-status-message.error .status-title[b-9slnj26wfs] {
    color: #dc2626;
}

.status-subtitle[b-9slnj26wfs] {
    font-size: 14px;
    font-weight: 500;
    opacity: 0.8;
    line-height: 1.4;
}

.employee-status-message.loading .status-subtitle[b-9slnj26wfs] {
    color: #0369a1;
}

.employee-status-message.success .status-subtitle[b-9slnj26wfs] {
    color: #047857;
}

.employee-status-message.error .status-subtitle[b-9slnj26wfs] {
    color: #dc2626;
}

/* Textarea */
.form-textarea[b-9slnj26wfs] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #d1d5db; /* Giống Index: var(--gray-300) */
    border-radius: 8px;
    font-size: 14px;
    resize: vertical;
    min-height: 100px;
    transition: all 0.2s ease;
    font-family: inherit;
}

.form-textarea:focus[b-9slnj26wfs] {
    outline: none;
    border-color: #214ca6; /* Giống Index: var(--acv-primary) */
    border-width: 1px; /* Giữ nguyên độ dày để không nhảy layout khi focus */
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1); /* Giống Index */
}

.form-hint[b-9slnj26wfs] {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
}

/* Selected Subjects Section */
.selected-subjects-section[b-9slnj26wfs] {
    margin-top: 16px;
}

.selected-subjects-header[b-9slnj26wfs] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 12px;
    font-size: 14px;
}

.selected-subjects-header i[b-9slnj26wfs] {
    color: #10b981;
}

.selected-subjects-tags[b-9slnj26wfs] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.subject-tag[b-9slnj26wfs] {
    display: flex;
    align-items: center;
    background: #e6f3ff;
    border: 1px solid #214ca6;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 13px;
    color: #1a3d8a;
    transition: all 0.2s ease;
}

.subject-tag:hover[b-9slnj26wfs] {
    background: #bfdbfe;
}

.tag-text[b-9slnj26wfs] {
    margin-right: 6px;
}

.tag-remove[b-9slnj26wfs] {
    background: none;
    border: none;
    color: #1a3d8a;
    cursor: pointer;
    padding: 2px;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    margin-left: 4px;
}

.tag-remove:hover[b-9slnj26wfs] {
    background: #214ca6;
    color: white;
}

.no-subjects[b-9slnj26wfs] {
    color: #9ca3af;
    font-style: italic;
    font-size: 13px;
}

/* Compact dropdown items cho component SelectSearch */
[b-9slnj26wfs] .select-search-item {
    /* Giảm padding để chiều cao item nhỏ hơn */
    padding: 0.625rem 0.875rem !important; /* ~10px 14px */
}

[b-9slnj26wfs] .dropdown-option {
    /* Đồng bộ item template gọn hơn */
    padding: 8px 12px !important;
}

/* Subject Select Container - Deprecated, kept for backward compatibility */
.subject-select-container[b-9slnj26wfs] {
    position: relative;
}

.subject-select-wrapper[b-9slnj26wfs] {
    position: relative;
}

.selected-subjects[b-9slnj26wfs] {
    min-height: 48px;
    padding: 8px 12px;
    border: 1px solid #d1d5db; /* Giống Index: var(--gray-300) */
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff !important;
    color: #374151;
}

.selected-subjects:hover[b-9slnj26wfs] {
    border-color: #214ca6;
    border-width: 1px; /* Giữ nguyên độ dày để không nhảy layout */
}

.selected-subjects:focus-within[b-9slnj26wfs] {
    border-color: #214ca6; /* Giống Index: var(--acv-primary) */
    border-width: 1px; /* Giữ nguyên độ dày để không nhảy layout khi focus */
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1); /* Giống Index */
}

.selected-items[b-9slnj26wfs] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
}

.selected-item[b-9slnj26wfs] {
    display: flex;
    align-items: center;
    background: #e6f3ff;
    border: 1px solid #214ca6;
    border-radius: 20px;
    padding: 4px 8px;
    font-size: 13px;
    color: #1a3d8a;
    transition: all 0.2s ease;
}

.selected-item:hover[b-9slnj26wfs] {
    background: #bfdbfe;
}

.remove-btn[b-9slnj26wfs] {
    background: none;
    border: none;
    color: #1a3d8a;
    cursor: pointer;
    padding: 2px;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    margin-left: 4px;
}

.remove-btn:hover[b-9slnj26wfs] {
    background: #214ca6;
    color: white;
}

.placeholder[b-9slnj26wfs] {
    color: #9ca3af !important;
    font-style: italic;
    font-size: 14px;
    font-weight: 400;
    flex: 1;
    background-color: transparent !important;
}

.dropdown-icon[b-9slnj26wfs] {
    color: #6b7280;
    transition: transform 0.2s ease;
    margin-left: 8px;
}

.dropdown-icon.rotated[b-9slnj26wfs] {
    transform: rotate(180deg);
}

/* Subject Dropdown */
.subject-dropdown[b-9slnj26wfs] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 2px solid #e5e7eb;
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 50;
    max-height: 300px;
    overflow-y: auto;
}

.dropdown-search[b-9slnj26wfs] {
    padding: 12px;
    border-bottom: 1px solid #e5e7eb;
    position: relative;
}

.search-icon[b-9slnj26wfs] {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    font-size: 14px;
}

.search-input[b-9slnj26wfs] {
    width: 100%;
    padding: 8px 8px 8px 32px;
    border: 1px solid #d1d5db; /* Giống Index: var(--gray-300) */
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.search-input:focus[b-9slnj26wfs] {
    outline: none;
    border-color: #214ca6; /* Giống Index: var(--acv-primary) */
    border-width: 1px; /* Giữ nguyên độ dày để không nhảy layout khi focus */
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1); /* Giống Index */
}

.dropdown-options[b-9slnj26wfs] {
    padding: 8px 0;
    max-height: 208px; /* Giới hạn hiển thị 4 items (4 * ~48px + padding) */
    overflow-y: auto; /* Thêm scrollbar khi có nhiều hơn 4 items */
}

.dropdown-option[b-9slnj26wfs] {
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dropdown-option:hover[b-9slnj26wfs] {
    background: #f3f4f6;
}

.option-name[b-9slnj26wfs] {
    font-weight: 500;
    color: #374151;
}

.option-code[b-9slnj26wfs] {
    font-size: 12px;
    color: #6b7280;
    background: #f3f4f6;
    padding: 2px 8px;
    border-radius: 12px;
}

.no-results[b-9slnj26wfs] {
    padding: 20px;
    text-align: center;
    color: #6b7280;
    font-style: italic;
}

.no-results i[b-9slnj26wfs] {
    font-size: 24px;
    margin-bottom: 8px;
    display: block;
}

.search-prompt[b-9slnj26wfs] {
    padding: 20px;
    text-align: center;
    color: #9ca3af;
    font-style: italic;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: #f8f9fa;
    border-radius: 8px;
    margin: 8px;
}

.search-prompt i[b-9slnj26wfs] {
    font-size: 28px;
    opacity: 0.6;
}

.search-prompt span[b-9slnj26wfs] {
    font-size: 14px;
    font-weight: 500;
}

/* Profile Card */
.profile-card[b-9slnj26wfs] {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    height: fit-content;
    position: sticky;
    top: 20px;
}

.profile-header[b-9slnj26wfs] {
    text-align: center;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e7eb;
}

.profile-avatar[b-9slnj26wfs] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #214ca6 0%, #1a3d8a 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: white;
    font-size: 32px;
}

.profile-name[b-9slnj26wfs] {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 4px 0;
}

.profile-code[b-9slnj26wfs] {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

.profile-details[b-9slnj26wfs] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.detail-item[b-9slnj26wfs] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #e5e7eb;
}

.detail-item:last-child[b-9slnj26wfs] {
    border-bottom: none;
}

.detail-label[b-9slnj26wfs] {
    font-weight: 600;
    color: #111827;
    font-size: 14px;
}

.detail-value[b-9slnj26wfs] {
    color: #111827;
    font-size: 14px;
    text-align: right;
    max-width: 60%;
    word-wrap: break-word;
}

/* Form Actions */
.form-actions[b-9slnj26wfs] {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}

.btn-primary[b-9slnj26wfs], .btn-secondary[b-9slnj26wfs] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid;
    text-decoration: none;
    min-width: 140px;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-primary[b-9slnj26wfs] {
    background: #214ca6;
    color: white;
    border-color: #214ca6;
}

.btn-primary:hover:not(:disabled)[b-9slnj26wfs] {
    background: #1a3d8a;
    border-color: #1a3d8a;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(33, 76, 166, 0.3);
}

.btn-primary:disabled[b-9slnj26wfs] {
    background: #9ca3af;
    border-color: #9ca3af;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary[b-9slnj26wfs] {
    background: white;
    color: #111827;
    border-color: #d1d5db;
}

.btn-secondary:hover[b-9slnj26wfs] {
    background: #f9fafb;
    border-color: #9ca3af;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Responsive */
@media (max-width: 1024px) {
    .main-content-container[b-9slnj26wfs] {
        flex-direction: column;
    }
    
    .profile-column[b-9slnj26wfs] {
        min-width: unset;
    }
    
    .profile-card[b-9slnj26wfs] {
        position: static;
    }
    
    .form-grid[b-9slnj26wfs] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .main-content-container[b-9slnj26wfs] {
        padding: 0 16px;
    }
    
    .form-column[b-9slnj26wfs] {
        padding: 24px;
    }
    
    .form-actions[b-9slnj26wfs] {
        flex-direction: column;
    }
    
    .btn-primary[b-9slnj26wfs], .btn-secondary[b-9slnj26wfs] {
        justify-content: center;
    }
    
    /* Employee Code Mobile */
    .employee-code-input[b-9slnj26wfs] {
        padding: 14px 16px;
        padding-right: 50px;
        font-size: 15px;
    }
    
    .validation-icon[b-9slnj26wfs] {
        right: 16px;
        width: 20px;
        height: 20px;
        font-size: 12px;
    }
    
    .employee-status-message[b-9slnj26wfs] {
        padding: 14px 16px;
        gap: 12px;
    }
    
    .status-icon[b-9slnj26wfs] {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
    
    .status-title[b-9slnj26wfs] {
        font-size: 15px;
    }
    
    .status-subtitle[b-9slnj26wfs] {
        font-size: 13px;
    }
}

/* Loading and Error States */
.loading-container[b-9slnj26wfs], .error-container[b-9slnj26wfs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.loading-container .spinner-border[b-9slnj26wfs] {
    margin-bottom: 16px;
}

.error-container .error-icon[b-9slnj26wfs] {
    font-size: 48px;
    color: #ef4444;
    margin-bottom: 16px;
}

.error-container h3[b-9slnj26wfs] {
    color: #111827;
    margin-bottom: 8px;
}

.error-container p[b-9slnj26wfs] {
    color: #6b7280;
    margin-bottom: 24px;
}

/* Header Section */
.instructors-card-header[b-9slnj26wfs] {
    background: #ffffff;
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-content[b-9slnj26wfs] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-icon[b-9slnj26wfs] {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #214ca6 0%, #1a3d8a 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.5rem;
}

.header-text[b-9slnj26wfs] {
    flex: 1;
}

.header-title[b-9slnj26wfs] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #2d3748;
    margin: 0 0 0.5rem 0;
}

.header-subtitle[b-9slnj26wfs] {
    font-size: 1rem;
    color: #718096;
    margin: 0;
}

/* Page Footer */
.page-footer[b-9slnj26wfs] {
    margin-top: 32px;
    padding: 24px 0;
    border-top: 1px solid #e5e7eb;
    background: #ffffff;
}

.footer-actions[b-9slnj26wfs] {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    align-items: center;
}

.footer-actions .btn-secondary[b-9slnj26wfs],
.footer-actions .btn-primary[b-9slnj26wfs] {
    min-width: 140px;
    height: 44px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.footer-actions .btn-secondary[b-9slnj26wfs] {
    background: #f8f9fa;
    border: 2px solid #e5e7eb;
    color: #6b7280;
}

.footer-actions .btn-secondary:hover[b-9slnj26wfs] {
    background: #e9ecef;
    border-color: #d1d5db;
    color: #374151;
}

.footer-actions .btn-primary[b-9slnj26wfs] {
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%);
    border: 2px solid #214ca6;
    color: white;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
}

.footer-actions .btn-primary:hover:not(:disabled)[b-9slnj26wfs] {
    background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%);
    border-color: #1e40af;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

.footer-actions .btn-primary:disabled[b-9slnj26wfs] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Responsive Footer */
@media (max-width: 768px) {
    .page-footer[b-9slnj26wfs] {
        margin-top: 24px;
        padding: 20px 0;
    }
    
    .footer-actions[b-9slnj26wfs] {
        flex-direction: column;
        gap: 12px;
    }
    
    .footer-actions .btn-secondary[b-9slnj26wfs],
    .footer-actions .btn-primary[b-9slnj26wfs] {
        width: 100%;
        min-width: auto;
    }
}
/* _content/ltia.portal.web/Components/Exams/Admin/Pages/Instructors/Details.razor.rz.scp.css */
/* Instructor Details Page */
.instructor-details-page[b-s9slmkhf1i] {
    padding: 2rem;
    background: #f8f9fa;
    min-height: 100vh;
}

/* Header Section */
.details-header[b-s9slmkhf1i] {
    background: #ffffff;
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-content[b-s9slmkhf1i] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-icon[b-s9slmkhf1i] {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #214ca6 0%, #1a3d8a 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.5rem;
}

.header-text[b-s9slmkhf1i] {
    flex: 1;
}

.header-title[b-s9slmkhf1i] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #2d3748;
    margin: 0 0 0.5rem 0;
}

.header-subtitle[b-s9slmkhf1i] {
    font-size: 1rem;
    color: #718096;
    margin: 0;
}

.header-actions[b-s9slmkhf1i] {
    display: flex;
    gap: 1rem;
}

.header-actions .btn[b-s9slmkhf1i] {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.header-actions .btn-secondary[b-s9slmkhf1i] {
    background: #ffffff;
    color: #718096;
    border: 2px solid #e2e8f0;
}

.header-actions .btn-secondary:hover[b-s9slmkhf1i] {
    background: #f7fafc;
    border-color: #cbd5e0;
    transform: translateY(-1px);
}

.header-actions .btn-primary[b-s9slmkhf1i] {
    background: #214ca6;
    color: #ffffff;
    border: 2px solid #214ca6;
}

.header-actions .btn-primary:hover[b-s9slmkhf1i] {
    background: #1a3d8a;
    border-color: #1a3d8a;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

/* Loading Container */
.loading-container[b-s9slmkhf1i] {
    text-align: center;
    padding: 4rem 2rem;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.loading-container .spinner-border[b-s9slmkhf1i] {
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
}

.loading-container p[b-s9slmkhf1i] {
    color: #718096;
    font-size: 1.1rem;
    margin: 0;
}

/* Error Container */
.error-container[b-s9slmkhf1i] {
    text-align: center;
    padding: 4rem 2rem;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.error-icon[b-s9slmkhf1i] {
    font-size: 4rem;
    color: #e53e3e;
    margin-bottom: 1.5rem;
}

.error-container h3[b-s9slmkhf1i] {
    color: #2d3748;
    margin-bottom: 1rem;
}

.error-container p[b-s9slmkhf1i] {
    color: #718096;
    margin-bottom: 2rem;
}

/* Details Content */
.details-content[b-s9slmkhf1i] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Profile Card */
.profile-card[b-s9slmkhf1i] {
    background: #ffffff;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.profile-header[b-s9slmkhf1i] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.profile-avatar[b-s9slmkhf1i] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #214ca6 0%, #1a3d8a 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 2rem;
}

.profile-info[b-s9slmkhf1i] {
    flex: 1;
}

.profile-name[b-s9slmkhf1i] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2d3748;
    margin: 0 0 0.5rem 0;
}

.profile-code[b-s9slmkhf1i] {
    font-size: 1rem;
    color: #718096;
    margin: 0 0 0.5rem 0;
}

.profile-description[b-s9slmkhf1i] {
    font-size: 0.95rem;
    color: #4a5568;
    margin: 0;
    line-height: 1.5;
}

.profile-actions[b-s9slmkhf1i] {
    display: flex;
    gap: 1rem;
}

.profile-actions .btn[b-s9slmkhf1i] {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.profile-actions .btn-outline-primary[b-s9slmkhf1i] {
    background: #ffffff;
    color: #214ca6;
    border: 2px solid #214ca6;
}

.profile-actions .btn-outline-primary:hover[b-s9slmkhf1i] {
    background: #214ca6;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

.profile-actions .btn-outline-danger[b-s9slmkhf1i] {
    background: #ffffff;
    color: #e53e3e;
    border: 2px solid #e53e3e;
}

.profile-actions .btn-outline-danger:hover[b-s9slmkhf1i] {
    background: #e53e3e;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(229, 62, 62, 0.3);
}

/* Details Grid */
.details-grid[b-s9slmkhf1i] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
}

/* Detail Card */
.detail-card[b-s9slmkhf1i] {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.card-header[b-s9slmkhf1i] {
    background: #f7fafc;
    padding: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.card-title[b-s9slmkhf1i] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #2d3748;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.card-title i[b-s9slmkhf1i] {
    color: #214ca6;
    font-size: 1.1rem;
}

.card-body[b-s9slmkhf1i] {
    padding: 1.5rem;
}

/* Info Item */
.info-item[b-s9slmkhf1i] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid #f7fafc;
}

.info-item:last-child[b-s9slmkhf1i] {
    border-bottom: none;
}

.info-label[b-s9slmkhf1i] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    color: #4a5568;
    font-size: 0.95rem;
}

.info-label i[b-s9slmkhf1i] {
    color: #214ca6;
    width: 16px;
}

.info-value[b-s9slmkhf1i] {
    font-weight: 600;
    color: #2d3748;
    font-size: 0.95rem;
}

.status-active[b-s9slmkhf1i] {
    color: #38a169;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-active i[b-s9slmkhf1i] {
    color: #38a169;
}

/* Subjects List */
.subjects-list[b-s9slmkhf1i] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.subject-item[b-s9slmkhf1i] {
    display: flex;
    align-items: center;
    padding: 1rem;
    background: #f7fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.subject-item:hover[b-s9slmkhf1i] {
    background: #edf2f7;
    border-color: #214ca6;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.1);
}

.subject-info[b-s9slmkhf1i] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.subject-name[b-s9slmkhf1i] {
    font-weight: 600;
    color: #2d3748;
    font-size: 0.95rem;
}

.subject-code[b-s9slmkhf1i] {
    font-size: 0.85rem;
    color: #718096;
}

.subject-item .btn[b-s9slmkhf1i] {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    border-radius: 6px;
}

/* Empty State */
.empty-state[b-s9slmkhf1i] {
    text-align: center;
    padding: 2rem;
    color: #a0aec0;
}

.empty-icon[b-s9slmkhf1i] {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #cbd5e0;
}

.empty-state p[b-s9slmkhf1i] {
    margin: 0;
    font-style: italic;
}

/* Form Actions */
.form-actions[b-s9slmkhf1i] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
    flex-wrap: wrap;
}

.btn-primary[b-s9slmkhf1i],
.btn-secondary[b-s9slmkhf1i],
.btn-danger[b-s9slmkhf1i] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    border: none;
    min-width: 160px;
    justify-content: center;
}

.btn-primary[b-s9slmkhf1i] {
    background: #214ca6;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.15);
}

.btn-primary:hover[b-s9slmkhf1i] {
    background: #1a3d8a;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.25);
    text-decoration: none;
    color: #ffffff;
}

.btn-secondary[b-s9slmkhf1i] {
    background: #ffffff;
    color: #4a5568;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.btn-secondary:hover[b-s9slmkhf1i] {
    background: #f7fafc;
    border-color: #cbd5e0;
    transform: translateY(-1px);
    color: #2d3748;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-danger[b-s9slmkhf1i] {
    background: linear-gradient(135deg, #ff5630 0%, #ff8a65 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(255, 86, 48, 0.25);
}

.btn-danger:hover[b-s9slmkhf1i] {
    background: linear-gradient(135deg, #e53e3e 0%, #ff6b47 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 86, 48, 0.35);
}

/* Responsive Design */
@media (max-width: 768px) {
    .instructor-details-page[b-s9slmkhf1i] {
        padding: 1rem;
    }
    
    .details-header[b-s9slmkhf1i] {
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
    }
    
    .header-content[b-s9slmkhf1i] {
        justify-content: center;
    }
    
    .header-actions[b-s9slmkhf1i] {
        justify-content: center;
    }
    
    .profile-card[b-s9slmkhf1i] {
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
    }
    
    .profile-header[b-s9slmkhf1i] {
        justify-content: center;
    }
    
    .profile-actions[b-s9slmkhf1i] {
        justify-content: center;
    }
    
    .details-grid[b-s9slmkhf1i] {
        grid-template-columns: 1fr;
    }
    
    .info-item[b-s9slmkhf1i] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .subject-item[b-s9slmkhf1i] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    
    .subject-item .btn[b-s9slmkhf1i] {
        align-self: center;
    }
    
    .form-actions[b-s9slmkhf1i] {
        flex-direction: column;
        gap: 0.75rem;
    }
}

@media (max-width: 480px) {
    .header-title[b-s9slmkhf1i] {
        font-size: 1.5rem;
    }
    
    .profile-name[b-s9slmkhf1i] {
        font-size: 1.25rem;
    }
    
    .profile-avatar[b-s9slmkhf1i] {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    
    .header-icon[b-s9slmkhf1i] {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }
}
/* _content/ltia.portal.web/Components/Exams/Admin/Pages/Instructors/Edit.razor.rz.scp.css */
/* Main Layout */
.instructors-page[b-mtge593ko1] {
    padding: 2rem;
    background: #f8f9fa;
    min-height: calc(100vh + 240px); /* give extra room to avoid viewport scrollbar when dropdown opens */
    padding-bottom: 240px; /* ensures space below inputs for overlays */
    overflow: visible;
}

.main-content-container[b-mtge593ko1] {
    display: flex;
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto;
    overflow: visible;
}

.form-column[b-mtge593ko1] {
    flex: 2;
    background: white;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: visible;
}

.profile-column[b-mtge593ko1] {
    flex: 1;
    min-width: 300px;
}

/* Form Styling */
.form-group[b-mtge593ko1] {
    margin-bottom: 24px;
}

.form-label[b-mtge593ko1] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 8px;
    font-size: 14px;
}

.form-label i[b-mtge593ko1] {
    color: #214ca6;
    width: 16px;
}

/* Form Display Field */
.form-display-field[b-mtge593ko1] {
    background: #f8f9fa;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 16px;
    min-height: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.form-display-value[b-mtge593ko1] {
    font-weight: 600;
    color: #2d3748;
    font-size: 16px;
    line-height: 1.5;
}

/* Input with Validation */
.input-with-validation[b-mtge593ko1] {
    position: relative;
}

.form-input[b-mtge593ko1] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s ease;
    background: white;
}

.form-input:focus[b-mtge593ko1] {
    outline: none;
    border-color: #214ca6;
    border-width: 2px; /* Giữ nguyên độ dày để không nhảy layout khi focus */
    box-shadow: 0 0 0 2px rgba(33, 76, 166, 0.15);
}

.validation-icon[b-mtge593ko1] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #10b981;
    font-size: 16px;
}

/* Textarea */
.form-textarea[b-mtge593ko1] {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    resize: vertical;
    min-height: 100px;
    transition: all 0.2s ease;
    font-family: inherit;
}

.form-textarea:focus[b-mtge593ko1] {
    outline: none;
    border-color: #bcd0f5; /* Màu viền nhẹ hơn để không đậm quá */
    border-width: 2px; /* Giữ nguyên độ dày để không nhảy layout khi focus */
    box-shadow: 0 0 0 2px rgba(33, 76, 166, 0.15);
}

.form-hint[b-mtge593ko1] {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
}

/* Subject Search */
.subject-search-container[b-mtge593ko1] {
    margin-bottom: 16px;
}

.subject-search-input[b-mtge593ko1] {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.subject-search-input:focus[b-mtge593ko1] {
    outline: none;
    border-color: #bcd0f5; /* Màu viền nhẹ hơn để không đậm quá */
    border-width: 2px; /* Giữ nguyên độ dày để không nhảy layout khi focus */
    box-shadow: 0 0 0 2px rgba(33, 76, 166, 0.15);
}

/* Selected Subjects Section */
.selected-subjects-section[b-mtge593ko1] {
    margin-top: 16px;
}

.selected-subjects-header[b-mtge593ko1] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 12px;
    font-size: 14px;
}

.selected-subjects-header i[b-mtge593ko1] {
    color: #10b981;
}

.selected-subjects-tags[b-mtge593ko1] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.subject-tag[b-mtge593ko1] {
    display: flex;
    align-items: center;
    background: #e6f3ff;
    border: 1px solid #214ca6;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 13px;
    color: #1a3d8a;
    transition: all 0.2s ease;
}

.subject-tag:hover[b-mtge593ko1] {
    background: #bfdbfe;
}

.tag-text[b-mtge593ko1] {
    margin-right: 6px;
}

.tag-remove[b-mtge593ko1] {
    background: none;
    border: none;
    color: #1a3d8a;
    cursor: pointer;
    padding: 2px;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.tag-remove:hover[b-mtge593ko1] {
    background: #214ca6;
    color: white;
}

.no-subjects[b-mtge593ko1] {
    color: #9ca3af !important;
    font-style: italic;
    font-size: 14px;
    font-weight: 400;
    padding: 8px 0;
}

/* Subject Dropdown */
.subject-dropdown[b-mtge593ko1] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 2px solid #e5e7eb;
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 50;
    max-height: 300px;
    overflow-y: auto;
}

.dropdown-options[b-mtge593ko1] {
    padding: 8px 0;
}

.dropdown-option[b-mtge593ko1] {
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dropdown-option:hover[b-mtge593ko1] {
    background: #f3f4f6;
}

.option-name[b-mtge593ko1] {
    font-weight: 500;
    color: #374151;
}

.option-code[b-mtge593ko1] {
    font-size: 12px;
    color: #6b7280;
    background: #f3f4f6;
    padding: 2px 8px;
    border-radius: 12px;
}

.no-results[b-mtge593ko1] {
    padding: 20px;
    text-align: center;
    color: #6b7280;
    font-style: italic;
}

.no-results i[b-mtge593ko1] {
    font-size: 24px;
    margin-bottom: 8px;
    display: block;
}

/* Profile Card */
.profile-card[b-mtge593ko1] {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    height: fit-content;
    position: sticky;
    top: 20px;
}

.profile-header[b-mtge593ko1] {
    text-align: center;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e7eb;
}

.profile-avatar[b-mtge593ko1] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #214ca6 0%, #1a3d8a 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: white;
    font-size: 32px;
}

.profile-name[b-mtge593ko1] {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 4px 0;
}

.profile-code[b-mtge593ko1] {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

.profile-details[b-mtge593ko1] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.detail-item[b-mtge593ko1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #e5e7eb;
}

.detail-item:last-child[b-mtge593ko1] {
    border-bottom: none;
}

.detail-label[b-mtge593ko1] {
    font-weight: 600;
    color: #111827;
    font-size: 14px;
}

.detail-value[b-mtge593ko1] {
    color: #111827;
    font-size: 14px;
    text-align: right;
    max-width: 60%;
    word-wrap: break-word;
}

/* Form Actions */
.form-actions[b-mtge593ko1] {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}

.btn-primary[b-mtge593ko1], .btn-secondary[b-mtge593ko1], .btn-danger[b-mtge593ko1] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid;
    text-decoration: none;
    min-width: 140px;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-primary[b-mtge593ko1] {
    background: #214ca6;
    color: white;
    border-color: #214ca6;
}

.btn-primary:hover:not(:disabled)[b-mtge593ko1] {
    background: #1a3d8a;
    border-color: #1a3d8a;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(33, 76, 166, 0.3);
}

.btn-primary:disabled[b-mtge593ko1] {
    background: #9ca3af;
    border-color: #9ca3af;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary[b-mtge593ko1] {
    background: white;
    color: #111827;
    border-color: #d1d5db;
}

.btn-secondary:hover[b-mtge593ko1] {
    background: #f9fafb;
    border-color: #9ca3af;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-danger[b-mtge593ko1] {
    background: #ff6b35;
    color: white;
    border-color: #ff6b35;
}

.btn-danger:hover[b-mtge593ko1] {
    background: #e55a2b;
    border-color: #e55a2b;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(255, 107, 53, 0.3);
}

/* Responsive */
@media (max-width: 1024px) {
    .main-content-container[b-mtge593ko1] {
        flex-direction: column;
    }
    
    .profile-column[b-mtge593ko1] {
        min-width: unset;
    }
    
    .profile-card[b-mtge593ko1] {
        position: static;
    }
}

@media (max-width: 768px) {
    .main-content-container[b-mtge593ko1] {
        padding: 0 16px;
    }
    
    .form-column[b-mtge593ko1] {
        padding: 24px;
    }
    
    .form-actions[b-mtge593ko1] {
        flex-direction: column;
    }
    
    .btn-primary[b-mtge593ko1], .btn-secondary[b-mtge593ko1] {
        justify-content: center;
    }
}

/* Loading and Error States */
.loading-container[b-mtge593ko1], .error-container[b-mtge593ko1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.loading-container .spinner-border[b-mtge593ko1] {
    margin-bottom: 16px;
}

.error-container .error-icon[b-mtge593ko1] {
    font-size: 48px;
    color: #ef4444;
    margin-bottom: 16px;
}

.error-container h3[b-mtge593ko1] {
    color: #111827;
    margin-bottom: 8px;
}

.error-container p[b-mtge593ko1] {
    color: #6b7280;
    margin-bottom: 24px;
}

/* Compact dropdown items cho component con (CSS isolation) */
[b-mtge593ko1] .select-search-item {
    /* Giảm padding để chiều cao item nhỏ hơn */
    padding: 0.625rem 0.875rem !important; /* ~10px 14px */
}

[b-mtge593ko1] .dropdown-option {
    /* Đồng bộ item template gọn hơn */
    padding: 8px 12px !important;
}

/* Header Section */
.instructors-card-header[b-mtge593ko1] {
    background: #ffffff;
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-content[b-mtge593ko1] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-icon[b-mtge593ko1] {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #214ca6 0%, #1a3d8a 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.5rem;
}

.header-text[b-mtge593ko1] {
    flex: 1;
}

.header-title[b-mtge593ko1] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #2d3748;
    margin: 0 0 0.5rem 0;
}

.header-subtitle[b-mtge593ko1] {
    font-size: 1rem;
    color: #718096;
    margin: 0;
}
/* _content/ltia.portal.web/Components/Exams/Admin/Pages/Instructors/Index.razor.rz.scp.css */
/* CSS Variables - Đặt trực tiếp vào .instructors-page */
.instructors-page[b-s8g6gggmaj] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    
    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Header Section */
.instructors-card-header[b-s8g6gggmaj] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.header-content[b-s8g6gggmaj] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-icon[b-s8g6gggmaj] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
}

.header-text[b-s8g6gggmaj] {
    flex: 1;
}

.header-title[b-s8g6gggmaj] {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
    color: var(--gray-800);
}

.header-subtitle[b-s8g6gggmaj] {
    font-size: 1rem;
    margin: 0.25rem 0 0 0;
    color: var(--gray-600);
}

/* Search Section */
.instructors-search-section[b-s8g6gggmaj] {
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    margin-bottom: 2rem;
    overflow: visible;
    position: relative;
    z-index: 100;
}

.search-container[b-s8g6gggmaj] {
    padding: 1.5rem;
}

.search-header[b-s8g6gggmaj] {
    margin-bottom: 1.5rem;
    text-align: center;
}

.search-title[b-s8g6gggmaj] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 0.5rem 0;
}

.search-title i[b-s8g6gggmaj] {
    color: var(--acv-primary);
    font-size: 1.3rem;
}

.search-subtitle[b-s8g6gggmaj] {
    color: var(--gray-600);
    font-size: 1rem;
    margin: 0;
    font-weight: 400;
}

.search-content[b-s8g6gggmaj] {
    width: 100%;
}

.search-main-row[b-s8g6gggmaj] {
    display: flex;
    align-items: end;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.search-input-group[b-s8g6gggmaj] {
    flex: 0 0 600px;
    min-width: 600px;
    position: relative;
    z-index: 20;
}

.filter-group[b-s8g6gggmaj] {
    flex: 0 0 600px;
    min-width: 600px;
    position: relative;
    z-index: 100;
}

.filter-label[b-s8g6gggmaj] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-label i[b-s8g6gggmaj] {
    color: var(--acv-primary);
}

.search-input-wrapper[b-s8g6gggmaj] {
    position: relative;
}

.search-icon[b-s8g6gggmaj] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    z-index: 1;
}

.search-input[b-s8g6gggmaj] {
    width: 100%;
    height: 48px;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--acv-white);
    box-sizing: border-box;
}

.search-input:focus[b-s8g6gggmaj] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

/* Filter Dropdown */
.filter-dropdown[b-s8g6gggmaj] {
    position: relative;
}

.filter-dropdown-btn[b-s8g6gggmaj] {
    width: 100%;
    height: 48px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    background: var(--acv-white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.95rem;
    box-sizing: border-box;
}

.filter-dropdown-btn:hover[b-s8g6gggmaj] {
    border-color: var(--acv-primary);
}

.filter-dropdown-btn.open[b-s8g6gggmaj] {
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.filter-dropdown-text[b-s8g6gggmaj] {
    flex: 1;
    text-align: left;
    color: var(--gray-700);
}

.filter-dropdown-icon[b-s8g6gggmaj] {
    color: var(--gray-400);
    transition: transform 0.2s ease;
}

.filter-dropdown-icon.rotated[b-s8g6gggmaj] {
    transform: rotate(180deg);
}

.filter-dropdown-menu[b-s8g6gggmaj] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--acv-white);
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    z-index: 1000;
    margin-top: 0.25rem;
    max-height: 300px;
    overflow: hidden;
    display: none;
}

.filter-dropdown-menu.show[b-s8g6gggmaj] {
    display: block;
}

.filter-dropdown-search[b-s8g6gggmaj] {
    padding: 0.75rem;
    border-bottom: 1px solid var(--gray-200);
}

.filter-search-input[b-s8g6gggmaj] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    font-size: 0.875rem;
    color: var(--gray-700);
    background: var(--gray-50);
}

.filter-search-input:focus[b-s8g6gggmaj] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 2px rgba(33, 76, 166, 0.1);
    background: var(--acv-white);
}

.filter-dropdown-list[b-s8g6gggmaj] {
    max-height: 200px;
    overflow-y: auto;
}

.filter-dropdown-item[b-s8g6gggmaj] {
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid var(--gray-100);
}

.filter-dropdown-item:hover[b-s8g6gggmaj] {
    background: var(--gray-50);
}

.filter-dropdown-item.selected[b-s8g6gggmaj] {
    background: var(--acv-primary-lighter);
    color: var(--acv-primary);
}

/* Search Controls */
.search-controls[b-s8g6gggmaj] {
    display: flex;
    gap: 0.5rem;
    align-items: end;
    flex-shrink: 0;
}

.search-btn[b-s8g6gggmaj] {
    width: 48px;
    height: 48px;
    border: 2px solid var(--acv-primary);
    border-radius: 8px;
    background: var(--acv-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
}

.search-btn:hover[b-s8g6gggmaj] {
    background: var(--acv-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

.clear-btn[b-s8g6gggmaj] {
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 8px;
    background: var(--gray-500);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
}

.clear-btn:hover[b-s8g6gggmaj] {
    background: var(--gray-600);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Main Card */
.instructors-card[b-s8g6gggmaj] {
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    overflow: hidden;
}

.instructors-table-container[b-s8g6gggmaj] {
    padding: 0;
}

/* List Header */
.list-header[b-s8g6gggmaj] {
    padding: 1.5rem;
    border-bottom: 1px solid var(--gray-200);
    background: var(--gray-50);
    border-radius: 16px 16px 0 0;
    position: relative;
}

.list-header[b-s8g6gggmaj]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 16px 0 0 0;
}

.list-header-content[b-s8g6gggmaj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.list-title-section[b-s8g6gggmaj] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.list-title[b-s8g6gggmaj] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.list-title i[b-s8g6gggmaj] {
    color: var(--acv-primary);
    font-size: 1.25rem;
}

.list-count[b-s8g6gggmaj] {
    background: var(--acv-primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Sort Controls */
.sort-controls[b-s8g6gggmaj] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.sort-dropdown[b-s8g6gggmaj] {
    position: relative;
}

.sort-dropdown-btn[b-s8g6gggmaj] {
    padding: 0.5rem 1rem;
    border: 2px solid var(--acv-primary);
    border-radius: 12px;
    background: white;
    color: var(--acv-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
    font-size: 0.9rem;
}

.sort-dropdown-btn:hover[b-s8g6gggmaj],
.sort-dropdown-btn.active[b-s8g6gggmaj] {
    background: var(--acv-primary);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

.sort-dropdown-btn:focus[b-s8g6gggmaj] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.sort-dropdown-menu[b-s8g6gggmaj] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--acv-white);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 50;
    margin-top: 0.5rem;
    overflow: hidden;
    min-width: 200px;
    display: none;
}

.sort-dropdown-menu.show[b-s8g6gggmaj] {
    display: block;
}

.sort-option[b-s8g6gggmaj] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    width: 100%;
    background: var(--acv-white);
    border: none;
    color: var(--acv-primary);
    font-size: 0.875rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    border-bottom: 1px solid var(--gray-100);
}

.sort-option:hover[b-s8g6gggmaj] {
    background: var(--acv-primary-50);
    color: var(--acv-primary);
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.1);
}

.sort-option.active[b-s8g6gggmaj] {
    background: var(--acv-primary-50);
    color: var(--acv-primary);
    font-weight: 600;
}

.sort-icons[b-s8g6gggmaj] {
    margin-left: auto;
    display: none;  /* ✅ Ẩn mũi tên */
}

.sort-icon-default[b-s8g6gggmaj],
.sort-icon-asc[b-s8g6gggmaj],
.sort-icon-desc[b-s8g6gggmaj] {
    font-size: 0.8rem;
    opacity: 0.5;
}

.sort-icon-default.active[b-s8g6gggmaj],
.sort-icon-asc.active[b-s8g6gggmaj],
.sort-icon-desc.active[b-s8g6gggmaj] {
    opacity: 1;
    color: var(--acv-primary);
}

.sort-option.active .sort-icon-default.active[b-s8g6gggmaj],
.sort-option.active .sort-icon-asc.active[b-s8g6gggmaj],
.sort-option.active .sort-icon-desc.active[b-s8g6gggmaj] {
    color: white;
}

.refresh-btn[b-s8g6gggmaj] {
    padding: 0.5rem 1rem;
    border: 2px solid var(--acv-primary);
    border-radius: 12px;
    background: var(--acv-white);
    color: var(--acv-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
}

.refresh-btn:hover[b-s8g6gggmaj] {
    background: var(--acv-primary);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

.add-instructor-btn[b-s8g6gggmaj] {
    padding: 0.5rem 1rem;
    border: 2px solid var(--acv-primary);
    border-radius: 12px;
    background: var(--acv-white);
    color: var(--acv-primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
}

.add-instructor-btn:hover[b-s8g6gggmaj] {
    background: var(--acv-primary);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

/* Instructors List */
.instructors-list[b-s8g6gggmaj] {
    padding: 1.5rem;
}

.loading-container[b-s8g6gggmaj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--gray-600);
}

.empty-state[b-s8g6gggmaj] {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--gray-600);
}

.empty-state-icon[b-s8g6gggmaj] {
    font-size: 4rem;
    color: var(--gray-300);
    margin-bottom: 1.5rem;
    opacity: 0.7;
}

.empty-state h3[b-s8g6gggmaj] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--gray-700);
    margin: 0 0 0.75rem 0;
}

.empty-state p[b-s8g6gggmaj] {
    margin: 0 0 2rem 0;
    color: var(--gray-600);
    font-size: 1rem;
}

.empty-state-actions[b-s8g6gggmaj] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.empty-state-actions .clear-btn[b-s8g6gggmaj] {
    padding: 0.5rem 1rem;
    border: 2px solid var(--gray-400);
    border-radius: 8px;
    background: white;
    color: var(--gray-600);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
    font-size: 0.9rem;
}

.empty-state-actions .clear-btn:hover[b-s8g6gggmaj] {
    border-color: var(--gray-600);
    color: var(--gray-800);
    background: var(--gray-50);
}

.empty-state-actions .add-instructor-btn[b-s8g6gggmaj] {
    padding: 0.5rem 1rem;
    border: 2px solid var(--acv-primary);
    border-radius: 8px;
    background: var(--acv-primary);
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
    font-size: 0.9rem;
}

.empty-state-actions .add-instructor-btn:hover[b-s8g6gggmaj] {
    background: var(--acv-primary);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

/* Instructors Grid */
.instructors-grid[b-s8g6gggmaj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 1.5rem;
}

.instructor-card[b-s8g6gggmaj] {
    background: var(--acv-white);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.instructor-card:hover[b-s8g6gggmaj] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-color: var(--acv-primary);
}

.instructor-card-header[b-s8g6gggmaj] {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
    background: var(--gray-50);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.instructor-title[b-s8g6gggmaj] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0;
}

.instructor-actions[b-s8g6gggmaj] {
    display: flex;
    gap: 0.5rem;
}

.action-btn[b-s8g6gggmaj] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.action-btn.view[b-s8g6gggmaj] {
    background: linear-gradient(135deg, rgba(33, 76, 166, 0.1) 0%, rgba(33, 76, 166, 0.15) 100%);
    color: var(--acv-primary);
    border: 1px solid rgba(33, 76, 166, 0.2);
}

.action-btn.view:hover[b-s8g6gggmaj] {
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(33, 76, 166, 0.3);
}

.action-btn.edit[b-s8g6gggmaj] {
    background: linear-gradient(135deg, var(--warning-lighter) 0%, rgba(255, 171, 0, 0.1) 100%);
    color: var(--warning-dark);
    border: 1px solid var(--warning-light);
}

.action-btn.edit:hover[b-s8g6gggmaj] {
    background: linear-gradient(135deg, var(--warning-main) 0%, var(--warning-dark) 100%);
    color: var(--acv-white);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(255, 171, 0, 0.3);
}

.action-btn.delete[b-s8g6gggmaj] {
    background: linear-gradient(135deg, var(--error-lighter) 0%, rgba(255, 86, 48, 0.1) 100%);
    color: var(--error-dark);
    border: 1px solid var(--error-light);
}

.action-btn.delete:hover[b-s8g6gggmaj] {
    background: linear-gradient(135deg, var(--error-main) 0%, var(--error-dark) 100%);
    color: var(--acv-white);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(255, 86, 48, 0.3);
}

.instructor-card-body[b-s8g6gggmaj] {
    padding: 1.5rem;
}

.instructor-profile[b-s8g6gggmaj] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.instructor-avatar[b-s8g6gggmaj] {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.instructor-info[b-s8g6gggmaj] {
    flex: 1;
}

.instructor-code[b-s8g6gggmaj] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
}

.instructor-contact[b-s8g6gggmaj] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.contact-item[b-s8g6gggmaj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--gray-600);
}

.contact-item i[b-s8g6gggmaj] {
    width: 14px;
    color: var(--gray-400);
}

.instructor-subjects[b-s8g6gggmaj] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.instructor-subject-badge[b-s8g6gggmaj] {
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(33, 76, 166, 0.2);
}

.no-subjects[b-s8g6gggmaj] {
    color: var(--gray-500);
    font-style: italic;
    font-size: 0.85rem;
}

/* Pagination Section - Separate from main content */
.pagination-section[b-s8g6gggmaj] {
    margin-top: 2rem;
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* Table Footer */
.table-footer[b-s8g6gggmaj] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--acv-white);
    border-top: 1px solid var(--gray-200);
    gap: 2rem;
}

.results-info[b-s8g6gggmaj] {
    font-size: 0.9rem;
    color: var(--gray-600);
    font-weight: 500;
}

.pagination-container[b-s8g6gggmaj] {
    display: flex;
    align-items: center;
}

.pagination-nav[b-s8g6gggmaj] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagination-btn[b-s8g6gggmaj] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: var(--acv-white);
    color: var(--gray-600);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s ease;
    cursor: pointer;
}

.pagination-btn:hover[b-s8g6gggmaj] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border-color: var(--acv-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.15);
}

.pagination-btn.active[b-s8g6gggmaj] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border-color: var(--acv-primary);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
}

/* Responsive Design */
@media (max-width: 768px) {
    .instructors-page[b-s8g6gggmaj] {
        padding: 1rem;
    }
    
    .search-main-row[b-s8g6gggmaj] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .search-input-group[b-s8g6gggmaj],
    .filter-group[b-s8g6gggmaj] {
        min-width: auto;
        max-width: none;
    }
    
    .search-controls[b-s8g6gggmaj] {
        justify-content: center;
    }
    
    .list-header-content[b-s8g6gggmaj] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    
    .sort-controls[b-s8g6gggmaj] {
        justify-content: space-between;
    }
    
    .instructors-grid[b-s8g6gggmaj] {
        grid-template-columns: 1fr;
    }
    
    .table-footer[b-s8g6gggmaj] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    
    .pagination-nav[b-s8g6gggmaj] {
        justify-content: center;
    }
}

/* SelectSearch dropdown option styling */
[b-s8g6gggmaj] .dropdown-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
}

[b-s8g6gggmaj] .option-name {
    flex: 1;
    font-weight: 500;
    color: var(--gray-800);
}

[b-s8g6gggmaj] .option-code {
    font-size: 0.875rem;
    color: var(--gray-600);
    background: var(--gray-100);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
}


/* _content/ltia.portal.web/Components/Exams/Admin/Pages/QuestionBank/Details.razor.rz.scp.css */
/* CSS Variables - Tương tự như QuestionBank Index */
.questionbank-detail-page[b-4wjgwenz1x] {
    --acv-primary: #214ca6;
    --acv-primary-50: rgba(33, 76, 166, 0.05);
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    
    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

label[b-4wjgwenz1x] {
    color: var(--gray-700);
    margin: 0;
}

/* Card Header Section */
.card-header-section[b-4wjgwenz1x] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.card-header-content[b-4wjgwenz1x] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.card-header-icon[b-4wjgwenz1x] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
}

.card-header-text h1[b-4wjgwenz1x] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-800);
}

.card-header-text p[b-4wjgwenz1x] {
    margin: 0.25rem 0 0 0;
    color: var(--gray-600);
    font-size: 1rem;
}

/* Search Section */
.questions-search-section[b-4wjgwenz1x] {
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    margin-bottom: 2rem;
    overflow: visible;
    position: relative;
    z-index: 100;
}

.search-container[b-4wjgwenz1x] {
    padding: 2rem;
}

.search-header[b-4wjgwenz1x] {
    margin-bottom: 1.5rem;
    text-align: center;
}

.search-title[b-4wjgwenz1x] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.search-title i[b-4wjgwenz1x] {
    color: var(--acv-primary);
    font-size: 1rem;
}

.search-subtitle[b-4wjgwenz1x] {
    font-size: 0.9rem;
    color: var(--gray-600);
    margin: 0;
    text-align: center;
}

.search-content[b-4wjgwenz1x] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.search-main-row[b-4wjgwenz1x] {
    display: flex;
    gap: 1.5rem;
    align-items: flex-end;
    flex-wrap: wrap;
    position: relative;
    z-index: 20;
    justify-content: center;
    max-width: 1000px;
    margin: 0 auto;
    overflow: visible;
}

.search-input-group[b-4wjgwenz1x] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
    z-index: 20;
}

.search-input-main[b-4wjgwenz1x] {
    flex: 1;
    min-width: 400px;
    max-width: 700px;
}

.search-input-filter[b-4wjgwenz1x] {
    flex: 0 0 auto;
    min-width: 200px;
    max-width: 250px;
    position: relative;
    z-index: 1000;
    overflow: visible;
}

.form-label[b-4wjgwenz1x] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-700);
    margin: 0;
}

.form-label i[b-4wjgwenz1x] {
    color: var(--acv-primary);
    font-size: 0.8rem;
}

.form-input[b-4wjgwenz1x],
.form-select[b-4wjgwenz1x] {
    width: 100%;
    height: 48px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--acv-white);
    box-sizing: border-box;
}

.form-input:focus[b-4wjgwenz1x] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

/* Custom Dropdown */
.custom-dropdown[b-4wjgwenz1x] {
    position: relative;
    width: 100%;
}

.custom-dropdown-btn[b-4wjgwenz1x] {
    width: 100%;
    height: 48px;
    padding: 0.75rem 1rem;
    padding-right: 2.5rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--acv-white);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    color: var(--gray-800);
    text-align: left;
    position: relative;
}

.custom-dropdown-btn span[b-4wjgwenz1x] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 0.5rem;
}

.custom-dropdown-btn:hover[b-4wjgwenz1x] {
    border-color: var(--acv-primary);
}

.custom-dropdown-btn:focus[b-4wjgwenz1x] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.custom-dropdown-btn i[b-4wjgwenz1x] {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--acv-primary);
    font-size: 0.8rem;
    transition: transform 0.2s ease;
    pointer-events: none;
}

.custom-dropdown-btn i.rotated[b-4wjgwenz1x] {
    transform: translateY(-50%) rotate(180deg);
}

.custom-dropdown-menu[b-4wjgwenz1x] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--acv-white);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    margin-top: 0.375rem;
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}

.custom-dropdown-menu[b-4wjgwenz1x]::-webkit-scrollbar {
    width: 6px;
}

.custom-dropdown-menu[b-4wjgwenz1x]::-webkit-scrollbar-track {
    background: var(--gray-100);
    border-radius: 3px;
}

.custom-dropdown-menu[b-4wjgwenz1x]::-webkit-scrollbar-thumb {
    background: var(--gray-400);
    border-radius: 3px;
}

.custom-dropdown-menu[b-4wjgwenz1x]::-webkit-scrollbar-thumb:hover {
    background: var(--gray-500);
}

.custom-dropdown-item[b-4wjgwenz1x] {
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: all 0.15s ease;
    border-bottom: 1px solid var(--gray-100);
    background: var(--acv-white);
    color: var(--gray-800);
    font-size: 0.95rem;
    position: relative;
}

.custom-dropdown-item:last-child[b-4wjgwenz1x] {
    border-bottom: none;
}

.custom-dropdown-item:hover[b-4wjgwenz1x] {
    background: var(--gray-50);
    box-shadow: inset 3px 0 0 0 var(--acv-primary);
    color: var(--acv-primary);
}

.custom-dropdown-item.active[b-4wjgwenz1x] {
    background: var(--acv-primary-50);
    box-shadow: inset 3px 0 0 0 var(--acv-primary);
    color: var(--acv-primary);
    font-weight: 600;
}

.search-controls[b-4wjgwenz1x] {
    display: flex;
    gap: 0.75rem;
    align-items: end;
    position: relative;
    z-index: 20;
    flex-shrink: 0;
}

.search-btn[b-4wjgwenz1x], 
.clear-btn[b-4wjgwenz1x] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border: none;
    padding: 0.75rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 20;
    width: 48px;
    height: 48px;
    box-sizing: border-box;
}

.search-btn:hover[b-4wjgwenz1x] {
    background: var(--acv-primary-700);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

.clear-btn[b-4wjgwenz1x] {
    background: var(--gray-500);
}

.clear-btn:hover[b-4wjgwenz1x] {
    background: var(--gray-600);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Import Excel Button */
.import-excel-btn[b-4wjgwenz1x] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #10b981; /* Green color for Excel */
    color: white;
    border: 2px solid #10b981;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 140px;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
    text-decoration: none;
}

.import-excel-btn:hover[b-4wjgwenz1x] {
    background: #059669;
    border-color: #059669;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
    text-decoration: none;
}

.import-excel-btn i[b-4wjgwenz1x] {
    font-size: 0.9rem;
}

/* List Container */
.questions-list-container[b-4wjgwenz1x] {
    background: var(--acv-white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
}

/* List Header */
.list-header[b-4wjgwenz1x] {
    background: var(--acv-white) !important;
    padding: 1.75rem 2rem;
    border-bottom: 1px solid var(--gray-200);
    border-radius: 16px 16px 0 0;
    position: relative;
    z-index: 100;
    overflow: visible;
}

.list-header[b-4wjgwenz1x]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 16px 0 0 0;
}

.list-header-content[b-4wjgwenz1x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0;
    flex-wrap: wrap;
}

.list-title-section[b-4wjgwenz1x] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.list-title[b-4wjgwenz1x] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.list-title i[b-4wjgwenz1x] {
    color: var(--acv-primary);
    font-size: 1.25rem;
}

.list-count[b-4wjgwenz1x] {
    background: var(--acv-primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Sort Controls */
.sort-controls[b-4wjgwenz1x] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.sort-dropdown-btn[b-4wjgwenz1x] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--acv-white);
    border: 2px solid var(--acv-primary);
    border-radius: 12px;
    color: var(--acv-primary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
    justify-content: space-between;
}

.sort-dropdown-btn:hover[b-4wjgwenz1x] {
    background: var(--acv-primary);
    color: var(--acv-white);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
}

.sort-dropdown-btn.active[b-4wjgwenz1x] {
    border-color: var(--primary-500);
    color: var(--primary-600);
    box-shadow: 0 0 0 3px var(--primary-100);
}

.sort-dropdown-btn i.rotated[b-4wjgwenz1x] {
    transform: rotate(180deg);
    transition: transform 0.2s ease;
}

.refresh-btn[b-4wjgwenz1x],
.add-question-btn[b-4wjgwenz1x] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--acv-white);
    color: var(--acv-primary);
    border: 2px solid var(--acv-primary);
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none;
}

.refresh-btn:hover[b-4wjgwenz1x],
.add-question-btn:hover[b-4wjgwenz1x] {
    background: var(--acv-primary);
    color: var(--acv-white);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
    text-decoration: none;
}

/* Sort Dropdown */
.sort-dropdown[b-4wjgwenz1x] {
    position: relative;
    display: inline-block;
}

/* Sort Dropdown Menu */
.sort-dropdown-menu[b-4wjgwenz1x] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--acv-white);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 50;
    margin-top: 0.5rem;
    overflow: hidden;
    min-width: 200px;
}

.sort-option[b-4wjgwenz1x] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    width: 100%;
    background: var(--acv-white);
    border: none;
    color: var(--acv-primary);
    font-size: 0.875rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    border-bottom: 1px solid var(--gray-100);
}

.sort-option:last-child[b-4wjgwenz1x] {
    border-bottom: none;
}

.sort-option:hover[b-4wjgwenz1x] {
    background: var(--acv-primary-50);
    color: var(--acv-primary);
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.1);
}

.sort-option.active[b-4wjgwenz1x] {
    background: var(--acv-primary-50);
    color: var(--acv-primary);
    font-weight: 600;
}

.sort-option i:first-child[b-4wjgwenz1x] {
    width: 16px;
    color: var(--acv-primary);
    font-size: 0.875rem;
}

.sort-option span[b-4wjgwenz1x] {
    flex: 1;
}

.sort-icons[b-4wjgwenz1x] {
    display: none;
}

/* Questions List */
.questions-list[b-4wjgwenz1x] {
    padding: 1.5rem;
    gap: 1.5rem;
    position: relative;
    z-index: 5;
    min-height: 200px;
}

/* List View Container */
#questionsListContainer[b-4wjgwenz1x] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
}

/* Question List Item */
.question-list-item[b-4wjgwenz1x] {
    background: var(--acv-white);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    z-index: 5;
    min-height: 120px;
}

.question-list-item[b-4wjgwenz1x]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--acv-primary);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.question-list-item:hover[b-4wjgwenz1x] {
    transform: translateY(-2px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: var(--acv-primary);
}

.question-list-item:hover[b-4wjgwenz1x]::before {
    opacity: 1;
}

/* Question Item Content */
.question-item-content[b-4wjgwenz1x] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.5rem;
    gap: 1rem;
}

/* Question Info Section */
.question-info[b-4wjgwenz1x] {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.question-main-info[b-4wjgwenz1x] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.question-header[b-4wjgwenz1x] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.question-title[b-4wjgwenz1x] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gray-800);
    flex: 1;
    line-height: 1.5;
}

.question-icon[b-4wjgwenz1x] {
    color: var(--acv-primary);
    font-size: 1rem;
    width: 20px;
    text-align: center;
    margin-top: 2px;
    flex-shrink: 0;
}

.question-content[b-4wjgwenz1x] {
    flex: 1;
}

.question-type[b-4wjgwenz1x] {
    flex-shrink: 0;
}

.type-badge[b-4wjgwenz1x] {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.type-badge.type-1[b-4wjgwenz1x] {
    background: #e3f2fd;
    color: #1565c0;
    border: 1px solid #bbdefb;
}

.type-badge.type-2[b-4wjgwenz1x] {
    background: #fff3e0;
    color: #ef6c00;
    border: 1px solid #ffcc02;
}

.type-badge.type-3[b-4wjgwenz1x] {
    background: #e8f5e8;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}

.inactive-badge[b-4wjgwenz1x] {
    background: var(--error-lighter);
    color: var(--error-dark);
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid var(--error-light);
    margin-left: 0.5rem;
}

.question-meta-info[b-4wjgwenz1x] {
    display: flex;
    gap: 2rem;
    align-items: center;
    flex-wrap: wrap;
}

.question-id-info[b-4wjgwenz1x],
.question-answers-info[b-4wjgwenz1x],
.question-image-info[b-4wjgwenz1x] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--gray-600);
}

.question-id-info i[b-4wjgwenz1x],
.question-answers-info i[b-4wjgwenz1x],
.question-image-info i[b-4wjgwenz1x] {
    color: var(--acv-primary);
    font-size: 0.8rem;
    width: 16px;
    text-align: center;
}

/* Question Actions */
.question-actions[b-4wjgwenz1x] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    flex-shrink: 0;
}

.action-btn[b-4wjgwenz1x] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.action-btn.view[b-4wjgwenz1x] {
    background: rgba(33, 76, 166, 0.1);
    color: var(--acv-primary);
}

.action-btn.view:hover[b-4wjgwenz1x] {
    background: var(--acv-primary);
    color: var(--acv-white);
    transform: scale(1.05);
}

.action-btn.edit[b-4wjgwenz1x] {
    background: rgba(255, 171, 0, 0.1);
    color: var(--warning-main);
}

.action-btn.edit:hover[b-4wjgwenz1x] {
    background: var(--warning-main);
    color: var(--acv-white);
    transform: scale(1.05);
}

.action-btn.delete[b-4wjgwenz1x] {
    background: rgba(255, 86, 48, 0.1);
    color: var(--error-main);
}

.action-btn.delete:hover[b-4wjgwenz1x] {
    background: var(--error-main);
    color: var(--acv-white);
    transform: scale(1.05);
}

/* Empty State */
.empty-state[b-4wjgwenz1x] {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--gray-600);
}

.empty-state-icon[b-4wjgwenz1x] {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--gray-400);
}

.empty-state h3[b-4wjgwenz1x] {
    margin-bottom: 0.5rem;
    color: var(--gray-700);
    font-size: 1.25rem;
    font-weight: 600;
}

.empty-state p[b-4wjgwenz1x] {
    margin-bottom: 2rem;
    color: var(--gray-600);
}

.empty-state-actions[b-4wjgwenz1x] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-primary[b-4wjgwenz1x] {
    background: var(--acv-primary);
    color: var(--acv-white);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(33, 76, 166, 0.2);
}

.btn-primary:hover[b-4wjgwenz1x] {
    background: var(--acv-primary-700);
    color: var(--acv-white);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

/* Table Footer */
.table-footer[b-4wjgwenz1x] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--acv-white);
    border-top: 1px solid var(--gray-200);
    border-radius: 0 0 16px 16px;
    gap: 2rem;
    flex-wrap: wrap;
}

.results-info[b-4wjgwenz1x] {
    font-size: 0.9rem;
    color: var(--gray-600);
    font-weight: 500;
}

.pagination-container[b-4wjgwenz1x] {
    display: flex;
    align-items: center;
}

.pagination-nav[b-4wjgwenz1x] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagination-btn[b-4wjgwenz1x] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: var(--acv-white);
    color: var(--gray-600);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s ease;
    cursor: pointer;
}

.pagination-btn:hover[b-4wjgwenz1x] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border-color: var(--acv-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.15);
}

.pagination-btn.active[b-4wjgwenz1x] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border-color: var(--acv-primary);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
}

/* Questions Table */
.questions-table-container[b-4wjgwenz1x] {
    overflow-x: auto;
    border-radius: 12px;
}

.questions-table[b-4wjgwenz1x] {
    width: 100%;
    border-collapse: collapse;
    background: var(--acv-white);
    border-radius: 12px;
    overflow: hidden;
}

/* Table Header */
.table-header-row[b-4wjgwenz1x] {
    background: var(--gray-50);
    border-bottom: 2px solid var(--gray-200);
}

.questions-table th[b-4wjgwenz1x] {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--gray-700);
    font-size: 0.9rem;
    border-bottom: 2px solid var(--gray-200);
    position: relative;
}

.questions-table th.col-stt[b-4wjgwenz1x],
.questions-table th.col-type[b-4wjgwenz1x],
.questions-table th.col-answers[b-4wjgwenz1x],
.questions-table th.col-actions[b-4wjgwenz1x] {
    text-align: center !important;
}

.col-stt[b-4wjgwenz1x] {
    width: 5%;
    text-align: center;
}

.col-content[b-4wjgwenz1x] {
    width: 55%;
    min-width: 200px;
}

.col-type[b-4wjgwenz1x] {
    width: 10%;
    text-align: center;
}

.col-answers[b-4wjgwenz1x] {
    width: 10%;
    text-align: center;
}

.col-actions[b-4wjgwenz1x] {
    width: 20%;
    text-align: center !important;
}

/* Table Body */
.table-row[b-4wjgwenz1x] {
    border-bottom: 1px solid var(--gray-200);
    transition: all 0.2s ease;
}

.table-row:hover[b-4wjgwenz1x] {
    background: var(--gray-50);
}

.table-row.inactive-row[b-4wjgwenz1x] {
    background: rgba(255, 86, 48, 0.02);
}

.table-row.inactive-row:hover[b-4wjgwenz1x] {
    background: rgba(255, 86, 48, 0.05);
}

.questions-table td[b-4wjgwenz1x] {
    padding: 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--gray-200);
}

/* STT Column */
.stt-number[b-4wjgwenz1x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--gray-100);
    color: var(--gray-600);
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Content Column */
.question-content-cell[b-4wjgwenz1x] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    flex-wrap: wrap;
}

.question-text[b-4wjgwenz1x] {
    flex: 1;
    color: var(--gray-800);
    font-weight: 500;
    line-height: 1.4;
}

.image-indicator[b-4wjgwenz1x] {
    color: var(--acv-primary);
    font-size: 0.9rem;
    opacity: 0.7;
}

.image-badge-small[b-4wjgwenz1x] {
    background: var(--success-lighter);
    color: var(--success-dark);
    padding: 0.125rem 0.5rem;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 500;
    border: 1px solid var(--success-light);
    white-space: nowrap;
}


.inactive-badge-small[b-4wjgwenz1x] {
    background: var(--error-lighter);
    color: var(--error-dark);
    padding: 0.125rem 0.5rem;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 500;
    border: 1px solid var(--error-light);
    white-space: nowrap;
}

/* Type Column */
.type-badge-table[b-4wjgwenz1x] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.type-badge-table.type-1[b-4wjgwenz1x] {
    background: #e3f2fd;
    color: #1565c0;
    border: 1px solid #bbdefb;
}

.type-badge-table.type-2[b-4wjgwenz1x] {
    background: #fff3e0;
    color: #ef6c00;
    border: 1px solid #ffcc02;
}

.type-badge-table.type-3[b-4wjgwenz1x] {
    background: #e8f5e8;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}

/* Answers Column */
.answers-count[b-4wjgwenz1x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--gray-500);
    color: var(--acv-white);
    border-radius: 50%;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Actions Column */
.action-buttons[b-4wjgwenz1x] {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    align-items: center;
}

.action-btn-table[b-4wjgwenz1x] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    text-decoration: none;
}

.action-btn-table.view[b-4wjgwenz1x] {
    background: linear-gradient(135deg, rgba(33, 76, 166, 0.1) 0%, rgba(33, 76, 166, 0.15) 100%);
    color: var(--acv-primary);
    border: 1px solid rgba(33, 76, 166, 0.2);
}

.action-btn-table.view:hover[b-4wjgwenz1x] {
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
    border-color: var(--acv-primary);
}

.action-btn-table.edit[b-4wjgwenz1x] {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 193, 7, 0.15) 100%);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.action-btn-table.edit:hover[b-4wjgwenz1x] {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
    color: var(--acv-white);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
    border-color: #ffc107;
}

.action-btn-table.delete[b-4wjgwenz1x] {
    background: linear-gradient(135deg, rgba(255, 86, 48, 0.1) 0%, rgba(255, 86, 48, 0.15) 100%);
    color: var(--error-main);
    border: 1px solid rgba(255, 86, 48, 0.3);
}

.action-btn-table.delete:hover[b-4wjgwenz1x] {
    background: linear-gradient(135deg, var(--error-main) 0%, var(--error-dark) 100%);
    color: var(--acv-white);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 12px rgba(255, 86, 48, 0.3);
    border-color: var(--error-main);
}

/* Responsive Table */
@media (max-width: 768px) {
    .questions-table-container[b-4wjgwenz1x] {
        margin: 0 -1.5rem;
        border-radius: 0;
    }
    
    .questions-table[b-4wjgwenz1x] {
        min-width: 700px;
    }
    
    .questions-table th[b-4wjgwenz1x],
    .questions-table td[b-4wjgwenz1x] {
        padding: 0.75rem 0.5rem;
    }
    
    .col-content[b-4wjgwenz1x] {
        min-width: 250px;
    }
    
    .question-text[b-4wjgwenz1x] {
        font-size: 0.9rem;
    }
    
    .action-buttons[b-4wjgwenz1x] {
        gap: 0.125rem;
    }
    
    .action-btn-table[b-4wjgwenz1x] {
        width: 40px;
        height: 28px;
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .questions-table th[b-4wjgwenz1x],
    .questions-table td[b-4wjgwenz1x] {
        padding: 0.5rem 0.25rem;
    }
    
    .col-content[b-4wjgwenz1x] {
        min-width: 200px;
    }
    
    .action-btn-table[b-4wjgwenz1x] {
        width: 36px;
        height: 26px;
        font-size: 0.75rem;
    }
}
/* _content/ltia.portal.web/Components/Exams/Admin/Pages/QuestionBank/ImportFromExcel.razor.rz.scp.css */
/* CSS Variables */
.import-excel-page[b-787d4gw3xn] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    
    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    background-color: var(--gray-100);
}

/* Card Header */
.card-header-section[b-787d4gw3xn] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.card-header-content[b-787d4gw3xn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.card-header-icon[b-787d4gw3xn] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.card-header-text[b-787d4gw3xn] {
    flex: 1;
}

.card-header-text h1[b-787d4gw3xn] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-800);
}

.card-header-text p[b-787d4gw3xn] {
    margin: 0.25rem 0 0 0;
    color: var(--gray-600);
    font-size: 1rem;
}

.card-header-actions[b-787d4gw3xn] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto !important;
}

/* Import Container */
.import-container[b-787d4gw3xn] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Import Step */
.import-step[b-787d4gw3xn] {
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    overflow: hidden;
}

.step-header[b-787d4gw3xn] {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--gray-200);
    background: var(--gray-50);
    border-radius: 16px 16px 0 0;
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.step-header[b-787d4gw3xn]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 16px 0 0 0;
}

.step-number[b-787d4gw3xn] {
    width: 36px;
    height: 36px;
    background: var(--acv-primary);
    color: var(--acv-white);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.125rem;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(33, 76, 166, 0.2);
}

.step-header h2[b-787d4gw3xn] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-800);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.step-content[b-787d4gw3xn] {
    padding: 2rem;
}

.step-content > p[b-787d4gw3xn] {
    margin-bottom: 1.5rem;
    color: var(--gray-600);
}

/* Template Info */
.template-info[b-787d4gw3xn] {
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--gray-50);
    border-radius: 12px;
    border: 1px solid var(--gray-200);
}

.template-info h4[b-787d4gw3xn] {
    margin: 0 0 1rem 0;
    color: var(--gray-800);
    font-size: 1rem;
    font-weight: 600;
}

.template-info h4.text-danger[b-787d4gw3xn] {
    color: var(--error-main) !important;
}

.template-info ul[b-787d4gw3xn] {
    margin: 0 0 1.5rem 0;
    padding-left: 1.5rem;
    list-style: disc;
}

.template-info li[b-787d4gw3xn] {
    margin-bottom: 0.5rem;
    color: var(--gray-600);
}

.template-info strong[b-787d4gw3xn] {
    color: var(--gray-800);
    font-weight: 600;
}

/* Template Example */
.template-example[b-787d4gw3xn] {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-200);
}

.template-example h5[b-787d4gw3xn] {
    margin: 0 0 1rem 0;
    color: var(--gray-800);
    font-size: 0.95rem;
    font-weight: 600;
}

.example-table[b-787d4gw3xn] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    background: var(--acv-white);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--gray-200);
}

.example-table thead[b-787d4gw3xn] {
    background: var(--acv-primary);
    color: var(--acv-white);
}

.example-table th[b-787d4gw3xn],
.example-table td[b-787d4gw3xn] {
    padding: 0.75rem;
    text-align: left;
    border: 1px solid var(--gray-200);
}

.example-table tbody tr:hover[b-787d4gw3xn] {
    background: var(--gray-50);
}

/* Upload Area */
.upload-area[b-787d4gw3xn] {
    border: 2px dashed var(--gray-300);
    border-radius: 12px;
    padding: 3rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--gray-50);
}

.upload-area:hover[b-787d4gw3xn],
.upload-area.dragging[b-787d4gw3xn] {
    border-color: var(--acv-primary);
    background: var(--acv-primary-lighter);
}

.upload-label[b-787d4gw3xn] {
    cursor: pointer;
    display: block;
}

.upload-label i[b-787d4gw3xn] {
    font-size: 3rem;
    color: var(--acv-primary);
    margin-bottom: 1rem;
}

.upload-label p[b-787d4gw3xn] {
    font-size: 1rem;
    color: var(--gray-700);
    margin: 0.5rem 0;
    font-weight: 500;
}

.upload-label small[b-787d4gw3xn] {
    color: var(--gray-600);
    font-size: 0.875rem;
}

/* File Info */
.file-info[b-787d4gw3xn] {
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--success-lighter);
    border: 1px solid var(--success-light);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.file-icon[b-787d4gw3xn] {
    font-size: 2rem;
    color: var(--success-main);
}

.file-details[b-787d4gw3xn] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.file-name[b-787d4gw3xn] {
    font-weight: 600;
    color: var(--gray-800);
    font-size: 1rem;
}

.file-size[b-787d4gw3xn] {
    font-size: 0.875rem;
    color: var(--gray-600);
}

.remove-file-btn[b-787d4gw3xn] {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--error-lighter) 0%, rgba(255, 86, 48, 0.1) 100%);
    color: var(--error-dark);
    border: 1px solid var(--error-light);
    border-radius: 6px;
    padding: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    flex-shrink: 0;
}

.remove-file-btn:hover[b-787d4gw3xn] {
    background: linear-gradient(135deg, var(--error-main) 0%, var(--error-dark) 100%);
    color: var(--acv-white);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(255, 86, 48, 0.3);
}

.remove-file-btn i[b-787d4gw3xn] {
    font-size: 0.9rem;
}

/* Preview Summary */
.preview-summary[b-787d4gw3xn] {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.summary-item[b-787d4gw3xn] {
    flex: 1;
    min-width: 200px;
    padding: 1rem 1.5rem;
    background: var(--success-lighter);
    border: 1px solid var(--success-light);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.summary-item.error[b-787d4gw3xn] {
    background: var(--error-lighter);
    border-color: var(--error-light);
}

.summary-item i[b-787d4gw3xn] {
    font-size: 1.5rem;
    color: var(--success-main);
}

.summary-item.error i[b-787d4gw3xn] {
    color: var(--error-main);
}

.summary-item span[b-787d4gw3xn] {
    font-size: 0.95rem;
    color: var(--gray-700);
}

/* Preview Table */
.preview-table-container[b-787d4gw3xn] {
    margin-bottom: 2rem;
}

.preview-table-container h4[b-787d4gw3xn] {
    margin: 0 0 1rem 0;
    color: var(--gray-800);
    font-size: 1rem;
    font-weight: 600;
}

.preview-table[b-787d4gw3xn] {
    width: 100%;
    border-collapse: collapse;
    background: var(--acv-white);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    overflow: hidden;
}

.preview-table thead[b-787d4gw3xn] {
    background: var(--gray-50);
}

.preview-table th[b-787d4gw3xn],
.preview-table td[b-787d4gw3xn] {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--gray-200);
}

.preview-table th[b-787d4gw3xn] {
    font-weight: 600;
    color: var(--gray-800);
    font-size: 0.875rem;
}

.preview-table td[b-787d4gw3xn] {
    color: var(--gray-600);
    font-size: 0.875rem;
}

.preview-table tbody tr:hover[b-787d4gw3xn] {
    background: var(--gray-50);
}

.preview-table tbody tr:last-child td[b-787d4gw3xn] {
    border-bottom: none;
}

/* Badge Styles */
.badge[b-787d4gw3xn] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.badge.bg-primary[b-787d4gw3xn] {
    background: #e3f2fd !important;
    color: #1565c0 !important;
    border: 1px solid #bbdefb !important;
}

.badge.bg-info[b-787d4gw3xn] {
    background: #fff3e0 !important;
    color: #ef6c00 !important;
    border: 1px solid #ffcc02 !important;
}

.badge.bg-success[b-787d4gw3xn] {
    background: #e8f5e8 !important;
    color: #2e7d32 !important;
    border: 1px solid #a5d6a7 !important;
}

/* Validation Errors */
.validation-errors[b-787d4gw3xn] {
    padding: 1.5rem;
    background: var(--error-lighter);
    border: 1px solid var(--error-light);
    border-radius: 12px;
    margin-bottom: 2rem;
}

.validation-errors h4[b-787d4gw3xn] {
    margin: 0 0 1rem 0;
    color: var(--error-main);
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.validation-errors ul[b-787d4gw3xn] {
    margin: 0;
    padding-left: 1.5rem;
    list-style: disc;
}

.validation-errors li[b-787d4gw3xn] {
    margin-bottom: 0.5rem;
    color: var(--error-dark);
    font-size: 0.875rem;
}

.more-errors[b-787d4gw3xn] {
    margin: 1rem 0 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--error-light);
    color: var(--error-main);
    font-weight: 600;
    font-size: 0.875rem;
}

/* Import Actions */
.import-actions[b-787d4gw3xn] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Progress Bar */
.progress-bar-container[b-787d4gw3xn] {
    margin-bottom: 1.5rem;
}

.progress-bar[b-787d4gw3xn] {
    width: 100%;
    height: 24px;
    background: var(--gray-200);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.progress-fill[b-787d4gw3xn] {
    height: 100%;
    background: linear-gradient(90deg, var(--acv-primary) 0%, var(--acv-primary-light) 100%);
    transition: width 0.3s ease;
}

.progress-text[b-787d4gw3xn] {
    display: block;
    text-align: center;
    color: var(--gray-600);
    font-size: 0.875rem;
    font-weight: 600;
}

.current-import[b-787d4gw3xn] {
    padding: 1rem;
    background: var(--gray-50);
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--gray-700);
}

/* Result Summary */
.result-summary[b-787d4gw3xn] {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.result-item[b-787d4gw3xn] {
    flex: 1;
    min-width: 250px;
    padding: 1.5rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.result-item.success[b-787d4gw3xn] {
    background: var(--success-lighter);
    border: 1px solid var(--success-light);
}

.result-item.error[b-787d4gw3xn] {
    background: var(--error-lighter);
    border: 1px solid var(--error-light);
}

.result-item i[b-787d4gw3xn] {
    font-size: 2rem;
}

.result-item.success i[b-787d4gw3xn] {
    color: var(--success-main);
}

.result-item.error i[b-787d4gw3xn] {
    color: var(--error-main);
}

.result-item strong[b-787d4gw3xn] {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
}

.result-item span[b-787d4gw3xn] {
    display: block;
    font-size: 0.875rem;
    color: var(--gray-600);
}

/* Result Errors */
.result-errors[b-787d4gw3xn] {
    padding: 1.5rem;
    background: var(--error-lighter);
    border: 1px solid var(--error-light);
    border-radius: 12px;
    margin-bottom: 2rem;
}

.result-errors h4[b-787d4gw3xn] {
    margin: 0 0 1rem 0;
    color: var(--error-main);
    font-size: 1rem;
    font-weight: 600;
}

.result-errors ul[b-787d4gw3xn] {
    margin: 0;
    padding-left: 1.5rem;
    list-style: disc;
}

.result-errors li[b-787d4gw3xn] {
    margin-bottom: 0.5rem;
    color: var(--error-dark);
    font-size: 0.875rem;
}

/* Result Actions */
.result-actions[b-787d4gw3xn] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Buttons */
.btn-primary[b-787d4gw3xn],
.btn-secondary[b-787d4gw3xn] {
    padding: 0.625rem 1.5rem;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: inherit;
    height: auto;
    min-height: 40px;
}

.btn-primary[b-787d4gw3xn] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border: 1px solid var(--acv-primary);
}

.btn-primary:hover:not(:disabled)[b-787d4gw3xn] {
    background: var(--acv-primary-700);
    border-color: var(--acv-primary-700);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

.btn-primary:disabled[b-787d4gw3xn] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-secondary[b-787d4gw3xn] {
    background: var(--acv-white);
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
}

.btn-secondary:hover[b-787d4gw3xn] {
    background: var(--gray-50);
    border-color: var(--gray-400);
    transform: translateY(-1px);
}

.btn-large[b-787d4gw3xn] {
    padding: 0.75rem 2rem;
    font-size: 1rem;
    min-height: 44px;
}

/* Animations */
@keyframes spin-b-787d4gw3xn {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.fa-spin[b-787d4gw3xn] {
    animation: spin-b-787d4gw3xn 1s linear infinite;
}

.step-number .fa-spinner[b-787d4gw3xn] {
    width: auto;
    height: auto;
}

.success[b-787d4gw3xn] {
    color: var(--success-main) !important;
}

.warning[b-787d4gw3xn] {
    color: var(--warning-main) !important;
}

/* Responsive */
@media (max-width: 768px) {
    .import-excel-page[b-787d4gw3xn] {
        padding: 0.5rem 1rem;
    }

    .card-header-section[b-787d4gw3xn] {
        padding: 1.5rem;
    }

    .card-header-content[b-787d4gw3xn] {
        flex-direction: column;
        align-items: stretch;
    }

    .card-header-actions[b-787d4gw3xn] {
        flex-direction: column;
        width: 100%;
        margin-left: 0;
    }

    .btn-primary[b-787d4gw3xn],
    .btn-secondary[b-787d4gw3xn] {
        width: 100%;
        justify-content: center;
    }

    .step-content[b-787d4gw3xn] {
        padding: 1.5rem;
    }

    .step-header[b-787d4gw3xn] {
        padding: 1rem 1.5rem;
    }

    .upload-area[b-787d4gw3xn] {
        padding: 2rem 1rem;
    }

    .preview-summary[b-787d4gw3xn],
    .result-summary[b-787d4gw3xn] {
        flex-direction: column;
    }

    .import-actions[b-787d4gw3xn],
    .result-actions[b-787d4gw3xn] {
        flex-direction: column;
    }

    .summary-item[b-787d4gw3xn],
    .result-item[b-787d4gw3xn] {
        min-width: 100%;
    }
}
/* _content/ltia.portal.web/Components/Exams/Admin/Pages/QuestionBank/Index.razor.rz.scp.css */
/* CSS Variables - T??ng t? nh? Tags Index */
.questionbank-page[b-ed7p8tei1l] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    
    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* QuestionBank Page Styles - Based on Tags Design */
label[b-ed7p8tei1l] {
    color: var(--gray-700);
    margin: 0;
}

/* Card Header Section */
.card-header-section[b-ed7p8tei1l] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.card-header-content[b-ed7p8tei1l] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.card-header-icon[b-ed7p8tei1l] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
}

.card-header-text h1[b-ed7p8tei1l] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-800);
}

.card-header-text p[b-ed7p8tei1l] {
    margin: 0.25rem 0 0 0;
    color: var(--gray-600);
    font-size: 1rem;
}

/* Search Section */
.subjects-search-section[b-ed7p8tei1l] {
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    margin-bottom: 2rem;
    overflow: visible;
    position: relative;
    z-index: 100;
}

.search-container[b-ed7p8tei1l] {
    padding: 2rem;
}

.search-header[b-ed7p8tei1l] {
    margin-bottom: 1.5rem;
    text-align: center;
}

.search-title[b-ed7p8tei1l] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 0.5rem 0;
}

.search-title i[b-ed7p8tei1l] {
    color: var(--acv-primary);
    font-size: 1.3rem;
}

.search-subtitle[b-ed7p8tei1l] {
    color: var(--gray-600);
    font-size: 1rem;
    margin: 0;
    font-weight: 400;
}

.search-content[b-ed7p8tei1l] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.search-main-row[b-ed7p8tei1l] {
    display: flex;
    gap: 1.5rem;
    align-items: flex-end;
    flex-wrap: wrap;
    position: relative;
    z-index: 20;
    justify-content: flex-start;
}

.search-input-group[b-ed7p8tei1l] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 0 0 700px;
    min-width: 700px;
    position: relative;
    z-index: 20;
}

.form-label[b-ed7p8tei1l] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-700);
    margin: 0;
}

.form-label i[b-ed7p8tei1l] {
    color: var(--acv-primary);
    font-size: 0.8rem;
}

.form-input[b-ed7p8tei1l] {
    width: 100%;
    height: 48px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--acv-white);
    box-sizing: border-box;
}

.form-input:focus[b-ed7p8tei1l] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.tag-filter-section[b-ed7p8tei1l] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 0 0 600px;
    min-width: 600px;
    position: relative;
    z-index: 20;
}

.search-controls[b-ed7p8tei1l] {
    display: flex;
    gap: 0.75rem;
    align-items: end;
    position: relative;
    z-index: 20;
    flex-shrink: 0;
    min-width: 120px;
    flex: 0 0 120px;
}

.search-btn[b-ed7p8tei1l], .clear-btn[b-ed7p8tei1l] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border: none;
    padding: 0.75rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 20;
    width: 48px;
    height: 48px;
    box-sizing: border-box;
}

.search-btn:hover[b-ed7p8tei1l] {
    background: var(--acv-primary-700);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

.clear-btn[b-ed7p8tei1l] {
    background: var(--gray-500);
}

.clear-btn:hover[b-ed7p8tei1l] {
    background: var(--gray-600);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* List Container */
.subjects-list-container[b-ed7p8tei1l] {
    background: var(--acv-white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
}

/* List Header */
.list-header[b-ed7p8tei1l] {
    background: var(--acv-white) !important;
    padding: 1.75rem 2rem;
    border-bottom: 1px solid var(--gray-200);
    border-radius: 16px 16px 0 0;
    position: relative;
    z-index: 100;
    overflow: visible;
}

.list-header[b-ed7p8tei1l]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 16px 0 0 0;
}

.list-header-content[b-ed7p8tei1l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0;
}

.list-title-section[b-ed7p8tei1l] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.list-title[b-ed7p8tei1l] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.list-title i[b-ed7p8tei1l] {
    color: var(--acv-primary);
    font-size: 1.25rem;
}

.list-count[b-ed7p8tei1l] {
    background: var(--acv-primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Sort Controls */
.sort-controls[b-ed7p8tei1l] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.sort-dropdown-btn[b-ed7p8tei1l] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--acv-white);
    border: 2px solid var(--acv-primary);
    border-radius: 12px;
    color: var(--acv-primary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
    justify-content: space-between;
}

.sort-dropdown-btn:hover[b-ed7p8tei1l] {
    background: var(--acv-primary);
    color: var(--acv-white);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
}

.sort-dropdown-btn.active[b-ed7p8tei1l] {
    border-color: var(--primary-500);
    color: var(--primary-600);
    box-shadow: 0 0 0 3px var(--primary-100);
}

.sort-dropdown-btn i.rotated[b-ed7p8tei1l] {
    transform: rotate(180deg);
    transition: transform 0.2s ease;
}

.refresh-btn[b-ed7p8tei1l] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--acv-white);
    color: var(--acv-primary);
    border: 2px solid var(--acv-primary);
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none;
}

.refresh-btn:hover[b-ed7p8tei1l] {
    background: var(--acv-primary);
    color: var(--acv-white);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
    text-decoration: none;
}

/* Sort Dropdown */
.sort-dropdown[b-ed7p8tei1l] {
    position: relative;
    display: inline-block;
}

/* Sort Dropdown Menu */
.sort-dropdown-menu[b-ed7p8tei1l] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--acv-white);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 50;
    margin-top: 0.5rem;
    overflow: hidden;
    min-width: 200px;
}

.sort-option[b-ed7p8tei1l] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    width: 100%;
    background: var(--acv-white);
    border: none;
    color: var(--acv-primary);
    font-size: 0.875rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    border-bottom: 1px solid var(--gray-100);
}

.sort-option:last-child[b-ed7p8tei1l] {
    border-bottom: none;
}

.sort-option:hover[b-ed7p8tei1l] {
    background: var(--acv-primary-50);
    color: var(--acv-primary);
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.1);
}

.sort-option.active[b-ed7p8tei1l] {
    background: var(--acv-primary-50);
    color: var(--acv-primary);
    font-weight: 600;
}

.sort-option i:first-child[b-ed7p8tei1l] {
    width: 16px;
    color: var(--acv-primary);
    font-size: 0.875rem;
}

.sort-option span[b-ed7p8tei1l] {
    flex: 1;
}

.sort-icons[b-ed7p8tei1l] {
    display: none;
}

.sort-divider[b-ed7p8tei1l] {
    height: 1px;
    background: var(--gray-200);
    margin: 0.5rem 0;
}

/* Subjects List */
.subjects-list[b-ed7p8tei1l] {
    padding: 1.5rem;
    gap: 1.5rem;
    position: relative;
    z-index: 5;
    min-height: 200px;
}

/* Subjects Container - Grid Layout */
#subjectsContainer[b-ed7p8tei1l] {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Desktop: luôn 3 card/hàng */
    grid-auto-rows: 1fr; /* Đảm bảo tất cả card trong cùng hàng có cùng chiều cao */
    gap: 1.5rem;
    padding: 1.5rem;
    justify-content: start;
    align-items: stretch; /* Đảm bảo tất cả card trong cùng hàng có cùng chiều cao */
}

/* Subject Card */
.subject-card[b-ed7p8tei1l] {
    background: var(--acv-white);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    z-index: 5;
    display: flex;
    flex-direction: column;
    height: 100%; /* Đảm bảo card chiếm hết chiều cao của grid cell */
    width: 100%;
    max-width: 100%;
    cursor: pointer;
}

.subject-card[b-ed7p8tei1l]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--acv-primary);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.subject-card:hover[b-ed7p8tei1l] {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: var(--acv-primary);
}

.subject-card:hover[b-ed7p8tei1l]::before {
    opacity: 1;
}

/* Subject Card Header */
.subject-card-header[b-ed7p8tei1l] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.5rem 1.5rem 1rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    position: relative;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}

.subject-card-header[b-ed7p8tei1l]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--acv-primary) 0%, #1e40af 100%);
    border-radius: 0 2px 2px 0;
}

.subject-title[b-ed7p8tei1l] {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
    line-height: 1.4;
    flex: 1;
    padding-right: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.subject-title i[b-ed7p8tei1l] {
    color: var(--acv-primary);
    font-size: 1.1rem;
}

.inactive-badge[b-ed7p8tei1l] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 12px;
    background: var(--error-lighter);
    color: var(--error-dark);
    white-space: nowrap;
    flex-shrink: 0;
    border: 1px solid var(--error-light);
}

/* Subject Card Body */
.subject-card-body[b-ed7p8tei1l] {
    padding: 1.25rem 1.5rem;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    background: #ffffff;
    min-height: 0; /* Cho phép flex item shrink */
    overflow: hidden; /* Ẩn nội dung vượt quá */
}

.subject-description[b-ed7p8tei1l] {
    font-size: 1rem !important;
    color: var(--gray-700);
    line-height: 1.8;
    font-weight: 500;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Giới hạn hiển thị tối đa 3 dòng */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-height: 0;
}

.subject-meta[b-ed7p8tei1l] {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.subject-code[b-ed7p8tei1l] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--acv-primary);
    background: rgba(33, 76, 166, 0.08);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1px solid rgba(33, 76, 166, 0.15);
    transition: all 0.3s ease;
    text-transform: uppercase;
    max-width: fit-content;
    position: relative;
    overflow: hidden;
}

.subject-code:hover[b-ed7p8tei1l] {
    transform: translateY(-2px);
    background: var(--acv-primary);
    color: var(--acv-white);
    border-color: var(--acv-primary);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.25);
}

.subject-code i[b-ed7p8tei1l] {
    color: var(--acv-primary);
    font-size: 0.75rem;
    transition: color 0.3s ease;
}

.subject-code:hover i[b-ed7p8tei1l] {
    color: var(--acv-white);
}

/* Subject Card Footer */
.subject-card-footer[b-ed7p8tei1l] {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 0 0 12px 12px;
}

/* Tags Container - Hiển thị tags theo dạng lưới */
.subject-tags-container[b-ed7p8tei1l] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
    max-height: 120px;
    overflow-y: auto;
    padding: 0.25rem;
}

.subject-tag[b-ed7p8tei1l] {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.8rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
    box-shadow: 0 2px 4px rgba(33, 76, 166, 0.2);
    transition: all 0.3s ease;
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid rgba(33, 76, 166, 0.3);
}

.subject-tag:hover[b-ed7p8tei1l] {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
    background: linear-gradient(135deg, var(--acv-primary-700) 0%, var(--acv-primary-800) 100%);
}

.subject-tag.no-tag[b-ed7p8tei1l] {
    background: linear-gradient(135deg, var(--gray-200) 0%, var(--gray-300) 100%);
    color: var(--gray-600);
    border: 1px solid var(--gray-300);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Empty State */
.empty-state[b-ed7p8tei1l] {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--gray-600);
}

.empty-state-icon[b-ed7p8tei1l] {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--gray-400);
}

.empty-state h3[b-ed7p8tei1l] {
    margin-bottom: 0.5rem;
    color: var(--gray-700);
    font-size: 1.25rem;
    font-weight: 600;
}

.empty-state p[b-ed7p8tei1l] {
    margin-bottom: 2rem;
    color: var(--gray-600);
}

/* Table Footer */
.table-footer[b-ed7p8tei1l] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--acv-white);
    border-top: 1px solid var(--gray-200);
    border-radius: 0 0 16px 16px;
    gap: 2rem;
}

.results-info[b-ed7p8tei1l] {
    font-size: 0.9rem;
    color: var(--gray-600);
    font-weight: 500;
}

.pagination-container[b-ed7p8tei1l] {
    display: flex;
    align-items: center;
}

.pagination-nav[b-ed7p8tei1l] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagination-btn[b-ed7p8tei1l] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: var(--acv-white);
    color: var(--gray-600);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s ease;
    cursor: pointer;
}

.pagination-btn:hover[b-ed7p8tei1l] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border-color: var(--acv-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.15);
}

.pagination-btn.active[b-ed7p8tei1l] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border-color: var(--acv-primary);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
}

/* Responsive */
@media (max-width: 900px) {
    #subjectsContainer[b-ed7p8tei1l] {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

@media (max-width: 768px) {
    .questionbank-page[b-ed7p8tei1l] {
        padding: 0.5rem 1rem;
    }

    #subjectsContainer[b-ed7p8tei1l] {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1rem;
    }

    .search-main-row[b-ed7p8tei1l] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-input-group[b-ed7p8tei1l],
    .tag-filter-section[b-ed7p8tei1l],
    .search-controls[b-ed7p8tei1l] {
        min-width: auto;
        flex: 1;
    }

    .sort-controls[b-ed7p8tei1l] {
        flex-wrap: wrap;
        justify-content: center;
    }

    .sort-dropdown-menu[b-ed7p8tei1l] {
        position: fixed;
        left: 1rem;
        right: 1rem;
        top: auto;
        min-width: auto;
}

    .subject-card-header[b-ed7p8tei1l] {
        padding: 1rem;
    }

    .subject-card-body[b-ed7p8tei1l] {
        padding: 1rem;
    }

    .subject-card-footer[b-ed7p8tei1l] {
        padding: 0.75rem 1rem;
    }
    }

@media (max-width: 480px) {
    #subjectsContainer[b-ed7p8tei1l] {
        padding: 0.75rem;
        gap: 0.75rem;
    }

    .subject-title[b-ed7p8tei1l] {
        font-size: 1.1rem;
    }
}
/* _content/ltia.portal.web/Components/Exams/Admin/Pages/Questions/Create.razor.rz.scp.css */
/* CSS Variables - ??t tr?c ti?p v�o .subjects-page */
.subjects-page[b-t0aub2sev4] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    
    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Card Header Section */
.card-header-section[b-t0aub2sev4] {
    background: var(--acv-white);
    border-radius: 20px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--gray-200);
}

.card-header-content[b-t0aub2sev4] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.card-header-icon[b-t0aub2sev4] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
}

.card-header-text h1[b-t0aub2sev4] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-800);
}

.card-header-text p[b-t0aub2sev4] {
    margin: 0.25rem 0 0 0;
    color: var(--gray-600);
    font-size: 1rem;
}

/* Main Content Card */
.subjects-card[b-t0aub2sev4] {
    background: var(--acv-white);
    border-radius: 20px;
    box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--gray-200);
    margin-bottom: 2rem;
}

.create-form-container[b-t0aub2sev4] {
    padding: 2rem;
}

.create-form[b-t0aub2sev4] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Form Groups */
.form-group[b-t0aub2sev4] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Form Row for 2 columns */
.form-row[b-t0aub2sev4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.form-group-half[b-t0aub2sev4] {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .form-row[b-t0aub2sev4] {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    .form-group-half[b-t0aub2sev4] {
        margin-bottom: 1.5rem;
    }
}

.form-label[b-t0aub2sev4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-700);
    margin: 0;
}

.form-label i[b-t0aub2sev4] {
    color: var(--acv-primary);
    font-size: 0.8rem;
}

.form-label-info[b-t0aub2sev4] {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--gray-500);
    font-style: italic;
}

.required[b-t0aub2sev4] {
    color: var(--error-main);
    font-weight: 700;
}

/* Form Inputs - Rounded corners */
.form-input[b-t0aub2sev4], .form-textarea[b-t0aub2sev4], .form-select[b-t0aub2sev4] {
    width: 100% !important;
    max-width: none !important;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--acv-white);
    box-sizing: border-box;
}

.form-input:focus[b-t0aub2sev4], .form-textarea:focus[b-t0aub2sev4], .form-select:focus[b-t0aub2sev4] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.form-input:hover[b-t0aub2sev4], .form-textarea:hover[b-t0aub2sev4], .form-select:hover[b-t0aub2sev4] {
    border-color: var(--gray-300);
}

.form-input:disabled[b-t0aub2sev4], .form-input-disabled[b-t0aub2sev4] {
    background-color: var(--gray-100);
    color: var(--gray-600);
    cursor: not-allowed;
    opacity: 0.7;
}

.form-textarea[b-t0aub2sev4] {
    resize: vertical;
    min-height: 100px;
    line-height: 1.5;
}

.form-text[b-t0aub2sev4] {
    font-size: 0.8rem;
    color: var(--gray-500);
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.form-text.text-warning[b-t0aub2sev4] {
    color: var(--error-main) !important;
    font-weight: 500;
}

.form-text i[b-t0aub2sev4] {
    font-size: 0.7rem;
}

.validation-error[b-t0aub2sev4] {
    font-size: 0.8rem;
    color: var(--error-main);
    margin-top: 0.25rem;
}

/* Checkbox styling */
.checkbox-label[b-t0aub2sev4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--gray-700);
    margin: 0;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.checkbox-label:hover[b-t0aub2sev4] {
    background: var(--gray-50);
}

.checkbox-text[b-t0aub2sev4] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.checkbox-text i[b-t0aub2sev4] {
    color: var(--success-main);
    font-size: 0.8rem;
}

/* Question Status Checkbox */
.question-status-group.form-group[b-t0aub2sev4] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start !important;
    text-align: left;
    margin-bottom: 1.5rem;
}

.question-status-checkbox[b-t0aub2sev4] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    margin: 0;
    padding: 0;
    width: auto;
    justify-content: flex-start;
}

.question-status-input[b-t0aub2sev4] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.status-checkbox-custom[b-t0aub2sev4] {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--gray-400);
    border-radius: 4px;
    background: var(--acv-white);
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.question-status-checkbox:hover .status-checkbox-custom[b-t0aub2sev4] {
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.question-status-input:checked + .status-checkbox-custom[b-t0aub2sev4] {
    background: var(--acv-primary);
    border-color: var(--acv-primary);
}

.question-status-input:checked + .status-checkbox-custom[b-t0aub2sev4]::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid var(--acv-white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.status-checkbox-text[b-t0aub2sev4] {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--gray-700);
    transition: color 0.2s ease;
    line-height: 1.4;
    white-space: nowrap;
}

.question-status-checkbox:hover .status-checkbox-text[b-t0aub2sev4] {
    color: var(--gray-900);
}

.question-status-group .form-text[b-t0aub2sev4] {
    text-align: left;
}


/* Answers Disabled State */
.answers-disabled[b-t0aub2sev4] {
    border: 2px dashed var(--gray-300);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    background: var(--gray-50);
}

.answers-disabled-content[b-t0aub2sev4] {
    color: var(--gray-500);
}

.answers-disabled-content i[b-t0aub2sev4] {
    font-size: 2rem;
    margin-bottom: 1rem;
    display: block;
}

.answers-disabled-content p[b-t0aub2sev4] {
    margin: 0;
    font-style: italic;
}

/* Answers Section Specific Styling */
.answers-section[b-t0aub2sev4] {
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    overflow: hidden;
    background: var(--gray-50);
}

.answers-header[b-t0aub2sev4] {
    padding: 1rem;
    background: var(--gray-100);
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.answers-limit-info[b-t0aub2sev4] {
    font-size: 0.8rem;
    color: var(--warning-dark);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-style: italic;
}

.answers-limit-info i[b-t0aub2sev4] {
    font-size: 0.7rem;
}

.answers-list[b-t0aub2sev4] {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: var(--acv-white);
}

.answer-item[b-t0aub2sev4] {
    border: 2px solid var(--gray-200);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.2s ease;
    background: var(--acv-white);
}

.answer-item:hover[b-t0aub2sev4] {
    border-color: var(--acv-primary);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.1);
    transform: translateY(-1px);
}

.answer-header[b-t0aub2sev4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.answer-key[b-t0aub2sev4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.option-letter[b-t0aub2sev4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 2px 4px rgba(33, 76, 166, 0.2);
}

.answer-controls[b-t0aub2sev4] {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.correct-checkbox .checkbox-text[b-t0aub2sev4] {
    color: var(--success-dark);
    font-weight: 600;
}

/* Answer Checkbox Styling */
.answer-checkbox-label[b-t0aub2sev4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    margin: 0;
    padding: 0;
}

.answer-checkbox-input[b-t0aub2sev4] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.answer-checkbox-custom[b-t0aub2sev4] {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--gray-400);
    border-radius: 4px;
    background: var(--acv-white);
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.answer-checkbox-label:hover .answer-checkbox-custom[b-t0aub2sev4] {
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.answer-checkbox-input:checked + .answer-checkbox-custom[b-t0aub2sev4] {
    background: var(--acv-primary);
    border-color: var(--acv-primary);
}

.answer-checkbox-input:checked + .answer-checkbox-custom[b-t0aub2sev4]::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid var(--acv-white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.answer-checkbox-text[b-t0aub2sev4] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--gray-700);
    transition: color 0.2s ease;
    white-space: nowrap;
}

.answer-checkbox-text.correct-text[b-t0aub2sev4] {
    color: var(--success-main);
    font-weight: 600;
}

.answer-checkbox-label:hover .answer-checkbox-text[b-t0aub2sev4] {
    color: var(--gray-900);
}

.answer-checkbox-label:hover .answer-checkbox-text.correct-text[b-t0aub2sev4] {
    color: var(--success-dark);
}

.remove-answer-btn[b-t0aub2sev4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--error-main) 0%, var(--error-dark) 100%);
    color: var(--acv-white);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.8rem;
    box-shadow: 0 2px 4px rgba(255, 86, 48, 0.2);
}

.remove-answer-btn:hover[b-t0aub2sev4] {
    transform: translateY(-1px) scale(1.05);
    box-shadow: 0 4px 8px rgba(255, 86, 48, 0.3);
}

.remove-answer-btn:disabled[b-t0aub2sev4] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.answer-content[b-t0aub2sev4] {
    padding: 1.5rem;
}

/* Answer Content Grid - 2 Column Layout */
.answer-content-grid[b-t0aub2sev4] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

.answer-content-column[b-t0aub2sev4] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.answer-content-column .form-group[b-t0aub2sev4] {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-bottom: 0;
}

.answer-image-column[b-t0aub2sev4] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.answer-image-column .form-group[b-t0aub2sev4] {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-bottom: 0;
}

.answer-content-column .form-textarea[b-t0aub2sev4] {
    flex: 1;
    min-height: 120px;
}

.answer-textarea[b-t0aub2sev4] {
    min-height: 120px !important;
    width: 100% !important;
    max-width: none !important;
    border-radius: 8px;
    resize: vertical;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Responsive: Stack columns on mobile */
@media (max-width: 768px) {
    .answer-content-grid[b-t0aub2sev4] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Answers Validation */
.answers-validation[b-t0aub2sev4] {
    padding: 1rem;
    background: var(--error-lighter);
    color: var(--error-dark);
    border-top: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
}

.answers-validation i[b-t0aub2sev4] {
    color: var(--error-main);
}

/* No Answers State */
.no-answers[b-t0aub2sev4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 2rem;
    color: var(--gray-600);
    background: var(--acv-white);
}

.no-answers-icon[b-t0aub2sev4] {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--gray-400);
}

.no-answers p[b-t0aub2sev4] {
    margin-bottom: 2rem;
    color: var(--gray-600);
}

.no-answers .btn-primary[b-t0aub2sev4] {
    background: #214ca6;
    color: white;
    border: 1px solid #214ca6;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.no-answers .btn-primary:hover:not(:disabled)[b-t0aub2sev4] {
    background: #1a3d8a;
    border-color: #1a3d8a;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.no-answers .btn-primary:disabled[b-t0aub2sev4] {
    background: #9ca3af;
    border-color: #9ca3af;
    cursor: not-allowed;
    transform: none;
}

/* Form Actions */
.form-actions[b-t0aub2sev4] {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    align-items: center;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
    background: transparent;
}

.btn-primary[b-t0aub2sev4] {
    background: #214ca6;
    color: white;
    border: 1px solid #214ca6;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    min-width: 140px;
    justify-content: center;
}

.btn-primary:hover:not(:disabled)[b-t0aub2sev4] {
    background: #1a3d8a;
    border-color: #1a3d8a;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(33, 76, 166, 0.3);
}

.btn-primary:disabled[b-t0aub2sev4] {
    background: #9ca3af;
    border-color: #9ca3af;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary[b-t0aub2sev4] {
    background: white;
    color: #111827;
    border: 1px solid #d1d5db;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    min-width: 140px;
    justify-content: center;
}

.btn-secondary:hover[b-t0aub2sev4] {
    background: #f9fafb;
    border-color: #9ca3af;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-decoration: none;
}

/* Image Upload Section Styles */
/* Image Upload Area */
.image-upload-area[b-t0aub2sev4] {
    border: 2px dashed var(--gray-300);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: var(--gray-50);
    margin-top: 0.5rem;
}

.image-upload-area:hover[b-t0aub2sev4] {
    border-color: var(--acv-primary);
    background-color: var(--acv-primary-lighter);
}

.image-upload-area.drag-over[b-t0aub2sev4] {
    border-color: var(--acv-primary);
    background-color: var(--acv-primary-lighter);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.15);
    transform: scale(1.02);
}

.image-upload-area.drag-over .upload-content i[b-t0aub2sev4] {
    transform: scale(1.1);
    color: var(--acv-primary-700);
}

.image-upload-area.drag-over .upload-content p[b-t0aub2sev4] {
    color: var(--acv-primary-700);
    font-weight: 600;
}

.upload-content[b-t0aub2sev4] {
    padding: 2rem;
    text-align: center;
}

.upload-content i[b-t0aub2sev4] {
    font-size: 3rem;
    color: var(--acv-primary);
    margin-bottom: 1rem;
}

.upload-content p[b-t0aub2sev4] {
    font-size: 1rem;
    color: var(--gray-700);
    margin: 0.5rem 0;
    font-weight: 500;
}

.upload-content small[b-t0aub2sev4] {
    color: var(--gray-600);
    font-size: 0.85rem;
}

/* Upload Progress */
.upload-progress-container[b-t0aub2sev4] {
    margin-top: 1rem;
}

.upload-progress-bar[b-t0aub2sev4] {
    width: 100%;
    height: 8px;
    background: var(--gray-200);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.upload-progress-fill[b-t0aub2sev4] {
    height: 100%;
    background: linear-gradient(90deg, var(--acv-primary) 0%, var(--acv-primary-light) 100%);
    transition: width 0.3s ease;
}

.upload-progress-text[b-t0aub2sev4] {
    color: var(--gray-600);
    font-size: 0.875rem;
}

/* Image Modal */
.image-modal-overlay[b-t0aub2sev4] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.8) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 10000 !important;
    animation: fadeIn-b-t0aub2sev4 0.2s ease-out;
}

.image-modal-content[b-t0aub2sev4] {
    background: white !important;
    border-radius: 16px !important;
    max-width: 90vw !important;
    max-height: 90vh !important;
    overflow: hidden !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3) !important;
    animation: slideIn-b-t0aub2sev4 0.3s ease-out;
}

.image-modal-header[b-t0aub2sev4] {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 1rem 1.5rem !important;
    background: var(--gray-50) !important;
    border-bottom: 1px solid var(--gray-200) !important;
}

.image-modal-header h3[b-t0aub2sev4] {
    margin: 0 !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--gray-800) !important;
}

.close-btn[b-t0aub2sev4] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    background: var(--gray-200) !important;
    color: var(--gray-600) !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.close-btn:hover[b-t0aub2sev4] {
    background: var(--gray-300) !important;
    color: var(--gray-800) !important;
}

.image-modal-body[b-t0aub2sev4] {
    padding: 1rem !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.modal-image[b-t0aub2sev4] {
    max-width: 100% !important;
    max-height: 70vh !important;
    border-radius: 8px !important;
}

@keyframes fadeIn-b-t0aub2sev4 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn-b-t0aub2sev4 {
    from { 
        transform: scale(0.9);
        opacity: 0;
    }
    to { 
        transform: scale(1);
        opacity: 1;
    }
}

/* Current Images Section */
.current-images[b-t0aub2sev4] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 0.5rem;
}

.current-image-item[b-t0aub2sev4] {
    display: flex;
    flex-direction: column;
    background: var(--acv-white);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s ease;
    max-width: 200px;
}

.current-image-item:hover[b-t0aub2sev4] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-color: var(--acv-primary);
}

.current-image-item .image-info[b-t0aub2sev4] {
    flex: 1;
    cursor: pointer;
}

.current-image-item .image-thumbnail[b-t0aub2sev4] {
    position: relative;
    width: 100%;
    padding-top: 75%; /* 4:3 aspect ratio */
    overflow: hidden;
    background: var(--gray-100);
}

.current-image-item .image-thumbnail img[b-t0aub2sev4] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.current-image-item .image-overlay[b-t0aub2sev4] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 5;
}

.current-image-item .image-info:hover .image-overlay[b-t0aub2sev4] {
    opacity: 1;
}

.current-image-item .image-overlay i[b-t0aub2sev4] {
    color: var(--acv-white);
    font-size: 1.5rem;
}

.current-image-item .image-name[b-t0aub2sev4] {
    padding: 0.5rem;
    font-size: 0.85rem;
    color: var(--gray-700);
    text-align: center;
    word-break: break-word;
}

.current-image-item .remove-image-btn[b-t0aub2sev4] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 0.6);
    color: var(--acv-white);
    border: none;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    backdrop-filter: blur(4px);
}

.current-image-item .remove-image-btn:hover[b-t0aub2sev4] {
    background: var(--error-main);
    color: var(--acv-white);
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(255, 86, 48, 0.4);
}

.current-image-item .remove-image-btn i[b-t0aub2sev4] {
    font-size: 0.875rem;
    font-weight: 600;
}

.no-images[b-t0aub2sev4] {
    padding: 2rem;
    text-align: center;
    color: var(--gray-500);
    font-style: italic;
    background: var(--gray-50);
    border: 1px dashed var(--gray-300);
    border-radius: 8px;
    margin-top: 0.5rem;
}

/* Selected Images Section */
.selected-images-section[b-t0aub2sev4] {
    margin-top: 1rem;
    background: var(--acv-white);
    border: 1px solid var(--success-lighter);
    border-radius: 8px;
    padding: 1rem;
}

.selected-images-header[b-t0aub2sev4] {
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--success-lighter);
}

.selected-images-title[b-t0aub2sev4] {
    font-weight: 600;
    color: var(--success-dark);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.selected-images-title i[b-t0aub2sev4] {
    color: var(--success-main);
}

.selected-images-list[b-t0aub2sev4] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.selected-image-item[b-t0aub2sev4] {
    display: flex;
    flex-direction: column;
    background: var(--acv-white);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s ease;
    max-width: 200px;
}

.selected-image-item:hover[b-t0aub2sev4] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-color: var(--success-main);
}

.selected-image-item .image-thumbnail[b-t0aub2sev4] {
    position: relative;
    width: 100%;
    padding-top: 75%; /* 4:3 aspect ratio */
    overflow: hidden;
    background: var(--gray-100);
}

.selected-image-item .image-thumbnail img[b-t0aub2sev4] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.selected-image-item .image-info[b-t0aub2sev4] {
    flex: 1;
    cursor: pointer;
}

.selected-image-item .image-overlay[b-t0aub2sev4] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.selected-image-item .image-info:hover .image-overlay[b-t0aub2sev4] {
    opacity: 1;
}

.selected-image-item .image-overlay i[b-t0aub2sev4] {
    color: var(--acv-white);
    font-size: 1.5rem;
}

.selected-image-item .image-name[b-t0aub2sev4] {
    padding: 0.5rem;
    font-size: 0.85rem;
    color: var(--gray-700);
    text-align: center;
    word-break: break-word;
}

.selected-image-item .remove-image-btn[b-t0aub2sev4] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 0.6);
    color: var(--acv-white);
    border: none;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    backdrop-filter: blur(4px);
}

.selected-image-item .remove-image-btn:hover[b-t0aub2sev4] {
    background: var(--error-main);
    color: var(--acv-white);
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(255, 86, 48, 0.4);
}

.selected-image-item .remove-image-btn i[b-t0aub2sev4] {
    font-size: 0.875rem;
    font-weight: 600;
}

/* Upload Controls */
.upload-controls[b-t0aub2sev4] {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.file-input[b-t0aub2sev4] {
    display: none;
}

.upload-btn[b-t0aub2sev4] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: #10b981;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.upload-btn:hover:not(:disabled)[b-t0aub2sev4] {
    background: #059669;
    transform: translateY(-1px);
}

.upload-btn:disabled[b-t0aub2sev4] {
    background: #9ca3af;
    cursor: not-allowed;
    transform: none;
}

/* Selected Images Preview */
.selected-images-preview[b-t0aub2sev4] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.preview-header[b-t0aub2sev4] {
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}

.preview-title[b-t0aub2sev4] {
    font-weight: 600;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.preview-title i[b-t0aub2sev4] {
    color: #214ca6;
}

.images-preview-list[b-t0aub2sev4] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.image-preview-item[b-t0aub2sev4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    background: #f9fafb;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
}

.preview-info[b-t0aub2sev4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.preview-info i[b-t0aub2sev4] {
    color: #6b7280;
    font-size: 1.1rem;
}

.file-name[b-t0aub2sev4] {
    font-weight: 500;
    color: #374151;
}

.file-size[b-t0aub2sev4] {
    color: #6b7280;
    font-size: 0.875rem;
}

.remove-image-btn[b-t0aub2sev4] {
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
}

.remove-image-btn:hover[b-t0aub2sev4] {
    background: #dc2626;
}

/* Uploaded Images Section */
.uploaded-images-section[b-t0aub2sev4] {
    background: white;
    border: 1px solid #d1fae5;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.uploaded-header[b-t0aub2sev4] {
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #d1fae5;
}

.uploaded-title[b-t0aub2sev4] {
    font-weight: 600;
    color: #065f46;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.uploaded-title i[b-t0aub2sev4] {
    color: #10b981;
}

.uploaded-images-list[b-t0aub2sev4] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.uploaded-image-item[b-t0aub2sev4] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #f0fdf4;
    border-radius: 8px;
    border: 1px solid #d1fae5;
}

.image-thumbnail[b-t0aub2sev4] {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #d1fae5;
}

.thumbnail-img[b-t0aub2sev4] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-info[b-t0aub2sev4] {
    flex: 1;
}

.image-name[b-t0aub2sev4] {
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.25rem;
}

.image-url[b-t0aub2sev4] {
    font-size: 0.875rem;
    color: #6b7280;
    word-break: break-all;
}

.remove-uploaded-btn[b-t0aub2sev4] {
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.remove-uploaded-btn:hover[b-t0aub2sev4] {
    background: #dc2626;
    transform: scale(1.05);
}

/* Answer Image Upload Section */
.answer-image-upload[b-t0aub2sev4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem 1rem;
    background: var(--acv-white);
    border: 2px dashed var(--gray-300);
    border-radius: 12px;
    transition: all 0.3s ease;
    min-height: 120px;
    text-align: center;
    flex: 1;
    cursor: pointer;
    position: relative;
}

.answer-image-upload:hover[b-t0aub2sev4] {
    border-color: var(--acv-primary);
    background: var(--gray-50);
}

.answer-image-upload.drag-over[b-t0aub2sev4] {
    border-color: var(--acv-primary);
    background: var(--acv-primary-lighter);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.15);
    transform: scale(1.02);
}

.answer-image-upload.drag-over .upload-icon-wrapper i[b-t0aub2sev4] {
    transform: translateY(-3px) scale(1.1);
    color: var(--acv-primary-700);
}

.answer-image-upload.drag-over .upload-main-text[b-t0aub2sev4] {
    color: var(--acv-primary-700);
    font-weight: 600;
}

.upload-icon-wrapper[b-t0aub2sev4] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.upload-icon-wrapper i[b-t0aub2sev4] {
    font-size: 3rem;
    color: var(--acv-primary);
    transition: all 0.3s ease;
}

.answer-image-upload:hover .upload-icon-wrapper i[b-t0aub2sev4] {
    transform: translateY(-3px);
    color: var(--acv-primary-700);
}

.upload-text-content[b-t0aub2sev4] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: center;
}

.upload-main-text[b-t0aub2sev4] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--gray-700);
    line-height: 1.5;
}

.upload-sub-text[b-t0aub2sev4] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--gray-600);
    line-height: 1.4;
}

.uploading-indicator[b-t0aub2sev4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--acv-primary);
    font-size: 0.875rem;
    font-weight: 500;
    margin-top: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(33, 76, 166, 0.1);
    border-radius: 8px;
}

.uploading-indicator i[b-t0aub2sev4] {
    animation: spin-b-t0aub2sev4 1s linear infinite;
}

@keyframes spin-b-t0aub2sev4 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Answer Uploaded Image Display */
.answer-uploaded-image[b-t0aub2sev4] {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 1rem;
    background: linear-gradient(135deg, var(--success-lighter) 0%, rgba(0, 200, 83, 0.05) 100%);
    border: 2px solid #d1fae5;
    border-radius: 12px;
    min-height: 120px;
    flex: 1;
}

.image-preview-container[b-t0aub2sev4] {
    position: relative;
    width: 100%;
    max-width: 100%;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid var(--success-main);
    box-shadow: 0 4px 12px rgba(0, 200, 83, 0.2);
    background: var(--acv-white);
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.image-preview-container:hover[b-t0aub2sev4] {
    box-shadow: 0 6px 16px rgba(0, 200, 83, 0.3);
    transform: translateY(-2px);
}

.image-preview-container:hover .image-overlay[b-t0aub2sev4] {
    opacity: 1;
}

.image-preview-container .image-overlay[b-t0aub2sev4] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 5;
}

.image-preview-container .image-overlay i[b-t0aub2sev4] {
    color: var(--acv-white);
    font-size: 2rem;
}

.answer-image-preview[b-t0aub2sev4] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: var(--acv-white);
}

.remove-answer-image-btn[b-t0aub2sev4] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 0.6);
    color: var(--acv-white);
    border: none;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    backdrop-filter: blur(4px);
}

.remove-answer-image-btn:hover[b-t0aub2sev4] {
    background: var(--error-main);
    color: var(--acv-white);
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(255, 86, 48, 0.4);
}

.remove-answer-image-btn i[b-t0aub2sev4] {
    font-size: 0.875rem;
    font-weight: 600;
}

/* SelectSearch styling for Question Type */
.form-group-half[b-t0aub2sev4]  .select-search {
    width: 100%;
    position: relative;
    z-index: 1000;
}

.form-group-half[b-t0aub2sev4]  .select-search-input-wrapper {
    position: relative;
    z-index: 1000;
}

.form-group-half[b-t0aub2sev4]  .select-search-input {
    width: 100% !important;
    max-width: none !important;
    height: auto;
    min-height: 48px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--acv-white);
    box-sizing: border-box;
}

.form-group-half[b-t0aub2sev4]  .select-search-input:focus {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.form-group-half[b-t0aub2sev4]  .select-search-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    background: var(--acv-white);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    max-height: calc(4 * 48px + 0.5rem);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 10000 !important;
    margin-top: 0.5rem;
}

/* Custom scrollbar for dropdown */
.form-group-half[b-t0aub2sev4]  .select-search-dropdown::-webkit-scrollbar {
    width: 6px;
}

.form-group-half[b-t0aub2sev4]  .select-search-dropdown::-webkit-scrollbar-track {
    background: var(--gray-100);
    border-radius: 3px;
}

.form-group-half[b-t0aub2sev4]  .select-search-dropdown::-webkit-scrollbar-thumb {
    background: var(--gray-400);
    border-radius: 3px;
}

.form-group-half[b-t0aub2sev4]  .select-search-dropdown::-webkit-scrollbar-thumb:hover {
    background: var(--gray-500);
}

.form-group-half[b-t0aub2sev4]  .select-search-item {
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid var(--gray-100);
    min-height: 48px;
    display: flex;
    align-items: center;
}

.form-group-half[b-t0aub2sev4]  .select-search-item:last-child {
    border-bottom: none;
}

.form-group-half[b-t0aub2sev4]  .select-search-item:hover {
    background: rgba(33, 76, 166, 0.05);
    color: var(--acv-primary);
}

.form-group-half[b-t0aub2sev4]  .dropdown-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.form-group-half[b-t0aub2sev4]  .option-name {
    flex: 1;
    font-weight: 500;
    color: var(--gray-800);
}

.form-group-half[b-t0aub2sev4]  .option-code {
    font-size: 0.875rem;
    color: var(--gray-600);
    background: var(--gray-100);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
}

.form-group-half[b-t0aub2sev4]  .select-search-input-icons {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-group-half[b-t0aub2sev4]  .select-search-clear-btn,
.form-group-half[b-t0aub2sev4]  .select-search-dropdown-btn {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--gray-500);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.form-group-half[b-t0aub2sev4]  .select-search-clear-btn:hover,
.form-group-half[b-t0aub2sev4]  .select-search-dropdown-btn:hover {
    color: var(--acv-primary);
}

.form-group-half[b-t0aub2sev4]  .select-search-dropdown-icon {
    transition: transform 0.2s ease;
}

.form-group-half[b-t0aub2sev4]  .select-search-dropdown-icon.rotated {
    transform: rotate(180deg);
}

/* Responsive for Answer Image Upload */
@media (max-width: 768px) {
    .answer-image-upload[b-t0aub2sev4] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .answer-uploaded-image[b-t0aub2sev4] {
        padding: 0.75rem;
    }
    
    .image-preview-container[b-t0aub2sev4] {
        max-width: 100%;
    }
    
    .image-actions[b-t0aub2sev4] {
        flex-direction: column;
    }
    
    .btn-danger[b-t0aub2sev4] {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .answer-controls[b-t0aub2sev4] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .checkbox-label[b-t0aub2sev4] {
        justify-content: center;
    }
    
    .btn-primary[b-t0aub2sev4], .btn-secondary[b-t0aub2sev4] {
        border-radius: 12px;
    }
}
/* _content/ltia.portal.web/Components/Exams/Admin/Pages/Questions/Details.razor.rz.scp.css */
/* Block scroll khi image modal hiển thị - Sử dụng cách tiếp cận mạnh hơn */
html.modal-open[b-7286qu8wke] {
    overflow: hidden !important;
    height: 100% !important;
    position: relative !important;
}

body.modal-open[b-7286qu8wke] {
    overflow: hidden !important;
    height: 100% !important;
    position: relative !important;
    margin: 0 !important;
}

/* Đảm bảo main content area cũng không scroll khi modal mở */
body.modal-open main[b-7286qu8wke] {
    overflow: hidden !important;
}

/* CSS Variables */
.question-detail-page[b-7286qu8wke] {
    --acv-primary: #214ca6;
    --acv-primary-50: rgba(33, 76, 166, 0.05);
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    
    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Loading Section */
.loading-section[b-7286qu8wke],
.error-section[b-7286qu8wke] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    margin-bottom: 2rem;
}

.loading-content[b-7286qu8wke],
.error-content[b-7286qu8wke] {
    text-align: center;
    max-width: 400px;
}

.loading-icon[b-7286qu8wke],
.error-icon[b-7286qu8wke] {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--gray-400);
}

.loading-icon i[b-7286qu8wke] {
    color: var(--acv-primary);
}

.error-icon i[b-7286qu8wke] {
    color: var(--error-main);
}

.loading-content h3[b-7286qu8wke],
.error-content h3[b-7286qu8wke] {
    margin-bottom: 0.5rem;
    color: var(--gray-700);
    font-size: 1.125rem;
    font-weight: 600;
}

.loading-content p[b-7286qu8wke],
.error-content p[b-7286qu8wke] {
    margin-bottom: 2rem;
    color: var(--gray-600);
    font-size: 0.95rem;
}

.error-actions[b-7286qu8wke] {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.btn-back[b-7286qu8wke] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--gray-100);
    color: var(--gray-700);
    border: 2px solid var(--gray-300);
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-back:hover[b-7286qu8wke] {
    background: var(--gray-200);
    color: var(--gray-800);
    border-color: var(--gray-400);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Card Header Section */
.card-header-section[b-7286qu8wke] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.card-header-content[b-7286qu8wke] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.card-header-icon[b-7286qu8wke] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
}

.card-header-text h1[b-7286qu8wke] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-800);
}

.card-header-text p[b-7286qu8wke] {
    margin: 0.25rem 0 0 0;
    color: var(--gray-600);
    font-size: 1rem;
}

/* Detail Card */
.detail-card[b-7286qu8wke] {
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    overflow: hidden;
    transition: all 0.2s ease;
    margin-bottom: 2rem;
}

.detail-card:hover[b-7286qu8wke] {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-color: var(--acv-primary);
}

.card-header[b-7286qu8wke] {
    background: var(--gray-50);
    padding: 1.5rem;
    border-bottom: 2px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.card-title[b-7286qu8wke] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.card-title i[b-7286qu8wke] {
    color: var(--acv-primary);
    font-size: 1.1rem;
}


.card-body[b-7286qu8wke] {
    padding: 1.5rem;
}

/* Info Grid */
.info-grid[b-7286qu8wke] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

/* Info Grid 4 Cards - 2 Columns Layout */
.info-grid-4[b-7286qu8wke] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.info-item-card[b-7286qu8wke] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem;
    background: var(--acv-white);
    border-radius: 16px;
    border: 1px solid var(--gray-200);
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.info-item-card:hover[b-7286qu8wke] {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    border-color: var(--acv-primary);
}

.info-icon-circle[b-7286qu8wke] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 50%;
    color: var(--acv-white);
    font-size: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.25);
    transition: all 0.3s ease;
}

.info-item-card:hover .info-icon-circle[b-7286qu8wke] {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(33, 76, 166, 0.35);
}

.info-content[b-7286qu8wke] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.info-label-text[b-7286qu8wke] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.info-value-badge[b-7286qu8wke] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.info-value-badge i[b-7286qu8wke] {
    font-size: 0.875rem;
}

/* Type Badge */
.type-badge-new.type-1[b-7286qu8wke] {
    background: linear-gradient(135deg, rgba(33, 76, 166, 0.1) 0%, rgba(33, 76, 166, 0.15) 100%);
    color: var(--acv-primary);
    border: 1px solid rgba(33, 76, 166, 0.2);
}

.type-badge-new.type-2[b-7286qu8wke] {
    background: linear-gradient(135deg, rgba(255, 171, 0, 0.1) 0%, rgba(255, 171, 0, 0.15) 100%);
    color: var(--warning-dark);
    border: 1px solid rgba(255, 171, 0, 0.2);
}

.type-badge-new.type-3[b-7286qu8wke] {
    background: linear-gradient(135deg, rgba(0, 200, 83, 0.1) 0%, rgba(0, 200, 83, 0.15) 100%);
    color: var(--success-dark);
    border: 1px solid rgba(0, 200, 83, 0.2);
}

/* Status Badge */
.status-badge-new.active[b-7286qu8wke] {
    background: linear-gradient(135deg, rgba(0, 200, 83, 0.1) 0%, rgba(0, 200, 83, 0.15) 100%);
    color: var(--success-dark);
    border: 1px solid rgba(0, 200, 83, 0.2);
}

.status-badge-new.active i[b-7286qu8wke] {
    color: var(--success-main);
}

.status-badge-new.inactive[b-7286qu8wke] {
    background: linear-gradient(135deg, rgba(255, 86, 48, 0.1) 0%, rgba(255, 86, 48, 0.15) 100%);
    color: var(--error-dark);
    border: 1px solid rgba(255, 86, 48, 0.2);
}

.status-badge-new.inactive i[b-7286qu8wke] {
    color: var(--error-main);
}

/* Image Badge */
.image-badge-new[b-7286qu8wke] {
    background: linear-gradient(135deg, rgba(0, 200, 83, 0.1) 0%, rgba(0, 200, 83, 0.15) 100%);
    color: var(--success-dark);
    border: 1px solid rgba(0, 200, 83, 0.2);
}

.image-badge-new i[b-7286qu8wke] {
    color: var(--success-main);
}

.image-badge-new.no-image[b-7286qu8wke] {
    background: linear-gradient(135deg, rgba(156, 163, 175, 0.1) 0%, rgba(156, 163, 175, 0.15) 100%);
    color: var(--gray-600);
    border: 1px solid rgba(156, 163, 175, 0.2);
}

.image-badge-new.no-image i[b-7286qu8wke] {
    color: var(--gray-500);
}

/* Answers Count Display */
.answers-count-display[b-7286qu8wke] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    color: var(--gray-800);
    font-size: 1rem;
    font-weight: 600;
}

.answers-count-display .count-number[b-7286qu8wke] {
    color: var(--acv-primary);
    font-size: 1.25rem;
    font-weight: 700;
}

.answers-count-display .count-separator[b-7286qu8wke] {
    color: var(--gray-400);
    font-weight: 500;
}

.answers-count-display .count-total[b-7286qu8wke] {
    color: var(--gray-600);
    font-weight: 600;
}

.answers-count-display .count-label[b-7286qu8wke] {
    color: var(--gray-600);
    font-weight: 400;
    font-size: 0.9rem;
    margin-left: 0.25rem;
}

.info-item[b-7286qu8wke] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
    background: var(--gray-50);
    border-radius: 12px;
    border: 1px solid var(--gray-200);
    transition: all 0.2s ease;
}

.info-item:hover[b-7286qu8wke] {
    background: var(--acv-white);
    border-color: var(--acv-primary);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.1);
    transform: translateY(-2px);
}

.info-item-full[b-7286qu8wke] {
    grid-column: 1 / -1;
}

/* Subject Hero Card */
.info-item-subject[b-7286qu8wke] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem;
    background: var(--acv-white);
    border-radius: 16px;
    border: 2px solid var(--gray-200);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.info-item-subject:hover[b-7286qu8wke] {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-color: var(--acv-primary);
}

.subject-icon-wrapper[b-7286qu8wke] {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #214ca6;
    border-radius: 14px;
    color: var(--acv-white);
    font-size: 1.75rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.25);
    transition: all 0.3s ease;
}

.info-item-subject:hover .subject-icon-wrapper[b-7286qu8wke] {
    box-shadow: 0 6px 16px rgba(33, 76, 166, 0.35);
    transform: scale(1.05);
}

.subject-content[b-7286qu8wke] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.subject-label[b-7286qu8wke] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0.25rem;
}

.subject-name[b-7286qu8wke] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    line-height: 1.3;
}

.info-label[b-7286qu8wke] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    color: var(--gray-700);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-icon-wrapper[b-7286qu8wke] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 10px;
    color: var(--acv-white);
    font-size: 0.875rem;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(33, 76, 166, 0.2);
}

.info-label-text[b-7286qu8wke] {
    flex: 1;
}

.info-value[b-7286qu8wke] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 32px;
}

.info-text-value[b-7286qu8wke] {
    color: var(--gray-800);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
}

.question-id-badge[b-7286qu8wke] {
    display: inline-flex;
    align-items: center;
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    font-weight: 700;
    color: var(--acv-primary);
    background: linear-gradient(135deg, var(--acv-primary-50) 0%, rgba(33, 76, 166, 0.08) 100%);
    padding: 0.5rem 1rem;
    border-radius: 10px;
    border: 2px solid var(--acv-primary-lighter);
    letter-spacing: 1px;
    box-shadow: 0 2px 4px rgba(33, 76, 166, 0.1);
}

.answers-count-value[b-7286qu8wke] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    color: var(--gray-800);
    font-size: 1rem;
    font-weight: 600;
}

.count-number[b-7286qu8wke] {
    color: var(--acv-primary);
    font-size: 1.125rem;
    font-weight: 700;
}

.count-separator[b-7286qu8wke] {
    color: var(--gray-400);
    font-weight: 500;
}

.count-total[b-7286qu8wke] {
    color: var(--gray-600);
    font-weight: 600;
}

.count-label[b-7286qu8wke] {
    color: var(--gray-600);
    font-weight: 400;
    font-size: 0.9rem;
    margin-left: 0.25rem;
}

.status-badge[b-7286qu8wke] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.status-badge:hover[b-7286qu8wke] {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.status-badge.active[b-7286qu8wke] {
    background: linear-gradient(135deg, var(--success-lighter) 0%, rgba(232, 245, 232, 0.8) 100%);
    color: var(--success-dark);
    border: 2px solid var(--success-light);
}

.status-badge.active i[b-7286qu8wke] {
    color: var(--success-dark);
}

.status-badge.inactive[b-7286qu8wke] {
    background: linear-gradient(135deg, var(--error-lighter) 0%, rgba(255, 235, 238, 0.8) 100%);
    color: var(--error-dark);
    border: 2px solid var(--error-light);
}

.status-badge.inactive i[b-7286qu8wke] {
    color: var(--error-dark);
}

.type-badge[b-7286qu8wke] {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.type-badge:hover[b-7286qu8wke] {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.type-badge.type-1[b-7286qu8wke] {
    background: linear-gradient(135deg, #e3f2fd 0%, rgba(227, 242, 253, 0.8) 100%);
    color: #1565c0;
    border: 2px solid #bbdefb;
}

.type-badge.type-2[b-7286qu8wke] {
    background: linear-gradient(135deg, #fff3e0 0%, rgba(255, 243, 224, 0.8) 100%);
    color: #ef6c00;
    border: 2px solid #ffcc02;
}

.type-badge.type-3[b-7286qu8wke] {
    background: linear-gradient(135deg, #e8f5e8 0%, rgba(232, 245, 232, 0.8) 100%);
    color: #2e7d32;
    border: 2px solid #a5d6a7;
}

.image-badge[b-7286qu8wke] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, var(--success-lighter) 0%, rgba(232, 245, 232, 0.8) 100%);
    color: var(--success-dark);
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    border: 2px solid var(--success-light);
    box-shadow: 0 2px 4px rgba(0, 200, 83, 0.15);
    transition: all 0.2s ease;
}

.image-badge:hover[b-7286qu8wke] {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 200, 83, 0.25);
}

.image-badge i[b-7286qu8wke] {
    color: var(--success-dark);
    font-size: 0.875rem;
}

.answers-count-badge[b-7286qu8wke] {
    background: var(--acv-primary);
    color: var(--acv-white);
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Form Actions */
.form-actions[b-7286qu8wke] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-200);
    flex-wrap: wrap;
}

.btn-primary[b-7286qu8wke],
.btn-secondary[b-7286qu8wke],
.btn-danger[b-7286qu8wke] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    border: none;
    min-width: 160px;
    justify-content: center;
}

.btn-primary[b-7286qu8wke] {
    background: #214ca6;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.15);
}

.btn-primary:hover[b-7286qu8wke] {
    background: #1a3d8a;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.25);
    text-decoration: none;
    color: #ffffff;
}

.btn-secondary[b-7286qu8wke] {
    background: #ffffff;
    color: #4a5568;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.btn-secondary:hover[b-7286qu8wke] {
    background: #f7fafc;
    border-color: #cbd5e0;
    transform: translateY(-1px);
    color: #2d3748;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-danger[b-7286qu8wke] {
    background: linear-gradient(135deg, #ff5630 0%, #ff8a65 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(255, 86, 48, 0.25);
}

.btn-danger:hover[b-7286qu8wke] {
    background: linear-gradient(135deg, #e53e3e 0%, #ff6b47 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 86, 48, 0.35);
}

/* Question and Answers Combined Card */
.question-answers-card[b-7286qu8wke] {
    background: var(--gray-50);
    padding: 0;
    border: none;
}

.question-answers-header[b-7286qu8wke] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 2rem;
    background: var(--acv-white);
    border-bottom: 2px solid var(--gray-200);
    position: relative;
}

.question-answers-header[b-7286qu8wke]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 0;
}

.question-number-badge[b-7286qu8wke] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--acv-primary);
    color: var(--acv-white);
    border-radius: 12px;
    font-size: 1.5rem;
    font-weight: 700;
    flex-shrink: 0;
}

.question-type-header[b-7286qu8wke] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.question-type-icon-wrapper[b-7286qu8wke] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 10px;
    color: var(--acv-white);
    font-size: 1rem;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(33, 76, 166, 0.2);
}

.question-type-label[b-7286qu8wke] {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--gray-700);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
}

.question-type-info[b-7286qu8wke] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.type-dot[b-7286qu8wke] {
    width: 8px;
    height: 8px;
    background: var(--acv-primary);
    border-radius: 50%;
}

.type-text[b-7286qu8wke] {
    font-size: 0.95rem;
    color: var(--gray-800);
    font-weight: 500;
}

.question-answers-body[b-7286qu8wke] {
    padding: 2rem;
    background: var(--acv-white);
    margin: 1rem;
    border-radius: 12px;
}

.question-content-wrapper[b-7286qu8wke] {
    margin-bottom: 2rem;
}

.question-content-section[b-7286qu8wke] {
    background: var(--gray-50);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--gray-200);
    transition: all 0.2s ease;
}

.question-content-section:hover[b-7286qu8wke] {
    border-color: var(--acv-primary-lighter);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.08);
}

.question-content-header[b-7286qu8wke] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--gray-200);
}

.question-content-icon[b-7286qu8wke] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 8px;
    color: var(--acv-white);
    font-size: 1rem;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(33, 76, 166, 0.2);
}

.question-content-label[b-7286qu8wke] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--gray-800);
    display: flex;
    align-items: center;
    letter-spacing: 0.3px;
}

.question-text-content[b-7286qu8wke] {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--gray-800);
    padding: 1rem 1.25rem;
    background: var(--acv-white);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    margin: 0;
    min-height: 60px;
    transition: all 0.2s ease;
}

.question-text-content:hover[b-7286qu8wke] {
    border-color: var(--acv-primary-lighter);
    box-shadow: 0 1px 4px rgba(33, 76, 166, 0.1);
}

.question-images[b-7286qu8wke] {
    margin-top: 1.5rem;
}

.images-title[b-7286qu8wke] {
    margin: 0 0 1rem 0;
    color: var(--gray-700);
    font-size: 0.95rem;
    font-weight: 600;
}

.image-gallery[b-7286qu8wke] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.image-item[b-7286qu8wke] {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    cursor: pointer;
}

.image-item:hover[b-7286qu8wke] {
    transform: scale(1.02);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.question-image[b-7286qu8wke] {
    width: 100%;
    height: 150px;
    object-fit: cover;
    transition: all 0.2s ease;
}

/* Answers Section */
.answers-section-wrapper[b-7286qu8wke] {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--gray-200);
}

.answers-label[b-7286qu8wke] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: 1rem;
}

.answers-list[b-7286qu8wke] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.answer-item[b-7286qu8wke] {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    border: 2px solid var(--gray-200);
    border-radius: 12px;
    transition: all 0.2s ease;
    background: var(--acv-white);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.answer-main-row[b-7286qu8wke] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
}

.answer-item:hover[b-7286qu8wke] {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.answer-item.correct[b-7286qu8wke] {
    border-color: var(--success-main);
    background: var(--success-lighter);
    box-shadow: 0 2px 8px rgba(0, 200, 83, 0.15);
}

.answer-item.correct:hover[b-7286qu8wke] {
    box-shadow: 0 4px 12px rgba(0, 200, 83, 0.25);
}

.answer-item.inactive[b-7286qu8wke] {
    opacity: 0.6;
    background: var(--gray-50);
}

.answer-key[b-7286qu8wke] {
    flex-shrink: 0;
}

.option-letter[b-7286qu8wke] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--acv-primary);
    color: var(--acv-white);
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.9rem;
}

.answer-item.correct .option-letter[b-7286qu8wke] {
    background: var(--success-main);
}

.answer-text[b-7286qu8wke] {
    flex: 1;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--gray-800);
    font-weight: 500;
}

.answer-status[b-7286qu8wke] {
    flex-shrink: 0;
    margin-left: auto;
}

.correct-badge[b-7286qu8wke] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--success-main);
    color: var(--acv-white);
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0, 200, 83, 0.3);
}

.correct-badge i[b-7286qu8wke] {
    font-size: 1rem;
}

.inactive-badge[b-7286qu8wke] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--gray-400);
    color: var(--acv-white);
}

.answer-image[b-7286qu8wke] {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--gray-200);
}

.answer-item.correct .answer-image[b-7286qu8wke] {
    border-top-color: var(--success-light);
}

.answer-img[b-7286qu8wke] {
    max-width: 100%;
    max-height: 200px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
}

.answer-img:hover[b-7286qu8wke] {
    transform: scale(1.02);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* No Answers State */
.no-answers[b-7286qu8wke] {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--gray-600);
}

.no-answers-icon[b-7286qu8wke] {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--gray-400);
}

.no-answers h3[b-7286qu8wke] {
    margin-bottom: 0.5rem;
    color: var(--gray-700);
    font-size: 1.125rem;
    font-weight: 600;
}

.no-answers p[b-7286qu8wke] {
    margin: 0;
    color: var(--gray-600);
    font-size: 0.95rem;
}

/* Image Modal */
.image-modal-overlay[b-7286qu8wke] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    animation: fadeIn-b-7286qu8wke 0.2s ease-out;
}

.image-modal-content[b-7286qu8wke] {
    background: white;
    border-radius: 16px;
    max-width: 90vw;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    animation: slideIn-b-7286qu8wke 0.3s ease-out;
}

.image-modal-header[b-7286qu8wke] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.image-modal-header h3[b-7286qu8wke] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-800);
}

.close-btn[b-7286qu8wke] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--gray-200);
    color: var(--gray-600);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.close-btn:hover[b-7286qu8wke] {
    background: var(--gray-300);
    color: var(--gray-800);
}

.image-modal-body[b-7286qu8wke] {
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-image[b-7286qu8wke] {
    max-width: 100%;
    max-height: 70vh;
    border-radius: 8px;
}

@keyframes fadeIn-b-7286qu8wke {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn-b-7286qu8wke {
    from { 
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to { 
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .question-detail-page[b-7286qu8wke] {
        padding: 0.5rem 1rem;
    }

    .card-header[b-7286qu8wke] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .info-grid-4[b-7286qu8wke] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .info-item-card[b-7286qu8wke] {
        padding: 1.25rem;
    }

    .info-icon-circle[b-7286qu8wke] {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }

    .form-actions[b-7286qu8wke] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .btn-primary[b-7286qu8wke],
    .btn-secondary[b-7286qu8wke],
    .btn-danger[b-7286qu8wke] {
        width: 100%;
        min-width: auto;
    }

    .info-grid[b-7286qu8wke] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .info-item[b-7286qu8wke] {
        padding: 1rem;
    }

    .info-icon-wrapper[b-7286qu8wke] {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

    .info-item-subject[b-7286qu8wke] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1.5rem;
    }

    .subject-icon-wrapper[b-7286qu8wke] {
        width: 56px;
        height: 56px;
        font-size: 1.5rem;
    }

    .subject-name[b-7286qu8wke] {
        font-size: 1.25rem;
    }

    .question-answers-header[b-7286qu8wke] {
        padding: 1rem 1.5rem;
        flex-wrap: wrap;
    }

    .question-type-header[b-7286qu8wke] {
        gap: 0.75rem;
    }

    .question-type-icon-wrapper[b-7286qu8wke] {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .question-type-label[b-7286qu8wke] {
        font-size: 0.8rem;
    }

    .question-number-badge[b-7286qu8wke] {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }

    .question-answers-body[b-7286qu8wke] {
        padding: 1.5rem;
        margin: 0.75rem;
    }

    .question-content-section[b-7286qu8wke] {
        padding: 1.25rem;
    }

    .question-content-header[b-7286qu8wke] {
        gap: 0.5rem;
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
    }

    .question-content-icon[b-7286qu8wke] {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }

    .question-content-label[b-7286qu8wke] {
        font-size: 0.875rem;
    }

    .question-text-content[b-7286qu8wke] {
        font-size: 1rem;
        padding: 0.875rem 1rem;
    }

    .answer-main-row[b-7286qu8wke] {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .answer-status[b-7286qu8wke] {
        margin-left: 0;
        width: 100%;
    }

    .image-gallery[b-7286qu8wke] {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 0.75rem;
    }

    .answer-header[b-7286qu8wke] {
        padding: 0.75rem 1rem;
    }

    .answer-content[b-7286qu8wke] {
        padding: 1rem;
    }

    .image-modal-content[b-7286qu8wke] {
        max-width: 95vw;
        max-height: 95vh;
    }

    .modal-image[b-7286qu8wke] {
        max-height: 60vh;
    }
}

@media (max-width: 480px) {
    .header-actions[b-7286qu8wke] {
        flex-direction: column;
    }


    .answer-header[b-7286qu8wke] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .answer-status[b-7286qu8wke] {
        justify-content: flex-start;
    }
}
/* _content/ltia.portal.web/Components/Exams/Admin/Pages/Questions/Edit.razor.rz.scp.css */
/* Block scroll khi image modal hiển thị - Sử dụng cách tiếp cận mạnh hơn */
html.modal-open[b-mjizbskvzo] {
    overflow: hidden !important;
    height: 100% !important;
    position: relative !important;
}

body.modal-open[b-mjizbskvzo] {
    overflow: hidden !important;
    height: 100% !important;
    position: relative !important;
    margin: 0 !important;
}

/* Đảm bảo main content area cũng không scroll khi modal mở */
body.modal-open main[b-mjizbskvzo] {
    overflow: hidden !important;
}

/* CSS Variables */
.subjects-page[b-mjizbskvzo] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    
    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Card Header */
.subjects-card-header[b-mjizbskvzo] {
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--acv-white) 100%);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.header-content[b-mjizbskvzo] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem 2.5rem;
}

.header-icon[b-mjizbskvzo] {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.25);
    flex-shrink: 0;
}

.header-icon i[b-mjizbskvzo] {
    color: var(--acv-white);
    font-size: 1.75rem;
}

.header-text[b-mjizbskvzo] {
    flex: 1;
}

.header-title[b-mjizbskvzo] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
}

.header-subtitle[b-mjizbskvzo] {
    font-size: 1rem;
    color: var(--gray-600);
    margin: 0;
    line-height: 1.5;
}

/* Loading Section */
.loading-section[b-mjizbskvzo],
.error-section[b-mjizbskvzo] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    margin-bottom: 2rem;
}

.loading-content[b-mjizbskvzo],
.error-content[b-mjizbskvzo] {
    text-align: center;
    max-width: 400px;
}

.loading-icon[b-mjizbskvzo],
.error-icon[b-mjizbskvzo] {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--gray-400);
}

.loading-icon i[b-mjizbskvzo] {
    color: var(--acv-primary);
}

.error-icon i[b-mjizbskvzo] {
    color: var(--error-main);
}

.loading-content h3[b-mjizbskvzo],
.error-content h3[b-mjizbskvzo] {
    margin-bottom: 0.5rem;
    color: var(--gray-700);
    font-size: 1.125rem;
    font-weight: 600;
}

.loading-content p[b-mjizbskvzo],
.error-content p[b-mjizbskvzo] {
    margin-bottom: 2rem;
    color: var(--gray-600);
    font-size: 0.95rem;
}

.not-found-container[b-mjizbskvzo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    background: var(--acv-white);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--gray-200);
    margin-bottom: 2rem;
}

.not-found-container i[b-mjizbskvzo] {
    font-size: 4rem;
    color: var(--warning-main);
    margin-bottom: 1.5rem;
}

.not-found-container h3[b-mjizbskvzo] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 0.5rem 0;
}

.not-found-container p[b-mjizbskvzo] {
    color: var(--gray-600);
    margin: 0 0 2rem 0;
    font-size: 1rem;
}

.btn-secondary[b-mjizbskvzo] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--gray-100);
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-secondary:hover[b-mjizbskvzo] {
    background: var(--gray-200);
    border-color: var(--gray-400);
    color: var(--gray-900);
}

.btn-secondary i[b-mjizbskvzo] {
    font-size: 0.9rem;
}

/* Main Content Card */
.subjects-card[b-mjizbskvzo] {
    background: var(--acv-white);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--gray-200);
    overflow: visible;
    position: relative;
    z-index: 15;
    margin-bottom: 1.5rem;
}

.create-form-container[b-mjizbskvzo] {
    padding: 2rem;
}

.create-form[b-mjizbskvzo] {
    max-width: 100%;
}

/* Form Groups */
.form-group[b-mjizbskvzo] {
    margin-bottom: 1.5rem;
}

/* Form Row for 2 columns */
.form-row[b-mjizbskvzo] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.form-group-half[b-mjizbskvzo] {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .form-row[b-mjizbskvzo] {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    .form-group-half[b-mjizbskvzo] {
        margin-bottom: 1.5rem;
    }
}

.form-label[b-mjizbskvzo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
}

.form-label i[b-mjizbskvzo] {
    color: var(--acv-primary);
    font-size: 0.85rem;
}

.required[b-mjizbskvzo] {
    color: var(--error-main);
    font-weight: 700;
}

.form-input[b-mjizbskvzo], .form-textarea[b-mjizbskvzo] {
    width: 100% !important;
    max-width: none !important;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--acv-white);
    box-sizing: border-box;
}

.form-input:focus[b-mjizbskvzo], .form-textarea:focus[b-mjizbskvzo] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.form-input:disabled[b-mjizbskvzo], .form-input-disabled[b-mjizbskvzo] {
    background-color: var(--gray-100);
    color: var(--gray-600);
    cursor: not-allowed;
    opacity: 0.7;
}

.form-textarea[b-mjizbskvzo] {
    resize: vertical;
    min-height: 100px;
}

.form-text[b-mjizbskvzo] {
    font-size: 0.8rem;
    color: var(--gray-500);
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-text i[b-mjizbskvzo] {
    color: var(--gray-500);
    font-size: 0.75rem;
    flex-shrink: 0;
}

.text-warning[b-mjizbskvzo] {
    color: var(--warning-dark);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--warning-lighter);
    border-left: 4px solid var(--warning-main);
    border-radius: 8px;
    margin-top: 0.5rem;
}

.text-warning i[b-mjizbskvzo] {
    color: var(--warning-dark);
    font-size: 1rem;
}

.validation-error[b-mjizbskvzo] {
    font-size: 0.8rem;
    color: var(--error-main);
    margin-top: 0.25rem;
}

/* Checkbox styling */
.checkbox-label[b-mjizbskvzo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--gray-700);
    margin: 0;
}

.checkbox-text[b-mjizbskvzo] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.checkbox-text i[b-mjizbskvzo] {
    color: var(--success-main);
    font-size: 0.8rem;
}

/* Question Status Checkbox */
.question-status-group.form-group[b-mjizbskvzo] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start !important;
    text-align: left;
    margin-bottom: 1.5rem;
}

.question-status-checkbox[b-mjizbskvzo] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    margin: 0;
    padding: 0;
    width: auto;
    justify-content: flex-start;
}

.question-status-input[b-mjizbskvzo] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.status-checkbox-custom[b-mjizbskvzo] {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--gray-400);
    border-radius: 4px;
    background: var(--acv-white);
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.question-status-checkbox:hover .status-checkbox-custom[b-mjizbskvzo] {
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.question-status-input:checked + .status-checkbox-custom[b-mjizbskvzo] {
    background: var(--acv-primary);
    border-color: var(--acv-primary);
}

.question-status-input:checked + .status-checkbox-custom[b-mjizbskvzo]::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid var(--acv-white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.status-checkbox-text[b-mjizbskvzo] {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--gray-700);
    transition: color 0.2s ease;
    line-height: 1.4;
    white-space: nowrap;
}

.question-status-checkbox:hover .status-checkbox-text[b-mjizbskvzo] {
    color: var(--gray-900);
}

.question-status-group .form-text[b-mjizbskvzo] {
    text-align: left;
    margin-top: 0;
    margin-left: 0;
    width: auto;
    align-self: flex-start;
}

/* Answers Section Specific Styling */
.answers-section[b-mjizbskvzo] {
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    overflow: hidden;
    background: var(--gray-50);
}

.answers-header[b-mjizbskvzo] {
    padding: 1rem;
    background: var(--gray-100);
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.answers-list[b-mjizbskvzo] {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: var(--acv-white);
}

.answer-item[b-mjizbskvzo] {
    border: 2px solid var(--gray-200);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
    background: var(--acv-white);
}

.answer-item:hover[b-mjizbskvzo] {
    border-color: var(--acv-primary);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.1);
}

.answer-header[b-mjizbskvzo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.answer-key[b-mjizbskvzo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.option-letter[b-mjizbskvzo] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--acv-primary);
    color: var(--acv-white);
    border-radius: 50%;
    font-weight: 700;
    font-size: 1rem;
}

.answer-controls[b-mjizbskvzo] {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

/* Answer Checkbox Styling */
.answer-checkbox-label[b-mjizbskvzo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    margin: 0;
    padding: 0;
}

.answer-checkbox-input[b-mjizbskvzo] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.answer-checkbox-custom[b-mjizbskvzo] {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--gray-400);
    border-radius: 4px;
    background: var(--acv-white);
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.answer-checkbox-label:hover .answer-checkbox-custom[b-mjizbskvzo] {
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.answer-checkbox-input:checked + .answer-checkbox-custom[b-mjizbskvzo] {
    background: var(--acv-primary);
    border-color: var(--acv-primary);
}

.answer-checkbox-input:checked + .answer-checkbox-custom[b-mjizbskvzo]::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid var(--acv-white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.answer-checkbox-text[b-mjizbskvzo] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--gray-700);
    transition: color 0.2s ease;
    white-space: nowrap;
}

.answer-checkbox-text.correct-text[b-mjizbskvzo] {
    color: var(--success-main);
    font-weight: 600;
}

.answer-checkbox-label:hover .answer-checkbox-text[b-mjizbskvzo] {
    color: var(--gray-900);
}

.answer-checkbox-label:hover .answer-checkbox-text.correct-text[b-mjizbskvzo] {
    color: var(--success-dark);
}

.remove-answer-btn[b-mjizbskvzo] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--error-lighter) 0%, rgba(255, 86, 48, 0.1) 100%);
    color: var(--error-dark);
    border: 1px solid var(--error-light);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.remove-answer-btn:hover[b-mjizbskvzo] {
    background: linear-gradient(135deg, var(--error-main) 0%, var(--error-dark) 100%);
    color: var(--acv-white);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(255, 86, 48, 0.3);
    border-color: var(--error-main);
}

.remove-answer-btn i[b-mjizbskvzo] {
    font-size: 0.9rem;
}

.answer-content[b-mjizbskvzo] {
    padding: 1.5rem;
}

/* Answer Content Grid - 2 Column Layout */
.answer-content-grid[b-mjizbskvzo] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

.answer-content-column[b-mjizbskvzo] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.answer-content-column .form-group[b-mjizbskvzo] {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-bottom: 0;
}

.answer-image-column[b-mjizbskvzo] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.answer-image-column .form-group[b-mjizbskvzo] {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-bottom: 0;
}

.answer-content-column .form-textarea[b-mjizbskvzo] {
    flex: 1;
    min-height: 120px;
}

.answer-textarea[b-mjizbskvzo] {
    min-height: 120px !important;
    width: 100% !important;
    max-width: none !important;
    resize: vertical;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Responsive: Stack columns on mobile */
@media (max-width: 768px) {
    .answer-content-grid[b-mjizbskvzo] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Answers Validation */
.answers-validation[b-mjizbskvzo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: var(--error-lighter);
    border: 1px solid var(--error-light);
    border-radius: 8px;
    color: var(--error-dark);
    font-size: 0.9rem;
    font-weight: 500;
    margin-top: 1rem;
    box-shadow: 0 1px 3px rgba(255, 86, 48, 0.1);
}

.answers-validation i[b-mjizbskvzo] {
    color: var(--error-main);
    font-size: 1rem;
    flex-shrink: 0;
}

/* No Answers State */
.no-answers[b-mjizbskvzo] {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--gray-600);
    background: var(--acv-white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.no-answers-icon[b-mjizbskvzo] {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--gray-400);
}

.no-answers p[b-mjizbskvzo] {
    margin-bottom: 2rem;
    color: var(--gray-600);
}

.no-answers .btn-primary[b-mjizbskvzo] {
    margin: 0 auto;
}

.btn-primary[b-mjizbskvzo] {
    background: #214ca6;
    color: white;
    border: 1px solid #214ca6;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    min-width: 140px;
    justify-content: center;
}

.btn-primary:hover:not(:disabled)[b-mjizbskvzo] {
    background: #1a3d8a;
    border-color: #1a3d8a;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(33, 76, 166, 0.3);
}

.btn-primary:disabled[b-mjizbskvzo] {
    background: #9ca3af;
    border-color: #9ca3af;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary[b-mjizbskvzo] {
    background: white;
    color: #111827;
    border: 1px solid #d1d5db;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    min-width: 140px;
    justify-content: center;
}

.btn-secondary:hover[b-mjizbskvzo] {
    background: #f9fafb;
    border-color: #9ca3af;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-decoration: none;
}

/* Button Thêm đáp án - giống button Thêm giảng viên */
.answers-header .btn-secondary[b-mjizbskvzo] {
    padding: 0.5rem 1rem;
    border: 2px solid var(--acv-primary);
    border-radius: 12px;
    background: var(--acv-white);
    color: var(--acv-primary);
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
    box-shadow: none;
}

.answers-header .btn-secondary:hover:not(:disabled)[b-mjizbskvzo] {
    background: var(--acv-primary);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
    border-color: var(--acv-primary);
}

.answers-header .btn-secondary:disabled[b-mjizbskvzo] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Form Actions */
.form-actions[b-mjizbskvzo] {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    align-items: center;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
    background: transparent;
}

/* Current Images Section */
.current-images[b-mjizbskvzo] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 0.5rem;
}

.current-image-item[b-mjizbskvzo] {
    display: flex;
    flex-direction: column;
    background: var(--acv-white);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s ease;
    max-width: 200px;
}

.current-image-item:hover[b-mjizbskvzo] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-color: var(--acv-primary);
}

.current-image-item .image-info[b-mjizbskvzo] {
    flex: 1;
    cursor: pointer;
}

.current-image-item .image-thumbnail[b-mjizbskvzo] {
    position: relative;
    width: 100%;
    padding-top: 75%; /* 4:3 aspect ratio */
    overflow: hidden;
    background: var(--gray-100);
}

.current-image-item .image-thumbnail img[b-mjizbskvzo] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.current-image-item .image-overlay[b-mjizbskvzo] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.current-image-item .image-info:hover .image-overlay[b-mjizbskvzo] {
    opacity: 1;
}

.current-image-item .image-overlay i[b-mjizbskvzo] {
    color: var(--acv-white);
    font-size: 1.5rem;
}

.current-image-item .image-name[b-mjizbskvzo] {
    padding: 0.5rem;
    font-size: 0.85rem;
    color: var(--gray-700);
    text-align: center;
    word-break: break-word;
}

.current-image-item .remove-image-btn[b-mjizbskvzo] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 0.6);
    color: var(--acv-white);
    border: none;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    backdrop-filter: blur(4px);
}

.current-image-item .remove-image-btn:hover[b-mjizbskvzo] {
    background: var(--error-main);
    color: var(--acv-white);
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(255, 86, 48, 0.4);
}

.current-image-item .remove-image-btn i[b-mjizbskvzo] {
    font-size: 0.875rem;
    font-weight: 600;
}

.no-images[b-mjizbskvzo] {
    padding: 2rem;
    text-align: center;
    color: var(--gray-500);
    font-style: italic;
    background: var(--gray-50);
    border: 1px dashed var(--gray-300);
    border-radius: 8px;
    margin-top: 0.5rem;
}

/* Image Upload Area */
.image-upload-area[b-mjizbskvzo] {
    border: 2px dashed var(--gray-300);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: var(--gray-50);
    margin-top: 0.5rem;
}

.image-upload-area:hover[b-mjizbskvzo] {
    border-color: var(--acv-primary);
    background-color: var(--acv-primary-lighter);
}

.image-upload-area.drag-over[b-mjizbskvzo] {
    border-color: var(--acv-primary);
    background-color: var(--acv-primary-lighter);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.15);
    transform: scale(1.02);
}

.image-upload-area.drag-over .upload-content i[b-mjizbskvzo] {
    transform: scale(1.1);
    color: var(--acv-primary-700);
}

.image-upload-area.drag-over .upload-content p[b-mjizbskvzo] {
    color: var(--acv-primary-700);
    font-weight: 600;
}

.upload-content[b-mjizbskvzo] {
    padding: 2rem;
    text-align: center;
}

.upload-content i[b-mjizbskvzo] {
    font-size: 3rem;
    color: var(--acv-primary);
    margin-bottom: 1rem;
}

.upload-content p[b-mjizbskvzo] {
    font-size: 1rem;
    color: var(--gray-700);
    margin: 0.5rem 0;
    font-weight: 500;
}

.upload-content small[b-mjizbskvzo] {
    color: var(--gray-600);
    font-size: 0.85rem;
}

/* Upload Progress */
.upload-progress-container[b-mjizbskvzo] {
    margin-top: 1rem;
}

.upload-progress-bar[b-mjizbskvzo] {
    width: 100%;
    height: 8px;
    background: var(--gray-200);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.upload-progress-fill[b-mjizbskvzo] {
    height: 100%;
    background: linear-gradient(90deg, var(--acv-primary) 0%, var(--acv-primary-light) 100%);
    transition: width 0.3s ease;
}

.upload-progress-text[b-mjizbskvzo] {
    color: var(--gray-600);
    font-size: 0.875rem;
}

/* Image Modal */
.image-modal-overlay[b-mjizbskvzo] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    animation: fadeIn-b-mjizbskvzo 0.2s ease-out;
}

.image-modal-content[b-mjizbskvzo] {
    background: white;
    border-radius: 16px;
    max-width: 90vw;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    animation: slideIn-b-mjizbskvzo 0.3s ease-out;
}

.image-modal-header[b-mjizbskvzo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.image-modal-header h3[b-mjizbskvzo] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-800);
}

.close-btn[b-mjizbskvzo] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--gray-200);
    color: var(--gray-600);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.close-btn:hover[b-mjizbskvzo] {
    background: var(--gray-300);
    color: var(--gray-800);
}

.image-modal-body[b-mjizbskvzo] {
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-image[b-mjizbskvzo] {
    max-width: 100%;
    max-height: 70vh;
    border-radius: 8px;
}

@keyframes fadeIn-b-mjizbskvzo {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn-b-mjizbskvzo {
    from { 
        transform: scale(0.9);
        opacity: 0;
    }
    to { 
        transform: scale(1);
        opacity: 1;
    }
}

/* Selected Images Section */
.selected-images-section[b-mjizbskvzo] {
    margin-top: 1rem;
    background: var(--acv-white);
    border: 1px solid var(--success-lighter);
    border-radius: 8px;
    padding: 1rem;
}

.selected-images-header[b-mjizbskvzo] {
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--success-lighter);
}

.selected-images-title[b-mjizbskvzo] {
    font-weight: 600;
    color: var(--success-dark);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.selected-images-title i[b-mjizbskvzo] {
    color: var(--success-main);
}

.selected-images-list[b-mjizbskvzo] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.selected-image-item[b-mjizbskvzo] {
    display: flex;
    flex-direction: column;
    background: var(--acv-white);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s ease;
    max-width: 200px;
}

.selected-image-item:hover[b-mjizbskvzo] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-color: var(--success-main);
}

.selected-image-item .image-thumbnail[b-mjizbskvzo] {
    position: relative;
    width: 100%;
    padding-top: 75%; /* 4:3 aspect ratio */
    overflow: hidden;
    background: var(--gray-100);
}

.selected-image-item .image-thumbnail img[b-mjizbskvzo] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.selected-image-item .image-info[b-mjizbskvzo] {
    flex: 1;
    cursor: pointer;
}

.selected-image-item .image-overlay[b-mjizbskvzo] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 5;
}

.selected-image-item .image-info:hover .image-overlay[b-mjizbskvzo] {
    opacity: 1;
}

.selected-image-item .image-overlay i[b-mjizbskvzo] {
    color: var(--acv-white);
    font-size: 1.5rem;
}

.selected-image-item .image-name[b-mjizbskvzo] {
    padding: 0.5rem;
    font-size: 0.85rem;
    color: var(--gray-700);
    text-align: center;
    word-break: break-word;
}

.selected-image-item .remove-image-btn[b-mjizbskvzo] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 0.6);
    color: var(--acv-white);
    border: none;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    backdrop-filter: blur(4px);
}

.selected-image-item .remove-image-btn:hover[b-mjizbskvzo] {
    background: var(--error-main);
    color: var(--acv-white);
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(255, 86, 48, 0.4);
}

.selected-image-item .remove-image-btn i[b-mjizbskvzo] {
    font-size: 0.875rem;
    font-weight: 600;
}

/* Upload Controls */
.upload-controls[b-mjizbskvzo] {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.file-input[b-mjizbskvzo] {
    display: none;
}

.file-upload-btn[b-mjizbskvzo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.25);
    position: relative;
    overflow: hidden;
}

.file-upload-btn[b-mjizbskvzo]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.file-upload-btn:hover[b-mjizbskvzo]::before {
    width: 300px;
    height: 300px;
}

.file-upload-btn:hover[b-mjizbskvzo] {
    background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(33, 76, 166, 0.4);
}

.file-upload-btn i[b-mjizbskvzo] {
    font-size: 1.1rem;
    position: relative;
    z-index: 1;
}

.file-upload-btn span[b-mjizbskvzo],
.file-upload-btn[b-mjizbskvzo] {
    position: relative;
    z-index: 1;
}

.upload-btn[b-mjizbskvzo] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: #10b981;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.upload-btn:hover:not(:disabled)[b-mjizbskvzo] {
    background: #059669;
    transform: translateY(-1px);
}

.upload-btn:disabled[b-mjizbskvzo] {
    background: #9ca3af;
    cursor: not-allowed;
    transform: none;
}

/* Selected Images Preview */
.selected-images-preview[b-mjizbskvzo] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.preview-header[b-mjizbskvzo] {
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}

.preview-title[b-mjizbskvzo] {
    font-weight: 600;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.preview-title i[b-mjizbskvzo] {
    color: #214ca6;
}

.images-preview-list[b-mjizbskvzo] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.image-preview-item[b-mjizbskvzo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    background: #f9fafb;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
}

.preview-info[b-mjizbskvzo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.preview-info i[b-mjizbskvzo] {
    color: #6b7280;
    font-size: 1.1rem;
}

.file-name[b-mjizbskvzo] {
    font-weight: 500;
    color: #374151;
}

.file-size[b-mjizbskvzo] {
    color: #6b7280;
    font-size: 0.875rem;
}

.remove-image-btn[b-mjizbskvzo] {
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
}

.remove-image-btn:hover[b-mjizbskvzo] {
    background: #dc2626;
}

/* Uploaded Images Section */
.uploaded-images-section[b-mjizbskvzo] {
    background: white;
    border: 1px solid #d1fae5;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.uploaded-header[b-mjizbskvzo] {
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #d1fae5;
}

.uploaded-title[b-mjizbskvzo] {
    font-weight: 600;
    color: #065f46;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.uploaded-title i[b-mjizbskvzo] {
    color: #10b981;
}

.uploaded-images-list[b-mjizbskvzo] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.uploaded-image-item[b-mjizbskvzo] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #f0fdf4;
    border-radius: 8px;
    border: 1px solid #d1fae5;
}

.image-thumbnail[b-mjizbskvzo] {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #d1fae5;
}

.thumbnail-img[b-mjizbskvzo] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-info[b-mjizbskvzo] {
    flex: 1;
}

.image-name[b-mjizbskvzo] {
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.25rem;
}

.image-url[b-mjizbskvzo] {
    font-size: 0.875rem;
    color: #6b7280;
    word-break: break-all;
}

.remove-uploaded-btn[b-mjizbskvzo] {
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.remove-uploaded-btn:hover[b-mjizbskvzo] {
    background: #dc2626;
    transform: scale(1.05);
}

/* Responsive */
@media (max-width: 768px) {
    .subjects-page[b-mjizbskvzo] {
        padding: 0.5rem 1rem;
    }
    
    .card-header-section[b-mjizbskvzo] {
        padding: 1.5rem;
    }
    
    .create-form-container[b-mjizbskvzo] {
        padding: 1.5rem;
    }
    
    .form-actions[b-mjizbskvzo] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .btn-primary[b-mjizbskvzo], .btn-secondary[b-mjizbskvzo] {
        justify-content: center;
    }
    
    .answer-header[b-mjizbskvzo] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        padding: 1rem;
    }

    .answer-controls[b-mjizbskvzo] {
        justify-content: flex-start;
        gap: 0.75rem;
    }

    .answer-content[b-mjizbskvzo] {
        padding: 1rem;
    }
    
    .answer-content-grid[b-mjizbskvzo] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .answer-image-upload[b-mjizbskvzo] {
        min-height: 120px;
        padding: 1.25rem 1rem;
    }
    
    .answer-uploaded-image[b-mjizbskvzo] {
        min-height: 120px;
    }

    .upload-controls[b-mjizbskvzo] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .file-upload-btn[b-mjizbskvzo],
    .upload-btn[b-mjizbskvzo] {
        justify-content: center;
    }
    
    .uploaded-image-item[b-mjizbskvzo] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .image-thumbnail[b-mjizbskvzo] {
        align-self: center;
    }
    
    .answer-image-upload[b-mjizbskvzo] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .answer-uploaded-image[b-mjizbskvzo] {
        padding: 0.75rem;
    }
    
    .image-preview-container[b-mjizbskvzo] {
        max-width: 100%;
    }
    
    .image-actions[b-mjizbskvzo] {
        flex-direction: column;
    }
    
    .btn-danger[b-mjizbskvzo] {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .answer-controls[b-mjizbskvzo] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .checkbox-label[b-mjizbskvzo] {
        justify-content: center;
    }
}

/* Answer Image Upload Section */
.answer-image-upload[b-mjizbskvzo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem 1rem;
    background: var(--acv-white);
    border: 2px dashed var(--gray-300);
    border-radius: 12px;
    transition: all 0.3s ease;
    min-height: 120px;
    text-align: center;
    flex: 1;
    cursor: pointer;
    position: relative;
}

.answer-image-upload:hover[b-mjizbskvzo] {
    border-color: var(--acv-primary);
    background: var(--gray-50);
}

.answer-image-upload.drag-over[b-mjizbskvzo] {
    border-color: var(--acv-primary);
    background: var(--acv-primary-lighter);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.15);
    transform: scale(1.02);
}

.answer-image-upload.drag-over .upload-icon-wrapper i[b-mjizbskvzo] {
    transform: translateY(-3px) scale(1.1);
    color: var(--acv-primary-700);
}

.answer-image-upload.drag-over .upload-main-text[b-mjizbskvzo] {
    color: var(--acv-primary-700);
    font-weight: 600;
}

.upload-icon-wrapper[b-mjizbskvzo] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.upload-icon-wrapper i[b-mjizbskvzo] {
    font-size: 3rem;
    color: var(--acv-primary);
    transition: all 0.3s ease;
}

.answer-image-upload:hover .upload-icon-wrapper i[b-mjizbskvzo] {
    transform: translateY(-3px);
    color: var(--acv-primary-700);
}

.upload-text-content[b-mjizbskvzo] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: center;
}

.upload-main-text[b-mjizbskvzo] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--gray-700);
    line-height: 1.5;
}

.upload-sub-text[b-mjizbskvzo] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--gray-600);
    line-height: 1.4;
}

.uploading-indicator[b-mjizbskvzo] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--acv-primary);
    font-size: 0.875rem;
    font-weight: 500;
    margin-top: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(33, 76, 166, 0.1);
    border-radius: 8px;
}

.uploading-indicator i[b-mjizbskvzo] {
    animation: spin-b-mjizbskvzo 1s linear infinite;
}

@keyframes spin-b-mjizbskvzo {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Answer Uploaded Image Display */
.answer-uploaded-image[b-mjizbskvzo] {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 1rem;
    background: linear-gradient(135deg, var(--success-lighter) 0%, rgba(0, 200, 83, 0.05) 100%);
    border: 2px solid #d1fae5;
    border-radius: 12px;
    min-height: 120px;
    flex: 1;
}

.image-preview-container[b-mjizbskvzo] {
    position: relative;
    width: 100%;
    max-width: 100%;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid var(--success-main);
    box-shadow: 0 4px 12px rgba(0, 200, 83, 0.2);
    background: var(--acv-white);
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.image-preview-container:hover[b-mjizbskvzo] {
    box-shadow: 0 6px 16px rgba(0, 200, 83, 0.3);
    transform: translateY(-2px);
}

.image-preview-container:hover .image-overlay[b-mjizbskvzo] {
    opacity: 1;
}

.image-preview-container .image-overlay[b-mjizbskvzo] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 5;
}

.image-preview-container .image-overlay i[b-mjizbskvzo] {
    color: var(--acv-white);
    font-size: 2rem;
}

.answer-image-preview[b-mjizbskvzo] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: var(--acv-white);
}

.remove-answer-image-btn[b-mjizbskvzo] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 0.6);
    color: var(--acv-white);
    border: none;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    backdrop-filter: blur(4px);
}

.remove-answer-image-btn:hover[b-mjizbskvzo] {
    background: var(--error-main);
    color: var(--acv-white);
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(255, 86, 48, 0.4);
}

.remove-answer-image-btn i[b-mjizbskvzo] {
    font-size: 0.875rem;
    font-weight: 600;
}

.image-actions[b-mjizbskvzo] {
    display: flex;
    gap: 0.5rem;
}

.btn-danger[b-mjizbskvzo] {
    background: linear-gradient(135deg, var(--error-main) 0%, var(--error-dark) 100%);
    color: var(--acv-white);
    border: none;
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 2px 8px rgba(255, 86, 48, 0.2);
}

.btn-danger:hover[b-mjizbskvzo] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 86, 48, 0.3);
}

.btn-sm[b-mjizbskvzo] {
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
}
/* _content/ltia.portal.web/Components/Exams/Admin/Pages/Scores/EmployeeDetail.razor.rz.scp.css */
/* Employee Exams Detail Page Styles - Based on Tags Design System */
.employee-exams-page[b-pn7ny279f6] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    
    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Card Header Section - Same as Tags */
.card-header-section[b-pn7ny279f6] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.card-header-content[b-pn7ny279f6] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.card-header-icon[b-pn7ny279f6] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
}

.card-header-text h1[b-pn7ny279f6] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-800);
}

.card-header-text p[b-pn7ny279f6] {
    margin: 0.25rem 0 0 0;
    color: var(--gray-600);
    font-size: 1rem;
}

/* Search Section */
.exams-search-section[b-pn7ny279f6] {
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    margin-bottom: 2rem;
    overflow: visible;
    position: relative;
    z-index: 200;
}

.exams-search-section .search-container[b-pn7ny279f6] {
    padding: 2rem;
}

.exams-search-section .search-header[b-pn7ny279f6] {
    margin-bottom: 1.5rem;
    text-align: center;
}

.exams-search-section .search-title[b-pn7ny279f6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 0.5rem 0;
}

.exams-search-section .search-title i[b-pn7ny279f6] {
    color: var(--acv-primary);
    font-size: 1.3rem;
}

.exams-search-section .search-subtitle[b-pn7ny279f6] {
    color: var(--gray-600);
    font-size: 1rem;
    margin: 0;
    font-weight: 400;
}

.exams-search-section .search-content[b-pn7ny279f6] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.exams-search-section .search-main-row[b-pn7ny279f6] {
    display: flex;
    gap: 1.5rem;
    align-items: flex-end;
    flex-wrap: wrap;
    position: relative;
    z-index: 20;
    justify-content: center;
    max-width: 1000px;
    margin: 0 auto;
    overflow: visible;
}

.exams-search-section .search-input-group[b-pn7ny279f6] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
    z-index: 20;
}

.exams-search-section .search-input-main[b-pn7ny279f6] {
    flex: 1;
    min-width: 400px;
    max-width: 700px;
}

.exams-search-section .search-input-date[b-pn7ny279f6] {
    flex: 0 0 auto;
    min-width: 300px;
    max-width: 400px;
    position: relative;
    z-index: 1000;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-self: flex-end;
}

.exams-search-section .search-input-date[b-pn7ny279f6]  .datetime-input-group {
    margin-bottom: 0;
    position: relative;
    z-index: 1000;
}

.exams-search-section .search-input-date[b-pn7ny279f6]  .datetime-label {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-700);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.exams-search-section .search-input-date[b-pn7ny279f6]  .datetime-label i {
    color: var(--acv-primary);
    font-size: 0.8rem;
}

.exams-search-section .search-input-date[b-pn7ny279f6]  .datetime-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0 !important;
    width: 100%;
}

.exams-search-section .search-input-date[b-pn7ny279f6]  .datetime-input {
    width: 100%;
    height: 48px;
    padding: 0.75rem 2.5rem 0.75rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--acv-white);
    box-sizing: border-box;
}

.exams-search-section .search-input-date[b-pn7ny279f6]  .datetime-input:focus {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.exams-search-section .search-input-date[b-pn7ny279f6]  .datetime-picker {
    position: absolute;
    top: calc(100% + 0.5rem) !important;
    left: 0 !important;
    width: 100% !important;
    min-width: 280px !important;
    max-width: 320px !important;
    margin-top: 0 !important;
    z-index: 10000 !important;
    background: var(--acv-white);
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 1rem;
}

.exams-search-section .form-label[b-pn7ny279f6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-700);
    margin: 0;
}

.exams-search-section .form-label i[b-pn7ny279f6] {
    color: var(--acv-primary);
    font-size: 0.8rem;
}

.exams-search-section .form-input[b-pn7ny279f6] {
    width: 100%;
    height: 48px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--acv-white);
    box-sizing: border-box;
}

.exams-search-section .form-input:focus[b-pn7ny279f6] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.exams-search-section .search-controls[b-pn7ny279f6] {
    display: flex;
    gap: 0.75rem;
    align-items: end;
    position: relative;
    z-index: 20;
    flex-shrink: 0;
    min-width: 120px;
    flex: 0 0 120px;
}

.exams-search-section .search-btn[b-pn7ny279f6],
.exams-search-section .clear-btn[b-pn7ny279f6] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
    flex-shrink: 0;
}

.exams-search-section .search-btn[b-pn7ny279f6] {
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
}

.exams-search-section .search-btn:hover[b-pn7ny279f6] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

.exams-search-section .clear-btn[b-pn7ny279f6] {
    background: var(--gray-500);
    color: var(--acv-white);
}

.exams-search-section .clear-btn:hover[b-pn7ny279f6] {
    background: var(--gray-600);
    color: var(--acv-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Sort Controls */
.sort-controls[b-pn7ny279f6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    position: relative;
    z-index: 101;
}

.sort-dropdown-btn[b-pn7ny279f6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--acv-white);
    color: var(--acv-primary);
    border: 2px solid var(--acv-primary);
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 120px;
    justify-content: space-between;
    text-decoration: none;
}

.sort-dropdown-btn:hover[b-pn7ny279f6] {
    background: var(--acv-primary);
    color: var(--acv-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
    text-decoration: none;
}

/* Sort Dropdown */
.sort-dropdown[b-pn7ny279f6] {
    position: relative;
    display: inline-block;
    z-index: 10000;
}

.sort-dropdown.active .sort-dropdown-btn[b-pn7ny279f6] {
    background: var(--acv-primary);
    color: var(--acv-white);
}

.sort-dropdown-btn i.rotate[b-pn7ny279f6] {
    transform: rotate(180deg);
}

/* Sort Dropdown Menu */
.sort-dropdown-menu[b-pn7ny279f6] {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    background: var(--acv-white);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    padding: 0.5rem;
    z-index: 10001;
    min-width: 200px;
    animation: dropdownFadeIn-b-pn7ny279f6 0.2s ease-out;
}

@keyframes dropdownFadeIn-b-pn7ny279f6 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sort-option[b-pn7ny279f6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.875rem 1rem;
    background: var(--acv-white);
    border: none;
    color: var(--acv-primary);
    font-size: 0.875rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    border-bottom: 1px solid var(--gray-100);
}

.sort-option:last-child[b-pn7ny279f6] {
    border-bottom: none;
}

.sort-option:hover[b-pn7ny279f6] {
    background: var(--acv-primary-50);
    color: var(--acv-primary);
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.1);
}

.sort-option.active[b-pn7ny279f6] {
    background: var(--acv-primary-50);
    color: var(--acv-primary);
    font-weight: 600;
}

.sort-option i[b-pn7ny279f6] {
    color: var(--acv-primary);
    font-size: 0.9rem;
    width: 16px;
    text-align: center;
}

.sort-option span[b-pn7ny279f6] {
    flex: 1;
}

.sort-option .check-icon[b-pn7ny279f6] {
    color: var(--acv-primary);
    font-size: 0.8rem;
    margin-left: auto;
}

/* Table Footer */
.table-footer[b-pn7ny279f6] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--acv-white);
    border-top: 1px solid var(--gray-200);
    border-radius: 0 0 16px 16px;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 0;
}

.results-info[b-pn7ny279f6] {
    font-size: 0.9rem;
    color: var(--gray-600);
    font-weight: 500;
}

.pagination-container[b-pn7ny279f6] {
    display: flex;
    align-items: center;
}

.pagination-nav[b-pn7ny279f6] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagination-btn[b-pn7ny279f6] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: var(--acv-white);
    color: var(--gray-600);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s ease;
    cursor: pointer;
}

.pagination-btn:hover:not(:disabled)[b-pn7ny279f6] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border-color: var(--acv-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.15);
}

.pagination-btn.active[b-pn7ny279f6] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border-color: var(--acv-primary);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
}

.pagination-btn:disabled[b-pn7ny279f6] {
    background: var(--gray-100);
    border-color: var(--gray-200);
    color: var(--gray-400);
    cursor: not-allowed;
}

/* Exams List Container - Same as Tags */
.exams-list-container[b-pn7ny279f6] {
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    overflow: hidden;
    margin-bottom: 2rem;
}

/* List Header - Same as Tags */
.list-header[b-pn7ny279f6] {
    background: var(--acv-white) !important;
    padding: 1.75rem 2rem;
    border-bottom: 1px solid var(--gray-200);
    border-radius: 16px 16px 0 0;
    position: relative;
    z-index: 100;
    overflow: visible;
}

.list-header[b-pn7ny279f6]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 16px 0 0 0;
}

.list-header-content[b-pn7ny279f6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0;
    flex-wrap: wrap;
}

.list-title-section[b-pn7ny279f6] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.list-title[b-pn7ny279f6] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.list-title i[b-pn7ny279f6] {
    color: var(--acv-primary);
    font-size: 1.25rem;
}

.list-count[b-pn7ny279f6] {
    background: var(--acv-primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Action Controls */
.action-controls[b-pn7ny279f6] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.btn-secondary[b-pn7ny279f6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--acv-white);
    color: var(--acv-primary);
    border: 2px solid var(--acv-primary);
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 120px;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.15);
    text-decoration: none;
}

.btn-secondary:hover[b-pn7ny279f6] {
    background: var(--acv-primary);
    color: var(--acv-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(33, 76, 166, 0.3);
    text-decoration: none;
}

/* Table Styles - Same pattern as Tags */
.exams-table-container[b-pn7ny279f6] {
    overflow-x: auto;
    border-radius: 12px;
}

.exams-table[b-pn7ny279f6] {
    width: 100%;
    border-collapse: collapse;
    background: var(--acv-white);
    border-radius: 12px;
    overflow: hidden;
}

.exams-table .table-header-row[b-pn7ny279f6] {
    background: var(--gray-50);
    border-bottom: 2px solid var(--gray-200);
}

.exams-table th[b-pn7ny279f6] {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--gray-700);
    font-size: 0.9rem;
    border-bottom: 2px solid var(--gray-200);
    position: relative;
    white-space: nowrap;
}

.exams-table .col-stt[b-pn7ny279f6] {
    width: 60px;
    text-align: center !important;
}

.exams-table .col-exam-title[b-pn7ny279f6] {
    width: 250px;
    min-width: 250px;
}

.exams-table .col-subject[b-pn7ny279f6] {
    width: 150px;
}

.exams-table .col-attempt[b-pn7ny279f6] {
    width: 80px;
    text-align: center !important;
}

.exams-table .col-score[b-pn7ny279f6] {
    width: 120px;
    text-align: center !important;
}

.exams-table .col-result[b-pn7ny279f6] {
    width: 100px;
    text-align: center !important;
}

.exams-table .col-time[b-pn7ny279f6] {
    width: 120px;
    text-align: center !important;
}

.exams-table .col-date[b-pn7ny279f6] {
    width: 120px;
    text-align: center !important;
}

.exams-table .col-actions[b-pn7ny279f6] {
    width: 80px;
    text-align: center !important;
}

.exams-table .table-row[b-pn7ny279f6] {
    border-bottom: 1px solid var(--gray-200);
    transition: all 0.2s ease;
}

.exams-table .table-row:hover[b-pn7ny279f6] {
    background: var(--gray-50);
}

.exams-table .table-row:last-child[b-pn7ny279f6] {
    border-bottom: none;
}

.exams-table td[b-pn7ny279f6] {
    padding: 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--gray-200);
}

/* STT Number - Same as Tags */
.stt-number[b-pn7ny279f6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--gray-100);
    color: var(--gray-600);
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Exam Title Cell */
.exam-title-cell[b-pn7ny279f6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.exam-title-cell .exam-icon[b-pn7ny279f6] {
    color: var(--acv-primary);
    font-size: 1rem;
    width: 20px;
    text-align: center;
}

.exam-title-text[b-pn7ny279f6] {
    font-weight: 500;
    color: var(--gray-800);
    font-size: 0.95rem;
    line-height: 1.4;
}

/* Subject Name - Similar to tag styling */
.subject-name[b-pn7ny279f6] {
    color: var(--acv-primary-dark);
    background: var(--acv-primary-lighter);
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    display: inline-block;
}

/* Attempt Number */
.attempt-number[b-pn7ny279f6] {
    color: var(--gray-700);
    background: var(--gray-100);
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    display: inline-block;
}

/* Score Cell */
.score-cell[b-pn7ny279f6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.score-value[b-pn7ny279f6] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--acv-primary);
}

.score-details[b-pn7ny279f6] {
    font-size: 0.75rem;
    color: var(--gray-500);
    font-weight: 500;
}

/* Result Badge */
.result-badge[b-pn7ny279f6] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.result-badge.passed[b-pn7ny279f6] {
    background: var(--success-lighter);
    color: var(--success-dark);
}

.result-badge.failed[b-pn7ny279f6] {
    background: var(--error-lighter);
    color: var(--error-dark);
}

.result-badge i[b-pn7ny279f6] {
    font-size: 0.8rem;
}

/* Time Cell */
.time-cell[b-pn7ny279f6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
}

.time-spent[b-pn7ny279f6] {
    font-weight: 600;
    color: var(--gray-700);
    font-size: 0.9rem;
}

.time-seconds[b-pn7ny279f6] {
    font-size: 0.75rem;
    color: var(--gray-500);
}

/* Date Cell */
.date-cell[b-pn7ny279f6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
}

.start-date[b-pn7ny279f6] {
    font-weight: 500;
    color: var(--gray-700);
    font-size: 0.9rem;
}

.start-time[b-pn7ny279f6] {
    font-size: 0.75rem;
    color: var(--gray-500);
}

/* Action Buttons - Same as Tags */
.action-buttons[b-pn7ny279f6] {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    align-items: center;
}

.action-btn-table[b-pn7ny279f6] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 32px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    text-decoration: none;
}

.action-btn-table.detail[b-pn7ny279f6] {
    background: linear-gradient(135deg, rgba(33, 76, 166, 0.1) 0%, rgba(33, 76, 166, 0.15) 100%);
    color: var(--acv-primary);
    border: 1px solid rgba(33, 76, 166, 0.2);
}

.action-btn-table.detail:hover[b-pn7ny279f6] {
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(33, 76, 166, 0.3);
}

/* Empty State - Same as Tags */
.empty-state[b-pn7ny279f6] {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--gray-600);
}

.empty-state-icon[b-pn7ny279f6] {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--gray-400);
}

.empty-state-icon i.fa-spin[b-pn7ny279f6] {
    color: var(--acv-primary);
}

.empty-state h3[b-pn7ny279f6] {
    margin-bottom: 0.5rem;
    color: var(--gray-700);
    font-size: 1.25rem;
    font-weight: 600;
}

.empty-state p[b-pn7ny279f6] {
    margin-bottom: 2rem;
    color: var(--gray-600);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Responsive Design - Same as Tags */
@media (max-width: 1024px) {
    .exams-table .col-time[b-pn7ny279f6],
    .exams-table .col-date[b-pn7ny279f6] {
        display: none;
    }
}

@media (max-width: 768px) {
    /* List Header Responsive */
    .list-header[b-pn7ny279f6] {
        padding: 1.25rem 1.5rem;
    }
    
    .list-header-content[b-pn7ny279f6] {
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
    }
    
    .list-title-section[b-pn7ny279f6] {
        justify-content: space-between;
    }
    
    .list-title[b-pn7ny279f6] {
        font-size: 1.25rem;
    }
    
    .exams-table .col-subject[b-pn7ny279f6],
    .exams-table .col-attempt[b-pn7ny279f6] {
        display: none;
    }
    
    .exams-table th[b-pn7ny279f6],
    .exams-table td[b-pn7ny279f6] {
        padding: 0.75rem 0.5rem;
    }
    
    .exam-title-text[b-pn7ny279f6] {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .exams-table .col-score[b-pn7ny279f6] {
        display: none;
    }
    
    .action-controls[b-pn7ny279f6] {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    /* Mobile List Header */
    .list-header[b-pn7ny279f6] {
        padding: 1rem;
    }
    
    .list-title[b-pn7ny279f6] {
        font-size: 1.1rem;
    }
    
    .list-count[b-pn7ny279f6] {
        padding: 0.2rem 0.6rem;
        font-size: 0.75rem;
    }
}
/* _content/ltia.portal.web/Components/Exams/Admin/Pages/Scores/ExamAttemptDetail.razor.rz.scp.css */
/* Exam Attempt Detail Page Styles - Based on Scores Design System */
.exam-attempt-page[b-wj82ig5tsq] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    
    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Card Header Section - Same as other pages */
.card-header-section[b-wj82ig5tsq] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.card-header-content[b-wj82ig5tsq] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.card-header-icon[b-wj82ig5tsq] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
}

.card-header-text h1[b-wj82ig5tsq] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-800);
}

.card-header-text p[b-wj82ig5tsq] {
    margin: 0.25rem 0 0 0;
    color: var(--gray-600);
    font-size: 1rem;
}

/* Form Actions - Same as other pages */
.form-actions[b-wj82ig5tsq] {
    display: flex;
    justify-content: flex-start;
    gap: 1rem;
    margin-top: 2rem;
}

.btn-secondary[b-wj82ig5tsq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--acv-white);
    color: var(--acv-primary);
    border: 2px solid var(--acv-primary);
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 120px;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.15);
    text-decoration: none;
}

.btn-secondary:hover[b-wj82ig5tsq] {
    background: var(--acv-primary);
    color: var(--acv-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(33, 76, 166, 0.3);
    text-decoration: none;
}

/* Summary Section */
.exam-summary-section[b-wj82ig5tsq] {
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    margin-bottom: 2rem;
    overflow: hidden;
}

.summary-container[b-wj82ig5tsq] {
    padding: 2rem;
}

.summary-header[b-wj82ig5tsq] {
    margin-bottom: 1.5rem;
    text-align: center;
}

.summary-title[b-wj82ig5tsq] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
}

.summary-title i[b-wj82ig5tsq] {
    color: var(--acv-primary);
    font-size: 1.3rem;
}

.summary-content[b-wj82ig5tsq] {
    display: flex;
    flex-direction: column;
}

.summary-grid[b-wj82ig5tsq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.summary-card[b-wj82ig5tsq] {
    background: var(--acv-white);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--gray-200);
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.summary-card:hover[b-wj82ig5tsq] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: var(--acv-primary);
}

.summary-card-header[b-wj82ig5tsq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--gray-200);
}

.summary-icon[b-wj82ig5tsq] {
    color: var(--acv-primary);
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

.summary-label[b-wj82ig5tsq] {
    font-weight: 600;
    color: var(--gray-800);
    font-size: 1rem;
}

.summary-card-content[b-wj82ig5tsq] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.summary-item[b-wj82ig5tsq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--gray-200);
    gap: 1rem;
}

.summary-item:last-child[b-wj82ig5tsq] {
    border-bottom: none;
}

.item-label[b-wj82ig5tsq] {
    font-weight: 500;
    color: var(--gray-600);
    font-size: 0.9rem;
    flex-shrink: 0;
}

.item-value[b-wj82ig5tsq] {
    font-weight: 600;
    color: var(--gray-800);
    font-size: 0.95rem;
    text-align: right;
    word-break: break-word;
}

.code-text[b-wj82ig5tsq] {
    font-family: 'Courier New', monospace;
    background: var(--gray-100);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.85rem;
}

.score-text[b-wj82ig5tsq] {
    color: var(--acv-primary);
    font-size: 1.1rem;
    font-weight: 700;
}

.no-data[b-wj82ig5tsq] {
    color: var(--gray-400);
    font-style: italic;
    font-size: 0.85rem;
}

/* Result Badge - Same as other pages */
.result-badge[b-wj82ig5tsq] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.result-badge.passed[b-wj82ig5tsq] {
    background: var(--success-lighter);
    color: var(--success-dark);
}

.result-badge.failed[b-wj82ig5tsq] {
    background: var(--error-lighter);
    color: var(--error-dark);
}

.result-badge i[b-wj82ig5tsq] {
    font-size: 0.8rem;
}

/* Questions Section */
.questions-list-container[b-wj82ig5tsq] {
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    overflow: hidden;
}

/* List Header - Same as other pages */
.list-header[b-wj82ig5tsq] {
    background: var(--acv-white) !important;
    padding: 1.75rem 2rem;
    border-bottom: 1px solid var(--gray-200);
    border-radius: 16px 16px 0 0;
    position: relative;
    z-index: 100;
    overflow: visible;
}

.list-header[b-wj82ig5tsq]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 16px 0 0 0;
}

.list-header-content[b-wj82ig5tsq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0;
    flex-wrap: wrap;
}

.list-title-section[b-wj82ig5tsq] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.list-title[b-wj82ig5tsq] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.list-title i[b-wj82ig5tsq] {
    color: var(--acv-primary);
    font-size: 1.25rem;
}

.list-count[b-wj82ig5tsq] {
    background: var(--acv-primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.action-controls[b-wj82ig5tsq] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Legend Section */
.legend-section[b-wj82ig5tsq] {
    padding: 1.5rem 2rem;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.legend-container[b-wj82ig5tsq] {
    max-width: 800px;
    margin: 0;
}

.legend-title[b-wj82ig5tsq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0 0 1rem 0;
}

.legend-title i[b-wj82ig5tsq] {
    color: var(--acv-primary);
    font-size: 0.9rem;
}

.legend-items[b-wj82ig5tsq] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
}

.legend-item[b-wj82ig5tsq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--gray-700);
}

.legend-color[b-wj82ig5tsq] {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 2px solid;
    flex-shrink: 0;
}

.legend-color.correct-color[b-wj82ig5tsq] {
    background: var(--success-lighter);
    border-color: var(--success-main);
}

.legend-color.incorrect-color[b-wj82ig5tsq] {
    background: var(--error-lighter);
    border-color: var(--error-main);
}

/* Questions Content */
.questions-content[b-wj82ig5tsq] {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Question Card */
.question-card[b-wj82ig5tsq] {
    background: var(--acv-white);
    border-radius: 12px;
    border: 1px solid var(--gray-200);
    overflow: hidden;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.question-card:hover[b-wj82ig5tsq] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: var(--acv-primary);
}

.question-header[b-wj82ig5tsq] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--gray-50);
    border-bottom: 2px solid var(--gray-200);
}

.question-number[b-wj82ig5tsq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
    border-radius: 12px;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
}

.question-info[b-wj82ig5tsq] {
    flex: 1;
}

.question-type[b-wj82ig5tsq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--gray-600);
    font-size: 0.9rem;
    font-weight: 500;
}

.question-type i[b-wj82ig5tsq] {
    color: var(--acv-primary);
}

.question-content[b-wj82ig5tsq] {
    padding: 1.5rem;
    background: var(--acv-white);
}

.question-text[b-wj82ig5tsq] {
    font-size: 1.05rem;
    color: var(--gray-800);
    line-height: 1.7;
    margin-bottom: 1rem;
    font-weight: 500;
}

.question-images[b-wj82ig5tsq] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}

.question-image[b-wj82ig5tsq] {
    max-width: 200px;
    max-height: 150px;
    border-radius: 8px;
    border: 1px solid var(--gray-200);
    cursor: pointer;
    transition: transform 0.2s ease;
}

.question-image:hover[b-wj82ig5tsq] {
    transform: scale(1.05);
}

/* Answers Section */
.answers-section[b-wj82ig5tsq] {
    border-top: 2px solid var(--gray-200);
    background: var(--gray-50);
}

.answers-header[b-wj82ig5tsq] {
    padding: 1.25rem 1.5rem 0.75rem 1.5rem;
    background: var(--acv-white);
}

.answers-header h5[b-wj82ig5tsq] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-800);
}

.answers-list[b-wj82ig5tsq] {
    padding: 1rem 1.5rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Answer Items */
.answer-item[b-wj82ig5tsq] {
    background: var(--acv-white);
    border-radius: 10px;
    border: 2px solid var(--gray-200);
    padding: 1rem 1.25rem;
    transition: all 0.2s ease;
    margin-bottom: 0.5rem;
}

.answer-item.correct-chosen[b-wj82ig5tsq] {
    border-color: var(--success-main);
    background: var(--success-lighter);
}

.answer-item.correct-only[b-wj82ig5tsq] {
    border-color: var(--success-main);
    background: var(--success-lighter);
    opacity: 0.8;
}

.answer-item.incorrect-chosen[b-wj82ig5tsq] {
    border-color: var(--error-main);
    background: var(--error-lighter);
}

.answer-header[b-wj82ig5tsq] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.option-letter[b-wj82ig5tsq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--gray-100);
    color: var(--gray-700);
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.95rem;
    flex-shrink: 0;
    border: 1px solid var(--gray-200);
}

.correct-chosen .option-letter[b-wj82ig5tsq] {
    background: var(--success-main);
    color: var(--acv-white);
    border-color: var(--success-main);
}

.correct-only .option-letter[b-wj82ig5tsq] {
    background: var(--success-main);
    color: var(--acv-white);
    border-color: var(--success-main);
}

.incorrect-chosen .option-letter[b-wj82ig5tsq] {
    background: var(--error-main);
    color: var(--acv-white);
    border-color: var(--error-main);
}

.answer-content[b-wj82ig5tsq] {
    flex: 1;
    font-size: 0.95rem;
    color: var(--gray-800);
    line-height: 1.6;
    font-weight: 500;
}

.answer-indicators[b-wj82ig5tsq] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.correct-indicator[b-wj82ig5tsq],
.user-choice-indicator[b-wj82ig5tsq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 0.7rem;
}

.correct-indicator[b-wj82ig5tsq] {
    background: var(--success-main);
    color: var(--acv-white);
}

.user-choice-indicator[b-wj82ig5tsq] {
    background: var(--acv-primary);
    color: var(--acv-white);
}

.answer-image[b-wj82ig5tsq] {
    margin-top: 0.75rem;
    padding-left: 3rem;
}

.answer-image img[b-wj82ig5tsq] {
    max-width: 150px;
    max-height: 100px;
    border-radius: 6px;
    border: 1px solid var(--gray-200);
}

/* Empty State - Same as other pages */
.empty-state[b-wj82ig5tsq] {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--gray-600);
}

.empty-state-icon[b-wj82ig5tsq] {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--gray-400);
}

.empty-state h3[b-wj82ig5tsq] {
    margin-bottom: 0.5rem;
    color: var(--gray-700);
    font-size: 1.25rem;
    font-weight: 600;
}

.empty-state p[b-wj82ig5tsq] {
    margin-bottom: 2rem;
    color: var(--gray-600);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .summary-grid[b-wj82ig5tsq] {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1rem;
    }
}

@media (max-width: 768px) {
    /* List Header Responsive */
    .list-header[b-wj82ig5tsq] {
        padding: 1.25rem 1.5rem;
    }
    
    .list-header-content[b-wj82ig5tsq] {
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
    }
    
    .list-title-section[b-wj82ig5tsq] {
        justify-content: space-between;
    }
    
    .list-title[b-wj82ig5tsq] {
        font-size: 1.25rem;
    }
    
    /* Legend responsive */
    .legend-section[b-wj82ig5tsq] {
        padding: 1rem 1.5rem;
    }
    
    .legend-items[b-wj82ig5tsq] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    /* Summary responsive */
    .summary-container[b-wj82ig5tsq] {
        padding: 1.5rem;
    }
    
    .summary-grid[b-wj82ig5tsq] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    /* Questions responsive */
    .questions-content[b-wj82ig5tsq] {
        padding: 1.5rem;
        gap: 1.5rem;
    }
    
    .question-header[b-wj82ig5tsq] {
        padding: 1rem;
    }
    
    .question-content[b-wj82ig5tsq] {
        padding: 1rem;
    }
    
    .answers-list[b-wj82ig5tsq] {
        padding: 0.5rem 1rem 1rem 1rem;
    }
    
    .summary-item[b-wj82ig5tsq] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
}

@media (max-width: 480px) {
    /* Mobile optimizations */
    .card-header-content[b-wj82ig5tsq] {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .summary-card[b-wj82ig5tsq] {
        padding: 1rem;
    }
    
    .question-header[b-wj82ig5tsq] {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }
    
    .answer-header[b-wj82ig5tsq] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .answer-indicators[b-wj82ig5tsq] {
        justify-content: flex-start;
    }
    
    .answer-image[b-wj82ig5tsq] {
        padding-left: 0;
    }
    
    .question-images[b-wj82ig5tsq] {
        justify-content: center;
    }
    
    /* Mobile List Header */
    .list-header[b-wj82ig5tsq] {
        padding: 1rem;
    }
    
    .list-title[b-wj82ig5tsq] {
        font-size: 1.1rem;
    }
    
    .list-count[b-wj82ig5tsq] {
        padding: 0.2rem 0.6rem;
        font-size: 0.75rem;
    }
}
/* _content/ltia.portal.web/Components/Exams/Admin/Pages/Scores/Index.razor.rz.scp.css */
/* Scores Page Styles - Based on Tags Design System */
.scores-page[b-d3ucqbrxbh] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    
    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Use same label styling as Tags */
label[b-d3ucqbrxbh] {
    color: var(--gray-700);
    margin: 0;
}

/* Card Header Section - Same as Tags */
.card-header-section[b-d3ucqbrxbh] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.card-header-content[b-d3ucqbrxbh] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.card-header-icon[b-d3ucqbrxbh] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
}

.card-header-text h1[b-d3ucqbrxbh] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-800);
}

.card-header-text p[b-d3ucqbrxbh] {
    margin: 0.25rem 0 0 0;
    color: var(--gray-600);
    font-size: 1rem;
}

/* Search Section - Same as Tags */
.scores-search-section[b-d3ucqbrxbh] {
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    margin-bottom: 2rem;
    overflow: visible;
    position: relative;
    z-index: 200; /* Cao hơn list-header (z-index: 100) */
}

.search-container[b-d3ucqbrxbh] {
    padding: 2rem;
}

.search-header[b-d3ucqbrxbh] {
    margin-bottom: 1.5rem;
    text-align: center;
}

.search-title[b-d3ucqbrxbh] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 0.5rem 0;
}

.search-title i[b-d3ucqbrxbh] {
    color: var(--acv-primary);
    font-size: 1.3rem;
}

.search-subtitle[b-d3ucqbrxbh] {
    color: var(--gray-600);
    font-size: 1rem;
    margin: 0;
    font-weight: 400;
}

.search-content[b-d3ucqbrxbh] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow: visible;
}

.search-main-row[b-d3ucqbrxbh] {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 1.5rem;
    position: relative;
    z-index: 20;
    max-width: 1000px;
    margin: 0 auto;
    flex-wrap: wrap;
    overflow: visible;
}

.search-input-group[b-d3ucqbrxbh] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
    z-index: 20;
}

.search-input-main[b-d3ucqbrxbh] {
    flex: 1;
    min-width: 400px;
    max-width: 700px;
}

.search-input-date[b-d3ucqbrxbh] {
    flex: 0 0 auto;
    min-width: 300px;
    max-width: 400px;
    position: relative;
    z-index: 1000; /* Cao hơn list-header */
    overflow: visible;
}

/* DateTimeInput styling trong search section */
.search-input-date[b-d3ucqbrxbh]  .datetime-input-group {
    margin-bottom: 0;
    position: relative;
    z-index: 1000;
}

.search-input-date[b-d3ucqbrxbh]  .datetime-label {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-700);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.search-input-date[b-d3ucqbrxbh]  .datetime-label i {
    color: var(--acv-primary);
    font-size: 0.8rem;
}

.search-input-date[b-d3ucqbrxbh]  .datetime-input-group-wrapper {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.search-input-date[b-d3ucqbrxbh]  .datetime-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0 !important; /* Override min-width: 400px từ component */
    width: 100%;
}

.search-input-date[b-d3ucqbrxbh]  .datetime-input {
    width: 100%;
    height: 48px;
    padding: 0.75rem 2.5rem 0.75rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--acv-white);
    box-sizing: border-box;
}

.search-input-date[b-d3ucqbrxbh]  .datetime-input:focus {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

/* Calendar picker positioning */
.search-input-date[b-d3ucqbrxbh]  .datetime-picker {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    width: 100% !important;
    min-width: 280px;
    max-width: 320px;
    margin-top: 0 !important;
    z-index: 10000 !important; /* Cao hơn list-header (z-index: 100) */
    background: var(--acv-white);
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 1rem;
}

/* Buttons trong input */
.search-input-date[b-d3ucqbrxbh]  .datetime-clear-btn,
.search-input-date[b-d3ucqbrxbh]  .datetime-calendar-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: var(--gray-600);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 4px;
    z-index: 10;
}

.search-input-date[b-d3ucqbrxbh]  .datetime-clear-btn {
    right: 2.5rem;
}

.search-input-date[b-d3ucqbrxbh]  .datetime-calendar-btn {
    right: 0.5rem;
}

.search-input-date[b-d3ucqbrxbh]  .datetime-clear-btn:hover,
.search-input-date[b-d3ucqbrxbh]  .datetime-calendar-btn:hover {
    background-color: var(--gray-100);
    color: var(--gray-800);
}

.form-label[b-d3ucqbrxbh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-700);
    margin: 0;
}

.form-label i[b-d3ucqbrxbh] {
    color: var(--acv-primary);
    font-size: 0.8rem;
}

.form-input[b-d3ucqbrxbh] {
    width: 100%;
    height: 48px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--acv-white);
    box-sizing: border-box;
}

.form-input:focus[b-d3ucqbrxbh] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.search-controls[b-d3ucqbrxbh] {
    display: flex;
    gap: 0.75rem;
    align-items: end;
    position: relative;
    z-index: 20;
    flex-shrink: 0;
    min-width: 120px;
    flex: 0 0 120px;
}

.search-btn[b-d3ucqbrxbh], .clear-btn[b-d3ucqbrxbh] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border: none;
    padding: 0.75rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 20;
    width: 48px;
    height: 48px;
    box-sizing: border-box;
}

.search-btn:hover[b-d3ucqbrxbh] {
    background: var(--acv-primary-700);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

.clear-btn[b-d3ucqbrxbh] {
    background: var(--gray-500);
}

.clear-btn:hover[b-d3ucqbrxbh] {
    background: var(--gray-600);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* List Container - Same as Tags */
.scores-list-container[b-d3ucqbrxbh] {
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    overflow: hidden;
}

.scores-list[b-d3ucqbrxbh] {
    padding: 1.5rem;
    min-height: 200px;
}

/* List Header - Same as Tags */
.list-header[b-d3ucqbrxbh] {
    background: var(--acv-white) !important;
    padding: 1.75rem 2rem;
    border-bottom: 1px solid var(--gray-200);
    border-radius: 16px 16px 0 0;
    position: relative;
    z-index: 100;
    overflow: visible;
}

.list-header[b-d3ucqbrxbh]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 16px 0 0 0;
}

.list-header-content[b-d3ucqbrxbh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0;
    flex-wrap: wrap;
}

.list-title-section[b-d3ucqbrxbh] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.list-title[b-d3ucqbrxbh] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.list-title i[b-d3ucqbrxbh] {
    color: var(--acv-primary);
    font-size: 1.25rem;
}

.list-count[b-d3ucqbrxbh] {
    background: var(--acv-primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.sort-controls[b-d3ucqbrxbh] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    position: relative;
    z-index: 101;
}

.sort-dropdown-btn[b-d3ucqbrxbh],
.refresh-btn[b-d3ucqbrxbh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--acv-white);
    color: var(--acv-primary);
    border: 2px solid var(--acv-primary);
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 120px;
    justify-content: center;
    text-decoration: none;
}

.sort-dropdown-btn[b-d3ucqbrxbh] {
    justify-content: space-between;
}

.sort-dropdown-btn:hover[b-d3ucqbrxbh],
.refresh-btn:hover[b-d3ucqbrxbh] {
    background: var(--acv-primary);
    color: var(--acv-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
    text-decoration: none;
}

/* Sort Dropdown */
.sort-dropdown[b-d3ucqbrxbh] {
    position: relative;
    display: inline-block;
    z-index: 10000;
}

.sort-dropdown.active .sort-dropdown-btn[b-d3ucqbrxbh] {
    background: var(--acv-primary);
    color: var(--acv-white);
}

.sort-dropdown-btn i.rotate[b-d3ucqbrxbh] {
    transform: rotate(180deg);
}

/* Sort Dropdown Menu */
.sort-dropdown-menu[b-d3ucqbrxbh] {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    background: var(--acv-white);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    padding: 0.5rem;
    z-index: 10001;
    min-width: 200px;
    animation: dropdownFadeIn-b-d3ucqbrxbh 0.2s ease-out;
}

@keyframes dropdownFadeIn-b-d3ucqbrxbh {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sort-option[b-d3ucqbrxbh] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.875rem 1rem;
    background: var(--acv-white);
    border: none;
    color: var(--acv-primary);
    font-size: 0.875rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    border-bottom: 1px solid var(--gray-100);
}

.sort-option:last-child[b-d3ucqbrxbh] {
    border-bottom: none;
}

.sort-option:hover[b-d3ucqbrxbh] {
    background: var(--acv-primary-50);
    color: var(--acv-primary);
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.1);
}

.sort-option.active[b-d3ucqbrxbh] {
    background: var(--acv-primary-50);
    color: var(--acv-primary);
    font-weight: 600;
}

.sort-option i[b-d3ucqbrxbh] {
    color: var(--acv-primary);
    font-size: 0.9rem;
    width: 16px;
    text-align: center;
}

.sort-option span[b-d3ucqbrxbh] {
    flex: 1;
}

.sort-option .check-icon[b-d3ucqbrxbh] {
    color: var(--acv-primary);
    font-size: 0.8rem;
    margin-left: auto;
}

/* Table Styles - Đồng bộ với Account */
.scores-table-container[b-d3ucqbrxbh] {
    overflow-x: auto;
    border-radius: 12px;
}

.scores-table[b-d3ucqbrxbh] {
    width: 100%;
    border-collapse: collapse;
    background: var(--acv-white);
    border-radius: 12px;
    overflow: hidden;
}

/* Table Header */
.table-header-row[b-d3ucqbrxbh] {
    background: var(--gray-50);
    border-bottom: 2px solid var(--gray-200);
}

.table-header-row th[b-d3ucqbrxbh] {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--gray-700);
    font-size: 0.9rem;
    border-bottom: 2px solid var(--gray-200);
}

/* Column Widths */
.col-stt[b-d3ucqbrxbh] {
    width: 60px;
    text-align: center !important;
}

.col-employee-code[b-d3ucqbrxbh] {
    width: auto;
    min-width: 150px;
}

.col-employee-name[b-d3ucqbrxbh] {
    width: auto;
    min-width: 200px;
}

.col-total-exams[b-d3ucqbrxbh] {
    width: auto;
    min-width: 150px;
    text-align: center !important;
}

.col-last-attempt[b-d3ucqbrxbh] {
    width: 180px;
    text-align: left !important;
}

.col-actions[b-d3ucqbrxbh] {
    width: 100px;
    text-align: center !important;
}

/* Table Body */
.table-row[b-d3ucqbrxbh] {
    border-bottom: 1px solid var(--gray-200);
    transition: all 0.2s ease;
}

.table-row:hover[b-d3ucqbrxbh] {
    background: var(--gray-50);
}

.table-row:last-child[b-d3ucqbrxbh] {
    border-bottom: none;
}

.table-row td[b-d3ucqbrxbh] {
    padding: 0.75rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--gray-200);
    font-size: 0.9rem;
}

/* STT Number - Same as Tags */
.stt-number[b-d3ucqbrxbh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--gray-100);
    color: var(--gray-600);
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Employee Code Cell */
.employee-code-cell[b-d3ucqbrxbh] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.employee-code-cell .employee-icon[b-d3ucqbrxbh] {
    color: var(--acv-primary);
    font-size: 1rem;
    width: 20px;
    text-align: center;
}

.employee-code-text[b-d3ucqbrxbh] {
    font-weight: 600;
    color: var(--gray-800);
    font-size: 0.9rem;
}

/* Employee Name Cell */
.employee-name-cell[b-d3ucqbrxbh] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.employee-name-cell .employee-icon[b-d3ucqbrxbh] {
    color: var(--success-main);
    font-size: 1rem;
    width: 20px;
    text-align: center;
}

.employee-name-text[b-d3ucqbrxbh] {
    font-weight: 600;
    color: var(--gray-800);
    font-size: 0.9rem;
}

/* Student ID - Similar to tag-slug */
.student-id[b-d3ucqbrxbh] {
    color: var(--gray-600);
    font-size: 0.85rem;
    background: var(--gray-100);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    display: inline-block;
}

/* Exam Count Cell */
.exam-count-cell[b-d3ucqbrxbh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.exam-count-badge[b-d3ucqbrxbh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--acv-primary);
    color: var(--acv-white);
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 1rem;
    min-width: 40px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(33, 76, 166, 0.2);
}

.exam-count-text[b-d3ucqbrxbh] {
    font-size: 0.75rem;
    color: var(--gray-500);
    font-weight: 500;
}

/* Date Text */
.date-text[b-d3ucqbrxbh] {
    color: var(--gray-600);
    font-size: 0.9rem;
}

.no-data[b-d3ucqbrxbh] {
    color: var(--gray-400);
    font-style: italic;
    font-size: 0.85rem;
}

/* Action Buttons - Đồng bộ với Account */
.action-buttons[b-d3ucqbrxbh] {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    align-items: center;
}

.action-btn-table[b-d3ucqbrxbh] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 36px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    text-decoration: none;
}

.action-btn-table.view[b-d3ucqbrxbh] {
    background: linear-gradient(135deg, rgba(33, 76, 166, 0.1) 0%, rgba(33, 76, 166, 0.15) 100%);
    color: var(--acv-primary);
    border: 1px solid rgba(33, 76, 166, 0.2);
}

.action-btn-table.view:hover[b-d3ucqbrxbh] {
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(33, 76, 166, 0.3);
}

/* Table Footer - Same as Tags */
.table-footer[b-d3ucqbrxbh] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--acv-white);
    border-top: 1px solid var(--gray-200);
    border-radius: 0 0 16px 16px;
    gap: 2rem;
    flex-wrap: wrap;
}

.results-info[b-d3ucqbrxbh] {
    font-size: 0.9rem;
    color: var(--gray-600);
    font-weight: 500;
}

.pagination-container[b-d3ucqbrxbh] {
    display: flex;
    align-items: center;
}

.pagination-nav[b-d3ucqbrxbh] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagination-btn[b-d3ucqbrxbh] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: var(--acv-white);
    color: var(--gray-600);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s ease;
    cursor: pointer;
}

.pagination-btn:hover:not(:disabled)[b-d3ucqbrxbh] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border-color: var(--acv-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.15);
}

.pagination-btn.active[b-d3ucqbrxbh] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border-color: var(--acv-primary);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
}

.pagination-btn:disabled[b-d3ucqbrxbh] {
    background: var(--gray-100);
    border-color: var(--gray-200);
    color: var(--gray-400);
    cursor: not-allowed;
}

/* Empty State - Same as Tags */
.empty-state[b-d3ucqbrxbh] {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--gray-600);
}

.empty-state-icon[b-d3ucqbrxbh] {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--gray-400);
}

.empty-state-icon i.fa-spin[b-d3ucqbrxbh] {
    color: var(--acv-primary);
}

.empty-state h3[b-d3ucqbrxbh] {
    margin-bottom: 0.5rem;
    color: var(--gray-700);
    font-size: 1.25rem;
    font-weight: 600;
}

.empty-state p[b-d3ucqbrxbh] {
    margin-bottom: 2rem;
    color: var(--gray-600);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Responsive Design - Same as Tags */
@media (max-width: 1024px) {
    .col-last-attempt[b-d3ucqbrxbh] {
        display: none;
    }
    
    .search-main-row[b-d3ucqbrxbh] {
        flex-direction: column;
        gap: 0.75rem;
        max-width: 100%;
    }
    
    .search-input-group[b-d3ucqbrxbh] {
        min-width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    /* List Header Responsive */
    .list-header[b-d3ucqbrxbh] {
        padding: 1.25rem 1.5rem;
    }
    
    .list-header-content[b-d3ucqbrxbh] {
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
    }
    
    .list-title-section[b-d3ucqbrxbh] {
        justify-content: space-between;
    }
    
    .list-title[b-d3ucqbrxbh] {
        font-size: 1.25rem;
    }
    
    .scores-table th[b-d3ucqbrxbh],
    .scores-table td[b-d3ucqbrxbh] {
        padding: 0.75rem 0.5rem;
    }
    
    .employee-code-text[b-d3ucqbrxbh],
    .employee-name-text[b-d3ucqbrxbh] {
        font-size: 0.9rem;
    }
    
    .exam-count-badge[b-d3ucqbrxbh] {
        padding: 0.25rem 0.5rem;
        font-size: 0.9rem;
    }
    
    /* Table Footer Responsive */
    .table-footer[b-d3ucqbrxbh] {
        padding: 1rem;
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        text-align: center;
    }
    
    .results-info[b-d3ucqbrxbh] {
        font-size: 0.8rem;
    }
    
    .pagination-container[b-d3ucqbrxbh] {
        justify-content: center;
    }
    
    .pagination-btn[b-d3ucqbrxbh] {
        min-width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .col-employee-code[b-d3ucqbrxbh] {
        display: none;
    }
    
    .action-buttons[b-d3ucqbrxbh] {
        justify-content: center;
    }
    
    .action-btn-table[b-d3ucqbrxbh] {
        width: 40px;
        height: 32px;
        font-size: 0.8rem;
    }
    
    /* Mobile List Header */
    .list-header[b-d3ucqbrxbh] {
        padding: 1rem;
    }
    
    .list-title[b-d3ucqbrxbh] {
        font-size: 1.1rem;
    }
    
    .list-count[b-d3ucqbrxbh] {
        padding: 0.2rem 0.6rem;
        font-size: 0.75rem;
    }
    
    /* Mobile Pagination */
    .pagination-btn[b-d3ucqbrxbh] {
        min-width: 28px;
        height: 28px;
        font-size: 0.75rem;
        padding: 0 0.5rem;
    }
}
/* _content/ltia.portal.web/Components/Exams/Admin/Pages/Subjects/Create.razor.rz.scp.css */
/* CSS Variables - Đặt trực tiếp vào .subjects-page */
.subjects-page[b-73xn5sdjlh] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    
    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Card Header Section */
.card-header-section[b-73xn5sdjlh] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.card-header-content[b-73xn5sdjlh] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.card-header-icon[b-73xn5sdjlh] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
}

.card-header-text h1[b-73xn5sdjlh] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-800);
}

.card-header-text p[b-73xn5sdjlh] {
    margin: 0.25rem 0 0 0;
    color: var(--gray-600);
    font-size: 1rem;
}

/* Main Content Card */
.subjects-card[b-73xn5sdjlh] {
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    margin-bottom: 2rem;
}

.create-form-container[b-73xn5sdjlh] {
    padding: 2rem;
}

.create-form[b-73xn5sdjlh] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Form Groups */
.form-group[b-73xn5sdjlh] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-label[b-73xn5sdjlh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-700);
    margin: 0;
}

.form-label i[b-73xn5sdjlh] {
    color: var(--acv-primary);
    font-size: 0.8rem;
}

.form-label-small[b-73xn5sdjlh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-700);
    margin: 0;
}

.form-label-small i[b-73xn5sdjlh] {
    color: var(--acv-primary);
    font-size: 0.75rem;
}

.required[b-73xn5sdjlh] {
    color: var(--error-main);
    font-weight: 700;
}

.form-input[b-73xn5sdjlh], .form-textarea[b-73xn5sdjlh] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--acv-white);
    box-sizing: border-box;
}

.form-input:focus[b-73xn5sdjlh], .form-textarea:focus[b-73xn5sdjlh] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.form-textarea[b-73xn5sdjlh] {
    resize: vertical;
    min-height: 100px;
}

.form-text[b-73xn5sdjlh] {
    font-size: 0.8rem;
    color: var(--gray-500);
    margin-top: 0.25rem;
}

.validation-error[b-73xn5sdjlh] {
    font-size: 0.8rem;
    color: var(--error-main);
    margin-top: 0.25rem;
}

/* Input Group */
.input-group[b-73xn5sdjlh] {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.input-group .form-input[b-73xn5sdjlh] {
    flex: 1;
}

.btn-secondary[b-73xn5sdjlh] {
    background: var(--gray-500);
    color: var(--acv-white);
    border: none;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.btn-secondary:hover[b-73xn5sdjlh] {
    background: var(--gray-600);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Available Tags */
.available-tags-container[b-73xn5sdjlh] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.available-tags-dropdown-wrapper[b-73xn5sdjlh] {
    position: relative;
}

.available-tags-toggle[b-73xn5sdjlh] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    background: var(--acv-white);
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    box-sizing: border-box;
}

.available-tags-toggle:hover[b-73xn5sdjlh] {
    border-color: var(--acv-primary);
}

.available-tags-text[b-73xn5sdjlh] {
    flex: 1;
    color: var(--gray-700);
}

.available-tags-icon[b-73xn5sdjlh] {
    color: var(--gray-500);
    font-size: 0.8rem;
    transition: transform 0.2s ease;
}

.available-tags-icon.rotated[b-73xn5sdjlh] {
    transform: rotate(180deg);
}

.available-tags-dropdown[b-73xn5sdjlh] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--acv-white);
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    z-index: 1000;
    display: none;
    max-height: 300px;
    overflow-y: auto;
}

.available-tags-dropdown.show[b-73xn5sdjlh] {
    display: block;
}

.available-tags-search[b-73xn5sdjlh] {
    padding: 0.75rem;
    border-bottom: 1px solid var(--gray-200);
}

.available-tags-search-input[b-73xn5sdjlh] {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    font-size: 0.9rem;
}

.available-tags-list[b-73xn5sdjlh] {
    padding: 0.5rem;
}

.available-tag-item[b-73xn5sdjlh] {
    padding: 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
}

.available-tag-item:hover[b-73xn5sdjlh] {
    background: var(--gray-50);
}

.available-tag-item.selected[b-73xn5sdjlh] {
    background: var(--acv-primary-lighter);
}

.tag-checkbox-label[b-73xn5sdjlh] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    width: 100%;
    margin: 0;
}

.tag-checkbox-label input[type="checkbox"][b-73xn5sdjlh] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.tag-checkbox-custom[b-73xn5sdjlh] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--gray-400);
    border-radius: 4px;
    background: var(--acv-white);
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.tag-checkbox-label input[type="checkbox"]:checked + .tag-checkbox-custom[b-73xn5sdjlh] {
    background: var(--acv-primary);
    border-color: var(--acv-primary);
}

.tag-checkbox-label input[type="checkbox"]:checked + .tag-checkbox-custom[b-73xn5sdjlh]::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid var(--acv-white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.tag-name[b-73xn5sdjlh] {
    font-size: 0.9rem;
    color: var(--gray-700);
    flex: 1;
}

.no-tags[b-73xn5sdjlh] {
    padding: 1rem;
    text-align: center;
    color: var(--gray-500);
    font-style: italic;
    background: var(--gray-50);
    border: 1px dashed var(--gray-300);
    border-radius: 8px;
}

/* Add Tag Container removed */

/* Selected Tags */
.selected-tags-container[b-73xn5sdjlh] {
    margin-top: 1rem;
}

/* Duplicate CSS removed */

.selected-tags[b-73xn5sdjlh] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag-chip[b-73xn5sdjlh] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
    padding: 0.5rem 1rem;
    border-radius: 16px;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(33, 76, 166, 0.2);
    transition: all 0.2s ease;
}

.tag-chip:hover[b-73xn5sdjlh] {
    background: linear-gradient(135deg, var(--acv-primary-700) 0%, var(--acv-primary-800) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(33, 76, 166, 0.3);
}

.chip-text[b-73xn5sdjlh] {
    white-space: nowrap;
}

.chip-remove[b-73xn5sdjlh] {
    background: none;
    border: none;
    color: var(--acv-white);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 50%;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.chip-remove:hover[b-73xn5sdjlh] {
    background: rgba(255, 255, 255, 0.2);
}

.no-selected-tags[b-73xn5sdjlh] {
    color: var(--gray-500);
    font-style: italic;
    padding: 1rem;
    text-align: center;
    background: var(--gray-50);
    border: 1px dashed var(--gray-300);
    border-radius: 8px;
}

/* Form Actions */
.form-actions[b-73xn5sdjlh] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    padding: 2rem 0;
    background: var(--gray-100);
    margin: 0 -2rem;
    padding: 1.5rem 2rem;
    border-top: 1px solid var(--gray-200);
}

.btn-primary[b-73xn5sdjlh] {
    background: #2765C0;
    color: #ffffff;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 1px 3px rgba(39, 101, 192, 0.3);
    order: 2;
}

.btn-primary:hover:not(:disabled)[b-73xn5sdjlh] {
    background: #1e4a8a;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(39, 101, 192, 0.4);
}

.btn-primary:disabled[b-73xn5sdjlh] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary[b-73xn5sdjlh] {
    background: #E8EAEF;
    color: #3C4043;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    order: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.btn-secondary:hover[b-73xn5sdjlh] {
    background: #D1D5DB;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    text-decoration: none;
}

/* Responsive */
@media (max-width: 768px) {
    .subjects-page[b-73xn5sdjlh] {
        padding: 0.5rem 1rem;
    }
    
    .card-header-section[b-73xn5sdjlh] {
        padding: 1.5rem;
    }
    
    .create-form-container[b-73xn5sdjlh] {
        padding: 1.5rem;
    }
    
    .form-actions[b-73xn5sdjlh] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .btn-primary[b-73xn5sdjlh], .btn-secondary[b-73xn5sdjlh] {
        justify-content: center;
    }
}
/* _content/ltia.portal.web/Components/Exams/Admin/Pages/Subjects/Details.razor.rz.scp.css */
/* Subjects Details Page - Based on MVC Design */
.subjects-details-page[b-26ffkif098] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;

    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Loading & Not Found States */
.loading-container[b-26ffkif098],
.not-found-container[b-26ffkif098] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
}

.loading-spinner i[b-26ffkif098] {
    font-size: 3rem;
    color: var(--acv-primary);
}

.not-found-icon i[b-26ffkif098] {
    font-size: 4rem;
    color: var(--gray-400);
    margin-bottom: 1rem;
}

.not-found-container h3[b-26ffkif098] {
    color: var(--gray-800);
    margin-bottom: 0.5rem;
}

.not-found-container p[b-26ffkif098] {
    color: var(--gray-600);
    margin-bottom: 1.5rem;
}

/* Card Header Section */
.card-header-section[b-26ffkif098] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.card-header-content[b-26ffkif098] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.card-header-icon[b-26ffkif098] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.card-header-text h1[b-26ffkif098] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
}

.card-header-text p[b-26ffkif098] {
    font-size: 0.95rem;
    color: var(--gray-600);
    margin: 0.25rem 0 0 0;
}

/* Main Content Container */
.subjects-details-container[b-26ffkif098] {
    max-width: 100%;
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Card Styles */
.subject-info-card[b-26ffkif098],
.subject-tags-card[b-26ffkif098],
.subject-attachments-card[b-26ffkif098],
.subject-feedback-questions-card[b-26ffkif098] {
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--gray-200);
    overflow: hidden;
}

.card-header[b-26ffkif098] {
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--acv-white) 100%);
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-title[b-26ffkif098] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-title i[b-26ffkif098] {
    color: var(--acv-primary);
    font-size: 0.875rem;
}

.btn-add-small[b-26ffkif098] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--acv-primary);
    color: var(--acv-white);
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(33, 76, 166, 0.15);
}

.btn-add-small:hover[b-26ffkif098] {
    background: var(--acv-primary-700);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(33, 76, 166, 0.25);
}

.btn-add-small i[b-26ffkif098] {
    font-size: 0.75rem;
}

.card-content[b-26ffkif098] {
    padding: 1.25rem;
}

/* Subject Details Grid */
.subject-details-grid[b-26ffkif098] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    row-gap: 1rem;
}

.detail-item[b-26ffkif098] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.detail-item.full-width[b-26ffkif098] {
    grid-column: 1 / -1;
}

.detail-label[b-26ffkif098] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gray-600);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.detail-label i[b-26ffkif098] {
    color: var(--acv-primary);
    font-size: 0.6875rem;
}

.detail-value[b-26ffkif098] {
    font-size: 0.9375rem;
    color: var(--gray-900);
    font-weight: 400;
}

.subject-slug[b-26ffkif098] {
    background-color: var(--gray-100);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8125rem;
    font-family: 'Courier New', monospace;
    color: var(--gray-800);
    display: inline-block;
}

.subject-description p[b-26ffkif098] {
    margin: 0;
    color: var(--gray-700);
    line-height: 1.6;
    font-size: 0.9375rem;
}

.no-description[b-26ffkif098] {
    color: var(--gray-500);
    font-style: italic;
    font-size: 0.9375rem;
}

/* Tags */
.tags-container[b-26ffkif098] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag-chip[b-26ffkif098] {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
    border-radius: 16px;
    font-size: 0.8125rem;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(33, 76, 166, 0.2);
}

.no-tags-message[b-26ffkif098] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem;
    background: var(--gray-50);
    border-radius: 8px;
    color: var(--gray-600);
    font-size: 0.95rem;
}

.no-tags-message i[b-26ffkif098] {
    font-size: 1.5rem;
    color: var(--gray-400);
}

/* Attachments */
.attachments-list[b-26ffkif098] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.attachment-item[b-26ffkif098] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.attachment-item:hover[b-26ffkif098] {
    background: var(--gray-100);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.attachment-info[b-26ffkif098] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.attachment-icon[b-26ffkif098] {
    width: 40px;
    height: 40px;
    background: var(--acv-white);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-primary);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.attachment-details[b-26ffkif098] {
    flex: 1;
}

.attachment-name[b-26ffkif098] {
    font-weight: 500;
    color: var(--gray-900);
    font-size: 0.95rem;
}

.attachment-type[b-26ffkif098] {
    font-size: 0.825rem;
    color: var(--gray-600);
    margin-top: 0.125rem;
}

.attachment-actions[b-26ffkif098] {
    display: flex;
    gap: 0.5rem;
}

.attachment-actions .action-btn[b-26ffkif098] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: linear-gradient(135deg, rgba(33, 76, 166, 0.1) 0%, rgba(33, 76, 166, 0.15) 100%);
    color: var(--acv-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.attachment-actions .action-btn:hover[b-26ffkif098] {
    background: var(--acv-primary);
    color: var(--acv-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(33, 76, 166, 0.3);
}

.no-attachments-message[b-26ffkif098] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
    background: var(--gray-50);
    border-radius: 12px;
}

.no-attachments-message i[b-26ffkif098] {
    font-size: 3rem;
    color: var(--gray-300);
    margin-bottom: 1rem;
}

.no-attachments-message h5[b-26ffkif098] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-700);
    margin: 0 0 0.5rem 0;
}

.no-attachments-message p[b-26ffkif098] {
    font-size: 0.95rem;
    color: var(--gray-600);
    margin: 0;
}

/* Feedback Questions */
.feedback-questions-list[b-26ffkif098] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.feedback-question-item[b-26ffkif098] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.feedback-question-item:hover[b-26ffkif098] {
    background: var(--gray-100);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.question-info[b-26ffkif098] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.question-icon[b-26ffkif098] {
    width: 40px;
    height: 40px;
    background: var(--acv-white);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-primary);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.question-details[b-26ffkif098] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
}

.question-text[b-26ffkif098] {
    font-weight: 500;
    color: var(--gray-900);
    font-size: 0.95rem;
    line-height: 1.5;
}

.question-status[b-26ffkif098] {
    display: flex;
    align-items: center;
}

.status-badge[b-26ffkif098] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-badge.active[b-26ffkif098] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: var(--acv-white);
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}

.status-badge.inactive[b-26ffkif098] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: var(--acv-white);
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
}

.status-badge i[b-26ffkif098] {
    font-size: 0.625rem;
}

.question-actions[b-26ffkif098] {
    display: flex;
    gap: 0.5rem;
}

.question-actions .action-btn[b-26ffkif098] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--acv-white);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.question-actions .action-btn.delete[b-26ffkif098] {
    background: linear-gradient(135deg, var(--error-lighter) 0%, rgba(255, 86, 48, 0.1) 100%) !important;
    background-color: var(--error-lighter) !important;
    color: var(--error-dark) !important;
    border: 1px solid var(--error-light) !important;
}

.question-actions .action-btn.delete:hover[b-26ffkif098] {
    background: linear-gradient(135deg, var(--error-main) 0%, var(--error-dark) 100%) !important;
    background-color: var(--error-main) !important;
    color: var(--acv-white) !important;
    border-color: var(--error-dark) !important;
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 8px 25px rgba(255, 86, 48, 0.3) !important;
}

.no-questions-message[b-26ffkif098] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
    background: var(--gray-50);
    border-radius: 12px;
}

.no-questions-message i[b-26ffkif098] {
    font-size: 3rem;
    color: var(--gray-300);
    margin-bottom: 1rem;
}

.no-questions-message h5[b-26ffkif098] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-700);
    margin: 0 0 0.5rem 0;
}

.no-questions-message p[b-26ffkif098] {
    font-size: 0.95rem;
    color: var(--gray-600);
    margin: 0;
}

/* Add Question Form in Modal */
.add-question-form[b-26ffkif098] {
    padding: 1rem 0;
}

.add-question-form .form-label[b-26ffkif098] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
}

.add-question-form .form-input[b-26ffkif098] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.9375rem;
    font-family: inherit;
    color: var(--gray-900);
    transition: all 0.2s ease;
    resize: vertical;
}

.add-question-form .form-input:focus[b-26ffkif098] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.add-question-form .form-input[b-26ffkif098]::placeholder {
    color: var(--gray-400);
}

/* Add Question Modal */
.modal-overlay[b-26ffkif098] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 1rem;
    backdrop-filter: blur(8px);
    animation: fadeIn-b-26ffkif098 0.2s ease-out;
}

@keyframes fadeIn-b-26ffkif098 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-container[b-26ffkif098] {
    background: #ffffff !important;
    border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);
    max-width: 640px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalSlideIn-b-26ffkif098 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

@keyframes modalSlideIn-b-26ffkif098 {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header[b-26ffkif098] {
    padding: 1.75rem 2rem;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    position: relative;
}

.modal-header[b-26ffkif098]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gray-200), transparent);
}

.modal-header-content[b-26ffkif098] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1;
}

.modal-icon-wrapper[b-26ffkif098] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #214ca6 !important;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.2);
    flex-shrink: 0;
}

.modal-icon-wrapper i[b-26ffkif098] {
    color: #ffffff !important;
    font-size: 1.25rem;
}

.modal-title-wrapper[b-26ffkif098] {
    flex: 1;
    min-width: 0;
}

.modal-title[b-26ffkif098] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 0.25rem 0;
    line-height: 1.3;
}

.modal-subtitle[b-26ffkif098] {
    font-size: 0.875rem;
    color: var(--gray-500);
    margin: 0;
    line-height: 1.4;
}

.modal-close-btn[b-26ffkif098] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--gray-400);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-top: -4px;
    margin-right: -4px;
}

.modal-close-btn:hover[b-26ffkif098] {
    background: var(--gray-100);
    color: var(--gray-700);
    transform: rotate(90deg);
}

.modal-close-btn:active[b-26ffkif098] {
    transform: rotate(90deg) scale(0.95);
}

.modal-body[b-26ffkif098] {
    padding: 2rem;
    overflow-y: auto;
    flex: 1;
    background: #ffffff;
}

.form-group[b-26ffkif098] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.form-label[b-26ffkif098] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gray-700);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-label i[b-26ffkif098] {
    color: #214ca6 !important;
    font-size: 1rem;
}

.form-label .required[b-26ffkif098] {
    color: #ef4444;
    margin-left: 0.125rem;
}

.form-input[b-26ffkif098] {
    width: 100%;
    padding: 1rem;
    border-radius: 12px;
    font-size: 0.9375rem;
    font-family: inherit;
    line-height: 1.5;
    color: var(--gray-900);
    background: #ffffff;
    transition: all 0.2s ease;
    resize: vertical;
    min-height: 120px;
}

.form-input:focus[b-26ffkif098] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 4px rgba(33, 76, 166, 0.1);
    background: #fafbfc;
}

.form-input[b-26ffkif098]::placeholder {
    color: var(--gray-400);
}

.form-input-warning[b-26ffkif098] {
    border-color: #f59e0b;
}

.form-input-warning:focus[b-26ffkif098] {
    border-color: #f59e0b;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.1);
}

.form-footer[b-26ffkif098] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.25rem;
}

.form-hint[b-26ffkif098] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: #6b7280 !important;
}

.form-hint i[b-26ffkif098] {
    font-size: 0.875rem;
    color: #214ca6 !important;
}

.character-count[b-26ffkif098] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #6b7280 !important;
    padding: 0.25rem 0.75rem;
    background: #f9fafb !important;
    border-radius: 8px;
}

.character-count span:first-child[b-26ffkif098] {
    color: #374151 !important;
}

.character-count span:last-child[b-26ffkif098] {
    color: #6b7280 !important;
}

.character-count-warning[b-26ffkif098] {
    background: #fef3c7 !important;
    color: #d97706 !important;
}

.character-count-warning span:first-child[b-26ffkif098] {
    color: #d97706 !important;
}

.character-count-warning span:last-child[b-26ffkif098] {
    color: #d97706 !important;
}

.form-input:focus[b-26ffkif098] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.form-input[b-26ffkif098]::placeholder {
    color: var(--gray-400);
}

.form-hint[b-26ffkif098] {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.modal-footer[b-26ffkif098] {
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--gray-200);
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    background: #ffffff;
}

.modal-container .modal-footer button.modal-btn-primary[b-26ffkif098],
.modal-container .modal-footer .modal-btn-primary[b-26ffkif098],
.modal-footer button.modal-btn-primary[b-26ffkif098],
.modal-footer .modal-btn-primary[b-26ffkif098],
.modal-container .modal-footer button.btn-primary[b-26ffkif098],
.modal-container .modal-footer .btn-primary[b-26ffkif098],
.modal-footer button.btn-primary[b-26ffkif098],
.modal-footer .btn-primary[b-26ffkif098] {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.75rem 1.5rem !important;
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%) !important;
    background-color: #214ca6 !important;
    background-image: linear-gradient(135deg, #214ca6 0%, #1e40af 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    min-width: 140px !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.15) !important;
}

.modal-container .modal-footer button.modal-btn-primary:hover:not(:disabled)[b-26ffkif098],
.modal-container .modal-footer .modal-btn-primary:hover:not(:disabled)[b-26ffkif098],
.modal-footer button.modal-btn-primary:hover:not(:disabled)[b-26ffkif098],
.modal-footer .modal-btn-primary:hover:not(:disabled)[b-26ffkif098],
.modal-container .modal-footer button.btn-primary:hover:not(:disabled)[b-26ffkif098],
.modal-container .modal-footer .btn-primary:hover:not(:disabled)[b-26ffkif098],
.modal-footer button.btn-primary:hover:not(:disabled)[b-26ffkif098],
.modal-footer .btn-primary:hover:not(:disabled)[b-26ffkif098] {
    background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%) !important;
    background-color: #1e40af !important;
    background-image: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.25) !important;
}

.modal-container .modal-footer button.modal-btn-primary:disabled[b-26ffkif098],
.modal-container .modal-footer .modal-btn-primary:disabled[b-26ffkif098],
.modal-footer button.modal-btn-primary:disabled[b-26ffkif098],
.modal-footer .modal-btn-primary:disabled[b-26ffkif098],
.modal-container .modal-footer button.btn-primary:disabled[b-26ffkif098],
.modal-container .modal-footer .btn-primary:disabled[b-26ffkif098],
.modal-footer button.btn-primary:disabled[b-26ffkif098],
.modal-footer .btn-primary:disabled[b-26ffkif098] {
    background: #9ca3af !important;
    background-color: #9ca3af !important;
    background-image: none !important;
    color: #ffffff !important;
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

.modal-container .modal-footer button.modal-btn-primary i[b-26ffkif098],
.modal-container .modal-footer button.modal-btn-primary span[b-26ffkif098],
.modal-container .modal-footer .modal-btn-primary i[b-26ffkif098],
.modal-container .modal-footer .modal-btn-primary span[b-26ffkif098],
.modal-footer button.modal-btn-primary i[b-26ffkif098],
.modal-footer button.modal-btn-primary span[b-26ffkif098],
.modal-footer .modal-btn-primary i[b-26ffkif098],
.modal-footer .modal-btn-primary span[b-26ffkif098],
.modal-container .modal-footer button.btn-primary i[b-26ffkif098],
.modal-container .modal-footer button.btn-primary span[b-26ffkif098],
.modal-container .modal-footer .btn-primary i[b-26ffkif098],
.modal-container .modal-footer .btn-primary span[b-26ffkif098],
.modal-footer button.btn-primary i[b-26ffkif098],
.modal-footer button.btn-primary span[b-26ffkif098],
.modal-footer .btn-primary i[b-26ffkif098],
.modal-footer .btn-primary span[b-26ffkif098] {
    color: #ffffff !important;
}

.modal-container .modal-footer button.modal-btn-secondary[b-26ffkif098],
.modal-container .modal-footer .modal-btn-secondary[b-26ffkif098],
.modal-footer button.modal-btn-secondary[b-26ffkif098],
.modal-footer .modal-btn-secondary[b-26ffkif098],
.modal-container .modal-footer button.btn-secondary[b-26ffkif098],
.modal-container .modal-footer .btn-secondary[b-26ffkif098],
.modal-footer button.btn-secondary[b-26ffkif098],
.modal-footer .btn-secondary[b-26ffkif098] {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.75rem 1.5rem !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #374151 !important;
    border: 1px solid #d1d5db !important;
    border-radius: 12px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    min-width: 120px !important;
    justify-content: center !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.modal-container .modal-footer button.modal-btn-secondary:hover:not(:disabled)[b-26ffkif098],
.modal-container .modal-footer .modal-btn-secondary:hover:not(:disabled)[b-26ffkif098],
.modal-footer button.modal-btn-secondary:hover:not(:disabled)[b-26ffkif098],
.modal-footer .modal-btn-secondary:hover:not(:disabled)[b-26ffkif098],
.modal-container .modal-footer button.btn-secondary:hover:not(:disabled)[b-26ffkif098],
.modal-container .modal-footer .btn-secondary:hover:not(:disabled)[b-26ffkif098],
.modal-footer button.btn-secondary:hover:not(:disabled)[b-26ffkif098],
.modal-footer .btn-secondary:hover:not(:disabled)[b-26ffkif098] {
    background: #f9fafb !important;
    background-color: #f9fafb !important;
    background-image: none !important;
    border-color: #9ca3af !important;
    color: #374151 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.modal-container .modal-footer button.modal-btn-secondary:disabled[b-26ffkif098],
.modal-container .modal-footer .modal-btn-secondary:disabled[b-26ffkif098],
.modal-footer button.modal-btn-secondary:disabled[b-26ffkif098],
.modal-footer .modal-btn-secondary:disabled[b-26ffkif098],
.modal-container .modal-footer button.btn-secondary:disabled[b-26ffkif098],
.modal-container .modal-footer .btn-secondary:disabled[b-26ffkif098],
.modal-footer button.btn-secondary:disabled[b-26ffkif098],
.modal-footer .btn-secondary:disabled[b-26ffkif098] {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

.modal-container .modal-footer button.modal-btn-secondary i[b-26ffkif098],
.modal-container .modal-footer button.modal-btn-secondary span[b-26ffkif098],
.modal-container .modal-footer .modal-btn-secondary i[b-26ffkif098],
.modal-container .modal-footer .modal-btn-secondary span[b-26ffkif098],
.modal-footer button.modal-btn-secondary i[b-26ffkif098],
.modal-footer button.modal-btn-secondary span[b-26ffkif098],
.modal-footer .modal-btn-secondary i[b-26ffkif098],
.modal-footer .modal-btn-secondary span[b-26ffkif098],
.modal-container .modal-footer button.btn-secondary i[b-26ffkif098],
.modal-container .modal-footer button.btn-secondary span[b-26ffkif098],
.modal-container .modal-footer .btn-secondary i[b-26ffkif098],
.modal-container .modal-footer .btn-secondary span[b-26ffkif098],
.modal-footer button.btn-secondary i[b-26ffkif098],
.modal-footer button.btn-secondary span[b-26ffkif098],
.modal-footer .btn-secondary i[b-26ffkif098],
.modal-footer .btn-secondary span[b-26ffkif098] {
    color: #374151 !important;
}

/* Responsive */
@media (max-width: 768px) {
    .subjects-details-page[b-26ffkif098] {
        padding: 0.5rem 1rem;
    }

    .card-header-text h1[b-26ffkif098] {
        font-size: 1.5rem;
    }
    
    .card-header[b-26ffkif098] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .btn-add-small[b-26ffkif098] {
        width: 100%;
        justify-content: center;
    }

    .subject-details-grid[b-26ffkif098] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .detail-item[b-26ffkif098] {
        gap: 0.25rem;
    }
    
    .feedback-question-item[b-26ffkif098] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .question-actions[b-26ffkif098] {
        width: 100%;
        justify-content: flex-end;
    }
    
    .modal-container[b-26ffkif098] {
        max-width: 100%;
        margin: 1rem;
    }
    
    .modal-footer[b-26ffkif098] {
        flex-direction: column;
    }
    
    .modal-footer .btn-primary[b-26ffkif098],
    .modal-footer .btn-secondary[b-26ffkif098] {
        min-width: 100%;
    }

    .form-actions[b-26ffkif098] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .btn-primary[b-26ffkif098],
    .btn-secondary[b-26ffkif098],
    .btn-danger[b-26ffkif098] {
        min-width: 100%;
    }
}

@media (max-width: 600px) {
    .card-header-content[b-26ffkif098] {
        flex-direction: column;
        text-align: center;
    }

    .attachment-item[b-26ffkif098] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .attachment-actions[b-26ffkif098] {
        width: 100%;
        justify-content: flex-end;
    }
}

/* Form Actions - Same as Exams Details */
.form-actions[b-26ffkif098] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-200);
    flex-wrap: wrap;
}

.btn-primary[b-26ffkif098],
.btn-secondary[b-26ffkif098],
.btn-danger[b-26ffkif098] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    border: none;
    min-width: 160px;
    justify-content: center;
}

.btn-primary[b-26ffkif098] {
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.15);
}

.btn-primary:hover[b-26ffkif098] {
    background: linear-gradient(135deg, var(--acv-primary-700) 0%, var(--acv-primary-800) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.25);
    text-decoration: none;
    color: var(--acv-white);
}

.btn-secondary[b-26ffkif098] {
    background: var(--acv-white);
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.btn-secondary:hover[b-26ffkif098] {
    background: var(--gray-50);
    border-color: var(--gray-400);
    transform: translateY(-1px);
    color: var(--gray-800);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-danger[b-26ffkif098] {
    background: linear-gradient(135deg, #ff5630 0%, #ff8a65 100%);
    color: var(--acv-white);
    box-shadow: 0 2px 8px rgba(255, 86, 48, 0.25);
}

.btn-danger:hover[b-26ffkif098] {
    background: linear-gradient(135deg, #e53e3e 0%, #ff6b47 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 86, 48, 0.35);
}

/* _content/ltia.portal.web/Components/Exams/Admin/Pages/Subjects/Edit.razor.rz.scp.css */
/* CSS Variables - Đặt trực tiếp vào .subjects-page */
.subjects-page[b-2zqweb77uh] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    
    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Card Header */
.subjects-card-header[b-2zqweb77uh] {
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--acv-white) 100%);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.header-content[b-2zqweb77uh] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem 2.5rem;
}

.header-icon[b-2zqweb77uh] {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.25);
    flex-shrink: 0;
}

.header-icon i[b-2zqweb77uh] {
    color: var(--acv-white);
    font-size: 1.75rem;
}

.header-text[b-2zqweb77uh] {
    flex: 1;
}

.header-title[b-2zqweb77uh] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
}

.header-subtitle[b-2zqweb77uh] {
    font-size: 1rem;
    color: var(--gray-600);
    margin: 0;
    line-height: 1.5;
}

/* Main Content Card */
.subjects-card[b-2zqweb77uh] {
    background: var(--acv-white);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--gray-200);
    overflow: visible;
    position: relative;
    z-index: 15;
    margin-bottom: 1.5rem;
}

.create-form-container[b-2zqweb77uh] {
    padding: 2rem;
}

.create-form[b-2zqweb77uh] {
    max-width: 100%;
}

/* Form Groups */
.form-group[b-2zqweb77uh] {
    margin-bottom: 1.5rem;
}

.form-label[b-2zqweb77uh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
}

.form-label i[b-2zqweb77uh] {
    color: var(--acv-primary);
    font-size: 0.85rem;
}

.form-label-small[b-2zqweb77uh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
}

.form-label-small i[b-2zqweb77uh] {
    color: var(--acv-primary);
    font-size: 0.8rem;
}

.required[b-2zqweb77uh] {
    color: var(--error-main);
    margin-left: 2px;
}

/* Form Inputs */
.form-input[b-2zqweb77uh] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    background: var(--acv-white);
    transition: all 0.2s ease;
    font-family: inherit;
    box-sizing: border-box;
    height: 48px;
}

.form-input:focus[b-2zqweb77uh] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.form-input-disabled[b-2zqweb77uh] {
    background-color: #f8f9fa !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
    border-color: #dee2e6 !important;
}

.form-textarea[b-2zqweb77uh] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    background: var(--acv-white);
    transition: all 0.2s ease;
    font-family: inherit;
    resize: vertical;
    min-height: 100px;
}

.form-textarea:focus[b-2zqweb77uh] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.form-text[b-2zqweb77uh] {
    font-size: 0.85rem;
    color: var(--gray-600);
    margin-top: 0.25rem;
}

.text-warning[b-2zqweb77uh] {
    color: #856404 !important;
    font-size: 0.875rem;
}

.validation-error[b-2zqweb77uh] {
    color: var(--error-main);
    font-size: 0.85rem;
    display: none;
}

/* Input Group (for slug with button) */
.input-group[b-2zqweb77uh] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.input-group .form-input[b-2zqweb77uh] {
    flex: 1;
}

/* Current Attachments */
.current-attachments[b-2zqweb77uh] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.uploaded-file-item[b-2zqweb77uh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.uploaded-file-item:hover[b-2zqweb77uh] {
    background: var(--gray-100);
    border-color: var(--gray-300);
}

.file-info[b-2zqweb77uh] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.file-info i[b-2zqweb77uh] {
    color: var(--acv-primary);
    font-size: 1.5rem;
}

.file-name[b-2zqweb77uh] {
    font-size: 0.95rem;
    color: var(--gray-800);
    font-weight: 500;
}

.remove-file-btn[b-2zqweb77uh] {
    background: var(--error-lighter);
    color: var(--error-main);
    border: none;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.remove-file-btn:hover[b-2zqweb77uh] {
    background: var(--error-main);
    color: var(--acv-white);
    transform: scale(1.05);
}

.no-attachments[b-2zqweb77uh] {
    padding: 1rem;
    text-align: center;
    color: var(--gray-500);
    font-style: italic;
    background: var(--gray-50);
    border: 1px dashed var(--gray-300);
    border-radius: 8px;
}

/* Tag Management */
.available-tags-container[b-2zqweb77uh] {
    margin-bottom: 1rem;
    position: relative;
}

.available-tags-toggle[b-2zqweb77uh] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    background: var(--acv-white);
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
}

.available-tags-toggle:hover[b-2zqweb77uh] {
    border-color: var(--acv-primary);
    background: var(--gray-50);
}

.available-tags-text[b-2zqweb77uh] {
    color: var(--gray-700);
}

.available-tags-icon[b-2zqweb77uh] {
    color: var(--gray-500);
    font-size: 0.8rem;
    transition: transform 0.2s ease;
}

.available-tags-icon.rotated[b-2zqweb77uh] {
    transform: rotate(180deg);
}

.available-tags-dropdown[b-2zqweb77uh] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--acv-white);
    border: 2px solid var(--gray-300);
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    display: none;
    margin-top: 0.25rem;
    overflow: hidden;
}

.available-tags-dropdown.show[b-2zqweb77uh] {
    display: block;
}

.available-tags-search[b-2zqweb77uh] {
    padding: 1rem;
    border-bottom: 1px solid var(--gray-200);
    background: var(--gray-50);
}

.available-tags-search-input[b-2zqweb77uh] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.9rem;
    background: var(--acv-white);
}

.available-tags-search-input:focus[b-2zqweb77uh] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 2px rgba(33, 76, 166, 0.1);
}

.available-tags-list[b-2zqweb77uh] {
    max-height: 200px;
    overflow-y: auto;
    padding: 0.5rem 0;
}

.available-tag-item[b-2zqweb77uh] {
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.available-tag-item:hover[b-2zqweb77uh] {
    background: var(--gray-50);
}

.available-tag-item.selected[b-2zqweb77uh] {
    background: rgba(33, 76, 166, 0.08);
}

.tag-checkbox-label[b-2zqweb77uh] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    width: 100%;
    margin: 0;
}

.tag-checkbox-label input[type="checkbox"][b-2zqweb77uh] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.tag-checkbox-custom[b-2zqweb77uh] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--gray-400);
    border-radius: 4px;
    background: var(--acv-white);
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.tag-checkbox-label input[type="checkbox"]:checked + .tag-checkbox-custom[b-2zqweb77uh] {
    background: var(--acv-primary);
    border-color: var(--acv-primary);
}

.tag-checkbox-label input[type="checkbox"]:checked + .tag-checkbox-custom[b-2zqweb77uh]::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid var(--acv-white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.tag-name[b-2zqweb77uh] {
    font-size: 0.9rem;
    color: var(--gray-700);
    flex: 1;
}

.no-tags[b-2zqweb77uh] {
    padding: 1rem;
    text-align: center;
    color: var(--gray-500);
    font-style: italic;
    background: var(--gray-50);
    border: 1px dashed var(--gray-300);
    border-radius: 8px;
}

/* Add Tag Container removed */

/* Selected Tags */
.selected-tags-container[b-2zqweb77uh] {
    margin-top: 1rem;
}

.selected-tags[b-2zqweb77uh] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag-chip[b-2zqweb77uh] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
    padding: 0.5rem 1rem;
    border-radius: 16px;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(33, 76, 166, 0.2);
    transition: all 0.2s ease;
}

.tag-chip:hover[b-2zqweb77uh] {
    background: linear-gradient(135deg, var(--acv-primary-700) 0%, var(--acv-primary-800) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(33, 76, 166, 0.3);
}

.chip-text[b-2zqweb77uh] {
    white-space: nowrap;
}

.chip-remove[b-2zqweb77uh] {
    background: none;
    border: none;
    color: var(--acv-white);
    cursor: pointer;
    padding: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.chip-remove:hover[b-2zqweb77uh] {
    background: rgba(255, 255, 255, 0.2);
}

.no-selected-tags[b-2zqweb77uh] {
    padding: 1rem;
    text-align: center;
    color: var(--gray-500);
    font-style: italic;
    background: var(--gray-50);
    border: 1px dashed var(--gray-300);
    border-radius: 8px;
}

/* Form Actions */
.form-actions[b-2zqweb77uh] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 0;
    padding-top: 0;
    flex-wrap: wrap;
}

.form-actions .btn-secondary[b-2zqweb77uh],
.form-actions .btn-primary[b-2zqweb77uh],
.form-actions .btn-danger[b-2zqweb77uh] {
    flex: 0 0 auto;
    min-width: 160px;
}

.btn-primary[b-2zqweb77uh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
    border: none;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.15);
}

.btn-primary:hover[b-2zqweb77uh] {
    background: linear-gradient(135deg, var(--acv-primary-700) 0%, var(--acv-primary-800) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.25);
}

.btn-secondary[b-2zqweb77uh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--acv-white);
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.btn-secondary:hover[b-2zqweb77uh] {
    background: var(--gray-50);
    border-color: var(--gray-400);
    transform: translateY(-1px);
    color: var(--gray-800);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-danger[b-2zqweb77uh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #ff5630 0%, #ff8a65 100%);
    color: var(--acv-white);
    border: none;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(255, 86, 48, 0.25);
}

.btn-danger:hover[b-2zqweb77uh] {
    background: linear-gradient(135deg, #e53e3e 0%, #ff6b47 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 86, 48, 0.35);
}

.btn-primary:disabled[b-2zqweb77uh] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Loading & Not Found */
.loading-container[b-2zqweb77uh],
.not-found-container[b-2zqweb77uh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    background: var(--acv-white);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.loading-container p[b-2zqweb77uh],
.not-found-container h3[b-2zqweb77uh] {
    margin-top: 1rem;
    color: var(--gray-700);
}

.not-found-container i[b-2zqweb77uh] {
    font-size: 4rem;
    color: var(--warning-main);
}

/* Responsive */
@media (max-width: 768px) {
    .header-content[b-2zqweb77uh] {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
    }

    .header-icon[b-2zqweb77uh] {
        width: 56px;
        height: 56px;
    }

    .header-title[b-2zqweb77uh] {
        font-size: 1.5rem;
    }

    .create-form-container[b-2zqweb77uh] {
        padding: 1.5rem;
    }

    .form-actions[b-2zqweb77uh] {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .form-actions .btn-secondary[b-2zqweb77uh],
    .form-actions .btn-primary[b-2zqweb77uh],
    .form-actions .btn-danger[b-2zqweb77uh] {
        min-width: 100%;
        justify-content: center;
    }
}

/* File Actions Container */
.file-actions[b-2zqweb77uh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Action Button - Same as Details */
.action-btn[b-2zqweb77uh] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--acv-white);
    color: var(--acv-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.action-btn:hover[b-2zqweb77uh] {
    background: var(--acv-primary);
    color: var(--acv-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(33, 76, 166, 0.3);
}

.action-btn i[b-2zqweb77uh] {
    font-size: 0.875rem;
}

/* _content/ltia.portal.web/Components/Exams/Admin/Pages/Subjects/Index.razor.rz.scp.css */
/* CSS Variables - Đặt trực tiếp vào .subjects-page */
.subjects-page[b-92u1fh83hy] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    
    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Subjects Page Styles - Based on MVC Design System */
label[b-92u1fh83hy] {
    color: var(--gray-700);
    margin: 0;
}

/* Card Header Section */
.card-header-section[b-92u1fh83hy] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.card-header-content[b-92u1fh83hy] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.card-header-icon[b-92u1fh83hy] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
}

.card-header-text h1[b-92u1fh83hy] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-800);
}

.card-header-text p[b-92u1fh83hy] {
    margin: 0.25rem 0 0 0;
    color: var(--gray-600);
    font-size: 1rem;
}

/* Search Section */
.subjects-search-section[b-92u1fh83hy] {
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    margin-bottom: 2rem;
    overflow: visible;
    position: relative;
    z-index: 100;
}

.search-container[b-92u1fh83hy] {
    padding: 2rem;
}

.search-header[b-92u1fh83hy] {
    margin-bottom: 1.5rem;
    text-align: center;
}

.search-title[b-92u1fh83hy] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 0.5rem 0;
}

.search-title i[b-92u1fh83hy] {
    color: var(--acv-primary);
    font-size: 1.3rem;
}

.search-subtitle[b-92u1fh83hy] {
    color: var(--gray-600);
    font-size: 1rem;
    margin: 0;
    font-weight: 400;
}

.search-content[b-92u1fh83hy] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.search-main-row[b-92u1fh83hy] {
    display: flex;
    gap: 1.5rem;
    align-items: flex-end;
    flex-wrap: wrap;
    position: relative;
    z-index: 20;
}

.search-input-group[b-92u1fh83hy] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 0 0 700px;
    min-width: 700px;
    position: relative;
    z-index: 20;
}

.form-label[b-92u1fh83hy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-700);
    margin: 0;
}

.form-label i[b-92u1fh83hy] {
    color: var(--acv-primary);
    font-size: 0.8rem;
}

.form-input[b-92u1fh83hy] {
    width: 100%;
    height: 48px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--acv-white);
    box-sizing: border-box;
}

.form-input:focus[b-92u1fh83hy] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

/* Tag Filter Section */
.tag-filter-section[b-92u1fh83hy] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 0 0 600px;
    min-width: 600px;
    position: relative;
    z-index: 100;
}

.tag-dropdown-container[b-92u1fh83hy] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
    z-index: 1000;
}

.tag-dropdown-wrapper[b-92u1fh83hy] {
    position: relative;
    display: inline-block;
    width: 100%;
    z-index: 10000;
}

.tag-dropdown-toggle[b-92u1fh83hy] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    background: var(--acv-white);
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    box-sizing: border-box;
    height: 48px;
}

.tag-dropdown-toggle:hover[b-92u1fh83hy] {
    border-color: var(--acv-primary);
}

.tag-dropdown-text[b-92u1fh83hy] {
    flex: 1;
    color: var(--gray-700);
}

.tag-dropdown-icon[b-92u1fh83hy] {
    color: var(--gray-500);
    font-size: 0.8rem;
    transition: transform 0.2s ease;
}

.search-controls[b-92u1fh83hy] {
    display: flex;
    gap: 0.75rem;
    align-items: end;
    position: relative;
    z-index: 20;
    flex-shrink: 0;
    min-width: 120px;
    flex: 0 0 120px;
}

.search-btn[b-92u1fh83hy], .clear-btn[b-92u1fh83hy] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border: none;
    padding: 0.75rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 20;
    width: 48px;
    height: 48px;
    box-sizing: border-box;
}

.search-btn:hover[b-92u1fh83hy] {
    background: var(--acv-primary-700);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

.clear-btn[b-92u1fh83hy] {
    background: var(--gray-500);
}

.clear-btn:hover[b-92u1fh83hy] {
    background: var(--gray-600);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* List Container */
.subjects-list-container[b-92u1fh83hy] {
    background: var(--acv-white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
}

/* List Header */
.list-header[b-92u1fh83hy] {
    background: var(--acv-white) !important;
    padding: 1.75rem 2rem;
    border-bottom: 1px solid var(--gray-200);
    border-radius: 16px 16px 0 0;
    position: relative;
    z-index: 100;
    overflow: visible;
}

.list-header[b-92u1fh83hy]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 16px 0 0 0;
}

.list-header-content[b-92u1fh83hy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0;
}

.list-title-section[b-92u1fh83hy] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.list-title[b-92u1fh83hy] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.list-title i[b-92u1fh83hy] {
    color: var(--acv-primary);
    font-size: 1.25rem;
}

.list-count[b-92u1fh83hy] {
    background: var(--acv-primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Sort Controls */
.sort-controls[b-92u1fh83hy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.sort-dropdown-btn[b-92u1fh83hy],
.refresh-btn[b-92u1fh83hy],
.add-subject-btn[b-92u1fh83hy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--acv-white);
    color: var(--acv-primary);
    border: 2px solid var(--acv-primary);
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 120px;
    justify-content: space-between;
    text-decoration: none;
}

.sort-dropdown-btn:hover[b-92u1fh83hy],
.refresh-btn:hover[b-92u1fh83hy],
.add-subject-btn:hover[b-92u1fh83hy] {
    background: var(--acv-primary);
    color: var(--acv-white);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
    text-decoration: none;
}

/* Sort Dropdown */
.sort-dropdown[b-92u1fh83hy] {
    position: relative;
    display: inline-block;
    z-index: 10000;
}

/* Subjects List */
.subjects-list[b-92u1fh83hy] {
    padding: 1.5rem;
    gap: 1.5rem;
    position: relative;
    z-index: 5;
    min-height: 200px;
}

#subjectsContainer[b-92u1fh83hy] {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Desktop: luôn 3 card/hàng */
    grid-auto-rows: 1fr; /* Đảm bảo tất cả card trong cùng hàng có cùng chiều cao */
    gap: 1.5rem;
    padding: 1.5rem;
    justify-content: start;
    align-items: stretch; /* Đảm bảo tất cả card trong cùng hàng có cùng chiều cao */
}

/* Subject Card */
.subject-card[b-92u1fh83hy] {
    background: var(--acv-white);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    z-index: 5;
    display: flex;
    flex-direction: column;
    height: 100%; /* Đảm bảo card chiếm hết chiều cao của grid cell */
    width: 100%;
    max-width: 100%;
}

.subject-card[b-92u1fh83hy]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--acv-primary);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.subject-card:hover[b-92u1fh83hy] {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: var(--acv-primary);
}

.subject-card:hover[b-92u1fh83hy]::before {
    opacity: 1;
}

/* Subject Card Header */
.subject-card-header[b-92u1fh83hy] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.5rem 1.5rem 1rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    position: relative;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}

.subject-card-header[b-92u1fh83hy]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--acv-primary) 0%, #1e40af 100%);
    border-radius: 0 2px 2px 0;
}

.subject-title[b-92u1fh83hy] {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
    line-height: 1.4;
    flex: 1;
    padding-right: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Giới hạn hiển thị tối đa 2 dòng */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-clamp: 2; /* Standard property for compatibility */
    min-height: calc(1.2rem * 1.4 * 2); /* Đảm bảo chiều cao tối thiểu bằng 2 dòng: font-size × line-height × 2 */
}

.subject-actions[b-92u1fh83hy] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Action Buttons */
.action-btn[b-92u1fh83hy] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.action-btn.view[b-92u1fh83hy] {
    background: linear-gradient(135deg, rgba(33, 76, 166, 0.1) 0%, rgba(33, 76, 166, 0.15) 100%);
    color: var(--acv-primary);
    border: 1px solid rgba(33, 76, 166, 0.2);
}

.action-btn.view:hover[b-92u1fh83hy] {
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(33, 76, 166, 0.3);
}

.action-btn.edit[b-92u1fh83hy] {
    background: linear-gradient(135deg, var(--warning-lighter) 0%, rgba(255, 171, 0, 0.1) 100%);
    color: var(--warning-dark);
    border: 1px solid var(--warning-light);
}

.action-btn.edit:hover[b-92u1fh83hy] {
    background: linear-gradient(135deg, var(--warning-main) 0%, var(--warning-dark) 100%);
    color: var(--acv-white);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(255, 171, 0, 0.3);
}

.action-btn.delete[b-92u1fh83hy] {
    background: linear-gradient(135deg, var(--error-lighter) 0%, rgba(255, 86, 48, 0.1) 100%);
    color: var(--error-dark);
    border: 1px solid var(--error-light);
}

.action-btn.delete:hover[b-92u1fh83hy] {
    background: linear-gradient(135deg, var(--error-main) 0%, var(--error-dark) 100%);
    color: var(--acv-white);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(255, 86, 48, 0.3);
}

.action-btn.add-instructor[b-92u1fh83hy] {
    background: linear-gradient(135deg, var(--success-lighter) 0%, rgba(0, 200, 83, 0.1) 100%);
    color: var(--success-dark);
    border: 1px solid var(--success-light);
}

.action-btn.add-instructor:hover[b-92u1fh83hy] {
    background: linear-gradient(135deg, var(--success-main) 0%, var(--success-dark) 100%);
    color: var(--acv-white);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 200, 83, 0.3);
}

.action-btn.question-bank[b-92u1fh83hy] {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.1) 0%, rgba(156, 39, 176, 0.15) 100%);
    color: #7b1fa2;
    border: 1px solid rgba(156, 39, 176, 0.2);
}

.action-btn.question-bank:hover[b-92u1fh83hy] {
    background: linear-gradient(135deg, #9c27b0 0%, #7b1fa2 100%);
    color: var(--acv-white);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(156, 39, 176, 0.3);
}

/* Subject Card Body */
.subject-card-body[b-92u1fh83hy] {
    padding: 1.25rem 1.5rem;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    background: #ffffff;
    min-height: 0; /* Cho phép flex item shrink */
    overflow: hidden; /* Ẩn nội dung vượt quá */
}

.subject-description[b-92u1fh83hy] {
    font-size: 1rem !important;
    color: var(--gray-700);
    line-height: 1.8;
    font-weight: 500;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Giới hạn hiển thị tối đa 3 dòng */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-clamp: 3; /* Standard property for compatibility */
    flex: 1;
    min-height: 0;
}

.subject-meta[b-92u1fh83hy] {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.subject-code[b-92u1fh83hy] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--acv-primary);
    background: rgba(33, 76, 166, 0.08);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1px solid rgba(33, 76, 166, 0.15);
    transition: all 0.3s ease;
    text-transform: uppercase;
    max-width: fit-content;
    position: relative;
    overflow: hidden;
}

.subject-code:hover[b-92u1fh83hy] {
    transform: translateY(-2px);
    background: var(--acv-primary);
    color: var(--acv-white);
    border-color: var(--acv-primary);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.25);
}

.subject-code i[b-92u1fh83hy] {
    color: var(--acv-primary);
    font-size: 0.75rem;
    transition: color 0.3s ease;
}

.subject-code:hover i[b-92u1fh83hy] {
    color: var(--acv-white);
}

/* Subject Card Footer */
.subject-card-footer[b-92u1fh83hy] {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 0 0 12px 12px;
}

.subject-card-footer .subject-attachments[b-92u1fh83hy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--gray-600);
    justify-content: flex-end;
    margin-top: auto;
}

/* Removed old subject-type-badge styles - now using subject-tag */

/* Tags Container - Hiển thị tags theo dạng lưới */
.subject-tags-container[b-92u1fh83hy] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
    max-height: 120px;
    overflow-y: auto;
    padding: 0.25rem;
}

.subject-tag[b-92u1fh83hy] {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.8rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
    box-shadow: 0 2px 4px rgba(33, 76, 166, 0.2);
    transition: all 0.3s ease;
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid rgba(33, 76, 166, 0.3);
}

.subject-tag:hover[b-92u1fh83hy] {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
    background: linear-gradient(135deg, var(--acv-primary-700) 0%, var(--acv-primary-800) 100%);
}

.subject-tag.no-tag[b-92u1fh83hy] {
    background: linear-gradient(135deg, var(--gray-200) 0%, var(--gray-300) 100%);
    color: var(--gray-600);
    border: 1px solid var(--gray-300);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.subject-tag.no-tag:hover[b-92u1fh83hy] {
    background: linear-gradient(135deg, var(--gray-300) 0%, var(--gray-400) 100%);
    transform: translateY(-1px);
}

/* Tag với nhiều tags - hiển thị compact hơn */
.subject-tags-container.many-tags .subject-tag[b-92u1fh83hy] {
    padding: 0.3rem 0.6rem;
    font-size: 0.7rem;
    border-radius: 16px;
    max-width: 150px;
}

/* Responsive cho tags */
@media (max-width: 600px) {
    .subject-tags-container[b-92u1fh83hy] {
        max-height: 100px;
        gap: 0.4rem;
    }
    
    .subject-tag[b-92u1fh83hy] {
        padding: 0.3rem 0.6rem;
        font-size: 0.7rem;
        max-width: 120px;
    }
}

/* subject-attachments styles moved to .subject-card-footer .subject-attachments above */

/* Empty State */
.empty-state[b-92u1fh83hy] {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--gray-600);
}

.empty-state-icon[b-92u1fh83hy] {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--gray-400);
}

.empty-state h3[b-92u1fh83hy] {
    margin-bottom: 0.5rem;
    color: var(--gray-700);
    font-size: 1.25rem;
    font-weight: 600;
}

.empty-state p[b-92u1fh83hy] {
    margin-bottom: 2rem;
    color: var(--gray-600);
}

.empty-state-actions[b-92u1fh83hy] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.empty-state-actions .add-subject-btn[b-92u1fh83hy] {
    padding: 0.5rem 1rem;
    border: 2px solid var(--acv-primary);
    border-radius: 8px;
    background: var(--acv-primary);
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.empty-state-actions .add-subject-btn:hover[b-92u1fh83hy] {
    background: var(--acv-primary);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

/* Table Footer */
.table-footer[b-92u1fh83hy] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--acv-white);
    border-top: 1px solid var(--gray-200);
    border-radius: 0 0 16px 16px;
    gap: 2rem;
}

.results-info[b-92u1fh83hy] {
    font-size: 0.9rem;
    color: var(--gray-600);
    font-weight: 500;
}

.pagination-container[b-92u1fh83hy] {
    display: flex;
    align-items: center;
}

.pagination-nav[b-92u1fh83hy] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagination-btn[b-92u1fh83hy] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: var(--acv-white);
    color: var(--gray-600);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s ease;
    cursor: pointer;
}

.pagination-btn:hover[b-92u1fh83hy] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border-color: var(--acv-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.15);
}

.pagination-btn.active[b-92u1fh83hy] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border-color: var(--acv-primary);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
}

/* Tag Dropdown Styles */
.tag-dropdown-container[b-92u1fh83hy] {
    position: relative;
    width: 100%;
}

.tag-dropdown-wrapper[b-92u1fh83hy] {
    position: relative;
    width: 100%;
}

.tag-dropdown-toggle[b-92u1fh83hy] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    background: var(--acv-white);
    color: var(--gray-700);
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
}

.tag-dropdown-toggle:hover[b-92u1fh83hy] {
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.tag-dropdown-toggle:focus[b-92u1fh83hy] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.tag-dropdown-text[b-92u1fh83hy] {
    flex: 1;
    color: var(--gray-700);
}

.tag-dropdown-icon[b-92u1fh83hy] {
    color: var(--gray-400);
    transition: transform 0.2s ease;
    font-size: 0.875rem;
}

.tag-dropdown-icon.rotated[b-92u1fh83hy] {
    transform: rotate(180deg);
}

.tag-dropdown-menu[b-92u1fh83hy] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--acv-white);
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    z-index: 1000;
    margin-top: 0.25rem;
    max-height: 300px;
    overflow: hidden;
}

.tag-search-box[b-92u1fh83hy] {
    padding: 0.75rem;
    border-bottom: 1px solid var(--gray-200);
}

.tag-search-input[b-92u1fh83hy] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    font-size: 0.875rem;
    color: var(--gray-700);
    background: var(--gray-50);
}

.tag-search-input:focus[b-92u1fh83hy] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 2px rgba(33, 76, 166, 0.1);
    background: var(--acv-white);
}

.tag-options[b-92u1fh83hy] {
    max-height: 200px;
    overflow-y: auto;
}

.tag-option[b-92u1fh83hy] {
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid var(--gray-100);
}

.tag-option:hover[b-92u1fh83hy] {
    background: var(--gray-50);
}

.tag-option.selected[b-92u1fh83hy] {
    background: var(--acv-primary-lighter);
    color: var(--acv-primary);
}

.tag-option.no-results[b-92u1fh83hy] {
    color: var(--gray-500);
    font-style: italic;
    cursor: default;
}

.tag-option.no-results:hover[b-92u1fh83hy] {
    background: transparent;
}

.tag-option-content[b-92u1fh83hy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.tag-checkbox[b-92u1fh83hy] {
    width: 16px;
    height: 16px;
    accent-color: var(--acv-primary);
    cursor: pointer;
}

.tag-name[b-92u1fh83hy] {
    flex: 1;
    font-size: 0.875rem;
    color: var(--gray-700);
    cursor: pointer;
}

.tag-check-icon[b-92u1fh83hy] {
    color: var(--acv-primary);
    font-size: 0.75rem;
}

.tag-clear-section[b-92u1fh83hy] {
    padding: 0.75rem;
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Sort Dropdown Styles */
.sort-dropdown[b-92u1fh83hy] {
    position: relative;
    display: inline-block;
}

.sort-dropdown-btn[b-92u1fh83hy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--acv-white);
    border: 2px solid var(--acv-primary);
    border-radius: 12px;
    color: var(--acv-primary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
    justify-content: space-between;
}

.sort-dropdown-btn:hover[b-92u1fh83hy] {
    background: var(--acv-primary);
    color: var(--acv-white);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
}

.sort-dropdown-btn.active[b-92u1fh83hy] {
    border-color: var(--primary-500);
    color: var(--primary-600);
    box-shadow: 0 0 0 3px var(--primary-100);
}

.sort-dropdown-btn i.rotated[b-92u1fh83hy] {
    transform: rotate(180deg);
    transition: transform 0.2s ease;
}

.sort-dropdown-menu[b-92u1fh83hy] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--acv-white);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 50;
    margin-top: 0.5rem;
    overflow: hidden;
    min-width: 200px;
}

.sort-option[b-92u1fh83hy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    width: 100%;
    background: var(--acv-white);
    border: none;
    color: var(--acv-primary);
    font-size: 0.875rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    border-bottom: 1px solid var(--gray-100);
}

.sort-option:hover[b-92u1fh83hy] {
    background: var(--acv-primary-50);
    color: var(--acv-primary);
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.1);
}

.sort-option.active[b-92u1fh83hy] {
    background: var(--acv-primary-50);
    color: var(--acv-primary);
    font-weight: 600;
}

.sort-option i:first-child[b-92u1fh83hy] {
    width: 16px;
    color: var(--acv-primary);
    font-size: 0.875rem;
}

.sort-option span[b-92u1fh83hy] {
    flex: 1;
}

.sort-icons[b-92u1fh83hy] {
    display: none;
}

.tag-clear-btn[b-92u1fh83hy] {
    width: auto;
    min-width: fit-content;
    padding: 0.5rem 0.75rem;
    background: var(--error-main);
    color: var(--acv-white);
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.tag-clear-btn:hover[b-92u1fh83hy] {
    background: var(--error-dark);
}

/* Responsive */
@media (max-width: 900px) {
    #subjectsContainer[b-92u1fh83hy] {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

@media (max-width: 600px) {
    .subjects-page[b-92u1fh83hy] {
        padding: 0.5rem 1rem;
    }

    #subjectsContainer[b-92u1fh83hy] {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1rem;
    }

    .search-main-row[b-92u1fh83hy] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-input-group[b-92u1fh83hy],
    .tag-filter-section[b-92u1fh83hy],
    .search-controls[b-92u1fh83hy] {
        min-width: auto;
        flex: 1;
    }
    
    .tag-dropdown-menu[b-92u1fh83hy] {
        max-height: 250px;
    }
    
    .tag-options[b-92u1fh83hy] {
        max-height: 150px;
    }
}

/* SelectSearch tag option styling */
[b-92u1fh83hy] .tag-option-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

[b-92u1fh83hy] .tag-icon {
    color: var(--gray-400);
    font-size: 0.875rem;
    flex-shrink: 0;
}

[b-92u1fh83hy] .tag-icon.selected {
    color: var(--acv-primary);
}

[b-92u1fh83hy] .tag-name {
    flex: 1;
    font-weight: 500;
    color: var(--gray-800);
}

[b-92u1fh83hy] .tag-name.selected {
    color: var(--acv-primary);
    font-weight: 600;
}

[b-92u1fh83hy] .tag-check {
    color: var(--acv-primary);
    font-size: 0.875rem;
    flex-shrink: 0;
}

/* Selected tags display */
.selected-tags-display[b-92u1fh83hy] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.selected-tag-badge[b-92u1fh83hy] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: var(--acv-primary-lighter);
    color: var(--acv-primary);
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.selected-tag-badge:hover[b-92u1fh83hy] {
    background: var(--acv-primary-light);
    color: var(--acv-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(33, 76, 166, 0.2);
}

.selected-tag-badge i[b-92u1fh83hy] {
    font-size: 0.75rem;
    opacity: 0.8;
}

.selected-tag-badge:hover i[b-92u1fh83hy] {
    opacity: 1;
}

/* ========================================
   ADD INSTRUCTOR MODAL POPUP STYLES
   ======================================== */

/* Block scroll khi modal hiển thị - Sử dụng cách tiếp cận mạnh hơn */
html.modal-open[b-92u1fh83hy] {
    overflow: hidden !important;
    height: 100% !important;
    position: relative !important;
}

body.modal-open[b-92u1fh83hy] {
    overflow: hidden !important;
    height: 100% !important;
    position: relative !important;
    margin: 0 !important;
}

/* Đảm bảo main content area cũng không scroll khi modal mở */
body.modal-open main[b-92u1fh83hy] {
    overflow: hidden !important;
}

/* Modal Overlay - Full Screen Popup */
.modal-overlay[b-92u1fh83hy] {
    /* CSS Variables - Inherit from subjects-page or define here */
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.6) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 999999 !important;
    backdrop-filter: blur(4px);
    animation: fadeIn-b-92u1fh83hy 0.3s ease-out;
}

@keyframes fadeIn-b-92u1fh83hy {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Modal Container */
.modal-container[b-92u1fh83hy] {
    background: #ffffff !important;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
    width: 90%;
    max-width: 700px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalSlideIn-b-92u1fh83hy 0.3s ease-out;
    position: relative;
    z-index: 1000000;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

@keyframes modalSlideIn-b-92u1fh83hy {
    from {
        transform: translateY(-30px) scale(0.95);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* Modal Header */
.modal-overlay .modal-container .modal-header[b-92u1fh83hy] {
    background: var(--acv-white) !important;
    padding: 1.75rem 2rem !important;
    border-bottom: 1px solid var(--gray-200) !important;
    border-radius: 16px 16px 0 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: relative !important;
}

.modal-overlay .modal-container .modal-header[b-92u1fh83hy]::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 4px !important;
    background: linear-gradient(180deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%) !important;
    border-radius: 16px 0 0 0 !important;
}

.modal-overlay .modal-container .modal-title[b-92u1fh83hy] {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    margin: 0 !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--gray-800) !important;
}

.modal-overlay .modal-container .modal-title i[b-92u1fh83hy] {
    font-size: 1.25rem !important;
    color: var(--acv-primary) !important;
}

.modal-overlay .modal-container .modal-close-btn[b-92u1fh83hy] {
    background: var(--gray-100) !important;
    border: 1px solid var(--gray-200) !important;
    color: var(--gray-700) !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    font-size: 1.125rem !important;
}

.modal-overlay .modal-container .modal-close-btn:hover[b-92u1fh83hy] {
    background: var(--gray-200) !important;
    color: var(--gray-800) !important;
    border-color: var(--gray-300) !important;
}

/* Modal Body */
.modal-body[b-92u1fh83hy] {
    padding: 2rem;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-height: calc(90vh - 120px);
    background: var(--acv-white) !important;
}

/* Section Headers */
.modal-overlay .modal-container .section-header[b-92u1fh83hy] {
    margin-bottom: 1rem;
}

.modal-overlay .modal-container .section-title[b-92u1fh83hy] {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--gray-800) !important;
    margin: 0 !important;
}

.modal-overlay .modal-container .section-title i[b-92u1fh83hy] {
    color: var(--acv-primary) !important;
    font-size: 0.875rem !important;
}

/* Current Instructors Section */
.modal-overlay .modal-container .current-instructors-section[b-92u1fh83hy] {
    padding: 1.5rem !important;
    background: var(--gray-50) !important;
    border-radius: 12px !important;
    border: 1px solid var(--gray-200) !important;
}

/* Search Instructors Section */
.modal-overlay .modal-container .search-instructors-section[b-92u1fh83hy] {
    padding: 1.5rem !important;
    background: var(--acv-white) !important;
    border-radius: 12px !important;
    border: 1px solid var(--gray-200) !important;
}

/* Form Group */
.modal-overlay .modal-container .form-group[b-92u1fh83hy] {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    margin-bottom: 1rem !important;
}

.modal-overlay .modal-container .form-label[b-92u1fh83hy] {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: var(--gray-700) !important;
    margin: 0 !important;
}

.modal-overlay .modal-container .form-label i[b-92u1fh83hy] {
    color: var(--acv-primary) !important;
    font-size: 0.8rem !important;
}

.modal-overlay .modal-container .form-input[b-92u1fh83hy] {
    width: 100% !important;
    height: 48px !important;
    padding: 0.75rem 1rem !important;
    border: 1px solid var(--gray-300) !important;
    border-radius: 8px !important;
    font-size: 0.95rem !important;
    transition: all 0.2s ease !important;
    background: var(--acv-white) !important;
    box-sizing: border-box !important;
    color: var(--gray-800) !important;
}

.modal-overlay .modal-container .form-input:focus[b-92u1fh83hy] {
    outline: none !important;
    border-color: var(--acv-primary) !important;
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1) !important;
}

.modal-overlay .modal-container .form-input[b-92u1fh83hy]::placeholder {
    color: var(--gray-400) !important;
}

.modal-overlay .modal-container .form-hint[b-92u1fh83hy] {
    font-size: 0.8rem !important;
    color: var(--gray-500) !important;
    margin-top: 0.25rem !important;
}

.modal-overlay .modal-container .form-error[b-92u1fh83hy] {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.75rem 1rem !important;
    background: var(--error-lighter) !important;
    border: 1px solid var(--error-light) !important;
    border-radius: 8px !important;
    color: var(--error-dark) !important;
    font-size: 0.875rem !important;
    margin-top: 0.5rem !important;
}

.modal-overlay .modal-container .form-error i[b-92u1fh83hy] {
    color: var(--error-main) !important;
    font-size: 0.875rem !important;
}

/* Instructors List */
.modal-overlay .modal-container .instructors-list[b-92u1fh83hy] {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    margin-top: 1rem !important;
}

.modal-overlay .modal-container .instructor-item[b-92u1fh83hy] {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 1rem 1.25rem !important;
    background: var(--acv-white) !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: 12px !important;
    transition: all 0.2s ease !important;
    cursor: pointer;
}

.modal-overlay .modal-container .instructor-item:hover:not(.disabled):not(.current)[b-92u1fh83hy] {
    border-color: var(--acv-primary) !important;
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.15) !important;
    transform: translateY(-2px);
}

.modal-overlay .modal-container .instructor-item.current[b-92u1fh83hy] {
    background: var(--success-lighter) !important;
    border-color: var(--success-light) !important;
    cursor: default;
}

.modal-overlay .modal-container .instructor-item.disabled[b-92u1fh83hy] {
    opacity: 0.6 !important;
    cursor: not-allowed;
    background: var(--gray-50) !important;
}

.modal-overlay .modal-container .instructor-info[b-92u1fh83hy] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.modal-overlay .modal-container .instructor-name[b-92u1fh83hy] {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--gray-800) !important;
}

.modal-overlay .modal-container .instructor-details[b-92u1fh83hy] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    align-items: center !important;
}

.modal-overlay .modal-container .instructor-code[b-92u1fh83hy],
.modal-overlay .modal-container .instructor-email[b-92u1fh83hy],
.modal-overlay .modal-container .instructor-phone[b-92u1fh83hy] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-size: 0.875rem !important;
    color: var(--gray-600) !important;
}

.modal-overlay .modal-container .instructor-code i[b-92u1fh83hy],
.modal-overlay .modal-container .instructor-email i[b-92u1fh83hy],
.modal-overlay .modal-container .instructor-phone i[b-92u1fh83hy] {
    color: var(--acv-primary) !important;
    font-size: 0.75rem !important;
}

.modal-overlay .modal-container .instructor-action[b-92u1fh83hy] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    background: var(--acv-primary) !important;
    color: var(--acv-white) !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

.modal-overlay .modal-container .instructor-item:hover:not(.disabled) .instructor-action[b-92u1fh83hy] {
    background: var(--acv-primary-700) !important;
    transform: scale(1.1);
}

.modal-overlay .modal-container .instructor-badge[b-92u1fh83hy] {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.5rem 1rem !important;
    background: var(--success-main) !important;
    color: var(--acv-white) !important;
    border-radius: 8px !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
}

.modal-overlay .modal-container .instructor-badge i[b-92u1fh83hy] {
    font-size: 0.875rem !important;
    color: var(--acv-white) !important;
}

.modal-overlay .modal-container .instructor-actions[b-92u1fh83hy] {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.modal-overlay .modal-container .instructor-delete-btn[b-92u1fh83hy] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    background: linear-gradient(135deg, var(--error-lighter) 0%, rgba(255, 86, 48, 0.1) 100%) !important;
    color: var(--error-dark) !important;
    border: 1px solid var(--error-light) !important;
    border-radius: 8px !important;
    cursor: pointer;
    transition: all 0.2s ease !important;
    font-size: 0.875rem !important;
    padding: 0 !important;
}

.modal-overlay .modal-container .instructor-delete-btn:hover:not(:disabled)[b-92u1fh83hy] {
    background: linear-gradient(135deg, var(--error-main) 0%, var(--error-dark) 100%) !important;
    color: var(--acv-white) !important;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 12px rgba(255, 86, 48, 0.3) !important;
}

.modal-overlay .modal-container .instructor-delete-btn:disabled[b-92u1fh83hy] {
    opacity: 0.6 !important;
    cursor: not-allowed;
    transform: none;
}

.modal-overlay .modal-container .instructor-delete-btn i[b-92u1fh83hy] {
    color: inherit !important;
}

/* Loading States */
.modal-overlay .modal-container .loading-instructors[b-92u1fh83hy],
.modal-overlay .modal-container .loading-employees[b-92u1fh83hy] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    padding: 2rem !important;
    color: var(--gray-600) !important;
    font-size: 0.95rem !important;
}

.modal-overlay .modal-container .loading-instructors i[b-92u1fh83hy],
.modal-overlay .modal-container .loading-employees i[b-92u1fh83hy] {
    color: var(--acv-primary) !important;
    font-size: 1.125rem !important;
}

/* No Instructors/Employees Message */
.modal-overlay .modal-container .no-instructors[b-92u1fh83hy] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    padding: 2rem !important;
    color: var(--gray-500) !important;
    font-size: 0.9rem !important;
    text-align: center !important;
    border: 2px dashed var(--gray-300) !important;
    border-radius: 12px !important;
    background: var(--gray-50) !important;
}

.modal-overlay .modal-container .no-instructors i[b-92u1fh83hy] {
    color: var(--gray-400) !important;
    font-size: 1.125rem !important;
}

/* Modal Footer */
.modal-overlay .modal-container .modal-footer[b-92u1fh83hy] {
    padding: 1rem 2rem !important;
    border-top: 1px solid var(--gray-200) !important;
    background: var(--gray-50) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.modal-overlay .modal-container .modal-loading[b-92u1fh83hy] {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    color: var(--gray-600) !important;
    font-size: 0.95rem !important;
}

.modal-overlay .modal-container .modal-loading i[b-92u1fh83hy] {
    color: var(--acv-primary) !important;
    font-size: 1.125rem !important;
}

/* Responsive */
@media (max-width: 768px) {
    .modal-container[b-92u1fh83hy] {
        width: 95%;
        max-height: 95vh;
    }

    .modal-body[b-92u1fh83hy] {
        padding: 1.5rem;
        gap: 1.5rem;
    }

    .current-instructors-section[b-92u1fh83hy],
    .search-instructors-section[b-92u1fh83hy] {
        padding: 1rem;
    }

    .instructor-details[b-92u1fh83hy] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

/* _content/ltia.portal.web/Components/Exams/Admin/Pages/Tags/Create.razor.rz.scp.css */
/* CSS Variables - T??ng t? nh? Index page */
.create-tag-page[b-qpw87dbxoy] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    
    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Label style t??ng t? Index */
label[b-qpw87dbxoy] {
    color: var(--gray-700);
    margin: 0;
}

/* Card Header Section - T??ng t? Index */
.card-header-section[b-qpw87dbxoy] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.card-header-content[b-qpw87dbxoy] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.card-header-icon[b-qpw87dbxoy] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
}

.card-header-text h1[b-qpw87dbxoy] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-800);
}

.card-header-text p[b-qpw87dbxoy] {
    margin: 0.25rem 0 0 0;
    color: var(--gray-600);
    font-size: 1rem;
}

/* Form Container */
.form-container[b-qpw87dbxoy] {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

.form-card[b-qpw87dbxoy] {
    background: var(--acv-white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    width: 100%;
    position: relative;
    z-index: 1;
}

/* Form Header - T??ng t? List Header */
.form-header[b-qpw87dbxoy] {
    background: var(--acv-white) !important;
    padding: 1.75rem 2rem;
    border-bottom: 1px solid var(--gray-200);
    border-radius: 16px 16px 0 0;
    position: relative;
    z-index: 100;
    overflow: visible;
}

.form-header[b-qpw87dbxoy]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 16px 0 0 0;
}

.form-header-content[b-qpw87dbxoy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0;
}

.form-title-section[b-qpw87dbxoy] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-title[b-qpw87dbxoy] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.form-title i[b-qpw87dbxoy] {
    color: var(--acv-primary);
    font-size: 1.25rem;
}

.form-subtitle[b-qpw87dbxoy] {
    color: var(--gray-600);
    font-size: 0.9rem;
    margin: 0;
    font-weight: 400;
}

/* Form Body */
.form-body[b-qpw87dbxoy] {
    padding: 2rem;
    background: var(--acv-white);
}

/* Error Alert */
.error-alert[b-qpw87dbxoy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--error-lighter);
    border: 1px solid var(--error-light);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    animation: slideIn-b-qpw87dbxoy 0.3s ease-out;
}

@keyframes slideIn-b-qpw87dbxoy {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.error-alert-content[b-qpw87dbxoy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--error-dark);
    font-weight: 500;
    flex: 1;
}

.error-alert-content i[b-qpw87dbxoy] {
    color: var(--error-main);
    font-size: 1.1rem;
}

.error-alert-close[b-qpw87dbxoy] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--error-main);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.error-alert-close:hover[b-qpw87dbxoy] {
    background: var(--error-main);
    color: var(--acv-white);
}

.form-row[b-qpw87dbxoy] {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.form-group[b-qpw87dbxoy] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-label[b-qpw87dbxoy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-700);
    margin: 0;
}

.form-label i[b-qpw87dbxoy] {
    color: var(--acv-primary);
    font-size: 0.8rem;
}

.required[b-qpw87dbxoy] {
    color: var(--error-main);
    font-weight: 700;
}

.form-input[b-qpw87dbxoy] {
    width: 100%;
    height: 48px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--acv-white);
    box-sizing: border-box;
}

.form-input:focus[b-qpw87dbxoy] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.form-input:invalid[b-qpw87dbxoy] {
    border-color: var(--error-main);
}

.form-text[b-qpw87dbxoy] {
    margin-top: 0.25rem;
    font-size: 0.85rem;
    color: var(--gray-600);
    font-style: italic;
}

/* Validation */
.validation-message[b-qpw87dbxoy] {
    color: var(--error-main);
    font-size: 0.85rem;
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.validation-message[b-qpw87dbxoy]::before {
    content: "?";
}

.validation-summary[b-qpw87dbxoy] {
    background: var(--error-lighter);
    border: 1px solid var(--error-light);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    color: var(--error-dark);
}

.validation-summary ul[b-qpw87dbxoy] {
    margin: 0;
    padding-left: 1.5rem;
}

/* Form Actions */
.form-actions[b-qpw87dbxoy] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-200);
}

.btn-cancel[b-qpw87dbxoy],
.btn-submit[b-qpw87dbxoy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-cancel[b-qpw87dbxoy] {
    background: var(--acv-white);
    color: var(--gray-600);
    border: 2px solid var(--gray-300);
}

.btn-cancel:hover[b-qpw87dbxoy] {
    background: var(--gray-100);
    color: var(--gray-700);
    border-color: var(--gray-400);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-submit[b-qpw87dbxoy] {
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
    border: 2px solid var(--acv-primary);
}

.btn-submit:hover:not(:disabled)[b-qpw87dbxoy] {
    background: linear-gradient(135deg, var(--acv-primary-700) 0%, var(--acv-primary-800) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(33, 76, 166, 0.3);
}

.btn-submit:disabled[b-qpw87dbxoy] {
    background: var(--gray-400);
    color: var(--gray-200);
    border-color: var(--gray-400);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Loading Animation */
@keyframes spin-b-qpw87dbxoy {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.fa-spin[b-qpw87dbxoy] {
    animation: spin-b-qpw87dbxoy 1s linear infinite;
}

/* Responsive Design */
@media (max-width: 768px) {
    .create-tag-page[b-qpw87dbxoy] {
        padding: 0.5rem 1rem;
    }

    .card-header-content[b-qpw87dbxoy] {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .card-header-icon[b-qpw87dbxoy] {
        width: 48px;
        height: 48px;
        font-size: 1.3rem;
    }

    .card-header-text h1[b-qpw87dbxoy] {
        font-size: 1.4rem;
    }

    .form-container[b-qpw87dbxoy] {
        max-width: 100%;
    }

    .form-card[b-qpw87dbxoy] {
        margin: 0;
    }

    .form-body[b-qpw87dbxoy] {
        padding: 1.5rem;
    }

    .form-actions[b-qpw87dbxoy] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .btn-cancel[b-qpw87dbxoy],
    .btn-submit[b-qpw87dbxoy] {
        width: 100%;
    }

    .error-alert[b-qpw87dbxoy] {
        padding: 0.75rem 1rem;
    }

    .error-alert-content[b-qpw87dbxoy] {
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {
    .card-header-section[b-qpw87dbxoy] {
        padding: 1.5rem;
    }

    .form-header[b-qpw87dbxoy] {
        padding: 1.25rem 1.5rem;
    }

    .form-body[b-qpw87dbxoy] {
        padding: 1rem;
    }

    .form-title[b-qpw87dbxoy] {
        font-size: 1.25rem;
    }
}
/* _content/ltia.portal.web/Components/Exams/Admin/Pages/Tags/Edit.razor.rz.scp.css */
/* CSS Variables - T??ng t? nh? Create page */
.edit-tag-page[b-uejqofr26e] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    
    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Label style t??ng t? Create */
label[b-uejqofr26e] {
    color: var(--gray-700);
    margin: 0;
}

/* Card Header Section - T??ng t? Create nh?ng d�ng warning color cho Edit */
.card-header-section[b-uejqofr26e] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.card-header-content[b-uejqofr26e] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.card-header-icon[b-uejqofr26e] {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.75rem;
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.25);
    flex-shrink: 0;
}

.card-header-text[b-uejqofr26e] {
    flex: 1;
}

.card-header-text h1[b-uejqofr26e] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
}

.card-header-text p[b-uejqofr26e] {
    font-size: 1rem;
    color: var(--gray-600);
    margin: 0;
    line-height: 1.5;
}

/* Form Container */
.form-container[b-uejqofr26e] {
    margin-bottom: 2rem;
}

.form-card[b-uejqofr26e] {
    background: var(--acv-white);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--gray-200);
    overflow: visible;
    position: relative;
    z-index: 15;
    margin-bottom: 1.5rem;
}

/* Form Header - T??ng t? Create nh?ng d�ng warning color */
.form-header[b-uejqofr26e] {
    background: var(--acv-white) !important;
    padding: 1.75rem 2rem;
    border-bottom: 1px solid var(--gray-200);
    border-radius: 16px 16px 0 0;
    position: relative;
    z-index: 100;
    overflow: visible;
}


.form-header-content[b-uejqofr26e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0;
}

.form-title-section[b-uejqofr26e] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-title[b-uejqofr26e] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.form-title i[b-uejqofr26e] {
    color: var(--acv-primary);
    font-size: 1.25rem;
}

.form-subtitle[b-uejqofr26e] {
    color: var(--gray-600);
    font-size: 0.9rem;
    margin: 0;
    font-weight: 400;
}

/* Form Container */
.create-form-container[b-uejqofr26e] {
    padding: 2rem;
}

.create-form[b-uejqofr26e] {
    max-width: 100%;
}


/* Error Alert - Same as Create */
.error-alert[b-uejqofr26e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--error-lighter);
    border: 1px solid var(--error-light);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    animation: slideIn-b-uejqofr26e 0.3s ease-out;
}

@keyframes slideIn-b-uejqofr26e {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.error-alert-content[b-uejqofr26e] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--error-dark);
    font-weight: 500;
    flex: 1;
}

.error-alert-content i[b-uejqofr26e] {
    color: var(--error-main);
    font-size: 1.1rem;
}

.error-alert-close[b-uejqofr26e] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--error-main);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.error-alert-close:hover[b-uejqofr26e] {
    background: var(--error-main);
    color: var(--acv-white);
}


/* Form Groups */
.form-group[b-uejqofr26e] {
    margin-bottom: 1.5rem;
}

.form-label[b-uejqofr26e] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-700);
    margin: 0;
}

.form-label i[b-uejqofr26e] {
    color: var(--acv-primary);
    font-size: 0.8rem;
}

.required[b-uejqofr26e] {
    color: var(--error-main);
    margin-left: 2px;
}

.form-input[b-uejqofr26e] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    background: var(--acv-white);
    transition: all 0.2s ease;
    font-family: inherit;
    box-sizing: border-box;
    height: 48px;
}

.form-input:focus[b-uejqofr26e] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.form-input:invalid[b-uejqofr26e] {
    border-color: var(--error-main);
}

.form-text[b-uejqofr26e] {
    font-size: 0.85rem;
    color: var(--gray-600);
    margin-top: 0.25rem;
}

/* Loading State */
.loading-state[b-uejqofr26e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    color: var(--gray-600);
}

.loading-icon[b-uejqofr26e] {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--acv-primary);
}

.loading-state h3[b-uejqofr26e] {
    margin: 0.5rem 0;
    color: var(--gray-700);
    font-size: 1.25rem;
    font-weight: 600;
}

.loading-state p[b-uejqofr26e] {
    margin: 0;
    color: var(--gray-600);
}

/* Error State */
.error-state[b-uejqofr26e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    color: var(--gray-600);
}

.error-icon[b-uejqofr26e] {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--error-main);
}

.error-state h3[b-uejqofr26e] {
    margin: 0.5rem 0;
    color: var(--gray-700);
    font-size: 1.25rem;
    font-weight: 600;
}

.error-state p[b-uejqofr26e] {
    margin: 0 0 2rem 0;
    color: var(--gray-600);
}

.error-actions[b-uejqofr26e] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Validation */
.validation-message[b-uejqofr26e] {
    color: var(--error-main);
    font-size: 0.85rem;
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.validation-message[b-uejqofr26e]::before {
    content: "?";
}

.validation-summary[b-uejqofr26e] {
    background: var(--error-lighter);
    border: 1px solid var(--error-light);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    color: var(--error-dark);
}

.validation-summary ul[b-uejqofr26e] {
    margin: 0;
    padding-left: 1.5rem;
}

/* Form Actions */
.form-actions[b-uejqofr26e] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 0;
    padding-top: 0;
    flex-wrap: wrap;
    border-top: 1px solid var(--gray-200);
    padding-top: 1.5rem;
    margin-top: 2rem;
}

.btn-primary[b-uejqofr26e],
.btn-secondary[b-uejqofr26e] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    min-width: 160px;
    justify-content: center;
}

.btn-primary[b-uejqofr26e] {
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.15);
}

.btn-primary:hover:not(:disabled)[b-uejqofr26e] {
    background: linear-gradient(135deg, var(--acv-primary-700) 0%, var(--acv-primary-800) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.25);
    text-decoration: none;
    color: var(--acv-white);
}

.btn-primary:disabled[b-uejqofr26e] {
    background: #9ca3af;
    border-color: #9ca3af;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    opacity: 0.6;
}

.btn-secondary[b-uejqofr26e] {
    background: var(--acv-white);
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.btn-secondary:hover[b-uejqofr26e] {
    background: var(--gray-50);
    color: var(--gray-800);
    border-color: var(--gray-400);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    text-decoration: none;
}

.btn-danger[b-uejqofr26e] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    min-width: 160px;
    justify-content: center;
    background: linear-gradient(135deg, var(--error-main) 0%, var(--error-dark) 100%);
    color: var(--acv-white);
    box-shadow: 0 2px 8px rgba(255, 86, 48, 0.25);
}

.btn-danger:hover[b-uejqofr26e] {
    background: linear-gradient(135deg, var(--error-dark) 0%, #c62828 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 86, 48, 0.35);
    text-decoration: none;
    color: var(--acv-white);
}

/* Loading Animation */
@keyframes spin-b-uejqofr26e {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.fa-spin[b-uejqofr26e] {
    animation: spin-b-uejqofr26e 1s linear infinite;
}

/* Responsive Design */
@media (max-width: 768px) {
    .edit-tag-page[b-uejqofr26e] {
        padding: 0.5rem 1rem;
    }

    .card-header-content[b-uejqofr26e] {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .card-header-icon[b-uejqofr26e] {
        width: 48px;
        height: 48px;
        font-size: 1.3rem;
    }

    .card-header-text h1[b-uejqofr26e] {
        font-size: 1.4rem;
    }

    .form-container[b-uejqofr26e] {
        max-width: 100%;
    }

    .form-card[b-uejqofr26e] {
        margin: 0;
    }

    .form-body[b-uejqofr26e] {
        padding: 1.5rem;
    }

    .form-actions[b-uejqofr26e] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .btn-cancel[b-uejqofr26e],
    .btn-submit[b-uejqofr26e] {
        width: 100%;
    }

    .error-alert[b-uejqofr26e] {
        padding: 0.75rem 1rem;
    }

    .error-alert-content[b-uejqofr26e] {
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {
    .card-header-section[b-uejqofr26e] {
        padding: 1.5rem;
    }

    .form-header[b-uejqofr26e] {
        padding: 1.25rem 1.5rem;
    }

    .form-body[b-uejqofr26e] {
        padding: 1rem;
    }

    .form-title[b-uejqofr26e] {
        font-size: 1.25rem;
    }
}
/* _content/ltia.portal.web/Components/Exams/Admin/Pages/Tags/Index.razor.rz.scp.css */
.tags-page[b-i7fwb5impz] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    
    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Tags Page Styles - Based on MVC Design System */
label[b-i7fwb5impz] {
    color: var(--gray-700);
    margin: 0;
}

/* Card Header Section */
.card-header-section[b-i7fwb5impz] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.card-header-content[b-i7fwb5impz] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.card-header-icon[b-i7fwb5impz] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
}

.card-header-text h1[b-i7fwb5impz] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-800);
}

.card-header-text p[b-i7fwb5impz] {
    margin: 0.25rem 0 0 0;
    color: var(--gray-600);
    font-size: 1rem;
}

/* Search Section */
.tags-search-section[b-i7fwb5impz] {
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    margin-bottom: 2rem;
    overflow: visible;
    position: relative;
    z-index: 100;
}

.search-container[b-i7fwb5impz] {
    padding: 2rem;
}

.search-header[b-i7fwb5impz] {
    margin-bottom: 1.5rem;
    text-align: center;
}

.search-title[b-i7fwb5impz] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 0.5rem 0;
}

.search-title i[b-i7fwb5impz] {
    color: var(--acv-primary);
    font-size: 1.3rem;
}

.search-subtitle[b-i7fwb5impz] {
    color: var(--gray-600);
    font-size: 1rem;
    margin: 0;
    font-weight: 400;
}

.search-content[b-i7fwb5impz] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.search-main-row[b-i7fwb5impz] {
    display: flex;
    gap: 1.5rem;
    align-items: flex-end;
    flex-wrap: wrap;
    position: relative;
    z-index: 20;
    justify-content: center;
    width: 60%;
    margin: 0 auto;
}

.search-input-group[b-i7fwb5impz] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-width: 300px;
    position: relative;
    z-index: 20;
}

.form-label[b-i7fwb5impz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-700);
    margin: 0;
}

.form-label i[b-i7fwb5impz] {
    color: var(--acv-primary);
    font-size: 0.8rem;
}

.form-input[b-i7fwb5impz] {
    width: 100%;
    height: 48px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--acv-white);
    box-sizing: border-box;
}

.form-input:focus[b-i7fwb5impz] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.search-controls[b-i7fwb5impz] {
    display: flex;
    gap: 0.75rem;
    align-items: end;
    position: relative;
    z-index: 20;
    flex-shrink: 0;
    min-width: 120px;
    flex: 0 0 120px;
}

.search-btn[b-i7fwb5impz], .clear-btn[b-i7fwb5impz] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border: none;
    padding: 0.75rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 20;
    width: 48px;
    height: 48px;
    box-sizing: border-box;
}

.search-btn:hover[b-i7fwb5impz] {
    background: var(--acv-primary-700);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

.clear-btn[b-i7fwb5impz] {
    background: var(--gray-500);
}

.clear-btn:hover[b-i7fwb5impz] {
    background: var(--gray-600);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Tags List Container */
.tags-list-container[b-i7fwb5impz] {
    background: var(--acv-white, #ffffff);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200, #e5e7eb);
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
    overflow: hidden;
}

/* Tags List */
.tags-list[b-i7fwb5impz] {
    padding: 1.5rem;
    min-height: 200px;
}

/* Tags Table Styling */
.tags-table-container[b-i7fwb5impz] {
    overflow-x: auto;
    border-radius: 12px;
}

.tags-table[b-i7fwb5impz] {
    width: 100%;
    border-collapse: collapse;
    background: var(--acv-white, #ffffff);
    border-radius: 12px;
    overflow: hidden;
}

/* Table Header */
.table-header-row[b-i7fwb5impz] {
    background: var(--gray-50, #f9fafb);
    border-bottom: 2px solid var(--gray-200, #e5e7eb);
}

.table-header-row th[b-i7fwb5impz] {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--gray-700, #374151);
    font-size: 0.9rem;
    border-bottom: 2px solid var(--gray-200, #e5e7eb);
    position: relative;
}

/* Column Widths */
.col-stt[b-i7fwb5impz] {
    width: 60px;
    text-align: center !important;
}

.col-name[b-i7fwb5impz] {
    width: auto;
    min-width: 200px;
}

.col-slug[b-i7fwb5impz] {
    width: 200px;
}

.col-id[b-i7fwb5impz] {
    width: 100px;
    text-align: center !important;
}

.col-actions[b-i7fwb5impz] {
    width: 180px;
    text-align: center !important;
}

/* Table Body */
.table-row[b-i7fwb5impz] {
    border-bottom: 1px solid var(--gray-200, #e5e7eb);
    transition: all 0.2s ease;
}

.table-row:hover[b-i7fwb5impz] {
    background: var(--gray-50, #f9fafb);
}

.table-row:last-child[b-i7fwb5impz] {
    border-bottom: none;
}

.table-row td[b-i7fwb5impz] {
    padding: 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--gray-200, #e5e7eb);
}

/* STT Column */
.stt-number[b-i7fwb5impz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--gray-100, #f3f4f6);
    color: var(--gray-600, #4b5563);
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Tag Name Column */
.tag-name-cell[b-i7fwb5impz] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.tag-icon[b-i7fwb5impz] {
    color: var(--acv-primary, #214ca6);
    font-size: 1rem;
    width: 20px;
    text-align: center;
}

.tag-name-text[b-i7fwb5impz] {
    font-weight: 500;
    color: var(--gray-800, #1f2937);
    font-size: 0.95rem;
    line-height: 1.4;
}

/* Slug Column */
.tag-slug[b-i7fwb5impz] {
    color: var(--gray-600, #4b5563);
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    background: var(--gray-100, #f3f4f6);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    display: inline-block;
}

/* ID Column */
.tag-id[b-i7fwb5impz] {
    color: var(--gray-600, #4b5563);
    font-weight: 600;
    font-size: 0.9rem;
}

/* Action Buttons */
.action-buttons[b-i7fwb5impz] {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    align-items: center;
}

.action-btn-table[b-i7fwb5impz] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 36px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    text-decoration: none;
}

.action-btn-table.edit[b-i7fwb5impz] {
    background: linear-gradient(135deg, var(--warning-lighter, #fff3e0) 0%, rgba(255, 171, 0, 0.1) 100%);
    color: var(--warning-dark, #f57c00);
    border: 1px solid var(--warning-light, #ffb74d);
}

.action-btn-table.edit:hover[b-i7fwb5impz] {
    background: linear-gradient(135deg, var(--warning-main, #ffab00) 0%, var(--warning-dark, #f57c00) 100%);
    color: var(--acv-white, #ffffff);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(255, 171, 0, 0.3);
}

.action-btn-table.delete[b-i7fwb5impz] {
    background: linear-gradient(135deg, var(--error-lighter, #ffebee) 0%, rgba(255, 86, 48, 0.1) 100%);
    color: var(--error-dark, #d32f2f);
    border: 1px solid var(--error-light, #ff7043);
}

.action-btn-table.delete:hover[b-i7fwb5impz] {
    background: linear-gradient(135deg, var(--error-main, #ff5630) 0%, var(--error-dark, #d32f2f) 100%);
    color: var(--acv-white, #ffffff);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(255, 86, 48, 0.3);
}

/* List Header Styling - Match QuestionBank/Details */
.list-header[b-i7fwb5impz] {
    background: var(--acv-white, #ffffff) !important;
    padding: 1.75rem 2rem;
    border-bottom: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 16px 16px 0 0;
    position: relative;
    z-index: 100;
    overflow: visible;
}

.list-header[b-i7fwb5impz]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--acv-primary, #214ca6) 0%, var(--acv-primary-700, #1e40af) 100%);
    border-radius: 16px 0 0 0;
}

.list-header-content[b-i7fwb5impz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0;
    flex-wrap: wrap;
}

.list-title-section[b-i7fwb5impz] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.list-title[b-i7fwb5impz] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800, #1f2937);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.list-title i[b-i7fwb5impz] {
    color: var(--acv-primary, #214ca6);
    font-size: 1.25rem;
}

.list-count[b-i7fwb5impz] {
    background: var(--acv-primary, #214ca6);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Sort Controls - Match QuestionBank/Details */
.sort-controls[b-i7fwb5impz] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.sort-dropdown-btn[b-i7fwb5impz],
.refresh-btn[b-i7fwb5impz],
.add-tag-btn[b-i7fwb5impz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--acv-white);
    color: var(--acv-primary);
    border: 2px solid var(--acv-primary);
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none;
}

.sort-dropdown-btn[b-i7fwb5impz] {
    justify-content: space-between;
}

.sort-dropdown-btn:hover[b-i7fwb5impz],
.refresh-btn:hover[b-i7fwb5impz],
.add-tag-btn:hover[b-i7fwb5impz] {
    background: var(--acv-primary);
    color: var(--acv-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
    text-decoration: none;
}

/* Sort Dropdown */
.sort-controls[b-i7fwb5impz] {
    position: relative;
    z-index: 101;
}

.sort-dropdown[b-i7fwb5impz] {
    position: relative;
    display: inline-block;
    z-index: 10000;
}

.sort-dropdown.active .sort-dropdown-btn[b-i7fwb5impz] {
    background: var(--acv-primary, #214ca6);
    color: var(--acv-white, #ffffff);
}

.sort-dropdown-btn i.rotate[b-i7fwb5impz] {
    transform: rotate(180deg);
}

/* Sort Dropdown Menu */
.sort-dropdown-menu[b-i7fwb5impz] {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    background: var(--acv-white, #ffffff);
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    padding: 0.5rem;
    z-index: 10001;
    min-width: 200px;
    animation: dropdownFadeIn-b-i7fwb5impz 0.2s ease-out;
}

@keyframes dropdownFadeIn-b-i7fwb5impz {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sort-option[b-i7fwb5impz] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.875rem 1rem;
    background: var(--acv-white, #ffffff);
    border: none;
    color: var(--acv-primary, #214ca6);
    font-size: 0.875rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    border-bottom: 1px solid var(--gray-100, #f3f4f6);
}

.sort-option:last-child[b-i7fwb5impz] {
    border-bottom: none;
}

.sort-option:hover[b-i7fwb5impz] {
    background: var(--acv-primary-50, rgba(33, 76, 166, 0.05));
    color: var(--acv-primary, #214ca6);
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.1);
}

.sort-option.active[b-i7fwb5impz] {
    background: var(--acv-primary-50, rgba(33, 76, 166, 0.05));
    color: var(--acv-primary, #214ca6);
    font-weight: 600;
}

.sort-option i[b-i7fwb5impz] {
    color: var(--acv-primary, #214ca6);
    font-size: 0.9rem;
    width: 16px;
    text-align: center;
}

.sort-option span[b-i7fwb5impz] {
    flex: 1;
}

.sort-option .check-icon[b-i7fwb5impz] {
    color: var(--acv-primary, #214ca6);
    font-size: 0.8rem;
    margin-left: auto;
}

.sort-divider[b-i7fwb5impz] {
    height: 1px;
    background: var(--gray-200, #e5e7eb);
    margin: 0.5rem 0;
}

/* Table Footer Styling - Match QuestionBank/Details */
.table-footer[b-i7fwb5impz] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--acv-white, #ffffff);
    border-top: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 0 0 16px 16px;
    gap: 2rem;
    flex-wrap: wrap;
}

.results-info[b-i7fwb5impz] {
    font-size: 0.9rem;
    color: var(--gray-600, #4b5563);
    font-weight: 500;
}

.pagination-container[b-i7fwb5impz] {
    display: flex;
    align-items: center;
}

.pagination-nav[b-i7fwb5impz] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagination-btn[b-i7fwb5impz] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.75rem;
    border: 1px solid var(--gray-300, #d1d5db);
    border-radius: 6px;
    background: var(--acv-white, #ffffff);
    color: var(--gray-600, #4b5563);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s ease;
    cursor: pointer;
}

.pagination-btn:hover:not(:disabled)[b-i7fwb5impz] {
    background: var(--acv-primary, #214ca6);
    color: var(--acv-white, #ffffff);
    border-color: var(--acv-primary, #214ca6);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.15);
}

.pagination-btn.active[b-i7fwb5impz] {
    background: var(--acv-primary, #214ca6);
    color: var(--acv-white, #ffffff);
    border-color: var(--acv-primary, #214ca6);
    font-weight: 600;
    font-size: 0.9rem;
    min-width: 40px;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
    cursor: default;
}

.pagination-btn.active:hover[b-i7fwb5impz] {
    background: var(--acv-primary, #214ca6);
    color: var(--acv-white, #ffffff);
    transform: none;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
}

.pagination-btn:disabled[b-i7fwb5impz] {
    background: var(--gray-100, #f3f4f6);
    border-color: var(--gray-200, #e5e7eb);
    color: var(--gray-400, #9ca3af);
    cursor: not-allowed;
}

/* Empty State Styling */
.empty-state[b-i7fwb5impz] {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--gray-600, #4b5563);
}

.empty-state-icon[b-i7fwb5impz] {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--gray-400, #9ca3af);
}

.empty-state-icon i.fa-spin[b-i7fwb5impz] {
    color: var(--acv-primary, #214ca6);
}

.empty-state h3[b-i7fwb5impz] {
    margin-bottom: 0.5rem;
    color: var(--gray-700, #374151);
    font-size: 1.25rem;
    font-weight: 600;
}

.empty-state p[b-i7fwb5impz] {
    margin-bottom: 2rem;
    color: var(--gray-600, #4b5563);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.empty-state-actions[b-i7fwb5impz] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-primary[b-i7fwb5impz] {
    background: var(--acv-primary, #214ca6);
    color: var(--acv-white, #ffffff);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(33, 76, 166, 0.2);
}

.btn-primary:hover[b-i7fwb5impz] {
    background: var(--acv-primary-700, #1e40af);
    color: var(--acv-white, #ffffff);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
    /* List Header Responsive */
    .list-header[b-i7fwb5impz] {
        padding: 1.25rem 1.5rem;
    }
    
    .list-header-content[b-i7fwb5impz] {
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
    }
    
    .list-title-section[b-i7fwb5impz] {
        justify-content: space-between;
    }
    
    .list-title[b-i7fwb5impz] {
        font-size: 1.25rem;
    }
    
    /* Sort Controls Responsive */
    .sort-controls[b-i7fwb5impz] {
        gap: 0.5rem;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    
    .sort-dropdown-btn[b-i7fwb5impz],
    .refresh-btn[b-i7fwb5impz],
    .add-tag-btn[b-i7fwb5impz] {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
        min-width: 100px;
    }
    
    .sort-dropdown-menu[b-i7fwb5impz] {
        min-width: 180px;
    }
    
    .sort-option[b-i7fwb5impz] {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }
    
    /* Table Responsive */
    .tags-table-container[b-i7fwb5impz] {
        margin: 0 -1.5rem;
        border-radius: 0;
    }
    
    .tags-table[b-i7fwb5impz] {
        min-width: 600px;
    }
    
    .table-header-row th[b-i7fwb5impz],
    .table-row td[b-i7fwb5impz] {
        padding: 0.75rem 0.5rem;
    }
    
    .col-name[b-i7fwb5impz] {
        min-width: 150px;
    }
    
    .col-slug[b-i7fwb5impz] {
        width: 150px;
    }
    
    .col-id[b-i7fwb5impz] {
        width: 80px;
    }
    
    .col-actions[b-i7fwb5impz] {
        width: 140px;
    }
    
    .stt-number[b-i7fwb5impz] {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }
    
    .action-btn-table[b-i7fwb5impz] {
        width: 40px;
        height: 28px;
        font-size: 0.8rem;
    }
    
    .tag-name-cell[b-i7fwb5impz] {
        gap: 0.5rem;
    }
    
    .tag-name-text[b-i7fwb5impz] {
        font-size: 0.9rem;
    }
    
    /* Table Footer Responsive */
    .table-footer[b-i7fwb5impz] {
        padding: 1rem;
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        text-align: center;
    }
    
    .results-info[b-i7fwb5impz] {
        font-size: 0.8rem;
    }
    
    .pagination-container[b-i7fwb5impz] {
        justify-content: center;
    }
    
    .pagination-btn[b-i7fwb5impz] {
        min-width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .table-header-row th[b-i7fwb5impz],
    .table-row td[b-i7fwb5impz] {
        padding: 0.5rem 0.25rem;
    }
    
    .tag-slug[b-i7fwb5impz] {
        font-size: 0.8rem;
        padding: 0.2rem 0.4rem;
    }
    
    .action-buttons[b-i7fwb5impz] {
        gap: 0.125rem;
    }
    
    .action-btn-table[b-i7fwb5impz] {
        width: 36px;
        height: 26px;
        font-size: 0.75rem;
    }
    
    /* Mobile List Header */
    .list-header[b-i7fwb5impz] {
        padding: 1rem;
    }
    
    .list-title[b-i7fwb5impz] {
        font-size: 1.1rem;
    }
    
    .list-count[b-i7fwb5impz] {
        padding: 0.2rem 0.6rem;
        font-size: 0.75rem;
    }
    
    /* Mobile Sort Controls */
    .sort-controls[b-i7fwb5impz] {
        width: 100%;
        justify-content: space-between;
    }
    
    .sort-dropdown[b-i7fwb5impz] {
        flex: 1;
    }
    
    .sort-dropdown-btn[b-i7fwb5impz] {
        width: 100%;
        min-width: auto;
    }
    
    .refresh-btn[b-i7fwb5impz],
    .add-tag-btn[b-i7fwb5impz] {
        flex-shrink: 0;
        min-width: 80px;
    }
    
    /* Mobile Pagination */
    .pagination-btn[b-i7fwb5impz] {
        min-width: 28px;
        height: 28px;
        font-size: 0.75rem;
        padding: 0 0.5rem;
    }
}
/* _content/ltia.portal.web/Components/Exams/Commons/ExamReviewModal.razor.rz.scp.css */
/* Import CSS variables from root.css */
:root[b-upj9gzkigv] {
    --font-family-sans: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --acv-primary: #2563eb;
    --acv-primary-700: #1d4ed8;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --acv-white: #ffffff;
    --success-main: #10b981;
    --success-light: #34d399;
    --success-dark: #059669;
    --warning-main: #f59e0b;
    --warning-light: #fbbf24;
    --warning-dark: #d97706;
    --error-main: #ef4444;
    --error-light: #f87171;
    --error-dark: #dc2626;
}

/* Modal Overlay */
.modal-overlay[b-upj9gzkigv] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
}

.modal-overlay.show[b-upj9gzkigv] {
    opacity: 1;
    visibility: visible;
}

/* Modal Container */
.modal-container[b-upj9gzkigv] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: 1px solid var(--gray-300);
    max-width: 90vw;
    max-height: 90vh;
    width: 800px;
    display: flex;
    flex-direction: column;
    transform: scale(0.9) translateY(20px);
    transition: all 0.3s ease;
}

.modal-overlay.show .modal-container[b-upj9gzkigv] {
    transform: scale(1) translateY(0);
}

/* Header Section */
.modal-header[b-upj9gzkigv] {
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
    padding: 1.5rem 2rem;
    position: relative;
    overflow: hidden;
}

.modal-header[b-upj9gzkigv]::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.modal-title-section[b-upj9gzkigv] {
    text-align: center;
    position: relative;
    z-index: 1;
    margin-bottom: 1.5rem;
}

.modal-icon[b-upj9gzkigv] {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #214ca6;
    border: 2px solid #214ca6;
    border-radius: 16px;
    font-size: 1.5rem;
    color: white;
    margin: 0 auto 1rem;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.3);
    position: relative;
}

.modal-title[b-upj9gzkigv] {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
}

.modal-subtitle[b-upj9gzkigv] {
    font-size: 1rem;
    opacity: 0.9;
    font-weight: 400;
    margin: 0;
}

.modal-header-bottom[b-upj9gzkigv] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    z-index: 1;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.timer-container[b-upj9gzkigv] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.25);
    padding: 0.875rem 1.5rem;
    border-radius: 12px;
    backdrop-filter: blur(10px);
    border: 2px solid #214ca6;
    font-family: 'Courier New', monospace;
    font-size: 1.5rem;
    font-weight: 700;
    width: fit-content;
    margin: 0 auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    letter-spacing: 0.05em;
}

.timer-container i[b-upj9gzkigv] {
    font-size: 1.125rem;
    color: #214ca6;
    opacity: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

/* Timer states */
.timer-container.timer-warning[b-upj9gzkigv] {
    border-color: #f59e0b;
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    color: #b45309;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.5) inset, 0 0 20px rgba(245, 158, 11, 0.15);
    animation: pulse-warning-b-upj9gzkigv 2s ease-in-out infinite;
}

.timer-container.timer-warning i[b-upj9gzkigv] {
    color: #f59e0b;
}

@keyframes pulse-warning-b-upj9gzkigv {
    0%, 100% { 
        transform: scale(1); 
        box-shadow: 0 4px 16px rgba(245, 158, 11, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.5) inset, 0 0 20px rgba(245, 158, 11, 0.15);
    }
    50% { 
        transform: scale(1.02); 
        box-shadow: 0 6px 24px rgba(245, 158, 11, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.5) inset, 0 0 30px rgba(245, 158, 11, 0.25);
    }
}

.timer-container.timer-critical[b-upj9gzkigv] {
    border-color: #ef4444;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    color: #b91c1c;
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.5) inset, 0 0 30px rgba(239, 68, 68, 0.25);
    animation: pulse-critical-b-upj9gzkigv 1s ease-in-out infinite;
}

.timer-container.timer-critical i[b-upj9gzkigv] {
    color: #ef4444;
}

@keyframes pulse-critical-b-upj9gzkigv {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 4px 20px rgba(239, 68, 68, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.5) inset, 0 0 30px rgba(239, 68, 68, 0.25);
    }
    50% { 
        transform: scale(1.03);
        box-shadow: 0 6px 24px rgba(239, 68, 68, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.5) inset, 0 0 40px rgba(239, 68, 68, 0.35);
    }
}

.timer-container.timer-expired[b-upj9gzkigv] {
    border-color: #9ca3af;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    color: #6b7280;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.timer-container.timer-expired i[b-upj9gzkigv] {
    color: #9ca3af;
}

/* Stats Bar */
.modal-stats-bar[b-upj9gzkigv] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}

.stat-compact[b-upj9gzkigv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.stat-compact .stat-label[b-upj9gzkigv] {
    opacity: 0.9;
}

.stat-compact .stat-value[b-upj9gzkigv] {
    font-weight: 700;
    font-size: 0.9375rem;
}

.progress-bar[b-upj9gzkigv] {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.progress-fill[b-upj9gzkigv] {
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Questions Section */
.modal-questions-section[b-upj9gzkigv] {
    padding: 1.5rem 2rem;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.section-header[b-upj9gzkigv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.section-title[b-upj9gzkigv] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0;
}

.question-legend[b-upj9gzkigv] {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.legend-item[b-upj9gzkigv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-700);
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    background: var(--gray-50);
    transition: all 0.2s ease;
}

.legend-item:hover[b-upj9gzkigv] {
    background: var(--gray-100);
    transform: translateY(-1px);
}

.legend-color[b-upj9gzkigv] {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 2px solid;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.legend-color.answered[b-upj9gzkigv] {
    background: #214ca6 !important;
    border-color: #214ca6 !important;
}

.legend-color.unanswered[b-upj9gzkigv] {
    background: #ffffff !important;
    border-color: #9ca3af !important;
}

.legend-color.marked[b-upj9gzkigv] {
    background: #f59e0b !important;
    border-color: #f59e0b !important;
    position: relative;
}

.legend-color.marked[b-upj9gzkigv]::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 6px;
    height: 6px;
    background: var(--warning-dark);
    border-radius: 50%;
    border: 1px solid var(--acv-white);
}

.questions-grid[b-upj9gzkigv] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    gap: 0.75rem;
    max-width: 100%;
}

.question-review-item[b-upj9gzkigv] {
    aspect-ratio: 1;
    background: #ffffff !important;
    border-radius: 8px;
    padding: 0;
    border: 2px solid #d1d5db !important;
    transition: all 0.2s ease;
    cursor: pointer;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #4b5563 !important;
    font-size: 0.875rem;
    font-weight: 600;
    position: relative;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.question-review-item:hover[b-upj9gzkigv] {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    z-index: 1 !important;
}

.question-review-item.answered[b-upj9gzkigv] {
    background: #214ca6 !important;
    color: #ffffff !important;
    border-color: #214ca6 !important;
}

.question-review-item.answered:hover[b-upj9gzkigv] {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
}

.question-review-item.unanswered[b-upj9gzkigv] {
    background: #ffffff !important;
    color: #4b5563 !important;
    border-color: #9ca3af !important;
    border-width: 2px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.question-review-item.unanswered:hover[b-upj9gzkigv] {
    background: #f9fafb !important;
    border-color: #214ca6 !important;
    border-width: 2px !important;
    color: #214ca6 !important;
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.2) !important;
}

.question-review-item.marked[b-upj9gzkigv] {
    background: #fef3c7 !important;
    border-color: #f59e0b !important;
    border-width: 3px !important;
    color: #92400e !important;
    position: relative;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2) !important;
}

.question-review-item.marked:hover[b-upj9gzkigv] {
    border-color: #d97706 !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
}

.question-review-item.marked[b-upj9gzkigv]::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 10px;
    height: 10px;
    background: #f59e0b !important;
    border-radius: 50%;
    border: 2px solid #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

.question-review-item.answered.marked[b-upj9gzkigv] {
    background: #214ca6 !important;
    color: #ffffff !important;
    border-color: #f59e0b !important;
}

.question-review-item.answered.marked:hover[b-upj9gzkigv] {
    background: #1d4ed8 !important;
    border-color: #d97706 !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
}

/* Small selected answers hint */
.question-review-item .small-selected[b-upj9gzkigv] {
    font-size: 0.625rem;
    font-weight: 500;
    margin-top: 0.25rem;
    opacity: 0.8;
    line-height: 1;
}

.question-review-item.answered .small-selected[b-upj9gzkigv] {
    color: rgba(255, 255, 255, 0.9);
}

.question-review-item.unanswered .small-selected[b-upj9gzkigv] {
    color: var(--gray-600);
}

/* Confirmation Section */
.modal-confirmation-section[b-upj9gzkigv] {
    padding: 1.5rem 2rem;
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
}

.confirmation-warning[b-upj9gzkigv] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.125rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    margin-bottom: 1.25rem;
    color: #78350f;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.08);
    position: relative;
}

.confirmation-warning i[b-upj9gzkigv] {
    color: #f59e0b;
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
    opacity: 0.9;
}

.confirmation-warning span[b-upj9gzkigv] {
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.6;
    flex: 1;
    color: #92400e;
}

.confirmation-checkbox[b-upj9gzkigv] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkbox-label[b-upj9gzkigv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--gray-400);
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.checkbox-label:hover[b-upj9gzkigv] {
    background: var(--gray-50);
}

.confirmation-checkbox-input[b-upj9gzkigv] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 22px;
    height: 22px;
    min-width: 22px;
    border: 2px solid #9ca3af !important;
    border-radius: 6px;
    background: #ffffff !important;
    cursor: pointer;
    position: relative;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    margin: 0;
    display: block !important;
    box-sizing: border-box !important;
}

.confirmation-checkbox-input:hover[b-upj9gzkigv] {
    border-color: #214ca6;
    background: #f0f4ff;
    transform: scale(1.05);
}

.confirmation-checkbox-input:checked[b-upj9gzkigv] {
    background: #214ca6 !important;
    border-color: #214ca6 !important;
}

.confirmation-checkbox-input:checked[b-upj9gzkigv]::after {
    content: '' !important;
    position: absolute !important;
    top: 3px !important;
    left: 7px !important;
    width: 6px !important;
    height: 10px !important;
    border: solid #ffffff !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
    display: block !important;
    z-index: 1;
    animation: checkmark-b-upj9gzkigv 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes checkmark-b-upj9gzkigv {
    0% {
        transform: rotate(45deg) scale(0);
        opacity: 0;
    }
    50% {
        transform: rotate(45deg) scale(1.2);
    }
    100% {
        transform: rotate(45deg) scale(1);
        opacity: 1;
    }
}

.confirmation-checkbox-input:focus[b-upj9gzkigv] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.confirmation-checkbox-input:focus:checked[b-upj9gzkigv] {
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.2);
}

.checkbox-text[b-upj9gzkigv] {
    line-height: 1.5;
    transition: color 0.2s ease;
}

.checkbox-label:hover .checkbox-text[b-upj9gzkigv] {
    color: var(--gray-900);
}

/* Action Section */
.modal-action-section[b-upj9gzkigv] {
    padding: 1.5rem 2rem;
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
}

.action-buttons[b-upj9gzkigv] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.action-btn[b-upj9gzkigv] {
    padding: 0.875rem 1.75rem;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    min-width: 140px;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.action-btn[b-upj9gzkigv]::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.5s;
}

.action-btn:hover[b-upj9gzkigv]::before {
    left: 100%;
}

.action-btn:hover[b-upj9gzkigv] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    text-decoration: none;
}

.action-btn.secondary[b-upj9gzkigv] {
    color: var(--gray-400) !important;
    border: 1px solid var(--gray-200) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.action-btn.secondary:hover[b-upj9gzkigv] {
    color: var(--gray-500) !important;
    border-color: var(--gray-300) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

.action-btn.secondary i[b-upj9gzkigv] {
    color: var(--gray-500) !important;
}

.action-btn.secondary:hover i[b-upj9gzkigv] {
    color: var(--gray-700) !important;
}

.action-btn.success[b-upj9gzkigv] {
    background: #214ca6 !important;
    color: #ffffff !important;
    border: 1px solid #214ca6 !important;
    box-shadow: 0 2px 4px rgba(33, 76, 166, 0.2) !important;
}

.action-btn.success:hover:not(:disabled)[b-upj9gzkigv] {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    box-shadow: 0 4px 8px rgba(33, 76, 166, 0.3) !important;
}

.action-btn.success:disabled[b-upj9gzkigv] {
    background: #6b7280 !important;
    border-color: #6b7280 !important;
    color: #ffffff !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}

.action-btn.success i[b-upj9gzkigv] {
    color: #ffffff !important;
}

.action-btn.success:disabled i[b-upj9gzkigv] {
    color: #ffffff !important;
    opacity: 1 !important;
    display: inline-block !important;
}

.action-btn:disabled[b-upj9gzkigv] {
    opacity: 1 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.action-btn:disabled:hover[b-upj9gzkigv] {
    transform: none !important;
    box-shadow: none !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .modal-container[b-upj9gzkigv] {
        width: 95vw;
        max-height: 95vh;
    }

    .modal-header[b-upj9gzkigv] {
        padding: 1.25rem;
    }

    .modal-title[b-upj9gzkigv] {
        font-size: 1.5rem;
    }

    .modal-header-bottom[b-upj9gzkigv] {
        gap: 0.75rem;
    }

    .modal-stats-bar[b-upj9gzkigv] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .progress-bar[b-upj9gzkigv] {
        width: 100%;
    }

    .modal-questions-section[b-upj9gzkigv] {
        padding: 1.25rem;
    }

    .section-header[b-upj9gzkigv] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .question-legend[b-upj9gzkigv] {
        flex-wrap: wrap;
    }

    .modal-confirmation-section[b-upj9gzkigv] {
        padding: 1.25rem;
    }

    .confirmation-warning[b-upj9gzkigv] {
        padding: 1rem;
        gap: 0.875rem;
    }

    .confirmation-warning i[b-upj9gzkigv] {
        font-size: 1.25rem;
    }

    .confirmation-warning span[b-upj9gzkigv] {
        font-size: 0.875rem;
    }

    .modal-action-section[b-upj9gzkigv] {
        padding: 1.25rem;
    }

    .action-buttons[b-upj9gzkigv] {
        flex-direction: column;
        align-items: stretch;
    }

    .action-btn[b-upj9gzkigv] {
        width: 100%;
    }
}

/* Animation */
@keyframes slideInUp-b-upj9gzkigv {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Font Awesome Icons */
.fas[b-upj9gzkigv] {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.fa-edit[b-upj9gzkigv]::before {
    content: "\f044";
}

.fa-check[b-upj9gzkigv]::before {
    content: "\f00c";
}

.fa-spinner[b-upj9gzkigv]::before {
    content: "\f110";
}

.fa-spin[b-upj9gzkigv] {
    animation: fa-spin-b-upj9gzkigv 2s infinite linear;
}

@keyframes fa-spin-b-upj9gzkigv {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* _content/ltia.portal.web/Components/Exams/Commons/PracticeReviewModal.razor.rz.scp.css */
/* Import CSS variables from root.css */
:root[b-2glh9oww6x] {
    --font-family-sans: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --acv-primary: #2563eb;
    --acv-primary-700: #1d4ed8;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --acv-white: #ffffff;
    --success-main: #10b981;
    --success-light: #34d399;
    --success-dark: #059669;
    --warning-main: #f59e0b;
    --warning-light: #fbbf24;
    --warning-dark: #d97706;
    --error-main: #ef4444;
    --error-light: #f87171;
    --error-dark: #dc2626;
}

/* Modal Overlay */
.modal-overlay[b-2glh9oww6x] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
}

.modal-overlay.show[b-2glh9oww6x] {
    opacity: 1;
    visibility: visible;
}

/* Modal Container */
.modal-container[b-2glh9oww6x] {
/*    background: var(--acv-white);*/
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: 1px solid var(--gray-300);
    max-width: 90vw;
    max-height: 90vh;
    width: 800px;
    display: flex;
    flex-direction: column;
    transform: scale(0.9) translateY(20px);
    transition: all 0.3s ease;
}

.modal-overlay.show .modal-container[b-2glh9oww6x] {
    transform: scale(1) translateY(0);
}

/* Header Section */
.modal-header[b-2glh9oww6x] {
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
    padding: 1.5rem 2rem;
    position: relative;
    overflow: hidden;
}

.modal-header[b-2glh9oww6x]::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.modal-title-section[b-2glh9oww6x] {
    text-align: center;
    position: relative;
    z-index: 1;
    margin-bottom: 1.5rem;
}

.modal-icon[b-2glh9oww6x] {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #214ca6;
    border: 2px solid #214ca6;
    border-radius: 16px;
    font-size: 1.5rem;
    color: white;
    margin: 0 auto 1rem;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.3);
    position: relative;
}

.modal-title[b-2glh9oww6x] {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
}

.modal-subtitle[b-2glh9oww6x] {
    font-size: 1rem;
    opacity: 0.9;
    font-weight: 400;
    margin: 0;
}

.modal-header-bottom[b-2glh9oww6x] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    z-index: 1;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.timer-container[b-2glh9oww6x] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.25);
    padding: 0.875rem 1.5rem;
    border-radius: 12px;
    backdrop-filter: blur(10px);
    border: 2px solid #214ca6;
    font-family: 'Courier New', monospace;
    font-size: 1.5rem;
    font-weight: 700;
    width: fit-content;
    margin: 0 auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    letter-spacing: 0.05em;
}

.timer-container i[b-2glh9oww6x] {
    font-size: 1.125rem;
    color: #214ca6;
    opacity: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

/* Timer states */
.timer-container.timer-warning[b-2glh9oww6x] {
    border-color: #f59e0b;
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    color: #b45309;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.5) inset, 0 0 20px rgba(245, 158, 11, 0.15);
    animation: pulse-warning-b-2glh9oww6x 2s ease-in-out infinite;
}

.timer-container.timer-warning i[b-2glh9oww6x] {
    color: #f59e0b;
}

@keyframes pulse-warning-b-2glh9oww6x {
    0%, 100% { 
        transform: scale(1); 
        box-shadow: 0 4px 16px rgba(245, 158, 11, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.5) inset, 0 0 20px rgba(245, 158, 11, 0.15);
    }
    50% { 
        transform: scale(1.02); 
        box-shadow: 0 6px 24px rgba(245, 158, 11, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.5) inset, 0 0 30px rgba(245, 158, 11, 0.25);
    }
}

.timer-container.timer-critical[b-2glh9oww6x] {
    border-color: #ef4444;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    color: #b91c1c;
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.5) inset, 0 0 30px rgba(239, 68, 68, 0.25);
    animation: pulse-critical-b-2glh9oww6x 1s ease-in-out infinite;
}

.timer-container.timer-critical i[b-2glh9oww6x] {
    color: #ef4444;
}

@keyframes pulse-critical-b-2glh9oww6x {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 4px 20px rgba(239, 68, 68, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.5) inset, 0 0 30px rgba(239, 68, 68, 0.25);
    }
    50% { 
        transform: scale(1.03);
        box-shadow: 0 6px 24px rgba(239, 68, 68, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.5) inset, 0 0 40px rgba(239, 68, 68, 0.35);
    }
}

.timer-container.timer-expired[b-2glh9oww6x] {
    border-color: #9ca3af;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    color: #6b7280;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.timer-container.timer-expired i[b-2glh9oww6x] {
    color: #9ca3af;
}

/* Stats Bar */
.modal-stats-bar[b-2glh9oww6x] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}

.stat-compact[b-2glh9oww6x] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.stat-compact .stat-label[b-2glh9oww6x] {
    opacity: 0.9;
}

.stat-compact .stat-value[b-2glh9oww6x] {
    font-weight: 700;
    font-size: 0.9375rem;
}

.progress-bar[b-2glh9oww6x] {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.progress-fill[b-2glh9oww6x] {
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Questions Section */
.modal-questions-section[b-2glh9oww6x] {
    padding: 1.5rem 2rem;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.section-header[b-2glh9oww6x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.section-title[b-2glh9oww6x] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0;
}

.question-legend[b-2glh9oww6x] {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.legend-item[b-2glh9oww6x] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-700);
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    background: var(--gray-50);
    transition: all 0.2s ease;
}

.legend-item:hover[b-2glh9oww6x] {
    background: var(--gray-100);
    transform: translateY(-1px);
}

.legend-color[b-2glh9oww6x] {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 2px solid;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.legend-color.answered[b-2glh9oww6x] {
    background: #214ca6 !important;
    border-color: #214ca6 !important;
}

.legend-color.unanswered[b-2glh9oww6x] {
    background: #ffffff !important;
    border-color: #9ca3af !important;
}

.legend-color.marked[b-2glh9oww6x] {
    background: #f59e0b !important;
    border-color: #f59e0b !important;
    position: relative;
}

.legend-color.marked[b-2glh9oww6x]::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 6px;
    height: 6px;
    background: var(--warning-dark);
    border-radius: 50%;
    border: 1px solid var(--acv-white);
}

.questions-grid[b-2glh9oww6x] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    gap: 0.75rem;
    max-width: 100%;
}

.question-review-item[b-2glh9oww6x] {
    aspect-ratio: 1;
    background: #ffffff !important;
    border-radius: 8px;
    padding: 0;
    border: 2px solid #d1d5db !important;
    transition: all 0.2s ease;
    cursor: pointer;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4b5563 !important;
    font-size: 0.875rem;
    font-weight: 600;
    position: relative;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.question-review-item:hover[b-2glh9oww6x] {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    z-index: 1 !important;
}

.question-review-item.answered[b-2glh9oww6x] {
    background: #214ca6 !important;
    color: #ffffff !important;
    border-color: #214ca6 !important;
}

.question-review-item.answered:hover[b-2glh9oww6x] {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
}

.question-review-item.unanswered[b-2glh9oww6x] {
    background: #ffffff !important;
    color: #4b5563 !important;
    border-color: #9ca3af !important;
    border-width: 2px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.question-review-item.unanswered:hover[b-2glh9oww6x] {
    background: #f9fafb !important;
    border-color: #214ca6 !important;
    border-width: 2px !important;
    color: #214ca6 !important;
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.2) !important;
}

.question-review-item.marked[b-2glh9oww6x] {
    background: #fef3c7 !important;
    border-color: #f59e0b !important;
    border-width: 3px !important;
    color: #92400e !important;
    position: relative;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2) !important;
}

.question-review-item.marked:hover[b-2glh9oww6x] {
    border-color: #d97706 !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
}

.question-review-item.marked[b-2glh9oww6x]::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 10px;
    height: 10px;
    background: #f59e0b !important;
    border-radius: 50%;
    border: 2px solid #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

.question-review-item.answered.marked[b-2glh9oww6x] {
    background: #214ca6 !important;
    color: #ffffff !important;
    border-color: #f59e0b !important;
}

.question-review-item.answered.marked:hover[b-2glh9oww6x] {
    background: #1d4ed8 !important;
    border-color: #d97706 !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
}

/* Confirmation Section */
.modal-confirmation-section[b-2glh9oww6x] {
    padding: 1.5rem 2rem;
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
}

.confirmation-warning[b-2glh9oww6x] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.125rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    margin-bottom: 1.25rem;
    color: #78350f;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.08);
    position: relative;
}

.confirmation-warning i[b-2glh9oww6x] {
    color: #f59e0b;
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
    opacity: 0.9;
}

.confirmation-warning span[b-2glh9oww6x] {
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.6;
    flex: 1;
    color: #92400e;
}

.confirmation-checkbox[b-2glh9oww6x] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkbox-label[b-2glh9oww6x] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--gray-400);
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.checkbox-label:hover[b-2glh9oww6x] {
    background: var(--gray-50);
}

.confirmation-checkbox-input[b-2glh9oww6x] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 22px;
    height: 22px;
    min-width: 22px;
    border: 2px solid #9ca3af !important;
    border-radius: 6px;
    background: #ffffff !important;
    cursor: pointer;
    position: relative;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    margin: 0;
    display: block !important;
    box-sizing: border-box !important;
}

.confirmation-checkbox-input:hover[b-2glh9oww6x] {
    border-color: #214ca6;
    background: #f0f4ff;
    transform: scale(1.05);
}

.confirmation-checkbox-input:checked[b-2glh9oww6x] {
    background: #214ca6 !important;
    border-color: #214ca6 !important;
}

.confirmation-checkbox-input:checked[b-2glh9oww6x]::after {
    content: '' !important;
    position: absolute !important;
    top: 3px !important;
    left: 7px !important;
    width: 6px !important;
    height: 10px !important;
    border: solid #ffffff !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
    display: block !important;
    z-index: 1;
    animation: checkmark-b-2glh9oww6x 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes checkmark-b-2glh9oww6x {
    0% {
        transform: rotate(45deg) scale(0);
        opacity: 0;
    }
    50% {
        transform: rotate(45deg) scale(1.2);
    }
    100% {
        transform: rotate(45deg) scale(1);
        opacity: 1;
    }
}

.confirmation-checkbox-input:focus[b-2glh9oww6x] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.confirmation-checkbox-input:focus:checked[b-2glh9oww6x] {
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.2);
}

.checkbox-text[b-2glh9oww6x] {
    line-height: 1.5;
    transition: color 0.2s ease;
}

.checkbox-label:hover .checkbox-text[b-2glh9oww6x] {
    color: var(--gray-900);
}

/* Action Section */
.modal-action-section[b-2glh9oww6x] {
    padding: 1.5rem 2rem;
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
}

.action-buttons[b-2glh9oww6x] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.action-btn[b-2glh9oww6x] {
    padding: 0.875rem 1.75rem;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    min-width: 140px;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.action-btn[b-2glh9oww6x]::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.5s;
}

.action-btn:hover[b-2glh9oww6x]::before {
    left: 100%;
}

.action-btn:hover[b-2glh9oww6x] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    text-decoration: none;
}

.action-btn.secondary[b-2glh9oww6x] {
    color: var(--gray-400) !important;
    border: 1px solid var(--gray-200) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.action-btn.secondary:hover[b-2glh9oww6x] {
    color: var(--gray-500) !important;
    border-color: var(--gray-300) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

.action-btn.secondary i[b-2glh9oww6x] {
    color: var(--gray-500) !important;
}

.action-btn.secondary:hover i[b-2glh9oww6x] {
    color: var(--gray-700) !important;
}

.action-btn.success[b-2glh9oww6x] {
    background: #214ca6 !important;
    color: #ffffff !important;
    border: 1px solid #214ca6 !important;
    box-shadow: 0 2px 4px rgba(33, 76, 166, 0.2) !important;
}

.action-btn.success:hover:not(:disabled)[b-2glh9oww6x] {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    box-shadow: 0 4px 8px rgba(33, 76, 166, 0.3) !important;
}

.action-btn.success:disabled[b-2glh9oww6x] {
    background: #6b7280 !important;
    border-color: #6b7280 !important;
    color: #ffffff !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}

.action-btn.success i[b-2glh9oww6x] {
    color: #ffffff !important;
}

.action-btn.success:disabled i[b-2glh9oww6x] {
    color: #ffffff !important;
    opacity: 1 !important;
    display: inline-block !important;
}

.action-btn:disabled[b-2glh9oww6x] {
    opacity: 1 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.action-btn:disabled:hover[b-2glh9oww6x] {
    transform: none !important;
    box-shadow: none !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .modal-container[b-2glh9oww6x] {
        width: 95vw;
        max-height: 95vh;
    }

    .modal-header[b-2glh9oww6x] {
        padding: 1.25rem;
    }

    .modal-title[b-2glh9oww6x] {
        font-size: 1.5rem;
    }

    .modal-subtitle[b-2glh9oww6x] {
        font-size: 0.9375rem;
    }

    .modal-header-bottom[b-2glh9oww6x] {
        gap: 0.75rem;
    }

    .modal-stats-bar[b-2glh9oww6x] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .progress-bar[b-2glh9oww6x] {
        width: 100%;
    }

    .modal-questions-section[b-2glh9oww6x] {
        padding: 1.25rem;
    }

    .section-header[b-2glh9oww6x] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .question-legend[b-2glh9oww6x] {
        flex-wrap: wrap;
    }

    .modal-confirmation-section[b-2glh9oww6x] {
        padding: 1.25rem;
    }

    .confirmation-warning[b-2glh9oww6x] {
        padding: 1rem;
        gap: 0.875rem;
    }

    .confirmation-warning i[b-2glh9oww6x] {
        font-size: 1.25rem;
    }

    .confirmation-warning span[b-2glh9oww6x] {
        font-size: 0.875rem;
    }

    .modal-action-section[b-2glh9oww6x] {
        padding: 1.25rem;
    }

    .action-buttons[b-2glh9oww6x] {
        flex-direction: column;
        align-items: stretch;
    }

    .action-btn[b-2glh9oww6x] {
        width: 100%;
    }
}

/* Animation */
@keyframes slideInUp-b-2glh9oww6x {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*.modal-container {
    animation: slideInUp 0.8s ease forwards;
}

.question-review-item {
    animation: slideInUp 0.6s ease forwards;
}

.question-review-item:nth-child(1) { animation-delay: 0.1s; }
.question-review-item:nth-child(2) { animation-delay: 0.2s; }
.question-review-item:nth-child(3) { animation-delay: 0.3s; }
.question-review-item:nth-child(4) { animation-delay: 0.4s; }
.question-review-item:nth-child(5) { animation-delay: 0.5s; }*/

/* Font Awesome Icons */
.fas[b-2glh9oww6x] {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.fa-edit[b-2glh9oww6x]::before {
    content: "\f044";
}

.fa-check[b-2glh9oww6x]::before {
    content: "\f00c";
}

.fa-spinner[b-2glh9oww6x]::before {
    content: "\f110";
}

.fa-spin[b-2glh9oww6x] {
    animation: fa-spin-b-2glh9oww6x 2s infinite linear;
}

@keyframes fa-spin-b-2glh9oww6x {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* _content/ltia.portal.web/Components/Exams/Commons/QuestionNavigation.razor.rz.scp.css */
.question-navigation[b-ls70ff8i9f] {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.navigation-header[b-ls70ff8i9f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

    .navigation-header h6[b-ls70ff8i9f] {
        margin: 0;
        color: #495057;
    }

.navigation-stats[b-ls70ff8i9f] {
    font-size: 0.875rem;
    color: #6c757d;
}

.question-grid[b-ls70ff8i9f] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.question-number[b-ls70ff8i9f] {
    width: 40px;
    height: 40px;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    background: white;
    color: #495057;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .question-number:hover:not(:disabled)[b-ls70ff8i9f] {
        border-color: #007bff;
        background-color: #e3f2fd;
    }

    .question-number.answered[b-ls70ff8i9f] {
        background-color: #d4edda;
        border-color: #28a745;
        color: #155724;
    }

    .question-number.flagged[b-ls70ff8i9f] {
        background-color: #fff3cd;
        border-color: #ffc107;
        color: #856404;
    }


    .question-number.current[b-ls70ff8i9f] {
        background-color: #007bff;
        border-color: #007bff;
        color: white;
        box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
    }

    .question-number:disabled[b-ls70ff8i9f] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.navigation-legend[b-ls70ff8i9f] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    font-size: 0.75rem;
    color: #6c757d;
}

.legend-item[b-ls70ff8i9f] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.legend-color[b-ls70ff8i9f] {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    display: inline-block;
}

    .legend-color.answered[b-ls70ff8i9f] {
        background-color: #28a745;
    }

    .legend-color.flagged[b-ls70ff8i9f] {
        background-color: #ffc107;
    }

    .legend-color.current[b-ls70ff8i9f] {
        background-color: #007bff;
    }

/* _content/ltia.portal.web/Components/Exams/Feedbacks.razor.rz.scp.css */
/* Feedback Page Specific Styles - Consistent with System Design */

/* Page Container */
.exams-page[b-mg7078qci1] {
    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    background-color: #f3f4f6;
}

/* Page Header */
.feedback-page-header[b-mg7078qci1] {
    background: transparent;
    padding: 0 0 1.5rem 0;
    margin-bottom: 2rem;
}

.page-header-content[b-mg7078qci1] {
    max-width: 100%;
}

.page-title[b-mg7078qci1] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-900, #111827);
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
}

.page-subtitle[b-mg7078qci1] {
    font-size: 0.9375rem;
    color: var(--gray-600, #4b5563);
    margin: 0;
    line-height: 1.5;
}

/* Feedback Section */
.feedback-section[b-mg7078qci1] {
    background: transparent;
    padding: 0;
    margin: 0;
    border: none;
    box-shadow: none;
}

/* Alert Messages */
.alert-success[b-mg7078qci1],
.alert-error[b-mg7078qci1] {
    margin: 0 0 2rem 0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.alert-success[b-mg7078qci1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: var(--success-lighter, #e8f5e8);
    color: var(--success-main, #00c853);
    border: 1px solid var(--success-light, #4caf50);
    font-size: 0.9375rem;
    font-weight: 600;
}

.alert-success i[b-mg7078qci1] {
    font-size: 1.125rem;
}

.alert-error[b-mg7078qci1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: var(--error-lighter, #ffebee);
    color: var(--error-main, #ff5630);
    border: 1px solid var(--error-light, #ff7043);
    font-size: 0.9375rem;
    font-weight: 600;
}

.alert-error i[b-mg7078qci1] {
    font-size: 1.125rem;
}

/* Exam Info Section */
.exam-info-section[b-mg7078qci1] {
    background: var(--acv-white, #ffffff);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200, #e5e7eb);
    margin-bottom: 2rem;
    overflow: hidden;
}

.exam-info-header[b-mg7078qci1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--gray-200, #e5e7eb);
    background: linear-gradient(135deg, var(--acv-white, #ffffff) 0%, var(--gray-50, #f9fafb) 100%);
    position: relative;
}

.exam-info-header[b-mg7078qci1]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--acv-primary, #214ca6) 0%, var(--acv-primary-700, #1e40af) 100%);
}

.exam-info-header i[b-mg7078qci1] {
    color: var(--acv-primary, #214ca6);
    font-size: 1.25rem;
}

.exam-info-header h2[b-mg7078qci1] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-800, #1f2937);
    margin: 0;
}

.exam-info-body[b-mg7078qci1] {
    padding: 2rem;
}

.exam-info-row[b-mg7078qci1] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: var(--gray-50, #f9fafb);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.exam-info-row:not(:last-child)[b-mg7078qci1] {
    margin-bottom: 1rem;
}

.exam-info-row:hover[b-mg7078qci1] {
    background: var(--gray-100, #f3f4f6);
    transform: translateY(-1px);
}

.exam-info-row > i[b-mg7078qci1] {
    color: var(--acv-primary, #214ca6);
    font-size: 1.125rem;
    margin-top: 0.125rem;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.exam-info-details[b-mg7078qci1] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    flex: 1;
}

.info-label[b-mg7078qci1] {
    font-size: 0.75rem;
    color: var(--gray-600, #4b5563);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0.01em;
}

.info-value[b-mg7078qci1] {
    font-size: 0.9375rem;
    color: var(--gray-900, #111827);
    font-weight: 700;
    line-height: 1.3;
}

/* Feedback Form Section */
.feedback-form-section[b-mg7078qci1] {
    background: var(--acv-white, #ffffff);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200, #e5e7eb);
    overflow: hidden;
}

.feedback-form-header[b-mg7078qci1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--gray-200, #e5e7eb);
    background: linear-gradient(135deg, var(--acv-white, #ffffff) 0%, var(--gray-50, #f9fafb) 100%);
    position: relative;
}

.feedback-form-header[b-mg7078qci1]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--acv-primary, #214ca6) 0%, var(--acv-primary-700, #1e40af) 100%);
}

.feedback-form-header i[b-mg7078qci1] {
    color: var(--acv-primary, #214ca6);
    font-size: 1.25rem;
}

.feedback-form-header h2[b-mg7078qci1] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-800, #1f2937);
    margin: 0;
}

.feedback-form-subtitle[b-mg7078qci1] {
    padding: 1rem 2rem 0 2rem;
    margin: 0;
    font-size: 0.9375rem;
    color: var(--gray-600, #4b5563);
    line-height: 1.5;
}

.feedback-form[b-mg7078qci1] {
    width: 100%;
}

.feedback-questions-content[b-mg7078qci1] {
    padding: 2rem;
}

/* Question Card */
.question-card[b-mg7078qci1] {
    background: var(--acv-white, #ffffff);
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    margin-bottom: 1.25rem;
    position: relative;
}

.question-card[b-mg7078qci1]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--acv-primary, #214ca6) 0%, var(--acv-primary-700, #1e40af) 100%);
    border-radius: 12px 0 0 12px;
}

.question-card:hover[b-mg7078qci1] {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    border-color: var(--acv-primary, #214ca6);
    transform: translateY(-2px);
}

.question-card-header[b-mg7078qci1] {
    padding: 1.25rem 1.5rem 1rem 2rem;
    background: linear-gradient(135deg, var(--acv-white, #ffffff) 0%, var(--gray-50, #f9fafb) 100%);
}

.question-title[b-mg7078qci1] {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--gray-800, #1f2937);
    margin: 0;
    line-height: 1.5;
}

.question-card-body[b-mg7078qci1] {
    padding: 1.5rem 1.5rem 1.5rem 2rem;
}

/* Star Rating */
.rating-container[b-mg7078qci1] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.star-rating[b-mg7078qci1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.star-label[b-mg7078qci1] {
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    display: inline-flex;
}

.star-label:hover[b-mg7078qci1] {
    transform: scale(1.15);
}

.star-input[b-mg7078qci1] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.star-icon[b-mg7078qci1] {
    font-size: 1.875rem;
    color: var(--gray-300, #d1d5db);
    transition: all 0.2s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.star-icon.active[b-mg7078qci1] {
    color: var(--warning-main, #ffab00);
    filter: drop-shadow(0 2px 6px rgba(255, 171, 0, 0.4));
}

.star-label:hover .star-icon[b-mg7078qci1] {
    color: var(--warning-light, #ffb74d);
    transform: rotate(-15deg);
}

.rating-text[b-mg7078qci1] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-700, #374151);
    padding: 0.5rem 1rem;
    background: var(--gray-100, #f3f4f6);
    border-radius: 8px;
    display: inline-block;
    margin-top: 0.5rem;
}

/* Comment Card */
.comment-card[b-mg7078qci1] {
    background: var(--acv-white, #ffffff);
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    margin-top: 1.5rem;
    position: relative;
}

.comment-card[b-mg7078qci1]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--acv-primary, #214ca6) 0%, var(--acv-primary-700, #1e40af) 100%);
    border-radius: 12px 0 0 12px;
}

.comment-card-header[b-mg7078qci1] {
    padding: 1.25rem 1.5rem 1rem 2rem;
    background: linear-gradient(135deg, var(--acv-white, #ffffff) 0%, var(--gray-50, #f9fafb) 100%);
}

.comment-title[b-mg7078qci1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--gray-800, #1f2937);
    margin: 0;
}

.comment-title i[b-mg7078qci1] {
    color: var(--acv-primary, #214ca6);
    font-size: 1rem;
}

.comment-card-body[b-mg7078qci1] {
    padding: 1.5rem 1.5rem 1.5rem 2rem;
}

.comment-textarea[b-mg7078qci1] {
    width: 100%;
    min-height: 120px;
    padding: 1rem;
    border: 1px solid var(--gray-300, #d1d5db);
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    resize: vertical;
    transition: all 0.2s ease;
    background: var(--acv-white, #ffffff);
    color: var(--gray-900, #111827);
}

.comment-textarea:focus[b-mg7078qci1] {
    outline: none;
    border-color: var(--acv-primary, #214ca6);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.comment-textarea[b-mg7078qci1]::placeholder {
    color: var(--gray-400, #9ca3af);
}

/* Action Buttons */
.feedback-actions[b-mg7078qci1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 2rem;
    border-top: 1px solid var(--gray-200, #e5e7eb);
    background: var(--gray-50, #f9fafb);
}

.btn-primary-action[b-mg7078qci1],
.btn-secondary-action[b-mg7078qci1] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    white-space: nowrap;
}

.btn-primary-action[b-mg7078qci1] {
    background: linear-gradient(135deg, var(--acv-primary, #214ca6) 0%, var(--acv-primary-700, #1e40af) 100%);
    color: var(--acv-white, #ffffff);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.25);
}

.btn-primary-action:hover:not(:disabled)[b-mg7078qci1] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.35);
}

.btn-primary-action:disabled[b-mg7078qci1] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary-action[b-mg7078qci1] {
    background: var(--acv-white, #ffffff);
    color: var(--acv-primary, #214ca6);
    border: 2px solid var(--acv-primary, #214ca6);
}

.btn-secondary-action:hover:not(:disabled)[b-mg7078qci1] {
    background: var(--acv-primary-lighter, #dbeafe);
    transform: translateY(-2px);
}

/* Empty State */
.empty-state[b-mg7078qci1] {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--acv-white, #ffffff);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200, #e5e7eb);
}

.empty-state-icon[b-mg7078qci1] {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: var(--gray-100, #f3f4f6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-state-icon i[b-mg7078qci1] {
    font-size: 2.5rem;
    color: var(--gray-400, #9ca3af);
}

.empty-state h3[b-mg7078qci1] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-800, #1f2937);
    margin: 0 0 0.5rem 0;
}

.empty-state p[b-mg7078qci1] {
    color: var(--gray-600, #4b5563);
    font-size: 0.9375rem;
    margin: 0 0 1.5rem 0;
}

/* Loading State */
.loading-state[b-mg7078qci1] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 4rem;
    color: var(--gray-600, #4b5563);
    font-size: 1rem;
    background: var(--acv-white, #ffffff);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200, #e5e7eb);
}

.loading-state i[b-mg7078qci1] {
    font-size: 1.25rem;
    color: var(--acv-primary, #214ca6);
}

/* JSON Popup Overlay */
.json-popup-overlay[b-mg7078qci1] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 1rem;
    animation: fadeIn-b-mg7078qci1 0.2s ease;
}

@keyframes fadeIn-b-mg7078qci1 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.json-popup-content[b-mg7078qci1] {
    background: var(--acv-white, #ffffff);
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    width: 100%;
    max-width: 800px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp-b-mg7078qci1 0.3s ease;
}

@keyframes slideUp-b-mg7078qci1 {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.json-popup-header[b-mg7078qci1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--gray-200, #e5e7eb);
    background: linear-gradient(135deg, var(--acv-white, #ffffff) 0%, var(--gray-50, #f9fafb) 100%);
}

.json-popup-header h3[b-mg7078qci1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-800, #1f2937);
    margin: 0;
}

.json-popup-header h3 i[b-mg7078qci1] {
    color: var(--acv-primary, #214ca6);
    font-size: 1.5rem;
}

.json-popup-close[b-mg7078qci1] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: var(--gray-100, #f3f4f6);
    color: var(--gray-600, #4b5563);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    transition: all 0.2s ease;
}

.json-popup-close:hover[b-mg7078qci1] {
    background: var(--gray-200, #e5e7eb);
    color: var(--gray-900, #111827);
    transform: rotate(90deg);
}

.json-popup-body[b-mg7078qci1] {
    flex: 1;
    overflow: auto;
    padding: 1.5rem 2rem;
    background: var(--gray-50, #f9fafb);
}

.json-preview[b-mg7078qci1] {
    margin: 0;
    padding: 1.5rem;
    background: #1e293b;
    border-radius: 12px;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.875rem;
    line-height: 1.6;
    color: #e2e8f0;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.json-preview[b-mg7078qci1]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.json-preview[b-mg7078qci1]::-webkit-scrollbar-track {
    background: #0f172a;
    border-radius: 4px;
}

.json-preview[b-mg7078qci1]::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 4px;
}

.json-preview[b-mg7078qci1]::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

.json-popup-footer[b-mg7078qci1] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1.5rem 2rem;
    border-top: 1px solid var(--gray-200, #e5e7eb);
    background: var(--acv-white, #ffffff);
}

/* Responsive - JSON Popup */
@media (max-width: 768px) {
    .json-popup-overlay[b-mg7078qci1] {
        padding: 0.5rem;
    }

    .json-popup-content[b-mg7078qci1] {
        max-height: 95vh;
    }

    .json-popup-header[b-mg7078qci1],
    .json-popup-body[b-mg7078qci1],
    .json-popup-footer[b-mg7078qci1] {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .json-popup-header h3[b-mg7078qci1] {
        font-size: 1.125rem;
    }

    .json-preview[b-mg7078qci1] {
        font-size: 0.8125rem;
        padding: 1rem;
    }

    .json-popup-footer[b-mg7078qci1] {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .json-popup-footer .btn-primary-action[b-mg7078qci1],
    .json-popup-footer .btn-secondary-action[b-mg7078qci1] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .json-popup-header h3[b-mg7078qci1] {
        font-size: 1rem;
    }

    .json-preview[b-mg7078qci1] {
        font-size: 0.75rem;
    }
}
/* _content/ltia.portal.web/Components/Exams/History.razor.rz.scp.css */
/* CSS Variables - Đặt trực tiếp vào .history-page */
.history-page[b-tmdl67xx4q] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    
    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Header Section - Matching Instructors style */
.history-card-header[b-tmdl67xx4q] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.header-content[b-tmdl67xx4q] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1;
}

.header-icon[b-tmdl67xx4q] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.header-text[b-tmdl67xx4q] {
    flex: 1;
}

.header-title[b-tmdl67xx4q] {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
    color: var(--gray-800);
}

.header-subtitle[b-tmdl67xx4q] {
    font-size: 1rem;
    margin: 0.25rem 0 0 0;
    color: var(--gray-600);
}

.header-actions[b-tmdl67xx4q] {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}

.btn[b-tmdl67xx4q] {
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
}

.btn-secondary[b-tmdl67xx4q] {
    background: var(--gray-100);
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
}

.btn-secondary:hover[b-tmdl67xx4q] {
    background: var(--gray-200);
    color: var(--gray-800);
    border-color: var(--gray-400);
}

.btn-primary[b-tmdl67xx4q] {
    background: var(--acv-primary);
    color: var(--acv-white);
}

.btn-primary:hover:not(:disabled)[b-tmdl67xx4q] {
    background: var(--acv-primary-700);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

.btn-primary:disabled[b-tmdl67xx4q] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* History Card Section - Matching Instructors card style */
.history-card[b-tmdl67xx4q] {
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    margin-bottom: 2rem;
    overflow: visible;
}

/* List Header - Matching Instructors style */
.list-header[b-tmdl67xx4q] {
    padding: 1.5rem;
    border-bottom: 1px solid var(--gray-200);
    background: var(--gray-50);
    border-radius: 16px 16px 0 0;
    position: relative;
    overflow: visible;
}

.list-header[b-tmdl67xx4q]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 0 2px 2px 0;
}

.list-header-content[b-tmdl67xx4q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.list-title-section[b-tmdl67xx4q] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.list-title[b-tmdl67xx4q] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.list-title i[b-tmdl67xx4q] {
    color: var(--acv-primary);
    font-size: 1.25rem;
}

.list-count[b-tmdl67xx4q] {
    background: var(--acv-primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Sort Controls - Matching Instructors style */
.sort-controls[b-tmdl67xx4q] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.sort-dropdown[b-tmdl67xx4q] {
    position: relative;
}

.sort-dropdown-btn[b-tmdl67xx4q] {
    padding: 0.5rem 1rem;
    border: 2px solid var(--acv-primary);
    border-radius: 12px;
    background: white;
    color: var(--acv-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
    font-size: 0.9rem;
}

.sort-dropdown-btn:hover[b-tmdl67xx4q],
.sort-dropdown-btn.active[b-tmdl67xx4q] {
    background: var(--acv-primary);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

.sort-dropdown-btn:focus[b-tmdl67xx4q] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.sort-dropdown-menu[b-tmdl67xx4q] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--acv-white);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 50;
    margin-top: 0.5rem;
    overflow: hidden;
    min-width: 200px;
    display: none;
}

.sort-dropdown-menu.show[b-tmdl67xx4q] {
    display: block;
}

.sort-option[b-tmdl67xx4q] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    width: 100%;
    background: var(--acv-white);
    border: none;
    color: var(--acv-primary);
    font-size: 0.875rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    border-bottom: 1px solid var(--gray-100);
}

.sort-option:hover[b-tmdl67xx4q] {
    background: var(--gray-50);
    color: var(--acv-primary);
    transform: translateX(2px);
}

.sort-option.active[b-tmdl67xx4q] {
    background: var(--acv-white);
    color: var(--acv-primary);
    font-weight: 600;
}

.sort-icons[b-tmdl67xx4q] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.sort-icon-default[b-tmdl67xx4q],
.sort-icon-asc[b-tmdl67xx4q],
.sort-icon-desc[b-tmdl67xx4q] {
    font-size: 0.8rem;
    opacity: 0.5;
}

.sort-option.active .sort-icon-default.active[b-tmdl67xx4q],
.sort-option.active .sort-icon-asc.active[b-tmdl67xx4q],
.sort-option.active .sort-icon-desc.active[b-tmdl67xx4q] {
    opacity: 1;
    color: var(--acv-primary);
}

.sort-option i:first-child[b-tmdl67xx4q] {
    width: 16px;
    color: var(--gray-500);
    font-size: 0.875rem;
}

.sort-option.active i:first-child[b-tmdl67xx4q] {
    color: var(--acv-primary);
}

.sort-option span[b-tmdl67xx4q] {
    flex: 1;
}

.refresh-btn[b-tmdl67xx4q] {
    padding: 0.5rem 1rem;
    border: 2px solid var(--acv-primary);
    border-radius: 12px;
    background: var(--acv-white);
    color: var(--acv-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
}

.refresh-btn:hover:not(:disabled)[b-tmdl67xx4q] {
    background: var(--acv-primary);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

.refresh-btn:disabled[b-tmdl67xx4q] {
    opacity: 0.6;
    cursor: not-allowed;
}

.refresh-btn i[b-tmdl67xx4q] {
    transition: transform 0.3s ease;
}

.refresh-btn:hover:not(:disabled) i[b-tmdl67xx4q] {
    transform: rotate(180deg);
}

/* History Content */
.history-content[b-tmdl67xx4q] {
    padding: 1.5rem;
    overflow: hidden;
}

/* Loading State - Uses Loading component */

/* Alert Styles */
.alert[b-tmdl67xx4q] {
    padding: 1rem 1.25rem;
    border-radius: 8px;
    border: 1px solid;
    margin-bottom: 1.5rem;
}

.alert-warning[b-tmdl67xx4q] {
    background: var(--warning-lighter);
    border-color: var(--warning-light);
    color: var(--warning-dark);
}

.alert-warning i[b-tmdl67xx4q] {
    color: var(--warning-main);
}

/* Empty State */
.empty-state-wrapper[b-tmdl67xx4q] {
    margin-top: 2rem;
}

.empty-state[b-tmdl67xx4q] {
    padding: 4rem 2rem;
    text-align: center;
    background: var(--gray-50);
    border-radius: 12px;
    border: 2px dashed var(--gray-300);
}

.empty-state-icon[b-tmdl67xx4q] {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: var(--gray-100);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-state-icon i[b-tmdl67xx4q] {
    font-size: 2.5rem;
    color: var(--gray-400);
}

.empty-state h3[b-tmdl67xx4q] {
    color: var(--gray-700);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.empty-state p[b-tmdl67xx4q] {
    color: var(--gray-600);
    font-size: 1rem;
    max-width: 500px;
    margin: 0 auto 2rem;
    line-height: 1.6;
}

.empty-state-actions[b-tmdl67xx4q] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.empty-state-actions .btn[b-tmdl67xx4q] {
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.empty-state-actions .btn-primary[b-tmdl67xx4q] {
    background: var(--acv-primary);
    border: none;
    color: var(--acv-white);
}

.empty-state-actions .btn-primary:hover[b-tmdl67xx4q] {
    background: var(--acv-primary-700);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

/* History Stats - Enhanced Design */
.history-stats[b-tmdl67xx4q] {
    margin-bottom: 2rem;
}

.stat-card[b-tmdl67xx4q] {
    background: var(--acv-white);
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    overflow: hidden;
}

.stat-card[b-tmdl67xx4q]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gray-200);
    transition: all 0.3s ease;
    border-radius: 16px 16px 0 0;
}

.stat-card:hover[b-tmdl67xx4q] {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px);
    border-color: var(--gray-300);
}

/* Top border color for each card type */
.stat-card-passed[b-tmdl67xx4q]::before {
    background: var(--success-main);
}

.stat-card-attempts[b-tmdl67xx4q]::before {
    background: var(--acv-primary);
}

.stat-card-recent[b-tmdl67xx4q]::before {
    background: var(--warning-main);
}

/* Icon Container */
.stat-icon[b-tmdl67xx4q] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    flex-shrink: 0;
    position: relative;
    transition: all 0.3s ease;
}

.stat-icon[b-tmdl67xx4q]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    opacity: 0.1;
    transition: all 0.3s ease;
}

.stat-icon.passed[b-tmdl67xx4q] {
    background: var(--success-lighter);
    color: var(--success-main);
}

.stat-icon.passed[b-tmdl67xx4q]::before {
    background: var(--success-main);
}

.stat-icon.attempts[b-tmdl67xx4q] {
    background: var(--acv-primary-lighter);
    color: var(--acv-primary);
}

.stat-icon.attempts[b-tmdl67xx4q]::before {
    background: var(--acv-primary);
}

.stat-icon.recent[b-tmdl67xx4q] {
    background: var(--warning-lighter);
    color: var(--warning-main);
}

.stat-icon.recent[b-tmdl67xx4q]::before {
    background: var(--warning-main);
}

.stat-card:hover .stat-icon[b-tmdl67xx4q] {
    transform: scale(1.1);
}

.stat-card:hover .stat-icon[b-tmdl67xx4q]::before {
    opacity: 0.15;
}

/* Content */
.stat-card > div:last-child[b-tmdl67xx4q] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stat-label[b-tmdl67xx4q] {
    margin: 0 0 0.5rem 0;
    margin-top: 0.5rem;
    color: var(--gray-600);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.stat-card h4[b-tmdl67xx4q] {
    margin: 0;
    color: var(--gray-800);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

.stat-hint[b-tmdl67xx4q] {
    display: block;
    color: var(--gray-500);
    font-size: 0.75rem;
    font-weight: 400;
    margin-top: 0.25rem;
    font-style: italic;
}

/* Search Section - Matching Instructors style */
.history-search-section[b-tmdl67xx4q] {
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    margin-bottom: 2rem;
    overflow: visible;
    position: relative;
    z-index: 100;
}

.search-container[b-tmdl67xx4q] {
    padding: 1.5rem;
}

.search-header[b-tmdl67xx4q] {
    margin-bottom: 1.5rem;
    text-align: center;
}

.search-title[b-tmdl67xx4q] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 0.5rem 0;
}

.search-title i[b-tmdl67xx4q] {
    color: var(--acv-primary);
    font-size: 1.3rem;
}

.search-subtitle[b-tmdl67xx4q] {
    color: var(--gray-600);
    font-size: 1rem;
    margin: 0;
    font-weight: 400;
}

.search-content[b-tmdl67xx4q] {
    width: 100%;
}

.search-main-row[b-tmdl67xx4q] {
    display: flex;
    align-items: end;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.search-input-group[b-tmdl67xx4q] {
    flex: 0 0 600px;
    min-width: 600px;
    position: relative;
    z-index: 20;
}

.filter-group[b-tmdl67xx4q] {
    flex: 0 0 200px;
    min-width: 200px;
    position: relative;
    z-index: 100;
}

.filter-label[b-tmdl67xx4q] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-label i[b-tmdl67xx4q] {
    color: var(--acv-primary);
}

.search-input-wrapper[b-tmdl67xx4q] {
    position: relative;
}

.search-icon[b-tmdl67xx4q] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    z-index: 1;
}

.search-input[b-tmdl67xx4q] {
    width: 100%;
    height: 48px;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--acv-white);
    box-sizing: border-box;
}

.search-input:focus[b-tmdl67xx4q] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.filter-select[b-tmdl67xx4q] {
    width: 100%;
    height: 48px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--acv-white);
    box-sizing: border-box;
    cursor: pointer;
}

.filter-select:focus[b-tmdl67xx4q] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.filter-select:hover[b-tmdl67xx4q] {
    border-color: var(--acv-primary);
}

/* Status Dropdown - Matching Instructors style */
.status-dropdown[b-tmdl67xx4q] {
    position: relative;
    width: 100%;
}

.status-dropdown-btn[b-tmdl67xx4q] {
    width: 100%;
    height: 48px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    background: var(--acv-white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.95rem;
    box-sizing: border-box;
}

.status-dropdown-btn:hover[b-tmdl67xx4q] {
    border-color: var(--acv-primary);
}

.status-dropdown-btn.active[b-tmdl67xx4q] {
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.status-dropdown-text[b-tmdl67xx4q] {
    flex: 1;
    text-align: left;
    color: var(--gray-700);
}

.status-dropdown-icon[b-tmdl67xx4q] {
    color: var(--gray-400);
    transition: transform 0.2s ease;
    font-size: 0.875rem;
}

.status-dropdown-icon.rotated[b-tmdl67xx4q] {
    transform: rotate(180deg);
}

.status-dropdown-menu[b-tmdl67xx4q] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--acv-white);
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    z-index: 1000;
    margin-top: 0.25rem;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    display: none;
}

.status-dropdown-menu[b-tmdl67xx4q]::-webkit-scrollbar {
    width: 6px;
}

.status-dropdown-menu[b-tmdl67xx4q]::-webkit-scrollbar-track {
    background: var(--gray-100);
    border-radius: 3px;
}

.status-dropdown-menu[b-tmdl67xx4q]::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 3px;
}

.status-dropdown-menu[b-tmdl67xx4q]::-webkit-scrollbar-thumb:hover {
    background: var(--gray-400);
}

.status-dropdown-menu.show[b-tmdl67xx4q] {
    display: block;
}

.status-dropdown-loading[b-tmdl67xx4q] {
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: var(--gray-600);
    font-size: 0.875rem;
}

.status-dropdown-loading .spinner-border-sm[b-tmdl67xx4q] {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

.status-option[b-tmdl67xx4q] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: none;
    background: var(--acv-white);
    color: var(--gray-700);
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.95rem;
    position: relative;
}

.status-option:last-child[b-tmdl67xx4q] {
    border-bottom: none;
}

.status-option[b-tmdl67xx4q]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: var(--acv-primary);
    transition: width 0.2s ease;
}

.status-option:hover[b-tmdl67xx4q] {
    background: var(--acv-white);
    color: var(--gray-800);
}

.status-option:hover[b-tmdl67xx4q]::before {
    width: 4px;
}

.status-option.active[b-tmdl67xx4q] {
    background: var(--acv-white);
    color: var(--gray-700);
    font-weight: 500;
}

.status-option.active[b-tmdl67xx4q]::before {
    width: 4px;
}

.status-option i:first-child[b-tmdl67xx4q] {
    width: 16px;
    color: var(--gray-500);
    font-size: 0.875rem;
    margin-left: 0.25rem;
}

.status-option.active i:first-child[b-tmdl67xx4q] {
    color: var(--acv-primary);
}

.status-option span[b-tmdl67xx4q] {
    flex: 1;
}

.status-check[b-tmdl67xx4q] {
    color: var(--acv-primary);
    font-size: 0.875rem;
    margin-left: auto;
}

/* Search Controls */
.search-controls[b-tmdl67xx4q] {
    display: flex;
    gap: 0.5rem;
    align-items: end;
    flex-shrink: 0;
}

.search-btn[b-tmdl67xx4q] {
    width: 48px;
    height: 48px;
    border: 2px solid var(--acv-primary);
    border-radius: 8px;
    background: var(--acv-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
}

.search-btn:hover[b-tmdl67xx4q] {
    background: var(--acv-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

.clear-btn[b-tmdl67xx4q] {
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 8px;
    background: var(--gray-500);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
}

.clear-btn:hover[b-tmdl67xx4q] {
    background: var(--gray-600);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Display Mode Toggle */
.display-mode-toggle[b-tmdl67xx4q] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1.5rem;
}

.display-mode-toggle .btn-group[b-tmdl67xx4q] {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.display-mode-toggle .btn[b-tmdl67xx4q] {
    border: 1px solid var(--gray-300);
    padding: 0.5rem 1rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.display-mode-toggle .btn-primary[b-tmdl67xx4q] {
    background: var(--acv-primary);
    border-color: var(--acv-primary);
    color: var(--acv-white);
}

.display-mode-toggle .btn-outline-primary[b-tmdl67xx4q] {
    background: var(--acv-white);
    color: var(--acv-primary);
}

.display-mode-toggle .btn-outline-primary:hover[b-tmdl67xx4q] {
    background: var(--acv-primary-lighter);
}

/* Subject Groups View */
.subject-groups[b-tmdl67xx4q] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.subject-card[b-tmdl67xx4q] {
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--gray-200);
    overflow: hidden;
    transition: all 0.3s ease;
}

.subject-card:hover[b-tmdl67xx4q] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.subject-card-header[b-tmdl67xx4q] {
    padding: 1.5rem;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
}

.subject-card-header:hover[b-tmdl67xx4q] {
    background: var(--gray-100);
}

.subject-header-content[b-tmdl67xx4q] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.subject-icon[b-tmdl67xx4q] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.subject-info[b-tmdl67xx4q] {
    flex: 1;
}

.subject-name[b-tmdl67xx4q] {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-800);
}

.subject-meta[b-tmdl67xx4q] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--gray-600);
}

.subject-meta span[b-tmdl67xx4q] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.subject-meta i[b-tmdl67xx4q] {
    color: var(--acv-primary);
}

.subject-chevron[b-tmdl67xx4q] {
    font-size: 0.875rem;
    color: var(--gray-500);
    transition: transform 0.3s ease;
    margin-left: 1rem;
}

.subject-card-header[aria-expanded="true"] .subject-chevron[b-tmdl67xx4q],
.subject-card-header:not(.collapsed) .subject-chevron[b-tmdl67xx4q] {
    transform: rotate(180deg);
}

.subject-exams[b-tmdl67xx4q] {
    padding: 1.5rem;
    background: var(--acv-white);
}

.subject-exams .accordion-item[b-tmdl67xx4q] {
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    margin-bottom: 0.75rem;
}

.subject-exams .accordion-item:last-child[b-tmdl67xx4q] {
    margin-bottom: 0;
}

/* Card Grid Styles */
.subject-exams-grid[b-tmdl67xx4q] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.subject-exams-grid:last-child[b-tmdl67xx4q] {
    margin-bottom: 0;
}

.exam-history-grid[b-tmdl67xx4q] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.25rem;
}

.exam-history-card[b-tmdl67xx4q] {
    background: var(--acv-white);
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

.exam-history-card:hover[b-tmdl67xx4q] {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-color: var(--acv-primary);
    transform: translateY(-4px);
}

.exam-card-header[b-tmdl67xx4q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1.5rem 1rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
    position: relative;
    background: linear-gradient(135deg, var(--acv-white) 0%, var(--gray-50) 100%);
    gap: 1rem;
}

.exam-card-header[b-tmdl67xx4q]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 0 2px 2px 0;
}

.exam-subject-name[b-tmdl67xx4q] {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
    line-height: 1.4;
    flex: 1;
}

.exam-card-header .status-badge[b-tmdl67xx4q] {
    flex-shrink: 0;
}

.exam-card-body[b-tmdl67xx4q] {
    cursor: pointer;
    padding: 1.75rem;
}

.exam-card-content[b-tmdl67xx4q] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.exam-card-subtitle[b-tmdl67xx4q] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--gray-600);
}

.exam-card-subtitle i[b-tmdl67xx4q] {
    color: var(--acv-primary);
    font-size: 0.8125rem;
}

.exam-card-stats[b-tmdl67xx4q] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-top: 0.25rem;
}

.exam-stat-item[b-tmdl67xx4q] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
}

.exam-stat-item i[b-tmdl67xx4q] {
    color: var(--acv-primary);
    font-size: 1rem;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.exam-stat-item .stat-label[b-tmdl67xx4q] {
    color: #000;
    font-size: 0.95rem;
    font-weight: 600;
    margin-right: 0.5rem;
    min-width: 100px;
    text-transform: none !important;
}

.exam-stat-item .stat-value[b-tmdl67xx4q] {
    color: var(--gray-900);
    font-size: 0.9375rem;
    font-weight: 700;
}

.exam-card-status[b-tmdl67xx4q] {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--gray-200);
}

.status-badge[b-tmdl67xx4q] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.875rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.status-badge.status-passed[b-tmdl67xx4q] {
    background: var(--success-lighter);
    color: var(--success-main);
}

.status-badge.status-failed[b-tmdl67xx4q] {
    background: var(--error-lighter);
    color: var(--error-main);
}

.status-badge i[b-tmdl67xx4q] {
    font-size: 0.875rem;
}

/* Accordion Styles */
.history-accordion[b-tmdl67xx4q] {
    border: none;
}

.accordion-item[b-tmdl67xx4q] {
    border: 1px solid var(--gray-200);
    border-radius: 12px !important;
    margin-bottom: 1rem;
    overflow: hidden;
    background: var(--acv-white);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.accordion-item:hover[b-tmdl67xx4q] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: var(--gray-300);
}

.accordion-item:first-child[b-tmdl67xx4q] {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.accordion-item:last-child[b-tmdl67xx4q] {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    margin-bottom: 0;
}

.accordion-button[b-tmdl67xx4q] {
    background: var(--acv-white);
    border: none;
    padding: 1.5rem;
    box-shadow: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.accordion-button:not(.collapsed)[b-tmdl67xx4q] {
    background: var(--gray-50);
    color: var(--gray-800);
    box-shadow: inset 0 -1px 0 0 var(--gray-200);
}

.accordion-button:hover[b-tmdl67xx4q] {
    background: var(--gray-50);
}

.accordion-button:focus[b-tmdl67xx4q] {
    box-shadow: 0 0 0 0.25rem rgba(33, 76, 166, 0.15);
    border-color: transparent;
}

.accordion-button[b-tmdl67xx4q]::after {
    display: none;
}

.history-summary[b-tmdl67xx4q] {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding-right: 2rem;
    position: relative;
}

.accordion-chevron[b-tmdl67xx4q] {
    position: absolute;
    right: 0;
    font-size: 0.875rem;
    color: var(--gray-500);
    transition: transform 0.3s ease;
}

.accordion-button:not(.collapsed) .accordion-chevron[b-tmdl67xx4q] {
    transform: rotate(180deg);
}

.summary-icon[b-tmdl67xx4q] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.summary-icon.passed[b-tmdl67xx4q] {
    background: var(--success-lighter);
    color: var(--success-main);
}

.summary-icon.failed[b-tmdl67xx4q] {
    background: var(--error-lighter);
    color: var(--error-main);
}

.summary-info[b-tmdl67xx4q] {
    flex: 1;
    min-width: 0;
}

.summary-info h5[b-tmdl67xx4q] {
    margin: 0 0 0.5rem 0;
    color: var(--gray-800);
    font-size: 1.125rem;
    font-weight: 600;
}

.summary-meta[b-tmdl67xx4q] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--gray-600);
}

.summary-meta span[b-tmdl67xx4q] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.summary-meta i[b-tmdl67xx4q] {
    color: var(--gray-500);
    font-size: 0.75rem;
}

.summary-meta .text-success[b-tmdl67xx4q] {
    color: var(--success-main);
    font-weight: 600;
}

.summary-meta .text-danger[b-tmdl67xx4q] {
    color: var(--error-main);
    font-weight: 600;
}

.accordion-collapse[b-tmdl67xx4q] {
    border-top: 1px solid var(--gray-200);
}

.accordion-collapse.collapsing[b-tmdl67xx4q] {
    transition: height 0.35s ease;
}

.accordion-body[b-tmdl67xx4q] {
    padding: 1.5rem;
    background: var(--acv-white);
    animation: fadeIn-b-tmdl67xx4q 0.3s ease-in;
}

@keyframes fadeIn-b-tmdl67xx4q {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Table Styles */
.table-responsive[b-tmdl67xx4q] {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--gray-200);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.table[b-tmdl67xx4q] {
    margin-bottom: 0;
    background: var(--acv-white);
    width: 100%;
}

.table thead[b-tmdl67xx4q] {
    background: var(--gray-50);
    border-bottom: 2px solid var(--gray-200);
}

.table thead th[b-tmdl67xx4q] {
    border-bottom: none;
    color: var(--gray-700);
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1rem 1.25rem;
    white-space: nowrap;
    text-align: left;
}

.table thead th.sortable[b-tmdl67xx4q] {
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
    position: relative;
}

.table thead th.sortable:hover[b-tmdl67xx4q] {
    background: rgba(0, 0, 0, 0.05);
}

.table thead th.sortable i[b-tmdl67xx4q] {
    margin-left: 0.5rem;
    font-size: 0.8rem;
    opacity: 0.7;
    transition: all 0.2s ease;
}

.table thead th.sort-asc i[b-tmdl67xx4q],
.table thead th.sort-desc i[b-tmdl67xx4q] {
    opacity: 1;
    color: var(--acv-primary);
}

.table thead th.sort-asc:hover i[b-tmdl67xx4q],
.table thead th.sort-desc:hover i[b-tmdl67xx4q] {
    transform: scale(1.1);
}

.table tbody td[b-tmdl67xx4q] {
    padding: 1rem 1.25rem;
    color: var(--gray-700);
    border-bottom: 1px solid var(--gray-100);
    vertical-align: middle;
    transition: background-color 0.2s ease;
    font-size: 0.9375rem;
}

.table tbody tr:last-child td[b-tmdl67xx4q] {
    border-bottom: none;
}

.table tbody tr[b-tmdl67xx4q] {
    transition: all 0.2s ease;
    background: var(--acv-white);
}

.table tbody tr:hover[b-tmdl67xx4q] {
    background: var(--acv-primary-lighter);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.1);
}

.table tbody tr:hover td[b-tmdl67xx4q] {
    color: var(--gray-800);
}

.attempt-number[b-tmdl67xx4q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 28px;
    padding: 0.25rem 0.75rem;
    background: var(--gray-100);
    color: var(--gray-700);
    border-radius: 14px;
    font-size: 0.8125rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.table tbody tr:hover .attempt-number[b-tmdl67xx4q] {
    background: var(--acv-primary);
    color: var(--acv-white);
    transform: scale(1.05);
}

.badge[b-tmdl67xx4q] {
    padding: 0.5rem 1rem;
    border-radius: 12px;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    border: none;
    min-width: 80px;
}

.bg-success[b-tmdl67xx4q] {
    background: linear-gradient(135deg, var(--success-main) 0%, var(--success-dark) 100%) !important;
    color: var(--acv-white);
    box-shadow: 0 2px 8px rgba(0, 200, 83, 0.25);
}

.bg-success:hover[b-tmdl67xx4q] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 200, 83, 0.35);
}

.bg-danger[b-tmdl67xx4q] {
    background: linear-gradient(135deg, #f57c00 0%, #e65100 100%) !important;
    color: var(--acv-white);
    box-shadow: 0 2px 8px rgba(245, 124, 0, 0.25);
}

.bg-danger:hover[b-tmdl67xx4q] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 124, 0, 0.35);
}

/* Detail View Styles */
.exam-detail-view[b-tmdl67xx4q] {
    animation: fadeIn-b-tmdl67xx4q 0.3s ease-in;
    padding: 0;
}

.detail-header[b-tmdl67xx4q] {
    margin-bottom: 2rem;
}

.detail-header-content[b-tmdl67xx4q] {
    padding: 2.5rem;
    background: var(--acv-white);
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.detail-title[b-tmdl67xx4q] {
    margin: 0 0 2rem 0;
    color: var(--gray-900);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--gray-200);
}

.detail-stats-wrapper[b-tmdl67xx4q] {
    margin-top: 1rem;
}

.detail-stats[b-tmdl67xx4q] {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.detail-stat-item[b-tmdl67xx4q] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.detail-stat-item i[b-tmdl67xx4q] {
    color: var(--acv-primary);
    font-size: 1.125rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.detail-stat-item .stat-label[b-tmdl67xx4q] {
    color: #000;
    font-size: 0.95rem;
    font-weight: 600;
    margin-right: 0.5rem;
    text-transform: none !important;
}

.detail-stat-item .stat-value[b-tmdl67xx4q] {
    color: var(--gray-900);
    font-size: 1rem;
    font-weight: 700;
}

.detail-stat-box[b-tmdl67xx4q] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.detail-stat-box:hover[b-tmdl67xx4q] {
    background: var(--acv-primary-lighter);
    border-color: var(--acv-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.1);
}

.detail-stat-box.status-box[b-tmdl67xx4q] {
    background: transparent;
    border: none;
    padding: 0;
    align-items: center;
    justify-content: center;
}

.detail-stat-box.status-box:hover[b-tmdl67xx4q] {
    background: transparent;
    border: none;
    transform: none;
    box-shadow: none;
}

.detail-stat-box.status-box .stat-content[b-tmdl67xx4q] {
    align-items: center;
}

.detail-stat-box.status-box .status-badge[b-tmdl67xx4q] {
    font-size: 0.9375rem;
    padding: 0.625rem 1.25rem;
}

.stat-icon-wrapper[b-tmdl67xx4q] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
}

.stat-icon-wrapper i[b-tmdl67xx4q] {
    color: var(--acv-white);
    font-size: 1.25rem;
}

.stat-content[b-tmdl67xx4q] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    flex: 1;
    min-width: 0;
}

.stat-content .stat-label[b-tmdl67xx4q] {
    color: #000;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    text-transform: none !important;
}

.stat-content .stat-value[b-tmdl67xx4q] {
    color: var(--gray-900);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
}

.btn-back[b-tmdl67xx4q] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--acv-white);
    border: 2px solid var(--acv-primary);
    border-radius: 12px;
    color: var(--acv-primary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-back:hover[b-tmdl67xx4q] {
    background: var(--acv-primary);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

.btn-back i[b-tmdl67xx4q] {
    font-size: 0.875rem;
}

.detail-content[b-tmdl67xx4q] {
    background: var(--acv-white);
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 2rem;
    margin-top: 1rem;
}

.detail-content .table-responsive[b-tmdl67xx4q] {
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .history-page[b-tmdl67xx4q] {
        padding: 1rem;
    }
    
    .history-card-header[b-tmdl67xx4q] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }
    
    .header-content[b-tmdl67xx4q] {
        width: 100%;
    }
    
    .header-actions[b-tmdl67xx4q] {
        width: 100%;
        flex-direction: column;
    }
    
    .header-actions .btn[b-tmdl67xx4q] {
        width: 100%;
    }
    
    .search-main-row[b-tmdl67xx4q] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .search-input-group[b-tmdl67xx4q],
    .filter-group[b-tmdl67xx4q] {
        min-width: auto;
        max-width: none;
        flex: 1 1 100%;
    }
    
    .search-controls[b-tmdl67xx4q] {
        justify-content: center;
        width: 100%;
    }
    
    .search-btn[b-tmdl67xx4q],
    .clear-btn[b-tmdl67xx4q] {
        flex: 1;
    }
    
    .list-header-content[b-tmdl67xx4q] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .list-title-section[b-tmdl67xx4q] {
        width: 100%;
    }
    
    .summary-meta[b-tmdl67xx4q] {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .history-stats[b-tmdl67xx4q] {
        margin-bottom: 1.5rem;
    }
    
    .stat-card[b-tmdl67xx4q] {
        margin-bottom: 1rem;
    }
    
    .stat-icon[b-tmdl67xx4q] {
        width: 56px;
        height: 56px;
        font-size: 1.5rem;
    }
    
    .stat-card h4[b-tmdl67xx4q] {
        font-size: 1.75rem;
    }
    
    .exam-history-grid[b-tmdl67xx4q] {
        grid-template-columns: 1fr;
    }
    
    .exam-card-body[b-tmdl67xx4q] {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .exam-card-stats[b-tmdl67xx4q] {
        flex-direction: column;
        gap: 0.75rem;
        width: 100%;
    }
    
    .detail-card-header[b-tmdl67xx4q] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .detail-icon-wrapper[b-tmdl67xx4q] {
        margin: 0 auto;
    }
    
    .detail-stats[b-tmdl67xx4q] {
        grid-template-columns: 1fr;
    }
}


/* _content/ltia.portal.web/Components/Exams/Index.razor.rz.scp.css */
/* CSS Variables */
.exams-page[b-8pb1isxgv3] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    
    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    background-color: #f3f4f6;
}

/* Card Header Section */
.card-header-section[b-8pb1isxgv3] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.card-header-content[b-8pb1isxgv3] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.card-header-icon[b-8pb1isxgv3] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.card-header-text h1[b-8pb1isxgv3] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-800);
}

.card-header-text p[b-8pb1isxgv3] {
    margin: 0.25rem 0 0 0;
    color: var(--gray-600);
    font-size: 1rem;
}

.card-header-actions[b-8pb1isxgv3] {
    display: flex;
    gap: 1rem;
    flex-shrink: 0;
}

.btn-primary-header[b-8pb1isxgv3],
.btn-secondary-header[b-8pb1isxgv3] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    white-space: nowrap;
}

.btn-primary-header[b-8pb1isxgv3] {
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.25);
}

.btn-primary-header:hover:not(:disabled)[b-8pb1isxgv3] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.35);
}

.btn-secondary-header[b-8pb1isxgv3] {
    background: var(--acv-white);
    color: var(--acv-primary);
    border: 2px solid var(--acv-primary);
}

.btn-secondary-header:hover:not(:disabled)[b-8pb1isxgv3] {
    background: var(--acv-primary-lighter);
    transform: translateY(-2px);
}

.btn-secondary-header:disabled[b-8pb1isxgv3] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Section Styles */
.exams-section[b-8pb1isxgv3],
.subjects-section[b-8pb1isxgv3] {
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    margin-bottom: 2rem;
    overflow: hidden;
}

.section-header-card[b-8pb1isxgv3] {
    background: var(--acv-white);
    padding: 1.75rem 2rem;
    border-bottom: 1px solid var(--gray-200);
    border-radius: 16px 16px 0 0;
    position: relative;
    z-index: 100;
    overflow: visible;
}

.section-header-card[b-8pb1isxgv3]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 16px 0 0 0;
}

.section-header-content[b-8pb1isxgv3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0;
}

.section-title-wrapper[b-8pb1isxgv3] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.section-header-actions[b-8pb1isxgv3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.section-title-group[b-8pb1isxgv3] {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

.section-title[b-8pb1isxgv3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
}

.section-title i[b-8pb1isxgv3] {
    color: var(--acv-primary);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.section-count-badge[b-8pb1isxgv3] {
    background: var(--acv-primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.section-subtitle[b-8pb1isxgv3] {
    color: var(--gray-600);
    font-size: 1rem;
    margin: 0;
    padding-left: calc(1.25rem + 0.75rem); /* Icon width + gap */
    line-height: 1.5;
}

/* Search Section */
.subjects-search-section[b-8pb1isxgv3] {
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    margin: 2rem;
    margin-bottom: 2rem;
    overflow: visible;
    padding: 1rem;
}

.search-container[b-8pb1isxgv3] {
    padding: 2rem;
}

.search-header[b-8pb1isxgv3] {
    margin-bottom: 1.5rem;
    text-align: center;
}

.search-title[b-8pb1isxgv3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 0.5rem 0;
}

.search-title i[b-8pb1isxgv3] {
    color: var(--acv-primary);
    font-size: 1.3rem;
}

.search-subtitle[b-8pb1isxgv3] {
    color: var(--gray-600);
    font-size: 1rem;
    margin: 0;
    font-weight: 400;
}

.search-content[b-8pb1isxgv3] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.search-main-row[b-8pb1isxgv3] {
    display: flex;
    gap: 1.5rem;
    align-items: flex-end;
    flex-wrap: wrap;
    justify-content: center;
}

.search-input-group[b-8pb1isxgv3] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-width: 300px;
    max-width: 600px;
}

.form-label[b-8pb1isxgv3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-700);
    margin: 0;
}

.form-label i[b-8pb1isxgv3] {
    color: var(--acv-primary);
    font-size: 0.8rem;
}

.form-input[b-8pb1isxgv3] {
    width: 100%;
    height: 48px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--acv-white);
    box-sizing: border-box;
}

.form-input:focus[b-8pb1isxgv3] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.search-controls[b-8pb1isxgv3] {
    display: flex;
    gap: 0.75rem;
    align-items: end;
    flex-shrink: 0;
}

.search-btn[b-8pb1isxgv3], .clear-btn[b-8pb1isxgv3] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border: none;
    padding: 0.75rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    box-sizing: border-box;
}

.search-btn:hover[b-8pb1isxgv3] {
    background: var(--acv-primary-700);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

.clear-btn[b-8pb1isxgv3] {
    background: var(--gray-500);
}

.clear-btn:hover[b-8pb1isxgv3] {
    background: var(--gray-600);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.exams-content[b-8pb1isxgv3],
.subjects-content[b-8pb1isxgv3] {
    padding: 2rem;
}

/* Exams Grid */
.exams-grid[b-8pb1isxgv3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.25rem;
}

.exam-card[b-8pb1isxgv3] {
    background: var(--acv-white);
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

.exam-card:hover[b-8pb1isxgv3] {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-color: var(--acv-primary);
    transform: translateY(-4px);
}

.exam-card-header[b-8pb1isxgv3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1.5rem 1rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
    position: relative;
    background: linear-gradient(135deg, var(--acv-white) 0%, var(--gray-50) 100%);
    gap: 1rem;
}

.exam-card-header[b-8pb1isxgv3]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 0 2px 2px 0;
}

.exam-subject-name[b-8pb1isxgv3] {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
    line-height: 1.4;
    flex: 1;
    min-height: 5.04rem; /* 3 lines: 1.2rem * 1.4 * 3 = 5.04rem */
    max-height: 5.04rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
}

.exam-status-badge[b-8pb1isxgv3] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.875rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    flex-shrink: 0;
}

.exam-status-badge.status-completed[b-8pb1isxgv3] {
    background: var(--success-lighter);
    color: var(--success-main);
}

.exam-status-badge.status-pending[b-8pb1isxgv3] {
    background: var(--warning-lighter);
    color: var(--warning-dark);
}

.exam-card-body[b-8pb1isxgv3] {
    padding: 1.5rem;
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.exam-info-item[b-8pb1isxgv3] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--gray-50);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.exam-info-item:hover[b-8pb1isxgv3] {
    background: var(--gray-100);
    transform: translateY(-2px);
}

.exam-info-item i[b-8pb1isxgv3] {
    color: var(--acv-primary);
    font-size: 1.125rem;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.exam-info-content[b-8pb1isxgv3] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    flex: 1;
}

.exam-info-label[b-8pb1isxgv3] {
    color: var(--gray-600);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0.01em;
}

.exam-info-value[b-8pb1isxgv3] {
    color: var(--gray-900);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
}

.exam-card-footer[b-8pb1isxgv3] {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--gray-200);
    display: flex;
    justify-content: flex-end;
}

.btn-exam-action[b-8pb1isxgv3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
    border: none;
    border-radius: 10px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.25);
}

.btn-exam-action:hover[b-8pb1isxgv3] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.35);
}

.exam-completed-badge[b-8pb1isxgv3] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: var(--success-lighter);
    color: var(--success-main);
    border-radius: 10px;
    font-size: 0.9375rem;
    font-weight: 600;
}

/* Subjects Grid */
.subjects-grid[b-8pb1isxgv3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
}

.subject-card[b-8pb1isxgv3] {
    background: var(--acv-white);
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

.subject-card:hover[b-8pb1isxgv3] {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-color: var(--acv-primary);
    transform: translateY(-4px);
}

.subject-card-header[b-8pb1isxgv3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1.5rem 1rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
    position: relative;
    background: linear-gradient(135deg, var(--acv-white) 0%, var(--gray-50) 100%);
}

.subject-card-header[b-8pb1isxgv3]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 0 2px 2px 0;
}

.subject-name[b-8pb1isxgv3] {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
    line-height: 1.4;
    flex: 1;
    min-height: 5.04rem; /* 3 lines: 1.2rem * 1.4 * 3 = 5.04rem */
    max-height: 5.04rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
}

.subject-card-body[b-8pb1isxgv3] {
    padding: 1.5rem;
    flex: 1;
}

.subject-code[b-8pb1isxgv3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--gray-600);
    font-size: 0.875rem;
}

.subject-code i[b-8pb1isxgv3] {
    color: var(--acv-primary);
    font-size: 0.875rem;
}

.subject-card-footer[b-8pb1isxgv3] {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--gray-200);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.btn-subject-action[b-8pb1isxgv3] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.25);
}

.btn-subject-action:hover[b-8pb1isxgv3] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.35);
}

.btn-subject-action i[b-8pb1isxgv3] {
    font-size: 0.8125rem;
}

.btn-subject-view[b-8pb1isxgv3] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: var(--acv-white);
    color: var(--acv-primary);
    border: 2px solid var(--acv-primary);
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(33, 76, 166, 0.1);
}

.btn-subject-view:hover[b-8pb1isxgv3] {
    background: var(--acv-primary);
    color: var(--acv-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.25);
}

.btn-subject-view i[b-8pb1isxgv3] {
    font-size: 0.8125rem;
}

/* Subject Detail Modal */
.modal-backdrop[b-8pb1isxgv3] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1050;
}

.modal[b-8pb1isxgv3] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1055;
    overflow-y: auto;
}

.modal.show[b-8pb1isxgv3] {
    display: flex !important;
}

.modal-dialog[b-8pb1isxgv3] {
    margin: 1.75rem auto;
    max-width: 90%;
    width: 100%;
}

.modal-dialog.modal-xl[b-8pb1isxgv3] {
    max-width: 1140px;
}

.modal-content[b-8pb1isxgv3] {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #ffffff !important;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    outline: 0;
    overflow: hidden;
}

.modal-header[b-8pb1isxgv3] {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #dee2e6;
    border-top-left-radius: calc(0.5rem - 1px);
    border-top-right-radius: calc(0.5rem - 1px);
    background-color: #f8f9fa !important;
}

.modal-title[b-8pb1isxgv3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
}

.modal-title i[b-8pb1isxgv3] {
    color: #214ca6 !important;
    font-size: 1.25rem;
}

.btn-close[b-8pb1isxgv3] {
    padding: 0.5rem 0.5rem;
    margin: -0.5rem -0.5rem -0.5rem auto;
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 0.25em 0.25em;
    color: #000;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: 0;
    border-radius: 0.375rem;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.15s ease-in-out;
}

.btn-close:hover[b-8pb1isxgv3] {
    color: #000;
    text-decoration: none;
    opacity: 0.75;
}

.btn-close:focus[b-8pb1isxgv3] {
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    opacity: 1;
}

.modal-body[b-8pb1isxgv3] {
    position: relative;
    flex: 1 1 auto;
    padding: 1.5rem;
    background-color: #ffffff !important;
    overflow-y: auto;
    max-height: calc(100vh - 200px);
}

.modal-footer[b-8pb1isxgv3] {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-end;
    padding: 0.75rem;
    border-top: 1px solid #dee2e6;
    border-bottom-right-radius: calc(0.5rem - 1px);
    border-bottom-left-radius: calc(0.5rem - 1px);
    background-color: #f8f9fa !important;
    gap: 0.5rem;
}

.subject-detail-loading[b-8pb1isxgv3],
.subject-detail-error[b-8pb1isxgv3] {
    display: flex;
        flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem 2rem;
    color: var(--gray-600);
    font-size: 1rem;
}

.subject-detail-loading i[b-8pb1isxgv3] {
    font-size: 2rem;
    color: var(--acv-primary);
    animation: spin-b-8pb1isxgv3 1s linear infinite;
}

.subject-detail-error i[b-8pb1isxgv3] {
    font-size: 2rem;
    color: var(--error-main);
}

@keyframes spin-b-8pb1isxgv3 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.subject-detail-info[b-8pb1isxgv3] {
    max-width: 900px;
    margin: 0 auto;
    background: transparent;
}

.subject-detail-info .detail-section-content[b-8pb1isxgv3] {
    background: #ffffff !important;
}

/* Subject Header Info */
.subject-header-info[b-8pb1isxgv3] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem;
    background: #ffffff !important;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
}

.subject-header-icon[b-8pb1isxgv3] {
    width: 64px;
    height: 64px;
    background: rgba(33, 76, 166, 0.1) !important;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #214ca6 !important;
    font-size: 2rem;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.1);
    border: 1px solid rgba(33, 76, 166, 0.2);
}

.subject-header-content[b-8pb1isxgv3] {
    flex: 1;
    color: #1f2937 !important;
}

.subject-header-title[b-8pb1isxgv3] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1f2937 !important;
    margin: 0;
    line-height: 1.3;
}

.subject-header-code[b-8pb1isxgv3] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(33, 76, 166, 0.1) !important;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #214ca6 !important;
    border: 1px solid rgba(33, 76, 166, 0.2) !important;
    box-shadow: 0 1px 3px rgba(33, 76, 166, 0.1);
    flex-shrink: 0;
    margin-left: auto;
}

.subject-header-code i[b-8pb1isxgv3] {
    font-size: 0.75rem;
    color: #214ca6 !important;
}

.subject-description[b-8pb1isxgv3] {
    color: #374151 !important;
    font-size: 1rem;
    line-height: 1.7;
    white-space: pre-wrap;
}

.subject-description p[b-8pb1isxgv3] {
    margin: 0;
    color: #374151 !important;
}

.detail-section[b-8pb1isxgv3] {
    background: #ffffff !important;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.detail-section-header[b-8pb1isxgv3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    border-bottom: 1px solid #dee2e6;
    position: relative;
}

.detail-section-header[b-8pb1isxgv3]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #214ca6 0%, #1e40af 100%);
    border-radius: 0 2px 2px 0;
}

.detail-section-header i[b-8pb1isxgv3] {
    color: #214ca6 !important;
    font-size: 1.1rem;
}

.detail-section-header h3[b-8pb1isxgv3] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1f2937 !important;
    margin: 0;
}

.detail-section-content[b-8pb1isxgv3] {
        padding: 1.5rem;
    }

.detail-row[b-8pb1isxgv3] {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--gray-100);
}

.detail-row:last-child[b-8pb1isxgv3] {
    border-bottom: none;
}

.detail-row.full-width[b-8pb1isxgv3] {
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.detail-label[b-8pb1isxgv3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--gray-700);
    font-size: 0.9375rem;
}

.detail-label i[b-8pb1isxgv3] {
    color: #214ca6 !important;
    font-size: 0.875rem;
    width: 16px;
}

.detail-label[b-8pb1isxgv3] {
    color: #374151 !important;
}

.detail-value[b-8pb1isxgv3] {
    color: #1f2937 !important;
    font-size: 0.9375rem;
    line-height: 1.6;
    word-break: break-word;
    font-weight: 500;
}

.detail-value code[b-8pb1isxgv3] {
    background: #f3f4f6 !important;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
    color: #214ca6 !important;
    border: 1px solid #e5e7eb;
}

.detail-value.description[b-8pb1isxgv3] {
    color: var(--gray-700);
    line-height: 1.7;
    white-space: pre-wrap;
}

.tags-container[b-8pb1isxgv3] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag-chip[b-8pb1isxgv3] {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #dbeafe 0%, rgba(33, 76, 166, 0.15) 100%) !important;
    color: #214ca6 !important;
    border: 1px solid #3b82f6 !important;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.tag-chip:hover[b-8pb1isxgv3] {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
}

/* Attachments */
.attachments-list[b-8pb1isxgv3] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.attachment-item[b-8pb1isxgv3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.attachment-item:hover[b-8pb1isxgv3] {
    background: var(--gray-100);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.attachment-info[b-8pb1isxgv3] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.attachment-icon[b-8pb1isxgv3] {
    width: 48px;
    height: 48px;
    background: #ffffff !important;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #214ca6 !important;
    font-size: 1.25rem;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid #e5e7eb;
}

.attachment-details[b-8pb1isxgv3] {
    flex: 1;
    min-width: 0;
}

.attachment-name[b-8pb1isxgv3] {
    font-weight: 600;
    color: var(--gray-900);
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
    word-break: break-word;
}

.attachment-type[b-8pb1isxgv3] {
    font-size: 0.825rem;
    color: var(--gray-600);
}

.attachment-download-btn[b-8pb1isxgv3] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%) !important;
    color: #ffffff !important;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.3);
    flex-shrink: 0;
}

.attachment-download-btn:hover[b-8pb1isxgv3] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.4);
    background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%) !important;
}

.attachment-download-btn i[b-8pb1isxgv3] {
    font-size: 0.875rem;
}

.no-attachments-message[b-8pb1isxgv3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
    background: var(--gray-50);
    border-radius: 12px;
    border: 2px dashed var(--gray-300);
}

.no-attachments-message i[b-8pb1isxgv3] {
    font-size: 3rem;
    color: var(--gray-400);
    margin-bottom: 1rem;
}

.no-attachments-message p[b-8pb1isxgv3] {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--gray-600);
}

.btn[b-8pb1isxgv3] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border: none;
    border-radius: 10px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-footer .btn-primary[b-8pb1isxgv3] {
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.25);
    border: none !important;
}

.modal-footer .btn-primary:hover[b-8pb1isxgv3] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.35);
    background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%) !important;
}

.modal-footer .btn-secondary[b-8pb1isxgv3] {
    background: #6c757d !important;
    border-color: #6c757d !important;
    color: #ffffff !important;
}

.modal-footer .btn-secondary:hover[b-8pb1isxgv3] {
    background: #5a6268 !important;
    border-color: #545b62 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
}

.modal-footer .btn-primary i[b-8pb1isxgv3],
.modal-footer .btn-secondary i[b-8pb1isxgv3] {
    font-size: 0.875rem;
}

/* Loading & Empty States */
.loading-state[b-8pb1isxgv3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3rem;
    color: var(--gray-600);
    font-size: 1rem;
}

.loading-state i[b-8pb1isxgv3] {
    font-size: 1.25rem;
    color: var(--acv-primary);
}

.empty-state[b-8pb1isxgv3] {
    text-align: center;
    padding: 3rem 2rem;
}

.empty-state-icon[b-8pb1isxgv3] {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: var(--gray-100);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-state-icon i[b-8pb1isxgv3] {
    font-size: 2.5rem;
    color: var(--gray-400);
}

.empty-state h3[b-8pb1isxgv3] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 0.5rem 0;
}

.empty-state p[b-8pb1isxgv3] {
    color: var(--gray-600);
    font-size: 0.9375rem;
    margin: 0;
}

/* Alert Error */
.alert-error[b-8pb1isxgv3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: var(--error-lighter);
    color: var(--error-main);
    border-radius: 12px;
    border: 1px solid var(--error-light);
    font-size: 0.9375rem;
    font-weight: 600;
}

.alert-error i[b-8pb1isxgv3] {
    font-size: 1.125rem;
}

/* Responsive */
@media (max-width: 992px) {
    .card-header-section[b-8pb1isxgv3] {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .card-header-actions[b-8pb1isxgv3] {
        width: 100%;
        justify-content: flex-start;
    }
    
    .exams-grid[b-8pb1isxgv3],
    .subjects-grid[b-8pb1isxgv3] {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    .exams-page[b-8pb1isxgv3] {
        padding: 0.5rem;
    }
    
    .card-header-section[b-8pb1isxgv3],
    .exams-section[b-8pb1isxgv3],
    .subjects-section[b-8pb1isxgv3] {
        padding: 1.5rem;
    }
    
    .subjects-search-section[b-8pb1isxgv3] {
        margin: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .search-container[b-8pb1isxgv3] {
        padding: 1.5rem;
    }
    
    .search-title[b-8pb1isxgv3] {
        font-size: 1.25rem;
    }
    
    .search-main-row[b-8pb1isxgv3] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .search-input-group[b-8pb1isxgv3] {
        min-width: 100%;
        max-width: 100%;
    }
    
    .search-controls[b-8pb1isxgv3] {
        width: 100%;
        justify-content: center;
    }
    
    .exams-grid[b-8pb1isxgv3],
    .subjects-grid[b-8pb1isxgv3] {
        grid-template-columns: 1fr;
    }
    
    .exam-card-body[b-8pb1isxgv3] {
        grid-template-columns: 1fr;
        gap: 0.875rem;
    }
    
    .exam-info-item[b-8pb1isxgv3] {
        padding: 0.625rem;
    }
    
    .card-header-actions[b-8pb1isxgv3] {
        flex-direction: column;
        width: 100%;
    }
    
    .btn-primary-header[b-8pb1isxgv3],
    .btn-secondary-header[b-8pb1isxgv3] {
        width: 100%;
        justify-content: center;
    }
}

/* Pagination Styles */
.table-footer[b-8pb1isxgv3] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 2rem;
    margin-top: 2rem;
    background: var(--acv-white);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.results-info[b-8pb1isxgv3] {
    color: var(--gray-600);
    font-size: 0.875rem;
    font-weight: 500;
    text-align: center;
}

.pagination-container[b-8pb1isxgv3] {
    display: flex;
    align-items: center;
}

.pagination-nav[b-8pb1isxgv3] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagination-btn[b-8pb1isxgv3] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: var(--acv-white);
    color: var(--gray-600);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s ease;
    cursor: pointer;
}

.pagination-btn:hover:not(:disabled)[b-8pb1isxgv3] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border-color: var(--acv-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.15);
}

.pagination-btn.active[b-8pb1isxgv3] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border-color: var(--acv-primary);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
}

.pagination-btn:disabled[b-8pb1isxgv3] {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--gray-100);
    color: var(--gray-400);
    border-color: var(--gray-200);
}

.pagination-btn:disabled:hover[b-8pb1isxgv3] {
    transform: none;
    box-shadow: none;
}

@media (max-width: 768px) {
    .table-footer[b-8pb1isxgv3] {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }
    
    .results-info[b-8pb1isxgv3] {
        text-align: center;
        font-size: 0.8125rem;
    }
    
    .pagination-nav[b-8pb1isxgv3] {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .pagination-btn[b-8pb1isxgv3] {
        min-width: 32px;
        height: 32px;
        font-size: 0.8125rem;
    }
}

/* SelectSearch tag option styling */
[b-8pb1isxgv3] .tag-option-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

[b-8pb1isxgv3] .tag-icon {
    color: var(--acv-primary);
    font-size: 0.875rem;
    flex-shrink: 0;
}

[b-8pb1isxgv3] .tag-name {
    flex: 1;
    font-weight: 500;
    color: var(--gray-800);
}

/* Exam Card Footer Layouts */
.exam-card-footer-flex[b-8pb1isxgv3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 8px;
}

.exam-card-footer-flex-even[b-8pb1isxgv3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.btn-exam-action-flex[b-8pb1isxgv3] {
    flex: 1;
}

.btn-exam-action-disabled[b-8pb1isxgv3] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Exam Feedback Alert */
.exam-feedback-alert[b-8pb1isxgv3] {
    margin: 1rem 2rem 0 2rem;
    padding: 0;
    border-bottom: 1px solid var(--gray-200);
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border-left: 4px solid var(--warning-main);
    border-right: 1px solid var(--gray-200);
    border-radius: 12px;
    animation: slideInDown-b-8pb1isxgv3 0.3s ease-out;
}

.exam-feedback-alert-content[b-8pb1isxgv3] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.75rem;
}

.exam-feedback-alert-icon[b-8pb1isxgv3] {
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: var(--warning-main);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.25rem;
    box-shadow: 0 2px 8px rgba(255, 171, 0, 0.3);
    flex-shrink: 0;
}

.exam-feedback-alert-text[b-8pb1isxgv3] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.exam-feedback-alert-title[b-8pb1isxgv3] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--warning-dark);
    margin: 0;
    line-height: 1.4;
}

.exam-feedback-alert-message[b-8pb1isxgv3] {
    font-size: 0.9375rem;
    color: #b45309;
    line-height: 1.6;
    margin: 0;
}

@keyframes slideInDown-b-8pb1isxgv3 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .exam-feedback-alert[b-8pb1isxgv3] {
        margin: 1rem 1rem 0 1rem;
    }
    
    .exam-feedback-alert-content[b-8pb1isxgv3] {
        padding: 1rem 1.25rem;
        gap: 0.75rem;
    }
    
    .exam-feedback-alert-icon[b-8pb1isxgv3] {
        width: 36px;
        height: 36px;
        min-width: 36px;
        font-size: 1.125rem;
    }
    
    .exam-feedback-alert-title[b-8pb1isxgv3] {
        font-size: 0.9375rem;
    }
    
    .exam-feedback-alert-message[b-8pb1isxgv3] {
        font-size: 0.875rem;
    }
}
/* _content/ltia.portal.web/Components/Exams/PracticeExam.razor.rz.scp.css */
/* CSS Variables */
.practice-exam-page[b-jlrm15vyvy] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    min-height: 100vh;
    background-color: var(--gray-100);
}

/* Layout */
.exam-layout[b-jlrm15vyvy] {
    display: flex;
    gap: 2rem;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 1rem 1rem;
    min-height: 100vh;
}

/* Sidebar */
.exam-sidebar[b-jlrm15vyvy] {
    width: 450px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: sticky;
    top: 2rem;
    height: fit-content;
    max-height: calc(100vh - 4rem);
    overflow-y: visible;
}

/* Sidebar Header */
.sidebar-header[b-jlrm15vyvy] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sidebar-header-icon[b-jlrm15vyvy] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.sidebar-header-text h3[b-jlrm15vyvy] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-800);
}

.sidebar-header-text p[b-jlrm15vyvy] {
    margin: 0.25rem 0 0 0;
    color: var(--gray-600);
    font-size: 0.875rem;
}

/* Timer Card */
.timer-card[b-jlrm15vyvy] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.timer-label[b-jlrm15vyvy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
    color: var(--gray-700);
    font-size: 0.9375rem;
}

    .timer-label i[b-jlrm15vyvy] {
        color: var(--acv-primary);
        font-size: 1rem;
    }

/* Timer Display */
.timer-display[b-jlrm15vyvy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 280px;
    margin: 0 auto;
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 2px solid var(--gray-200);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
    color: var(--gray-900);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

    /* Timer states */
    .timer-display.timer-warning[b-jlrm15vyvy] {
        border-color: #f59e0b;
        background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
        color: #b45309;
        box-shadow: 0 4px 16px rgba(245, 158, 11, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.5) inset, 0 0 20px rgba(245, 158, 11, 0.15);
        animation: pulse-warning-b-jlrm15vyvy 2s ease-in-out infinite;
    }

@keyframes pulse-warning-b-jlrm15vyvy {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 16px rgba(245, 158, 11, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.5) inset, 0 0 20px rgba(245, 158, 11, 0.15);
    }

    50% {
        transform: scale(1.02);
        box-shadow: 0 6px 24px rgba(245, 158, 11, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.5) inset, 0 0 30px rgba(245, 158, 11, 0.25);
    }
}

.timer-display.timer-critical[b-jlrm15vyvy] {
    border-color: #ef4444;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    color: #b91c1c;
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.5) inset, 0 0 30px rgba(239, 68, 68, 0.25);
    animation: pulse-critical-b-jlrm15vyvy 1s ease-in-out infinite;
}

@keyframes pulse-critical-b-jlrm15vyvy {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 20px rgba(239, 68, 68, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.5) inset, 0 0 30px rgba(239, 68, 68, 0.25);
    }

    50% {
        transform: scale(1.03);
        box-shadow: 0 6px 24px rgba(239, 68, 68, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.5) inset, 0 0 40px rgba(239, 68, 68, 0.35);
    }
}

.timer-display.timer-expired[b-jlrm15vyvy] {
    border-color: #9ca3af;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    color: #6b7280;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Progress Card */
.progress-card[b-jlrm15vyvy] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.progress-header[b-jlrm15vyvy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
    color: var(--gray-700);
    font-size: 0.9375rem;
}

    .progress-header i[b-jlrm15vyvy] {
        color: var(--acv-primary);
        font-size: 1rem;
    }

.progress-stats[b-jlrm15vyvy] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.progress-stat-item[b-jlrm15vyvy] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

    .progress-stat-item .stat-value[b-jlrm15vyvy] {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--acv-primary);
    }

    .progress-stat-item .stat-label[b-jlrm15vyvy] {
        font-size: 0.875rem;
        color: var(--gray-600);
        font-weight: 500;
    }

/* Navigation Card */
.navigation-card[b-jlrm15vyvy] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    flex: 1 1 auto;
    min-height: 200px;
    display: flex;
    flex-direction: column;
}

.navigation-header[b-jlrm15vyvy] {
    justify-content: center;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
    color: var(--gray-700);
    font-size: 0.9375rem;
}

    .navigation-header i[b-jlrm15vyvy] {
        color: var(--acv-primary);
        font-size: 1rem;
    }

.navigation-content[b-jlrm15vyvy] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    max-height: 500px;
}

/* Submit Section */
.submit-section[b-jlrm15vyvy] {
    margin-top: auto;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
}

.btn-submit-exam[b-jlrm15vyvy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
    border: none;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(33, 76, 166, 0.15), 0 1px 2px rgba(33, 76, 166, 0.1);
    position: relative;
    overflow: hidden;
}

    .btn-submit-exam[b-jlrm15vyvy]::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.5s;
    }

    .btn-submit-exam:hover:not(:disabled)[b-jlrm15vyvy]::before {
        left: 100%;
    }

    .btn-submit-exam:hover:not(:disabled)[b-jlrm15vyvy] {
        background: linear-gradient(135deg, var(--acv-primary-700) 0%, var(--acv-primary-800) 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(33, 76, 166, 0.25), 0 2px 4px rgba(33, 76, 166, 0.15);
    }

    .btn-submit-exam:active:not(:disabled)[b-jlrm15vyvy] {
        transform: translateY(0);
        box-shadow: 0 1px 3px rgba(33, 76, 166, 0.15);
    }

    .btn-submit-exam:disabled[b-jlrm15vyvy] {
        opacity: 0.5;
        cursor: not-allowed;
        background: var(--gray-400);
    }

    .btn-submit-exam i[b-jlrm15vyvy] {
        font-size: 0.8125rem;
        transition: transform 0.2s ease;
    }

    .btn-submit-exam:hover:not(:disabled) i[b-jlrm15vyvy] {
        transform: translateX(2px);
    }

/* Main Content */
.exam-content[b-jlrm15vyvy] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    position: relative;
    top: 16px;
}

/* Exam Header Card */
.exam-header-card[b-jlrm15vyvy] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.exam-header-content[b-jlrm15vyvy] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.exam-header-icon[b-jlrm15vyvy] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.75rem;
    flex-shrink: 0;
}

.exam-header-text h2[b-jlrm15vyvy] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-800);
}

.exam-header-text p[b-jlrm15vyvy] {
    margin: 0.25rem 0 0 0;
    color: var(--gray-600);
    font-size: 1rem;
}

/* Questions Container */
.questions-container[b-jlrm15vyvy] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Question Card */
.question-card[b-jlrm15vyvy] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 2px solid var(--gray-200);
    transition: all 0.3s ease;
}

    .question-card.current[b-jlrm15vyvy] {
        border-color: var(--acv-primary);
        box-shadow: 0 0 0 4px rgba(33, 76, 166, 0.1), 0 4px 12px rgba(33, 76, 166, 0.2);
        transform: translateY(-2px);
    }

.question-header[b-jlrm15vyvy] {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.question-number-wrapper[b-jlrm15vyvy] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.question-type-info[b-jlrm15vyvy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--gray-600);
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    background: var(--gray-50);
    border-radius: 8px;
    border: 1px solid var(--gray-200);
}

.question-type-info i[b-jlrm15vyvy] {
    color: var(--acv-primary);
    font-size: 0.875rem;
}

.question-type-info span[b-jlrm15vyvy] {
    color: var(--gray-700);
}

.question-number[b-jlrm15vyvy] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--gray-800);
    cursor: pointer;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    background: var(--gray-50);
    transition: all 0.2s ease;
}

    .question-number:hover[b-jlrm15vyvy] {
        background: var(--acv-primary-lighter);
        color: var(--acv-primary);
    }

    .question-number i[b-jlrm15vyvy] {
        color: var(--acv-primary);
        font-size: 1.125rem;
    }

    .question-number.flagged[b-jlrm15vyvy] {
        background: var(--warning-lighter);
        color: var(--warning-dark);
    }

        .question-number.flagged i[b-jlrm15vyvy] {
            color: var(--warning-dark);
        }

.answer-badge[b-jlrm15vyvy] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--success-lighter);
    color: var(--success-main);
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
}

    .answer-badge i[b-jlrm15vyvy] {
        font-size: 0.875rem;
    }

.question-body[b-jlrm15vyvy] {
    padding-top: 1rem;
}

/* Question Content Styles */
[b-jlrm15vyvy] .question {
    width: 100%;
}

[b-jlrm15vyvy] .question-content {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-800);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--gray-50);
    border-radius: 12px;
    border-left: 4px solid var(--acv-primary);
}

/* Answers List Styles */
[b-jlrm15vyvy] .answers-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

    [b-jlrm15vyvy] .answers-list li {
        margin: 0;
    }

    [b-jlrm15vyvy] .answers-list label {
        display: flex;
        align-items: flex-start;
        gap: 0.375rem;
        padding: 1rem 1.25rem;
        background: var(--acv-white);
        border: 2px solid var(--gray-200);
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.2s ease;
        position: relative;
    }

        [b-jlrm15vyvy] .answers-list label:hover {
            border-color: var(--acv-primary);
            background: var(--acv-primary-lighter);
        }

        [b-jlrm15vyvy] .answers-list label span.option-label {
            font-weight: 700;
            margin-top: 2px;
            color: var(--gray-900);
            font-size: 1rem;
            min-width: 1.25rem;
            flex-shrink: 0;
        }

        [b-jlrm15vyvy] .answers-list label span.option-content {
            margin-top: 1.5px;
            flex: 1;
            font-size: 1rem;
            color: var(--gray-700);
            line-height: 1.6;
            font-weight: 500;
        }

/* Option Content Wrapper */
[b-jlrm15vyvy] .option-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
}

/* Question Images */
[b-jlrm15vyvy] .question-images {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    justify-content: center;
}

[b-jlrm15vyvy] .question-image-wrapper {
    width: 30%;
    height: 30%;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid var(--gray-200);
    background: var(--gray-50);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}

[b-jlrm15vyvy] .question-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Answer Images */
[b-jlrm15vyvy] .answer-image-wrapper {
    width: 30%;
    height: 30%;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid var(--gray-200);
    background: var(--gray-50);
    display: flex;
    align-items: center;
    justify-content: center !important;
    margin: 0.5rem auto 0;
}

[b-jlrm15vyvy] .answer-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Custom Radio Button Styles */
[b-jlrm15vyvy] .answers-list input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 22px;
    height: 22px;
    min-width: 22px;
    border: 2px solid var(--gray-400);
    border-radius: 50%;
    background: var(--acv-white);
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    margin-top: 2px;
}

    [b-jlrm15vyvy] .answers-list input[type="radio"]:hover {
        border-color: var(--acv-primary);
        background: var(--acv-primary-lighter);
    }

    [b-jlrm15vyvy] .answers-list input[type="radio"]:checked {
        border-color: var(--acv-primary);
        background: var(--acv-white);
    }

        [b-jlrm15vyvy] .answers-list input[type="radio"]:checked::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--acv-primary);
        }

[b-jlrm15vyvy] .answers-list label:has(input[type="radio"]:checked) {
    border-color: var(--acv-primary);
    background: var(--acv-primary-lighter);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

/* Custom Checkbox Styles */
[b-jlrm15vyvy] .answers-list input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 22px;
    height: 22px;
    min-width: 22px;
    border: 2px solid var(--gray-400);
    border-radius: 6px;
    background: var(--acv-white);
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    margin-top: 2px;
}

    [b-jlrm15vyvy] .answers-list input[type="checkbox"]:hover {
        border-color: var(--acv-primary);
        background: var(--acv-primary-lighter);
    }

    [b-jlrm15vyvy] .answers-list input[type="checkbox"]:checked {
        border-color: var(--acv-primary);
        background: var(--acv-primary);
    }

        [b-jlrm15vyvy] .answers-list input[type="checkbox"]:checked::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(45deg);
            width: 6px;
            height: 10px;
            border: 2px solid var(--acv-white);
            border-top: none;
            border-left: none;
        }

[b-jlrm15vyvy] .answers-list label:has(input[type="checkbox"]:checked) {
    border-color: var(--acv-primary);
    background: var(--acv-primary-lighter);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

/* Focus States */
[b-jlrm15vyvy] .answers-list input[type="radio"]:focus,
[b-jlrm15vyvy] .answers-list input[type="checkbox"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.2);
}

/* Submit Section Bottom */
.submit-section-bottom[b-jlrm15vyvy] {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-200);
    display: flex;
    justify-content: center;
}

.btn-submit-exam-bottom[b-jlrm15vyvy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 0.875rem 2rem;
    background: var(--acv-primary);
    color: var(--acv-white);
    border: none;
    border-radius: 10px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.25);
    min-width: 200px;
}

    .btn-submit-exam-bottom:hover:not(:disabled)[b-jlrm15vyvy] {
        background: var(--acv-primary-700);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(33, 76, 166, 0.35);
    }

    .btn-submit-exam-bottom:active:not(:disabled)[b-jlrm15vyvy] {
        transform: translateY(0);
    }

    .btn-submit-exam-bottom:disabled[b-jlrm15vyvy] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .btn-submit-exam-bottom i[b-jlrm15vyvy] {
        font-size: 0.9375rem;
    }

/* Loading & Empty States */
.loading-state[b-jlrm15vyvy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem 2rem;
    min-height: 60vh;
    color: var(--gray-600);
}

    .loading-state i[b-jlrm15vyvy] {
        font-size: 2.5rem;
        color: var(--acv-primary);
    }

    .loading-state span[b-jlrm15vyvy] {
        font-size: 1.125rem;
        font-weight: 500;
    }

.empty-state[b-jlrm15vyvy] {
    text-align: center;
    padding: 4rem 2rem;
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.empty-state-icon[b-jlrm15vyvy] {
    width: 100px;
    height: 100px;
    background: var(--gray-100);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

    .empty-state-icon i[b-jlrm15vyvy] {
        font-size: 3rem;
        color: var(--gray-400);
    }

.empty-state h3[b-jlrm15vyvy] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 0.5rem 0;
}

.empty-state p[b-jlrm15vyvy] {
    color: var(--gray-600);
    font-size: 1rem;
    margin: 0;
}

/* Responsive */
@media (max-width: 1200px) {
    .exam-layout[b-jlrm15vyvy] {
        flex-direction: column;
        padding: 1.5rem;
        padding-left: 0;
        padding-right: 0;
    }

    .exam-sidebar[b-jlrm15vyvy] {
        width: 100%;
        position: static;
        max-height: none;
    }

    .exam-sidebar[b-jlrm15vyvy] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1rem;
    }

    .submit-section[b-jlrm15vyvy] {
        grid-column: 1 / -1;
    }

    /* Responsive Images */
    [b-jlrm15vyvy] .question-image-wrapper,
    [b-jlrm15vyvy] .answer-image-wrapper {
        width: 100%;
        max-width: 300px;
        height: 200px;
    }
}

@media (max-width: 768px) {
    .practice-exam-page[b-jlrm15vyvy] {
        padding: 0;
    }

    .exam-layout[b-jlrm15vyvy] {
        padding: 1rem;
        gap: 1rem;
    }

    .exam-sidebar[b-jlrm15vyvy] {
        grid-template-columns: 1fr;
    }

    .exam-header-card[b-jlrm15vyvy] {
        padding: 1.5rem;
    }

    .question-card[b-jlrm15vyvy] {
        padding: 1.5rem;
    }

    .exam-header-content[b-jlrm15vyvy] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .sidebar-header[b-jlrm15vyvy] {
        flex-direction: column;
        text-align: center;
    }

    /* Responsive Images */
    [b-jlrm15vyvy] .question-images {
        gap: 0.75rem;
    }

    [b-jlrm15vyvy] .question-image-wrapper,
    [b-jlrm15vyvy] .answer-image-wrapper {
        width: 100%;
        max-width: 100%;
        height: 180px;
    }
}

/* Scroll to Top Button */
.scroll-to-top[b-jlrm15vyvy] {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 48px;
    height: 48px;
    background: var(--acv-primary);
    color: var(--acv-white);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}

    .scroll-to-top.visible[b-jlrm15vyvy] {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .scroll-to-top:hover[b-jlrm15vyvy] {
        background: var(--acv-primary-700);
        transform: translateY(-4px);
        box-shadow: 0 6px 16px rgba(33, 76, 166, 0.4);
    }

    .scroll-to-top:active[b-jlrm15vyvy] {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(33, 76, 166, 0.3);
    }

    .scroll-to-top i[b-jlrm15vyvy] {
        font-size: 1.125rem;
        transition: transform 0.2s ease;
    }

    .scroll-to-top:hover i[b-jlrm15vyvy] {
        transform: translateY(-2px);
    }
/* _content/ltia.portal.web/Components/Exams/PracticeResults.razor.rz.scp.css */
/* CSS Variables */
.practice-results-page[b-im457pvume] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    
    min-height: 100vh;
    background-color: var(--gray-100);
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Results Container */
.results-container[b-im457pvume] {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    overflow: hidden;
}

/* Header Section */
.results-header[b-im457pvume] {
    background: var(--acv-white);
    padding: 2.5rem 2rem;
    text-align: center;
    position: relative;
    border-bottom: 1px solid var(--gray-200);
}

.back-button[b-im457pvume] {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: var(--gray-100);
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.9375rem;
    text-decoration: none;
    transition: all 0.2s ease;
    z-index: 10;
}

.back-button:hover[b-im457pvume] {
    background: var(--gray-200);
    border-color: var(--gray-400);
    color: var(--gray-900);
    text-decoration: none;
    transform: translateX(-2px);
}

.back-button i[b-im457pvume] {
    font-size: 0.875rem;
}

/* Results Icon Container */
.results-icon-container[b-im457pvume] {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.results-icon[b-im457pvume] {
    width: 64px;
    height: 64px;
    background: var(--acv-primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.results-icon[b-im457pvume]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
    border-radius: 12px;
}

.results-icon i[b-im457pvume] {
    font-size: 2rem;
    color: var(--acv-white);
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.results-title[b-im457pvume] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 0.5rem 0;
}

.results-subtitle[b-im457pvume] {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--gray-600);
    margin: 0 0 1rem 0;
}

.result-badge[b-im457pvume] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9375rem;
    margin-top: 0.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.result-badge.passed[b-im457pvume] {
    background: var(--success-lighter);
    color: var(--success-dark);
    border: 2px solid var(--success-main);
}

.result-badge.passed i[b-im457pvume] {
    color: var(--success-main);
}

.result-badge.failed[b-im457pvume] {
    background: var(--error-lighter);
    color: var(--error-dark);
    border: 2px solid var(--error-main);
}

.result-badge.failed i[b-im457pvume] {
    color: var(--error-main);
}

.result-badge i[b-im457pvume] {
    font-size: 1rem;
}

.result-badge span[b-im457pvume] {
    font-size: 0.9375rem;
}

.results-status-box[b-im457pvume] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    background: var(--gray-100);
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    color: var(--gray-700);
    font-weight: 500;
    font-size: 0.9375rem;
    margin-top: 1rem;
}

.results-status-box i[b-im457pvume] {
    font-size: 1rem;
    color: var(--acv-primary);
}

/* Empty State */
.results-header-empty[b-im457pvume] {
    padding: 4rem 2rem;
    text-align: center;
}

.empty-icon[b-im457pvume] {
    width: 80px;
    height: 80px;
    background: var(--acv-primary-lighter);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    border: 2px solid var(--acv-primary);
}

.empty-icon i[b-im457pvume] {
    font-size: 2.5rem;
    color: var(--acv-primary);
}

.results-header-empty .results-title[b-im457pvume] {
    margin-bottom: 1rem;
    color: var(--gray-800);
}

.empty-description[b-im457pvume] {
    color: var(--gray-600);
    margin-bottom: 2.5rem;
    font-size: 1rem;
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.results-header-empty .action-buttons[b-im457pvume] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.results-header-empty .action-btn[b-im457pvume] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9375rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 160px;
    justify-content: center;
}

.results-header-empty .action-btn:hover[b-im457pvume] {
    opacity: 0.9;
}

.results-header-empty .action-btn i[b-im457pvume] {
    font-size: 1rem;
}

/* Score Section */
.score-section[b-im457pvume] {
    padding: 2rem;
    background: var(--acv-white);
}

.score-grid[b-im457pvume] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.score-card[b-im457pvume] {
    background: var(--acv-white);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.score-card[b-im457pvume]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--acv-primary);
    opacity: 0;
}

.score-card:hover[b-im457pvume] {
    border-color: var(--acv-primary);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.15);
}

.score-card:hover[b-im457pvume]::before {
    opacity: 1;
}

.score-label[b-im457pvume] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--gray-700);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.score-label i[b-im457pvume] {
    font-size: 1rem;
    color: var(--acv-primary);
}

.score-value[b-im457pvume] {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    line-height: 1;
    color: var(--acv-primary);
}

.score-description[b-im457pvume] {
    font-size: 0.875rem;
    color: var(--gray-600);
    font-weight: 500;
}

/* Action Section */
.action-section[b-im457pvume] {
    padding: 2rem;
    background: var(--acv-white);
    border-top: 1px solid var(--gray-200);
}

.action-title[b-im457pvume] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 1.5rem 0;
    text-align: center;
}

.action-buttons[b-im457pvume] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.action-btn[b-im457pvume] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    min-width: 160px;
    justify-content: center;
}

.action-btn:hover[b-im457pvume] {
    text-decoration: none;
    opacity: 0.9;
}

.action-btn.success[b-im457pvume] {
    background: var(--acv-primary);
    color: var(--acv-white);
}

.action-btn.success:hover[b-im457pvume] {
    background: var(--acv-primary-700);
    color: var(--acv-white);
}

.action-btn.primary[b-im457pvume] {
    background: var(--acv-primary);
    color: var(--acv-white);
}

.action-btn.primary:hover[b-im457pvume] {
    background: var(--acv-primary-700);
    color: var(--acv-white);
}

.action-btn.secondary[b-im457pvume] {
    background: var(--gray-500);
    color: var(--acv-white);
}

.action-btn.secondary:hover[b-im457pvume] {
    background: var(--gray-600);
    color: var(--acv-white);
}

.action-btn.info[b-im457pvume] {
    background: var(--acv-primary);
    color: var(--acv-white);
}

.action-btn.info:hover[b-im457pvume] {
    background: var(--acv-primary-700);
    color: var(--acv-white);
}

.action-btn i[b-im457pvume] {
    font-size: 1rem;
}

/* Review Section */
.review-section[b-im457pvume] {
    padding: 2rem;
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
    animation: slideInUp-b-im457pvume 0.3s ease-out;
}

.review-summary[b-im457pvume] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.review-summary-card[b-im457pvume] {
    background: var(--acv-white);
    border: 2px solid;
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.2s ease;
}

.review-summary-card.correct[b-im457pvume] {
    border-color: var(--success-main);
    background: var(--success-lighter);
}

.review-summary-card.wrong[b-im457pvume] {
    border-color: var(--error-main);
    background: var(--error-lighter);
}

.review-summary-card.unanswered[b-im457pvume] {
    border-color: var(--gray-400);
    background: var(--acv-white);
}

.review-summary-icon[b-im457pvume] {
    font-size: 2rem;
    margin-bottom: 0.75rem;
}

.review-summary-card.correct .review-summary-icon[b-im457pvume] {
    color: var(--success-main);
}

.review-summary-card.wrong .review-summary-icon[b-im457pvume] {
    color: var(--error-main);
}

.review-summary-card.unanswered .review-summary-icon[b-im457pvume] {
    color: var(--gray-600);
}

.review-summary-label[b-im457pvume] {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.review-summary-card.correct .review-summary-label[b-im457pvume] {
    color: var(--success-dark);
}

.review-summary-card.wrong .review-summary-label[b-im457pvume] {
    color: var(--error-dark);
}

.review-summary-card.unanswered .review-summary-label[b-im457pvume] {
    color: var(--gray-700);
}

.review-summary-value[b-im457pvume] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.review-summary-card.correct .review-summary-value[b-im457pvume] {
    color: var(--success-main);
}

.review-summary-card.wrong .review-summary-value[b-im457pvume] {
    color: var(--error-main);
}

.review-summary-card.unanswered .review-summary-value[b-im457pvume] {
    color: var(--gray-700);
}

/* Questions Review */
.questions-review[b-im457pvume] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.review-question-card[b-im457pvume] {
    background: var(--acv-white);
    border: 2px solid var(--gray-200);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.2s ease;
}

.review-question-card.correct[b-im457pvume] {
    border-left: 4px solid var(--success-main);
}

.review-question-card.wrong[b-im457pvume] {
    border-left: 4px solid var(--error-main);
}

.review-question-card.unanswered[b-im457pvume] {
    border-left: 4px solid var(--gray-400);
}

.review-question-header[b-im457pvume] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--gray-200);
}

.review-question-number[b-im457pvume] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.review-question-number-text[b-im457pvume] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gray-800);
}

.review-question-status-badge[b-im457pvume] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
}

.review-question-status-badge.correct[b-im457pvume] {
    background: var(--success-lighter);
    color: var(--success-dark);
}

.review-question-status-badge.wrong[b-im457pvume] {
    background: var(--error-lighter);
    color: var(--error-dark);
}

.review-question-status-badge.unanswered[b-im457pvume] {
    background: var(--gray-100);
    color: var(--gray-700);
}

.review-question-content[b-im457pvume] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.review-question-text[b-im457pvume] {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--gray-800);
    font-weight: 500;
}

.review-question-images[b-im457pvume] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.review-question-image[b-im457pvume] {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--gray-200);
}

.review-answers[b-im457pvume] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

.review-answer-item[b-im457pvume] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border: 2px solid var(--gray-200);
    border-radius: 8px;
    background: var(--acv-white);
    transition: all 0.2s ease;
}

.review-answer-item.correct-answer[b-im457pvume] {
    border-color: var(--success-main);
    background: var(--success-lighter);
}

.review-answer-item.wrong-selected[b-im457pvume] {
    border-color: var(--error-main);
    background: var(--error-lighter);
}

.review-answer-key[b-im457pvume] {
    flex-shrink: 0;
}

.review-answer-letter[b-im457pvume] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--acv-primary);
    color: var(--acv-white);
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.875rem;
}

.review-answer-item.correct-answer .review-answer-letter[b-im457pvume] {
    background: var(--success-main);
}

.review-answer-item.wrong-selected .review-answer-letter[b-im457pvume] {
    background: var(--error-main);
}

.review-answer-content[b-im457pvume] {
    flex: 1;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--gray-800);
}

.review-answer-indicator[b-im457pvume] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    flex-shrink: 0;
    background: var(--success-lighter);
    color: var(--success-dark);
}

.review-answer-indicator.wrong[b-im457pvume] {
    background: var(--error-lighter);
    color: var(--error-dark);
}

/* Responsive Design */
@media (max-width: 768px) {
    .practice-results-page[b-im457pvume] {
        padding: 1rem;
    }

    .results-header[b-im457pvume] {
        padding: 2rem 1.5rem;
    }

    .back-button[b-im457pvume] {
        top: 1rem;
        left: 1rem;
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }

    .results-title[b-im457pvume] {
        font-size: 1.75rem;
    }

    .results-subtitle[b-im457pvume] {
        font-size: 1rem;
    }

    .results-status-box[b-im457pvume] {
        padding: 0.875rem 1.25rem;
        font-size: 0.9375rem;
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }

    .score-section[b-im457pvume] {
        padding: 1.5rem;
    }

    .score-grid[b-im457pvume] {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 1rem;
    }

    .score-card[b-im457pvume] {
        padding: 1.25rem;
    }

    .score-value[b-im457pvume] {
        font-size: 1.75rem;
    }

    .action-section[b-im457pvume] {
        padding: 1.5rem;
    }

    .action-buttons[b-im457pvume] {
        flex-direction: column;
        align-items: stretch;
    }

    .action-btn[b-im457pvume] {
        width: 100%;
        max-width: none;
    }

    .results-header-empty[b-im457pvume] {
        padding: 2.5rem 1.5rem;
    }

    .empty-icon[b-im457pvume] {
        width: 64px;
        height: 64px;
        margin-bottom: 1.25rem;
    }

    .empty-icon i[b-im457pvume] {
        font-size: 2rem;
    }

    .results-header-empty .results-title[b-im457pvume] {
        font-size: 1.5rem;
    }

    .empty-description[b-im457pvume] {
        font-size: 0.9375rem;
        margin-bottom: 2rem;
    }

    .results-header-empty .action-buttons[b-im457pvume] {
        flex-direction: column;
        align-items: stretch;
    }

    .results-header-empty .action-btn[b-im457pvume] {
        width: 100%;
        max-width: none;
    }

    .review-section[b-im457pvume] {
        padding: 1.5rem;
    }

    .review-summary[b-im457pvume] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .review-question-card[b-im457pvume] {
        padding: 1rem;
    }

    .review-question-header[b-im457pvume] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .review-answer-item[b-im457pvume] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .review-answer-indicator[b-im457pvume] {
        align-self: flex-start;
    }
}

/* Scroll to Top Button */
.scroll-to-top[b-im457pvume] {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 48px;
    height: 48px;
    background: var(--acv-primary);
    color: var(--acv-white);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}

.scroll-to-top.visible[b-im457pvume] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-to-top:hover[b-im457pvume] {
    background: var(--acv-primary-700);
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(33, 76, 166, 0.4);
}

.scroll-to-top:active[b-im457pvume] {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.3);
}

.scroll-to-top i[b-im457pvume] {
    font-size: 1.125rem;
    transition: transform 0.2s ease;
}

.scroll-to-top:hover i[b-im457pvume] {
    transform: translateY(-2px);
}

/* Review Answer Images */
.review-answer-image-wrapper[b-im457pvume] {
    margin-top: 0.75rem;
    width: 100%;
}

.review-answer-image[b-im457pvume] {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--gray-200);
}

/* Animation */
@keyframes slideInUp-b-im457pvume {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* _content/ltia.portal.web/Components/Exams/RealExam.razor.rz.scp.css */
/* CSS Variables */
.practice-exam-page[b-xis2z25rt0] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    
    min-height: 100vh;
    background-color: var(--gray-100);
}

/* Layout */
.exam-layout[b-xis2z25rt0] {
    display: flex;
    gap: 2rem;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 1rem 1rem;
    min-height: 100vh;
}

/* Sidebar */
.exam-sidebar[b-xis2z25rt0] {
    width: 450px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: sticky;
    top: 2rem;
    height: fit-content;
    max-height: calc(100vh - 4rem);
    overflow-y: visible;
}

/* Sidebar Header */
.sidebar-header[b-xis2z25rt0] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sidebar-header-icon[b-xis2z25rt0] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.sidebar-header-text h3[b-xis2z25rt0] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-800);
}

.sidebar-header-text p[b-xis2z25rt0] {
    margin: 0.25rem 0 0 0;
    color: var(--gray-600);
    font-size: 0.875rem;
}

/* Timer Card */
.timer-card[b-xis2z25rt0] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.timer-label[b-xis2z25rt0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
    color: var(--gray-700);
    font-size: 0.9375rem;
}

.timer-label i[b-xis2z25rt0] {
    color: var(--acv-primary);
    font-size: 1rem;
}

/* Timer Container */
.timer-container[b-xis2z25rt0] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.timer-container.timer-warning[b-xis2z25rt0] {
    animation: pulse-warning-b-xis2z25rt0 2s ease-in-out infinite;
}

@keyframes pulse-warning-b-xis2z25rt0 {
    0%, 100% { 
        transform: scale(1); 
    }
    50% { 
        transform: scale(1.02); 
    }
}

.timer-container.timer-critical[b-xis2z25rt0] {
    animation: pulse-critical-b-xis2z25rt0 1s ease-in-out infinite;
}

@keyframes pulse-critical-b-xis2z25rt0 {
    0%, 100% { 
        transform: scale(1);
    }
    50% { 
        transform: scale(1.03);
    }
}

.timer-container.timer-expired[b-xis2z25rt0] {
    opacity: 0.6;
}

/* Progress Card */
.progress-card[b-xis2z25rt0] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.progress-header[b-xis2z25rt0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
    color: var(--gray-700);
    font-size: 0.9375rem;
}

.progress-header i[b-xis2z25rt0] {
    color: var(--acv-primary);
    font-size: 1rem;
}

.progress-stats[b-xis2z25rt0] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.progress-stat-item[b-xis2z25rt0] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.progress-stat-item .stat-value[b-xis2z25rt0] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--acv-primary);
}

.progress-stat-item .stat-label[b-xis2z25rt0] {
    font-size: 0.875rem;
    color: var(--gray-600);
    font-weight: 500;
}

/* Navigation Card */
.navigation-card[b-xis2z25rt0] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    flex: 1 1 auto;
    min-height: 200px;
    display: flex;
    flex-direction: column;
}

.navigation-header[b-xis2z25rt0] {
    justify-content: center;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
    color: var(--gray-700);
    font-size: 0.9375rem;
}

.navigation-header i[b-xis2z25rt0] {
    color: var(--acv-primary);
    font-size: 1rem;
}

.navigation-content[b-xis2z25rt0] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    max-height: 500px;
}

/* Submit Section */
.submit-section[b-xis2z25rt0] {
    margin-top: auto;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
}

.btn-submit-exam[b-xis2z25rt0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
    border: none;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(33, 76, 166, 0.15), 0 1px 2px rgba(33, 76, 166, 0.1);
    position: relative;
    overflow: hidden;
}

.btn-submit-exam[b-xis2z25rt0]::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.5s;
}

.btn-submit-exam:hover:not(:disabled)[b-xis2z25rt0]::before {
    left: 100%;
}

.btn-submit-exam:hover:not(:disabled)[b-xis2z25rt0] {
    background: linear-gradient(135deg, var(--acv-primary-700) 0%, var(--acv-primary-800) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(33, 76, 166, 0.25), 0 2px 4px rgba(33, 76, 166, 0.15);
}

.btn-submit-exam:active:not(:disabled)[b-xis2z25rt0] {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(33, 76, 166, 0.15);
}

.btn-submit-exam:disabled[b-xis2z25rt0] {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--gray-400);
}

.btn-submit-exam i[b-xis2z25rt0] {
    font-size: 0.8125rem;
    transition: transform 0.2s ease;
}

.btn-submit-exam:hover:not(:disabled) i[b-xis2z25rt0] {
    transform: translateX(2px);
}

/* Main Content */
.exam-content[b-xis2z25rt0] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    position: relative;
    top: 16px;
}

/* Exam Header Card */
.exam-header-card[b-xis2z25rt0] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.exam-header-content[b-xis2z25rt0] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.exam-header-icon[b-xis2z25rt0] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.75rem;
    flex-shrink: 0;
}

.exam-header-text h2[b-xis2z25rt0] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-800);
}

.exam-header-text p[b-xis2z25rt0] {
    margin: 0.25rem 0 0 0;
    color: var(--gray-600);
    font-size: 1rem;
}

/* Questions Container */
.questions-container[b-xis2z25rt0] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Question Card */
.question-card[b-xis2z25rt0] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 2px solid var(--gray-200);
    transition: all 0.3s ease;
}

.question-card.current[b-xis2z25rt0] {
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 4px rgba(33, 76, 166, 0.1), 0 4px 12px rgba(33, 76, 166, 0.2);
    transform: translateY(-2px);
}

.question-header[b-xis2z25rt0] {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.question-number-wrapper[b-xis2z25rt0] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.question-type-info[b-xis2z25rt0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--gray-600);
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    background: var(--gray-50);
    border-radius: 8px;
    border: 1px solid var(--gray-200);
}

.question-type-info i[b-xis2z25rt0] {
    color: var(--acv-primary);
    font-size: 0.875rem;
}

.question-type-info span[b-xis2z25rt0] {
    color: var(--gray-700);
}

.question-number[b-xis2z25rt0] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--gray-800);
    cursor: pointer;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    background: var(--gray-50);
    transition: all 0.2s ease;
}

.question-number:hover[b-xis2z25rt0] {
    background: var(--acv-primary-lighter);
    color: var(--acv-primary);
}

.question-number i[b-xis2z25rt0] {
    color: var(--acv-primary);
    font-size: 1.125rem;
}

.question-number.flagged[b-xis2z25rt0] {
    background: var(--warning-lighter);
    color: var(--warning-dark);
}

.question-number.flagged i[b-xis2z25rt0] {
    color: var(--warning-dark);
}

.answer-badge[b-xis2z25rt0] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--success-lighter);
    color: var(--success-main);
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
}

.answer-badge i[b-xis2z25rt0] {
    font-size: 0.875rem;
}

.question-body[b-xis2z25rt0] {
    padding-top: 1rem;
}

/* Question Content Styles */
[b-xis2z25rt0] .question {
    width: 100%;
}

[b-xis2z25rt0] .question-content {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-800);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--gray-50);
    border-radius: 12px;
    border-left: 4px solid var(--acv-primary);
}

/* Answers List Styles */
[b-xis2z25rt0] .answers-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

[b-xis2z25rt0] .answers-list li {
    margin: 0;
}

[b-xis2z25rt0] .answers-list label {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    padding: 1rem 1.25rem;
    background: var(--acv-white);
    border: 2px solid var(--gray-200);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

[b-xis2z25rt0] .answers-list label:hover {
    border-color: var(--acv-primary);
    background: var(--acv-primary-lighter);
}

[b-xis2z25rt0] .answers-list label span.option-label {
    font-weight: 700;
    margin-top: 2px;
    color: var(--gray-900);
    font-size: 1rem;
    min-width: 1.25rem;
    flex-shrink: 0;
}

[b-xis2z25rt0] .answers-list label span.option-content {
    margin-top: 1.5px;
    flex: 1;
    font-size: 1rem;
    color: var(--gray-700);
    line-height: 1.6;
    font-weight: 500;
}

/* Option Content Wrapper */
[b-xis2z25rt0] .option-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
}

/* Question Images */
[b-xis2z25rt0] .question-images {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    justify-content: center;
}

[b-xis2z25rt0] .question-image-wrapper {
    width: 30%;
    height: 30%;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid var(--gray-200);
    background: var(--gray-50);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}

[b-xis2z25rt0] .question-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Answer Images */
[b-xis2z25rt0] .answer-image-wrapper {
    width: 30%;
    height: 30%;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid var(--gray-200);
    background: var(--gray-50);
    display: flex;
    align-items: center;
    justify-content: center !important;
    margin: 0.5rem auto 0;
}

[b-xis2z25rt0] .answer-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Custom Radio Button Styles */
[b-xis2z25rt0] .answers-list input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 22px;
    height: 22px;
    min-width: 22px;
    border: 2px solid var(--gray-400);
    border-radius: 50%;
    background: var(--acv-white);
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    margin-top: 2px;
}

[b-xis2z25rt0] .answers-list input[type="radio"]:hover {
    border-color: var(--acv-primary);
    background: var(--acv-primary-lighter);
}

[b-xis2z25rt0] .answers-list input[type="radio"]:checked {
    border-color: var(--acv-primary);
    background: var(--acv-white);
}

[b-xis2z25rt0] .answers-list input[type="radio"]:checked::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--acv-primary);
}

[b-xis2z25rt0] .answers-list label:has(input[type="radio"]:checked) {
    border-color: var(--acv-primary);
    background: var(--acv-primary-lighter);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

/* Custom Checkbox Styles */
[b-xis2z25rt0] .answers-list input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 22px;
    height: 22px;
    min-width: 22px;
    border: 2px solid var(--gray-400);
    border-radius: 6px;
    background: var(--acv-white);
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    margin-top: 2px;
}

[b-xis2z25rt0] .answers-list input[type="checkbox"]:hover {
    border-color: var(--acv-primary);
    background: var(--acv-primary-lighter);
}

[b-xis2z25rt0] .answers-list input[type="checkbox"]:checked {
    border-color: var(--acv-primary);
    background: var(--acv-primary);
}

[b-xis2z25rt0] .answers-list input[type="checkbox"]:checked::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 6px;
    height: 10px;
    border: 2px solid var(--acv-white);
    border-top: none;
    border-left: none;
}

[b-xis2z25rt0] .answers-list label:has(input[type="checkbox"]:checked) {
    border-color: var(--acv-primary);
    background: var(--acv-primary-lighter);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

/* Focus States */
[b-xis2z25rt0] .answers-list input[type="radio"]:focus,
[b-xis2z25rt0] .answers-list input[type="checkbox"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.2);
}

/* Loading & Empty States */
.loading-state[b-xis2z25rt0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem 2rem;
    min-height: 60vh;
    color: var(--gray-600);
}

.loading-state i[b-xis2z25rt0] {
    font-size: 2.5rem;
    color: var(--acv-primary);
}

.loading-state span[b-xis2z25rt0] {
    font-size: 1.125rem;
    font-weight: 500;
}

.empty-state[b-xis2z25rt0] {
    text-align: center;
    padding: 4rem 2rem;
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.empty-state-icon[b-xis2z25rt0] {
    width: 100px;
    height: 100px;
    background: var(--gray-100);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.empty-state-icon i[b-xis2z25rt0] {
    font-size: 3rem;
    color: var(--gray-400);
}

.empty-state h3[b-xis2z25rt0] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 0.5rem 0;
}

.empty-state p[b-xis2z25rt0] {
    color: var(--gray-600);
    font-size: 1rem;
    margin: 0;
}

/* Responsive */
@media (max-width: 1200px) {
    .exam-layout[b-xis2z25rt0] {
        flex-direction: column;
        padding: 1.5rem;
        padding-left: 0;
        padding-right: 0;
    }

    .exam-sidebar[b-xis2z25rt0] {
        width: 100%;
        position: static;
        max-height: none;
    }

    .exam-sidebar[b-xis2z25rt0] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1rem;
    }

    .submit-section[b-xis2z25rt0] {
        grid-column: 1 / -1;
    }

    /* Responsive Images */
    [b-xis2z25rt0] .question-image-wrapper,
    [b-xis2z25rt0] .answer-image-wrapper {
        width: 100%;
        max-width: 300px;
        height: 200px;
    }
}

@media (max-width: 768px) {
    .practice-exam-page[b-xis2z25rt0] {
        padding: 0;
    }

    .exam-layout[b-xis2z25rt0] {
        padding: 1rem;
        gap: 1rem;
    }

    .exam-sidebar[b-xis2z25rt0] {
        grid-template-columns: 1fr;
    }

    .exam-header-card[b-xis2z25rt0] {
        padding: 1.5rem;
    }

    .question-card[b-xis2z25rt0] {
        padding: 1.5rem;
    }

    .exam-header-content[b-xis2z25rt0] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .sidebar-header[b-xis2z25rt0] {
        flex-direction: column;
        text-align: center;
    }

    /* Responsive Images */
    [b-xis2z25rt0] .question-images {
        gap: 0.75rem;
    }

    [b-xis2z25rt0] .question-image-wrapper,
    [b-xis2z25rt0] .answer-image-wrapper {
        width: 100%;
        max-width: 100%;
        height: 180px;
    }
}

/* Scroll to Top Button */
.scroll-to-top[b-xis2z25rt0] {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 48px;
    height: 48px;
    background: var(--acv-primary);
    color: var(--acv-white);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}

.scroll-to-top.visible[b-xis2z25rt0] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-to-top:hover[b-xis2z25rt0] {
    background: var(--acv-primary-700);
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(33, 76, 166, 0.4);
}

.scroll-to-top:active[b-xis2z25rt0] {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.3);
}

.scroll-to-top i[b-xis2z25rt0] {
    font-size: 1.125rem;
    transition: transform 0.2s ease;
}

.scroll-to-top:hover i[b-xis2z25rt0] {
    transform: translateY(-2px);
}

/* Error Container */
.error-container[b-xis2z25rt0] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
    background-color: var(--gray-100);
}

.error-card[b-xis2z25rt0] {
    max-width: 500px;
    width: 100%;
    background: linear-gradient(135deg, #fff5f5 0%, #ffe5e5 100%);
    border-radius: 16px;
    padding: 3rem 2.5rem;
    box-shadow: 0 8px 32px rgba(255, 86, 48, 0.15);
    border: 2px solid var(--error-main);
    text-align: center;
    animation: slideInUp-b-xis2z25rt0 0.5s ease-out;
}

.error-icon-wrapper[b-xis2z25rt0] {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.error-icon[b-xis2z25rt0] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #ff5630 0%, #d32f2f 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(255, 86, 48, 0.3);
    position: relative;
}

.error-icon[b-xis2z25rt0]::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 86, 48, 0.2) 0%, rgba(211, 47, 47, 0.2) 100%);
    z-index: -1;
    animation: pulse-error-b-xis2z25rt0 2s ease-in-out infinite;
}

@keyframes pulse-error-b-xis2z25rt0 {
    0%, 100% {
        transform: scale(1);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.4;
    }
}

.error-icon i[b-xis2z25rt0] {
    font-size: 2.5rem;
    color: var(--acv-white);
    position: relative;
    z-index: 1;
}

.error-title[b-xis2z25rt0] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 1rem 0;
    line-height: 1.3;
}

.error-message[b-xis2z25rt0] {
    font-size: 1rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin: 0 0 2rem 0;
}

.error-button[b-xis2z25rt0] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    background: var(--gray-500);
    color: var(--acv-white);
    border: none;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.error-button:hover[b-xis2z25rt0] {
    background: var(--gray-600);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.error-button:active[b-xis2z25rt0] {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.error-button i[b-xis2z25rt0] {
    font-size: 0.875rem;
}

@keyframes slideInUp-b-xis2z25rt0 {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .error-container[b-xis2z25rt0] {
        padding: 1rem;
    }

    .error-card[b-xis2z25rt0] {
        padding: 2rem 1.5rem;
    }

    .error-icon[b-xis2z25rt0] {
        width: 64px;
        height: 64px;
    }

    .error-icon i[b-xis2z25rt0] {
        font-size: 2rem;
    }

    .error-title[b-xis2z25rt0] {
        font-size: 1.5rem;
    }

    .error-message[b-xis2z25rt0] {
        font-size: 0.9375rem;
    }

    .error-button[b-xis2z25rt0] {
        width: 100%;
        justify-content: center;
    }
}

/* _content/ltia.portal.web/Components/Exams/RealResults.razor.rz.scp.css */
/* CSS Variables */
.real-results-page[b-zas9szjtg7] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    
    min-height: 100vh;
    background-color: var(--gray-100);
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Results Container */
.results-container[b-zas9szjtg7] {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    overflow: hidden;
}

/* Header Section */
.results-header[b-zas9szjtg7] {
    background: var(--acv-white);
    padding: 2.5rem 2rem;
    text-align: center;
    position: relative;
    border-bottom: 1px solid var(--gray-200);
}

.back-button[b-zas9szjtg7] {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: var(--gray-100);
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.9375rem;
    text-decoration: none;
    transition: all 0.2s ease;
    z-index: 10;
}

.back-button:hover[b-zas9szjtg7] {
    background: var(--gray-200);
    border-color: var(--gray-400);
    color: var(--gray-900);
    text-decoration: none;
    transform: translateX(-2px);
}

.back-button i[b-zas9szjtg7] {
    font-size: 0.875rem;
}

/* Results Icon Container */
.results-icon-container[b-zas9szjtg7] {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.results-icon[b-zas9szjtg7] {
    width: 64px;
    height: 64px;
    background: var(--acv-primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.results-icon[b-zas9szjtg7]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
    border-radius: 12px;
}

.results-icon i[b-zas9szjtg7] {
    font-size: 2rem;
    color: var(--acv-white);
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.results-title[b-zas9szjtg7] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 0.5rem 0;
}

.results-subtitle[b-zas9szjtg7] {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--gray-600);
    margin: 0 0 1rem 0;
}

.result-badge[b-zas9szjtg7] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9375rem;
    margin-top: 0.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.result-badge.passed[b-zas9szjtg7] {
    background: var(--success-lighter);
    color: var(--success-dark);
    border: 2px solid var(--success-main);
}

.result-badge.passed i[b-zas9szjtg7] {
    color: var(--success-main);
}

.result-badge.failed[b-zas9szjtg7] {
    background: var(--error-lighter);
    color: var(--error-dark);
    border: 2px solid var(--error-main);
}

.result-badge.failed i[b-zas9szjtg7] {
    color: var(--error-main);
}

.result-badge i[b-zas9szjtg7] {
    font-size: 1rem;
}

.result-badge span[b-zas9szjtg7] {
    font-size: 0.9375rem;
}

.results-status-box[b-zas9szjtg7] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    background: var(--gray-100);
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    color: var(--gray-700);
    font-weight: 500;
    font-size: 0.9375rem;
    margin-top: 1rem;
}

.results-status-box i[b-zas9szjtg7] {
    font-size: 1rem;
    color: var(--acv-primary);
}

/* Empty State */
.results-header-empty[b-zas9szjtg7] {
    padding: 4rem 2rem;
    text-align: center;
}

.empty-icon[b-zas9szjtg7] {
    width: 80px;
    height: 80px;
    background: var(--gray-100);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    border: 2px solid var(--gray-200);
}

.empty-icon i[b-zas9szjtg7] {
    font-size: 2.5rem;
    color: var(--gray-400);
}

.results-header-empty .results-title[b-zas9szjtg7] {
    margin-bottom: 1rem;
    color: var(--gray-800);
}

.empty-description[b-zas9szjtg7] {
    color: var(--gray-600);
    margin-bottom: 2.5rem;
    font-size: 1rem;
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.results-header-empty .action-buttons[b-zas9szjtg7] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.results-header-empty .action-btn[b-zas9szjtg7] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9375rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 160px;
    justify-content: center;
}

.results-header-empty .action-btn:hover[b-zas9szjtg7] {
    opacity: 0.9;
}

.results-header-empty .action-btn i[b-zas9szjtg7] {
    font-size: 1rem;
}

/* Score Section */
.score-section[b-zas9szjtg7] {
    padding: 2rem;
    background: var(--acv-white);
}

.score-grid[b-zas9szjtg7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.score-card[b-zas9szjtg7] {
    background: var(--acv-white);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.score-card[b-zas9szjtg7]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--acv-primary);
    opacity: 0;
}

.score-card:hover[b-zas9szjtg7] {
    border-color: var(--acv-primary);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.15);
}

.score-card:hover[b-zas9szjtg7]::before {
    opacity: 1;
}

.score-label[b-zas9szjtg7] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--gray-700);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.score-label i[b-zas9szjtg7] {
    font-size: 1rem;
    color: var(--acv-primary);
}

.score-value[b-zas9szjtg7] {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    line-height: 1;
    color: var(--acv-primary);
}

.score-description[b-zas9szjtg7] {
    font-size: 0.875rem;
    color: var(--gray-600);
    font-weight: 500;
}

/* Certificate Section */
.certificate-section[b-zas9szjtg7] {
    padding: 2rem;
    background: var(--success-lighter);
    border-top: 1px solid var(--gray-200);
    text-align: center;
}

.certificate-icon[b-zas9szjtg7] {
    width: 80px;
    height: 80px;
    background: var(--success-main);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 200, 83, 0.3);
}

.certificate-icon i[b-zas9szjtg7] {
    font-size: 2.5rem;
    color: var(--acv-white);
}

.certificate-title[b-zas9szjtg7] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--success-dark);
    margin: 0 0 1rem 0;
}

.certificate-message[b-zas9szjtg7] {
    font-size: 1rem;
    color: var(--gray-700);
    line-height: 1.6;
    margin: 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Action Section */
.action-section[b-zas9szjtg7] {
    padding: 2rem;
    background: var(--acv-white);
    border-top: 1px solid var(--gray-200);
}

.action-title[b-zas9szjtg7] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 1.5rem 0;
    text-align: center;
}

.action-buttons[b-zas9szjtg7] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.action-btn[b-zas9szjtg7] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    min-width: 160px;
    justify-content: center;
}

.action-btn:hover[b-zas9szjtg7] {
    text-decoration: none;
    opacity: 0.9;
}

.action-btn.success[b-zas9szjtg7] {
    background: var(--acv-primary);
    color: var(--acv-white);
}

.action-btn.success:hover[b-zas9szjtg7] {
    background: var(--acv-primary-700);
    color: var(--acv-white);
}

.action-btn.primary[b-zas9szjtg7] {
    background: var(--acv-primary);
    color: var(--acv-white);
}

.action-btn.primary:hover[b-zas9szjtg7] {
    background: var(--acv-primary-700);
    color: var(--acv-white);
}

.action-btn.secondary[b-zas9szjtg7] {
    background: var(--gray-500);
    color: var(--acv-white);
}

.action-btn.secondary:hover[b-zas9szjtg7] {
    background: var(--gray-600);
    color: var(--acv-white);
}

.action-btn i[b-zas9szjtg7] {
    font-size: 1rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .real-results-page[b-zas9szjtg7] {
        padding: 1rem;
    }

    .results-header[b-zas9szjtg7] {
        padding: 2rem 1.5rem;
    }

    .back-button[b-zas9szjtg7] {
        top: 1rem;
        left: 1rem;
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }

    .results-title[b-zas9szjtg7] {
        font-size: 1.75rem;
    }

    .results-subtitle[b-zas9szjtg7] {
        font-size: 1rem;
    }

    .results-status-box[b-zas9szjtg7] {
        padding: 0.875rem 1.25rem;
        font-size: 0.9375rem;
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }

    .score-section[b-zas9szjtg7] {
        padding: 1.5rem;
    }

    .score-grid[b-zas9szjtg7] {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 1rem;
    }

    .score-card[b-zas9szjtg7] {
        padding: 1.25rem;
    }

    .score-value[b-zas9szjtg7] {
        font-size: 1.75rem;
    }

    .certificate-section[b-zas9szjtg7] {
        padding: 1.5rem;
    }

    .certificate-icon[b-zas9szjtg7] {
        width: 64px;
        height: 64px;
        margin-bottom: 1.25rem;
    }

    .certificate-icon i[b-zas9szjtg7] {
        font-size: 2rem;
    }

    .certificate-title[b-zas9szjtg7] {
        font-size: 1.25rem;
    }

    .certificate-message[b-zas9szjtg7] {
        font-size: 0.9375rem;
    }

    .action-section[b-zas9szjtg7] {
        padding: 1.5rem;
    }

    .action-buttons[b-zas9szjtg7] {
        flex-direction: column;
        align-items: stretch;
    }

    .action-btn[b-zas9szjtg7] {
        width: 100%;
        max-width: none;
    }

    .results-header-empty[b-zas9szjtg7] {
        padding: 2.5rem 1.5rem;
    }

    .empty-icon[b-zas9szjtg7] {
        width: 64px;
        height: 64px;
        margin-bottom: 1.25rem;
    }

    .empty-icon i[b-zas9szjtg7] {
        font-size: 2rem;
    }

    .results-header-empty .results-title[b-zas9szjtg7] {
        font-size: 1.5rem;
    }

    .empty-description[b-zas9szjtg7] {
        font-size: 0.9375rem;
        margin-bottom: 2rem;
    }

    .results-header-empty .action-buttons[b-zas9szjtg7] {
        flex-direction: column;
        align-items: stretch;
    }

    .results-header-empty .action-btn[b-zas9szjtg7] {
        width: 100%;
        max-width: none;
    }
}

/* Animation */
@keyframes slideInUp-b-zas9szjtg7 {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Font Awesome Icons */
.fas[b-zas9szjtg7] {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.fa-arrow-left[b-zas9szjtg7]::before {
    content: "\f060";
}

.fa-redo[b-zas9szjtg7]::before {
    content: "\f01e";
}

.fa-book[b-zas9szjtg7]::before {
    content: "\f02d";
}

.fa-home[b-zas9szjtg7]::before {
    content: "\f015";
}

.fa-trophy[b-zas9szjtg7]::before {
    content: "\f091";
}

.fa-check-circle[b-zas9szjtg7]::before {
    content: "\f058";
}

.fa-dumbbell[b-zas9szjtg7]::before {
    content: "\f44b";
}

.fa-star[b-zas9szjtg7]::before {
    content: "\f005";
}

.fa-percent[b-zas9szjtg7]::before {
    content: "\f295";
}

.fa-times-circle[b-zas9szjtg7]::before {
    content: "\f057";
}

.fa-clock[b-zas9szjtg7]::before {
    content: "\f017";
}

.fa-certificate[b-zas9szjtg7]::before {
    content: "\f0a3";
}

.fa-eye[b-zas9szjtg7]::before {
    content: "\f06e";
}

.fa-inbox[b-zas9szjtg7]::before {
    content: "\f01c";
}
/* _content/ltia.portal.web/Components/Layout/AdminLayout.razor.rz.scp.css */
.page[b-sokxekmw9b] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main[b-sokxekmw9b] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    margin-left: 250px; /* Tránh sidebar */
    padding-top: 64px; /* Tránh header fixed */
    min-height: 100vh;
}

.content[b-sokxekmw9b] {
    flex: 1;
}

/* Sidebar styles được xử lý bởi NavMenu.razor.css và app.css */

/* Header Styles - Based on _Header.cshtml */
/* Z-index: 1000 (giống MVC) - thấp hơn sidebar (1001) và popup (10002) */
.app__header[b-sokxekmw9b] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 24px;
    height: 64px;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    left: 250px; /* Bắt đầu sau sidebar (width: 250px) */
    right: 0;
    width: calc(100% - 250px); /* Chiếm phần còn lại */
    z-index: var(--z-header, 1000); /* Thấp hơn sidebar (1001) và popup (10002) */
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1), width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Header Actions */
.header-actions[b-sokxekmw9b] {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Portal Wrapper */
.portal-wrapper[b-sokxekmw9b] {
    position: relative;
}

.btn-portal[b-sokxekmw9b] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-portal:hover[b-sokxekmw9b] {
    background: #f3f4f6;
    color: #374151;
    text-decoration: none;
}

.btn-portal i[b-sokxekmw9b] {
    font-size: 18px;
}

/* Notification Wrapper */
.notification-wrapper[b-sokxekmw9b] {
    position: relative;
}

.btn-notification[b-sokxekmw9b] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-notification:hover[b-sokxekmw9b] {
    background: #f3f4f6;
    color: #374151;
}

.btn-notification i[b-sokxekmw9b] {
    font-size: 18px;
}

.notification-badge[b-sokxekmw9b] {
    position: absolute;
    top: 6px;
    right: 6px;
    background: #ef4444;
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.notification-dropdown[b-sokxekmw9b] {
    position: absolute;
    top: 100%;
    right: 0;
    width: 320px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 1001; /* Cao hơn header (1000) nhưng thấp hơn popup (10002) */
    margin-top: 8px;
}

.notification-dropdown.show[b-sokxekmw9b] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.notification-header[b-sokxekmw9b] {
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
}

.notification-header h6[b-sokxekmw9b] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.notification-content[b-sokxekmw9b] {
    padding: 16px 20px;
}

.text-muted[b-sokxekmw9b] {
    color: #6b7280;
    font-size: 14px;
    margin: 0;
}

/* User Profile */
.user-profile[b-sokxekmw9b] {
    position: relative;
}

.user-button[b-sokxekmw9b] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
    border: none;
    background: transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #374151;
}

.user-button:hover[b-sokxekmw9b] {
    background: #f3f4f6;
}

.user-button:hover .user-arrow[b-sokxekmw9b] {
    transform: rotate(180deg);
}

.user-avatar[b-sokxekmw9b] {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%) !important;
    color: white !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.3);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.user-button:hover .user-avatar[b-sokxekmw9b] {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.4);
}

.user-info[b-sokxekmw9b] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.user-name[b-sokxekmw9b] {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    line-height: 1.2;
}

.user-role[b-sokxekmw9b] {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.2;
}

.user-arrow[b-sokxekmw9b] {
    font-size: 12px;
    color: #6b7280;
    transition: transform 0.2s ease;
    margin-left: auto;
}

.user-profile:hover .user-arrow[b-sokxekmw9b],
.user-profile:has(.user-dropdown.show) .user-arrow[b-sokxekmw9b] {
    transform: rotate(180deg);
}

/* User Dropdown */
.user-dropdown[b-sokxekmw9b] {
    position: absolute;
    top: 100%;
    right: 0;
    width: 280px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 1001; /* Cao hơn header (1000) nhưng thấp hơn popup (10002) */
    margin-top: 8px;
}

.user-dropdown.show[b-sokxekmw9b] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-dropdown-header[b-sokxekmw9b] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    border-bottom: 1px solid #e5e7eb;
}

.user-avatar-large[b-sokxekmw9b] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%) !important;
    color: white !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
    flex-shrink: 0;
}

.user-details[b-sokxekmw9b] {
    flex: 1;
}

.user-details .user-name[b-sokxekmw9b] {
    font-size: 16px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 4px;
}

.user-email[b-sokxekmw9b] {
    font-size: 14px;
    color: #6b7280;
}

.user-dropdown-menu[b-sokxekmw9b] {
    padding: 8px 0;
}

.dropdown-item[b-sokxekmw9b] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: #374151;
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.2s ease;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.dropdown-item:hover[b-sokxekmw9b] {
    background: #f3f4f6;
    color: #374151;
}

.dropdown-item i[b-sokxekmw9b] {
    width: 16px;
    color: #6b7280;
}

.logout-btn[b-sokxekmw9b] {
    color: #dc2626;
}

.logout-btn:hover[b-sokxekmw9b] {
    background: #fef2f2;
    color: #dc2626;
}

.logout-btn i[b-sokxekmw9b] {
    color: #dc2626;
}

.dropdown-divider[b-sokxekmw9b] {
    height: 1px;
    background: #e5e7eb;
    margin: 8px 0;
}

/* Legacy top-row for backward compatibility */
.top-row[b-sokxekmw9b] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

.top-row[b-sokxekmw9b]  a,
.top-row[b-sokxekmw9b]  .btn-link {
    white-space: nowrap;
    margin-left: 1.5rem;
    text-decoration: none;
}

.top-row[b-sokxekmw9b]  a:hover,
.top-row[b-sokxekmw9b]  .btn-link:hover {
    text-decoration: underline;
}

.top-row[b-sokxekmw9b]  a:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 640.98px) {
    .top-row[b-sokxekmw9b] {
        justify-content: space-between;
    }

    .top-row[b-sokxekmw9b]  a,
    .top-row[b-sokxekmw9b]  .btn-link {
        margin-left: 0;
    }
}

/* Responsive cho mobile - ẩn user name trên màn hình nhỏ */
@media (max-width: 768px) {
    .user-info[b-sokxekmw9b] {
        display: none;
    }

    .user-dropdown[b-sokxekmw9b] {
        width: 240px;
    }

    .notification-dropdown[b-sokxekmw9b] {
        width: 280px;
    }
}

@media (min-width: 641px) {
    .page[b-sokxekmw9b] {
        flex-direction: row;
    }

    /* Sidebar styles được xử lý bởi NavMenu.razor.css và app.css */
    /* .sidebar styles đã được định nghĩa trong NavMenu.razor.css với position: fixed !important */
    /* Đảm bảo sidebar luôn cố định, không bị override */
    .page .sidebar[b-sokxekmw9b] {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
    }

    /* Header cố định, điều chỉnh khi sidebar collapsed */
    .page .sidebar.collapsed ~ main .app__header[b-sokxekmw9b] {
        left: 64px; /* Khi sidebar collapsed (width: 64px) */
        width: calc(100% - 64px);
    }

    /* Main content điều chỉnh khi sidebar collapsed */
    .page .sidebar.collapsed ~ main[b-sokxekmw9b] {
        margin-left: 64px;
    }

    .top-row[b-sokxekmw9b] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .app__header[b-sokxekmw9b] {
        padding: 0 16px;
    }

    .top-row.auth[b-sokxekmw9b]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-sokxekmw9b],
    article[b-sokxekmw9b] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-sokxekmw9b] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: var(--z-error, 1000); /* Thấp hơn popup (10002) */
}

#blazor-error-ui .dismiss[b-sokxekmw9b] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* _content/ltia.portal.web/Components/Layout/AdminNavMenu.razor.rz.scp.css */
/* ==========================================
   ADMIN SIDEBAR NAVIGATION
   CSS tối thiểu - phần lớn styles từ app.css
   ========================================== */

:global(:root)[b-noa88mkstj] {
    --font-family-sans: "Roboto", "Segoe UI", Arial, sans-serif;
    --acv-primary: #214CA6;
    --acv-primary-dark: #183B86;
    --acv-white: #ffffff;
}

/* Sidebar Base - Override background từ AdminLayout.razor.css */
.page .sidebar[b-noa88mkstj] {
    background: #fff !important;
    border-right: 1px solid #dee2e6;
    height: 100vh !important;
    max-height: 100vh !important; /* Giới hạn chiều cao khi zoom */
    width: 250px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    overflow: hidden;
    display: flex !important;
    flex-direction: column !important;
    z-index: 1000 !important;
    font-family: var(--font-family-sans);
    will-change: width;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
    margin: 0 !important;
    padding: 0 !important;
}

/* Sidebar Header */
.sidebar-header[b-noa88mkstj] {
    padding: 24px 20px 12px 20px;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    max-height: 96px; /* Giới hạn chiều cao header khi zoom */
    box-sizing: border-box;
    flex-shrink: 0; /* Không cho phép header bị co lại */
}

.sidebar-logo[b-noa88mkstj] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    transition: all 0.3s ease;
    position: relative;
}

/* Logo full - hiển thị khi expand */
.logo-full[b-noa88mkstj] {
    height: 100%;
    max-height: 60px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    transition: opacity 0.25s ease-out, transform 0.25s ease-out;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    display: block;
}

/* Logo mini - ẩn khi expand, hiển thị khi collapse */
.logo-mini[b-noa88mkstj] {
    display: none;
    width: 40px;
    height: 40px;
    object-fit: contain;
    transition: opacity 0.25s ease-out, transform 0.25s ease-out;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}


/* Sidebar Content */
.sidebar .sidebar-content[b-noa88mkstj] {
    flex: 1 1 auto; /* Cho phép grow, shrink và có base size */
    overflow-y: auto !important; /* Cho phép scroll khi nội dung vượt quá - QUAN TRỌNG khi zoom */
    overflow-x: hidden !important; /* Ẩn scrollbar ngang */
    padding: 8px;
    padding-bottom: 8px;
    display: flex;
    flex-direction: column;
    min-height: 0 !important; /* Cho phép flex shrink - QUAN TRỌNG cho scroll khi zoom */
    max-height: 100%; /* Đảm bảo không vượt quá container */
    height: 0; /* Force flexbox tính toán đúng khi zoom */
}

/* Custom scrollbar cho sidebar-content */
.sidebar .sidebar-content[b-noa88mkstj]::-webkit-scrollbar {
    width: 6px;
}

.sidebar .sidebar-content[b-noa88mkstj]::-webkit-scrollbar-track {
    background: var(--gray-100, #f3f4f6);
    border-radius: 3px;
}

.sidebar .sidebar-content[b-noa88mkstj]::-webkit-scrollbar-thumb {
    background: var(--gray-400, #9ca3af);
    border-radius: 3px;
}

.sidebar .sidebar-content[b-noa88mkstj]::-webkit-scrollbar-thumb:hover {
    background: var(--gray-500, #6b7280);
}

.sidebar.collapsed .sidebar-content[b-noa88mkstj] {
    padding: 8px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Nav Item spacing */
.sidebar :global(.nav-item)[b-noa88mkstj] {
    margin-bottom: 2px;
    width: 100%;
}

.sidebar :global(.nav-item:last-child)[b-noa88mkstj] {
    margin-bottom: 0;
}

.sidebar :global(.nav.flex-column)[b-noa88mkstj] {
    padding: 0;
    margin: 0;
    list-style: none;
    width: 100%;
}

.sidebar.collapsed :global(.nav.flex-column)[b-noa88mkstj] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sidebar.collapsed :global(.nav-item)[b-noa88mkstj] {
    width: auto;
    margin: 2px 0;
}

/* Sidebar Footer */
.sidebar .sidebar-footer[b-noa88mkstj] {
    border-top: 1px solid #dee2e6;
    padding: 16px;
    display: flex;
    justify-content: center;
    margin-top: auto;
    flex-shrink: 0 !important; /* Không cho phép footer bị co lại khi zoom */
    position: relative;
    bottom: auto;
    background: white;
    z-index: 10;
}

.sidebar .sidebar-toggle-btn[b-noa88mkstj] {
    background: white;
    color: #666;
    border: 1px solid #ddd;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
    min-width: 120px;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    pointer-events: auto;
    user-select: none;
}

.sidebar .sidebar-toggle-btn:hover[b-noa88mkstj] {
    background: #f5f5f5;
    color: #333;
    border-color: #ccc;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.sidebar .toggle-text[b-noa88mkstj] {
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    will-change: opacity, transform, width;
}

/* ==========================================
   COLLAPSED SIDEBAR STYLES
   ========================================== */
.sidebar.collapsed[b-noa88mkstj] {
    width: 64px;
}

.sidebar.collapsed .sidebar-header[b-noa88mkstj] {
    padding: 28px 8px;
    justify-content: center;
    min-height: 96px;
    box-sizing: border-box;
}

/* Khi collapsed: ẩn logo-full, hiển thị logo-mini */
.sidebar.collapsed .logo-full[b-noa88mkstj] {
    display: none;
}

.sidebar.collapsed .logo-mini[b-noa88mkstj] {
    display: block;
    margin: 0 auto;
}


.sidebar.collapsed .sidebar-footer[b-noa88mkstj] {
    padding: 12px 8px;
    justify-content: center;
}

.sidebar.collapsed .sidebar-toggle-btn[b-noa88mkstj] {
    padding: 8px;
    border-radius: 50%;
    gap: 0;
    min-width: 40px;
    width: 40px;
    height: 40px;
}

.sidebar.collapsed .sidebar-toggle-btn i[b-noa88mkstj] {
    transform: rotate(180deg);
}

.sidebar.collapsed .toggle-text[b-noa88mkstj] {
    opacity: 0;
    transform: translateX(-20px);
    width: 0;
    overflow: hidden;
    visibility: hidden;
}

/* Disable will-change after transition */
.sidebar:not(.transitioning)[b-noa88mkstj] {
    will-change: auto;
}

.sidebar:not(.transitioning) :global(.nav-link) span[b-noa88mkstj],
.sidebar:not(.transitioning) :global(.nav-link) i[b-noa88mkstj],
.sidebar:not(.transitioning) .toggle-text[b-noa88mkstj] {
    will-change: auto;
}

/* Performance optimizations */
.sidebar :global(.nav-link)[b-noa88mkstj],
.sidebar :global(.nav-link) span[b-noa88mkstj],
.sidebar :global(.nav-link) i[b-noa88mkstj] {
    contain: layout style paint;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
}

/* ==========================================
   SUBMENU STYLES
   ========================================== */

/* Parent menu với children */
.sidebar :global(.parent-menu)[b-noa88mkstj] {
    user-select: none;
    position: relative;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important; /* Để margin-left: auto của chevron hoạt động */
    width: 100% !important; /* Đảm bảo parent-menu chiếm toàn bộ width */
    min-width: 100% !important; /* Không cho phép co lại */
    max-width: 100% !important; /* Không cho phép mở rộng */
    box-sizing: border-box !important; /* Đảm bảo padding không làm tràn */
    gap: 0;
    overflow: visible !important; /* Không ẩn chevron */
}

/* Text trong parent-menu không được chiếm quá nhiều không gian */
.sidebar :global(.parent-menu > span)[b-noa88mkstj] {
    flex: 0 1 auto !important; /* Không chiếm toàn bộ không gian */
    min-width: 0 !important; /* Cho phép text bị cắt nếu quá dài */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    margin-right: 0 !important; /* Không có margin để chevron sát bên phải */
}

.sidebar :global(.parent-menu.expanded)[b-noa88mkstj] {
    background-color: rgba(33, 76, 166, 0.08) !important;
    color: #214CA6 !important;
}

.sidebar :global(.parent-menu.expanded) i:first-of-type[b-noa88mkstj] {
    color: #214CA6 !important;
}

/* Submenu toggle icon (chevron) - Đẩy ra bên phải ngoài cùng */
.sidebar :global(.parent-menu .submenu-toggle)[b-noa88mkstj],
.sidebar :global(.nav-link .submenu-toggle)[b-noa88mkstj] {
    margin-left: auto !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-size: 12px !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    flex-basis: auto !important;
    color: rgba(0, 0, 0, 0.5) !important;
    width: auto !important;
    height: auto !important;
    min-width: 12px !important;
    max-width: none !important;
    padding-left: 12px !important; /* Khoảng cách với text bên trái */
    padding-right: 0 !important;
    order: 999 !important; /* Đảm bảo chevron luôn ở cuối cùng trong flex container */
    position: relative !important; /* Đảm bảo không bị ảnh hưởng bởi submenu */
    z-index: 1 !important; /* Đảm bảo chevron luôn hiển thị trên cùng */
    transform: rotate(0deg) !important;
    transform-origin: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Chevron xoay 90 độ khi expanded - Animation mượt */
.sidebar :global(.parent-menu .submenu-toggle.expanded)[b-noa88mkstj],
.sidebar :global(.nav-link .submenu-toggle.expanded)[b-noa88mkstj] {
    transform: rotate(90deg) !important;
    color: #214CA6 !important;
}

.sidebar :global(.parent-menu.expanded .submenu-toggle)[b-noa88mkstj] {
    color: #214CA6 !important;
    margin-left: auto !important; /* Đảm bảo vẫn ở bên phải khi expanded */
    margin-right: 0 !important;
}

/* Submenu container */
.sidebar :global(.submenu)[b-noa88mkstj] {
    margin: 4px 0 4px 24px; /* Tăng margin-left từ 16px lên 24px để submenu không thẳng hàng với menu cha */
    padding-left: 12px; /* Giảm padding-left từ 16px xuống 12px để cân đối */
    border-left: 2px solid rgba(0, 0, 0, 0.1);
    animation: none !important; /* Tắt animation cũ, dùng transition từ app.css */
    overflow: hidden;
    width: calc(100% - 24px - 12px - 16px) !important; /* Trừ margin-left (24px), padding-left (12px) và margin-right của nav-link (16px) */
    box-sizing: border-box;
    max-width: 100%;
}

/* Submenu items */
.sidebar :global(.submenu-item)[b-noa88mkstj] {
    color: rgba(0, 0, 0, 0.7) !important;
    background: none !important;
    border-radius: 6px;
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    width: 100%;
    padding: 8px 12px 8px 20px !important; /* Tăng padding-left để dịch chuyển icon và text sang phải */
    font-size: 13px;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    margin-bottom: 2px;
    position: relative;
}

.sidebar :global(.submenu-item:hover)[b-noa88mkstj] {
    background-color: rgba(0, 0, 0, 0.05) !important;
    color: rgba(0, 0, 0, 0.9) !important;
}

.sidebar :global(.submenu-item.active)[b-noa88mkstj] {
    background-color: rgba(33, 76, 166, 0.12) !important;
    color: #214CA6 !important;
    font-weight: 500;
}

.sidebar :global(.submenu-item.active) i[b-noa88mkstj] {
    color: #214CA6 !important;
}

/* Submenu item icons - Tránh bị override bởi app.css */
.sidebar :global(.submenu-item) i[b-noa88mkstj] {
    font-size: 14px !important;
    margin-right: 10px !important;
    margin-left: 0 !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important; /* Đảm bảo icon không bị co */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    color: rgba(0, 0, 0, 0.5) !important;
    position: relative !important;
}

.sidebar :global(.submenu-item:hover) i[b-noa88mkstj] {
    color: rgba(0, 0, 0, 0.7) !important;
}

.sidebar :global(.submenu-item.active) i[b-noa88mkstj] {
    color: #214CA6 !important;
}

/* Ẩn submenu khi sidebar collapsed */
.sidebar.collapsed :global(.submenu)[b-noa88mkstj] {
    display: none !important;
}

.sidebar.collapsed :global(.submenu-toggle)[b-noa88mkstj] {
    display: none !important;
}

/* Khi collapsed, parent menu vẫn hiển thị nhưng không có chevron */
.sidebar.collapsed :global(.parent-menu)[b-noa88mkstj] {
    justify-content: center;
    padding: 12px !important;
    margin: 4px !important;
    min-height: 48px !important;
}

/* Icon menu cha khi collapsed - kích thước 32-40px */
.sidebar.collapsed :global(.parent-menu) i[b-noa88mkstj] {
    font-size: 24px !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
}

/* Ẩn text khi collapsed */
.sidebar.collapsed :global(.parent-menu) span[b-noa88mkstj] {
    display: none !important;
}

/* Nav link khi collapsed - chỉ hiển thị icon */
.sidebar.collapsed :global(.nav-link)[b-noa88mkstj] {
    justify-content: center !important;
    padding: 12px !important;
    margin: 4px !important;
    min-height: 48px !important;
}

.sidebar.collapsed :global(.nav-link) i[b-noa88mkstj] {
    font-size: 24px !important;
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
}

.sidebar.collapsed :global(.nav-link) span[b-noa88mkstj] {
    display: none !important;
}

/* ==========================================
   POPUP SUBMENU STYLES (Collapsed Sidebar)
   ========================================== */

/* Popup container - chỉ hiển thị khi sidebar collapsed */
/* Popup sẽ được di chuyển vào document.body bằng JavaScript để tránh stacking context issues */
/* Z-index: 10002 (cao hơn header 1000, sidebar 1001, toast 1050) - giống MVC */
/* Design được cải thiện: spacing, padding, shadow tốt hơn - Kích thước nhỏ gọn hơn */
.submenu-popup[b-noa88mkstj] {
    position: fixed !important;
    z-index: var(--z-popup, 10002) !important;
    min-width: 64px !important;
    width: 64px !important;
    background-color: var(--acv-white, #FFFFFF) !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14), 
                0 4px 10px rgba(0, 0, 0, 0.08),
                0 2px 4px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    padding: 6px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(-8px, 0, 0) scale(0.96) !important;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    backface-visibility: hidden !important;
    will-change: opacity, transform, box-shadow !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    backdrop-filter: blur(10px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
    overflow: hidden !important;
}

/* Popup visible state - đảm bảo pointer-events hoạt động */
.submenu-popup.visible[b-noa88mkstj] {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14), 
                0 4px 10px rgba(0, 0, 0, 0.08),
                0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

/* Popup items styles - giống hệt sidebar collapsed */
/* Override tất cả CSS global với specificity cao hơn */
.submenu-popup .popup-item[b-noa88mkstj],
.submenu-popup a.popup-item[b-noa88mkstj],
.submenu-popup .popup-item.nav-link[b-noa88mkstj],
.submenu-popup a.popup-item.nav-link[b-noa88mkstj] {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    padding: 12px 0 !important;
    margin: 4px auto !important;
    justify-content: center !important;
    align-items: center !important;
    display: flex !important;
    position: relative !important;
    border-radius: 8px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    text-decoration: none !important;
    color: inherit !important;
}

/* Override width từ app.css */
.submenu-popup .popup-item[b-noa88mkstj],
.submenu-popup a.popup-item[b-noa88mkstj],
.submenu-popup .popup-item.nav-link[b-noa88mkstj],
.submenu-popup a.popup-item.nav-link[b-noa88mkstj] {
    width: 48px !important;
    max-width: 48px !important;
}

.submenu-popup .popup-item span[b-noa88mkstj],
.submenu-popup a.popup-item span[b-noa88mkstj],
.submenu-popup .popup-item.nav-link span[b-noa88mkstj],
.submenu-popup a.popup-item.nav-link span[b-noa88mkstj] {
    display: none !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.submenu-popup .popup-item i[b-noa88mkstj],
.submenu-popup a.popup-item i[b-noa88mkstj],
.submenu-popup .popup-item.nav-link i[b-noa88mkstj],
.submenu-popup a.popup-item.nav-link i[b-noa88mkstj] {
    margin: 0 !important;
    position: static !important;
    transform: translate3d(0, 0, 0) !important;
    font-size: 20px !important;
    color: rgba(0, 0, 0, 0.6) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
}

.submenu-popup .popup-item.active[b-noa88mkstj],
.submenu-popup a.popup-item.active[b-noa88mkstj],
.submenu-popup .popup-item.nav-link.active[b-noa88mkstj],
.submenu-popup a.popup-item.nav-link.active[b-noa88mkstj] {
    background-color: rgba(33, 76, 166, 0.12) !important;
    border-color: rgba(33, 76, 166, 0.2) !important;
    color: #214CA6 !important;
    font-weight: 400 !important;
}

.submenu-popup .popup-item.active i[b-noa88mkstj],
.submenu-popup a.popup-item.active i[b-noa88mkstj],
.submenu-popup .popup-item.nav-link.active i[b-noa88mkstj],
.submenu-popup a.popup-item.nav-link.active i[b-noa88mkstj] {
    color: #214CA6 !important;
}

.submenu-popup .popup-item:hover[b-noa88mkstj],
.submenu-popup a.popup-item:hover[b-noa88mkstj],
.submenu-popup .popup-item.nav-link:hover[b-noa88mkstj],
.submenu-popup a.popup-item.nav-link:hover[b-noa88mkstj] {
    background-color: rgba(0, 0, 0, 0.08) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: inherit !important;
}

.submenu-popup .popup-item:hover i[b-noa88mkstj],
.submenu-popup a.popup-item:hover i[b-noa88mkstj],
.submenu-popup .popup-item.nav-link:hover i[b-noa88mkstj],
.submenu-popup a.popup-item.nav-link:hover i[b-noa88mkstj] {
    color: #214CA6 !important;
}

/* Đảm bảo popup items không có blue bar indicator */
.submenu-popup .popup-item[b-noa88mkstj]::before,
.submenu-popup a.popup-item[b-noa88mkstj]::before,
.submenu-popup .popup-item.nav-link[b-noa88mkstj]::before,
.submenu-popup a.popup-item.nav-link[b-noa88mkstj]::before {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Responsive */
@media (max-width: 768px) {
    .page .sidebar[b-noa88mkstj] {
        width: 0 !important;
        overflow: hidden;
    }
}

/* _content/ltia.portal.web/Components/Pages/AccessDenied.razor.rz.scp.css */
.access-denied-container[b-66jhfwc0ha] {
    height: 100vh;
    max-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 20px;
    overflow: hidden;
    box-sizing: border-box;
}

.access-denied-content[b-66jhfwc0ha] {
    text-align: center;
    max-width: 500px;
    width: 100%;
    background: white;
    padding: 32px 24px;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid #e5e7eb;
    box-sizing: border-box;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.error-icon[b-66jhfwc0ha] {
    margin-bottom: 16px;
    animation: pulse-b-66jhfwc0ha 2s ease-in-out infinite;
    flex-shrink: 0;
}

.error-icon i[b-66jhfwc0ha] {
    font-size: 4rem;
    color: #dc3545;
    display: inline-block;
}

@keyframes pulse-b-66jhfwc0ha {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

.error-code[b-66jhfwc0ha] {
    font-size: 4.5rem;
    font-weight: 700;
    color: #dc3545;
    margin: 0 0 12px 0;
    line-height: 1;
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    flex-shrink: 0;
}

.error-title[b-66jhfwc0ha] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #212529;
    margin: 0 0 12px 0;
    flex-shrink: 0;
}

.error-description[b-66jhfwc0ha] {
    font-size: 0.95rem;
    color: #6c757d;
    margin: 0 0 24px 0;
    line-height: 1.5;
    flex-shrink: 0;
}

.action-buttons[b-66jhfwc0ha] {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 20px;
    flex-shrink: 0;
}

.btn[b-66jhfwc0ha] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 500;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn:hover[b-66jhfwc0ha] {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn:active[b-66jhfwc0ha] {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn i[b-66jhfwc0ha] {
    font-size: 1.1rem;
}

.btn-primary[b-66jhfwc0ha] {
    background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
    color: white;
}

.btn-primary:hover[b-66jhfwc0ha] {
    background: linear-gradient(135deg, #0b5ed7 0%, #0a58ca 100%);
}

.btn-secondary[b-66jhfwc0ha] {
    background-color: white;
    color: #6c757d;
    border: 1px solid #dee2e6;
}

.btn-secondary:hover[b-66jhfwc0ha] {
    background-color: #f8f9fa;
    color: #495057;
    border-color: #adb5bd;
}

.help-section[b-66jhfwc0ha] {
    padding-top: 16px;
    border-top: 1px solid #e9ecef;
    flex-shrink: 0;
}

.help-text[b-66jhfwc0ha] {
    font-size: 0.8rem;
    color: #6c757d;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.help-text i[b-66jhfwc0ha] {
    color: #0d6efd;
    font-size: 1rem;
}

@media (max-width: 576px) {
    .access-denied-container[b-66jhfwc0ha] {
        padding: 16px;
    }

    .access-denied-content[b-66jhfwc0ha] {
        padding: 24px 20px;
        max-height: calc(100vh - 32px);
    }

    .error-icon[b-66jhfwc0ha] {
        margin-bottom: 12px;
    }

    .error-icon i[b-66jhfwc0ha] {
        font-size: 3rem;
    }

    .error-code[b-66jhfwc0ha] {
        font-size: 3.5rem;
        margin: 0 0 8px 0;
    }

    .error-title[b-66jhfwc0ha] {
        font-size: 1.25rem;
        margin: 0 0 10px 0;
    }

    .error-description[b-66jhfwc0ha] {
        font-size: 0.875rem;
        margin: 0 0 20px 0;
        line-height: 1.4;
    }

    .action-buttons[b-66jhfwc0ha] {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 16px;
    }

    .btn[b-66jhfwc0ha] {
        width: 100%;
        justify-content: center;
        padding: 10px 20px;
        font-size: 0.95rem;
    }

    .help-section[b-66jhfwc0ha] {
        padding-top: 12px;
    }

    .help-text[b-66jhfwc0ha] {
        font-size: 0.75rem;
    }
}

@media (max-height: 600px) {
    .access-denied-content[b-66jhfwc0ha] {
        padding: 20px 24px;
    }

    .error-icon[b-66jhfwc0ha] {
        margin-bottom: 10px;
    }

    .error-icon i[b-66jhfwc0ha] {
        font-size: 3rem;
    }

    .error-code[b-66jhfwc0ha] {
        font-size: 3.5rem;
        margin: 0 0 8px 0;
    }

    .error-title[b-66jhfwc0ha] {
        font-size: 1.25rem;
        margin: 0 0 8px 0;
    }

    .error-description[b-66jhfwc0ha] {
        font-size: 0.875rem;
        margin: 0 0 16px 0;
    }

    .action-buttons[b-66jhfwc0ha] {
        margin-bottom: 12px;
    }

    .help-section[b-66jhfwc0ha] {
        padding-top: 12px;
    }

    .help-text[b-66jhfwc0ha] {
        font-size: 0.75rem;
    }
}

/* _content/ltia.portal.web/Components/Pages/Admin/Account/Account.razor.rz.scp.css */
/* CSS Variables - Đặt trực tiếp vào .account-page */
.account-page[b-kyel2zkhn3] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    
    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Card Header Section */
.card-header-section[b-kyel2zkhn3] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.card-header-content[b-kyel2zkhn3] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.card-header-icon[b-kyel2zkhn3] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
}

.card-header-text h1[b-kyel2zkhn3] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-800);
}

.card-header-text p[b-kyel2zkhn3] {
    margin: 0.25rem 0 0 0;
    color: var(--gray-600);
    font-size: 1rem;
}

/* Search Section */
.account-search-section[b-kyel2zkhn3] {
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    margin-bottom: 2rem;
    overflow: visible;
    position: relative;
    z-index: 10;
}

.search-container[b-kyel2zkhn3] {
    padding: 2rem;
}

.search-header[b-kyel2zkhn3] {
    margin-bottom: 1.5rem;
    text-align: center;
}

.search-title[b-kyel2zkhn3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 0.5rem 0;
}

.search-title i[b-kyel2zkhn3] {
    color: var(--acv-primary);
    font-size: 1.3rem;
}

.search-subtitle[b-kyel2zkhn3] {
    color: var(--gray-600);
    font-size: 1rem;
    margin: 0;
    font-weight: 400;
}

.search-content[b-kyel2zkhn3] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.search-main-row[b-kyel2zkhn3] {
    display: flex;
    gap: 1.5rem;
    align-items: flex-end;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 20;
}

.search-input-group[b-kyel2zkhn3] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 0 1 600px;
    min-width: 300px;
    max-width: 600px;
    position: relative;
    z-index: 20;
}

.form-label[b-kyel2zkhn3] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-700);
    margin: 0;
}

.form-label i[b-kyel2zkhn3] {
    color: var(--acv-primary);
    font-size: 0.8rem;
}

.search-input-wrapper[b-kyel2zkhn3] {
    position: relative;
}

.search-icon[b-kyel2zkhn3] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    z-index: 1;
}

.search-input[b-kyel2zkhn3] {
    width: 100%;
    height: 48px;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--acv-white);
    box-sizing: border-box;
}

.search-input:focus[b-kyel2zkhn3] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.search-controls[b-kyel2zkhn3] {
    display: flex;
    gap: 0.75rem;
    align-items: end;
    position: relative;
    z-index: 20;
    flex-shrink: 0;
    min-width: 120px;
    flex: 0 0 120px;
}

.search-btn[b-kyel2zkhn3], .clear-btn[b-kyel2zkhn3] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border: none;
    padding: 0.75rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 20;
    width: 48px;
    height: 48px;
    box-sizing: border-box;
}

.search-btn:hover:not(:disabled)[b-kyel2zkhn3] {
    background: var(--acv-primary-700);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

.search-btn:disabled[b-kyel2zkhn3] {
    opacity: 0.5;
    cursor: not-allowed;
}

.clear-btn[b-kyel2zkhn3] {
    background: var(--gray-500);
}

.clear-btn:hover[b-kyel2zkhn3] {
    background: var(--gray-600);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* List Container */
.account-list-container[b-kyel2zkhn3] {
    background: var(--acv-white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
}

/* List Header */
.list-header[b-kyel2zkhn3] {
    background: var(--acv-white) !important;
    padding: 1.75rem 2rem;
    border-bottom: 1px solid var(--gray-200);
    border-radius: 16px 16px 0 0;
    position: relative;
    z-index: 1;
    overflow: visible;
}

.list-header[b-kyel2zkhn3]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 16px 0 0 0;
}

.list-header-content[b-kyel2zkhn3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0;
}

.list-title-section[b-kyel2zkhn3] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.list-title[b-kyel2zkhn3] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.list-title i[b-kyel2zkhn3] {
    color: var(--acv-primary);
    font-size: 1.25rem;
}

.list-count[b-kyel2zkhn3] {
    background: var(--acv-primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Sort Controls */
.sort-controls[b-kyel2zkhn3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.refresh-btn[b-kyel2zkhn3],
.add-account-btn[b-kyel2zkhn3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--acv-white);
    color: var(--acv-primary);
    border: 2px solid var(--acv-primary);
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 120px;
    justify-content: center;
    text-decoration: none;
}

.refresh-btn:hover:not(:disabled)[b-kyel2zkhn3],
.add-account-btn:hover[b-kyel2zkhn3] {
    background: var(--acv-primary);
    color: var(--acv-white);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
    text-decoration: none;
}

.refresh-btn:disabled[b-kyel2zkhn3] {
    opacity: 0.5;
    cursor: not-allowed;
}

.add-account-btn[b-kyel2zkhn3] {
    background: var(--acv-primary);
    color: var(--acv-white);
}

.add-account-btn:hover[b-kyel2zkhn3] {
    background: var(--acv-primary-700);
}

/* Accounts List */
.account-list[b-kyel2zkhn3] {
    padding: 1.5rem;
    min-height: 200px;
}

/* Accounts Table */
.account-table-container[b-kyel2zkhn3] {
    overflow-x: auto;
    border-radius: 12px;
}

.account-table[b-kyel2zkhn3] {
    width: 100%;
    border-collapse: collapse;
    background: var(--acv-white);
    border-radius: 12px;
    overflow: hidden;
}

/* Table Header */
.table-header-row[b-kyel2zkhn3] {
    background: var(--gray-50);
    border-bottom: 2px solid var(--gray-200);
}

.table-header-row th[b-kyel2zkhn3] {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--gray-700);
    font-size: 0.9rem;
    border-bottom: 2px solid var(--gray-200);
}

/* Column Widths */
.col-stt[b-kyel2zkhn3] {
    width: 60px;
    text-align: center !important;
}

.col-username[b-kyel2zkhn3] {
    width: auto;
    min-width: 150px;
}

.col-employee[b-kyel2zkhn3] {
    width: auto;
    min-width: 200px;
}

.col-status[b-kyel2zkhn3] {
    width: 120px;
    text-align: center !important;
}

.col-lastlogin[b-kyel2zkhn3] {
    width: 180px;
}

.col-actions[b-kyel2zkhn3] {
    width: 280px;
    text-align: center !important;
}

/* Table Body */
.table-row[b-kyel2zkhn3] {
    border-bottom: 1px solid var(--gray-200);
    transition: all 0.2s ease;
}

.table-row:hover[b-kyel2zkhn3] {
    background: var(--gray-50);
}

.table-row:last-child[b-kyel2zkhn3] {
    border-bottom: none;
}

.table-row td[b-kyel2zkhn3] {
    padding: 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--gray-200);
}

/* STT Number */
.stt-number[b-kyel2zkhn3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--gray-100);
    color: var(--gray-600);
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Account Username */
.account-username strong[b-kyel2zkhn3] {
    color: var(--gray-800);
    font-weight: 600;
    font-size: 0.95rem;
}

/* Employee Info */
.employee-info[b-kyel2zkhn3] {
    font-size: 0.9rem;
}

.employee-name[b-kyel2zkhn3] {
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 0.25rem;
}

.employee-code[b-kyel2zkhn3] {
    color: var(--gray-600);
    font-size: 0.85rem;
}

.no-employee[b-kyel2zkhn3] {
    color: var(--gray-400);
    font-style: italic;
}

/* Status Badge */
.status-badge[b-kyel2zkhn3] {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.status-badge.active[b-kyel2zkhn3] {
    background: var(--success-lighter);
    color: var(--success-dark);
}

.status-badge.inactive[b-kyel2zkhn3] {
    background: var(--error-lighter);
    color: var(--error-dark);
}

/* Date Text */
.date-text[b-kyel2zkhn3] {
    color: var(--gray-600);
    font-size: 0.9rem;
}

/* Action Buttons */
.action-buttons[b-kyel2zkhn3] {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    align-items: center;
}

.action-btn-table[b-kyel2zkhn3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 36px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    text-decoration: none;
}

.action-btn-table.view[b-kyel2zkhn3] {
    background: linear-gradient(135deg, rgba(33, 76, 166, 0.1) 0%, rgba(33, 76, 166, 0.15) 100%);
    color: var(--acv-primary);
    border: 1px solid rgba(33, 76, 166, 0.2);
}

.action-btn-table.view:hover[b-kyel2zkhn3] {
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(33, 76, 166, 0.3);
}

.action-btn-table.edit[b-kyel2zkhn3] {
    background: linear-gradient(135deg, var(--warning-lighter) 0%, rgba(255, 171, 0, 0.1) 100%);
    color: var(--warning-dark);
    border: 1px solid var(--warning-light);
}

.action-btn-table.edit:hover[b-kyel2zkhn3] {
    background: linear-gradient(135deg, var(--warning-main) 0%, var(--warning-dark) 100%);
    color: var(--acv-white);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(255, 171, 0, 0.3);
}

.action-btn-table.password[b-kyel2zkhn3] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(139, 92, 246, 0.15) 100%);
    color: #8b5cf6;
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.action-btn-table.password:hover[b-kyel2zkhn3] {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: var(--acv-white);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.3);
}

.action-btn-table.role[b-kyel2zkhn3] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.15) 100%);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.action-btn-table.role:hover[b-kyel2zkhn3] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: var(--acv-white);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}

.action-btn-table.lock[b-kyel2zkhn3] {
    background: linear-gradient(135deg, var(--error-lighter) 0%, rgba(255, 86, 48, 0.1) 100%);
    color: var(--error-dark);
    border: 1px solid var(--error-light);
}

.action-btn-table.lock:hover[b-kyel2zkhn3] {
    background: linear-gradient(135deg, var(--error-main) 0%, var(--error-dark) 100%);
    color: var(--acv-white);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(255, 86, 48, 0.3);
}

.action-btn-table.unlock[b-kyel2zkhn3] {
    background: linear-gradient(135deg, var(--success-lighter) 0%, rgba(0, 200, 83, 0.1) 100%);
    color: var(--success-dark);
    border: 1px solid var(--success-light);
}

.action-btn-table.unlock:hover[b-kyel2zkhn3] {
    background: linear-gradient(135deg, var(--success-main) 0%, var(--success-dark) 100%);
    color: var(--acv-white);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 200, 83, 0.3);
}

.action-btn-table.delete[b-kyel2zkhn3] {
    background: linear-gradient(135deg, var(--error-lighter) 0%, rgba(255, 86, 48, 0.1) 100%);
    color: var(--error-dark);
    border: 1px solid var(--error-light);
}

.action-btn-table.delete:hover[b-kyel2zkhn3] {
    background: linear-gradient(135deg, var(--error-main) 0%, var(--error-dark) 100%);
    color: var(--acv-white);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(255, 86, 48, 0.3);
}

/* Empty State */
.empty-state[b-kyel2zkhn3] {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--gray-600);
}

.empty-state-icon[b-kyel2zkhn3] {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--gray-400);
}

.empty-state-icon i.fa-spin[b-kyel2zkhn3] {
    color: var(--acv-primary);
}

.empty-state h3[b-kyel2zkhn3] {
    margin-bottom: 0.5rem;
    color: var(--gray-700);
    font-size: 1.25rem;
    font-weight: 600;
}

.empty-state p[b-kyel2zkhn3] {
    margin-bottom: 2rem;
    color: var(--gray-600);
}

.empty-state-actions[b-kyel2zkhn3] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-primary[b-kyel2zkhn3] {
    background: var(--acv-primary);
    color: var(--acv-white);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(33, 76, 166, 0.2);
}

.btn-primary:hover[b-kyel2zkhn3] {
    background: var(--acv-primary-700);
    color: var(--acv-white);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

/* Table Footer */
.table-footer[b-kyel2zkhn3] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--acv-white);
    border-top: 1px solid var(--gray-200);
    border-radius: 0 0 16px 16px;
    gap: 2rem;
    flex-wrap: wrap;
}

.results-info[b-kyel2zkhn3] {
    font-size: 0.9rem;
    color: var(--gray-600);
    font-weight: 500;
}

.pagination-container[b-kyel2zkhn3] {
    display: flex;
    align-items: center;
}

.pagination-nav[b-kyel2zkhn3] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagination-btn[b-kyel2zkhn3] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: var(--acv-white);
    color: var(--gray-600);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s ease;
    cursor: pointer;
}

.pagination-btn:hover:not(:disabled)[b-kyel2zkhn3] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border-color: var(--acv-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.15);
}

.pagination-btn.active[b-kyel2zkhn3] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border-color: var(--acv-primary);
    font-weight: 600;
    font-size: 0.9rem;
    min-width: 40px;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
    cursor: default;
}

.pagination-btn.active:hover[b-kyel2zkhn3] {
    background: var(--acv-primary);
    color: var(--acv-white);
    transform: none;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
}

.pagination-btn:disabled[b-kyel2zkhn3] {
    background: var(--gray-100);
    border-color: var(--gray-200);
    color: var(--gray-400);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Responsive Design */
@media (max-width: 768px) {
    .account-page[b-kyel2zkhn3] {
        padding: 1rem;
    }
    
    .search-main-row[b-kyel2zkhn3] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .search-input-group[b-kyel2zkhn3] {
        min-width: auto;
        flex: 1;
    }
    
    .list-header-content[b-kyel2zkhn3] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    
    .sort-controls[b-kyel2zkhn3] {
        justify-content: space-between;
    }
    
    .account-table-container[b-kyel2zkhn3] {
        overflow-x: auto;
    }
    
    .account-table[b-kyel2zkhn3] {
        min-width: 800px;
    }
    
    .table-footer[b-kyel2zkhn3] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        text-align: center;
    }
    
    .pagination-nav[b-kyel2zkhn3] {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .account-page[b-kyel2zkhn3] {
        padding: 0.5rem 1rem;
    }
    
    .card-header-section[b-kyel2zkhn3] {
        padding: 1.5rem;
    }
    
    .card-header-text h1[b-kyel2zkhn3] {
        font-size: 1.5rem;
    }
    
    .list-header[b-kyel2zkhn3] {
        padding: 1.25rem 1.5rem;
    }
    
    .list-title[b-kyel2zkhn3] {
        font-size: 1.25rem;
    }
    
    .sort-controls[b-kyel2zkhn3] {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .refresh-btn[b-kyel2zkhn3],
    .add-account-btn[b-kyel2zkhn3] {
        width: 100%;
        min-width: auto;
    }
    
    .table-header-row th[b-kyel2zkhn3],
    .table-row td[b-kyel2zkhn3] {
        padding: 0.75rem 0.5rem;
    }
    
    .action-buttons[b-kyel2zkhn3] {
        gap: 0.125rem;
    }
    
    .action-btn-table[b-kyel2zkhn3] {
        width: 36px;
        height: 32px;
        font-size: 0.8rem;
    }
}
/* _content/ltia.portal.web/Components/Pages/Admin/Account/AccountCreate.razor.rz.scp.css */
/* CSS Variables - Đặt trực tiếp vào .account-create-page */
.account-create-page[b-lklbbdqlfj] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    
    padding: 2rem;
    background: #f8f9fa;
    min-height: 100vh;
}

/* Card Header */
.account-create-card-header[b-lklbbdqlfj] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-content[b-lklbbdqlfj] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-icon[b-lklbbdqlfj] {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-800) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
}

.header-text[b-lklbbdqlfj] {
    flex: 1;
}

.header-title[b-lklbbdqlfj] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 0.5rem 0;
}

.header-subtitle[b-lklbbdqlfj] {
    font-size: 1rem;
    color: var(--gray-600);
    margin: 0;
}

/* Main Content Container */
.main-content-container[b-lklbbdqlfj] {
    display: flex;
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.form-column[b-lklbbdqlfj] {
    flex: 2;
    background: var(--acv-white);
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.profile-column[b-lklbbdqlfj] {
    flex: 1;
    min-width: 300px;
}

/* Form Sections */
.form-section[b-lklbbdqlfj] {
    margin-bottom: 32px;
}

.section-header[b-lklbbdqlfj] {
    margin-bottom: 20px;
}

.section-title[b-lklbbdqlfj] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
}

.section-title i[b-lklbbdqlfj] {
    color: var(--acv-primary);
    font-size: 16px;
}

.form-grid[b-lklbbdqlfj] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Form Styling */
.form-group[b-lklbbdqlfj] {
    margin-bottom: 24px;
}

.form-group.full-width[b-lklbbdqlfj] {
    grid-column: 1 / -1;
    width: 100%;
}

.form-label[b-lklbbdqlfj] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 8px;
    font-size: 14px;
}

.form-label i[b-lklbbdqlfj] {
    color: var(--acv-primary);
    width: 16px;
}

.required[b-lklbbdqlfj] {
    color: var(--error-main);
}

/* Form Input */
.form-input[b-lklbbdqlfj] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s ease;
    background: var(--acv-white);
    box-sizing: border-box;
}

.form-input:focus[b-lklbbdqlfj] {
    outline: none;
    border-color: var(--acv-primary);
    border-width: 1px;
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.form-input:disabled[b-lklbbdqlfj] {
    background: var(--gray-100);
    color: var(--gray-500);
    cursor: not-allowed;
}

.form-input[b-lklbbdqlfj]::placeholder {
    color: var(--gray-400);
}

/* Form Actions */
.form-actions[b-lklbbdqlfj] {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--gray-200);
}

.btn-primary[b-lklbbdqlfj], .btn-secondary[b-lklbbdqlfj] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid;
    text-decoration: none;
    min-width: 140px;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-primary[b-lklbbdqlfj] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border-color: var(--acv-primary);
}

.btn-primary:hover:not(:disabled)[b-lklbbdqlfj] {
    background: var(--acv-primary-800);
    border-color: var(--acv-primary-800);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(33, 76, 166, 0.3);
}

.btn-primary:disabled[b-lklbbdqlfj] {
    background: var(--gray-400);
    border-color: var(--gray-400);
    cursor: not-allowed;
    transform: none;
    opacity: 0.6;
}

.btn-secondary[b-lklbbdqlfj] {
    background: var(--acv-white);
    color: var(--gray-800);
    border-color: var(--gray-300);
}

.btn-secondary:hover:not(:disabled)[b-lklbbdqlfj] {
    background: var(--gray-50);
    border-color: var(--gray-400);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-secondary:disabled[b-lklbbdqlfj] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Profile Card */
.profile-card[b-lklbbdqlfj] {
    background: var(--acv-white);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    height: fit-content;
    position: sticky;
    top: 20px;
}

.profile-header[b-lklbbdqlfj] {
    text-align: center;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--gray-200);
}

.profile-avatar[b-lklbbdqlfj] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-800) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: var(--acv-white);
    font-size: 32px;
}

.profile-avatar.empty[b-lklbbdqlfj] {
    background: var(--gray-300);
    color: var(--gray-500);
}

.profile-info[b-lklbbdqlfj] {
    flex: 1;
}

.profile-name[b-lklbbdqlfj] {
    font-size: 20px;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 4px 0;
}

.profile-code[b-lklbbdqlfj] {
    font-size: 14px;
    color: var(--gray-600);
    margin: 0;
}

.profile-details[b-lklbbdqlfj] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.profile-details.empty[b-lklbbdqlfj] {
    display: none;
}

.detail-item[b-lklbbdqlfj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--gray-200);
}

.detail-item:last-child[b-lklbbdqlfj] {
    border-bottom: none;
}

.detail-label[b-lklbbdqlfj] {
    font-weight: 600;
    color: var(--gray-800);
    font-size: 14px;
}

.detail-value[b-lklbbdqlfj] {
    color: var(--gray-700);
    font-size: 14px;
    text-align: right;
    max-width: 60%;
    word-wrap: break-word;
}

/* Responsive */
@media (max-width: 1024px) {
    .main-content-container[b-lklbbdqlfj] {
        flex-direction: column;
    }
    
    .profile-column[b-lklbbdqlfj] {
        min-width: unset;
    }
    
    .profile-card[b-lklbbdqlfj] {
        position: static;
    }
    
    .form-grid[b-lklbbdqlfj] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .account-create-page[b-lklbbdqlfj] {
        padding: 1rem;
    }
    
    .account-create-card-header[b-lklbbdqlfj] {
        padding: 1.5rem;
    }
    
    .main-content-container[b-lklbbdqlfj] {
        padding: 0 16px;
    }
    
    .form-column[b-lklbbdqlfj] {
        padding: 24px;
    }
    
    .form-actions[b-lklbbdqlfj] {
        flex-direction: column;
    }
    
    .btn-primary[b-lklbbdqlfj], .btn-secondary[b-lklbbdqlfj] {
        justify-content: center;
        width: 100%;
    }
    
    .header-content[b-lklbbdqlfj] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .header-icon[b-lklbbdqlfj] {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }
    
    .header-title[b-lklbbdqlfj] {
        font-size: 1.5rem;
    }
    
    .header-subtitle[b-lklbbdqlfj] {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .account-create-page[b-lklbbdqlfj] {
        padding: 0.5rem;
    }
    
    .account-create-card-header[b-lklbbdqlfj] {
        padding: 1rem;
    }
    
    .form-column[b-lklbbdqlfj] {
        padding: 1.5rem;
    }
    
    .profile-card[b-lklbbdqlfj] {
        padding: 1.5rem;
    }
}
/* _content/ltia.portal.web/Components/Pages/Admin/Account/AccountDetail.razor.rz.scp.css */
/* Account Detail Page - Based on Subjects Details Design */
.account-detail-page[b-lm92dkwkvq] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Loading & Not Found States */
.loading-container[b-lm92dkwkvq],
.not-found-container[b-lm92dkwkvq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
}

.loading-spinner i[b-lm92dkwkvq] {
    font-size: 3rem;
    color: var(--acv-primary);
    animation: spin-b-lm92dkwkvq 1s linear infinite;
}

@keyframes spin-b-lm92dkwkvq {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.not-found-icon i[b-lm92dkwkvq] {
    font-size: 4rem;
    color: var(--gray-400);
    margin-bottom: 1rem;
}

.not-found-container h3[b-lm92dkwkvq] {
    color: var(--gray-800);
    margin-bottom: 0.5rem;
}

.not-found-container p[b-lm92dkwkvq] {
    color: var(--gray-600);
    margin-bottom: 1.5rem;
}

.not-found-container .btn-primary[b-lm92dkwkvq] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.15);
}

.not-found-container .btn-primary:hover[b-lm92dkwkvq] {
    background: linear-gradient(135deg, var(--acv-primary-700) 0%, var(--acv-primary-800) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.25);
    text-decoration: none;
    color: var(--acv-white);
}

/* Card Header Section */
.card-header-section[b-lm92dkwkvq] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.card-header-content[b-lm92dkwkvq] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.card-header-icon[b-lm92dkwkvq] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.card-header-text h1[b-lm92dkwkvq] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
}

.card-header-text p[b-lm92dkwkvq] {
    font-size: 0.95rem;
    color: var(--gray-600);
    margin: 0.25rem 0 0 0;
}

/* Main Content Container */
.account-details-container[b-lm92dkwkvq] {
    max-width: 100%;
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Card Styles */
.detail-card[b-lm92dkwkvq] {
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--gray-200);
    overflow: hidden;
}

.card-header[b-lm92dkwkvq] {
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--acv-white) 100%);
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-title[b-lm92dkwkvq] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-title i[b-lm92dkwkvq] {
    color: var(--acv-primary);
    font-size: 0.875rem;
}

.card-content[b-lm92dkwkvq] {
    padding: 1.25rem;
}

/* Details Grid */
.details-grid[b-lm92dkwkvq] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    row-gap: 1rem;
}

.detail-item[b-lm92dkwkvq] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--gray-200);
}

.detail-item:last-child[b-lm92dkwkvq] {
    border-bottom: none;
    padding-bottom: 0;
}

.detail-item.full-width[b-lm92dkwkvq] {
    grid-column: 1 / -1;
}

.detail-label[b-lm92dkwkvq] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gray-600);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.detail-label i[b-lm92dkwkvq] {
    color: var(--acv-primary);
    font-size: 0.875rem;
}

.detail-value[b-lm92dkwkvq] {
    font-size: 1.0625rem;
    color: var(--gray-900);
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.detail-value strong[b-lm92dkwkvq] {
    font-weight: 600;
    color: var(--gray-900);
    font-size: 1.125rem;
}

/* Status Badge */
.status-badge[b-lm92dkwkvq] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-badge.active[b-lm92dkwkvq] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: var(--acv-white);
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}

.status-badge.inactive[b-lm92dkwkvq] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: var(--acv-white);
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
}

/* Verified Badge */
.verified-badge[b-lm92dkwkvq] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: var(--acv-white);
    border-radius: 8px;
    font-size: 0.6875rem;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(16, 185, 129, 0.2);
}

/* Empty Value */
.empty-value[b-lm92dkwkvq] {
    color: var(--gray-500);
    font-style: italic;
    font-size: 0.9375rem;
}

/* Avatar Image */
.avatar-image[b-lm92dkwkvq] {
    width: 120px;
    height: 120px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 2px solid var(--gray-200);
}

/* ID Card Image */
.id-card-image[b-lm92dkwkvq] {
    max-width: 100%;
    max-height: 400px;
    border-radius: 8px;
    object-fit: contain;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 2px solid var(--gray-200);
}

/* Form Actions */
.form-actions[b-lm92dkwkvq] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-200);
    flex-wrap: wrap;
}

.btn-primary[b-lm92dkwkvq],
.btn-secondary[b-lm92dkwkvq],
.btn-danger[b-lm92dkwkvq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    border: none;
    min-width: 160px;
    justify-content: center;
}

.btn-primary[b-lm92dkwkvq] {
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.15);
}

.btn-primary:hover[b-lm92dkwkvq] {
    background: linear-gradient(135deg, var(--acv-primary-700) 0%, var(--acv-primary-800) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.25);
    text-decoration: none;
    color: var(--acv-white);
}

.btn-secondary[b-lm92dkwkvq] {
    background: var(--acv-white);
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.btn-secondary:hover[b-lm92dkwkvq] {
    background: var(--gray-50);
    border-color: var(--gray-400);
    transform: translateY(-1px);
    color: var(--gray-800);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-danger[b-lm92dkwkvq] {
    background: linear-gradient(135deg, #ff5630 0%, #ff8a65 100%);
    color: var(--acv-white);
    box-shadow: 0 2px 8px rgba(255, 86, 48, 0.25);
}

.btn-danger:hover[b-lm92dkwkvq] {
    background: linear-gradient(135deg, #e53e3e 0%, #ff6b47 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 86, 48, 0.35);
}

/* Responsive */
@media (max-width: 768px) {
    .account-detail-page[b-lm92dkwkvq] {
        padding: 0.5rem 1rem;
    }

    .card-header-text h1[b-lm92dkwkvq] {
        font-size: 1.5rem;
    }
    
    .card-header[b-lm92dkwkvq] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .details-grid[b-lm92dkwkvq] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .detail-item[b-lm92dkwkvq] {
        gap: 0.25rem;
    }

    .form-actions[b-lm92dkwkvq] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .btn-primary[b-lm92dkwkvq],
    .btn-secondary[b-lm92dkwkvq],
    .btn-danger[b-lm92dkwkvq] {
        min-width: 100%;
    }
}

@media (max-width: 600px) {
    .card-header-content[b-lm92dkwkvq] {
        flex-direction: column;
        text-align: center;
    }

    .avatar-image[b-lm92dkwkvq] {
        width: 100px;
        height: 100px;
    }

    .id-card-image[b-lm92dkwkvq] {
        max-height: 300px;
    }
}
/* _content/ltia.portal.web/Components/Pages/Admin/Account/AccountEdit.razor.rz.scp.css */
/* CSS Variables - Đặt trực tiếp vào .account-edit-page */
.account-edit-page[b-spp88t0f47] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    
    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Card Header */
.account-edit-card-header[b-spp88t0f47] {
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--acv-white) 100%);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.header-content[b-spp88t0f47] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem 2.5rem;
}

.header-icon[b-spp88t0f47] {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.25);
    flex-shrink: 0;
}

.header-icon i[b-spp88t0f47] {
    color: var(--acv-white);
    font-size: 1.75rem;
}

.header-text[b-spp88t0f47] {
    flex: 1;
}

.header-title[b-spp88t0f47] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
}

.header-subtitle[b-spp88t0f47] {
    font-size: 1rem;
    color: var(--gray-600);
    margin: 0;
    line-height: 1.5;
}

/* Loading & Not Found States */
.loading-container[b-spp88t0f47],
.not-found-container[b-spp88t0f47] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    margin-bottom: 2rem;
    padding: 2rem;
}

.loading-spinner[b-spp88t0f47] {
    margin-bottom: 1rem;
}

.loading-spinner i[b-spp88t0f47] {
    font-size: 3rem;
    color: var(--acv-primary);
}

.loading-container p[b-spp88t0f47] {
    color: var(--gray-600);
    margin: 0;
}

.not-found-icon[b-spp88t0f47] {
    margin-bottom: 1rem;
}

.not-found-icon i[b-spp88t0f47] {
    font-size: 4rem;
    color: var(--gray-400);
}

.not-found-container h3[b-spp88t0f47] {
    color: var(--gray-800);
    margin-bottom: 0.5rem;
}

.not-found-container p[b-spp88t0f47] {
    color: var(--gray-600);
    margin-bottom: 1.5rem;
}

/* Main Content Container (Two-column layout) */
.main-content-container[b-spp88t0f47] {
    display: flex;
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto;
    overflow: visible;
}

/* Form Column (Left) */
.form-column[b-spp88t0f47] {
    flex: 2;
    background: var(--acv-white);
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: visible;
}

.create-form[b-spp88t0f47] {
    max-width: 100%;
}

/* Profile Column (Right) */
.profile-column[b-spp88t0f47] {
    flex: 1;
    min-width: 300px;
}

/* Form Groups */
.form-group[b-spp88t0f47] {
    margin-bottom: 1.5rem;
}

.form-row[b-spp88t0f47] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.form-label[b-spp88t0f47] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
}

.form-label i[b-spp88t0f47] {
    color: var(--acv-primary);
    font-size: 0.85rem;
}

.required[b-spp88t0f47] {
    color: var(--error-main);
    margin-left: 2px;
}

/* Form Inputs */
.form-input[b-spp88t0f47] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    background: var(--acv-white);
    transition: all 0.2s ease;
    font-family: inherit;
    box-sizing: border-box;
    height: 48px;
}

.form-input:focus[b-spp88t0f47] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.form-input-disabled[b-spp88t0f47] {
    background-color: #f8f9fa !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
    border-color: #dee2e6 !important;
}

.form-text[b-spp88t0f47] {
    font-size: 0.85rem;
    color: var(--gray-600);
    margin-top: 0.25rem;
}

.validation-error[b-spp88t0f47] {
    color: var(--error-main);
    font-size: 0.85rem;
    margin-top: 0.25rem;
    display: block;
}

/* Form Display Field (for read-only fields like Employee Code) */
.form-display-field[b-spp88t0f47] {
    background: #f8f9fa;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 16px;
    min-height: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.form-display-value[b-spp88t0f47] {
    font-weight: 600;
    color: #2d3748;
    font-size: 16px;
    line-height: 1.5;
}

.form-hint[b-spp88t0f47] {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
}

/* Employee name display */
.employee-name-display[b-spp88t0f47] {
    margin-top: 1rem;
    margin-bottom: 0;
}

.employee-name-display .form-label[b-spp88t0f47] {
    margin-bottom: 0;
    font-size: 1rem;
    color: var(--gray-800);
}

/* Employee Input Container */
.employee-input-container[b-spp88t0f47] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.employee-input-wrapper[b-spp88t0f47] {
    flex: 1;
    position: relative;
}

.btn-clear-employee[b-spp88t0f47] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: var(--acv-white);
    border: 1px solid var(--gray-300);
    color: var(--gray-700);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
    white-space: nowrap;
    margin-top: 0;
    height: 48px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-clear-employee i[b-spp88t0f47] {
    font-size: 0.875rem;
}

.btn-clear-employee:hover:not(:disabled)[b-spp88t0f47] {
    background: var(--error-lighter);
    border-color: var(--error-main);
    color: var(--error-main);
    box-shadow: 0 2px 4px rgba(255, 86, 48, 0.15);
    transform: translateY(-1px);
}

.btn-clear-employee:active:not(:disabled)[b-spp88t0f47] {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(255, 86, 48, 0.1);
}

.btn-clear-employee:disabled[b-spp88t0f47] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}


/* Dropdown Search Styles */
.no-drop-arrow[b-spp88t0f47]::-webkit-calendar-picker-indicator {
    opacity: 0;
    display: none;
}

.no-drop-arrow[b-spp88t0f47] {
    appearance: textfield;
    -webkit-appearance: textfield;
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
}

.select-search-wrap[b-spp88t0f47] {
    position: relative;
    display: flex;
    align-items: center;
}

.select-clear-btn[b-spp88t0f47] {
    position: absolute;
    right: 4px;
    background: none;
    border: none;
    color: #888;
    font-size: 1.5rem;
    padding: 0 3px;
    cursor: pointer;
    z-index: 10;
}

.dropdown-panel[b-spp88t0f47] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    margin-top: 4px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    max-height: 280px;
    overflow: auto;
}

.dropdown-loading[b-spp88t0f47] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    color: #6b7280;
    font-size: 0.95rem;
}

.spinner[b-spp88t0f47] {
    width: 16px;
    height: 16px;
    border: 2px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    display: inline-block;
    animation: spin-b-spp88t0f47 0.8s linear infinite;
}

@keyframes spin-b-spp88t0f47 {
    to {
        transform: rotate(360deg);
    }
}

.dropdown-list[b-spp88t0f47] {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

.dropdown-item[b-spp88t0f47] {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
}

.dropdown-item:hover[b-spp88t0f47] {
    background: #f3f4f6;
}

.dropdown-item .code[b-spp88t0f47] {
    font-weight: 600;
    color: #111827;
}

.dropdown-item .name[b-spp88t0f47] {
    color: #374151;
}

.dropdown-empty[b-spp88t0f47] {
    padding: 10px 12px;
    color: #9ca3af;
}

/* Hide dropdown arrow in Edge/IE */
input[list].no-drop-arrow[b-spp88t0f47]::-ms-expand {
    display: none;
}

/* Form Actions */
.form-actions[b-spp88t0f47] {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}

.btn-primary[b-spp88t0f47], .btn-secondary[b-spp88t0f47], .btn-danger[b-spp88t0f47] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid;
    text-decoration: none;
    min-width: 140px;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-primary[b-spp88t0f47] {
    background: #214ca6;
    color: white;
    border-color: #214ca6;
}

.btn-primary:hover:not(:disabled)[b-spp88t0f47] {
    background: #1a3d8a;
    border-color: #1a3d8a;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(33, 76, 166, 0.3);
}

.btn-primary:disabled[b-spp88t0f47] {
    background: #9ca3af;
    border-color: #9ca3af;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary[b-spp88t0f47] {
    background: white;
    color: #111827;
    border-color: #d1d5db;
}

.btn-secondary:hover:not(:disabled)[b-spp88t0f47] {
    background: #f9fafb;
    border-color: #9ca3af;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-secondary:disabled[b-spp88t0f47] {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #9ca3af;
    cursor: not-allowed;
    transform: none;
}

.btn-danger[b-spp88t0f47] {
    background: #ff6b35;
    color: white;
    border-color: #ff6b35;
}

.btn-danger:hover:not(:disabled)[b-spp88t0f47] {
    background: #e55a2b;
    border-color: #e55a2b;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(255, 107, 53, 0.3);
}

.btn-danger:disabled[b-spp88t0f47] {
    background: #9ca3af;
    border-color: #9ca3af;
    cursor: not-allowed;
    transform: none;
}

/* Profile Card */
.profile-card[b-spp88t0f47] {
    background: var(--acv-white);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    height: fit-content;
    position: sticky;
    top: 20px;
}

.profile-header[b-spp88t0f47] {
    text-align: center;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--gray-200);
}

.profile-avatar[b-spp88t0f47] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-800) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: var(--acv-white);
    font-size: 32px;
}

.profile-info[b-spp88t0f47] {
    text-align: center;
}

.profile-name[b-spp88t0f47] {
    font-size: 20px;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 4px 0;
}

.profile-code[b-spp88t0f47] {
    font-size: 14px;
    color: var(--gray-600);
    margin: 0;
}

.profile-details[b-spp88t0f47] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.detail-item[b-spp88t0f47] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--gray-200);
}

.detail-item:last-child[b-spp88t0f47] {
    border-bottom: none;
}

.detail-label[b-spp88t0f47] {
    font-weight: 600;
    color: var(--gray-900);
    font-size: 14px;
}

.detail-value[b-spp88t0f47] {
    color: var(--gray-900);
    font-size: 14px;
    text-align: right;
    max-width: 60%;
    word-wrap: break-word;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .main-content-container[b-spp88t0f47] {
        flex-direction: column;
    }
    
    .profile-column[b-spp88t0f47] {
        min-width: unset;
    }
    
    .profile-card[b-spp88t0f47] {
        position: static;
    }
}

@media (max-width: 768px) {
    .account-edit-page[b-spp88t0f47] {
        padding: 0.5rem 1rem;
    }

    .header-content[b-spp88t0f47] {
        flex-direction: column;
        gap: 1rem;
        padding: 1.5rem;
    }

    .header-icon[b-spp88t0f47] {
        width: 48px;
        height: 48px;
    }

    .header-icon i[b-spp88t0f47] {
        font-size: 1.5rem;
    }

    .header-title[b-spp88t0f47] {
        font-size: 1.5rem;
    }

    .header-subtitle[b-spp88t0f47] {
        font-size: 0.9rem;
    }

    .form-column[b-spp88t0f47] {
        padding: 1.5rem;
    }

    .form-row[b-spp88t0f47] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .form-actions[b-spp88t0f47] {
        flex-direction: column;
        gap: 0.75rem;
        margin-top: 24px;
        padding-top: 20px;
    }

    .form-actions .btn-secondary[b-spp88t0f47],
    .form-actions .btn-primary[b-spp88t0f47],
    .form-actions .btn-danger[b-spp88t0f47] {
        min-width: 100%;
        width: 100%;
    }

    .profile-card[b-spp88t0f47] {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .account-edit-page[b-spp88t0f47] {
        padding: 0.5rem;
    }

    .header-content[b-spp88t0f47] {
        padding: 1rem;
    }

    .form-column[b-spp88t0f47] {
        padding: 1rem;
    }

    .header-title[b-spp88t0f47] {
        font-size: 1.25rem;
    }

    .form-group[b-spp88t0f47] {
        margin-bottom: 1rem;
    }

    .profile-card[b-spp88t0f47] {
        padding: 16px;
    }

    .profile-avatar[b-spp88t0f47] {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }

    .profile-name[b-spp88t0f47] {
        font-size: 18px;
    }
}
/* _content/ltia.portal.web/Components/Pages/Admin/Account/AccountRoles.razor.rz.scp.css */
/* CSS Variables - Đặt trực tiếp vào .account-roles-page */
.account-roles-page[b-fkzdjv2tav] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    
    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Card Header */
.account-roles-card-header[b-fkzdjv2tav] {
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--acv-white) 100%);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.header-content[b-fkzdjv2tav] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem 2.5rem;
}

.header-icon[b-fkzdjv2tav] {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.25);
    flex-shrink: 0;
}

.header-icon i[b-fkzdjv2tav] {
    color: var(--acv-white);
    font-size: 1.75rem;
}

.header-text[b-fkzdjv2tav] {
    flex: 1;
}

.header-title[b-fkzdjv2tav] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
}

.header-subtitle[b-fkzdjv2tav] {
    font-size: 1rem;
    color: var(--gray-600);
    margin: 0;
    line-height: 1.5;
}

/* Loading & Error & Not Found States */
.loading-container[b-fkzdjv2tav],
.error-container[b-fkzdjv2tav],
.not-found-container[b-fkzdjv2tav] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    margin-bottom: 2rem;
    padding: 2rem;
}

.loading-spinner[b-fkzdjv2tav] {
    margin-bottom: 1rem;
}

.loading-spinner i[b-fkzdjv2tav] {
    font-size: 3rem;
    color: var(--acv-primary);
    animation: spin-b-fkzdjv2tav 1s linear infinite;
}

@keyframes spin-b-fkzdjv2tav {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-fkzdjv2tav] {
    color: var(--gray-600);
    margin: 0;
}

.error-icon[b-fkzdjv2tav],
.not-found-icon[b-fkzdjv2tav] {
    margin-bottom: 1rem;
}

.error-icon i[b-fkzdjv2tav],
.not-found-icon i[b-fkzdjv2tav] {
    font-size: 4rem;
    color: var(--gray-400);
}

.error-container h3[b-fkzdjv2tav],
.not-found-container h3[b-fkzdjv2tav] {
    color: var(--gray-800);
    margin-bottom: 0.5rem;
}

.error-container p[b-fkzdjv2tav],
.not-found-container p[b-fkzdjv2tav] {
    color: var(--gray-600);
    margin-bottom: 1.5rem;
}

/* Main Content Container */
.main-content-container[b-fkzdjv2tav] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Account Info Card */
.account-info-card[b-fkzdjv2tav] {
    background: var(--acv-white);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--gray-200);
    overflow: hidden;
}

.account-info-card .card-header[b-fkzdjv2tav] {
    background: var(--gray-50);
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
}

.account-info-card .card-title[b-fkzdjv2tav] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0;
}

.account-info-card .card-title i[b-fkzdjv2tav] {
    color: var(--acv-primary);
    font-size: 1rem;
}

.account-info-card .card-content[b-fkzdjv2tav] {
    padding: 1.5rem;
}

.account-info-grid[b-fkzdjv2tav] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.info-item[b-fkzdjv2tav] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.info-label[b-fkzdjv2tav] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-700);
}

.info-label i[b-fkzdjv2tav] {
    color: var(--acv-primary);
    font-size: 0.75rem;
}

.info-value[b-fkzdjv2tav] {
    font-size: 1rem;
    color: var(--gray-900);
    padding: 0.5rem 0;
}

.info-value .text-muted[b-fkzdjv2tav] {
    color: var(--gray-600);
    font-size: 0.875rem;
}

/* Roles Section Card */
.roles-section-card[b-fkzdjv2tav] {
    background: var(--acv-white);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--gray-200);
    overflow: hidden;
}

.roles-section-card .card-header[b-fkzdjv2tav] {
    background: var(--gray-50);
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
}

.roles-header[b-fkzdjv2tav] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.roles-header .card-title[b-fkzdjv2tav] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0;
}

.roles-header .card-title i[b-fkzdjv2tav] {
    color: var(--acv-primary);
    font-size: 1rem;
}

.roles-summary[b-fkzdjv2tav] {
    display: flex;
    align-items: center;
}

.summary-text[b-fkzdjv2tav] {
    font-size: 0.875rem;
    color: var(--gray-600);
}

.summary-text strong[b-fkzdjv2tav] {
    color: var(--acv-primary);
    font-weight: 600;
}

.roles-section-card .card-content[b-fkzdjv2tav] {
    padding: 1.5rem;
}

/* Roles Table */
.roles-table-container[b-fkzdjv2tav] {
    background: var(--acv-white);
    border-radius: 8px;
    border: 1px solid var(--gray-200);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.roles-table[b-fkzdjv2tav] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.roles-table thead[b-fkzdjv2tav] {
    background: var(--gray-50);
    border-bottom: 2px solid var(--gray-200);
}

.roles-table th[b-fkzdjv2tav] {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--gray-800);
    border-bottom: 1px solid var(--gray-200);
}

.roles-table td[b-fkzdjv2tav] {
    padding: 1rem;
    border-bottom: 1px solid var(--gray-100);
    vertical-align: middle;
}

.role-row[b-fkzdjv2tav] {
    transition: background-color 0.2s ease;
}

.role-row:hover[b-fkzdjv2tav] {
    background-color: var(--gray-50);
}

.role-row.selected[b-fkzdjv2tav] {
    background-color: var(--acv-primary-lighter);
}

.role-row.selected:hover[b-fkzdjv2tav] {
    background-color: #bfdbfe;
}

/* Table Columns */
.checkbox-column[b-fkzdjv2tav] {
    width: 200px;
    text-align: left;
}

/* Select All Header */
.select-all-header[b-fkzdjv2tav] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.select-all-label[b-fkzdjv2tav] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-700);
    cursor: pointer;
    margin: 0;
}

.name-column[b-fkzdjv2tav] {
    width: 35%;
    font-weight: 500;
}

.description-column[b-fkzdjv2tav] {
    width: 50%;
    color: var(--gray-600);
}

/* Checkbox Styling */
.role-check[b-fkzdjv2tav] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--acv-primary);
}

.role-name[b-fkzdjv2tav] {
    cursor: pointer;
    font-weight: 500;
    color: var(--gray-800);
}

.role-description[b-fkzdjv2tav] {
    font-size: 0.875rem;
    color: var(--gray-600);
    line-height: 1.5;
}

/* Table Footer (Pagination) */
.table-footer[b-fkzdjv2tav] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-top: 1px solid var(--gray-200);
    margin-top: 1.5rem;
}

.results-info[b-fkzdjv2tav] {
    font-size: 0.875rem;
    color: var(--gray-600);
}

.results-info strong[b-fkzdjv2tav] {
    color: var(--gray-800);
    font-weight: 600;
}

.pagination-container[b-fkzdjv2tav] {
    display: flex;
    align-items: center;
}

.pagination-nav[b-fkzdjv2tav] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pagination-btn[b-fkzdjv2tav] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    background: var(--acv-white);
    color: var(--gray-700);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pagination-btn:hover:not(:disabled)[b-fkzdjv2tav] {
    background: var(--gray-50);
    border-color: var(--gray-400);
    color: var(--gray-900);
}

.pagination-btn.active[b-fkzdjv2tav] {
    background: var(--acv-primary);
    border-color: var(--acv-primary);
    color: var(--acv-white);
}

.pagination-btn:disabled[b-fkzdjv2tav] {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--gray-100);
}

/* Empty State */
.empty-state[b-fkzdjv2tav] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 2rem;
    color: var(--gray-600);
}

.empty-state-icon[b-fkzdjv2tav] {
    margin-bottom: 1rem;
}

.empty-state-icon i[b-fkzdjv2tav] {
    font-size: 3rem;
    color: var(--gray-400);
}

.empty-state h3[b-fkzdjv2tav] {
    margin: 0 0 0.5rem 0;
    color: var(--gray-800);
    font-size: 1.25rem;
}

.empty-state p[b-fkzdjv2tav] {
    margin: 0;
    color: var(--gray-600);
    font-size: 0.9rem;
}

/* Form Actions */
.form-actions[b-fkzdjv2tav] {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-200);
}

.btn-primary[b-fkzdjv2tav], .btn-secondary[b-fkzdjv2tav] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid;
    text-decoration: none;
    min-width: 140px;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-primary[b-fkzdjv2tav] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border-color: var(--acv-primary);
}

.btn-primary:hover:not(:disabled)[b-fkzdjv2tav] {
    background: var(--acv-primary-800);
    border-color: var(--acv-primary-800);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(33, 76, 166, 0.3);
}

.btn-primary:disabled[b-fkzdjv2tav] {
    background: var(--gray-400);
    border-color: var(--gray-400);
    cursor: not-allowed;
    transform: none;
    opacity: 0.6;
}

.btn-secondary[b-fkzdjv2tav] {
    background: var(--acv-white);
    color: var(--gray-800);
    border-color: var(--gray-300);
}

.btn-secondary:hover:not(:disabled)[b-fkzdjv2tav] {
    background: var(--gray-50);
    border-color: var(--gray-400);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-secondary:disabled[b-fkzdjv2tav] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Responsive Design */
@media (max-width: 768px) {
    .account-roles-page[b-fkzdjv2tav] {
        padding: 0.5rem 1rem;
    }

    .header-content[b-fkzdjv2tav] {
        flex-direction: column;
        gap: 1rem;
        padding: 1.5rem;
    }

    .header-icon[b-fkzdjv2tav] {
        width: 48px;
        height: 48px;
    }

    .header-icon i[b-fkzdjv2tav] {
        font-size: 1.5rem;
    }

    .header-title[b-fkzdjv2tav] {
        font-size: 1.5rem;
    }

    .header-subtitle[b-fkzdjv2tav] {
        font-size: 0.9rem;
    }

    .account-info-grid[b-fkzdjv2tav] {
        grid-template-columns: 1fr;
    }

    .roles-header[b-fkzdjv2tav] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .roles-table-container[b-fkzdjv2tav] {
        overflow-x: auto;
    }

    .table-footer[b-fkzdjv2tav] {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .pagination-nav[b-fkzdjv2tav] {
        flex-wrap: wrap;
    }

    .form-actions[b-fkzdjv2tav] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .form-actions .btn-secondary[b-fkzdjv2tav],
    .form-actions .btn-primary[b-fkzdjv2tav] {
        min-width: 100%;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .account-roles-page[b-fkzdjv2tav] {
        padding: 0.5rem;
    }

    .header-content[b-fkzdjv2tav] {
        padding: 1rem;
    }

    .account-info-card .card-content[b-fkzdjv2tav],
    .roles-section-card .card-content[b-fkzdjv2tav] {
        padding: 1rem;
    }

    .header-title[b-fkzdjv2tav] {
        font-size: 1.25rem;
    }

    .roles-table th[b-fkzdjv2tav],
    .roles-table td[b-fkzdjv2tav] {
        padding: 0.75rem 0.5rem;
        font-size: 0.85rem;
    }
}

/* _content/ltia.portal.web/Components/Pages/Admin/Account/UserAccount.razor.rz.scp.css */
/* Account Info Page - Professional Design */
.account-info-page[b-x66tg9brfz] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Loading & Not Found States */
.loading-container[b-x66tg9brfz],
.not-found-container[b-x66tg9brfz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
    background: var(--acv-white);
    border-radius: 16px;
    padding: 3rem 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.loading-spinner i[b-x66tg9brfz] {
    font-size: 3rem;
    color: var(--acv-primary);
    animation: spin-b-x66tg9brfz 1s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin-b-x66tg9brfz {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-x66tg9brfz] {
    color: var(--gray-600);
    font-size: 1rem;
    margin: 0;
}

.not-found-icon i[b-x66tg9brfz] {
    font-size: 4rem;
    color: var(--gray-400);
    margin-bottom: 1rem;
}

.not-found-container h3[b-x66tg9brfz] {
    color: var(--gray-800);
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}

.not-found-container p[b-x66tg9brfz] {
    color: var(--gray-600);
    margin-bottom: 1.5rem;
}

/* Card Header Section */
.card-header-section[b-x66tg9brfz] {
    background: var(--acv-white);
    border-radius: 12px;
    padding: 2rem 2.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--gray-200);
}

.card-header-content[b-x66tg9brfz] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.card-header-icon[b-x66tg9brfz] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.card-header-text h1[b-x66tg9brfz] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
}

.card-header-text p[b-x66tg9brfz] {
    font-size: 0.95rem;
    color: var(--gray-600);
    margin: 0.25rem 0 0 0;
}

/* Main Content Container */
.account-details-container[b-x66tg9brfz] {
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 1.75rem;
    margin-top: 0;
}

@media (max-width: 1200px) {
    .account-details-container[b-x66tg9brfz] {
        grid-template-columns: 1fr;
    }
}

/* Card Styles */
.detail-card[b-x66tg9brfz] {
    background: var(--acv-white);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--gray-200);
    overflow: hidden;
    transition: all 0.2s ease;
}

.detail-card:hover[b-x66tg9brfz] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: var(--gray-300);
}

.card-header[b-x66tg9brfz] {
    background: var(--gray-50);
    padding: 1.25rem 1.5rem;
    border-bottom: 2px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-title[b-x66tg9brfz] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    letter-spacing: -0.01em;
}

.card-title i[b-x66tg9brfz] {
    color: var(--acv-primary);
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

.card-content[b-x66tg9brfz] {
    padding: 1.75rem 1.5rem;
}

/* Details Grid */
.details-grid[b-x66tg9brfz] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem 2rem;
}

.detail-item[b-x66tg9brfz] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--gray-100);
}

.detail-item:last-child[b-x66tg9brfz] {
    border-bottom: none;
    padding-bottom: 0;
}

.detail-item.full-width[b-x66tg9brfz] {
    grid-column: 1 / -1;
}

.detail-label[b-x66tg9brfz] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.detail-label i[b-x66tg9brfz] {
    color: var(--acv-primary);
    font-size: 0.875rem;
    width: 16px;
    text-align: center;
    opacity: 0.8;
}

.detail-value[b-x66tg9brfz] {
    font-size: 1rem;
    color: var(--gray-900);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
    line-height: 1.5;
}

.detail-value strong[b-x66tg9brfz] {
    font-weight: 600;
    color: var(--gray-900);
    font-size: 1.05rem;
}

/* Status Badge */
.status-badge[b-x66tg9brfz] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.status-badge.active[b-x66tg9brfz] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: var(--acv-white);
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}

.status-badge.inactive[b-x66tg9brfz] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: var(--acv-white);
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
}

/* Verified Badge */
.verified-badge[b-x66tg9brfz] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: var(--acv-white);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.25);
}

.unverified-badge[b-x66tg9brfz] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: var(--acv-white);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(245, 158, 11, 0.25);
}

/* Empty Value */
.empty-value[b-x66tg9brfz] {
    color: var(--gray-400);
    font-style: italic;
    font-size: 0.9375rem;
    font-weight: 400;
}

/* Avatar Image */
.avatar-image[b-x66tg9brfz] {
    width: 140px;
    height: 140px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 3px solid var(--gray-200);
    transition: transform 0.2s ease;
}

.avatar-image:hover[b-x66tg9brfz] {
    transform: scale(1.02);
}

/* Form Actions */
.form-actions[b-x66tg9brfz] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 2px solid var(--gray-200);
    flex-wrap: wrap;
}

.btn-primary[b-x66tg9brfz] {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.75rem;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    border: none;
    min-width: 180px;
    justify-content: center;
    background: var(--acv-primary);
    color: var(--acv-white);
    box-shadow: 0 2px 6px rgba(33, 76, 166, 0.2);
}

.btn-primary:hover[b-x66tg9brfz] {
    background: var(--acv-primary-700);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
    text-decoration: none;
    color: var(--acv-white);
}

.btn-primary:active[b-x66tg9brfz] {
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 1024px) {
    .account-details-container[b-x66tg9brfz] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .account-info-page[b-x66tg9brfz] {
        padding: 0.5rem 1rem;
    }

    .card-header-section[b-x66tg9brfz] {
        padding: 1.5rem;
    }

    .card-header-text h1[b-x66tg9brfz] {
        font-size: 1.5rem;
    }
    
    .card-header[b-x66tg9brfz] {
        padding: 1rem 1.25rem;
    }

    .card-content[b-x66tg9brfz] {
        padding: 1.25rem 1rem;
    }

    .details-grid[b-x66tg9brfz] {
        grid-template-columns: 1fr;
        gap: 1.25rem 1rem;
    }

    .detail-item[b-x66tg9brfz] {
        gap: 0.375rem;
        padding-bottom: 1rem;
    }

    .form-actions[b-x66tg9brfz] {
        flex-direction: column;
        gap: 0.75rem;
        margin-top: 2rem;
        padding-top: 1.5rem;
    }

    .btn-primary[b-x66tg9brfz] {
        min-width: 100%;
        width: 100%;
    }
}

@media (max-width: 600px) {
    .card-header-content[b-x66tg9brfz] {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .avatar-image[b-x66tg9brfz] {
        width: 120px;
        height: 120px;
    }

    .card-title[b-x66tg9brfz] {
        font-size: 1rem;
    }

    .detail-label[b-x66tg9brfz] {
        font-size: 0.75rem;
    }

    .detail-value[b-x66tg9brfz] {
        font-size: 0.9375rem;
    }
}
/* _content/ltia.portal.web/Components/Pages/Admin/Account/UserChangePassword.razor.rz.scp.css */
/* Change Password Page */
.change-password-page[b-rmq562vjkl] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --success: #10b981;
    --success-light: #d1fae5;
    --error: #ef4444;
    --error-light: #fee2e2;

    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Card Header Section */
.card-header-section[b-rmq562vjkl] {
    background: var(--acv-white);
    border-radius: 12px;
    padding: 2rem 2.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--gray-200);
}

.card-header-content[b-rmq562vjkl] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.card-header-icon[b-rmq562vjkl] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.25);
}

.card-header-text h1[b-rmq562vjkl] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 0.25rem 0;
    line-height: 1.3;
}

.card-header-text p[b-rmq562vjkl] {
    font-size: 1rem;
    color: var(--gray-600);
    margin: 0;
    line-height: 1.5;
}

/* Form Container */
.form-container[b-rmq562vjkl] {
    max-width: 700px;
    margin: 0 auto;
}

.form-card[b-rmq562vjkl] {
    background: var(--acv-white);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--gray-200);
    overflow: hidden;
}

.form-header[b-rmq562vjkl] {
    padding: 2rem 2.5rem;
    border-bottom: 2px solid var(--gray-100);
    background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
}

.form-title-section[b-rmq562vjkl] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-title[b-rmq562vjkl] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.form-title i[b-rmq562vjkl] {
    color: var(--acv-primary);
    font-size: 1.25rem;
}

.form-subtitle[b-rmq562vjkl] {
    font-size: 0.9375rem;
    color: var(--gray-600);
    margin-left: 2rem;
}

.form-body[b-rmq562vjkl] {
    padding: 2.5rem;
}

/* Error Alert */
.error-alert[b-rmq562vjkl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--error-light);
    border: 1px solid var(--error);
    border-radius: 8px;
    margin-bottom: 2rem;
    animation: slideDown-b-rmq562vjkl 0.3s ease;
}

.error-alert-content[b-rmq562vjkl] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--error);
    font-size: 0.9375rem;
    font-weight: 500;
    flex: 1;
}

.error-alert-content i[b-rmq562vjkl] {
    font-size: 1.125rem;
}

.error-alert-close[b-rmq562vjkl] {
    background: none;
    border: none;
    color: var(--error);
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
    font-size: 1rem;
}

.error-alert-close:hover[b-rmq562vjkl] {
    opacity: 0.7;
}

@keyframes slideDown-b-rmq562vjkl {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Form Groups */
.form-group[b-rmq562vjkl] {
    margin-bottom: 2rem;
}

.form-label[b-rmq562vjkl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.625rem;
}

.form-label i[b-rmq562vjkl] {
    color: var(--acv-primary);
    font-size: 0.875rem;
    width: 16px;
    text-align: center;
}

.required[b-rmq562vjkl] {
    color: var(--error);
    margin-left: 0.25rem;
}

/* Password Input Wrapper */
.password-input-wrapper[b-rmq562vjkl] {
    position: relative;
    display: flex;
    align-items: center;
}

.form-input[b-rmq562vjkl] {
    width: 100%;
    padding: 0.875rem 3rem 0.875rem 1rem;
    border: 2px solid var(--gray-300);
    border-radius: 8px;
    font-size: 1rem;
    color: var(--gray-900);
    transition: all 0.2s ease;
    background: var(--acv-white);
    font-family: inherit;
}

.form-input:focus[b-rmq562vjkl] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.form-input[b-rmq562vjkl]::placeholder {
    color: var(--gray-400);
}

.form-input.error[b-rmq562vjkl] {
    border-color: var(--error);
}

.form-input.error:focus[b-rmq562vjkl] {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.password-toggle[b-rmq562vjkl] {
    position: absolute;
    right: 0.75rem;
    background: none;
    border: none;
    color: var(--gray-500);
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    font-size: 1rem;
}

.password-toggle:hover[b-rmq562vjkl] {
    color: var(--acv-primary);
}

/* Password Requirements */
.password-requirements[b-rmq562vjkl] {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
}

.requirement-item[b-rmq562vjkl] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0;
    font-size: 0.875rem;
    color: var(--gray-600);
    transition: color 0.2s ease;
}

.requirement-item i[b-rmq562vjkl] {
    font-size: 0.875rem;
    width: 16px;
    text-align: center;
}

.requirement-item.valid[b-rmq562vjkl] {
    color: var(--success);
}

.requirement-item.valid i[b-rmq562vjkl] {
    color: var(--success);
}

.requirement-item.invalid[b-rmq562vjkl] {
    color: var(--gray-500);
}

.requirement-item.invalid i[b-rmq562vjkl] {
    color: var(--error);
}

/* Field Error */
.field-error[b-rmq562vjkl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    color: var(--error);
    font-size: 0.875rem;
    font-weight: 500;
}

.field-error i[b-rmq562vjkl] {
    font-size: 0.875rem;
}

/* Field Success */
.field-success[b-rmq562vjkl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    color: var(--success);
    font-size: 0.875rem;
    font-weight: 500;
}

.field-success i[b-rmq562vjkl] {
    font-size: 0.875rem;
}

/* Form Actions */
.form-actions[b-rmq562vjkl] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 2px solid var(--gray-200);
    flex-wrap: wrap;
}

.btn-cancel[b-rmq562vjkl],
.btn-submit[b-rmq562vjkl] {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.75rem;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    min-width: 140px;
    justify-content: center;
}

.btn-cancel[b-rmq562vjkl] {
    background: var(--gray-100);
    color: var(--gray-700);
}

.btn-cancel:hover:not(:disabled)[b-rmq562vjkl] {
    background: var(--gray-200);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-cancel:disabled[b-rmq562vjkl] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-submit[b-rmq562vjkl] {
    background: var(--acv-primary);
    color: var(--acv-white);
    box-shadow: 0 2px 6px rgba(33, 76, 166, 0.2);
}

.btn-submit:hover:not(:disabled)[b-rmq562vjkl] {
    background: var(--acv-primary-700);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

.btn-submit:disabled[b-rmq562vjkl] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Responsive */
@media (max-width: 768px) {
    .change-password-page[b-rmq562vjkl] {
        padding: 0.5rem 1rem;
    }

    .card-header-section[b-rmq562vjkl] {
        padding: 1.5rem 1.25rem;
    }

    .card-header-text h1[b-rmq562vjkl] {
        font-size: 1.5rem;
    }

    .form-header[b-rmq562vjkl] {
        padding: 1.5rem 1.25rem;
    }

    .form-body[b-rmq562vjkl] {
        padding: 1.5rem 1.25rem;
    }

    .form-title[b-rmq562vjkl] {
        font-size: 1.25rem;
    }

    .form-subtitle[b-rmq562vjkl] {
        margin-left: 0;
        font-size: 0.875rem;
    }

    .form-actions[b-rmq562vjkl] {
        flex-direction: column-reverse;
    }

    .btn-cancel[b-rmq562vjkl],
    .btn-submit[b-rmq562vjkl] {
        width: 100%;
    }
}

/* _content/ltia.portal.web/Components/Pages/Admin/Department/Department.razor.rz.scp.css */
/* CSS Variables - Đặt trực tiếp vào .department-page */
.department-page[b-mqubewsnr6] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    
    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Card Header Section */
.card-header-section[b-mqubewsnr6] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.card-header-content[b-mqubewsnr6] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.card-header-icon[b-mqubewsnr6] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
}

.card-header-text h1[b-mqubewsnr6] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-800);
}

.card-header-text p[b-mqubewsnr6] {
    margin: 0.25rem 0 0 0;
    color: var(--gray-600);
    font-size: 1rem;
}

/* Search Section */
.department-search-section[b-mqubewsnr6] {
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    margin-bottom: 2rem;
    overflow: visible;
    position: relative;
    z-index: 10;
}

.search-container[b-mqubewsnr6] {
    padding: 2rem;
}

.search-header[b-mqubewsnr6] {
    margin-bottom: 1.5rem;
    text-align: center;
}

.search-title[b-mqubewsnr6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 0.5rem 0;
}

.search-title i[b-mqubewsnr6] {
    color: var(--acv-primary);
    font-size: 1.3rem;
}

.search-subtitle[b-mqubewsnr6] {
    color: var(--gray-600);
    font-size: 1rem;
    margin: 0;
    font-weight: 400;
}

.search-content[b-mqubewsnr6] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.search-main-row[b-mqubewsnr6] {
    display: flex;
    gap: 1.5rem;
    align-items: flex-end;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 20;
}

.search-input-group[b-mqubewsnr6] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 0 1 600px;
    min-width: 300px;
    max-width: 600px;
    position: relative;
    z-index: 20;
}

.search-select-group[b-mqubewsnr6] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 0 0 180px;
    min-width: 150px;
    position: relative;
    z-index: 20;
}

.form-label[b-mqubewsnr6] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-700);
    margin: 0;
}

.form-label i[b-mqubewsnr6] {
    color: var(--acv-primary);
    font-size: 0.8rem;
}

.search-input-wrapper[b-mqubewsnr6] {
    position: relative;
}

.search-icon[b-mqubewsnr6] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    z-index: 1;
}

.search-input[b-mqubewsnr6] {
    width: 100%;
    height: 48px;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--acv-white);
    box-sizing: border-box;
}

.search-input:focus[b-mqubewsnr6] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.search-clear[b-mqubewsnr6] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--gray-300);
    color: var(--gray-600);
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 2;
}

.search-clear:hover[b-mqubewsnr6] {
    background: var(--gray-400);
    color: var(--gray-800);
}

.search-clear i[b-mqubewsnr6] {
    font-size: 0.75rem;
}

.search-select[b-mqubewsnr6] {
    width: 100%;
    height: 48px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--acv-white);
    color: var(--gray-700);
    cursor: pointer;
    box-sizing: border-box;
}

.search-select:focus[b-mqubewsnr6] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.search-controls[b-mqubewsnr6] {
    display: flex;
    gap: 0.75rem;
    align-items: end;
    position: relative;
    z-index: 20;
    flex-shrink: 0;
    min-width: 120px;
    flex: 0 0 120px;
}

.search-btn[b-mqubewsnr6], .clear-btn[b-mqubewsnr6] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border: none;
    padding: 0.75rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 20;
    width: 48px;
    height: 48px;
    box-sizing: border-box;
}

.search-btn:hover:not(:disabled)[b-mqubewsnr6] {
    background: var(--acv-primary-700);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

.search-btn:disabled[b-mqubewsnr6] {
    opacity: 0.5;
    cursor: not-allowed;
}

.clear-btn[b-mqubewsnr6] {
    background: var(--gray-500);
}

.clear-btn:hover[b-mqubewsnr6] {
    background: var(--gray-600);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* List Container */
.department-list-container[b-mqubewsnr6] {
    background: var(--acv-white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
}

/* List Header */
.list-header[b-mqubewsnr6] {
    background: var(--acv-white) !important;
    padding: 1.75rem 2rem;
    border-bottom: 1px solid var(--gray-200);
    border-radius: 16px 16px 0 0;
    position: relative;
    z-index: 1;
    overflow: visible;
}

.list-header[b-mqubewsnr6]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 16px 0 0 0;
}

.list-header-content[b-mqubewsnr6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0;
}

.list-title-section[b-mqubewsnr6] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.list-title[b-mqubewsnr6] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.list-title i[b-mqubewsnr6] {
    color: var(--acv-primary);
    font-size: 1.25rem;
}

.list-count[b-mqubewsnr6] {
    background: var(--acv-primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Sort Controls */
.sort-controls[b-mqubewsnr6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.refresh-btn[b-mqubewsnr6],
.add-department-btn[b-mqubewsnr6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--acv-white);
    color: var(--acv-primary);
    border: 2px solid var(--acv-primary);
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 120px;
    justify-content: center;
    text-decoration: none;
}

.refresh-btn:hover:not(:disabled)[b-mqubewsnr6],
.add-department-btn:hover[b-mqubewsnr6] {
    background: var(--acv-primary);
    color: var(--acv-white);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
    text-decoration: none;
}

.refresh-btn:disabled[b-mqubewsnr6] {
    opacity: 0.5;
    cursor: not-allowed;
}

.add-department-btn[b-mqubewsnr6] {
    background: var(--acv-primary);
    color: var(--acv-white);
}

.add-department-btn:hover[b-mqubewsnr6] {
    background: var(--acv-primary-700);
}

/* Departments List */
.department-list[b-mqubewsnr6] {
    padding: 1.5rem;
    min-height: 200px;
}

/* Departments Table */
.department-table-container[b-mqubewsnr6] {
    overflow-x: auto;
    border-radius: 12px;
}

.department-table[b-mqubewsnr6] {
    width: 100%;
    border-collapse: collapse;
    background: var(--acv-white);
    border-radius: 12px;
    overflow: hidden;
}

/* Table Header */
.table-header-row[b-mqubewsnr6] {
    background: var(--gray-50);
    border-bottom: 2px solid var(--gray-200);
}

.table-header-row th[b-mqubewsnr6] {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--gray-700);
    font-size: 0.9rem;
    border-bottom: 2px solid var(--gray-200);
}

/* Column Widths */
.col-stt[b-mqubewsnr6] {
    width: 60px;
    text-align: center !important;
}

.col-id[b-mqubewsnr6] {
    width: 100px;
    text-align: center !important;
}

.col-code[b-mqubewsnr6] {
    width: 150px;
}

.col-name[b-mqubewsnr6] {
    width: auto;
    min-width: 200px;
}

.col-description[b-mqubewsnr6] {
    width: auto;
    min-width: 300px;
}

.col-created[b-mqubewsnr6] {
    width: 150px;
}

.col-actions[b-mqubewsnr6] {
    width: 200px;
    text-align: center !important;
}

/* Table Body */
.table-row[b-mqubewsnr6] {
    border-bottom: 1px solid var(--gray-200);
    transition: all 0.2s ease;
}

.table-row:hover[b-mqubewsnr6] {
    background: var(--gray-50);
}

.table-row:last-child[b-mqubewsnr6] {
    border-bottom: none;
}

.table-row td[b-mqubewsnr6] {
    padding: 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--gray-200);
}

/* STT Number */
.stt-number[b-mqubewsnr6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--gray-100);
    color: var(--gray-600);
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Badge ID */
.badge-id[b-mqubewsnr6] {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    background: var(--gray-100);
    color: var(--gray-700);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Department Code */
.department-code[b-mqubewsnr6] {
    color: var(--gray-700);
    font-size: 0.9rem;
    font-weight: 500;
}

/* Department Name */
.department-name strong[b-mqubewsnr6] {
    color: var(--gray-800);
    font-weight: 600;
    font-size: 0.95rem;
}

/* Department Description */
.department-description[b-mqubewsnr6] {
    color: var(--gray-600);
    font-size: 0.9rem;
    line-height: 1.5;
    max-width: 400px;
}

/* Date Text */
.date-text[b-mqubewsnr6] {
    color: var(--gray-600);
    font-size: 0.9rem;
}

/* Action Buttons */
.action-buttons[b-mqubewsnr6] {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    align-items: center;
}

.action-btn-table[b-mqubewsnr6] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 36px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    text-decoration: none;
}

.action-btn-table.view[b-mqubewsnr6] {
    background: linear-gradient(135deg, rgba(33, 76, 166, 0.1) 0%, rgba(33, 76, 166, 0.15) 100%);
    color: var(--acv-primary);
    border: 1px solid rgba(33, 76, 166, 0.2);
}

.action-btn-table.view:hover[b-mqubewsnr6] {
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(33, 76, 166, 0.3);
}

.action-btn-table.edit[b-mqubewsnr6] {
    background: linear-gradient(135deg, var(--warning-lighter) 0%, rgba(255, 171, 0, 0.1) 100%);
    color: var(--warning-dark);
    border: 1px solid var(--warning-light);
}

.action-btn-table.edit:hover[b-mqubewsnr6] {
    background: linear-gradient(135deg, var(--warning-main) 0%, var(--warning-dark) 100%);
    color: var(--acv-white);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(255, 171, 0, 0.3);
}

.action-btn-table.delete[b-mqubewsnr6] {
    background: linear-gradient(135deg, var(--error-lighter) 0%, rgba(255, 86, 48, 0.1) 100%);
    color: var(--error-dark);
    border: 1px solid var(--error-light);
}

.action-btn-table.delete:hover[b-mqubewsnr6] {
    background: linear-gradient(135deg, var(--error-main) 0%, var(--error-dark) 100%);
    color: var(--acv-white);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(255, 86, 48, 0.3);
}

/* Empty State */
.empty-state[b-mqubewsnr6] {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--gray-600);
}

.empty-state-icon[b-mqubewsnr6] {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--gray-400);
}

.empty-state-icon i.fa-spin[b-mqubewsnr6] {
    color: var(--acv-primary);
}

.empty-state h3[b-mqubewsnr6] {
    margin-bottom: 0.5rem;
    color: var(--gray-700);
    font-size: 1.25rem;
    font-weight: 600;
}

.empty-state p[b-mqubewsnr6] {
    margin-bottom: 2rem;
    color: var(--gray-600);
}

.empty-state-actions[b-mqubewsnr6] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-primary[b-mqubewsnr6] {
    background: var(--acv-primary);
    color: var(--acv-white);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(33, 76, 166, 0.2);
}

.btn-primary:hover[b-mqubewsnr6] {
    background: var(--acv-primary-700);
    color: var(--acv-white);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

/* Table Footer */
.table-footer[b-mqubewsnr6] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--acv-white);
    border-top: 1px solid var(--gray-200);
    border-radius: 0 0 16px 16px;
    gap: 2rem;
    flex-wrap: wrap;
}

.results-info[b-mqubewsnr6] {
    font-size: 0.9rem;
    color: var(--gray-600);
    font-weight: 500;
}

.pagination-container[b-mqubewsnr6] {
    display: flex;
    align-items: center;
}

.pagination-nav[b-mqubewsnr6] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagination-btn[b-mqubewsnr6] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: var(--acv-white);
    color: var(--gray-600);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s ease;
    cursor: pointer;
}

.pagination-btn:hover:not(:disabled)[b-mqubewsnr6] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border-color: var(--acv-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.15);
}

.pagination-btn.active[b-mqubewsnr6] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border-color: var(--acv-primary);
    font-weight: 600;
    font-size: 0.9rem;
    min-width: 40px;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
    cursor: default;
}

.pagination-btn.active:hover[b-mqubewsnr6] {
    background: var(--acv-primary);
    color: var(--acv-white);
    transform: none;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
}

.pagination-btn:disabled[b-mqubewsnr6] {
    background: var(--gray-100);
    border-color: var(--gray-200);
    color: var(--gray-400);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Responsive Design */
@media (max-width: 768px) {
    .department-page[b-mqubewsnr6] {
        padding: 1rem;
    }
    
    .search-main-row[b-mqubewsnr6] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .search-input-group[b-mqubewsnr6],
    .search-select-group[b-mqubewsnr6] {
        min-width: auto;
        flex: 1;
    }
    
    .list-header-content[b-mqubewsnr6] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    
    .sort-controls[b-mqubewsnr6] {
        justify-content: space-between;
    }
    
    .department-table-container[b-mqubewsnr6] {
        overflow-x: auto;
    }
    
    .department-table[b-mqubewsnr6] {
        min-width: 900px;
    }
    
    .table-footer[b-mqubewsnr6] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        text-align: center;
    }
    
    .pagination-nav[b-mqubewsnr6] {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .department-page[b-mqubewsnr6] {
        padding: 0.5rem 1rem;
    }
    
    .card-header-section[b-mqubewsnr6] {
        padding: 1.5rem;
    }
    
    .card-header-text h1[b-mqubewsnr6] {
        font-size: 1.5rem;
    }
    
    .list-header[b-mqubewsnr6] {
        padding: 1.25rem 1.5rem;
    }
    
    .list-title[b-mqubewsnr6] {
        font-size: 1.25rem;
    }
    
    .sort-controls[b-mqubewsnr6] {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .refresh-btn[b-mqubewsnr6],
    .add-department-btn[b-mqubewsnr6] {
        width: 100%;
        min-width: auto;
    }
    
    .table-header-row th[b-mqubewsnr6],
    .table-row td[b-mqubewsnr6] {
        padding: 0.75rem 0.5rem;
    }
    
    .action-buttons[b-mqubewsnr6] {
        gap: 0.125rem;
    }
    
    .action-btn-table[b-mqubewsnr6] {
        width: 36px;
        height: 32px;
        font-size: 0.8rem;
    }
}
/* _content/ltia.portal.web/Components/Pages/Admin/Department/DepartmentCreate.razor.rz.scp.css */
/* CSS Variables - Đặt trực tiếp vào .department-create-page */
.department-create-page[b-4ldmxcdz3t] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    
    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Card Header */
.department-create-card-header[b-4ldmxcdz3t] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.header-content[b-4ldmxcdz3t] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-icon[b-4ldmxcdz3t] {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-800) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
}

.header-text[b-4ldmxcdz3t] {
    flex: 1;
}

.header-title[b-4ldmxcdz3t] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 0.5rem 0;
}

.header-subtitle[b-4ldmxcdz3t] {
    font-size: 1rem;
    color: var(--gray-600);
    margin: 0;
}

/* Main Content Container */
.main-content-container[b-4ldmxcdz3t] {
    display: flex;
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.form-column[b-4ldmxcdz3t] {
    flex: 1;
    background: var(--acv-white);
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Form Sections */
.form-section[b-4ldmxcdz3t] {
    margin-bottom: 32px;
}

.section-header[b-4ldmxcdz3t] {
    margin-bottom: 20px;
}

.section-title[b-4ldmxcdz3t] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
}

.section-title i[b-4ldmxcdz3t] {
    color: var(--acv-primary);
    font-size: 16px;
}

.form-grid[b-4ldmxcdz3t] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* Form Styling */
.form-group[b-4ldmxcdz3t] {
    margin-bottom: 24px;
}

.form-group.full-width[b-4ldmxcdz3t] {
    width: 100%;
    grid-column: 1 / -1;
}

.form-label[b-4ldmxcdz3t] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 8px;
    font-size: 14px;
}

.form-label i[b-4ldmxcdz3t] {
    color: var(--acv-primary);
    width: 16px;
}

.required[b-4ldmxcdz3t] {
    color: var(--error-main);
}

/* Form Input */
.form-input[b-4ldmxcdz3t] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s ease;
    background: var(--acv-white);
    box-sizing: border-box;
    font-family: inherit;
    resize: vertical;
}

.form-input:focus[b-4ldmxcdz3t] {
    outline: none;
    border-color: var(--acv-primary);
    border-width: 1px;
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.form-input:disabled[b-4ldmxcdz3t] {
    background: var(--gray-100);
    color: var(--gray-500);
    cursor: not-allowed;
}

.form-input[b-4ldmxcdz3t]::placeholder {
    color: var(--gray-400);
}

textarea.form-input[b-4ldmxcdz3t] {
    min-height: 80px;
    line-height: 1.5;
}

/* Form Actions */
.form-actions[b-4ldmxcdz3t] {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--gray-200);
}

.btn-primary[b-4ldmxcdz3t], .btn-secondary[b-4ldmxcdz3t] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid;
    text-decoration: none;
    min-width: 140px;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-primary[b-4ldmxcdz3t] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border-color: var(--acv-primary);
}

.btn-primary:hover:not(:disabled)[b-4ldmxcdz3t] {
    background: var(--acv-primary-800);
    border-color: var(--acv-primary-800);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(33, 76, 166, 0.3);
}

.btn-primary:disabled[b-4ldmxcdz3t] {
    background: var(--gray-400);
    border-color: var(--gray-400);
    cursor: not-allowed;
    transform: none;
    opacity: 0.6;
}

.btn-secondary[b-4ldmxcdz3t] {
    background: var(--acv-white);
    color: var(--gray-800);
    border-color: var(--gray-300);
}

.btn-secondary:hover:not(:disabled)[b-4ldmxcdz3t] {
    background: var(--gray-50);
    border-color: var(--gray-400);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-secondary:disabled[b-4ldmxcdz3t] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Responsive */
@media (max-width: 768px) {
    .department-create-page[b-4ldmxcdz3t] {
        padding: 1rem;
    }
    
    .department-create-card-header[b-4ldmxcdz3t] {
        padding: 1.5rem;
    }
    
    .form-column[b-4ldmxcdz3t] {
        padding: 24px;
    }
    
    .form-grid[b-4ldmxcdz3t] {
        grid-template-columns: 1fr;
    }
    
    .form-actions[b-4ldmxcdz3t] {
        flex-direction: column;
    }
    
    .btn-primary[b-4ldmxcdz3t], .btn-secondary[b-4ldmxcdz3t] {
        justify-content: center;
        width: 100%;
    }
    
    .header-content[b-4ldmxcdz3t] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .header-icon[b-4ldmxcdz3t] {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }
    
    .header-title[b-4ldmxcdz3t] {
        font-size: 1.5rem;
    }
    
    .header-subtitle[b-4ldmxcdz3t] {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .department-create-page[b-4ldmxcdz3t] {
        padding: 0.5rem;
    }
    
    .department-create-card-header[b-4ldmxcdz3t] {
        padding: 1rem;
    }
    
    .form-column[b-4ldmxcdz3t] {
        padding: 1.5rem;
    }
}
/* _content/ltia.portal.web/Components/Pages/Admin/Department/DepartmentDetail.razor.rz.scp.css */
/* Department Detail Page - Based on Role Details Design */
.department-detail-page[b-peo21ojtmr] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Loading & Not Found States */
.loading-container[b-peo21ojtmr],
.not-found-container[b-peo21ojtmr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
}

.loading-spinner i[b-peo21ojtmr] {
    font-size: 3rem;
    color: var(--acv-primary);
    animation: spin-b-peo21ojtmr 1s linear infinite;
}

@keyframes spin-b-peo21ojtmr {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.not-found-icon i[b-peo21ojtmr] {
    font-size: 4rem;
    color: var(--gray-400);
    margin-bottom: 1rem;
}

.not-found-container h3[b-peo21ojtmr] {
    color: var(--gray-800);
    margin-bottom: 0.5rem;
}

.not-found-container p[b-peo21ojtmr] {
    color: var(--gray-600);
    margin-bottom: 1.5rem;
}

.not-found-container .btn-secondary[b-peo21ojtmr] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--acv-white);
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    cursor: pointer;
}

.not-found-container .btn-secondary:hover[b-peo21ojtmr] {
    background: var(--gray-50);
    border-color: var(--gray-400);
    transform: translateY(-1px);
    color: var(--gray-800);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Card Header Section */
.card-header-section[b-peo21ojtmr] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.card-header-content[b-peo21ojtmr] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.card-header-icon[b-peo21ojtmr] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.card-header-text h1[b-peo21ojtmr] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
}

.card-header-text p[b-peo21ojtmr] {
    font-size: 0.95rem;
    color: var(--gray-600);
    margin: 0.25rem 0 0 0;
}

/* Main Content Container */
.department-details-container[b-peo21ojtmr] {
    max-width: 100%;
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Card Styles */
.detail-card[b-peo21ojtmr] {
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--gray-200);
    overflow: hidden;
}

.card-header[b-peo21ojtmr] {
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--acv-white) 100%);
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-title[b-peo21ojtmr] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-title i[b-peo21ojtmr] {
    color: var(--acv-primary);
    font-size: 0.875rem;
}

.card-content[b-peo21ojtmr] {
    padding: 1.25rem;
}

/* Details Grid */
.details-grid[b-peo21ojtmr] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    row-gap: 1rem;
}

.detail-item[b-peo21ojtmr] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.detail-item.full-width[b-peo21ojtmr] {
    grid-column: 1 / -1;
}

.detail-label[b-peo21ojtmr] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gray-600);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.detail-label i[b-peo21ojtmr] {
    color: var(--acv-primary);
    font-size: 0.6875rem;
}

.detail-value[b-peo21ojtmr] {
    font-size: 0.9375rem;
    color: var(--gray-900);
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.detail-value strong[b-peo21ojtmr] {
    font-weight: 600;
    color: var(--gray-900);
}

/* Empty Value */
.empty-value[b-peo21ojtmr] {
    color: var(--gray-500);
    font-style: italic;
    font-size: 0.9375rem;
}

/* Form Actions */
.form-actions[b-peo21ojtmr] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-200);
    flex-wrap: wrap;
}

.btn-primary[b-peo21ojtmr],
.btn-secondary[b-peo21ojtmr],
.btn-danger[b-peo21ojtmr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    border: none;
    min-width: 160px;
    justify-content: center;
}

.btn-primary[b-peo21ojtmr] {
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.15);
}

.btn-primary:hover[b-peo21ojtmr] {
    background: linear-gradient(135deg, var(--acv-primary-700) 0%, var(--acv-primary-800) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.25);
    text-decoration: none;
    color: var(--acv-white);
}

.btn-secondary[b-peo21ojtmr] {
    background: var(--acv-white);
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.btn-secondary:hover[b-peo21ojtmr] {
    background: var(--gray-50);
    border-color: var(--gray-400);
    transform: translateY(-1px);
    color: var(--gray-800);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-danger[b-peo21ojtmr] {
    background: linear-gradient(135deg, #ff5630 0%, #ff8a65 100%);
    color: var(--acv-white);
    box-shadow: 0 2px 8px rgba(255, 86, 48, 0.25);
}

.btn-danger:hover[b-peo21ojtmr] {
    background: linear-gradient(135deg, #e53e3e 0%, #ff6b47 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 86, 48, 0.35);
}

/* Responsive */
@media (max-width: 768px) {
    .department-detail-page[b-peo21ojtmr] {
        padding: 0.5rem 1rem;
    }

    .card-header-text h1[b-peo21ojtmr] {
        font-size: 1.5rem;
    }
    
    .card-header[b-peo21ojtmr] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .details-grid[b-peo21ojtmr] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .detail-item[b-peo21ojtmr] {
        gap: 0.25rem;
    }

    .form-actions[b-peo21ojtmr] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .btn-primary[b-peo21ojtmr],
    .btn-secondary[b-peo21ojtmr],
    .btn-danger[b-peo21ojtmr] {
        min-width: 100%;
    }
}

@media (max-width: 600px) {
    .card-header-content[b-peo21ojtmr] {
        flex-direction: column;
        text-align: center;
    }
}
/* _content/ltia.portal.web/Components/Pages/Admin/Department/DepartmentEdit.razor.rz.scp.css */
/* CSS Variables - Đặt trực tiếp vào .department-edit-page */
.department-edit-page[b-davsuuinrn] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    
    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Card Header */
.department-edit-card-header[b-davsuuinrn] {
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--acv-white) 100%);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.header-content[b-davsuuinrn] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem 2.5rem;
}

.header-icon[b-davsuuinrn] {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.25);
    flex-shrink: 0;
}

.header-icon i[b-davsuuinrn] {
    color: var(--acv-white);
    font-size: 1.75rem;
}

.header-text[b-davsuuinrn] {
    flex: 1;
}

.header-title[b-davsuuinrn] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
}

.header-subtitle[b-davsuuinrn] {
    font-size: 1rem;
    color: var(--gray-600);
    margin: 0;
    line-height: 1.5;
}

/* Loading & Not Found States */
.loading-container[b-davsuuinrn],
.not-found-container[b-davsuuinrn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    margin-bottom: 2rem;
    padding: 2rem;
}

.loading-spinner[b-davsuuinrn] {
    margin-bottom: 1rem;
}

.loading-spinner i[b-davsuuinrn] {
    font-size: 3rem;
    color: var(--acv-primary);
    animation: spin-b-davsuuinrn 1s linear infinite;
}

@keyframes spin-b-davsuuinrn {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-davsuuinrn] {
    color: var(--gray-600);
    margin: 0;
}

.not-found-icon[b-davsuuinrn] {
    margin-bottom: 1rem;
}

.not-found-icon i[b-davsuuinrn] {
    font-size: 4rem;
    color: var(--gray-400);
}

.not-found-container h3[b-davsuuinrn] {
    color: var(--gray-800);
    margin-bottom: 0.5rem;
}

.not-found-container p[b-davsuuinrn] {
    color: var(--gray-600);
    margin-bottom: 1.5rem;
}

/* Main Content Container */
.main-content-container[b-davsuuinrn] {
    display: flex;
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
    overflow: visible;
}

/* Form Column */
.form-column[b-davsuuinrn] {
    flex: 1;
    background: var(--acv-white);
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: visible;
}

.create-form[b-davsuuinrn] {
    max-width: 100%;
}

/* Form Sections */
.form-section[b-davsuuinrn] {
    margin-bottom: 32px;
}

.section-header[b-davsuuinrn] {
    margin-bottom: 20px;
}

.section-title[b-davsuuinrn] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
}

.section-title i[b-davsuuinrn] {
    color: var(--acv-primary);
    font-size: 16px;
}

.form-grid[b-davsuuinrn] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* Form Groups */
.form-group[b-davsuuinrn] {
    margin-bottom: 24px;
}

.form-group.full-width[b-davsuuinrn] {
    width: 100%;
    grid-column: 1 / -1;
}

.form-label[b-davsuuinrn] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 8px;
    font-size: 14px;
}

.form-label i[b-davsuuinrn] {
    color: var(--acv-primary);
    width: 16px;
}

.required[b-davsuuinrn] {
    color: var(--error-main);
}

/* Form Inputs */
.form-input[b-davsuuinrn] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 14px;
    background: var(--acv-white);
    transition: all 0.2s ease;
    font-family: inherit;
    box-sizing: border-box;
    resize: vertical;
}

.form-input:focus[b-davsuuinrn] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.form-input:disabled[b-davsuuinrn] {
    background: var(--gray-100);
    color: var(--gray-500);
    cursor: not-allowed;
}

.form-input[b-davsuuinrn]::placeholder {
    color: var(--gray-400);
}

textarea.form-input[b-davsuuinrn] {
    min-height: 80px;
    line-height: 1.5;
}

/* Form Actions */
.form-actions[b-davsuuinrn] {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--gray-200);
}

.btn-primary[b-davsuuinrn], .btn-secondary[b-davsuuinrn] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid;
    text-decoration: none;
    min-width: 140px;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-primary[b-davsuuinrn] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border-color: var(--acv-primary);
}

.btn-primary:hover:not(:disabled)[b-davsuuinrn] {
    background: var(--acv-primary-800);
    border-color: var(--acv-primary-800);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(33, 76, 166, 0.3);
}

.btn-primary:disabled[b-davsuuinrn] {
    background: var(--gray-400);
    border-color: var(--gray-400);
    cursor: not-allowed;
    transform: none;
    opacity: 0.6;
}

.btn-secondary[b-davsuuinrn] {
    background: var(--acv-white);
    color: var(--gray-800);
    border-color: var(--gray-300);
}

.btn-secondary:hover:not(:disabled)[b-davsuuinrn] {
    background: var(--gray-50);
    border-color: var(--gray-400);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-secondary:disabled[b-davsuuinrn] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Responsive Design */
@media (max-width: 768px) {
    .department-edit-page[b-davsuuinrn] {
        padding: 0.5rem 1rem;
    }

    .header-content[b-davsuuinrn] {
        flex-direction: column;
        gap: 1rem;
        padding: 1.5rem;
    }

    .header-icon[b-davsuuinrn] {
        width: 48px;
        height: 48px;
    }

    .header-icon i[b-davsuuinrn] {
        font-size: 1.5rem;
    }

    .header-title[b-davsuuinrn] {
        font-size: 1.5rem;
    }

    .header-subtitle[b-davsuuinrn] {
        font-size: 0.9rem;
    }

    .form-column[b-davsuuinrn] {
        padding: 1.5rem;
    }

    .form-grid[b-davsuuinrn] {
        grid-template-columns: 1fr;
    }

    .form-actions[b-davsuuinrn] {
        flex-direction: column;
        gap: 0.75rem;
        margin-top: 24px;
        padding-top: 20px;
    }

    .form-actions .btn-secondary[b-davsuuinrn],
    .form-actions .btn-primary[b-davsuuinrn] {
        min-width: 100%;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .department-edit-page[b-davsuuinrn] {
        padding: 0.5rem;
    }

    .header-content[b-davsuuinrn] {
        padding: 1rem;
    }

    .form-column[b-davsuuinrn] {
        padding: 1rem;
    }

    .header-title[b-davsuuinrn] {
        font-size: 1.25rem;
    }

    .form-group[b-davsuuinrn] {
        margin-bottom: 1rem;
    }
}
/* _content/ltia.portal.web/Components/Pages/Admin/Employee/Employee.razor.rz.scp.css */
/* CSS Variables - Đặt trực tiếp vào .employee-page */
.employee-page[b-amftzqa5i9] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    
    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Card Header Section */
.card-header-section[b-amftzqa5i9] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.card-header-content[b-amftzqa5i9] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.card-header-icon[b-amftzqa5i9] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
}

.card-header-text h1[b-amftzqa5i9] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-800);
}

.card-header-text p[b-amftzqa5i9] {
    margin: 0.25rem 0 0 0;
    color: var(--gray-600);
    font-size: 1rem;
}

/* Search Section */
.employee-search-section[b-amftzqa5i9] {
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    margin-bottom: 2rem;
    overflow: visible;
    position: relative;
    z-index: 10;
}

.search-container[b-amftzqa5i9] {
    padding: 2rem;
}

.search-header[b-amftzqa5i9] {
    margin-bottom: 1.5rem;
    text-align: center;
}

.search-title[b-amftzqa5i9] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 0.5rem 0;
}

.search-title i[b-amftzqa5i9] {
    color: var(--acv-primary);
    font-size: 1.3rem;
}

.search-subtitle[b-amftzqa5i9] {
    color: var(--gray-600);
    font-size: 1rem;
    margin: 0;
    font-weight: 400;
}

.search-content[b-amftzqa5i9] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.search-main-row[b-amftzqa5i9] {
    display: flex;
    gap: 1.5rem;
    align-items: flex-end;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 20;
}

.search-input-group[b-amftzqa5i9] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 0 1 600px;
    min-width: 300px;
    max-width: 600px;
    position: relative;
    z-index: 20;
}

.search-select-group[b-amftzqa5i9] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 0 0 180px;
    min-width: 150px;
    position: relative;
    z-index: 20;
}

.form-label[b-amftzqa5i9] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-700);
    margin: 0;
}

.form-label i[b-amftzqa5i9] {
    color: var(--acv-primary);
    font-size: 0.8rem;
}

.search-input-wrapper[b-amftzqa5i9] {
    position: relative;
}

.search-icon[b-amftzqa5i9] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    z-index: 1;
}

.search-input[b-amftzqa5i9] {
    width: 100%;
    height: 48px;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--acv-white);
    box-sizing: border-box;
}

.search-input:focus[b-amftzqa5i9] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.search-select[b-amftzqa5i9] {
    width: 100%;
    height: 48px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--acv-white);
    color: var(--gray-700);
    cursor: pointer;
    box-sizing: border-box;
}

.search-select:focus[b-amftzqa5i9] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.search-controls[b-amftzqa5i9] {
    display: flex;
    gap: 0.75rem;
    align-items: end;
    position: relative;
    z-index: 20;
    flex-shrink: 0;
    min-width: 120px;
    flex: 0 0 120px;
}

.search-btn[b-amftzqa5i9], .clear-btn[b-amftzqa5i9] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border: none;
    padding: 0.75rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 20;
    width: 48px;
    height: 48px;
    box-sizing: border-box;
}

.search-btn:hover:not(:disabled)[b-amftzqa5i9] {
    background: var(--acv-primary-700);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

.search-btn:disabled[b-amftzqa5i9] {
    opacity: 0.5;
    cursor: not-allowed;
}

.clear-btn[b-amftzqa5i9] {
    background: var(--gray-500);
}

.clear-btn:hover[b-amftzqa5i9] {
    background: var(--gray-600);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* List Container */
.employee-list-container[b-amftzqa5i9] {
    background: var(--acv-white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
}

/* List Header */
.list-header[b-amftzqa5i9] {
    background: var(--acv-white) !important;
    padding: 1.75rem 2rem;
    border-bottom: 1px solid var(--gray-200);
    border-radius: 16px 16px 0 0;
    position: relative;
    z-index: 1;
    overflow: visible;
}

.list-header[b-amftzqa5i9]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 16px 0 0 0;
}

.list-header-content[b-amftzqa5i9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0;
}

.list-title-section[b-amftzqa5i9] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.list-title[b-amftzqa5i9] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.list-title i[b-amftzqa5i9] {
    color: var(--acv-primary);
    font-size: 1.25rem;
}

.list-count[b-amftzqa5i9] {
    background: var(--acv-primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Sort Controls */
.sort-controls[b-amftzqa5i9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.refresh-btn[b-amftzqa5i9],
.add-employee-btn[b-amftzqa5i9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--acv-white);
    color: var(--acv-primary);
    border: 2px solid var(--acv-primary);
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 120px;
    justify-content: center;
    text-decoration: none;
}

.refresh-btn:hover:not(:disabled)[b-amftzqa5i9],
.add-employee-btn:hover[b-amftzqa5i9] {
    background: var(--acv-primary);
    color: var(--acv-white);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
    text-decoration: none;
}

.refresh-btn:disabled[b-amftzqa5i9] {
    opacity: 0.5;
    cursor: not-allowed;
}

.add-employee-btn[b-amftzqa5i9] {
    background: var(--acv-primary);
    color: var(--acv-white);
}

.add-employee-btn:hover[b-amftzqa5i9] {
    background: var(--acv-primary-700);
}

/* Employees List */
.employee-list[b-amftzqa5i9] {
    padding: 1.5rem;
    min-height: 200px;
}

/* Employees Table */
.employee-table-container[b-amftzqa5i9] {
    overflow-x: auto;
    border-radius: 12px;
}

.employee-table[b-amftzqa5i9] {
    width: 100%;
    border-collapse: collapse;
    background: var(--acv-white);
    border-radius: 12px;
    overflow: hidden;
}

/* Table Header */
.table-header-row[b-amftzqa5i9] {
    background: var(--gray-50);
    border-bottom: 2px solid var(--gray-200);
}

.table-header-row th[b-amftzqa5i9] {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--gray-700);
    font-size: 0.9rem;
    border-bottom: 2px solid var(--gray-200);
}

/* Column Widths */
.col-stt[b-amftzqa5i9] {
    width: 60px;
    text-align: center !important;
}

.col-code[b-amftzqa5i9] {
    width: 120px;
}

.col-name[b-amftzqa5i9] {
    width: auto;
    min-width: 200px;
}

.col-identity[b-amftzqa5i9] {
    width: 150px;
}

.col-identity-type[b-amftzqa5i9] {
    width: 120px;
}

.col-phone[b-amftzqa5i9] {
    width: 130px;
}

.col-email[b-amftzqa5i9] {
    width: auto;
    min-width: 200px;
}

.col-actions[b-amftzqa5i9] {
    width: 200px;
    text-align: center !important;
}

/* Table Body */
.table-row[b-amftzqa5i9] {
    border-bottom: 1px solid var(--gray-200);
    transition: all 0.2s ease;
}

.table-row:hover[b-amftzqa5i9] {
    background: var(--gray-50);
}

.table-row:last-child[b-amftzqa5i9] {
    border-bottom: none;
}

.table-row td[b-amftzqa5i9] {
    padding: 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--gray-200);
}

/* STT Number */
.stt-number[b-amftzqa5i9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--gray-100);
    color: var(--gray-600);
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Employee Code */
.employee-code[b-amftzqa5i9] {
    color: var(--gray-700);
    font-size: 0.9rem;
    font-weight: 500;
}

.employee-code strong[b-amftzqa5i9] {
    color: var(--gray-800);
    font-weight: 600;
}

/* Employee Name */
.employee-name strong[b-amftzqa5i9] {
    color: var(--gray-800);
    font-weight: 600;
    font-size: 0.95rem;
}

/* Identity Number */
.identity-number-text[b-amftzqa5i9] {
    color: var(--gray-600);
    font-size: 0.9rem;
}

/* Identity Type */
.identity-type-text[b-amftzqa5i9] {
    color: var(--gray-600);
    font-size: 0.9rem;
}

/* Phone Text */
.phone-text[b-amftzqa5i9] {
    color: var(--gray-600);
    font-size: 0.9rem;
}

/* Email Text */
.email-text[b-amftzqa5i9] {
    color: var(--gray-600);
    font-size: 0.9rem;
}

/* Action Buttons */
.action-buttons[b-amftzqa5i9] {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    align-items: center;
}

.action-btn-table[b-amftzqa5i9] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 36px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    text-decoration: none;
}

.action-btn-table.view[b-amftzqa5i9] {
    background: linear-gradient(135deg, rgba(33, 76, 166, 0.1) 0%, rgba(33, 76, 166, 0.15) 100%);
    color: var(--acv-primary);
    border: 1px solid rgba(33, 76, 166, 0.2);
}

.action-btn-table.view:hover[b-amftzqa5i9] {
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(33, 76, 166, 0.3);
}

.action-btn-table.edit[b-amftzqa5i9] {
    background: linear-gradient(135deg, var(--warning-lighter) 0%, rgba(255, 171, 0, 0.1) 100%);
    color: var(--warning-dark);
    border: 1px solid var(--warning-light);
}

.action-btn-table.edit:hover[b-amftzqa5i9] {
    background: linear-gradient(135deg, var(--warning-main) 0%, var(--warning-dark) 100%);
    color: var(--acv-white);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(255, 171, 0, 0.3);
}

.action-btn-table.delete[b-amftzqa5i9] {
    background: linear-gradient(135deg, var(--error-lighter) 0%, rgba(255, 86, 48, 0.1) 100%);
    color: var(--error-dark);
    border: 1px solid var(--error-light);
}

.action-btn-table.delete:hover[b-amftzqa5i9] {
    background: linear-gradient(135deg, var(--error-main) 0%, var(--error-dark) 100%);
    color: var(--acv-white);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(255, 86, 48, 0.3);
}

/* Empty State */
.empty-state[b-amftzqa5i9] {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--gray-600);
}

.empty-state-icon[b-amftzqa5i9] {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--gray-400);
}

.empty-state-icon i.fa-spin[b-amftzqa5i9] {
    color: var(--acv-primary);
}

.empty-state h3[b-amftzqa5i9] {
    margin-bottom: 0.5rem;
    color: var(--gray-700);
    font-size: 1.25rem;
    font-weight: 600;
}

.empty-state p[b-amftzqa5i9] {
    margin-bottom: 2rem;
    color: var(--gray-600);
}

.empty-state-actions[b-amftzqa5i9] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-primary[b-amftzqa5i9] {
    background: var(--acv-primary);
    color: var(--acv-white);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(33, 76, 166, 0.2);
}

.btn-primary:hover[b-amftzqa5i9] {
    background: var(--acv-primary-700);
    color: var(--acv-white);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

/* Table Footer */
.table-footer[b-amftzqa5i9] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--acv-white);
    border-top: 1px solid var(--gray-200);
    border-radius: 0 0 16px 16px;
    gap: 2rem;
    flex-wrap: wrap;
}

.results-info[b-amftzqa5i9] {
    font-size: 0.9rem;
    color: var(--gray-600);
    font-weight: 500;
}

.pagination-container[b-amftzqa5i9] {
    display: flex;
    align-items: center;
}

.pagination-nav[b-amftzqa5i9] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagination-btn[b-amftzqa5i9] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: var(--acv-white);
    color: var(--gray-600);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s ease;
    cursor: pointer;
}

.pagination-btn:hover:not(:disabled)[b-amftzqa5i9] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border-color: var(--acv-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.15);
}

.pagination-btn.active[b-amftzqa5i9] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border-color: var(--acv-primary);
    font-weight: 600;
    font-size: 0.9rem;
    min-width: 40px;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
    cursor: default;
}

.pagination-btn.active:hover[b-amftzqa5i9] {
    background: var(--acv-primary);
    color: var(--acv-white);
    transform: none;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
}

.pagination-btn:disabled[b-amftzqa5i9] {
    background: var(--gray-100);
    border-color: var(--gray-200);
    color: var(--gray-400);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Responsive Design */
@media (max-width: 768px) {
    .employee-page[b-amftzqa5i9] {
        padding: 1rem;
    }
    
    .search-main-row[b-amftzqa5i9] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .search-input-group[b-amftzqa5i9],
    .search-select-group[b-amftzqa5i9] {
        min-width: auto;
        flex: 1;
    }
    
    .list-header-content[b-amftzqa5i9] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    
    .sort-controls[b-amftzqa5i9] {
        justify-content: space-between;
    }
    
    .employee-table-container[b-amftzqa5i9] {
        overflow-x: auto;
    }
    
    .employee-table[b-amftzqa5i9] {
        min-width: 1000px;
    }
    
    .table-footer[b-amftzqa5i9] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        text-align: center;
    }
    
    .pagination-nav[b-amftzqa5i9] {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .employee-page[b-amftzqa5i9] {
        padding: 0.5rem 1rem;
    }
    
    .card-header-section[b-amftzqa5i9] {
        padding: 1.5rem;
    }
    
    .card-header-text h1[b-amftzqa5i9] {
        font-size: 1.5rem;
    }
    
    .list-header[b-amftzqa5i9] {
        padding: 1.25rem 1.5rem;
    }
    
    .list-title[b-amftzqa5i9] {
        font-size: 1.25rem;
    }
    
    .sort-controls[b-amftzqa5i9] {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .refresh-btn[b-amftzqa5i9],
    .add-employee-btn[b-amftzqa5i9] {
        width: 100%;
        min-width: auto;
    }
    
    .table-header-row th[b-amftzqa5i9],
    .table-row td[b-amftzqa5i9] {
        padding: 0.75rem 0.5rem;
    }
    
    .action-buttons[b-amftzqa5i9] {
        gap: 0.125rem;
    }
    
    .action-btn-table[b-amftzqa5i9] {
        width: 36px;
        height: 32px;
        font-size: 0.8rem;
    }
}
/* _content/ltia.portal.web/Components/Pages/Admin/Employee/EmployeeCreate.razor.rz.scp.css */
/* CSS Variables - Đặt trực tiếp vào .employee-create-page */
.employee-create-page[b-j9fpeuiwzz] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    
    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Card Header */
.employee-create-card-header[b-j9fpeuiwzz] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-content[b-j9fpeuiwzz] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-icon[b-j9fpeuiwzz] {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-800) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
}

.header-text[b-j9fpeuiwzz] {
    flex: 1;
}

.header-title[b-j9fpeuiwzz] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 0.5rem 0;
}

.header-subtitle[b-j9fpeuiwzz] {
    font-size: 1rem;
    color: var(--gray-600);
    margin: 0;
}

/* Main Content Container */
.main-content-container[b-j9fpeuiwzz] {
    display: flex;
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.form-column[b-j9fpeuiwzz] {
    flex: 2;
    background: var(--acv-white);
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.create-form[b-j9fpeuiwzz] {
    max-width: 100%;
}

/* Form Sections */
.form-section[b-j9fpeuiwzz] {
    margin-bottom: 32px;
}

.section-header[b-j9fpeuiwzz] {
    margin-bottom: 20px;
}

.section-title[b-j9fpeuiwzz] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
}

.section-title i[b-j9fpeuiwzz] {
    color: var(--acv-primary);
    font-size: 16px;
}

.form-grid[b-j9fpeuiwzz] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* Form Styling */
.form-group[b-j9fpeuiwzz] {
    margin-bottom: 24px;
}

.form-group.full-width[b-j9fpeuiwzz] {
    width: 100%;
    grid-column: 1 / -1;
}

.form-label[b-j9fpeuiwzz] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 8px;
    font-size: 14px;
}

.form-label i[b-j9fpeuiwzz] {
    color: var(--acv-primary);
    width: 16px;
}

.required[b-j9fpeuiwzz] {
    color: var(--error-main);
}

/* Form Input */
.form-input[b-j9fpeuiwzz] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s ease;
    background: var(--acv-white);
    box-sizing: border-box;
    font-family: inherit;
    resize: vertical;
}

.form-input:focus[b-j9fpeuiwzz] {
    outline: none;
    border-color: var(--acv-primary);
    border-width: 1px;
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.form-input:disabled[b-j9fpeuiwzz] {
    background: var(--gray-100);
    color: var(--gray-500);
    cursor: not-allowed;
}

.form-input[b-j9fpeuiwzz]::placeholder {
    color: var(--gray-400);
}

textarea.form-input[b-j9fpeuiwzz] {
    min-height: 80px;
    line-height: 1.5;
}

/* Validation Message */
.validation-message[b-j9fpeuiwzz] {
    display: block;
    color: var(--error-main);
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

/* Form Actions */
.form-actions[b-j9fpeuiwzz] {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--gray-200);
}

.no-drop-arrow[b-j9fpeuiwzz]::-webkit-calendar-picker-indicator {
    opacity: 0;
    display: none;
}

.no-drop-arrow[b-j9fpeuiwzz] {
    appearance: textfield;
    -webkit-appearance: textfield;
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
}

.select-search-wrap[b-j9fpeuiwzz] {
    position: relative;
    display: flex;
    align-items: center;
}

.select-clear-btn[b-j9fpeuiwzz] {
    position: absolute;
    right: 4px;
    background: none;
    border: none;
    color: #888;
    font-size: 1.5rem;
    padding: 0 3px;
    cursor: pointer;
    z-index: 10;
}

.dropdown-panel[b-j9fpeuiwzz] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    margin-top: 4px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    max-height: 280px;
    overflow: auto;
}

.dropdown-loading[b-j9fpeuiwzz] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    color: #6b7280;
    font-size: 0.95rem;
}

.spinner[b-j9fpeuiwzz] {
    width: 16px;
    height: 16px;
    border: 2px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    display: inline-block;
    animation: spin-b-j9fpeuiwzz 0.8s linear infinite;
}

@keyframes spin-b-j9fpeuiwzz {
    to {
        transform: rotate(360deg);
    }
}

.dropdown-list[b-j9fpeuiwzz] {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

.dropdown-item[b-j9fpeuiwzz] {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
}

.dropdown-item:hover[b-j9fpeuiwzz] {
    background: #f3f4f6;
}

.dropdown-item .code[b-j9fpeuiwzz] {
    font-weight: 600;
    color: #111827;
}

.dropdown-item .name[b-j9fpeuiwzz] {
    color: #374151;
}

.dropdown-empty[b-j9fpeuiwzz] {
    padding: 10px 12px;
    color: #9ca3af;
}

input[list].no-drop-arrow[b-j9fpeuiwzz]::-ms-expand {
    display: none;
}

.btn-primary[b-j9fpeuiwzz], .btn-secondary[b-j9fpeuiwzz] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid;
    text-decoration: none;
    min-width: 140px;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-primary[b-j9fpeuiwzz] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border-color: var(--acv-primary);
}

.btn-primary:hover:not(:disabled)[b-j9fpeuiwzz] {
    background: var(--acv-primary-800);
    border-color: var(--acv-primary-800);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(33, 76, 166, 0.3);
}

.btn-primary:disabled[b-j9fpeuiwzz] {
    background: var(--gray-400);
    border-color: var(--gray-400);
    cursor: not-allowed;
    transform: none;
    opacity: 0.6;
}

.btn-secondary[b-j9fpeuiwzz] {
    background: var(--acv-white);
    color: var(--gray-800);
    border-color: var(--gray-300);
}

.btn-secondary:hover:not(:disabled)[b-j9fpeuiwzz] {
    background: var(--gray-50);
    border-color: var(--gray-400);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-secondary:disabled[b-j9fpeuiwzz] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Responsive */
@media (max-width: 768px) {
    .employee-create-page[b-j9fpeuiwzz] {
        padding: 1rem;
    }
    
    .employee-create-card-header[b-j9fpeuiwzz] {
        padding: 1.5rem;
    }
    
    .form-column[b-j9fpeuiwzz] {
        padding: 24px;
    }
    
    .form-grid[b-j9fpeuiwzz] {
        grid-template-columns: 1fr;
    }
    
    .form-actions[b-j9fpeuiwzz] {
        flex-direction: column;
    }
    
    .btn-primary[b-j9fpeuiwzz], .btn-secondary[b-j9fpeuiwzz] {
        justify-content: center;
        width: 100%;
    }
    
    .header-content[b-j9fpeuiwzz] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .header-icon[b-j9fpeuiwzz] {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }
    
    .header-title[b-j9fpeuiwzz] {
        font-size: 1.5rem;
    }
    
    .header-subtitle[b-j9fpeuiwzz] {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .employee-create-page[b-j9fpeuiwzz] {
        padding: 0.5rem;
    }
    
    .employee-create-card-header[b-j9fpeuiwzz] {
        padding: 1rem;
    }
    
    .form-column[b-j9fpeuiwzz] {
        padding: 1.5rem;
    }
}
/* _content/ltia.portal.web/Components/Pages/Admin/Employee/EmployeeDetail.razor.rz.scp.css */
/* Employee Detail Page - Based on Department Details Design */
.employee-detail-page[b-tfob113wt5] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Loading & Not Found States */
.loading-container[b-tfob113wt5],
.not-found-container[b-tfob113wt5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
}

.loading-spinner i[b-tfob113wt5] {
    font-size: 3rem;
    color: var(--acv-primary);
    animation: spin-b-tfob113wt5 1s linear infinite;
}

@keyframes spin-b-tfob113wt5 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.not-found-icon i[b-tfob113wt5] {
    font-size: 4rem;
    color: var(--gray-400);
    margin-bottom: 1rem;
}

.not-found-container h3[b-tfob113wt5] {
    color: var(--gray-800);
    margin-bottom: 0.5rem;
}

.not-found-container p[b-tfob113wt5] {
    color: var(--gray-600);
    margin-bottom: 1.5rem;
}

.not-found-container .btn-secondary[b-tfob113wt5] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--acv-white);
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    cursor: pointer;
}

.not-found-container .btn-secondary:hover[b-tfob113wt5] {
    background: var(--gray-50);
    border-color: var(--gray-400);
    transform: translateY(-1px);
    color: var(--gray-800);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Card Header Section */
.card-header-section[b-tfob113wt5] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.card-header-content[b-tfob113wt5] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.card-header-icon[b-tfob113wt5] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.card-header-text h1[b-tfob113wt5] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
}

.card-header-text p[b-tfob113wt5] {
    font-size: 0.95rem;
    color: var(--gray-600);
    margin: 0.25rem 0 0 0;
}

/* Main Content Container */
.employee-details-container[b-tfob113wt5] {
    max-width: 100%;
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Card Styles */
.detail-card[b-tfob113wt5] {
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--gray-200);
    overflow: hidden;
}

.card-header[b-tfob113wt5] {
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--acv-white) 100%);
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-title[b-tfob113wt5] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-title i[b-tfob113wt5] {
    color: var(--acv-primary);
    font-size: 0.875rem;
}

.card-content[b-tfob113wt5] {
    padding: 1.25rem;
}

/* Details Grid */
.details-grid[b-tfob113wt5] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    row-gap: 1rem;
}

.detail-item[b-tfob113wt5] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.detail-item.full-width[b-tfob113wt5] {
    grid-column: 1 / -1;
}

.detail-label[b-tfob113wt5] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gray-600);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.detail-label i[b-tfob113wt5] {
    color: var(--acv-primary);
    font-size: 0.6875rem;
}

.detail-value[b-tfob113wt5] {
    font-size: 0.9375rem;
    color: var(--gray-900);
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.detail-value strong[b-tfob113wt5] {
    font-weight: 600;
    color: var(--gray-900);
}

.detail-value a[b-tfob113wt5] {
    color: var(--acv-primary);
    text-decoration: none;
    transition: all 0.2s ease;
}

.detail-value a:hover[b-tfob113wt5] {
    text-decoration: underline;
    color: var(--acv-primary-700);
}

/* Empty Value */
.empty-value[b-tfob113wt5] {
    color: var(--gray-500);
    font-style: italic;
    font-size: 0.9375rem;
}

/* Form Actions */
.form-actions[b-tfob113wt5] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-200);
    flex-wrap: wrap;
}

.btn-primary[b-tfob113wt5],
.btn-secondary[b-tfob113wt5],
.btn-danger[b-tfob113wt5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    border: none;
    min-width: 160px;
    justify-content: center;
}

.btn-primary[b-tfob113wt5] {
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.15);
}

.btn-primary:hover[b-tfob113wt5] {
    background: linear-gradient(135deg, var(--acv-primary-700) 0%, var(--acv-primary-800) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.25);
    text-decoration: none;
    color: var(--acv-white);
}

.btn-secondary[b-tfob113wt5] {
    background: var(--acv-white);
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.btn-secondary:hover[b-tfob113wt5] {
    background: var(--gray-50);
    border-color: var(--gray-400);
    transform: translateY(-1px);
    color: var(--gray-800);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-danger[b-tfob113wt5] {
    background: linear-gradient(135deg, #ff5630 0%, #ff8a65 100%);
    color: var(--acv-white);
    box-shadow: 0 2px 8px rgba(255, 86, 48, 0.25);
}

.btn-danger:hover[b-tfob113wt5] {
    background: linear-gradient(135deg, #e53e3e 0%, #ff6b47 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 86, 48, 0.35);
}

/* Responsive */
@media (max-width: 768px) {
    .employee-detail-page[b-tfob113wt5] {
        padding: 0.5rem 1rem;
    }

    .card-header-text h1[b-tfob113wt5] {
        font-size: 1.5rem;
    }
    
    .card-header[b-tfob113wt5] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .details-grid[b-tfob113wt5] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .detail-item[b-tfob113wt5] {
        gap: 0.25rem;
    }

    .form-actions[b-tfob113wt5] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .btn-primary[b-tfob113wt5],
    .btn-secondary[b-tfob113wt5],
    .btn-danger[b-tfob113wt5] {
        min-width: 100%;
    }
}

@media (max-width: 600px) {
    .card-header-content[b-tfob113wt5] {
        flex-direction: column;
        text-align: center;
    }
}
/* _content/ltia.portal.web/Components/Pages/Admin/Employee/EmployeeEdit.razor.rz.scp.css */
/* CSS Variables - Đặt trực tiếp vào .employee-edit-page */
.employee-edit-page[b-nutb2gp72c] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    
    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Card Header */
.employee-edit-card-header[b-nutb2gp72c] {
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--acv-white) 100%);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.header-content[b-nutb2gp72c] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem 2.5rem;
}

.header-icon[b-nutb2gp72c] {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.25);
    flex-shrink: 0;
}

.header-icon i[b-nutb2gp72c] {
    color: var(--acv-white);
    font-size: 1.75rem;
}

.header-text[b-nutb2gp72c] {
    flex: 1;
}

.header-title[b-nutb2gp72c] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
}

.header-subtitle[b-nutb2gp72c] {
    font-size: 1rem;
    color: var(--gray-600);
    margin: 0;
    line-height: 1.5;
}

/* Loading & Not Found States */
.loading-container[b-nutb2gp72c],
.not-found-container[b-nutb2gp72c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    margin-bottom: 2rem;
    padding: 2rem;
}

.loading-spinner[b-nutb2gp72c] {
    margin-bottom: 1rem;
}

.loading-spinner i[b-nutb2gp72c] {
    font-size: 3rem;
    color: var(--acv-primary);
    animation: spin-b-nutb2gp72c 1s linear infinite;
}

@keyframes spin-b-nutb2gp72c {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-nutb2gp72c] {
    color: var(--gray-600);
    margin: 0;
}

.not-found-icon[b-nutb2gp72c] {
    margin-bottom: 1rem;
}

.not-found-icon i[b-nutb2gp72c] {
    font-size: 4rem;
    color: var(--gray-400);
}

.not-found-container h3[b-nutb2gp72c] {
    color: var(--gray-800);
    margin-bottom: 0.5rem;
}

.not-found-container p[b-nutb2gp72c] {
    color: var(--gray-600);
    margin-bottom: 1.5rem;
}

.not-found-container .btn-secondary[b-nutb2gp72c] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--acv-white);
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    cursor: pointer;
}

.not-found-container .btn-secondary:hover[b-nutb2gp72c] {
    background: var(--gray-50);
    border-color: var(--gray-400);
    transform: translateY(-1px);
    color: var(--gray-800);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Main Content Container (Two-column layout) */
.main-content-container[b-nutb2gp72c] {
    display: flex;
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto;
    overflow: visible;
}

/* Form Column (Left) */
.form-column[b-nutb2gp72c] {
    flex: 2;
    background: var(--acv-white);
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: visible;
}

.create-form[b-nutb2gp72c] {
    max-width: 100%;
}

/* Form Sections */
.form-section[b-nutb2gp72c] {
    margin-bottom: 32px;
}

.section-header[b-nutb2gp72c] {
    margin-bottom: 20px;
}

.section-title[b-nutb2gp72c] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
}

.section-title i[b-nutb2gp72c] {
    color: var(--acv-primary);
    font-size: 16px;
}

.form-grid[b-nutb2gp72c] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* Form Groups */
.form-group[b-nutb2gp72c] {
    margin-bottom: 1.5rem;
}

.form-row[b-nutb2gp72c] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.form-group.full-width[b-nutb2gp72c] {
    grid-column: 1 / -1;
    width: 100%;
}

.form-label[b-nutb2gp72c] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
}

.form-label i[b-nutb2gp72c] {
    color: var(--acv-primary);
    font-size: 0.85rem;
}

.required[b-nutb2gp72c] {
    color: var(--error-main);
    margin-left: 2px;
}

/* Form Inputs */
.form-input[b-nutb2gp72c] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    background: var(--acv-white);
    transition: all 0.2s ease;
    font-family: inherit;
    box-sizing: border-box;
    height: 48px;
}

.form-input:focus[b-nutb2gp72c] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.form-input-disabled[b-nutb2gp72c] {
    background-color: #f8f9fa !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
    border-color: #dee2e6 !important;
}

.form-text[b-nutb2gp72c] {
    font-size: 0.85rem;
    color: var(--gray-600);
    margin-top: 0.25rem;
}

textarea.form-input[b-nutb2gp72c] {
    min-height: 80px;
    line-height: 1.5;
    height: auto;
}

/* Form Actions */
.form-actions[b-nutb2gp72c] {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}

.btn-primary[b-nutb2gp72c], .btn-secondary[b-nutb2gp72c] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid;
    text-decoration: none;
    min-width: 140px;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-primary[b-nutb2gp72c] {
    background: #214ca6;
    color: white;
    border-color: #214ca6;
}

.btn-primary:hover:not(:disabled)[b-nutb2gp72c] {
    background: #1a3d8a;
    border-color: #1a3d8a;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(33, 76, 166, 0.3);
}

.btn-primary:disabled[b-nutb2gp72c] {
    background: #9ca3af;
    border-color: #9ca3af;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary[b-nutb2gp72c] {
    background: white;
    color: #111827;
    border-color: #d1d5db;
}

.btn-secondary:hover:not(:disabled)[b-nutb2gp72c] {
    background: #f9fafb;
    border-color: #9ca3af;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-secondary:disabled[b-nutb2gp72c] {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #9ca3af;
    cursor: not-allowed;
    transform: none;
}

.no-drop-arrow[b-nutb2gp72c]::-webkit-calendar-picker-indicator {
    opacity: 0;
    display: none;
}

.no-drop-arrow[b-nutb2gp72c] {
    appearance: textfield;
    -webkit-appearance: textfield;
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
}

.select-search-wrap[b-nutb2gp72c] {
    position: relative;
    display: flex;
    align-items: center;
}

.select-clear-btn[b-nutb2gp72c] {
    position: absolute;
    right: 4px;
    background: none;
    border: none;
    color: #888;
    font-size: 1.5rem;
    padding: 0 3px;
    cursor: pointer;
    z-index: 10;
}

.dropdown-panel[b-nutb2gp72c] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    margin-top: 4px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    max-height: 280px;
    overflow: auto;
}

.dropdown-loading[b-nutb2gp72c] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    color: #6b7280;
    font-size: 0.95rem;
}

.spinner[b-nutb2gp72c] {
    width: 16px;
    height: 16px;
    border: 2px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    display: inline-block;
    animation: spin-b-nutb2gp72c 0.8s linear infinite;
}

@keyframes spin-b-nutb2gp72c {
    to {
        transform: rotate(360deg);
    }
}

.dropdown-list[b-nutb2gp72c] {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

.dropdown-item[b-nutb2gp72c] {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
}

.dropdown-item:hover[b-nutb2gp72c] {
    background: #f3f4f6;
}

.dropdown-item .code[b-nutb2gp72c] {
    font-weight: 600;
    color: #111827;
}

.dropdown-item .name[b-nutb2gp72c] {
    color: #374151;
}

.dropdown-empty[b-nutb2gp72c] {
    padding: 10px 12px;
    color: #9ca3af;
}

input[list].no-drop-arrow[b-nutb2gp72c]::-ms-expand {
    display: none;
}

/* Responsive Design */
@media (max-width: 768px) {
    .employee-edit-page[b-nutb2gp72c] {
        padding: 0.5rem 1rem;
    }

    .header-content[b-nutb2gp72c] {
        flex-direction: column;
        gap: 1rem;
        padding: 1.5rem;
    }

    .header-icon[b-nutb2gp72c] {
        width: 48px;
        height: 48px;
    }

    .header-icon i[b-nutb2gp72c] {
        font-size: 1.5rem;
    }

    .header-title[b-nutb2gp72c] {
        font-size: 1.5rem;
    }

    .header-subtitle[b-nutb2gp72c] {
        font-size: 0.9rem;
    }

    .form-column[b-nutb2gp72c] {
        padding: 1.5rem;
    }

    .form-grid[b-nutb2gp72c] {
        grid-template-columns: 1fr;
    }

    .form-row[b-nutb2gp72c] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .form-actions[b-nutb2gp72c] {
        flex-direction: column;
        gap: 0.75rem;
        margin-top: 24px;
        padding-top: 20px;
    }

    .form-actions .btn-secondary[b-nutb2gp72c],
    .form-actions .btn-primary[b-nutb2gp72c] {
        min-width: 100%;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .employee-edit-page[b-nutb2gp72c] {
        padding: 0.5rem;
    }

    .header-content[b-nutb2gp72c] {
        padding: 1rem;
    }

    .form-column[b-nutb2gp72c] {
        padding: 1rem;
    }

    .header-title[b-nutb2gp72c] {
        font-size: 1.25rem;
    }

    .form-group[b-nutb2gp72c] {
        margin-bottom: 1rem;
    }
}
/* _content/ltia.portal.web/Components/Pages/Admin/Home.razor.rz.scp.css */
/* CSS Variables - Đặt trực tiếp vào .home-container */
.home-container[b-bzhz9zzwrc] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --success-main: #00c853;
    --success-dark: #00a152;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --info-main: #3b82f6;
    --info-dark: #2563eb;
    
    min-height: 100vh;
    padding: 2rem 1.5rem;
    background-color: var(--gray-100);
}

/* Welcome Section */
.welcome-section[b-bzhz9zzwrc] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 3rem 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    text-align: center;
}

.welcome-icon[b-bzhz9zzwrc] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: var(--acv-white);
    font-size: 2.5rem;
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

.welcome-section h1[b-bzhz9zzwrc] {
    margin: 0 0 1rem 0;
    font-size: 2rem;
    font-weight: 700;
    color: var(--gray-800);
}

.welcome-section p[b-bzhz9zzwrc] {
    margin: 0;
    color: var(--gray-600);
    font-size: 1.125rem;
    line-height: 1.6;
}

/* User Info Section */
.user-info-section[b-bzhz9zzwrc] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.user-info-header[b-bzhz9zzwrc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.user-info-header h2[b-bzhz9zzwrc] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-info-header h2 i[b-bzhz9zzwrc] {
    color: var(--acv-primary);
    font-size: 1.75rem;
}

.btn-profile-link[b-bzhz9zzwrc] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
    text-decoration: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-profile-link:hover[b-bzhz9zzwrc] {
    background: linear-gradient(135deg, var(--acv-primary-700) 0%, var(--acv-primary-800) 100%);
    color: var(--acv-white);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

/* User Info Grid */
.user-info-grid[b-bzhz9zzwrc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.user-info-card[b-bzhz9zzwrc] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.user-info-card:hover[b-bzhz9zzwrc] {
    background: var(--acv-primary-lighter);
    border-color: var(--acv-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.15);
}

.user-info-card-full[b-bzhz9zzwrc] {
    grid-column: 1 / -1;
}

.user-info-icon[b-bzhz9zzwrc] {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.user-info-content[b-bzhz9zzwrc] {
    flex: 1;
    min-width: 0;
}

.user-info-label[b-bzhz9zzwrc] {
    font-size: 0.875rem;
    color: var(--gray-600);
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.user-info-value[b-bzhz9zzwrc] {
    font-size: 1rem;
    color: var(--gray-800);
    font-weight: 600;
    word-break: break-word;
}

.user-info-roles[b-bzhz9zzwrc] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.role-badge[b-bzhz9zzwrc] {
    background: linear-gradient(45deg, var(--acv-primary), var(--acv-primary-700));
    color: var(--acv-white);
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Dashboard Section */
.dashboard-section[b-bzhz9zzwrc] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.dashboard-header[b-bzhz9zzwrc] {
    margin-bottom: 1.5rem;
}

.dashboard-header h2[b-bzhz9zzwrc] {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dashboard-header h2 i[b-bzhz9zzwrc] {
    color: var(--acv-primary);
    font-size: 1.75rem;
}

.dashboard-header p[b-bzhz9zzwrc] {
    margin: 0;
    color: var(--gray-600);
    font-size: 1rem;
}

/* Dashboard Cards Grid */
.dashboard-cards[b-bzhz9zzwrc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.dashboard-card[b-bzhz9zzwrc] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.dashboard-card:hover[b-bzhz9zzwrc] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: var(--acv-primary);
}

.dashboard-card-icon[b-bzhz9zzwrc] {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    flex-shrink: 0;
}

.stat-icon-primary[b-bzhz9zzwrc] {
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
}

.stat-icon-success[b-bzhz9zzwrc] {
    background: linear-gradient(135deg, #00c853 0%, #00a152 100%);
    color: var(--acv-white);
}

.stat-icon-warning[b-bzhz9zzwrc] {
    background: linear-gradient(135deg, #ffab00 0%, #f57c00 100%);
    color: var(--acv-white);
}

.stat-icon-info[b-bzhz9zzwrc] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: var(--acv-white);
}

.stat-icon-danger[b-bzhz9zzwrc] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: var(--acv-white);
}

.dashboard-card-content[b-bzhz9zzwrc] {
    flex: 1;
    min-width: 0;
}

.dashboard-card-title[b-bzhz9zzwrc] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gray-800);
    line-height: 1.2;
    margin-bottom: 0.25rem;
}

.dashboard-card-text[b-bzhz9zzwrc] {
    font-size: 0.875rem;
    color: var(--gray-600);
    font-weight: 500;
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 768px) {
    .home-container[b-bzhz9zzwrc] {
        padding: 1.5rem 1rem;
    }

    .welcome-section[b-bzhz9zzwrc] {
        padding: 2rem 1.5rem;
    }

    .welcome-icon[b-bzhz9zzwrc] {
        width: 60px;
        height: 60px;
        font-size: 2rem;
    }

    .welcome-section h1[b-bzhz9zzwrc] {
        font-size: 1.5rem;
    }

    .welcome-section p[b-bzhz9zzwrc] {
        font-size: 1rem;
    }

    .user-info-section[b-bzhz9zzwrc],
    .dashboard-section[b-bzhz9zzwrc] {
        padding: 1.5rem;
    }

    .user-info-grid[b-bzhz9zzwrc] {
        grid-template-columns: 1fr;
    }

    .dashboard-cards[b-bzhz9zzwrc] {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .user-info-card[b-bzhz9zzwrc] {
        padding: 1rem;
    }

    .dashboard-card[b-bzhz9zzwrc] {
        padding: 1.25rem;
    }

    .user-info-header[b-bzhz9zzwrc] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .btn-profile-link[b-bzhz9zzwrc] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .home-container[b-bzhz9zzwrc] {
        padding: 1rem 0.75rem;
    }

    .welcome-section[b-bzhz9zzwrc] {
        padding: 1.5rem 1rem;
    }

    .user-info-section[b-bzhz9zzwrc],
    .dashboard-section[b-bzhz9zzwrc] {
        padding: 1rem;
    }

    .dashboard-cards[b-bzhz9zzwrc] {
        grid-template-columns: 1fr;
    }

    .dashboard-card-title[b-bzhz9zzwrc] {
        font-size: 1rem;
    }
}
/* _content/ltia.portal.web/Components/Pages/Admin/Permission/Permission.razor.rz.scp.css */
/* CSS Variables - Đặt trực tiếp vào .permission-page */
.permission-page[b-qjq34mhia9] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    
    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Card Header Section */
.card-header-section[b-qjq34mhia9] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.card-header-content[b-qjq34mhia9] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.card-header-icon[b-qjq34mhia9] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
}

.card-header-text h1[b-qjq34mhia9] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-800);
}

.card-header-text p[b-qjq34mhia9] {
    margin: 0.25rem 0 0 0;
    color: var(--gray-600);
    font-size: 1rem;
}

/* Search Section */
.permission-search-section[b-qjq34mhia9] {
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    margin-bottom: 2rem;
    overflow: visible;
    position: relative;
    z-index: 10;
}

.search-container[b-qjq34mhia9] {
    padding: 2rem;
}

.search-header[b-qjq34mhia9] {
    margin-bottom: 1.5rem;
    text-align: center;
}

.search-title[b-qjq34mhia9] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 0.5rem 0;
}

.search-title i[b-qjq34mhia9] {
    color: var(--acv-primary);
    font-size: 1.3rem;
}

.search-subtitle[b-qjq34mhia9] {
    color: var(--gray-600);
    font-size: 1rem;
    margin: 0;
    font-weight: 400;
}

.search-content[b-qjq34mhia9] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.search-main-row[b-qjq34mhia9] {
    display: flex;
    gap: 1.5rem;
    align-items: flex-end;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 20;
}

.search-input-group[b-qjq34mhia9] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 0 1 600px;
    min-width: 300px;
    max-width: 600px;
    position: relative;
    z-index: 20;
}

.search-select-group[b-qjq34mhia9] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 0 0 180px;
    min-width: 150px;
    position: relative;
    z-index: 20;
}

.form-label[b-qjq34mhia9] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-700);
    margin: 0;
}

.form-label i[b-qjq34mhia9] {
    color: var(--acv-primary);
    font-size: 0.8rem;
}

.search-input-wrapper[b-qjq34mhia9] {
    position: relative;
}

.search-icon[b-qjq34mhia9] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    z-index: 1;
}

.search-input[b-qjq34mhia9] {
    width: 100%;
    height: 48px;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--acv-white);
    box-sizing: border-box;
}

.search-input:focus[b-qjq34mhia9] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.search-select[b-qjq34mhia9] {
    width: 100%;
    height: 48px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--acv-white);
    color: var(--gray-700);
    cursor: pointer;
    box-sizing: border-box;
}

.search-select:focus[b-qjq34mhia9] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.search-controls[b-qjq34mhia9] {
    display: flex;
    gap: 0.75rem;
    align-items: end;
    position: relative;
    z-index: 20;
    flex-shrink: 0;
    min-width: 120px;
    flex: 0 0 120px;
}

.search-btn[b-qjq34mhia9], .clear-btn[b-qjq34mhia9] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border: none;
    padding: 0.75rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 20;
    width: 48px;
    height: 48px;
    box-sizing: border-box;
}

.search-btn:hover:not(:disabled)[b-qjq34mhia9] {
    background: var(--acv-primary-700);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

.search-btn:disabled[b-qjq34mhia9] {
    opacity: 0.5;
    cursor: not-allowed;
}

.clear-btn[b-qjq34mhia9] {
    background: var(--gray-500);
}

.clear-btn:hover[b-qjq34mhia9] {
    background: var(--gray-600);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* List Container */
.permission-list-container[b-qjq34mhia9] {
    background: var(--acv-white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
}

/* List Header */
.list-header[b-qjq34mhia9] {
    background: var(--acv-white) !important;
    padding: 1.75rem 2rem;
    border-bottom: 1px solid var(--gray-200);
    border-radius: 16px 16px 0 0;
    position: relative;
    z-index: 1;
    overflow: visible;
}

.list-header[b-qjq34mhia9]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 16px 0 0 0;
}

.list-header-content[b-qjq34mhia9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0;
}

.list-title-section[b-qjq34mhia9] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.list-title[b-qjq34mhia9] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.list-title i[b-qjq34mhia9] {
    color: var(--acv-primary);
    font-size: 1.25rem;
}

.list-count[b-qjq34mhia9] {
    background: var(--acv-primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Sort Controls */
.sort-controls[b-qjq34mhia9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.refresh-btn[b-qjq34mhia9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--acv-white);
    color: var(--acv-primary);
    border: 2px solid var(--acv-primary);
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 120px;
    justify-content: center;
    text-decoration: none;
}

.refresh-btn:hover:not(:disabled)[b-qjq34mhia9] {
    background: var(--acv-primary);
    color: var(--acv-white);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
    text-decoration: none;
}

.refresh-btn:disabled[b-qjq34mhia9] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Permissions List */
.permission-list[b-qjq34mhia9] {
    padding: 1.5rem;
    min-height: 200px;
}

/* Permissions Table */
.permission-table-container[b-qjq34mhia9] {
    overflow-x: auto;
    border-radius: 12px;
}

.permission-table[b-qjq34mhia9] {
    width: 100%;
    border-collapse: collapse;
    background: var(--acv-white);
    border-radius: 12px;
    overflow: hidden;
}

/* Table Header */
.table-header-row[b-qjq34mhia9] {
    background: var(--gray-50);
    border-bottom: 2px solid var(--gray-200);
}

.table-header-row th[b-qjq34mhia9] {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--gray-700);
    font-size: 0.9rem;
    border-bottom: 2px solid var(--gray-200);
}

/* Column Widths */
.col-stt[b-qjq34mhia9] {
    width: 60px;
    text-align: center !important;
}

.col-id[b-qjq34mhia9] {
    width: 100px;
    text-align: center !important;
}

.col-name[b-qjq34mhia9] {
    width: auto;
    min-width: 200px;
}

.col-description[b-qjq34mhia9] {
    width: auto;
    min-width: 300px;
}

.col-created[b-qjq34mhia9] {
    width: 150px;
}

.col-actions[b-qjq34mhia9] {
    width: 100px;
    text-align: center !important;
}

/* Table Body */
.table-row[b-qjq34mhia9] {
    border-bottom: 1px solid var(--gray-200);
    transition: all 0.2s ease;
}

.table-row:hover[b-qjq34mhia9] {
    background: var(--gray-50);
}

.table-row:last-child[b-qjq34mhia9] {
    border-bottom: none;
}

.table-row td[b-qjq34mhia9] {
    padding: 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--gray-200);
}

/* STT Number */
.stt-number[b-qjq34mhia9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--gray-100);
    color: var(--gray-600);
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Badge ID */
.badge-id[b-qjq34mhia9] {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    background: var(--gray-100);
    color: var(--gray-700);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Permission Name */
.permission-name strong[b-qjq34mhia9] {
    color: var(--gray-800);
    font-weight: 600;
    font-size: 0.95rem;
}

/* Permission Description */
.permission-description[b-qjq34mhia9] {
    color: var(--gray-600);
    font-size: 0.9rem;
    line-height: 1.5;
    max-width: 400px;
}

/* Date Text */
.date-text[b-qjq34mhia9] {
    color: var(--gray-600);
    font-size: 0.9rem;
}

/* Action Buttons */
.action-buttons[b-qjq34mhia9] {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    align-items: center;
}

.action-btn-table[b-qjq34mhia9] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 36px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    text-decoration: none;
}

.action-btn-table.view[b-qjq34mhia9] {
    background: linear-gradient(135deg, rgba(33, 76, 166, 0.1) 0%, rgba(33, 76, 166, 0.15) 100%);
    color: var(--acv-primary);
    border: 1px solid rgba(33, 76, 166, 0.2);
}

.action-btn-table.view:hover[b-qjq34mhia9] {
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(33, 76, 166, 0.3);
}

/* Empty State */
.empty-state[b-qjq34mhia9] {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--gray-600);
}

.empty-state-icon[b-qjq34mhia9] {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--gray-400);
}

.empty-state-icon i.fa-spin[b-qjq34mhia9] {
    color: var(--acv-primary);
}

.empty-state h3[b-qjq34mhia9] {
    margin-bottom: 0.5rem;
    color: var(--gray-700);
    font-size: 1.25rem;
    font-weight: 600;
}

.empty-state p[b-qjq34mhia9] {
    margin-bottom: 2rem;
    color: var(--gray-600);
}

.empty-state-actions[b-qjq34mhia9] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-primary[b-qjq34mhia9] {
    background: var(--acv-primary);
    color: var(--acv-white);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(33, 76, 166, 0.2);
}

.btn-primary:hover[b-qjq34mhia9] {
    background: var(--acv-primary-700);
    color: var(--acv-white);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

/* Table Footer */
.table-footer[b-qjq34mhia9] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--acv-white);
    border-top: 1px solid var(--gray-200);
    border-radius: 0 0 16px 16px;
    gap: 2rem;
    flex-wrap: wrap;
}

.results-info[b-qjq34mhia9] {
    font-size: 0.9rem;
    color: var(--gray-600);
    font-weight: 500;
}

.pagination-container[b-qjq34mhia9] {
    display: flex;
    align-items: center;
}

.pagination-nav[b-qjq34mhia9] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagination-btn[b-qjq34mhia9] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: var(--acv-white);
    color: var(--gray-600);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s ease;
    cursor: pointer;
}

.pagination-btn:hover:not(:disabled)[b-qjq34mhia9] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border-color: var(--acv-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.15);
}

.pagination-btn.active[b-qjq34mhia9] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border-color: var(--acv-primary);
    font-weight: 600;
    font-size: 0.9rem;
    min-width: 40px;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
    cursor: default;
}

.pagination-btn.active:hover[b-qjq34mhia9] {
    background: var(--acv-primary);
    color: var(--acv-white);
    transform: none;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
}

.pagination-btn:disabled[b-qjq34mhia9] {
    background: var(--gray-100);
    border-color: var(--gray-200);
    color: var(--gray-400);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Responsive Design */
@media (max-width: 768px) {
    .permission-page[b-qjq34mhia9] {
        padding: 1rem;
    }
    
    .search-main-row[b-qjq34mhia9] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .search-input-group[b-qjq34mhia9],
    .search-select-group[b-qjq34mhia9] {
        min-width: auto;
        flex: 1;
    }
    
    .list-header-content[b-qjq34mhia9] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    
    .sort-controls[b-qjq34mhia9] {
        justify-content: space-between;
    }
    
    .permission-table-container[b-qjq34mhia9] {
        overflow-x: auto;
    }
    
    .permission-table[b-qjq34mhia9] {
        min-width: 800px;
    }
    
    .table-footer[b-qjq34mhia9] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        text-align: center;
    }
    
    .pagination-nav[b-qjq34mhia9] {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .permission-page[b-qjq34mhia9] {
        padding: 0.5rem 1rem;
    }
    
    .card-header-section[b-qjq34mhia9] {
        padding: 1.5rem;
    }
    
    .card-header-text h1[b-qjq34mhia9] {
        font-size: 1.5rem;
    }
    
    .list-header[b-qjq34mhia9] {
        padding: 1.25rem 1.5rem;
    }
    
    .list-title[b-qjq34mhia9] {
        font-size: 1.25rem;
    }
    
    .sort-controls[b-qjq34mhia9] {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .refresh-btn[b-qjq34mhia9] {
        width: 100%;
        min-width: auto;
    }
    
    .table-header-row th[b-qjq34mhia9],
    .table-row td[b-qjq34mhia9] {
        padding: 0.75rem 0.5rem;
    }
    
    .action-buttons[b-qjq34mhia9] {
        gap: 0.125rem;
    }
    
    .action-btn-table[b-qjq34mhia9] {
        width: 36px;
        height: 32px;
        font-size: 0.8rem;
    }
}
/* _content/ltia.portal.web/Components/Pages/Admin/Permission/PermissionDetail.razor.rz.scp.css */
/* Permission Detail Page - Based on Account Details Design */
.permission-detail-page[b-s8ujf32gly] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Loading & Not Found States */
.loading-container[b-s8ujf32gly],
.not-found-container[b-s8ujf32gly] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
}

.loading-spinner i[b-s8ujf32gly] {
    font-size: 3rem;
    color: var(--acv-primary);
    animation: spin-b-s8ujf32gly 1s linear infinite;
}

@keyframes spin-b-s8ujf32gly {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.not-found-icon i[b-s8ujf32gly] {
    font-size: 4rem;
    color: var(--gray-400);
    margin-bottom: 1rem;
}

.not-found-container h3[b-s8ujf32gly] {
    color: var(--gray-800);
    margin-bottom: 0.5rem;
}

.not-found-container p[b-s8ujf32gly] {
    color: var(--gray-600);
    margin-bottom: 1.5rem;
}

.not-found-container .btn-primary[b-s8ujf32gly] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.15);
}

.not-found-container .btn-primary:hover[b-s8ujf32gly] {
    background: linear-gradient(135deg, var(--acv-primary-700) 0%, var(--acv-primary-800) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.25);
    text-decoration: none;
    color: var(--acv-white);
}

/* Card Header Section */
.card-header-section[b-s8ujf32gly] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.card-header-content[b-s8ujf32gly] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.card-header-icon[b-s8ujf32gly] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.card-header-text h1[b-s8ujf32gly] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
}

.card-header-text p[b-s8ujf32gly] {
    font-size: 0.95rem;
    color: var(--gray-600);
    margin: 0.25rem 0 0 0;
}

/* Main Content Container */
.permission-details-container[b-s8ujf32gly] {
    max-width: 100%;
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Card Styles */
.detail-card[b-s8ujf32gly] {
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--gray-200);
    overflow: hidden;
}

.card-header[b-s8ujf32gly] {
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--acv-white) 100%);
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-title[b-s8ujf32gly] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-title i[b-s8ujf32gly] {
    color: var(--acv-primary);
    font-size: 0.875rem;
}

.card-content[b-s8ujf32gly] {
    padding: 1.25rem;
}

/* Details Grid */
.details-grid[b-s8ujf32gly] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    row-gap: 1rem;
}

.detail-item[b-s8ujf32gly] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.detail-item.full-width[b-s8ujf32gly] {
    grid-column: 1 / -1;
}

.detail-label[b-s8ujf32gly] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gray-600);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.detail-label i[b-s8ujf32gly] {
    color: var(--acv-primary);
    font-size: 0.6875rem;
}

.detail-value[b-s8ujf32gly] {
    font-size: 0.9375rem;
    color: var(--gray-900);
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.detail-value strong[b-s8ujf32gly] {
    font-weight: 600;
    color: var(--gray-900);
}

/* Empty Value */
.empty-value[b-s8ujf32gly] {
    color: var(--gray-500);
    font-style: italic;
    font-size: 0.9375rem;
}

/* Form Actions */
.form-actions[b-s8ujf32gly] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-200);
    flex-wrap: wrap;
}

.btn-primary[b-s8ujf32gly],
.btn-secondary[b-s8ujf32gly],
.btn-danger[b-s8ujf32gly] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    border: none;
    min-width: 160px;
    justify-content: center;
}

.btn-primary[b-s8ujf32gly] {
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.15);
}

.btn-primary:hover[b-s8ujf32gly] {
    background: linear-gradient(135deg, var(--acv-primary-700) 0%, var(--acv-primary-800) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.25);
    text-decoration: none;
    color: var(--acv-white);
}

.btn-secondary[b-s8ujf32gly] {
    background: var(--acv-white);
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.btn-secondary:hover[b-s8ujf32gly] {
    background: var(--gray-50);
    border-color: var(--gray-400);
    transform: translateY(-1px);
    color: var(--gray-800);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-danger[b-s8ujf32gly] {
    background: linear-gradient(135deg, #ff5630 0%, #ff8a65 100%);
    color: var(--acv-white);
    box-shadow: 0 2px 8px rgba(255, 86, 48, 0.25);
}

.btn-danger:hover[b-s8ujf32gly] {
    background: linear-gradient(135deg, #e53e3e 0%, #ff6b47 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 86, 48, 0.35);
}

/* Responsive */
@media (max-width: 768px) {
    .permission-detail-page[b-s8ujf32gly] {
        padding: 0.5rem 1rem;
    }

    .card-header-text h1[b-s8ujf32gly] {
        font-size: 1.5rem;
    }
    
    .card-header[b-s8ujf32gly] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .details-grid[b-s8ujf32gly] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .detail-item[b-s8ujf32gly] {
        gap: 0.25rem;
    }

    .form-actions[b-s8ujf32gly] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .btn-primary[b-s8ujf32gly],
    .btn-secondary[b-s8ujf32gly],
    .btn-danger[b-s8ujf32gly] {
        min-width: 100%;
    }
}

@media (max-width: 600px) {
    .card-header-content[b-s8ujf32gly] {
        flex-direction: column;
        text-align: center;
    }
}
/* _content/ltia.portal.web/Components/Pages/Admin/Role/Role.razor.rz.scp.css */
/* CSS Variables - Đặt trực tiếp vào .role-page */
.role-page[b-zbzf1qoudy] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    
    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Card Header Section */
.card-header-section[b-zbzf1qoudy] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.card-header-content[b-zbzf1qoudy] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.card-header-icon[b-zbzf1qoudy] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
}

.card-header-text h1[b-zbzf1qoudy] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-800);
}

.card-header-text p[b-zbzf1qoudy] {
    margin: 0.25rem 0 0 0;
    color: var(--gray-600);
    font-size: 1rem;
}

/* Search Section */
.role-search-section[b-zbzf1qoudy] {
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    margin-bottom: 2rem;
    overflow: visible;
    position: relative;
    z-index: 10;
}

.search-container[b-zbzf1qoudy] {
    padding: 2rem;
}

.search-header[b-zbzf1qoudy] {
    margin-bottom: 1.5rem;
    text-align: center;
}

.search-title[b-zbzf1qoudy] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 0.5rem 0;
}

.search-title i[b-zbzf1qoudy] {
    color: var(--acv-primary);
    font-size: 1.3rem;
}

.search-subtitle[b-zbzf1qoudy] {
    color: var(--gray-600);
    font-size: 1rem;
    margin: 0;
    font-weight: 400;
}

.search-content[b-zbzf1qoudy] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.search-main-row[b-zbzf1qoudy] {
    display: flex;
    gap: 1.5rem;
    align-items: flex-end;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 20;
}

.search-input-group[b-zbzf1qoudy] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 0 1 600px;
    min-width: 300px;
    max-width: 600px;
    position: relative;
    z-index: 20;
}

.search-select-group[b-zbzf1qoudy] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 0 0 180px;
    min-width: 150px;
    position: relative;
    z-index: 20;
}

.form-label[b-zbzf1qoudy] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-700);
    margin: 0;
}

.form-label i[b-zbzf1qoudy] {
    color: var(--acv-primary);
    font-size: 0.8rem;
}

.search-input-wrapper[b-zbzf1qoudy] {
    position: relative;
}

.search-icon[b-zbzf1qoudy] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    z-index: 1;
}

.search-input[b-zbzf1qoudy] {
    width: 100%;
    height: 48px;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--acv-white);
    box-sizing: border-box;
}

.search-input:focus[b-zbzf1qoudy] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.search-select[b-zbzf1qoudy] {
    width: 100%;
    height: 48px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--acv-white);
    color: var(--gray-700);
    cursor: pointer;
    box-sizing: border-box;
}

.search-select:focus[b-zbzf1qoudy] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.search-controls[b-zbzf1qoudy] {
    display: flex;
    gap: 0.75rem;
    align-items: end;
    position: relative;
    z-index: 20;
    flex-shrink: 0;
    min-width: 120px;
    flex: 0 0 120px;
}

.search-btn[b-zbzf1qoudy], .clear-btn[b-zbzf1qoudy] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border: none;
    padding: 0.75rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 20;
    width: 48px;
    height: 48px;
    box-sizing: border-box;
}

.search-btn:hover:not(:disabled)[b-zbzf1qoudy] {
    background: var(--acv-primary-700);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

.search-btn:disabled[b-zbzf1qoudy] {
    opacity: 0.5;
    cursor: not-allowed;
}

.clear-btn[b-zbzf1qoudy] {
    background: var(--gray-500);
}

.clear-btn:hover[b-zbzf1qoudy] {
    background: var(--gray-600);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* List Container */
.role-list-container[b-zbzf1qoudy] {
    background: var(--acv-white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
}

/* List Header */
.list-header[b-zbzf1qoudy] {
    background: var(--acv-white) !important;
    padding: 1.75rem 2rem;
    border-bottom: 1px solid var(--gray-200);
    border-radius: 16px 16px 0 0;
    position: relative;
    z-index: 1;
    overflow: visible;
}

.list-header[b-zbzf1qoudy]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 16px 0 0 0;
}

.list-header-content[b-zbzf1qoudy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0;
}

.list-title-section[b-zbzf1qoudy] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.list-title[b-zbzf1qoudy] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.list-title i[b-zbzf1qoudy] {
    color: var(--acv-primary);
    font-size: 1.25rem;
}

.list-count[b-zbzf1qoudy] {
    background: var(--acv-primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Sort Controls */
.sort-controls[b-zbzf1qoudy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.refresh-btn[b-zbzf1qoudy],
.add-role-btn[b-zbzf1qoudy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--acv-white);
    color: var(--acv-primary);
    border: 2px solid var(--acv-primary);
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 120px;
    justify-content: center;
    text-decoration: none;
}

.refresh-btn:hover:not(:disabled)[b-zbzf1qoudy],
.add-role-btn:hover[b-zbzf1qoudy] {
    background: var(--acv-primary);
    color: var(--acv-white);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
    text-decoration: none;
}

.refresh-btn:disabled[b-zbzf1qoudy] {
    opacity: 0.5;
    cursor: not-allowed;
}

.add-role-btn[b-zbzf1qoudy] {
    background: var(--acv-primary);
    color: var(--acv-white);
}

.add-role-btn:hover[b-zbzf1qoudy] {
    background: var(--acv-primary-700);
}

/* Roles List */
.role-list[b-zbzf1qoudy] {
    padding: 1.5rem;
    min-height: 200px;
}

/* Roles Table */
.role-table-container[b-zbzf1qoudy] {
    overflow-x: auto;
    border-radius: 12px;
}

.role-table[b-zbzf1qoudy] {
    width: 100%;
    border-collapse: collapse;
    background: var(--acv-white);
    border-radius: 12px;
    overflow: hidden;
}

/* Table Header */
.table-header-row[b-zbzf1qoudy] {
    background: var(--gray-50);
    border-bottom: 2px solid var(--gray-200);
}

.table-header-row th[b-zbzf1qoudy] {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--gray-700);
    font-size: 0.9rem;
    border-bottom: 2px solid var(--gray-200);
}

/* Column Widths */
.col-stt[b-zbzf1qoudy] {
    width: 60px;
    text-align: center !important;
}

.col-id[b-zbzf1qoudy] {
    width: 100px;
    text-align: center !important;
}

.col-name[b-zbzf1qoudy] {
    width: auto;
    min-width: 200px;
}

.col-description[b-zbzf1qoudy] {
    width: auto;
    min-width: 300px;
}

.col-created[b-zbzf1qoudy] {
    width: 150px;
}

.col-actions[b-zbzf1qoudy] {
    width: 200px;
    text-align: center !important;
}

/* Table Body */
.table-row[b-zbzf1qoudy] {
    border-bottom: 1px solid var(--gray-200);
    transition: all 0.2s ease;
}

.table-row:hover[b-zbzf1qoudy] {
    background: var(--gray-50);
}

.table-row:last-child[b-zbzf1qoudy] {
    border-bottom: none;
}

.table-row td[b-zbzf1qoudy] {
    padding: 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--gray-200);
}

/* STT Number */
.stt-number[b-zbzf1qoudy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--gray-100);
    color: var(--gray-600);
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Badge ID */
.badge-id[b-zbzf1qoudy] {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    background: var(--gray-100);
    color: var(--gray-700);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Role Name */
.role-name strong[b-zbzf1qoudy] {
    color: var(--gray-800);
    font-weight: 600;
    font-size: 0.95rem;
}

/* Role Description */
.role-description[b-zbzf1qoudy] {
    color: var(--gray-600);
    font-size: 0.9rem;
    line-height: 1.5;
    max-width: 400px;
}

/* Date Text */
.date-text[b-zbzf1qoudy] {
    color: var(--gray-600);
    font-size: 0.9rem;
}

/* Action Buttons */
.action-buttons[b-zbzf1qoudy] {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    align-items: center;
}

.action-btn-table[b-zbzf1qoudy] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 36px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    text-decoration: none;
}

.action-btn-table.view[b-zbzf1qoudy] {
    background: linear-gradient(135deg, rgba(33, 76, 166, 0.1) 0%, rgba(33, 76, 166, 0.15) 100%);
    color: var(--acv-primary);
    border: 1px solid rgba(33, 76, 166, 0.2);
}

.action-btn-table.view:hover[b-zbzf1qoudy] {
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(33, 76, 166, 0.3);
}

.action-btn-table.edit[b-zbzf1qoudy] {
    background: linear-gradient(135deg, var(--warning-lighter) 0%, rgba(255, 171, 0, 0.1) 100%);
    color: var(--warning-dark);
    border: 1px solid var(--warning-light);
}

.action-btn-table.edit:hover[b-zbzf1qoudy] {
    background: linear-gradient(135deg, var(--warning-main) 0%, var(--warning-dark) 100%);
    color: var(--acv-white);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(255, 171, 0, 0.3);
}

.action-btn-table.permission[b-zbzf1qoudy] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(139, 92, 246, 0.15) 100%);
    color: #8b5cf6;
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.action-btn-table.permission:hover[b-zbzf1qoudy] {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: var(--acv-white);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.3);
}

.action-btn-table.delete[b-zbzf1qoudy] {
    background: linear-gradient(135deg, var(--error-lighter) 0%, rgba(255, 86, 48, 0.1) 100%);
    color: var(--error-dark);
    border: 1px solid var(--error-light);
}

.action-btn-table.delete:hover[b-zbzf1qoudy] {
    background: linear-gradient(135deg, var(--error-main) 0%, var(--error-dark) 100%);
    color: var(--acv-white);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(255, 86, 48, 0.3);
}

/* Empty State */
.empty-state[b-zbzf1qoudy] {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--gray-600);
}

.empty-state-icon[b-zbzf1qoudy] {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--gray-400);
}

.empty-state-icon i.fa-spin[b-zbzf1qoudy] {
    color: var(--acv-primary);
}

.empty-state h3[b-zbzf1qoudy] {
    margin-bottom: 0.5rem;
    color: var(--gray-700);
    font-size: 1.25rem;
    font-weight: 600;
}

.empty-state p[b-zbzf1qoudy] {
    margin-bottom: 2rem;
    color: var(--gray-600);
}

.empty-state-actions[b-zbzf1qoudy] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-primary[b-zbzf1qoudy] {
    background: var(--acv-primary);
    color: var(--acv-white);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(33, 76, 166, 0.2);
}

.btn-primary:hover[b-zbzf1qoudy] {
    background: var(--acv-primary-700);
    color: var(--acv-white);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

/* Table Footer */
.table-footer[b-zbzf1qoudy] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--acv-white);
    border-top: 1px solid var(--gray-200);
    border-radius: 0 0 16px 16px;
    gap: 2rem;
    flex-wrap: wrap;
}

.results-info[b-zbzf1qoudy] {
    font-size: 0.9rem;
    color: var(--gray-600);
    font-weight: 500;
}

.pagination-container[b-zbzf1qoudy] {
    display: flex;
    align-items: center;
}

.pagination-nav[b-zbzf1qoudy] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagination-btn[b-zbzf1qoudy] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: var(--acv-white);
    color: var(--gray-600);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s ease;
    cursor: pointer;
}

.pagination-btn:hover:not(:disabled)[b-zbzf1qoudy] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border-color: var(--acv-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.15);
}

.pagination-btn.active[b-zbzf1qoudy] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border-color: var(--acv-primary);
    font-weight: 600;
    font-size: 0.9rem;
    min-width: 40px;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
    cursor: default;
}

.pagination-btn.active:hover[b-zbzf1qoudy] {
    background: var(--acv-primary);
    color: var(--acv-white);
    transform: none;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
}

.pagination-btn:disabled[b-zbzf1qoudy] {
    background: var(--gray-100);
    border-color: var(--gray-200);
    color: var(--gray-400);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Responsive Design */
@media (max-width: 768px) {
    .role-page[b-zbzf1qoudy] {
        padding: 1rem;
    }
    
    .search-main-row[b-zbzf1qoudy] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .search-input-group[b-zbzf1qoudy],
    .search-select-group[b-zbzf1qoudy] {
        min-width: auto;
        flex: 1;
    }
    
    .list-header-content[b-zbzf1qoudy] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    
    .sort-controls[b-zbzf1qoudy] {
        justify-content: space-between;
    }
    
    .role-table-container[b-zbzf1qoudy] {
        overflow-x: auto;
    }
    
    .role-table[b-zbzf1qoudy] {
        min-width: 800px;
    }
    
    .table-footer[b-zbzf1qoudy] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        text-align: center;
    }
    
    .pagination-nav[b-zbzf1qoudy] {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .role-page[b-zbzf1qoudy] {
        padding: 0.5rem 1rem;
    }
    
    .card-header-section[b-zbzf1qoudy] {
        padding: 1.5rem;
    }
    
    .card-header-text h1[b-zbzf1qoudy] {
        font-size: 1.5rem;
    }
    
    .list-header[b-zbzf1qoudy] {
        padding: 1.25rem 1.5rem;
    }
    
    .list-title[b-zbzf1qoudy] {
        font-size: 1.25rem;
    }
    
    .sort-controls[b-zbzf1qoudy] {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .refresh-btn[b-zbzf1qoudy],
    .add-role-btn[b-zbzf1qoudy] {
        width: 100%;
        min-width: auto;
    }
    
    .table-header-row th[b-zbzf1qoudy],
    .table-row td[b-zbzf1qoudy] {
        padding: 0.75rem 0.5rem;
    }
    
    .action-buttons[b-zbzf1qoudy] {
        gap: 0.125rem;
    }
    
    .action-btn-table[b-zbzf1qoudy] {
        width: 36px;
        height: 32px;
        font-size: 0.8rem;
    }
}
/* _content/ltia.portal.web/Components/Pages/Admin/Role/RoleCreate.razor.rz.scp.css */
/* CSS Variables - Đặt trực tiếp vào .role-create-page */
.role-create-page[b-c7u1g2l7ij] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    
    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Card Header */
.role-create-card-header[b-c7u1g2l7ij] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.header-content[b-c7u1g2l7ij] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-icon[b-c7u1g2l7ij] {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-800) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
}

.header-text[b-c7u1g2l7ij] {
    flex: 1;
}

.header-title[b-c7u1g2l7ij] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 0.5rem 0;
}

.header-subtitle[b-c7u1g2l7ij] {
    font-size: 1rem;
    color: var(--gray-600);
    margin: 0;
}

/* Main Content Container */
.main-content-container[b-c7u1g2l7ij] {
    display: flex;
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.form-column[b-c7u1g2l7ij] {
    flex: 1;
    background: var(--acv-white);
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Form Sections */
.form-section[b-c7u1g2l7ij] {
    margin-bottom: 32px;
}

.section-header[b-c7u1g2l7ij] {
    margin-bottom: 20px;
}

.section-title[b-c7u1g2l7ij] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
}

.section-title i[b-c7u1g2l7ij] {
    color: var(--acv-primary);
    font-size: 16px;
}

.form-grid[b-c7u1g2l7ij] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

/* Form Styling */
.form-group[b-c7u1g2l7ij] {
    margin-bottom: 24px;
}

.form-group.full-width[b-c7u1g2l7ij] {
    width: 100%;
}

.form-label[b-c7u1g2l7ij] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 8px;
    font-size: 14px;
}

.form-label i[b-c7u1g2l7ij] {
    color: var(--acv-primary);
    width: 16px;
}

.required[b-c7u1g2l7ij] {
    color: var(--error-main);
}

/* Form Input */
.form-input[b-c7u1g2l7ij] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s ease;
    background: var(--acv-white);
    box-sizing: border-box;
    font-family: inherit;
    resize: vertical;
}

.form-input:focus[b-c7u1g2l7ij] {
    outline: none;
    border-color: var(--acv-primary);
    border-width: 1px;
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.form-input:disabled[b-c7u1g2l7ij] {
    background: var(--gray-100);
    color: var(--gray-500);
    cursor: not-allowed;
}

.form-input[b-c7u1g2l7ij]::placeholder {
    color: var(--gray-400);
}

textarea.form-input[b-c7u1g2l7ij] {
    min-height: 80px;
    line-height: 1.5;
}

/* Form Actions */
.form-actions[b-c7u1g2l7ij] {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--gray-200);
}

.btn-primary[b-c7u1g2l7ij], .btn-secondary[b-c7u1g2l7ij] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid;
    text-decoration: none;
    min-width: 140px;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-primary[b-c7u1g2l7ij] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border-color: var(--acv-primary);
}

.btn-primary:hover:not(:disabled)[b-c7u1g2l7ij] {
    background: var(--acv-primary-800);
    border-color: var(--acv-primary-800);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(33, 76, 166, 0.3);
}

.btn-primary:disabled[b-c7u1g2l7ij] {
    background: var(--gray-400);
    border-color: var(--gray-400);
    cursor: not-allowed;
    transform: none;
    opacity: 0.6;
}

.btn-secondary[b-c7u1g2l7ij] {
    background: var(--acv-white);
    color: var(--gray-800);
    border-color: var(--gray-300);
}

.btn-secondary:hover:not(:disabled)[b-c7u1g2l7ij] {
    background: var(--gray-50);
    border-color: var(--gray-400);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-secondary:disabled[b-c7u1g2l7ij] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Responsive */
@media (max-width: 768px) {
    .role-create-page[b-c7u1g2l7ij] {
        padding: 1rem;
    }
    
    .role-create-card-header[b-c7u1g2l7ij] {
        padding: 1.5rem;
    }
    
    .form-column[b-c7u1g2l7ij] {
        padding: 24px;
    }
    
    .form-actions[b-c7u1g2l7ij] {
        flex-direction: column;
    }
    
    .btn-primary[b-c7u1g2l7ij], .btn-secondary[b-c7u1g2l7ij] {
        justify-content: center;
        width: 100%;
    }
    
    .header-content[b-c7u1g2l7ij] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .header-icon[b-c7u1g2l7ij] {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }
    
    .header-title[b-c7u1g2l7ij] {
        font-size: 1.5rem;
    }
    
    .header-subtitle[b-c7u1g2l7ij] {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .role-create-page[b-c7u1g2l7ij] {
        padding: 0.5rem;
    }
    
    .role-create-card-header[b-c7u1g2l7ij] {
        padding: 1rem;
    }
    
    .form-column[b-c7u1g2l7ij] {
        padding: 1.5rem;
    }
}
/* _content/ltia.portal.web/Components/Pages/Admin/Role/RoleDetail.razor.rz.scp.css */
/* Role Detail Page - Based on Permission Details Design */
.role-detail-page[b-5o9gf6gukc] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Loading & Not Found States */
.loading-container[b-5o9gf6gukc],
.not-found-container[b-5o9gf6gukc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
}

.loading-spinner i[b-5o9gf6gukc] {
    font-size: 3rem;
    color: var(--acv-primary);
    animation: spin-b-5o9gf6gukc 1s linear infinite;
}

@keyframes spin-b-5o9gf6gukc {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.not-found-icon i[b-5o9gf6gukc] {
    font-size: 4rem;
    color: var(--gray-400);
    margin-bottom: 1rem;
}

.not-found-container h3[b-5o9gf6gukc] {
    color: var(--gray-800);
    margin-bottom: 0.5rem;
}

.not-found-container p[b-5o9gf6gukc] {
    color: var(--gray-600);
    margin-bottom: 1.5rem;
}

.not-found-container .btn-primary[b-5o9gf6gukc] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.15);
}

.not-found-container .btn-primary:hover[b-5o9gf6gukc] {
    background: linear-gradient(135deg, var(--acv-primary-700) 0%, var(--acv-primary-800) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.25);
    text-decoration: none;
    color: var(--acv-white);
}

/* Card Header Section */
.card-header-section[b-5o9gf6gukc] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.card-header-content[b-5o9gf6gukc] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.card-header-icon[b-5o9gf6gukc] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.card-header-text h1[b-5o9gf6gukc] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
}

.card-header-text p[b-5o9gf6gukc] {
    font-size: 0.95rem;
    color: var(--gray-600);
    margin: 0.25rem 0 0 0;
}

/* Main Content Container */
.role-details-container[b-5o9gf6gukc] {
    max-width: 100%;
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Card Styles */
.detail-card[b-5o9gf6gukc] {
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--gray-200);
    overflow: hidden;
}

.card-header[b-5o9gf6gukc] {
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--acv-white) 100%);
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-title[b-5o9gf6gukc] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-title i[b-5o9gf6gukc] {
    color: var(--acv-primary);
    font-size: 0.875rem;
}

.card-content[b-5o9gf6gukc] {
    padding: 1.25rem;
}

/* Details Grid */
.details-grid[b-5o9gf6gukc] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    row-gap: 1rem;
}

.detail-item[b-5o9gf6gukc] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.detail-item.full-width[b-5o9gf6gukc] {
    grid-column: 1 / -1;
}

.detail-label[b-5o9gf6gukc] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gray-600);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.detail-label i[b-5o9gf6gukc] {
    color: var(--acv-primary);
    font-size: 0.6875rem;
}

.detail-value[b-5o9gf6gukc] {
    font-size: 0.9375rem;
    color: var(--gray-900);
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.detail-value strong[b-5o9gf6gukc] {
    font-weight: 600;
    color: var(--gray-900);
}

/* Empty Value */
.empty-value[b-5o9gf6gukc] {
    color: var(--gray-500);
    font-style: italic;
    font-size: 0.9375rem;
}

/* Form Actions */
.form-actions[b-5o9gf6gukc] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-200);
    flex-wrap: wrap;
}

.btn-primary[b-5o9gf6gukc],
.btn-secondary[b-5o9gf6gukc],
.btn-danger[b-5o9gf6gukc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    border: none;
    min-width: 160px;
    justify-content: center;
}

.btn-primary[b-5o9gf6gukc] {
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.15);
}

.btn-primary:hover[b-5o9gf6gukc] {
    background: linear-gradient(135deg, var(--acv-primary-700) 0%, var(--acv-primary-800) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.25);
    text-decoration: none;
    color: var(--acv-white);
}

.btn-secondary[b-5o9gf6gukc] {
    background: var(--acv-white);
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.btn-secondary:hover[b-5o9gf6gukc] {
    background: var(--gray-50);
    border-color: var(--gray-400);
    transform: translateY(-1px);
    color: var(--gray-800);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-danger[b-5o9gf6gukc] {
    background: linear-gradient(135deg, #ff5630 0%, #ff8a65 100%);
    color: var(--acv-white);
    box-shadow: 0 2px 8px rgba(255, 86, 48, 0.25);
}

.btn-danger:hover[b-5o9gf6gukc] {
    background: linear-gradient(135deg, #e53e3e 0%, #ff6b47 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 86, 48, 0.35);
}

/* Responsive */
@media (max-width: 768px) {
    .role-detail-page[b-5o9gf6gukc] {
        padding: 0.5rem 1rem;
    }

    .card-header-text h1[b-5o9gf6gukc] {
        font-size: 1.5rem;
    }
    
    .card-header[b-5o9gf6gukc] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .details-grid[b-5o9gf6gukc] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .detail-item[b-5o9gf6gukc] {
        gap: 0.25rem;
    }

    .form-actions[b-5o9gf6gukc] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .btn-primary[b-5o9gf6gukc],
    .btn-secondary[b-5o9gf6gukc],
    .btn-danger[b-5o9gf6gukc] {
        min-width: 100%;
    }
}

@media (max-width: 600px) {
    .card-header-content[b-5o9gf6gukc] {
        flex-direction: column;
        text-align: center;
    }
}
/* _content/ltia.portal.web/Components/Pages/Admin/Role/RoleEdit.razor.rz.scp.css */
/* CSS Variables - Đặt trực tiếp vào .role-edit-page */
.role-edit-page[b-24g7b9eqpg] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    
    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Card Header */
.role-edit-card-header[b-24g7b9eqpg] {
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--acv-white) 100%);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.header-content[b-24g7b9eqpg] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem 2.5rem;
}

.header-icon[b-24g7b9eqpg] {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.25);
    flex-shrink: 0;
}

.header-icon i[b-24g7b9eqpg] {
    color: var(--acv-white);
    font-size: 1.75rem;
}

.header-text[b-24g7b9eqpg] {
    flex: 1;
}

.header-title[b-24g7b9eqpg] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
}

.header-subtitle[b-24g7b9eqpg] {
    font-size: 1rem;
    color: var(--gray-600);
    margin: 0;
    line-height: 1.5;
}

/* Loading & Not Found States */
.loading-container[b-24g7b9eqpg],
.not-found-container[b-24g7b9eqpg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    margin-bottom: 2rem;
    padding: 2rem;
}

.loading-spinner[b-24g7b9eqpg] {
    margin-bottom: 1rem;
}

.loading-spinner i[b-24g7b9eqpg] {
    font-size: 3rem;
    color: var(--acv-primary);
    animation: spin-b-24g7b9eqpg 1s linear infinite;
}

@keyframes spin-b-24g7b9eqpg {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-24g7b9eqpg] {
    color: var(--gray-600);
    margin: 0;
}

.not-found-icon[b-24g7b9eqpg] {
    margin-bottom: 1rem;
}

.not-found-icon i[b-24g7b9eqpg] {
    font-size: 4rem;
    color: var(--gray-400);
}

.not-found-container h3[b-24g7b9eqpg] {
    color: var(--gray-800);
    margin-bottom: 0.5rem;
}

.not-found-container p[b-24g7b9eqpg] {
    color: var(--gray-600);
    margin-bottom: 1.5rem;
}

/* Main Content Container */
.main-content-container[b-24g7b9eqpg] {
    display: flex;
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
    overflow: visible;
}

/* Form Column */
.form-column[b-24g7b9eqpg] {
    flex: 1;
    background: var(--acv-white);
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: visible;
}

.create-form[b-24g7b9eqpg] {
    max-width: 100%;
}

/* Form Sections */
.form-section[b-24g7b9eqpg] {
    margin-bottom: 32px;
}

.section-header[b-24g7b9eqpg] {
    margin-bottom: 20px;
}

.section-title[b-24g7b9eqpg] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
}

.section-title i[b-24g7b9eqpg] {
    color: var(--acv-primary);
    font-size: 16px;
}

.form-grid[b-24g7b9eqpg] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

/* Form Groups */
.form-group[b-24g7b9eqpg] {
    margin-bottom: 24px;
}

.form-group.full-width[b-24g7b9eqpg] {
    width: 100%;
}

.form-label[b-24g7b9eqpg] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 8px;
    font-size: 14px;
}

.form-label i[b-24g7b9eqpg] {
    color: var(--acv-primary);
    width: 16px;
}

.required[b-24g7b9eqpg] {
    color: var(--error-main);
}

/* Form Inputs */
.form-input[b-24g7b9eqpg] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 14px;
    background: var(--acv-white);
    transition: all 0.2s ease;
    font-family: inherit;
    box-sizing: border-box;
    resize: vertical;
}

.form-input:focus[b-24g7b9eqpg] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.form-input:disabled[b-24g7b9eqpg] {
    background: var(--gray-100);
    color: var(--gray-500);
    cursor: not-allowed;
}

.form-input[b-24g7b9eqpg]::placeholder {
    color: var(--gray-400);
}

textarea.form-input[b-24g7b9eqpg] {
    min-height: 80px;
    line-height: 1.5;
}

/* Form Actions */
.form-actions[b-24g7b9eqpg] {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--gray-200);
}

.btn-primary[b-24g7b9eqpg], .btn-secondary[b-24g7b9eqpg] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid;
    text-decoration: none;
    min-width: 140px;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-primary[b-24g7b9eqpg] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border-color: var(--acv-primary);
}

.btn-primary:hover:not(:disabled)[b-24g7b9eqpg] {
    background: var(--acv-primary-800);
    border-color: var(--acv-primary-800);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(33, 76, 166, 0.3);
}

.btn-primary:disabled[b-24g7b9eqpg] {
    background: var(--gray-400);
    border-color: var(--gray-400);
    cursor: not-allowed;
    transform: none;
    opacity: 0.6;
}

.btn-secondary[b-24g7b9eqpg] {
    background: var(--acv-white);
    color: var(--gray-800);
    border-color: var(--gray-300);
}

.btn-secondary:hover:not(:disabled)[b-24g7b9eqpg] {
    background: var(--gray-50);
    border-color: var(--gray-400);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-secondary:disabled[b-24g7b9eqpg] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Responsive Design */
@media (max-width: 768px) {
    .role-edit-page[b-24g7b9eqpg] {
        padding: 0.5rem 1rem;
    }

    .header-content[b-24g7b9eqpg] {
        flex-direction: column;
        gap: 1rem;
        padding: 1.5rem;
    }

    .header-icon[b-24g7b9eqpg] {
        width: 48px;
        height: 48px;
    }

    .header-icon i[b-24g7b9eqpg] {
        font-size: 1.5rem;
    }

    .header-title[b-24g7b9eqpg] {
        font-size: 1.5rem;
    }

    .header-subtitle[b-24g7b9eqpg] {
        font-size: 0.9rem;
    }

    .form-column[b-24g7b9eqpg] {
        padding: 1.5rem;
    }

    .form-actions[b-24g7b9eqpg] {
        flex-direction: column;
        gap: 0.75rem;
        margin-top: 24px;
        padding-top: 20px;
    }

    .form-actions .btn-secondary[b-24g7b9eqpg],
    .form-actions .btn-primary[b-24g7b9eqpg] {
        min-width: 100%;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .role-edit-page[b-24g7b9eqpg] {
        padding: 0.5rem;
    }

    .header-content[b-24g7b9eqpg] {
        padding: 1rem;
    }

    .form-column[b-24g7b9eqpg] {
        padding: 1rem;
    }

    .header-title[b-24g7b9eqpg] {
        font-size: 1.25rem;
    }

    .form-group[b-24g7b9eqpg] {
        margin-bottom: 1rem;
    }
}
/* _content/ltia.portal.web/Components/Pages/Admin/Role/RolePermissions.razor.rz.scp.css */
/* CSS Variables - Đặt trực tiếp vào .role-permissions-page */
.role-permissions-page[b-z8kxg5t5aa] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    
    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Card Header */
.role-permissions-card-header[b-z8kxg5t5aa] {
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--acv-white) 100%);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.header-content[b-z8kxg5t5aa] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem 2.5rem;
}

.header-icon[b-z8kxg5t5aa] {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.25);
    flex-shrink: 0;
}

.header-icon i[b-z8kxg5t5aa] {
    color: var(--acv-white);
    font-size: 1.75rem;
}

.header-text[b-z8kxg5t5aa] {
    flex: 1;
}

.header-title[b-z8kxg5t5aa] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
}

.header-subtitle[b-z8kxg5t5aa] {
    font-size: 1rem;
    color: var(--gray-600);
    margin: 0;
    line-height: 1.5;
}

/* Loading & Error & Not Found States */
.loading-container[b-z8kxg5t5aa],
.error-container[b-z8kxg5t5aa],
.not-found-container[b-z8kxg5t5aa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    margin-bottom: 2rem;
    padding: 2rem;
}

.loading-spinner[b-z8kxg5t5aa] {
    margin-bottom: 1rem;
}

.loading-spinner i[b-z8kxg5t5aa] {
    font-size: 3rem;
    color: var(--acv-primary);
    animation: spin-b-z8kxg5t5aa 1s linear infinite;
}

@keyframes spin-b-z8kxg5t5aa {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-z8kxg5t5aa] {
    color: var(--gray-600);
    margin: 0;
}

.error-icon[b-z8kxg5t5aa],
.not-found-icon[b-z8kxg5t5aa] {
    margin-bottom: 1rem;
}

.error-icon i[b-z8kxg5t5aa],
.not-found-icon i[b-z8kxg5t5aa] {
    font-size: 4rem;
    color: var(--gray-400);
}

.error-container h3[b-z8kxg5t5aa],
.not-found-container h3[b-z8kxg5t5aa] {
    color: var(--gray-800);
    margin-bottom: 0.5rem;
}

.error-container p[b-z8kxg5t5aa],
.not-found-container p[b-z8kxg5t5aa] {
    color: var(--gray-600);
    margin-bottom: 1.5rem;
}

/* Main Content Container */
.main-content-container[b-z8kxg5t5aa] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Role Info Card */
.role-info-card[b-z8kxg5t5aa] {
    background: var(--acv-white);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--gray-200);
    overflow: hidden;
}

.role-info-card .card-header[b-z8kxg5t5aa] {
    background: var(--gray-50);
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
}

.role-info-card .card-title[b-z8kxg5t5aa] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0;
}

.role-info-card .card-title i[b-z8kxg5t5aa] {
    color: var(--acv-primary);
    font-size: 1rem;
}

.role-info-card .card-content[b-z8kxg5t5aa] {
    padding: 1.5rem;
}

.role-info-grid[b-z8kxg5t5aa] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.info-item[b-z8kxg5t5aa] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.info-label[b-z8kxg5t5aa] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-700);
}

.info-label i[b-z8kxg5t5aa] {
    color: var(--acv-primary);
    font-size: 0.75rem;
}

.info-value[b-z8kxg5t5aa] {
    font-size: 1rem;
    color: var(--gray-900);
    padding: 0.5rem 0;
}

/* Permissions Section Card */
.permissions-section-card[b-z8kxg5t5aa] {
    background: var(--acv-white);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--gray-200);
    overflow: hidden;
}

.permissions-section-card .card-header[b-z8kxg5t5aa] {
    background: var(--gray-50);
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
}

.permissions-header[b-z8kxg5t5aa] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.permissions-header .card-title[b-z8kxg5t5aa] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0;
}

.permissions-header .card-title i[b-z8kxg5t5aa] {
    color: var(--acv-primary);
    font-size: 1rem;
}

.permissions-summary[b-z8kxg5t5aa] {
    display: flex;
    align-items: center;
}

.summary-text[b-z8kxg5t5aa] {
    font-size: 0.875rem;
    color: var(--gray-600);
}

.summary-text strong[b-z8kxg5t5aa] {
    color: var(--acv-primary);
    font-weight: 600;
}

.permissions-section-card .card-content[b-z8kxg5t5aa] {
    padding: 1.5rem;
}

/* Permissions Table */
.permissions-table-container[b-z8kxg5t5aa] {
    background: var(--acv-white);
    border-radius: 8px;
    border: 1px solid var(--gray-200);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.permissions-table[b-z8kxg5t5aa] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.permissions-table thead[b-z8kxg5t5aa] {
    background: var(--gray-50);
    border-bottom: 2px solid var(--gray-200);
}

.permissions-table th[b-z8kxg5t5aa] {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--gray-800);
    border-bottom: 1px solid var(--gray-200);
}

.permissions-table td[b-z8kxg5t5aa] {
    padding: 1rem;
    border-bottom: 1px solid var(--gray-100);
    vertical-align: middle;
}

.permission-row[b-z8kxg5t5aa] {
    transition: background-color 0.2s ease;
}

.permission-row:hover[b-z8kxg5t5aa] {
    background-color: var(--gray-50);
}

.permission-row.selected[b-z8kxg5t5aa] {
    background-color: var(--acv-primary-lighter);
}

.permission-row.selected:hover[b-z8kxg5t5aa] {
    background-color: #bfdbfe;
}

/* Table Columns */
.checkbox-column[b-z8kxg5t5aa] {
    width: 200px;
    text-align: left;
}

/* Select All Header */
.select-all-header[b-z8kxg5t5aa] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.select-all-label[b-z8kxg5t5aa] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-700);
    cursor: pointer;
    margin: 0;
}

.name-column[b-z8kxg5t5aa] {
    width: 35%;
    font-weight: 500;
}

.description-column[b-z8kxg5t5aa] {
    width: 50%;
    color: var(--gray-600);
}

/* Checkbox Styling */
.permission-check[b-z8kxg5t5aa] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--acv-primary);
}

.permission-name[b-z8kxg5t5aa] {
    cursor: pointer;
    font-weight: 500;
    color: var(--gray-800);
}

.permission-description[b-z8kxg5t5aa] {
    font-size: 0.875rem;
    color: var(--gray-600);
    line-height: 1.5;
}

/* Table Footer (Pagination) */
.table-footer[b-z8kxg5t5aa] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-top: 1px solid var(--gray-200);
    margin-top: 1.5rem;
}

.results-info[b-z8kxg5t5aa] {
    font-size: 0.875rem;
    color: var(--gray-600);
}

.results-info strong[b-z8kxg5t5aa] {
    color: var(--gray-800);
    font-weight: 600;
}

.pagination-container[b-z8kxg5t5aa] {
    display: flex;
    align-items: center;
}

.pagination-nav[b-z8kxg5t5aa] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pagination-btn[b-z8kxg5t5aa] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    background: var(--acv-white);
    color: var(--gray-700);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pagination-btn:hover:not(:disabled)[b-z8kxg5t5aa] {
    background: var(--gray-50);
    border-color: var(--gray-400);
    color: var(--gray-900);
}

.pagination-btn.active[b-z8kxg5t5aa] {
    background: var(--acv-primary);
    border-color: var(--acv-primary);
    color: var(--acv-white);
}

.pagination-btn:disabled[b-z8kxg5t5aa] {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--gray-100);
}

/* Empty State */
.empty-state[b-z8kxg5t5aa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 2rem;
    color: var(--gray-600);
}

.empty-state-icon[b-z8kxg5t5aa] {
    margin-bottom: 1rem;
}

.empty-state-icon i[b-z8kxg5t5aa] {
    font-size: 3rem;
    color: var(--gray-400);
}

.empty-state h3[b-z8kxg5t5aa] {
    margin: 0 0 0.5rem 0;
    color: var(--gray-800);
    font-size: 1.25rem;
}

.empty-state p[b-z8kxg5t5aa] {
    margin: 0;
    color: var(--gray-600);
    font-size: 0.9rem;
}

/* Form Actions */
.form-actions[b-z8kxg5t5aa] {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-200);
}

.btn-primary[b-z8kxg5t5aa], .btn-secondary[b-z8kxg5t5aa] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid;
    text-decoration: none;
    min-width: 140px;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-primary[b-z8kxg5t5aa] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border-color: var(--acv-primary);
}

.btn-primary:hover:not(:disabled)[b-z8kxg5t5aa] {
    background: var(--acv-primary-800);
    border-color: var(--acv-primary-800);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(33, 76, 166, 0.3);
}

.btn-primary:disabled[b-z8kxg5t5aa] {
    background: var(--gray-400);
    border-color: var(--gray-400);
    cursor: not-allowed;
    transform: none;
    opacity: 0.6;
}

.btn-secondary[b-z8kxg5t5aa] {
    background: var(--acv-white);
    color: var(--gray-800);
    border-color: var(--gray-300);
}

.btn-secondary:hover:not(:disabled)[b-z8kxg5t5aa] {
    background: var(--gray-50);
    border-color: var(--gray-400);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-secondary:disabled[b-z8kxg5t5aa] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Responsive Design */
@media (max-width: 768px) {
    .role-permissions-page[b-z8kxg5t5aa] {
        padding: 0.5rem 1rem;
    }

    .header-content[b-z8kxg5t5aa] {
        flex-direction: column;
        gap: 1rem;
        padding: 1.5rem;
    }

    .header-icon[b-z8kxg5t5aa] {
        width: 48px;
        height: 48px;
    }

    .header-icon i[b-z8kxg5t5aa] {
        font-size: 1.5rem;
    }

    .header-title[b-z8kxg5t5aa] {
        font-size: 1.5rem;
    }

    .header-subtitle[b-z8kxg5t5aa] {
        font-size: 0.9rem;
    }

    .role-info-grid[b-z8kxg5t5aa] {
        grid-template-columns: 1fr;
    }

    .permissions-header[b-z8kxg5t5aa] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .permissions-table-container[b-z8kxg5t5aa] {
        overflow-x: auto;
    }

    .table-footer[b-z8kxg5t5aa] {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .pagination-nav[b-z8kxg5t5aa] {
        flex-wrap: wrap;
    }

    .form-actions[b-z8kxg5t5aa] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .form-actions .btn-secondary[b-z8kxg5t5aa],
    .form-actions .btn-primary[b-z8kxg5t5aa] {
        min-width: 100%;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .role-permissions-page[b-z8kxg5t5aa] {
        padding: 0.5rem;
    }

    .header-content[b-z8kxg5t5aa] {
        padding: 1rem;
    }

    .role-info-card .card-content[b-z8kxg5t5aa],
    .permissions-section-card .card-content[b-z8kxg5t5aa] {
        padding: 1rem;
    }

    .header-title[b-z8kxg5t5aa] {
        font-size: 1.25rem;
    }

    .permissions-table th[b-z8kxg5t5aa],
    .permissions-table td[b-z8kxg5t5aa] {
        padding: 0.75rem 0.5rem;
        font-size: 0.85rem;
    }
}
/* _content/ltia.portal.web/Components/Pages/Admin/Title/Title.razor.rz.scp.css */
/* CSS Variables - Đặt trực tiếp vào .title-page */
.title-page[b-8erh25c6aq] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    
    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Card Header Section */
.card-header-section[b-8erh25c6aq] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.card-header-content[b-8erh25c6aq] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.card-header-icon[b-8erh25c6aq] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
}

.card-header-text h1[b-8erh25c6aq] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-800);
}

.card-header-text p[b-8erh25c6aq] {
    margin: 0.25rem 0 0 0;
    color: var(--gray-600);
    font-size: 1rem;
}

/* Search Section */
.title-search-section[b-8erh25c6aq] {
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    margin-bottom: 2rem;
    overflow: visible;
    position: relative;
    z-index: 10;
}

.search-container[b-8erh25c6aq] {
    padding: 2rem;
}

.search-header[b-8erh25c6aq] {
    margin-bottom: 1.5rem;
    text-align: center;
}

.search-title[b-8erh25c6aq] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 0.5rem 0;
}

.search-title i[b-8erh25c6aq] {
    color: var(--acv-primary);
    font-size: 1.3rem;
}

.search-subtitle[b-8erh25c6aq] {
    color: var(--gray-600);
    font-size: 1rem;
    margin: 0;
    font-weight: 400;
}

.search-content[b-8erh25c6aq] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.search-main-row[b-8erh25c6aq] {
    display: flex;
    gap: 1.5rem;
    align-items: flex-end;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 20;
}

.search-input-group[b-8erh25c6aq] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 0 1 600px;
    min-width: 300px;
    max-width: 600px;
    position: relative;
    z-index: 20;
}

.search-select-group[b-8erh25c6aq] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 0 0 180px;
    min-width: 150px;
    position: relative;
    z-index: 20;
}

.form-label[b-8erh25c6aq] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-700);
    margin: 0;
}

.form-label i[b-8erh25c6aq] {
    color: var(--acv-primary);
    font-size: 0.8rem;
}

.search-input-wrapper[b-8erh25c6aq] {
    position: relative;
}

.search-icon[b-8erh25c6aq] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    z-index: 1;
}

.search-input[b-8erh25c6aq] {
    width: 100%;
    height: 48px;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--acv-white);
    box-sizing: border-box;
}

.search-input:focus[b-8erh25c6aq] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.search-clear[b-8erh25c6aq] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--gray-300);
    color: var(--gray-600);
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 2;
}

.search-clear:hover[b-8erh25c6aq] {
    background: var(--gray-400);
    color: var(--gray-800);
}

.search-clear i[b-8erh25c6aq] {
    font-size: 0.75rem;
}

.search-select[b-8erh25c6aq] {
    width: 100%;
    height: 48px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--acv-white);
    color: var(--gray-700);
    cursor: pointer;
    box-sizing: border-box;
}

.search-select:focus[b-8erh25c6aq] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.search-controls[b-8erh25c6aq] {
    display: flex;
    gap: 0.75rem;
    align-items: end;
    position: relative;
    z-index: 20;
    flex-shrink: 0;
    min-width: 120px;
    flex: 0 0 120px;
}

.search-btn[b-8erh25c6aq], .clear-btn[b-8erh25c6aq] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border: none;
    padding: 0.75rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 20;
    width: 48px;
    height: 48px;
    box-sizing: border-box;
}

.search-btn:hover:not(:disabled)[b-8erh25c6aq] {
    background: var(--acv-primary-700);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

.search-btn:disabled[b-8erh25c6aq] {
    opacity: 0.5;
    cursor: not-allowed;
}

.clear-btn[b-8erh25c6aq] {
    background: var(--gray-500);
}

.clear-btn:hover[b-8erh25c6aq] {
    background: var(--gray-600);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* List Container */
.title-list-container[b-8erh25c6aq] {
    background: var(--acv-white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
}

/* List Header */
.list-header[b-8erh25c6aq] {
    background: var(--acv-white) !important;
    padding: 1.75rem 2rem;
    border-bottom: 1px solid var(--gray-200);
    border-radius: 16px 16px 0 0;
    position: relative;
    z-index: 1;
    overflow: visible;
}

.list-header[b-8erh25c6aq]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 16px 0 0 0;
}

.list-header-content[b-8erh25c6aq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0;
}

.list-title-section[b-8erh25c6aq] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.list-title[b-8erh25c6aq] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.list-title i[b-8erh25c6aq] {
    color: var(--acv-primary);
    font-size: 1.25rem;
}

.list-count[b-8erh25c6aq] {
    background: var(--acv-primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Sort Controls */
.sort-controls[b-8erh25c6aq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.refresh-btn[b-8erh25c6aq],
.add-title-btn[b-8erh25c6aq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--acv-white);
    color: var(--acv-primary);
    border: 2px solid var(--acv-primary);
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 120px;
    justify-content: center;
    text-decoration: none;
}

.refresh-btn:hover:not(:disabled)[b-8erh25c6aq],
.add-title-btn:hover[b-8erh25c6aq] {
    background: var(--acv-primary);
    color: var(--acv-white);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
    text-decoration: none;
}

.refresh-btn:disabled[b-8erh25c6aq] {
    opacity: 0.5;
    cursor: not-allowed;
}

.add-title-btn[b-8erh25c6aq] {
    background: var(--acv-primary);
    color: var(--acv-white);
}

.add-title-btn:hover[b-8erh25c6aq] {
    background: var(--acv-primary-700);
}

/* Titles List */
.title-list[b-8erh25c6aq] {
    padding: 1.5rem;
    min-height: 200px;
}

/* Titles Table */
.title-table-container[b-8erh25c6aq] {
    overflow-x: auto;
    border-radius: 12px;
}

.title-table[b-8erh25c6aq] {
    width: 100%;
    border-collapse: collapse;
    background: var(--acv-white);
    border-radius: 12px;
    overflow: hidden;
}

/* Table Header */
.table-header-row[b-8erh25c6aq] {
    background: var(--gray-50);
    border-bottom: 2px solid var(--gray-200);
}

.table-header-row th[b-8erh25c6aq] {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--gray-700);
    font-size: 0.9rem;
    border-bottom: 2px solid var(--gray-200);
}

/* Column Widths */
.col-stt[b-8erh25c6aq] {
    width: 60px;
    text-align: center !important;
}

.col-id[b-8erh25c6aq] {
    width: 100px;
    text-align: center !important;
}

.col-name[b-8erh25c6aq] {
    width: auto;
    min-width: 200px;
}

.col-description[b-8erh25c6aq] {
    width: auto;
    min-width: 300px;
}

.col-created[b-8erh25c6aq] {
    width: 150px;
}

.col-actions[b-8erh25c6aq] {
    width: 200px;
    text-align: center !important;
}

/* Table Body */
.table-row[b-8erh25c6aq] {
    border-bottom: 1px solid var(--gray-200);
    transition: all 0.2s ease;
}

.table-row:hover[b-8erh25c6aq] {
    background: var(--gray-50);
}

.table-row:last-child[b-8erh25c6aq] {
    border-bottom: none;
}

.table-row td[b-8erh25c6aq] {
    padding: 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--gray-200);
}

/* STT Number */
.stt-number[b-8erh25c6aq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--gray-100);
    color: var(--gray-600);
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Badge ID */
.badge-id[b-8erh25c6aq] {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    background: var(--gray-100);
    color: var(--gray-700);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Title Name */
.title-name strong[b-8erh25c6aq] {
    color: var(--gray-800);
    font-weight: 600;
    font-size: 0.95rem;
}

/* Title Description */
.title-description[b-8erh25c6aq] {
    color: var(--gray-600);
    font-size: 0.9rem;
    line-height: 1.5;
    max-width: 400px;
}

/* Date Text */
.date-text[b-8erh25c6aq] {
    color: var(--gray-600);
    font-size: 0.9rem;
}

/* Action Buttons */
.action-buttons[b-8erh25c6aq] {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    align-items: center;
}

.action-btn-table[b-8erh25c6aq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 36px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    text-decoration: none;
}

.action-btn-table.view[b-8erh25c6aq] {
    background: linear-gradient(135deg, rgba(33, 76, 166, 0.1) 0%, rgba(33, 76, 166, 0.15) 100%);
    color: var(--acv-primary);
    border: 1px solid rgba(33, 76, 166, 0.2);
}

.action-btn-table.view:hover[b-8erh25c6aq] {
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(33, 76, 166, 0.3);
}

.action-btn-table.edit[b-8erh25c6aq] {
    background: linear-gradient(135deg, var(--warning-lighter) 0%, rgba(255, 171, 0, 0.1) 100%);
    color: var(--warning-dark);
    border: 1px solid var(--warning-light);
}

.action-btn-table.edit:hover[b-8erh25c6aq] {
    background: linear-gradient(135deg, var(--warning-main) 0%, var(--warning-dark) 100%);
    color: var(--acv-white);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(255, 171, 0, 0.3);
}

.action-btn-table.delete[b-8erh25c6aq] {
    background: linear-gradient(135deg, var(--error-lighter) 0%, rgba(255, 86, 48, 0.1) 100%);
    color: var(--error-dark);
    border: 1px solid var(--error-light);
}

.action-btn-table.delete:hover[b-8erh25c6aq] {
    background: linear-gradient(135deg, var(--error-main) 0%, var(--error-dark) 100%);
    color: var(--acv-white);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(255, 86, 48, 0.3);
}

/* Empty State */
.empty-state[b-8erh25c6aq] {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--gray-600);
}

.empty-state-icon[b-8erh25c6aq] {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--gray-400);
}

.empty-state-icon i.fa-spin[b-8erh25c6aq] {
    color: var(--acv-primary);
}

.empty-state h3[b-8erh25c6aq] {
    margin-bottom: 0.5rem;
    color: var(--gray-700);
    font-size: 1.25rem;
    font-weight: 600;
}

.empty-state p[b-8erh25c6aq] {
    margin-bottom: 2rem;
    color: var(--gray-600);
}

.empty-state-actions[b-8erh25c6aq] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-primary[b-8erh25c6aq] {
    background: var(--acv-primary);
    color: var(--acv-white);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(33, 76, 166, 0.2);
}

.btn-primary:hover[b-8erh25c6aq] {
    background: var(--acv-primary-700);
    color: var(--acv-white);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

/* Table Footer */
.table-footer[b-8erh25c6aq] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--acv-white);
    border-top: 1px solid var(--gray-200);
    border-radius: 0 0 16px 16px;
    gap: 2rem;
    flex-wrap: wrap;
}

.results-info[b-8erh25c6aq] {
    font-size: 0.9rem;
    color: var(--gray-600);
    font-weight: 500;
}

.pagination-container[b-8erh25c6aq] {
    display: flex;
    align-items: center;
}

.pagination-nav[b-8erh25c6aq] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagination-btn[b-8erh25c6aq] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: var(--acv-white);
    color: var(--gray-600);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s ease;
    cursor: pointer;
}

.pagination-btn:hover:not(:disabled)[b-8erh25c6aq] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border-color: var(--acv-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.15);
}

.pagination-btn.active[b-8erh25c6aq] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border-color: var(--acv-primary);
    font-weight: 600;
    font-size: 0.9rem;
    min-width: 40px;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
    cursor: default;
}

.pagination-btn.active:hover[b-8erh25c6aq] {
    background: var(--acv-primary);
    color: var(--acv-white);
    transform: none;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
}

.pagination-btn:disabled[b-8erh25c6aq] {
    background: var(--gray-100);
    border-color: var(--gray-200);
    color: var(--gray-400);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Responsive Design */
@media (max-width: 768px) {
    .title-page[b-8erh25c6aq] {
        padding: 1rem;
    }
    
    .search-main-row[b-8erh25c6aq] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .search-input-group[b-8erh25c6aq],
    .search-select-group[b-8erh25c6aq] {
        min-width: auto;
        flex: 1;
    }
    
    .list-header-content[b-8erh25c6aq] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    
    .sort-controls[b-8erh25c6aq] {
        justify-content: space-between;
    }
    
    .title-table-container[b-8erh25c6aq] {
        overflow-x: auto;
    }
    
    .title-table[b-8erh25c6aq] {
        min-width: 800px;
    }
    
    .table-footer[b-8erh25c6aq] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        text-align: center;
    }
    
    .pagination-nav[b-8erh25c6aq] {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .title-page[b-8erh25c6aq] {
        padding: 0.5rem 1rem;
    }
    
    .card-header-section[b-8erh25c6aq] {
        padding: 1.5rem;
    }
    
    .card-header-text h1[b-8erh25c6aq] {
        font-size: 1.5rem;
    }
    
    .list-header[b-8erh25c6aq] {
        padding: 1.25rem 1.5rem;
    }
    
    .list-title[b-8erh25c6aq] {
        font-size: 1.25rem;
    }
    
    .sort-controls[b-8erh25c6aq] {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .refresh-btn[b-8erh25c6aq],
    .add-title-btn[b-8erh25c6aq] {
        width: 100%;
        min-width: auto;
    }
    
    .table-header-row th[b-8erh25c6aq],
    .table-row td[b-8erh25c6aq] {
        padding: 0.75rem 0.5rem;
    }
    
    .action-buttons[b-8erh25c6aq] {
        gap: 0.125rem;
    }
    
    .action-btn-table[b-8erh25c6aq] {
        width: 36px;
        height: 32px;
        font-size: 0.8rem;
    }
}
/* _content/ltia.portal.web/Components/Pages/Admin/Title/TitleCreate.razor.rz.scp.css */
/* CSS Variables - Đặt trực tiếp vào .title-create-page */
.title-create-page[b-3dfn980acw] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    
    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Card Header */
.title-create-card-header[b-3dfn980acw] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.header-content[b-3dfn980acw] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-icon[b-3dfn980acw] {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-800) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
}

.header-text[b-3dfn980acw] {
    flex: 1;
}

.header-title[b-3dfn980acw] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 0.5rem 0;
}

.header-subtitle[b-3dfn980acw] {
    font-size: 1rem;
    color: var(--gray-600);
    margin: 0;
}

/* Main Content Container */
.main-content-container[b-3dfn980acw] {
    display: flex;
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.form-column[b-3dfn980acw] {
    flex: 1;
    background: var(--acv-white);
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Form Sections */
.form-section[b-3dfn980acw] {
    margin-bottom: 32px;
}

.section-header[b-3dfn980acw] {
    margin-bottom: 20px;
}

.section-title[b-3dfn980acw] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
}

.section-title i[b-3dfn980acw] {
    color: var(--acv-primary);
    font-size: 16px;
}

.form-grid[b-3dfn980acw] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

/* Form Styling */
.form-group[b-3dfn980acw] {
    margin-bottom: 24px;
}

.form-group.full-width[b-3dfn980acw] {
    width: 100%;
}

.form-label[b-3dfn980acw] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 8px;
    font-size: 14px;
}

.form-label i[b-3dfn980acw] {
    color: var(--acv-primary);
    width: 16px;
}

.required[b-3dfn980acw] {
    color: var(--error-main);
}

/* Form Input */
.form-input[b-3dfn980acw] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s ease;
    background: var(--acv-white);
    box-sizing: border-box;
    font-family: inherit;
    resize: vertical;
}

.form-input:focus[b-3dfn980acw] {
    outline: none;
    border-color: var(--acv-primary);
    border-width: 1px;
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.form-input:disabled[b-3dfn980acw] {
    background: var(--gray-100);
    color: var(--gray-500);
    cursor: not-allowed;
}

.form-input[b-3dfn980acw]::placeholder {
    color: var(--gray-400);
}

textarea.form-input[b-3dfn980acw] {
    min-height: 80px;
    line-height: 1.5;
}

/* Form Actions */
.form-actions[b-3dfn980acw] {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--gray-200);
}

.btn-primary[b-3dfn980acw], .btn-secondary[b-3dfn980acw] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid;
    text-decoration: none;
    min-width: 140px;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-primary[b-3dfn980acw] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border-color: var(--acv-primary);
}

.btn-primary:hover:not(:disabled)[b-3dfn980acw] {
    background: var(--acv-primary-800);
    border-color: var(--acv-primary-800);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(33, 76, 166, 0.3);
}

.btn-primary:disabled[b-3dfn980acw] {
    background: var(--gray-400);
    border-color: var(--gray-400);
    cursor: not-allowed;
    transform: none;
    opacity: 0.6;
}

.btn-secondary[b-3dfn980acw] {
    background: var(--acv-white);
    color: var(--gray-800);
    border-color: var(--gray-300);
}

.btn-secondary:hover:not(:disabled)[b-3dfn980acw] {
    background: var(--gray-50);
    border-color: var(--gray-400);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-secondary:disabled[b-3dfn980acw] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Responsive */
@media (max-width: 768px) {
    .title-create-page[b-3dfn980acw] {
        padding: 1rem;
    }
    
    .title-create-card-header[b-3dfn980acw] {
        padding: 1.5rem;
    }
    
    .form-column[b-3dfn980acw] {
        padding: 24px;
    }
    
    .form-actions[b-3dfn980acw] {
        flex-direction: column;
    }
    
    .btn-primary[b-3dfn980acw], .btn-secondary[b-3dfn980acw] {
        justify-content: center;
        width: 100%;
    }
    
    .header-content[b-3dfn980acw] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .header-icon[b-3dfn980acw] {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }
    
    .header-title[b-3dfn980acw] {
        font-size: 1.5rem;
    }
    
    .header-subtitle[b-3dfn980acw] {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .title-create-page[b-3dfn980acw] {
        padding: 0.5rem;
    }
    
    .title-create-card-header[b-3dfn980acw] {
        padding: 1rem;
    }
    
    .form-column[b-3dfn980acw] {
        padding: 1.5rem;
    }
}
/* _content/ltia.portal.web/Components/Pages/Admin/Title/TitleDetail.razor.rz.scp.css */
/* Title Detail Page - Based on Role Details Design */
.title-detail-page[b-inrix5qp6u] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Loading & Not Found States */
.loading-container[b-inrix5qp6u],
.not-found-container[b-inrix5qp6u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
}

.loading-spinner i[b-inrix5qp6u] {
    font-size: 3rem;
    color: var(--acv-primary);
    animation: spin-b-inrix5qp6u 1s linear infinite;
}

@keyframes spin-b-inrix5qp6u {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.not-found-icon i[b-inrix5qp6u] {
    font-size: 4rem;
    color: var(--gray-400);
    margin-bottom: 1rem;
}

.not-found-container h3[b-inrix5qp6u] {
    color: var(--gray-800);
    margin-bottom: 0.5rem;
}

.not-found-container p[b-inrix5qp6u] {
    color: var(--gray-600);
    margin-bottom: 1.5rem;
}

.not-found-container .btn-secondary[b-inrix5qp6u] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--acv-white);
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    cursor: pointer;
}

.not-found-container .btn-secondary:hover[b-inrix5qp6u] {
    background: var(--gray-50);
    border-color: var(--gray-400);
    transform: translateY(-1px);
    color: var(--gray-800);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Card Header Section */
.card-header-section[b-inrix5qp6u] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.card-header-content[b-inrix5qp6u] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.card-header-icon[b-inrix5qp6u] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.card-header-text h1[b-inrix5qp6u] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
}

.card-header-text p[b-inrix5qp6u] {
    font-size: 0.95rem;
    color: var(--gray-600);
    margin: 0.25rem 0 0 0;
}

/* Main Content Container */
.title-details-container[b-inrix5qp6u] {
    max-width: 100%;
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Card Styles */
.detail-card[b-inrix5qp6u] {
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--gray-200);
    overflow: hidden;
}

.card-header[b-inrix5qp6u] {
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--acv-white) 100%);
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-title[b-inrix5qp6u] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-title i[b-inrix5qp6u] {
    color: var(--acv-primary);
    font-size: 0.875rem;
}

.card-content[b-inrix5qp6u] {
    padding: 1.25rem;
}

/* Details Grid */
.details-grid[b-inrix5qp6u] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    row-gap: 1rem;
}

.detail-item[b-inrix5qp6u] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.detail-item.full-width[b-inrix5qp6u] {
    grid-column: 1 / -1;
}

.detail-label[b-inrix5qp6u] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gray-600);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.detail-label i[b-inrix5qp6u] {
    color: var(--acv-primary);
    font-size: 0.6875rem;
}

.detail-value[b-inrix5qp6u] {
    font-size: 0.9375rem;
    color: var(--gray-900);
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.detail-value strong[b-inrix5qp6u] {
    font-weight: 600;
    color: var(--gray-900);
}

/* Empty Value */
.empty-value[b-inrix5qp6u] {
    color: var(--gray-500);
    font-style: italic;
    font-size: 0.9375rem;
}

/* Form Actions */
.form-actions[b-inrix5qp6u] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-200);
    flex-wrap: wrap;
}

.btn-primary[b-inrix5qp6u],
.btn-secondary[b-inrix5qp6u],
.btn-danger[b-inrix5qp6u] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    border: none;
    min-width: 160px;
    justify-content: center;
}

.btn-primary[b-inrix5qp6u] {
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: var(--acv-white);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.15);
}

.btn-primary:hover[b-inrix5qp6u] {
    background: linear-gradient(135deg, var(--acv-primary-700) 0%, var(--acv-primary-800) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.25);
    text-decoration: none;
    color: var(--acv-white);
}

.btn-secondary[b-inrix5qp6u] {
    background: var(--acv-white);
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.btn-secondary:hover[b-inrix5qp6u] {
    background: var(--gray-50);
    border-color: var(--gray-400);
    transform: translateY(-1px);
    color: var(--gray-800);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-danger[b-inrix5qp6u] {
    background: linear-gradient(135deg, #ff5630 0%, #ff8a65 100%);
    color: var(--acv-white);
    box-shadow: 0 2px 8px rgba(255, 86, 48, 0.25);
}

.btn-danger:hover[b-inrix5qp6u] {
    background: linear-gradient(135deg, #e53e3e 0%, #ff6b47 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 86, 48, 0.35);
}

/* Responsive */
@media (max-width: 768px) {
    .title-detail-page[b-inrix5qp6u] {
        padding: 0.5rem 1rem;
    }

    .card-header-text h1[b-inrix5qp6u] {
        font-size: 1.5rem;
    }
    
    .card-header[b-inrix5qp6u] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .details-grid[b-inrix5qp6u] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .detail-item[b-inrix5qp6u] {
        gap: 0.25rem;
    }

    .form-actions[b-inrix5qp6u] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .btn-primary[b-inrix5qp6u],
    .btn-secondary[b-inrix5qp6u],
    .btn-danger[b-inrix5qp6u] {
        min-width: 100%;
    }
}

@media (max-width: 600px) {
    .card-header-content[b-inrix5qp6u] {
        flex-direction: column;
        text-align: center;
    }
}
/* _content/ltia.portal.web/Components/Pages/Admin/Title/TitleEdit.razor.rz.scp.css */
/* CSS Variables - Đặt trực tiếp vào .title-edit-page */
.title-edit-page[b-m5uqcmm5uj] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    
    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Card Header */
.title-edit-card-header[b-m5uqcmm5uj] {
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--acv-white) 100%);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.header-content[b-m5uqcmm5uj] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem 2.5rem;
}

.header-icon[b-m5uqcmm5uj] {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.25);
    flex-shrink: 0;
}

.header-icon i[b-m5uqcmm5uj] {
    color: var(--acv-white);
    font-size: 1.75rem;
}

.header-text[b-m5uqcmm5uj] {
    flex: 1;
}

.header-title[b-m5uqcmm5uj] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
}

.header-subtitle[b-m5uqcmm5uj] {
    font-size: 1rem;
    color: var(--gray-600);
    margin: 0;
    line-height: 1.5;
}

/* Loading & Not Found States */
.loading-container[b-m5uqcmm5uj],
.not-found-container[b-m5uqcmm5uj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    margin-bottom: 2rem;
    padding: 2rem;
}

.loading-spinner[b-m5uqcmm5uj] {
    margin-bottom: 1rem;
}

.loading-spinner i[b-m5uqcmm5uj] {
    font-size: 3rem;
    color: var(--acv-primary);
    animation: spin-b-m5uqcmm5uj 1s linear infinite;
}

@keyframes spin-b-m5uqcmm5uj {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-m5uqcmm5uj] {
    color: var(--gray-600);
    margin: 0;
}

.not-found-icon[b-m5uqcmm5uj] {
    margin-bottom: 1rem;
}

.not-found-icon i[b-m5uqcmm5uj] {
    font-size: 4rem;
    color: var(--gray-400);
}

.not-found-container h3[b-m5uqcmm5uj] {
    color: var(--gray-800);
    margin-bottom: 0.5rem;
}

.not-found-container p[b-m5uqcmm5uj] {
    color: var(--gray-600);
    margin-bottom: 1.5rem;
}

/* Main Content Container */
.main-content-container[b-m5uqcmm5uj] {
    display: flex;
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
    overflow: visible;
}

/* Form Column */
.form-column[b-m5uqcmm5uj] {
    flex: 1;
    background: var(--acv-white);
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: visible;
}

.create-form[b-m5uqcmm5uj] {
    max-width: 100%;
}

/* Form Sections */
.form-section[b-m5uqcmm5uj] {
    margin-bottom: 32px;
}

.section-header[b-m5uqcmm5uj] {
    margin-bottom: 20px;
}

.section-title[b-m5uqcmm5uj] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
}

.section-title i[b-m5uqcmm5uj] {
    color: var(--acv-primary);
    font-size: 16px;
}

.form-grid[b-m5uqcmm5uj] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

/* Form Groups */
.form-group[b-m5uqcmm5uj] {
    margin-bottom: 24px;
}

.form-group.full-width[b-m5uqcmm5uj] {
    width: 100%;
}

.form-label[b-m5uqcmm5uj] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 8px;
    font-size: 14px;
}

.form-label i[b-m5uqcmm5uj] {
    color: var(--acv-primary);
    width: 16px;
}

.required[b-m5uqcmm5uj] {
    color: var(--error-main);
}

/* Form Inputs */
.form-input[b-m5uqcmm5uj] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 14px;
    background: var(--acv-white);
    transition: all 0.2s ease;
    font-family: inherit;
    box-sizing: border-box;
    resize: vertical;
}

.form-input:focus[b-m5uqcmm5uj] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.form-input:disabled[b-m5uqcmm5uj] {
    background: var(--gray-100);
    color: var(--gray-500);
    cursor: not-allowed;
}

.form-input[b-m5uqcmm5uj]::placeholder {
    color: var(--gray-400);
}

textarea.form-input[b-m5uqcmm5uj] {
    min-height: 80px;
    line-height: 1.5;
}

/* Form Actions */
.form-actions[b-m5uqcmm5uj] {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--gray-200);
}

.btn-primary[b-m5uqcmm5uj], .btn-secondary[b-m5uqcmm5uj] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid;
    text-decoration: none;
    min-width: 140px;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-primary[b-m5uqcmm5uj] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border-color: var(--acv-primary);
}

.btn-primary:hover:not(:disabled)[b-m5uqcmm5uj] {
    background: var(--acv-primary-800);
    border-color: var(--acv-primary-800);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(33, 76, 166, 0.3);
}

.btn-primary:disabled[b-m5uqcmm5uj] {
    background: var(--gray-400);
    border-color: var(--gray-400);
    cursor: not-allowed;
    transform: none;
    opacity: 0.6;
}

.btn-secondary[b-m5uqcmm5uj] {
    background: var(--acv-white);
    color: var(--gray-800);
    border-color: var(--gray-300);
}

.btn-secondary:hover:not(:disabled)[b-m5uqcmm5uj] {
    background: var(--gray-50);
    border-color: var(--gray-400);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-secondary:disabled[b-m5uqcmm5uj] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Responsive Design */
@media (max-width: 768px) {
    .title-edit-page[b-m5uqcmm5uj] {
        padding: 0.5rem 1rem;
    }

    .header-content[b-m5uqcmm5uj] {
        flex-direction: column;
        gap: 1rem;
        padding: 1.5rem;
    }

    .header-icon[b-m5uqcmm5uj] {
        width: 48px;
        height: 48px;
    }

    .header-icon i[b-m5uqcmm5uj] {
        font-size: 1.5rem;
    }

    .header-title[b-m5uqcmm5uj] {
        font-size: 1.5rem;
    }

    .header-subtitle[b-m5uqcmm5uj] {
        font-size: 0.9rem;
    }

    .form-column[b-m5uqcmm5uj] {
        padding: 1.5rem;
    }

    .form-actions[b-m5uqcmm5uj] {
        flex-direction: column;
        gap: 0.75rem;
        margin-top: 24px;
        padding-top: 20px;
    }

    .form-actions .btn-secondary[b-m5uqcmm5uj],
    .form-actions .btn-primary[b-m5uqcmm5uj] {
        min-width: 100%;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .title-edit-page[b-m5uqcmm5uj] {
        padding: 0.5rem;
    }

    .header-content[b-m5uqcmm5uj] {
        padding: 1rem;
    }

    .form-column[b-m5uqcmm5uj] {
        padding: 1rem;
    }

    .header-title[b-m5uqcmm5uj] {
        font-size: 1.25rem;
    }

    .form-group[b-m5uqcmm5uj] {
        margin-bottom: 1rem;
    }
}
/* _content/ltia.portal.web/Components/Pages/Auth/Login.razor.rz.scp.css */
/* ===========================================
   ROOT VARIABLES
   =========================================== */
:root[b-ikwxibn92g] {
    --font-family-sans: "Roboto", "Segoe UI", Arial, sans-serif;
    --acv-primary: #214CA6;
    --acv-primary-dark: #183B86;
    --acv-primary-700: #183B86;
    --acv-primary-300: #5A7FD6;
    --acv-white: #FFFFFF;
    --acv-black: #000000;
    --gray-100: #F9FAFB;
    --gray-200: #F4F6F8;
    --gray-300: #DFE3E8;
    --gray-400: #C4CDD5;
    --gray-500: #919EAB;
    --gray-600: #637381;
    --gray-700: #454F5B;
    --gray-800: #212B36;
    --gray-900: #161C24;
    --info-lighter: #CAFDF5;
    --info-light: #61F3F3;
    --info-main: #00B8D9;
    --info-dark: #006C9C;
    --info-darker: #003768;
    --success-lighter: #D3FCD2;
    --success-light: #77ED8B;
    --success-main: #22C55E;
    --success-dark: #118D57;
    --success-darker: #065E49;
    --warning-lighter: #FFF5CC;
    --warning-light: #FFD666;
    --warning-main: #FFAB00;
    --warning-dark: #B76E00;
    --warning-darker: #7A4100;
    --error-lighter: #FFE9D5;
    --error-light: #FFAC82;
    --error-main: #FF5630;
    --error-dark: #B71D18;
    --error-darker: #7A0916;
    --sidebar-color: #1f2d3d;
    --sidebar-hover-bg: rgba(12, 90, 219, 0.1);
    --sidebar-active-color: var(--acv-primary);
    --h-header: 48px;
    --w-sidebar: 280px;
    --z-header: 1000;
    --z-sidebar: 1001;
    /* Input Colors */
    --input-bg: var(--acv-white);
    --input-border: var(--gray-300);
    --input-border-focus: var(--acv-primary);
    --input-text: var(--gray-700);
    --input-placeholder: var(--gray-500);
    --input-error: var(--error-main);
    --input-success: var(--success-main);
    --input-disabled-bg: var(--gray-100);
    --input-disabled-text: var(--gray-400);
    --input-padding-sm: 0.5rem 0.75rem;
    --input-padding-md: 0.75rem 1rem;
    --input-padding-lg: 1rem 1.25rem;
    --input-radius: 0.5rem;
    --input-radius-sm: 0.375rem;
    --input-radius-lg: 0.75rem;
    --input-transition: all 0.2s ease-in-out;
    /* Button Colors */
    --btn-bg: var(--acv-white);
    --btn-border: var(--gray-300);
    --btn-text: var(--gray-700);
    --btn-hover-bg: var(--gray-100);
    --btn-hover-border: var(--gray-400);
    --btn-hover-text: var(--gray-800);
    --btn-error: var(--error-main);
    --btn-success: var(--success-main);
    --btn-warning: var(--warning-main);
    --btn-info: var(--info-main);
    --btn-disabled-bg: var(--gray-100);
    --btn-disabled-text: var(--gray-400);
    --btn-primary-bg: var(--acv-primary);
    --btn-primary-hover: var(--acv-primary-700);
    --btn-primary-active: #0F2A5C;
    --btn-primary-border: var(--acv-primary);
    --btn-padding-sm: 0.5rem 0.75rem;
    --btn-padding-md: 0.75rem 1rem;
    --btn-padding-lg: 1rem 1.25rem;
    --btn-radius: 0.5rem;
    --btn-radius-sm: 0.375rem;
    --btn-radius-lg: 0.75rem;
    --btn-transition: all 0.2s ease-in-out;
    --btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --btn-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.15);
    --btn-shadow-active: 0 1px 2px rgba(0, 0, 0, 0.1);
    --btn-form-padding: 0.75rem 1.5rem;
    --btn-form-radius: 12px;
    --btn-form-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
    --btn-form-shadow-hover: 0 6px 20px rgba(33, 76, 166, 0.4);
    --btn-form-shadow-active: 0 2px 8px rgba(33, 76, 166, 0.3);
}

.login-wrapper[b-ikwxibn92g] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-family: var(--font-family-sans);
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    z-index: 1;
    overflow: hidden;
}

/* Background với animation parallax */
.login-wrapper[b-ikwxibn92g]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(224, 231, 255, 0.5) 0%, rgba(248, 250, 252, 0.5) 100%), url('/assets/img/LTIA-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
    animation: backgroundParallax-b-ikwxibn92g 30s ease-in-out infinite;
    -webkit-animation: backgroundParallax 30s ease-in-out infinite;
}

@keyframes backgroundParallax-b-ikwxibn92g {
    0%, 100% {
        transform: scale(1) translate(0, 0);
    }
    50% {
        transform: scale(1.05) translate(-2%, -1%);
    }
}

@-webkit-keyframes backgroundParallax {
    0%, 100% {
        -webkit-transform: scale(1) translate(0, 0);
        transform: scale(1) translate(0, 0);
    }
    50% {
        -webkit-transform: scale(1.05) translate(-2%, -1%);
        transform: scale(1.05) translate(-2%, -1%);
    }
}

/* ===========================================
   AUTH CARD
   =========================================== */
.auth-card[b-ikwxibn92g] {
    background: rgba(255, 255, 255, 0.95);
    padding: 1.5rem;
    border-radius: 1.25rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    width: 100%;
    max-width: 450px;
    backdrop-filter: blur(6px);
    transform: translateY(30px);
    opacity: 0;
    animation: fadeSlideUp-b-ikwxibn92g 0.8s ease-out forwards;
    transition: all 0.3s ease;
}

    .auth-card:hover[b-ikwxibn92g] {
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
        transform: translateY(-3px);
    }

@keyframes fadeSlideUp-b-ikwxibn92g {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.98);
    }

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

/* ===========================================
   INPUT COMPONENT - Scoped to login-wrapper
   =========================================== */
.login-wrapper .input[b-ikwxibn92g],
.login-wrapper input.input[b-ikwxibn92g],
.login-wrapper input[type="text"][b-ikwxibn92g],
.login-wrapper input[type="password"][b-ikwxibn92g] {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background-color: #FFFFFF !important;
    border: 1px solid var(--input-border) !important;
    border-radius: var(--input-radius) !important;
    font-family: var(--font-family-sans) !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: var(--input-text) !important;
    padding: var(--input-padding-md) !important;
    transition: var(--input-transition) !important;
    outline: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

    .login-wrapper .input[b-ikwxibn92g]::placeholder,
    .login-wrapper input[b-ikwxibn92g]::placeholder {
        color: var(--input-placeholder) !important;
        opacity: 1 !important;
    }

    .login-wrapper .input:focus[b-ikwxibn92g],
    .login-wrapper input:focus[b-ikwxibn92g] {
        border-color: var(--input-border-focus) !important;
        box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1) !important;
        background-color: #FFFFFF !important;
        outline: none !important;
    }

.login-wrapper .input-container[b-ikwxibn92g] {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.login-wrapper .input-icon[b-ikwxibn92g] {
    position: absolute !important;
    left: 0.75rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #214ca6 !important;
    font-size: 1rem !important;
    transition: var(--input-transition) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

.login-wrapper .input-with-icon[b-ikwxibn92g] {
    padding-left: 2.5rem !important;
}

.login-wrapper .input-container:focus-within .input-icon[b-ikwxibn92g] {
    color: #214ca6 !important;
    transform: translateY(-50%) scale(1.05) !important;
}

.login-wrapper .input:hover[b-ikwxibn92g],
.login-wrapper .input-container:hover .input[b-ikwxibn92g] {
    border-color: var(--acv-primary) !important;
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1) !important;
    background-color: #FFFFFF !important;
}

.login-wrapper .input-container:hover .input-icon[b-ikwxibn92g],
.login-wrapper .input-container:focus-within .input-icon[b-ikwxibn92g],
.login-wrapper .input-container.focused .input-icon[b-ikwxibn92g] {
    color: #214ca6 !important;
    transform: translateY(-50%) scale(1.05) !important;
}

.login-wrapper .password-toggle[b-ikwxibn92g] {
    position: absolute !important;
    right: 0.5rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: none !important;
    border: none !important;
    color: #214ca6 !important;
    font-size: 0.875rem !important;
    cursor: pointer !important;
    padding: 0.25rem !important;
    border-radius: 0.25rem !important;
    transition: var(--input-transition) !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1.75rem !important;
    height: 1.75rem !important;
}

    .login-wrapper .password-toggle:hover[b-ikwxibn92g] {
        color: #214ca6 !important;
        transform: translateY(-50%) scale(1.05) !important;
    }

    .login-wrapper .password-toggle:focus[b-ikwxibn92g] {
        outline: 2px solid #214ca6 !important;
        outline-offset: 1px !important;
        color: #214ca6 !important;
    }

.login-wrapper .input-container:hover .password-toggle[b-ikwxibn92g] {
    color: #214ca6 !important;
    transform: translateY(-50%) scale(1.05) !important;
}

.login-wrapper .input:focus ~ .password-toggle[b-ikwxibn92g] {
    color: #214ca6 !important;
    transform: translateY(-50%) scale(1.05) !important;
}

.login-wrapper .input-with-toggle[b-ikwxibn92g] {
    padding-right: 2.5rem !important;
}

/* ===========================================
   BUTTON COMPONENT
   =========================================== */
.btn[b-ikwxibn92g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-sizing: border-box;
    background-color: var(--btn-bg);
    border: 1px solid var(--btn-border);
    border-radius: var(--btn-radius);
    font-family: var(--font-family-sans);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--btn-text);
    padding: var(--btn-padding-md);
    transition: var(--btn-transition);
    outline: none;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: var(--btn-shadow);
}

    .btn:focus[b-ikwxibn92g] {
        outline: 2px solid var(--acv-primary);
        outline-offset: 2px;
        box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
    }

    .btn:hover[b-ikwxibn92g] {
        background-color: var(--btn-hover-bg);
        border-color: var(--btn-hover-border);
        color: var(--btn-hover-text);
        text-decoration: none;
        box-shadow: var(--btn-shadow-hover);
        transform: translateY(-1px);
    }

    .btn:active[b-ikwxibn92g] {
        transform: translateY(0);
        box-shadow: var(--btn-shadow-active);
    }

    .btn:disabled[b-ikwxibn92g] {
        background-color: var(--btn-disabled-bg);
        color: var(--btn-disabled-text);
        border-color: var(--gray-300);
        cursor: not-allowed;
        opacity: 0.6;
        pointer-events: none;
        transform: none;
        box-shadow: none;
    }

.btn-primary[b-ikwxibn92g] {
    background: var(--btn-primary-bg) !important;
    color: var(--acv-white) !important;
    border: none !important;
    padding: var(--btn-form-padding) !important;
    border-radius: var(--btn-form-radius) !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    cursor: pointer;
    transition: var(--btn-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    position: relative;
    z-index: 1;
    box-shadow: var(--btn-form-shadow) !important;
}

    .btn-primary:hover[b-ikwxibn92g] {
        background: var(--btn-primary-hover) !important;
        color: var(--acv-white) !important;
        text-decoration: none;
        transform: translateY(-1px);
        box-shadow: var(--btn-form-shadow-hover) !important;
    }

    .btn-primary:active[b-ikwxibn92g] {
        background: var(--btn-primary-active) !important;
        transform: translateY(0);
        box-shadow: var(--btn-form-shadow-active) !important;
    }

    .btn-primary:focus[b-ikwxibn92g] {
        outline: 2px solid var(--btn-primary-border) !important;
        outline-offset: 2px;
        box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.2) !important;
    }

.btn-lg[b-ikwxibn92g] {
    padding: var(--btn-padding-lg);
    font-size: 1rem;
    border-radius: var(--btn-radius-lg);
    min-height: 3rem;
    font-weight: 600;
}

.btn-block[b-ikwxibn92g] {
    width: 100%;
    display: flex;
}

.login-wrapper .auth-card .btn-primary[b-ikwxibn92g],
.login-wrapper .auth-card button.btn-primary[b-ikwxibn92g] {
    background: #214ca6 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 12px !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    position: relative !important;
    z-index: 20 !important;
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3) !important;
    min-height: 3rem !important;
}

    .login-wrapper .auth-card .btn-primary:hover[b-ikwxibn92g],
    .login-wrapper .auth-card button.btn-primary:hover[b-ikwxibn92g] {
        background: #1e40af !important;
        color: #ffffff !important;
        text-decoration: none !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 6px 20px rgba(33, 76, 166, 0.4) !important;
    }

    .login-wrapper .auth-card .btn-primary:active[b-ikwxibn92g],
    .login-wrapper .auth-card button.btn-primary:active[b-ikwxibn92g] {
        background: #1e3a8a !important;
        transform: translateY(0) !important;
        box-shadow: 0 2px 8px rgba(33, 76, 166, 0.3) !important;
    }

    .login-wrapper .auth-card .btn-primary:focus[b-ikwxibn92g],
    .login-wrapper .auth-card button.btn-primary:focus[b-ikwxibn92g] {
        outline: 2px solid #214ca6 !important;
        outline-offset: 2px !important;
        box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.2) !important;
    }

/* ===========================================
   FORM ELEMENTS
   =========================================== */
.login-wrapper .auth-card .input-container[b-ikwxibn92g] {
    margin-bottom: 0.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
}

    .login-wrapper .auth-card .input-container .input[b-ikwxibn92g],
    .login-wrapper .auth-card .input-container input[type="text"][b-ikwxibn92g],
    .login-wrapper .auth-card .input-container input[type="password"][b-ikwxibn92g] {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 0.95rem !important;
        padding: 0.875rem 1rem 0.875rem 2.5rem !important;
        background-color: #FFFFFF !important;
        border: 1px solid var(--input-border) !important;
        border-radius: var(--input-radius) !important;
        color: var(--input-text) !important;
        outline: none !important;
        box-sizing: border-box !important;
    }

        .login-wrapper .auth-card .input-container .input:focus[b-ikwxibn92g],
        .login-wrapper .auth-card .input-container input:focus[b-ikwxibn92g] {
            border-color: var(--input-border-focus) !important;
            box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1) !important;
            background-color: #FFFFFF !important;
            outline: none !important;
        }

        .login-wrapper .auth-card .input-container .input:hover[b-ikwxibn92g],
        .login-wrapper .auth-card .input-container input:hover[b-ikwxibn92g] {
            border-color: var(--acv-primary) !important;
            background-color: #FFFFFF !important;
        }

    .login-wrapper .auth-card .input-container .input-icon[b-ikwxibn92g] {
        font-size: 1rem !important;
        left: 0.875rem !important;
    }

.form-group[b-ikwxibn92g] {
    margin-bottom: 1rem;
}

.form-label[b-ikwxibn92g] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #214ca6;
    margin-bottom: 0.5rem;
    display: block;
}

.erp-title[b-ikwxibn92g] {
    font-family: var(--font-family-sans);
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
    color: #214ca6;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.text-danger[b-ikwxibn92g] {
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: block;
    color: var(--input-error);
}

.validation-summary[b-ikwxibn92g] {
    background: var(--error-lighter);
    border: 1px solid var(--error-light);
    border-radius: var(--input-radius);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    color: var(--error-dark);
    font-size: 0.875rem;
}

.text-center[b-ikwxibn92g] {
    text-align: center;
}

.mb-3[b-ikwxibn92g] {
    margin-bottom: 1rem;
}

.mb-4[b-ikwxibn92g] {
    margin-bottom: 1.5rem;
}

.mt-3[b-ikwxibn92g] {
    margin-top: 1rem;
}

/* ===========================================
   FORGOT PASSWORD TEXT
   =========================================== */
.forgot-password-text[b-ikwxibn92g] {
    font-size: 0.75rem;
    color: var(--gray-400);
    margin: 0;
    padding: 0.75rem 1rem;
    line-height: 1.6;
    font-weight: 400;
    letter-spacing: 0.01em;
    opacity: 0.9;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--gray-100);
    border-radius: 0.5rem;
    max-width: 100%;
    font-style: italic;
}

    .forgot-password-text i[b-ikwxibn92g] {
        font-size: 0.813rem;
        color: var(--gray-500);
        flex-shrink: 0;
    }

    .forgot-password-text span[b-ikwxibn92g] {
        display: inline-block;
    }

/* ===========================================
   LINKS
   =========================================== */
a[b-ikwxibn92g] {
    color: var(--acv-primary);
    text-decoration: none;
    transition: var(--btn-transition);
}

    a:hover[b-ikwxibn92g] {
        color: var(--acv-primary-700);
        text-decoration: underline;
    }

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 768px) {
    .auth-card[b-ikwxibn92g] {
        padding: 1.25rem;
        max-width: 400px;
    }

    .input[b-ikwxibn92g] {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .auth-card[b-ikwxibn92g] {
        padding: 1rem;
        max-width: 100%;
    }

    .input[b-ikwxibn92g] {
        font-size: 16px;
    }
}

/* ===========================================
   ACCESSIBILITY
   =========================================== */
@media (prefers-reduced-motion: reduce) {
    .login-wrapper[b-ikwxibn92g]::before {
        animation: none !important;
        -webkit-animation: none !important;
        transform: scale(1) translate(0, 0) !important;
    }
    
    .auth-card[b-ikwxibn92g] {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
    
    .input[b-ikwxibn92g],
    .input-icon[b-ikwxibn92g],
    .btn[b-ikwxibn92g],
    .password-toggle[b-ikwxibn92g] {
        animation: none !important;
        transition: none !important;
    }
}

@media (prefers-contrast: high) {
    .input[b-ikwxibn92g] {
        border-width: 2px;
    }

        .input:focus[b-ikwxibn92g] {
            border-width: 3px;
        }
}
/* _content/ltia.portal.web/Components/Pages/NotFound.razor.rz.scp.css */
.not-found-container[b-1g3px0w1k8] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 20px;
}

.not-found-content[b-1g3px0w1k8] {
    text-align: center;
    max-width: 500px;
    background: white;
    padding: 48px 32px;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid #e5e7eb;
}

.error-icon[b-1g3px0w1k8] {
    margin-bottom: 24px;
    animation: float-b-1g3px0w1k8 3s ease-in-out infinite;
}

.error-icon i[b-1g3px0w1k8] {
    font-size: 5rem;
    color: #ffc107;
    display: inline-block;
}

@keyframes float-b-1g3px0w1k8 {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

.error-code[b-1g3px0w1k8] {
    font-size: 6rem;
    font-weight: 700;
    color: #ffc107;
    margin: 0 0 16px 0;
    line-height: 1;
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.error-title[b-1g3px0w1k8] {
    font-size: 1.75rem;
    font-weight: 600;
    color: #212529;
    margin: 0 0 16px 0;
}

.error-description[b-1g3px0w1k8] {
    font-size: 1rem;
    color: #6c757d;
    margin: 0 0 32px 0;
    line-height: 1.6;
}

.action-buttons[b-1g3px0w1k8] {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 32px;
}

.btn[b-1g3px0w1k8] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 500;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn:hover[b-1g3px0w1k8] {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn:active[b-1g3px0w1k8] {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn i[b-1g3px0w1k8] {
    font-size: 1.1rem;
}

.btn-primary[b-1g3px0w1k8] {
    background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
    color: white;
}

.btn-primary:hover[b-1g3px0w1k8] {
    background: linear-gradient(135deg, #0b5ed7 0%, #0a58ca 100%);
}

.btn-secondary[b-1g3px0w1k8] {
    background-color: white;
    color: #6c757d;
    border: 1px solid #dee2e6;
}

.btn-secondary:hover[b-1g3px0w1k8] {
    background-color: #f8f9fa;
    color: #495057;
    border-color: #adb5bd;
}

.help-section[b-1g3px0w1k8] {
    padding-top: 24px;
    border-top: 1px solid #e9ecef;
}

.help-text[b-1g3px0w1k8] {
    font-size: 0.875rem;
    color: #6c757d;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.help-text i[b-1g3px0w1k8] {
    color: #0d6efd;
    font-size: 1rem;
}

@media (max-width: 576px) {
    .not-found-content[b-1g3px0w1k8] {
        padding: 32px 24px;
    }

    .error-code[b-1g3px0w1k8] {
        font-size: 4rem;
    }

    .error-title[b-1g3px0w1k8] {
        font-size: 1.5rem;
    }

    .error-description[b-1g3px0w1k8] {
        font-size: 0.9rem;
    }

    .action-buttons[b-1g3px0w1k8] {
        flex-direction: column;
        gap: 10px;
    }

    .btn[b-1g3px0w1k8] {
        width: 100%;
        justify-content: center;
    }

    .error-icon i[b-1g3px0w1k8] {
        font-size: 4rem;
    }
}
/* _content/ltia.portal.web/Components/Pages/NotFoundPage.razor.rz.scp.css */
.not-found-container[b-lvb8e7922c] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 20px;
}

.not-found-content[b-lvb8e7922c] {
    text-align: center;
    max-width: 500px;
    background: white;
    padding: 48px 32px;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid #e5e7eb;
}

.error-icon[b-lvb8e7922c] {
    margin-bottom: 24px;
    animation: float-b-lvb8e7922c 3s ease-in-out infinite;
}

.error-icon i[b-lvb8e7922c] {
    font-size: 5rem;
    color: #ffc107;
    display: inline-block;
}

@keyframes float-b-lvb8e7922c {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

.error-code[b-lvb8e7922c] {
    font-size: 6rem;
    font-weight: 700;
    color: #ffc107;
    margin: 0 0 16px 0;
    line-height: 1;
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.error-title[b-lvb8e7922c] {
    font-size: 1.75rem;
    font-weight: 600;
    color: #212529;
    margin: 0 0 16px 0;
}

.error-description[b-lvb8e7922c] {
    font-size: 1rem;
    color: #6c757d;
    margin: 0 0 32px 0;
    line-height: 1.6;
}

.action-buttons[b-lvb8e7922c] {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 32px;
}

.btn[b-lvb8e7922c] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 500;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn:hover[b-lvb8e7922c] {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn:active[b-lvb8e7922c] {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn i[b-lvb8e7922c] {
    font-size: 1.1rem;
}

.btn-primary[b-lvb8e7922c] {
    background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
    color: white;
}

.btn-primary:hover[b-lvb8e7922c] {
    background: linear-gradient(135deg, #0b5ed7 0%, #0a58ca 100%);
}

.btn-secondary[b-lvb8e7922c] {
    background-color: white;
    color: #6c757d;
    border: 1px solid #dee2e6;
}

.btn-secondary:hover[b-lvb8e7922c] {
    background-color: #f8f9fa;
    color: #495057;
    border-color: #adb5bd;
}

.help-section[b-lvb8e7922c] {
    padding-top: 24px;
    border-top: 1px solid #e9ecef;
}

.help-text[b-lvb8e7922c] {
    font-size: 0.875rem;
    color: #6c757d;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.help-text i[b-lvb8e7922c] {
    color: #0d6efd;
    font-size: 1rem;
}

@media (max-width: 576px) {
    .not-found-content[b-lvb8e7922c] {
        padding: 32px 24px;
    }

    .error-code[b-lvb8e7922c] {
        font-size: 4rem;
    }

    .error-title[b-lvb8e7922c] {
        font-size: 1.5rem;
    }

    .error-description[b-lvb8e7922c] {
        font-size: 0.9rem;
    }

    .action-buttons[b-lvb8e7922c] {
        flex-direction: column;
        gap: 10px;
    }

    .btn[b-lvb8e7922c] {
        width: 100%;
        justify-content: center;
    }

    .error-icon i[b-lvb8e7922c] {
        font-size: 4rem;
    }
}

/* _content/ltia.portal.web/Components/Pages/Notifications.razor.rz.scp.css */
.notifications-page[b-751o2qon5m] {
    min-height: 100vh;
    background-color: #f0f2f5;
    padding: 20px 0;
}

.notifications-container[b-751o2qon5m] {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 20px;
    padding: 0 20px;
}

/* Sidebar */
.notifications-sidebar[b-751o2qon5m] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    height: fit-content;
    position: sticky;
    top: 20px;
}

.sidebar-header[b-751o2qon5m] {
    padding: 20px;
    border-bottom: 1px solid #e4e6eb;
}

.sidebar-header h2[b-751o2qon5m] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #050505;
}

.sidebar-tabs[b-751o2qon5m] {
    padding: 8px;
}

.sidebar-tab[b-751o2qon5m] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #65676b;
    text-align: left;
}

.sidebar-tab:hover[b-751o2qon5m] {
    background-color: #f2f3f5;
}

.sidebar-tab.active[b-751o2qon5m] {
    background-color: #e7f3ff;
    color: #1877f2;
}

.sidebar-tab i[b-751o2qon5m] {
    font-size: 1.25rem;
}

.sidebar-tab.active i.bi-circle-fill[b-751o2qon5m] {
    font-size: 0.625rem;
}

/* Content Area */
.notifications-content[b-751o2qon5m] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    min-height: 400px;
}

.content-header[b-751o2qon5m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e4e6eb;
}

.content-header h3[b-751o2qon5m] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #050505;
}

.content-header-right[b-751o2qon5m] {
    display: flex;
    gap: 8px;
}

.btn-mark-all[b-751o2qon5m],
.btn-settings[b-751o2qon5m] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #65676b;
    transition: all 0.2s ease;
}

.btn-mark-all:hover[b-751o2qon5m],
.btn-settings:hover[b-751o2qon5m] {
    background-color: #f2f3f5;
}

.btn-mark-all i[b-751o2qon5m],
.btn-settings i[b-751o2qon5m] {
    font-size: 1.25rem;
}

/* Content Body */
.content-body[b-751o2qon5m] {
    padding: 16px 0;
}

.loading-container[b-751o2qon5m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
}

.empty-state[b-751o2qon5m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    color: #65676b;
}

.empty-state i[b-751o2qon5m] {
    font-size: 4rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state h4[b-751o2qon5m] {
    margin: 0 0 8px 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #050505;
}

.empty-state p[b-751o2qon5m] {
    margin: 0;
    font-size: 0.9375rem;
}

/* Notification Sections */
.notification-section[b-751o2qon5m] {
    margin-bottom: 24px;
}

.section-header[b-751o2qon5m] {
    padding: 16px 24px 8px;
}

.section-header h4[b-751o2qon5m] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #050505;
}

/* Notification Cards */
.notification-card[b-751o2qon5m] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 24px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    border-bottom: 1px solid #f0f2f5;
}

.notification-card:hover[b-751o2qon5m] {
    background-color: #f2f3f5;
}

.notification-card:last-child[b-751o2qon5m] {
    border-bottom: none;
}

.notification-card.unread[b-751o2qon5m] {
    background-color: #e7f3ff;
}

.notification-card.unread:hover[b-751o2qon5m] {
    background-color: #d8ebff;
}

.notification-card.read[b-751o2qon5m] {
    background-color: white;
}

.notification-icon-large[b-751o2qon5m] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notification-icon-large i[b-751o2qon5m] {
    font-size: 1.5rem;
}

.notification-icon-large.icon-info[b-751o2qon5m] {
    background: rgba(74, 144, 226, 0.15);
    color: #4A90E2;
}

.notification-icon-large.icon-success[b-751o2qon5m] {
    background: rgba(40, 167, 69, 0.15);
    color: #28a745;
}

.notification-icon-large.icon-warning[b-751o2qon5m] {
    background: rgba(255, 193, 7, 0.15);
    color: #ff9800;
}

.notification-icon-large.icon-error[b-751o2qon5m] {
    background: rgba(220, 53, 69, 0.15);
    color: #dc3545;
}

.notification-body[b-751o2qon5m] {
    flex: 1;
    min-width: 0;
}

.notification-title[b-751o2qon5m] {
    font-weight: 400;
    font-size: 0.9375rem;
    color: #050505;
    margin-bottom: 4px;
    line-height: 1.3333;
}

.notification-message[b-751o2qon5m] {
    font-size: 0.9375rem;
    color: #050505;
    margin-bottom: 4px;
    line-height: 1.3333;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notification-time[b-751o2qon5m] {
    font-size: 0.8125rem;
    color: #1877f2;
    font-weight: 500;
}

.notification-dot-large[b-751o2qon5m] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #1877f2;
    flex-shrink: 0;
    margin-top: 8px;
}

.btn-notification-menu[b-751o2qon5m] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #65676b;
    transition: all 0.2s ease;
    opacity: 0;
}

.notification-card:hover .btn-notification-menu[b-751o2qon5m] {
    opacity: 1;
}

.btn-notification-menu:hover[b-751o2qon5m] {
    background-color: rgba(0, 0, 0, 0.05);
}

.btn-notification-menu i[b-751o2qon5m] {
    font-size: 1.125rem;
}

/* Responsive */
@media (max-width: 768px) {
    .notifications-container[b-751o2qon5m] {
        grid-template-columns: 1fr;
        padding: 0 12px;
    }

    .notifications-sidebar[b-751o2qon5m] {
        position: static;
    }

    .sidebar-header h2[b-751o2qon5m] {
        font-size: 1.25rem;
    }

    .content-header[b-751o2qon5m] {
        padding: 16px;
    }

    .notification-card[b-751o2qon5m] {
        padding: 12px 16px;
    }

    .section-header[b-751o2qon5m] {
        padding: 12px 16px 8px;
    }
}

/* _content/ltia.portal.web/Components/Pages/Project/Project.razor.rz.scp.css */
/* CSS Variables - Đặt trực tiếp vào .project-page */
.project-page[b-6zdca9vt78] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Card Header Section */
.card-header-section[b-6zdca9vt78] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.card-header-content[b-6zdca9vt78] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.card-header-icon[b-6zdca9vt78] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
}

.card-header-text h1[b-6zdca9vt78] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-800);
}

.card-header-text p[b-6zdca9vt78] {
    margin: 0.25rem 0 0 0;
    color: var(--gray-600);
    font-size: 1rem;
}

/* Buttons */
.btn[b-6zdca9vt78] {
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    height: 48px;
    box-sizing: border-box;
}

    .btn:disabled[b-6zdca9vt78] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.btn-primary[b-6zdca9vt78] {
    background: var(--acv-primary);
    color: white;
}

    .btn-primary:hover:not(:disabled)[b-6zdca9vt78] {
        background: var(--acv-primary-700);
    }

.btn-secondary[b-6zdca9vt78] {
    background: var(--gray-500);
    color: white;
}

    .btn-secondary:hover:not(:disabled)[b-6zdca9vt78] {
        background: var(--gray-600);
    }

.btn-search[b-6zdca9vt78] {
    background: var(--success-main);
    color: white;
}

    .btn-search:hover:not(:disabled)[b-6zdca9vt78] {
        background: var(--success-dark);
    }

/* List Container */
.project-list-container[b-6zdca9vt78] {
    background: var(--acv-white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
}

/* List Header */
.list-header[b-6zdca9vt78] {
    background: var(--acv-white) !important;
    padding: 1.75rem 2rem;
    border-bottom: 1px solid var(--gray-200);
    border-radius: 16px 16px 0 0;
    position: relative;
    z-index: 1;
    overflow: visible;
}

    .list-header[b-6zdca9vt78]::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: linear-gradient(180deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
        border-radius: 16px 0 0 0;
    }

.list-header-content[b-6zdca9vt78] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0;
}

.list-title-section[b-6zdca9vt78] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.list-title[b-6zdca9vt78] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .list-title i[b-6zdca9vt78] {
        color: var(--acv-primary);
        font-size: 1.25rem;
    }

.list-count[b-6zdca9vt78] {
    background: var(--acv-primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Sort Controls */
.sort-controls[b-6zdca9vt78] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.refresh-btn[b-6zdca9vt78],
.add-project-btn[b-6zdca9vt78] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--acv-white);
    color: var(--acv-primary);
    border: 2px solid var(--acv-primary);
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 120px;
    justify-content: center;
    text-decoration: none;
}

.add-project-btn[b-6zdca9vt78] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--acv-white);
    color: var(--acv-primary);
    border: 2px solid var(--acv-primary);
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 120px;
    justify-content: center;
    text-decoration: none;
}

    .refresh-btn:hover:not(:disabled)[b-6zdca9vt78],
    .add-project-btn:hover[b-6zdca9vt78] {
        background: var(--acv-primary);
        color: var(--acv-white);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
        text-decoration: none;
    }

.refresh-btn:disabled[b-6zdca9vt78] {
    opacity: 0.5;
    cursor: not-allowed;
}

.add-project-btn[b-6zdca9vt78] {
    background: var(--acv-primary);
    color: var(--acv-white);
}

    .add-project-btn:hover[b-6zdca9vt78] {
        background: var(--acv-primary-700);
    }

/* Work List */
.project-list[b-6zdca9vt78] {
    padding: 1.5rem;
    min-height: 200px;
}

/* Loading State */
.loading-state[b-6zdca9vt78] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: var(--gray-600);
}

.loading-spinner[b-6zdca9vt78] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--gray-200);
    border-top: 3px solid var(--acv-primary);
    border-radius: 50%;
    animation: spin-b-6zdca9vt78 1s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin-b-6zdca9vt78 {
    0% {
        transform: rotate(0deg);
    }

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

/* Error State */
.error-state[b-6zdca9vt78] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.error-icon[b-6zdca9vt78] {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.error-content h3[b-6zdca9vt78] {
    margin: 0 0 0.5rem 0;
    color: var(--error-main);
    font-size: 1.25rem;
}

.error-content p[b-6zdca9vt78] {
    margin: 0 0 1.5rem 0;
    color: var(--gray-600);
}

/* Work Table */
.project-table-container[b-6zdca9vt78] {
    overflow-x: auto;
    border-radius: 12px;
}

.table-wrapper[b-6zdca9vt78] {
    overflow-x: auto;
}

.data-table[b-6zdca9vt78] {
    width: 100%;
    border-collapse: collapse;
    background: var(--acv-white);
    border-radius: 12px;
    overflow: hidden;
}

    .data-table th[b-6zdca9vt78] {
        background: var(--gray-50);
        padding: 1rem;
        text-align: left;
        font-weight: 600;
        color: var(--gray-700);
        font-size: 0.9rem;
        border-bottom: 2px solid var(--gray-200);
    }

    .data-table td[b-6zdca9vt78] {
        padding: 1rem;
        border-bottom: 1px solid var(--gray-200);
        vertical-align: middle;
    }

    .data-table tr:hover[b-6zdca9vt78] {
        background: var(--gray-50);
    }

/* Column Widths */
.col-stt[b-6zdca9vt78] {
    width: 60px;
    text-align: center !important;
}

/* STT Number */
.stt-number[b-6zdca9vt78] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--gray-100);
    color: var(--gray-600);
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
}

.badge-id[b-6zdca9vt78] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: var(--gray-100);
    color: var(--gray-600);
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

.project-title strong[b-6zdca9vt78] {
    color: var(--gray-800);
    font-weight: 600;
}

.project-title-clickable[b-6zdca9vt78] {
    cursor: pointer !important;
    transition: all 0.2s ease;
    padding: 0.25rem 0.5rem;
    margin: -0.25rem -0.5rem;
    border-radius: 6px;
    display: inline-block;
}

    .project-title-clickable[b-6zdca9vt78],
    .project-title-clickable *[b-6zdca9vt78] {
        cursor: pointer !important;
    }

        .project-title-clickable:hover[b-6zdca9vt78] {
            background-color: var(--acv-primary-lighter);
            color: var(--acv-primary);
            text-decoration: underline;
        }

            .project-title-clickable:hover strong[b-6zdca9vt78] {
                color: var(--acv-primary);
                text-decoration: underline;
            }

.assignee-info[b-6zdca9vt78],
.creator-info[b-6zdca9vt78] {
    font-size: 0.9rem;
}

.assignee-name[b-6zdca9vt78],
.creator-name[b-6zdca9vt78] {
    font-weight: 600;
    color: var(--gray-800);
}

.no-assignee[b-6zdca9vt78],
.no-creator[b-6zdca9vt78] {
    color: var(--gray-400);
    font-style: italic;
}

.status-badge[b-6zdca9vt78] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

    .status-badge.status-new[b-6zdca9vt78] {
        background: #fef3c7;
        color: #92400e;
    }

    .status-badge.status-assigned[b-6zdca9vt78] {
        background: #dbeafe;
        color: #1e40af;
    }

    .status-badge.status-inprogress[b-6zdca9vt78] {
        background: #dbeafe;
        color: #1e40af;
    }

    .status-badge.status-notachieved[b-6zdca9vt78] {
        background: #fee2e2;
        color: #991b1b;
    }

    .status-badge.status-paused[b-6zdca9vt78] {
        background: #fef3c7;
        color: #92400e;
    }

    .status-badge.status-completed[b-6zdca9vt78] {
        background: #d1fae5;
        color: #065f46;
    }

    .status-badge.status-closed[b-6zdca9vt78] {
        background: #e5e7eb;
        color: #374151;
    }

    .status-badge.status-cancelled[b-6zdca9vt78] {
        background: #fee2e2;
        color: #991b1b;
    }

    .status-badge.status-unknown[b-6zdca9vt78] {
        background: #e5e7eb;
        color: #374151;
    }

.priority-badge[b-6zdca9vt78] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

    .priority-badge.priority-low[b-6zdca9vt78] {
        background: #f0f9ff;
        color: #0369a1;
    }

    .priority-badge.priority-medium[b-6zdca9vt78] {
        background: #fef3c7;
        color: #92400e;
    }

    .priority-badge.priority-high[b-6zdca9vt78] {
        background: #fed7aa;
        color: #c2410c;
    }

    .priority-badge.priority-urgent[b-6zdca9vt78] {
        background: #fee2e2;
        color: #991b1b;
    }

.no-priority[b-6zdca9vt78] {
    color: var(--gray-400);
    font-style: italic;
}

.date-text[b-6zdca9vt78] {
    color: var(--gray-600);
    font-size: 0.9rem;
}

.date-time-small[b-6zdca9vt78] {
    color: var(--gray-400);
    font-size: 0.75rem;
    margin-top: 0.15rem;
}

.date-text.due-date-overdue[b-6zdca9vt78] {
    color: var(--error-main);
    font-weight: 600;
}

.date-text.due-date-urgent[b-6zdca9vt78] {
    color: var(--warning-main);
    font-weight: 600;
}

.date-text.due-date-normal[b-6zdca9vt78] {
    color: var(--gray-600);
}

.no-date[b-6zdca9vt78] {
    color: var(--gray-400);
    font-style: italic;
}

.action-buttons[b-6zdca9vt78] {
    display: flex;
    gap: 0.5rem;
}

.btn-icon[b-6zdca9vt78] {
    width: 32px;
    height: 32px;
    border: 1px solid var(--gray-300);
    background: white;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

    .btn-icon:hover[b-6zdca9vt78] {
        background: var(--gray-50);
        border-color: var(--gray-400);
    }

.btn-view:hover[b-6zdca9vt78] {
    background: var(--acv-primary);
    color: white;
    border-color: var(--acv-primary);
}

.btn-edit:hover[b-6zdca9vt78] {
    background: var(--warning-main);
    color: white;
    border-color: var(--warning-main);
}

.btn-status:hover[b-6zdca9vt78],
.btn-status-disabled[b-6zdca9vt78] {
    background: #8b5cf6;
    color: white;
    border-color: #8b5cf6;
}

.btn-status-disabled[b-6zdca9vt78] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-history:hover[b-6zdca9vt78] {
    background: var(--acv-primary-light);
    color: white;
    border-color: var(--acv-primary-light);
}

.btn-delete:hover[b-6zdca9vt78] {
    background: var(--error-main);
    color: white;
    border-color: var(--error-main);
}

/* Empty State */
.empty-state[b-6zdca9vt78] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.empty-state-icon[b-6zdca9vt78] {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
    color: var(--gray-400);
}

.empty-state h3[b-6zdca9vt78] {
    margin: 0 0 0.5rem 0;
    color: var(--gray-800);
    font-size: 1.25rem;
}

.empty-state p[b-6zdca9vt78] {
    margin: 0 0 1.5rem 0;
    color: var(--gray-600);
}

.empty-state-actions[b-6zdca9vt78] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

/* Pagination */
.pagination-section[b-6zdca9vt78] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-top: 1px solid var(--gray-200);
    margin-top: 2rem;
}

.pagination-info[b-6zdca9vt78] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--gray-600);
    font-size: 0.9rem;
}

.pagination-controls[b-6zdca9vt78] {
    display: flex;
    gap: 0.25rem;
}

.btn-pagination[b-6zdca9vt78] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gray-300);
    background: white;
    color: var(--gray-700);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    min-width: 40px;
    transition: all 0.2s ease;
}

    .btn-pagination:hover:not(:disabled)[b-6zdca9vt78] {
        background: var(--gray-50);
        border-color: var(--gray-400);
    }

    .btn-pagination:disabled[b-6zdca9vt78] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .btn-pagination.active[b-6zdca9vt78] {
        background: var(--acv-primary);
        color: white;
        border-color: var(--acv-primary);
    }

/* Responsive Design */
@media (max-width: 1024px) {
    .project-page[b-6zdca9vt78] {
        padding: 0.5rem 1rem;
    }
}

@media (max-width: 768px) {
    .list-header-content[b-6zdca9vt78] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .sort-controls[b-6zdca9vt78] {
        justify-content: stretch;
    }

    .refresh-btn[b-6zdca9vt78],
    .add-project-btn[b-6zdca9vt78] {
        flex: 1;
    }

    .pagination-section[b-6zdca9vt78] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .pagination-controls[b-6zdca9vt78] {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .data-table th[b-6zdca9vt78],
    .data-table td[b-6zdca9vt78] {
        padding: 0.75rem 0.5rem;
    }

    .action-buttons[b-6zdca9vt78] {
        flex-direction: column;
        gap: 0.25rem;
    }

    .btn-icon[b-6zdca9vt78] {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }
}

/* Create Dropdown Menu - NEW STYLES ONLY */
.create-dropdown-container[b-6zdca9vt78] {
    position: relative;
    display: inline-block;
}

.create-dropdown-btn[b-6zdca9vt78] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--acv-primary);
    color: var(--acv-white);
    border: 2px solid var(--acv-primary);
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 100px;
    justify-content: center;
    text-decoration: none;
}

    .create-dropdown-btn:hover[b-6zdca9vt78] {
        background: var(--acv-primary-700);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
    }

    .create-dropdown-btn i.fa-chevron-down[b-6zdca9vt78] {
        font-size: 0.75rem;
        transition: transform 0.2s ease;
    }

.create-dropdown-container:has(.create-dropdown-menu) .create-dropdown-btn i.fa-chevron-down[b-6zdca9vt78] {
    transform: rotate(180deg);
}

.create-dropdown-menu[b-6zdca9vt78] {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    background: var(--acv-white);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    z-index: 1000;
    overflow: hidden;
    animation: dropdownFadeIn-b-6zdca9vt78 0.2s ease;
}

@keyframes dropdownFadeIn-b-6zdca9vt78 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

.create-dropdown-item[b-6zdca9vt78] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: var(--gray-700);
    text-decoration: none;
    transition: all 0.2s ease;
    border-bottom: 1px solid var(--gray-100);
}

    .create-dropdown-item:last-child[b-6zdca9vt78] {
        border-bottom: none;
    }

    .create-dropdown-item:hover[b-6zdca9vt78] {
        background: var(--gray-50);
        color: var(--acv-primary);
    }

    .create-dropdown-item i[b-6zdca9vt78] {
        width: 20px;
        text-align: center;
        color: var(--acv-primary);
        font-size: 0.9rem;
    }

    .create-dropdown-item span[b-6zdca9vt78] {
        font-weight: 500;
    }

/* Close dropdown when clicking outside */
body:has(.create-dropdown-container)[b-6zdca9vt78] {
    position: relative;
}

@media (max-width: 768px) {
    .create-dropdown-menu[b-6zdca9vt78] {
        right: auto;
        left: 0;
    }
}

/* Alias add-work-btn to look like add-project-btn */
.add-work-btn[b-6zdca9vt78] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--acv-white);
    color: var(--acv-primary);
    border: 2px solid var(--acv-primary);
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 120px;
    justify-content: center;
    text-decoration: none;
}

/* Search & filter section */
.project-search-section[b-6zdca9vt78] {
    margin-bottom: 1.5rem;
}

.search-container[b-6zdca9vt78] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--gray-200);
}

.search-content[b-6zdca9vt78] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.search-main-row[b-6zdca9vt78] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    align-items: flex-end;
}

.search-input-group[b-6zdca9vt78],
.filter-group[b-6zdca9vt78] {
    min-width: 220px;
}

.filter-group[b-6zdca9vt78] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.filter-label[b-6zdca9vt78] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-700);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

    .filter-label i[b-6zdca9vt78] {
        color: var(--acv-primary);
    }

.search-input-wrapper[b-6zdca9vt78] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon[b-6zdca9vt78] {
    position: absolute;
    left: 0.75rem;
    color: var(--gray-400);
    font-size: 0.85rem;
}

.search-input[b-6zdca9vt78] {
    width: 100%;
    padding: 0.5rem 2.25rem 0.5rem 2rem;
    border-radius: 999px;
    border: 1px solid var(--gray-300);
    font-size: 0.9rem;
    color: var(--gray-800);
    background-color: var(--acv-white);
    outline: none;
    transition: all 0.15s ease;
}

    .search-input:focus[b-6zdca9vt78] {
        border-color: var(--acv-primary);
        box-shadow: 0 0 0 1px rgba(33, 76, 166, 0.12);
    }

.input-clear[b-6zdca9vt78],
.select-clear-btn[b-6zdca9vt78] {
    position: absolute;
    right: 0.5rem;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: var(--gray-400);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

    .input-clear:hover[b-6zdca9vt78],
    .select-clear-btn:hover[b-6zdca9vt78] {
        background: var(--gray-100);
        color: var(--gray-600);
    }

.filter-select[b-6zdca9vt78],
.filter-date-input[b-6zdca9vt78] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--gray-300);
    font-size: 0.9rem;
    color: var(--gray-800);
    background-color: var(--acv-white);
    outline: none;
    transition: all 0.15s ease;
}

    .filter-select:focus[b-6zdca9vt78],
    .filter-date-input:focus[b-6zdca9vt78] {
        border-color: var(--acv-primary);
        box-shadow: 0 0 0 1px rgba(33, 76, 166, 0.12);
    }

.date-range[b-6zdca9vt78] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.date-range-separator[b-6zdca9vt78] {
    color: var(--gray-400);
    font-size: 0.85rem;
}

/* Active-only filter chip */
.active-filter[b-6zdca9vt78] {
    background: var(--acv-primary-lighter);
    border-radius: 0.75rem;
    padding: 0.65rem 0.9rem;
}

.active-checkbox[b-6zdca9vt78] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--gray-700);
}

    .active-checkbox input[b-6zdca9vt78] {
        width: 16px;
        height: 16px;
    }

/* Search buttons on the right */
.search-controls[b-6zdca9vt78] {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    margin-left: auto;
}

.search-btn[b-6zdca9vt78],
.clear-btn[b-6zdca9vt78] {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.search-btn[b-6zdca9vt78] {
    background: var(--acv-primary);
    color: var(--acv-white);
}

    .search-btn:hover:not(:disabled)[b-6zdca9vt78] {
        background: var(--acv-primary-700);
        box-shadow: 0 2px 6px rgba(33, 76, 166, 0.25);
    }

.clear-btn[b-6zdca9vt78] {
    background: var(--gray-100);
    color: var(--gray-600);
}

    .clear-btn:hover:not(:disabled)[b-6zdca9vt78] {
        background: var(--gray-200);
    }

    .search-btn:disabled[b-6zdca9vt78],
    .clear-btn:disabled[b-6zdca9vt78] {
        opacity: 0.6;
        cursor: not-allowed;
    }

/* Project code label */
.code-text[b-6zdca9vt78] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: var(--gray-100);
    color: var(--gray-700);
    font-size: 0.8rem;
    font-weight: 500;
}

/* Progress column */
.progress-cell[b-6zdca9vt78] {
    min-width: 160px;
}

.progress-bar[b-6zdca9vt78] {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: var(--gray-200);
    overflow: hidden;
    margin-bottom: 0.35rem;
}

.progress-fill[b-6zdca9vt78] {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--acv-primary) 0%, var(--acv-primary-light) 100%);
    transition: width 0.3s ease;
}

.progress-text[b-6zdca9vt78] {
    font-size: 0.8rem;
    color: var(--gray-600);
    font-weight: 500;
}

/* Dropdown search inside filters (Project Manager, etc.) */
.dropdown-panel[b-6zdca9vt78] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--acv-white);
    border-radius: 0.75rem;
    border: 1px solid var(--gray-200);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.15);
    z-index: 50;
    overflow: hidden;
}

.dropdown-loading[b-6zdca9vt78],
.dropdown-empty[b-6zdca9vt78] {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    color: var(--gray-500);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dropdown-list[b-6zdca9vt78] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 260px;
    overflow-y: auto;
}

.dropdown-item[b-6zdca9vt78] {
    padding: 0.4rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

    .dropdown-item:hover[b-6zdca9vt78] {
        background: var(--gray-50);
    }

.spinner[b-6zdca9vt78] {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 2px solid var(--gray-200);
    border-top-color: var(--acv-primary);
    animation: spin-b-6zdca9vt78 1s linear infinite;
}

/* Responsive search layout */
@media (max-width: 992px) {
    .search-main-row[b-6zdca9vt78] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-controls[b-6zdca9vt78] {
        justify-content: flex-start;
        margin-left: 0;
    }
}
/* _content/ltia.portal.web/Components/Pages/Project/ProjectCreate.razor.rz.scp.css */
/* CSS Variables - Đặt trực tiếp vào .task-page */
.task-page[b-tdsb0u04ky] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    --accent-warning: #f59e0b;
    --accent-success: #0ea5e9;
    
    padding: 1rem;
    background: #f8f9fa;
    min-height: 100vh;
}

/* Participant Selection Modal Styles */
.assign-container[b-tdsb0u04ky] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 0;
}

/* Left Column: Search & Results */
.assign-search-column[b-tdsb0u04ky] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    min-height: 0;
}

.input-stack[b-tdsb0u04ky] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.input-with-icon[b-tdsb0u04ky] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.input-icon[b-tdsb0u04ky] {
    position: absolute;
    left: 16px;
    color: var(--gray-400);
    font-size: 15px;
    pointer-events: none;
    z-index: 1;
    transition: color 0.2s ease;
}

.search-input:focus ~ .input-icon[b-tdsb0u04ky],
.search-input:focus + .input-icon[b-tdsb0u04ky] {
    color: var(--acv-primary);
}

.search-input[b-tdsb0u04ky] {
    padding-left: 44px !important;
    padding-right: 50px !important;
    border: 2px solid var(--gray-300);
    font-size: 14px;
    transition: all 0.2s ease;
}

.search-input:focus[b-tdsb0u04ky] {
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 4px rgba(33, 76, 166, 0.1);
}

.btn-icon[b-tdsb0u04ky] {
    border: none;
    background: var(--gray-100);
    color: var(--gray-600);
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.btn-icon:hover:not(:disabled)[b-tdsb0u04ky] {
    background: var(--acv-primary);
    color: var(--acv-white);
    transform: rotate(180deg) scale(1.05);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.25);
}

.btn-icon:active:not(:disabled)[b-tdsb0u04ky] {
    transform: rotate(180deg) scale(0.95);
}

.btn-icon:disabled[b-tdsb0u04ky] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.section-helper[b-tdsb0u04ky] {
    font-size: 0.85rem;
    color: var(--gray-500);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.section-helper i[b-tdsb0u04ky] {
    font-size: 0.8rem;
}

/* Result Panel */
.result-panel[b-tdsb0u04ky] {
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    background: var(--acv-white);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.02);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.result-panel:hover[b-tdsb0u04ky] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.panel-header[b-tdsb0u04ky] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 18px;
    border-bottom: 1px solid var(--gray-200);
    background: linear-gradient(to bottom, var(--gray-50), var(--acv-white));
}

.panel-header-content[b-tdsb0u04ky] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--gray-700);
    font-size: 14px;
}

.panel-header-content i[b-tdsb0u04ky] {
    color: var(--acv-primary);
    font-size: 13px;
}

.pill[b-tdsb0u04ky] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 24px;
    text-align: center;
}

.result-list[b-tdsb0u04ky] {
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
}

.result-list[b-tdsb0u04ky]::-webkit-scrollbar {
    width: 6px;
}

.result-list[b-tdsb0u04ky]::-webkit-scrollbar-track {
    background: var(--gray-50);
}

.result-list[b-tdsb0u04ky]::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 3px;
}

.result-list[b-tdsb0u04ky]::-webkit-scrollbar-thumb:hover {
    background: var(--gray-400);
}

.result-item[b-tdsb0u04ky] {
    width: 100%;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--gray-100);
    text-align: left;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.result-item:last-child[b-tdsb0u04ky] {
    border-bottom: none;
}

.result-item:hover:not(.muted):not(:disabled)[b-tdsb0u04ky] {
    background: linear-gradient(to right, var(--acv-primary-lighter), var(--gray-50));
    transform: translateX(4px);
    border-left: 3px solid var(--acv-primary);
    padding-left: 15px;
}

.result-item:active:not(.muted):not(:disabled)[b-tdsb0u04ky] {
    background: var(--acv-primary-lighter);
    transform: translateX(2px);
}

.result-item:disabled[b-tdsb0u04ky] {
    opacity: 0.6;
    cursor: not-allowed;
}

.result-item.muted[b-tdsb0u04ky] {
    cursor: default;
    color: var(--gray-500);
}

.result-avatar[b-tdsb0u04ky] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-800) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 20px;
    flex-shrink: 0;
    box-shadow: 0 4px 8px rgba(33, 76, 166, 0.25), 0 0 0 2px rgba(33, 76, 166, 0.1);
    transition: all 0.25s ease;
}

.result-item:hover:not(.muted):not(:disabled) .result-avatar[b-tdsb0u04ky] {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 6px 12px rgba(33, 76, 166, 0.35), 0 0 0 3px rgba(33, 76, 166, 0.15);
}

.result-content[b-tdsb0u04ky] {
    flex: 1;
    min-width: 0;
}

.result-title[b-tdsb0u04ky] {
    margin: 0;
    font-weight: 600;
    color: var(--gray-800);
    font-size: 14px;
    line-height: 1.4;
}

.result-meta[b-tdsb0u04ky] {
    margin: 4px 0 0;
    font-size: 0.8rem;
    color: var(--gray-500);
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.meta-item[b-tdsb0u04ky] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.meta-item i[b-tdsb0u04ky] {
    font-size: 0.75rem;
}

.result-action[b-tdsb0u04ky] {
    color: var(--acv-primary);
    font-size: 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--acv-primary-lighter);
}

.result-item:hover:not(.muted):not(:disabled) .result-action[b-tdsb0u04ky] {
    transform: scale(1.15) rotate(5deg);
    color: var(--acv-white);
    background: var(--acv-primary);
    box-shadow: 0 4px 8px rgba(33, 76, 166, 0.3);
}

/* Right Column: Selected Participants */
.assign-selected-column[b-tdsb0u04ky] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: linear-gradient(to bottom, var(--gray-50), var(--acv-white));
    border-radius: 12px;
    padding: 1rem 1.25rem;
    border: 1px solid var(--gray-200);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.selected-header[b-tdsb0u04ky] {
    padding-bottom: 0.75rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.selected-header-content[b-tdsb0u04ky] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.selected-header-content > i[b-tdsb0u04ky] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-800) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 16px;
    flex-shrink: 0;
}

.selected-title[b-tdsb0u04ky] {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--gray-800);
}

.selected-subtitle[b-tdsb0u04ky] {
    margin: 2px 0 0;
    font-size: 0.85rem;
    color: var(--gray-500);
}

.selected-list[b-tdsb0u04ky] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
}

.selected-list[b-tdsb0u04ky]::-webkit-scrollbar {
    width: 6px;
}

.selected-list[b-tdsb0u04ky]::-webkit-scrollbar-track {
    background: transparent;
}

.selected-list[b-tdsb0u04ky]::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 3px;
}

.selected-list[b-tdsb0u04ky]::-webkit-scrollbar-thumb:hover {
    background: var(--gray-400);
}

.selected-empty[b-tdsb0u04ky] {
    text-align: center;
    padding: 48px 24px;
    color: var(--gray-500);
}

.empty-icon[b-tdsb0u04ky] {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--gray-100), var(--gray-50));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
    font-size: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 2px dashed var(--gray-300);
}

.empty-title[b-tdsb0u04ky] {
    margin: 0 0 8px;
    font-weight: 600;
    color: var(--gray-600);
    font-size: 14px;
}

.empty-description[b-tdsb0u04ky] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--gray-500);
    line-height: 1.5;
}

.selected-item[b-tdsb0u04ky] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    background: var(--acv-white);
    border-radius: 10px;
    border: 1px solid var(--gray-200);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.selected-item:hover[b-tdsb0u04ky] {
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.15), 0 0 0 1px var(--acv-primary-light);
    transform: translateY(-2px);
    border-color: var(--acv-primary);
    background: linear-gradient(to right, var(--acv-primary-lighter), var(--acv-white));
}

.selected-avatar[b-tdsb0u04ky] {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-800) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 18px;
    flex-shrink: 0;
    box-shadow: 0 3px 6px rgba(33, 76, 166, 0.25), 0 0 0 2px rgba(33, 76, 166, 0.1);
    transition: all 0.25s ease;
}

.selected-item:hover .selected-avatar[b-tdsb0u04ky] {
    transform: scale(1.08) rotate(-5deg);
    box-shadow: 0 5px 10px rgba(33, 76, 166, 0.35), 0 0 0 3px rgba(33, 76, 166, 0.15);
}

.selected-content[b-tdsb0u04ky] {
    flex: 1;
    min-width: 0;
}

.selected-name[b-tdsb0u04ky] {
    margin: 0;
    font-weight: 600;
    color: var(--gray-800);
    font-size: 14px;
    line-height: 1.4;
}

.selected-meta[b-tdsb0u04ky] {
    margin: 4px 0 0;
    font-size: 0.8rem;
    color: var(--gray-500);
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.meta-code[b-tdsb0u04ky],
.meta-dept[b-tdsb0u04ky] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.meta-code i[b-tdsb0u04ky],
.meta-dept i[b-tdsb0u04ky] {
    font-size: 0.75rem;
}

.selected-remove[b-tdsb0u04ky] {
    border: none;
    background: var(--gray-100);
    color: var(--gray-500);
    cursor: pointer;
    padding: 0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    width: 32px;
    height: 32px;
}

.selected-remove:hover:not(:disabled)[b-tdsb0u04ky] {
    background: var(--error-main);
    color: var(--acv-white);
    transform: scale(1.15) rotate(90deg);
    box-shadow: 0 4px 8px rgba(255, 86, 48, 0.3);
}

.selected-remove:active:not(:disabled)[b-tdsb0u04ky] {
    transform: scale(1.05) rotate(90deg);
}

.selected-remove:disabled[b-tdsb0u04ky] {
    opacity: 0.5;
    cursor: not-allowed;
}

.assignee-modal-overlay[b-tdsb0u04ky] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1100;
    padding: 1rem;
    animation: fadeIn-b-tdsb0u04ky 0.2s ease-out;
}

@keyframes fadeIn-b-tdsb0u04ky {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.assignee-modal[b-tdsb0u04ky] {
    background: white;
    border-radius: 16px;
    max-width: 1200px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 80px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.05);
    animation: slideUp-b-tdsb0u04ky 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

@keyframes slideUp-b-tdsb0u04ky {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.assignee-modal-header[b-tdsb0u04ky] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--gray-200);
    background: var(--acv-white);
}

.assignee-modal-header > div[b-tdsb0u04ky] {
    flex: 1;
}

.assignee-modal-header h3[b-tdsb0u04ky] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--gray-900);
    letter-spacing: -0.02em;
}

.assignee-modal-header p[b-tdsb0u04ky] {
    margin: 0.5rem 0 0;
    color: var(--gray-600);
    font-size: 0.95rem;
    line-height: 1.5;
}

.modal-close-btn[b-tdsb0u04ky] {
    border: none;
    background: var(--gray-100);
    color: var(--gray-600);
    border-radius: 10px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-left: 1rem;
}

.modal-close-btn:hover[b-tdsb0u04ky] {
    background: var(--error-lighter);
    color: var(--error-main);
    transform: rotate(90deg);
}

.modal-close-btn:active[b-tdsb0u04ky] {
    transform: rotate(90deg) scale(0.95);
}

.assignee-modal-body[b-tdsb0u04ky] {
    padding: 1.5rem 2rem;
    overflow-y: auto;
    flex: 1;
    background: var(--acv-white);
}

.assignee-modal-body[b-tdsb0u04ky]::-webkit-scrollbar {
    width: 8px;
}

.assignee-modal-body[b-tdsb0u04ky]::-webkit-scrollbar-track {
    background: var(--gray-50);
}

.assignee-modal-body[b-tdsb0u04ky]::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 4px;
}

.assignee-modal-body[b-tdsb0u04ky]::-webkit-scrollbar-thumb:hover {
    background: var(--gray-400);
}

.assignee-modal-footer[b-tdsb0u04ky] {
    display: flex;
    justify-content: flex-end;
    gap: 0.875rem;
    padding: 1.25rem 2rem;
    border-top: 1px solid var(--gray-200);
    background: var(--acv-white);
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

/* Responsive Design for Modal */
@media (max-width: 1024px) {
    .assign-container[b-tdsb0u04ky] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .assign-selected-column[b-tdsb0u04ky] {
        order: -1;
    }
}

@media (max-width: 768px) {
    .result-list[b-tdsb0u04ky] {
        max-height: 300px;
    }

    .selected-list[b-tdsb0u04ky] {
        max-height: 300px;
    }

    .assignee-modal[b-tdsb0u04ky] {
        max-height: 95vh;
    }

    .assignee-modal-body[b-tdsb0u04ky] {
        padding: 1rem;
    }
}

/* Card Header */
.task-page-card-header[b-tdsb0u04ky] {
    background: var(--acv-white);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-content[b-tdsb0u04ky] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-icon[b-tdsb0u04ky] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-800) 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.25rem;
}

.header-text[b-tdsb0u04ky] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.header-eyebrow[b-tdsb0u04ky] {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    color: var(--gray-500);
    margin: 0;
}

.header-title[b-tdsb0u04ky] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 0.25rem 0;
}

.header-subtitle[b-tdsb0u04ky] {
    font-size: 1rem;
    color: var(--gray-600);
    margin: 0;
}

.main-content-container[b-tdsb0u04ky] {
    width: 100%;
    margin: 0 auto;
}

.form-column[b-tdsb0u04ky] {
    background: var(--acv-white);
    border-radius: 12px;
    padding: 1.5rem 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    max-width: 100%;
}

.create-form[b-tdsb0u04ky] {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.form-alert[b-tdsb0u04ky] {
    display: flex;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--gray-200);
    background: var(--gray-50);
    color: var(--gray-700);
    align-items: center;
    margin-bottom: 1rem;
}

.form-alert.danger[b-tdsb0u04ky] {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

/* Main Form Grid: 2 Columns Layout - Giống WorkCreate */
.main-form-grid[b-tdsb0u04ky] {
    display: flex;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.form-column-left[b-tdsb0u04ky],
.form-column-right[b-tdsb0u04ky] {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex:1;
}
.main-form-grid[b-tdsb0u04ky] {
    display: flex;
    grid-template-columns: 1.5fr 1fr;
    gap: 1rem;
    justify-content: space-between;
    align-items: stretch;
}

.form-column-left[b-tdsb0u04ky],
.form-column-right[b-tdsb0u04ky] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0;
}
.form-column-left .form-section[b-tdsb0u04ky] {
    margin-bottom: 1.25rem;
}

.form-column-left .form-section:last-child[b-tdsb0u04ky] {
    margin-bottom: 0;
}

.form-column-right .form-section[b-tdsb0u04ky] {
    margin-bottom: 0;
}

.form-column-right .form-group[b-tdsb0u04ky] {
    margin-bottom: 1rem;
}

.form-column-right .form-group:last-child[b-tdsb0u04ky] {
    margin-bottom: 0;
}

/* Ensure sections align properly */
.form-column-left .form-section[b-tdsb0u04ky],
.form-column-right .form-section[b-tdsb0u04ky] {
    display: flex;
    flex-direction: column;
    height: fit-content;
}

/* Form Sections */
.form-section[b-tdsb0u04ky] {
    margin-bottom: 1.25rem;
}

.form-section:last-of-type[b-tdsb0u04ky] {
    margin-bottom: 0;
}

.section-header[b-tdsb0u04ky] {
    margin-bottom: 0.75rem;
}

.section-title[b-tdsb0u04ky] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 0.5rem 0;
}

.section-title i[b-tdsb0u04ky] {
    color: var(--acv-primary);
    font-size: 16px;
}

.section-description[b-tdsb0u04ky] {
    font-size: 0.875rem;
    color: var(--gray-600);
    margin: 0;
    line-height: 1.5;
}

/* Form Styling */
.form-group[b-tdsb0u04ky] {
    margin-bottom: 1rem;
}

.form-group:last-child[b-tdsb0u04ky] {
    margin-bottom: 0;
}

.form-label[b-tdsb0u04ky] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 4px;
    font-size: 14px;
}

.form-label i[b-tdsb0u04ky] {
    color: var(--acv-primary);
    width: 16px;
}

.required[b-tdsb0u04ky] {
    color: var(--error-main);
}

.field-helper[b-tdsb0u04ky] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 0.813rem;
    color: var(--gray-500);
    line-height: 1.4;
}

.field-helper i[b-tdsb0u04ky] {
    color: var(--acv-primary);
    font-size: 0.75rem;
}

/* Form Input */
.form-input[b-tdsb0u04ky] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s ease;
    background: var(--acv-white);
    box-sizing: border-box;
    font-family: inherit;
    resize: vertical;
}

.form-input:focus[b-tdsb0u04ky] {
    outline: none;
    border-color: var(--acv-primary);
    border-width: 1px;
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.form-input:disabled[b-tdsb0u04ky] {
    background: var(--gray-100);
    color: var(--gray-500);
    cursor: not-allowed;
}

.form-input[b-tdsb0u04ky]::placeholder {
    color: var(--gray-400);
}

textarea.form-input[b-tdsb0u04ky] {
    min-height: 80px;
    line-height: 1.5;
}

/* Form Grid - Dùng cho các field nhỏ như ngày tháng */
.form-grid[b-tdsb0u04ky] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.875rem;
}

.form-group.full-width[b-tdsb0u04ky] {
    width: 100%;
}

/* Date fields - Ngày bắt đầu và kết thúc cùng 1 row, ngày hết hạn riêng */
.date-fields-grid[b-tdsb0u04ky] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.875rem;
}

.date-fields-grid .form-group:last-child[b-tdsb0u04ky] {
    grid-column: 1 / -1;
}

@media (max-width: 768px) {
    .date-fields-grid[b-tdsb0u04ky] {
        grid-template-columns: 1fr;
    }
    
    .date-fields-grid .form-group:last-child[b-tdsb0u04ky] {
        grid-column: 1;
    }
}

/* Select/Dropdown */
.form-select[b-tdsb0u04ky],
select.form-input[b-tdsb0u04ky] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s ease;
    background: var(--acv-white);
    box-sizing: border-box;
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}

.form-select:focus[b-tdsb0u04ky],
select.form-input:focus[b-tdsb0u04ky] {
    outline: none;
    border-color: var(--acv-primary);
    border-width: 1px;
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.form-select:disabled[b-tdsb0u04ky],
select.form-input:disabled[b-tdsb0u04ky] {
    background: var(--gray-100);
    color: var(--gray-500);
    cursor: not-allowed;
}

/* Buttons */
.btn[b-tdsb0u04ky] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid;
    text-decoration: none;
    min-width: 140px;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-primary[b-tdsb0u04ky] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border-color: var(--acv-primary);
}

.btn-primary:hover:not(:disabled)[b-tdsb0u04ky] {
    background: var(--acv-primary-800);
    border-color: var(--acv-primary-800);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(33, 76, 166, 0.3);
}

.btn-primary:disabled[b-tdsb0u04ky] {
    background: var(--gray-400);
    border-color: var(--gray-400);
    cursor: not-allowed;
    transform: none;
    opacity: 0.6;
}

.btn-secondary[b-tdsb0u04ky] {
    background: var(--acv-white);
    color: var(--gray-800);
    border-color: var(--gray-300);
}

.btn-secondary:hover:not(:disabled)[b-tdsb0u04ky] {
    background: var(--gray-50);
    border-color: var(--gray-400);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-secondary:disabled[b-tdsb0u04ky] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* User Selector Button */
.user-selector-btn[b-tdsb0u04ky] {
    width: 100%;
    padding: 14px 18px;
    border: 2px dashed var(--gray-300);
    border-radius: 10px;
    background: var(--gray-50);
    color: var(--gray-600);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.user-selector-btn[b-tdsb0u04ky]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(33, 76, 166, 0.05), transparent);
    transition: left 0.5s ease;
}

.user-selector-btn:hover:not(:disabled)[b-tdsb0u04ky]::before {
    left: 100%;
}

.user-selector-btn:hover:not(:disabled)[b-tdsb0u04ky] {
    border-color: var(--acv-primary);
    border-style: solid;
    color: var(--acv-primary);
    background: var(--acv-primary-lighter);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.15);
}

.user-selector-btn:active:not(:disabled)[b-tdsb0u04ky] {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(33, 76, 166, 0.1);
}

.user-selector-btn i[b-tdsb0u04ky] {
    font-size: 16px;
    transition: transform 0.25s ease;
}

.user-selector-btn:hover:not(:disabled) i[b-tdsb0u04ky] {
    transform: scale(1.1);
}

.user-selector-btn:disabled[b-tdsb0u04ky] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Selected User Chip */
.selected-user-chip[b-tdsb0u04ky] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.875rem;
    padding: 1rem;
    background: linear-gradient(to right, var(--acv-primary-lighter), var(--gray-50));
    border: 2px solid var(--acv-primary);
    border-radius: 12px;
    margin-top: 0.5rem;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.15);
    transition: all 0.25s ease;
}

.selected-user-chip:hover[b-tdsb0u04ky] {
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.25);
    transform: translateY(-1px);
}

.selected-user-info[b-tdsb0u04ky] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.selected-user-info > i[b-tdsb0u04ky] {
    color: var(--acv-primary);
    font-size: 20px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--acv-white);
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(33, 76, 166, 0.15);
}

.selected-user-name[b-tdsb0u04ky] {
    margin: 0;
    font-weight: 600;
    color: var(--gray-800);
    font-size: 14px;
}

.selected-user-code[b-tdsb0u04ky] {
    margin: 2px 0 0;
    color: var(--gray-500);
    font-size: 0.8rem;
}

.selected-user-remove[b-tdsb0u04ky] {
    border: none;
    background: var(--gray-200);
    color: var(--gray-600);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.selected-user-remove:hover:not(:disabled)[b-tdsb0u04ky] {
    background: var(--error-main);
    color: var(--acv-white);
    transform: scale(1.1) rotate(90deg);
    box-shadow: 0 4px 8px rgba(255, 86, 48, 0.3);
}

.selected-user-remove:active:not(:disabled)[b-tdsb0u04ky] {
    transform: scale(1.05) rotate(90deg);
}

/* Assignee Block (from WorkCreate) */
.assignee-block[b-tdsb0u04ky] {
    margin-top: 1rem;
    padding: 0.75rem 1rem 1rem;
    border: 1px dashed var(--gray-300);
    border-radius: 12px;
    background: var(--acv-white);
}

.assignee-block-header[b-tdsb0u04ky] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.assignee-block-title[b-tdsb0u04ky] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.assignee-block-title > i[b-tdsb0u04ky] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-800) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 18px;
}

.assignee-title[b-tdsb0u04ky] {
    margin: 0;
    color: var(--gray-800);
    font-size: 15px;
    font-weight: 700;
}

.assignee-subtitle[b-tdsb0u04ky] {
    margin: 0;
    color: var(--gray-500);
    font-size: 0.813rem;
}

.pill[b-tdsb0u04ky] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 24px;
    text-align: center;
}

.assignee-chip-container[b-tdsb0u04ky] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.assignee-chip[b-tdsb0u04ky] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 999px;
    padding: 0.5rem 0.75rem 0.5rem 0.6rem;
    min-width: 220px;
}

.assignee-chip-info[b-tdsb0u04ky] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 11px;
}

.assignee-chip-info i[b-tdsb0u04ky] {
    color: var(--acv-primary);
    font-size: 18px;
}

.assignee-name[b-tdsb0u04ky] {
    margin: 0;
    font-weight: 600;
    color: var(--gray-800);
    font-size: 0.95rem;
}

.assignee-code[b-tdsb0u04ky] {
    margin: 0;
    color: var(--gray-500);
    font-size: 0.8rem;
}

.assignee-chip-remove[b-tdsb0u04ky] {
    border: none;
    background: transparent;
    color: var(--gray-400);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.assignee-chip-remove:hover:not(:disabled)[b-tdsb0u04ky] {
    background: var(--error-lighter);
    color: var(--error-main);
}

.assignee-chip-remove:disabled[b-tdsb0u04ky] {
    opacity: 0.5;
    cursor: not-allowed;
}

.assignee-add-chip[b-tdsb0u04ky] {
    border: 1px dashed var(--acv-primary);
    background: transparent;
    color: var(--acv-primary);
    border-radius: 999px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.assignee-add-chip:hover:not(:disabled)[b-tdsb0u04ky] {
    background: var(--acv-primary);
    color: var(--acv-white);
}

.assignee-add-chip:disabled[b-tdsb0u04ky] {
    opacity: 0.5;
    cursor: not-allowed;
}

.assignee-empty[b-tdsb0u04ky] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    color: var(--gray-500);
    border-radius: 10px;
    border: 1px dashed var(--gray-300);
}

.assignee-empty i[b-tdsb0u04ky] {
    font-size: 20px;
    color: var(--gray-400);
}

.assignee-empty p[b-tdsb0u04ky] {
    margin: 0;
    font-weight: 600;
    color: var(--gray-600);
}

.assignee-empty small[b-tdsb0u04ky] {
    display: block;
    color: var(--gray-500);
}

.assignee-error[b-tdsb0u04ky] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    background: var(--error-lighter);
    border: 1px solid var(--error-light);
    color: var(--error-dark);
    font-size: 0.9rem;
}

.assignee-error i[b-tdsb0u04ky] {
    color: var(--error-dark);
}

/* File Upload Styles - Drag & Drop */
.file-upload-container[b-tdsb0u04ky] {
    margin-top: 0.75rem;
}

.file-upload-title[b-tdsb0u04ky] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 0.75rem;
}

.file-upload-area[b-tdsb0u04ky] {
    border: 2px dashed var(--gray-300);
    border-radius: 12px;
    background: var(--gray-50);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.file-upload-area:hover[b-tdsb0u04ky] {
    border-color: var(--acv-primary);
    background: var(--acv-primary-lighter);
}

.file-upload-area.drag-over[b-tdsb0u04ky] {
    border-color: var(--acv-primary);
    background: var(--acv-primary-lighter);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.15);
}

.file-upload-content[b-tdsb0u04ky] {
    padding: 2.5rem 2rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    text-align: left;
}

.file-upload-icon[b-tdsb0u04ky] {
    font-size: 3rem;
    color: var(--acv-primary);
    flex-shrink: 0;
}

.file-upload-text[b-tdsb0u04ky] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0;
    line-height: 1.4;
}

.file-upload-subtext[b-tdsb0u04ky] {
    font-size: 0.875rem;
    color: var(--gray-500);
    margin: 0.25rem 0 0 0;
    line-height: 1.4;
}

.file-upload-hint[b-tdsb0u04ky] {
    margin-top: 0.75rem;
    font-size: 0.813rem;
    color: var(--gray-500);
    text-align: left;
}

.file-upload-input[b-tdsb0u04ky] {
    display: none;
}

/* Selected Files List */
.selected-files-list[b-tdsb0u04ky] {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.selected-file-item[b-tdsb0u04ky] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.selected-file-item:hover[b-tdsb0u04ky] {
    background: var(--gray-100);
    border-color: var(--gray-300);
}

.selected-file-item i.fa-file[b-tdsb0u04ky] {
    color: var(--acv-primary);
    font-size: 1.125rem;
    flex-shrink: 0;
}

.file-name[b-tdsb0u04ky] {
    flex: 1;
    font-weight: 500;
    color: var(--gray-800);
    font-size: 0.9rem;
}

.file-size[b-tdsb0u04ky] {
    color: var(--gray-500);
    font-size: 0.85rem;
}

.file-remove-btn[b-tdsb0u04ky] {
    border: none;
    background: transparent;
    color: var(--gray-400);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.file-remove-btn:hover:not(:disabled)[b-tdsb0u04ky] {
    background: var(--error-lighter);
    color: var(--error-main);
}

.file-remove-btn:disabled[b-tdsb0u04ky] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* File Upload Modal */
.file-upload-modal-overlay[b-tdsb0u04ky] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1100;
    padding: 1rem;
}

.file-upload-modal[b-tdsb0u04ky] {
    background: var(--acv-white);
    border-radius: 14px;
    max-width: 600px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

.file-upload-modal-header[b-tdsb0u04ky] {
    padding: 1.5rem;
    border-bottom: 1px solid var(--gray-200);
}

.file-upload-modal-header h3[b-tdsb0u04ky] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-800);
}

.file-upload-modal-body[b-tdsb0u04ky] {
    padding: 1.5rem;
    flex: 1;
    overflow-y: auto;
}

.file-upload-modal-footer[b-tdsb0u04ky] {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--gray-200);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    background: var(--acv-white);
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
}

.file-upload-btn-cancel[b-tdsb0u04ky] {
    padding: 0.625rem 1.25rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    background: var(--acv-white);
    color: var(--gray-700);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.file-upload-btn-cancel:hover[b-tdsb0u04ky] {
    background: var(--gray-50);
    border-color: var(--gray-400);
}

.file-upload-btn-upload[b-tdsb0u04ky] {
    padding: 0.625rem 1.25rem;
    border: none;
    border-radius: 8px;
    background: var(--acv-primary);
    color: var(--acv-white);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.file-upload-btn-upload:hover:not(:disabled)[b-tdsb0u04ky] {
    background: var(--acv-primary-700);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(33, 76, 166, 0.3);
}

.file-upload-btn-upload:disabled[b-tdsb0u04ky] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Form Actions */
.form-actions[b-tdsb0u04ky] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-200);
    position: sticky;
    bottom: 0;
    background: var(--acv-white);
    z-index: 10;
    padding-bottom: 0.75rem;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .main-form-grid[b-tdsb0u04ky] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .form-column-left .form-section[b-tdsb0u04ky] {
        margin-bottom: 1rem;
    }
    
    .form-grid[b-tdsb0u04ky] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .date-fields-grid[b-tdsb0u04ky] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .task-page[b-tdsb0u04ky] {
        padding: 0.75rem;
    }

    .task-page-card-header[b-tdsb0u04ky] {
        padding: 0.875rem 1rem;
        margin-bottom: 0.875rem;
    }

    .form-column[b-tdsb0u04ky] {
        padding: 1rem;
    }

    .form-grid[b-tdsb0u04ky] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .form-group.full-width[b-tdsb0u04ky] {
        grid-column: 1;
    }

    .form-section[b-tdsb0u04ky] {
        margin-bottom: 1rem;
    }

    .section-header[b-tdsb0u04ky] {
        margin-bottom: 0.625rem;
    }

    .form-actions[b-tdsb0u04ky] {
        flex-direction: column;
        margin-top: 1rem;
        padding-top: 0.875rem;
    }

    .btn-primary[b-tdsb0u04ky],
    .btn-secondary[b-tdsb0u04ky] {
        width: 100%;
        justify-content: center;
    }
}

/* _content/ltia.portal.web/Components/Pages/Project/ProjectDetail.razor.rz.scp.css */
.project-detail-page[b-54qw4r0qmm],
.work-detail-page[b-54qw4r0qmm] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    min-height: 100vh;
    padding: 0.75rem 1.25rem 2rem;
    background-color: #f3f4f6;
    position: relative;
    z-index: 1;
}

/* Header card */
.work-detail-card-header[b-54qw4r0qmm],
.project-detail-card-header[b-54qw4r0qmm] {
    background: var(--acv-white);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.header-content[b-54qw4r0qmm] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-icon[b-54qw4r0qmm] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    box-shadow: 0 10px 25px rgba(33, 76, 166, 0.35);
}

    .header-icon i[b-54qw4r0qmm] {
        font-size: 1.35rem;
    }

.header-text[b-54qw4r0qmm] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.header-eyebrow[b-54qw4r0qmm] {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gray-500);
    font-weight: 600;
}

.header-title[b-54qw4r0qmm] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
}

.header-subtitle[b-54qw4r0qmm] {
    font-size: 0.9rem;
    color: var(--gray-600);
    margin: 0;
}

/* Container cho tabs + nội dung */
.work-list-container[b-54qw4r0qmm],
.project-detail-container[b-54qw4r0qmm] {
    margin-top: 1rem;
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--gray-200);
    padding: 1.5rem 1.75rem 1.75rem;
}

/* Tab navigation */
.tab-navigation[b-54qw4r0qmm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    border-bottom: 1px solid var(--gray-200);
    padding-bottom: 0.75rem;
    margin-bottom: 1.25rem;
}

.tab-button[b-54qw4r0qmm] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: var(--gray-600);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

    .tab-button i[b-54qw4r0qmm] {
        font-size: 0.9rem;
    }

    .tab-button:hover[b-54qw4r0qmm] {
        background: var(--gray-100);
        color: var(--gray-800);
    }

    .tab-button.active[b-54qw4r0qmm] {
        background: var(--acv-primary-lighter);
        color: var(--acv-primary-700);
    }

        .tab-button.active[b-54qw4r0qmm]::after {
            content: "";
            position: absolute;
            left: 18px;
            right: 18px;
            bottom: -9px;
            height: 2px;
            border-radius: 999px;
            background: var(--acv-primary-700);
        }

.tab-badge[b-54qw4r0qmm] {
    min-width: 22px;
    height: 22px;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--acv-primary);
    color: var(--acv-white);
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Nội dung chi tiết */
.detail-content[b-54qw4r0qmm] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.detail-hero[b-54qw4r0qmm] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--gray-100);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.detail-title[b-54qw4r0qmm] {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
}

.detail-meta-badges[b-54qw4r0qmm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Các section trong phần thông tin */
.section-header[b-54qw4r0qmm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.section-title[b-54qw4r0qmm] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .section-title i[b-54qw4r0qmm] {
        color: var(--acv-primary);
    }

.form-section[b-54qw4r0qmm] {
    margin-bottom: 1.25rem;
}

.form-grid[b-54qw4r0qmm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem 1.25rem;
}

.form-item-label[b-54qw4r0qmm] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-500);
    margin-bottom: 0.15rem;
}

.form-item-value[b-54qw4r0qmm] {
    font-size: 0.9rem;
    color: var(--gray-800);
}

/* Progress hiển thị phần trăm */
.work-progress-wrapper[b-54qw4r0qmm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.work-progress-track[b-54qw4r0qmm] {
    flex: 1;
    height: 8px;
    border-radius: 999px;
    background: var(--gray-200);
    overflow: hidden;
}

.work-progress-fill[b-54qw4r0qmm] {
    height: 100%;
    background: linear-gradient(90deg, var(--acv-primary) 0%, var(--acv-primary-light) 100%);
    border-radius: 999px;
    transition: width 0.3s ease;
}

.work-progress-label[b-54qw4r0qmm] {
    font-size: 13px;
    color: var(--gray-700);
    font-weight: 500;
}

/* Buttons (copy từ Project.razor.css để dùng cho detail) */
.btn[b-54qw4r0qmm] {
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    height: 40px;
    box-sizing: border-box;
}

    .btn:disabled[b-54qw4r0qmm] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.btn-primary[b-54qw4r0qmm] {
    background: var(--acv-primary);
    color: white;
}

    .btn-primary:hover:not(:disabled)[b-54qw4r0qmm] {
        background: var(--acv-primary-700);
    }

.btn-secondary[b-54qw4r0qmm] {
    background: var(--gray-500);
    color: white;
}

    .btn-secondary:hover:not(:disabled)[b-54qw4r0qmm] {
        background: var(--gray-600);
    }

.btn-light[b-54qw4r0qmm] {
    background: var(--gray-100);
    color: var(--gray-700);
}

    .btn-light:hover:not(:disabled)[b-54qw4r0qmm] {
        background: var(--gray-200);
    }

/* Status & priority badges dùng chung với list */
.status-badge[b-54qw4r0qmm] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

    .status-badge.status-new[b-54qw4r0qmm] {
        background: #fef3c7;
        color: #92400e;
    }

    .status-badge.status-assigned[b-54qw4r0qmm] {
        background: #dbeafe;
        color: #1e40af;
    }

    .status-badge.status-inprogress[b-54qw4r0qmm] {
        background: #e0f2fe;
        color: #0369a1;
    }

    .status-badge.status-notachieved[b-54qw4r0qmm] {
        background: #fee2e2;
        color: #991b1b;
    }

    .status-badge.status-paused[b-54qw4r0qmm] {
        background: #fef3c7;
        color: #92400e;
    }

    .status-badge.status-completed[b-54qw4r0qmm] {
        background: #d1fae5;
        color: #065f46;
    }

    .status-badge.status-cancelled[b-54qw4r0qmm] {
        background: #fee2e2;
        color: #991b1b;
    }

/* Priority */
.priority-badge[b-54qw4r0qmm] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

    .priority-badge.priority-low[b-54qw4r0qmm] {
        background: #f0f9ff;
        color: #0369a1;
    }

    .priority-badge.priority-medium[b-54qw4r0qmm] {
        background: #fef3c7;
        color: #92400e;
    }

    .priority-badge.priority-high[b-54qw4r0qmm] {
        background: #fee2e2;
        color: #991b1b;
    }

    .priority-badge.priority-urgent[b-54qw4r0qmm] {
        background: #fee2e2;
        color: #991b1b;
    }

/* Empty state / error */
.error-content[b-54qw4r0qmm],
.empty-state[b-54qw4r0qmm] {
    text-align: center;
    padding: 3rem 1rem;
}

.error-icon[b-54qw4r0qmm],
.empty-state-icon[b-54qw4r0qmm] {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

@media (max-width: 992px) {
    .work-list-container[b-54qw4r0qmm],
    .project-detail-container[b-54qw4r0qmm] {
        padding: 1.25rem 1rem 1.5rem;
    }

    .detail-hero[b-54qw4r0qmm] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* _content/ltia.portal.web/Components/Pages/WorkLog/WorkLogByWork.razor.rz.scp.css */
/* CSS Variables - Đặt trực tiếp vào .work-page */
.work-page[b-io84sm5jyy] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    
    padding: 1rem;
    background: linear-gradient(135deg, #e3f2fd 0%, #ffffff 100%);
    background-attachment: fixed;
    min-height: 100vh;
    animation: fadeIn-b-io84sm5jyy 0.5s ease-in-out;
}

@keyframes fadeIn-b-io84sm5jyy {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Card Header Section */
.card-header-section[b-io84sm5jyy] {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 1.5rem 2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15),
                0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.18);
    animation: slideDown-b-io84sm5jyy 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all 0.3s ease;
}

.card-header-section:hover[b-io84sm5jyy] {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(31, 38, 135, 0.2),
                0 4px 12px rgba(0, 0, 0, 0.08);
}

@keyframes slideDown-b-io84sm5jyy {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.card-header-content[b-io84sm5jyy] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.card-header-icon[b-io84sm5jyy] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
    box-shadow: 0 8px 20px rgba(33, 76, 166, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    animation: pulse-b-io84sm5jyy 2s ease-in-out infinite;
    transition: all 0.3s ease;
}

.card-header-icon:hover[b-io84sm5jyy] {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 12px 28px rgba(33, 76, 166, 0.5);
}

@keyframes pulse-b-io84sm5jyy {
    0%, 100% {
        box-shadow: 0 8px 20px rgba(33, 76, 166, 0.4),
                    inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    50% {
        box-shadow: 0 8px 28px rgba(33, 76, 166, 0.6),
                    inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
}

.card-header-text h1[b-io84sm5jyy] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-800);
}

.card-header-text p[b-io84sm5jyy] {
    margin: 0.25rem 0 0 0;
    color: var(--gray-600);
    font-size: 1rem;
}

/* List Container */
.work-list-container[b-io84sm5jyy] {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15),
                0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.18);
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
    animation: slideUp-b-io84sm5jyy 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.1s both;
    transition: all 0.3s ease;
}

.work-list-container:hover[b-io84sm5jyy] {
    box-shadow: 0 12px 40px rgba(31, 38, 135, 0.2),
                0 4px 12px rgba(0, 0, 0, 0.08);
}

@keyframes slideUp-b-io84sm5jyy {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Tab Navigation */
.tab-navigation[b-io84sm5jyy] {
    display: flex;
    border-bottom: 2px solid var(--gray-200);
    background: var(--gray-50);
    padding: 0;
    gap: 0;
}

.tab-button[b-io84sm5jyy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--gray-600);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    white-space: nowrap;
}

.tab-button:hover:not(.active)[b-io84sm5jyy] {
    background: var(--gray-100);
    color: var(--gray-800);
}

.tab-button.active[b-io84sm5jyy] {
    color: var(--acv-primary);
    border-bottom-color: var(--acv-primary);
    background: var(--acv-white);
    font-weight: 600;
}

.tab-button i[b-io84sm5jyy] {
    font-size: 1rem;
}

.tab-button span:not(.tab-badge)[b-io84sm5jyy] {
    display: inline-block;
}

.tab-badge[b-io84sm5jyy] {
    background: var(--acv-primary);
    color: var(--acv-white);
    padding: 0.125rem 0.5rem;
    border-radius: 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 1.5rem;
    text-align: center;
}

/* List Header */
.list-header[b-io84sm5jyy] {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--gray-200);
    background: var(--gray-50);
}

.list-header-content[b-io84sm5jyy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.list-title-section[b-io84sm5jyy] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.list-title[b-io84sm5jyy] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.list-title i[b-io84sm5jyy] {
    color: var(--acv-primary);
    font-size: 1.25rem;
}

.list-count[b-io84sm5jyy] {
    background: var(--acv-primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Sort Controls */
.sort-controls[b-io84sm5jyy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.refresh-btn[b-io84sm5jyy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--acv-white);
    color: var(--acv-primary);
    border: 2px solid var(--acv-primary);
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 120px;
    justify-content: center;
}

.refresh-btn:hover:not(:disabled)[b-io84sm5jyy] {
    background: var(--acv-primary);
    color: var(--acv-white);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
}

.refresh-btn:disabled[b-io84sm5jyy] {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-size-control[b-io84sm5jyy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--gray-600);
}

.page-size-select[b-io84sm5jyy] {
    min-width: 4.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--gray-300);
    background: var(--acv-white);
    color: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.page-size-select:focus-visible[b-io84sm5jyy] {
    outline: 2px solid var(--acv-primary);
    outline-offset: 2px;
    border-color: var(--acv-primary);
}

/* Work List */
.work-list[b-io84sm5jyy] {
    padding: 1.5rem;
    min-height: 200px;
}

/* Loading State */
.loading-state[b-io84sm5jyy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: var(--gray-600);
}

.loading-spinner[b-io84sm5jyy] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--gray-200);
    border-top: 3px solid var(--acv-primary);
    border-radius: 50%;
    animation: spin-b-io84sm5jyy 1s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin-b-io84sm5jyy {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.loading-inline[b-io84sm5jyy] {
    font-size: 0.9rem;
    color: var(--gray-600);
    padding: 1rem;
    text-align: center;
}

/* Error State */
.error-state[b-io84sm5jyy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.error-icon[b-io84sm5jyy] {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.error-content h3[b-io84sm5jyy] {
    margin: 0 0 0.5rem 0;
    color: var(--error-main);
    font-size: 1.25rem;
}

.error-content p[b-io84sm5jyy] {
    margin: 0 0 1.5rem 0;
    color: var(--gray-600);
}

/* Empty State */
.empty-state[b-io84sm5jyy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.empty-state-icon[b-io84sm5jyy] {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
    color: var(--gray-400);
}

.empty-state h3[b-io84sm5jyy] {
    margin: 0 0 0.5rem 0;
    color: var(--gray-800);
    font-size: 1.25rem;
}

.empty-state p[b-io84sm5jyy] {
    margin: 0 0 1.5rem 0;
    color: var(--gray-600);
}

/* Work Table */
.work-table-container[b-io84sm5jyy] {
    overflow-x: auto;
    border-radius: 12px;
}

.table-wrapper[b-io84sm5jyy] {
    overflow-x: auto;
}

.data-table[b-io84sm5jyy] {
    width: 100%;
    border-collapse: collapse;
    background: var(--acv-white);
    border-radius: 12px;
    overflow: hidden;
}

.data-table th[b-io84sm5jyy] {
    background: var(--gray-50);
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--gray-700);
    font-size: 0.9rem;
    border-bottom: 2px solid var(--gray-200);
}

.data-table td[b-io84sm5jyy] {
    padding: 1rem;
    border-bottom: 1px solid var(--gray-200);
    vertical-align: middle;
}

.data-table tr:hover[b-io84sm5jyy] {
    background: var(--gray-50);
}

.date-text[b-io84sm5jyy] {
    color: var(--gray-600);
    font-size: 0.9rem;
}

.creator-info[b-io84sm5jyy] {
    font-size: 0.9rem;
}

.creator-name[b-io84sm5jyy] {
    font-weight: 600;
    color: var(--gray-800);
}

.history-action-cell[b-io84sm5jyy] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.history-action-code[b-io84sm5jyy] {
    font-weight: 600;
    color: var(--text-primary, var(--gray-800));
}

.history-action-desc[b-io84sm5jyy] {
    font-size: 0.9rem;
    color: var(--text-muted, var(--gray-600));
}

/* Pagination */
.pagination-section[b-io84sm5jyy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-top: 1px solid var(--gray-200);
    margin-top: 2rem;
}

.pagination-info[b-io84sm5jyy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--gray-600);
    font-size: 0.9rem;
}

.pagination-controls[b-io84sm5jyy] {
    display: flex;
    gap: 0.25rem;
}

.btn-pagination[b-io84sm5jyy] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gray-300);
    background: white;
    color: var(--gray-700);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    min-width: 40px;
    transition: all 0.2s ease;
}

.btn-pagination:hover:not(:disabled)[b-io84sm5jyy] {
    background: var(--gray-50);
    border-color: var(--gray-400);
}

.btn-pagination:disabled[b-io84sm5jyy] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-pagination.active[b-io84sm5jyy] {
    background: var(--acv-primary);
    color: white;
    border-color: var(--acv-primary);
}

/* Timeline Section */
.history-layout[b-io84sm5jyy] {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 1rem;
    align-items: start;
    padding: 1.5rem;
    min-height: 400px;
}

@media (max-width: 768px) {
    .history-layout[b-io84sm5jyy] {
        grid-template-columns: 1fr;
    }
}

.timeline-pane[b-io84sm5jyy] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.timeline-wrapper[b-io84sm5jyy] {
    border: 1px solid var(--border-color, var(--gray-200));
    border-radius: 0.75rem;
    background: var(--surface, var(--acv-white));
}

.timeline-window[b-io84sm5jyy] {
    max-height: 26rem;
    overflow-y: auto;
    padding: 0.75rem 0.75rem 0.75rem 1.75rem;
}

.timeline-window[b-io84sm5jyy]::-webkit-scrollbar {
    width: 6px;
}

.timeline-window[b-io84sm5jyy]::-webkit-scrollbar-thumb {
    background: rgba(37, 99, 235, 0.4);
    border-radius: 999px;
}

.timeline[b-io84sm5jyy] {
    position: relative;
    padding-left: 1.5rem;
}

.timeline[b-io84sm5jyy]::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border-color, var(--gray-200));
}

.timeline-item[b-io84sm5jyy] {
    position: relative;
    display: flex;
    width: 100%;
    padding: 0.75rem 0.75rem 0.75rem 1.75rem;
    margin: 0;
    border: 1px solid transparent;
    border-radius: 0.75rem;
    background: none;
    color: inherit;
    cursor: pointer;
    text-align: left;
    gap: 0.75rem;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.timeline-item:hover[b-io84sm5jyy] {
    background: rgba(59, 130, 246, 0.05);
}

.timeline-item:focus-visible[b-io84sm5jyy] {
    outline: 2px solid var(--acv-primary, #2563eb);
    outline-offset: 2px;
}

.timeline-item.active[b-io84sm5jyy] {
    border-color: var(--acv-primary, #2563eb);
    background: rgba(33, 76, 166, 0.08);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.12);
}

.timeline-dot[b-io84sm5jyy] {
    position: absolute;
    left: -4px;
    top: 1.1rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--acv-primary, #2563eb);
    background: var(--body-bg, var(--acv-white));
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.timeline-item.active .timeline-dot[b-io84sm5jyy] {
    background: var(--acv-primary, #2563eb);
}

.timeline-content[b-io84sm5jyy] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.timeline-time[b-io84sm5jyy] {
    font-weight: 600;
}

.timeline-title[b-io84sm5jyy] {
    font-size: 0.95rem;
}

.timeline-meta[b-io84sm5jyy] {
    font-size: 0.85rem;
    color: var(--text-muted, var(--gray-600));
}

.timeline-detail[b-io84sm5jyy] {
    min-height: 14rem;
}

.detail-card[b-io84sm5jyy] {
    border: 1px solid var(--border-color, var(--gray-200));
    border-radius: 0.75rem;
    background: var(--surface, var(--acv-white));
    padding: 1.25rem;
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
}

.detail-card h3[b-io84sm5jyy] {
    margin: 0 0 1rem;
    font-size: 1.25rem;
    color: var(--gray-800);
}

.detail-card dl[b-io84sm5jyy] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
}

.detail-card dt[b-io84sm5jyy] {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, var(--gray-600));
}

.detail-card dd[b-io84sm5jyy] {
    margin: 0;
    font-size: 0.95rem;
    color: var(--gray-800);
}

.detail-card pre[b-io84sm5jyy] {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: inherit;
    background: rgba(15, 23, 42, 0.04);
    border-radius: 0.5rem;
    padding: 0.75rem;
}

.detail-empty[b-io84sm5jyy] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 12rem;
    color: var(--text-muted, var(--gray-600));
    text-align: center;
}

.timeline-empty[b-io84sm5jyy] {
    padding: 1rem;
    border-radius: 0.5rem;
    background: var(--surface-muted, var(--gray-100));
    text-align: center;
    color: var(--gray-600);
}

/* Button Styles */
.btn[b-io84sm5jyy] {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn-primary[b-io84sm5jyy] {
    background: var(--acv-primary);
    color: white;
}

.btn-primary:hover[b-io84sm5jyy] {
    background: var(--acv-primary-700);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .work-page[b-io84sm5jyy] {
        padding: 0.5rem 1rem;
    }

    .list-header-content[b-io84sm5jyy] {
        flex-direction: column;
        align-items: flex-start;
    }

    .sort-controls[b-io84sm5jyy] {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .card-header-section[b-io84sm5jyy] {
        padding: 1.5rem;
    }

    .list-header[b-io84sm5jyy] {
        padding: 1rem 1.5rem;
    }

    .work-list[b-io84sm5jyy] {
        padding: 1rem;
    }

    .pagination-section[b-io84sm5jyy] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .pagination-info[b-io84sm5jyy] {
        justify-content: center;
    }

    .pagination-controls[b-io84sm5jyy] {
        justify-content: center;
    }
}
/* _content/ltia.portal.web/Components/Pages/WorkLog/WorkLogList.razor.rz.scp.css */
/* CSS Variables - Đặt trực tiếp vào .work-page */
.work-page[b-hjvcgui48s] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    
    padding: 1rem;
    background: linear-gradient(135deg, #e3f2fd 0%, #ffffff 100%);
    background-attachment: fixed;
    min-height: 100vh;
    animation: fadeIn-b-hjvcgui48s 0.5s ease-in-out;
}

@keyframes fadeIn-b-hjvcgui48s {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Card Header Section */
.card-header-section[b-hjvcgui48s] {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 1.5rem 2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15),
                0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.18);
    animation: slideDown-b-hjvcgui48s 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all 0.3s ease;
}

.card-header-section:hover[b-hjvcgui48s] {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(31, 38, 135, 0.2),
                0 4px 12px rgba(0, 0, 0, 0.08);
}

@keyframes slideDown-b-hjvcgui48s {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.card-header-content[b-hjvcgui48s] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.card-header-icon[b-hjvcgui48s] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
    box-shadow: 0 8px 20px rgba(33, 76, 166, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    animation: pulse-b-hjvcgui48s 2s ease-in-out infinite;
    transition: all 0.3s ease;
}

.card-header-icon:hover[b-hjvcgui48s] {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 12px 28px rgba(33, 76, 166, 0.5);
}

@keyframes pulse-b-hjvcgui48s {
    0%, 100% {
        box-shadow: 0 8px 20px rgba(33, 76, 166, 0.4),
                    inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    50% {
        box-shadow: 0 8px 28px rgba(33, 76, 166, 0.6),
                    inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
}

.card-header-text h1[b-hjvcgui48s] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-800);
}

.card-header-text p[b-hjvcgui48s] {
    margin: 0.25rem 0 0 0;
    color: var(--gray-600);
    font-size: 1rem;
}

/* Search Section */
.work-search-section[b-hjvcgui48s] {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15),
                0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.18);
    margin-bottom: 1.5rem;
    overflow: visible;
    position: relative;
    z-index: 10;
    animation: slideDown-b-hjvcgui48s 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.1s both;
    transition: all 0.3s ease;
}

.work-search-section:hover[b-hjvcgui48s] {
    box-shadow: 0 12px 40px rgba(31, 38, 135, 0.2),
                0 4px 12px rgba(0, 0, 0, 0.08);
}

.search-container[b-hjvcgui48s] {
    padding: 1rem 1.5rem;
}

.search-content[b-hjvcgui48s] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.search-main-row[b-hjvcgui48s] {
    display: flex;
    align-items: end;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
}

.search-row-secondary[b-hjvcgui48s] {
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-200);
}

.filter-group[b-hjvcgui48s] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 150px;
    position: relative;
    z-index: 100;
}

.filter-label[b-hjvcgui48s] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-label i[b-hjvcgui48s] {
    color: var(--acv-primary);
}

.filter-select[b-hjvcgui48s],
.filter-input[b-hjvcgui48s] {
    width: 100%;
    height: 48px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--acv-white);
    box-sizing: border-box;
}

.filter-select:focus[b-hjvcgui48s],
.filter-input:focus[b-hjvcgui48s] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.filter-checkbox[b-hjvcgui48s] {
    width: 18px;
    height: 18px;
    margin-right: 0.5rem;
    cursor: pointer;
    accent-color: var(--acv-primary);
}

.filter-checkbox-label[b-hjvcgui48s] {
    font-size: 0.9rem;
    color: var(--gray-700);
    cursor: pointer;
    user-select: none;
}

.filter-actions[b-hjvcgui48s] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    position: relative;
    z-index: 20;
    flex-shrink: 0;
    flex: 0 0 auto;
}

/* Search Controls - Matching History.razor style */
.search-controls[b-hjvcgui48s] {
    display: flex;
    gap: 0.5rem;
    align-items: end;
    flex-shrink: 0;
    flex: 0 0 auto;
    margin-left: auto;
}

.search-btn[b-hjvcgui48s] {
    width: 48px;
    height: 48px;
    border: 2px solid var(--acv-primary);
    border-radius: 8px;
    background: var(--acv-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
}

.search-btn:hover:not(:disabled)[b-hjvcgui48s] {
    background: var(--acv-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

.search-btn:disabled[b-hjvcgui48s] {
    opacity: 0.6;
    cursor: not-allowed;
}

.clear-btn[b-hjvcgui48s] {
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 8px;
    background: var(--gray-500);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
}

.clear-btn:hover:not(:disabled)[b-hjvcgui48s] {
    background: var(--gray-600);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.clear-btn:disabled[b-hjvcgui48s] {
    opacity: 0.6;
    cursor: not-allowed;
}

.export-btn[b-hjvcgui48s] {
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 8px;
    background: var(--acv-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
}

.export-btn:hover:not(:disabled)[b-hjvcgui48s] {
    background: var(--acv-primary-700);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

.export-btn:disabled[b-hjvcgui48s] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn[b-hjvcgui48s] {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.btn-search[b-hjvcgui48s] {
    background: var(--acv-primary);
    color: white;
}

.btn-search:hover:not(:disabled)[b-hjvcgui48s] {
    background: var(--acv-primary-700);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
}

.btn-secondary[b-hjvcgui48s] {
    background: var(--acv-white);
    color: var(--acv-primary);
    border: 2px solid var(--acv-primary);
}

.btn-secondary:hover:not(:disabled)[b-hjvcgui48s] {
    background: var(--acv-primary);
    color: white;
}

.btn-primary[b-hjvcgui48s] {
    background: var(--acv-primary);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-hjvcgui48s] {
    background: var(--acv-primary-700);
}

.btn:disabled[b-hjvcgui48s] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* List Container */
.work-list-container[b-hjvcgui48s] {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15),
                0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.18);
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
    animation: slideUp-b-hjvcgui48s 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.1s both;
    transition: all 0.3s ease;
}

.work-list-container:hover[b-hjvcgui48s] {
    box-shadow: 0 12px 40px rgba(31, 38, 135, 0.2),
                0 4px 12px rgba(0, 0, 0, 0.08);
}

@keyframes slideUp-b-hjvcgui48s {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* List Header */
.list-header[b-hjvcgui48s] {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--gray-200);
    background: var(--gray-50);
}

.list-header-content[b-hjvcgui48s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.list-title-section[b-hjvcgui48s] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.list-title[b-hjvcgui48s] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.list-title i[b-hjvcgui48s] {
    color: var(--acv-primary);
    font-size: 1.25rem;
}

.list-count[b-hjvcgui48s] {
    background: var(--acv-primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Work List */
.work-list[b-hjvcgui48s] {
    padding: 1.5rem;
    min-height: 200px;
}

/* Loading State */
.loading-state[b-hjvcgui48s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: var(--gray-600);
}

.loading-spinner[b-hjvcgui48s] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--gray-200);
    border-top: 3px solid var(--acv-primary);
    border-radius: 50%;
    animation: spin-b-hjvcgui48s 1s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin-b-hjvcgui48s {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Error State */
.error-state[b-hjvcgui48s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.error-icon[b-hjvcgui48s] {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.error-content h3[b-hjvcgui48s] {
    margin: 0 0 0.5rem 0;
    color: var(--error-main);
    font-size: 1.25rem;
}

.error-content p[b-hjvcgui48s] {
    margin: 0 0 1.5rem 0;
    color: var(--gray-600);
}

/* Empty State */
.empty-state[b-hjvcgui48s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.empty-state-icon[b-hjvcgui48s] {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
    color: var(--gray-400);
}

.empty-state h3[b-hjvcgui48s] {
    margin: 0 0 0.5rem 0;
    color: var(--gray-800);
    font-size: 1.25rem;
}

.empty-state p[b-hjvcgui48s] {
    margin: 0 0 1.5rem 0;
    color: var(--gray-600);
}

/* Work Table */
.work-table-container[b-hjvcgui48s] {
    overflow-x: auto;
    border-radius: 12px;
}

.table-wrapper[b-hjvcgui48s] {
    overflow-x: auto;
}

.data-table[b-hjvcgui48s] {
    width: 100%;
    border-collapse: collapse;
    background: var(--acv-white);
    border-radius: 12px;
    overflow: hidden;
}

.data-table th[b-hjvcgui48s] {
    background: var(--gray-50);
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--gray-700);
    font-size: 0.9rem;
    border-bottom: 2px solid var(--gray-200);
}

.data-table th.text-center[b-hjvcgui48s] {
    text-align: center;
}

.data-table th.text-end[b-hjvcgui48s] {
    text-align: right;
}

.data-table td[b-hjvcgui48s] {
    padding: 1rem;
    border-bottom: 1px solid var(--gray-200);
    vertical-align: middle;
}

.data-table td.text-center[b-hjvcgui48s] {
    text-align: center;
}

.data-table td.text-end[b-hjvcgui48s] {
    text-align: right;
}

.data-table tr:hover[b-hjvcgui48s] {
    background: var(--gray-50);
}

/* Column Widths */
.col-stt[b-hjvcgui48s] {
    width: 60px;
    text-align: center !important;
}

/* STT Number */
.stt-number[b-hjvcgui48s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--gray-100);
    color: var(--gray-600);
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
}

.badge-id[b-hjvcgui48s] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: var(--gray-100);
    color: var(--gray-600);
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

.date-text[b-hjvcgui48s] {
    color: var(--gray-600);
    font-size: 0.9rem;
}

.creator-info[b-hjvcgui48s] {
    font-size: 0.9rem;
}

.creator-name[b-hjvcgui48s] {
    font-weight: 600;
    color: var(--gray-800);
}

.no-creator[b-hjvcgui48s] {
    color: var(--gray-400);
    font-style: italic;
}

.badge[b-hjvcgui48s] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.badge.bg-info[b-hjvcgui48s] {
    background: #dbeafe;
    color: #1e40af;
}

.btn-icon[b-hjvcgui48s] {
    width: 32px;
    height: 32px;
    border: 1px solid var(--gray-300);
    background: white;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.btn-icon:hover[b-hjvcgui48s] {
    background: var(--gray-50);
    border-color: var(--gray-400);
}

.btn-view:hover[b-hjvcgui48s] {
    background: var(--acv-primary);
    color: white;
    border-color: var(--acv-primary);
}

/* Pagination */
.pagination-section[b-hjvcgui48s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-top: 1px solid var(--gray-200);
    margin-top: 2rem;
}

.pagination-info[b-hjvcgui48s] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--gray-600);
    font-size: 0.9rem;
}

.pagination-controls[b-hjvcgui48s] {
    display: flex;
    gap: 0.25rem;
}

.btn-pagination[b-hjvcgui48s] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gray-300);
    background: white;
    color: var(--gray-700);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    min-width: 40px;
    transition: all 0.2s ease;
}

.btn-pagination:hover:not(:disabled)[b-hjvcgui48s] {
    background: var(--gray-50);
    border-color: var(--gray-400);
}

.btn-pagination:disabled[b-hjvcgui48s] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-pagination.active[b-hjvcgui48s] {
    background: var(--acv-primary);
    color: white;
    border-color: var(--acv-primary);
}

/* Modal Styles */
.modal[b-hjvcgui48s] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1050;
}

.modal-dialog[b-hjvcgui48s] {
    max-width: 600px;
    margin: 1.75rem auto;
}

.modal-content[b-hjvcgui48s] {
    background: var(--acv-white);
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.modal-header[b-hjvcgui48s] {
    padding: 1.5rem;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title[b-hjvcgui48s] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-800);
}

.modal-body[b-hjvcgui48s] {
    padding: 1.5rem;
}

.modal-footer[b-hjvcgui48s] {
    padding: 1.5rem;
    border-top: 1px solid var(--gray-200);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.modal-backdrop[b-hjvcgui48s] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1040;
}

.form-label[b-hjvcgui48s] {
    font-weight: 500;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
}

.form-control[b-hjvcgui48s] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.form-control:focus[b-hjvcgui48s] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.btn-link[b-hjvcgui48s] {
    text-decoration: none;
    color: var(--acv-primary);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.btn-link:hover[b-hjvcgui48s] {
    text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .work-page[b-hjvcgui48s] {
        padding: 0.5rem 1rem;
    }

    .search-content[b-hjvcgui48s] {
        gap: 1rem;
    }

    .search-main-row[b-hjvcgui48s] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .search-row-secondary[b-hjvcgui48s] {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }

    .filter-group[b-hjvcgui48s] {
        min-width: auto;
        flex: 1 1 100%;
        width: 100%;
    }

    .search-controls[b-hjvcgui48s] {
        justify-content: stretch;
        width: 100%;
        margin-left: 0;
    }

    .search-controls .search-btn[b-hjvcgui48s],
    .search-controls .clear-btn[b-hjvcgui48s],
    .search-controls .export-btn[b-hjvcgui48s] {
        flex: 1;
        max-width: none;
    }

    .list-header-content[b-hjvcgui48s] {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    .card-header-section[b-hjvcgui48s] {
        padding: 1.5rem;
    }

    .list-header[b-hjvcgui48s] {
        padding: 1rem 1.5rem;
    }

    .work-list[b-hjvcgui48s] {
        padding: 1rem;
    }

    .pagination-section[b-hjvcgui48s] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .pagination-info[b-hjvcgui48s] {
        justify-content: center;
    }

    .pagination-controls[b-hjvcgui48s] {
        justify-content: center;
    }
}
/* _content/ltia.portal.web/Components/Pages/Work/Modals/RelatedTaskSearchModal.razor.rz.scp.css */
.related-task-modal-overlay[b-osz3jy1837] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1300;
}

.related-task-modal[b-osz3jy1837] {
    width: min(900px, 94vw);
    max-height: 90vh;
    background: var(--acv-white);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.35);
}

.modal-header[b-osz3jy1837] {
    padding: 1.5rem 1.75rem 1rem;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.modal-header-text h3[b-osz3jy1837] {
    margin: 0;
    font-size: 1.35rem;
    color: var(--gray-900);
}

.modal-header-text p[b-osz3jy1837] {
    margin: 0.2rem 0 0;
    color: var(--gray-500);
}

.modal-close[b-osz3jy1837] {
    border: none;
    background: transparent;
    color: var(--gray-500);
    font-size: 1.15rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

.modal-close:hover[b-osz3jy1837] {
    color: var(--gray-800);
}

.modal-body[b-osz3jy1837] {
    padding: 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow: hidden;
}

.search-form[b-osz3jy1837] {
    margin: 0;
}

.search-input-wrapper[b-osz3jy1837] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    border: 1px solid var(--gray-200);
    border-radius: 999px;
    padding: 0.4rem 0.75rem 0.4rem 1rem;
    background: var(--gray-50);
}

.input-icon[b-osz3jy1837] {
    color: var(--gray-500);
}

.search-input[b-osz3jy1837] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.95rem;
    outline: none;
    color: var(--gray-800);
}

.input-clear[b-osz3jy1837] {
    border: none;
    background: transparent;
    color: var(--gray-400);
    font-size: 0.95rem;
    cursor: pointer;
    padding: 0.2rem;
}

.input-clear:hover[b-osz3jy1837] {
    color: var(--gray-700);
}

.search-submit[b-osz3jy1837] {
    border-radius: 999px;
    padding: 0.5rem 1.2rem;
}

.helper-text[b-osz3jy1837] {
    display: block;
    margin-top: 0.5rem;
    color: var(--gray-500);
    font-size: 0.85rem;
}

.results-panel[b-osz3jy1837] {
    flex: 1;
    min-height: 260px;
}

.results-list[b-osz3jy1837] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 420px;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.results-empty[b-osz3jy1837] {
    border: 1px dashed var(--gray-300);
    border-radius: 16px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    color: var(--gray-500);
    text-align: center;
}

.results-empty i[b-osz3jy1837] {
    font-size: 1.4rem;
}

.results-empty.loading[b-osz3jy1837] {
    color: var(--acv-primary);
}

.results-empty.error[b-osz3jy1837] {
    border-color: var(--error-light);
    color: var(--error-main);
}

.related-task-item[b-osz3jy1837] {
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    background: var(--acv-white);
    padding: 1rem 1.25rem;
    display: flex;
    gap: 1.25rem;
    justify-content: space-between;
    text-align: left;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    cursor: pointer;
    color: inherit;
}

.related-task-item:hover[b-osz3jy1837] {
    border-color: var(--acv-primary);
    box-shadow: 0 12px 24px rgba(43, 110, 255, 0.15);
}

.related-task-item.selected[b-osz3jy1837] {
    border-color: var(--acv-primary);
    background: #f4f7ff;
    box-shadow: 0 12px 30px rgba(43, 110, 255, 0.2);
}

.item-left[b-osz3jy1837] {
    flex: 2;
    min-width: 0;
}

.item-title-row[b-osz3jy1837] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.item-title-row strong[b-osz3jy1837] {
    font-size: 1rem;
    color: var(--gray-900);
    margin: 0;
}

.status-pill[b-osz3jy1837] {
    padding: 0.15rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.status-pill.status-new[b-osz3jy1837] {
    background: #e0f2fe;
    color: #0369a1;
}

.status-pill.status-assigned[b-osz3jy1837] {
    background: #ede9fe;
    color: #5b21b6;
}

.status-pill.status-inprogress[b-osz3jy1837] {
    background: #fef3c7;
    color: #9a3412;
}

.status-pill.status-notachieved[b-osz3jy1837] {
    background: #fee2e2;
    color: #991b1b;
}

.status-pill.status-cancelled[b-osz3jy1837] {
    background: #f5f5f5;
    color: #4b5563;
}

.status-pill.status-paused[b-osz3jy1837] {
    background: #fce7f3;
    color: #9d174d;
}

.status-pill.status-completed[b-osz3jy1837] {
    background: #dcfce7;
    color: #166534;
}

.status-pill.status-closed[b-osz3jy1837] {
    background: #e2e8f0;
    color: #0f172a;
}

.item-description[b-osz3jy1837] {
    margin: 0.45rem 0 0;
    color: var(--gray-600);
    font-size: 0.9rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.item-right[b-osz3jy1837] {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}

.item-meta[b-osz3jy1837] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--gray-500);
}

.item-meta i[b-osz3jy1837] {
    margin-right: 0.35rem;
    color: var(--gray-400);
}

.radio-indicator[b-osz3jy1837] {
    align-self: center;
}

.radio-circle[b-osz3jy1837] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--gray-300);
    display: inline-block;
    transition: all 0.2s ease;
}

.radio-circle.checked[b-osz3jy1837] {
    border-color: var(--acv-primary);
    background: var(--acv-primary);
    box-shadow: inset 0 0 0 4px var(--acv-white);
}

.modal-footer[b-osz3jy1837] {
    padding: 1rem 1.75rem 1.5rem;
    border-top: 1px solid var(--gray-200);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

@media (max-width: 768px) {
    .related-task-modal[b-osz3jy1837] {
        width: 95vw;
        max-height: 95vh;
    }

    .modal-body[b-osz3jy1837] {
        padding: 1.25rem;
    }

    .related-task-item[b-osz3jy1837] {
        flex-direction: column;
    }

    .item-right[b-osz3jy1837] {
        width: 100%;
    }

    .search-input-wrapper[b-osz3jy1837] {
        flex-direction: column;
        align-items: stretch;
        border-radius: 16px;
    }

    .search-input[b-osz3jy1837] {
        width: 100%;
    }

    .search-submit[b-osz3jy1837] {
        width: 100%;
    }

    .modal-footer[b-osz3jy1837] {
        flex-direction: column;
    }
}
/* _content/ltia.portal.web/Components/Pages/Work/Shared/WorkFilterBar.razor.rz.scp.css */
/* Search Section */
.work-search-section[b-s8p7oxxuca] {
    background: var(--acv-white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    margin-bottom: 2rem;
    overflow: visible; /* Quan trọng: để dropdown trồi ra ngoài */
    position: relative;
    z-index: 10;
}

.search-container[b-s8p7oxxuca] {
    padding: 1rem 1.5rem;
}

.search-content[b-s8p7oxxuca] {
    width: 100%;
}

.search-main-row[b-s8p7oxxuca] {
    display: flex;
    align-items: end;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
}

.search-input-group[b-s8p7oxxuca] {
    flex: 1 1 auto;
    min-width: 200px;
    position: relative;
    /* Tăng z-index để dropdown của nó đè lên các phần tử khác */
    z-index: 101;
}

.filter-group[b-s8p7oxxuca] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 150px;
    position: relative;
    z-index: 100;
}

.filter-label[b-s8p7oxxuca] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .filter-label i[b-s8p7oxxuca] {
        color: var(--acv-primary);
    }

.search-input-wrapper[b-s8p7oxxuca] {
    position: relative;
}

/* --- QUAN TRỌNG: SỬA NÚT X NHỎ TRONG Ô INPUT --- */
/* Phải có ::deep vì nút này nằm trong RenderFragment */
[b-s8p7oxxuca] .input-clear,
[b-s8p7oxxuca] .select-clear-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    margin-top: 0;
    /* Xóa viền và nền */
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--gray-400);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
}

    [b-s8p7oxxuca] .input-clear:hover,
    [b-s8p7oxxuca] .select-clear-btn:hover {
        color: var(--gray-600);
        background: var(--gray-100);
    }

.search-icon[b-s8p7oxxuca] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    z-index: 1;
}

/* Style input trong RenderFragment */
[b-s8p7oxxuca] .search-input {
    width: 100%;
    height: 48px;
    padding: 0.75rem 1rem 0.75rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;ư
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--acv-white);
    box-sizing: border-box;
}

/* Khi có nút clear, thêm padding phải cho input */
.search-input-group:has(.input-clear)[b-s8p7oxxuca]  .search-input,
.search-input-group:has(.select-clear-btn)[b-s8p7oxxuca]  .search-input {
    padding-right: 2.5rem;
}

[b-s8p7oxxuca] .search-input:focus {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

/* Style select/filter inputs */
[b-s8p7oxxuca] .filter-select,
.filter-input[b-s8p7oxxuca],
.filter-date-input[b-s8p7oxxuca] {
    width: 100%;
    height: 48px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--acv-white);
    box-sizing: border-box;
}

[b-s8p7oxxuca] .filter-select {
    cursor: pointer;
}

    [b-s8p7oxxuca] .filter-select:focus,
    .filter-input:focus[b-s8p7oxxuca],
    .filter-date-input:focus[b-s8p7oxxuca] {
        outline: none;
        border-color: var(--acv-primary);
        box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
    }

    [b-s8p7oxxuca] .filter-select:hover {
        border-color: var(--gray-400);
    }

.date-range[b-s8p7oxxuca] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.date-range-separator[b-s8p7oxxuca] {
    color: var(--gray-500);
    font-weight: 600;
}

.filter-actions[b-s8p7oxxuca] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    position: relative;
    z-index: 20;
    flex-shrink: 0;
    flex: 0 0 auto;
}

/* Search Controls */
.search-controls[b-s8p7oxxuca] {
    display: flex;
    gap: 0.5rem;
    align-items: end;
    flex-shrink: 0;
    flex: 0 0 auto;
    margin-left: auto;
}

.search-btn[b-s8p7oxxuca] {
    width: 48px;
    height: 48px;
    border: 2px solid var(--acv-primary);
    border-radius: 8px;
    background: var(--acv-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
}

    .search-btn:hover:not(:disabled)[b-s8p7oxxuca] {
        background: var(--acv-primary-dark, #1e40af);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
    }

    .search-btn:disabled[b-s8p7oxxuca] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

/* --- SỬA NÚT X TO (CLEAR FILTER) --- */
.clear-btn[b-s8p7oxxuca] {
    width: 48px;
    height: 48px;
    border: none; /* Không viền */
    background: transparent; /* Không nền */
    color: var(--gray-400);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1.2rem;
}

    .clear-btn:hover:not(:disabled)[b-s8p7oxxuca] {
        color: var(--gray-700);
        background: var(--gray-100);
        transform: translateY(-1px);
    }

    .clear-btn:disabled[b-s8p7oxxuca] {
        opacity: 0.6;
        cursor: not-allowed;
        color: var(--gray-300);
    }

/* Dropdown Styles - Sửa lỗi vỡ layout */
.no-drop-arrow[b-s8p7oxxuca]::-webkit-calendar-picker-indicator {
    opacity: 0;
    display: none;
}

.no-drop-arrow[b-s8p7oxxuca] {
    appearance: textfield;
    -webkit-appearance: textfield;
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
}

.select-search-wrap[b-s8p7oxxuca] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

/* Dropdown Panel Styles */
[b-s8p7oxxuca] .dropdown-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000; /* Đảm bảo nổi lên trên */
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    margin-top: 4px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    max-height: 280px;
    overflow-y: auto;
}

[b-s8p7oxxuca] .dropdown-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    color: #6b7280;
    font-size: 0.95rem;
}

[b-s8p7oxxuca] .spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    display: inline-block;
    animation: spinnerSpin-b-s8p7oxxuca 0.8s linear infinite;
}

@keyframes spinnerSpin-b-s8p7oxxuca {
    to {
        transform: rotate(360deg);
    }
}

[b-s8p7oxxuca] .dropdown-list {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

[b-s8p7oxxuca] .dropdown-item {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
}

    [b-s8p7oxxuca] .dropdown-item:hover {
        background: #f3f4f6;
    }

    [b-s8p7oxxuca] .dropdown-item .code {
        font-weight: 600;
        color: #111827;
    }

    [b-s8p7oxxuca] .dropdown-item .name {
        color: #374151;
    }

[b-s8p7oxxuca] .dropdown-empty {
    padding: 10px 12px;
    color: #9ca3af;
}

/* Hide dropdown arrow in Edge/IE */
input[list].no-drop-arrow[b-s8p7oxxuca]::-ms-expand {
    display: none;
}

/* Responsive */
@media (max-width: 1024px) {
    .search-main-row[b-s8p7oxxuca] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-input-group[b-s8p7oxxuca],
    .filter-group[b-s8p7oxxuca] {
        min-width: auto;
        flex: 1 1 100%;
        width: 100%;
    }

    .filter-actions[b-s8p7oxxuca] {
        width: 100%;
        justify-content: stretch;
    }

        .filter-actions .btn[b-s8p7oxxuca] {
            flex: 1;
        }

    .search-controls[b-s8p7oxxuca] {
        justify-content: stretch;
        width: 100%;
        margin-left: 0;
    }

        .search-controls .search-btn[b-s8p7oxxuca],
        .search-controls .clear-btn[b-s8p7oxxuca] {
            flex: 1;
            max-width: none;
        }
}

@media (max-width: 768px) {
    .filter-group[b-s8p7oxxuca] {
        width: 100%;
    }

    .filter-actions[b-s8p7oxxuca] {
        width: 100%;
        justify-content: stretch;
    }

        .filter-actions .btn[b-s8p7oxxuca] {
            flex: 1;
        }

    .search-controls[b-s8p7oxxuca] {
        width: 100%;
        justify-content: stretch;
    }

        .search-controls .search-btn[b-s8p7oxxuca],
        .search-controls .clear-btn[b-s8p7oxxuca] {
            flex: 1;
        }
}
/* _content/ltia.portal.web/Components/Pages/Work/Work.razor.rz.scp.css */
/* CSS Variables - Đặt trực tiếp vào .work-page */
.work-page[b-pv45tv3qls] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    
    padding: 1rem;
    background: linear-gradient(135deg, #e3f2fd 0%, #ffffff 100%);
    background-attachment: fixed;
    min-height: 100vh;
    animation: fadeIn-b-pv45tv3qls 0.5s ease-in-out;
}

@keyframes fadeIn-b-pv45tv3qls {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Card Header Section */
.card-header-section[b-pv45tv3qls] {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 1.5rem 2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15),
                0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.18);
    animation: slideDown-b-pv45tv3qls 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all 0.3s ease;
}

.card-header-section:hover[b-pv45tv3qls] {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(31, 38, 135, 0.2),
                0 4px 12px rgba(0, 0, 0, 0.08);
}

@keyframes slideDown-b-pv45tv3qls {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.card-header-content[b-pv45tv3qls] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.card-header-icon[b-pv45tv3qls] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
    box-shadow: 0 8px 20px rgba(33, 76, 166, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    animation: pulse-b-pv45tv3qls 2s ease-in-out infinite;
    transition: all 0.3s ease;
}

.card-header-icon:hover[b-pv45tv3qls] {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 12px 28px rgba(33, 76, 166, 0.5);
}

@keyframes pulse-b-pv45tv3qls {
    0%, 100% {
        box-shadow: 0 8px 20px rgba(33, 76, 166, 0.4),
                    inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    50% {
        box-shadow: 0 8px 28px rgba(33, 76, 166, 0.6),
                    inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
}

.card-header-text h1[b-pv45tv3qls] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-800);
}

.card-header-text p[b-pv45tv3qls] {
    margin: 0.25rem 0 0 0;
    color: var(--gray-600);
    font-size: 1rem;
}


/* Buttons */
.btn[b-pv45tv3qls] {
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    height: 48px;
    box-sizing: border-box;
}

.btn:disabled[b-pv45tv3qls] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary[b-pv45tv3qls] {
    background: var(--acv-primary);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-pv45tv3qls] {
    background: var(--acv-primary-700);
}

.btn-secondary[b-pv45tv3qls] {
    background: var(--gray-500);
    color: white;
}

.btn-secondary:hover:not(:disabled)[b-pv45tv3qls] {
    background: var(--gray-600);
}

.btn-search[b-pv45tv3qls] {
    background: var(--success-main);
    color: white;
}

.btn-search:hover:not(:disabled)[b-pv45tv3qls] {
    background: var(--success-dark);
}

/* List Container */
.work-list-container[b-pv45tv3qls] {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15),
                0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.18);
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
    animation: slideUp-b-pv45tv3qls 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.1s both;
    transition: all 0.3s ease;
}

.work-list-container:hover[b-pv45tv3qls] {
    box-shadow: 0 12px 40px rgba(31, 38, 135, 0.2),
                0 4px 12px rgba(0, 0, 0, 0.08);
}

@keyframes slideUp-b-pv45tv3qls {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* List Header */
.list-header[b-pv45tv3qls] {
    background: var(--acv-white) !important;
    padding: 1.75rem 2rem;
    border-bottom: 1px solid var(--gray-200);
    border-radius: 16px 16px 0 0;
    position: relative;
    z-index: 1;
    overflow: visible;
}

.list-header[b-pv45tv3qls]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 16px 0 0 0;
}

.list-header-content[b-pv45tv3qls] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0;
}

.list-title-section[b-pv45tv3qls] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.list-title[b-pv45tv3qls] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.list-title i[b-pv45tv3qls] {
    color: var(--acv-primary);
    font-size: 1.25rem;
}

.list-count[b-pv45tv3qls] {
    background: var(--acv-primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Sort Controls */
.sort-controls[b-pv45tv3qls] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.refresh-btn[b-pv45tv3qls],
.add-work-btn[b-pv45tv3qls] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--acv-white);
    color: var(--acv-primary);
    border: 2px solid var(--acv-primary);
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 120px;
    justify-content: center;
    text-decoration: none;
}

.refresh-btn:hover:not(:disabled)[b-pv45tv3qls],
.add-work-btn:hover[b-pv45tv3qls] {
    background: var(--acv-primary);
    color: var(--acv-white);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
    text-decoration: none;
}

.refresh-btn:disabled[b-pv45tv3qls] {
    opacity: 0.5;
    cursor: not-allowed;
}

.add-work-btn[b-pv45tv3qls] {
    background: var(--acv-primary);
    color: var(--acv-white);
}

.add-work-btn:hover[b-pv45tv3qls] {
    background: var(--acv-primary-700);
}

/* Work List */
.work-list[b-pv45tv3qls] {
    padding: 1.5rem;
    min-height: 200px;
}

/* Loading State */
.loading-state[b-pv45tv3qls] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: var(--gray-600);
}

.loading-spinner[b-pv45tv3qls] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--gray-200);
    border-top: 3px solid var(--acv-primary);
    border-radius: 50%;
    animation: spin-b-pv45tv3qls 1s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin-b-pv45tv3qls {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Error State */
.error-state[b-pv45tv3qls] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.error-icon[b-pv45tv3qls] {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.error-content h3[b-pv45tv3qls] {
    margin: 0 0 0.5rem 0;
    color: var(--error-main);
    font-size: 1.25rem;
}

.error-content p[b-pv45tv3qls] {
    margin: 0 0 1.5rem 0;
    color: var(--gray-600);
}

/* Work Table */
.work-table-container[b-pv45tv3qls] {
    overflow-x: auto;
    border-radius: 12px;
}

.table-wrapper[b-pv45tv3qls] {
    overflow-x: auto;
}

.data-table[b-pv45tv3qls] {
    width: 100%;
    border-collapse: collapse;
    background: var(--acv-white);
    border-radius: 12px;
    overflow: hidden;
}

.data-table th[b-pv45tv3qls] {
    background: var(--gray-50);
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--gray-700);
    font-size: 0.9rem;
    border-bottom: 2px solid var(--gray-200);
}

.data-table td[b-pv45tv3qls] {
    padding: 1rem;
    border-bottom: 1px solid var(--gray-200);
    vertical-align: middle;
}

/* Đảm bảo các cột có max-width để ellipsis hoạt động */
.data-table td:nth-child(2)[b-pv45tv3qls] {
    max-width: 0;
}

.data-table td:nth-child(3)[b-pv45tv3qls],
.data-table td:nth-child(4)[b-pv45tv3qls] {
    max-width: 0;
}

.data-table tr:hover[b-pv45tv3qls] {
    background: var(--gray-50);
}

/* Column Widths - Cân đối và đẹp mắt */
.col-stt[b-pv45tv3qls] {
    width: 60px;
    text-align: center !important;
}

.col-title[b-pv45tv3qls] {
    width: 35%;
    /* min-width: 400px; */
}

.col-creator[b-pv45tv3qls] {
    width: 15%;
    min-width: 120px;
}

.col-assignee[b-pv45tv3qls] {
    width: 12%;
    min-width: 150px;
}

.col-status[b-pv45tv3qls] {
    width: 10%;
    min-width: 100px;
    text-align: left !important;
}

.col-priority[b-pv45tv3qls] {
    width: 10%;
    min-width: 100px;
    text-align: left !important;
}

.col-deadline[b-pv45tv3qls] {
    width: 10%;
    min-width: 100px;
}

.col-created[b-pv45tv3qls] {
    width: 13%;
    min-width: 120px;
}

.col-actions[b-pv45tv3qls] {
    width: 120px;

}

/* STT Number */
.stt-number[b-pv45tv3qls] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--gray-100);
    color: var(--gray-600);
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
}

.badge-id[b-pv45tv3qls] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: var(--gray-100);
    color: var(--gray-600);
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

.work-title strong[b-pv45tv3qls] {
    color: var(--gray-800);
    font-weight: 600;
}

.work-title-clickable[b-pv45tv3qls] {
    cursor: pointer !important;
    transition: all 0.2s ease;
    padding: 0.25rem 0.5rem;
    margin: -0.25rem -0.5rem;
    border-radius: 6px;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.work-title-clickable strong[b-pv45tv3qls] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.work-title-clickable[b-pv45tv3qls],
.work-title-clickable *[b-pv45tv3qls] {
    cursor: pointer !important;
}

.work-title-clickable:hover[b-pv45tv3qls] {
    background-color: var(--acv-primary-lighter);
    color: var(--acv-primary);
    text-decoration: underline;
}

.work-title-clickable:hover strong[b-pv45tv3qls] {
    color: var(--acv-primary);
    text-decoration: underline;
}

.assignee-info[b-pv45tv3qls],
.creator-info[b-pv45tv3qls] {
    font-size: 0.9rem;
}

.assignee-name[b-pv45tv3qls],
.creator-name[b-pv45tv3qls] {
    font-weight: 600;
    color: var(--gray-800);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    display: block;
}

.no-assignee[b-pv45tv3qls],
.no-creator[b-pv45tv3qls] {
    color: var(--gray-400);
    font-style: italic;
}

.status-badge[b-pv45tv3qls] {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 85px;
    text-align: center;
    white-space: nowrap;
}

.status-badge.status-new[b-pv45tv3qls] {
    background: #fef3c7;
    color: #92400e;
}

.status-badge.status-assigned[b-pv45tv3qls] {
    background: #dbeafe;
    color: #1e40af;
}

.status-badge.status-inprogress[b-pv45tv3qls] {
    background: #dbeafe;
    color: #1e40af;
}

.status-badge.status-notachieved[b-pv45tv3qls] {
    background: #fee2e2;
    color: #991b1b;
}

.status-badge.status-paused[b-pv45tv3qls] {
    background: #fef3c7;
    color: #92400e;
}

.status-badge.status-completed[b-pv45tv3qls] {
    background: #d1fae5;
    color: #065f46;
}

.status-badge.status-closed[b-pv45tv3qls] {
    background: #e5e7eb;
    color: #374151;
}

.status-badge.status-cancelled[b-pv45tv3qls] {
    background: #fee2e2;
    color: #991b1b;
}

.status-badge.status-unknown[b-pv45tv3qls] {
    background: #e5e7eb;
    color: #374151;
}

.priority-badge[b-pv45tv3qls] {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 85px;
    text-align: center;
    white-space: nowrap;
}

.priority-badge.priority-low[b-pv45tv3qls] {
    background: #f0f9ff;
    color: #0369a1;
}

.priority-badge.priority-medium[b-pv45tv3qls] {
    background: #fef3c7;
    color: #92400e;
}

.priority-badge.priority-high[b-pv45tv3qls] {
    background: #fed7aa;
    color: #c2410c;
}

.priority-badge.priority-urgent[b-pv45tv3qls] {
    background: #fee2e2;
    color: #991b1b;
}

.no-priority[b-pv45tv3qls] {
    color: var(--gray-400);
    font-style: italic;
}

.date-text[b-pv45tv3qls] {
    color: var(--gray-600);
    font-size: 0.9rem;
}

.date-time-small[b-pv45tv3qls] {
    color: var(--gray-400);
    font-size: 0.75rem;
    margin-top: 0.15rem;
}

.date-text.due-date-overdue[b-pv45tv3qls] {
    color: var(--error-main);
    font-weight: 600;
}

.date-text.due-date-urgent[b-pv45tv3qls] {
    color: var(--warning-main);
    font-weight: 600;
}

.date-text.due-date-normal[b-pv45tv3qls] {
    color: var(--gray-600);
}

.no-date[b-pv45tv3qls] {
    color: var(--gray-400);
    font-style: italic;
}

.action-buttons[b-pv45tv3qls] {
    display: flex;
    gap: 0.5rem;
}

.btn-icon[b-pv45tv3qls] {
    width: 32px;
    height: 32px;
    border: 1px solid var(--gray-300);
    background: white;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.btn-icon:hover[b-pv45tv3qls] {
    background: var(--gray-50);
    border-color: var(--gray-400);
}

.btn-view:hover[b-pv45tv3qls] {
    background: var(--acv-primary);
    color: white;
    border-color: var(--acv-primary);
}

.btn-edit:hover[b-pv45tv3qls] {
    background: var(--warning-main);
    color: white;
    border-color: var(--warning-main);
}

.btn-status:hover[b-pv45tv3qls],
.btn-status-disabled[b-pv45tv3qls] {
    background: #8b5cf6;
    color: white;
    border-color: #8b5cf6;
}

.btn-status-disabled[b-pv45tv3qls] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-history:hover[b-pv45tv3qls] {
    background: var(--acv-primary-light);
    color: white;
    border-color: var(--acv-primary-light);
}

.btn-delete:hover[b-pv45tv3qls] {
    background: var(--error-main);
    color: white;
    border-color: var(--error-main);
}

/* Empty State */
.empty-state[b-pv45tv3qls] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.empty-state-icon[b-pv45tv3qls] {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
    color: var(--gray-400);
}

.empty-state h3[b-pv45tv3qls] {
    margin: 0 0 0.5rem 0;
    color: var(--gray-800);
    font-size: 1.25rem;
}

.empty-state p[b-pv45tv3qls] {
    margin: 0 0 1.5rem 0;
    color: var(--gray-600);
}

.empty-state-actions[b-pv45tv3qls] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

/* Pagination */
.pagination-section[b-pv45tv3qls] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-top: 1px solid var(--gray-200);
    margin-top: 2rem;
}

.pagination-info[b-pv45tv3qls] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--gray-600);
    font-size: 0.9rem;
}

.pagination-controls[b-pv45tv3qls] {
    display: flex;
    gap: 0.25rem;
}

.btn-pagination[b-pv45tv3qls] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gray-300);
    background: white;
    color: var(--gray-700);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    min-width: 40px;
    transition: all 0.2s ease;
}

.btn-pagination:hover:not(:disabled)[b-pv45tv3qls] {
    background: var(--gray-50);
    border-color: var(--gray-400);
}

.btn-pagination:disabled[b-pv45tv3qls] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-pagination.active[b-pv45tv3qls] {
    background: var(--acv-primary);
    color: white;
    border-color: var(--acv-primary);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .work-page[b-pv45tv3qls] {
        padding: 0.5rem 1rem;
    }
}

@media (max-width: 768px) {
    .list-header-content[b-pv45tv3qls] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .sort-controls[b-pv45tv3qls] {
        justify-content: stretch;
    }

    .refresh-btn[b-pv45tv3qls],
    .add-work-btn[b-pv45tv3qls] {
        flex: 1;
    }

    .pagination-section[b-pv45tv3qls] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .pagination-controls[b-pv45tv3qls] {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .data-table th[b-pv45tv3qls],
    .data-table td[b-pv45tv3qls] {
        padding: 0.75rem 0.5rem;
    }

    .action-buttons[b-pv45tv3qls] {
        flex-direction: column;
        gap: 0.25rem;
    }

    .btn-icon[b-pv45tv3qls] {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }
}

/* Create Dropdown Menu - NEW STYLES ONLY */
.create-dropdown-container[b-pv45tv3qls] {
    position: relative;
    display: inline-block;
}

.create-dropdown-btn[b-pv45tv3qls] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--acv-primary);
    color: var(--acv-white);
    border: 2px solid var(--acv-primary);
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 100px;
    justify-content: center;
    text-decoration: none;
}

.create-dropdown-btn:hover[b-pv45tv3qls] {
    background: var(--acv-primary-700);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
}

.create-dropdown-btn i.fa-chevron-down[b-pv45tv3qls] {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.create-dropdown-container:has(.create-dropdown-menu) .create-dropdown-btn i.fa-chevron-down[b-pv45tv3qls] {
    transform: rotate(180deg);
}

.create-dropdown-menu[b-pv45tv3qls] {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    background: var(--acv-white);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    z-index: 1000;
    overflow: hidden;
    animation: dropdownFadeIn-b-pv45tv3qls 0.2s ease;
}

@keyframes dropdownFadeIn-b-pv45tv3qls {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.create-dropdown-item[b-pv45tv3qls] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: var(--gray-700);
    text-decoration: none;
    transition: all 0.2s ease;
    border-bottom: 1px solid var(--gray-100);
}

.create-dropdown-item:last-child[b-pv45tv3qls] {
    border-bottom: none;
}

.create-dropdown-item:hover[b-pv45tv3qls] {
    background: var(--gray-50);
    color: var(--acv-primary);
}

.create-dropdown-item i[b-pv45tv3qls] {
    width: 20px;
    text-align: center;
    color: var(--acv-primary);
    font-size: 0.9rem;
}

.create-dropdown-item span[b-pv45tv3qls] {
    font-weight: 500;
}

/* Close dropdown when clicking outside */
body:has(.create-dropdown-container)[b-pv45tv3qls] {
    position: relative;
}

@media (max-width: 768px) {
    .create-dropdown-menu[b-pv45tv3qls] {
        right: auto;
        left: 0;
    }
}

/* Container giả lập ô input */
.search-pill-container[b-pv45tv3qls] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-height: 48px; /* Khớp chiều cao input cũ */
    padding: 4px 8px;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    background: var(--acv-white);
    transition: all 0.2s ease;
    cursor: text; /* Để người dùng biết có thể click vào */
}

    .search-pill-container:focus-within[b-pv45tv3qls] {
        border-color: var(--acv-primary);
        box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
    }

/* Viên thuốc (Pill) */
.search-pill[b-pv45tv3qls] {
    display: inline-flex;
    align-items: center;
    background-color: #e0e7ff; /* Màu nền xanh nhạt */
    color: #1e40af; /* Màu chữ xanh đậm */
    border-radius: 16px;
    padding: 2px 10px;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
}

/* Nút X trong viên thuốc */
.pill-remove[b-pv45tv3qls] {
    margin-left: 6px;
    cursor: pointer;
    font-weight: bold;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

    .pill-remove:hover[b-pv45tv3qls] {
        background-color: rgba(0,0,0,0.1);
        color: #ef4444; /* Màu đỏ khi hover */
    }

/* Ô input thật (ẩn viền để hòa vào container) */
.pill-input[b-pv45tv3qls] {
    flex: 1;
    min-width: 120px;
    border: none;
    outline: none;
    background: transparent;
    padding: 4px;
    font-size: 0.95rem;
    color: var(--gray-900);
}
/* _content/ltia.portal.web/Components/Pages/Work/WorkAssigned.razor.rz.scp.css */
/* CSS Variables - Đặt trực tiếp vào .work-page */
.work-page[b-t4ua4akm2v] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    
    padding: 1rem;
    background: linear-gradient(135deg, #e3f2fd 0%, #ffffff 100%);
    background-attachment: fixed;
    min-height: 100vh;
    animation: fadeIn-b-t4ua4akm2v 0.5s ease-in-out;
}

@keyframes fadeIn-b-t4ua4akm2v {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Card Header Section */
.card-header-section[b-t4ua4akm2v] {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 1.5rem 2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15),
                0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.18);
    animation: slideDown-b-t4ua4akm2v 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all 0.3s ease;
}

.card-header-section:hover[b-t4ua4akm2v] {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(31, 38, 135, 0.2),
                0 4px 12px rgba(0, 0, 0, 0.08);
}

@keyframes slideDown-b-t4ua4akm2v {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.card-header-content[b-t4ua4akm2v] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.card-header-icon[b-t4ua4akm2v] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
    box-shadow: 0 8px 20px rgba(33, 76, 166, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    animation: pulse-b-t4ua4akm2v 2s ease-in-out infinite;
    transition: all 0.3s ease;
}

.card-header-icon:hover[b-t4ua4akm2v] {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 12px 28px rgba(33, 76, 166, 0.5);
}

@keyframes pulse-b-t4ua4akm2v {
    0%, 100% {
        box-shadow: 0 8px 20px rgba(33, 76, 166, 0.4),
                    inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    50% {
        box-shadow: 0 8px 28px rgba(33, 76, 166, 0.6),
                    inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
}

.card-header-text h1[b-t4ua4akm2v] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-800);
}

.card-header-text p[b-t4ua4akm2v] {
    margin: 0.25rem 0 0 0;
    color: var(--gray-600);
    font-size: 1rem;
}

/* Buttons */
.btn[b-t4ua4akm2v] {
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    height: 48px;
    box-sizing: border-box;
}

.btn:disabled[b-t4ua4akm2v] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary[b-t4ua4akm2v] {
    background: var(--acv-primary);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-t4ua4akm2v] {
    background: var(--acv-primary-700);
}

.btn-secondary[b-t4ua4akm2v] {
    background: var(--gray-500);
    color: white;
}

.btn-secondary:hover:not(:disabled)[b-t4ua4akm2v] {
    background: var(--gray-600);
}

.btn-search[b-t4ua4akm2v] {
    background: var(--success-main);
    color: white;
}

.btn-search:hover:not(:disabled)[b-t4ua4akm2v] {
    background: var(--success-dark);
}

/* List Container */
.work-list-container[b-t4ua4akm2v] {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15),
                0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.18);
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
    animation: slideUp-b-t4ua4akm2v 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.1s both;
    transition: all 0.3s ease;
}

.work-list-container:hover[b-t4ua4akm2v] {
    box-shadow: 0 12px 40px rgba(31, 38, 135, 0.2),
                0 4px 12px rgba(0, 0, 0, 0.08);
}

@keyframes slideUp-b-t4ua4akm2v {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* List Header */
.list-header[b-t4ua4akm2v] {
    background: var(--acv-white) !important;
    padding: 1.75rem 2rem;
    border-bottom: 1px solid var(--gray-200);
    border-radius: 16px 16px 0 0;
    position: relative;
    z-index: 1;
    overflow: visible;
}

.list-header[b-t4ua4akm2v]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 16px 0 0 0;
}

.list-header-content[b-t4ua4akm2v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0;
}

.list-title-section[b-t4ua4akm2v] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.list-title[b-t4ua4akm2v] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.list-title i[b-t4ua4akm2v] {
    color: var(--acv-primary);
    font-size: 1.25rem;
}

.list-count[b-t4ua4akm2v] {
    background: var(--acv-primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Sort Controls */
.sort-controls[b-t4ua4akm2v] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.refresh-btn[b-t4ua4akm2v] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--acv-white);
    color: var(--acv-primary);
    border: 2px solid var(--acv-primary);
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 120px;
    justify-content: center;
    text-decoration: none;
}

.refresh-btn:hover:not(:disabled)[b-t4ua4akm2v] {
    background: var(--acv-primary);
    color: var(--acv-white);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
    text-decoration: none;
}

.refresh-btn:disabled[b-t4ua4akm2v] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Work List */
.work-list[b-t4ua4akm2v] {
    padding: 1.5rem;
    min-height: 200px;
}

/* Loading State */
.loading-state[b-t4ua4akm2v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: var(--gray-600);
}

.loading-spinner[b-t4ua4akm2v] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--gray-200);
    border-top: 3px solid var(--acv-primary);
    border-radius: 50%;
    animation: spin-b-t4ua4akm2v 1s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin-b-t4ua4akm2v {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Error State */
.error-state[b-t4ua4akm2v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.error-icon[b-t4ua4akm2v] {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.error-content h3[b-t4ua4akm2v] {
    margin: 0 0 0.5rem 0;
    color: var(--error-main);
    font-size: 1.25rem;
}

.error-content p[b-t4ua4akm2v] {
    margin: 0 0 1.5rem 0;
    color: var(--gray-600);
}

/* Work Table */
.work-table-container[b-t4ua4akm2v] {
    overflow-x: auto;
    border-radius: 12px;
}

.table-wrapper[b-t4ua4akm2v] {
    overflow-x: auto;
}

.data-table[b-t4ua4akm2v] {
    width: 100%;
    border-collapse: collapse;
    background: var(--acv-white);
    border-radius: 12px;
    overflow: hidden;
}

.data-table th[b-t4ua4akm2v] {
    background: var(--gray-50);
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--gray-700);
    font-size: 0.9rem;
    border-bottom: 2px solid var(--gray-200);
}

.data-table td[b-t4ua4akm2v] {
    padding: 1rem;
    border-bottom: 1px solid var(--gray-200);
    vertical-align: middle;
}

/* Đảm bảo các cột có max-width để ellipsis hoạt động */
.data-table td:nth-child(2)[b-t4ua4akm2v] {
    max-width: 0;
}

.data-table td:nth-child(3)[b-t4ua4akm2v],
.data-table td:nth-child(4)[b-t4ua4akm2v] {
    max-width: 0;
}

.data-table tr:hover[b-t4ua4akm2v] {
    background: var(--gray-50);
}

/* Column Widths - Cân đối và đẹp mắt */
.col-stt[b-t4ua4akm2v] {
    width: 60px;
    text-align: center !important;
}

.col-title[b-t4ua4akm2v] {
    width: 35%;
    /* min-width: 400px; */
}

.col-creator[b-t4ua4akm2v] {
    width: 15%;
    min-width: 120px;
}

.col-assignee[b-t4ua4akm2v] {
    width: 12%;
    min-width: 150px;
}

.col-status[b-t4ua4akm2v] {
    width: 10%;
    min-width: 100px;
    text-align: left !important;
}

.col-priority[b-t4ua4akm2v] {
    width: 10%;
    min-width: 100px;
    text-align: left !important;
}

.col-deadline[b-t4ua4akm2v] {
    width: 10%;
    min-width: 100px;
}

.col-created[b-t4ua4akm2v] {
    width: 13%;
    min-width: 120px;
}

.col-actions[b-t4ua4akm2v] {
    width: 120px;
}

/* STT Number */
.stt-number[b-t4ua4akm2v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--gray-100);
    color: var(--gray-600);
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
}

.badge-id[b-t4ua4akm2v] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: var(--gray-100);
    color: var(--gray-600);
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

.work-title strong[b-t4ua4akm2v] {
    color: var(--gray-800);
    font-weight: 600;
}

.work-title-clickable[b-t4ua4akm2v] {
    cursor: pointer !important;
    transition: all 0.2s ease;
    padding: 0.25rem 0.5rem;
    margin: -0.25rem -0.5rem;
    border-radius: 6px;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.work-title-clickable strong[b-t4ua4akm2v] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.work-title-clickable[b-t4ua4akm2v],
.work-title-clickable *[b-t4ua4akm2v] {
    cursor: pointer !important;
}

.work-title-clickable:hover[b-t4ua4akm2v] {
    background-color: var(--acv-primary-lighter);
    color: var(--acv-primary);
    text-decoration: underline;
}

.work-title-clickable:hover strong[b-t4ua4akm2v] {
    color: var(--acv-primary);
    text-decoration: underline;
}

.assignee-info[b-t4ua4akm2v],
.creator-info[b-t4ua4akm2v] {
    font-size: 0.9rem;
}

.assignee-name[b-t4ua4akm2v],
.creator-name[b-t4ua4akm2v] {
    font-weight: 600;
    color: var(--gray-800);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    display: block;
}

.no-assignee[b-t4ua4akm2v],
.no-creator[b-t4ua4akm2v] {
    color: var(--gray-400);
    font-style: italic;
}

.status-badge[b-t4ua4akm2v] {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 85px;
    text-align: center;
    white-space: nowrap;
}

.status-badge.status-new[b-t4ua4akm2v] {
    background: #fef3c7;
    color: #92400e;
}

.status-badge.status-assigned[b-t4ua4akm2v] {
    background: #dbeafe;
    color: #1e40af;
}

.status-badge.status-inprogress[b-t4ua4akm2v] {
    background: #dbeafe;
    color: #1e40af;
}

.status-badge.status-notachieved[b-t4ua4akm2v] {
    background: #fee2e2;
    color: #991b1b;
}

.status-badge.status-paused[b-t4ua4akm2v] {
    background: #fef3c7;
    color: #92400e;
}

.status-badge.status-completed[b-t4ua4akm2v] {
    background: #d1fae5;
    color: #065f46;
}

.status-badge.status-closed[b-t4ua4akm2v] {
    background: #e5e7eb;
    color: #374151;
}

.status-badge.status-cancelled[b-t4ua4akm2v] {
    background: #fee2e2;
    color: #991b1b;
}

.status-badge.status-unknown[b-t4ua4akm2v] {
    background: #e5e7eb;
    color: #374151;
}

.priority-badge[b-t4ua4akm2v] {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 85px;
    text-align: center;
    white-space: nowrap;
}

.priority-badge.priority-low[b-t4ua4akm2v] {
    background: #f0f9ff;
    color: #0369a1;
}

.priority-badge.priority-medium[b-t4ua4akm2v] {
    background: #fef3c7;
    color: #92400e;
}

.priority-badge.priority-high[b-t4ua4akm2v] {
    background: #fed7aa;
    color: #c2410c;
}

.priority-badge.priority-urgent[b-t4ua4akm2v] {
    background: #fee2e2;
    color: #991b1b;
}

.no-priority[b-t4ua4akm2v] {
    color: var(--gray-400);
    font-style: italic;
}

.date-text[b-t4ua4akm2v] {
    color: var(--gray-600);
    font-size: 0.9rem;
}

.date-time-small[b-t4ua4akm2v] {
    color: var(--gray-400);
    font-size: 0.75rem;
    margin-top: 0.15rem;
}

.date-text.due-date-overdue[b-t4ua4akm2v] {
    color: var(--error-main);
    font-weight: 600;
}

.date-text.due-date-urgent[b-t4ua4akm2v] {
    color: var(--warning-main);
    font-weight: 600;
}

.date-text.due-date-normal[b-t4ua4akm2v] {
    color: var(--gray-600);
}

.no-date[b-t4ua4akm2v] {
    color: var(--gray-400);
    font-style: italic;
}

.action-buttons[b-t4ua4akm2v] {
    display: flex;
    gap: 0.5rem;
}

.btn-icon[b-t4ua4akm2v] {
    width: 32px;
    height: 32px;
    border: 1px solid var(--gray-300);
    background: white;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.btn-icon:hover[b-t4ua4akm2v] {
    background: var(--gray-50);
    border-color: var(--gray-400);
}

.btn-view:hover[b-t4ua4akm2v] {
    background: var(--acv-primary);
    color: white;
    border-color: var(--acv-primary);
}

.btn-edit:hover[b-t4ua4akm2v] {
    background: var(--warning-main);
    color: white;
    border-color: var(--warning-main);
}

.btn-status:hover[b-t4ua4akm2v],
.btn-status-disabled[b-t4ua4akm2v] {
    background: #8b5cf6;
    color: white;
    border-color: #8b5cf6;
}

.btn-status-disabled[b-t4ua4akm2v] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-history:hover[b-t4ua4akm2v] {
    background: var(--acv-primary-light);
    color: white;
    border-color: var(--acv-primary-light);
}

.btn-delete:hover[b-t4ua4akm2v] {
    background: var(--error-main);
    color: white;
    border-color: var(--error-main);
}

/* Empty State */
.empty-state[b-t4ua4akm2v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.empty-state-icon[b-t4ua4akm2v] {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
    color: var(--gray-400);
}

.empty-state h3[b-t4ua4akm2v] {
    margin: 0 0 0.5rem 0;
    color: var(--gray-800);
    font-size: 1.25rem;
}

.empty-state p[b-t4ua4akm2v] {
    margin: 0 0 1.5rem 0;
    color: var(--gray-600);
}

/* Pagination */
.pagination-section[b-t4ua4akm2v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-top: 1px solid var(--gray-200);
    margin-top: 2rem;
}

.pagination-info[b-t4ua4akm2v] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--gray-600);
    font-size: 0.9rem;
}

.pagination-controls[b-t4ua4akm2v] {
    display: flex;
    gap: 0.25rem;
}

.btn-pagination[b-t4ua4akm2v] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gray-300);
    background: white;
    color: var(--gray-700);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    min-width: 40px;
    transition: all 0.2s ease;
}

.btn-pagination:hover:not(:disabled)[b-t4ua4akm2v] {
    background: var(--gray-50);
    border-color: var(--gray-400);
}

.btn-pagination:disabled[b-t4ua4akm2v] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-pagination.active[b-t4ua4akm2v] {
    background: var(--acv-primary);
    color: white;
    border-color: var(--acv-primary);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .work-page[b-t4ua4akm2v] {
        padding: 0.5rem 1rem;
    }
}

@media (max-width: 768px) {
    .list-header-content[b-t4ua4akm2v] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .sort-controls[b-t4ua4akm2v] {
        justify-content: stretch;
    }

    .refresh-btn[b-t4ua4akm2v] {
        flex: 1;
    }

    .pagination-section[b-t4ua4akm2v] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .pagination-controls[b-t4ua4akm2v] {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .data-table th[b-t4ua4akm2v],
    .data-table td[b-t4ua4akm2v] {
        padding: 0.75rem 0.5rem;
    }

    .action-buttons[b-t4ua4akm2v] {
        flex-direction: column;
        gap: 0.25rem;
    }

    .btn-icon[b-t4ua4akm2v] {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }
}

.add-work-btn[b-t4ua4akm2v] {
    background: var(--acv-primary);
    color: var(--acv-white);
}

.add-work-btn[b-t4ua4akm2v] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--acv-white);
    color: var(--acv-primary);
    border: 2px solid var(--acv-primary);
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 120px;
    justify-content: center;
    text-decoration: none;
}

.add-work-btn:hover[b-t4ua4akm2v] {
    background: var(--acv-primary);
    color: var(--acv-white);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
    text-decoration: none;
}


.add-work-btn[b-t4ua4akm2v] {
    background: var(--acv-primary);
    color: var(--acv-white);
}

    .add-work-btn:hover[b-t4ua4akm2v] {
        background: var(--acv-primary-700);
    }

/* */
/* Styles cho giao diện Pill Search */
.search-pill-container[b-t4ua4akm2v] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-height: 48px;
    padding: 4px 8px;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    background: var(--acv-white);
    transition: all 0.2s ease;
    cursor: text;
}

    .search-pill-container:focus-within[b-t4ua4akm2v] {
        border-color: var(--acv-primary);
        box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
    }

.search-pill[b-t4ua4akm2v] {
    display: inline-flex;
    align-items: center;
    background-color: #e0e7ff;
    color: #1e40af;
    border-radius: 16px;
    padding: 2px 10px;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
}

.pill-remove[b-t4ua4akm2v] {
    margin-left: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

    .pill-remove:hover[b-t4ua4akm2v] {
        background-color: rgba(0,0,0,0.1);
        color: #ef4444;
    }

.pill-input[b-t4ua4akm2v] {
    flex: 1;
    min-width: 120px;
    border: none;
    outline: none;
    background: transparent;
    padding: 4px;
    font-size: 0.95rem;
    color: var(--gray-900);
}
/* _content/ltia.portal.web/Components/Pages/Work/WorkCreate.razor.rz.scp.css */
/* CSS Variables - Đặt trực tiếp vào .task-page */
.task-page[b-tpoqjn9ag9] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    --accent-warning: #f59e0b;
    --accent-success: #0ea5e9;
    
    padding: 1rem;
    background: linear-gradient(135deg, #e3f2fd 0%, #ffffff 100%);
    background-attachment: fixed;
    min-height: 100vh;
    animation: fadeIn-b-tpoqjn9ag9 0.5s ease-in-out;
}

@keyframes fadeIn-b-tpoqjn9ag9 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Card Header */
.task-page-card-header[b-tpoqjn9ag9] {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 1.5rem 2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15),
                0 2px 8px rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    animation: slideDown-b-tpoqjn9ag9 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all 0.3s ease;
}

.task-page-card-header:hover[b-tpoqjn9ag9] {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(31, 38, 135, 0.2),
                0 4px 12px rgba(0, 0, 0, 0.08);
}

@keyframes slideDown-b-tpoqjn9ag9 {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.header-content[b-tpoqjn9ag9] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-icon[b-tpoqjn9ag9] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
    box-shadow: 0 8px 20px rgba(33, 76, 166, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    animation: pulse-b-tpoqjn9ag9 2s ease-in-out infinite;
    transition: all 0.3s ease;
}

.header-icon:hover[b-tpoqjn9ag9] {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 12px 28px rgba(33, 76, 166, 0.5);
}

@keyframes pulse-b-tpoqjn9ag9 {
    0%, 100% {
        box-shadow: 0 8px 20px rgba(33, 76, 166, 0.4),
                    inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    50% {
        box-shadow: 0 8px 28px rgba(33, 76, 166, 0.6),
                    inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
}

.header-text[b-tpoqjn9ag9] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.header-eyebrow[b-tpoqjn9ag9] {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    color: var(--gray-500);
    margin: 0;
}

.header-title[b-tpoqjn9ag9] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 0.25rem 0;
}

.header-subtitle[b-tpoqjn9ag9] {
    font-size: 1rem;
    color: var(--gray-600);
    margin: 0;
}

.header-actions[b-tpoqjn9ag9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.main-content-container[b-tpoqjn9ag9] {
    width: 100%;
    margin: 0 auto;
}

.form-column[b-tpoqjn9ag9] {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 2rem 2.5rem;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15),
                0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.18);
    animation: slideUp-b-tpoqjn9ag9 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.1s both;
    transition: all 0.3s ease;
}

.form-column:hover[b-tpoqjn9ag9] {
    box-shadow: 0 12px 40px rgba(31, 38, 135, 0.2),
                0 4px 12px rgba(0, 0, 0, 0.08);
}

@keyframes slideUp-b-tpoqjn9ag9 {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.create-form[b-tpoqjn9ag9] {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Main Form Grid: 2 Columns Layout */
.main-form-grid[b-tpoqjn9ag9] {
   /* display: grid;*/
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
    display: flex;
}

.form-column-left[b-tpoqjn9ag9],
.form-column-right[b-tpoqjn9ag9] {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex:1;
}
.main-form-grid[b-tpoqjn9ag9] {
    /* margin-bottom: 1rem;*/ 
    display: flex;
    grid-template-columns: 1.5fr 1fr;
    gap: 1rem;
    justify-content: space-between;
    align-items: stretch;
}

.form-column-left[b-tpoqjn9ag9],
.form-column-right[b-tpoqjn9ag9] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0;
}
.form-column-left .form-section[b-tpoqjn9ag9] {
    margin-bottom: 1.25rem;
}

.form-column-left .form-section:last-child[b-tpoqjn9ag9] {
    margin-bottom: 0;
}

.form-column-right .form-section[b-tpoqjn9ag9] {
    margin-bottom: 0;
}

.form-column-right .form-group[b-tpoqjn9ag9] {
    margin-bottom: 1rem;
}

.form-column-right .form-group:last-child[b-tpoqjn9ag9] {
    margin-bottom: 0;
}

/* Ensure sections align properly */
.form-column-left .form-section[b-tpoqjn9ag9],
.form-column-right .form-section[b-tpoqjn9ag9] {
    display: flex;
    flex-direction: column;
    height: fit-content;
}


.form-alert[b-tpoqjn9ag9] {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: 16px;
    border: 2px solid rgba(209, 213, 219, 0.3);
    background: linear-gradient(135deg, rgba(249, 250, 251, 0.95) 0%, rgba(243, 244, 246, 0.95) 100%);
    backdrop-filter: blur(10px);
    color: var(--gray-700);
    align-items: center;
    margin-bottom: 1.25rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    animation: slideDown-b-tpoqjn9ag9 0.5s ease-out;
}

.form-alert.danger[b-tpoqjn9ag9] {
    border-color: rgba(254, 202, 202, 0.5);
    background: linear-gradient(135deg, rgba(254, 242, 242, 0.95) 0%, rgba(254, 226, 226, 0.95) 100%);
    color: #b91c1c;
    box-shadow: 0 4px 16px rgba(185, 28, 28, 0.1);
}

.form-alert i[b-tpoqjn9ag9] {
    font-size: 20px;
    animation: wiggle-b-tpoqjn9ag9 2s ease-in-out infinite;
}

/* Form Sections */
.form-section[b-tpoqjn9ag9] {
    margin-bottom: 1.25rem;
}

.form-section:last-of-type[b-tpoqjn9ag9] {
    margin-bottom: 0;
}

.section-header[b-tpoqjn9ag9] {
    margin-bottom: 0.75rem;
}

.section-title[b-tpoqjn9ag9] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 0.75rem 0;
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: fadeInLeft-b-tpoqjn9ag9 0.5s ease-out;
}

.section-title i[b-tpoqjn9ag9] {
    color: #214ca6;
    font-size: 18px;
    filter: drop-shadow(0 2px 4px rgba(33, 76, 166, 0.3));
    animation: bounceIn-b-tpoqjn9ag9 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes fadeInLeft-b-tpoqjn9ag9 {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes bounceIn-b-tpoqjn9ag9 {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.section-description[b-tpoqjn9ag9] {
    font-size: 0.875rem;
    color: var(--gray-600);
    margin: 0;
    line-height: 1.5;
}

.work-type-section[b-tpoqjn9ag9] {
    background: linear-gradient(135deg, rgba(33, 76, 166, 0.05) 0%, rgba(30, 64, 175, 0.05) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
    border: 2px solid rgba(33, 76, 166, 0.15);
    box-shadow: 0 4px 16px rgba(33, 76, 166, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
    animation: fadeInRight-b-tpoqjn9ag9 0.6s ease-out;
    transition: all 0.3s ease;
}

.work-type-section:hover[b-tpoqjn9ag9] {
    transform: translateX(4px);
    border-color: rgba(33, 76, 166, 0.3);
    box-shadow: 0 8px 24px rgba(33, 76, 166, 0.15);
}

.reminder-section[b-tpoqjn9ag9] {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.08) 0%, rgba(6, 182, 212, 0.08) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
    border: 2px solid rgba(14, 165, 233, 0.2);
    border-left: 5px solid #0ea5e9;
    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
    animation: fadeInRight-b-tpoqjn9ag9 0.6s ease-out 0.1s both;
    transition: all 0.3s ease;
}

.reminder-section:hover[b-tpoqjn9ag9] {
    transform: translateX(4px);
    border-left-width: 6px;
    box-shadow: 0 8px 24px rgba(14, 165, 233, 0.2);
}

@keyframes fadeInRight-b-tpoqjn9ag9 {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.assignee-block[b-tpoqjn9ag9] {
    margin-top: 1.25rem;
    padding: 1.25rem 1.5rem;
    border: 2px dashed rgba(33, 76, 166, 0.3);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(249, 250, 251, 0.9) 100%);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 16px rgba(33, 76, 166, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
    animation: fadeIn-b-tpoqjn9ag9 0.6s ease-out 0.2s both;
    transition: all 0.3s ease;
}

.assignee-block:hover[b-tpoqjn9ag9] {
    border-color: rgba(33, 76, 166, 0.5);
    transform: scale(1.01);
    box-shadow: 0 8px 24px rgba(33, 76, 166, 0.12);
}

.assignee-block-header[b-tpoqjn9ag9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.assignee-block-title[b-tpoqjn9ag9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.assignee-block-title > i[b-tpoqjn9ag9] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 20px;
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    animation: pulse-b-tpoqjn9ag9 2s ease-in-out infinite;
    transition: all 0.3s ease;
}

.assignee-block:hover .assignee-block-title > i[b-tpoqjn9ag9] {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 6px 16px rgba(33, 76, 166, 0.4);
}

.assignee-title[b-tpoqjn9ag9] {
    margin: 0;
    color: var(--gray-800);
    font-size: 15px;
    font-weight: 700;
}

.assignee-subtitle[b-tpoqjn9ag9] {
    margin: 0;
    color: var(--gray-500);
    font-size: 0.813rem;
}

.assignee-chip-container[b-tpoqjn9ag9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.assignee-chip[b-tpoqjn9ag9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(249, 250, 251, 0.95) 100%);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(33, 76, 166, 0.15);
    border-radius: 999px;
    padding: 0.65rem 0.85rem 0.65rem 0.75rem;
    min-width: 220px;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
    animation: scaleIn-b-tpoqjn9ag9 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all 0.3s ease;
}

.assignee-chip:hover[b-tpoqjn9ag9] {
    transform: translateY(-2px) scale(1.02);
    border-color: rgba(33, 76, 166, 0.4);
    box-shadow: 0 4px 16px rgba(33, 76, 166, 0.2);
}

@keyframes scaleIn-b-tpoqjn9ag9 {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.assignee-chip-info[b-tpoqjn9ag9] {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 5px;
    padding-left: 11px;
}

.assignee-chip-info i[b-tpoqjn9ag9] {
    color: var(--acv-primary);
    font-size: 16px;
}

.assignee-name[b-tpoqjn9ag9] {
    margin: 0;
    font-weight: 600;
    color: var(--gray-800);
    font-size: 0.875rem;
    line-height: 1.4;
}

.assignee-code[b-tpoqjn9ag9] {
    margin: 0;
    color: var(--gray-500);
    font-size: 0.75rem;
    line-height: 1.3;
}

.assignee-chip-remove[b-tpoqjn9ag9] {
    border: none;
    background: transparent;
    color: var(--gray-400);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.assignee-chip-remove:hover:not(:disabled)[b-tpoqjn9ag9] {
    background: var(--error-lighter);
    color: var(--error-main);
}

.assignee-chip-remove:disabled[b-tpoqjn9ag9] {
    opacity: 0.5;
    cursor: not-allowed;
}

.assignee-add-chip[b-tpoqjn9ag9] {
    border: 2px dashed #214ca6;
    background: linear-gradient(135deg, rgba(33, 76, 166, 0.1) 0%, rgba(30, 64, 175, 0.1) 100%);
    backdrop-filter: blur(10px);
    color: #214ca6;
    border-radius: 999px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.15);
    animation: wiggle-b-tpoqjn9ag9 2s ease-in-out infinite;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.assignee-add-chip:hover:not(:disabled)[b-tpoqjn9ag9] {
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%);
    border-color: transparent;
    color: var(--acv-white);
    transform: scale(1.1) rotate(90deg);
    box-shadow: 0 4px 16px rgba(33, 76, 166, 0.4);
}

.assignee-add-chip:active:not(:disabled)[b-tpoqjn9ag9] {
    transform: scale(0.95) rotate(90deg);
}

.assignee-add-chip:disabled[b-tpoqjn9ag9] {
    opacity: 0.5;
    cursor: not-allowed;
    animation: none;
}

@keyframes wiggle-b-tpoqjn9ag9 {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-5deg);
    }
    75% {
        transform: rotate(5deg);
    }
}

.assignee-empty[b-tpoqjn9ag9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    color: var(--gray-500);
    border-radius: 10px;
    border: 1px dashed var(--gray-300);
}

.assignee-empty i[b-tpoqjn9ag9] {
    font-size: 20px;
    color: var(--gray-400);
}

.assignee-empty p[b-tpoqjn9ag9] {
    margin: 0;
    font-weight: 600;
    color: var(--gray-600);
}

.assignee-empty small[b-tpoqjn9ag9] {
    display: block;
    color: var(--gray-500);
}

.assignee-error[b-tpoqjn9ag9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    background: var(--error-lighter);
    border: 1px solid var(--error-light);
    color: var(--error-dark);
    font-size: 0.9rem;
}

.assignee-error i[b-tpoqjn9ag9] {
    color: var(--error-dark);
}


.form-grid[b-tpoqjn9ag9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.875rem;
}

/* Form Styling */
.form-group[b-tpoqjn9ag9] {
    margin-bottom: 0;
}

.form-group.full-width[b-tpoqjn9ag9] {
    grid-column: 1 / -1;
    width: 100%;
}

.form-label[b-tpoqjn9ag9] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: 8px;
    font-size: 14px;
    animation: fadeInLeft-b-tpoqjn9ag9 0.4s ease-out;
    transition: all 0.3s ease;
}

.form-label:hover[b-tpoqjn9ag9] {
    color: #214ca6;
}

.form-label i[b-tpoqjn9ag9] {
    color: #214ca6;
    width: 18px;
    filter: drop-shadow(0 2px 4px rgba(33, 76, 166, 0.2));
    transition: all 0.3s ease;
}

.form-label:hover i[b-tpoqjn9ag9] {
    transform: scale(1.2) rotate(10deg);
}

.required[b-tpoqjn9ag9] {
    color: var(--error-main);
}

.field-helper[b-tpoqjn9ag9] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 0.813rem;
    color: var(--gray-500);
    line-height: 1.4;
}

.field-helper i[b-tpoqjn9ag9] {
    color: var(--acv-primary);
    font-size: 0.75rem;
}

/* Form Input */
.form-input[b-tpoqjn9ag9] {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid rgba(209, 213, 219, 0.5);
    border-radius: 12px;
    font-size: 14px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    box-sizing: border-box;
    font-family: inherit;
    resize: vertical;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.form-input:hover[b-tpoqjn9ag9] {
    border-color: rgba(33, 76, 166, 0.3);
    background: rgba(255, 255, 255, 1);
}

.form-input:focus[b-tpoqjn9ag9] {
    outline: none;
    border-color: #214ca6;
    border-width: 2px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 0 0 4px rgba(33, 76, 166, 0.1),
                0 4px 12px rgba(33, 76, 166, 0.15);
    transform: translateY(-1px);
}

.form-input:disabled[b-tpoqjn9ag9] {
    background: var(--gray-100);
    color: var(--gray-500);
    cursor: not-allowed;
    opacity: 0.7;
}

.form-input[b-tpoqjn9ag9]::placeholder {
    color: var(--gray-400);
    transition: all 0.3s ease;
}

.form-input:focus[b-tpoqjn9ag9]::placeholder {
    color: var(--gray-500);
    transform: translateX(4px);
}

textarea.form-input[b-tpoqjn9ag9] {
    min-height: 80px;
    line-height: 1.5;
}

.inline-warning[b-tpoqjn9ag9] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.25rem;
    font-size: 0.85rem;
    color: #b45309;
}

.status-pill[b-tpoqjn9ag9] {
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
}

.pill-success[b-tpoqjn9ag9] {
    background: rgba(14, 165, 233, 0.15);
    color: var(--accent-success);
}

.pill-warning[b-tpoqjn9ag9] {
    background: rgba(245, 158, 11, 0.15);
    color: var(--accent-warning);
}

.assign-section[b-tpoqjn9ag9] {
    margin-top: 0;
    margin-bottom: 1.25rem;
}

/* Assign Container - 2 Column Layout */
.assign-container[b-tpoqjn9ag9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-top: 0.75rem;
}

/* Left Column: Search & Results */
.assign-search-column[b-tpoqjn9ag9] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    min-height: 0;
}

.input-stack[b-tpoqjn9ag9] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.input-with-icon[b-tpoqjn9ag9] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.input-icon[b-tpoqjn9ag9] {
    position: absolute;
    left: 14px;
    color: var(--gray-400);
    font-size: 14px;
    pointer-events: none;
    z-index: 1;
}

.search-input[b-tpoqjn9ag9] {
    padding-left: 40px !important;
}

.btn-icon[b-tpoqjn9ag9] {
    border: none;
    background: var(--gray-100);
    color: var(--gray-600);
    border-radius: 8px;
    padding: 10px 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 44px;
}

.btn-icon:hover:not(:disabled)[b-tpoqjn9ag9] {
    background: var(--gray-200);
    color: var(--acv-primary);
    transform: rotate(90deg);
}

.btn-icon:disabled[b-tpoqjn9ag9] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.section-helper[b-tpoqjn9ag9] {
    font-size: 0.85rem;
    color: var(--gray-500);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.section-helper i[b-tpoqjn9ag9] {
    font-size: 0.8rem;
}

/* Result Panel */
.result-panel[b-tpoqjn9ag9] {
    border: 2px solid rgba(33, 76, 166, 0.15);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 16px rgba(33, 76, 166, 0.1);
    overflow: hidden;
    animation: fadeInUp-b-tpoqjn9ag9 0.5s ease-out;
    transition: all 0.3s ease;
}

.result-panel:hover[b-tpoqjn9ag9] {
    border-color: rgba(33, 76, 166, 0.25);
    box-shadow: 0 8px 24px rgba(33, 76, 166, 0.15);
}

@keyframes fadeInUp-b-tpoqjn9ag9 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.panel-header[b-tpoqjn9ag9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 18px;
    border-bottom: 2px solid rgba(33, 76, 166, 0.1);
    background: linear-gradient(135deg, rgba(33, 76, 166, 0.05) 0%, rgba(30, 64, 175, 0.05) 100%);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.panel-header:hover[b-tpoqjn9ag9] {
    background: linear-gradient(135deg, rgba(33, 76, 166, 0.08) 0%, rgba(30, 64, 175, 0.08) 100%);
    border-bottom-color: rgba(33, 76, 166, 0.2);
}

.panel-header-content[b-tpoqjn9ag9] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--gray-700);
    font-size: 14px;
}

.panel-header-content i[b-tpoqjn9ag9] {
    color: var(--acv-primary);
    font-size: 13px;
}

.pill[b-tpoqjn9ag9] {
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%);
    color: var(--acv-white);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 28px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.3);
    animation: popIn-b-tpoqjn9ag9 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all 0.3s ease;
}

.pill:hover[b-tpoqjn9ag9] {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.4);
}

@keyframes popIn-b-tpoqjn9ag9 {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

.result-list[b-tpoqjn9ag9] {
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
}

.result-list[b-tpoqjn9ag9]::-webkit-scrollbar {
    width: 6px;
}

.result-list[b-tpoqjn9ag9]::-webkit-scrollbar-track {
    background: var(--gray-50);
}

.result-list[b-tpoqjn9ag9]::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 3px;
}

.result-list[b-tpoqjn9ag9]::-webkit-scrollbar-thumb:hover {
    background: var(--gray-400);
}

.result-item[b-tpoqjn9ag9] {
    width: 100%;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(229, 231, 235, 0.5);
    text-align: left;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.result-item[b-tpoqjn9ag9]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%);
    transition: width 0.3s ease;
}

.result-item:last-child[b-tpoqjn9ag9] {
    border-bottom: none;
}

.result-item:hover:not(.muted):not(:disabled)[b-tpoqjn9ag9] {
    background: linear-gradient(135deg, rgba(33, 76, 166, 0.08) 0%, rgba(30, 64, 175, 0.08) 100%);
    transform: translateX(8px);
}

.result-item:hover:not(.muted):not(:disabled)[b-tpoqjn9ag9]::before {
    width: 4px;
}

.result-item:active:not(.muted):not(:disabled)[b-tpoqjn9ag9] {
    background: rgba(33, 76, 166, 0.15);
    transform: translateX(4px);
}

.result-item:disabled[b-tpoqjn9ag9] {
    opacity: 0.6;
    cursor: not-allowed;
}

.result-item.muted[b-tpoqjn9ag9] {
    cursor: default;
    color: var(--gray-500);
}

.result-avatar[b-tpoqjn9ag9] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 16px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.result-item:hover:not(.muted):not(:disabled) .result-avatar[b-tpoqjn9ag9] {
    transform: scale(1.15) rotate(5deg);
    box-shadow: 0 6px 16px rgba(33, 76, 166, 0.4);
}

.result-content[b-tpoqjn9ag9] {
    flex: 1;
    min-width: 0;
}

.result-title[b-tpoqjn9ag9] {
    margin: 0;
    font-weight: 600;
    color: var(--gray-800);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.result-meta[b-tpoqjn9ag9] {
    margin: 0;
    font-size: 0.8rem;
    color: var(--gray-500);
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.meta-item[b-tpoqjn9ag9] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.meta-item i[b-tpoqjn9ag9] {
    font-size: 0.75rem;
}

.badge[b-tpoqjn9ag9] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
    border: 1px solid transparent;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge.subtle[b-tpoqjn9ag9] {
    background: var(--gray-100);
    border-color: var(--gray-200);
    color: var(--gray-600);
}

.badge i[b-tpoqjn9ag9] {
    font-size: 0.7rem;
}

.result-action[b-tpoqjn9ag9] {
    color: var(--acv-primary);
    font-size: 18px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.result-item:hover:not(.muted):not(:disabled) .result-action[b-tpoqjn9ag9] {
    transform: scale(1.2);
    color: var(--acv-primary-800);
}

/* Right Column: Selected Participants */
.assign-selected-column[b-tpoqjn9ag9] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: linear-gradient(135deg, rgba(33, 76, 166, 0.05) 0%, rgba(30, 64, 175, 0.05) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 1.25rem 1.5rem;
    border: 2px solid rgba(33, 76, 166, 0.15);
    box-shadow: 0 4px 16px rgba(33, 76, 166, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
    animation: fadeInUp-b-tpoqjn9ag9 0.5s ease-out 0.1s both;
    transition: all 0.3s ease;
}

.assign-selected-column:hover[b-tpoqjn9ag9] {
    border-color: rgba(33, 76, 166, 0.25);
    box-shadow: 0 8px 24px rgba(33, 76, 166, 0.12);
}

.selected-header[b-tpoqjn9ag9] {
    padding-bottom: 0.75rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.selected-header-content[b-tpoqjn9ag9] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.selected-header-content > i[b-tpoqjn9ag9] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 18px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    animation: pulse-b-tpoqjn9ag9 2s ease-in-out infinite;
    transition: all 0.3s ease;
}

.assign-selected-column:hover .selected-header-content > i[b-tpoqjn9ag9] {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 6px 16px rgba(33, 76, 166, 0.4);
}

.selected-title[b-tpoqjn9ag9] {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--gray-800);
}

.selected-subtitle[b-tpoqjn9ag9] {
    margin: 2px 0 0;
    font-size: 0.85rem;
    color: var(--gray-500);
}

.selected-list[b-tpoqjn9ag9] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
}

.selected-list[b-tpoqjn9ag9]::-webkit-scrollbar {
    width: 6px;
}

.selected-list[b-tpoqjn9ag9]::-webkit-scrollbar-track {
    background: transparent;
}

.selected-list[b-tpoqjn9ag9]::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 3px;
}

.selected-list[b-tpoqjn9ag9]::-webkit-scrollbar-thumb:hover {
    background: var(--gray-400);
}

.selected-empty[b-tpoqjn9ag9] {
    text-align: center;
    padding: 40px 20px;
    color: var(--gray-500);
}

.empty-icon[b-tpoqjn9ag9] {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
    font-size: 28px;
}

.empty-title[b-tpoqjn9ag9] {
    margin: 0 0 8px;
    font-weight: 600;
    color: var(--gray-600);
    font-size: 14px;
}

.empty-description[b-tpoqjn9ag9] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--gray-500);
    line-height: 1.5;
}

.selected-item[b-tpoqjn9ag9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(249, 250, 251, 0.95) 100%);
    backdrop-filter: blur(10px);
    border-radius: 14px;
    border: 2px solid rgba(33, 76, 166, 0.15);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: relative;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.1);
    animation: slideInRight-b-tpoqjn9ag9 0.4s ease-out backwards;
}

.selected-item:nth-child(1)[b-tpoqjn9ag9] { animation-delay: 0.05s; }
.selected-item:nth-child(2)[b-tpoqjn9ag9] { animation-delay: 0.1s; }
.selected-item:nth-child(3)[b-tpoqjn9ag9] { animation-delay: 0.15s; }
.selected-item:nth-child(4)[b-tpoqjn9ag9] { animation-delay: 0.2s; }
.selected-item:nth-child(5)[b-tpoqjn9ag9] { animation-delay: 0.25s; }

.selected-item:hover[b-tpoqjn9ag9] {
    box-shadow: 0 6px 20px rgba(33, 76, 166, 0.25);
    transform: translateY(-4px) scale(1.02);
    border-color: rgba(33, 76, 166, 0.4);
}

@keyframes slideInRight-b-tpoqjn9ag9 {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.selected-avatar[b-tpoqjn9ag9] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 16px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.selected-item:hover .selected-avatar[b-tpoqjn9ag9] {
    transform: scale(1.15) rotate(-5deg);
    box-shadow: 0 6px 16px rgba(33, 76, 166, 0.45);
}

.selected-content[b-tpoqjn9ag9] {
    flex: 1;
    min-width: 0;
}

.selected-name[b-tpoqjn9ag9] {
    margin: 0;
    font-weight: 600;
    color: var(--gray-800);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.selected-meta[b-tpoqjn9ag9] {
    margin: 4px 0 0;
    font-size: 0.8rem;
    color: var(--gray-500);
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.meta-code[b-tpoqjn9ag9],
.meta-dept[b-tpoqjn9ag9] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.meta-code i[b-tpoqjn9ag9],
.meta-dept i[b-tpoqjn9ag9] {
    font-size: 0.75rem;
}

.selected-remove[b-tpoqjn9ag9] {
    border: none;
    background: transparent;
    color: var(--gray-400);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
}

.selected-remove:hover:not(:disabled)[b-tpoqjn9ag9] {
    background: var(--error-lighter);
    color: var(--error-main);
    transform: scale(1.1);
}

.selected-remove:disabled[b-tpoqjn9ag9] {
    opacity: 0.5;
    cursor: not-allowed;
}

.assign-error[b-tpoqjn9ag9] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--error-lighter);
    border: 1px solid var(--error-light);
    border-radius: 8px;
    color: var(--error-dark);
    font-size: 0.9rem;
    margin-top: 16px;
}

.assign-error i[b-tpoqjn9ag9] {
    font-size: 16px;
    flex-shrink: 0;
}

.assignee-modal-overlay[b-tpoqjn9ag9] {
    position: fixed;
    inset: 0;
    background: rgba(33, 76, 166, 0.15);
    backdrop-filter: blur(12px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1100;
    padding: 1rem;
    animation: fadeIn-b-tpoqjn9ag9 0.3s ease-out;
}

.assignee-modal[b-tpoqjn9ag9] {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border-radius: 28px;
    max-width: 1100px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 80px rgba(33, 76, 166, 0.3),
                0 8px 32px rgba(31, 38, 135, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.5);
    animation: modalSlideUp-b-tpoqjn9ag9 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes modalSlideUp-b-tpoqjn9ag9 {
    from {
        opacity: 0;
        transform: translateY(100px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.assignee-modal-header[b-tpoqjn9ag9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
}

.assignee-modal-header h3[b-tpoqjn9ag9] {
    margin: 0;
    font-size: 1.15rem;
    color: var(--gray-800);
}

.assignee-modal-header p[b-tpoqjn9ag9] {
    margin: 0.2rem 0 0;
    color: var(--gray-500);
    font-size: 0.9rem;
}

.modal-close-btn[b-tpoqjn9ag9] {
    border: none;
    background: var(--gray-100);
    color: var(--gray-600);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-close-btn:hover[b-tpoqjn9ag9] {
    background: var(--gray-200);
    color: var(--gray-900);
}

.assignee-modal-body[b-tpoqjn9ag9] {
    padding: 1rem 1.5rem 0;
    overflow-y: auto;
    flex: 1;
}

.assignee-modal-footer[b-tpoqjn9ag9] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem 1.25rem;
    border-top: 1px solid var(--gray-200);
    background: var(--acv-white);
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .assign-container[b-tpoqjn9ag9] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .assign-selected-column[b-tpoqjn9ag9] {
        order: -1;
    }
}

@media (max-width: 768px) {
    .assign-section[b-tpoqjn9ag9] {
        padding: 16px;
    }

    .result-list[b-tpoqjn9ag9] {
        max-height: 300px;
    }

    .selected-list[b-tpoqjn9ag9] {
        max-height: 300px;
    }

    .assignee-block[b-tpoqjn9ag9] {
        padding: 0.75rem;
    }

    .assignee-chip[b-tpoqjn9ag9] {
        min-width: 180px;
    }

    .assignee-modal[b-tpoqjn9ag9] {
        max-height: 95vh;
    }

    .assignee-modal-body[b-tpoqjn9ag9] {
        padding: 1rem;
    }
}

/* Form Actions */
.form-actions[b-tpoqjn9ag9] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-200);
    position: sticky;
    bottom: 0;
    background: var(--acv-white);
    z-index: 10;
    padding-bottom: 0.75rem;
}

.add-menu-wrapper[b-tpoqjn9ag9] {
    position: relative;
    display: inline-flex;
}

.add-menu-trigger[b-tpoqjn9ag9] {
    min-width: 140px;
    justify-content: space-between;
}

.add-menu-caret[b-tpoqjn9ag9] {
    font-size: 0.75rem;
}

.add-menu-dropdown[b-tpoqjn9ag9] {
    position: absolute;
    right: 0;
    top: calc(100% + 0.35rem);
    min-width: 220px;
    background: var(--acv-white);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    box-shadow: 0 18px 30px rgba(15, 23, 42, 0.25);
    padding: 0.35rem;
    z-index: 50;
}

.add-menu-item[b-tpoqjn9ag9] {
    width: 100%;
    border: none;
    background: transparent;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.92rem;
    color: var(--gray-700);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.add-menu-item i[b-tpoqjn9ag9] {
    color: var(--gray-500);
}

.add-menu-item:hover[b-tpoqjn9ag9] {
    background: var(--gray-50);
    color: var(--acv-primary);
}

.add-menu-item:hover i[b-tpoqjn9ag9] {
    color: var(--acv-primary);
}

.related-task-card[b-tpoqjn9ag9] {
    margin-top: 0.75rem;
    border: 1px solid var(--gray-200);
    border-radius: 18px;
    background: var(--gray-50);
    padding: 1rem 1.25rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.related-card-header[b-tpoqjn9ag9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.related-card-title[b-tpoqjn9ag9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--gray-800);
}

.related-card-title i[b-tpoqjn9ag9] {
    color: var(--acv-primary);
}

.related-card-remove[b-tpoqjn9ag9] {
    border: none;
    background: transparent;
    color: var(--gray-400);
    font-size: 0.95rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

.related-card-remove:hover[b-tpoqjn9ag9] {
    color: var(--error-main);
}

.related-card-body h4[b-tpoqjn9ag9] {
    margin: 0.75rem 0 0.35rem;
    font-size: 1rem;
    color: var(--gray-900);
}

.related-card-description[b-tpoqjn9ag9] {
    margin: 0 0 0.5rem;
    color: var(--gray-600);
    font-size: 0.9rem;
}

.related-card-meta[b-tpoqjn9ag9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.88rem;
    color: var(--gray-600);
    margin-bottom: 0.25rem;
}

.related-card-meta strong[b-tpoqjn9ag9] {
    color: var(--gray-800);
    margin-right: 0.3rem;
}

.btn-primary[b-tpoqjn9ag9], .btn-secondary[b-tpoqjn9ag9] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    border: 2px solid;
    text-decoration: none;
    min-width: 130px;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.btn-primary[b-tpoqjn9ag9]::before,
.btn-secondary[b-tpoqjn9ag9]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-primary:hover:not(:disabled)[b-tpoqjn9ag9]::before,
.btn-secondary:hover:not(:disabled)[b-tpoqjn9ag9]::before {
    width: 300px;
    height: 300px;
}

.btn-primary[b-tpoqjn9ag9] {
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%);
    color: var(--acv-white);
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(33, 76, 166, 0.4);
}

.btn-primary:hover:not(:disabled)[b-tpoqjn9ag9] {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 24px rgba(33, 76, 166, 0.5);
}

.btn-primary:active:not(:disabled)[b-tpoqjn9ag9] {
    transform: translateY(-1px) scale(0.98);
}

.btn-primary:disabled[b-tpoqjn9ag9] {
    background: var(--gray-400);
    border-color: var(--gray-400);
    cursor: not-allowed;
    transform: none;
    opacity: 0.6;
    box-shadow: none;
}

.btn-secondary[b-tpoqjn9ag9] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    color: var(--gray-800);
    border-color: rgba(209, 213, 219, 0.5);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.btn-secondary:hover:not(:disabled)[b-tpoqjn9ag9] {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(33, 76, 166, 0.3);
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    color: #214ca6;
}

.btn-secondary:active:not(:disabled)[b-tpoqjn9ag9] {
    transform: translateY(-1px) scale(0.98);
}

.btn-secondary:disabled[b-tpoqjn9ag9] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-primary i[b-tpoqjn9ag9],
.btn-secondary i[b-tpoqjn9ag9] {
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}

.btn-primary:hover:not(:disabled) i[b-tpoqjn9ag9],
.btn-secondary:hover:not(:disabled) i[b-tpoqjn9ag9] {
    transform: scale(1.2);
}

.btn-primary span[b-tpoqjn9ag9],
.btn-secondary span[b-tpoqjn9ag9] {
    position: relative;
    z-index: 1;
}


/* Checkbox and Radio Styles */
.form-checkbox-label[b-tpoqjn9ag9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
}

.form-checkbox[b-tpoqjn9ag9] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--acv-primary);
}

.radio-group[b-tpoqjn9ag9] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.form-radio-label[b-tpoqjn9ag9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
}

.form-radio-label input[type="radio"][b-tpoqjn9ag9] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--acv-primary);
}

/* Reminder Chips */
.reminder-chips[b-tpoqjn9ag9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.reminder-chip[b-tpoqjn9ag9] {
    padding: 0.65rem 1.25rem;
    border: 2px solid rgba(209, 213, 219, 0.5);
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(249, 250, 251, 0.95) 100%);
    backdrop-filter: blur(10px);
    color: var(--gray-700);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    animation: fadeInScale-b-tpoqjn9ag9 0.4s ease-out backwards;
}

.reminder-chip:nth-child(1)[b-tpoqjn9ag9] { animation-delay: 0.05s; }
.reminder-chip:nth-child(2)[b-tpoqjn9ag9] { animation-delay: 0.1s; }
.reminder-chip:nth-child(3)[b-tpoqjn9ag9] { animation-delay: 0.15s; }
.reminder-chip:nth-child(4)[b-tpoqjn9ag9] { animation-delay: 0.2s; }
.reminder-chip:nth-child(5)[b-tpoqjn9ag9] { animation-delay: 0.25s; }
.reminder-chip:nth-child(6)[b-tpoqjn9ag9] { animation-delay: 0.3s; }
.reminder-chip:nth-child(7)[b-tpoqjn9ag9] { animation-delay: 0.35s; }
.reminder-chip:nth-child(8)[b-tpoqjn9ag9] { animation-delay: 0.4s; }
.reminder-chip:nth-child(9)[b-tpoqjn9ag9] { animation-delay: 0.45s; }

.reminder-chip:hover:not(:disabled)[b-tpoqjn9ag9] {
    border-color: rgba(33, 76, 166, 0.5);
    color: #214ca6;
    background: rgba(33, 76, 166, 0.1);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 4px 16px rgba(33, 76, 166, 0.2);
}

.reminder-chip.selected[b-tpoqjn9ag9] {
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%);
    color: var(--acv-white);
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(33, 76, 166, 0.4);
    transform: scale(1.05);
}

.reminder-chip.selected:hover:not(:disabled)[b-tpoqjn9ag9] {
    background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 6px 20px rgba(33, 76, 166, 0.5);
}

.reminder-chip:active:not(:disabled)[b-tpoqjn9ag9] {
    transform: scale(0.95);
}

.reminder-chip:disabled[b-tpoqjn9ag9] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}
.assignee-chip-info > div[b-tpoqjn9ag9] {
    display: flex;
    gap: 2px;
}

.assignee-name[b-tpoqjn9ag9] {
    margin: 0;
    font-weight: 600;
}

.meta-dept[b-tpoqjn9ag9],
.meta-item[b-tpoqjn9ag9] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #6b7280;
    white-space: nowrap;
}

.meta-dept[b-tpoqjn9ag9],
.meta-item[b-tpoqjn9ag9] {
    margin-right: 12px;
}

@keyframes fadeInScale-b-tpoqjn9ag9 {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media (max-width: 1024px) {
    .main-form-grid[b-tpoqjn9ag9] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

@media (max-width: 768px) {
    .task-page[b-tpoqjn9ag9] {
        padding: 0.75rem;
    }

    .task-page-card-header[b-tpoqjn9ag9] {
        padding: 0.875rem 1rem;
        margin-bottom: 0.875rem;
    }

    .form-column[b-tpoqjn9ag9] {
        padding: 1rem;
    }

    .main-form-grid[b-tpoqjn9ag9] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .form-grid[b-tpoqjn9ag9] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .form-group.full-width[b-tpoqjn9ag9] {
        grid-column: 1;
    }

    .form-section[b-tpoqjn9ag9] {
        margin-bottom: 1rem;
    }

    .section-header[b-tpoqjn9ag9] {
        margin-bottom: 0.625rem;
    }

    .form-actions[b-tpoqjn9ag9] {
        flex-direction: column;
        margin-top: 1rem;
        padding-top: 0.875rem;
    }

    .btn-primary[b-tpoqjn9ag9],
    .btn-secondary[b-tpoqjn9ag9] {
        width: 100%;
        justify-content: center;
    }

    .add-menu-wrapper[b-tpoqjn9ag9],
    .add-menu-trigger[b-tpoqjn9ag9] {
        width: 100%;
    }

    .add-menu-dropdown[b-tpoqjn9ag9] {
        width: 100%;
        left: 0;
        right: 0;
    }
    
    .work-type-section[b-tpoqjn9ag9] {
        padding: 0.875rem 1rem;
        margin-bottom: 1rem;
    }

    .reminder-section[b-tpoqjn9ag9] {
        padding: 0.875rem 1rem;
        margin-bottom: 1rem;
    }

    .assign-section[b-tpoqjn9ag9] {
        padding: 0.875rem 1rem;
    }

    .reminder-chips[b-tpoqjn9ag9] {
        gap: 0.4rem;
    }

    .reminder-chip[b-tpoqjn9ag9] {
        padding: 0.45rem 0.85rem;
        font-size: 0.813rem;
    }
}

/* Upload Button Full Width */
.upload-btn-fullwidth[b-tpoqjn9ag9] {
    margin-top: 30px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%);
    color: white !important;
    border: none !important;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.3);
    width: 100%;
}

.upload-btn-fullwidth i[b-tpoqjn9ag9] {
    color: white !important;
    font-size: 16px;
}

.upload-btn-fullwidth span[b-tpoqjn9ag9] {
    color: white !important;
    font-weight: 500;
}

.upload-btn-fullwidth:hover:not(:disabled)[b-tpoqjn9ag9] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.4);
    background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
}

.upload-btn-fullwidth:active:not(:disabled)[b-tpoqjn9ag9] {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.3);
}

.upload-btn-fullwidth:disabled[b-tpoqjn9ag9] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}
/* _content/ltia.portal.web/Components/Pages/Work/WorkDetail.razor.rz.scp.css */
/* CSS Variables - Đặt trực tiếp vào .work-detail-page */
.work-detail-page[b-akngusgfy4] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    
    padding: 1rem;
    background: linear-gradient(135deg, #e3f2fd 0%, #ffffff 100%);
    background-attachment: fixed;
    min-height: 100vh;
}

/* Card Header */
.work-detail-card-header[b-akngusgfy4] {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border-radius: 18px;
    padding: 1.25rem 1.75rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.12),
                0 2px 8px rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    transition: all 0.3s ease;
}

.work-detail-card-header:hover[b-akngusgfy4] {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(31, 38, 135, 0.18),
                0 4px 12px rgba(0, 0, 0, 0.08);
}

.header-content[b-akngusgfy4] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-icon[b-akngusgfy4] {
    width: 54px;
    height: 54px;
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.4rem;
    box-shadow: 0 6px 16px rgba(33, 76, 166, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.header-icon:hover[b-akngusgfy4] {
    transform: scale(1.08) rotate(3deg);
    box-shadow: 0 8px 20px rgba(33, 76, 166, 0.45);
}

.header-text[b-akngusgfy4] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.header-eyebrow[b-akngusgfy4] {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    color: var(--gray-500);
    margin: 0;
}

.header-title[b-akngusgfy4] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 0.25rem 0;
}

.header-subtitle[b-akngusgfy4] {
    font-size: 1rem;
    color: var(--gray-600);
    margin: 0;
}

.main-content-container[b-akngusgfy4] {
    width: 100%;
    margin: 0 auto;
}

.form-column[b-akngusgfy4] {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 1.75rem 2rem;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.12),
                0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.18);
    transition: all 0.3s ease;
}

.form-column:hover[b-akngusgfy4] {
    box-shadow: 0 12px 40px rgba(31, 38, 135, 0.18),
                0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Hero Section */
.detail-hero[b-akngusgfy4] {
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 2px solid rgba(33, 76, 166, 0.1);
    position: relative;
}

.detail-hero[b-akngusgfy4]::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, var(--acv-primary) 0%, transparent 100%);
}

.detail-title[b-akngusgfy4] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 0.75rem 0;
    line-height: 1.3;
}

.detail-meta-badges[b-akngusgfy4] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.detail-meta-badges .priority-badge[b-akngusgfy4],
.detail-meta-badges .status-badge[b-akngusgfy4],
.detail-meta-badges .progress-badge[b-akngusgfy4] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
}

.detail-meta-badges .priority-badge i[b-akngusgfy4],
.detail-meta-badges .status-badge i[b-akngusgfy4],
.detail-meta-badges .progress-badge i[b-akngusgfy4] {
    font-size: 0.8125rem;
}

.progress-badge[b-akngusgfy4] {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    color: #0369a1;
    border: 1px solid #7dd3fc;
}

/* Main Form Grid: 2 Columns Layout (50/50) */
.main-form-grid[b-akngusgfy4] {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
    align-items: start;
}

.form-column-left[b-akngusgfy4] {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1; /* Cột trái 50% - bằng nhau */
    min-width: 0;
}

.form-column-right[b-akngusgfy4] {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1; /* Cột phải 50% - bằng nhau */
    min-width: 0;
}

.form-column-left .form-section[b-akngusgfy4] {
    margin-bottom: 2rem;
    background: #ffffff;
    border-radius: 16px;
    padding: 1.75rem 2rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.form-column-left .form-section:hover[b-akngusgfy4] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    border-color: rgba(33, 76, 166, 0.1);
}

.form-column-left .form-section:last-child[b-akngusgfy4] {
    margin-bottom: 0;
}

/* Đảm bảo form-grid có spacing đúng */
.form-column-left .form-grid[b-akngusgfy4],
.form-column-right .form-grid[b-akngusgfy4] {
    margin-top: 0.5rem;
}

.form-column-right .form-section[b-akngusgfy4] {
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, rgba(33, 76, 166, 0.04) 0%, rgba(30, 64, 175, 0.04) 100%);
    border-radius: 20px;
    padding: 1.75rem 2rem;
    border: 1.5px solid rgba(33, 76, 166, 0.12);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.form-column-right .form-section[b-akngusgfy4]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #214CA6 0%, #1E40AF 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.form-column-right .form-section:hover[b-akngusgfy4] {
    border-color: rgba(33, 76, 166, 0.25);
    box-shadow: 0 8px 24px rgba(33, 76, 166, 0.15), 0 4px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-3px);
}

.form-column-right .form-section:hover[b-akngusgfy4]::before {
    opacity: 1;
}

.form-column-right .form-section:last-child[b-akngusgfy4] {
    margin-bottom: 0;
}

/* Performer Info Section - Không có background và border */
.performer-info-section[b-akngusgfy4] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(249, 250, 251, 0.98) 100%);
    border: 1px solid rgba(229, 231, 235, 0.8);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04),
                0 1px 3px rgba(0, 0, 0, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.performer-info-section[b-akngusgfy4]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, 
        rgba(33, 76, 166, 0.6) 0%, 
        rgba(59, 130, 246, 0.6) 50%, 
        rgba(33, 76, 166, 0.6) 100%);
    border-radius: 16px 16px 0 0;
}

.performer-info-section:hover[b-akngusgfy4] {
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.08),
                0 2px 6px rgba(0, 0, 0, 0.06);
    border-color: rgba(33, 76, 166, 0.3);
    transform: translateY(-1px);
}

.performer-info-section .section-header[b-akngusgfy4] {
    margin-bottom: 1.25rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid rgba(229, 231, 235, 0.6);
}

.performer-info-section .section-title[b-akngusgfy4] {
    color: #1f2937;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.performer-info-section .section-title i[b-akngusgfy4] {
    color: #214CA6;
    font-size: 1.125rem;
    background: linear-gradient(135deg, rgba(33, 76, 166, 0.12) 0%, rgba(59, 130, 246, 0.12) 100%);
    padding: 0.5rem;
    border-radius: 10px;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.performer-info-section .form-grid[b-akngusgfy4] {
    gap: 1.25rem;
}

.performer-info-section .form-group[b-akngusgfy4] {
    margin-bottom: 0;
}

.performer-info-section .detail-field-label[b-akngusgfy4] {
    color: #4b5563;
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 0.625rem;
    letter-spacing: 0.025em;
}

.performer-info-section .detail-field-label i[b-akngusgfy4] {
    color: #214CA6;
    font-size: 0.875rem;
    background: linear-gradient(135deg, rgba(33, 76, 166, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);
    padding: 0.375rem;
    border-radius: 8px;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.performer-info-section .detail-field-value[b-akngusgfy4] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(249, 250, 251, 0.7) 100%);
    border: 1.5px solid rgba(229, 231, 235, 0.8);
    border-radius: 12px;
    padding: 0.875rem 1rem;
    font-size: 0.9375rem;
    color: #111827;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.25s ease;
}

.performer-info-section .detail-field-value:hover[b-akngusgfy4] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(249, 250, 251, 0.95) 100%);
    border-color: rgba(33, 76, 166, 0.25);
    box-shadow: 0 2px 6px rgba(33, 76, 166, 0.06);
}

.performer-info-section .detail-field-value strong[b-akngusgfy4] {
    color: #1f2937;
    font-weight: 600;
    font-size: 0.9375rem;
}
/* Ensure sections align properly */
.form-column-left .form-section[b-akngusgfy4],
.form-column-right .form-section[b-akngusgfy4] {
    display: flex;
    flex-direction: column;
    height: fit-content;
}

/* Detail Content */
.detail-content[b-akngusgfy4] {
    width: 100%;
}

/* Form Sections */
.form-section[b-akngusgfy4] {
    margin-bottom: 2rem;
    transition: all 0.3s ease;
}

.form-section:last-of-type[b-akngusgfy4] {
    margin-bottom: 0;
}

/* Đảm bảo spacing giữa các section trong cùng cột */
.form-column-left .form-section + .form-section[b-akngusgfy4] {
    margin-top: 0;
}

.form-column-right .form-section + .form-section[b-akngusgfy4] {
    margin-top: 0;
}

.section-header[b-akngusgfy4] {
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.section-title[b-akngusgfy4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem; /* 14px */
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
    padding: 0;
    line-height: 1.5;
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-title i[b-akngusgfy4] {
    color: #214ca6;
    font-size: 0.875rem; /* 14px */
    filter: drop-shadow(0 2px 4px rgba(33, 76, 166, 0.2));
    transition: all 0.3s ease;
}

.section-header:hover .section-title i[b-akngusgfy4] {
    transform: scale(1.15) rotate(5deg);
}

.work-detail-page .form-grid[b-akngusgfy4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-top: 0.5rem;
}

/* Form Styling - Keep original for other uses */
.form-group[b-akngusgfy4] {
    margin-bottom: 0;
}

.form-group.full-width[b-akngusgfy4] {
    grid-column: 1 / -1;
    width: 100%;
}

.form-group.full-width:last-child[b-akngusgfy4] {
    margin-bottom: 0;
}

/* Đảm bảo các section cùng cấp */
.form-column-right .form-group.full-width[b-akngusgfy4] {
    margin-bottom: 1.5rem;
}

.form-column-right .form-group.full-width:last-child[b-akngusgfy4] {
    margin-bottom: 0;
}

.form-label[b-akngusgfy4] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    transition: all 0.3s ease;
}

.form-label:hover[b-akngusgfy4] {
    color: #214ca6;
}

.form-label i[b-akngusgfy4] {
    color: #214ca6;
    width: 16px;
    font-size: 0.875rem;
    filter: drop-shadow(0 2px 4px rgba(33, 76, 166, 0.2));
    transition: all 0.3s ease;
}

.form-group:hover .form-label i[b-akngusgfy4] {
    transform: scale(1.15) rotate(5deg);
}

.form-value[b-akngusgfy4] {
    font-size: 0.875rem;
    line-height: 1.4;
    word-break: break-word;
    min-height: 44px;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    flex-direction: column;
}

.form-value:hover[b-akngusgfy4] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(249, 250, 251, 0.9) 100%);
    border-color: rgba(33, 76, 166, 0.2);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05),
                0 2px 8px rgba(33, 76, 166, 0.08);
}

.form-value strong[b-akngusgfy4] {
    font-weight: 600;
    color: #111827;
}

.work-detail-page .description-text[b-akngusgfy4] {
    white-space: pre-wrap;
    padding: 0.875rem 1.125rem;
    background: linear-gradient(135deg, rgba(249, 250, 251, 0.6) 0%, rgba(243, 244, 246, 0.4) 100%);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(229, 231, 235, 0.6);
    border-left: 4px solid #214ca6;
    border-radius: 10px;
    line-height: 1.7;
    font-size: 0.875rem;
    max-height: 50px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
    overflow-y: auto;
}

.work-detail-page .description-text:hover[b-akngusgfy4] {
    border-left-width: 5px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(249, 250, 251, 0.9) 100%);
    border-color: rgba(33, 76, 166, 0.2);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03),
                0 3px 12px rgba(33, 76, 166, 0.1);
    transform: translateX(2px);
}

.work-detail-page .reason-text[b-akngusgfy4] {
    white-space: pre-wrap;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(254, 242, 242, 0.8) 0%, rgba(254, 226, 226, 0.6) 100%);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(254, 202, 202, 0.6);
    border-left: 4px solid #ef4444;
    border-radius: 10px;
    color: #991b1b;
    font-size: 0.875rem;
    line-height: 1.6;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
}

.work-detail-page .evaluation-note[b-akngusgfy4] {
    white-space: pre-wrap;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(240, 253, 244, 0.8) 0%, rgba(220, 252, 231, 0.6) 100%);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(187, 247, 208, 0.6);
    border-left: 4px solid #10b981;
    border-radius: 10px;
    color: #065f46;
    font-size: 0.875rem;
    line-height: 1.6;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
}

.work-detail-page .sub-info[b-akngusgfy4] {
    width: 100%;
    font-size: 0.8125rem;
    color: #6b7280;
    margin-top: 0.625rem;
    padding: 0.625rem 0.875rem;
    background: linear-gradient(135deg, 
        rgba(59, 130, 246, 0.08) 0%, 
        rgba(37, 99, 235, 0.05) 100%);
    border-radius: 10px;
    border-left: 3px solid #214ca6;
    display: inline-block;
    box-shadow: 0 2px 6px rgba(33, 76, 166, 0.05);
    transition: all 0.3s ease;
}   

.work-detail-page .sub-info:hover[b-akngusgfy4] {
    background: linear-gradient(135deg, rgba(33, 76, 166, 0.08) 0%, rgba(30, 64, 175, 0.06) 100%);
    border-left-width: 4px;
    box-shadow: 0 3px 10px rgba(33, 76, 166, 0.1);
    transform: translateX(2px);
}

.info-badge[b-akngusgfy4] {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.125rem 0.5rem;
    background: #e5e7eb;
    color: #374151;
    border-radius: 4px;
    font-size: 0.75rem;
}

.loading-badge[b-akngusgfy4] {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.125rem 0.5rem;
    background: #fef3c7;
    color: #92400e;
    border-radius: 4px;
    font-size: 0.75rem;
    font-style: italic;
}

.status-badge[b-akngusgfy4] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

.status-badge.status-new[b-akngusgfy4] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    border: 1px solid #fbbf24;
}

.status-badge.status-assigned[b-akngusgfy4] {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e40af;
    border: 1px solid #93c5fd;
}

.status-badge.status-pending[b-akngusgfy4] {
    background: #fef3c7;
    color: #92400e;
}

.status-badge.status-inprogress[b-akngusgfy4] {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e40af;
    border: 1px solid #93c5fd;
}

.status-badge.status-notachieved[b-akngusgfy4] {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
    border: 1px solid #f87171;
}

.status-badge.status-paused[b-akngusgfy4] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    border: 1px solid #fbbf24;
}

.status-badge.status-completed[b-akngusgfy4] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #065f46;
    border: 1px solid #6ee7b7;
}

.status-badge.status-closed[b-akngusgfy4] {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: #374151;
    border: 1px solid #9ca3af;
}

.status-badge.status-cancelled[b-akngusgfy4] {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
    border: 1px solid #f87171;
}

.status-badge.status-unknown[b-akngusgfy4] {
    background: #e5e7eb;
    color: #374151;
}

.status-badge.active[b-akngusgfy4] {
    background: #dcfce7;
    color: #166534;
}

.status-badge.inactive[b-akngusgfy4] {
    background: #fee2e2;
    color: #991b1b;
}

.priority-badge[b-akngusgfy4] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

.priority-badge.priority-low[b-akngusgfy4] {
    background: #f0f9ff;
    color: #0369a1;
}

.priority-badge.priority-medium[b-akngusgfy4] {
    background: #fef3c7;
    color: #92400e;
}

.priority-badge.priority-high[b-akngusgfy4] {
    background: #fed7aa;
    color: #c2410c;
}

.priority-badge.priority-urgent[b-akngusgfy4] {
    background: #fee2e2;
    color: #991b1b;
}

.work-detail-page .empty-value[b-akngusgfy4] {
    color: #9ca3af;
    font-style: italic;
    font-size: 0.8125rem;
}

/* Detail Field Styles - NEW Classes for WorkDetail */
.detail-field-label[b-akngusgfy4] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.875rem;
    margin-top: 0;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    line-height: 1.5;
}

/* Label cho "Người tạo" - to hơn, màu khác */
.detail-field-label.creator-label[b-akngusgfy4] {
    font-size: 0.875rem; /* 14px */
    font-weight: 700;
    color: #214CA6;
    margin-bottom: 0.875rem;
}

.detail-field-label.creator-label i[b-akngusgfy4] {
    color: #214CA6;
    font-size: 0.875rem; /* 14px */
    background: linear-gradient(135deg, rgba(33, 76, 166, 0.15) 0%, rgba(30, 64, 175, 0.15) 100%);
    padding: 0.375rem;
    border-radius: 8px;
    width: auto;
}

.detail-field-label i[b-akngusgfy4] {
    color: #214ca6;
    width: 14px;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.detail-field-value[b-akngusgfy4] {
    padding: 10px;
    background: linear-gradient(135deg, rgba(249, 250, 251, 0.8) 0%, rgba(243, 244, 246, 0.6) 100%);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(229, 231, 235, 0.6);
    border-radius: 12px;
    font-size: 14px;
    line-height: 1;
    color: #1f2937;
    display: flex;
    white-space: pre-wrap;
    word-wrap: break-word;
    align-items: center;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
    word-break: break-word;
}

/* Custom scrollbar cho detail-field-value */
.detail-field-value[b-akngusgfy4]::-webkit-scrollbar {
    width: 6px;
}

.detail-field-value[b-akngusgfy4]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.detail-field-value[b-akngusgfy4]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

.detail-field-value[b-akngusgfy4]::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Special styling for Related Task section - Vertical Layout */
.detail-field-value:has(.btn-related-task)[b-akngusgfy4] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    padding: 1rem;
    gap: 0.75rem;
}

.detail-field-value:hover[b-akngusgfy4] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(249, 250, 251, 0.9) 100%);
    border-color: rgba(33, 76, 166, 0.2);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03),
                0 2px 8px rgba(33, 76, 166, 0.08);
}

.detail-field-value strong[b-akngusgfy4] {
    font-weight: 600;
    color: #111827;
}

.detail-empty-value[b-akngusgfy4] {
    color: #9ca3af;
    font-style: italic;
    font-size: 13px;
    padding: 8px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.detail-empty-value[b-akngusgfy4]::before {
    content: '—';
    color: #d1d5db;
    font-weight: 300;
}


.detail-description-text[b-akngusgfy4] {
    white-space: pre-wrap;
    padding: 0.875rem 1.125rem;
    background: linear-gradient(135deg, rgba(249, 250, 251, 0.6) 0%, rgba(243, 244, 246, 0.4) 100%);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(229, 231, 235, 0.6);
    border-left: 4px solid #214ca6;
    border-radius: 10px;
    line-height: 1.7;
    font-size: 0.875rem;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Custom scrollbar cho detail-description-text */
.detail-description-text[b-akngusgfy4]::-webkit-scrollbar {
    width: 6px;
}

.detail-description-text[b-akngusgfy4]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.detail-description-text[b-akngusgfy4]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

.detail-description-text[b-akngusgfy4]::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.detail-description-text:hover[b-akngusgfy4] {
    border-left-width: 5px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(249, 250, 251, 0.9) 100%);
    border-color: rgba(33, 76, 166, 0.2);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03),
                0 3px 12px rgba(33, 76, 166, 0.1);
    transform: translateX(2px);
}

.detail-reason-text[b-akngusgfy4] {
    white-space: pre-wrap;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(254, 242, 242, 0.8) 0%, rgba(254, 226, 226, 0.6) 100%);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(254, 202, 202, 0.6);
    border-left: 4px solid #ef4444;
    border-radius: 10px;
    color: #991b1b;
    font-size: 0.875rem;
    line-height: 1.6;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
    width: 100%;
}

.detail-evaluation-note[b-akngusgfy4] {
    white-space: pre-wrap;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(240, 253, 244, 0.8) 0%, rgba(220, 252, 231, 0.6) 100%);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(187, 247, 208, 0.6);
    border-left: 4px solid #10b981;
    border-radius: 10px;
    color: #065f46;
    font-size: 0.875rem;
    line-height: 1.6;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
    width: 100%;
}

.due-date-overdue[b-akngusgfy4] {
    color: #dc2626;
    font-weight: 600;
}

.due-date-urgent[b-akngusgfy4] {
    color: #f59e0b;
    font-weight: 600;
}

.due-date-normal[b-akngusgfy4] {
    color: #6b7280;
}

/* Loading & Error States */
.loading-content[b-akngusgfy4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: #6b7280;
}

.loading-spinner[b-akngusgfy4] {
    width: 32px;
    height: 32px;
    border: 3px solid #e5e7eb;
    border-top: 3px solid #3b82f6;
    border-radius: 50%;
    animation: spin-b-akngusgfy4 1s linear infinite;
    margin-bottom: 1rem;
}

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

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

.error-content[b-akngusgfy4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

.error-icon[b-akngusgfy4] {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.error-content h3[b-akngusgfy4] {
    margin: 0 0 0.5rem 0;
    color: #dc2626;
    font-size: 1.25rem;
}

.error-content p[b-akngusgfy4] {
    margin: 0 0 1.5rem 0;
    color: #6b7280;
}

/* Form Actions */
.form-actions[b-akngusgfy4] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 2px solid rgba(33, 76, 166, 0.1);
    position: relative;
}

.form-actions[b-akngusgfy4]::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, var(--acv-primary) 0%, transparent 100%);
}

.add-menu-wrapper[b-akngusgfy4] {
    position: relative;
    display: inline-flex;
}

.add-menu-trigger[b-akngusgfy4] {
    min-width: 140px;
    justify-content: space-between;
}

.add-menu-caret[b-akngusgfy4] {
    font-size: 0.75rem;
}

.add-menu-dropdown[b-akngusgfy4] {
    position: absolute;
    right: 0;
    top: calc(100% + 0.35rem);
    min-width: 220px;
    background: var(--acv-white);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    box-shadow: 0 18px 30px rgba(15, 23, 42, 0.25);
    padding: 0.35rem;
    z-index: 50;
}

.add-menu-item[b-akngusgfy4] {
    width: 100%;
    border: none;
    background: transparent;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.92rem;
    color: var(--gray-700);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.add-menu-item i[b-akngusgfy4] {
    color: var(--gray-500);
}

.add-menu-item:hover[b-akngusgfy4] {
    background: var(--gray-50);
    color: var(--acv-primary);
}

.add-menu-item:hover i[b-akngusgfy4] {
    color: var(--acv-primary);
}

/* Related Task Button */
.btn-related-task[b-akngusgfy4] {
    width: 100%;
    background: linear-gradient(135deg, 
        rgba(219, 234, 254, 0.3) 0%, 
        rgba(191, 219, 254, 0.2) 50%,
        rgba(219, 234, 254, 0.3) 100%);
    backdrop-filter: blur(10px);
    border: 2px dashed rgba(33, 76, 166, 0.4);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: #214ca6;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(33, 76, 166, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
    min-height: 80px;
}

.btn-related-task[b-akngusgfy4]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, 
        rgba(33, 76, 166, 0.08) 0%, 
        transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.btn-related-task:hover:not(:disabled)[b-akngusgfy4]::before {
    opacity: 1;
}

.btn-related-task:hover:not(:disabled)[b-akngusgfy4] {
    background: linear-gradient(135deg, 
        rgba(219, 234, 254, 0.6) 0%, 
        rgba(191, 219, 254, 0.5) 50%,
        rgba(219, 234, 254, 0.6) 100%);
    border-color: #214ca6;
    border-width: 2px;
    color: #1e40af;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 24px rgba(33, 76, 166, 0.25),
                inset 0 2px 0 rgba(255, 255, 255, 0.8);
}

.btn-related-task:active:not(:disabled)[b-akngusgfy4] {
    transform: translateY(-2px) scale(1);
}

.btn-related-task:disabled[b-akngusgfy4] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-related-task i[b-akngusgfy4] {
    font-size: 2rem;
    color: #214ca6;
    filter: drop-shadow(0 3px 6px rgba(33, 76, 166, 0.3));
    animation: subtlePulse-b-akngusgfy4 2s ease-in-out infinite;
    transition: all 0.4s ease;
    flex-shrink: 0;
    margin-bottom: 0.25rem;
}

@keyframes subtlePulse-b-akngusgfy4 {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 3px 6px rgba(33, 76, 166, 0.3));
    }
    50% {
        transform: scale(1.05);
        filter: drop-shadow(0 4px 8px rgba(33, 76, 166, 0.4));
    }
}

.btn-related-task:hover:not(:disabled) i[b-akngusgfy4] {
    color: #1e40af;
    transform: scale(1.15) rotate(5deg);
    filter: drop-shadow(0 5px 12px rgba(33, 76, 166, 0.5));
}

.btn-related-task span[b-akngusgfy4] {
    position: relative;
    z-index: 1;
    text-align: center;
    line-height: 1.5;
    width: 100%;
    word-break: break-word;
}

.related-task-card[b-akngusgfy4] {
    margin-top: 1rem;
    border: 2px solid rgba(33, 76, 166, 0.15);
    border-radius: 20px;
    background: linear-gradient(135deg, 
        rgba(219, 234, 254, 0.4) 0%, 
        rgba(191, 219, 254, 0.3) 100%);
    backdrop-filter: blur(10px);
    padding: 1.25rem 1.5rem;
    box-shadow: 0 4px 16px rgba(33, 76, 166, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
    animation: slideInUp-b-akngusgfy4 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all 0.3s ease;
}

@keyframes slideInUp-b-akngusgfy4 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.related-task-card:hover[b-akngusgfy4] {
    border-color: rgba(33, 76, 166, 0.3);
    box-shadow: 0 8px 28px rgba(33, 76, 166, 0.25);
    transform: translateY(-2px);
}

.related-card-header[b-akngusgfy4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.related-card-title[b-akngusgfy4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--gray-800);
}

.related-card-title i[b-akngusgfy4] {
    color: var(--acv-primary);
}

.related-card-remove[b-akngusgfy4] {
    border: none;
    background: transparent;
    color: var(--gray-400);
    font-size: 0.95rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

.related-card-remove:hover[b-akngusgfy4] {
    color: var(--error-main);
}

.related-card-body h4[b-akngusgfy4] {
    margin: 0.75rem 0 0.35rem;
    font-size: 1rem;
    color: var(--gray-900);
}

.related-card-description[b-akngusgfy4] {
    margin: 0 0 0.5rem;
    color: var(--gray-600);
    font-size: 0.9rem;
}

.related-card-meta[b-akngusgfy4] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.88rem;
    color: var(--gray-600);
    margin-bottom: 0.25rem;
}

.related-card-meta strong[b-akngusgfy4] {
    color: var(--gray-800);
    margin-right: 0.3rem;
}

/* Form Hint Text */
.form-hint[b-akngusgfy4] {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin-top: 0 !important;
    padding: 0.75rem 1rem !important;
    /* background: linear-gradient(135deg, 
        rgba(156, 163, 175, 0.12) 0%, 
        rgba(107, 114, 128, 0.08) 100%) !important; */
        background: linear-gradient(135deg, rgba(33, 76, 166, 0.05) 0%, rgba(30, 64, 175, 0.04) 100%) !important;
    backdrop-filter: blur(10px);
    border-radius: 12px !important;
    /* border-left: 3px solid #6b7280; */
    border-left: 3px solid rgba(33, 76, 166, 0.3);
    /* color: #374151 !important; */
    font-size: 0.8125rem !important;
    line-height: 1.5 !important;
    box-shadow: 0 2px 8px rgba(107, 114, 128, 0.1);
    animation: fadeInLeft 0.5s ease-out 0.1s both;
    transition: all 0.3s ease;
    width: 100% !important;
}

.form-hint:hover[b-akngusgfy4] {
    /* background: linear-gradient(135deg, 
        rgba(156, 163, 175, 0.18) 0%, 
        rgba(107, 114, 128, 0.12) 100%) !important;
    border-left-width: 4px;
    border-left-color: #4b5563;
    box-shadow: 0 3px 12px rgba(107, 114, 128, 0.15);
    transform: translateX(3px); */
    background: linear-gradient(135deg, rgba(33, 76, 166, 0.08) 0%, rgba(30, 64, 175, 0.06) 100%);
    border-left-width: 4px;
    box-shadow: 0 3px 10px rgba(33, 76, 166, 0.1);
    transform: translateX(2px);
}

.form-hint i[b-akngusgfy4] {
    color: #6b7280 !important;
    font-size: 0.9375rem;
    filter: drop-shadow(0 2px 4px rgba(107, 114, 128, 0.2));
    flex-shrink: 0;
    animation: subtleWiggle-b-akngusgfy4 3s ease-in-out infinite;
}

@keyframes subtleWiggle-b-akngusgfy4 {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-4deg);
    }
    75% {
        transform: rotate(4deg);
    }
}

.btn-primary[b-akngusgfy4], .btn-secondary[b-akngusgfy4] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    border: 2px solid;
    text-decoration: none;
    min-width: 130px;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.btn-primary[b-akngusgfy4]::before,
.btn-secondary[b-akngusgfy4]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-primary:hover:not(:disabled)[b-akngusgfy4]::before,
.btn-secondary:hover:not(:disabled)[b-akngusgfy4]::before {
    width: 300px;
    height: 300px;
}

.btn-primary[b-akngusgfy4] {
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%);
    color: var(--acv-white);
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(33, 76, 166, 0.4);
}

.btn-primary:hover:not(:disabled)[b-akngusgfy4] {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 24px rgba(33, 76, 166, 0.5);
}

.btn-primary:active:not(:disabled)[b-akngusgfy4] {
    transform: translateY(-1px) scale(0.98);
}

.btn-primary:disabled[b-akngusgfy4] {
    background: var(--gray-400);
    border-color: var(--gray-400);
    cursor: not-allowed;
    transform: none;
    opacity: 0.6;
    box-shadow: none;
}

.btn-secondary[b-akngusgfy4] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    color: var(--gray-800);
    border-color: rgba(209, 213, 219, 0.5);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.btn-secondary:hover:not(:disabled)[b-akngusgfy4] {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(33, 76, 166, 0.3);
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    color: #214ca6;
}

.btn-secondary:active:not(:disabled)[b-akngusgfy4] {
    transform: translateY(-1px) scale(0.98);
}

.btn-secondary:disabled[b-akngusgfy4] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-primary i[b-akngusgfy4],
.btn-secondary i[b-akngusgfy4] {
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}

.btn-primary:hover:not(:disabled) i[b-akngusgfy4],
.btn-secondary:hover:not(:disabled) i[b-akngusgfy4] {
    transform: scale(1.2);
}

.btn-primary span[b-akngusgfy4],
.btn-secondary span[b-akngusgfy4] {
    position: relative;
    z-index: 1;
}


.badge[b-akngusgfy4] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
    border: 1px solid transparent;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge.subtle[b-akngusgfy4] {
    background: var(--gray-100);
    border-color: var(--gray-200);
    color: var(--gray-600);
}

/* Subtasks List Container - Style giống Files Tab */
.subtasks-list-container[b-akngusgfy4] {
    padding: 0.75rem 1rem;
}

.subtasks-list-container .list-header[b-akngusgfy4] {
    background: transparent;
    padding: 0;
    margin-bottom: 1.25rem;
    border-bottom: none;
    border-radius: 0;
    position: relative;
    z-index: 1;
    overflow: visible;
}

.subtasks-list-container .list-header[b-akngusgfy4]::before {
    display: none;
}

.subtasks-list-container .list-header-content[b-akngusgfy4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(33, 76, 166, 0.1);
    position: relative;
}

.subtasks-list-container .list-header-content[b-akngusgfy4]::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, var(--acv-primary) 0%, transparent 100%);
}

.subtasks-list-container .list-title-section[b-akngusgfy4] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.subtasks-list-container .list-title[b-akngusgfy4] {
    font-size: 1.125rem; /* Giống files tab */
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.subtasks-list-container .list-title i[b-akngusgfy4] {
    color: var(--acv-primary);
    font-size: 1.25rem; /* Giống files tab */
}

.subtasks-list-container .list-count[b-akngusgfy4] {
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%);
    color: white;
    padding: 0.375rem 0.875rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
    animation: popIn-b-akngusgfy4 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all 0.3s ease;
}

.subtasks-list-container .list-count:hover[b-akngusgfy4] {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(33, 76, 166, 0.4);
}

@keyframes popIn-b-akngusgfy4 {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

.subtasks-list-container .sort-controls[b-akngusgfy4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.subtasks-list-container .refresh-btn[b-akngusgfy4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--acv-white);
    color: var(--acv-primary);
    border: 2px solid var(--acv-primary);
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 120px;
    justify-content: center;
    text-decoration: none;
}

.subtasks-list-container .refresh-btn:hover:not(:disabled)[b-akngusgfy4] {
    background: var(--acv-primary);
    color: var(--acv-white);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.2);
}

.subtasks-list-container .refresh-btn:disabled[b-akngusgfy4] {
    opacity: 0.5;
    cursor: not-allowed;
}

.subtasks-list-container .work-list[b-akngusgfy4] {
    padding: 0; /* Không có padding để giống files tab */
    min-height: 200px;
}

.subtasks-list-container .loading-state[b-akngusgfy4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem; /* Giống files tab */
    color: var(--gray-600);
}

.subtasks-list-container .loading-spinner[b-akngusgfy4] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--gray-200);
    border-top: 3px solid var(--acv-primary);
    border-radius: 50%;
    animation: spin-b-akngusgfy4 1s linear infinite;
    margin-bottom: 0.75rem; /* Giống files tab */
}

@keyframes spin-b-akngusgfy4 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.subtasks-list-container .work-table-container[b-akngusgfy4] {
    overflow-x: auto;
    border-radius: 0; /* Không có border-radius để giống files tab */
}

.subtasks-list-container .table-wrapper[b-akngusgfy4] {
    overflow-x: auto;
}

.subtasks-list-container .data-table[b-akngusgfy4] {
    width: 100%;
    border-collapse: collapse;
    background: transparent; /* Transparent để giống files tab */
    border-radius: 0;
    overflow: visible;
}

.subtasks-list-container .data-table th[b-akngusgfy4] {
    background: var(--gray-50);
    padding: 0.875rem 0.75rem;
    text-align: left;
    font-weight: 600;
    color: var(--gray-700);
    font-size: 0.875rem;
    border-bottom: 2px solid var(--gray-200);
    white-space: nowrap;
}

.subtasks-list-container .data-table td[b-akngusgfy4] {
    padding: 0.875rem 0.75rem;
    border-bottom: 1px solid var(--gray-200);
    vertical-align: middle;
    white-space: nowrap;
}

.subtasks-list-container .data-table tr:hover[b-akngusgfy4] {
    background: var(--gray-50);
}

.subtasks-list-container .subtask-description-cell[b-akngusgfy4] {
    font-size: 0.875rem;
    color: var(--gray-600);
    line-height: 1.5;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Status badge trong bảng subtask - không cho xuống dòng */
.subtasks-list-container .data-table td .status-badge[b-akngusgfy4] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    min-width: fit-content;
    flex-shrink: 0;
}

.subtasks-list-container .data-table td .status-badge i[b-akngusgfy4] {
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* Cho phép một số cột có thể wrap */
.subtasks-list-container .data-table td:nth-child(3)[b-akngusgfy4],
.subtasks-list-container .data-table td:nth-child(4)[b-akngusgfy4],
.subtasks-list-container .data-table td:nth-child(5)[b-akngusgfy4] {
    white-space: normal;
    word-break: break-word;
}

/* Tiêu đề subtask - có thể wrap nhưng giới hạn */
.subtasks-list-container .data-table td:nth-child(3)[b-akngusgfy4] {
    max-width: 300px;
    min-width: 200px;
}

/* Mô tả - có thể wrap */
.subtasks-list-container .data-table td:nth-child(4)[b-akngusgfy4] {
    max-width: 250px;
    min-width: 150px;
}

/* Người được giao - có thể wrap */
.subtasks-list-container .data-table td:nth-child(5)[b-akngusgfy4] {
    max-width: 200px;
    min-width: 120px;
}

.subtasks-list-container .no-description[b-akngusgfy4],
.subtasks-list-container .no-level[b-akngusgfy4] {
    color: var(--gray-400);
    font-style: italic;
}

.subtasks-list-container .subtask-level-badge[b-akngusgfy4] {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--gray-100);
    color: var(--gray-600);
    display: inline-block;
}

.subtasks-list-container .empty-state[b-akngusgfy4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    animation: fadeInUp-b-akngusgfy4 0.6s ease-out;
}

@keyframes fadeInUp-b-akngusgfy4 {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.subtasks-list-container .empty-state-icon[b-akngusgfy4] {
    width: 88px;
    height: 88px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(33, 76, 166, 0.1) 0%, rgba(30, 64, 175, 0.1) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-primary);
    font-size: 40px;
    box-shadow: 0 8px 24px rgba(33, 76, 166, 0.15);
    animation: pulseIcon-b-akngusgfy4 2s ease-in-out infinite;
}

@keyframes pulseIcon-b-akngusgfy4 {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 8px 24px rgba(33, 76, 166, 0.15);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 12px 32px rgba(33, 76, 166, 0.25);
    }
}

.subtasks-list-container .empty-state h3[b-akngusgfy4] {
    margin: 0 0 0.75rem 0;
    color: var(--gray-800);
    font-size: 1.25rem;
    font-weight: 700;
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.subtasks-list-container .empty-state p[b-akngusgfy4] {
    margin: 0;
    color: var(--gray-600);
    font-size: 0.9375rem;
    line-height: 1.6;
    max-width: 400px;
}

.subtasks-list-container .pagination-section[b-akngusgfy4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    border-top: 1px solid var(--gray-200);
    margin-top: 0;
}

.subtasks-list-container .pagination-info[b-akngusgfy4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /*color: var(--gray-600);*/
    color: #1e3d7d;
    font-size: 0.9rem;
}

    .subtasks-list-container .pagination-info strong[b-akngusgfy4] {
        /*  color: var(--gray-800);*/
        color: #1e3d7d;
        font-weight: 600;
    }

.subtasks-list-container .pagination-controls[b-akngusgfy4] {
    display: flex;
    gap: 0.25rem;
}

.subtasks-list-container .btn-pagination[b-akngusgfy4] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gray-300);
    background: white;
    color: var(--gray-700);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    min-width: 40px;
    transition: all 0.2s ease;
}

.subtasks-list-container .btn-pagination:hover:not(:disabled)[b-akngusgfy4] {
    background: var(--gray-50);
    border-color: var(--gray-400);
}

.subtasks-list-container .btn-pagination:disabled[b-akngusgfy4] {
    opacity: 0.5;
    cursor: not-allowed;
}

.subtasks-list-container .btn-pagination.active[b-akngusgfy4] {
    background: var(--acv-primary);
    color: white;
    border-color: var(--acv-primary);
}

/* Responsive for subtasks list */
@media (max-width: 768px) {
    .subtasks-list-container[b-akngusgfy4] {
        padding: 0.625rem 0.75rem; /* Giống files tab */
    }

    .subtasks-list-container .list-header-content[b-akngusgfy4] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        padding-bottom: 0.625rem; /* Giống files tab */
    }

    .subtasks-list-container .list-title[b-akngusgfy4] {
        font-size: 1rem; /* Giống files tab */
    }

    .subtasks-list-container .sort-controls[b-akngusgfy4] {
        justify-content: stretch;
    }

    .subtasks-list-container .refresh-btn[b-akngusgfy4] {
        flex: 1;
    }

    .subtasks-list-container .pagination-section[b-akngusgfy4] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .subtasks-list-container .pagination-controls[b-akngusgfy4] {
        justify-content: center;
    }
}

.btn-pagination:disabled[b-akngusgfy4] {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--gray-100);
}

/* Subtasks Tree View Styles */
.subtasks-tree-container[b-akngusgfy4] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.subtask-tree-node[b-akngusgfy4] {
    position: relative;
    margin-bottom: 0.5rem;
}

.subtask-tree-item[b-akngusgfy4] {
    background: var(--acv-white);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.subtask-tree-item:hover[b-akngusgfy4] {
    border-color: var(--acv-primary-light);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.12);
    transform: translateY(-1px);
}

.subtask-tree-item.expanded[b-akngusgfy4] {
    border-color: var(--acv-primary);
    box-shadow: 0 4px 16px rgba(33, 76, 166, 0.15);
    background: linear-gradient(to bottom, var(--acv-white) 0%, var(--gray-50) 100%);
}

.subtask-tree-header[b-akngusgfy4] {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1.125rem 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.subtask-tree-header:hover[b-akngusgfy4] {
    background: var(--gray-50);
}

.subtask-tree-header:active[b-akngusgfy4] {
    background: var(--gray-100);
}

.subtask-tree-toggle[b-akngusgfy4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--acv-primary);
    background: var(--acv-primary-lighter);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.subtask-tree-toggle:hover[b-akngusgfy4] {
    background: var(--acv-primary);
    color: var(--acv-white);
    transform: scale(1.1);
}

.subtask-tree-toggle i[b-akngusgfy4] {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.tree-spacer[b-akngusgfy4] {
    width: 28px;
    height: 28px;
    display: inline-block;
}

.subtask-tree-content[b-akngusgfy4] {
    flex: 1;
    min-width: 0;
}

.subtask-tree-main[b-akngusgfy4] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.subtask-tree-title-section[b-akngusgfy4] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
}

.subtask-tree-title-section .badge-id[b-akngusgfy4] {
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    color: white;
    padding: 0.375rem 0.625rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(33, 76, 166, 0.2);
    letter-spacing: 0.025em;
}

.subtask-title[b-akngusgfy4] {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--gray-800);
    flex: 1;
    min-width: 0;
    line-height: 1.4;
}

.subtask-full-path[b-akngusgfy4] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.8125rem;
    color: var(--gray-600);
    padding: 0.625rem 0.875rem;
    background: linear-gradient(to right, var(--gray-50) 0%, var(--acv-primary-lighter) 100%);
    border-radius: 8px;
    margin-top: 0.375rem;
    border-left: 3px solid var(--acv-primary);
    font-weight: 500;
}

.subtask-full-path i[b-akngusgfy4] {
    color: var(--acv-primary);
    font-size: 0.75rem;
    flex-shrink: 0;
}

.subtask-description[b-akngusgfy4] {
    font-size: 0.9375rem;
    color: var(--gray-600);
    line-height: 1.65;
    padding: 0.625rem 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.subtask-tree-meta[b-akngusgfy4] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    padding: 0.875rem 0 0 0;
    margin-top: 0.5rem;
    border-top: 1px solid var(--gray-200);
}

.subtask-meta-item[b-akngusgfy4] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.875rem;
    color: var(--gray-600);
    padding: 0.375rem 0.75rem;
    background: var(--gray-50);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.subtask-meta-item:hover[b-akngusgfy4] {
    background: var(--gray-100);
    transform: translateY(-1px);
}

.subtask-meta-item i[b-akngusgfy4] {
    color: var(--acv-primary);
    font-size: 0.8125rem;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.subtask-tree-children[b-akngusgfy4] {
    margin-top: 0.75rem;
    padding-left: 1rem;
    border-left: 3px solid var(--gray-300);
    margin-left: 14px;
    position: relative;
}

.subtask-tree-children[b-akngusgfy4]::before {
    content: '';
    position: absolute;
    left: -3px;
    top: -0.75rem;
    width: 3px;
    height: 0.75rem;
    background: var(--gray-300);
}

.subtask-tree-children .subtask-tree-node[b-akngusgfy4] {
    position: relative;
    padding-left: 0.5rem;
}

.subtask-tree-children .subtask-tree-node[b-akngusgfy4]::before {
    content: '';
    position: absolute;
    left: -1rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--gray-300);
    z-index: 0;
}

.subtask-tree-children .subtask-tree-node:last-child[b-akngusgfy4]::before {
    height: 50%;
    bottom: auto;
}

.subtask-tree-children .subtask-tree-node:not(:last-child)[b-akngusgfy4]::after {
    content: '';
    position: absolute;
    left: -1rem;
    top: 50%;
    width: 0.875rem;
    height: 2px;
    background: var(--gray-300);
    z-index: 1;
}

/* Status badges in tree */
.subtask-tree-item .status-badge[b-akngusgfy4] {
    padding: 0.375rem 0.875rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.subtask-tree-item .status-badge.status-completed[b-akngusgfy4] {
    background: linear-gradient(135deg, var(--success-lighter) 0%, #c6f6d5 100%);
    color: var(--success-dark);
    border: 1px solid var(--success-light);
}

.subtask-tree-item .status-badge.status-inprogress[b-akngusgfy4] {
    background: linear-gradient(135deg, var(--acv-primary-lighter) 0%, #bfdbfe 100%);
    color: var(--acv-primary-800);
    border: 1px solid var(--acv-primary-light);
}

/* Level badge in tree */
.subtask-tree-item .subtask-level-badge[b-akngusgfy4] {
    padding: 0.375rem 0.625rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 100%);
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Enhanced visual hierarchy for different levels */
.subtask-tree-node[style*="margin-left: 24px"] .subtask-tree-item[b-akngusgfy4] {
    border-left: 3px solid var(--acv-primary-light);
}

.subtask-tree-node[style*="margin-left: 48px"] .subtask-tree-item[b-akngusgfy4] {
    border-left: 3px solid var(--acv-primary);
}

.subtask-tree-node[style*="margin-left: 72px"] .subtask-tree-item[b-akngusgfy4] {
    border-left: 3px solid var(--acv-primary-700);
}

.subtask-tree-node[style*="margin-left: 96px"] .subtask-tree-item[b-akngusgfy4] {
    border-left: 3px solid var(--acv-primary-800);
}

/* Subtasks Table View Styles */
.subtasks-list-container .work-table-container[b-akngusgfy4] {
    padding: 0;
}

.subtasks-list-container .data-table[b-akngusgfy4] {
    border-radius: 0;
}

.subtask-child-row[b-akngusgfy4] {
    background-color: var(--gray-50);
    position: relative;
}

.subtask-child-row:hover[b-akngusgfy4] {
    background-color: var(--gray-100) !important;
}

/* Visual hierarchy for different levels - Level badges */
.subtasks-list-container .subtask-level-badge.subtask-level-1[b-akngusgfy4] {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    color: var(--acv-primary-800);
    border: 1px solid var(--acv-primary-light);
}

.subtasks-list-container .subtask-level-badge.subtask-level-2[b-akngusgfy4] {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: var(--acv-primary-700);
    border: 1px solid var(--acv-primary-light);
}

.subtasks-list-container .subtask-level-badge.subtask-level-3[b-akngusgfy4] {
    background: linear-gradient(135deg, #bfdbfe 0%, #93c5fd 100%);
    color: var(--acv-primary-800);
    border: 1px solid var(--acv-primary);
}

.subtasks-list-container .subtask-level-badge.subtask-level-4[b-akngusgfy4] {
    background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 100%);
    color: white;
    border: 1px solid var(--acv-primary-700);
}

.subtasks-list-container .subtask-level-badge.subtask-level-5[b-akngusgfy4],
.subtasks-list-container .subtask-level-badge.subtask-level-6[b-akngusgfy4],
.subtasks-list-container .subtask-level-badge.subtask-level-7[b-akngusgfy4],
.subtasks-list-container .subtask-level-badge.subtask-level-8[b-akngusgfy4] {
    background: linear-gradient(135deg, #60a5fa 0%, var(--acv-primary) 100%);
    color: white;
    border: 1px solid var(--acv-primary-800);
}

/* Tree connector styles */
.subtask-tree-indicator[b-akngusgfy4] {
    padding: 0.5rem !important;
    vertical-align: middle;
    position: relative;
    width: 60px;
}

.subtask-tree-connector[b-akngusgfy4] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
}

.tree-indent-icon[b-akngusgfy4] {
    color: var(--acv-primary);
    font-size: 0.875rem;
    opacity: 0.6;
}

/* Title cell with level-based styling */
.subtask-title-cell[b-akngusgfy4] {
    position: relative;
    padding-left: 0 !important;
}

.subtask-title-cell[data-level="2"][b-akngusgfy4] {
    padding-left: 20px !important;
    border-left: 3px solid var(--acv-primary-light);
    margin-left: 8px;
}

.subtask-title-cell[data-level="3"][b-akngusgfy4] {
    padding-left: 44px !important;
    border-left: 3px solid var(--acv-primary);
    margin-left: 8px;
}

.subtask-title-cell[data-level="4"][b-akngusgfy4] {
    padding-left: 68px !important;
    border-left: 3px solid var(--acv-primary-700);
    margin-left: 8px;
}

.subtask-title-cell[data-level="5"][b-akngusgfy4],
.subtask-title-cell[data-level="6"][b-akngusgfy4],
.subtask-title-cell[data-level="7"][b-akngusgfy4],
.subtask-title-cell[data-level="8"][b-akngusgfy4] {
    padding-left: 92px !important;
    border-left: 3px solid var(--acv-primary-800);
    margin-left: 8px;
}

.subtask-toggle[b-akngusgfy4] {
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-primary);
    border-radius: 4px;
    transition: all 0.2s ease;
}

.subtask-toggle:hover[b-akngusgfy4] {
    background: var(--acv-primary-lighter);
    color: var(--acv-primary-700);
}

.subtask-toggle i[b-akngusgfy4] {
    font-size: 0.75rem;
}

.subtask-description-cell[b-akngusgfy4] {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.subtask-description-cell span[b-akngusgfy4] {
    color: var(--gray-600);
    font-size: 0.875rem;
}

.subtask-path-hint[b-akngusgfy4] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--gray-500);
}

.subtask-path-hint i[b-akngusgfy4] {
    color: var(--acv-primary);
    font-size: 0.6875rem;
}

.subtask-path-hint span[b-akngusgfy4] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

.completion-rate[b-akngusgfy4] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.completion-rate-bar[b-akngusgfy4] {
    width: 100%;
    height: 8px;
    background: var(--gray-200);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.completion-rate-fill[b-akngusgfy4] {
    height: 100%;
    background: linear-gradient(90deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.completion-rate-text[b-akngusgfy4] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-700);
    text-align: center;
}

.subtask-children-info[b-akngusgfy4] {
    font-size: 0.6875rem;
    color: var(--gray-500);
    margin-top: 0.125rem;
}

.subtasks-list-container .work-title[b-akngusgfy4] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.subtasks-list-container .work-title strong[b-akngusgfy4] {
    font-size: 0.9375rem;
    color: var(--gray-800);
}

.subtasks-list-container .no-assignee[b-akngusgfy4] {
    color: var(--gray-400);
    font-style: italic;
    font-size: 0.875rem;
}

.subtasks-list-container .empty-value[b-akngusgfy4] {
    color: var(--gray-400);
    font-style: italic;
    font-size: 0.875rem;
}

/* Responsive for table view */
@media (max-width: 768px) {
    .subtasks-list-container .data-table[b-akngusgfy4] {
        font-size: 0.875rem;
    }
    
    .subtasks-list-container .data-table th[b-akngusgfy4],
    .subtasks-list-container .data-table td[b-akngusgfy4] {
        padding: 0.75rem 0.5rem;
    }
    
    .subtask-description-cell[b-akngusgfy4] {
        max-width: 150px;
    }
    
    .subtask-path-hint span[b-akngusgfy4] {
        max-width: 100px;
    }
}

/* Detail Assignee List Styles - WorkDetail specific */
.detail-assignee-list[b-akngusgfy4] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0;
    width: 100%;
    max-width: 100%;
}

.detail-assignee-item[b-akngusgfy4] {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1rem 0.625rem 0.625rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(249, 250, 251, 0.95) 100%);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(33, 76, 166, 0.12);
    border-radius: 999px;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
    animation: scaleIn-b-akngusgfy4 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.detail-assignee-item:nth-child(1)[b-akngusgfy4] { animation-delay: 0.05s; }
.detail-assignee-item:nth-child(2)[b-akngusgfy4] { animation-delay: 0.1s; }
.detail-assignee-item:nth-child(3)[b-akngusgfy4] { animation-delay: 0.15s; }
.detail-assignee-item:nth-child(4)[b-akngusgfy4] { animation-delay: 0.2s; }
.detail-assignee-item:nth-child(5)[b-akngusgfy4] { animation-delay: 0.25s; }

@keyframes scaleIn-b-akngusgfy4 {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.detail-assignee-item:hover[b-akngusgfy4] {
    box-shadow: 0 6px 20px rgba(33, 76, 166, 0.2);
    transform: translateY(-2px) scale(1.03);
    border-color: rgba(33, 76, 166, 0.35);
    background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(249, 250, 251, 1) 100%);
}

.detail-assignee-avatar[b-akngusgfy4] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 14px;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(33, 76, 166, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.detail-assignee-item:hover .detail-assignee-avatar[b-akngusgfy4] {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 5px 14px rgba(33, 76, 166, 0.4);
}

.detail-assignee-name[b-akngusgfy4] {
    display: flex;
    align-items: center;
}

.detail-assignee-name[b-akngusgfy4] {
    min-width: 0;
    flex: 1;
}

.detail-assignee-name strong[b-akngusgfy4] {
    color: var(--gray-800);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;
    display: block;
}

.detail-assignee-summary[b-akngusgfy4] {
    font-size: 0.8125rem;
    color: #6b7280;
    margin-top: 0.75rem;
    padding: 0.625rem 0.875rem;
    background: linear-gradient(135deg, rgba(33, 76, 166, 0.05) 0%, rgba(30, 64, 175, 0.04) 100%);
    border-radius: 10px;
    border-left: 3px solid rgba(33, 76, 166, 0.3);
    display: inline-block;
    box-shadow: 0 2px 6px rgba(33, 76, 166, 0.05);
    transition: all 0.3s ease;
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: break-word;
}

.detail-assignee-summary:hover[b-akngusgfy4] {
    background: linear-gradient(135deg, rgba(33, 76, 166, 0.08) 0%, rgba(30, 64, 175, 0.06) 100%);
    border-left-width: 4px;
    box-shadow: 0 3px 10px rgba(33, 76, 166, 0.1);
    transform: translateX(2px);
}

/* Old Assignee List Styles - Keep for backward compatibility */
.assignee-list[b-akngusgfy4] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
    width: 100%;
}

.assignee-item[b-akngusgfy4] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(249, 250, 251, 0.9) 100%);
    border-radius: 12px;
    border: 2px solid rgba(33, 76, 166, 0.08);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.06);
}

.assignee-item:hover[b-akngusgfy4] {
    box-shadow: 0 6px 20px rgba(33, 76, 166, 0.15);
    transform: translateY(-3px) translateX(4px);
    border-color: rgba(33, 76, 166, 0.25);
}

.assignee-avatar[b-akngusgfy4] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 16px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.assignee-item:hover .assignee-avatar[b-akngusgfy4] {
    transform: scale(1.15) rotate(5deg);
    box-shadow: 0 6px 16px rgba(33, 76, 166, 0.4);
}

.assignee-info[b-akngusgfy4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.assignee-info strong[b-akngusgfy4] {
    color: var(--gray-800);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.assignee-info .info-badge[b-akngusgfy4] {
    font-size: 0.6875rem;
    color: var(--gray-500);
    line-height: 1.3;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .main-form-grid[b-akngusgfy4] {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    
    .form-column-right .form-section[b-akngusgfy4] {
        padding: 1rem 1.25rem;
    }
}

@media (max-width: 1024px) {
    .main-form-grid[b-akngusgfy4] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .detail-hero[b-akngusgfy4] {
        margin-bottom: 1.25rem;
        padding-bottom: 0.875rem;
    }

    .detail-title[b-akngusgfy4] {
        font-size: 1.5rem;
        margin-bottom: 0.625rem;
    }

    .detail-meta-badges[b-akngusgfy4] {
        gap: 0.375rem;
    }

    .detail-meta-badges .priority-badge[b-akngusgfy4],
    .detail-meta-badges .status-badge[b-akngusgfy4],
    .detail-meta-badges .progress-badge[b-akngusgfy4] {
        padding: 0.3125rem 0.625rem;
        font-size: 0.8125rem;
    }
}

@media (max-width: 768px) {
    .work-detail-page[b-akngusgfy4] {
        padding: 0.75rem;
    }

    .work-detail-card-header[b-akngusgfy4] {
        padding: 0.875rem 1rem;
        margin-bottom: 0.875rem;
    }

    .form-column[b-akngusgfy4] {
        padding: 1rem;
    }

    .main-form-grid[b-akngusgfy4] {
        flex-direction: column;
        gap: 1rem;
    }
    
    .form-column-left[b-akngusgfy4],
    .form-column-right[b-akngusgfy4] {
        flex: 1 1 100%;
        width: 100%;
    }
    
    .detail-assignee-list[b-akngusgfy4] {
        flex-direction: column;
    }
    
    .detail-assignee-item[b-akngusgfy4] {
        width: 100%;
        max-width: 100%;
    }
    
    .detail-assignee-summary[b-akngusgfy4] {
        width: 100%;
        max-width: 100%;
        display: block;
    }

    .form-grid[b-akngusgfy4] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .form-actions[b-akngusgfy4] {
        flex-direction: column;
        margin-top: 1rem;
        padding-top: 0.875rem;
    }

    .add-menu-wrapper[b-akngusgfy4],
    .add-menu-trigger[b-akngusgfy4] {
        width: 100%;
    }

    .add-menu-dropdown[b-akngusgfy4] {
        width: 100%;
        left: 0;
        right: 0;
    }

    .btn-primary[b-akngusgfy4],
    .btn-secondary[b-akngusgfy4] {
        width: 100%;
        justify-content: center;
    }

    .detail-hero[b-akngusgfy4] {
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
    }

    .detail-title[b-akngusgfy4] {
        font-size: 1.375rem;
        margin-bottom: 0.5rem;
    }

    .detail-meta-badges[b-akngusgfy4] {
        gap: 0.375rem;
    }

    .detail-meta-badges .priority-badge[b-akngusgfy4],
    .detail-meta-badges .status-badge[b-akngusgfy4],
    .detail-meta-badges .progress-badge[b-akngusgfy4] {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }

    .detail-meta-badges .priority-badge i[b-akngusgfy4],
    .detail-meta-badges .status-badge i[b-akngusgfy4],
    .detail-meta-badges .progress-badge i[b-akngusgfy4] {
        font-size: 0.6875rem;
    }
}

/* Modal Styles */
.modal-overlay[b-akngusgfy4] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
    animation: fadeIn-b-akngusgfy4 0.2s ease-out;
}

@keyframes fadeIn-b-akngusgfy4 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-content[b-akngusgfy4] {
    background: white;
    border-radius: 20px;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25),
                0 0 0 1px rgba(0, 0, 0, 0.05);
    animation: slideUp-b-akngusgfy4 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

@keyframes slideUp-b-akngusgfy4 {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-content.modal-large[b-akngusgfy4] {
    max-width: 900px;
}

/* Action Buttons for Subtasks Table */
.subtasks-list-container .action-buttons[b-akngusgfy4] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-start;
}

.subtasks-list-container .btn-icon[b-akngusgfy4] {
    width: 32px;
    height: 32px;
    border: 1px solid var(--gray-300);
    background: white;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    padding: 0;
}

.subtasks-list-container .btn-icon:hover:not(:disabled)[b-akngusgfy4] {
    background: var(--gray-50);
    border-color: var(--gray-400);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.subtasks-list-container .btn-icon:disabled[b-akngusgfy4] {
    opacity: 0.5;
    cursor: not-allowed;
}

.subtasks-list-container .btn-icon.btn-view:hover:not(:disabled)[b-akngusgfy4] {
    background: var(--acv-primary);
    color: white;
    border-color: var(--acv-primary);
}

.subtasks-list-container .btn-icon.btn-edit:hover:not(:disabled)[b-akngusgfy4] {
    background: var(--warning-main);
    color: white;
    border-color: var(--warning-main);
}

.subtasks-list-container .btn-icon.btn-add:hover:not(:disabled)[b-akngusgfy4] {
    background: var(--success-main);
    color: white;
    border-color: var(--success-main);
}

.modal-header[b-akngusgfy4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 28px 32px;
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%);
    border-bottom: none;
    position: relative;
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.2);
}

.modal-header[b-akngusgfy4]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
    pointer-events: none;
}

.modal-header h3[b-akngusgfy4] {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: white;
    display: flex;
    align-items: center;
    gap: 12px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.modal-header h3 i[b-akngusgfy4] {
    color: white;
    font-size: 1.5rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    background: rgba(255, 255, 255, 0.15);
    padding: 10px;
    border-radius: 12px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close[b-akngusgfy4] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    font-size: 22px;
    color: white;
    cursor: pointer;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
    backdrop-filter: blur(10px);
}

.modal-close:hover[b-akngusgfy4] {
    background: rgba(255, 255, 255, 0.3);
    color: white;
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.modal-body[b-akngusgfy4] {
    padding: 32px;
    overflow-y: auto;
    flex: 1;
    background: #ffffff;
}

.modal-body[b-akngusgfy4]::-webkit-scrollbar {
    width: 8px;
}

.modal-body[b-akngusgfy4]::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

.modal-body[b-akngusgfy4]::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
    border-radius: 4px;
}

.modal-body[b-akngusgfy4]::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
}

.modal-footer[b-akngusgfy4] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 24px 32px;
    background: linear-gradient(to top, #ffffff 0%, #f9fafb 100%);
    border-top: 2px solid rgba(33, 76, 166, 0.08);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.04);
}

.modal-body .form-group[b-akngusgfy4] {
    margin-bottom: 28px;
}

.modal-body .form-group.full-width[b-akngusgfy4] {
    grid-column: 1 / -1;
}

.modal-body .form-group:last-child[b-akngusgfy4] {
    margin-bottom: 0;
}

.modal-body .form-label[b-akngusgfy4],
.modal-body .detail-field-label[b-akngusgfy4] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
}

.modal-body .form-label i[b-akngusgfy4],
.modal-body .detail-field-label i[b-akngusgfy4] {
    color: #214ca6;
    font-size: 1.1rem;
    filter: drop-shadow(0 1px 2px rgba(33, 76, 166, 0.2));
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Form value styling in modal */
.modal-body .form-value[b-akngusgfy4] {
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(249, 250, 251, 0.8) 0%, rgba(243, 244, 246, 0.6) 100%);
    border: 2px solid rgba(229, 231, 235, 0.6);
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.6;
    color: #1f2937;
    min-height: 48px;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

.modal-body .form-value:hover[b-akngusgfy4] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(249, 250, 251, 0.9) 100%);
    border-color: rgba(33, 76, 166, 0.2);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.08);
}

/* Date value styling */
.modal-body .date-value[b-akngusgfy4] {
    flex-direction:row;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(33, 76, 166, 0.05) 0%, rgba(30, 64, 175, 0.03) 100%);
    border: 2px solid rgba(33, 76, 166, 0.1);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    color: #1e293b;
    min-height: 48px;
}

.modal-body .date-value i[b-akngusgfy4] {
    color: #214ca6;
    font-size: 1rem;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-body .date-value span[b-akngusgfy4] {
    flex: 1;
}

/* Status badge in modal */
.modal-body .status-badge[b-akngusgfy4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.modal-body .status-badge i[b-akngusgfy4] {
    font-size: 12px;
    filter: none;
    width: auto;
}

.modal-body .status-badge.status-new[b-akngusgfy4] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    border: 1px solid #fbbf24;
}

.modal-body .status-badge.status-assigned[b-akngusgfy4] {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e40af;
    border: 1px solid #93c5fd;
}

.modal-body .status-badge.status-inprogress[b-akngusgfy4] {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e40af;
    border: 1px solid #93c5fd;
}

.modal-body .status-badge.status-notachieved[b-akngusgfy4] {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
    border: 1px solid #f87171;
}

.modal-body .status-badge.status-paused[b-akngusgfy4] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    border: 1px solid #fbbf24;
}

.modal-body .status-badge.status-completed[b-akngusgfy4] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #065f46;
    border: 1px solid #6ee7b7;
}

.modal-body .status-badge.status-closed[b-akngusgfy4] {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: #374151;
    border: 1px solid #9ca3af;
}

.modal-body .status-badge.status-cancelled[b-akngusgfy4] {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
    border: 1px solid #f87171;
}

/* Level badge in modal */
.modal-body .subtask-level-badge[b-akngusgfy4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.modal-body .subtask-level-badge i[b-akngusgfy4] {
    font-size: 12px;
    filter: none;
    width: auto;
}

.modal-body .subtask-level-badge.subtask-level-1[b-akngusgfy4] {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    color: #3730a3;
    border: 1px solid #a5b4fc;
}

.modal-body .subtask-level-badge.subtask-level-2[b-akngusgfy4] {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e40af;
    border: 1px solid #93c5fd;
}

.modal-body .subtask-level-badge.subtask-level-3[b-akngusgfy4] {
    background: linear-gradient(135deg, #bfdbfe 0%, #93c5fd 100%);
    color: #1e40af;
    border: 1px solid #60a5fa;
}

.modal-body .subtask-level-badge.subtask-level-4[b-akngusgfy4],
.modal-body .subtask-level-badge.subtask-level-5[b-akngusgfy4],
.modal-body .subtask-level-badge.subtask-level-6[b-akngusgfy4],
.modal-body .subtask-level-badge.subtask-level-7[b-akngusgfy4],
.modal-body .subtask-level-badge.subtask-level-8[b-akngusgfy4] {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    color: white;
    border: 1px solid #2563eb;
}

.modal-body .form-label .required[b-akngusgfy4],
.modal-body .detail-field-label .required[b-akngusgfy4] {
    color: #dc2626;
    margin-left: 2px;
}

.modal-body .form-input[b-akngusgfy4],
.modal-body .form-select[b-akngusgfy4],
.modal-body textarea.form-input[b-akngusgfy4] {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid rgba(209, 213, 219, 0.6);
    border-radius: 12px;
    font-size: 14px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
}

.modal-body .form-input:focus[b-akngusgfy4],
.modal-body .form-select:focus[b-akngusgfy4],
.modal-body textarea.form-input:focus[b-akngusgfy4] {
    outline: none;
    border-color: #214ca6;
    border-width: 2px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 0 0 4px rgba(33, 76, 166, 0.1),
                0 4px 12px rgba(33, 76, 166, 0.15);
    transform: translateY(-1px);
}

.modal-body .form-input:hover:not(:disabled):not(:focus)[b-akngusgfy4],
.modal-body .form-select:hover:not(:disabled):not(:focus)[b-akngusgfy4],
.modal-body textarea.form-input:hover:not(:disabled):not(:focus)[b-akngusgfy4] {
    border-color: rgba(33, 76, 166, 0.3);
    background: rgba(255, 255, 255, 1);
}

.modal-body .form-input:disabled[b-akngusgfy4],
.modal-body .form-select:disabled[b-akngusgfy4],
.modal-body textarea.form-input:disabled[b-akngusgfy4] {
    background: #f3f4f6;
    cursor: not-allowed;
    opacity: 0.7;
}

.modal-body textarea.form-input[b-akngusgfy4] {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}

.modal-body .btn[b-akngusgfy4],
.modal-footer .btn[b-akngusgfy4] {
    padding: 12px 24px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.modal-body .btn:disabled[b-akngusgfy4],
.modal-footer .btn:disabled[b-akngusgfy4] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

.modal-body .btn-primary[b-akngusgfy4],
.modal-footer .btn-primary[b-akngusgfy4] {
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

.modal-body .btn-primary:hover:not(:disabled)[b-akngusgfy4],
.modal-footer .btn-primary:hover:not(:disabled)[b-akngusgfy4] {
    background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(33, 76, 166, 0.4);
}

.modal-body .btn-primary:active:not(:disabled)[b-akngusgfy4],
.modal-footer .btn-primary:active:not(:disabled)[b-akngusgfy4] {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.3);
}

.modal-body .btn-secondary[b-akngusgfy4],
.modal-footer .btn-secondary[b-akngusgfy4] {
    background: white;
    color: #374151;
    border: 2px solid rgba(209, 213, 219, 0.8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    min-width: 120px;
}

.modal-body .btn-secondary:hover:not(:disabled)[b-akngusgfy4],
.modal-footer .btn-secondary:hover:not(:disabled)[b-akngusgfy4] {
    background: #f9fafb;
    border-color: rgba(33, 76, 166, 0.4);
    color: #214ca6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.15);
}

.modal-body .btn-secondary i[b-akngusgfy4],
.modal-footer .btn-secondary i[b-akngusgfy4] {
    font-size: 14px;
}

.modal-body .btn-secondary:active:not(:disabled)[b-akngusgfy4],
.modal-footer .btn-secondary:active:not(:disabled)[b-akngusgfy4] {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.modal-body .form-alert[b-akngusgfy4] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    border: 2px solid;
    animation: slideDown-b-akngusgfy4 0.3s ease-out;
}

@keyframes slideDown-b-akngusgfy4 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-body .form-alert.danger[b-akngusgfy4] {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
    border-color: #fca5a5;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.15);
}

.modal-body .form-alert.danger i[b-akngusgfy4] {
    color: #dc2626;
    flex-shrink: 0;
    font-size: 1.25rem;
    filter: drop-shadow(0 2px 4px rgba(220, 38, 38, 0.2));
}

.modal-body .form-alert.danger div[b-akngusgfy4] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.modal-body .form-alert.danger strong[b-akngusgfy4] {
    font-weight: 700;
    font-size: 15px;
}

/* Subtask Mode Chooser */
.subtask-mode-chooser[b-akngusgfy4] {
    background: linear-gradient(135deg, rgba(249, 250, 251, 0.8) 0%, rgba(255, 255, 255, 0.9) 100%);
    border-radius: 16px;
    margin-bottom: 20px;
}

.subtask-mode-chooser p[b-akngusgfy4] {
    margin-bottom: 16px;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
}

.subtask-mode-chooser > div[b-akngusgfy4] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.subtask-mode-chooser .btn[b-akngusgfy4] {
    flex: 1;
    min-width: 200px;
    padding: 12px 18px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

.subtask-mode-chooser .btn-primary[b-akngusgfy4] {
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

.subtask-mode-chooser .btn-primary:hover:not(:disabled)[b-akngusgfy4] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(33, 76, 166, 0.4);
}

.subtask-mode-chooser .btn-outline-secondary[b-akngusgfy4] {
    background: white;
    color: #374151;
    border: 2px solid rgba(209, 213, 219, 0.6);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.subtask-mode-chooser .btn-outline-secondary:hover:not(:disabled)[b-akngusgfy4] {
    background: rgba(249, 250, 251, 0.9);
    border-color: rgba(33, 76, 166, 0.3);
    color: #214ca6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.subtask-mode-chooser small[b-akngusgfy4] {
    display: block;
    margin-top: 16px;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.6;
    padding: 12px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    border-left: 3px solid rgba(33, 76, 166, 0.3);
}

/* Input with icon */
.modal-body .input-with-icon[b-akngusgfy4] {
    position: relative;
    display: flex;
    align-items: center;
}

.modal-body .input-with-icon .input-icon[b-akngusgfy4] {
    position: absolute;
    left: 12px;
    color: #6b7280;
    pointer-events: none;
}

.modal-body .input-with-icon .form-input[b-akngusgfy4] {
    padding-left: 36px;
}

/* Dropdown panel */
.modal-body .dropdown-panel[b-akngusgfy4] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    margin-top: 4px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    max-height: 280px;
    overflow: auto;
}

.modal-body .dropdown-loading[b-akngusgfy4] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    color: #6b7280;
    font-size: 0.95rem;
}

.modal-body .spinner[b-akngusgfy4] {
    width: 16px;
    height: 16px;
    border: 2px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    display: inline-block;
    animation: spin-b-akngusgfy4 0.8s linear infinite;
}

@keyframes spin-b-akngusgfy4 {
    to {
        transform: rotate(360deg);
    }
}

.modal-body .dropdown-list[b-akngusgfy4] {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

.modal-body .dropdown-item[b-akngusgfy4] {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
}

.modal-body .dropdown-item:hover[b-akngusgfy4] {
    background: #f3f4f6;
}

.modal-body .dropdown-item .code[b-akngusgfy4] {
    font-weight: 600;
    color: #111827;
}

.modal-body .dropdown-item .name[b-akngusgfy4] {
    color: #374151;
}

/* Selected assignees list */
.modal-body .selected-assignees-list[b-akngusgfy4] {
    margin-top: 12px;
}

.modal-body .selected-assignee-item[b-akngusgfy4] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f3f4f6;
    border-radius: 6px;
    margin-bottom: 8px;
}

.modal-body .btn-icon-small[b-akngusgfy4] {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #dc2626;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.modal-body .btn-icon-small:hover:not(:disabled)[b-akngusgfy4] {
    background: #fee2e2;
}

.modal-body .btn-icon-small:disabled[b-akngusgfy4] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Tab Navigation */
.work-list-container[b-akngusgfy4] {
    background: var(--acv-white);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--gray-200);
    overflow: hidden;
    margin-bottom: 1rem;
}

.tab-navigation[b-akngusgfy4] {
    display: flex;
    border-bottom: 2px solid var(--gray-200);
    background: var(--gray-50);
    padding: 0;
    gap: 0;
}

.tab-button[b-akngusgfy4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--gray-600);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    white-space: nowrap;
}

.tab-button:hover:not(.active)[b-akngusgfy4] {
    background: var(--gray-100);
    color: var(--gray-800);
}

.tab-button.active[b-akngusgfy4] {
    color: var(--acv-primary);
    border-bottom-color: var(--acv-primary);
    background: var(--acv-white);
    font-weight: 600;
}

.tab-button i[b-akngusgfy4] {
    font-size: 0.9rem;
}

.tab-button span:not(.tab-badge)[b-akngusgfy4] {
    display: inline-block;
}

.tab-badge[b-akngusgfy4] {
    background: var(--acv-primary);
    color: var(--acv-white);
    padding: 0.125rem 0.5rem;
    border-radius: 0.75rem;
    font-size: 0.7rem;
    font-weight: 600;
    min-width: 1.25rem;
    text-align: center;
}

/* Timeline Section */
.history-layout[b-akngusgfy4] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    padding: 0.75rem;
    min-height: 300px;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
    box-sizing: border-box;
}

@media (max-width: 1024px) {
    .history-layout[b-akngusgfy4] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

.timeline-pane[b-akngusgfy4] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto; 
    overflow-x: hidden !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Timeline Header */
.timeline-pane-header[b-akngusgfy4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--acv-white);
    border: 1px solid var(--gray-200);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    margin-bottom: 0;
}

.timeline-pane-title[b-akngusgfy4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0;
}

.timeline-pane-title i[b-akngusgfy4] {
    color: var(--acv-primary);
    font-size: 1rem;
}

.timeline-pane-count[b-akngusgfy4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.375rem;
    background: var(--acv-primary);
    color: var(--acv-white);
    border-radius: 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 0.5rem;
}

.timeline-wrapper[b-akngusgfy4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    background: var(--acv-white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    min-height: 0;
    max-height: 807px;
}

.timeline-wrapper[b-akngusgfy4]::-webkit-scrollbar {
    width: 2px;
}

.timeline-wrapper[b-akngusgfy4]::-webkit-scrollbar-track {
    background: var(--gray-50);
}

.timeline-wrapper[b-akngusgfy4]::-webkit-scrollbar-thumb {
    background: rgba(33, 76, 166, 0.3);
    border-radius: 999px;
}

.timeline-wrapper[b-akngusgfy4]::-webkit-scrollbar-thumb:hover {
    background: rgba(33, 76, 166, 0.5);
}

.timeline-window[b-akngusgfy4] {
    flex: 1;
    overflow-y: auto;
    padding: 0.375rem 0 0.375rem 0; /* Không có padding-left để line và dot thẳng hàng */
    min-height: 0;
}

.timeline-window[b-akngusgfy4]::-webkit-scrollbar {
    width: 6px;
}

.timeline-window[b-akngusgfy4]::-webkit-scrollbar-track {
    background: var(--gray-50);
}

.timeline-window[b-akngusgfy4]::-webkit-scrollbar-thumb {
    background: rgba(33, 76, 166, 0.3);
    border-radius: 999px;
}

.timeline-window[b-akngusgfy4]::-webkit-scrollbar-thumb:hover {
    background: rgba(33, 76, 166, 0.5);
}

/* Timeline Container - Continuous vertical line */
.timeline[b-akngusgfy4] {
    --marker-width: 32px; /* Width cố định cho cột marker */
    --ts-font-size: 0.8125rem; /* Font size của timestamp */
    --ts-line-height: 1.4; /* Line height của timestamp */
    --ts-lh-calc: calc(var(--ts-font-size) * var(--ts-line-height)); /* Line height tính toán */
    --item-padding-top: 0.4375rem; /* Padding top của item */
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
}

/* Timeline Item - Grid layout: [marker] [content] - 2 cột cố định */
.timeline-item[b-akngusgfy4] {
    --item-padding-top: 0.4375rem;
    display: grid;
    grid-template-columns: var(--marker-width) 1fr;
    width: 100%;
    padding: var(--item-padding-top) 0.75rem var(--item-padding-top) 0.75rem;
    margin-bottom: 0.5rem;
    border: 1px solid rgba(33, 76, 166, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.6);
    color: inherit;
    cursor: pointer;
    text-align: left;
    column-gap: 0.625rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    align-items: start;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;
}

.timeline-item:last-child[b-akngusgfy4] {
    margin-bottom: 0;
}

.timeline-item:hover[b-akngusgfy4] {
    background: rgba(33, 76, 166, 0.06);
    border-color: rgba(33, 76, 166, 0.15);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.12);
}

.timeline-item:focus-visible[b-akngusgfy4] {
    outline: 2px solid var(--acv-primary);
    outline-offset: 2px;
}

.timeline-item.active[b-akngusgfy4] {
    background: linear-gradient(135deg, rgba(33, 76, 166, 0.12) 0%, rgba(30, 64, 175, 0.12) 100%);
    border-color: rgba(33, 76, 166, 0.3);
    box-shadow: 0 4px 16px rgba(33, 76, 166, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Timeline Marker Column - Chứa line và dot, width cố định */
.timeline-rail[b-akngusgfy4] {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: var(--ts-lh-calc); /* Đảm bảo chiều cao tối thiểu = line-height của timestamp */
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    z-index: 2;
}

/* Continuous vertical line - Vẽ ở marker column, chạy từ đầu đến cuối */
.timeline-rail[b-akngusgfy4]::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--gray-200);
    border-radius: 1px;
    z-index: 1;
    transform: translateX(-50%); /* Căn giữa line (center = 50% của marker column) */
}

/* Timeline Dot - Căn giữa line (X) và ngang hàng với timestamp (Y) */
.timeline-dot[b-akngusgfy4] {
    position: absolute;
    left: 50%; /* Center của marker column = center của line */
    top: calc(var(--item-padding-top) + (var(--ts-lh-calc) / 2) - 0.125rem); /* Center của timestamp row, xích lên một chút để ngang bằng */
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid var(--acv-primary);
    background: var(--acv-white);
    transition: all 0.2s ease;
    transform: translate(-50%, -50%); /* Căn giữa hoàn hảo: X và Y */
    z-index: 3;
    box-shadow: 0 0 0 3px var(--acv-white); /* Tạo khoảng trắng che line ngay sau dot */
    /* 
     * Dot center X = 50% của marker column = line center (nhờ transform translateX(-50%))
     * Dot center Y = padding-top + (line-height của timestamp) / 2 - 0.125rem = ngang bằng với timestamp
     */
}

.timeline-item.active .timeline-dot[b-akngusgfy4] {
    background: var(--acv-primary);
    width: 10px;
    height: 10px;
    border-width: 2px;
    box-shadow: 0 0 0 2px var(--acv-white);
    /* Active dot lớn hơn nhưng vẫn căn giữa hoàn hảo nhờ transform translate(-50%, -50%) */
}

/* Timeline Content - Second column */
.timeline-content[b-akngusgfy4] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1;
    min-width: 0;
    padding: 0 0.5rem 0 0; /* Padding-right để text không sát mép */
    overflow: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    box-sizing: border-box;
}

/* Timeline Time - Row đầu tiên, căn giữa với dot */
.timeline-time[b-akngusgfy4] {
    font-weight: 700;
    font-size: var(--ts-font-size);
    line-height: var(--ts-line-height);
    color: var(--gray-700);
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    /* Timestamp có line-height cố định, dot sẽ căn theo center của line-height này */
}

.timeline-time[b-akngusgfy4]::before {
    content: '';
    width: 6px;
    height: 6px;
    background: #214ca6;
    border-radius: 50%;
    opacity: 0.6;
}

.timeline-item.active .timeline-time[b-akngusgfy4] {
    color: #214ca6;
}

.timeline-item.active .timeline-time[b-akngusgfy4]::before {
    opacity: 1;
    background: #214ca6;
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.2);
}

.timeline-title[b-akngusgfy4] {
    font-size: 0.875rem;
    color: var(--gray-800);
    line-height: 1.5;
    word-break: break-word;
    overflow-wrap: break-word;
    font-weight: 600;
    margin-bottom: 0.125rem;
    max-width: 100%;
    overflow: hidden;
}

.timeline-item.active .timeline-title[b-akngusgfy4] {
    color: #214ca6;
    font-weight: 700;
}

.timeline-meta[b-akngusgfy4] {
    font-size: 0.75rem;
    color: var(--gray-500);
    margin-top: 0.25rem;
    line-height: 1.4;
    word-break: break-word;
    overflow-wrap: break-word;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    max-width: 100%;
    overflow: hidden;
}

.timeline-meta[b-akngusgfy4]::before {
    content: '👤';
    font-size: 0.7rem;
    opacity: 0.7;
}

.timeline-detail[b-akngusgfy4] {
    min-height: 12rem;
    position: sticky;
    top: 0.75rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

.detail-card[b-akngusgfy4] {
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(249, 250, 251, 0.98) 100%);
    backdrop-filter: blur(10px);
    padding: 1.5rem 1.75rem;
    box-shadow: 0 4px 16px rgba(33, 76, 166, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    margin-left: 1rem;
    width: 100%;
    box-sizing: border-box;
}

.detail-card:hover[b-akngusgfy4] {
    box-shadow: 0 8px 24px rgba(33, 76, 166, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.detail-card-header[b-akngusgfy4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(33, 76, 166, 0.1);
}

.detail-card h3[b-akngusgfy4] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gray-800);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.detail-card h3[b-akngusgfy4]::before {
    content: '';
    width: 4px;
    height: 20px;
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%);
    border-radius: 2px;
}

.action-badge[b-akngusgfy4] {
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.action-badge.action-update[b-akngusgfy4] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

.action-badge.action-create[b-akngusgfy4] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.action-badge.action-delete[b-akngusgfy4] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

.action-badge.action-assign[b-akngusgfy4] {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
}

.detail-list[b-akngusgfy4] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin: 0;
}

.detail-item[b-akngusgfy4] {
    padding: 1rem 1.125rem;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 10px;
    border: 1px solid rgba(33, 76, 166, 0.08);
    transition: all 0.3s ease;
    margin-bottom: 0;
}

.detail-item:hover[b-akngusgfy4] {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(33, 76, 166, 0.15);
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.1);
}

.detail-item dt[b-akngusgfy4] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gray-600);
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.detail-item dt i[b-akngusgfy4] {
    color: #214ca6;
    font-size: 0.875rem;
    width: 16px;
    text-align: center;
}

.detail-item dd[b-akngusgfy4] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--gray-800);
    line-height: 1.6;
    font-weight: 500;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

/* Gom nhóm thành 1 hàng ngang */
.meta-row[b-akngusgfy4] {
    display: flex;
    gap: 20px; /* Khoảng cách giữa Thời gian và Người thực hiện */
    margin-bottom: 12px;
    border-bottom: 1px solid #eee; /* Đường gạch ngăn cách nhẹ */
    padding-bottom: 12px;
}

    /* Item bên trong meta-row */
    .meta-row .detail-item.compact[b-akngusgfy4] {
        flex: 1; /* Chia đều 50-50 */
        margin-bottom: 0; /* Bỏ margin thừa */
        border-bottom: none; /* Bỏ border cũ nếu có */
        padding-bottom: 0;
    }

    /* Làm gọn lại font chữ và padding của dt/dd trong khu vực này */
    .meta-row dt[b-akngusgfy4] {
        font-size: 0.8rem; /* Chữ tiêu đề nhỏ lại xíu */
        color: #888;
        margin-bottom: 2px;
    }

    .meta-row dd[b-akngusgfy4] {
        font-size: 0.95rem; /* Chữ nội dung vừa phải */
        font-weight: 600; /* In đậm cho dễ đọc */
        color: #333;
    }

/* --- TÙY CHỈNH MÔ TẢ CHI TIẾT (Cho to ra) --- */
.description-text[b-akngusgfy4] {
    /* Tăng chiều cao tối đa lên để hiển thị được nhiều hơn */
    max-height: 300px;
    min-height: 80px; /* Đảm bảo lúc nào cũng có độ cao nhất định */

    background-color: #f8f9fa;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    overflow-y: auto; /* Hiện scroll nếu dài quá 300px */
}

/* Responsive: Trên điện thoại thì quay về xếp dọc */
@media (max-width: 576px) {
    .meta-row[b-akngusgfy4] {
        flex-direction: column;
        gap: 12px;
    }
}

.description-text[b-akngusgfy4] {
    /*    background: linear-gradient(135deg, rgba(33, 76, 166, 0.05) 0%, rgba(30, 64, 175, 0.05) 100%);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    border-left: 3px solid #214ca6;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--gray-700);*/
    /* 1. Giữ nguyên định dạng xuống dòng của người dùng */
    white-space: pre-wrap;
    /* 2. Style cho giống một khung văn bản đọc được */
    background-color: #f9f9f9; /* Nền xám nhẹ cho dễ phân biệt */
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #eee;
    color: #333;
    font-size: 0.95rem;
    line-height: 1.5;
    /* 3. Giới hạn chiều cao và tạo thanh cuộn nếu quá dài */
    max-height: 200px; /* Bạn có thể tăng lên 300px tùy ý */
    overflow-y: auto; /* Tự hiện thanh cuộn nếu nội dung dài hơn 200px */
}

.detail-item-changes[b-akngusgfy4] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(37, 99, 235, 0.05) 100%);
    border: 1px solid rgba(59, 130, 246, 0.2);
 
}

.field-changes-list[b-akngusgfy4] {
    max-height: 400px;
    /*    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    margin-top: 0.5rem;
    max-height: 297px;*/
    overflow-y: auto;
    padding-right: 8px;
}

.field-change-item[b-akngusgfy4] {
    background: white;
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid rgba(33, 76, 166, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    width: 100%;
    box-sizing: border-box;
    max-width: 100%;
    overflow-x: hidden;
}

.field-change-item:hover[b-akngusgfy4] {
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.15);
    transform: translateY(-2px);
    border-color: rgba(33, 76, 166, 0.2);
}

.field-name[b-akngusgfy4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: #214ca6;
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(33, 76, 166, 0.1);
}

.field-name i[b-akngusgfy4] {
    font-size: 0.75rem;
}

.field-values[b-akngusgfy4] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
}

.value-old[b-akngusgfy4],
.value-new[b-akngusgfy4] {
    flex: 1;
    min-width: 120px;
    max-width: calc(50% - 0.5rem);
    padding: 0.625rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-wrap: break-word;
    overflow-x: hidden;
}

.value-old[b-akngusgfy4] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(220, 38, 38, 0.08) 100%);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.value-new[b-akngusgfy4] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(5, 150, 105, 0.08) 100%);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.value-label[b-akngusgfy4] {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.375rem;
    color: var(--gray-600);
}

.value-old .value-label[b-akngusgfy4] {
    color: #dc2626;
}

.value-new .value-label[b-akngusgfy4] {
    color: #059669;
}

/* Đảm bảo các ô chứa giá trị tự động giãn chiều cao theo nội dung */
.field-values .value-old[b-akngusgfy4],
.field-values .value-new[b-akngusgfy4] {
    height: auto !important; /* Tự giãn */
    max-height: none !important; /* Bỏ giới hạn chiều cao */
    overflow: visible !important; /* Tuyệt đối không hiện scrollbar */
    flex: 1; /* Đảm bảo chia đều không gian */
}

/* Xử lý phần text bên trong */
.value-content[b-akngusgfy4] {
    /* Đảm bảo text dài sẽ tự xuống dòng thay vì trôi ngang */
    white-space: pre-wrap;
    word-break: break-word;
    /* Bỏ scroll cũ nếu có */
    overflow: visible !important;
}

.value-content[b-akngusgfy4] {
    display: block;
    color: var(--gray-800);
    font-weight: 500;
    word-break: break-word;
    line-height: 1.5;
    white-space: pre-wrap;
}

.value-arrow[b-akngusgfy4] {
    color: #214ca6;
    font-size: 1rem;
    flex-shrink: 0;
    padding: 0.5rem;
    background: rgba(33, 76, 166, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.detail-card pre[b-akngusgfy4] {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: inherit;
    background: var(--gray-50);
    border-radius: 6px;
    padding: 0.625rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    border: 1px solid var(--gray-200);
}

.detail-empty[b-akngusgfy4] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 8rem;
    color: var(--gray-400);
    text-align: center;
    font-size: 0.8125rem;
    padding: 1rem;
    font-style: italic;
}

.timeline-empty[b-akngusgfy4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    color: var(--gray-500);
    min-height: 300px;
    flex: 1;
    animation: fadeInUp-b-akngusgfy4 0.6s ease-out;
}

.timeline-empty[b-akngusgfy4]::before {
    content: "📋";
    font-size: 4rem;
    margin-bottom: 1.5rem;
    display: block;
    animation: float-b-akngusgfy4 3s ease-in-out infinite;
}

@keyframes float-b-akngusgfy4 {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.timeline-empty-text[b-akngusgfy4] {
    font-size: 1.0625rem;
    color: var(--gray-700);
    font-weight: 600;
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.loading-state[b-akngusgfy4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    min-height: 300px;
    color: var(--gray-600);
    font-size: 0.875rem;
}

.loading-state .loading-spinner[b-akngusgfy4] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--gray-200);
    border-top-color: var(--acv-primary);
    border-radius: 50%;
    animation: spin-b-akngusgfy4 1s linear infinite;
    margin-bottom: 0.75rem;
}

.error-state[b-akngusgfy4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    min-height: 200px;
    text-align: center;
    color: var(--error-main);
    background: var(--error-lighter);
    border-radius: 8px;
    border: 1px solid var(--error-light);
    font-size: 0.875rem;
}

.error-state[b-akngusgfy4]::before {
    content: "⚠️";
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.8;
}

.loading-inline[b-akngusgfy4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    margin-top: 0.5rem;
    text-align: center;
    color: var(--gray-600);
    font-size: 0.8125rem;
    background: var(--gray-50);
    border-radius: 6px;
    border-top: 1px solid var(--gray-200);
}

.loading-inline[b-akngusgfy4]::before {
    content: "";
    width: 14px;
    height: 14px;
    border: 2px solid var(--gray-300);
    border-top-color: var(--acv-primary);
    border-radius: 50%;
    animation: spin-b-akngusgfy4 0.8s linear infinite;
}

/* Files Tab Container */
.files-tab-container[b-akngusgfy4] {
    padding: 1rem 1.25rem;
    min-height: 400px;
    animation: fadeIn-b-akngusgfy4 0.5s ease-out;
}

.files-content[b-akngusgfy4] {
    width: 100%;
}

/* Tối ưu TaskFileManager khi nằm trong tab */
.files-tab-container .task-file-manager[b-akngusgfy4] {
    margin-top: 0;
    padding: 0;
    box-shadow: none;
    border: none;
    background: transparent;
}

.files-tab-container .file-manager-header[b-akngusgfy4] {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(33, 76, 166, 0.1);
    position: relative;
}

.files-tab-container .file-manager-header[b-akngusgfy4]::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, var(--acv-primary) 0%, transparent 100%);
}

.files-tab-container .file-manager-header .section-title[b-akngusgfy4] {
    font-size: 1.25rem;
    font-weight: 700;
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.files-tab-container .file-icon[b-akngusgfy4] {
    font-size: 1.5rem;
    filter: drop-shadow(0 2px 4px rgba(33, 76, 166, 0.2));
}

.files-tab-container .file-filter-section[b-akngusgfy4] {
    margin-bottom: 0.875rem;
    padding: 0.625rem 0.75rem;
    gap: 0.75rem;
}

.files-tab-container .file-list[b-akngusgfy4] {
    gap: 0.625rem;
}

.files-tab-container .file-item[b-akngusgfy4] {
    padding: 0.625rem 0.875rem;
    gap: 0.75rem;
}

.files-tab-container .file-icon-wrapper[b-akngusgfy4] {
    width: 40px;
    height: 40px;
}

.files-tab-container .file-type-icon[b-akngusgfy4] {
    font-size: 24px;
}

.files-tab-container .file-name[b-akngusgfy4] {
    font-size: 14px;
    margin-bottom: 4px;
}

.files-tab-container .file-meta[b-akngusgfy4] {
    font-size: 12px;
    margin-bottom: 2px;
    gap: 6px;
}

.files-tab-container .file-description[b-akngusgfy4] {
    font-size: 12px;
    margin-top: 2px;
}

.files-tab-container .btn-icon[b-akngusgfy4] {
    width: 32px;
    height: 32px;
    font-size: 14px;
}

.files-tab-container .loading-state[b-akngusgfy4] {
    padding: 2rem 1rem;
}

.files-tab-container .loading-spinner[b-akngusgfy4] {
    width: 32px;
    height: 32px;
    margin-bottom: 0.75rem;
}

.files-tab-container .empty-state[b-akngusgfy4] {
    padding: 2rem 1rem;
}

.files-tab-container .empty-icon[b-akngusgfy4] {
    font-size: 48px;
    margin-bottom: 0.75rem;
}

.files-tab-container .empty-state h4[b-akngusgfy4] {
    font-size: 16px;
    margin-bottom: 0.5rem;
}

.files-tab-container .empty-state p[b-akngusgfy4] {
    font-size: 13px;
}

/* Responsive for Timeline */
@media (max-width: 768px) {
    .tab-button[b-akngusgfy4] {
        padding: 0.75rem 1rem;
        font-size: 0.85rem;
    }

    .tab-button i[b-akngusgfy4] {
        font-size: 0.8rem;
    }

    .history-layout[b-akngusgfy4] {
        padding: 0.625rem;
        gap: 0.625rem;
    }

    .timeline-window[b-akngusgfy4] {
        max-height: 400px;
        padding: 0.5rem 0.5rem 0.5rem 0; /* Không có padding-left để line và dot thẳng hàng */
    }

    .timeline[b-akngusgfy4] {
        --marker-width: 28px; /* Marker width nhỏ hơn trên mobile */
        padding: 0.5rem 0;
    }

    .timeline-item[b-akngusgfy4] {
        --item-padding-top: 0.375rem; /* Padding top nhỏ hơn trên mobile */
        grid-template-columns: var(--marker-width) 1fr;
        padding: var(--item-padding-top) 0 var(--item-padding-top) 0;
        margin-bottom: 0.25rem;
        column-gap: 0.5rem;
        align-items: start;
    }

    .timeline-rail[b-akngusgfy4] {
        min-height: var(--ts-lh-calc); /* Chiều cao tối thiểu = line-height của timestamp */
    }

    .timeline-dot[b-akngusgfy4] {
        left: 50%; /* Center của marker column = center của line */
        top: calc(var(--item-padding-top) + (var(--ts-lh-calc) / 2) - 0.125rem); /* Center của timestamp row, xích lên một chút để ngang bằng */
        /* Transform translate(-50%, -50%) tự động căn giữa, không cần margin */
    }

    .timeline-content[b-akngusgfy4] {
        padding: 0.0625rem 0.4375rem 0 0; /* Padding-right để text không sát mép trên mobile */
    }

    .timeline-window[b-akngusgfy4] {
        padding: 0.25rem 0.5rem;
    }

    .detail-card[b-akngusgfy4] {
        padding: 0.625rem 0.75rem;
    }

    .detail-card h3[b-akngusgfy4] {
        font-size: 0.9375rem;
        margin-bottom: 0.625rem;
    }

    .detail-card dl[b-akngusgfy4] {
        gap: 0.5rem;
    }

    .detail-empty[b-akngusgfy4] {
        min-height: 8rem;
        padding: 0.875rem;
        font-size: 0.8125rem;
    }

    .timeline-empty[b-akngusgfy4] {
        padding: 2rem 1rem;
        min-height: 250px;
    }

    .timeline-empty[b-akngusgfy4]::before {
        font-size: 2.5rem;
        margin-bottom: 0.75rem;
    }

    .timeline-empty-text[b-akngusgfy4] {
        font-size: 0.875rem;
    }

    .timeline-pane-header[b-akngusgfy4] {
        padding: 0.625rem 0.75rem;
    }

    .timeline-pane-title[b-akngusgfy4] {
        font-size: 0.875rem;
    }

    .timeline-pane-count[b-akngusgfy4] {
        min-width: 1.25rem;
        height: 1.25rem;
        font-size: 0.6875rem;
        padding: 0 0.3125rem;
    }

    .loading-state[b-akngusgfy4],
    .error-state[b-akngusgfy4] {
        padding: 0.875rem;
        font-size: 0.8125rem;
    }

    .files-tab-container[b-akngusgfy4] {
        padding: 0.625rem 0.75rem;
    }

    .files-tab-container .file-manager-header[b-akngusgfy4] {
        margin-bottom: 0.75rem;
        padding-bottom: 0.625rem;
    }

    .files-tab-container .file-manager-header .section-title[b-akngusgfy4] {
        font-size: 1rem;
    }

    .files-tab-container .file-filter-section[b-akngusgfy4] {
        margin-bottom: 0.75rem;
        padding: 0.5rem 0.625rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.625rem;
    }

    .files-tab-container .file-item[b-akngusgfy4] {
        padding: 0.5rem 0.75rem;
    }

    .files-tab-container .file-icon-wrapper[b-akngusgfy4] {
        width: 36px;
        height: 36px;
    }

    .files-tab-container .file-type-icon[b-akngusgfy4] {
        font-size: 20px;
    }
}

/* Đảm bảo modal-dialog là relative để overlay bám đúng */
.modal-dialog[b-akngusgfy4] {
    position: relative;
}

/* Overlay che toàn bộ nội dung modal, chặn mọi tương tác */
.modal-loading-overlay[b-akngusgfy4] {
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0; */
    background: rgba(255, 255, 255, 0.6); /* nền mờ */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50; /* cao hơn nội dung bên trong modal */
    pointer-events: all; /* chặn click xuyên xuống dưới */
}

    /* Optional: text bên cạnh spinner */
    .modal-loading-overlay span[b-akngusgfy4] {
        margin-left: 8px;
        font-size: 0.95rem;
    }


.work-title strong[b-akngusgfy4] {
    color: var(--gray-800);
    font-weight: 600;
}

.work-title-clickable[b-akngusgfy4] {
    cursor: pointer !important;
    transition: all 0.2s ease;
    padding: 0.25rem 0.5rem;
    margin: -0.25rem -0.5rem;
    border-radius: 6px;
    display: inline-block;
}

    .work-title-clickable[b-akngusgfy4],
    .work-title-clickable *[b-akngusgfy4] {
        cursor: pointer !important;
    }

        .work-title-clickable:hover[b-akngusgfy4] {
            background-color: var(--acv-primary-lighter);
            color: var(--acv-primary);
            text-decoration: underline;
        }

            .work-title-clickable:hover strong[b-akngusgfy4] {
                color: var(--acv-primary);
                text-decoration: underline;
            }

/* ============================================
   Progress Report Tab Styles
   ============================================ */

.progress-tab-container[b-akngusgfy4] {
    padding: 1.5rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 12px;
    min-height: 500px;
}

.progress-content[b-akngusgfy4] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Progress Form Section */
.progress-form-section[b-akngusgfy4] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
}

.progress-form-section .section-header[b-akngusgfy4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e9ecef;
}

.progress-form-section .section-title[b-akngusgfy4] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.progress-form-section .section-title i[b-akngusgfy4] {
    color: #28a745;
    font-size: 1.125rem;
}

.progress-form-card[b-akngusgfy4] {
/*    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);*/
    border-radius: 8px;
/*    padding: 1.5rem;
    border: 1px solid #e9ecef;*/
}

.progress-form-card .form-group[b-akngusgfy4] {
    margin-bottom: 1.5rem;
}

.progress-form-card .form-label[b-akngusgfy4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.75rem;
    font-size: 0.9375rem;
}

.progress-form-card .form-label i[b-akngusgfy4] {
    color: #6c757d;
    font-size: 0.875rem;
}

.progress-form-card .required[b-akngusgfy4] {
    color: #dc3545;
    margin-left: 0.25rem;
}

/* Progress Percentage Input */
.progress-percentage-input[b-akngusgfy4] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.progress-slider[b-akngusgfy4] {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(to right, #e9ecef 0%, #28a745 100%);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.progress-slider[b-akngusgfy4]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(40, 167, 69, 0.4);
    transition: all 0.2s ease;
}

.progress-slider[b-akngusgfy4]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.6);
}

.progress-slider[b-akngusgfy4]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(40, 167, 69, 0.4);
    transition: all 0.2s ease;
}

.progress-slider[b-akngusgfy4]::-moz-range-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.6);
}

.progress-percentage-display[b-akngusgfy4] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.75rem;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

.percentage-value[b-akngusgfy4] {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Textarea */
.progress-form-card .form-textarea[b-akngusgfy4] {
    width: 100%;
    padding: 0.875rem;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-family: inherit;
    resize: vertical;
    transition: all 0.2s ease;
    background: white;
}

.progress-form-card .form-textarea:focus[b-akngusgfy4] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.progress-form-card .form-hint[b-akngusgfy4] {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

.char-count[b-akngusgfy4] {
    font-size: 0.8125rem;
    color: #6c757d;
}

/* Form Actions */
.progress-form-card .form-actions[b-akngusgfy4] {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e9ecef;
}

.progress-form-card .btn[b-akngusgfy4] {
    flex: 1;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.progress-form-card .btn-primary[b-akngusgfy4] {
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-light) 100%);
    color: white;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.3);
}

.progress-form-card .btn-primary span[b-akngusgfy4] {
    font-weight: 600;
}

.progress-form-card .btn-primary:hover:not(:disabled)[b-akngusgfy4] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.4);
}

.progress-form-card .btn-primary:disabled[b-akngusgfy4] {
    opacity: 0.6;
    cursor: not-allowed;
}

.progress-form-card .btn-secondary[b-akngusgfy4] {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(108, 117, 125, 0.3);
}

.progress-form-card .btn-secondary:hover:not(:disabled)[b-akngusgfy4] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
}

/* Progress History Section */
.progress-history-section[b-akngusgfy4] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
    border-radius: 16px;
    padding: 1.75rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
    border: 1.5px solid rgba(33, 76, 166, 0.1);
    transition: all 0.3s ease;
}

.progress-history-section:hover[b-akngusgfy4] {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.06);
    border-color: rgba(33, 76, 166, 0.15);
}

.progress-history-section .section-header[b-akngusgfy4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 2px solid rgba(33, 76, 166, 0.1);
    position: relative;
}

.progress-history-section .section-title[b-akngusgfy4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-800);
}

.progress-history-section .section-title i[b-akngusgfy4] {
    font-size: 1.25rem;
    color: var(--acv-primary);
    display: inline-block;
    width: auto;
    height: auto;
}

.progress-history-section .section-header[b-akngusgfy4]::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #214CA6 0%, #1E40AF 100%);
    border-radius: 2px;
}

.progress-history-section .section-title[b-akngusgfy4] {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    letter-spacing: -0.02em;
}

.progress-history-section .section-title i[b-akngusgfy4] {
    color: #214CA6;
    font-size: 1.25rem;
    background: linear-gradient(135deg, rgba(33, 76, 166, 0.1) 0%, rgba(30, 64, 175, 0.1) 100%);
    padding: 0.5rem;
    border-radius: 10px;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-badge[b-akngusgfy4] {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
    color: white;
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(23, 162, 184, 0.3);
}

/* Progress Reports List */
.progress-reports-list[b-akngusgfy4] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.5rem;
}

/* Custom scrollbar cho progress reports list */
.progress-reports-list[b-akngusgfy4]::-webkit-scrollbar {
    width: 6px;
}

.progress-reports-list[b-akngusgfy4]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.progress-reports-list[b-akngusgfy4]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

.progress-reports-list[b-akngusgfy4]::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.progress-report-item[b-akngusgfy4] {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 0.875rem;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

.progress-report-item:hover[b-akngusgfy4] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: var(--acv-primary);
}

.report-header[b-akngusgfy4] {
    margin-bottom: 0.75rem;
}

.report-meta[b-akngusgfy4] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.report-percentage[b-akngusgfy4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(40, 167, 69, 0.3);
}

.report-percentage i[b-akngusgfy4] {
    color: white;
    font-size: 0.875rem;
}

.percentage-badge[b-akngusgfy4] {
    color: white;
    font-weight: 700;
    font-size: 0.9375rem;
}

.report-info[b-akngusgfy4] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.813rem;
    color: #6c757d;
}

.report-date[b-akngusgfy4],
.report-author[b-akngusgfy4] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.report-date i[b-akngusgfy4],
.report-author i[b-akngusgfy4] {
    font-size: 0.75rem;
    color: #adb5bd;
}

.report-content[b-akngusgfy4] {
    padding: 0.625rem;
    background: white;
    border-radius: 6px;
    border-left: 3px solid #214ca6;
    cursor: pointer;
    transition: all 0.2s ease;
}

.report-content:hover[b-akngusgfy4] {
    background: #f8f9fa;
    border-left-color: #1a3d8a;
    box-shadow: 0 2px 4px rgba(33, 76, 166, 0.1);
}

.report-content p[b-akngusgfy4] {
    margin: 0;
    color: #495057;
    line-height: 1.5;
    font-size: 0.813rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
}

/* Progress Report Detail Modal */
.progress-report-detail-modal-overlay[b-akngusgfy4] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 1rem;
    animation: fadeIn-b-akngusgfy4 0.2s ease;
}

@keyframes fadeIn-b-akngusgfy4 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.progress-report-detail-modal[b-akngusgfy4] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    max-width: 700px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-akngusgfy4 0.3s ease;
}

@keyframes slideUp-b-akngusgfy4 {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.progress-report-detail-modal-header[b-akngusgfy4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e9ecef;
}

.progress-report-detail-modal-title[b-akngusgfy4] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #214ca6;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.progress-report-detail-modal-title i[b-akngusgfy4] {
    font-size: 1rem;
}

.progress-report-detail-modal-close[b-akngusgfy4] {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: #6c757d;
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.progress-report-detail-modal-close:hover[b-akngusgfy4] {
    background: #f8f9fa;
    color: #495057;
}

.progress-report-detail-modal-body[b-akngusgfy4] {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.progress-report-detail-meta[b-akngusgfy4] {
    margin-bottom: 1.25rem;
}

.progress-report-detail-info[b-akngusgfy4] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-size: 0.875rem;
    color: #6c757d;
}

.progress-report-detail-date[b-akngusgfy4],
.progress-report-detail-author[b-akngusgfy4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.progress-report-detail-date i[b-akngusgfy4],
.progress-report-detail-author i[b-akngusgfy4] {
    font-size: 0.875rem;
    color: #adb5bd;
}

.progress-report-detail-content[b-akngusgfy4] {
    background: #f8f9fa;
    border-left: 3px solid #214ca6;
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 1.25rem;
}

.progress-report-detail-content p[b-akngusgfy4] {
    margin: 0;
    color: #495057;
    line-height: 1.6;
    font-size: 0.9375rem;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.progress-report-detail-files[b-akngusgfy4] {
    margin-top: 1.25rem;
}

.progress-report-detail-files-label[b-akngusgfy4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
}

.progress-report-detail-files-list[b-akngusgfy4] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.progress-report-detail-file-item[b-akngusgfy4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.progress-report-detail-file-item:hover[b-akngusgfy4] {
    border-color: #214ca6;
    box-shadow: 0 2px 4px rgba(33, 76, 166, 0.1);
}

.progress-report-detail-file-info[b-akngusgfy4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.progress-report-detail-file-info i[b-akngusgfy4] {
    font-size: 1.25rem;
}

.progress-report-detail-file-details[b-akngusgfy4] {
    flex: 1;
}

.progress-report-detail-file-name[b-akngusgfy4] {
    font-weight: 500;
    color: #495057;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

.progress-report-detail-file-size[b-akngusgfy4] {
    font-size: 0.75rem;
    color: #6c757d;
}

.progress-report-detail-file-download[b-akngusgfy4] {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    color: #214ca6;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-report-detail-file-download:hover[b-akngusgfy4] {
    background: #214ca6;
    color: white;
    border-color: #214ca6;
}

.progress-report-detail-modal-footer[b-akngusgfy4] {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e9ecef;
    display: flex;
    justify-content: flex-end;
}

/* Custom scrollbar cho modal body */
.progress-report-detail-modal-body[b-akngusgfy4]::-webkit-scrollbar {
    width: 8px;
}

.progress-report-detail-modal-body[b-akngusgfy4]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.progress-report-detail-modal-body[b-akngusgfy4]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

.progress-report-detail-modal-body[b-akngusgfy4]::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Report Files Styles */
.report-files[b-akngusgfy4] {
    margin-top: 0.75rem;
    font-size: 0.813rem;
}

.report-files-label[b-akngusgfy4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.813rem;
    color: #495057;
}

.report-files-label i[b-akngusgfy4] {
    font-size: 0.75rem;
    color: #6c757d;
}

.report-files-list[b-akngusgfy4] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.report-file-item[b-akngusgfy4] {
    font-size: 0.813rem;
    padding: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.report-file-item .file-info[b-akngusgfy4] {
    font-size: 0.813rem;
    flex: 1;
    min-width: 0; /* Cho phép shrink */
    overflow: hidden;
}

.report-file-item .file-name[b-akngusgfy4] {
    font-size: 0.813rem;
    font-weight: 500;
    color: #495057;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.report-file-item .file-size[b-akngusgfy4] {
    font-size: 0.75rem;
    color: #6c757d;
}

.report-file-item .btn[b-akngusgfy4] {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    flex-shrink: 0; /* Không cho phép button bị shrink */
    min-width: auto;
}

.report-file-item .btn i[b-akngusgfy4] {
    font-size: 0.75rem;
}

/* Empty State */
.empty-state[b-akngusgfy4] {
    text-align: center;
    padding: 3rem 1.5rem;
    color: #6c757d;
}

.empty-icon[b-akngusgfy4] {
    font-size: 4rem;
    color: #adb5bd;
    margin-bottom: 1rem;
}

.empty-state h3[b-akngusgfy4] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.5rem;
}

.empty-state p[b-akngusgfy4] {
    font-size: 0.9375rem;
    color: #6c757d;
}

/* Responsive */
@media (max-width: 768px) {
    .progress-tab-container[b-akngusgfy4] {
        padding: 1rem;
    }

    .progress-content[b-akngusgfy4] {
        gap: 1.5rem;
    }

    .progress-form-section[b-akngusgfy4],
    .progress-history-section[b-akngusgfy4] {
        padding: 1rem;
    }

    .report-meta[b-akngusgfy4] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .progress-form-card .form-actions[b-akngusgfy4] {
        flex-direction: column;
    }

    .progress-form-card .btn[b-akngusgfy4] {
        width: 100%;
    }
}
.list-count[b-akngusgfy4] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.list-count-number[b-akngusgfy4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    padding: 0.375rem 0.875rem;
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%);
    color: white; /* chữ trắng */
    font-weight: 600;
    line-height: 1.2;
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
    transition: all 0.3s ease;
    animation: popIn-b-akngusgfy4 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    border-radius: 1rem;
    font-size: 0.875rem;
}

.list-count-text[b-akngusgfy4] {
    font-size: 0.875rem;
    color: var(--gray-600);
}

/* Subtask Warning Modal */
.subtask-warning-modal-overlay[b-akngusgfy4] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn-b-akngusgfy4 0.2s ease-out;
}

@keyframes fadeIn-b-akngusgfy4 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.subtask-warning-modal[b-akngusgfy4] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 520px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    position: relative;
    animation: slideUp-b-akngusgfy4 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    border-top: 4px solid #fbbf24;
}

@keyframes slideUp-b-akngusgfy4 {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.subtask-warning-modal-header[b-akngusgfy4] {
    display: flex;
    justify-content: flex-end;
    padding: 1rem 1.25rem 0.5rem;
}

.subtask-warning-modal-close[b-akngusgfy4] {
    background: none;
    border: none;
    font-size: 1.75rem;
    color: #6b7280;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s ease;
    line-height: 1;
}

.subtask-warning-modal-close:hover[b-akngusgfy4] {
    background: #f3f4f6;
    color: #374151;
}

.subtask-warning-modal-body[b-akngusgfy4] {
    padding: 1.5rem 2rem 2rem;
    text-align: center;
}

.subtask-warning-icon[b-akngusgfy4] {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(245, 158, 11, 0.15) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #fbbf24;
}

.subtask-warning-icon i[b-akngusgfy4] {
    font-size: 2.5rem;
    color: #f59e0b;
}

.subtask-warning-title[b-akngusgfy4] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 1rem 0;
    line-height: 1.3;
}

.subtask-warning-message[b-akngusgfy4] {
    font-size: 1rem;
    color: #4b5563;
    line-height: 1.6;
    margin: 0;
}

.subtask-warning-modal-footer[b-akngusgfy4] {
    padding: 0 2rem 2rem;
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.subtask-warning-modal-footer .btn[b-akngusgfy4] {
    min-width: 180px;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.subtask-warning-modal-footer .btn-primary[b-akngusgfy4] {
    background: linear-gradient(135deg, #214CA6 0%, #1e40af 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

.subtask-warning-modal-footer .btn-primary:hover[b-akngusgfy4] {
    background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(33, 76, 166, 0.4);
}

.subtask-warning-modal-footer .btn-primary:active[b-akngusgfy4] {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.3);
}

/* Assignee Chip Styles - Copied from WorkCreate */
.assignee-chip[b-akngusgfy4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(249, 250, 251, 0.95) 100%);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(33, 76, 166, 0.15);
    border-radius: 999px;
    padding: 0.65rem 0.85rem 0.65rem 0.75rem;
    min-width: 220px;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
    animation: scaleIn-b-akngusgfy4 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all 0.3s ease;
}

.assignee-chip:hover[b-akngusgfy4] {
    transform: translateY(-2px) scale(1.02);
    border-color: rgba(33, 76, 166, 0.4);
    box-shadow: 0 4px 16px rgba(33, 76, 166, 0.2);
}

@keyframes scaleIn-b-akngusgfy4 {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.assignee-chip-info[b-akngusgfy4] {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 5px;
    padding-left: 11px;
    flex: 1;
}

.assignee-chip-info i[b-akngusgfy4] {
    color: var(--acv-primary);
    font-size: 16px;
}

.selected-name[b-akngusgfy4] {
    margin: 0;
    font-weight: 600;
    color: var(--gray-800);
    font-size: 0.8125rem;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 6px;
}

.selected-name i[b-akngusgfy4] {
    color: var(--acv-primary);
    font-size: 16px;
}

.assignee-code[b-akngusgfy4] {
    margin: 0;
    color: var(--gray-500);
    font-size: 0.75rem;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.meta-item[b-akngusgfy4],
.meta-dept[b-akngusgfy4] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #6b7280;
    white-space: nowrap;
    margin-right: 12px;
}

.meta-item i[b-akngusgfy4],
.meta-dept i[b-akngusgfy4] {
    font-size: 0.75rem;
    color: var(--gray-500);
}
/* _content/ltia.portal.web/Components/Pages/Work/WorkEdit.razor.rz.scp.css */
/* CSS Variables - Đặt trực tiếp vào .task-page */
.task-page[b-20ul1ebvov] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-primary-light: #3b82f6;
    --acv-primary-dark: #1e3a8a;
    --acv-primary-lighter: #dbeafe;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --warning-main: #ffab00;
    --warning-dark: #f57c00;
    --warning-light: #ffb74d;
    --warning-lighter: #fff3e0;
    --error-main: #ff5630;
    --error-dark: #d32f2f;
    --error-light: #ff7043;
    --error-lighter: #ffebee;
    --success-main: #00c853;
    --success-dark: #00a152;
    --success-light: #4caf50;
    --success-lighter: #e8f5e8;
    --accent-warning: #f59e0b;
    --accent-success: #0ea5e9;
    
    padding: 1rem;
    background: linear-gradient(135deg, #e3f2fd 0%, #ffffff 100%);
    background-attachment: fixed;
    min-height: 100vh;
    animation: fadeIn-b-20ul1ebvov 0.5s ease-in-out;
}

@keyframes fadeIn-b-20ul1ebvov {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Card Header */
.task-page-card-header[b-20ul1ebvov] {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 1.5rem 2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15),
                0 2px 8px rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    animation: slideDown-b-20ul1ebvov 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all 0.3s ease;
}

.task-page-card-header:hover[b-20ul1ebvov] {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(31, 38, 135, 0.2),
                0 4px 12px rgba(0, 0, 0, 0.08);
}

@keyframes slideDown-b-20ul1ebvov {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.header-content[b-20ul1ebvov] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-icon[b-20ul1ebvov] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
    box-shadow: 0 8px 20px rgba(33, 76, 166, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    animation: pulse-b-20ul1ebvov 2s ease-in-out infinite;
    transition: all 0.3s ease;
}

.header-icon:hover[b-20ul1ebvov] {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 12px 28px rgba(33, 76, 166, 0.5);
}

@keyframes pulse-b-20ul1ebvov {
    0%, 100% {
        box-shadow: 0 8px 20px rgba(33, 76, 166, 0.4),
                    inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    50% {
        box-shadow: 0 8px 28px rgba(33, 76, 166, 0.6),
                    inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
}

.header-text[b-20ul1ebvov] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.header-eyebrow[b-20ul1ebvov] {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    color: var(--gray-500);
    margin: 0;
}

.header-title[b-20ul1ebvov] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 0.25rem 0;
}

.header-subtitle[b-20ul1ebvov] {
    font-size: 1rem;
    color: var(--gray-600);
    margin: 0;
}

.header-actions[b-20ul1ebvov] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.main-content-container[b-20ul1ebvov] {
    width: 100%;
    margin: 0 auto;
}

.form-column[b-20ul1ebvov] {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 2rem 2.5rem;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15),
                0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.18);
    animation: slideUp-b-20ul1ebvov 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.1s both;
    transition: all 0.3s ease;
}

.form-column:hover[b-20ul1ebvov] {
    box-shadow: 0 12px 40px rgba(31, 38, 135, 0.2),
                0 4px 12px rgba(0, 0, 0, 0.08);
}

@keyframes slideUp-b-20ul1ebvov {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.create-form[b-20ul1ebvov] {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Main Form Grid: 2 Columns Layout */
.main-form-grid[b-20ul1ebvov] {
    display: flex;
    grid-template-columns: 1.5fr 1fr; /* 60/40 split */
    gap: 1.25rem;
    margin-bottom: 1.25rem;
    align-items: start;
}

.form-column-left[b-20ul1ebvov],
.form-column-right[b-20ul1ebvov] {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex:1;
}

.form-column-left .form-section[b-20ul1ebvov] {
    margin-bottom: 1.25rem;
}

.form-column-left .form-section:last-child[b-20ul1ebvov] {
    margin-bottom: 0;
}

.form-column-right .form-section[b-20ul1ebvov] {
    margin-bottom: 1.25rem;
    background: linear-gradient(135deg, rgba(33, 76, 166, 0.03) 0%, rgba(30, 64, 175, 0.03) 100%);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    border: 1px solid rgba(33, 76, 166, 0.1);
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.05);
    transition: all 0.3s ease;
}

.form-column-right .form-section:hover[b-20ul1ebvov] {
    border-color: rgba(33, 76, 166, 0.2);
    box-shadow: 0 4px 16px rgba(33, 76, 166, 0.1);
    transform: translateY(-2px);
}

.form-column-right .form-section:last-child[b-20ul1ebvov] {
    margin-bottom: 0;
}

.form-column-right .form-group[b-20ul1ebvov] {
    margin-bottom: 1rem;
}

.form-column-right .form-group:last-child[b-20ul1ebvov] {
    margin-bottom: 0;
}

/* Ensure sections align properly */
.form-column-left .form-section[b-20ul1ebvov],
.form-column-right .form-section[b-20ul1ebvov] {
    display: flex;
    flex-direction: column;
    height: fit-content;
}


.form-alert[b-20ul1ebvov] {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: 16px;
    border: 2px solid rgba(209, 213, 219, 0.3);
    background: linear-gradient(135deg, rgba(249, 250, 251, 0.95) 0%, rgba(243, 244, 246, 0.95) 100%);
    backdrop-filter: blur(10px);
    color: var(--gray-700);
    align-items: center;
    margin-bottom: 1.25rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    animation: slideDown-b-20ul1ebvov 0.5s ease-out;
}

.form-alert.danger[b-20ul1ebvov] {
    border-color: rgba(254, 202, 202, 0.5);
    background: linear-gradient(135deg, rgba(254, 242, 242, 0.95) 0%, rgba(254, 226, 226, 0.95) 100%);
    color: #b91c1c;
    box-shadow: 0 4px 16px rgba(185, 28, 28, 0.1);
}

.form-alert i[b-20ul1ebvov] {
    font-size: 20px;
    animation: wiggle-b-20ul1ebvov 2s ease-in-out infinite;
}

/* Form Sections */
.form-section[b-20ul1ebvov] {
    margin-bottom: 1.25rem;
}

.form-section:last-of-type[b-20ul1ebvov] {
    margin-bottom: 0;
}


.section-title[b-20ul1ebvov] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 0.75rem 0;
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: fadeInLeft-b-20ul1ebvov 0.5s ease-out;
}

.section-title i[b-20ul1ebvov] {
    color: #214ca6;
    font-size: 18px;
    filter: drop-shadow(0 2px 4px rgba(33, 76, 166, 0.3));
    animation: bounceIn-b-20ul1ebvov 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes fadeInLeft-b-20ul1ebvov {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes bounceIn-b-20ul1ebvov {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.section-description[b-20ul1ebvov] {
    font-size: 0.875rem;
    color: var(--gray-600);
    margin: 0;
    line-height: 1.5;
}

.work-type-section[b-20ul1ebvov] {
    background: linear-gradient(135deg, rgba(33, 76, 166, 0.05) 0%, rgba(30, 64, 175, 0.05) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
    border: 2px solid rgba(33, 76, 166, 0.15);
    box-shadow: 0 4px 16px rgba(33, 76, 166, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
    animation: fadeInRight-b-20ul1ebvov 0.6s ease-out;
    transition: all 0.3s ease;
}

.work-type-section:hover[b-20ul1ebvov] {
    transform: translateX(4px);
    border-color: rgba(33, 76, 166, 0.3);
    box-shadow: 0 8px 24px rgba(33, 76, 166, 0.15);
}

@keyframes fadeInRight-b-20ul1ebvov {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.assignee-block[b-20ul1ebvov] {
    margin-top: 1.25rem;
    padding: 1.25rem 1.5rem;
    border: 2px dashed rgba(33, 76, 166, 0.3);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(249, 250, 251, 0.9) 100%);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 16px rgba(33, 76, 166, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
    animation: fadeIn-b-20ul1ebvov 0.6s ease-out 0.2s both;
    transition: all 0.3s ease;
}

.assignee-block:hover[b-20ul1ebvov] {
    border-color: rgba(33, 76, 166, 0.5);
    transform: scale(1.01);
    box-shadow: 0 8px 24px rgba(33, 76, 166, 0.12);
}

.assignee-block-header[b-20ul1ebvov] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.assignee-block-title[b-20ul1ebvov] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.assignee-block-title > i[b-20ul1ebvov] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 20px;
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    animation: pulse-b-20ul1ebvov 2s ease-in-out infinite;
    transition: all 0.3s ease;
}

.assignee-block:hover .assignee-block-title > i[b-20ul1ebvov] {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 6px 16px rgba(33, 76, 166, 0.4);
}

.assignee-title[b-20ul1ebvov] {
    margin: 0;
    color: var(--gray-800);
    font-size: 15px;
    font-weight: 700;
}

.assignee-subtitle[b-20ul1ebvov] {
    margin: 0;
    color: var(--gray-500);
    font-size: 0.813rem;
}

.assignee-chip-container[b-20ul1ebvov] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    width: 100%;
    overflow: hidden;
}

.assignee-chip[b-20ul1ebvov] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(249, 250, 251, 0.95) 100%);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(33, 76, 166, 0.15);
    border-radius: 999px;
    padding: 0.65rem 0.85rem 0.65rem 0.75rem;
    min-width: 220px;
    max-width: 400px;
    width: fit-content;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
    animation: scaleIn-b-20ul1ebvov 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all 0.3s ease;
    overflow: hidden;
}

.assignee-chip:hover[b-20ul1ebvov] {
    transform: translateY(-2px) scale(1.02);
    border-color: rgba(33, 76, 166, 0.4);
    box-shadow: 0 4px 16px rgba(33, 76, 166, 0.2);
}

@keyframes scaleIn-b-20ul1ebvov {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.assignee-chip-info[b-20ul1ebvov] {
    display: flex;
    align-items: stretch;
    padding-left: 11px;
    gap: 5px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    flex-direction: column;
}

.assignee-chip-info > div[b-20ul1ebvov] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    line-height: 1.5;
}
    .assignee-chip-info > div[b-20ul1ebvov] {
        display: flex;
        gap: 2px;
    }

.assignee-name[b-20ul1ebvov] {
    margin: 0;
    font-weight: 600;
}

.meta-dept[b-20ul1ebvov],
.meta-item[b-20ul1ebvov] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #6b7280;
    white-space: nowrap;
}
.meta-dept[b-20ul1ebvov],
.meta-item[b-20ul1ebvov] {
    margin-right: 12px;
}

/* Xử lý text overflow trong assignee-chip - hiển thị 1 hàng ngang */
.assignee-chip-info > div > .selected-name[b-20ul1ebvov] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
    display: inline;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    line-height: inherit;
}

.assignee-chip .meta-item[b-20ul1ebvov],
.assignee-chip .meta-dept[b-20ul1ebvov] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
/*    max-width: 150px;*/
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle;
}

.assignee-chip .meta-item i[b-20ul1ebvov],
.assignee-chip .meta-dept i[b-20ul1ebvov] {
    flex-shrink: 0;
}

.assignee-chip-info i[b-20ul1ebvov] {
    color: var(--acv-primary);
    font-size: 16px;
    flex-shrink: 0;
}

.assignee-name[b-20ul1ebvov] {
    margin: 0;
    font-weight: 600;
    color: var(--gray-800);
    font-size: 0.875rem;
    line-height: 1.4;
}

.assignee-code[b-20ul1ebvov] {
    margin: 0;
    color: var(--gray-500);
    font-size: 0.75rem;
    line-height: 1.3;
}

.assignee-chip-remove[b-20ul1ebvov] {
    border: none;
    background: transparent;
    color: var(--gray-400);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.assignee-chip-remove:hover:not(:disabled)[b-20ul1ebvov] {
    background: var(--error-lighter);
    color: var(--error-main);
}

.assignee-chip-remove:disabled[b-20ul1ebvov] {
    opacity: 0.5;
    cursor: not-allowed;
}

.assignee-add-chip[b-20ul1ebvov] {
    border: 2px dashed #214ca6;
    background: linear-gradient(135deg, rgba(33, 76, 166, 0.1) 0%, rgba(30, 64, 175, 0.1) 100%);
    backdrop-filter: blur(10px);
    color: #214ca6;
    border-radius: 999px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.15);
    animation: wiggle-b-20ul1ebvov 2s ease-in-out infinite;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.assignee-add-chip:hover:not(:disabled)[b-20ul1ebvov] {
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%);
    border-color: transparent;
    color: var(--acv-white);
    transform: scale(1.1) rotate(90deg);
    box-shadow: 0 4px 16px rgba(33, 76, 166, 0.4);
}

.assignee-add-chip:active:not(:disabled)[b-20ul1ebvov] {
    transform: scale(0.95) rotate(90deg);
}

.assignee-add-chip:disabled[b-20ul1ebvov] {
    opacity: 0.5;
    cursor: not-allowed;
    animation: none;
}


.selected-name[b-20ul1ebvov] {
    font-weight: 600;
    white-space: nowrap;
}

.assignee-code[b-20ul1ebvov] {
    display: flex;
    gap: 12px;
    margin: 0;
    font-size: 13px;
    color: #666;
}

.meta-dept[b-20ul1ebvov],
.meta-item[b-20ul1ebvov] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

@keyframes wiggle-b-20ul1ebvov {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-5deg);
    }
    75% {
        transform: rotate(5deg);
    }
}

.assignee-empty[b-20ul1ebvov] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    color: var(--gray-500);
    border-radius: 10px;
    border: 1px dashed var(--gray-300);
}

.assignee-empty i[b-20ul1ebvov] {
    font-size: 20px;
    color: var(--gray-400);
}

.assignee-empty p[b-20ul1ebvov] {
    margin: 0;
    font-weight: 600;
    color: var(--gray-600);
}

.assignee-empty small[b-20ul1ebvov] {
    display: block;
    color: var(--gray-500);
}

.assignee-error[b-20ul1ebvov] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    background: var(--error-lighter);
    border: 1px solid var(--error-light);
    color: var(--error-dark);
    font-size: 0.9rem;
}

.assignee-error i[b-20ul1ebvov] {
    color: var(--error-dark);
}


.form-grid[b-20ul1ebvov] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.875rem;
}

/* Form Styling */
.form-group[b-20ul1ebvov] {
    margin-bottom: 0;
}

.form-group.full-width[b-20ul1ebvov] {
    grid-column: 1 / -1;
    width: 100%;
}

.form-label[b-20ul1ebvov] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: 8px;
    font-size: 14px;
    animation: fadeInLeft-b-20ul1ebvov 0.4s ease-out;
    transition: all 0.3s ease;
}

.form-label:hover[b-20ul1ebvov] {
    color: #214ca6;
}

.form-label i[b-20ul1ebvov] {
    color: #214ca6;
    width: 18px;
    filter: drop-shadow(0 2px 4px rgba(33, 76, 166, 0.2));
    transition: all 0.3s ease;
}

.form-label:hover i[b-20ul1ebvov] {
    transform: scale(1.2) rotate(10deg);
}

.required[b-20ul1ebvov] {
    color: var(--error-main);
}

.field-helper[b-20ul1ebvov] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 0.813rem;
    color: var(--gray-500);
    line-height: 1.4;
}

.field-helper i[b-20ul1ebvov] {
    color: var(--acv-primary);
    font-size: 0.75rem;
}

/* Form Input */
.form-input[b-20ul1ebvov] {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid rgba(209, 213, 219, 0.5);
    border-radius: 12px;
    font-size: 14px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    box-sizing: border-box;
    font-family: inherit;
}

/* Input datetime-local chiếm full width */
input[type="datetime-local"].form-input[b-20ul1ebvov] {
    width: 100%;
    min-width: 100%;
}

/* Đảm bảo form-group trong form-grid cho input datetime-local chiếm full width */
.form-grid .form-group:has(input[type="datetime-local"])[b-20ul1ebvov] {
    grid-column: 1 / -1;
    width: 100%;
}

/* Hoặc nếu không support :has, dùng cách khác */
.form-grid > .form-group:only-child[b-20ul1ebvov] {
    grid-column: 1 / -1;
    width: 100%;
    resize: vertical;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.form-input:hover[b-20ul1ebvov] {
    border-color: rgba(33, 76, 166, 0.3);
    background: rgba(255, 255, 255, 1);
}

.form-input:focus[b-20ul1ebvov] {
    outline: none;
    border-color: #214ca6;
    border-width: 2px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 0 0 4px rgba(33, 76, 166, 0.1),
                0 4px 12px rgba(33, 76, 166, 0.15);
    transform: translateY(-1px);
}

.form-input:disabled[b-20ul1ebvov] {
    background: var(--gray-100);
    color: var(--gray-500);
    cursor: not-allowed;
    opacity: 0.7;
}

.form-input[b-20ul1ebvov]::placeholder {
    color: var(--gray-400);
    transition: all 0.3s ease;
}

.form-input:focus[b-20ul1ebvov]::placeholder {
    color: var(--gray-500);
    transform: translateX(4px);
}

textarea.form-input[b-20ul1ebvov] {
    min-height: 80px;
    max-height: 200px;
    line-height: 1.5;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Custom scrollbar cho textarea.form-input */
textarea.form-input[b-20ul1ebvov]::-webkit-scrollbar {
    width: 6px;
}

textarea.form-input[b-20ul1ebvov]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

textarea.form-input[b-20ul1ebvov]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

textarea.form-input[b-20ul1ebvov]::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.inline-warning[b-20ul1ebvov] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.25rem;
    font-size: 0.85rem;
    color: #b45309;
}

.status-pill[b-20ul1ebvov] {
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
}

.pill-success[b-20ul1ebvov] {
    background: rgba(14, 165, 233, 0.15);
    color: var(--accent-success);
}

.pill-warning[b-20ul1ebvov] {
    background: rgba(245, 158, 11, 0.15);
    color: var(--accent-warning);
}

.assign-section[b-20ul1ebvov] {
    margin-top: 0;
    margin-bottom: 1.25rem;
}

/* Assign Container - 2 Column Layout */
.assign-container[b-20ul1ebvov] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-top: 0.75rem;
}

/* Left Column: Search & Results */
.assign-search-column[b-20ul1ebvov] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    min-height: 0;
}

.input-stack[b-20ul1ebvov] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.input-with-icon[b-20ul1ebvov] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.input-icon[b-20ul1ebvov] {
    position: absolute;
    left: 14px;
    color: var(--gray-400);
    font-size: 14px;
    pointer-events: none;
    z-index: 1;
}

.search-input[b-20ul1ebvov] {
    padding-left: 40px !important;
}

.btn-icon[b-20ul1ebvov] {
    border: none;
    background: var(--gray-100);
    color: var(--gray-600);
    border-radius: 8px;
    padding: 10px 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 44px;
}

.btn-icon:hover:not(:disabled)[b-20ul1ebvov] {
    background: var(--gray-200);
    color: var(--acv-primary);
    transform: rotate(90deg);
}

.btn-icon:disabled[b-20ul1ebvov] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.section-helper[b-20ul1ebvov] {
    font-size: 0.85rem;
    color: var(--gray-500);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.section-helper i[b-20ul1ebvov] {
    font-size: 0.8rem;
}

/* Result Panel */
.result-panel[b-20ul1ebvov] {
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    background: var(--acv-white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.panel-header[b-20ul1ebvov] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--gray-200);
    background: var(--gray-50);
}

.panel-header-content[b-20ul1ebvov] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--gray-700);
    font-size: 14px;
}

.panel-header-content i[b-20ul1ebvov] {
    color: var(--acv-primary);
    font-size: 13px;
}

.pill[b-20ul1ebvov] {
    background: var(--acv-primary);
    color: var(--acv-white);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 24px;
    text-align: center;
}

.result-list[b-20ul1ebvov] {
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
}

.result-list[b-20ul1ebvov]::-webkit-scrollbar {
    width: 6px;
}

.result-list[b-20ul1ebvov]::-webkit-scrollbar-track {
    background: var(--gray-50);
}

.result-list[b-20ul1ebvov]::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 3px;
}

.result-list[b-20ul1ebvov]::-webkit-scrollbar-thumb:hover {
    background: var(--gray-400);
}

.result-item[b-20ul1ebvov] {
    width: 100%;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--gray-100);
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.result-item:last-child[b-20ul1ebvov] {
    border-bottom: none;
}

.result-item:hover:not(.muted):not(:disabled)[b-20ul1ebvov] {
    background: var(--gray-50);
    transform: translateX(2px);
}

.result-item:active:not(.muted):not(:disabled)[b-20ul1ebvov] {
    background: var(--acv-primary-lighter);
}

.result-item:disabled[b-20ul1ebvov] {
    opacity: 0.6;
    cursor: not-allowed;
}

.result-item.muted[b-20ul1ebvov] {
    cursor: default;
    color: var(--gray-500);
}

.result-avatar[b-20ul1ebvov] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-800) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 16px;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(33, 76, 166, 0.2);
}

.result-content[b-20ul1ebvov] {
    flex: 1;
    min-width: 0;
}

.result-title[b-20ul1ebvov] {
    margin: 0;
    font-weight: 600;
    color: var(--gray-800);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.result-meta[b-20ul1ebvov] {
    margin:0;
    font-size: 0.8rem;
    color: var(--gray-500);
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.meta-item[b-20ul1ebvov] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.meta-item i[b-20ul1ebvov] {
    font-size: 0.75rem;
}

.badge[b-20ul1ebvov] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
    border: 1px solid transparent;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge.subtle[b-20ul1ebvov] {
    background: var(--gray-100);
    border-color: var(--gray-200);
    color: var(--gray-600);
}

.badge i[b-20ul1ebvov] {
    font-size: 0.7rem;
}

.result-action[b-20ul1ebvov] {
    color: var(--acv-primary);
    font-size: 18px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.result-item:hover:not(.muted):not(:disabled) .result-action[b-20ul1ebvov] {
    transform: scale(1.2);
    color: var(--acv-primary-800);
}

/* Right Column: Selected Participants */
.assign-selected-column[b-20ul1ebvov] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    background: var(--gray-50);
    border-radius: 10px;
    padding: 0.875rem 1rem;
    border: 1px solid var(--gray-200);
}

.selected-header[b-20ul1ebvov] {
    padding-bottom: 0.75rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.selected-header-content[b-20ul1ebvov] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.selected-header-content > i[b-20ul1ebvov] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-800) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 16px;
    flex-shrink: 0;
}

.selected-title[b-20ul1ebvov] {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--gray-800);
}

.selected-subtitle[b-20ul1ebvov] {
    margin: 2px 0 0;
    font-size: 0.85rem;
    color: var(--gray-500);
}

.selected-list[b-20ul1ebvov] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
}

.selected-list[b-20ul1ebvov]::-webkit-scrollbar {
    width: 6px;
}

.selected-list[b-20ul1ebvov]::-webkit-scrollbar-track {
    background: transparent;
}

.selected-list[b-20ul1ebvov]::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 3px;
}

.selected-list[b-20ul1ebvov]::-webkit-scrollbar-thumb:hover {
    background: var(--gray-400);
}

.selected-empty[b-20ul1ebvov] {
    text-align: center;
    padding: 40px 20px;
    color: var(--gray-500);
}

.empty-icon[b-20ul1ebvov] {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
    font-size: 28px;
}

.empty-title[b-20ul1ebvov] {
    margin: 0 0 8px;
    font-weight: 600;
    color: var(--gray-600);
    font-size: 14px;
}

.empty-description[b-20ul1ebvov] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--gray-500);
    line-height: 1.5;
}

.selected-item[b-20ul1ebvov] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(249, 250, 251, 0.95) 100%);
    backdrop-filter: blur(10px);
    border-radius: 14px;
    border: 2px solid rgba(33, 76, 166, 0.15);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: relative;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.1);
}

.selected-item:hover[b-20ul1ebvov] {
    box-shadow: 0 6px 20px rgba(33, 76, 166, 0.25);
    transform: translateY(-3px) scale(1.02);
    border-color: rgba(33, 76, 166, 0.4);
}

.selected-item:hover .selected-avatar[b-20ul1ebvov] {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 6px 16px rgba(33, 76, 166, 0.4);
}

.selected-avatar[b-20ul1ebvov] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-800) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 16px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.selected-content[b-20ul1ebvov] {
    flex: 1;
    min-width: 0;
}

.selected-name[b-20ul1ebvov] {
    margin: 0;
    font-weight: 600;
    color: var(--gray-800);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.selected-meta[b-20ul1ebvov] {
    margin: 4px 0 0;
    font-size: 0.8rem;
    color: var(--gray-500);
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.meta-code[b-20ul1ebvov],
.meta-dept[b-20ul1ebvov] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.meta-code i[b-20ul1ebvov],
.meta-dept i[b-20ul1ebvov] {
    font-size: 0.75rem;
}

.selected-remove[b-20ul1ebvov] {
    border: none;
    background: transparent;
    color: var(--gray-400);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
}

.selected-remove:hover:not(:disabled)[b-20ul1ebvov] {
    background: var(--error-lighter);
    color: var(--error-main);
    transform: scale(1.1);
}

.selected-remove:disabled[b-20ul1ebvov] {
    opacity: 0.5;
    cursor: not-allowed;
}

.assign-error[b-20ul1ebvov] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--error-lighter);
    border: 1px solid var(--error-light);
    border-radius: 8px;
    color: var(--error-dark);
    font-size: 0.9rem;
    margin-top: 16px;
}

.assign-error i[b-20ul1ebvov] {
    font-size: 16px;
    flex-shrink: 0;
}

.assignee-modal-overlay[b-20ul1ebvov] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1100;
    padding: 1rem;
}

.assignee-modal[b-20ul1ebvov] {
    background: var(--acv-white);
    border-radius: 14px;
    max-width: 1100px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
}

.assignee-modal-header[b-20ul1ebvov] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
}

.assignee-modal-header h3[b-20ul1ebvov] {
    margin: 0;
    font-size: 1.15rem;
    color: var(--gray-800);
}

.assignee-modal-header p[b-20ul1ebvov] {
    margin: 0.2rem 0 0;
    color: var(--gray-500);
    font-size: 0.9rem;
}

.modal-close-btn[b-20ul1ebvov] {
    border: none;
    background: var(--gray-100);
    color: var(--gray-600);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-close-btn:hover[b-20ul1ebvov] {
    background: var(--gray-200);
    color: var(--gray-900);
}

.assignee-modal-body[b-20ul1ebvov] {
    padding: 1rem 1.5rem 0;
    overflow-y: auto;
    flex: 1;
}

.assignee-modal-footer[b-20ul1ebvov] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem 1.25rem;
    border-top: 1px solid var(--gray-200);
    background: var(--acv-white);
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .assign-container[b-20ul1ebvov] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .assign-selected-column[b-20ul1ebvov] {
        order: -1;
    }
}

@media (max-width: 768px) {
    .assign-section[b-20ul1ebvov] {
        padding: 16px;
    }

    .result-list[b-20ul1ebvov] {
        max-height: 300px;
    }

    .selected-list[b-20ul1ebvov] {
        max-height: 300px;
    }

    .assignee-block[b-20ul1ebvov] {
        padding: 0.75rem;
    }

    .assignee-chip[b-20ul1ebvov] {
        min-width: 180px;
    }

    .assignee-modal[b-20ul1ebvov] {
        max-height: 95vh;
    }

    .assignee-modal-body[b-20ul1ebvov] {
        padding: 1rem;
    }
}

/* Form Actions */
.form-actions[b-20ul1ebvov] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 2px solid rgba(33, 76, 166, 0.1);
    position: sticky;
    bottom: 0;
    background: var(--acv-white);
    z-index: 10;
    padding-bottom: 0.75rem;
    position: relative;
}

.form-actions[b-20ul1ebvov]::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, var(--acv-primary) 0%, transparent 100%);
}

.add-menu-wrapper[b-20ul1ebvov] {
    position: relative;
    display: inline-flex;
}

.add-menu-trigger[b-20ul1ebvov] {
    min-width: 140px;
    justify-content: space-between;
}

.add-menu-caret[b-20ul1ebvov] {
    font-size: 0.75rem;
}

.add-menu-dropdown[b-20ul1ebvov] {
    position: absolute;
    right: 0;
    top: calc(100% + 0.35rem);
    min-width: 220px;
    background: var(--acv-white);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    box-shadow: 0 18px 30px rgba(15, 23, 42, 0.25);
    padding: 0.35rem;
    z-index: 50;
}

.add-menu-item[b-20ul1ebvov] {
    width: 100%;
    border: none;
    background: transparent;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.92rem;
    color: var(--gray-700);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.add-menu-item i[b-20ul1ebvov] {
    color: var(--gray-500);
}

.add-menu-item:hover[b-20ul1ebvov] {
    background: var(--gray-50);
    color: var(--acv-primary);
}

.add-menu-item:hover i[b-20ul1ebvov] {
    color: var(--acv-primary);
}

.related-task-card[b-20ul1ebvov] {
    margin-top: 0.75rem;
    border: 1px solid var(--gray-200);
    border-radius: 18px;
    background: var(--gray-50);
    padding: 1rem 1.25rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.related-card-header[b-20ul1ebvov] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.related-card-title[b-20ul1ebvov] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--gray-800);
}

.related-card-title i[b-20ul1ebvov] {
    color: var(--acv-primary);
}

.related-card-remove[b-20ul1ebvov] {
    border: none;
    background: transparent;
    color: var(--gray-400);
    font-size: 0.95rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

.related-card-remove:hover[b-20ul1ebvov] {
    color: var(--error-main);
}

.related-card-body h4[b-20ul1ebvov] {
    margin: 0.75rem 0 0.35rem;
    font-size: 1rem;
    color: var(--gray-900);
}

.related-card-description[b-20ul1ebvov] {
    margin: 0 0 0.5rem;
    color: var(--gray-600);
    font-size: 0.9rem;
}

.related-card-meta[b-20ul1ebvov] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.88rem;
    color: var(--gray-600);
    margin-bottom: 0.25rem;
}

.related-card-meta strong[b-20ul1ebvov] {
    color: var(--gray-800);
    margin-right: 0.3rem;
}

.btn-primary[b-20ul1ebvov], .btn-secondary[b-20ul1ebvov] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    border: 2px solid;
    text-decoration: none;
    min-width: 130px;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.btn-primary[b-20ul1ebvov]::before,
.btn-secondary[b-20ul1ebvov]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-primary:hover:not(:disabled)[b-20ul1ebvov]::before,
.btn-secondary:hover:not(:disabled)[b-20ul1ebvov]::before {
    width: 300px;
    height: 300px;
}

.btn-primary[b-20ul1ebvov] {
    background: linear-gradient(135deg, #214ca6 0%, #1e40af 100%);
    color: var(--acv-white);
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(33, 76, 166, 0.4);
}

.btn-primary:hover:not(:disabled)[b-20ul1ebvov] {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 24px rgba(33, 76, 166, 0.5);
}

.btn-primary:active:not(:disabled)[b-20ul1ebvov] {
    transform: translateY(-1px) scale(0.98);
}

.btn-primary:disabled[b-20ul1ebvov] {
    background: var(--gray-400);
    border-color: var(--gray-400);
    cursor: not-allowed;
    transform: none;
    opacity: 0.6;
    box-shadow: none;
}

.btn-secondary[b-20ul1ebvov] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    color: var(--gray-800);
    border-color: rgba(209, 213, 219, 0.5);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.btn-secondary:hover:not(:disabled)[b-20ul1ebvov] {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(33, 76, 166, 0.3);
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    color: #214ca6;
}

.btn-secondary:active:not(:disabled)[b-20ul1ebvov] {
    transform: translateY(-1px) scale(0.98);
}

.btn-secondary:disabled[b-20ul1ebvov] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-primary i[b-20ul1ebvov],
.btn-secondary i[b-20ul1ebvov] {
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}

.btn-primary:hover:not(:disabled) i[b-20ul1ebvov],
.btn-secondary:hover:not(:disabled) i[b-20ul1ebvov] {
    transform: scale(1.2);
}

.btn-primary span[b-20ul1ebvov],
.btn-secondary span[b-20ul1ebvov] {
    position: relative;
    z-index: 1;
}


@media (max-width: 1024px) {
    .main-form-grid[b-20ul1ebvov] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

@media (max-width: 768px) {
    .add-menu-wrapper[b-20ul1ebvov],
    .add-menu-trigger[b-20ul1ebvov] {
        width: 100%;
    }

    .add-menu-dropdown[b-20ul1ebvov] {
        width: 100%;
        left: 0;
        right: 0;
    }

    .task-page[b-20ul1ebvov] {
        padding: 0.75rem;
    }

    .task-page-card-header[b-20ul1ebvov] {
        padding: 0.875rem 1rem;
        margin-bottom: 0.875rem;
    }

    .form-column[b-20ul1ebvov] {
        padding: 1rem;
    }

    .main-form-grid[b-20ul1ebvov] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .form-grid[b-20ul1ebvov] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .form-group.full-width[b-20ul1ebvov] {
        grid-column: 1;
    }

    .form-section[b-20ul1ebvov] {
        margin-bottom: 1rem;
    }

    .section-header[b-20ul1ebvov] {
        margin-bottom: 0.625rem;
    }

    .form-actions[b-20ul1ebvov] {
        flex-direction: column;
        margin-top: 1rem;
        padding-top: 0.875rem;
    }

    .btn-primary[b-20ul1ebvov],
    .btn-secondary[b-20ul1ebvov] {
        width: 100%;
        justify-content: center;
    }
    
    .work-type-section[b-20ul1ebvov] {
        padding: 0.875rem 1rem;
        margin-bottom: 1rem;
    }

    .assign-section[b-20ul1ebvov] {
        padding: 0.875rem 1rem;
    }
}

/* Edit-only sidebar summary + info cards */
.profile-column[b-20ul1ebvov] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.summary-card[b-20ul1ebvov],
.rules-card[b-20ul1ebvov] {
    background: var(--acv-white);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    height: fit-content;
    position: sticky;
    top: 1.5rem;
}

.summary-header h3[b-20ul1ebvov] {
    margin: 0.5rem 0 0;
    color: var(--gray-800);
}

.summary-list[b-20ul1ebvov] {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.summary-list li[b-20ul1ebvov] {
    display: flex;
    justify-content: space-between;
    font-size: 0.95rem;
    color: var(--gray-600);
}

.summary-list strong[b-20ul1ebvov] {
    color: var(--gray-800);
}

.rules-header[b-20ul1ebvov] {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.rules-header i[b-20ul1ebvov] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(245, 158, 11, 0.15);
    color: var(--accent-warning);
    display: flex;
    align-items: center;
    justify-content: center;
}

.rules-card ul[b-20ul1ebvov] {
    margin: 1rem 0 0;
    padding-left: 1.1rem;
    color: var(--gray-600);
    line-height: 1.5;
}

.rules-card li[b-20ul1ebvov] {
    margin-bottom: 0.35rem;
}

.loading-content[b-20ul1ebvov] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: var(--gray-600);
}

.loading-spinner[b-20ul1ebvov] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--gray-200);
    border-top: 3px solid var(--acv-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}

.error-content[b-20ul1ebvov] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

.error-icon[b-20ul1ebvov] {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.error-content h3[b-20ul1ebvov] {
    margin: 0 0 0.5rem 0;
    color: var(--error-main);
    font-size: 1.25rem;
}

.error-content p[b-20ul1ebvov] {
    margin: 0 0 1.5rem 0;
    color: var(--gray-600);
}

@media (max-width: 1024px) {
    .profile-column[b-20ul1ebvov] {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .summary-card[b-20ul1ebvov],
    .rules-card[b-20ul1ebvov] {
        flex: 1;
    }
}

@media (max-width: 768px) {
    .summary-card[b-20ul1ebvov],
    .rules-card[b-20ul1ebvov] {
        min-width: 100%;
        padding: 16px;
    }
}

.progress-tab-container[b-20ul1ebvov] {
    padding: 1.5rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 12px;
    min-height: 500px;
}

.progress-content[b-20ul1ebvov] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Progress Form Section */
.progress-form-section[b-20ul1ebvov] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
}

.progress-form-section .section-header[b-20ul1ebvov] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e9ecef;
}

.progress-form-section .section-title[b-20ul1ebvov] {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.progress-form-section .section-title i[b-20ul1ebvov] {
    color: #28a745;
    font-size: 1.125rem;
}

.progress-form-card[b-20ul1ebvov] {
/*    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);*/
    border-radius: 8px;
/*    padding: 1.5rem;
    border: 1px solid #e9ecef;*/
}

.progress-form-card .form-group[b-20ul1ebvov] {
    margin-bottom: 1.5rem;
}

.progress-form-card .form-label[b-20ul1ebvov] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.75rem;
    font-size: 0.9375rem;
}

.progress-form-card .form-label i[b-20ul1ebvov] {
    color: #6c757d;
    font-size: 0.875rem;
}

.progress-form-card .required[b-20ul1ebvov] {
    color: #dc3545;
    margin-left: 0.25rem;
}

/* Progress Percentage Input */
.progress-percentage-input[b-20ul1ebvov] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.progress-slider[b-20ul1ebvov] {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(to right, #e9ecef 0%, #28a745 100%);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.progress-slider[b-20ul1ebvov]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(40, 167, 69, 0.4);
    transition: all 0.2s ease;
}

.progress-slider[b-20ul1ebvov]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.6);
}

.progress-slider[b-20ul1ebvov]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(40, 167, 69, 0.4);
    transition: all 0.2s ease;
}

.progress-slider[b-20ul1ebvov]::-moz-range-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.6);
}

.progress-percentage-display[b-20ul1ebvov] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.75rem;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

.percentage-value[b-20ul1ebvov] {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Textarea */
.progress-form-card .form-textarea[b-20ul1ebvov] {
    width: 100%;
    padding: 0.875rem;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-family: inherit;
    resize: vertical;
    transition: all 0.2s ease;
    background: white;
}

.progress-form-card .form-textarea:focus[b-20ul1ebvov] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.progress-form-card .form-hint[b-20ul1ebvov] {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

.char-count[b-20ul1ebvov] {
    font-size: 0.8125rem;
    color: #6c757d;
}

/* Nút Thêm file trong báo cáo tiến độ */
.progress-form-card .btn-outline-primary[b-20ul1ebvov] {
    background: linear-gradient(135deg, rgba(33, 76, 166, 0.05) 0%, rgba(30, 64, 175, 0.08) 100%);
    border: 2px solid var(--acv-primary);
    color: var(--acv-primary);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.progress-form-card .btn-outline-primary:hover:not(:disabled)[b-20ul1ebvov] {
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-light) 100%);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3), 0 2px 6px rgba(0, 0, 0, 0.15);
    border-color: var(--acv-primary);
}

.progress-form-card .btn-outline-primary:active:not(:disabled)[b-20ul1ebvov] {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(33, 76, 166, 0.25);
}

.progress-form-card .btn-outline-primary:focus[b-20ul1ebvov] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.2), 0 2px 8px rgba(33, 76, 166, 0.15);
}

.progress-form-card .btn-outline-primary:disabled[b-20ul1ebvov] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Form Actions */
.progress-form-card .form-actions[b-20ul1ebvov] {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e9ecef;
}

.progress-form-card .btn[b-20ul1ebvov] {
    flex: 1;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.progress-form-card .btn-primary[b-20ul1ebvov] {
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-light) 100%);
    color: white;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(33, 76, 166, 0.3);
}

.progress-form-card .btn-primary span[b-20ul1ebvov] {
    font-weight: 600;
}

.progress-form-card .btn-primary:hover:not(:disabled)[b-20ul1ebvov] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.4);
}

.progress-form-card .btn-primary:disabled[b-20ul1ebvov] {
    opacity: 0.6;
    cursor: not-allowed;
}

.progress-form-card .btn-secondary[b-20ul1ebvov] {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(108, 117, 125, 0.3);
}

.progress-form-card .btn-secondary:hover:not(:disabled)[b-20ul1ebvov] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
}

/* Progress History Section */
.progress-history-section[b-20ul1ebvov] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
    border-radius: 16px;
    padding: 1.75rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
    border: 1.5px solid rgba(33, 76, 166, 0.1);
    transition: all 0.3s ease;
}

.progress-history-section:hover[b-20ul1ebvov] {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.06);
    border-color: rgba(33, 76, 166, 0.15);
}

.progress-history-section .section-header[b-20ul1ebvov] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 2px solid rgba(33, 76, 166, 0.1);
    position: relative;
}

.progress-history-section .section-header[b-20ul1ebvov]::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #214CA6 0%, #1E40AF 100%);
    border-radius: 2px;
}

.progress-history-section .section-title[b-20ul1ebvov] {
    font-size: 0.875rem; /* 14px */
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    letter-spacing: -0.02em;
}

.progress-history-section .section-title i[b-20ul1ebvov] {
    color: #214CA6;
    font-size: 0.875rem; /* 14px */
    background: linear-gradient(135deg, rgba(33, 76, 166, 0.1) 0%, rgba(30, 64, 175, 0.1) 100%);
    padding: 0.5rem;
    border-radius: 10px;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-badge[b-20ul1ebvov] {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
    color: white;
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(23, 162, 184, 0.3);
}

/* Progress Reports List */
.progress-reports-list[b-20ul1ebvov] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.5rem;
}

/* Custom scrollbar cho progress reports list */
.progress-reports-list[b-20ul1ebvov]::-webkit-scrollbar {
    width: 6px;
}

.progress-reports-list[b-20ul1ebvov]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.progress-reports-list[b-20ul1ebvov]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

.progress-reports-list[b-20ul1ebvov]::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.progress-report-item[b-20ul1ebvov] {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 0.875rem;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    font-size: 0.875rem;
}

.progress-report-item:hover[b-20ul1ebvov] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: var(--acv-primary);
}

.report-header[b-20ul1ebvov] {
    margin-bottom: 0.75rem;
}

.report-meta[b-20ul1ebvov] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.report-percentage[b-20ul1ebvov] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(40, 167, 69, 0.3);
}

.report-percentage i[b-20ul1ebvov] {
    color: white;
    font-size: 0.875rem;
}

.percentage-badge[b-20ul1ebvov] {
    color: white;
    font-weight: 700;
    font-size: 0.9375rem;
}

.report-info[b-20ul1ebvov] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.813rem;
    color: #6c757d;
}

.report-date[b-20ul1ebvov],
.report-author[b-20ul1ebvov] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.report-date i[b-20ul1ebvov],
.report-author i[b-20ul1ebvov] {
    font-size: 0.75rem;
    color: #adb5bd;
}

.report-content[b-20ul1ebvov] {
    padding: 0.625rem;
    background: white;
    border-radius: 6px;
    border-left: 3px solid #214ca6;
}

.report-content p[b-20ul1ebvov] {
    margin: 0;
    color: #495057;
    line-height: 1.5;
    font-size: 0.813rem;
}

/* Report Files Styles */
.report-files[b-20ul1ebvov] {
    margin-top: 0.75rem;
    font-size: 0.813rem;
}

.report-files-label[b-20ul1ebvov] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.813rem;
    color: #495057;
}

.report-files-label i[b-20ul1ebvov] {
    font-size: 0.75rem;
    color: #6c757d;
}

.report-files-list[b-20ul1ebvov] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.report-file-item[b-20ul1ebvov] {
    font-size: 0.813rem;
    padding: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

.report-file-item .file-info[b-20ul1ebvov] {
    font-size: 0.813rem;
}

.report-file-item .file-name[b-20ul1ebvov] {
    font-size: 0.813rem;
    font-weight: 500;
    color: #495057;
}

.report-file-item .file-size[b-20ul1ebvov] {
    font-size: 0.75rem;
    color: #6c757d;
}

.report-file-item .btn[b-20ul1ebvov] {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

.report-file-item .btn i[b-20ul1ebvov] {
    font-size: 0.75rem;
}

.empty-state[b-20ul1ebvov] {
    text-align: center;
    padding: 3rem 1.5rem;
    color: #6c757d;
}

.empty-icon[b-20ul1ebvov] {
    font-size: 4rem;
    color: #adb5bd;
    margin-bottom: 1rem;
}

.empty-state h3[b-20ul1ebvov] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.5rem;
}

.empty-state p[b-20ul1ebvov] {
    font-size: 0.9375rem;
    color: #6c757d;
}

/* Progress Reports List - Match WorkDetail style */
.progress-reports-list[b-20ul1ebvov] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.5rem;
}

.progress-report-item[b-20ul1ebvov] {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 0.875rem;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    font-size: 0.875rem;
}

.progress-report-item:hover[b-20ul1ebvov] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: var(--acv-primary);
}

.report-header[b-20ul1ebvov] {
    margin-bottom: 0.75rem;
}

.report-meta[b-20ul1ebvov] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.report-info[b-20ul1ebvov] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.875rem;
    color: #6c757d;
}

.report-date[b-20ul1ebvov],
.report-author[b-20ul1ebvov] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.report-date i[b-20ul1ebvov],
.report-author i[b-20ul1ebvov] {
    font-size: 0.75rem;
    color: #adb5bd;
}

.report-content[b-20ul1ebvov] {
    padding: 0.75rem;
    background: white;
    border-radius: 6px;
    border-left: 3px solid #214ca6;
}

.report-content p[b-20ul1ebvov] {
    margin: 0;
    color: #495057;
    line-height: 1.6;
    font-size: 0.9375rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
}

/* Responsive */
@media (max-width: 768px) {
    .progress-tab-container[b-20ul1ebvov] {
        padding: 1rem;
    }

    .progress-content[b-20ul1ebvov] {
        gap: 1.5rem;
    }

    .progress-form-section[b-20ul1ebvov],
    .progress-history-section[b-20ul1ebvov] {
        padding: 1rem;
    }

    .report-meta[b-20ul1ebvov] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .progress-form-card .form-actions[b-20ul1ebvov] {
        flex-direction: column;
    }

    .progress-form-card .btn[b-20ul1ebvov] {
        width: 100%;
    }
}
.section-header[b-20ul1ebvov] {
    margin-bottom: 1rem;
}
/* --- CSS cho trạng thái Disabled Progress Section --- */

/* Đặt relative để overlay có thể căn theo div này */
.progress-form-section[b-20ul1ebvov] {
    position: relative;
    transition: all 0.3s ease;
}

    /* Khi bị disabled: Làm mờ và chặn click vào nội dung bên trong */
    .progress-form-section.disabled-section .progress-form-card[b-20ul1ebvov],
    .progress-form-section.disabled-section .section-header[b-20ul1ebvov] {
        opacity: 0.5;
        filter: grayscale(0.8); /* Làm xám màu */
        pointer-events: none; /* Chặn click xuyên qua */
        user-select: none; /* Không cho bôi đen text */
    }

/* Lớp phủ tàng hình nằm đè lên trên */
.disabled-overlay[b-20ul1ebvov] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    cursor: not-allowed; /* Hiện icon cấm khi rê chuột vào */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Tooltip thông báo */
.disabled-tooltip[b-20ul1ebvov] {
    background: rgba(31, 41, 55, 0.95); /* Màu tối đậm */
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    /* Ẩn mặc định */
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    pointer-events: none; /* Để hover chuột không bị chập chờn */
}

    .disabled-tooltip i[b-20ul1ebvov] {
        color: var(--warning-main); /* Icon màu vàng */
    }

/* Khi hover vào vùng overlay thì hiện tooltip */
.disabled-overlay:hover .disabled-tooltip[b-20ul1ebvov] {
    opacity: 1;
    transform: translateY(0);
}
/* _content/ltia.portal.web/Components/Shared/ChangePasswordContent.razor.rz.scp.css */
/* Change Password Page */
.change-password-page[b-iz3mp96glq] {
    --acv-primary: #214ca6;
    --acv-primary-700: #1e40af;
    --acv-primary-800: #1e3a8a;
    --acv-white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --success: #10b981;
    --success-light: #d1fae5;
    --error: #ef4444;
    --error-light: #fee2e2;

    min-height: 100vh;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 1;
    background-color: #f3f4f6;
}

/* Card Header Section */
.card-header-section[b-iz3mp96glq] {
    background: var(--acv-white);
    border-radius: 12px;
    padding: 2rem 2.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--gray-200);
}

.card-header-content[b-iz3mp96glq] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.card-header-icon[b-iz3mp96glq] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--acv-primary) 0%, var(--acv-primary-700) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acv-white);
    font-size: 1.5rem;
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.25);
}

.card-header-text h1[b-iz3mp96glq] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 0.25rem 0;
    line-height: 1.3;
}

.card-header-text p[b-iz3mp96glq] {
    font-size: 1rem;
    color: var(--gray-600);
    margin: 0;
    line-height: 1.5;
}

/* Form Container */
.form-container[b-iz3mp96glq] {
    max-width: 700px;
    margin: 0 auto;
}

.form-card[b-iz3mp96glq] {
    background: var(--acv-white);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--gray-200);
    overflow: hidden;
}

.form-header[b-iz3mp96glq] {
    padding: 2rem 2.5rem;
    border-bottom: 2px solid var(--gray-100);
    background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
}

.form-title-section[b-iz3mp96glq] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-title[b-iz3mp96glq] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.form-title i[b-iz3mp96glq] {
    color: var(--acv-primary);
    font-size: 1.25rem;
}

.form-subtitle[b-iz3mp96glq] {
    font-size: 0.9375rem;
    color: var(--gray-600);
    margin-left: 2rem;
}

.form-body[b-iz3mp96glq] {
    padding: 2.5rem;
}

/* Error Alert */
.error-alert[b-iz3mp96glq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--error-light);
    border: 1px solid var(--error);
    border-radius: 8px;
    margin-bottom: 2rem;
    animation: slideDown-b-iz3mp96glq 0.3s ease;
}

.error-alert-content[b-iz3mp96glq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--error);
    font-size: 0.9375rem;
    font-weight: 500;
    flex: 1;
}

.error-alert-content i[b-iz3mp96glq] {
    font-size: 1.125rem;
}

.error-alert-close[b-iz3mp96glq] {
    background: none;
    border: none;
    color: var(--error);
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
    font-size: 1rem;
}

.error-alert-close:hover[b-iz3mp96glq] {
    opacity: 0.7;
}

@keyframes slideDown-b-iz3mp96glq {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Form Groups */
.form-group[b-iz3mp96glq] {
    margin-bottom: 2rem;
}

.form-label[b-iz3mp96glq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.625rem;
}

.form-label i[b-iz3mp96glq] {
    color: var(--acv-primary);
    font-size: 0.875rem;
    width: 16px;
    text-align: center;
}

.required[b-iz3mp96glq] {
    color: var(--error);
    margin-left: 0.25rem;
}

/* Password Input Wrapper */
.password-input-wrapper[b-iz3mp96glq] {
    position: relative;
    display: flex;
    align-items: center;
}

.form-input[b-iz3mp96glq] {
    width: 100%;
    padding: 0.875rem 3rem 0.875rem 1rem;
    border: 2px solid var(--gray-300);
    border-radius: 8px;
    font-size: 1rem;
    color: var(--gray-900);
    transition: all 0.2s ease;
    background: var(--acv-white);
    font-family: inherit;
}

/* Prevent copy/paste on password fields */
.password-input-wrapper input[type="password"][b-iz3mp96glq] {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* When password is visible (type="text"), allow selection for editing but prevent copy */
.password-input-wrapper input[type="text"][b-iz3mp96glq] {
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}

.form-input:focus[b-iz3mp96glq] {
    outline: none;
    border-color: var(--acv-primary);
    box-shadow: 0 0 0 3px rgba(33, 76, 166, 0.1);
}

.form-input[b-iz3mp96glq]::placeholder {
    color: var(--gray-400);
}

.form-input.error[b-iz3mp96glq] {
    border-color: var(--error);
}

.form-input.error:focus[b-iz3mp96glq] {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.password-toggle[b-iz3mp96glq] {
    position: absolute;
    right: 0.75rem;
    background: none;
    border: none;
    color: var(--gray-500);
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    font-size: 1rem;
}

.password-toggle:hover[b-iz3mp96glq] {
    color: var(--acv-primary);
}

/* Password Requirements */
.password-requirements[b-iz3mp96glq] {
    margin-top: 0;
    margin-bottom: 2rem;
    padding: 1rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200) !important;
    border-radius: 8px;
    outline: none !important;
    box-shadow: none !important;
}

/* Override app.css .invalid outline rule */
.password-requirements .requirement-item[b-iz3mp96glq] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0;
    font-size: 0.875rem;
    color: var(--gray-600);
    transition: color 0.2s ease;
    outline: none !important;
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

.password-requirements .requirement-item i[b-iz3mp96glq] {
    font-size: 0.875rem;
    width: 16px;
    text-align: center;
}

.password-requirements .requirement-item.valid[b-iz3mp96glq] {
    color: var(--success);
}

.password-requirements .requirement-item.valid i[b-iz3mp96glq] {
    color: var(--success);
}

.password-requirements .requirement-item.invalid[b-iz3mp96glq] {
    color: var(--gray-500);
    outline: none !important;
    border: none !important;
    border-bottom: none !important;
}

.password-requirements .requirement-item.invalid i[b-iz3mp96glq] {
    color: var(--error);
}

/* Field Error */
.field-error[b-iz3mp96glq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.625rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #dc2626;
    padding: 0.75rem 1rem;
    background: #fee2e2;
    border: 1px solid #ef4444;
    border-radius: 8px;
    animation: slideDown-b-iz3mp96glq 0.2s ease;
}

.field-error i[b-iz3mp96glq] {
    font-size: 0.875rem;
    flex-shrink: 0;
}

/* Field Success */
.field-success[b-iz3mp96glq] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.625rem;
    font-size: 0.875rem;
    color: #059669;
    padding: 0.5rem 0.75rem;
    background: #d1fae5;
    border: 1px solid #a7f3d0;
    border-radius: 6px;
    animation: slideDown-b-iz3mp96glq 0.2s ease;
}

.field-success i[b-iz3mp96glq] {
    font-size: 0.875rem;
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.field-success span[b-iz3mp96glq] {
    line-height: 1.5;
}

/* Caps Lock Warning */
.capslock-warning[b-iz3mp96glq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 6px;
    color: #856404;
    font-size: 0.875rem;
    font-weight: 500;
    animation: slideDown-b-iz3mp96glq 0.2s ease;
}

.capslock-warning i[b-iz3mp96glq] {
    font-size: 0.875rem;
    color: #ffc107;
}

/* Form Actions */
.form-actions[b-iz3mp96glq] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 2px solid var(--gray-200);
    flex-wrap: wrap;
}

.btn-cancel[b-iz3mp96glq],
.btn-submit[b-iz3mp96glq] {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.75rem;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    min-width: 140px;
    justify-content: center;
}

.btn-cancel[b-iz3mp96glq] {
    background: var(--gray-100);
    color: var(--gray-700);
}

.btn-cancel:hover:not(:disabled)[b-iz3mp96glq] {
    background: var(--gray-200);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-cancel:disabled[b-iz3mp96glq] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-submit[b-iz3mp96glq] {
    background: var(--acv-primary);
    color: var(--acv-white);
    box-shadow: 0 2px 6px rgba(33, 76, 166, 0.2);
}

.btn-submit:hover:not(:disabled)[b-iz3mp96glq] {
    background: var(--acv-primary-700);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 76, 166, 0.3);
}

.btn-submit:disabled[b-iz3mp96glq] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Responsive */
@media (max-width: 768px) {
    .change-password-page[b-iz3mp96glq] {
        padding: 0.5rem 1rem;
    }

    .card-header-section[b-iz3mp96glq] {
        padding: 1.5rem 1.25rem;
    }

    .card-header-text h1[b-iz3mp96glq] {
        font-size: 1.5rem;
    }

    .form-header[b-iz3mp96glq] {
        padding: 1.5rem 1.25rem;
    }

    .form-body[b-iz3mp96glq] {
        padding: 1.5rem 1.25rem;
    }

    .form-title[b-iz3mp96glq] {
        font-size: 1.25rem;
    }

    .form-subtitle[b-iz3mp96glq] {
        margin-left: 0;
        font-size: 0.875rem;
    }

    .form-actions[b-iz3mp96glq] {
        flex-direction: column-reverse;
    }

    .btn-cancel[b-iz3mp96glq],
    .btn-submit[b-iz3mp96glq] {
        width: 100%;
    }
}