/* Sản Phẩm */
.wrap-product {
    padding: 50px 0 3px 0;
    background: url(../images/nensp.jpg) no-repeat left bottom;
    position: relative;
}

    .wrap-product:before {
        position: absolute;
        left: 0;
        top: -145px;
        content: '';
        width: 123px;
        height: 168px;
        background: url(../images/nensp0.png) no-repeat left top;
        z-index: 2;
    }

    .wrap-product:after {
        position: absolute;
        right: 0;
        top: -51px;
        content: '';
        width: 88px;
        height: 335px;
        background: url(../images/nensp1.png) no-repeat left top;
        z-index: 2;
    }

.cap1 {
    width: 226px;
}

.tieudecap1 {
    display: block;
    text-align: center;
    color: var(--vifa-text-color);
    font-family: 'BeauLuloClean-OneBold';
    font-size: 30px;
    width: 100%;
    padding-bottom: 7px;
    background: url(../images/gachsp.png) no-repeat bottom center;
    line-height: 1.4;
    margin-bottom: 30px;
}

.clicksp {
    display: block;
    width: 226px;
    max-width: 100%;
    padding-right: 27px;
    position: relative;
    height: 45px;
    line-height: 45px;
    margin-bottom: 20px;
    cursor: pointer;
    filter: drop-shadow(4px 4px 0 rgba(24,93,117,0.2));
}

    .clicksp:before {
        position: absolute;
        content: '';
        right: 0;
        top: 0;
        width: 28px;
        height: 100%;
        background: url(../images/dm1.png) no-repeat center center;
    }

    .clicksp span {
        display: block;
        width: 100%;
        color: #fff;
        background: #185d75;
        border-radius: 5px 0 0 5px;
        font-family: 'BeauLuloClean-OneBold';
        padding: 0 10px 0 19px;
    }

    .clicksp:hover span, .clicksp.active span {
        color: var(--vifa-primary-color);
    }

    .clicksp:hover {
        transform: scale(1.05);
    }

.showsp {
    width: calc(100% - 278px);
    padding-top: 16px;
}

    .showsp .pagination-ajax {
        margin-bottom: 30px;
    }

.grid-page {
    width: calc(100% + 20px);
    margin: 0 -10px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
}

.product {
    display: block;
    width: calc(100%/3 - 20px);
    margin: 0 10px 30px 10px;
    position: relative;
    border: 1px solid #bd9675;
    padding: 10px;
    border-radius: 5px;
}

.grid-page1 .product {
    width: calc(100%/3 - 20px);
}

.box-product {
    position: relative;
    display: block;
}

.pic-product {
    height: 230px;
    background: #fff;
    margin-bottom: 13px;
    border-radius: 5px;
}

    .pic-product img {
        width: 100%;
        border-radius: 5px;
    }

.name-product {
    font-weight: normal;
    margin: 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
}

    .name-product a {
        font-size: 15px;
        color: #372c22;
        line-height: 25px;
        text-transform: uppercase;
        margin-bottom: 4px;
        font-family: 'Montserrat',sans-serif;
        font-weight: 600;
    }

        .name-product a:hover {
            color: var(--vifa-primary-color);
        }

    .name-product .text-split {
        -webkit-line-clamp: 2;
    }

.price-product {
    margin-bottom: 0px;
    font-size: 16px;
    line-height: 21px;
    display: flex;
    justify-content: space-between;
    font-family: 'Montserrat',sans-serif;
}

    .price-product span {
        display: inline-block;
    }

.price-new {
    color: #c6a07a;
}

.price-old {
    padding-left: 10px;
    color: var(--vifa-text-color);
    font-weight: 600;
}

.price-per {
    position: absolute;
    top: 15px;
    right: 15px;
    color: #fff;
    background: var(--color-red);
    font-size: 14px;
    border-radius: 2px;
    width: 45px;
    height: 25px;
    text-align: center;
    line-height: 25px;
}

