.my-content {

    position: relative;

}


.my-content-expand {

    display: none;

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    background: linear-gradient(to top, #fff, #fff, #fff, transparent);

    text-align: center;

    padding: 30px 20px;

    cursor: pointer;

}


.my-content.is-collapse .my-content-expand {

    display: block;

}


.my-content.is-collapse {

    max-height: 396px;

}

.my-content.is-collapse {
    overflow: hidden;
}

.my-content-collapse {
    display: none;
}

.my-content.is-collapable:not(.is-collapse) .my-content-collapse {
    display: block;
    width: 100%;
    background: linear-gradient(to top, #fff, #fff, #fff, transparent);
    text-align: center;
    padding: 30px 20px;
    cursor: pointer;
}


/*add style danh muc sản phẩm */

.m-card {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    height: 100%;
}

.m-card__frame {
    display: block;
    width: 100%;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.m-card__frame::before {
    content: '';
    display: block;
    width: 100%;
    padding-bottom: 100%;
}

.m-card__frame img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
    -webkit-transition: .4s;
    transition: .4s;
}

.m-card__frame:hover img {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}

.m-card__title {
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
    flex-grow: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    text-align: center;
    padding: 8px;
    background-color: #1f9330;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 0;
}

.m-card__title a,
.m-card__title a:hover {
    color: #fff;
    text-decoration: none;
}

.gutter-16 {
    margin: 0 -8px;
}

.gutter-16 [class^="col"] {
    padding: 0 8px;
}

.breadcrumb {
    margin-bottom: 0;
    padding: 12px 15px;
}

.wrap-product-cl1 {
    margin-bottom: 15px;
}

.wrap-breadcrumbs {
    background: #f5f5f5;
}

h1.page-tit {
    text-transform: uppercase;
    font-size: 20px;
    color: #1f9330;
    margin-top: 20px;
    margin-bottom: 10px;
    font-weight: bold;
}

.htpp {
    margin-top: 20px;
}

.htpp .form-inline {
    width: 100%;
    background: #f4f4f4;
    padding: 20px 0;
}

.htpp .form-inline .form-control {
    width: 100%;
    box-shadow: none;
    border-radius: 0;
    border: 1px solid #eee;
}

.htpp .form-inline .control-label {

    font-weight: normal;
    padding-top: 5px;
}

.htpp table th {}

.htpp table a {
    color: #08abc8
}

.product-cl1 {
    background: #fff;
    border: 1px solid #eee;
}

.nam-gr-pr {
    background: #08abc8;
    width: 100%;
    padding: 8px;
    text-align: center;
}

.nam-gr-pr a {
    color: #fff;
    font-family: Opensans-Bold;
    text-transform: uppercase;
}

.wrap-product-cl1 .product-cl1 {
    margin-top: 30px
}

.wrap-list-menu {
    margin-top: 30px;
}

.listCatProduct {
    border: 1px solid #ddd;
    padding: 0 10px;
}

.listCatProduct h4>a {
    font-family: f2;
}

.listCatProduct h4>i {
    float: right;
    font-weight: normal;
    font-size: 13px;
    margin-top: 6px;
}

.listCatProduct .panel-collapse ul li a {
    display: block;
    padding: 5px 0;
}

.listCatProduct .panel-collapse ul li a:before {
    content: "-";
    margin-right: 10px;
}

.listCatProduct .panel {
    border: none;
    border-radius: 0;
    box-shadow: none;
    border-bottom: 1px solid #ddd;
}

.listCatProduct li.active>a {
    color: #eb1c24;
}

.wrap-list-menu .bar-box-detail {
    padding: 6px 0px;
    text-align: center;
}

.list-dm li {
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.list-dm li:after {
    content: "\f105";
    font-family: FontAwesome;
    float: right;
    font-size: 18px;
    color: #ddd;
}

.form-inline {
    display: block !important;
    flex-flow: row wrap;
    align-items: center;
}

.wrap-httt {
    background: #08abc8;
    color: #fff;
    padding: 20px;
    margin-top: 30px;
}

.wrap-httt h4 {
    font-family: OpenSans-Bold;
}

.skype {
    font-size: 20px;
    float: left;
    margin-right: 15px;
    padding-top: 5px;
}

.ttht {
    float: left;
}


.product-detail-main .add-cart-right {
    color: #fff;
    font-size: 16px;
    padding: 2px 10px;
    border-radius: 50px;
    cursor: pointer;
    margin-right: 5px;
}

span.add-to-cart.add_now {
    background: #1f9330;
    padding: 4px;
    border-radius: 50px;
}

.add_now a {
    color: #fff;
}


.add_to_cart {
    display: flex;
}





.phone-bar a,
#phone-vr .phone-vr-circle-fill,
#phone-vr .phone-vr-img-circle,
#phone-vr .phone-bar a {
    background-color: #81d742;
}

#phone-vr .phone-vr-circle-fill {
    opacity: 0.7;
    box-shadow: 0 0 0 0 #81d742;
}



#button-contact-vr {
    position: fixed;
    bottom: 0;
    z-index: 99999;
}

