@charset "utf-8";
/* CSS Document */
body{margin:0;padding:0;}
.top{width: 100%;float: left;box-shadow: 0 1px 2px rgba(220, 220, 220, 0.5);
height:80px;background: #FFF;}

.header {
  background: #FFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1000;
  margin-top:10px;
}
.logo {
  font-size: 25px;
  text-transform: uppercase;
  color: var(--color-white);
  font-weight: 700;
  width: 30%;
  float: left;text-align: center;
}
.navigation{width:70%;float:right;}
.toptren{width:100%;float:left;background: #ff4500;}
.chutren{width:100%;;color: #fff;font-weight: bold;
font-size: 15px;}


ul#menu li {
float: left;
width:18%;
text-align: left;}
ul#menu li a {text-decoration: none;color:black;}
ul#menu li {positon: relative;}
ul#menu li ul#sub {display: none;position: absolute;width: 150px;margin: 0;padding-top: 8px;text-align: left;
background: #19a4e7;z-index:1000;padding-bottom: 8px;}
ul#sub li a{color:#FFFFFF;}
ul#sub li{width:100%;}
ul#menu li:hover ul#sub {display: block;width: 25%;}


.giuafull{width:100%;float:left;}
.giua{width:90%;margin:auto;padding: 5px;}
.giua10{width: 90%;margin:auto;border: solid 6px #f56f27;margin-bottom: 68px;}
.sieugiua{width:90%;margin:auto;}
.giua1{width:85%;margin:auto;}
.giua2{width:70%;margin:auto;}
.giua3{width:60%;margin:auto;}
.giua31{width: 60%;margin: auto;padding: 10px;font-size: 20px;font-weight: bold;margin-top:50px;}
.giua31 p{margin-left:50px;}
.giua4{width:50%;margin:auto;}
.gray{width:100%;float:left;background:lavender;}
.layoutcha{display: flex;justify-content: space-between;}
.layoutcon{flex-basis: 23%;}
.maucam{font-size: 74%;padding: 1px 5px;vertical-align: middle;color: White;background-color: #ff4500;border-radius: 3px;margin-right: 10px;}
.benngoai{width:100%;float:left;margin-bottom:10px}
.khoi1{width:13%;float:left;}
.khoi1 p{padding: 8px;font-size: 22px;font-weight: bold;}
.khoi2{width: 87%;float: right;font-weight:bold;}
.khoi2 label{width: 75%;float: left;}
.khoi2 a{text-decoration: none;color:black;}
.trunggian1{width: 30%;margin: auto;background: url(images/2dau.png);height: 70px;background-size: cover;}
.trunggian10{width: 40%;margin: auto;background: url(images/2dau.png);height: 70px;background-size: cover;}
.giuacc{width: 90%;margin: auto;text-align: center;font-size: 25px;}
.bottom{width:60%;margin:auto;padding:30px;text-align:center;}
.vbvb{text-decoration: none;background: #f56f27;color: #FFF;font-size: 18px;padding: 20px;border-radius: 30px;}
.bentrai{width:30%;float:left;}
.bentraihihi{width:40%;float:left;}
.benphai{width:66%;float:right;}
.bentrai p{border: solid 1px #c1c1c1;padding: 10px;}
.bentraihihi p{border: solid 1px #c1c1c1;padding: 10px;font-weight: bold;font-size: 22px;}
.benphai p{width: 80%;background: #f56f27;color: #FFF;padding: 30px;font-size: 20px;}
.hinh{margin-left: 30px;margin-top: -20px;margin-bottom: 14px;}
.hinh1{margin-left: 30px;margin-top: -25px;margin-bottom: 18px;}
.hinh3{margin-left: 30px;margin-top: -23px;margin-bottom: 18px;}

.layoutcha1{display: flex;justify-content: space-between;}
.layoutcon1{flex-basis: 45%;}
.hinh4{margin-left: 30px; margin-top: -23px;margin-bottom: 14px;}
.center{width:100%;float:left;background-color: rgba(245, 111, 39, 0.12);}
.pp{background: #FFF;color: black;padding: 27px;font-size: 32px;font-weight: bold;margin-bottom: 4px;}
.vv{width: 10%;background: #f56f27;color: #FFF;text-align: center;padding: 10px;font-size: 16px;}
.vvvv{width: 36%;background: #f56f27;color: #FFF;text-align: center;padding: 10px;font-size: 18px;}
.bentraiduoi{width:100%;float:left;}
.bentraiduoi p{border: solid 1px #c1c1c1;padding: 10px;font-size: 19px;font-weight: bold;}
.hinh2{margin-left: 30px;margin-top: -25px;margin-bottom: 14px;}
.bentraiduoi ul li{list-style-image:url(images/daucheck.png)}
.hinh5{margin-left: 30px;margin-top: -21px;margin-bottom: 14px;}

.giua11{width:86%;margin:auto;background:#f4e03a;padding:25px;}
.c1{background: #FFF;padding: 20px;font-weight: bold;}

.giua11trai{width: 45%;float: left;padding: 20px;font-size: 20px;font-weight: bold;}
.giua11phai{width: 45%;float: right;padding: 20px;font-size: 20px;font-weight: bold;}
.vi{color: #154476;font-weight:700;}
.giuap{width:90%;margin:auto;}
.giuap p{border-bottom: solid 10px #f4e03a;width: fit-content;font-size: 19px;font-weight: bold;}
.giuaaa{width:60%;margin:auto;}
.giuaaa label{border-bottom: solid 10px #f4e03a;width: fit-content;font-size: 19px;font-weight: bold;}
.c2{font-size: 20px;font-weight: bold;}
.vvvv1{width: 100%;background: #f56f27;color: #FFF;text-align: center;padding: 10px;font-size: 30px;}
.giua12{width:90%;margin:auto;border:solid 3px #c1c1c1;}
.sieutop{text-align: center;margin-top: -34px;}

.giua111trai{width: 45%;float: left;padding: 20px;font-size: 20px;font-weight: bold;}
.giua111phai{width: 45%;float: right;padding: 20px;font-size: 20px;font-weight: bold;}
.hh1{width:15%;float:left;}
.hh1 p{background: #FFF;padding: 8px;font-weight: bold;text-align: center;border: solid 1px black;}

.giuafull1{width:100%;float:left;background:url(images/product_main2.jpg);height:753px;background-size:cover;}
.pa{font-weight: bold;font-size: 35px;margin-left: 20px;}


.layoutcha2{display: flex;justify-content: space-between;}
.layoutcon2{flex-basis: 18%;border: solid 2px #cf2e2e;text-align: center;background: #FFF;padding: 5px;}
.bb{font-size: 20px;font-weight: bold;width: 80%;margin: auto;padding: 19px;border-bottom: solid 2px red;}



.layoutcha3{display: flex;justify-content: space-between;margin-top: 20px;}
.layoutcon3{flex-basis: 30%;border: solid 2px #cf2e2e;text-align: center;background: #FFF;padding: 5px;}
.layoutcon31{flex-basis: 30%;border: solid 1px #c1c1c1;text-align: center;background: #FFF;padding: 5px;}
.layoutcon3trai{width:35%;float:left;}
.layoutcon3phai{width:65%;float:right;}

.layoutcha38{display: flex;justify-content: space-between;margin-top: 20px;margin-bottom: 20px;}
.layoutcon38{flex-basis: 30%;border: solid 1px #c1c1c1;text-align: center;background: #FFF;padding: 5px;}

.benphaia{width: 90%;float: right;background: #f56f27;color: #FFF;font-size: 19px;padding: 10px;}
.giuabb{width: 60%;margin: auto;border-left: solid 9px #f56f27;font-size: 20px;}

.benphaiaa{width: 96%;float: right;background: #f56f27;color: #FFF;font-size: 19px;padding: 10px;}

.giua1111trai{width: 45%;float: left;padding: 20px;font-size: 20px;font-weight: bold;box-shadow: 0px 2px 2px 2px #c1c1c1;}
.giua1111phai{width: 45%;float: right;padding: 20px;font-size: 20px;font-weight: bold;box-shadow: 0px 2px 2px 2px #c1c1c1;}

.giuafull3{width:100%;float:left;background:#f7f7f7;}
.lop11{width: 100%;float: left;background: url(images/cauhoi.png);height: 100px;}
.lop11 p{margin-left: 70px;color: #FFF;font-size: 19px;}
.lop12{width:80%;float:right;background:#ddd;padding:20px;}
#boxnoidung{width:80%;float:right;background:#ddd;padding:20px;}

.duoi{width:100%;float:left;background:#efefef;}

.lop13{width: 100%;float: left;background: url(images/abc.png);height:85px;background-repeat:no-repeat;}

.vn{font-size: 27px;margin-left: 30px;color: #FFF;}
.p1{text-align: center;font-size: 30px;font-weight: bold;color:#FFF;}
.p2{text-align: center;font-weight: bold;font-size: 30px;color: #FFF;margin: 0;}
.p3{text-align: left;background: #FFF;padding: 10px;font-size: 18px;width: 100%;}
.p4{font-size: 30px;text-align: center;font-weight: bold;}
.p5{text-align: center;font-size: 21px;padding: 20px;}
.p6{border-left: solid 2px #ff6900;padding-left: 6px;font-size: 20px;font-weight: bold;}
.layoutcha5{display: flex;justify-content: space-between;margin-top: 20px;}
.layoutcon5{flex-basis: 30%;text-align: center;padding: 5px;}

.layoutcha6{display: flex;justify-content: space-between;margin-top: 20px;}
.layoutcon6{flex-basis: 30%;border: 8px solid #f7da38;text-align: center;background: #FFF;padding: 5px;}
.lop111{width: 100%;float: left;background: url(images/cauhoi11.png);height: 100px;}
.lop111 p{margin-left: 70px;color: #FFF;font-size: 19px;}
.center1{width:70%;float:left;}
.center2{width:30%;float:right;}

.center3{width:10%;float:left;text-align: center;}
.center4{width: 85%;float: right;border-left: solid 2px #c1c1c1;padding: 5px;font-size: 23px;}

.layoutcha7{display: flex;justify-content: space-between;margin-top: 20px;}
.layoutcon7{flex-basis: 23%;text-align: center;padding: 5px;}

.center10{width:85%;float:left;}
.center10 input{height: 35px;}
.center20{width:15%;float:right;margin-top: 6px;}
.nutok{background:url(images/searchch.png);width:79%;}
.khoi3{width:20%;float:left;}
.khoi4{width:80%;float:right;}
.sieuh2{font-size:30px;}
.hv{width:100%;height:392px;}
.video{width:100%;height:500px;}
.vvv111{width:30%;}
.ssi{font-size: 30px;}
#vivi{font-weight:bold;text-align:center;font-size:22px;}
.viet{width:100%;float:left;}
.hinhv{width:100%;height:250px}
.timkiem{width:100%;margin-top: -9px;}
.layoutcha31 {
  display: flex;
  justify-content: space-between;
}
.hinhvb{width:100%;}
.hinhvb1{width:100%;}
.htht{font-size: 25px;}

.layoutcha9{display: flex;justify-content: space-between;margin-top: 10px;}
.layoutcon9{flex-basis: 49%;text-align: center;padding: 5px;}
.hinhdep1{width:60%}
@media(max-width: 639px) {
.benphai p {
  width: 98%;
  background: #f56f27;
  color: #FFF;
  padding: 5px;
  font-size: 17px;
}
.vbvb {
  text-decoration: none;
  background: #f56f27;
  color: #FFF;
  font-size: 16px;
  padding: 15px;
  border-radius: 30px;
  width: 93%;
  float: left;
  margin-bottom: 10px;
}
.hinhdep1{width:100%}
.layoutcha9{display: block;}
.htht{font-size: 20px;}
.khoi1 p {
  padding: 2px;
  font-size: 22px;
  font-weight: bold;
  text-align: center;
}
.cncn {
  height: 31px;
  margin-top: 7px;
  width: 97%;
}
.center10 {
  width: 78%;
  float: left;
}
.center31 {
  width: 73%;
  float: left;
}
.layoutcha38{display: block;}
.layoutcha6 {
  display: block;
  justify-content: space-between;
  margin-top: 20px;
}
.hinhvb{width:100%;height:220px;}
.hinhvb1{width:100%;height:220px;}
.layoutcha7 {
  display: block;
  justify-content: space-between;
  margin-top: 10px;
}
.layoutcha31 {
  display: block;
  justify-content: space-between;
}
.timkiem{width:8%;margin-top: -3px;}
.bentrai {
  width: 100%;
  float: left;
}
.hinhv{width:100%;height:250px}
#vivi{font-weight:bold;text-align:center;font-size:19px;}
.layoutcha2 {
  display: block;
  justify-content: space-between;
}
.lop11 p {
  margin-left: 70px;
  color: #FFF;
  font-size: 16px;
}
.ssi{font-size: 25px;}
.bottom {
  width: 96%;
  margin: auto;
  padding: 1px;
  text-align: center;
  margin-top:20px;margin-bottom:20px;
}
.vvv111{width:86%;}
.trunggian1 {
  width: 92%;
  margin: auto;
  background: url(images/2dau.png);
    background-size: auto;
  height: 53px;
  background-size: cover;
}
.giua1111phai {
  width: 97%;
  float: left;
  padding: 7px;
  font-size: 20px;
  font-weight: bold;
  box-shadow: 0px 2px 2px 2px #c1c1c1;
}
.giua1111trai {
  width: 97%;
  float: left;
  padding: 7px;
  font-size: 20px;
  font-weight: bold;
  box-shadow: 0px 2px 2px 2px #c1c1c1;
}
.giuabb {
  width: 96%;
  margin: auto;
  border-left: solid 9px #f56f27;
  font-size: 20px;
}
.giua31 p {
  margin-left: 5px;
}
.layoutcha3 {
  display: grid;
  justify-content: space-between;
  margin-top: 20px;
}
.giua31 {
  width: 96%;
  margin: auto;
  margin-top: auto;
  padding: 10px;
  font-size: 17px; 
  font-weight: bold;
  margin-top: 33px;
}
.giua4 {
  width: 95%;
  margin: auto;
}
.center2 {
  width: 100%;
  float: right;
}
.trunggian10 {
  width: 86%;
  margin: auto;
  background: url(images/2dau.png);
    background-size: auto;
  height: 70px;
  background-size: cover;
}
.center4 {
  width: 84%;
  float: right;
  border-left: solid 2px #c1c1c1;
  padding: 7px;
  font-size: 18px;
}
.center1 {
  width: 100%;
  float: left;
}
.center20 {
  width: 20%;
  float: left;
  text-align: center;
  margin-top: 4px;
}
.layoutcha5 {
  display: block;
  justify-content: space-between;
  margin-top: 20px;
  color:#FFF;
}
.benphai {
  width: 100%;
  float: right;
}
.vvvv1 {
  width: 100%;
  background: #f56f27;
  color: #FFF;
  text-align: center;
  padding: 1px;
  font-size: 29px;
}
.giuaaa {
  width: 98%;
  margin: auto;
}
.giua12 {
  width: 98%;
  margin: auto;
  border: solid 3px #c1c1c1;
}
.c2 {
  font-size: 18px;
  font-weight: bold;
}
.giuap p {
  border-bottom: solid 10px #f4e03a;
  width: fit-content;
  font-size: 15px;
  font-weight: bold;
}
.giua11trai {
  width: 100%;
  float: left;
  padding: 6px;
  font-size: 20px;
  font-weight: bold;
}
.giua11phai {
  width: 100%;
  float: left;
  padding: 6px;
  font-size: 20px;
  font-weight: bold;
}
.bentraihihi {
  width: 81%;
  float: left;
}
.vvvv {
  width: 71%;
  background: #f56f27;
  color: #FFF;
  text-align: center;
  padding: 10px;
  font-size: 18px;
}
.hh1 {
  width: 30%;
  float: left;
}
.pa {
  font-weight: bold;
  font-size: 25px;
  margin-left: 20px;
}
.giua111trai {
  width: 100%;
  float: left;
  padding: 1px;
  font-size: 19px;
  font-weight: bold;
}
.giua111phai {
  width: 100%;
  float: left;
  padding: 1px;
  font-size: 17px;
  font-weight: bold;
}
.vv {
  width: 38%;
  background: #f56f27;
  color: #FFF;
  text-align: center;
  padding: 10px;
  font-size: 16px;
}
.giua10 {
  width: 97%;
  margin: auto;
    margin-bottom: auto;
  border: solid 6px #f56f27;
  margin-bottom: 68px;
}
.pp {
  background: #FFF;
  color: black;
  padding: 27px;
  font-size: 17px;
  font-weight: bold;
  margin-bottom: 4px;
}
.video{width:100%;height:226px;}
.hv{width:100%;height:134px;}
.toptren{display:none;}
.logo {
  font-size: 25px;
  text-transform: uppercase;
  color: var(--color-white);
  font-weight: 700;
  width: 50%;
  float: left;
  text-align: center;
}
.top {
  width: 100%;
  float: left;
  box-shadow: 0 1px 2px rgba(220, 220, 220, 0.5);
  height: auto;
  background: #FFF;
}
.giua1 {
  width: 98%;
  margin: auto;
}
.giua {
  width: 98%;
  margin: auto;
  padding: 5px;
}
.layoutcha {
  display: block;
}
.layoutcon {
  width: 100%;
}
.sieugiua {
  width: 99%;
  margin: auto;
}
.khoi1 {
  width: 100%;
  float: left;
}
.khoi2 {
  width: 100%;
  float: left;
  font-weight: bold;
}
.khoi3 {
  width: 35%;
  float: left;
  text-align: center;
}
.khoi4 {
  width: 65%;
  float: right;
}
.giua3 {
  width: 94%;
  margin: auto;
}
.sieuh2{font-size:20px;}
.khoi2 label {
  width: 90%;
  float: left;
font-size: 14px;
}
}

@media only screen and (min-width: 640px) and (max-width: 1024px){
.trunggian10 {
  width: 65%;
  margin: auto;
  background: url(images/2dau.png);
    background-size: auto;
  height: 70px;
  background-size: cover;
}
.center10 {
  width: 80%;
  float: left;
}
#xmas-popup .popup-content {
  width: 89%;
  height: 52px;
  background: #FFF;
  margin: 392px auto;
  position: relative;
  border: 5px solid #fff;
}
.sieutop {
  text-align: center;
  margin-top: -27px;
}
.vv {
  width: 30%;
  background: #f56f27;
  color: #FFF;
  text-align: center;
  padding: 10px;
  font-size: 16px;
}
.vvvv1 {
  width: 100%;
  background: #f56f27;
  color: #FFF;
  text-align: center;
  padding: 10px;
  font-size: 23px;
}
.center20 {
  width: 17%;
  float: right;
  margin-top: 6px;
}
.giua111phai {
  width: 45%;
  float: right;
  padding: 0px;
  font-size: 13px;
  font-weight: bold;
}
.giua111trai {
  width: 45%;
  float: left;
  padding: 0px;
  font-size: 18px;
  font-weight: bold;
}
.hh1 p {
  background: #FFF;
  padding: 8px;
  font-weight: bold;
  text-align: center;
  border: solid 1px black;
  font-size: 20px;
}
.giua1111trai {
  width: 45%;
  float: left;
  padding: 4px;
  font-size: 20px;
  font-weight: bold;
  box-shadow: 0px 2px 2px 2px #c1c1c1;
}
.giua1111phai {
  width: 45%;
  float: right;
  padding: 4px;
  font-size: 15px;
  font-weight: bold;
  box-shadow: 0px 2px 2px 2px #c1c1c1;
}
.hh1 {
  width: 31%;
  float: left;
}
.giua11trai {
  width: 45%;
  float: left;
  padding: 8px;
  font-size: 18px;
  font-weight: bold;
}
.giua11phai {
  width: 45%;
  float: right;
  padding: 8px;
  font-size: 18px;
  font-weight: bold;
}

.bentraihihi {
  width: 47%;
  float: left;
}
.giua3 {
  width: 90%;
  margin: auto;
}
.giua31 {
  width: 80%;
  margin: auto;
    margin-top: auto;
  padding: 10px;
  font-size: 20px;
  font-weight: bold;
  margin-top: 50px;
}
.giuabb {
  width: 86%;
  margin: auto;
  border-left: solid 9px #f56f27;
  font-size: 20px;
}
.logo {
  font-size: 25px;
  text-transform: uppercase;
  color: var(--color-white);
  font-weight: 700;
  width: 45%;
  float: left;
  text-align: center;
}
.khoi4 {
  width: 70%;
  float: right;
  text-align: left;
}
.khoi3 {
  width: 26%;
  float: left;
  text-align: center;
}
.khoi2 {
  width: 100%;
  float: left;
  font-weight: bold;
}
.khoi1 {
  width: 100%;
  float: left;
  text-align: center;
}
.timkiem {
  width: 5%;
  margin-top: -9px;
}
.hv {
  width: 100%;
  height: 279px;
}
.trunggian1 {
  width: 50%;
  margin: auto;
  background: url(images/2dau.png);
    background-size: auto;
  height: 70px;
  background-size: cover;
}


}