@import url('https://fonts.googleapis.com/css?family=Chonburi|Itim|Kanit|Mitr|Pridi|Prompt|Sriracha');

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

body {
	margin: 0;
	font-family: 'Kanit', sans-serif;
}

.topnav {
	overflow: hidden;
	background-color: #333;
	width: 100%;
	z-index: 4;
	/* position: fixed;
	top: 0; 
	*/
}

.topnav a {
	float: left;
	display: block;
	color: #f2f2f2;
	text-align: center;
	/* padding-top: 16px;
	padding-bottom: 16px; */
	text-decoration: none;
	font-size: 17px;
	line-height: 51px; /* เท่ากับ line-height: 3.4em;  */
}

.topnav a:hover {
	background-color: #dddddd;
	color: #000;
}

.active {
	background-color: #4CAF50;
	color: white;
	
  	cursor: not-allowed;
	color: currentColor;
	display: inline-block;  /* For IE11/ MS Edge bug */
	pointer-events: none;
	text-decoration: none;
}

.topnav .icon {
	display: none;
}

.content {
	padding: 0px;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky {
	padding-top: 51px;
}

/* สีเมนูแบบดั้งเดิม */
/*
.bg-grey {
	background: #6e7a8f;
}
.bg-blue {
	background: #8bc6c7;
}
.bg-yellow {
	background: #f5c14f;
}
.bg-red {
	background: #ef6b5b;
}
.bg-green {
	background: #a3c4a2;
}
*/

@media screen and (min-width: 480px) { /* แถบเมนูสำหรับโทรศัพท์ แนวนอน */
	.topnav a {
		width: 14.28%;
	}
	.borderleft {
		border-left: 1px solid #ffffff;
	}
	.borderright {
		border-right: 1px solid #ffffff;
	}
	.borderleftright {
		border-left: 1px solid #ffffff;
		border-right: 1px solid #ffffff;
	}
}

@media screen and (max-width: 479px) { /* แถบเมนูสำหรับโทรศัพท์ แนวตั้ง */
	.topnav a {
		padding: 0px 16px;
	}
	.topnav a:nth-child(-n+2) {
		width: 25%;
		text-align: left;
	}
	.topnav a:not(:nth-child(-n+2)) {
		display: none;
	}
	.topnav a.icon {
		float: right;
		display: block;
		width: 75%;
		text-align: right;
	}
	.topnav a.icon b{
		float: left;
		width: 75%;
		text-align: left;
		font-size: 16.5px;
	}
}

@media screen and (max-width: 479px) { /* สำหรับโทรศัพท์ แนวตั้ง */
	.topnav.responsive {position: absulute;}
	.topnav.responsive .icon {
		position: absolute;
		right: 0;
		/* top: 0; */
	}
	.topnav.responsive a {
		float: none;
		display: block;
		text-align: left;
	}
	.topnav.responsive a.icon {
		text-align: right;
	}
}

 /* -- เพิ่มเติม -- */
@media screen and (max-width: 320px) { /* ฟ้อนท์เมนูสำหรับ iPhone 4 แนวตั้ง */
	.topnav a {
		font-size: 14px;
	}
	.topnav a.icon b{
		font-size: 13px;
	}
}

/* ฟ้อนท์เมนูสำหรับโทรศัพท์ แนวนอน */
@media screen and (min-width: 480px) and (max-width: 529px) {
	.topnav a {
		font-size: 14px;
	}
}

@media screen and (min-width: 530px) and (max-width: 600px) {
	.topnav a {
		font-size: 15px;
	}
}