@charset "utf-8";
@font-face{font-family:secondfont;src:url(../fonts/Gotu-Regular.ttf);font-weight:300}
@font-face{font-family:secondfont;src:url(../fonts/Lemonada-Bold.ttf);font-weight:bold}
@font-face{font-family:secondfont;src:url(../fonts/Lemonada-Light.ttf);font-weight:200;}
@font-face{font-family:mainfont;src:url(../fonts/BalooBhai2-Regular.ttf);font-weight:300}
@font-face{font-family:mainfont;src:url(../fonts/BalooBhai2-Bold.ttf);font-weight:bold}
@font-face{font-family:mainfont;src:url(../fonts/BalooBhaina2-Medium.ttf);font-weight:200;}

:root {
  --normal-color:#282828;
  --second-color:#ffffff;
  --active-color:#6ebe1f;
  --deactive-color:#979797;
  --small-font-size:14px;
  --normal-font-size:20px;
  --big-font-size:40px;
  --extra-font-size:60px;
  --max-width-container:1200px;
  --max-width-smallcontainer:900px;
}
*{box-sizing:border-box;}
a{text-decoration:none;color:inherit;}
img{object-fit: cover;}
p{padding: 0 10px;}
.width100{width: 100%;}
.height100{height:100%;}
.width95{width: 95%;}
.width90{width: 90%;}
.width85{width: 85%;}
.width80{width: 80%;}
.width75{width: 75%;}
.width70{width: 70%;}
.width65{width: 65%;}
.width60{width: 60%;}
.width55{width:55%;}
.width50{width:50%;}
.width45{width: 45%;}
.width40{width: 40%;}
.width35{width: 35%;}
.width30{width: 30%;}
.width25{width: 25%;}
.width20{width: 20%;}
.width15{width: 15%;}
.flexcontainer{display: flex;justify-content: space-between;flex-wrap: wrap;}
.bggray{background: var(--deactive-color);color: var(--second-color);}
.item{float:left;width:100%;}
.container{width:100%;max-width:var(--max-width-container); margin:0 auto;}
.smallcontainer{width:100%;max-width:var(--max-width-smallcontainer); margin:0 auto;}

.title{font: var(--big-font-size) secondfont;color:var(--active-color);font-weight: normal;text-align: center;margin:0;}
h1.title {font-size:var(--extra-font-size);}
.smalltitle{font:var(--big-font-size) mainfont;color:var(--active-color);font-weight:normal;}
.thoigiandangbai{font:14px mainfont;font-style:italic;color:#979797;}
body{font:300 var(--normal-font-size) mainfont; color:var(--normal-color);display:grid; grid-template-columns:100%; grid-gap:0; margin:0;}
.readmore{font:var(--small-font-size) mainfont;font-weight:bold;color:var(--second-color); background: var(--active-color);padding: 10px 30px;border-radius: 20px;}
.menu{font:var(--normal-font-size) mainfont;color:var(--second-color);padding: 0 10px}
.menu.active{color:var(--active-color);}
.menu.haschild:affter{content:'>';transform: rotate(90deg);}
.menu.haschild.active:affter{color:var(--active-color);}
.grid12col{display: grid;grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto;justify-content: space-between;grid-row-gap: 20px}
.grid2col{display: grid;grid-template-columns:48% 48%;justify-content: space-between;grid-row-gap: 20px}
.grid3col{display: grid;grid-template-columns:30% 30% 30%;justify-content: space-between;grid-row-gap: 20px}
.grid4col{display: grid;grid-template-columns:22% 22% 22% 22%;justify-content: space-between;grid-row-gap: 20px}
.item2row{grid-row:auto / span 2;}
.item2col{grid-column: auto / span 2;}
.item3col{grid-column: auto / span 3;}
.item4col{grid-column: auto / span 4;}
.item5col{grid-column: auto / span 5;}
.item6col{grid-column: auto / span 6;}
.item7col{grid-column: auto / span 7;}
.item8col{grid-column: auto / span 8;}
.item9col{grid-column: auto / span 9;}
.item10col{grid-column: auto / span 10;}
.item11col{grid-column: auto / span 11;}
.item12col{grid-column: auto / span 12;}
.clearfix:after{content:'';visibility:hidden;clear:both;display:table;}
.active{color:var(--active-color);}
.boxmiddle {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);text-align: center; font: inherit;}
.boxbottom{position: absolute;bottom: 0;left:0; font: inherit;}
.textcenter{text-align:center;}
#banner{position: relative;}
#banner #bannerslide .banneritem{position: relative;}
#banner #bannerslide .banneritem img{width:100%;}
#banner #bannerslide .banneritem .bannersample{position: absolute;transform: translate(-50%,-50%);top: 50%;left: 50%;}
#sanpham .sanphamitem{position:relative;}
#sanpham .sanphamitem img{width:100%;}
#sanpham .sanphamitem a.titlebox{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
#sanphamcontainer{position:relative;margin-top:-30px;}
header{padding:20px 0 0; background:url(../images/topbg1.png) repeat-x;position: fixed;z-index: 100;opacity: 0.8;width:100%;}
#boxlogo{width:30%;}
#boxlogo img{height: 75px}

