:root {
	/*--MainColor: rgb(40, 200, 150);
	--MainColor: rgb(247, 114, 23);*/
	--MainColor: rgb(0, 112, 97);
	--MainColor2: rgb(6, 178, 246);
	--MainColorBlue: rgb(25, 152, 230);
	--MainColorGreen: rgb(54, 210, 158);
	--MainColorYellow: rgb(247, 202, 18);
	--MainColorRed: rgb(222, 71, 71);
	--MainColorPink: rgb(255, 53, 133);
	--MainColorOrange: rgb(247, 114, 23);
	--MainColorPurple: rgb(200, 72, 241);
	--MenuColor: rgba(252, 252, 252, 1);
	--DataWidth: 90%;
	--DataWidthS: 80%;
	--DataMaxWidth: 2200px;
	--borderTB: 1px solid rgb(180, 180, 180);
	--MainColorTxt: rgb(50, 50, 50);
	--MainColorTxt2: rgb(58, 58, 58);
	--MainColorTxt3: rgb(120, 120, 120);
	--MainColorTxt4: rgb(220, 220, 220);
	--bgBlackColor: rgba(242, 242, 242, 1);
	--bgWhiteColor: rgba(250, 250, 250, 1);
}

@font-face {
	font-family: MainFont;
	src: url("/Font/Silapakorn72-Regular_Beta05.ttf");
	/* src: url("/Font/PK Maehongson-Medium.ttf");*/
}

@font-face {
	font-family: THSarabun;
	src: url(../Font/THSarabun.ttf);
}

body {
	margin: 0;
	padding: 0;
	font-family: MainFont;
	width: 100%;
	max-width: var(--DataMaxWidth);
	margin-left: auto;
	margin-right: auto;
	font-size: 18px;
	color: var(--MainColorTxt);
	line-height: 1.4;
	font-weight: normal;
}

.bgWhite, .bgBlack, .bgDark, .bgVdo, .bgRed, .bgGreen, .bgBlack2 {
	width: 100%;
	background-color: var(--bgWhiteColor);
	margin: 0;
}

.bgBlack {
	background-color: var(--bgBlackColor);
}

.bgBlack2 {
	background-color: rgb(235, 235, 235);
}

.bgDark {
	background-color: var(--MainColorTxt2);
}

.bgRed {
	background-color: var(--MainColorRed);
}

.bgBlue {
	background-color: var(--MainColorBlue);
}

.bgVdo {
	padding-top: 7px;
	padding-bottom: 0px;
	background-color: rgb(10, 10, 10);
}

.HeaderContent {
	width: 100%;
	padding: 0;
	margin: 0;
	margin-left: auto;
	margin-right: auto;
	background-color: var(--MainColor);
	padding-top: 20px;
	padding-bottom: 20px;
}

.btLogo {
	outline: none;
	height: 75px;
	width: auto;
	margin: 0;
	padding: 0;
	border: none;
	cursor: pointer;
	vertical-align: middle;
	filter: grayscale(0%);
}

	.btLogo:hover {
		filter: grayscale(60%);
	}


.LowLineHeight {
	line-height: 1.1;
}

.LowLineHeight2 {
	line-height: 0.9;
}




.WidthBlankSpace {
	width: 20px;
	display: inline-block;
}

.BlankSpace {
	height: 40px;
}

.BlankSpaceS {
	height: 20px;
}

.BlankSpaceSS {
	height: 5px;
}

.lbHeader, .lbHeader2 {
	/*cursor: pointer;*/
	outline: none;
	-webkit-appearance: none;
	-webkit-border-radius: 0;
	white-space: nowrap;
	vertical-align: middle;
	margin: 0;
	padding: 0;
	font-size: 40px;
	color: var(--MainColor);
	text-decoration: none;
	font-weight: normal;
	font-family: MainFont;
	color: rgb(255, 255, 255);
}

.lbHeader2 {
	font-size: 27px;
	font-weight: normal;
	color: var(--MainColorTxt);
	color: rgb(255, 255, 255);
}

.lbtHeader {
	margin: 0;
	padding: 0;
	vertical-align: middle;
	color: rgb(255, 255, 255);
}

	.lbtHeader:link {
		text-decoration: none;
	}

.FooterContent, .Footer1, .Footer2 {
	width: 100%;
	padding: 0;
	margin: 0;
	margin-left: auto;
	margin-right: auto;
	background-color: var(--MainColor);
}

.Footer1, .Footer2 {
	margin: 0;
	width: 33%;
	background-color: none;
	border-right: 1px solid rgb(240, 240, 240);
	/*margin-right: 4%;*/
}

.Footer2 {
	width: 25%;
	border: none;
	/*margin-right: 0;*/
}

.FooterSep {
	height: auto;
	width: 1px;
	background-color: rgb(240, 240, 240);
}


.btFooter, .lbFooter, .btFooter2, .lbFooter2, .lbFooter3 {
	width: auto;
	font-size: 15px;
	background-color: transparent;
	color: rgb(255, 255, 255);
	border: none;
	cursor: pointer;
	outline: none;
	-webkit-appearance: none;
	-webkit-border-radius: 0;
	white-space: nowrap;
	text-align: center;
	vertical-align: middle;
	margin: 0;
	font-family: MainFont;
	font-weight: normal;
	padding: 0;
}


.btFooter2 {
	margin-left: 3px;
}


	.btFooter:hover, .btFooter2:hover {
		opacity: 0.7;
	}


.lbFooter, .lbFooter2, .lbFooter3 {
	cursor: default;
	white-space: normal;
	font-size: 15px;
}

.lbFooter2 {
	font-size: 25px;
}

.lbFooter3 {
	font-size: 13px;
}

.UnderLine, .VerticalLine, .VerticalLine2, .VerticalLine3, .ColorLine {
	width: 100%;
	height: 1px;
	background-color: rgb(200, 200, 200);
}


.VerticalLine {
	width: 1px;
	height: 100%;
}

.VerticalLine2 {
	width: 3px;
	height: 30px;
	background-color: rgb(185, 185, 185);
	margin-left: auto;
	margin-right: auto;
}

.VerticalLine3 {
	width: 1px;
	height: 28px;
	vertical-align: middle;
	margin: 0;
	padding: 0;
}

.Seperate, .SeperateRight {
	margin-right: 15px;
	margin-left: 15px;
	vertical-align: middle;
	margin-top: auto;
	margin-bottom: auto;
	border-left: 1px solid rgb(180, 180, 180);
	width: 2px;
	height: 36px;
}

.SeperateRight {
	margin-right: 0px;
	margin-left: 30px;
}


.ColorLine {
	height: 3px;
	background-color: rgb(242, 95, 0);
	background-color: rgb(125, 210, 180);
	background-color: rgb(250, 20, 15);
}


.DataContent, .DataContentS, .DataContentLogin, .DataContentL, .DataContentXL, .DataContentWeb, .ContentMenu, .DataContentBlack, .DataContentSS, .DataInContainer {
	width: var(--DataWidth);
	padding: 0;
	margin: 0;
	margin-left: auto;
	margin-right: auto;
}

.ContentMenu {
	background-color: transparent;
}


.DataInContainer {
	width: 96%;
}



.DataContentBlack {
	width: 95%;
	border-radius: 10px;
	background-color: var(--bgBlackColor);
	border: 1px solid rgb(240, 240, 240);
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0);
}

.DataContentS {
	width: var(--DataWidthS);
}

.DataContentLogin {
	width: 35%;
}

.DataContentL {
	width: 95%;
}

.DataContentXL {
	width: 97%;
}

.DataContentWeb {
	background-color: rgb(250, 250, 250);
	border: 1px solid rgb(220, 220, 220);
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
	border-radius: 10px;
}

.DataContentWeb {
	width: 95%;
	background-color: var(--bgWhiteColor);
	margin-left: auto;
	margin-right: auto;
	border-radius: 10px;
	border: 1px solid rgb(220, 220, 220);
	padding-top: 15px;
	padding-bottom: 15px;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}

.DataContentWhiteLogin {
	width: 35%;
	background-color: var(--bgWhiteColor);
	margin-left: auto;
	margin-right: auto;
	border-radius: 10px;
	border: 1px solid rgb(220, 220, 220);
	padding-top: 15px;
	padding-bottom: 15px;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}

.DataContentSS {
	width: 55%;
}

.VdoContent {
	width: 100%;
	height: auto;
	padding: 0;
	margin: 0;
	pointer-events: none;
}

.TbContent, .TbDataWhite, .tbContentFixed, .TbContentBorder {
	border-collapse: collapse;
	border-spacing: 0px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin: auto;
	width: 100%;
	background-color: none;
	overflow-x: auto;
}

	.TbContent td, .tbContentFixed td {
		padding-bottom: 5px;
		padding-top: 5px;
		font-size: 18px;
		color: var(--MainColorTxt2);
		vertical-align: middle;
	}

	.TbContentBorder td {
		padding-bottom: 5px;
		padding-top: 5px;
		padding-left: 8px;
		padding-right: 8px;
		font-size: 18px;
		color: var(--MainColorTxt2);
		vertical-align: middle;
		border: 1px solid rgb(50, 50, 50);
	}

.tbContentFixed {
	table-layout: fixed;
}

.TbDataWhite {
	border-collapse: separate;
	border-spacing: 0px 5px;
	transition: transform .2s;
}

	.TbDataWhite td {
		padding: 20px;
		border-radius: 0px;
		border-top: 1px solid rgba(235, 235, 235, 1);
		border-bottom: 1px solid rgba(235, 235, 235, 1);
		background-color: var(--bgWhiteColor);
		font-size: 18px;
		color: var(--MainColorTxt);
		vertical-align: top;
		padding-top: 14px;
		padding-bottom: 14px;
	}

.AutoWidthCell, .AutoWidthCellNoPad, .AutoWidthCellLeft, .AutoWidthCellRight {
	width: 1%;
	white-space: nowrap;
	padding-right: 10px;
	padding-left: 10px;
}

