@charset "utf-8";
@media screen and (max-width: 1024px) {
	
}
@media screen and (max-width: 768px) {
	.giacty{ font-size: 18px }
	.search input{ width: 80% }
	.search .submit{ width: 20% }
	.box li.product a.img{ height: 180px }
	.homeleft li:first-child{ display: none; }
	#MobileMenu{ display: block;
    z-index: 111;
    color: #fff;
    padding: 8px 5px;
    box-sizing: border-box;
    cursor: pointer; background: #FFF100 } 
    .khunggt{ width: 100%; top: 0; display: block; }
    .khunggt .left{ width: 100% }
    .khunggt .right{ width: 100% }
    .khunggt .sanphamnb li .khungtrai .hinh{ width: 35% }
    .bannergiua li{ width: 48% }
    .danhgia .hinh{ width: 100%;height: auto; margin-bottom: 10px }
    .danhgia .hinh img{ width: 120px; height: 120px; object-fit: cover; border-radius: 50% }
    .danhgia .info{ width: 100% }
    .gioithieu p.mota{ line-height: 60px }
    .sale .hinh{ width: 100%;height: auto; margin-bottom: 10px }
    .sale .hinh img{ width: 150px; height: 150px; object-fit: cover; border-radius: 50% }
    .sale .info{ width: 100% }
    .haikhung{ height: auto; }
    .khungkh .hinh{ height: 200px }
    .khungkh .tieudetb{font-size: 17px}
    #MobileMenu{ display: inline-block; position: absolute;top: 35px;left: 30px; background: url(../images/mnmb.png) center no-repeat; background-size: 24px; font-size: 0; width: 50px }
    .haikhung{ width: 100% !important; margin: 1% 0; }
    .bannerdau{ padding: 5px 0 }
    .bannerdau li { width: 23%; float: left; margin: 1%; display: block; padding: 0 }
    .bannerdau li a{ padding-left: 0 }
    .bannerdau li a .info p{ font-size: 4px }
    .bannerdau li a .info{ line-height: 13px }
    .bannerdau li a .info h3{ font-size: 8px }
    .bannerdau li a .hinh img{max-width: 16px}
    .bannerdau li a .hinh{ margin-right: 5px }
    .sale .info h3{ width: 70%; padding: 12px 0; margin: 0 auto;  margin-bottom: 10px; background:#000; border-radius: 20px }
    .sale .info span{ font-size: 32px; border-bottom: 3px solid#000 }
    .logohome{ float: none; display: block; }
    .headder .search{ width: 100%; text-align: center; }
    .headder .search img{ display: none; }
    .headder .search .infosearhc{ display: block; position: relative; left: unset; top: unset; margin: 0 auto }

    .headder .main{ border:0; }
    .khungsale{ border:0; display: block; padding-top: 10px; border-top: 2px solid#000 }
    .khungsale .sale{ padding: 0; text-align: center; display: block; width: 100%; margin-bottom: 20px }
    .khungsale .tinh{ width: 100%; display: block;  }
    .khungsale .tinh:after{ display: none; }
    .headder{ position: relative; background: #fff; border-top: 5px solid#000 }
    .lydo li{ width: 100%; margin: 1% 0 }
    .khungbannergiua{ display: block; }
    .bannergiua{ width: 100%; margin-bottom: 20px }
    .khungbannergiua .infophai{ width: 100%; padding: 0 20px }
    .iconhome li{ width: 100%; margin: 2% 0 }

    .gioithieu .main{ display: block; }
    .gioithieu .main .hinh{ width: 100% }
    .gioithieu .main .info{ width: 100% }

    .headder .left{ width: 100% }
    .headder .right{ width: 100%	 }
    .logohome{ position: relative; top: 0; margin: 5px 0; padding: 10px 0 }
    .box li.product .tratruoc{ height: 20px; float: left; display: block;; width: 100% }
    .clicksearch{ display: none; position: fixed; top: 60px; left: 10px; z-index: 9999999999 }
    .leftsearch{ display: none;width: 70%; position: fixed; left: 0; top: 0; max-height: 100vh; z-index: 999999999; background: #fff; padding: 20px; box-sizing: border-box;overflow-x: auto; }
    .rightct{ width: 100%; }
    .formsearch{ margin-top: 80px }
    .search .hotlinetren{ width: 100% }
    .box li.product h3{ height: 80px }
    .search .youtubetren{ width: 100% }
    .cart{ position: fixed; top: 10px; right: 10px; width: 80px; height: 80px; background-size: 65px }
    .cart span{ margin-left: 39px; line-height: 31px }
    .linemenutren{ display: none; }
    .tabbrand a:first-child{ width: 100%; height: auto;}
    .tabbrand a img{ height: auto; max-width: 100% }
    .tabbrand a:nth-child(2){ width: 100%; margin-top: 10px; height: auto; }
    .tabbrand a:nth-child(3){ width: 100%; margin-top: 10px; height: auto; }
    .vechungtoi .left{ width: 100%; margin-bottom: 10px }
    .vechungtoi .right{ width: 100% }
    .logohome{ width: 100%; text-align: center;  margin: 0}
    .search{ width: 100%; margin: 0; margin-top: 15px }
    .logohome img{ max-width: 50% }
    #MobileMenu img{max-width:24px;}
    #menutop{float: right;}
	#menutop{ z-index: 5555; font-size: 120%; display: none;}
	#menutop ul{ display: block; background: #333}
	#menutop ul>li{margin:0;}
	.box li.product .motaxe{ height: 40px }
	#menutop ul a{padding:10px; color:#fff; padding: 2px 10px}
	#menutop ul li{ position:relative; float:none; width: 100%; padding: 5px 0;border-bottom:0.5px solid #fff}
	#menutop ul ul{ position:relative; background:#333; padding:0; width:100%; left: 0}
	#menutop ul ul li{ width: 100%; display: none}
	#menutop ul ul a { padding-top:3px !important; padding-bottom:3px !important; color:#fff;}
	#menutop ul ul ul li { position: relative; top:100%; left:0; display: none; padding-left: 5%; width: 95% }
	#menutop ul ul li:hover > ul{ display: none }
	#menutop ul ul ul{ position: relative; top:0; left:0;}
	#menutop ul > li > span{ display: inline-block; position: absolute; top:8px; right: 10px; width: 60px; height: 30px; background: url(../images/down-arrow.png) center center no-repeat; background-size:16px; text-indent: -9999px; cursor: pointer; border-radius: 5px }
	#menutop ul > li:hover > span{ background: url(../images/down-arrow.png) center center no-repeat; background-size:16px}
	.gridmenu{height: auto; line-height: 14px; text-align: center; letter-spacing: -1px; margin-bottom: 10px; padding:0}
	.gridmenu a.logox{width: 100%; text-align: center; float: none} .gridmenu a.logox img{max-height: 40px}
	.gridmenu a.item{ margin:5px 1px; padding:2px 3px; font-size: 12px; line-height: 18px}
	[padleftright='px100']{padding-left:20px !important;padding-right:20px !important;}

	div.grid[value='col66'] .gridcol, div.grid[value='col48'] .gridcol, div.grid[value='col84'] .gridcol, div.grid[value='col444'] .gridcol, div.grid[value='col336'] .gridcol, div.grid[value='col363'] .gridcol, div.grid[value='col633'] .gridcol{ width: 100% !important }
	div.grid[value][space] .gridcol{ width: 100%  !important}
	div.grid[value='col3333'] .gridcol, div.grid[value='col3333'][space] .gridcol{ width:48% !important }
	div.grid[value='col5'] .gridcol, div.grid[value='col5'][space] .gridcol{ width:48% !important }
	div.grid[value='col3333'][space] .gridcol, div.grid[value='col5'][space] .gridcol{ width: 48%  !important}
	[padleft]{padding-left: 20px !important} [padright]{padding-right: 20px !important} [padtop]{padding-top: 20px !important} [padbottom]{padding-bottom: 20px !important} [padleftright]{padding-left: 20px !important; padding-right: 20px !important} [padtopbottom]{padding-top: 20px !important; padding-bottom: 20px !important} [padall]{padding: 20px !important} 
	[marleft]{padding-left: 20px !important} [marright]{padding-right: 20px !important} [martop]{padding-top: 20px !important} [marbottom]{padding-bottom: 20px !important} [marleftright]{padding-left: 20px !important; padding-right: 20px !important} [martopbottom]{padding-top: 20px !important; padding-bottom: 20px !important} [marall]{padding: 20px !important} 

	ul[column] li{width: 100% !important}
	ol[column] li{width: 100% !important}
	.maxlead{width:100%; height: 60px; bottom:0 !important; border-radius: 0}
	.maxlead a{float:left; width: 20%}
	.maxlead a.hotline img{width: 52px; margin-top: -15px}
	.flashsale { margin-bottom: 15px }
	.leftside, .rightside{width: 100%; float: none; margin:0; padding:0}
	.nomobile{display: none}
	.flashsale h3{ width: 100%; margin: 10px 0; font-size: 18px }
	.flashsale .giacty{ display: block; text-align: center; }
	.flashsale .giaban{ display: block; text-align: center; }
	.firstcat span.mobileMenu{display: block}
	.flashsale a.img{ height: 200px }
	.homeright{ display: none; }
	.homeleft{ width: 100% }
	.itemnews{ width: 100%; margin: 1% 0 }
	.footer .info{ width: 100% !important }
	.footer .vecty{width: 100%; margin-top: 10px}
	.footer .hotro{width: 100%; margin-top: 10px}
	.footer .page{width: 100%; margin-top: 10px}
	.box li.product{width: 48%}
	.titlehome ul li{display: none}
	.cgallery, .cinfo{width: 100%; margin:0; padding:0; float: none}
	.boxnews li{width: 92%}
	.footer{background-size: cover}
	.footer .contact, .footer .info{width: 100%; margin:0 padding:0; margin-bottom: 20px}
	.copyright{margin-bottom: 60px}
	.copyright #nav_up{top:10px; right: 20px}
	.linemenu .logohome{ width: 100% }
	.linemenu .khungmn{ width: 100%; margin-top: 20px }
	.linemenu .left{display: none}
	.linemenu .right{width: 100%; text-align: left}
	.camket ul li{ width: 100%; margin: 2% 0 }
	.linemenu ul{text-align: left}
	.linemenu ul li{margin-left: 0; margin-right: 5px}
	.linemenu .email{display: none}
	.content, .rightcol{width: 100%; float: none; margin:0; padding:0; margin-bottom: 20px}
	ul.groupnews li{width: 100%; float: none; margin:0; padding:0; margin-bottom: 20px}
	ul.groupnews li h3, ul.groupnews li p.des{height: auto}
	.content img{max-width: 100%; height: auto !important}
}

