.bao-hanh-24 {
    background: #1191f8;
    position: absolute;
    bottom: 0;
    padding: 2px 11px;
    font-weight: bold;
    font-size: 12px;
    display: block;
    right: 0px;
    display: inline-block !important;
    width: 74px
}

.tra-gop {
    background: #f28902;
    position: absolute;
    bottom: 0;
    padding: 2px 11px;
    font-weight: bold;
    font-size: 12px;
    display: block;
    right: 0px;
    display: inline-block !important;
    width: 74px
}

.doi-1 {
    position: absolute;
    width: 44px;
    height: 44px;
    right: 0px;
    text-align: center;
    top: 0px;
    content: '';
    background: #ff0000bd;
    border-radius: 50% !important;
    color: #FFF;
    font-size: 10.2px;
    line-height: 12px;
    padding-top: 9px !important;
    box-sizing: border-box;
    letter-spacing: -0.8px;
    font-weight: 600;
    word-spacing: -0.8px;
    right: 0px;
    float: right
}

.gia-soc {
    color: #fff;
    background: red;
    position: absolute;
    bottom: 0;
    padding: 2px 11px;
    font-weight: bold;
    font-size: 12px;
    display: block;
    right: 0px;
    display: inline-block !important;
    width: 45px
}

.item_special_t {
    background-image: linear-gradient(to right, #27a846, #4ba149ba);
    background-size: cover
}

#link-phu-kien {
    color: black
}

#addName-phu-kien {
    color: var(--main-color)
}

.gift {
    font-size: 12px;
    color: #777777;
    margin-bottom: 6px;
    margin-top: 15px
}

.style_types {
    display: inline-block;
    border-radius: 4px;
    padding: 2px;
    font-size: 11px;
    color: #fff;
    font-weight: bold;
    float: left
}

.item:nth-child(4), .item:nth-child(8) {
    border-right: none
}

.item_often .style_types {
    display: inline-block;
    border-radius: 4px;
    padding: 2px;
    font-size: 11px;
    color: #fff;
    font-weight: bold;
    position: absolute;
    bottom: 0px;
    left: 0px
}

.product_grid {
    border-left: 1px solid #e7e7e7;
    display: flex;
    flex-flow: row wrap
}

.product_grid .product_grid_inner {
    display: flex;
    flex-flow: row wrap;
    width: 100%
}

.product_grid_home {
    border-left: 0.5px solid #fff !important;
    z-index: 2
}

.product_grid .row_inner {
    display: flex;
    flex-flow: row wrap
}

.product_grid .item {
    float: left;
    width: 20%;
    box-sizing: border-box;
    padding-top: 20px;
    padding-bottom: 15px;
    position: relative;
    overflow: hidden;
    border-right: 1px solid #E7E7E7;
    border-bottom: 1px solid #E7E7E7
}

.product_grid_home .item:nth-child(4n) {
    border-right: none
}

@media only screen and (max-width: 1200px) {
    .product_grid_home .item:nth-child(4n) {
        border-right: 1px solid #E7E7E7
    }
}

#cat_item_store_phu-kien .product_grid .item:nth-child(4n) {
    border-right: 1px solid #E7E7E7
}

#cat_item_store_phu-kien .product_grid .item:nth-child(5n) {
    border-right: none
}

@media only screen and (max-width: 1200px) {
    #cat_item_store_phu-kien .product_grid .item:nth-child(5n) {
        border-right: 1px solid #E7E7E7
    }
}

.product_grid .item:before {
    width: 0
}

.product_grid .item:before {
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
    width: 0;
    height: 4px;
    content: '';
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease
}

.product_grid::after {
    clear: both;
    content: ' ';
    display: block
}

.product_grid .item .frame_inner {
    padding: 0px 17px 0px;
    position: relative
}

.product_grid .item .product_image {
    text-align: center;
    overflow: hidden;
    margin-bottom: 16px;
    /*min-height: 186px;*/
    position: relative
}

@media screen and (max-width: 400px) {
    .product_grid .item .product_image {
        min-height: 150px
    }
}

