:root {
    /* BRAND COLOR DEFINITIONS (Chủ đạo: #00b975) */
    /*    --brand-primary: #00b975;
    --brand-primary-hover: #00965e;
    --brand-primary-light: #e6f8f1;
    --brand-primary-rgb: 0, 185, 117;*/
    /* ERP Layout & Neutral Palette (Slate modern) */
    /*--erp-bg-app: #eef2f6;*/
    --erp-bg-card: #f8fafc; /* màu nền thẻ */
    --erp-bg-surface: #ffffff; /* màu nền bề mặt */
    --erp-primary: var(--brand-primary); /* màu chủ đạo */
    /*--erp-secondary: #334155;*/
    --erp-accent: var(--brand-primary); /* màu chủ đạo */
    --erp-accent-hover: var(--brand-primary-hover); /* màu chủ đạo khi hover */
    --erp-accent-light: var(--brand-primary-light); /* màu chủ đạo nhạt */
    --erp-border-color: #cbd5e1; /* màu viền */
    --erp-border-light: #e2e8f0; /* màu viền nhẹ */
    --erp-text-main: #1e293b; /* màu chữ chính */
    --erp-text-muted: #64748b; /* màu chữ phụ */
    --erp-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
    --erp-shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
    --erp-shadow-lg: 0 10px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    color: #1e293b;
    font-size: 13px !important;
    margin: 0;
    padding: 0;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.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;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.cyber-padding2px {
    padding: 2px;
}

/* ------------------------ css ô nhập liệu --------------------------*/
.cyber-w100 {
    width: 100%;
}

.cyber-flex1 {
    flex: 1;
}

.cyber-flex2 {
    flex: 2;
}

.cyber-upload-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 48px;
    line-height: 36px;
    border-radius: 10px;
    margin-top: 10px;
    background-color: #00b975;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(0, 185, 117, 0.2);
}

    .cyber-upload-btn:hover:not(:disabled) {
        background: #009e63 !important;
        box-shadow: 0 6px 16px rgba(0, 185, 117, 0.3);
        transform: translateY(-1px);
    }

    .cyber-upload-btn:active:not(:disabled) {
        transform: translateY(0);
    }

    .cyber-upload-btn:disabled {
        background: #cbd5e1 !important;
        box-shadow: none !important;
        cursor: not-allowed;
    }