.cart-product {
    margin: 13px 0 0 0px;
}

    .cart-product a {
        cursor: pointer;
        width: calc(50% - 5px);
        float: left;
        text-transform: uppercase;
        text-align: center;
        font-size: 14px;
        padding: 5px 5px;
        max-width: 124px;
        line-height: 1.4;
        border-radius: 3px;
    }

    .cart-product .themsp {
        margin-left: 10px;
    }

    .cart-product a span {
        position: relative;
        z-index: 2;
        -webkit-transition: color 0.45s cubic-bezier(0.785,0.135,0.15,0.86),border 0.45s cubic-bezier(0.785,0.135,0.15,0.86);
        transition: color 0.45s cubic-bezier(0.785,0.135,0.15,0.86),border 0.45s cubic-bezier(0.785,0.135,0.15,0.86);
    }

.hove {
    position: relative;
    border: 1px solid var(--vifa-primary-color)
}

    .hove span {
        color: #fff;
    }

    .hove:hover span {
        color: var(--vifa-primary-color);
    }

    .hove:before {
        position: absolute;
        display: block;
        background: var(--vifa-primary-color);
        content: '';
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        -webkit-transform: scale(1,1);
        transform: scale(1,1);
        -webkit-transform-origin: left center;
        transform-origin: left center;
        -webkit-transition: -webkit-transform 0.45s cubic-bezier(0.785,0.135,0.15,0.86);
        transition: -webkit-transform 0.45s cubic-bezier(0.785,0.135,0.15,0.86);
        transition: transform 0.45s cubic-bezier(0.785,0.135,0.15,0.86);
    }

    .hove:hover:before {
        -webkit-transform-origin: right center;
        transform-origin: right center;
        -webkit-transform: scale(0,1);
        transform: scale(0,1);
    }

.hove1 {
    position: relative;
    border: 1px solid var(--vifa-primary-color);
}

    .hove1 span {
        color: var(--vifa-primary-color);
    }

    .hove1:hover span {
        color: #fff;
    }

    .hove1:before {
        position: absolute;
        display: block;
        background: var(--vifa-primary-color);
        content: '';
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        -webkit-transform: scale(0,1);
        transform: scale(0,1);
        -webkit-transform-origin: right center;
        transform-origin: right center;
        -webkit-transition: -webkit-transform 0.45s cubic-bezier(0.785,0.135,0.15,0.86);
        transition: -webkit-transform 0.45s cubic-bezier(0.785,0.135,0.15,0.86);
        transition: transform 0.45s cubic-bezier(0.785,0.135,0.15,0.86);
    }

    .hove1:hover:before {
        -webkit-transform-origin: left center;
        transform-origin: left center;
        -webkit-transform: scale(1,1);
        transform: scale(1,1);
    }


/* Sản Phẩm Detail */
.grid-pro-detail {
    margin-bottom: 50px;
}

.left-pro-detail {
    position: relative;
    float: left;
    width: calc(50% - 10px);
    text-align: center;
    background: white;
}

    .left-pro-detail .MagicZoom {
        border: 1px solid #eee;
        padding: 7px;
        border-radius: 5px;
    }

.right-pro-detail {
    width: calc(50% - 20px);
    float: right;
    font-family: 'Roboto',sans-serif;
}

.gallery-thumb-pro {
    position: relative;
    margin-top: 10px;
}

.owl-thumb-pro {
    padding: 0px;
}

.thumb-pro-detail {
    display: block !important;
    border: 1px solid #eee;
    padding: 5px;
    border-radius: 3px;
    cursor: pointer;
}

    .thumb-pro-detail.mz-thumb.mz-thumb-selected {
        border-color: #cecfd2;
    }

    .thumb-pro-detail img {
        box-shadow: none !important;
        filter: brightness(100%) !important;
        border-bottom: 0px !important;
        padding-bottom: 0px !important;
    }

.title-pro-detail {
    text-transform: capitalize;
    font-size: 20px;
    display: block;
    font-weight: 700;
    margin: 0;
    padding: 10px 0;
}