.product_grid .item .product_image a {
    display: block;
    position: relative
}

.product_grid .item .product_image a .doi-1 {
    position: absolute;
    width: 39px;
    height: 39px;
    top: 3px;
    content: '';
    background: #ff0000bd;
    border-radius: 50%;
    color: #FFF;
    font-size: 10.2px;
    line-height: 12px;
    padding-top: 5px;
    box-sizing: border-box;
    letter-spacing: -0.8px;
    font-weight: 600;
    word-spacing: -0.8px;
    left: 6px
}

.product_grid .item .product_image a .gia-soc {
    color: #fff;
    background: red;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 2px 9px;
    font-weight: bold;
    font-size: 12px;
    display: block
}

.product_grid .item .product_image a .bao-hanh-24 {
    color: #FFF;
    width: 72px;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 2px 11px;
    font-weight: bold;
    font-size: 12px;
    display: block
}

.product_grid .item .product_image a .tra-gop {
    width: 68px;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 2px 11px;
    font-weight: bold;
    font-size: 12px;
    display: block
}

.product_grid .item .product_image img {
    transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
    height: 130px
}

.product_grid .item .summary {
    opacity: 0;
    width: 100%;
    position: relative;
    position: absolute;
    height: 120%;
    top: 0px;
    left: 0px;
    color: #000;
    overflow: hidden;
    text-align: left;
    z-index: 99;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    box-sizing: border-box;
    font-size: 13px;
    font-weight: normal;
    line-height: 24px
}

.product_grid .item .summary p {
    line-height: 20px;
    margin-bottom: 6px
}

.product_grid .item .summary_inner a {
    color: #333;
    text-decoration: none
}

.frame_inner > h2 {
    margin-bottom: 8px;
    margin-top: 0px;
    overflow: hidden
}

.product_grid .name {
    color: #000000;
    display: block;
    font-weight: normal
}

.product_grid .discount {
    background: #ff0000;
    color: #FFFFFF;
    height: 22px;
    right: 10px;
    padding: 0px 1px 0px 1px;
    position: absolute;
    top: -13px;
    width: 32px;
    text-align: center;
    border-radius: 4px
}

.price_arae {
    position: relative
}

.product_grid .item .price_old {
    color: #d4d3d3;
    font-size: 13px;
    font-weight: normal;
    display: inline-flex;
    margin-left: 3px
}

.product_grid .item .price_old span {
    text-decoration: line-through
}

.price_old span {
    color: #777777;
    text-decoration: line-through
}

.product_grid .item .price_current {
    color: #e10c00;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex
}

.product_grid .status {
    margin-bottom: 18px
}

.product_grid .status li {
    color: #606060;
    font-size: 11px;
    list-style: disc inside none
}

.product_grid .button-cart {
    display: none
}

.product_grid .button-detail {
    color: #f7f7f7;
    display: inline;
    padding: 6px 13px;
    -webkit-transition: 0.25s ease-in-out all;
    transition: 0.25s ease-in-out all;
    margin-top: 11px;
    display: table;
    position: absolute;
    bottom: -82px;
    right: 8px;
    background: #ED1C24;
    height: 13px;
    width: 5px;
    text-decoration: none
}

.product_grid .button-detail span {
    font-size: 22px;
    font-weight: 500;
    font-family: arial
}

.product_grid .button_area {
    display: none
}

.product_grid .button_area a {
    border-radius: 50% 50% 50% 50%;
    color: #FFFFFF;
    font-size: 14px;
    height: 38px;
    line-height: 38px;
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    width: 38px;
    background-color: #2080CA;
    color: #fff;
    border: 1px solid #2080CA;
    display: inline-block
}

.product_grid .button_area a:first-child {
    margin-right: 15px
}

.product_grid .button_area a::before, .product_grid .button_area a::after {
    bottom: 0;
    height: 100%;
    line-height: 38px;
    transition: all 0.5s ease 0s;
    -webkit-transition: all 0.5s ease 0s;
    width: 100%;
    float: left;
    color: #ffffff;
    font-size: 19px;
    background-image: url(../templates/didongmango/images/icon_v1.png);
    background-position: -85px -64px;
    content: ''
}