#gom-all-in-one #zalo-vr {
    transition: 1s all;
    -moz-transition: 1s all;
    -webkit-transition: 1s all;
}

#button-contact-vr .button-contact {
    position: relative;
    margin-top: -5px;
}


#button-contact-vr .button-contact .phone-vr {
    position: relative;
    visibility: visible;
    background-color: transparent;
    width: 90px;
    height: 90px;
    cursor: pointer;
    z-index: 11;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transition: visibility .5s;
    left: 0;
    bottom: 0;
    display: block;
}


#zalo-vr .phone-vr-circle-fill {
    box-shadow: 0 0 0 0 #2196f3;
    background-color: rgba(33, 150, 243, .7);
}



.phone-vr-circle-fill {
    width: 65px;
    height: 65px;
    top: 12px;
    left: 12px;
    position: absolute;
    box-shadow: 0 0 0 0 #c31d1d;
    background-color: rgba(230, 8, 8, .7);
    border-radius: 50%;
    border: 2px solid transparent;
    -webkit-animation: phone-vr-circle-fill 2.3s infinite ease-in-out;
    animation: phone-vr-circle-fill 2.3s infinite ease-in-out;
    transition: all .5s;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animuiion: zoom 1.3s infinite;
    animation: zoom 1.3s infinite;
}


#zalo-vr .phone-vr-img-circle {
    background-color: #2196F3;
}

.phone-vr-img-circle {
    background-color: #e60808;
    width: 40px;
    height: 40px;
    line-height: 40px;
    top: 25px;
    left: 25px;
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    -webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
    animation: phone-vr-circle-fill 1s infinite ease-in-out;
}

.phone-vr-img-circle a {
    display: block;
    line-height: 37px;
}

.phone-vr-img-circle img {
    max-height: 25px;
    max-width: 27px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

#gom-all-in-one #phone-vr {
    transition: 0.7s all;
    -moz-transition: 0.7s all;
    -webkit-transition: 0.7s all;
}

#button-contact-vr .button-contact {
    position: relative;
    margin-top: -5px;
}

.phone-bar a,
#phone-vr .phone-vr-circle-fill,
#phone-vr .phone-vr-img-circle,
#phone-vr .phone-bar a {
    background-color: #81d742;
}

.phone-bar a {
    position: fixed;
    bottom: 25px;
    left: 30px;
    z-index: -1;
    color: #fff;
    font-size: 16px;
    padding: 8px 15px 7px 50px;
    border-radius: 100px;
    white-space: nowrap;
}

.phone-bar a {
    position: fixed;
    bottom: 25px;
    left: 30px;
    z-index: -1;
    color: #fff;
    font-size: 16px;
    padding: 8px 15px 7px 50px;
    border-radius: 100px;
    white-space: nowrap;
}

