body{font-size:100%;font:Arial, Helvetica, sans-serif}
a{ text-decoration:none;color:#FFF}
a:hover{color:#000}
#xoa{clear:both}
*{margin:0 auto}
#main{width:100%;height:auto; background-image:url(../img/wat.jpg);padding:3% 0% 2% 0%;background-repeat:round;background-attachment:fixed;}
#top{width:60%;height:auto;padding:2% 0% 0% 0%;margin:1% auto 0% auto;}
#mid{width:70%;height:auto;margin:2% auto 0% auto;-webkit-border-radius:2em; border:solid 0.2em #66CCFF;list-style-type:none;}
#top2{width:70%;height:auto;margin:1.5% auto 0% auto;-webkit-border-radius:2em; border:solid 2px #66CCFF;}
#bot{width:70%;height:auto;margin:1.5% auto 0% auto;-webkit-border-radius:1em; border:solid 2px #66CCFF;}
#gotop{width:3em;height:3em;margin:41% 0% 0% 87%;position:fixed;-moz-border-radius: 1em;-webkit-border-radius: 1em;border-radius: 1em;}


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

   body { font-size: 1.2vw; }
   #mid{width:90%}
   #bot{width:90%}
   #top2{width:90%}
   #gotop{margin:130% 0% 0% 96%}
   body iframe{width:92% ;height:30em}
   #logoql img{width:1em;height:1em}
   #kctm iframe{width:100%}
   #home iframe{width:100%}
   #kcnl iframe{margin:0% 0% 0% 5%}
}

/*---------------------menu--------------------*/
#menu{width:90%;height:100%}
#menubox{width:100%;height:auto;text-align:center;;margin:2% 0% 0% 5%}
#menubox li{ list-style-type:none; text-decoration:none;float:left; margin:1% 0% 2% 2%;}
#menubox li a{color:#CCC;}
#menubox li a:hover{color:#FFF;font-size:1.1em}
#diachi{color:#CCC;margin:2% 0% 1% 0%;text-align:center;width:100%;height:50%;float:left}

/*--------------------logoname----------------*/
#logo{margin:0% 0% 0% 4%;float:left;width:13%;height:13%}
#logoname{width:60%;height:30%;margin:3% 0% 0% 4%; font-size:3em; text-align:center;float:left}
#logoname a{color:#FFF;text-shadow:4px 4px 4px #00CCFF}
#logoname a:hover{color:#000}
#logohqd{margin:3% 0px 2% 40%;padding-bottom:10px;}
#logohqd img:hover{transform:scale(1.1,1.1)}
#logoface{margin-bot:5px;width:3%;height:3%}
#logoface img:hover{transform:scale(1.3,1.3)}
#logondkc{margin:2% 0px 1% 40%;padding-bottom:20px;}
#logondkc img:hover{transform:scale(1.1,1.1)}
#logoql{width:auto;height:auto;margin:0% 0% 0% 0%;float:right}

/*--------------------mid---------------------*/
#kcnl{width:80%;height:auto;margin:0% 0% 0% 9%;color:#FFF;}
#kcsl{width:80%;height:auto;margin:0% 0% 0% 9%;color:#FFF;}
#kctp{width:80%;height:auto;margin:0% 0% 0% 9%;color:#FFF;}
#kctm{width:80%;height:auto;margin:0% 0% 0% 9%;color:#FFF;}
#gt{width:80%;height:auto;text-align:left;margin:0% 0% 0% 9%;color:#FFF;}
#splt{width:80%;height:auto;text-align:center;margin:0% 0% 0% 9%;color:#FFF;}
#home{width:80%;height:auto;margin:0% 0% 0% 9%;color:#CCC}
#chitiet{width:80%;height:auto;margin:0% 0% 0% 9%;color:#FFF;padding:1% 0% 0% 0%}

/*-------------------kcnl---------------*/
#kcnl-l{width:33%;height:200px;background-color:#696;float:left}
#kcnl-m{width:33%;height:200px;background-color:#F33;float:left;margin-left:0.5%;}
#kcnl-r{width:33%;height:200px;background-color:#A5A5A5;float:left;margin-left:0.5%;}
#kcnl h4{margin:0px 0px 15px 15px;font-size:1em;}
#kcnl h1{text-align:center;text-shadow:4px 4px 4px #00CCFF}

/*-------------------kcsl---------------*/
#kcsl-l{width:33%;height:200px;background-color:#696;float:left;}
#kcsl-m{width:33%;height:200px;background-color:#F33;float:left;margin-left:0.5%;}
#kcsl-r{width:33%;height:200px;background-color:#A5A5A5;float:left;margin-left:0.5%;}
#kcsl h4{margin:0px 0px 15px 15px;font-size:1em;}
#kcsl h1{text-align:center;text-shadow:4px 4px 4px #00CCFF}

/*-------------------kctp---------------*/
#kctp-l{width:33%;height:200px;background-color:#696;float:left}
#kctp-m{width:33%;height:200px;background-color:#F33;float:left;margin-left:0.5%;}
#kctp-r{width:33%;height:200px;background-color:#A5A5A5;float:left;margin-left:0.5%;}
#kctp h4{margin:0px 0px 15px 15px;font-size:1em}
#kctp h1{text-align:center;text-shadow:4px 4px 4px #00CCFF}
#kctp h3{text-align:center;}

/*-------------------kctm---------------*/
#kctm-l{width:33%;height:200px;background-color:#696;float:left}
#kctm-m{width:33%;height:200px;background-color:#F33;float:left;margin-left:0.5%;}
#kctm h4{margin:0px 0px 15px 15px;font-size:1em;}
#kctm h1{text-align:center;text-shadow:4px 4px 4px #00CCFF}

/*-------------------gt---------------*/
#gt-l{width:33%;height:200px;background-color:#696;float:left}
#gt-m{width:33%;height:200px;background-color:#F33;float:left;margin-left:0.5%;}
#gt-r{width:33%;height:200px;background-color:#A5A5A5;float:left;margin-left:0.5%;}
#gt h4{margin:0px 0px 15px 15px;font-size:1em;color:#FFF}
#gt h1{text-align:center;text-shadow:4px 4px 4px #00CCFF}

/*-------------------home---------------*/
#home-l{width:33%;height:200px;background-color:#696;float:left}
#home-m{width:33%;height:200px;background-color:#F33;float:left;margin-left:0.5%;}
#home-r{width:33%;height:200px;background-color:#A5A5A5;float:left;margin-left:0.5%;}
#home h4{margin:0px 0px 15px 15px;font-size:1em;text-align:center;color:#FFF}
#home h1{text-align:center;text-shadow:4px 4px 4px #00CCFF}
#home a{color:#FFF}
#home a:hover{color:#000}

/*-------------------splt---------------*/
#splt-tilte{width:100%;height:4em;margin:1% 0% 0% 0%;}
#splt-tilte ul li{list-style:none;}
#tilte{width:68%;height:100%;float:left;}
#tilte h1{margin:1.5% 5% 0% 0%;float:right}
#shopcart{width:100%;height:100%;border:1px solid #FFF;float:left;margin:0% 0% 0% 0.3%}
#sc-l{width:48%;height:100%;float:left;background-color:#9F3;}
#sc-l h3{margin:13% 0% 0% 0%}
#sc-m{width:22%;height:100%;float:left;background-color:#066;margin:0% 0% 0% 0%;}
#sc-r{width:30%;height:100%;float:left;background-color:#939}
#sc-r h3{margin:20% 0% 0% 0%}
#sp{width:100%;height:auto;margin:1% 0% 1% 0%;}
#splt-gh{width:100%;height:3em;float:left;border:1px solid #FFF;margin:0% 0% 0% 0%}
#khungsp{width:100%;height:auto;float:left;margin:2% 2.5% 2% 2.5%;border-top-left-radius:1em;border-bottom-right-radius:1em;box-shadow:0.2em 0.2em 0.5em #000000;}
#tensp{width:65%;height:10%;margin:4% 0% 0% 29%;text-align:center}
#tensp:hover{color:#000}
#imgsp{width:22%;height:20em;background-color:#FFF;margin:2% 0% 5% 5%;border-top-left-radius:1em;border-bottom-right-radius:1em;float:left}
#ndsp{width:65%;height:18em;border:1px solid #FFF;margin:2% 0% 0% 29%;overflow:auto;border-top-left-radius:1em;border-bottom-right-radius:1em;box-shadow:0.2em 0.2em 0.5em #000000;}
#textsp{width:98%;height:auto;margin:1% 1%;text-align:left;}
#gia{width:65%;height:9%;margin:1% 0% 3% 29%;text-align:center}
#giohang{width:45%;height:8%;background-color:#000;float:left;margin:3% 0% 3% 3%;-webkit-border-radius:0.3em}
#giohang:hover{background-color:#FFF;color:#000}
#cnt-ct{width:45%;height:7%;background-color:#000;float:left;margin:3% 0% 3% 28%;-webkit-border-radius:0.3em;padding:2% 0% 0% 0%}
#cnt-ct:hover{background-color:#FFF;color:#000}

/*--------------------menu-shopcart----------------*/
#menu-shopcart{padding:1% 0% 0% 0%;margin:0% 0% 0% 0%;background-color:#000;width:31%;float:left}
#menu-shopcart ul{font-family: Arial, san-serif;font-size: 12px;padding:0;margin:0}
#menu-shopcart ul li{float:left;position:relative;width:20%;}
#menu-shopcart ul a{text-decoration:none;color:#fff;display:block;font-weight:bold;padding:25px 0px;background:#000;}
#menu-shopcart ul a:hover{background:#555;}
//CSS Tạo Menu Cấp 2
#menu-shopcart li ul a{background:#444;}
#menu-shopcart li ul{position:absolute;display:none;width:200px;margin:0.5% 0% 0% 35px;background-color:#000}
#menu-shopcart li ul a{padding:15px 5px}
#menu-shopcart li ul li{width:100%;}
#menu-shopcart li:hover ul{display:block;}

/*-------------------chitiet---------------*/
#ct-name h1{width:100%;height:6%;margin:1% 0% 0% 0%;text-align:center;border-top-left-radius:0.5em;border-bottom-right-radius:0.5em;box-shadow:0.2em 0.2em 0.5em #000000;}
#ct-img{width:30%;height:20em;float:left;margin:3% 0% 0% 4%;border-top-left-radius:1em;border-bottom-right-radius:1em;box-shadow:0.2em 0.2em 0.5em #000000;}
#ct-tt{width:60%;height:20em;float:left;margin:3% 0% 5% 2%;border-top-left-radius:1em;border-bottom-right-radius:1em;box-shadow:0.2em 0.2em 0.5em #000000;text-align:left}
#ct-bl{width:87%;height:auto;float:left;margin:3% 0% 0% 6%;border-top-left-radius:1em;border-bottom-right-radius:1em;box-shadow:0.2em 0.2em 0.5em #000000;}
#splt-gh-l{width:32%;height:100%;background-color:#990;float:left;margin:0% 0% 0% 1%}
#splt-gh-m{width:32%;height:100%;background-color:#36C;float:left;margin:0% 0% 0% 1%}
#splt-gh-r{width:32%;height:100%;background-color:#C69;float:left;margin:0% 0% 0% 1%}
#tt-gia{width:100%;height:20%;float:left;margin:1% 0% 0% 0%}
#tt-gia h1{margin:3% 0% 0% 0%;text-align:center}
#tt-gia h4{margin:3% 0% 0% 0%;text-align:center}
#tt-sl{width:58.5%;height:20%;float:left;margin:1% 0% 1% 0%;}
#tt-sl h3{margin:7% 0% 0% 5%;float:left;}
.soluong{margin:-7% 0% 0% 40%;float:left;}
#tt-btn{width:39.5%;height:20%;float:left;margin:1% 0% 0% 1%}
#btn{width:60%;height:40%;float:left;margin:8% 0% 1% 15%;-webkit-border-radius:0.3em;box-shadow:0em 0em 0.3em #000000;;background-color:#09F;font-size:0.7vw;text-align:center;padding:5% 0% 0% 0%;cursor:pointer}
#btn:hover{background-color:#06C}
#tt-ct{width:90%;height:50%;float:left;margin:5% 0% 0% 5%;border-top-left-radius:1em;border-bottom-right-radius:1em;box-shadow:0.2em 0.2em 0.5em #000000;}

/*-------------------ql---------------*/
#ql{width:80%;height:auto;background-color:#FFF;padding:1% 0% 1% 0%;margin:1% auto 1% auto}
#ql-t{width:100%;height:5em;background-color:#FFF;border:1px solid #000;text-align:center}
#ql-b{width:100%;height:auto;background-color:#FFF}
#ql-b-l{width:20%;height:auto;background-color:#FFF;float:left;margin:1% 0% 0% 1%;}
#ql-b-r{width:78%;height:auto;background-color:#FFF;float:left;margin:1% 0% 0% 1%;}
#sanpham a{color:#000}
#sanpham a:hover{color:#F00}
#themsp{width:100%;height:auto;margin:1% 0% 1% 0%;}
#suasp{width:100%;height:auto;margin:1% 0% 1% 0%;}
#khung-ql{width:100%;height:2em;margin:1% 0% 1% 0%;padding:2% 0% 0% 0%;text-align:center;color:#000}

/*-----------------quantity-------------------*/
.quantity-right-plus, .quantity-left-minus {cursor: pointer;}
.quantity-left-minus.glyphicon, quantity-right-plus.glyphicon {display: block;cursor: pointer;}

/*-----------------------img-gt-----------------------*/
#img-gt{wodth:100% ;height:auto;margin:2% 0% 2% 0%}

/*-----------------------login-----------------*/
.login{width:80%; text-align:left;float:left;margin:0px 0% 0px 28%;}
.login a{text-decoration:none;	}
.login a:hover{color:#F00;}

/*-------------------------login menu da cap-------------------------*/
ul.drop{float:right;list-style:none;margin:0% 2% 0% 0%;padding:0% 10% 0% 0% ;width:120px;}
ul.drop li,ul.drop li a{ height:auto; line-height:auto;padding-left:0px;position:relative;display: block;text-decoration: none;color: darkblue;}
ul.drop li:hover,ul.drop li a:hover{display:block;background:#fbfbfb;color: red;}
ul.drop li > ul.drop{background:#FFFFFF; position:absolute;top:20px; left:0px; display:none;}
ul.drop li:hover > ul.drop{display:block;}