#boxmenu{display: flex;justify-content: space-between;color: var(--second-color);}
#boxmenu .logo{padding: 0 0 0 20px;}
#boxmenu .logo img{width:230px;}
#boxmenu .headersocial{display:flex;justify-content:space-between;align-items: center;padding:0 20px 0 0;}
#boxmenu .headersocial a{padding:0 10px;}
#searchbox{float:left;}
#searchbox input{border:none;border-bottom:1px solid #ccc; background:url(../images/icon_06.jpg) no-repeat right;background-size:contain; width:300px;}
#hotlinebox{float:right; color:#d27892;}
#hotlinebox a{font-family: mainfont;font-weight: bold;font-size: var(--small-font-size);color: var(--normal-color);}
#hotlinebox img{vertical-align:middle;}
#hotlinebox #topsocial{display: inline-block;margin-left: 80px;}
#topmenu{}
#topmenu ul{list-style:none; padding:0; display:flex;justify-content: space-between;}
#topmenu ul li{position:relative;padding: 0 20px;text-transform: uppercase;}
#topmenu ul li:first-child{padding-left:0;}

#topmenu ul li.active a{color:var(--active-color);}

#topmenu ul li.haschild:first-child{padding-left:0;}
#topmenu ul li.haschild a:after{content: '';background: url(../images/iconmenu.jpg) no-repeat right;width: 10px;height: 10px;position: absolute;margin: 5px;}
#topmenu ul li.haschild.active a:after{background:url(../images/iconmenuactive.jpg) no-repeat right;}
#topmenu ul li ul{display:none; padding:30px;position:absolute;top:18px;left:0;z-index:10;background:rgba(0,0,0,0.5); transition:all 1s;}
#topmenu ul li:hover ul{display:block}
#topmenu ul li ul li{padding:10px 0; color:var(--second-color); border-top:1px solid var(--active-color); border-right:none;width:200px;}
#topmenu ul li ul li:first-child{border-top:none;}
#topmenu ul li.active ul li a{color:#d27892;font:14px mainfont;}
#topmenu ul li.haschild ul li a:after,#topmenu ul li.haschild.active ul li a:after{background:none;}
footer{color: var(--second-color);font-size: var(--small-font-size);}
footer .bgfooter{background:url(../images/background-footer.jpg) repeat;padding:50px 0;}
footer .footeritem h3{font-weight: normal; color:var(--active-color);}
footer .footeritem .infocontainer,#lienhecontent .infocontainer{display:grid;justify-content: space-between;grid-template-columns: 1fr 3fr;}
footer .copyright{background:#000;color:#b6b6b6;text-align:center;font-size:12px;font-style:italic;padding:15px 0;}
#boxmobile,#menumobile{display:none;}
#boxmobile{grid-template-columns:50px auto 50px;text-align:center;width:100%;padding:5px;position:fixed;background:#fff;z-index:5;top:0;}
#boxmobile img{height:30px;}
#menumobile{position:fixed;width:0;height:100vh;bottom:0;left:0;opacity:0;transform:scaleX(0);z-index:11;transition:all ease 1s;background:rgba(50,50,50,0.9);}
#menumobile.active{opacity:1;transform:scaleX(1);width:100vw;}
.closemenumobile{width:100%; padding:10px;}
.closemenumobile img{width:15px; float:right;}
#menumobile ul{}
#menumobile ul li{padding:10px;}
#menumobile ul li.active a{color:#bb9754;}


#menumobile ul li.haschild a:after{content: '';background: url(../images/iconmenu.jpg) no-repeat right;width: 10px;height: 10px;position: absolute;margin: 5px;}
#menumobile ul li.haschild.active a:after{background:url(../images/iconmenuactive.jpg) no-repeat right;}
#menumobile ul li ul{}

#menumobile ul li.haschild ul li a:after,#topmenu ul li.haschild.active ul li a:after{background:none;}
.slidecontainer{position: relative;}
.slidecontainer .slideprev{position: absolute;top:50%;left:0;transform:translate(-100%,-50%);cursor:pointer;font-size: 60px;color:#a4a4a4;}
.slidecontainer .slidenext{position: absolute;top:50%;right:0;transform:translate(100%,-50%);cursor:pointer;font-size:60px;color:#a4a4a4;}
/*Rieng tung web*/
.bgcaro{background:url(../images/welcome_bg.jpg) no-repeat;background-size: cover;padding:50px;}
.khonggian .khonggiantext{padding:10px 30px 10px 16%;}
.dichlenphiatren{margin-top:-35%;}
.dichlenphiatren10{margin-top:-10%;}
.paddingright15{padding-right:15%;}
.moncontainer .monitem .sample{display:flex;justify-content: space-between;}
.moncontainer .monitem .sample .price{padding-left:30px;}
.price{color:var(--active-color);font-weight: bold;}
.tabthucdon{display:flex; justify-content: center;flex-wrap: wrap;}
.tabthucdon .thucdonitem{margin: 20px 0;padding: 0 20px;border-right:1px solid #282828;}
.tabthucdon .thucdonitem:last-child{border-right:none;}
.xemthem{text-align:center;padding:30px;}
.xemthem a{background: var(--active-color);color:var(--normal-color);text-transform:uppercase;padding:10px 20px;}
.bgbando{background: url(../images/background-3.jpg) no-repeat;background-size:cover;padding:50px;}
.bglichsu{background:url(../images/bg-gioi-thieu.jpg) no-repeat;background-size: cover;padding:50px 0;}
.bgsukien {background:url(../images/background-su-kien.jpg) no-repeat;background-size: cover;padding:7% 30px 30px 15%}
.bglichsu .lichsucontainer .title{text-align:left;}
.bgkhongian{padding:50px 0;}
.roomslidecontrol{padding:20px 0;}
.bgdoingu{background:url(../images/background-gioi-thieu-1.jpg) no-repeat;background-size: cover;padding:50px 0;}
.bgfeedback{background:url(../images/background-1.jpg) no-repeat;background-size: cover;padding:50px 0;}
.feedbackavatar{text-align: center;width:50%; margin:0 auto;}
.feedbackcontent{text-align: center;}
.feedbackcontent .content{width:70%; margin:0 auto;}
.feedbackcontent .name{color: var(--active-color);font-weight: bold;}
#listnews .newsitem{margin:20px auto;}
#listnews .newsitem .title{text-align: left;}
#listnews .newsitem .newsreadmore{text-decoration: underline;color:var(--active-color);}
#formcontainer .formitem {margin:10px 0;}
#formcontainer input,#formcontainer select{padding:10px;}
#formcontainer #submitbutton{color:var(--normal-color);background:var(--active-color);padding:10px 50px;float:right;border:none}
#formdatban{position: absolute;bottom: 30px;left:50%;transform: translateX(-50%);display:flex;justify-content: space-between;grid-gap:10px;background:var(--second-color);}
#formdatban .formitem{padding:10px 10px;}
#formdatban .formitem:last-child{background-color: var(--active-color);color: var(--second-color);}
#formdatban input,#formdatban select{background:var(--second-color);font-weight: bold;border:none;border-bottom:1px solid var(--normal-color);font:var(--normal-font-size) mainfont;width: 100%;}
#formdatban input[type='button']{width: 100%;height: 100%;background-color: var(--active-color);border-bottom: none;color: var(--second-color);}
#formdetail{position: fixed;z-index: 100;background:rgba(0,0,0,0.5);width: 100vw;height: 100vh;top:0;left: 0;}
#formdetail #popupcontent{width: 80%;max-width: 600px;background:var(--second-color);position: absolute;top:50%;left:50%;transform: translate(-50%,-50%);border-radius:20px;padding:10px;}
#formdetail #popupcontent #header{display:flex;justify-content: space-between;padding:20px 0;border-bottom:1px solid #ccc;}
#formdetail #popupcontent #header span{color:var(--active-color);}
#formdetail #popupcontent #content #title{color:var(--active-color);border-bottom:1px solid #ccc;padding:10px 0;}
#formdetail #popupcontent #content #formthongtin .formitem{display:flex;flex-direction: column;}
#formdetail #popupcontent #content input,#formdetail #popupcontent #content select{padding:10px;}
#formdetail #popupcontent #content select{background:var(--second-color);}
.submitbutton{color:var(--second-color);background:var(--active-color);padding:10px 20px;border:none;}
.bgmenualacart{/*background:url(../images/background-menu.jpg) no-repeat top left;background-size: contain;*/padding:50px 0;}
.childmenu ul{list-style: none;padding:0;}
.childmenu ul li{border-bottom:1px solid var(--active-color);transition:all 0.5s;}
.childmenu ul li:hover,.childmenu ul li.active{color:var(--active-color);}
.childmenu ul li:hover:before,.childmenu ul li.active:before{content:'\f101';font-family: fontawesome;}
.contentmenualacart.grid3col{grid-template-columns: 3fr 1fr 2fr;grid-gap:10px;}
.contentmenualacart.grid3col > div:nth-child(3n+2){text-align: center;}
.downloadmenu{padding-top:40px;}

/*hết riêng từng web*/
@media screen and (max-width:1030px){
	#topmenu ul li.haschild{padding:0 20px 0 10px;}
	#topmenu ul li{padding:0 10px;}
	#childcategory ul li{padding:0 10px;}
	.footeritem{padding:0 10px;}
	#chitietsanphamcontainer {grid-gap:50px;}
}
@media screen and (max-width:500px){
	body{padding:50px 5px 0;}
	header{padding:0;}
	.grid12col{grid-template-columns:100%;grid-gap:10px;}
	.footeritem{text-align:center;}
	#menumobile{display:block;}
	#boxmobile{display:grid;}
	#boxlogo,#boxmenu,#childcategory{display:none;}/*disable for mobile*/
	#chitietsanphamcontainer{grid-template-columns:100%;}
	#sanphamdetail{grid-column:auto / auto;grid-row:auto / auto;}
	#sanphamnoibat{margin:0 0 20px;}
	#sanphamdetail #smallimage{height:135px;}
	#sanphamnoibat h2, #tintuc h2, #lienhe h2{margin:20px auto;}
	#listnews{grid-template-columns:100%;}
	#listnews .sample{border-bottom:1px solid #000;}
	#vechungtoi #vechungtoicontent{position:relative;width:100%;padding:0;}
	#vechungtoi #vechungtoicontent h2{text-align:center}
	#lienhecontainer{grid-template-columns:100%;}
	#lienhecontainer #formcontainer{grid-row:2 / auto;}
	footer #dangkynhantin{padding:30px 0;}
	footer .contentfooter {flex-direction:column;}
	footer .contentfooter .footeritem {width:100%;}
	#imageavatar .imageitem img{height:auto;}
	.width95{width: 100%;}
.width90{width: 100%;}
.width85{width: 100%;}
.width80{width: 100%;}
.width75{width: 100%;}
.width70{width: 100%;}
.width65{width: 100%;}
.width60{width: 100%;}
.width55{width:100%;}
.width50{width:100%;}
.width45{width: 100%;}
.width40{width: 100%;}
.width35{width: 100%;}
.width30{width: 100%;}
.width25{width: 100%;}
.width20{width: 100%;}
.width15{width: 100%;}
.flexcontainer{flex-direction: column;}
.grid2col{grid-template-columns:100%;}
.grid3col{grid-template-columns:100%;}
.grid4col{grid-template-columns:100%;}
.item2row{grid-row:auto}
.item2col{grid-column: auto}
.item3col{grid-column: auto}
.item4col{grid-column: auto}
.item5col{grid-column: auto}
.item6col{grid-column: auto}
.item7col{grid-column: auto}
.item8col{grid-column: auto}
.item9col{grid-column: auto}
.item10col{grid-column: auto}
.item11col{grid-column: auto}
.item12col{grid-column: auto}
.khonggian .dichlenphiatren{padding-top:0;width:100%;}
#formdatban{position: relative;width: 100%;display: grid;grid-template-columns: 1fr 1fr 1fr 1fr;justify-content: center;}
#formdatban .formitem{padding: 10px 2px;font-size:var(--small-font-size);}
.contentmenualacart.grid3col{grid-template-columns: 2fr 1fr 1fr;}
.bannersample{display:none;}
#sanphamnoibat img{width:100%!important;}
}