.AutoWidthCellNoPad {
	padding: 0px;
}

.AutoWidthCellLeft {
	padding-left: 0px;
}

.AutoWidthCellRight {
	padding-right: 0px;
}

.ContainMenu {
	width: 100%;
	border: none;
	background-color: var(--bgBlackColor);
	margin: 0;
	padding: 0;
	border: none;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 5;
	-webkit-backdrop-filter: blur(3px); /*blur bg*/
	backdrop-filter: blur(3px); /*blur bg*/
	padding-top: 0px;
	padding-bottom: 0px;
}

.MenuUpper {
	width: 100%;
	height: 3px;
	background-color: var(--MainColor);
	background: linear-gradient( to right, #0196FF, #EAD218 30%, #FA8249 50%, #C75FED 70%, #31DD89);
	background: linear-gradient( to right, #F85A4E, #F9A260 30%, #FB7171 50%, #FBBE56 65%, #FA5959);
	top: 0px;
	z-index: 5;
	position: -webkit-sticky;
	position: sticky;
}

.flexMenu {
	display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox; /* TWEENER - IE 10 */
	display: -webkit-flex; /* NEW - Chrome */
	display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */

	justify-content: space-around;
	justify-content: space-between;
	flex-wrap: nowrap;
	width: 100%;
	max-width: var(--DataMaxWidth);
	height: auto;
	border: none;
	margin: auto;
	padding: 0;
	align-items: center;
	background-color: transparent;
}

.ContainHeadMobMenu {
	display: none;
}





.btMenu, .btMenuFocus, .btLang, .btLangFocus, .btSubMenu, .btSubMenuFocus, .lbSubMenu, .btSideMenu, .btSideMenuFocus, .btSelectMode {
	background-color: rgba(200,0,0,0);
	border: none;
	outline: none;
	/*color: rgb(255, 255, 255);*/
	color: rgb(190, 190, 190);
	color: var(--MainColorTxt);
	text-align: center;
	vertical-align: middle;
	font-size: 20px;
	cursor: pointer;
	padding-left: 0px;
	padding-right: 0px;
	display: block;
	border-radius: 0px;
	margin: 0;
	font-family: MainFont;
	font-weight: normal;
	padding-top: 10px;
	padding-bottom: 10px;
}

.btMenu, .btMenuFocus {
	font-weight: bold;
}

.btMenuFocus, .btLang, .btSubMenuFocus {
	color: var(--MainColor);
}

.btLang, .btSubMenu, .lbSubMenu {
	color: rgb(255, 255, 255);
}

.btLangFocus {
	color: rgb(180, 180, 180);
}



.btSubMenu, .btSubMenuFocus, .lbSubMenu, .btLang, .btLangFocus {
	padding: 0;
}

	.btSubMenu:hover, .btMenu:hover {
		opacity: 0.5;
	}


.lbSubMenu {
	cursor: default;
	text-align: left;
}

.btSubMenuFocus {
	/*color: rgb(90, 90, 90);
	text-decoration: underline;*/
	color: rgb(255, 255, 255);
}

.btSideMenu, .btSideMenuFocus {
	text-align: left;
	padding: 12px;
	padding-top: 8px;
	padding-bottom: 8px;
	margin-top: 5px;
	margin-bottom: 5px;
}

.btSideMenuFocus {
	background-color: var(--MainColor);
	color: white;
	border-radius: 10px;
}

.btSelectMode {
	color: rgb(255, 255, 255);
	padding: 20px;
	padding-right: 15px;
	padding-left: 15px;
	border: none;
	background-color: var(--MainColorTxt2);
}

.MainContainMenu {
	font-family: MainFont;
	font-weight: normal;
	width: auto;
}

.ContainSubMenu, .ContainSubMenu2 {
	display: none;
	position: absolute;
	margin-left: auto;
	background-color: rgba(0, 0, 0, 0.8);
	background-color: rgba(234, 122, 59, 1);
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
	padding-top: 25px;
	padding-bottom: 25px;
	margin: 0 auto;
	margin: 0;
	left: 0;
	width: 100%;
	overflow-y: auto;
	max-height: 400px;
	color: white;
	animation: FadeIn .3s linear;
	-webkit-animation: FadeIn .3s linear;
	justify-content: flex-start;
	flex-wrap: nowrap;
	width: 90%;
	max-width: var(--DataMaxWidth);
	height: auto;
	border: none;
	margin: auto;
	align-items: stretch;
	padding-left: 5%;
	padding-right: 5%;
}

.ContainSubMenu2 {
	justify-content: center;
}

@-webkit-keyframes FadeIn {
	0% {
		opacity: 0.5;
		margin-top: 10px;
	}

	20% {
		opacity: 0.6;
		margin-top: 8px;
	}

	30% {
		opacity: 0.7;
		margin-top: 6px;
	}

	50% {
		opacity: 0.9;
		margin-top: 4px;
	}

	60% {
		opacity: 1;
		margin-top: 3px;
	}

	100% {
		margin-top: 0px;
	}
}

@keyframes FadeIn {
	0% {
		opacity: 0.5;
		margin-top: 10px;
	}

	20% {
		opacity: 0.6;
		margin-top: 8px;
	}

	30% {
		opacity: 0.7;
		margin-top: 6px;
	}

	50% {
		opacity: 0.9;
		margin-top: 4px;
	}

	60% {
		opacity: 1;
		margin-top: 3px;
	}

	100% {
		margin-top: 0px;
	}
}



.MainContainMenu:hover .btMenu {
	color: var(--MainColor);
}

.MainContainMenu:hover .ContainSubMenu {
	display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox; /* TWEENER - IE 10 */
	display: -webkit-flex; /* NEW - Chrome */
	display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.MainContainMenu:hover .ContainSubMenu2 {
	display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox; /* TWEENER - IE 10 */
	display: -webkit-flex; /* NEW - Chrome */
	display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.BorderRight {
	padding-left: 8%;
	margin-right: 8%;
	border-right: 1px solid rgb(230, 230, 230);
}

.flexAround, .flexBetween, .flexCenter, .flexProfile, .flexStart, .flexCol, .flexTest, .flexApp {
	display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox; /* TWEENER - IE 10 */
	display: -webkit-flex; /* NEW - Chrome */
	display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
	justify-content: space-around;
	flex-wrap: wrap;
	width: 100%;
	max-width: 1800px;
	height: auto;
	border: none;
	margin: auto;
	align-items: stretch;
}

.flexApp {
	gap: 40px;
	justify-content: center;
}

.flexProfile {
	align-items: flex-start;
	justify-content: space-between;
}

.flexBetween, .flexTest {
	justify-content: space-between;
}

.flexCenter {
	justify-content: center;
}

.flexStart {
	justify-content: flex-start;
}

.flexCol {
	justify-content: center;
	flex-direction: column;
}

.flexTest {
	flex-wrap: nowrap;
	overflow: auto;
}

.flexLeft {
	display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox; /* TWEENER - IE 10 */
	display: -webkit-flex; /* NEW - Chrome */
	display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
	flex-wrap: nowrap;
	height: auto;
	border: none;
	margin: 0;
	align-items: flex-start;
}

.ContainProfile {
	width: 65%;
}

.btImageSocial {
	outline: none;
	margin: 0;
	padding: 0;
	border: none;
	cursor: pointer;
	vertical-align: middle;
	margin-left: 5px;
	margin-right: 5px;
}

	.btImageSocial:hover {
		filter: grayscale(60%);
	}

	.btImageSocial img {
		height: 25px;
		width: auto;
	}

.btImg {
	outline: none;
	width: auto;
	margin: 0;
	padding: 0;
	border: none;
	cursor: pointer;
	vertical-align: middle;
	height: 22px;
	border-radius: 4px;
	padding: 3px;
	vertical-align: middle;
}


.btImLogo {
	outline: none;
	border: none;
	width: 46px;
	height: auto;
	margin: 0;
	padding: 0;
	vertical-align: middle;
}

	.btImLogo:hover {
		opacity: 0.6;
	}




.btLogin {
	background-color: rgb(255, 255, 255);
	color: var(--MainColorTxt2);
	border: 1px solid white;
	cursor: pointer;
	outline: none;
	-webkit-appearance: none;
	-webkit-border-radius: 0;
	white-space: nowrap;
	text-align: center;
	vertical-align: middle;
	margin: 0;
	border-radius: 25px;
	width: auto;
	font-size: 16px;
	padding: 15px;
	padding-top: 5px;
	padding-bottom: 5px;
	font-family: MainFont;
}

.btGeneral, .btGeneralColor, .btGeneralSmall, .btGeneralSmall2, .btGeneralSmall3, .btPass, .btNoPass {
	background-color: rgb(50, 50, 50);
	padding: 7px;
	font-size: 18px;
	cursor: pointer;
	outline: none;
	-webkit-appearance: none;
	-webkit-border-radius: 0;
	white-space: nowrap;
	border: none;
	color: rgb(255, 255, 255);
	text-align: center;
	vertical-align: middle;
	width: auto;
	border-radius: 5px;
	padding-left: 15px;
	padding-right: 15px;
	font-family: MainFont;
}

.btGeneralColor {
	background-color: var(--MainColor);
}

.btGeneralSmall, .btGeneralSmall2, .btPass, .btNoPass, .btGeneralSmall3 {
	font-size: 15px;
	padding: 5px;
	padding-left: 12px;
	padding-right: 12px;
}

.btGeneralSmall2, .btGeneralSmall3 {
	color: var(--MainColorTxt);
	background-color: rgb(255, 255, 255);
	border: 1px solid rgb(150, 150, 150)
}

.btGeneralSmall3 {
	padding: 1px;
	padding-left: 8px;
	padding-right: 8px;
}

.btPass {
	background-color: var(--MainColorGreen);
}

.btNoPass {
	background-color: var(--MainColorRed);
}

.btClose, .btDel {
	cursor: pointer;
	font-size: 30px;
	font-weight: bold;
	outline: none;
	-webkit-appearance: none;
	-webkit-border-radius: 0;
	white-space: nowrap;
	border: none;
	color: rgb(120, 120, 120);
	background-color: transparent;
}

	.btClose:hover, .btClose:focus {
		color: red;
	}

.btDel {
	color: red;
	font-size: 20px;
}

.lbTopic, .lbTopicC, .lbHead, .lbHeadC, .lbHeadB, .lbHeadPass, .lbHeadNopass, .lbSmall, .lbNormal, .lbNormalC, .lbNormalPale, .lbSubHead, .lbSubHeadC, .lbSmallB, .lbSmallRed, .lbSubHeadPass, .lbSubHeadNopass, .lbNormalHidden {
	font-size: 30px;
	color: var(--MainColorTxt);
	font-family: MainFont;
}

.lbHead, .lbHeadC, .lbHeadB, .lbHeadPass, .lbHeadNopass {
	font-size: 26px;
}

.lbSubHead, .lbSubHeadC, .lbSubHeadPass, .lbSubHeadNopass {
	font-size: 22px;
}

.lbSmall, .lbSmallB, .lbSmallRed {
	font-size: 15px;
	color: rgb(100, 100, 100);
}

.lbSmallB, .lbHeadB {
	font-weight: bold;
}


.lbNormal, .lbNormalC, .lbNormalPale {
	font-size: 18px;
}

.lbNormalC, .lbHeadC, .lbTopicC, .lbSubHeadC, .lbNormalHidden {
	color: var(--MainColor);
}

.lbNormalPale {
	color: var(--MainColorTxt3);
}


.lbNormalHidden {
	color: transparent;
}


.btLabel, .btLabel2, .btLabel3, .btLabel3Color, .btLabelColor, .btUserInfo, .btLabelPass, .btLabelNoPass, .btLabelBlack {
	background-color: transparent;
	color: var(--MainColorTxt2);
	border: none;
	cursor: pointer;
	outline: none;
	-webkit-appearance: none;
	-webkit-border-radius: 0;
	white-space: nowrap;
	text-align: center;
	vertical-align: middle;
	margin: 0;
	width: auto;
	font-size: 16px;
	padding: 0;
	font-family: MainFont;
}

.btLabel2 {
	color: var(--MainColorTxt3);
}

.btLabel3, .btLabel3Color {
	color: rgb(100, 100, 100);
	font-size: 26px;
	margin-left: 20px;
	margin-right: 20px;
}

.btLabelColor, .btLabel3Color {
	color: var(--MainColor);
}


.btLabelPass {
	color: var(--MainColorGreen);
}

.btLabelNoPass, .lbSmallRed {
	color: var(--MainColorRed);
}

.btLabelBlack {
	color: var(--MainColorTxt);
}

.btUserInfo {
	width: 100%;
	text-align: right;
	padding: 5px;
	padding-left: 10px;
}

	.btUserInfo:hover {
		color: rgb(200, 200, 200);
	}


.btLabelPass, .btLabelNoPass, .btLabelBlack {
	font-size: 22px;
}

.ImAnnounce {
	width: auto;
	height: 20vh;
	padding: 0;
	margin: 0;
}

.ContainNews, .ContainNews2, .ContainNews3, .ContainNews3Hide {
	display: inline-block;
	outline: none;
	-webkit-appearance: none;
	-webkit-border-radius: 0;
	white-space: normal;
	border-radius: 10px;
	border: none;
	box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2);
	background-color: none;
	text-decoration: none;
	width: 24.5%;
	margin: 0;
	padding: 0;
	vertical-align: top;
	height: auto;
	background-color: rgb(255, 255, 255);
}

	.ContainNews:hover, .ContainNews3:hover {
		transform: scale(1.02);
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
	}

	.ContainNews2:hover {
		transform: scale(1.01);
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
	}

.ContainNews2 {
	width: 48.75%;
}

.ContainNews3, .ContainNews3Hide {
	width: 32%;
	margin-top: 30px;
}

.ContainNews3Hide {
	visibility: hidden;
}

.ContainPerson {
	display: inline-block;
	outline: none;
	-webkit-appearance: none;
	-webkit-border-radius: 0;
	white-space: normal;
	border-radius: 0px;
	border: none;
	background-color: transparent;
	text-decoration: none;
	width: 32%;
	margin: 0;
	padding: 0;
	vertical-align: middle;
	height: auto;
	margin-bottom: 30px;
}

.ImPreview, .ImPreview2, .ImPreview3 {
	width: 12vw;
	height: auto;
	margin: 0;
	padding: 0;
	display: block;
}

.ImPreview2 {
	width: 45vw;
}

.ImPreview3 {
	width: 18vw;
	display: inline-block;
	vertical-align: text-top;
	margin-bottom: 15px;
}

.ImQuestion, .ImAns {
	width: 35vw;
	height: auto;
	margin: 0;
	padding: 0;
	display: block;
	margin-bottom: 12px;
}

.ImAns {
	width: 25vw;
	display: inline-block;
	vertical-align: top;
}


.ImNews, .ImNews2, .ImProfile, .ImShowProfile, .ImNewsDetail {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	display: block;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.ImNews2 {
	width: 20%;
	height: auto;
}

.ImNewsDetail {
	width: 30%;
	height: auto;
	border-radius: 10px;
}

.PicConNews {
	position: relative;
	text-align: center;
	color: var(--MainColorTxt);
	overflow: hidden;
	margin: 0;
	padding: 0;
	background-color: none;
}

.ContainLimitTxt, .ContainLimitTxt5 {
	width: 95%;
	margin-left: auto;
	margin-right: auto;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.ContainLimitTxt5 {
	-webkit-line-clamp: 5;
}

.TxtNews {
	/*position: absolute;*/
	bottom: 0%;
	background-color: rgba(1, 2, 3, 0.5);
	width: 100%;
	padding: 0px;
	height: 30%;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	background-color: rgb(255, 255, 255, 0.9);
	background-color: rgb(79, 109, 116, 0.95);
	color: var(--MainColorTxt);
}

.InTxtNews {
	width: var(--DataWidth);
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2; /* number of lines to show */
	line-clamp: 2;
	-webkit-box-orient: vertical;
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: left;
}


.InTxtNews2 {
	width: var(--DataWidth);
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1; /* number of lines to show */
	line-clamp: 1;
	-webkit-box-orient: vertical;
	position: absolute;
	top: 88%;
	top: 85%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: right;
}


.ImProfile {
	width: 2vw;
	height: auto;
	border-radius: 25px;
	display: inline-block;
	vertical-align: middle;
	border: 0px solid rgb(200, 200, 200);
	margin: 0;
	padding: 0;
}

.ImShowProfile {
	width: 100%;
	height: auto;
	border-radius: 5px;
	vertical-align: middle;
	border: 0px solid rgb(200, 200, 200);
	margin: 0;
	padding: 0;
	margin-left: auto;
	margin-right: auto;
}



.hlLabel, .hlLabelColor, .hlLabelSmall, .hlLabelXL {
	color: var(--MainColorTxt2);
	font-size: 18px;
	font-family: MainFont;
	text-decoration: none;
}

.hlLabelColor, .hlLabelXL {
	color: var(--MainColorBlue);
	text-decoration: underline;
}

.hlLabelSmall {
	font-size: 15px;
}

.hlLabelXL {
	font-size: 25px;
	font-weight: bold;
}

.btOpenMenu, .btCloseMenu {
	display: none;
}


.nav__icon {
	width: 27px;
	height: 25px;
	margin-right: 0px;
	margin-bottom: auto;
	margin-top: auto;
	position: relative;
	cursor: pointer;
	z-index: 9;
}

	.nav__icon span {
		transition: all .3s;
		display: inline-block;
		background: rgb(80, 80, 80);
		position: absolute;
		right: 0;
		width: 100%;
		height: 2px;
		border-radius: 2px;
	}

		.nav__icon span:nth-of-type(1) {
			top: 5px;
		}

		.nav__icon span:nth-of-type(2) {
			top: 12px;
		}

		.nav__icon span:nth-of-type(3) {
			top: 19px;
		}

	.nav__icon.active span:nth-of-type(1) {
		-webkit-transform: translateY(7px) rotate(-45deg);
		transform: translateY(7px) rotate(-45deg);
	}

	.nav__icon.active span:nth-of-type(2) {
		opacity: 0;
	}

	.nav__icon.active span:nth-of-type(3) {
		-webkit-transform: translateY(-7px) rotate(45deg);
		transform: translateY(-7px) rotate(45deg);
	}

.HidetoShow {
	display: none;
}

.ShowtoHide {
	display: block;
}

.lbtWhitebg, .lbtWhitebg2, .lbtWhitebg3, .lbtWhitebg3Blank, .lbtApp, .lbtAppHidden {
	cursor: pointer;
	outline: none;
	-webkit-appearance: none;
	-webkit-border-radius: 0;
	white-space: normal;
	border-radius: 10px;
	border: 1px solid rgb(220, 220, 220);
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
	padding: 12px;
	background-color: var(--bgWhiteColor);
	text-decoration: none;
	display: inline-block;
	width: 25%;
	margin: 0;
	vertical-align: middle;
	transition: transform .1s;
	text-align: center;
	color: var(--MainColorTxt2);
}

	.lbtWhitebg:hover, .lbtWhitebg2:hover, .lbtWhitebg3:hover {
		transform: scale(1.05);
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
	}

.lbtWhitebg2 {
	width: 55%;
	padding-bottom: 6px;
}

.lbtWhitebg3, .lbtWhitebg3Blank {
	border-radius: 0px;
	border: 1px solid rgb(240, 240, 240);
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0);
	padding: 0px;
	width: 23%;
	padding-bottom: 35px;
	margin-top: 10px;
	margin-bottom: 40px;
}

.lbtWhitebg3Blank {
	visibility: hidden;
}

.lbtApp, .lbtAppHidden {
	background-color: transparent;
	border: none;
	padding: 0;
	width: 8vw;
	margin: 0;
	margin-top: 15px;
	margin-bottom: 15px;
	margin-left: 12px;
	margin-right: 12px;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0);
}

	.lbtApp:hover {
		transform: scale(1.08);
	}

.lbtAppHidden {
	visibility: hidden;
}

.imLbt, .imLbt2 {
	width: 100%;
	height: auto;
	align-content: center;
	cursor: pointer;
	border-radius: 10px;
	border: 0px solid rgb(222, 222, 222);
	box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.5);
}

.imLbt2 {
	border-radius: 0px;
}

.rbtAndcb, .rbtAndcb2, .rbtTest {
	border: none;
	background-color: none;
	margin: 0;
	padding: 0;
	vertical-align: middle;
}


	.rbtAndcb label {
		margin-right: 25px;
		vertical-align: middle;
		margin-left: 3px;
		font-size: 22px;
		font-family: MainFont;
	}

	.rbtAndcb td {
		border: none;
		vertical-align: middle;
		text-align: left;
		margin: 0;
		padding: 0;
		color: var(--MainColorTxt2);
		font-size: 22px;
		font-family: MainFont;
	}

	.rbtAndcb2 td {
		border: none;
		vertical-align: middle;
		text-align: left;
		margin: 0;
		padding: 0;
		color: var(--MainColorTxt2);
		font-family: MainFont;
	}

	.rbtAndcb2 label {
		margin-right: 10px;
		vertical-align: middle;
		font-family: MainFont;
		margin-left: 3px;
	}

	.rbtTest td {
		display: block;
		color: var(--MainColorTxt);
		font-family: MainFont;
		border: none;
		text-align: left;
		margin: 0;
		padding: 0;
	}

	.rbtTest label {
		vertical-align: middle;
		font-size: 22px;
		font-family: MainFont;
		margin: 0;
		padding: 0;
		border: none;
		margin-left: 3px;
	}





.tbInput, .tbInputNoWidth, .ddl, .ddlColor, .tbTextEdit, .tbSearch, .tbInputXL {
	width: 100%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 18px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 8px;
	padding-right: 8px;
	vertical-align: middle;
	font-family: MainFont;
	-webkit-appearance: caret;
}

.tbInputNoWidth {
	width: auto;
}

.tbSearch {
	width: 250px;
}

.tbTextEdit {
	height: 35vh
}

.tbInputXL {
	width: auto;
	font-size: 22px;
}

.ddl, .ddlColor {
	width: auto;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 8px;
	padding-left: 6px;
	padding-right: 6px;
	border-radius: 10px;
	border: 1px solid rgb(30, 30, 30);
	font-weight: normal;
	max-width: 85vw;
	margin-top: 3px;
	margin-bottom: 3px;
}


.modal, .modalSolid {
	display: block; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 10; /* Sit on top */
	left: 0;
	top: 0;
	width: 100vw; /* Full width */
	height: 100vh; /* Full height */
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	z-index: 11; /* Sit on top */
	background-color: rgba(250, 250, 250, 0.4); /* Black w/ opacity */
	-webkit-backdrop-filter: blur(5px); /*blur bg*/
	backdrop-filter: blur(5px); /*blur bg*/
}


.modalSolid {
	background-color: rgba(250, 250, 250, 1); /* Black w/ opacity */
}



.modal-content, .modal-contentXL, .modal-contentS, .modal-contentL, .modal-contentWidth {
	background-color: var(--bgWhiteColor);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 0px solid rgb(100, 100, 100);
	padding: 15px;
	box-shadow: 1px 1px 10px 2px rgba(0,0,0, 0.4);
	width: 40%;
	max-width: 800px;
	border-radius: 10px;
}

.ModalinModal {
	width: auto;
	height: auto;
	position: absolute;
	z-index: 11; /* Sit on top */
	background-color: rgba(255, 255, 255, 1); /* Black w/ opacity */
	-webkit-backdrop-filter: blur(0px); /*blur bg*/
	backdrop-filter: blur(0px); /*blur bg*/
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 1px 1px 15px 5px rgb(100,100,100);
	padding: 10px;
	width: 65%;
	max-width: 450px;
}

.modal-contentWidth {
	min-width: 38vw;
}

.modal-contentL {
	width: 55%;
	max-width: 1300px;
}

.modal-contentXL {
	width: 90%;
	max-width: 1500px;
}

.modal-contentS {
	width: 35%;
	max-width: 400px;
}

.DisableScroll {
	overflow: hidden;
}

.ShowBlockInfo {
	position: absolute;
	display: none;
	background-color: var(--bgWhiteColor);
	z-index: 4;
	z-index: 14;
	padding: 10px;
	border-radius: 10px;
	border: 1px solid rgb(220, 220, 220);
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
	width: auto;
	background-color: var(--bgWhiteColor);
	margin-top: 10px;
	right: 0;
	padding-left: 16px;
	padding-right: 16px;
}

.BlockInfo {
	position: relative;
	cursor: pointer;
	border: 0px solid rgb(180, 180, 180);
	padding: 0px;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 8px;
	text-align: center;
	border-radius: 10px;
	width: auto;
	padding-left: 2px;
}



	.BlockInfo:hover {
		background-color: rgb(230, 230, 230);
	}


		.BlockInfo:hover .ShowBlockInfo {
			display: block;
		}


.sidenav {
	height: auto;
	position: fixed;
	z-index: 1;
	left: 0;
	background-color: var(--bgBlackColor);
	overflow-x: hidden;
	transition: 0.5s;
	padding-top: 0px;
	width: 250px;
}

.ContentWithSideNav {
	margin-left: 250px;
}


.lbtMenu, .lbtMenuFocus {
	cursor: pointer;
	outline: none;
	font-family: MainFont;
	-webkit-appearance: none;
	-webkit-border-radius: 0;
	white-space: normal;
	background-color: rgb(255, 255, 255);
	text-decoration: none;
	vertical-align: middle;
	padding: 15px;
	padding-top: 8px;
	padding-bottom: 8px;
	display: inline-block;
	width: auto;
	border: 2px solid rgb(150, 150, 150);
	border-radius: 10px;
	margin: 0;
	margin-bottom: 5px;
	filter: grayscale(65%);
	opacity: 0.8;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
	font-size: 20px;
	color: rgb(120, 120, 120);
}

.lbtMenuFocus {
	filter: grayscale(0%);
	opacity: 1;
	border-color: var(--MainColor);
	color: var(--MainColorTxt);
}

.lbtMenu:hover {
	filter: grayscale(0%);
	opacity: 1;
}



.lbMenuAlert {
	cursor: pointer;
	font-size: 15px;
	color: rgb(255, 255, 255);
	padding: 3px;
	padding-left: 11px;
	padding-right: 11px;
	border-radius: 25px;
	margin-left: 10px;
	background-color: var(--MainColorRed);
	background-color: rgb(244,50, 50);
	vertical-align: middle;
	/*opacity: 0.4;*/
}

.UnderLine, .UnderLine2, .UnderLine3 {
	width: 100%;
	height: 1px;
	background-color: rgb(200, 200, 200);
}

.UnderLine2 {
	height: 3px;
}

.UnderLine3 {
	height: 5px;
	background-color: rgb(150, 150, 150);
}


.ContainDelBt {
	display: inline-block;
	margin-left: 10px;
	width: auto;
}

.OverflowX {
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	margin: 0px;
	padding: 0px;

}

.OverflowY {
	overflow-y: auto;
	max-height: 38vh;
	border: var(--borderTB);
}


.OverflowYL {
	overflow-y: auto;
	max-height: 50vh;
	border: var(--borderTB);
}

.OverflowYXL {
	overflow-y: auto;
	max-height: 60vh;
	border: var(--borderTB);
}


.prev, .next {
	position: absolute;
	cursor: pointer;
	width: auto;
	color: rgb(100, 100, 100);
	font-weight: bold;
	font-size: 23px;
	transition: 0.6s ease;
	user-select: none;
	top: 40%;
	background-color: rgba(240, 240, 240, 0.2);
	padding-right: 12px;
	padding-left: 12px;
	height: 20%;
	margin: 0;
	display: flex;
	justify-content: center; /* align horizontal */
	align-items: center; /* align vertical */
}

.next {
	right: 0;
	/*border-radius: 15px 0 0 15px;*/
}

	.prev:hover, .next:hover {
		background-color: rgba(240, 240, 240, 0.65);
		color: black;
	}


.FullHeight {
	width: 100%;
	/*height: 95vh;*/
	height: 55vh;
	/*filter: grayscale(80%);*/
	border-radius: 10px;
}

.slideshow-container {
	max-width: 2200px;
	width: 100%;
	position: relative;
	display: inline-block;
	margin: 0;
	padding: 0;
	height: 55vh;
	box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2);
	border-radius: 10px;
}

.MenuSlide {
	display: none;
	-webkit-animation-name: fade;
	-webkit-animation-duration: 1s;
	animation-name: fade;
	animation-duration: 1s;
}

@-webkit-keyframes fade {
	from {
		opacity: .6
	}

	to {
		opacity: 1
	}
}

@keyframes fade {
	from {
		opacity: .6
	}

	to {
		opacity: 1
	}
}

.dot {
	cursor: pointer;
	height: 12px;
	width: 12px;
	margin: 0 2px;
	background-color: rgba(245,245,245,1);
	border-radius: 50%;
	border: 0px solid rgba(100,100,100,1);
	display: inline-block;
	transition: background-color 0.6s ease;
	margin: 0;
	margin-left: 15px;
}

.dotactive {
	background-color: var(--MainColor);
	background-color: rgb(120, 120, 120);
	border: 0px solid rgba(80,80,80,1);
}

.ContainDot {
	position: absolute;
	margin: auto;
	bottom: 10px;
	right: 10px;
	background-color: rgba(0,0,0,0);
}




.ImBanner, .ImSubBanner, .ImSubBanner2, .ImCompeltedProject {
	width: 100%;
	height: auto;
	margin: auto;
	display: block;
}

.ImSubBanner, .ImSubBanner2 {
	margin: 0;
	padding: 0;
	display: inline-block;
	width: 30vw;
	margin-bottom: 25px;
	margin-top: 0px;
}

.ImSubBanner2 {
	width: 26vw;
	margin-bottom: 0px;
}

.ImCompeltedProject {
	margin: 0;
	padding: 0;
	display: inline-block;
	width: 23vw;
	margin-bottom: 25px;
	margin-top: 25px;
}

.ImLogo, .ImLogo2, .ImLogo3 {
	width: 8vw;
	vertical-align: middle;
}

.ImLogo2 {
	width: 35px;
	height: auto;
}

.ImLogo3 {
	width: 20px;
	height: auto;
}



.ImS, .ImM, .ImL, .ImWeb, .ImWeb2, .ImSign {
	width: 20%;
	height: auto;
}

.ImM {
	width: 35%;
}

.ImL {
	width: 50%;
}

.ImWeb, .ImWeb2 {
	width: 23%;
	border-radius: 10px;
}

.ImWeb2 {
	width: 48%;
}


.ImTb {
	width: 20vw;
	height: auto;
}

.ImSign {
	width: auto;
	height: 50px;
	vertical-align: middle;
	padding: 0;
	margin: 0;
}


.lbtHomeContainer {
	display: inline-block;
	outline: none;
	-webkit-appearance: none;
	-webkit-border-radius: 0;
	white-space: normal;
	border-radius: 10px;
	border: none;
	box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2);
	background-color: none;
	text-decoration: none;
	width: 24.5%;
	margin: 0;
	padding: 0;
	vertical-align: middle;
	height: auto;
}




