/* =========================================================================== */
/* RETINA SCREEN ============================================================= */
/* =========================================================================== */
@media (-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) {
}
/* =========================================================================== */
/* LARGE DESKTOP ============================================================= */
/* =========================================================================== */
@media screen
and (min-width : 1280px) {
	.wrapper {
		width:1100px;
	}
	ul.mainmenu > li.row > div > a {
		padding:10px 20px;
	}
	#divSearch form input[type='text'] {
		width:120px !important;
		width:160px;
	}
}
/* =========================================================================== */
/* VERY LARGE DESKTOP ======================================================== */
/* =========================================================================== */
@media screen
and (min-width : 1600px) {
	.wrapper {
		width:1400px;
	}
}
/* =========================================================================== */
/* SMALL DESKTOP ============================================================= */
/* =========================================================================== */
@media screen
and (max-width : 1024px) {
	.wrapper {
		width: calc(100% - 40px);
	}
	ul.toplink {
		margin-top:0px;
		clear:right;
	}
}
/* =========================================================================== */
/* IPAD XOAY NGANG =========================================================== */
/* =========================================================================== */
@media screen
and (max-width : 1024px) and (orientation: landscape) {
}
/* =========================================================================== */
/* TABLET ==================================================================== */
/* =========================================================================== */
@media screen
and (max-width : 768px) {
	#divHeader {
		padding-bottom:10px;
	}
	#divAdmin {
		overflow-x: scroll;
	}
	ul.mainmenu > li.button {
		display:block;
		padding:12px 20px;
		padding-left:40px;
		color:#FFF;
		background: url(../images/btn_menu.png) no-repeat left center;
		font-size:14px;
	}
	ul.mainmenu > li.row {
		display:none;
		border-left:none;
		border-top:1px dotted #CCC;
	}
	ul.mainmenu > li.row:last-child {
		border-right:none;
	}
	ul.mainmenu > li.row > div > a {
		text-align:left;
		padding:10px 0px;
	}
	ul.mainmenu > li.row:hover {
		background: none;
	}
	ul.popmenu {
		position:static;
		padding-top:0px;
		background:none;
	}
	ul.popmenu > li a {
		padding:10px 30px;
	}
	ul.logo {
		float:none;
		text-align:center;
		margin-bottom:20px;
	}
	ul.lang {
		margin-top:0px;
	}
	ul.toplink {
		margin-top:0px;
		float:left;
	}
	#divSearch form input[type='text'] {
		width:80px !important;
		width:100px;
	}
	ul.column2 > li.row,
	ul.column3 > li.row,
	ul.column4 > li.row,
	ul.column5 > li.row,
	ul.column6 > li.row {
		margin-left:20px;
		margin-bottom:20px;
	}
	ul.column2 > li.row {
		width: calc((100% - 1 * 20px) / 2);
	}
	ul.column3 > li.row {
		width: calc((100% - 2 * 20px) / 3);
	}
	ul.column4 > li.row {
		width: calc((100% - 3 * 20px) / 4);
	}
	ul.column5 > li.row {
		width: calc((100% - 4 * 20px) / 5);
	}
	ul.column6 > li.row {
		width: calc((100% - 5 * 20px) / 6);
	}
}
/* =========================================================================== */
/* SMARTPHONE ================================================================ */
/* =========================================================================== */
@media screen
and (max-width : 640px) {
	#divMenu {
	}
	ul.lang {
		float:none;
		text-align:center;
		margin-top:0px;
		margin-bottom:10px;
	}
	ul.toplink {
		float:none;
		text-align:center;
	}

	#divBody, #divAdmin, #divRight, #divHome {
		float:none;
		width:auto;
		margin-left:0px;
	}
	#divLeft {
		display:none;
	}
	.onecolumn,
	.twocolumn,
	.threecolumn,
	.onethreecolumn,
	.twothreecolumn {
		width:auto;
	}
	.leftcolumn,
	.rightcolumn {
		float:none;
	}
	#divTracking div.greybar {
		display:none;
	}
	#divTracking div.rightcolumn {
		background-color:#EEE;
		margin-top:10px;
	}
	.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;
	}
	#divFooter {
		text-align:center;
	}
	#divFooter div.rightcolumn {
		text-align:center;
	}
}
/* =========================================================================== */
/* MOBILE ==================================================================== */
/* =========================================================================== */
@media screen
and (max-width : 480px) {
	body {
		font-size:large;
		line-height:normal;
	}
	.wrapper {
		width: calc(100% - 20px);
	}
	H1, .maintitle h1 {
		font-size:xx-large;
	}
	H2 {
		font-size:x-large;
	}
	.divBodyTrace {
		position:relative;
		margin-top:5px;
		margin-bottom:5px;
	}
	ul.logo {
		clear:both;
		width:auto;
		text-align:center;
		margin-bottom:10px;
	}
	ul.logo li img {
		width:100%;
		height:auto;
	}
	#divSearch form input[type='text'] {
		padding-top:7px;
		padding-bottom:7px;
	}
	#divTopBanner {
		width: auto;
		float:none;
	}
	#divTopBanner div.mask,
	#divTopBanner div.maskleft {
		display:none;
	}
	ul.column2 > li.row div.content {
		font-size:inherit;
	}
	ul.column1 > li.row div.thumb {
		float:none;
		width:auto;
		margin-right:0px;
	}
	ul.column2 > li.row,
	ul.column3 > li.row {
		float:none;
		width:auto;
		margin-left:0px;
	}
	ul.column4 > li.row,
	ul.column5 > li.row {
		width: calc((100% - 1 * 20px) / 2);
	}
	ul.column5 > li.row:nth-child(5n+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% - 2 * 20px) / 3);
	}
	ul.column6 > li.row:nth-child(3n+1) {
		clear:both;
		margin-left:0px;
	}
	.divHot ul.column > li.row:nth-child(3n+1) {
		margin-left:0px;
	}
	ul.gallery > li {
		width: calc(100% / 2 - 10px / 2);
	}
	ul.gallery > li:nth-child(10n+1),
	ul.gallery > li:nth-child(10n+6) {
		float:left;
		clear:none;
		margin-left:10px;
	}
	ul.gallery > li:nth-child(10n+7) {
		margin-left:10px;
	}
	ul.gallery > li:nth-child(2n+1) {
		clear:both;
		margin-left:0px;
	}
	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;
	}
	#divPageNav a, #divPageNav a:link, #divPageNav a:visited {
		padding:6px 9px;
	}
	.divForm ul.column2 > li.row {
		float:none;
		width: auto;
		margin-left:0px;
	}
	td.break {
		display:block;
	}
	ul.botmenu {
		text-align:left;
	}
	ul.botmenu > li {
		display:block;
		padding:5px 0px;
		border-right:none;
		border-top:1px dotted #CCC;
	}
	#divFooter div.content {
		padding:16px 20px;
	}
}
/* =========================================================================== */
/* IPHONE 5 ================================================================== */
/* =========================================================================== */
@media screen
and (max-width : 320px) {
	.wrapper {
		width:300px;
	}
}