/* =========================================================================== */
/* RETINA SCREEN ============================================================= */
/* =========================================================================== */
@media (-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) {
}
/* =========================================================================== */
/* LARGE DESKTOP ============================================================= */
/* =========================================================================== */
@media screen and (min-width : 1280px) {
}
/* =========================================================================== */
/* VERY LARGE DESKTOP ======================================================== */
/* =========================================================================== */
@media screen and (min-width : 1366px) {
	#divBody.narrow, #divAdmin.narrow {
		margin-right:300px;
	}
	#divRight {
		position:fixed;
		top:0;
		right:0;
		width:300px;
		height:100%;
		margin-left:0;
		overflow-y:scroll;
	}
	#divRight::-webkit-scrollbar {
		width: 0px;
		background: transparent; /* make scrollbar transparent */
	}
	#divRight .halfcolumn, #divRight .onethreecolumn {
		float:none;
		width:auto;
	}
	#divRight .halfcolumn.centercolumn, #divRight .onethreecolumn.centercolumn {
		margin-left:0;
	}
	#divRight .wrapper {
		padding-top:20px;
	}
}
/* =========================================================================== */
/* VERY LARGE DESKTOP ======================================================== */
/* =========================================================================== */
@media screen and (min-width : 1600px) {
	#divBody.narrow, #divAdmin.narrow {
		margin-right:400px;
	}
	#divRight {
		width:400px;
	}
}
/* =========================================================================== */
/* SMALL DESKTOP ============================================================= */
/* =========================================================================== */
@media screen and (max-width : 1024px) {
	#divLeft {
		width:200px;
	}
	#divBody, #divAdmin {
		margin-left:220px;
	}
	.blocknumber span.layer1 {
		font-size:inherit;
	}
	.homeblock {
		width: calc((100% - 1 * 20px) / 2);
	}
	.step0 {
	}
	.step1 {
		margin-left:20px;
	}
	.step2 {
		margin-left:40px;
	}
	.step3 {
		margin-left:60px;
	}
	.step4 {
		margin-left:80px;
	}
	.step5 {
		margin-left:100px;
	}
	.step6 {
		margin-left:120px;
	}
	.step7 {
		margin-left:140px;
	}
	.step8 {
		margin-left:160px;
	}
	.step9 {
		margin-left:180px;
	}
	.step10 {
		margin-left:200px;
	}
}
/* =========================================================================== */
/* IPAD XOAY NGANG =========================================================== */
/* =========================================================================== */
@media screen
and (max-width : 1024px) and (orientation: landscape) {
}
/* =========================================================================== */
/* TABLET ==================================================================== */
/* =========================================================================== */
@media screen and (max-width : 800px) {
	.wrapcontent {
		width: calc(100% - 40px);
	}
	#divLeft div.wrapper {
		overflow:hidden;
	}
	ul.logo {
		float:left;
	}
	.bodycenter ul.logo {
		float:none;
	}
	ul.logo li img {
		width:auto;
		height:60px;
	}
	#divHome ul.logo {
		float:none;
	}
	ul.lang {
		float:right;
		text-align:right;
	}
	#divHome ul.lang {
		float:none;
		text-align:center;
	}
	ul.lang > li {
		margin-left:10px;
		margin-right:0px;
	}
	ul.lang > li img {
		width:24px;
	}
	ul.toplink {
		clear:right;
		float:right;
		margin-top:10px;
		text-align:right;
	}
	#divHome ul.toplink {
		float:none;
		margin:20px 0px;
		text-align:center;
	}
	#divBody,
	#divAdmin,
	#divRight,
	#divFooter {
		margin-left:0px;
	}
	#divLeft {
		position:static;
		left:0px;
		width:auto;
		height:auto;
		background-color:#FFF !important;
	}
	#divLeft:hover {
		background-color:#FFF !important;
	}
	#divLeft div.wrapper {
		padding-bottom:0;
	}
	ul.mainmenu {
		clear:both;
	}
	ul.mainmenu > li.button {
		display:block;
	}
	ul.mainmenu > li.row {
		display:none;
		margin-bottom:2px;
	}
	ul.mainmenu > li.show {
		display:block;
	}
	ul.mainmenu > li.button,
	ul.mainmenu > li.row > div {
		padding-top:10px;
		padding-bottom:10px;
	}
	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);
	}
	
	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.related > li.row div.thumb {
		float:left;
		width: calc(30% - 10px);
		margin-right:10px;
	}
	.step0,
	.step1,
	.step2,
	.step3,
	.step4,
	.step5,
	.step6,
	.step7,
	.step8,
	.step9,
	.step10 {
		margin-left:0;
	}
}
/* =========================================================================== */
/* SMARTPHONE ================================================================ */
/* =========================================================================== */
@media screen and (max-width : 768px) {
	SECTION.head {
		display:none;
	}
	.homeblock {
		width:100%;
	}
	.fullrow {
		display: block;
		align-items: initial;
		justify-content: initial;
	}
	.onecolumn,
	.twocolumn,
	.threecolumn,
	.fourcolumn,
	.fivecolumn,
	.halfcolumn,
	.onethreecolumn,
	.twothreecolumn,
	.mediumcolumn,
	.largecolumn {
		width:auto;
		margin-bottom:5px;
	}
	.leftcolumn,
	.rightcolumn,
	.centercolumn {
		float:none;
		margin-left:0;
		margin-right:0;
	}
	.scroll {
		overflow-x: scroll;
	}
	section.topnavigation h1 {
		float:none;
	}
	section.topnavigation .leftcolumn {
		float:left;
	}
	section.topnavigation .rightcolumn {
		float:right;
	}
	.smallcolumn.leftcolumn,
	.bigcolumn.leftcolumn {
		float:left;
	}
	.smallcolumn.rightcolumn,
	.bigcolumn.rightcolumn {
		float:right;
	}
	#divRight .halfcolumn {
		float:left;
		width: calc((100% * 1 - 5px) / 2);
		margin-bottom:0px;
	}
	#divRight .onethreecolumn {
		float:left;
		width: calc((100% - 2 * 5px) / 3);
		margin-bottom:0px;
	}
	#divRight .halfcolumn.centercolumn, #divRight .onethreecolumn.centercolumn {
		margin-left:5px;
	}
	ul.column1 > li.row div.thumb {
		width: calc(50% - 15px);
	}
	ul.column1 > li.row div.content {
		width: calc(50% - 15px);
	}
	.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;
	}
	.weekcolumn {
		display:none;
	}
	.daycolumn {
		width: calc((100% - 1 * 1px) / 2);
	}
	.daycolumn:nth-child(2n+1) {
		clear:both;
		margin-left:0px;
	}
	.daycolumn:last-child {
		width:100%;
		background-color:#ffcccc;
	}
	.divForm {
		width:auto;
	}
	div.copyright {
		text-align:center;
	}
	INPUT[type='button'].return,
	INPUT[type='reset'] {
		text-indent:-9999px;
		padding-left:15px;
	}
	INPUT[type='button'].import,
	INPUT[type='button'].export,
	INPUT[type='button'].print,
	INPUT[type='button'].edit,
	INPUT[type='button'].create {
		text-indent:-9999px;
		padding-right:15px;
	}
	#divNotice {
		width: calc(100% - 40px);
	}
	div.remain2 {
		width: calc(100% - 40px);
	}
	div.tool {
		clear:both;
		width:100%;
		margin-left:0;
	}
	div.tool > ul.function {
		float:right;
		position:static;
		max-width:none;
		text-align: right;
		white-space:normal;
	}
	div.tool > ul.function:hover {
		background-color: transparent;
	}
	ul.function:after {
		display:none;
	}
	ul.function > li {
		display:inline-block;
	}
	div.owner {
		position:static;
	}
	ul.userlist {
		position:static;
		max-width:none;
		white-space:normal;
	}
	ul.userlist.hasSub:before {
		display:none;
	}
	ul.userlist.left {
		float:left;
	}
	ul.userlist.right {
		right:auto;
		float:right;
	}
	ul.userlist:hover {
		background-color: transparent;
	}
	ul.userlist > li {
		display:inline-block;
	}
	ul.adminrow li.row {
		padding-left:5px;
		padding-top:12px;
	}
	ul.adminrow li.row:before {
		width:100%;
		height:7px;
	}
}
/* =========================================================================== */
/* MOBILE ==================================================================== */
/* =========================================================================== */
@media screen and (max-width : 640px) {
	section.topnavigation {
		background-color:transparent;
		padding:0;
		-webkit-border-radius:0px;
		   -moz-border-radius:0px;
				border-radius:0px;
	}
	section.topnavigation h1 {
		position:static;
		width:auto;
		padding:10px 0;
		background-color: rgba(98,113,138,0.2);
		-webkit-border-radius:5px;
		   -moz-border-radius:5px;
				border-radius:5px;
		overflow:visible;
		text-overflow:clip;
		white-space:normal;
	}
	#divHome {
		width:auto;
		height:auto;
		position:static;
		top:auto;
		left:auto;
		margin-top:40px;
		margin-bottom:40px;
		margin-left:30px;
		margin-right:30px;
		-webkit-transform: none;
		   -moz-transform: none;
			 -o-transform: none;
			-ms-transform: none;
				transform: none;
	}
	#divBody.bodycenter {
		margin:20px;
	}
	#divRight .halfcolumn, #divRight .onethreecolumn {
		float:none;
		width:auto;
		margin-bottom:5px;
	}
	#divRight .halfcolumn.centercolumn, #divRight .onethreecolumn.centercolumn {
		margin-left:0;
	}
	section.botnavigation {
		display:block;
	}
	#btnCall {
		bottom:70px;
	}
	#divFooter {
		padding-bottom:80px;
	}
}
/* =========================================================================== */
/* MOBILE ==================================================================== */
/* =========================================================================== */
@media screen and (max-width : 480px) {
	body {
	}
	H1, .maintitle h1 {
		font-size:xx-large;
	}
	H2 {
		font-size:x-large;
	}
	.divBodyTrace {
		position:relative;
		margin-top:5px;
		margin-bottom:5px;
	}
	ul.mainmenu > li.row,
	ul.mainmenu > li.button {
		font-size:large;
	}
	ul.column1 > li.row div.thumb,
	ul.column1 > li.row div.content {
		float:none;
		width:auto;
	}
	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.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;
	}

	.daycolumn {
		float:none;
		width: 100%;
		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;
	}
	.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;
	}
	
	.smallcolumn,
	.bigcolumn {
		float:none;
		width:100%;
	}
	.videolist video {
		float:none;
		width: 100%;
		margin-left:0;
	}
}
/* =========================================================================== */
/* IPHONE 5 ================================================================== */
/* =========================================================================== */
@media screen
and (max-width : 320px) {
	HTML, BODY {
		width:320px;
	}
}