.PicConLbtHome {
	position: relative;
	text-align: center;
	color: white;
	overflow: hidden;
	margin: 0;
	padding: 0;
	background-color: none;
}



.TxtCenterLbtHome {
	position: absolute;
	top: 0;
	background-color: rgba(74, 109, 116, 0.2);
	width: 100%;
	padding: 0px;
	height: 100%;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	background: linear-gradient(to bottom, rgba(74, 109, 116, 1) 0%, rgba(74, 109, 116, 0.95) 5%, rgba(74, 109, 116, 0.9) 20%, rgba(74, 109, 116, 0) 21%);
	padding-top: 4%;
}

.ImLbtHome {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	display: block;
	border-radius: 10px;
}

.lbLbtHome {
	font-size: 30px;
	font-size: 21px;
	color: white;
	font-family: MainFont;
}

.containerEditText .ajax__html_editor_extender_container {
	width: 100% !important; /*important is really important at here*/
}

.ContainProfileDetail1 {
	width: 35%
}


.ContainProfileDetail2 {
	width: 60%
}

.BoxL, .BoxM, .BoxS, .BoxSS, .BoxFill {
	width: 45vw;
	white-space: normal;
}

.BoxFill {
	width: 100%;
	background-color: red;
}

.BoxM {
	width: 30vw;
}