.cyber-table-layout {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

.cyber-table-row {
    display: flex;
    flex-direction: row;
    /*
        Đây là thuộc tính quan trọng nhất.
        Không đủ chỗ => tự xuống dòng.
    */
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    column-gap: 12px;
    row-gap: 8px;
    align-items: stretch;
    /*
        Không cho chính row tạo scrollbar.
    */
    overflow: visible;
    /*
        Cho phép row nằm trong container nhỏ.
    */
    min-width: 0;
}

    /* Không đặt min-width:0 ở đây - đây từng là nguyên nhân khiến các cột (đặc biệt cột
       "*") bị Grid ép co xuống gần 0px khi cột cố định (VD 200,300) không đủ chỗ, khiến nội
       dung (label, CyberLabelView...) wrap từng chữ rồi tràn/đè chồng lên cột kế bên (ô vẽ
       sau đè lên ô vẽ trước) - nhìn giống hệt hiện tượng "CyberTable che nút/che nội dung
       phía trên". Để mặc định (min-width:auto), cột cố định giữ đúng độ rộng khai báo, cột
       "*" chỉ co tới đúng min-content của nội dung bên trong. */
    .cyber-table-row > * {
        box-sizing: border-box;
        /*
        Không được flex co lại.
    */
        flex-shrink: 0;
        /*
        Không được tự tăng width.
    */
        flex-grow: 0;
        /*
        Rất quan trọng đối với component Blazor.
    */
        min-width: 100px;
    }
    .cyber-table-row > :nth-child(1) {
        flex: 0 0 var(--cyber-col-1);
        width: var(--cyber-col-1);
    }

    .cyber-table-row > :nth-child(2) {
        flex: 0 0 var(--cyber-col-2);
        width: var(--cyber-col-2);
    }

    .cyber-table-row > :nth-child(3) {
        flex: 0 0 var(--cyber-col-3);
        width: var(--cyber-col-3);
    }

    .cyber-table-row > :nth-child(4) {
        flex: 0 0 var(--cyber-col-4);
        width: var(--cyber-col-4);
    }

    .cyber-table-row > :nth-child(5) {
        flex: 0 0 var(--cyber-col-5);
        width: var(--cyber-col-5);
    }

    .cyber-table-row > :nth-child(6) {
        flex: 0 0 var(--cyber-col-6);
        width: var(--cyber-col-6);
    }

    .cyber-table-row > :nth-child(7) {
        flex: 0 0 var(--cyber-col-7);
        width: var(--cyber-col-7);
    }

    .cyber-table-row > :nth-child(8) {
        flex: 0 0 var(--cyber-col-8);
        width: var(--cyber-col-8);
    }

    .cyber-table-row > :nth-child(9) {
        flex: 0 0 var(--cyber-col-9);
        width: var(--cyber-col-9);
    }

    .cyber-table-row > :nth-child(10) {
        flex: 0 0 var(--cyber-col-10);
        width: var(--cyber-col-10);
    }

.cyber-lookup-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.cyber-lookup-label {
    font-size: 13px;
    margin-bottom: 4px;
    color: #333333bd;
    user-select: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cyber-lookup-input-box {
    position: relative;
    display: flex;
    align-items: center;
}

.cyber-style-input {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 6px 6px 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
}

    .cyber-style-input:focus-within {
        outline: none;
        border-color: var(--brand-primary);
        background: #ffffff;
        box-shadow: 0 0 0 4px rgba(var(--brand-primary-rgb), 0.1);
    }

.cyber-style-label {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 6px 6px 8px;
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


.cyber-date-input:focus {
    outline: none;
    border-color: #2684ff;
}

.cyber-date-input {
    outline: none;
    border: none;
    width: 100%;
}
.cyber-popup-footer-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    background-color: var(--erp-bg-card);
    border-top: 1px solid var(--erp-border-light);
}

.btn-modern {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 20px;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1.25;
}

    .btn-modern .material-icons {
        font-size: 18px;
    }

.btn-modern-secondary {
    background-color: var(--erp-bg-surface);
    border-color: var(--erp-border-color);
    color: var(--erp-text-main);
}

    .btn-modern-secondary:hover {
        background-color: #f1f5f9;
        color: var(--brand-primary);
        border-color: var(--brand-primary);
        box-shadow: var(--erp-shadow-sm);
    }

.btn-modern-primary {
    background-color: var(--brand-primary);
    color: #ffffff;
    box-shadow: 0 3px 8px rgba(var(--brand-primary-rgb), 0.3);
}

    .btn-modern-primary:hover {
        background-color: var(--brand-primary-hover);
        box-shadow: 0 5px 12px rgba(var(--brand-primary-rgb), 0.4);
        transform: translateY(-1px);
    }

    .btn-modern-primary:active {
        transform: translateY(0);
        box-shadow: 0 2px 4px rgba(var(--brand-primary-rgb), 0.3);
    }
.cyber-lookup-input {
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    padding: 6px 28px 6px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

.cyber-lookup-value-prefix {
    flex: 0 0 auto;
    margin-right: 6px;
    padding: 6px 6px 6px 8px;
    background: #f0f2f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    color: #555;
    white-space: nowrap;
    width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow: hidden;
}

.cyber-lookup-input:focus {
    outline: none;
    border-color: #2684ff;
}

.cyber-lookup-spinner {
    position: absolute;
    right: 8px;
    width: 14px;
    height: 14px;
    border: 2px solid #ddd;
    border-top-color: #2684ff;
    border-radius: 50%;
    animation: cyber-spin 0.7s linear infinite;
}

@keyframes cyber-spin {
    to {
        transform: rotate(360deg);
    }
}

.cyber-lookup-popup {
    /* position:fixed (thay vì absolute) để sổ xuống thoát khỏi vùng overflow:hidden/auto
       của các control cha (ví dụ ô của CyberGridData) - vị trí thực tế do JS tính lại
       (xem CyberLookup.positionPopup trong cyberjs.js) dựa theo vị trí ô input trên màn hình. */
    position: fixed;
    z-index: 1100;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    /* Chiều rộng tối thiểu (bằng ô input) do JS đặt qua style.minWidth, tự nới rộng theo nội dung bảng */
    width: max-content;
    max-width: 95vw;
    max-height: 260px;
    overflow-y: auto;
}

.cyber-lookup-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .cyber-lookup-table th {
        position: sticky;
        top: 0;
        background: #f5f6f8;
        text-align: left;
        padding: 8px;
        border-bottom: 1px solid #e0e0e0;
        font-weight: 600;
        color: black;
    }

    .cyber-lookup-table td {
        padding: 6px 8px;
        border-bottom: 1px solid #f0f0f0;
        white-space: nowrap;
    }

.cyber-lookup-row {
    cursor: pointer;
}

    .cyber-lookup-row:hover {
        background: #eaf2ff;
    }

    .cyber-lookup-row.active {
        background: #d7e8ff;
    }

.cyber-lookup-state {
    padding: 10px;
    text-align: center;
    color: #888;
    font-size: 13px;
}

.cyber-global-loading {
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.6);
}

    .cyber-global-loading.show {
        display: flex;
    }

    .cyber-global-loading.hide {
        display: none;
    }

.cyber-global-loading-spinner {
    width: 48px;
    height: 48px;
    border: 5px solid #ddd;
    border-top-color: #2684ff;
    border-radius: 50%;
    animation: cyber-spin 0.7s linear infinite;
}
/* -------------------------------------------------------------*/





/* ------------------------ CyberPopup --------------------------*/

.cyber-popup-modal {
    transition: opacity 0.25s ease;
    opacity: 1;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
}

.cyber-modal-hide {
    opacity: 0;
    pointer-events: none;
}

.cyber-modal-show {
    opacity: 1;
}

/*
.cyber-popup-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
}*/

.cyber-popup-container {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    z-index: 1001;
    transition: all 0.25s ease;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* Giới hạn theo viewport để popup không tràn màn hình khi nội dung dài
       (kể cả lúc chưa resize) - phần thân sẽ tự cuộn thay vì đẩy footer/độ
       cao popup vượt quá màn hình. */
    max-height: 90vh;
}

    /* Header/footer luôn giữ nguyên chiều cao, phần body giãn/co và tự cuộn để
   footer luôn ghim ở đáy popup - đặc biệt quan trọng khi popup bị resize
   (CyberIsResize) nhỏ hơn chiều cao nội dung. */
    .cyber-popup-container > .cyber-popup-header {
        flex: 0 0 auto;
    }

    .cyber-popup-container > .cyber-popup-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
        margin-bottom: 10px;
        padding: 1px;
    }

    .cyber-popup-container > .cyber-popup-footer {
        flex: 0 0 auto;
    }

.cyber-popup-header-movable {
    cursor: move;
    user-select: none;
}
/* Tay cầm kéo do NỘI DUNG popup tự khai (khi popup ẩn hẳn thanh tiêu đề) - xem
   cyberPopupInterop.enableMove trong cyberjs.js. */
.cyber-popup-drag-handle {
    cursor: move;
    user-select: none;
}

/* Đang kéo: chặn chuột vào iframe/video trong popup, nếu không tài liệu con nuốt mất mousemove
   làm popup kẹt lại giữa chừng. */
.cyber-popup-dragging iframe,
.cyber-popup-dragging video,
.cyber-popup-dragging object,
.cyber-popup-dragging embed {
    pointer-events: none;
}
.cyber-popup-resize-handle {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 16px;
    height: 16px;
    cursor: se-resize;
    background: linear-gradient(135deg, transparent 0%, transparent 45%, #999 45%, #999 55%, transparent 55%, transparent 60%, #999 60%, #999 70%, transparent 70%, transparent 75%, #999 75%, #999 85%, transparent 85%);
}

/* Zoom */
.cyber-anim-zoom.cyber-popup-hide {
    transform: translate(-50%,-50%) scale(0.7);
    opacity: 0;
}

.cyber-anim-zoom.cyber-popup-show {
    transform: translate(-50%,-50%) scale(1);
    opacity: 1;
}

/* Fade */
.cyber-anim-fade.cyber-popup-hide {
    opacity: 0;
}

.cyber-anim-fade.cyber-popup-show {
    opacity: 1;
}

/* SlideDown */
.cyber-anim-slidedown.cyber-popup-hide {
    transform: translate(-50%,-70%);
    opacity: 0;
}

.cyber-anim-slidedown.cyber-popup-show {
    transform: translate(-50%,-50%);
    opacity: 1;
}

.cyber-popup-close-btn {
    cursor: pointer;
    user-select: none;
    /*position: absolute;*/
    /*right: 0px;
    top: -8px;*/
    font-size: 20px;
}
/* CyberMsgBox */
.cyber-msgbox-body {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 40px;
}

.cyber-msgbox-icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
}

.cyber-msgbox-content {
    flex: 1 1 auto;
    white-space: pre-line;
    word-break: break-word;
    padding-top: 4px;
}

.cyber-msgbox-info .cyber-msgbox-icon {
    background: #2196f3;
}

.cyber-msgbox-success .cyber-msgbox-icon {
    background: #4caf50;
}

.cyber-msgbox-warning .cyber-msgbox-icon {
    background: #ff9800;
}

.cyber-msgbox-error .cyber-msgbox-icon {
    background: #f44336;
}

.cyber-msgbox-question .cyber-msgbox-icon {
    background: #9c27b0;
}

.cyber-msgbox-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.cyber-msgbox-btn {
    min-width: 80px;
    padding: 6px 16px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background: #f5f5f5;
    cursor: pointer;
    font-size: 14px;
}

    .cyber-msgbox-btn:hover {
        filter: brightness(0.95);
    }

.cyber-msgbox-btn-primary {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}
.help-icon {
    z-index: 12;
    width: 34px;
    height: 34px;
    background: #eff6ff;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #2563eb;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    transition: .2s;
}

.cyber-help-popup {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    /*min-width: 260px;
    max-width: 360px;*/
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.5;
    color: #334155;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: .2s;
    z-index: 20;
    user-select: none;
}

.help-container {
    position: relative;
    z-index: 12;
}

    .help-container:focus-within .cyber-help-popup,
    .help-container:hover .cyber-help-popup {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

.help-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    padding: 6px 0;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .help-item kbd {
        min-width: fit-content;
        text-align: center;
        background: #f1f5f9;
        border: 1px solid #cbd5e1;
        border-radius: 6px;
        padding: 4px 8px;
        font-size: 12px;
        font-family: inherit;
        font-weight: 600;
        color: #334155;
        flex: 1;
    }

.cyber-help-text {
    flex: 2;
    font-style: italic;
    font-size: 12px;
    color: #888;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cyber-help-line {
    width: 100%;
    height: 1px;
    margin: 8px 0;
    background: #e5e7eb;
}
/* -------------------------------------------------------------*/
/* ------------------------ CyberOTP --------------------------*/
.otp-container {
    display: flex;
    /*justify-content: center;*/
    gap: 1rem;
}

.otp-input {
    width: 3rem;
    height: 3rem;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .otp-input:focus {
        border-color: var(--brand-primary-hover);
        box-shadow: 0 0 0 3px var(--brand-primary-light);
    }
/* -----------------------------------------------------------*/




/* ------------------------ cyber upload file --------------------------*/
.cyber-upload-label {
    margin-bottom: 8px;
    font-weight: 600;
}

.cyber-upload-box {
    border: 2px dashed #22c55e;
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    transition: .2s;
    background: #fcfffd;
}

    .cyber-upload-box:hover {
        background: #f0fdf4;
    }

.cyber-upload-icon {
    font-size: 100px !important;
    color: #2196F3;
}

.cyber-upload-title {
    font-size: 18px;
    font-weight: 600;
    margin-top: 10px;
}

.cyber-upload-sub {
    color: #888;
    margin: 10px 0;
}

.cyber-upload-note {
    margin-top: 15px;
    color: #999;
    font-size: 13px;
}

.cyber-file-list-title {
    margin: 10px 0;
    font-weight: bold;
}

.cyber-file-item {
    display: flex;
    align-items: center;
    border: 1px solid #e4e4e4;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 8px;
    transition: .2s;
    gap: 5px;
}

    .cyber-file-item:hover {
        background: #f7f7f7;
    }

.cyber-file-icon {
    font-size: 28px;
    width: 45px;
}

.cyber-file-info {
    flex: 1;
}

    .cyber-file-info small {
        color: #888;
    }

.cyber-remove {
    font-weight: 700;
    border: 1px solid #ccc;
    background: none;
    color: red;
    font-size: 16px;
    cursor: pointer;
    border-radius: 6px;
}

.cyber-upload-box.cyber-dragover {
    border-color: #00e5ff;
    background-color: rgba(0, 229, 255, 0.08);
}

.cyber-file-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.selected-file-info {
    margin-top: 12px;
    padding: 10px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .selected-file-info .file-name {
        font-weight: 600;
        color: #0f172a;
        word-break: break-all;
    }

    .selected-file-info .file-size {
        color: #94a3b8;
    }

/* PDF */
.cyber-file-icon.pdf {
    background: #ffebee;
    color: #d32f2f;
}

/* Word */
.cyber-file-icon.word {
    background: #e3f2fd;
    color: #1565c0;
}

/* Excel */
.cyber-file-icon.excel {
    background: #e8f5e9;
    color: #2e7d32;
}

/* PowerPoint */
.cyber-file-icon.powerpoint {
    background: #fff3e0;
    color: #ef6c00;
}

/* Image */
.cyber-file-icon.image {
    background: #f3e5f5;
    color: #8e24aa;
}

/* Video */
.cyber-file-icon.video {
    background: #ede7f6;
    color: #5e35b1;
}

/* Audio */
.cyber-file-icon.audio {
    background: #fce4ec;
    color: #c2185b;
}

/* Zip */
.cyber-file-icon.zip {
    background: #eceff1;
    color: #455a64;
}

/* Code */
.cyber-file-icon.code {
    background: #263238;
    color: #fff;
}

/* Mặc định */
.cyber-file-icon.file {
    background: #f5f5f5;
    color: #757575;
}
/* -----------------------------------------------------------*/





/* ------------css của control select-------------------------------*/
.cyber-lookup-chip-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-height: 38px;
    padding: 4px 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    cursor: text;
}

    .cyber-lookup-chip-box:focus-within {
        border-color: #00b975;
        background: #ffffff;
        box-shadow: 0 0 0 4px rgba(0, 185, 117, 0.1);
    }

.cyber-lookup-input-multi {
    flex: 1;
    min-width: 120px;
    border: none;
    outline: none;
    padding: 4px;
    background: transparent;
}

.cyber-lookup-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #e8f4ff;
    border: 1px solid #9dcfff;
    border-radius: 16px;
    padding: 2px 8px;
    font-size: 13px;
}

.cyber-lookup-chip-remove {
    cursor: pointer;
    font-weight: bold;
}
/* -----------------------------------------------------------*/




/* -----------css control radio button------------------------------*/
.cyber-radio-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.cyber-radio-label {
    font-size: 13px;
    color: #555;
}

.cyber-radio-container {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    gap: 8px;
    position: relative;
}

    .cyber-radio-container input {
        display: none;
    }

.cyber-radio-checkmark {
    width: 18px;
    height: 18px;
    border: 2px solid #00D287;
    border-radius: 50%;
    position: relative;
    transition: .2s;
    box-sizing: border-box;
}

    .cyber-radio-checkmark::after {
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #00D287;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%) scale(0);
        transition: .2s;
    }

.cyber-radio-container input:checked + .cyber-radio-checkmark::after {
    transform: translate(-50%,-50%) scale(1);
}

.cyber-radio-container input:disabled + .cyber-radio-checkmark {
    background: #eee;
    border-color: #ccc;
}

.cyber-radio-text {
    font-size: 14px;
}
/* -----------------------------------------------------------*/

/* -----------css control CyberRadioButtonData------------------------------*/
.cyber-radio-data-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.cyber-radio-group {
    display: flex;
    gap: 4px;
}

.cyber-radio-group-vet {
    flex-direction: column;
}

.cyber-radio-group-hoz {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
}

    .cyber-radio-group-hoz .cyber-radio-wrapper {
        width: auto;
    }
/* -----------------------------------------------------------*/

/* -----------------css control CyberStar-----------------------------*/
.cyber-star-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cyber-star-label {
    font-size: 13px;
    color: #555;
}

.cyber-star-row {
    display: inline-flex;
    gap: 4px;
    outline: none;
}

.cyber-star-wrap {
    position: relative;
    display: inline-block;
    line-height: 1;
    cursor: pointer;
    user-select: none;
}

.cyber-star {
    line-height: 1;
    white-space: nowrap;
}

.cyber-star-fill {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    transition: width .1s var(--ease, ease);
}

.cyber-star-readonly .cyber-star-wrap {
    cursor: default;
}
/* -----------------------------------------------------------*/

/* -----------css control segmented------------------------------*/
.cyber-segmented-wrapper {
    background: var(--erp-bg-body, #f8f9fa);
    border: 1px solid var(--erp-border-color, #e2e8f0);
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cyber-segmented-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--erp-text-main, #1f2937);
    white-space: nowrap;
}

.cyber-segmented-control {
    display: inline-flex;
    background: #e2e8f0;
    padding: 3px;
    border-radius: 6px;
    gap: 2px;
    width: 100%;
    max-width: 260px;
}

.cyber-segmented-option {
    flex: 1;
    text-align: center;
    padding: 6px 12px;
    font-size: 0.825rem;
    font-weight: 600;
    color: var(--erp-text-muted, #64748b);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

    .cyber-segmented-option.active {
        background-color: #ffffff;
        color: var(--brand-primary, #00D287);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .cyber-segmented-option:hover:not(.active):not(.disabled) {
        color: var(--erp-text-main, #1f2937);
    }

    .cyber-segmented-option.disabled {
        cursor: not-allowed;
        opacity: 0.6;
    }
/* -----------------------------------------------------------*/

/* -----------css control dropdown (CyberDropdown/CyberDropdownItem)------------------*/
.cyber-dropdown-wrapper {
    position: relative;
    display: inline-block;
}

.cyber-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--erp-border-color, #e2e8f0);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    user-select: none;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--erp-text-main, #1f2937);
    transition: border-color 0.15s ease, color 0.15s ease;
}

    .cyber-dropdown-trigger:hover:not(.cyber-dropdown-disabled) {
        border-color: var(--brand-primary, #00D287);
        color: var(--brand-primary, #00D287);
    }

    .cyber-dropdown-trigger.cyber-dropdown-trigger-open {
        border-color: var(--brand-primary, #00D287);
    }

    .cyber-dropdown-trigger.cyber-dropdown-disabled {
        opacity: 0.6;
        cursor: not-allowed;
        pointer-events: none;
    }

.cyber-dropdown-trigger-caret {
    font-size: 0.7rem;
    transition: transform 0.15s ease;
}

.cyber-dropdown-trigger-open .cyber-dropdown-trigger-caret {
    transform: rotate(180deg);
}

.cyber-dropdown-menu {
    position: fixed;
    visibility: hidden;
    background: #fff;
    border: 1px solid var(--erp-border-color, #e2e8f0);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    padding: 6px;
    box-sizing: border-box;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 1002;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.cyber-dropdown-hide {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
}

.cyber-dropdown-show {
    opacity: 1;
    transform: translateY(0);
}

.cyber-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    color: black;
    white-space: nowrap;
    user-select: none;
}

    .cyber-dropdown-item:hover:not(.cyber-dropdown-item-disabled) {
        background: var(--erp-bg-body, #f8f9fa);
        color: var(--brand-primary, #00D287);
    }

    .cyber-dropdown-item.cyber-dropdown-item-disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
    .cyber-dropdown-item .material-icons {
        font-size: 18px !important;
        color: #999;
    }

.cyber-dropdown-item-icon {
    flex: 0 0 auto;
    width: 16px;
    text-align: center;
}

.cyber-dropdown-item-label {
    flex: 1 1 auto;
}

.cyber-dropdown-item-shortcut {
    flex: 0 0 auto;
    font-size: 0.75rem;
    color: var(--erp-text-muted, #9ca3af);
    margin-left: 12px;
}

.cyber-dropdown-divider {
    height: 1px;
    background: var(--erp-border-color, #e2e8f0);
    margin: 4px 2px;
}
/* -----------------------------------------------------------*/


















/* ------------------------ CyberLogin --------------------------*/
.cyber-login-container {
    height: 100vh;
    display: flex;
    overflow: hidden;
}
.cyber-left-panel {
    flex: 1.2;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 60px 150px;
    color: white;
    overflow: hidden;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.cyber-right-panel {
    flex: 0.8;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 40px 40px 15px;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.02);
    box-sizing: border-box;
}

.cyber-right-content {
    width: 100%;
    max-width: 380px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
}

/* Footer nằm sát đáy */
.cyber-login-footer {
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 15px;
    font-size: 13px;
    color: #5e656b;
    flex-shrink: 0;
    margin: 0 auto;
}

.cyber-login-copyright {
    white-space: nowrap;
}

.cyber-login-links {
    display: flex;
    align-items: center;
    gap: 20px;
    white-space: nowrap;
}

    .cyber-login-links span {
        cursor: pointer;
        transition: color 0.2s ease;
    }

        .cyber-login-links span:hover {
            color: #1e262c;
        }
.cyber-left-content-tablet {
    display: none;
}
@media (max-width: 600px) {
    .cyber-login-container {
        display: block !important;
    }

    .cyber-left-panel {
        display: none;
    }

    .cyber-login-footer {
        flex-direction: column;
        gap: 8px;
    }
    .cyber-lang-btn {
        padding-left: 1px;
    }
}
@media (max-width:1024px) and (min-height:1024px) {

    .cyber-login-container {
        display: flex !important;
    }

    .cyber-right-panel {
        display: none !important;
    }
    .cyber-left-content {
        display: none !important;
    }
    .cyber-left-content-tablet {
        display: block !important;
        width: 100%;
        max-width: 420px;
        background: #fff;
        padding: 40px;
        border-radius: 14px;
        flex: 1;
        box-sizing: border-box;
    }
    .cyber-login-footer {
        flex-direction: column;
    }
}
/*--------------------------------------------------------------------*/
.cyber-input-group {
    display: flex;
    align-items: center;
    width: 100%;
    height: 50px;
    margin-top: 16px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 0 14px;
    background: #f8fafc;
    transition: all 0.2s ease-in-out;
    outline: none;
}

    .cyber-input-group:focus-within {
        border-color: var(--brand-primary);
        background: #ffffff;
        box-shadow: 0 0 0 4px var(--brand-primary-light);
    }

    .cyber-input-group i:first-child {
        color: #94a3b8;
        margin-right: 12px;
        font-size: 20px;
        flex-shrink: 0;
    }

    .cyber-input-group .w3-input {
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0;
        flex: 1;
        font-size: 14px;
        color: #1e293b;
        font-weight: 500;
    }

        .cyber-input-group .w3-input::placeholder {
            color: #94a3b8;
        }

        .cyber-input-group .w3-input:focus {
            outline: none;
        }

.cyber-login-box {
    width: 100%;
    box-sizing: border-box;
}

    .cyber-login-box select {
        border: none !important;
        outline: none !important;
        background: transparent !important;
        box-shadow: none !important;
        font-size: 14px;
        font-weight: 500;
        color: #1e293b;
        padding: 0;
        margin: 0;
        cursor: pointer;
    }

.cyber-toggle-password {
    cursor: pointer;
    color: #94a3b8;
    margin-left: 10px;
    flex-shrink: 0;
    transition: color 0.2s;
}

    .cyber-toggle-password:hover {
        color: #1e293b;
    }
/* -----------------------------------------------------------*/
.cyber-forgot-link {
    color: var(--brand-primary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: color 0.2s;
}

    .cyber-forgot-link:hover {
        color: var(--brand-primary-hover);
        text-decoration: underline;
        cursor: pointer;
    }
/* -----------------------------------------------------------*/
.cyber-login-btn {
    width: 100%;
    height: 48px;
    line-height: 36px;
    border-radius: 8px !important;
    font-weight: 600;
    font-size: 15px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    /*box-shadow: 0 4px 12px var(--brand-primary-hover);*/
    margin-top: 20px;
}

    .cyber-login-btn:hover:not(:disabled) {
        background: var(--brand-primary-hover) !important;
        box-shadow: 0 6px 16px var(--brand-primary-hover);
        transform: translateY(-1px);
    }

    .cyber-login-btn:active:not(:disabled) {
        transform: translateY(0);
    }

    .cyber-login-btn:disabled {
        background: #cbd5e1 !important;
        box-shadow: none !important;
        cursor: not-allowed;
    }
/* -----------------------------------------------------------*/
.cyber-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 24px 0;
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

    .cyber-divider::before, .cyber-divider::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid #e2e8f0;
    }

    .cyber-divider:not(:empty)::before {
        margin-right: .5em;
    }

    .cyber-divider:not(:empty)::after {
        margin-left: .5em;
    }

.cyber-social-btn {
    width: 100%;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    color: #475569;
    font-weight: 600;
    font-size: 13.5px;
    cursor: pointer;
    transition: all 0.2s;
}

    .cyber-social-btn:hover {
        background: #f8fafc;
        border-color: #cbd5e1;
        color: #1e293b;
    }

    .cyber-social-btn img {
        flex-shrink: 0;
    }
/* -----------------------------------------------------------*/
/* ------------------------ CyberLangage --------------------------*/
.cyber-lang {
    display: flex;
    justify-content: flex-end;
    user-select: none;
}

.cyber-lang-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    /*border: 1px solid #dcdfe6;
    border-radius: 6px;*/
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: black;
}

    .cyber-lang-btn:hover {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

    .cyber-lang-btn img {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        object-fit: cover;
        display: block;
    }
/* --------------------------------------------------------------------------------------------------------------------*/





/* ---------------------mainlayout----------------------------------------------------------------------------------*/
:root {
    --green: #00D287;
    --green-dark: #00A76C;
    --green-tint: #E4FBF1;
    --orange: #FF990A;
    --orange-tint: #FFF1DC;
    --ink: #0E1B17;
    --ink-soft: #4B5A55;
    --line: #E4EAE7;
    --paper: #F4F7F5;
    --card: #FFFFFF;
    --sidebar-bg: #06170F;
    --sidebar-bg-soft: #0C231A;
    --sidebar-line: rgba(255,255,255,0.08);
    --sidebar-text: rgba(255,255,255,0.62);
    --sidebar-text-strong: #ffffff;
    --sidebar-w: 272px;
    --sidebar-w-collapsed: 76px;
    --ease: cubic-bezier(.4,0,.2,1);
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--paper);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .cyber-display {
    font-family: 'Manrope', sans-serif;
}

.cyber-mono {
    font-family: 'IBM Plex Mono', monospace;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    font-family: inherit;
    border: none;
    background: none;
    cursor: pointer;
    color: inherit;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* ============ APP SHELL ============ */
.cyber-app {
    display: flex;
    min-height: 100vh;
}

/* ============ SIDEBAR ============ */
/* fixed to the viewport so it never scrolls with the page; only its own
     nav list (overflow-y:auto below) scrolls internally when the menu is long */
/* =========================================================
   SIDEBAR
   ========================================================= */

.cyber-sidebar {
    user-select: none;
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-w);
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    color: #1e272a;
    border-right: 1px solid #e4eae7;
    z-index: 40;
    transition: width .3s ease, box-shadow .3s ease;
}


/* =========================================================
   COLLAPSED
   ========================================================= */

.cyber-app.cyber-collapsed .cyber-sidebar {
    width: var(--sidebar-w-collapsed);
}


/* =========================================================
   RESIZE HANDLE
   ========================================================= */

.cyber-sidebar__resize-handle {
    position: absolute;
    top: 0;
    right: -3px;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 5;
}

    .cyber-sidebar__resize-handle::after {
        content: "";
        position: absolute;
        top: 0;
        right: 2px;
        width: 2px;
        height: 100%;
        background: transparent;
        transition: background .2s ease;
    }

    .cyber-sidebar__resize-handle:hover::after {
        background: #00d289;
    }

.cyber-app.cyber-collapsed .cyber-sidebar__resize-handle {
    display: none;
}


/* =========================================================
   BRAND
   ========================================================= */

.cyber-sidebar__brand {
    min-height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    /*border-bottom: 1px solid #e4eae7;*/
    flex-shrink: 0;
    overflow: hidden;
}


/* Logo nếu sử dụng */

.cyber-brand__mark {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient( 135deg, #00d289 0%, #e77817 100% );
    font-family: "Manrope", sans-serif;
    font-weight: 800;
    font-size: 16px;
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(0, 210, 137, .22);
}


/* Tên version */

.cyber-brand__name {
    font-family: "Jaro", sans-serif;
    font-weight: 400;
    font-size: 38px;
    line-height: 1;
    white-space: nowrap;
    color: transparent;
    background: linear-gradient( 135deg, rgba(0, 210, 137, 1) 0%, rgba(231, 120, 23, 1) 100% );
    -webkit-background-clip: text;
    background-clip: text;
    opacity: 1;
    transition: opacity .2s ease, width .2s ease;
}
    .cyber-brand__name img {
        width: 200px; 
        height: auto;
    }

/* Collapsed */

.cyber-app.cyber-collapsed .cyber-sidebar__brand {
    justify-content: center;
    /*padding: 18px 0;*/
}

.cyber-app.cyber-collapsed .cyber-brand__name {
    width: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

.cyber-app.cyber-collapsed .cyber-brand__mark {
    margin: 0;
}

.cyber-sidebar-logout {
    color: #D02A23;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
}
.cyber-logout-text {
    transition: opacity .2s ease, width .2s ease;
}

.cyber-app.cyber-collapsed .cyber-sidebar-logout .cyber-logout-text {
    width: 0;
    opacity: 0;
    overflow: hidden;
}
/* =========================================================
   NAVIGATION AREA
   ========================================================= */

.cyber-sidebar__nav {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 14px 10px 12px;
}


    /* Scrollbar */

    .cyber-sidebar__nav::-webkit-scrollbar {
        width: 5px;
    }

    .cyber-sidebar__nav::-webkit-scrollbar-track {
        background: transparent;
    }

    .cyber-sidebar__nav::-webkit-scrollbar-thumb {
        background: #dce5e1;
        border-radius: 10px;
    }

        .cyber-sidebar__nav::-webkit-scrollbar-thumb:hover {
            background: #bfcac5;
        }


/* =========================================================
   NAV SECTION
   ========================================================= */

.cyber-nav-section-label {
    padding: 14px 12px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #9aa7a2;
    white-space: nowrap;
    transition: opacity .2s ease, height .2s ease;
}

.cyber-app.cyber-collapsed .cyber-nav-section-label {
    height: 0;
    padding: 0;
    opacity: 0;
    overflow: hidden;
}


/* =========================================================
   NAV ITEM
   ========================================================= */

.cyber-nav-item {
    position: relative;
    margin-bottom: 3px;
}


/* =========================================================
   NAV LINK / PARENT
   ========================================================= */

.cyber-nav-link,
.cyber-nav-parent {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 15px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #303a3d;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}


    /* Hover */

    .cyber-nav-link:hover,
    .cyber-nav-parent:hover {
        background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-primary-hover) 100%);
        color: white !important;
    }


/* Active */

.cyber-nav-item.cyber-active > .cyber-nav-link {
    background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-primary-hover) 100%);
    color: white;
    font-weight: 600;
}


/* =========================================================
   NAV ICON
   ========================================================= */

.cyber-nav-icon {
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #66736e;
    transition: color .2s ease, transform .2s ease;
}

.cyber-nav-link:hover .cyber-nav-icon,
.cyber-nav-parent:hover .cyber-nav-icon {
    color: #00a96d;
}

.cyber-nav-item.cyber-active > .cyber-nav-link .cyber-nav-icon {
    color: #00b975;
}


/* SVG */

.cyber-nav-icon svg {
    width: 100%;
    height: 100%;
}


/* IMG */

.cyber-nav-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* =========================================================
   NAV LABEL
   ========================================================= */

.cyber-nav-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 1;
    transition: opacity .2s ease, width .2s ease;
}


/* Collapsed */

.cyber-app.cyber-collapsed .cyber-nav-label {
    width: 0;
    flex: 0;
    opacity: 0;
    overflow: hidden;
}


/* =========================================================
   CHEVRON
   ========================================================= */

.cyber-nav-chevron {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #9aa6a1;
    transition: transform .25s ease, opacity .2s ease;
}


/* Open */

.cyber-nav-item.cyber-open > .cyber-nav-parent
.cyber-nav-chevron {
    transform: rotate(90deg);
    color: #00b975;
}


/* Collapsed */

.cyber-app.cyber-collapsed .cyber-nav-chevron {
    width: 0;
    opacity: 0;
    overflow: hidden;
}


/* =========================================================
   BADGE
   ========================================================= */

.cyber-nav-badge {
    min-width: 22px;
    padding: 2px 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: #fff0df;
    color: #c96a12;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
}

.cyber-app.cyber-collapsed .cyber-nav-badge {
    display: none;
}


/* =========================================================
   SUBMENU
   ========================================================= */

.cyber-submenu {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s ease;
}

.cyber-nav-item.cyber-open > .cyber-submenu {
    grid-template-rows: 1fr;
}


.cyber-submenu__inner {
    min-height: 0;
    overflow: hidden;
}


    .cyber-submenu__inner ul {
        margin: 3px 0 5px 23px;
        padding: 2px 0 3px 5px;
        border-left: 1px solid #dfe8e4;
    }


/* =========================================================
   SUB LINK
   ========================================================= */

.cyber-nav-sublink {
    position: relative;
    display: -webkit-box;
    padding: 7px 10px;
    margin: 1px 0;
    border-radius: 7px;
    color: #5d6864;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
    text-decoration: none;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    transition: background .2s ease, color .2s ease;
}


    .cyber-nav-sublink:hover {
        background: #f3f7f5;
        color: #1f2926;
    }


    .cyber-nav-sublink.cyber-active {
        background: rgba(0, 210, 137, .09);
        color: #009e69;
        font-weight: 600;
    }


/* =========================================================
   LEVEL 3
   ========================================================= */

.cyber-subnav-item.cyber-has-children > .cyber-subnav-parent {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #5d6864;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}


    .cyber-subnav-item.cyber-has-children > .cyber-subnav-parent:hover {
        background: #f3f7f5;
        color: #1f2926;
    }


.cyber-subnav-item .cyber-nav-chevron {
    width: 18px;
    height: 18px;
}


.cyber-subnav-item.cyber-open > .cyber-subnav-parent
.cyber-nav-chevron {
    transform: rotate(90deg);
    color: #00b975;
}


/* =========================================================
   LEVEL 3 SUBMENU
   ========================================================= */

.cyber-sub-submenu {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s ease;
}


.cyber-subnav-item.cyber-open > .cyber-sub-submenu {
    grid-template-rows: 1fr;
}


.cyber-sub-submenu__inner {
    min-height: 0;
    overflow: hidden;
}


    .cyber-sub-submenu__inner ul {
        margin: 2px 0 3px 8px;
        padding-left: 5px;
        border-left: 1px dashed #d9e3df;
    }


    .cyber-sub-submenu__inner .cyber-nav-sublink {
        padding: 6px 9px;
        font-size: 13px;
    }


/* =========================================================
   COLLAPSED TOOLTIP
   ========================================================= */

.cyber-app.cyber-collapsed
.cyber-nav-item > .cyber-nav-link[data-tooltip]:hover::after,
.cyber-app.cyber-collapsed
.cyber-nav-item > .cyber-nav-parent[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    padding: 7px 11px;
    border-radius: 7px;
    background: #18231f;
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    z-index: 100;
    pointer-events: none;
}


/* Không hiển thị submenu khi collapsed */

.cyber-app.cyber-collapsed .cyber-submenu {
    display: none;
}


/* =========================================================
   TTCP AREA
   ========================================================= */

#cyber-ttcp-anchor {
    flex-shrink: 0;
    background: #ffffff;
    border-top: 1px solid #e4eae7;
}


    /* Tên đơn vị */

    #cyber-ttcp-anchor > .w3-center {
        padding: 13px 16px 0 !important;
        color: #65716c;
        font-size: 12.5px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


/* =========================================================
   TTCP FOOTER
   ========================================================= */

.cyber-sidebar__footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px 15px;
    min-width: 0;
    cursor: pointer;
    transition: background .2s ease;
}


    .cyber-sidebar__footer:hover {
        background: #f3f7f5;
    }


/* Collapsed */

.cyber-app.cyber-collapsed .cyber-sidebar__footer {
    justify-content: center;
    padding: 12px 0 15px;
}


/* =========================================================
   TTCP ICON
   ========================================================= */

.cyber-ttcp-icon {
    width: 22px;
    flex-shrink: 0;
    font-size: 21px;
    color: #00a96d;
    transition: color .2s ease;
}


.cyber-sidebar__footer:hover
.cyber-ttcp-icon {
    color: #008d5b;
}


/* =========================================================
   TTCP TEXT
   ========================================================= */

.cyber-ttcp-mini {
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: visible;
    opacity: 1;
    transition: opacity .2s ease, width .2s ease;
}

    /* Tên TTCP */
    .cyber-ttcp-mini strong {
        display: block;
        width: 100%;
        min-width: 0;
        color: #27312e;
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* Mã + ngày */

.cyber-ttcp-info {
    display: block;
    color: #89948f;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cyber-ttcp-name {
    position: relative;
    width: 100%;
    min-width: 0;
}

    .cyber-ttcp-name > strong {
        display: block;
        width: 100%;
        min-width: 0;
        color: #27312e;
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
/* =========================================================
   TTCP POPUP LIST
   ========================================================= */

.cyber-ttcp-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 100%;
    overflow-y: auto;
    margin: 10px 12px;
}


    .cyber-ttcp-list::-webkit-scrollbar {
        width: 5px;
    }


    .cyber-ttcp-list::-webkit-scrollbar-thumb {
        background: #d8e2de;
        border-radius: 10px;
    }


/* =========================================================
   TTCP ITEM
   ========================================================= */

.cyber-ttcp-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
    line-height: 1.4;
    transition: background .2s ease, border-color .2s ease, transform .15s ease;
}


    .cyber-ttcp-item:hover {
        background: #f4f8f6;
        border-color: #dce8e3;
    }


    /* Selected */

    .cyber-ttcp-item.cyber-active {
        background: rgba(0, 210, 137, .08);
        border-color: rgba(0, 185, 117, .45);
    }


        .cyber-ttcp-item.cyber-active strong {
            color: #008f62;
        }


    /* TTCP name */

    .cyber-ttcp-item strong {
        color: #29332f;
        font-size: 13px;
        font-weight: 600;
    }


    /* TTCP info */

    .cyber-ttcp-item small {
        color: #89948f;
        font-size: 11px;
    }

.cyber-ttcp-name .tooltip {
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    width: auto;
    height: auto;
    cursor: pointer;
    z-index: 99999;
}


    /* Box tooltip */
    .cyber-ttcp-name .tooltip::after {
        content: attr(data-tooltip);
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(0, 210, 137, 1);
        color: white;
        padding: 8px 12px;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.4;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: all .2s ease;
        z-index: 9999;
    }


    /* Móc */
    .cyber-ttcp-name .tooltip::before {
        content: "";
        position: absolute;
        left: -6px;
        top: 50%;
        transform: translateY(-50%);
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-right: 6px solid rgba(0, 210, 137, 1);
        opacity: 0;
        visibility: hidden;
        transition: all .2s ease;
        z-index: 9999;
    }


/* Hover vào tên */
.cyber-ttcp-name:hover .tooltip::after,
.cyber-ttcp-name:hover .tooltip::before {
    opacity: 1;
    visibility: visible;
}
/* =========================================================
   COLLAPSED TTCP
   ========================================================= */

.cyber-app.cyber-collapsed #cyber-ttcp-anchor > .w3-center {
    height: 0;
    padding: 0 !important;
    opacity: 0;
    overflow: hidden;
}

.cyber-sidebar-overlay {
    display: none;
}
/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {

    .cyber-sidebar {
        width: var(--sidebar-w-collapsed);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1001;
        transform: translateX(-100%);
        transition: transform .3s ease;
    }

    .cyber-app.cyber-mobile-open .cyber-sidebar {
        transform: translateX(0);
    }

    .cyber-app.cyber-mobile-open .cyber-sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1000;
        background: rgba(0, 0, 0, .35);
    }
    .cyber-sidebar__brand {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    /*.cyber-brand__name {
        width: 0;
        opacity: 0;
        overflow: hidden;
    }*/

    /*.cyber-nav-label {
        width: 0;
        flex: 0;
        opacity: 0;
        overflow: hidden;
    }*/

    .cyber-nav-chevron,
    .cyber-nav-badge {
        display: none;
    }

    .cyber-sidebar__footer {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    /*.cyber-ttcp-mini {
        width: 0;
        opacity: 0;
    }*/

    /*#cyber-ttcp-anchor > .w3-center {
        height: 0;
        padding: 0 !important;
        opacity: 0;
        overflow: hidden;
    }*/

    /*.cyber-submenu {
        display: none;
    }*/
}

/* footer / user mini */
.cyber-sidebar__footer {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0
}

.cyber-app.cyber-collapsed .cyber-sidebar__footer {
    justify-content: center;
    padding: 14px 0;
}

.cyber-user-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: white;
    border: 1px solid #E6E8E9;
    font-weight: 700;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--brand-primary);
}

.cyber-user-mini {
    font-family: "Be Vietnam Pro", sans-serif;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: opacity .15s var(--ease);
    white-space: nowrap;
    min-width: 0;
    max-width: calc(100vw - 100px);
    text-align: end;
}
.cyber-user-mini-icon {
    display: none;
}
.cyber-user-account {
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    color: #1E262C;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.cyber-user-customer {
    color: #5E656B;
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/*.cyber-app.cyber-collapsed .cyber-user-mini {
    opacity: 0;
    width: 0;
}*/

/* ============ MAIN ============ */
.cyber-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    /*margin-left: var(--sidebar-w);*/
    /* topbar giờ position:fixed (không còn sticky) nên chừa chỗ ở đây để nội dung
       không bị nó đè lên - tránh hẳn lỗi topbar "biến mất" khi cuộn do sticky mất
       ngữ cảnh cuộn (phụ thuộc ancestor) */
    padding-top: 68px;
    transition: margin-left .35s var(--ease);
}

.cyber-app.cyber-collapsed .cyber-main {
    margin-left: var(--sidebar-w-collapsed);
}

.cyber-topbar {
    padding: 0 20px;
    user-select: none;
    height: 75px;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    transition: left .35s var(--ease);
}

.cyber-app.cyber-collapsed .cyber-topbar {
    left: var(--sidebar-w-collapsed);
}
.cyber-topbar-content {
    display: flex;
    align-items: center;
    gap: 0px;
    /*overflow: hidden;*/
}
.cyber-icon-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: var(--ink-soft);
    transition: background .2s var(--ease), color .2s var(--ease);
    border: none;
    outline: none;
}

    .cyber-icon-btn:hover {
        background: var(--paper);
        color: var(--ink);
    }

    .cyber-icon-btn svg {
        width: 19px;
        height: 19px;
    }
/* ============ cyber note ============ */
.cyber-note {
    padding: 0 15px;
}

.cyber-note-text {
    width: 100%;
    height: 100px;
    resize: none;
    border: 1px solid #cfcfcf;
    border-radius: 3px;
    padding: 8px;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
}

    .cyber-note-text:focus {
        border-color: #1976d2;
    }

/* ================================================ */
/* ============ HORIZONTAL MULTI-LEVEL MENU (topbar) ============ */
.cyber-hmenu {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 100%;
}

.cyber-hmenu-item {
    position: relative;
    height: 100%;
    display: flex;
    align-items: stretch;
}

.cyber-hmenu-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    height: 100%;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-soft);
    border-radius: 0;
    position: relative;
    transition: color .2s var(--ease);
}

    .cyber-hmenu-trigger::after {
        content: "";
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: 0;
        height: 2px;
        background: var(--green);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .25s var(--ease);
    }

    .cyber-hmenu-trigger span {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

.cyber-hmenu-item:hover > .cyber-hmenu-trigger,
.cyber-hmenu-item.cyber-open > .cyber-hmenu-trigger {
    color: var(--ink);
}

    .cyber-hmenu-item:hover > .cyber-hmenu-trigger::after,
    .cyber-hmenu-item.cyber-open > .cyber-hmenu-trigger::after {
        transform: scaleX(1);
    }

.cyber-hmenu-caret {
    width: 10px;
    height: 10px;
    transition: transform .25s var(--ease);
    flex-shrink: 0;
}

.cyber-hmenu-item:hover .cyber-hmenu-caret,
.cyber-hmenu-item.cyber-open .cyber-hmenu-caret {
    transform: rotate(180deg);
}

.cyber-hmenu-panel {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    min-width: 230px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(14,27,23,.14);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
    z-index: 50;
    /* menu nhiều mục có thể cao hơn phần còn lại của màn hình - giới hạn theo viewport và
       tự cuộn bên trong (thanh cuộn mảnh, xem style bên dưới) thay vì bị tràn/che khuất.
       (Đã thử dùng CSS columns để tự dàn cột nhưng gây lỗi chồng hình với nội dung phía
       sau khi kết hợp position:absolute, nên quay lại overflow-y đơn giản, ổn định hơn.) */
    max-height: calc(100vh - 84px);
    overflow-y: auto;
    overflow-x: hidden;
}

    .cyber-hmenu-panel::-webkit-scrollbar {
        width: 5px;
    }

    .cyber-hmenu-panel::-webkit-scrollbar-thumb {
        background: var(--line);
        border-radius: 3px;
    }

.cyber-hmenu-item:hover > .cyber-hmenu-panel,
.cyber-hmenu-item.cyber-open > .cyber-hmenu-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.cyber-hmenu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
    position: relative;
    transition: background .15s var(--ease), color .15s var(--ease);
}

    .cyber-hmenu-link:hover {
        background: var(--green-tint);
        color: var(--green-dark);
    }
/* 3rd level: flyout to the right of the panel */
.cyber-hmenu-subitem {
    position: relative;
}

.cyber-hmenu-flyout {
    /* Bản thân phần tử này (do Blazor render) luôn ẩn tại chỗ - .cyber-hmenu-panel (cha) có
       overflow-y:auto/overflow-x:hidden để tự cuộn khi menu cấp 2 quá dài (xem phía trên) -
       overflow khác visible trên bất kỳ ancestor nào LUÔN cắt mất mọi phần tử con dù
       position:absolute hay fixed (theo spec), nên flyout cấp 3 trước đây luôn bị ẩn/che
       khuất. Khi hover, JS (CyberHMenu trong cyberjs.js) tạo 1 bản CLONE của phần tử này,
       gắn position:fixed + tọa độ tự tính theo vị trí thật trên màn hình rồi hiển thị bản
       clone đó ngoài document.body - không di chuyển phần tử gốc (nếu di chuyển thẳng phần
       tử Blazor đang quản lý ra ngoài như CyberLookup.positionPopup ở trên thì lần re-render
       kế tiếp của Blazor sẽ patch nhầm chỗ, xoá mất các mục cấp 2 khác trong panel). */
    position: fixed;
    left: -99999px;
    top: -99999px;
    min-width: 210px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(14,27,23,.14);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(6px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
    max-height: calc(100vh - 84px);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1000;
}

    .cyber-hmenu-flyout::-webkit-scrollbar {
        width: 5px;
    }

    .cyber-hmenu-flyout::-webkit-scrollbar-thumb {
        background: var(--line);
        border-radius: 3px;
    }

    .cyber-hmenu-flyout.cyber-open {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }

.cyber-hmenu-subitem > .cyber-hmenu-link .cyber-hmenu-caret {
    transform: rotate(-90deg);
}

.cyber-topbar__right {
    margin-left: auto;
    position: relative;
    cursor: pointer;
    overflow: visible;
    /* white-space: nowrap; */
    /* text-overflow: ellipsis;*/
}

.cyber-user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    transition: .2s;
}

    .cyber-user:hover {
        background: #f3f4f6;
    }

.cyber-user-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 280px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
    overflow: hidden;
    z-index: 1000;
}

.cyber-user-menu-header {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 16px;
}

    .cyber-user-menu-header .avatar {
        font-size: 48px;
        color: #00b975;
    }

    .cyber-user-menu-header .name {
        font-weight: 600;
    }

    .cyber-user-menu-header .email {
        font-size: 13px;
        color: #6b7280;
    }

.cyber-user-menu-divider {
    height: 1px;
    background: #eee;
}

.cyber-bell-wrap {
    position: relative;
}

.cyber-bell-dot {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 0 0 rgba(255,153,10,.6);
    animation: pulse 2.2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255,153,10,.55);
    }

    70% {
        box-shadow: 0 0 0 7px rgba(255,153,10,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255,153,10,0);
    }
}

.cyber-topbar__divider {
    width: 1px;
    height: 26px;
    background: var(--line);
    margin: 0 6px;
}

.cyber-topbar__user {
    display: flex;
    align-items: center;
    gap: 6px;
    /*padding: 6px 8px 6px 6px;*/
    border-radius: 10px;
    transition: background .2s var(--ease);
    position: relative;
    cursor: pointer;
}

    .cyber-topbar__user:hover {
        background: var(--paper);
    }

    .cyber-topbar__user .cyber-user-mini {
        opacity: 1;
        width: auto;
    }

  /*      .cyber-topbar__user .cyber-user-mini strong {
            color: var(--ink);
        }

        .cyber-topbar__user .cyber-user-mini span {
            color: var(--ink-soft);
        }*/
    /* ============ ACCOUNT DROPDOWN (hover on cyber-topbar__user) ============ */
    .cyber-user-menu-caret {
        width: 12px;
        height: 12px;
        color: var(--ink-soft);
        margin-left: 1px;
        transition: transform .25s var(--ease), color .2s var(--ease);
        flex-shrink: 0;
    }

    .cyber-topbar__user:hover .cyber-user-menu-caret,
    .cyber-topbar__user.cyber-open .cyber-user-menu-caret {
        transform: rotate(180deg);
        color: var(--ink);
    }

    .cyber-user-menu-panel {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        width: 300px;
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 14px;
        box-shadow: 0 18px 40px rgba(14,27,23,.16);
        padding: 10px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
        z-index: 60;
        cursor: default;
    }

    .cyber-topbar__user:hover .cyber-user-menu-panel,
    .cyber-topbar__user.cyber-open .cyber-user-menu-panel {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .cyber-user-menu-head {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 6px 8px 12px;
    }

        .cyber-user-menu-head .cyber-user-avatar {
            width: 38px;
            height: 38px;
            font-size: 14px;
        }

        .cyber-user-menu-head strong {
            display: block;
            font-size: 13.5px;
            color: var(--ink);
        }

        .cyber-user-menu-head span {
            font-size: 11.5px;
            color: var(--ink-soft);
        }

    .cyber-user-menu-divider {
        height: 1px;
        background: var(--line);
        margin: 6px 4px;
    }

    .cyber-user-menu-item {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 9px 10px;
        border-radius: 9px;
        font-size: 13px;
        font-weight: 500;
        color: var(--ink);
        position: relative;
        transition: background .15s var(--ease), color .15s var(--ease);
    }

        .cyber-user-menu-item:hover {
            background: var(--paper);
        }

    .cyber-user-menu-icon {
        width: 17px;
        height: 17px;
        color: var(--ink-soft);
        flex-shrink: 0;
        display: flex;
    }

        .cyber-user-menu-icon svg {
            width: 100%;
            height: 100%;
        }

    .cyber-user-menu-label {
        flex: 1;
        text-align: left;
    }

    .cyber-user-menu-value {
        font-size: 12px;
        color: var(--ink-soft);
    }

    .cyber-user-menu-badge {
        font-size: 10.5px;
        font-weight: 700;
        background: var(--orange-tint);
        color: var(--orange);
        padding: 2px 8px;
        border-radius: 20px;
        flex-shrink: 0;
    }

    .cyber-user-menu-danger:hover {
        background: #FDECEC;
        color: #D6392B;
    }

    .cyber-user-menu-danger .cyber-user-menu-icon {
        color: inherit;
    }
    /* nested language flyout */
    .cyber-user-menu-lang {
        position: relative;
    }

    .cyber-user-menu-caret-right {
        width: 11px;
        height: 11px;
        color: var(--ink-soft);
        flex-shrink: 0;
        transition: transform .2s var(--ease);
    }

    .cyber-user-menu-lang:hover .cyber-user-menu-caret-right {
        transform: translateX(2px);
    }

    .cyber-user-menu-flyout {
        position: absolute;
        top: -8px;
        right: calc(100% + 8px);
        width: 156px;
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 12px;
        box-shadow: 0 18px 40px rgba(14,27,23,.14);
        padding: 6px;
        opacity: 0;
        visibility: hidden;
        transform: translateX(6px);
        transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
    }

    .cyber-user-menu-lang:hover .cyber-user-menu-flyout,
    .cyber-user-menu-lang.cyber-open .cyber-user-menu-flyout {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }

    .cyber-user-menu-link {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        border-radius: 8px;
        font-size: 12.5px;
        color: var(--ink);
    }

        .cyber-user-menu-link:hover {
            background: var(--green-tint);
            color: var(--green-dark);
        }

        .cyber-user-menu-link.cyber-active {
            color: var(--green-dark);
            font-weight: 700;
        }

            .cyber-user-menu-link.cyber-active::after {
                content: "✓";
                margin-left: auto;
                font-size: 11px;
            }
    /* content */
    .cyber-content {
        padding: 6px;
        /*max-width: 1400px;*/
        width: 100%;
        margin: 0 auto;
    }

    .cyber-fade-up {
        animation: fadeUp .5s var(--ease) both;
    }

    @keyframes fadeUp {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

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

    .cyber-page-head {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        margin-bottom: 22px;
        gap: 16px;
        flex-wrap: wrap;
    }

        .cyber-page-head h1 {
            font-size: 23px;
            font-weight: 800;
            margin: 0 0 4px;
        }

        .cyber-page-head p {
            margin: 0;
            color: var(--ink-soft);
            font-size: 13.5px;
        }

    .cyber-btn {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: 13px;
        font-weight: 600;
        padding: 10px 16px;
        border-radius: 9px;
        transition: transform .15s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
    }

        .cyber-btn svg {
            width: 15px;
            height: 15px;
        }

        .cyber-btn:active {
            transform: scale(.97);
        }

    .cyber-btn-primary {
        background: var(--green);
        color: #04140D;
        box-shadow: 0 6px 16px rgba(0,210,135,.3);
    }

        .cyber-btn-primary:hover {
            background: var(--green-dark);
        }

    .cyber-btn-ghost {
        background: var(--card);
        color: var(--ink);
        border: 1px solid var(--line);
    }

        .cyber-btn-ghost:hover {
            border-color: #cfd8d4;
        }
    /* KPI grid */
    .cyber-kpi-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        margin-bottom: 20px;
    }

    .cyber-kpi-card {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 18px 18px 16px;
        transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
    }

        .cyber-kpi-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 14px 28px rgba(14,27,23,.07);
            border-color: transparent;
        }

    .cyber-kpi-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
    }

    .cyber-kpi-label {
        font-size: 12.5px;
        color: var(--ink-soft);
        font-weight: 500;
    }

    .cyber-kpi-icon {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .cyber-kpi-icon svg {
            width: 15px;
            height: 15px;
        }

        .cyber-kpi-icon.cyber-green {
            background: var(--green-tint);
            color: var(--green-dark);
        }

        .cyber-kpi-icon.cyber-orange {
            background: var(--orange-tint);
            color: var(--orange);
        }

    .cyber-kpi-value {
        font-size: 24px;
        font-weight: 600;
        margin-bottom: 6px;
        letter-spacing: -.02em;
    }

    .cyber-kpi-trend {
        font-size: 12px;
        display: flex;
        align-items: center;
        gap: 5px;
    }

        .cyber-kpi-trend svg {
            width: 12px;
            height: 12px;
        }

    .cyber-trend-up {
        color: var(--green-dark);
    }

    .cyber-trend-warn {
        color: var(--orange);
    }

    .cyber-kpi-trend span.cyber-muted {
        color: var(--ink-soft);
        font-weight: 400;
    }
    /* main grid */
    .cyber-dash-grid {
        display: grid;
        grid-template-columns: 1.65fr 1fr;
        gap: 16px;
        align-items: start;
    }

    .cyber-card {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 20px 20px 18px;
    }

    .cyber-card-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
    }

        .cyber-card-head h3 {
            font-size: 15px;
            font-weight: 700;
            margin: 0;
        }

        .cyber-card-head a {
            font-size: 12.5px;
            color: var(--green-dark);
            font-weight: 600;
        }
    /* bar chart */
    .cyber-chart {
        display: flex;
        align-items: flex-end;
        gap: 14px;
        height: 170px;
        padding: 0 4px;
    }

    .cyber-chart-col {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        height: 100%;
        justify-content: flex-end;
    }

    .cyber-chart-bar {
        width: 100%;
        max-width: 34px;
        border-radius: 7px 7px 3px 3px;
        background: linear-gradient(180deg, var(--green) 0%, var(--green-dark) 100%);
        transition: filter .2s var(--ease), transform .2s var(--ease);
        transform-origin: bottom;
        animation: growBar .7s var(--ease) both;
    }

    @keyframes growBar {
        from {
            transform: scaleY(0);
        }

        to {
            transform: scaleY(1);
        }
    }

    .cyber-chart-col:nth-child(6) .cyber-chart-bar {
        background: linear-gradient(180deg, var(--orange) 0%, #d97e00 100%);
    }

    .cyber-chart-bar:hover {
        filter: brightness(1.08);
    }

    .cyber-chart-col span {
        font-size: 11px;
        color: var(--ink-soft);
    }
    /* table */
    table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
    }

    thead th {
        text-align: left;
        font-weight: 600;
        color: var(--ink-soft);
        font-size: 11.5px;
        text-transform: uppercase;
        letter-spacing: .03em;
        padding: 0 10px 10px;
        border-bottom: 1px solid var(--line);
    }

    tbody td {
        padding: 12px 10px;
        border-bottom: 1px solid var(--line);
    }

    tbody tr:last-child td {
        border-bottom: 1px solid var(--line);
    }

    tbody tr {
        transition: background .15s var(--ease);
    }

        tbody tr:hover {
            background: var(--paper);
        }

    .cyber-cust-cell {
        display: flex;
        align-items: center;
        gap: 9px;
        font-weight: 500;
    }

    .cyber-cust-dot {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--paper);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 700;
        color: var(--ink-soft);
        flex-shrink: 0;
    }

    .cyber-badge {
        font-size: 11.5px;
        font-weight: 600;
        padding: 3px 9px;
        border-radius: 20px;
        display: inline-block;
    }

    .cyber-badge-done {
        background: var(--green-tint);
        color: var(--green-dark);
    }

    .cyber-badge-progress {
        background: var(--orange-tint);
        color: var(--orange);
    }

    .cyber-badge-wait {
        background: #EEF1F0;
        color: var(--ink-soft);
    }
    /* right column */
    .cyber-stack {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .cyber-task-item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 9px 0;
        border-bottom: 1px solid var(--line);
    }

        .cyber-task-item:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

    .cyber-checkbox {
        width: 18px;
        height: 18px;
        border-radius: 6px;
        border: 1.5px solid #cfd8d4;
        flex-shrink: 0;
        margin-top: 1px;
        cursor: pointer;
        position: relative;
        transition: background .2s var(--ease), border-color .2s var(--ease);
    }

        .cyber-checkbox.cyber-checked {
            background: var(--green);
            border-color: var(--green);
        }

            .cyber-checkbox.cyber-checked::after {
                content: "";
                position: absolute;
                left: 5px;
                top: 1px;
                width: 4px;
                height: 9px;
                border: solid #04140D;
                border-width: 0 2px 2px 0;
                transform: rotate(45deg);
            }

    .cyber-task-text {
        font-size: 13px;
    }

        .cyber-task-text strong {
            display: block;
            font-weight: 500;
            margin-bottom: 2px;
        }

        .cyber-task-text span {
            font-size: 11.5px;
            color: var(--ink-soft);
        }

    .cyber-task-item.cyber-done .cyber-task-text strong {
        text-decoration: line-through;
        color: var(--ink-soft);
    }

    .cyber-notif-item {
        display: flex;
        gap: 10px;
        padding: 9px 0;
        border-bottom: 1px solid var(--line);
    }

        .cyber-notif-item:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

    .cyber-notif-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-top: 6px;
        flex-shrink: 0;
    }

        .cyber-notif-dot.cyber-green {
            background: var(--green);
        }

        .cyber-notif-dot.cyber-orange {
            background: var(--orange);
        }

    .cyber-notif-text p {
        margin: 0 0 2px;
        font-size: 13px;
    }

    .cyber-notif-text span {
        font-size: 11.5px;
        color: var(--ink-soft);
    }

    .cyber-quick-grid {
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap: 14px;
        margin-top: 20px;
    }

    .cyber-quick-card {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
    }

        .cyber-quick-card:hover {
            transform: translateY(-3px);
            border-color: transparent;
            box-shadow: 0 14px 28px rgba(14,27,23,.07);
        }

    .cyber-quick-icon {
        width: 34px;
        height: 34px;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .cyber-quick-icon svg {
            width: 16px;
            height: 16px;
        }

        .cyber-quick-icon.cyber-g {
            background: var(--green-tint);
            color: var(--green-dark);
        }

        .cyber-quick-icon.cyber-o {
            background: var(--orange-tint);
            color: var(--orange);
        }

    .cyber-quick-card strong {
        font-size: 13.5px;
    }

    .cyber-quick-card span {
        font-size: 12px;
        color: var(--ink-soft);
    }
    /* responsive */
    @media (max-width:1180px) {
        .cyber-kpi-grid {
            grid-template-columns: repeat(2,1fr);
        }

        .cyber-dash-grid {
            grid-template-columns: 1fr;
        }

        .cyber-quick-grid {
            grid-template-columns: repeat(2,1fr);
        }
    }

    @media (max-width:860px) {
        /* sidebar becomes an overlay drawer: hidden off-screen, no longer pushes content */
        .cyber-sidebar {
            transform: translateX(-100%);
            box-shadow: 0 0 40px rgba(0,0,0,.25);
            width: 272px !important;
        }

        .cyber-app.cyber-mobile-open .cyber-sidebar {
            transform: translateX(0);
        }

        .cyber-sidebar__resize-handle {
            display: none;
        }

        .cyber-main {
            margin-left: 0 !important;
        }

        .cyber-topbar {
            left: 0 !important;
        }

        .cyber-topbar__user {
            gap: 5px !important;
        }

        .cyber-user-avatar {
            width: 36px !important;
            height: 36px !important;
        }

        .cyber-user-account {
            font-size: 16px !important;
        }

        .cyber-user-customer {
            font-size: 11px !important;
        }

        .cyber-hmenu {
            display: none;
        }

        .cyber-topbar-content {
            gap: 0 !important;
        }

        .cyber-kpi-grid {
            grid-template-columns: 1fr 1fr;
        }

        .cyber-quick-grid {
            grid-template-columns: 1fr 1fr;
        }

        .cyber-content {
            padding: 20px 16px 50px;
        }
    }
    /* --------------------------------------------------------------------------------------------------------------------*/
    @font-face {
        font-family: 'Material Icons';
        font-style: normal;
        font-weight: 400;
        src: url('flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2') format('woff2');
    }

    .material-icons {
        font-family: 'Material Icons';
        font-weight: normal;
        font-style: normal;
        font-size: 24px;
        line-height: 1;
        letter-spacing: normal;
        text-transform: none;
        display: inline-block;
        white-space: nowrap;
        word-wrap: normal;
        direction: ltr;
        -webkit-font-feature-settings: 'liga';
        -webkit-font-smoothing: antialiased;
    }

    .filter-grid-layout {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .filter-grid-row {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        width: 100%;
    }

    .filter-grid-item {
        box-sizing: border-box;
    }

    @media (max-width: 640px) {
        .filter-grid-row {
            flex-wrap: wrap;
        }

            .filter-grid-row > .filter-grid-item {
                flex: 1 1 100% !important;
            }
    }
    /* Animation */
    .voucher-sidebar,
    .voucher-header,
    .voucher-item,
    .voucher-item-header,
    .voucher-body,
    .voucher-content {
        transition: all .25s ease;
    }
    /* ===========================MENU VOUCHER THU NHỎ=========================== */
    .voucher-layout.voucher-layout-zoom .voucher-sidebar {
        width: 68px;
        min-width: 68px;
        padding: 8px 4px;
    }
    /* Header khi thu nhỏ */
    .voucher-layout.voucher-layout-zoom .voucher-header {
        display: flex;
        margin-bottom: 10px;
    }
    /* Chỉ còn icon search */
    .voucher-layout.voucher-layout-zoom .cyber-input-group {
        width: 100%;
        justify-content: center !important;
        margin: 0 !important;
        flex-direction: column;
        border: none;
        background: transparent;
    }
    /* Khi thu nhỏ: ẩn search */
    .voucher-layout.voucher-layout-zoom .voucher-header .voucher-search {
        display: none;
    }
    /* Hiển thị riêng nút view_in_ar */
    .voucher-layout.voucher-layout-zoom .voucher-header .voucher-view-list {
        display: block;
    }

    .voucher-layout.voucher-layout-zoom .voucher-title {
        display: none;
    }

    .voucher-layout.voucher-layout-zoom .voucher-search {
        display: none;
    }
    /* Card */
    .voucher-layout.voucher-layout-zoom .voucher-item {
        padding: 8px 2px;
        justify-content: center;
        align-items: center;
    }

        .voucher-layout.voucher-layout-zoom .voucher-item.active::before {
            width: 3px;
        }
    /* Chỉ còn Stt_Rec */
    .voucher-layout.voucher-layout-zoom .voucher-item-header {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    /* Ẩn toàn bộ thông tin */
    .voucher-layout.voucher-layout-zoom .voucher-name,
    .voucher-layout.voucher-layout-zoom .voucher-body,
    .voucher-layout.voucher-layout-zoom .voucher-icon,
    .voucher-layout.voucher-layout-zoom .divider {
        display: none !important;
    }

    .voucher-layout.voucher-layout-zoom .voucher-item-header::before {
        content: attr(data-soct);
        display: block;
        writing-mode: vertical-rl;
        text-orientation: mixed;
        font-size: 11px;
        font-weight: 600;
        color: #475569;
        letter-spacing: .5px;
        white-space: nowrap;
        overflow: hidden;
    }

    .voucher-layout.voucher-layout-zoom .voucher-list {
        padding: 6px 0;
    }

    .voucher-layout.voucher-layout-zoom .cyber-dv-pager {
        display: none;
    }

    .voucher-layout.voucher-layout-zoom .cyber-dv-searchbar {
        display: none;
    }

    .voucher-layout.voucher-layout-zoom .cyber-input-group:focus-within {
        border: none;
        box-shadow: none;
    }

    .voucher-layout.voucher-layout-zoom .cyber-dv-group-tabs {
        display: none;
    }
    /* ====================================================== */

    .cyber-dv-list::-webkit-scrollbar {
        width: 5px;
    }

    .cyber-dv-list::-webkit-scrollbar-track {
        background: transparent;
    }

    .cyber-dv-list::-webkit-scrollbar-thumb {
        background: rgba(120, 120, 120, .3);
        border-radius: 10px;
    }

        .cyber-dv-list::-webkit-scrollbar-thumb:hover {
            background: rgba(90, 90, 90, .55);
        }

    .cyber-dv-list {
        /* Firefox không đọc ::-webkit-scrollbar - "thin" là mức mỏng nhất trình duyệt hỗ trợ, kết hợp
       màu rgba trong suốt để đỡ nổi bật giữa giao diện danh sách. */
        scrollbar-width: thin;
        scrollbar-color: rgba(120, 120, 120, .3) transparent;
    }
    /* ========================================
   CYBER IMAGE 
======================================== */
    .web-config__image-preview {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        background: linear-gradient(45deg, #f1f5f9 25%, transparent 25%), linear-gradient(-45deg, #f1f5f9 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f1f5f9 75%), linear-gradient(-45deg, transparent 75%, #f1f5f9 75%);
        background-size: 16px 16px;
        background-position: 0 0, 0 8px, 8px -8px, -8px 0;
        border: 1px solid #cbd5e1;
        border-radius: 10px;
        box-sizing: border-box;
    }
        /* Ảnh bên trong */

        .web-config__image-preview img {
            max-width: 95%;
            max-height: 125px;
            width: auto;
            height: auto;
            object-fit: contain;
            border-radius: 6px;
            box-shadow: 0 3px 12px rgba(15, 23, 42, 0.12);
        }
    /* Label phía trên ảnh */

    .web-config__image-label {
        position: absolute;
        top: 8px;
        left: 10px;
        z-index: 2;
        padding: 4px 8px;
        border-radius: 5px;
        background: rgba(15, 23, 42, 0.75);
        color: white;
        font-size: 11px;
        font-weight: 600;
        backdrop-filter: blur(4px);
    }
    /* Hover */

    .web-config__image-preview:hover {
        border-color: #00b975;
        box-shadow: 0 0 0 2px rgba(0, 185, 117, 0.08), 0 5px 15px rgba(15, 23, 42, 0.08);
    }
    /* ========================================
   IMAGE FIELD
======================================== */

    .web-config__image-field {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .web-config__image-title {
        display: flex;
        align-items: center;
        gap: 6px;
        color: #334155;
        font-size: 12px;
        font-weight: 600;
    }

        .web-config__image-title .material-icons {
            font-size: 16px;
            color: var(--brand-primary);
        }

    .cyber-rg-wrapper {
        border-radius: 8px !important;
    }
    /*.cyber-rg-table thead th {
    background-color: var(--brand-primary) !important;
    color: white !important;
}
*/
    /*.cyber-th-text {
    color: white !important;
}*/

    .cyber-content {
        background-color: var( --brand-primary-light);
        padding: 10px 0 !important;
        height: 100%;
    }

    .cyber-chart-caption-bar {
        grid-template-columns: auto !important;
    }

    .cyber-chart-title {
        font-size: 19px !important;
        font-weight: 600 !important;
        color: #1E262C !important;
        line-height: 1.4 !important;
    }

    .cyber-chart-legend-item {
        font-size: 14px !important;
    }

    .cyber-chart-pie-label {
        font-size: 12px !important;
    }

    @media (max-width: 768px) {
        .cyber-chart-title {
            font-size: 16px !important;
        }
    }

    .cyber-chart-caption-bar {
        display: block !important;
    }


/* ========================================
   QUOTE PAGE - CYBERSOFT ERP
======================================== */

.quote-page {
    max-width: 1500px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 24px;
    height: 100%;
    min-height: 0;
    color: #334155;
    box-sizing: border-box;
}

/* HEADER */

.quote-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #e5eaf1;
    border-radius: 6px;
}

.quote-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.quote-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 17px;
    font-weight: 700;
    color: var(--brand-primary, #123D77);
}

    .quote-title .material-icons {
        font-size: 21px;
    }

.quote-subtitle {
    padding-left: 30px;
    font-size: 12px;
    color: #8995a7;
}

.quote-save {
    width: 145px;
    flex-shrink: 0;
}

/* INFORMATION LAYOUT */

.quote-info-layout {
    display: grid;
    grid-template-columns: minmax(350px, 0.85fr) minmax(0, 1.7fr);
    align-items: stretch;
}

.quote-section {
    min-width: 0;
    padding: 12px 14px;
    background: #fff;
    border-radius: 6px;
    box-sizing: border-box;
}

/* SECTION TITLE */

.quote-section-title {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 34px;
    margin-bottom: 10px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 650;
    color: var(--brand-primary, #123D77);
    background: var(--brand-primary-light, #E7F0FF);
    border-left: 3px solid var(--brand-primary, #123D77);
    border-radius: 3px;
}

    .quote-section-title .material-icons {
        font-size: 18px;
        color: var(--brand-primary, #123D77);
    }

/* CUSTOMER */

.quote-customer,
.quote-document {
    overflow: hidden;
}

/* DETAIL GRID */

.quote-detail-section {
    flex: 1;
    min-height: 200px;
    overflow: hidden;
}

.quote-grid-container {
    width: 100%;
    min-width: 0;
    overflow: auto;
}

/* LOADING */

.quote-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 200px;
    color: #8995a7;
    font-size: 13px;
}

    .quote-loading .material-icons {
        color: var(--brand-primary);
    }

.quote-popup-grid {
    flex-direction: column;
    align-items: flex-start;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 16px;
}

.quote-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

    .quote-field label {
        font-size: 12px;
        font-weight: 600;
        color: #64748b;
    }

.quote-value {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 34px;
    padding: 0 10px;
    background: #f5f7fb;
    border: 1px solid #e5eaf1;
    border-radius: 3px;
    font-size: 13px;
    color: #334155;
}

/* TOTAL */

.quote-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 5px;
    background: var(--brand-primary-light, #E7F0FF);
    border: 1px solid #d7e5f8;
    border-radius: 4px;
    margin-top: auto;
}

    .quote-total span {
        font-size: 13px;
        font-weight: 600;
        color: #475569;
    }

    .quote-total strong {
        font-size: 17px;
        font-weight: 700;
        color: var(--brand-primary, #123D77);
    }

/* SAVE BUTTON */

.btn-save {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 90px;
    padding: 7px 16px;
    border: none;
    border-radius: 4px;
    background: var(--brand-primary, #123D77);
    color: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease;
}

    .btn-save:hover {
        background: var(--brand-primary-hover, #0F3465);
    }

    .btn-save .material-icons {
        font-size: 17px;
    }

/* RESPONSIVE */

@media (max-width: 1100px) {
    .quote-info-layout {
        grid-template-columns: 1fr;
    }
    .quote-popup-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .quote-page {
        padding: 10px;
        gap: 10px;
    }

    .quote-toolbar {
        padding: 10px;
    }

    .quote-section {
        padding: 10px;
    }

    .quote-save {
        width: 120px;
    }
    .quote-popup-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .cyber-topbar {
        padding: 0 15px;
    }
    .quote-toolbar {
        align-items: flex-start;
    }

    .quote-title {
        font-size: 15px;
    }

    .quote-subtitle {
        padding-left: 0;
    }

    .quote-popup-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .cyber-brand__name img {
        width: 135px;
        height: auto;
    }
    .cyber-user-mini {
        display: none;
    }
    .cyber-user-mini-icon {
        display: block;
    }
}

/* ========================================
   END QUOTE PAGE
======================================== */