/* ============================================================================
   loading_animation_1.css — Toàn bộ CSS liên quan trạng thái loading:
   overlay che khối, spinner trong nút, và preloader toàn trang (#preloader).
   ============================================================================ */

/* ---------- Overlay che khối (ShowOverlay/ShowOverlay3Dot trong utility_lib.js) ---------- */
.overlay-loading {
    display: flex;
    position: absolute;
    z-index: 9999;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    background-color: rgb(97 96 96 / 20%);
    top: 0px;
    bottom: 0px;
    left: 0px;
    border-radius: .25rem;
}

/* ---------- Overlay trong nút (ShowOverlayLoadingButton trong utility_lib.js) ---------- */
.overlay-loading-button {
    display: flex;
    position: absolute;
    inset: 0;
    z-index: 10;
    justify-content: center;
    align-items: center;
    background-color: inherit;
    border-radius: inherit;
}

/* ---------- Spinner vòng tròn (dùng cho .overlay-loading) ---------- */
.lds-ring {
    display: inline-block;
    position: relative;
    width: 60px;
    height: 60px;
}

    .lds-ring div {
        box-sizing: border-box;
        display: block;
        position: absolute;
        width: 40px;
        height: 40px;
        margin: 8px;
        border: 6px solid #fff;
        border-radius: 50%;
        animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        border-color: #fff transparent transparent transparent;
    }

        .lds-ring div:nth-child(1) { animation-delay: -0.45s; }
        .lds-ring div:nth-child(2) { animation-delay: -0.3s; }
        .lds-ring div:nth-child(3) { animation-delay: -0.15s; }

@keyframes lds-ring {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ---------- Spinner vòng đôi (dùng cho .overlay-loading-button) ---------- */
.lds-dual-ring {
    display: inline-block;
    width: 24px;
    height: 24px;
}

    .lds-dual-ring:after {
        content: " ";
        display: block;
        width: 18px;
        height: 18px;
        margin: 3px;
        border-radius: 50%;
        border: 3px solid #fff;
        border-color: var(--bs-theme) transparent var(--bs-theme) transparent;
        animation: lds-dual-ring 1.2s linear infinite;
    }

@keyframes lds-dual-ring {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ---------- Spinner 3 chấm (dùng cho ShowOverlay3Dot) ---------- */
.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

    .lds-ellipsis div {
        position: absolute;
        top: 33px;
        width: 13px;
        height: 13px;
        border-radius: 50%;
        background: #fff;
        animation-timing-function: cubic-bezier(0, 1, 1, 0);
    }

        .lds-ellipsis div:nth-child(1) { left: 8px; animation: lds-ellipsis1 0.6s infinite; }
        .lds-ellipsis div:nth-child(2) { left: 8px; animation: lds-ellipsis2 0.6s infinite; }
        .lds-ellipsis div:nth-child(3) { left: 32px; animation: lds-ellipsis2 0.6s infinite; }
        .lds-ellipsis div:nth-child(4) { left: 56px; animation: lds-ellipsis3 0.6s infinite; }

@keyframes lds-ellipsis1 {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

@keyframes lds-ellipsis3 {
    0% { transform: scale(1); }
    100% { transform: scale(0); }
}

@keyframes lds-ellipsis2 {
    0% { transform: translate(0, 0); }
    100% { transform: translate(24px, 0); }
}

/* ---------- Preloader toàn trang (_P_Loader.cshtml — #preloader/.ctn-preloader) ---------- */
#preloader {
    position: fixed;
    z-index: 10000;
    width: 100%;
    height: 100%;
    background: var(--bs-body-bg, #fff);
}

.ctn-preloader {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: none;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 9000000;
}

    .ctn-preloader .animation-preloader {
        position: absolute;
        z-index: 1000;
        background: #ffffffdb;
        padding: 12px;
        border-radius: 10px;
        border: 2px solid var(--bs-theme, #1B5FA8);
    }

        .ctn-preloader .animation-preloader .spinner {
            animation: spinner 0.5s infinite linear;
            border-radius: 50%;
            border: 7px solid var(--bs-theme);
            border-top-color: var(--brand-700, #0E3763);
            height: 4em;
            margin: 0 auto 1.5em auto;
            width: 4em;
        }

        .ctn-preloader .animation-preloader .txt-loading {
            font: bold 5em "Poppins", sans-serif;
            text-align: center;
            user-select: none;
        }

            .ctn-preloader .animation-preloader .txt-loading .letters-loading {
                color: rgba(0,0,0,0.2);
                position: relative;
            }

                .ctn-preloader .animation-preloader .txt-loading .letters-loading:before {
                    animation: letters-loading 4s infinite;
                    color: var(--brand-700, #0E3763);
                    content: attr(data-text-preloader);
                    left: 0;
                    opacity: 0;
                    font-family: "Poppins", sans-serif;
                    position: absolute;
                    top: -3px;
                    transform: rotateY(-90deg);
                }

                .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(2):before { animation-delay: 0.2s; }
                .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(3):before { animation-delay: 0.4s; }
                .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(4):before { animation-delay: 0.6s; }
                .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(5):before { animation-delay: 0.8s; }
                .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(6):before { animation-delay: 1s; }
                .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(7):before { animation-delay: 1.2s; }
                .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(8):before { animation-delay: 1.4s; }

    .ctn-preloader .loader-preloader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        font-size: 0;
        z-index: 1;
        pointer-events: none;
    }

        .ctn-preloader .loader-preloader .row-item-col {
            height: 100%;
        }

        .ctn-preloader .loader-preloader .loader-section {
            padding: 0;
        }

            .ctn-preloader .loader-preloader .loader-section .bg {
                background-color: #ffffff;
                height: 100%;
                left: 0;
                width: 100%;
                transition: all 800ms cubic-bezier(0.77,0,0.175,1);
            }

    .ctn-preloader.loaded .animation-preloader {
        opacity: 0;
        transition: 0.3s ease-out;
    }

    .ctn-preloader.loaded .loader-section .bg {
        width: 0;
        transition: 0.7s 0.3s cubic-bezier(0.1,0.1,0.1,1);
    }

@keyframes spinner {
    to { transform: rotateZ(360deg); }
}

@keyframes letters-loading {
    0%, 75%, 100% { opacity: 0; transform: rotateY(-90deg); }
    25%, 50% { opacity: 1; transform: rotateY(0deg); }
}