.BoxS {
	width: 20vw;
}

.BoxSS {
	width: 12vw;
}


.VdoContent {
	width: 100%;
	height: auto;
	padding: 0;
	margin: 0;
	pointer-events: none;
}


.ContainChart, .ContainChartHigh {
	width: 100%;
	height: 250px;
	margin-left: 0;
	margin: 0;
	padding: 0;
}

.ContainChartHigh {
	height: 450px;
}


.lbPass, .lbSubHeadPass, .lbHeadPass {
	color: var(--MainColorGreen);
}

.lbNopass, .lbSubHeadNopass, .lbHeadNopass {
	color: var(--MainColorRed);
}


.Mapping {
	width: 100%;
	height: 60vh;
	z-index: 1;
}


.custom-treeview {
	width: auto;
}

	.custom-treeview img {
		height: auto;
		width: 18px;
		margin: 0;
		margin-right: 5px;
	}


.NodeNoSelected {
	color: var(--MainColorTxt)
}

.NodeSelected {
	color: var(--MainColor);
	font-weight: bold;
}


.btTreeviewEdit {
	width: auto;
	padding: 0;
	margin: 0;
	font-weight: bold;
	height: 32px;
	vertical-align: middle;
	padding-left: 10px;
	padding-right: 10px;
	border: 1px solid rgb(20, 20, 20);
	background-color: rgb(252, 252, 252);
	border-radius: 3px;
}

	.btTreeviewEdit:hover {
		opacity: 0.6;
	}