.social-plugin-pro-detail {
    margin-bottom: 1rem;
    margin-top: 0px !important;
}

.desc-pro-detail {
    margin-bottom: 1rem;
}

.attr-pro-detail {
    list-style: none;
    padding: 0px;
}

    .attr-pro-detail li {
        margin-bottom: 0.5rem;
    }

.attr-label-pro-detail {
    margin: 0px 5px 0px 0px;
}

    .attr-label-pro-detail.d-block {
        display: block;
        margin: 0px 0px 5px 0px;
    }

.attr-content-pro-detail {
    display: inline-block;
    margin-bottom: 0px;
}

.price-new-pro-detail {
    font-weight: 700;
    font-size: 20px;
    color: var(--color-red);
}

.price-old-pro-detail {
    font-weight: 500;
    color: var(--color-gray);
    text-decoration: line-through;
    padding-left: 10px;
}

.size-pro-detail, .color-pro-detail {
    border: 1px solid #ccc;
    padding: 3px 10px 4px 10px;
    display: inline-block;
    position: relative;
}

    .size-pro-detail.active, .color-pro-detail.active {
        border-color: #e5101d;
        color: #e5101d;
    }

        .color-pro-detail.active:before, .size-pro-detail.active:before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
            bottom: 0px;
            right: 0px;
            margin: auto;
            z-index: 1;
            background-image: url(../images/check-cart.png);
            background-repeat: no-repeat;
            background-position: bottom right;
        }

    .color-pro-detail input[type=radio], .size-pro-detail input[type=radio] {
        outline: none;
        position: absolute;
        cursor: pointer;
        width: 100%;
        height: 100%;
        -webkit-appearance: none;
        border: 0px;
        top: 0px;
        left: 0px;
    }

.quantity-pro-detail {
    width: 100%;
    max-width: 110px;
    line-height: normal;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
}

    .quantity-pro-detail span {
        line-height: 25px;
        padding: 0px;
        width: 30px;
        height: 30px;
        color: #5f5f5f;
        cursor: pointer;
        font-size: 22px;
        border: 1px solid #cccccc;
    }

        .quantity-pro-detail span.quantity-plus-pro-detail {
            border-left: 0px;
        }

        .quantity-pro-detail span.quantity-minus-pro-detail {
            border-right: 0px;
        }

    .quantity-pro-detail input {
        height: 30px;
        border: 1px solid #cccccc;
        width: calc(100% - 60px);
        text-align: center;
        font-size: 14px;
        padding: 5px;
    }

.sosanpham {
    padding-left: 10px;
    line-height: 30px;
    display: block;
}