.product_grid .button_area a::before {
    bottom: 0
}

.product_grid .button_area a::after {
    bottom: 100%;
    pointer-events: none;
    position: absolute;
    width: 100%;
    left: 0
}

.product_grid .button_area a:hover:before {
    transform: translateY(100%);
    -webkit-transform: translateY(100%)
}

.product_grid .button_area a:hover:after {
    bottom: 0
}

.product_type {
    position: absolute;
    top: 0;
    left: 0;
    background: #0183BF;
    color: #FFF;
    padding: 1px 8px;
    border-radius: 3px 3px 3px 0;
    font-size: 12px;
    line-height: 18px
}

.product_type:after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 4px 0 0;
    border-color: #0183BF transparent transparent transparent
}

.product_type_moi {
    background: #0183BF;
    color: #FFF;
    padding: 1px 8px;
    border-radius: 3px 3px 3px 0;
    font-size: 12px
}

.product_type_moi:after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 4px 0 0;
    border-color: #0183BF transparent transparent transparent
}

.product_type_hot, .product_type_sale {
    background: #f3942f;
    color: #FFF;
    padding: 1px 8px;
    border-radius: 3px 3px 3px 0;
    font-size: 12px
}

.product_type_hot:after, .product_type_sale:after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 4px 0 0;
    border-color: #f3942f transparent transparent transparent
}

.product_type_order_0 {
    top: -13px;
    left: 7px
}

.product_type_order_1 {
    top: 14px;
    left: 7px
}

.product_type_order_2 {
    top: -123px;
    left: 7px
}

.product_type_qua-tang {
    background-image: url(../templates/didongmango/images/icon_v1.png);
    background-repeat: no-repeat;
    background-position: -215px 0;
    background-color: transparent;
    width: 35px;
    height: 33px;
    text-indent: -999px;
    left: 198px;
    top: -12px
}

.product_type_qua-tang:after {
    border-color: transparent
}

@media screen and (max-width: 1100px) {
    .main_wrapper .product_grid .item {
        width: 25%;
        border-bottom: 1px solid #E7E7E7
    }
}

@media screen and (min-width: 800px) {
    .product_grid .item:hover .summary {
        webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        -ms-transition: all .5s ease;
        transition: all .5s ease;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=1);
        opacity: 1
    }

    .product_grid .item:hover .button-detail {
        bottom: -11px;
        transition-delay: .35s
    }

    .product_grid .item:hover .discount {
        transition: all 0.5s ease 0s;
        -webkit-transition: all 0.5s ease 0s
    }

    .product_grid .item:hover:before {
        width: 100%
    }
}

@media screen and (max-width: 799px) {
    .main_wrapper .product_grid .item {
        width: 33.333%
    }

    .product_grid .item .summary {
        display: none
    }
}

@media screen and (max-width: 500px) {
    .main_wrapper .product_grid .item {
        width: 50%
    }
}

@media screen and (max-width: 480px) {
    .product_grid .item .frame_inner {
        padding: 0px 10px 0px
    }

    .product_grid .item .price_old {
        display: none
    }
}

.col-20 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
    padding: 0 15px;
}

.col-xs-20 {
    padding: 0 15px;
}

@media (min-width: 0) {
    .col-xs-20 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}

.col-sm-20 {
    padding: 0 15px;
}

@media (min-width: 576px) {
    .col-sm-20 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}

.col-md-20 {
    padding: 0 15px;
}

@media (min-width: 768px) {
    .col-md-20 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}

.col-lg-20 {
    padding: 0 15px;
}

@media (min-width: 992px) {
    .col-lg-20 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}

.col-xl-20 {
    padding: 0 15px;
}

@media (min-width: 1200px) {
    .col-xl-20 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}

.gutter-0 {
    margin: 0;
}

.gutter-0 > [class^='col'] {
    padding: 0;
}