.progress-bar, .progress-bar2 {
	width: 100%; /* Full width */
	height: 10px; /* Height of the progress bar */
	background-color: rgb(145, 145, 145); /* Empty (red color) */
	border-radius: 5px; /* Optional: Rounded corners */
	overflow: hidden; /* Hide the overflow of the inner progress */
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Optional: Add shadow */
	vertical-align: middle;
	margin: 0;
	padding: 0;
}


.progress-bar2 {
	height: 8px; /* Height of the progress bar */
	min-width: 10vw;
	margin-top: 10px;
}

/* Filled progress */
.progress {
	width: 100%; /* Change this to reflect the current progress (e.g., 70%) */
	height: 100%; /* Full height */
	background-color: var(--MainColorGreen); /* Green color for the filled portion */
	transition: width 0.3s ease; /* Smooth transition when progress changes */
}


.DisableEle {
	pointer-events: none;
	opacity: 0.5;
	filter: grayscale(40%);
}

.EnableEle {
	pointer-events: auto;
	opacity: 1;
	filter: grayscale(0%);
}


.LbtActiveCamp, .LbtActiveCampNoClick, .LbtActiveCampSmall {
	width: 40vw;
	height: auto;
	margin: 0;
	padding: 0;
	display: block;
	background-color: rgb(255, 255, 255);
	cursor: pointer;
	outline: none;
	-webkit-appearance: none;
	-webkit-border-radius: 0;
	white-space: normal;
	text-decoration: none;
	border-radius: 15px;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
}


.LbtActiveCampNoClick {
	pointer-events: none;
	cursor: not-allowed;
}


.LbtActiveCampSmall {
	width: 40vw;
	background-color: rgb(242, 242, 242);
	margin-left: 20px;
	margin-right: 20px;
	border: 0px solid rgb(240, 240, 240);
}


.StatusBar {
	width: 100%; /* Full width */
	background-color: rgb(225, 225, 225); /* Empty (red color) */
	border-bottom-left-radius: 15px; /* Optional: Rounded corners */
	border-bottom-right-radius: 15px; /* Optional: Rounded corners */
	overflow: hidden; /* Hide the overflow of the inner progress */
	/*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);  Optional: Add shadow */
	vertical-align: middle;
	margin: 0;
	padding: 0;
}


.btRoomAvai, .btRoomNotAvai, .btRoomNotUsed, .btRoomHidden {
	background-color: var(--MainColorGreen);
	padding: 15px;
	font-size: 20px;
	font-weight: bold;
	cursor: pointer;
	outline: none;
	-webkit-appearance: none;
	-webkit-border-radius: 0;
	white-space: nowrap;
	border: none;
	color: rgb(255, 255, 255);
	text-align: center;
	vertical-align: middle;
	width: 13.7vw;
	border-radius: 5px;
	font-family: MainFont;
	margin-bottom: 20px;
	

}

.RoomAvai, .RoomNotAvai, .RoomNotUsed {
	background-color: var(--MainColorGreen);
	padding: 6px;
	padding-left: 12px;
	padding-right: 12px;
	font-size: 14px;
	outline: none;
	-webkit-appearance: none;
	-webkit-border-radius: 0;
	white-space: nowrap;
	border: none;
	color: rgb(255, 255, 255);
	text-align: center;
	vertical-align: middle;
	width: auto;
	border-radius: 5px;
	font-family: MainFont;
}

.btRoomNotAvai, .RoomNotAvai {
	background-color: var(--MainColorRed);
}

.btRoomNotUsed, .RoomNotUsed {
	background-color: var(--MainColorOrange);
}



.btRoomHidden {
	visibility: hidden;
	
}


.step-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: transparent;
	padding: 0px;
	padding-top: 20px;
	max-width: 1200px;
	min-width: 640px;
	margin: 0;
}

.step { /* เส้น */
	text-align: center;
	position: relative;
	flex: 1;
}

	.step::before {
		content: '';
		position: absolute;
		top: 30px;
		left: -50%;
		width: 100%;
		height: 4px;
		background-color: #ccc; /* default gray */
		z-index: 0;
	}

	/* Blue line only for completed and active steps */
	.step.completed::before,
	.step.active::before {
		background-color: #03a9f4;
		background-color: var(--MainColorGreen);
	}

	.step.not-completed::before,
	.step.active::before {
		background-color: #03a9f4;
		background-color: var(--MainColorGreen);
	}





	.step:first-child::before {
		content: none;
	}

.circle {
	width: 60px;
	height: 60px;
	line-height: 60px;
	border-radius: 50%;
	background-color: #ccc;
	color: white;
	display: inline-block;
	position: relative;
	z-index: 1;
	border: 3px solid #ccc;
}

.completed .circle {
	background-color: #03a9f4;
	background-color: var(--MainColorGreen);
	border: 3px solid var(--MainColorGreen);
}

	.completed .circle::after {
		content: '✔';
		display: block;
		font-size: 25px;
	}



.not-completed .circle {
	background-color: #03a9f4;
	background-color: var(--MainColorRed);
	border: 3px solid var(--MainColorRed);
}

	.not-completed .circle::after {
		content: '✘';
		display: block;
		font-size: 25px;
	}




.active .circle {
	/*border: 4px solid #03a9f4;
	border: 4px solid var(--MainColorGreen);
	color: #03a9f4;
	color: var(--MainColorGreen);*/
	background-color: white;
	color: var(--MainColorTxt);
	font-weight: bold;

}

.step-text {
	margin-top: 10px;
	height: 120px;
	background-color: transparent;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	border-radius: 4px;
}

	.step-text.long {
		width: 40%;
		background-color: #03a9f4;
	}



