/* =========================================================================== */
/* RETINA SCREEN ============================================================= */
/* =========================================================================== */
@media (-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) {
}
/* =========================================================================== */
/* LARGE DESKTOP ============================================================= */
/* =========================================================================== */
@media screen and (min-width : 1200px) {
	.wrapper {
		width: calc(100% - 240px);
	}
	#divTopSlide ul.slides li div.wrapper {
		width: calc(100% - 240px - 140px);
	}
}
/* =========================================================================== */
/* VERY LARGE DESKTOP ======================================================== */
/* =========================================================================== */
@media screen and (min-width : 1600px) {
	.wrapper {
		width: 1200px;
	}
	#divTopSlide ul.slides li div.wrapper {
		width: 1200px;
	}
}
/* =========================================================================== */
/* MEDIUM DESKTOP ============================================================= */
/* =========================================================================== */
@media screen and (max-width : 1200px) {
}
/* =========================================================================== */
/* SMALL DESKTOP ============================================================= */
/* =========================================================================== */
@media screen and (max-width : 1024px) {
	.wrapper {
		width: calc(100% - 64px);
	}
	#divTopSlide ul.slides li div.wrapper {
		width: calc(100% - 124px - 140px);
	}
}
/* =========================================================================== */
/* IPAD XOAY NGANG =========================================================== */
/* =========================================================================== */
@media screen and (max-width : 1024px) and (orientation: landscape) {
}
/* =========================================================================== */
/* TABLET ==================================================================== */
/* =========================================================================== */
@media screen and (max-width : 1100px) {
	ul.mainmenu > li.row > div > a {
		padding-left:5px;
		padding-right:5px;
		font-size: 15px;
	}
	#divAdmin {
		overflow-x: scroll;
	}
	ul.toplink {
	}
	ul.toplink > li.hassub {
		padding-right:0;
	}
	ul.toplink > li.hassub:before {
		display:none;
	}
	#slcFilterCat {
		display:none;
	}
	#slcFilter {
		display:block;
	}
	.halfcolumn {
		width:100%;
	}
	ul.column1 > li.row > div.thumb {
		width: calc((100% - 2 * 20px) / 3);
	}
	ul.column1 > li.row > div.hasthumb {
		width: calc((100% * 2 - 20px) / 3);
	}
	ul.column2 > li.row div.thumb,
	ul.column2 > li.row div.content {
		float:none;
		width:auto;
	}
	ul.column2 > li.row.div.thumb {
		margin-bottom:20px;
	}
	
	ul.column6 > li.row {
		width: calc((100% - 3 * 20px) / 4);
	}
	ul.column6 > li.row:nth-child(6n+1) {
		clear:none;
		margin-left:20px;
	}
	ul.column6 > li.row:nth-child(4n+1) {
		clear:both;
		margin-left:0;
	}

	.tinypost,
	.largepost {
		width:auto;
		margin-bottom:5px;
	}
	.tinypost.leftcolumn,
	.largepost.leftcolumn,
	.tinypost.rightcolumn,
	.largepost.rightcolumn {
		float:none;
	}
	section.lefttree div {
		width: calc((100% - 2 * 30px) / 3);
		float:left;
		vertical-align:top;
		margin-left:30px;
	}
	section.lefttree div:nth-child(3n+1) {
		clear:both;
		margin-left:0;
	}
	.divBrand .left {
		width: calc((100% - 3 * 30px) / 4);
	}
	.divBrand .right {
		width: calc((100% * 3 - 30px) / 4);
	}
	.smallpost {
		width: calc((100% - 30px) / 2);
	}
	.bigpost {
		width: calc((100% - 30px) / 2);
	}

	ul.botmenu {
		text-align:left;
	}
	ul.botmenu > li {
		display:block;
		margin-left:0;
	}
	ul.botmenu > li > div {
		position:relative;
		border-bottom:1px solid #CCC;
	}
	ul.botmenu > li > div > span {
		display:block;
	}
	ul.botmenu > li > ul {
		padding-left:10px;
	}
	#divTopSlide ul.slides li div.content {
		top:auto;
		bottom:30px;
		transform: translateY(0);
	}
	ul.product > li.row div.cart a.addcart {
		text-indent:-9999px;
		background-position: center center;
		padding-left:auto;
	}
	#divTopSlide ul.slides li div.content {
		top:auto;
		bottom:30px;
		transform: translateY(0);
	}
	#divHeader .left,
	#divHeader .right {
		clear:both;
		float:none;
		width:auto;
	}
	#divHeader .right {
		margin-top:10px;
	}
}
/* =========================================================================== */
/* TABLET ==================================================================== */
/* =========================================================================== */
@media screen
and (max-width : 800px) {
	#btnMenu {
		display:block;
	}
	ul.mainmenu {
		display:none;
		text-align:left;
		padding:0;
		float:none;
		clear:both;
		max-height:800px;
		overflow-y: scroll;
	}
	#divMenu.show ul.mainmenu {
		display:block;
	}
	ul.mainmenu > li.row {
		display:block;
		margin-left:0px;
	}
	ul.mainmenu > li.row.show div.popmenu {
		display:block;
	}
	ul.mainmenu > li.row > div > a {
		padding-top:10px;
		padding-bottom:10px;
		border-bottom:1px solid rgba(255,255,255,0.3);
	}
	ul.mainmenu > li.row:first-child > div > a {
		padding-left:10px;
	}
	ul.mainmenu > li.row > div > a:link, ul.mainmenu > li.row > div > a:visited {
		color:#FFF;
	}
	ul.mainmenu > li.active > div > a:link,
	ul.mainmenu > li.active > div > a:visited {
		color:#FFF;
	}
	ul.mainmenu > li.row > div > a:hover {
		color:#000;
	}
	ul.mainmenu > li.row:last-child > div > a {
		border-bottom:none;
	}
	#divHeader.keeptotop ul.mainmenu > li.row > div > a:link,
	#divHeader.keeptotop ul.mainmenu > li.row > div > a:visited {
		color:#FFF;
	}
	#divHeader.keeptotop ul.mainmenu > li.row > div > a:hover {
		color:#000;
	}
	#divHeader.keeptotop ul.mainmenu > li.active > div > a:link,
	#divHeader.keeptotop ul.mainmenu > li.active > div > a:visited {
		color:#000;
	}
	
	ul.mainmenu > li.row span.drop {
		width:36px;
		height:36px;
	}
	ul.mainmenu > li.row span.drop:before {
		border-top-color:#FFF;
	}
	ul.mainmenu > li.row.show span.drop:before,
	ul.mainmenu > li.hover:hover span.drop:before {
		border-bottom-color:#FFF;
	}
	#divHeader.keeptotop ul.mainmenu > li.row span.drop:before {
		border-top-color:#FFF;
	}
	#divHeader.keeptotop ul.mainmenu > li.row.show span.drop:before,
	#divHeader.keeptotop ul.mainmenu > li.hover:hover span.drop:before {
		border-bottom-color:#FFF;
	}

	div.popmenu {
		position:static;
		overflow:visible;
		padding-top:0;
		display:none;
	}
	#divHeader.keeptotop div.popmenu {
		padding-top:0;
	}
	ul.mainmenu > li.hover:hover div.popmenu {
		max-height:none;
	}
	ul.popmenu {
		padding:0;
		text-align:left;
		background-color:transparent;
	}
	ul.popmenu > li {
		display:block;
		margin:0;
		padding:0;
		background-color:transparent;
	}
	ul.popmenu > li > div {
		border-bottom:1px solid rgba(255,255,255,0.3);
	}
	ul.popmenu > li.hassub > div:before {
		border-top-color:#FFF;
	}
	ul.popmenu > li a {
		display:block;
		padding:10px 0px;
		padding-left:30px;
		border-bottom:none;
	}
	ul.popmenu > li a:link, ul.popmenu > li a:visited {
		color:#FFF;
	}
	ul.popmenu > li a:hover {
		color:#000;
	}
	ul.popmenu > li > ul {
		position:static;
		display: block;
	}
	ul.popmenu > li > ul > li a {
		padding-left:55px;
	}
	#divHeader .left {
		float:left;
		width:50%;
	}
	#divHeader .right {
		clear:none;
		float:right;
		width:50%;
		margin-top:0;
	}
	ul.topbarlist {
		display:block;
	}
	ul.topbarlist > li {
		margin-top:10px;
		padding-left:0;
		padding-right:0;
	}
}
/* =========================================================================== */
/* SMARTPHONE ================================================================ */
/* =========================================================================== */
@media screen
and (max-width : 640px) {
	.dialog {
		width: calc(100% - 60px);
	}
	.narrowcontent {
		padding-left:0;
		padding-right:0;
	}
	.divBody {
		padding-left:0px;
		padding-right:0px;
	}
	#divBody, #divAdmin, #divLeft, #divRight, #divHome {
		float:none;
		width:auto;
	}
	ul.toplink {
		margin-top:0;
		margin-right:0;
	}
	#divHeader.keeptotop ul.toplink {
	}
	ul.toplink > li.row span.thumb {
		width:24px;
		height:24px;
	}
	ul.toplink > li.row div.wrap span.text {
		display:none;
	}
	section.head {
		display:none;
	}
	section.centerline:before {
		display:none;
	}
	.onecolumn,
	.twocolumn,
	.threecolumn,
	.onethreecolumn,
	.twothreecolumn,
	.bigpost,
	.smallpost,
	.tinypost,
	.largepost {
		width:auto;
		margin-bottom:5px;
	}
	.leftcolumn,
	.rightcolumn,
	.centercolumn {
		margin-left:0;
		float:none;
	}
	.smallcolumn.leftcolumn,
	.bigcolumn.leftcolumn {
		float:left;
	}
	.smallcolumn.rightcolumn,
	.bigcolumn.rightcolumn {
		float:right;
	}

	.content {
		overflow-wrap: break-word;
		word-wrap: break-word;
		-ms-word-break: break-all;
		/* This is the dangerous one in WebKit, as it breaks things wherever */
		word-break: break-all;
		/* Instead use this non-standard one: */
		word-break: break-word;
		/* Adds a hyphen where the word breaks, if supported (No Blink) */
		-ms-hyphens: auto;
		-moz-hyphens: auto;
		-webkit-hyphens: auto;
		hyphens: auto;
	}
	.divForm {
		width:auto;
	}
	div.copyright p {
		text-align:center !important;
	}
	ul.column > li.row ul.related > li.row div.thumb {
		float:none;
		width: calc(100% - 10px) !important;
		margin-right:0;
		margin-bottom:5px;
	}
	#divFooter {
		font-size: inherit;
	}
	#divFooter div {
		margin-bottom:20px;
	}
	ul.column3 > li.row {
		width: calc((100% - 1 * 20px) / 2);
	}
	ul.column3 > li.row:nth-child(3n+1) {
		clear:none;
		margin-left:20px;
	}
	ul.column3 > li.row:nth-child(2n+1) {
		clear:both;
		margin-left:0px;
	}
	ul.column5 > li.row {
		width: calc((100% - 3 * 20px) / 4);
	}
	ul.column5 > li.row:nth-child(5n+1) {
		clear:none;
		margin-left:20px;
	}
	ul.column5 > li.row:nth-child(4n+1) {
		clear:both;
		margin-left:0;
	}

	ul.product {
	}
	ul.product > li.row div.wrap {
	}
	ul.product > li.row div.cart {
		opacity:1;
		margin-top:0;
	}
	.cart div.left {
		width: calc(50% - 1px);
	}
	.cart div.right {
		width: calc(50% - 1px);
	}
	#btnAdminMenu {
		display:block;
	}
	ul.admin {
		display:none;
	}
	ul.admin.show {
		display:block;
	}
	#divTopSlide ul.slides li div.content h1 {
		font-size:150%;
	}
}
/* =========================================================================== */
/* MOBILE ==================================================================== */
/* =========================================================================== */
@media screen
and (max-width : 480px) {
	#divTopBar .left, #divTopBar .right {
		float:none;
	}
	#divSearch {
		margin-right:40px;
	}
	body {
		line-height:normal;
	}
	.wrapper {
		width: calc(100% - 40px);
	}
	#divTopSlide ul.slides li div.wrapper {
		width: calc(100% - 150px);
	}
	ul.logo li img {
		width: auto;
		height:50px;
	}
	.divBodyTrace {
		position:relative;
		margin-top:5px;
		margin-bottom:5px;
	}

	ul.column > li.row h3 {
	}
	ul.column1 > li.row div.thumb,
	ul.column1 > li.row div.content {
		float:none;
		width:auto;
		margin-right:0px;
	}
	ul.column1 > li.row.div.thumb {
		margin-bottom:20px;
	}
	ul.column2 > li.row,
	ul.column3 > li.row {
		float:none;
		width:auto;
		margin-left:0px;
	}
	ul.column3 > li.row:nth-child(3n+1) {
		margin-left:0px;
	}
	ul.column4 > li.row,
	ul.column5 > li.row {
		width: calc((100% - 1 * 20px) / 2);
	}
	ul.column5 > li.row:nth-child(3n+1) {
		clear:none;
		margin-left:20px;
	}
	ul.column4 > li.row:nth-child(2n+1),
	ul.column5 > li.row:nth-child(2n+1) {
		clear:both;
		margin-left:0px;
	}
	ul.column6 > li.row {
		width: calc((100% - 1 * 20px) / 2);
	}
	ul.column6 > li.row:nth-child(2n+1) {
		clear:both;
		margin-left:0px;
	}

	.smallcolumn.leftcolumn,
	.bigcolumn.leftcolumn {
		float:none;
		width:auto;
	}
	.smallcolumn.rightcolumn,
	.bigcolumn.rightcolumn {
		float:none;
		width:auto;
	}

	ul.news > li.row div.hasthumb {
		float:none;
		width: auto;
	}
	ul.news > li.row div.thumb {
		float:none;
		width: auto;
	}

	ul.search {
		font-size:inherit;
		line-height:inherit;
	}
	ul.search > li.row h3 {
		font-size:inherit;
	}
	ul.search > li.row div.link {
		font-size:inherit;
	}
	.caption, .maintitle {
		height:auto;
	}
	.maintitle {
		margin-top:20px;
	}
	.divTopTrace {
		float:none;
		margin-top:0px;
		margin-bottom:10px;
	}
	td.break {
		display:block;
	}
	#slcFilter div {
		float:none;
		width: auto;
		margin-left:0px;
		margin-bottom:2px;
	}
	.divBrand .left {
		width: calc((100% - 1 * 30px) / 2);
	}
	.divBrand .right {
		width: calc((100% * 1 - 30px) / 2);
	}
	.copyright {
		padding-bottom:60px;
	}
	#divFloat div.tab.show {
		-webkit-border-top-right-radius:0px;
			-moz-border-radius-topright:0px;
				border-top-right-radius:0px;
	}
	ul.gallery > li.row {
		width: calc((100% - 1 * 20px) / 2);
	}
	ul.gallery > li.row:nth-child(3n+1) {
		clear:none;
		margin-left:20px;
	}
	ul.gallery > li.row:nth-child(2n+1) {
		clear:both;
		margin-left:0px;
	}
	.cart div.left {
		width: calc(100% - 51px);
	}
	.cart div.right {
		width: 50px;
	}
	ul.tablist.approach > li span {
		width:50px;
		height:50px;
		line-height:1.5em;
	}
	#divHeader .left,
	#divHeader .right {
		clear:both;
		float:none;
		width:auto;
	}
	#divHeader .right {
		margin-top:10px;
	}
}
/* =========================================================================== */
/* IPHONE 5 ================================================================== */
/* =========================================================================== */
@media screen
and (max-width : 320px) {
	ul.column4 > li.row,
	ul.column5 > li.row,
	ul.column6 > li.row {
		float:none;
		width: auto;
		margin-left:0px;
	}
}