﻿body {
   background: rgba(222, 220, 220, 0.83)
}
#logo {
    height: 70px;
    /*margin: 0px 30px 0px 0;
    float: left;*/
    /*position: absolute; left: 0px; top: 10px*/
}
#search-box {
    width: 450px;
    float: left;
    margin: 25px 0px 0 20px;
}
#giohang {
    display: none;
    background: url(images/cartblack.png) no-repeat bottom;
    height: 55px;
    width: 45px;
    float: right;
    margin-top: 15px;
}
.img {
    /*height: 70px;
    object-fit: cover;*/
    border-radius: 10px;
    width: 100px;
    height: 100px;
    border: solid 1px #7386D5
}
.slogan{display: block}
.zoom:hover {
  -ms-transform: scale(1.7); /* IE 9 */
  -webkit-transform: scale(1.7); /* Safari 3-8 */
  transform: scale(1.7); 
  z-index: 10;
  margin-left: 120px
}
img {max-width:95%}
#header{height:63px}
/*#search {
    border-radius: 5px;
    border: solid 1px #808080;
    display: block;
    padding: 5px 5px 5px 10px;
    width: 100%
}*/
#btnTimKiem{margin-left: -30px; padding: 0 3px; z-index: 1}
#nav-home h1, #nav-home h2, #nav-home h3, #nav-home h4, #nav-home h5, #nav-home h6{margin: 0; padding: 0}
.imageThumb {
    max-width: 98%;
    max-height: 350px !important
}
.bg-yellow{background: #fdf21c; }
.bg-blue1 {
    background: #00759f;
}
.bg-blue {
    background: #2f9ed8
}

.border-blue {
    border: solid 1px #7386D5
}
.logo-text h1 {
    display: inline
}
.bg-gray{background: rgba(222, 220, 220, 0.83)}
.bg-grayblack{background: #808080}
.giohang{font-size: 1.9em; }
.padding-top-5{padding-top: 5px}
.padding-bottom-5{padding-top: 5px}
.padding-top-10{padding-top: 10px}
.padding-bottom-10{padding-top: 10px}
.margin-right-5{margin-right: 5px}
.margin-bottom-5{margin-bottom: 5px}
.margin-bottom-10{margin-bottom: 10px}
.margin-top-10{margin-bottom: 10px}
.margin-top-120{margin-top: 110px}
.mr-15{margin-right: 15px}
.ml-15{margin-left: 15px}
.ml--1{margin-left:-1px}
.logo1{height: 87px}
.logo2{height: 37px}
#supplierLogo {width: 100%; padding: 0; margin: 0}
#supplierLogo li {
    
    margin: 0px 0 0 0%;
    list-style: none;
    position:relative;
    height: 100px;
    text-align: center;
    vertical-align:central;
    overflow: hidden;
    
}
    #supplierLogo li img 
    {
        height: 95%; width: 98%; border: solid 1px rgba(222, 220, 220, 0.83); background:#fff
    }
.btn-viewall{color: #fdf21c; margin: 0px; padding: 9px; width: calc(100% - 3px); text-align: left;  position: absolute; left: 1px; bottom: 1px}
.btn-viewall:hover{background: #facc1a}
.custom-h1{font-size: 0.9em; margin: 0 0 1px 0; padding-bottom:  0 0 1px 0}
.custom-h5{font-size: 0.9em; margin: 0px; padding: 0px}
.h1-small{font-size: 1.2em}
#NoiDungChanTrang h1{font-size: 1.1em}
.text-price{font-size: 1.1em; color: #d50d0d}
.form-member input[type=text],.form-member input[type=password]{border-radius: 3px; width: 99%; border: solid 1px #c3c2c2; padding: 5px}
.form-member p{font-size: 0.9em; color: #084268}
.field-validation-error{color: #d50d0d}
.btnAllCats {
  color: #000 !important;
}
.cats-height{max-height: calc(100vh - 125px); overflow-y: hidden}
.cats-height ul li a{padding: 5px;background: rgba(255, 255, 255, 0.00)}
.cats-height ul li a:hover{background: #fdf21c}

.col-custom-auto
{
  
  width: calc(100% - 370px);
  margin-right: 10px; 
  
}
ul{margin: 0; padding: 0}
ul li{list-style: none}
i{margin-right: 5px}
/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}
.align-center{text-align: center}
#listIMG li a{max-width: 100%}
.home-category-title-mobile {
    display: none;
}
.btn-viewall-prod {
    display: block; background: #fff; border-top: solid 1px rgba(222, 220, 220, 0.83)
}
#categories_home{margin: 15px 0; padding: 0; width: 100%; overflow: hidden; background:#FFF}
    #categories_home li {
        margin: 0px 10px 0 0%;
        list-style: none;
        height: 150px;
        width: 120px;
        text-align: center;
        overflow: hidden;
        border: none
    }

        #categories_home li a {
            width: 99%;
            height: 99%;
            align-items: center;
            overflow: hidden;
            text-align: center;
            border: none
        }
    #categories_home li a img {background:#fff; margin-top: 5px; border: none
    }
    #categories_home li span{display: block; width: 100%; font-size: 0.9em; font-weight: bold}

.center-panel-home{width: 100%; padding: 0 0 10px 0; margin-right: 15px}
.center-panel-header {display: block; background: #fff; padding: 11px; border-bottom: solid 1px rgba(222, 220, 220, 0.83)}
.center-panel {
    width: calc(100% - 305px);
    padding: 0;
    margin-right: 15px
}
.side-bar-home{max-height: 440px; overflow: hidden}
.head-group-home{width: 250px; background: #7386D5; position: relative; display: block}
.head-group-home-box{width: 290px}
.head-group-home ul li{list-style: none}

.side-bar-home a {padding: 7px 15px; color: #FFF; font-size: 0.9em; display: block}
.home-category-title{font-size: 1.2em; color: #fdf21c; padding: 20px 15px; display: block}

.home-prod-content{width: 100%; background: white}
 .home-prod-content li{list-style: none; margin: 0; position: relative; width: 20%; float: left}
 .item-cell {
    width: calc((100%/5 + 0.4px));
    float: left;
    margin: -1px 0 0 -1px;
    /*border: solid 1px rgba(222, 220, 220, 0.83);*/
    height: 270px;
    text-align: center;
    position: relative;
    overflow:visible;
    
    background: #fff
}
.product-slide {
    width: 100%;
    float: left;
    margin: 5px 0 5px 0%;
    /*border: solid 2px #fbf5f5;*/
    height: 270px;
    text-align: center;
    position: relative;
    overflow: visible;
    background: #fff
}
.product-slide img, .item-cell img{max-width: 98%; max-height: 68%; margin-top: 3px}
.prod-name-home {
    display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
    text-decoration: none;
    font-size: 0.95em;
    position: absolute;
    bottom: 9px;
    left: 5px;
    width: 97%;
    padding: 5px 3px;
    max-height: 50px;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #695f5f
}
.prod-name {
    text-decoration: none;
    font-size: 1em;
    position: absolute;
    top: 210px;
    left: 5px;
    width: 97%;
    padding: 5px 3px;
    max-height: 30px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: center;
}
.curent-price-home {
    font-size: 1.1em;
    font-weight: bold;
    padding: 3px;
    color: #fb890e;
    position: absolute;
    bottom: 45px; left: 5px;
    text-align: center;
    width: 95%
}
.curent-price {
    font-size: 1em;
    font-weight: bold;
    padding: 3px;
    color: #d50d0d;
    position: absolute;
    top: 185px;
    left: 5px;
    text-align: center;
    width: 95%
}

.pt-giamgia{position: absolute; top: 3px; left: 3px; background: #d50d0d; color: #fff; z-index: 1; padding: 3px;}
.khuyen-mai{position: absolute; top: 3px; right: 3px; color: #d50d0d; z-index: 1; padding: 3px; color: #d50d0d; font-size: 1.6em}
.khuyen-mai-tt{display: block; color: #facc1a; padding: 5px}
.list-content-home{max-height: 500px; overflow: hidden}

.full-size{width: 98%; margin: 0 auto 15px auto}

.product-slide div, .box-infor{display: none; width: 100%; height: 100%; z-index: 1000; position: absolute; top: 0; left: 0; background: rgba(22, 2, 2, 0.89); text-align: left}
.product-slide div a, .box-infor a{display: block; height: 78%; padding: 5px}
.product-slide div h1, .box-infor h1{font-size: 1em; padding: 0; display: block; text-align:justify; margin: 0; color: #09cf07}
    .product-slide div span, .box-infor span{
        display: block;
        padding: 3px 0px 0 0;
        color: #fff;
        max-height: 29px;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        overflow: hidden;
        font-size: 0.9em
    }
    .product-slide div label,.box-infor label{font-size: 1.2em; padding: 3px 0; color: #fcd800; display: block}
    .product-slide div label del, .box-infor label del{font-size: 0.9em; padding-left: 10px }
    .product-slide div p,.box-infor p{display: block; height: 20%; margin-top: 5px}
    .product-slide div p button,.box-infor button {display: block; width: 98%; background: #0094ff; color: #FFF; text-align: center; border: none; margin: 10px 1% 0 1%; padding: 5px; cursor: pointer; font-size: 1em}
    .product-slide div p button:hover,.box-infor button:hover, .item-cell-row-price button:hover{color:#f8fa22; background: #0c67b4; cursor: pointer}
    .product-slide div p button i,.box-infor i{margin-right:5px}

#url-map {
    margin: 0px 0;
    padding: 0;
    display: inline
}

    #url-map li {
        float: left;
        margin-right: 1px;
        list-style: none;
    }

        #url-map li a {
            padding: 7px;
            color: #5b5b5b;
            text-decoration: none;
            display: block;
        }
        .min-width{min-width: 500px}
        .details-col-price{width: 50%; padding: 0 15px}
.tag h1,.tag h2,.tag h3,.tag h4,.tag h5, .tag h6{margin: 3px; display: inline-block}
.tag h1{font-size: 1.4em; color: #d50d0d}
.tag h2{font-size: 1.3em; color: #0c67b4}
.tag h3{font-size: 1.2em; color: #0094ff}
.tag h4{font-size: 1.1em; color: #facc1a}
.tag h5{font-size: 1em; color: #facc1a}
.tag h6{font-size: 0.9em; color: #0bdb6f}
.tag h1 a{color: #d50d0d}
.tag h2 a{color: #0c67b4}
.tag h3 a{color: #0094ff}
.tag h4 a{color: #facc1a}
.tag h5 a{color: #b40a4d}
.tag h6 a{color: #090ca9}
#tblShopCart tr th{background: #7386D5; color: #FFF; padding: 5px 7px}
#tblShopCart tr td{padding: 5px 7px; border-bottom: solid 1px rgba(222, 220, 220, 0.83)}
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 95%;
	height: 90%;
}
@media screen and (max-width: 576px) and (min-width: 200px) {
    .top-menu {
        display: none
    }
    .logo-text h1 {
        display: none
    }
    .logo-text {
        font-size: 0.7em;
    }
    .logo2{display: none}
    .home-category-title{font-size: 0.9em}
    .home-category-title-mobile {
        display: block;
    }
    .border-blue {
        border: none
    }
    .btn-viewall-mobile
    {
        display: block; 

    }
    .side-bar-home{max-height: 440px; overflow-y: scroll}
    .side-bar-home a {
        display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
        text-decoration: none;
        font-size: 0.85em;
    
        text-overflow: ellipsis;
        overflow: hidden;
   
    }
    .list-content-home{max-height: 500px; overflow-y: scroll}
     .home-prod-content li{list-style: none; margin: 0; position: relative; width: 50%; float: left}
     .zoom:hover {
  -ms-transform: scale(1); /* IE 9 */
  -webkit-transform: scale(1); /* Safari 3-8 */
  transform: scale(1); 
  margin-left: 0px;
}
    /*#supplierLogo li {
    
    margin: 0px 0 0 0%;
    list-style: none;
    position:relative;
    height: 60px;
    text-align: center;
    vertical-align:central;
    overflow: hidden;
    
}*/
    .giohang{font-size: 1.7em; }
    .navbar-dd{position: absolute; top: 55px; right: 16px; display: block; background: #facc1a; padding: 10px; z-index: 1}
    .min-width{min-width: 400px}
    .custom-h1{font-size: 0.99em; margin: 1px; padding: 1px; }
    .custom-h5{font-size: 0.9em; margin: 1px; padding: 1px; display: none}
    .logo1{height: 60px}
    .logo2{height: 35px}
    /*#search{border-radius: 5px; border: solid 1px #808080; padding: 5px 5px 5px 10px; width: 100%}*/
    .btnAllCats {
      color: #000 !important;
      margin-left: 2px !important;
      margin-right: 2px !important;
      display: block;
      font-size: 0.95em
    }
    .text-box-head{font-size: 1em}
    .item-cell {
    width: 50%;
    float: left;
    margin: -1px 0 0 -1px;
    border: solid 1px rgba(222, 220, 220, 0.83);
    height: 270px;
    text-align: center;
    position: relative;
    overflow:visible;
    background: #fff;
    }
    .center-panel{width: 98%; margin: 0 auto; padding: 0 10px}
    .head-group-home-box{width: 98%; background: #7386D5; margin-left: 0}
    .details-col-price{width: 100%; padding: 0 15px}
    .label-for-input{width: 120px; margin: 0 15px; display: block}
    .input-width{width: calc(100%-150px)}
     .center-panel-home{width: calc(100% - 9px); padding: 0}
    .head-group-home{width: 48%; background: #7386D5; position: relative; display: none}
    .videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
@media screen and (max-width: 767.98px)  and (min-width: 577px) 
{
    .slogan {
        display: none
    }
    .giohang{font-size: 1.7em; position: absolute; top: 7px; right: 150px}
    .min-img{min-width: 80%}
    .min-width{min-width: 80%}
    .nav-link{font-size: 0.9em}
    .nav-link i{display: none}
    .navbar-dd{position: absolute; top: 52px; right: 36px; background: #facc1a; padding: 10px; z-index: 1}
    .custom-h1{font-size: 0.9em; margin: 1px; padding: 1px}
    .custom-h5{font-size: 0.9em; margin: 1px; padding: 1px}
    .logo1{height: 60px}
    /*#search{border-radius: 5px; border: solid 1px #808080; display: block; padding: 5px 5px 5px 10px; width: 100%}*/
    .text-box-head{font-size: 1em}
    .item-cell {
        width: 50%;
        float: left;
        margin: -1px 0 0 -1px;
        border: solid 1px rgba(222, 220, 220, 0.83);
        height: 250px;
        text-align: center;
        position: relative;
        overflow:visible;
    
        background: #fff
    }
    .center-panel{width: 98%; margin: 0 auto; padding: 0 10px}
    .head-group-home-box{width: 98%; background: #7386D5; margin-left: 0}
   .videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
@media screen and (max-width: 976px) and (min-width: 768px)
{
    .home-prod-content li{list-style: none; margin: 0; position: relative; width: 33%; float: left}
    .giohang{font-size: 1.7em; position: absolute; top: 7px; right: 150px}
    .min-img{min-width: 90%}
    .nav-link{font-size: 0.9em}
    .navbar-dd{position: absolute; top: 52px; right: 96px; background: #facc1a; padding: 10px; z-index: 1}
    .custom-h1{font-size: 0.9em; margin: 1px; padding: 1px}
    .custom-h5{font-size: 0.9em; margin: 1px; padding: 1px}
    .logo1{height: 60px}
    .logo2{height: 45px}
    /*#search{border-radius: 5px; border: solid 1px #808080; display: block; padding: 5px 5px 5px 10px; width: 100%}*/
    .item-cell {
        width: calc(100% / 3);
        float: left;
        margin: -1px 0 0 -1px;
        border: solid 1px rgba(222, 220, 220, 0.83);
        height: 270px;
        text-align: center;
        position: relative;
        overflow:visible;
        background: #fff
    }
    .details-col-price{width: 100%; padding: 0 15px}
    /*.center-panel{width: calc(100%-205px); margin-right: 5px; padding: 0 10px}
    .head-group-home-box{width: 200px; background: #7386D5; margin-left: 0}*/
    
}
@media screen and (max-width: 1180px) and (min-width: 976.1px)
{
    .min-img{min-width: 20%}
    .nav-link{font-size: 0.9em}
    .custom-h1{font-size: 0.9em; margin: 1px; padding: 1px}
    .custom-h5{font-size: 0.9em; margin: 1px; padding: 1px}
    .home-prod-content li{list-style: none; margin: 0; position: relative; width: 25%; float: left}
    .logo1{height: 70px}
    .logo2{height: 45px}
   /* #search {
        border-radius: 5px;
        border: solid 1px #808080;
        display: block;
        padding: 5px 5px 5px 10px;
        width: 100%
    }*/
    .item-cell {
        width: calc(100% / 4);
        float: left;
        margin: -1px 0 0 -1px;
        border: solid 1px rgba(222, 220, 220, 0.83);
        height: 250px;
        text-align: center;
        position: relative;
        overflow:visible;
        background: #fff
    }
    .details-col-price{width: 90%; padding: 0 15px}
}
@media screen and (max-width: 1900px) and (min-width: 1600.1px)
{
    .min-img{min-width: 20%}
    .nav-link{font-size: 0.9em}
    .custom-h1{font-size: 0.9em; margin: 1px; padding: 1px}
    .custom-h5{font-size: 0.9em; margin: 1px; padding: 1px}
    .logo1{height: 70px}
    .logo2{height: 45px}
    /*#search {
        border-radius: 5px;
        border: solid 1px #808080;
        display: block;
        padding: 5px 5px 5px 10px;
        width: 100%
    }*/
    .item-cell {
        width: calc(100%/6 -0.4px);
        float: left;
        margin: -1px 0 0 -1px;
        border: solid 1px rgba(222, 220, 220, 0.83);
        height: 250px;
        text-align: center;
        position: relative;
        overflow:visible;
        background: #fff
    }
    .details-col-price{width: 90%; padding: 0 15px}
}
@media screen and (max-width: 2900px) and (min-width: 1900.1px)
{
    .min-img{min-width: 20%}
    .nav-link{font-size: 0.9em}
    .custom-h1{font-size: 0.9em; margin: 1px; padding: 1px}
    .custom-h5{font-size: 0.9em; margin: 1px; padding: 1px}
    .logo1{height: 70px}
    .logo2{height: 45px}
    /*#search {
        border-radius: 5px;
        border: solid 1px #808080;
        display: block;
        padding: 5px 5px 5px 10px;
        width: 100%
    }*/
    .item-cell {
        width: calc(100%/7 -0.4px);
        float: left;
        margin: -1px 0 0 -1px;
        border: solid 1px rgba(222, 220, 220, 0.83);
        height: 250px;
        text-align: center;
        position: relative;
        overflow:visible;
        background: #fff
    }
    .details-col-price{width: 90%; padding: 0 15px}
}