@media screen and (max-width: 1250px) {
	.lbtApp, .lbtAppHidden {
		width: 10vw;
		margin-top: 15px;
		margin-bottom: 15px;
	}

	.flexApp {
		gap: 35px;
	}

	/*.Footer1 {
			width: 35%;
			border-right: 1px solid rgb(240, 240, 240);
			margin-right: 4%;
		}
		.Footer1 {
			width: 100%;
			border-right: 0px solid rgb(240, 240, 240);
			border-bottom: 1px solid rgb(240, 240, 240);
			margin-right: 0;
			margin-bottom: 10px;
			padding-bottom: 10px;
		}

		.Footer2 {
			width: 33%;
		}*/

	.Footer1 {
		width: 40%;
	}

	.DataContentLogin {
		width: 33%;
	}

	.lbLbtHome {
		font-size: 28px;
		font-size: 19px;
	}

	.ContainChartHigh {
		height: 420px;
	}
}

@media screen and (max-width: 1150px) {

	.btRoomAvai, .btRoomNotAvai, .btRoomNotUsed, .btRoomHidden {
		padding: 14px;
		font-size: 18px;
		width: 14.7vw;
		margin-bottom: 18px;
	}

	.LbtActiveCamp, .LbtActiveCampNoClick {
		width: 48vw;
	}

	.flexApp {
		gap: 30px;
	}

	.ImPreview {
		width: 25vw;
		width: 16vw;
	}


	.ImPreview2 {
		width: 50vw;
	}

	.ImPreview3 {
		width: 21vw;
		margin-bottom: 14px;
	}

	.ImQuestion {
		width: 42vw;
	}

	.ImAns {
		width: 32vw;
	}


	.DataContentWhiteLogin, .DataContentLogin {
		width: 40%;
	}

	.btLogo {
		height: 70px;
	}

	.lbHeader {
		font-size: 37px;
	}

	.lbHeader2 {
		font-size: 22px;
	}

	.lbHead, .lbHeadC, .btLabel3, .btLabel3Color, .lbHeadB, .lbHeadPass, .lbHeadNopass {
		font-size: 25px;
	}

	.lbSubHead, .lbSubHeadC, .lbSubHeadPass, .lbSubHeadNopass, .btLabelPass, .btLabelNoPass, .btLabelBlack, .tbInputXL {
		font-size: 21px;
	}


	.lbtWhitebg3, .lbtWhitebg3Blank {
		width: 28%;
		padding-bottom: 35px;
		margin-top: 10px;
		margin-bottom: 40px;
	}

	.modal-contentS {
		width: 40%;
	}

	.modal-content {
		width: 45%;
	}

	.modal-contentWidth {
		min-width: 43vw;
	}

	.modal-contentL {
		width: 60%;
	}

	.DataContentSS {
		width: 70%;
	}


	/*.Footer2 {
			width: 18%;
		}

		.Footer1 {
			width: auto;
			border-right: 1px solid rgb(240, 240, 240);
			padding-right: 25px;
			margin-right: 0;
		}*/




	.lbtApp, .lbtAppHidden {
		width: 11vw;
		margin-top: 15px;
		margin-bottom: 15px;
	}

	.lbLbtHome {
		font-size: 24px;
		font-size: 16px;
	}

	.ContainChartHigh {
		height: 380px;
	}

	.ImProfile {
		width: 3vw;
	}

	.ImCompeltedProject {
		margin: 0;
		padding: 0;
		display: inline-block;
		width: 26vw;
		margin-bottom: 25px;
		margin-top: 25px;
	}
}


@media screen and (max-width: 1000px) {
	


	.VerticalLine2 {
		width: 3px;
		height: 25px;
	}

	.LbtActiveCamp, .LbtActiveCampNoClick {
		width: 52vw;
	}

	.flexApp {
		gap: 25px;
	}

	.DataContentWhiteLogin, .DataContentLogin {
		width: 42%;
	}

	.btLogo {
		height: 65px;
	}

	.lbHead, .lbHeadC, .btLabel3, .btLabel3Color, .lbHeadB, .lbHeadPass, .lbHeadNopass {
		font-size: 24px;
	}

	.lbSubHead, .lbSubHeadC, .lbSubHeadPass, .lbSubHeadNopass, .btLabelPass, .btLabelNoPass, .btLabelBlack, .tbInputXL {
		font-size: 20px;
	}

	.rbtAndcb td, .rbtAndcb label, .rbtTest label {
		font-size: 21px;
	}

	.ImNewsDetail {
		width: 40%;
		margin-bottom: 15px;
	}

	.ContainNews, .ContainNews2, .ContainNews3 {
		width: 49.5%;
		margin-top: 10px;
	}

		.ContainNews:hover, .ContainNews3:hover {
			transform: scale(1.01);
		}

	.ContainNews3Hide {
		display: none;
	}

	.ContainPerson {
		width: 48%;
	}

	.btMenu, .btMenuFocus, .btLang, .btLangFocus, .btSubMenu, .btSubMenuFocus, .lbSubMenu, .btSideMenu, .btSideMenuFocus, .lbtMenu, .lbtMenuFocus {
		font-size: 19px;
	}



	.lbtWhitebg {
		width: 32%;
		margin-bottom: 20px;
	}

	.lbtWhitebg2 {
		width: 60%;
		padding-bottom: 6px;
	}


	.lbtWhitebg3, .lbtWhitebg3Blank {
		width: 30%;
		padding-bottom: 35px;
		margin-top: 10px;
		margin-bottom: 40px;
	}


	.btLabel3, .btLabel3Color {
		margin-left: 17px;
		margin-right: 17px;
	}


	.Footer1 {
		/*width: auto;
			border-right: 1px solid rgb(240, 240, 240);
			padding-right: 16px;
			margin-right: 0;*/
	}



	.lbtApp, .lbtAppHidden {
		width: 12vw;
		margin-top: 15px;
		margin-bottom: 15px;
	}


	.lbtHomeContainer {
		width: 49.5%;
		margin-bottom: 12px;
	}

	.lbLbtHome {
		font-size: 30px;
		font-size: 28px;
	}

	.ContainChartHigh {
		height: 350px;
	}

	.Footer1 {
		width: 100%;
		border-right: 0px solid rgb(240, 240, 240);
		border-bottom: 1px solid rgb(240, 240, 240);
		margin-right: 0;
		margin-bottom: 10px;
		padding-bottom: 10px;
	}


	.ImCompeltedProject {
		margin: 0;
		padding: 0;
		display: inline-block;
		width: 27vw;
		margin-bottom: 25px;
		margin-top: 25px;
	}

	.ImSubBanner {
		width: 36vw;
	}

	.ImSubBanner2 {
		width: 30vw;
	}
}

@media screen and (max-width: 900px) {

	.VerticalLine2 {
		width: 3px;
		height: 22px;
	}

	.LbtActiveCamp, .LbtActiveCampNoClick {
		width: 55vw;
	}

	.ImQuestion {
		width: 50vw;
	}

	.ImAns {
		width: 40vw;
	}

	.Footer1 {
		/*width: 33%;
			border-right: 1px solid rgb(240, 240, 240);
			margin-right: 0%;
			padding-right: 15px;*/
	}

	.Footer2 {
	}

	.btFooter, .btFooter2, .lbFooter {
		font-size: 13px;
	}

	.lbFooter2 {
		font-size: 22px;
	}

	.lbFooter3 {
		font-size: 11px;
	}

	.btClose {
		font-size: 28px;
	}

	.ImSubBanner2 {
		width: 35vw;
	}
}

@media screen and (max-width: 870px) {

	.VerticalLine2 {
		width: 3px;
		height: 20px;
	}

	.btLogo {
		height: 60px;
	}

	.lbHeader {
		font-size: 35px;
	}

	.lbHeader2 {
		font-size: 20px;
	}

	.LowLineHeight {
		line-height: 0.8;
	}

	.lbHead, .lbHeadC, .btLabel3, .btLabel3Color, .lbHeadB, .lbHeadPass, .lbHeadNopass {
		font-size: 22px;
	}

	.lbSubHead, .lbSubHeadC, .lbSubHeadPass, .lbSubHeadNopass, .btLabelPass, .btLabelNoPass, .btLabelBlack, .tbInputXL {
		font-size: 19px;
	}

	.rbtAndcb td, .rbtAndcb label, .rbtTest label {
		font-size: 19px;
	}

	.rbtAndcb label {
		margin-right: 22px;
	}

	.btMenu, .btMenuFocus, .btLang, .btLangFocus, .btSubMenu, .btSubMenuFocus, .lbSubMenu, .btSideMenu, .btSideMenuFocus, .lbtMenu, .lbtMenuFocus {
		font-size: 18px;
	}



	.lbtWhitebg2 {
		width: 65%;
		padding-bottom: 6px;
	}



	.btLabel3, .btLabel3Color {
		margin-left: 15px;
		margin-right: 15px;
	}

	.btLabel, .btUserInfo {
		font-size: 15px;
	}

	.lbSmall, .lbMenuAlert, .btGeneralSmall, .hlLabelSmall, .btGeneralSmall2, .btPass, .btNoPass, .btGeneralSmall3, .lbSmallB, .lbSmallRed {
		font-size: 14px;
	}

	.lbMenuAlert {
		font-size: 13px;
	}

	.modal-contentS {
		width: 60%;
	}

	.modal-content {
		width: 50%;
	}

	.modal-contentWidth {
		min-width: 48vw;
	}

	.modal-contentL {
		width: 65%;
	}

	.lbtApp, .lbtAppHidden {
		width: 14vw;
		margin-top: 15px;
		margin-bottom: 15px;
	}


	.btGeneral, .btGeneralColor {
		padding: 6px;
		font-size: 16px;
	}

	.BlankSpace {
		height: 35px;
	}

	.BlankSpaceS {
		height: 15px;
	}
}