#button-contact-vr {
 position:fixed;
 bottom:0;
 z-index:99999
}
#button-contact-vr .button-contact {
 position:relative;
 margin-top:-5px
}
#button-contact-vr .button-contact .phone-vr {
 position:relative;
 visibility:visible;
 background-color:transparent;
 width:90px;
 height:90px;
 cursor:pointer;
 z-index:11;
 -webkit-backface-visibility:hidden;
 -webkit-transform:translateZ(0);
 transition:visibility .5s;
 left:0;
 bottom:0;
 display:block
}
.phone-vr-circle-fill {
 width:65px;
 height:65px;
 top:12px;
 left:12px;
 position:absolute;
 box-shadow:0 0 0 0 #c31d1d;
 background-color:rgba(230,8,8,.7);
 border-radius:50%;
 border:2px solid transparent;
 -webkit-animation:phone-vr-circle-fill 2.3s infinite ease-in-out;
 animation:phone-vr-circle-fill 2.3s infinite ease-in-out;
 transition:all .5s;
 -webkit-transform-origin:50% 50%;
 -ms-transform-origin:50% 50%;
 transform-origin:50% 50%;
 -webkit-animuiion:zoom 1.3s infinite;
 animation:zoom 1.3s infinite
}
.phone-vr-img-circle {
 background-color:#e60808;
 width:40px;
 height:40px;
 line-height:40px;
 top:25px;
 left:25px;
 position:absolute;
 border-radius:50%;
 overflow:hidden;
 display:flex;
 justify-content:center;
 -webkit-animation:phonering-alo-circle-img-anim 1s infinite ease-in-out;
 animation:phone-vr-circle-fill 1s infinite ease-in-out
}
.phone-vr-img-circle a {
 display:block;
 line-height:37px
}
.phone-vr-img-circle img {
 max-height:25px;
 max-width:27px;
 position:absolute;
 top:50%;
 left:50%;
 transform:translate(-50%,-50%);
 -moz-transform:translate(-50%,-50%);
 -webkit-transform:translate(-50%,-50%);
 -o-transform:translate(-50%,-50%)
}
@-webkit-keyframes phone-vr-circle-fill {
 0% {
  -webkit-transform:rotate(0) scale(1) skew(1deg)
 }
 10% {
  -webkit-transform:rotate(-25deg) scale(1) skew(1deg)
 }
 20% {
  -webkit-transform:rotate(25deg) scale(1) skew(1deg)
 }
 30% {
  -webkit-transform:rotate(-25deg) scale(1) skew(1deg)
 }
 40% {
  -webkit-transform:rotate(25deg) scale(1) skew(1deg)
 }
 50% {
  -webkit-transform:rotate(0) scale(1) skew(1deg)
 }
 100% {
  -webkit-transform:rotate(0) scale(1) skew(1deg)
 }
}
@-webkit-keyframes zoom {
 0% {
  transform:scale(.9)
 }
 70% {
  transform:scale(1);
  box-shadow:0 0 0 15px transparent
 }
 100% {
  transform:scale(.9);
  box-shadow:0 0 0 0 transparent
 }
}
@keyframes zoom {
 0% {
  transform:scale(.9)
 }
 70% {
  transform:scale(1);
  box-shadow:0 0 0 15px transparent
 }
 100% {
  transform:scale(.9);
  box-shadow:0 0 0 0 transparent
 }
}
.phone-bar a {
 position:fixed;
 bottom:25px;
 left:30px;
 z-index:-1;
 color:#fff;
 font-size:16px;
 padding:8px 15px 7px 50px;
 border-radius:100px;
 white-space:nowrap
}
.phone-bar a:hover {
 opacity:.8;
 color:#fff
}
@media(max-width:736px) {
 .phone-bar {
  display:none
 }
}
#zalo-vr .phone-vr-circle-fill {
 box-shadow:0 0 0 0 #2196F3;
 background-color:rgba(33,150,243,.7)
}
#zalo-vr .phone-vr-img-circle {
 background-color:#2196F3
}
#viber-vr .phone-vr-circle-fill {
 box-shadow:0 0 0 0 #714497;
 background-color:rgba(113,68,151,.8)
}
#viber-vr .phone-vr-img-circle {
 background-color:#714497
}
#contact-vr .phone-vr-circle-fill {
 box-shadow:0 0 0 0 #2196F3;
 background-color:rgba(33,150,243,.7)
}
#contact-vr .phone-vr-img-circle {
 background-color:#2196F3
}