@font-face {
   font-family: Inter_18pt-Regular;
   src: url(/giaodien/kanetec/font/Inter_18pt-Regular.ttf);
}

@font-face {
   font-family: Inter_18pt-SemiBold;
   src: url(/giaodien/kanetec/font/Inter_18pt-SemiBold.ttf);
   font-weight: 700px;
}



* {
  margin: 0;
  box-sizing: border-box;
}

body {
  /*font-family: "Helvetica";*/
  font-family: Inter_18pt-Regular;
  font-size: 18px;
  line-height: 150%;
  color:#333333;

}


a{ text-decoration: none; color:#333333; }
b,strong{font-family: Inter_18pt-SemiBold;}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; 
  grid-template-areas:
    'header header header header header header'
    'menu menu menu menu menu menu'
    'main main main main main main'
    'footer footer footer footer footer footer';
  gap: 0px;
  background-color: white;
  padding: 0px;
}
.container {
  
  width: 100%;padding:5px;
}
.grid-container > div {
  padding: 0px;
  
}

.item1 {
  grid-area: header;

}

.item2 {
  grid-area: menu;
  }
  
  
.item3 {
  grid-area: main;
}


.item4 {
  grid-area: footer;

 
}


.col-70{width: 70%;float: left;}
.col-30{width: 30%;float: left;}
.col-60{width: 60%;float: left;}
.col-40{width: 40%;float: left;}
.col-50{width: 50%;float: left;}
.col-33{width: 33%;float: left;}
.col-80{width: 80%;float: left;}
.col-20{width: 20%;float: left;}
.col-25{width: 25%;float: left;}
.col-55{width: 55%;float: left;}
.col-45{width: 45%;float: left;}
.h1-home{font-family:Inter_18pt-SemiBold;font-weight:700;font-size:65px; line-height: 130%;}
.h2-home{font-family:Inter_18pt-SemiBold;font-weight:700;font-size:55px; line-height: 130%;}
.home-tuvan{position:absolute;width: 100%;}
.header-search{width:200px;border:1px solid gray;}
.img2 {
  float: right;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.home-right{padding-right:30px;}
.home-left{padding-left:30px;}
.showhide{display: block;}

input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;padding:3px; border-radius: 3px; border: 1px solid #f2f2f2; }
h1,h2,h3,h4{line-height: 130%;}

@media only screen and (max-width: 600px) {

.col-70{width: 100%;}
.col-30{width: 100%;}
.col-60{width: 100%;}
.col-40{width: 100%;}
.col-50{width: 100%;}
.col-33{width: 100%;}
.col-80{width: 100%;}
.col-20{width: 100%;}
.col-25{width: 100%;}
.col-55{width: 100%;}
.col-45{width: 100%;}
.h1-home{font-family:Inter_18pt-SemiBold;font-weight:700;font-size:22px;line-height: 130%;}
.h2-home{font-family:Inter_18pt-SemiBold;font-weight:700;font-size:22px;font-weight:bold; line-height: 130%;}
.home-tuvan{position:relative;width: 100%;}
.header-search{max-width:400px;border:1px solid gray;}

.home-right{padding-right:0px;}
.home-left{padding-left:0px;}
.showhide{display: none;}

h1,h2,h3{line-height: 100%; font-size: 21px;}

  #header{display: none;}


  
  .grid-container-product {
  display: grid;
  grid-template-columns:auto auto;
  gap: 0px;
  background-color: white;
  padding: 0px;
  border: 1px solid #f2f2f2;
}

.khoi {
  
  border: 1px solid #f2f2f2;
  padding:5px;
  line-height: 130%;
}

.grid-container-menu {
  display: grid;
  grid-template-columns:auto ;
  gap: 0px;
  background-color: white;
  padding: 0px;
  border: 0px solid #f2f2f2;
}
.khoi-menu {
  
  border: 0px solid #f2f2f2;
  padding: 5px;
  margin:5px;
}

.grid-container-product-detail {
  display: grid;
  grid-template-columns:auto  ;
  gap: 0px;
  background-color: white;
  padding: 0px;
  
}
.khoi-product-detail {
  
  border: 1px solid #f2f2f2;
  padding: 5px;
 
}


}



@media only screen and (min-width: 600px) {

  #header{display: none;}
  
  .grid-container-product {
  display: grid;
  grid-template-columns:auto auto auto;
  gap: 10px;
  background-color: white;
  padding: 10px;
  border: 1px solid #f2f2f2;
}

.khoi {
  
  border: 1px solid #f2f2f2;
  padding:5px;
  line-height: 130%;
}

.grid-container-menu {
  display: grid;
  grid-template-columns:auto ;
  gap: 0px;
  background-color: white;
  padding: 0px;
  border: 1px solid #f2f2f2;
}
.khoi-menu {
  
  border: 1px solid #f2f2f2;
  padding: 5px;
  margin:5px;
}

.grid-container-product-detail {
  display: grid;
  grid-template-columns:auto auto ;
  gap: 0px;
  background-color: white;
  padding: 0px;
  
}
.khoi-product-detail {
  
  border: 1px solid #f2f2f2;
  padding: 5px;
 
}


}

@media only screen and (min-width: 768px) {

   #header{display: block;}
 

  .container{max-width:70%; margin:0 auto;padding:5px;}
 

  
  
  .grid-container-product {
  display: grid;
  grid-template-columns:auto auto auto auto;
  gap: 10px;
  background-color: white;
  padding: 10px;
  border: 1px solid #f2f2f2;
}

.khoi {
  
  border: 1px solid #f2f2f2;
  padding:5px;
  line-height: 130%;
}

.grid-container-menu {
  display: grid;
  grid-template-columns:auto auto auto;
  gap: 0px;
  background-color: white;
  padding: 0px;
 
}

.khoi-menu{
  
  padding:5px;
  width: 100%;
}

.grid-container-product-detail {
  display: grid;
  grid-template-columns:auto auto ;
  gap: 0px;
  background-color: white;
  padding: 0px;
  
}
.khoi-product-detail {
  
  border: 1px solid #f2f2f2;
  padding: 5px;

}

}


@media only screen and (max-width: 600px) {

#menu-toggle{font-size:6px;display:block;width:50px;height:45px;}  
#myDIV > ul > li{display:block;padding:10px; }
#myDIV { display:none; height:auto;}
#myDIV > ul { margin-top:0px;padding:0px 0px 0px 5px;width:background: white;}
#myDIV > ul >li >ul { margin-top:0px;padding:0px 0px 0px 5px;width: width: 200px;background: white; }
#myDIV > ul > li > ul > li{display:block;padding:5px;}

}

@media only screen and (min-width: 600px) {

#menu-toggle{font-size:6px;display:block;width:50px;height:45px;}  
#myDIV > ul > li{display:block;padding:10px; }
#myDIV { display:none; height:auto;}
#myDIV > ul { margin-top:0px;padding:0px 0px 0px 5px;width:background: white;}
#myDIV > ul >li >ul { margin-top:0px;padding:0px 0px 0px 5px;width: width: 200px;background: white; }
#myDIV > ul > li > ul > li{display:block;padding:5px;}

}


@media only screen and (min-width: 768px) {

#menu-toggle{display:none;width:width:55px;height:40px;}  
#myDIV > ul > li{float:left;display:block;padding:10px;}  
#myDIV { display:block;   height:42px; vertical-align: middle;}
#myDIV > ul { margin-top:0px;padding:0px 0px 0px 5px;width:background: white;  z-index: 1;}
#myDIV > ul >li >ul { position: absolute; margin-top:0px;padding:10px 0px 0px 5px;width: width: 200px;background: white;border:1px solid black; z-index: 9000;display:none;}

}