@media screen and (max-width: 850px) {

	.btRoomAvai, .btRoomNotAvai, .btRoomNotUsed, .btRoomHidden {
		padding: 14px;
		font-size: 17px;
		width: 16.7vw;
		margin-bottom: 17px;
	}


	.ImSubBanner {
		width: 40vw;
	}

	.ImSubBanner2 {
		width: 38vw;
	}

	.LbtActiveCamp, .LbtActiveCampNoClick {
		width: 70vw;
	}

	.LbtActiveCampSmall {
		width: 45vw;
	}

	.flexApp {
		gap: 50px;
	}

	.DataInContainer {
		width: 95%;
	}

	.DataContentWhite {
		width: 95%;
	}

	.DataContentWhiteLogin, .DataContentLogin {
		width: 55%;
	}

	.DataContentSS {
		width: 84%;
	}

	.btLogo {
		height: 55px;
	}

	.lbHeader {
		font-size: 32px;
	}

	.lbHeader2 {
		font-size: 18px;
	}


	.lbHead, .lbHeadC, .btLabel3, .btLabel3Color, .lbHeadB, .lbHeadPass, .lbHeadNopass {
		font-size: 21px;
	}


	.lbSubHead, .lbSubHeadC, .lbSubHeadPass, .lbSubHeadNopass, .btLabelPass, .btLabelNoPass, .btLabelBlack, .tbInputXL {
		font-size: 18px;
	}

	.lbTopic, .lbTopicC {
		font-size: 29px;
	}

	body {
		font-size: 17px;
		line-height: 1.4;
	}

	.TbContent td, .tbContentFixed td, .TbContentBorder td {
		padding-bottom: 5px;
		padding-top: 5px;
		font-size: 17px;
	}

	.TbDataWhite td {
		font-size: 17px;
	}


	.lbNormal, .lbNormalC, .lbNormalPale, .tbInput, .tbInputNoWidth, .ddl, .ddlColor, .hlLabel, .hlLabelColor, .tbTextEdit, .btLabelPass, .btLabelNoPass, .btLabelBlack, .btLabelColor, .tbSearch {
		font-size: 17px;
	}

	.rbtAndcb td, .rbtAndcb label, .rbtTest label {
		font-size: 19px;
	}

	.ContainHeadMobMenu {
		display: block;
		width: 100%;
		background-color: var(--bgWhiteColor);
		border-bottom: 2px solid;
		border-bottom-color: var(--MainColor);
		padding: 0px;
		padding-top: 5px;
		padding-bottom: 5px;
		/*position: -webkit-sticky;
		position: sticky;
		top: 0px;*/
		z-index: 5;
	}


	.flexMenu {
		z-index: 3;
		height: 0;
		width: var(--DataWidth);
		background-color: transparent;
		overflow-x: hidden;
		padding: 0;
		margin: 0;
		flex-direction: column;
		justify-content: flex-start;
		align-items: start;
		transition: .6s;
		margin-left: auto;
		margin-right: auto;
		/*z-index: 1;
		top: 0;*/
	}

	.ContentMenu {
		position: fixed;
		background-color: var(--bgBlackColor);
		z-index: 3;
		width: 100%;
	}

	.ContainSubMenu, .ContainSubMenu2 {
		display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
		display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
		display: -ms-flexbox; /* TWEENER - IE 10 */
		display: -webkit-flex; /* NEW - Chrome */
		display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0);
		z-index: 0;
		flex-direction: column;
		padding: 0;
		margin: 0;
		background-color: transparent;
		position: static;
		width: 80vw;
		margin-left: 20px;
		z-index: 1;
		padding: 0;
		left: 0;
		animation: none;
		-webkit-animation: none;
		border: none;
		height: 0;
		transition: .6s;
	}


	.MainContainMenu:hover .ContainSubMenu, .MainContainMenu:hover .ContainSubMenu2 {
	}

	.MainContainMenu:hover .btMenu {
		opacity: 0.8;
		color: #818181;
	}

	.btMenu, .btMenuFocus, .btSubMenu, .btSubMenuFocus, .lbSubMenu {
		text-decoration: none;
		padding: 0;
		font-size: 20px;
		color: #818181;
		display: block;
		transition: 0.3s;
		margin: 0;
		margin-top: 10px;
		margin-bottom: 10px;
		margin-left: 10px;
		text-align: left;
	}

		.btMenu:hover {
			opacity: 1;
		}

	.btMenuFocus, .btSubMenuFocus {
		color: var(--MainColor);
	}


	.btCloseMenu {
		display: block;
		position: absolute;
		top: 0;
		right: 10px;
		font-size: 36px;
		border: none;
		background-color: transparent;
		color: white;
	}

	.btOpenMenu {
		font-size: 24px;
		cursor: pointer;
		color: white;
		background-color: transparent;
		padding: 0;
		border: none;
		display: block;
	}

		.btOpenMenu:hover {
			background-color: #444;
		}


	.HidetoShow {
		display: block;
	}

	.ShowtoHide {
		display: none;
	}

	.lbtWhitebg {
		width: 40%;
		margin-bottom: 20px;
	}

	.lbtWhitebg3, .lbtWhitebg3Blank {
		width: 43%;
		padding-bottom: 35px;
		margin-top: 10px;
		margin-bottom: 40px;
	}

	.lbtWhitebg3Blank {
		padding: 0px;
		margin: 0px;
		height: 0px;
	}


	.btLabel3, .btLabel3Color {
		margin-left: 13px;
		margin-right: 13px;
	}

	.flexProfile {
		flex-direction: column;
		align-items: center;
	}

	.ContainProfile {
		margin-top: 20px;
		width: 100%;
	}

	.ImProfile {
		width: 4vw;
		height: auto;
	}


	.lbtApp, .lbtAppHidden {
		width: 15vw;
		margin-top: 15px;
		margin-bottom: 15px;
	}

	.lbtMenu, .lbtMenuFocus {
		padding: 12px;
		padding-top: 7px;
		padding-bottom: 7px;
	}

	.DataContentXL {
		width: 95%;
	}

	.FullHeight, .slideshow-container {
		height: 35vh;
	}

	.dot {
		height: 10px;
		width: 10px;
		margin-left: 8px;
	}

	.lbLbtHome {
		font-size: 28px;
		font-size: 25px;
	}

	.ContainProfileDetail1, .ContainProfileDetail2 {
		width: 100%
	}

	.HeaderContent {
	}

	.tbSearch {
		width: 220px;
	}

	.ImCompeltedProject {
		margin: 0;
		padding: 0;
		display: inline-block;
		width: 38vw;
		margin-bottom: 25px;
		margin-top: 25px;
	}








		.step::before {
			
			top: 25px;
		
		}

	.circle {
		width: 50px;
		height: 50px;
		line-height: 50px;
		
	}

	.completed .circle {
		background-color: #03a9f4;
		background-color: var(--MainColorGreen);
	}

		.completed .circle::after {
			
			font-size: 20px;
		}



		.not-completed .circle::after {
			content: '✘';
			display: block;
			font-size: 20px;
		}





}

@media screen and (max-width: 800px) {

	.VerticalLine2 {
		width: 3px;
		height: 17px;
	}

	.ContainNews2 {
		width: 100%;
	}


	.ImPreview {
		width: 34vw;
		width: 20vw;
	}

	.ImPreview2 {
		width: 65vw;
	}

	.ImPreview3 {
		width: 28vw;
		margin-bottom: 13px;
	}

	.ImQuestion {
		width: 55vw;
	}

	.ImAns {
		width: 45vw;
	}


	.ContentWithSideNav {
		margin-left: 0px;
	}

	.sidenav {
		width: 0px;
	}

	.lbLbtHome {
		font-size: 27px;
		font-size: 23px;
	}

	.tbSearch {
		width: 200px;
	}

	.ImLogo {
		width: 10vw;
	}

	.lbtApp, .lbtAppHidden {
		width: 16vw;
		margin-top: 0px;
		margin-bottom: 0px;
	}
}

