/* ============================================
   CSS Override cho loading icon - Load SAU zk.wcs
   Đảm bảo override CSS từ ZK JAR
   Chỉ chứa phần loading icon từ norm.css.dsp
   ============================================ */

/* Override để loại bỏ GIF và áp dụng CSS animation
   CHỈ áp dụng cho loading icon trong loading indicator container */
.z-loading-indicator .z-apply-loading-icon,
.z-loading-indicator .z-loading-icon,
.z-apply-loading-indicator .z-apply-loading-icon,
.z-apply-loading-indicator .z-loading-icon {
    /* Loại bỏ HOÀN TOÀN background-image GIF */
    background-image: none !important;
    background: none !important;

    /* Reset tất cả thuộc tính từ định nghĩa cũ */
    height: 28px !important;
    width: 28px !important;

    /* CSS Animation - quay mịn hơn
       QUAN TRỌNG: KHÔNG dùng !important cho transform để animation hoạt động */
    animation: 3s ease-in-out 0s normal none infinite running plus-loader-background !important;
    background-color: #00a8ff !important;
    border-radius: 14px !important;
    display: inline-block !important;
    overflow: hidden !important;
    position: relative !important;
    text-indent: -9999px !important;
    /* Transform sẽ được điều khiển bởi animation, không cố định */
    transform-origin: 50% 50% 0 !important;
    margin-right: 5px !important;
    vertical-align: middle !important;
}

/* Pseudo-element :AFTER cho phần trên của loading icon */
.z-loading-indicator .z-apply-loading-icon:AFTER,
.z-loading-indicator .z-loading-icon:AFTER,
.z-apply-loading-indicator .z-apply-loading-icon:AFTER,
.z-apply-loading-indicator .z-loading-icon:AFTER {
    animation: 3s linear 0s normal none infinite running plus-loader-top !important;
    background: #00a8ff none repeat scroll 0 0 !important;
    border-radius: 14px 0 0 14px !important;
    content: "" !important;
    height: 100% !important;
    position: absolute !important;
    right: 50% !important;
    top: 0 !important;
    transform-origin: 100% 50% 0 !important;
    width: 50% !important;
}

/* Pseudo-element :BEFORE cho phần dưới của loading icon */
.z-loading-indicator .z-apply-loading-icon:BEFORE,
.z-loading-indicator .z-loading-icon:BEFORE,
.z-apply-loading-indicator .z-apply-loading-icon:BEFORE,
.z-apply-loading-indicator .z-loading-icon:BEFORE {
    animation: 3s linear 0s normal none infinite running plus-loader-bottom !important;
    background: #ff9800 none repeat scroll 0 0 !important;
    border-radius: 14px 0 0 14px !important;
    content: "" !important;
    height: 100% !important;
    position: absolute !important;
    right: 50% !important;
    top: 0 !important;
    transform-origin: 100% 50% 0 !important;
    width: 50% !important;
}

/* Keyframes - Animation quay mịn hơn với gradient xanh cam */
@keyframes plus-loader-top {
    0% {
        background: #00a8ff none repeat scroll 0 0; /* Xanh dương */
        transform: rotateY(0deg);
    }
    12.5% {
        background: #00d4aa none repeat scroll 0 0; /* Xanh lá */
        transform: rotateY(90deg);
    }
    25% {
        background: #ff9800 none repeat scroll 0 0; /* Cam */
        transform: rotateY(180deg);
    }
    37.5% {
        background: #ff6b35 none repeat scroll 0 0; /* Cam đỏ */
        transform: rotateY(90deg);
    }
    50% {
        background: #ffc107 none repeat scroll 0 0; /* Cam vàng */
        transform: rotateY(0deg);
    }
    62.5% {
        background: #ff9800 none repeat scroll 0 0; /* Cam */
        transform: rotateY(90deg);
    }
    75% {
        background: #00d4aa none repeat scroll 0 0; /* Xanh lá */
        transform: rotateY(180deg);
    }
    87.5% {
        background: #00a8ff none repeat scroll 0 0; /* Xanh dương */
        transform: rotateY(90deg);
    }
    100% {
        background: #00a8ff none repeat scroll 0 0; /* Xanh dương */
        transform: rotateY(0deg);
    }
}

@keyframes plus-loader-bottom {
    0% {
        background: #ff9800 none repeat scroll 0 0; /* Cam */
    }
    50% {
        background: #ff9800 none repeat scroll 0 0; /* Cam */
    }
    75% {
        background: #00a8ff none repeat scroll 0 0; /* Xanh dương */
    }
    100% {
        background: #00a8ff none repeat scroll 0 0; /* Xanh dương */
    }
}

@keyframes plus-loader-background {
    0% {
        background: #00a8ff none repeat scroll 0 0; /* Xanh dương */
        transform: rotateZ(0deg);
    }
    25% {
        background: #00a8ff none repeat scroll 0 0; /* Xanh dương */
        transform: rotateZ(90deg);
    }
    50% {
        background: #ff9800 none repeat scroll 0 0; /* Cam */
        transform: rotateZ(180deg);
    }
    75% {
        background: #ff9800 none repeat scroll 0 0; /* Cam */
        transform: rotateZ(270deg);
    }
    100% {
        background: #00a8ff none repeat scroll 0 0; /* Xanh dương */
        transform: rotateZ(360deg);
    }
}