﻿.load-more, .load-more-hot, .load-more-sale, .load-more-new {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    width: 180px;
    height: 52px;
    text-transform: uppercase;
    background-color: rgba(202, 86, 39, 1);
    color: rgba(255, 255, 255, 1);
    margin: 0 auto;
    border-radius: 30px;
    transition: all .3s ease-out;
}
    .load-more:hover, .load-more-hot:hover, .load-more-sale:hover, .load-more-new:hover {
        /*    background-color: var(--light-color);*/
        color: white;
    }
    .load-more.show-loader svg, .load-more-hot.show-loader svg, .load-more-sale.show-loader svg, .load-more-new.show-loader svg {
        display: none;
    }

    .load-more .loading, .load-more-hot .loading, .load-more-sale .loading, .load-more-new .loading {
        display: none;
        height: 32px;
        width: 32px;
        margin: 0 auto;
        animation: loader1 3s linear infinite;
    }

@keyframes loader1 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.load-more .loading span, .load-more-hot .loading span, .load-more-sale .loading span, .load-more-new .loading span {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 32px;
    width: 32px;
    clip: rect(16px, 32px, 32px, 0);
    animation: loader2 1.5s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

@keyframes loader2 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.load-more .loading span::before, .load-more-hot .loading span::before, .load-more-sale .loading span::before, .load-more-new .loading span::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 32px;
    height: 32px;
    border: 3px solid transparent;
    border-top: 3px solid rgba(202, 86, 39, 1);
    border-radius: 50%;
    animation: loader3 1.5s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

@keyframes loader3 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.load-more .loading span::after, .load-more-hot .loading span::after, .load-more-sale .loading span::after, .load-more-new .loading span::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 32px;
    height: 32px;
    border-top: 3px solid blue;
    border-radius: 50%;
}

.load-more.show-loader, .load-more-hot.show-loader, .load-more-sale.show-loader, .load-more-new.show-loader {
    width: 52px;
    background-color: white;
    text-indent: -9999px;
}

    .load-more.show-loader .loading, .load-more-hot.show-loader .loading, .load-more-sale.show-loader .loading, .load-more-new.show-loader .loading {
        display: block;
    }

.load-more.loaded, .load-more-hot.loaded, .load-more-sale.loaded, .load-more-new.loaded {
    visibility: hidden;
    opacity: 0;
    height: 0;
    transition: visibility .3s 3s, opacity .3s 3s, height .3s 3s;
    text-indent: -9999px;
}

/*List Course*/
.list-course .course-item:nth-child(12) ~ .course-item {
    display: none;
}
.list-course {
    display: block;
}

/*List Tool*/
.tool-section .list-tool .tool-item-all:nth-child(8) ~ .tool-item-all {
    display: none;
}
/*List Tool Hot*/
.tool-section .list-tool .tool-item-hot:nth-child(4) ~ .tool-item-hot {
    display: none;
}
/*List Tool Sale*/
.tool-section .list-tool .tool-item-sale:nth-child(4) ~ .tool-item-sale {
    display: none;
}
/*List Tool New*/
.tool-section .list-tool .tool-item-new:nth-child(4) ~ .tool-item-new {
    display: none;
}

.tool-section .list-tool {
    display: block;
}