@media screen and (max-width: 650px) {

	.btRoomAvai, .btRoomNotAvai, .btRoomNotUsed, .btRoomHidden {
		padding: 13px;
		font-size: 16px;
		width: 20.7vw;
		margin-bottom: 16px;
	}

	.VerticalLine2 {
		width: 2px;
		height: 15px;
	}

	.ImSubBanner {
		width: 45vw;
	}



	.LbtActiveCamp, .LbtActiveCampNoClick {
		width: 82vw;
	}

	.LbtActiveCampSmall {
		width: 55vw;
	}

	.flexApp {
		gap: 20px;
	}

	.lbtApp, .lbtAppHidden {
		margin-top: 0px;
		margin-bottom: 0px;
	}

	.Footer2 {
		width: 100%;
	}

	.DataContentSS {
		width: 90%;
	}

	.DataContentWhiteLogin, .DataContentLogin {
		width: 60%;
	}

	.DataInContainer {
		width: 94%;
	}

	.btLogo {
		height: 50px;
	}

	.lbHeader {
		font-size: 27px;
	}

	.lbHeader2 {
		font-size: 17px;
	}

	.lbHead, .lbHeadC, .btLabel3, .btLabel3Color, .lbHeadB, .lbHeadPass, .lbHeadNopass {
		font-size: 20px;
	}

	.lbSubHead, .lbSubHeadC, .lbSubHeadPass, .lbSubHeadNopass, .btLabelPass, .btLabelNoPass, .btLabelBlack, .tbInputXL {
		font-size: 17px;
	}


	.rbtAndcb label {
		margin-right: 20px;
	}

	.rbtAndcb2 label {
		margin-right: 8px;
	}


	.lbTopic, .lbTopicC {
		font-size: 28px;
	}

	body {
		font-size: 16px;
		line-height: 1.4;
	}

	.TbContent td, .tbContentFixed td, .TbContentBorder td {
		padding-bottom: 5px;
		padding-top: 5px;
		font-size: 16px;
	}

	.TbDataWhite td {
		font-size: 16px;
	}

	.lbNormal, .lbNormalC, .lbNormalPale, .tbInput, .tbInputNoWidth, .tbSearch, .ddl, .ddlColor, .hlLabel, .hlLabelColor, .tbTextEdit, .btLabelPass, .btLabelNoPass, .btLabelBlack, .btLabelColor {
		font-size: 16px;
	}

	.tbSearch {
		width: 180px;
	}

	.rbtAndcb td, .rbtAndcb label, .rbtTest label {
		font-size: 18px;
	}

	.lbtWhitebg {
		width: 49%;
		margin-bottom: 20px;
	}

	.lbtWhitebg2 {
		width: 70%;
		padding-bottom: 6px;
	}

	.lbtWhitebg3, .lbtWhitebg3Blank {
		width: 46%;
		padding-bottom: 35px;
		margin-top: 10px;
		margin-bottom: 40px;
	}


	.btLabel3, .btLabel3Color {
		margin-left: 10px;
		margin-right: 10px;
	}

	.btImg {
		height: 19px;
	}

	.lbSmall, .lbMenuAlert, .btGeneralSmall, .hlLabelSmall, .btGeneralSmall2, .btPass, .btNoPass, .btGeneralSmall3, .lbSmallB, .lbSmallRed {
		font-size: 13px;
	}

	.btGeneral, .btGeneralColor {
		padding: 6px;
		font-size: 15px;
	}

	.lbMenuAlert {
		font-size: 12px;
	}

	.modal-contentL {
		width: 80%;
	}


	.modal-content {
		width: 65%;
	}

	.modal-contentWidth {
		min-width: 62vw;
	}

	.lbtMenu, .lbtMenuFocus {
		padding: 11px;
		padding-top: 6px;
		padding-bottom: 6px;
	}

	.FullHeight, .slideshow-container {
		height: 30vh;
	}

	.prev, .next {
		font-size: 16px;
		padding-right: 7px;
		padding-left: 7px;
	}


	.lbLbtHome {
		font-size: 24px;
		font-size: 18px;
	}

	.ImWeb {
		width: 48%;
		margin-bottom: 15px;
	}

	.ImNewsDetail {
		width: 60%;
	}

	.ContainChartHigh {
		height: 320px;
	}

	.btSelectMode {
		margin-top: 5px;
		margin-bottom: 15px;
		font-size: 15px;
		padding: 15px;
	}

	.ImCompeltedProject {
		margin: 0;
		padding: 0;
		display: inline-block;
		width: 40vw;
		margin-bottom: 25px;
		margin-top: 25px;
	}
}


@media screen and (max-width: 550px) {

	.ImSubBanner2 {
		width: 60vw;
	}

	.ImPreview {
		width: 45vw;
		width: 30vw;
	}

	.ImPreview2 {
		width: 75vw;
	}

	.ImPreview3 {
		width: 40vw;
		margin-bottom: 12px;
	}

	.ImQuestion {
		width: 70vw;
	}

	.ImAns {
		width: 55vw;
	}

	.DataContentWhiteLogin, .DataContentLogin {
		width: 80%;
	}

	.btLogo {
		height: 45px;
	}

	.lbHeader {
		font-size: 24px;
	}

	.lbHeader2 {
		font-size: 16px;
	}

	.DataContent, .flexMenu, .DataContentWeb {
		width: 90%;
	}



	body {
		font-size: 15px;
		line-height: 1.3;
	}

	.lbNormal, .lbNormalC, .lbNormalPale, .tbInput, .tbInputNoWidth, .tbSearch, .ddl, .ddlColor, .hlLabel, .hlLabelColor, .tbTextEdit, .btLabelPass, .btLabelNoPass, .btLabelBlack, .btLabelColor {
		font-size: 15px;
	}

	.tbSearch {
		width: 150px;
	}


	.TbContent td, .tbContentFixed td, .TbContentBorder td {
		padding-bottom: 5px;
		padding-top: 5px;
		font-size: 15px;
	}

	.TbDataWhite td {
		font-size: 15px;
	}

	.rbtAndcb td, .rbtAndcb label, .rbtTest label {
		font-size: 18px;
	}

	.ContainNews, .ContainNews2, .ContainNews3, .ContainPerson {
		width: 100%;
	}


	.ImNewsDetail {
		width: 80%;
	}

	.lbtWhitebg3, .lbtWhitebg3Blank {
		width: 100%;
		padding-bottom: 35px;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.lbtWhitebg3Blank {
		display: none;
	}



	.btLabel3, .btLabel3Color {
		margin-left: 9px;
		margin-right: 9px;
	}

	.btFooter, .btFooter2, .lbFooter {
		font-size: 12px;
	}

	.lbFooter2 {
		font-size: 18px;
	}

	.lbFooter3 {
		font-size: 10px;
	}

	.lbtApp, .lbtAppHidden {
		width: 20vw;
		margin-top: 15px;
		margin-bottom: 15px;
	}

	.lbLbtHome {
		font-size: 22px;
		font-size: 16px;
	}

	.flexApp {
		justify-content: space-around;
		gap: 0px;
	}
}


@media screen and (max-width: 500px) {
	.VerticalLine2 {
		height: 12px;
	}


	.ImCompeltedProject {
		margin: 0;
		padding: 0;
		display: inline-block;
		width: 41vw;
		margin-bottom: 25px;
		margin-top: 25px;
	}

	.btLogo {
		height: 42px;
	}

	.lbHeader {
		font-size: 22px;
	}

	.lbHeader2 {
		font-size: 14px;
	}

	.lbtWhitebg {
		width: 55%;
		margin-bottom: 20px;
	}

	.lbtWhitebg2 {
		width: 75%;
		padding-bottom: 6px;
	}


	.rbtAndcb label {
		margin-right: 18px;
	}

	.BlankSpace {
		height: 30px;
	}

	.BlankSpaceS {
		height: 10px;
	}
}


@media screen and (max-width: 450px) {

	.btRoomAvai, .btRoomNotAvai, .btRoomNotUsed, .btRoomHidden {
		padding: 13px;
		font-size: 15px;
		width: 24.7vw;
		margin-bottom: 15px;
	}


	.ImPreview {
		width: 50vw;
		width: 35vw;
	}

	.ImPreview2 {
		width: 90vw;
	}

	.ImPreview3 {
		width: 45vw;
	}

	.ImQuestion {
		width: 75vw;
	}

	.ImAns {
		width: 62vw;
	}


	.DataContentSS {
		width: 97%;
	}


	.DataContentWhiteLogin, .DataContentLogin {
		width: 92%;
	}

	.btLogo {
		height: 40px;
	}

	.lbHeader {
		font-size: 18px;
	}

	.lbHeader2 {
		font-size: 12px;
	}

	.DataContent, .flexMenu, .DataContentWeb {
		width: 94%;
	}

	.LowLineHeight {
		line-height: 0.7;
	}

	.lbTopic, .lbTopicC {
		font-size: 26px;
	}

	.lbHead, .lbHeadC, .btLabel3, .btLabel3Color, .lbHeadB, .lbHeadPass, .lbHeadNopass {
		font-size: 19px;
	}

	.lbSubHead, .lbSubHeadC, .lbSubHeadPass, .lbSubHeadNopass, .btLabelPass, .btLabelNoPass, .btLabelBlack, .tbInputXL {
		font-size: 16px;
	}

	.btLang, .btLangFocus {
		font-size: 16px;
	}

	.lbtWhitebg {
		width: 65%;
		margin-bottom: 20px;
	}

	.lbtWhitebg2 {
		width: 85%;
		padding-bottom: 6px;
	}



	.rbtAndcb label {
		margin-right: 0px;
		font-size: 17px;
	}

	.rbtTest label {
		font-size: 17px;
	}

	.rbtAndcb td {
		font-size: 17px;
		display: block;
		margin-bottom: 5px;
	}

	.rbtAndcb2 label {
		margin-right: 0px;
	}

	.rbtAndcb2 td {
		display: block;
		margin-bottom: 5px;
	}


	.btLabel3, .btLabel3Color {
		margin-left: 7px;
		margin-right: 7px;
	}

	.btImg {
		height: 18px;
	}

	.btLabel, .btUserInfo {
		font-size: 14px;
	}

	.lbSmall, .lbMenuAlert, .btGeneralSmall, .hlLabelSmall, .btGeneralSmall2tbInput, .btPass, .btNoPass, .btGeneralSmall3, .lbSmallB, .lbSmallRed {
		font-size: 12px;
	}

	.lbMenuAlert {
		font-size: 12px;
	}

	.modal-contentS, .modal-content, .modal-contentL {
		width: 85%;
	}


	.modal-contentWidth {
		min-width: 80vw;
	}

	.ImProfile {
		width: 5vw;
		height: auto;
	}




	.btMenu, .btMenuFocus, .btSubMenu, .btSubMenuFocus, .lbSubMenu {
		font-size: 18px;
		margin-top: 8px;
		margin-bottom: 8px;
		margin-left: 10px;
		text-align: left;
	}

	.BlockInfo, .BlockInfoFocus, .SubInfoData {
		padding: 6px;
		padding-left: 2px;
	}

	.lbtApp, .lbtAppHidden {
		width: 22vw;
		margin-top: 15px;
		margin-bottom: 15px;
	}



	.btClose {
		font-size: 26px;
	}

	.lbtMenu, .lbtMenuFocus {
		font-size: 18px;
		padding: 10px;
		padding-top: 6px;
		padding-bottom: 6px;
	}

	.TbDataWhite {
		border-spacing: 0px 4px;
	}

		.TbDataWhite td {
			padding-left: 10px;
			padding-right: 10px;
		}

	.FullHeight, .slideshow-container {
		height: 25vh;
	}

	.lbtHomeContainer {
		width: 100%;
		margin-bottom: 12px;
	}

	.lbLbtHome {
		font-size: 24px;
	}

	.tbSearch {
		width: 135px;
	}

	.BlankSpace {
		height: 25px;
	}
}



@media screen and (max-width: 350px) {

	.btMenu, .btMenuFocus, .btSubMenu, .btSubMenuFocus, .lbSubMenu {
		font-size: 17px;
	}
}