@media (max-width: 767px) {
    .header-search-wrap-bds {
        flex: 1;
        width: auto;
        min-width: 0;
    }
}

/***
    Customer layout Mobile App
*/
@media only screen and (max-width: 600px) {

    .save-stock {
        margin-left: 40%;
        margin-top: 8px;
        margin-bottom: 8px;
    }
}


.views {
    margin-left: 20px;
}

.views-sub {
    margin-left: 10px;
}

/***
    BACK TO TOP
*/
#to-top {
    position: fixed;
    z-index: 9999;
    right: 20px;
    bottom: 20px;
    cursor: pointer;
    padding: 10px 15px;
    background: #00bfff;
    font-weight: bold;
    color: #ffffff;
    size: 20px;
    display: none;
    opacity: 0.8;
}



/***
    PAGING
*/
.paging > a {
    text-decoration: none;
    display: inline-block;
    padding: 8px 16px;
}

    .paging > a:hover {
        background-color: #ddd;
        color: black;
    }

.previous {
    background-color: #f1f1f1;
    color: black;
}

.next {
    background-color: #4CAF50;
    color: white;
}

.round {
    border-radius: 50%;
}

.paging {
    text-align: center;
}

.currentPage {
    background-color: #e3f3a3;
    color: black;
}

/***********************************/


.img-logo-footer {
    margin-left: 100px;
    margin-top: -30px;
    width: 60%;
}

header .logo img {
    height: 40px;
    width: 80px;
    margin-top: -10px;
}

.top-news {
    margin-top: 40px;
}

.resource-news {
    font-style: italic;
    text-align: right;
}

img.img-detail {
    max-height: 390px;
}


/***
    CSS DETAIL BOX 
*/
#box {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin: 10px;
}

.gradient-border {
    --borderWidth: 3px;
    background: white;
    position: relative;
    border-radius: var(--borderWidth);
}

    .gradient-border:after {
        content: '';
        position: absolute;
        top: calc(-1 * var(--borderWidth));
        left: calc(-1 * var(--borderWidth));
        height: calc(100% + var(--borderWidth) * 2);
        width: calc(100% + var(--borderWidth) * 2);
        background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
        border-radius: calc(2 * var(--borderWidth));
        z-index: -1;
        animation: animatedgradient 3s ease alternate infinite;
        background-size: 300% 300%;
    }


@keyframes animatedgradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.title-detail {
    font-weight: bold;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hot-sale {
    width: 200px;
    position: absolute;
    left: 0;
    top: -45px;
}

.view-now {
    width: 170px;
    position: absolute;
    right: 0;
}

.hot-sale-right {
    width: 100px;
    position: absolute;
    left: 0;
    top: -20px;
}

.view-now-right {
    width: 100px;
    position: absolute;
    right: 0;
    bottom: 0;
}
/**
    END 
*/