.cart-pro-detail {
    margin-bottom: 1rem;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
}

    .cart-pro-detail a {
        width: auto;
        text-align: center;
        color: #fff;
        padding: 8px 15px;
        text-transform: uppercase;
        border-radius: 3px;
        cursor: pointer;
    }

        .cart-pro-detail a.addnow {
            margin-right: 10px;
            background: #fd6e1d;
            background: -webkit-gradient(linear,0% 0%,0% 100%,from(#fd6e1d),to(#f59000));
            background: -webkit-linear-gradient(top,#f59000,#fd6e1d);
            background: -moz-linear-gradient(top,#f59000,#fd6e1d);
            background: -ms-linear-gradient(top,#f59000,#fd6e1d);
            background: -o-linear-gradient(top,#f59000,#fd6e1d);
        }

        .cart-pro-detail a.buynow {
            background-color: var(--color-green);
        }

            .cart-pro-detail a.buynow:hover {
                background-color: var(--color-dark-green);
            }

        .cart-pro-detail a i {
            vertical-align: top;
            margin-top: 3px;
            margin-right: 8px;
        }

.tags-pro-detail, .tabs-pro-detail {
    margin: 1rem 0px 2rem 0px;
}

    .tags-pro-detail a {
        float: left;
        font-size: 12px;
        color: #fff;
        padding: 5px 10px 7px 10px;
        margin-right: 5px;
        margin-bottom: 5px;
        background-color: var(--color-red);
        border-radius: 3px;
    }

        .tags-pro-detail a:hover {
            background-color: var(--color-medium-red);
        }

        .tags-pro-detail a i {
            font-size: 10px;
            float: left;
            margin: 5px 5px 0px 0px;
        }

    .tabs-pro-detail .ul-tabs-pro-detail {
        padding: 0px;
        list-style: none;
        margin-bottom: 1rem;
        border-bottom: 1px solid #e7e7e7;
    }

        .tabs-pro-detail .ul-tabs-pro-detail li {
            cursor: pointer;
            float: left;
            margin-right: 5px;
            margin-bottom: 5px;
            background: #eee;
            padding: 5px 10px;
        }

            .tabs-pro-detail .ul-tabs-pro-detail li.active {
                background: var(--vifa-text-color);
                color: #fafafa;
            }

            .tabs-pro-detail .ul-tabs-pro-detail li:last-child {
                margin-right: 0px;
            }

    .tabs-pro-detail .content-tabs-pro-detail {
        display: none;
    }

        .tabs-pro-detail .content-tabs-pro-detail.active {
            display: block;
        }


@-moz-keyframes blink {
    0% {
        opacity: 1.0;
    }

    50% {
        opacity: 0.0;
    }

    100% {
        opacity: 1.0;
    }
}

@-webkit-keyframes blink {
    0% {
        opacity: 1.0;
    }

    50% {
        opacity: 0.0;
    }

    100% {
        opacity: 1.0;
    }
}

@keyframes blink {
    0% {
        opacity: 1.0;
    }

    50% {
        opacity: 0.0;
    }

    100% {
        opacity: 1.0;
    }
}

.hieuung {
    position: relative;
    overflow: hidden;
    opacity: 1;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s
}

    .hieuung img {
    }

    .hieuung:after {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255,255,255,0.5);
        content: '';
        -webkit-transition: -webkit-transform 0.6s;
        transition: transform 0.6s;
        -webkit-transform: scale3d(2.2,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
        transform: scale3d(2.2,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0)
    }

    .hieuung:hover:after {
        webkit-transform: scale3d(2.2,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
        transform: scale3d(2.2,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0)
    }

    .hieuung:hover {
        opacity: 1
    }

/* Icon Order online */
@keyframes h-alo-ring-ring {
    0% {
        transform: rotate(0deg) scale(1) skew(1deg)
    }

    10% {
        transform: rotate(-25deg) scale(1) skew(1deg)
    }

    20% {
        transform: rotate(25deg) scale(1) skew(1deg)
    }

    30% {
        transform: rotate(-25deg) scale(1) skew(1deg)
    }

    40% {
        transform: rotate(25deg) scale(1) skew(1deg)
    }

    50% {
        transform: rotate(0deg) scale(1) skew(1deg)
    }

    100% {
        transform: rotate(0deg) scale(1) skew(1deg)
    }
}

/* Responsive */
@media(max-width:850px) {
    .wrap-product {
        padding: 20px 0 10px 0;
        background: none;
    }

    .product, .grid-page1 .product, .album {
        width: calc(100%/2 - 10px);
        margin: 0 5px 10px 5px;
    }

}


@media(max-width:480px) {
    .pic-product {
        margin-bottom: 8px;
    }

    .name-product a {
        font-size: 13px;
        line-height: 20px;
    }

    .price-product {
        font-size: 14px;
    }

    .cart-product a {
        line-height: 1.3;
        font-size: 12px;
        max-width: 100%;
    }

    .cart-product {
        margin-top: 5px;
    }

}

@media(max-width:369px) {
    .name-product a {
        font-size: 13px;
    }

    .price-product {
        font-size: 12px;
    }

    .cart-product a {
        font-size: 10px;
        width: 100%;
        margin: auto !important;
        margin-bottom: 3px !important;
    }

    .cart-pro-detail {
        flex-wrap: wrap;
    }
}