@charset "utf-8";
/* CSS Document */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp, small,strike,strong,sub,sup,tt,var, b,u,i,center, dl,dt,dd,ol,ul,li, fieldset,form,label,legend, table,caption,tbody,tfoot,thead,tr,th,td, article,aside,canvas,details,embed, figure,figcaption,footer,header,hgroup, menu,nav,output,ruby,section,summary, time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}

/* HTML5 display-role reset for older browsers */
ol,ul{list-style:none}
strong, b{font-weight:bold;}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
table{border:solid 1px #CCC;border-collapse:collapse;}
tr:first-child td,tr:hover td{background-color:#EBEBEB;}
td{vertical-align:middle;background-color:#ffffff;border:1px solid #CCC;border-width:0px 1px 1px 0px;text-align:left;padding:5px;font-size:13px;font-family:tahoma;font-weight:normal;color:#000000;}
tr:last-child td{border-width:0px 1px 0px 0px;}
tr td:last-child{border-width:0px 0px 1px 0px;}
tr:last-child td:last-child{border-width:0px 0px 0px 0px;}
tr:first-child td:first-child{border-width:0px 0px 1px 0px;}
tr:first-child td:last-child{border-width:0px 0px 1px 1px;}
.fnc td{vertical-align:middle;background-color:#ffffff;border:none;text-align:left;padding:5px;font-size:13px;font-family:tahoma;font-weight:normal;color:#000000;}
em { font-style:italic;}
/* make IE scale images properly http://code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
img{-ms-interpolation-mode:bicubic}

/* Default link */
a{color:#0a0a0a;text-decoration:none; outline:none}
a:hover,a:focus{color:#F00}
/*a:active,a:visited{color:#F00}*/
p{line-height:22px; margin:8px 0}

body{line-height:22px;font-family:Roboto,tahoma, Arial,Helvetica, sans-serif; font-size:400; font-weight:normal;color:#331b11;margin-top:auto; margin-left:auto; text-align:left; background-color:#f9f9f9;overflow-y: scroll;/*overflow-x: hidden;*/}
.hanoihotel{display:none}

.mntop > ul{width:calc(50% - 82px)}
.mntop > ul:first-child{float:left; text-align:left}
.mntop > ul:last-child{float:right; text-align:right}
.mntop > ul > li > a{float:left; color:#f1f1f1; text-decoration:none; text-transform:uppercase; font-weight:700}/*f1f1f1 - dab598*/
.mntop > ul > li:hover > a{color:#f1f1f1; background-color:#f28400; border-radius:5px} /*f28400 - ffc100*/


.Qtable {float:left}
.btt{float:left; position:relative;-moz-box-shadow:0 3px 5px rgba(0,0,0,.75);-webkit-box-shadow:0 3px 5px rgba(0,0,0,.75);box-shadow:0 3px 5px rgba(0,0,0,.75);}
.btt:hover{float:left;border:solid 5px #FF9900}
.btt .num{float:left; width:40px; height:30px; text-align:center;  background-color:#0086ab;font-size:20px; font-weight:bold; padding-top:10px; color:#f5e3bd} /*f98500 - 57340e*/
.btt:hover .num{ top:0; left:0;}
.btt .bname{background-color:rgba(91,191,184, 0.5); color:#331b11; margin-left:40px;font-size:18px; font-weight:700; padding:1px 0 0 5px;text-shadow: 1px 1px #FFF;}
.btt .bn2{padding:12px 0 0 5px;height:28px;}
.btt .bn3{padding:12px 0 0 5px;height:28px; font-size:16px}
.btt .bname a{color:#252627;}
.btt .bname a:hover{color:#F00;}
.btt .bname .bsub{top:3px;font-weight:bold; font-size:16px; text-transform:none}
.btt:hover .bname{ top:0; left:40px;background-color:rgba(232,192,140,0.7)}
.btt .pr{float:left;width: calc(100% - 10px); bottom:0; left:0;height:30px; text-align:center; background-color:rgba(91, 191, 184, 0.5);;font-size:35px; font-weight:bold; padding:10px 5px 0; color:#F00;text-shadow: 1px 1px #000;}
.btt .pr:after{content:" VNĐ"; font-size:16px}
.btt .binfo{float:left; position:absolute;background-color:rgba(91,191,184, 0.5); color:#000; font-weight:bold; padding:5px; opacity:0;text-shadow: 1px 1px #FFF;}
.btt:hover .binfo a{color:#000;}
.btt:hover .binfo a:hover{color:#F00;}
.btt:hover .binfo{display:block; opacity:1}
.btt:hover .binfo{top:0px;}

.price{font-size:35px; font-weight:700; color:red; text-align:center}
.dcount > ul > li{font-size:14px; font-style:italic}
.prol{float:left; width:60%; padding-right:2%}
.prol > a > img{max-width:100%; height:auto !important; margin-bottom:5px;}
.prol > a:nth-child(2) > img, .prol > a:nth-child(3) > img{ max-width:150px; height:auto !important; width:auto !important; max-height:80px; margin-left:2px; margin-right:2px}
.pror{float:left; width:38%}
.pname{font-size:20px;color:#331b11; text-transform:uppercase; line-height:25px; font-weight:700}
.dtop{float:left; width:100%; height:110px; background-color:#5bbfb8; color:#f1f1f1;/*position:fixed; top:0; left:0;*/-moz-box-shadow:0 1px 5px rgba(0, 0, 0, 0.75);-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.75);box-shadow: 0 1px 5px rgba(0, 0, 0, 0.75)} /*f8ba22 - dab598*/
.mntop{margin:auto; height:35px; margin-top:75px}
.dlogo{margin:auto; position:absolute; top:0;  }/*1a1414 - f28400 - background-color:#f28400; -moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.75);-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);box-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);*/
.dlogo:hover{top:-5px;}
.dlogo > a > img{border:none}
.dbann{float:left; width:100%; text-align:center; margin-top:10px}
.dbann > img{width:auto; max-width:100%; height:auto !important}
.dmain{float:left; width:100%; padding:5px 0;}
.dmt{padding:10px 0}
.dmain > h1{margin:auto;color:#ffffff; text-transform:uppercase; font-size:20px; font-weight:700}/*#dab598 - #ffffff*/
.main{margin:auto;}

h2{font-size:18px; font-weight:700; line-height:18px}
h3{font-size:16px; font-weight:700; line-height:16px}
.bname h3,.bname h2{line-height:20px}
h4,h5,h6{font-size:14px; font-weight:700; line-height:14px}
.add{color:#0a0a0a; text-align:center; font-size:13px} /*0a0a0a - dab598*/
.qm h2, qm h3, qm h4, qm h5{padding:10px 0 5px 0}
.ptop10{padding-top:10px}.pbottom10{padding-bottom:10px}.pbottom50{padding-bottom:50px}.mtop10{margin-top:10px}.mbottom10{margin-bottom:10px}
.ptop5{padding-top:5px}.pbottom5{padding-bottom:5px}.mtop5{margin-top:5px}.mbottom5{margin-bottom:5px}
.dlogo,.binfo,.pr,.mntop > ul > li > a{-webkit-transition-duration:.2s;-moz-transition-duration:.2s;-o-transition-duration:.2s;transition-duration:.2s}
.talk{float:left; width:100%;position:fixed; bottom:0; left:0; background-color:rgba(242, 132, 0,.8);text-align:center; color:#fdc922; font-size:30px; font-weight:700; padding:5px 0; line-height:28px}
.talk > span{font-size:14px; margin:0; padding:0; line-height:14px; display:none}
.talk > a{color:darkred;}/*darkred - #fdc922*/

body::-webkit-scrollbar {width: 12px;}
body::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(91, 191, 184, 0.5); -webkit-border-radius: 10px;border-radius: 10px;}
body::-webkit-scrollbar-thumb {-webkit-border-radius: 10px;border-radius: 10px;background: rgba(91,191,184, 0.8); -webkit-box-shadow: inset 0 0 6px rgba(91, 191, 184, 0.5); }
body::-webkit-scrollbar-thumb:window-inactive {background: rgba(91,191,184, 0.5); }

.dpage{float:left; width:100%; margin:5px 0; background-color:#eeeff1; padding:10px 0; text-align:center; border-top:solid 1px #ce1317}
.dpage span{ color:#282828; padding:5px 10px; margin:2px}
.dpage a{ color:#282828; border-radius:5px; background-color:#e0e0e0; padding:5px 10px; margin:2px}
.dpage a:hover,.dpage a.pclick{ color:#FFF; border-radius:5px; background-color:#246fc8; padding:5px 10px; margin:2px}

.combo{width:calc(100% - 8px); padding:3px; margin:2px 0}
.combot1{width:50px;}.combot2{width:calc(100% - 60px); padding:3px}
.combob{padding:3px; margin:3px}
.combo,.combot1,.combot2{border:solid 1px #331b11; background-color:#ead0a6;}
.combob{border:solid 1px #ec4800;background-color:#ec4800; cursor:pointer; color:#FFF; font-weight:700; padding:3px 5px}
.combo:hover,.combot1:hover,.combot2:hover,.combob:hover{border:solid 1px #C00;background-color:#5bbfb8}
.combob:hover{ color:#333}
input[placeholder],textarea[placeholder], [placeholder], *[placeholder] {color:#331b11; font-size:14px; font-style:italic}
::-webkit-input-placeholder {color:#331b11; font-size:14px; font-style:italic}
:-moz-placeholder {color:#331b11; font-size:14px; font-style:italic}
::-moz-placeholder {color:#331b11; font-size:14px; font-style:italic}
:-ms-input-placeholder {color:#331b11; font-size:14px; font-style:italic}

.ctl{float:left; width:60%; padding-right:5%}
.ctr{float:left; width:35%}
.ctrl{float:left; width:110px; padding-right:10px}
.ctrr{float:left; width:calc(100% - 120px)}
.d100{float:left; width:100%}
.ctr > .d100{padding:2px 0}
.fnc{float:left; width:100%; padding:0}
.bggr{background-color:#F7F7F7}
.bgr{background-color:#0086ab;}
.bgr2{background-color:#e1e1e3;}

.onews > h2{padding:5px 10px; color:#f1f1f1} /*f1f1f1-dab598*/
.add > a{color:#dab598}
.add > a:hover{color:red}
.qm ul > li:before{content:"✓ "; color:#dd0000}
.qm ul{list-style-type:none; list-style:none; padding:0}
.qm ul > li > ul > li:before{content:"➤ "; color:#dd0000; margin-left:20px}
.qm ul > li > ul > li > ul > li:before{content:"➤ "; color:#dd0000; margin-left:50px}
.qm ul > ul{list-style-type:none; list-style:none; padding:0 0 0 15px}
.news{float:left; width:50%}
.news > img{float:left; width:200px; margin-right:10px}
.news > h2, .news > h3{float:left; width:calc(100% - 210px); padding-bottom:5px}
.center{text-align:center !important}.red,.hotline{color:red}.b{font-weight:700 !important}.clear{clear:both}.right{text-align:right !important}
.big{ font-size:30px; font-weight:700; line-height:35px}
.mid{ font-size:20px; font-weight:700; line-height:25px}
.boxxanh,.boxdo,.boxvang,.boxtim{padding:0 5px;margin:5px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;background-color:#FFC}
.boxxanh{border:dashed 2px #39F}
.boxdo{border:dashed 2px #F00}
.boxvang{border:dashed 2px #FC0}
.boxtim{border:dashed 2px #F0C}
.bold{font-weight:700}.italic{font-style:italic}
.qm img{max-width:100%; height:auto !important}
.dottop{border-top:dotted 1px #666666}
@media all and (max-width:599px) {
.talk > span{display:block} 
.talk > a{padding:3px 0}
.talk{font-size:30px;line-height:22px; text-align:left !important}
.btt{width:calc(100% - 30px); margin:15px;min-height:320px}
.btt:hover{width:calc(100% - 30px); margin:10px;}
.btt > a:first-child{width:100%; text-align:center; float:left}
.btt img{max-width:100%}
.btt .bname{width:calc(100% - 45px); height:35px;overflow: hidden;}
.btt:hover .pr{top:135px; left:0;}
.btt .binfo{width:calc(100% - 10px);font-size:20px;top:330px;}
.Qtable {width:738px;}
.mntop > ul{width:50%; float:left}
.mntop > ul:first-child{margin-right:0;}
.mntop > ul:last-child{margin-left:0; float:right}
.mntop > ul > li{float:left; width:100%; padding:0}
.mntop > ul > li > a{ padding:5px 5px;font-size:14px; text-transform:none;}
.mntop > ul > li:hover > a{padding:5px 8px 5px 2px;}
.dlogo{width:80px; height:80px;left:calc(50% - 40px);}
.dlogo > a > img{border:none; width:80px; height:auto !important}
.main, .dmain > h1,.mntop{width:100%;}
.dtop{position:relative; height:180px}
.mntop{margin:auto; height:auto; position:absolute; margin-top:3px; bottom:0; border-top:solid 1px #1a1414}
.prol{float:left; width:100%; padding-right:0%}
.pror{float:left; width:100%}
}
@media only screen and (min-width: 600px){
.talk > span{display:block}
.talk > a{padding:3px 0}
.talk{font-size:30px;line-height:22px}
.btt{width:calc(50% - 30px); margin:15px;min-height:370px}
.btt:hover{width:calc(50% - 30px); margin:10px;}
.btt img{max-width:100%}
.btt .bname{width:calc(100% - 45px); height:35px;overflow: hidden;}
.btt:hover .pr{top:135px; left:0;}
.btt .binfo{width:calc(100% - 10px);font-size:20px;top:330px;}
.Qtable {width:738px;}
.mntop > ul{width:auto}
.mntop > ul:first-child{margin-right:0;}
.mntop > ul:last-child{margin-left:0; float:left}
.mntop > ul > li{float:left}
.mntop > ul > li > a{ padding:7px 5px;font-size:14px; text-transform:none}
.mntop > ul > li:hover > a{padding:7px 8px 7px 2px;}
.dlogo{width:80px; height:80px;left:calc(50% - 40px);}
.dlogo > a > img{border:none; width:80px; height:auto !important}
.main, .dmain > h1,.mntop{width:100%;}
.prol{float:left; width:100%; padding-right:0%}
.pror{float:left; width:100%}
}

@media only screen and (min-width: 768px){
.talk > span{display:none}
.btt{width:calc(33% - 20px); margin:10px;min-height:288px}
.btt:hover{width:calc(33% - 20px);margin:5px;}
.btt img{max-width:100%}
.btt .bname{width:calc(100% - 45px); height:35px;overflow: hidden;}
.btt:hover .pr{top:135px; left:0;}
.btt .binfo{width:calc(100% - 10px);font-size:20px;top:330px;}
.Qtable {width:738px;}
.mntop > ul{width:calc(50% - 62px)}
.mntop > ul:first-child{margin-right:62px;}
.mntop > ul:last-child{margin-left:62px; float:left}
.mntop > ul > li > a{ padding:7px 5px;font-size:14px; text-transform:none}
.mntop > ul > li:hover > a{padding:7px 8px 7px 2px;}
.dlogo{width:120px; height:120px;left:calc(50% - 62px);}
.dlogo > a > img{border:none; width:120px; height:auto !important}
.main, .dmain > h1,.mntop{width:100%;}
.prol{float:left; width:60%; padding-right:2%}
.pror{float:left; width:38%}
}
@media all and (min-width: 1000px) {
.btt{width:303px; margin:15px;min-height:370px}
.btt:hover{width:303px; margin:10px;}
.btt img{max-width:303px}
.btt .bname{width:258px; height:39px;overflow: hidden;}
.btt:hover .pr{bottom:195px; left:0;}
.btt .binfo{width:293px;font-size:20px;top:330px;}
.Qtable {width:970px;}
.mntop > ul{width:calc(50% - 82px)}
.mntop > ul:first-child{margin-right:82px;}
.mntop > ul:last-child{margin-left:82px;}
.mntop > ul > li > a{ padding:7px 13px;font-size:14px;}
.mntop > ul > li:hover > a{padding:7px 11px 7px 15px;}
.dlogo{width:163px; height:160px;left:calc(50% - 82px);}
.dlogo > a > img{border:none; width:163px; height:160px}
.main, .dmain > h1,.mntop{width:1000px;}
.prol{float:left; width:60%; padding-right:2%}
.pror{float:left; width:38%}
.fnc{width:48%; padding:5px 1%; float:left}
}
.oversell,.soon{position:relative}
.oversell::after,.soon::after{position:absolute; bottom:35px; right:0; font-size:24px; font-weight:700; color:red; text-decoration:blink;background-color:rgba(51,27,17,.8);text-align:center;padding:5px; border-radius:10px 0 0 10px}
.oversell::after{content: "Sold out / Bán hết"}
.soon::after{content: "Sắp có"}

.btn {display: inline-block;padding: 6px 12px;margin-bottom: 0;font-size: 14px;font-weight: 400;line-height: 1.42857143;text-align: center;white-space: nowrap;vertical-align: middle;-ms-touch-action: manipulation;touch-action: manipulation;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;background-image: none;border: 1px solid transparent;cursor: pointer;overflow: visible;text-transform: none;-webkit-appearance: button;margin: 0;border-radius: 0; background-color:#FFF; border:solid 1px #CCCCCC}
.btn:hover{ background-color:#EFEFEF}
.btn-danger {color: #fff;background-color:#0086ab;border-color:#0086ab; border-radius:4px 0 0 4px}
.btn-success {color: #fff;background-color: #0086ab;border-color: #0086ab; border-radius:0 4px 4px 0}
.btn-danger:hover,.btn-success:hover{background-color:#dc0a00;border-color:#dc0a00}
.input-group{float:left; margin:5px 0;margin-top:10px}
.input-group-addon, .input-group-btn, .input-group .form-control {display: table-cell; float:left}
.form-control {display: block;width:20px;height: 20px;padding: 6px;font-size: 16px; font-weight:700;line-height: 1.42857143;color: #555;background-color: #fff;background-image: none;border: 1px solid #ccc; border-left:none; border-right:none;border-radius:0;-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);box-shadow: inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;pointer-events:none;}
.cont img{width:auto;height:auto;max-width:100% !important}
#cart{position:fixed; bottom:50px; left:5px; background-color:rgba(255,255,0,.7); padding:3px 5px; font-size:16px; font-weight:700; width:130px; line-height:50px; height:50px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px; color:red; display:none}
#cart > a > img{vertical-align:middle; padding:0 5px; float:left; width:50px; height:50px}
#popcart{width:250px;height:80px;background-color:rgba(255,255,0,.85); color:red; font-size:16px; font-weight:700; text-align:center;position:fixed;top:50%;left:50%;margin-left:-100px;margin-top:-50px;box-shadow:0 0 5px rgba(148, 0, 22, 0.75);border-radius:5px; padding:10px; z-index:999; display:none}
.pronow{background-color:#0086ab; padding:7px 10px; color:#FFF; font-weight:700;-moz-box-shadow:0 0 3px rgba(237, 145, 0, 0.75);-webkit-box-shadow: 0 0 3px rgba(237, 145, 0, 0.75);box-shadow: 0 0 3px rgba(237, 145, 0, 0.75); position:relative; border:none; cursor:pointer}
.pronow:hover{ background-color:#dc0a00;color:white}
.pronow{float:left; font-weight:normal;padding:6px; margin:11px 0 0 5px; border-radius:3px}
.pronow{margin-right:0}