/* thai */
@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 400;
  src: local('Prompt'), local('Prompt-Regular'), url(fonts/Prompt/-W__XJnvUD7dzB2KdNodREEje60k.woff2) format('woff2');
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* vietnamese */
@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 400;
  src: local('Prompt'), local('Prompt-Regular'), url(fonts/Prompt/-W__XJnvUD7dzB2Kb9odREEje60k.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 400;
  src: local('Prompt'), local('Prompt-Regular'), url(fonts/Prompt/-W__XJnvUD7dzB2KbtodREEje60k.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 400;
  src: local('Prompt'), local('Prompt-Regular'), url(fonts/Prompt/-W__XJnvUD7dzB2KYNodREEjew.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Kanit */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 400;
  src: local('Kanit'), local('Kanit-Light'), url(fonts/Kanit/Kanit-Light.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Kanit-Regular';
  font-style: normal;
  font-weight: 400;
  src: local('Kanit-Regular'), local('Kanit-Regular'), url(fonts/Kanit/Kanit-Regular.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html {
	position: relative;
    min-height: 100%;
}

body{
	font-size:18px;
	color:#333333;
	margin-bottom: 480px;
	/* font-family: Kanit, Prompt, sans-serif, sofia-pro, Arial, serif; */
	font-family: "Kanit", Prompt;
}

.navbar-default {
	border: 0; 
	background: #ffffff;
	box-shadow: 0 0 6px 0 rgba(0,0,0,.2), 0 0 10px 1px rgba(255,255,255,.2);
}

.navbar-default .navbar-header {
	width: 100%;
	text-align: center;
}

.navbar-toggle {
	float: left;
	margin-top: 12px;
	margin-bottom: 12px;
	padding: 4px 10px;
}

.navbar-default .navbar-toggle {
	border: 0;
}

.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
	background: transparent;
}

.navbar-default .navbar-toggle .icon-bar {
	background-color: #CD3ACC;
}

.navbar-brand {
	padding: 17px 15px 7px 7px;
	height: 48px;
}

.navbar-brand > img {
	width: 280px;
}

.navbar-default .navbar-brand {
	color: #ffffff;
}

.navbar-nav > li > a {
	padding-left: 20px;
	padding-right: 20px;
}

.navbar-default .navbar-nav > li > a {
	color: #231f20;
	font-weight: bold;
	margin: 0;
}

.navbar-default .navbar-nav > li > a:hover {
	color: #cd3acc;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
	color: #cd3acc;
	border: 0;
	border-radius: 0;
	background: transparent;
}


/* Navbar */

.footer {
	position: absolute;
	width: 100%;
	height: 470px;
	bottom: 0;
	background: #ffffff;
	font-size: 14px;
	color: #333333;
	/* border-top: 1px solid #e6e6e6; */
	box-shadow: 0 0 1px 1px rgba(0,0,0,.2), 0 0 1px 1px rgba(230,230,230,.2);
}

.footer .contact {
	background: #755499;
	padding: 20px 0;
	font-size: 16px;
	color: #ffffff;
	font-weight: 500;
	text-align: center;
}

.footer .contact a {
	color: #ffffff;
}

.footer .contact a:focus, .footer .contact a:hover {
	text-decoration: none;
}

.footer .contact .row{
	margin: 0 15px;
}

.footer .contact h3 {
	margin-bottom: 25px;
	font-weight: bold;
}

.footer .copyright {
	/* background: #231f20; */
	background: #dddddd;
	text-align: center;
	padding: 14px 0;
	font-size: 14px;
	color: #000000;
}

/* materialize */

.carousel {
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 400px;
	-webkit-perspective: 500px;
          perspective: 500px;
	-webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
	-webkit-transform-origin: 0% 50%;
          transform-origin: 0% 50%;
}

.carousel .carousel-item {
	visibility: hidden;
	width: 400px;
	height: 400px;
	position: absolute;
	top: 0;
	left: 0;
}

.carousel .carousel-item > img {
	width: 100%;
}

.carousel .carousel-action {
	position: absolute;
	width: 100%;
	bottom: 0;
}

.carousel .carousel-action .previous{
	float: left;
}

.carousel .carousel-action .next{
	float: right;
}

/* materialize */

.title {
	font-size: 20px;
	font-weight: bold;
}

.head-title {
	font-size: 30px;
	font-weight: bold;
}

.overlay {  
	box-shadow:inset 0 0 0 2000px rgba(0,0,0,0.2);	
}

.text-center {
	text-align: center;
}

.ctl-content {
	padding: 60px 0 30px;
}

.ctl-banner__page {
	height: 200px;
	background-image: url(../../images/layout/banner_page_mobile.png);
	background-size: 100% auto;
	background-position: bottom -4px center;
	background-repeat: no-repeat;
	padding-top: 58px;
	text-align: center;
	margin-bottom: 20px;
}

.ctl-banner__page .title {
	padding: 0 15px;
	font-size: 46px;
}

.ctl-content_data {
	padding-top: 40px;
}

.ctl-datalists .head-title {
	margin-bottom: 30px;
	text-align: center;
}

.boxlists {
	position: relative;
	width: 100%;
	height: 360px;
	border: 2px solid #eeeeee;
	border-radius: 4px;
	padding: 0;
	margin-bottom: 30px;
}

.boxlists.readmore {
	height: 420px;
}

.boxlists .box-images-list {
	min-height: 140px;
	border-bottom: 2px solid #eeeeee;
}

.boxlists .box-detail-list {
	padding: 10px 15px;
}

.boxlists .box-detail-list .title {
	font-size: 16px;
	font-weight: normal;
}

.boxlists .box-detail-list .title > span {
	color: #c633c5;
	font-weight: bolder;
}

.boxlists .box-button {
	position: absolute;
	width: 100%;
	height: 38px;
	bottom: 0;
	padding: 7px 15px;
	font-size: 16px;
	text-align: right;
}

.boxlists .box-button > a:hover, .boxlists .box-button > a:focus {
	text-decoration: none;
	color: #c633c5;
}

.ctl-related .bx-wrapper {
	background: transparent;
    border-color: transparent;
    margin-bottom: 30px;
}

.ctl-related .bx-controls .bx-pager {
	bottom: 0;
}

@media (min-width: 768px) {	
body {
	margin-bottom: 330px;	
}

.navbar-default {
	background: transparent;
	box-shadow: none;
}

.navbar-default.scroll {
	background: #ffffff;
	box-shadow: 0 0 10px 1px rgba(0,0,0,.2), 0 0 10px 1px rgba(255,255,255,.2);
}

.navbar-default .navbar-header {
	float: unset;
	width: 200px;
	margin: 0 auto;
	padding: 15px 0;
}

.navbar-nav {
	margin: 0;
}

.navbar-nav > li > a {
	padding: 10px 15px;
}

.footer {
	height: 320px;
}

.footer .contact .row{
	margin-left: -15px;
	margin-right: -15px;
}

.ctl-content {
	padding: 130px 0 30px;
}

}

@media (min-width: 992px) {
.navbar-nav > li > a {
	padding: 10px 15px;
}
}

@media (min-width: 1200px) {
body {
	margin-bottom: 290px;	
}

.navbar {
	margin-bottom: 10px;
}

.navbar-default {
	background: transparent;
	box-shadow: none;
}

.navbar-default.scroll {
	background: #ffffff;
	box-shadow: 0 0 10px 1px rgba(0,0,0,.2), 0 0 10px 1px rgba(255,255,255,.2);
}

.navbar-default .navbar-header {
	float: unset;
	width: 300px;
	margin: 0 auto;
	padding: 30px 0 10px;
}

.navbar-default.scroll .navbar-header {
	width: 280px;
	padding: 20px 0 0;
}

.navbar.scroll > .container .navbar-brand {
	width: 280px;
}

.navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand {
	margin: 0;
	padding: 0;
	width: 300px;
}

.navbar-brand > img {
	width: 100%;
}

.navbar-nav {
	margin: 0 0 5px;
}

.navbar-nav > li > a {
	padding: 10px 30px;
}

.navbar-nav > li:first-child > a {
	padding-left: 15px;
}

.navbar-nav > li:last-child > a {
	padding-right: 15px;
}

.navbar-default .navbar-register > li > a:hover, .navbar-default .navbar-register > li > a:focus {
	color: #ffffff;
}

.footer {
	height: 290px;
}

.footer .contact {
	padding: 30px 0;
}

.footer .contact .row{
	margin-left: -15px;
	margin-right: -15px;
}

.carousel .carousel-action {
	top: 50%;
	margin-top: -20px;
}

.ctl-content {
	padding: 160px 0 30px;
}

.ctl-content.scroll {
	padding: 0 0 30px;
}

.ctl-banner__page {
	background-image: url(../../images/layout/banner_page.png);
	background-size: 100% auto;
	background-repeat: no-repeat;
	padding-top: 70px;
	text-align: center;
}

.boxlists .box-detail-list {
	padding: 10px;
}
}