/* CSS Document */

/*@import url("fonts_everland.css");*/
/*@import url('https://fonts.googleapis.com/css2?family=Athiti:wght@400;500;600;700&family=Pridi:wght@300;400&display=swap');*/
/*
font-family: 'Athiti', sans-serif;
font-family: 'Pridi', serif;
*/

/* html5doctor.com/html-5-reset-stylesheet/ */
/*html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,time,mark,audio,video { margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent; } 
body { line-height:1; }
ol,ul { list-style:none; }
blockquote,q { quotes:none; }
blockquote:before,blockquote:after,q:before,q:after { content:'';content:none; }
ins { text-decoration:none; }
del { text-decoration:line-through; }
table { border-collapse:collapse;border-spacing:0; }*/


.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

/*body, html{
	width:100%;
	height:auto;
}

html, body {width:100%; padding:0px; margin:0px;}

body{ 
	background-color:#fff; 
}
body, table, tr, td, p
{
  font-family: 'Pridi', serif;
	font-size: 18px;
	line-height: 1.15;
	font-weight: 400;
	color: #777777;
	text-decoration: none;
}
body.mobileNavActived {
  overflow: hidden;
  height: 100%;
}*/
img {
	border:0px;
}
.img-responsive {
  display: block;
  height: auto;
  max-width: 100%;
}
.img-responsive-inline {
  display: inline-block;
  height: auto;
  max-width: 100%;
  width: 100%;
}
.img-responsive-height {
  display: block;
  width: auto;
  max-height: 100%;
}
.img-responsive-height-inline {
  display: inline-block;
  width: auto;
  max-height: 100%;
}

*.focus{
	outline:none;
}

.clear{
	clear:both;
}
.float-left{
	float:left;
}
.float-right{
	float:right;
}
.overflow-hidden{ overflow:hidden; }

a,
a:hover,
a:focus {
  color: inherit;
  text-decoration:none;
}

::-moz-selection { color: #ffffff; background: #A861F5; }
::selection { color: #ffffff; background: #A861F5; }

.pageCenter{display:table;overflow:hidden;margin:0px auto;}
*:first-child+html .pageCenter {position:relative;}/*ie7*/
* html .pageCenter{position:relative;}/*ie6*/

.content_container{display:table-cell;vertical-align: middle;}
*:first-child+html .content_container{position:absolute;top:50%;}/*ie7*/
* html .content_container{position:absolute;top:50%;}/*ie6*/

*:first-child+html .contentCenter{position:relative;top:-50%;}/*ie7*/
* html .contentCenter{position:relative;top:-50%;}/*ie6*/

.pageCenter{height:100%;width:100%;}

.image-pc,
.only-pc {
  display: block !important;
}
.only-pc-inline {
  display: inline !important;
}
.image-mobile,
.only-mobile,
.only-mobile-inline {
  display: none !important;
}

.only-tablet-portrait,
.only-tablet-portrait-inline {
  display: none !important;
}

.modalContentMsg {
  display: none;
  font-weight: 500;
  font-size: 26px;
  line-height: 32px;
}
.modalContentMsg.actived {
  display: block;
}

.fancybox-is-open .fancybox-bg {
  opacity: 1 !important;
}

.dropdown-toggle::after {
  display: none;
}

.mainPageContent {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  font-family: 'Pridi';
  color: #555555;
}

.fixedOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0,0,0,.69);
  display: none;
  z-index: 1150;
}
.fixedOverlay.actived {
  display: block;
}
.fixedOverlayZ1000 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0,0,0,.69);
  display: none;
  z-index: 1000;
}
.fixedOverlayZ1000.actived {
  display: block;
}
.openQuickCart,
.openLoginBox {
  cursor: pointer;
}

.viewEbookCover {
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
}
.viewEbookCoverHidden {
  visibility: hidden;
}

a.linkOrange {
  transition: color .2s ease-in-out;
  color: #F58423;
  text-decoration: underline;
}
a.linkOrange:hover {
  color: #29CFBF;
}

.pageNotFoundContent {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 300px;
}
.pageNotFoundDetail {
  margin-top: 20px;
}
.productNoResult {
  display: none;
  padding: 20px;
  text-align: center;
}
.productNoResult.actived {
  display: block;
}

.noBreakline br {
  display: none;
}

.txtMedium {
  font-weight: 500;
}

h2 {
  font-family: 'Athiti';
  font-size: 3.055rem;
  font-weight: 700;
}
h2.pageDetailTitleSmaller {
  font-size: 2.222rem;
  line-height: 1.1;
}
h3 {
  font-family: 'Athiti';
  font-size: 2.2rem;
  font-weight: 700;
}
p {
  font-size: 1rem;
}

.bgOrange {
  background-color: #F58423;
}
.bgPurple {
  background-color: #A961F5;
}
.bgGreen {
  background-color: #29CFBF;
}

.bgHeaderEthnic {
  background-color: #A961F5;
  background-image: url('../../images/bg-header-ethnic.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;
}
.bgHeaderResearch {
  background-color: #29CFBF;
  background-image: url('../../images/bg-header-research.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;
}
.bgHeaderKnowledge {
  background-color: #F58423;
  background-image: url('../../images/bg-header-knowledge.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;
}
.bgHeaderPolicy {
  background-color: #A961F5;
  background-image: url('../../images/bg-header-policy.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;
}

.bgContent {
  background-image: url('../../images/bg-content.png');
  background-repeat: no-repeat;
  background-size: 17% auto;
  background-position: right 4.5% bottom;
}
.bgContentEthnic {
  background-image: url('../../images/bg-content-ethnic.png');
  background-repeat: no-repeat;
  background-size: 22% auto;
  background-position: left 1.6% bottom;
}

.qrcodePageCover {
  padding: 10px 10px 5px;
  background-color: #ffffff;
}

.searchHighlight {
  background-color: rgba(245, 132, 2, 0.3);
}

@media (max-width: 1600px) {
}
@media (max-width: 1366px) {
}
@media (max-width: 1024px) {
  h2.pageDetailTitleSmaller {
    font-size: 2rem;
  }
}
@media screen and (max-width: 767px), screen and (max-width:900px) and (orientation:landscape) {
  .image-pc,
  .only-pc,
  .only-pc-inline {
    display: none !important;
  }
  .image-mobile,
  .only-mobile {
    display: block !important;
  }
  .only-mobile-inline {
    display: inline !important;
  }

  .fixedOverlay.actived {
    display: none;
  }
  .fixedOverlayZ1000.actived {
    display: none;
  }

  h2 {
    font-size: 2.055rem;
  }
  h2.pageDetailTitleSmaller {
    font-size: 1.8rem;
    line-height: 1
  }
  h3 {
    font-size: 1.75rem;
  }
}
@media (max-width: 425px) {

}

/*** OVERWRITE SAC ***/
.breadcrumb {
  padding: .3rem 0;
}
.pageSiteDetail .breadcrumb {
  background-color: rgba(255,255,255,.8);
  padding: 6px 10px;
  transform: translate(-10px, -1px);
}

.nopadding {
  margin: 0px;
  padding: 0px;
}

.grecaptcha-badge { 
  visibility: hidden;
}

.txtError {
  border-color: #ff0000;
}

.headerContentArea .row>* {
  margin-top: calc(var(--bs-gutter-y)/ 2);
}

.topNavBothSideMenu {
  display: block;
}
.topNavSubTitleArea {
  padding-bottom: 15px !important;
}
.topNavSubTitleArea.withPT {
  padding-top: 25px !important;
}
.topNavSubTitle {
  color: rgba(255,255,255,1);
}

@media (min-width: 992px) {
  .hero-wrapper {
    padding-top: 100px;
  }

  body .navbar.navbar--sac .navbar-collapse .navbar-extra {
    width: 100%;
  }

  .topNavBothSideMenu {
    display: flex;
    flex: 1;
    justify-content: space-between;
  }
  .topNavSubTitle {
    color: rgba(0,0,0,1);
  }
}


/*********** MODAL ***********/
#formSendingModal.modal {
  text-align: center;
  padding: 0!important;
  z-index:1050;
  background-color: rgba(0, 0, 0, .2);
}
#formSendingModal.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}
#formSendingModal .modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}
#formSendingModal .modal-content {
  background: transparent;
  box-shadow: none;
  border:none;
}
#formSendingModal .modal-body {
  text-align: center;
}
#formSendingModal .loader,
.loadingScreen .loader {
  border: 10px solid #00B388;
  border-bottom: 10px solid transparent;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
  margin-left:auto;
  margin-right:auto;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loadingScreen {
  position: fixed;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0!important;
  z-index:1500;
  background-color: rgba(0, 0, 0, .6);
  top: 0;
  left: 0;
}
.loadingScreen.actived {
  display: flex;
}

.hiddenLoadingScreen {
  position: fixed;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0!important;
  z-index:1500;
  background-color: transparent;
  top: 0;
  left: 0;
}
.hiddenLoadingScreen.actived {
  display: flex;
}

.modal-alertmsg {
  width: 90%;
  max-width: 620px;
  top: 50%;
  margin: 0 auto;
  transform: translateY(-50%) !important;
}
.modal-alertmsg .modal-content {
  position: relative;
  border-radius: 0;
  background-color: #fff;
  border: 10px solid #29CFBF;
  background-clip: border-box;
}
.modal-alertmsg .modal-content .modal-body {
  padding: 80px 50px 100px;
  text-align: center;
}
.modal-alertmsg .modal-content .modal-body .modalIcon {
  display: inline-block;
  width: 85px;
  margin-bottom: 25px;
}
.modal-alertmsg .modal-content .modal-body .modalTitle {
  font-family: 'Athiti', sans-serif;
  font-size: 24px;
  line-height: 28px;
  font-weight: 600;
  color: #000000;
  margin-bottom: 15px;
}
.modal-alertmsg .modal-content .modal-body .modalSubTitle {
  font-family: 'Athiti', sans-serif;
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  color: #000000;
  padding: 0 14%;
  margin-bottom: 10px;
}
.modal-alertmsg .modal-content .modal-body .modalMessage {
  font-size: 18px;
  line-height: 28px;
  font-weight: 300;
  padding: 0 14%;
}
.modal-alertmsg .close-area {
  position: absolute;
  width: 30px;
  top: 30px;
  right: 30px;
  cursor: pointer;
  z-index: 5;
}
.close-area .close-btn {
  cursor: pointer;
}
.close-area div {
  display: block;
}
.close-area .close-icon {
  width: 30px;
}
.modal-backdrop {
  background-color: #000;
}
.modal-backdrop.show {
  opacity: 0.7;
}
.modalHighlightText {
  color: #F58423;
}

.modal-alertmsg .modal-content.purpleTheme {
  border-color: #8F4CB2;
}
.modal-alertmsg .modal-content.purpleTheme .modal-body .modalTitle {
  color: #8F4CB2;
}
.modal-alertmsg .modal-content.purpleTheme .modal-body .modalSubTitle {
  padding: 0;
}

@media (max-width: 1600px) {
  .modal-alertmsg {
    width: 90%;
    max-width: 620px;
  }
  .modal-alertmsg .modal-content {
    border: 10px solid #29CFBF;
  }
  .modal-alertmsg .modal-content .modal-body {
    padding: 80px 50px 90px;
  }
  .modal-alertmsg .modal-content .modal-body .modalIcon {
    width: 85px;
    margin-bottom: 25px;
  }
  .modal-alertmsg .modal-content .modal-body .modalTitle {
    font-size: 24px;
    line-height: 28px;
    margin-bottom: 15px;
  }
  .modal-alertmsg .modal-content .modal-body .modalSubTitle {
    font-size: 20px;
    line-height: 28px;
    padding: 0 14%;
  }
  .modal-alertmsg .modal-content .modal-body .modalMessage {
    font-size: 18px;
    line-height: 28px;
    padding: 0 14%;
  }
  .modal-alertmsg .close-area {
    width: 30px;
    top: 30px;
    right: 30px;
  }
  .close-area .close-icon {
    width: 30px;
  }
}
@media (max-width: 1366px) {
  .modal-alertmsg {
    width: 90%;
    max-width: 620px;
  }
  .modal-alertmsg .modal-content {
    border: 10px solid #29CFBF;
  }
  .modal-alertmsg .modal-content .modal-body {
    padding: 80px 50px 90px;
  }
  .modal-alertmsg .modal-content .modal-body .modalIcon {
    width: 85px;
    margin-bottom: 25px;
  }
  .modal-alertmsg .modal-content .modal-body .modalTitle {
    font-size: 24px;
    line-height: 28px;
    margin-bottom: 15px;
  }
  .modal-alertmsg .modal-content .modal-body .modalSubTitle {
    font-size: 20px;
    line-height: 28px;
    padding: 0 14%;
  }
  .modal-alertmsg .modal-content .modal-body .modalMessage {
    font-size: 18px;
    line-height: 28px;
    padding: 0 14%;
  }
  .modal-alertmsg .close-area {
    width: 30px;
    top: 30px;
    right: 30px;
  }
  .close-area .close-icon {
    width: 30px;
  }
}
@media screen and (max-width: 767px), screen and (max-width:900px) and (orientation:landscape) {
  .modal-alertmsg {
    width: 90%;
    max-width: 620px;
  }
  .modal-alertmsg .modal-content {
    border: 7px solid #29CFBF;
  }
  .modal-alertmsg .modal-content .modal-body {
    padding: 70px 25px 45px;
  }
  .modal-alertmsg .modal-content .modal-body .modalIcon {
    width: 85px;
    margin-bottom: 15px;
  }
  .modal-alertmsg .modal-content .modal-body .modalTitle {
    font-size: 24px;
    line-height: 28px;
    margin-bottom: 15px;
  }
  .modal-alertmsg .modal-content .modal-body .modalSubTitle {
    font-size: 20px;
    line-height: 28px;
    padding: 0;
  }
  .modal-alertmsg .modal-content .modal-body .modalMessage {
    font-size: 18px;
    line-height: 28px;
    padding: 0;
  }
  .modal-alertmsg .close-area {
    width: 28px;
    top: 28px;
    right: 28px;
  }
  .close-area .close-icon {
    width: 28px;
  }
  .modal-backdrop.show {
    opacity: 0.8;
  }
}


/*********** NAV ***********/
.navSearchBtn {
  display: inline-block;
  width: 19px;
  transform: translateY(7px);
}

@media (max-width: 1600px) {
  
}
@media (max-width: 1366px) {
  
}
@media screen and (max-width: 767px), screen and (max-width:900px) and (orientation:landscape) {
  
}

/*********** FOOTER ***********/
footer {
  overflow: hidden;
}
.siteCopyRight {
  text-align: center;
}

@media (max-width: 1600px) {
  
}
@media (max-width: 1366px) {
  
}
@media screen and (max-width: 767px), screen and (max-width:900px) and (orientation:landscape) {
  
}


/*********** ACCEPT COOKIE ************/
.acceptCookieArea {
  position: fixed;
  width: 100%;
  /*height: 100px;
  bottom: -100px;*/
  height: 80px;
  bottom: -80px;
  left: 0;
  background-color: rgba(84,88,89,.95);
  border-top: 1px solid #707070;
  z-index: 80;
  transition: all .2s ease-in-out;
}
.acceptCookieArea.acceptSlideIn {
  bottom: 0;
}
.acceptCookieAreaInner {
  width: 100%;
  height: 100%;
  position: relative;
}
.acceptCookieClose {
  width: 22px;
  cursor: pointer;
}
.acceptCookieContent {
  width: 100%;
  height: 100%;
  max-width: 1366px;
  padding: 0 15px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  /*font-size: 24px;
  line-height: 30px;*/
  font-size: 22px;
  line-height: 28px;
  font-weight: 500;
}
.acceptCookieArea-text {
  flex: 1;
  margin-right: 30px;
}
.acceptCookieArea-btn {
  width: 170px;
  margin-right: 30px;
}
.acceptCookieLink {
  text-decoration: underline;
  cursor: pointer;
  color: #00B388;
}
.btn-accept-cookie {
  display: block;
  width: 170px;
  text-align: center;
  padding: 10px 25px;
  background-color: #00B388;
  opacity: 1;
  transition: opacity .2s ease-in-out;
  cursor: pointer;
}
.btn-accept-cookie:hover {
  opacity: .75;
}

.privacyContent {
  padding: 50px 0 50px;
}
.privacyContent,
.privacyContent p,
.privacyContent li {
  font-size: 22px;
  line-height: 30px;
  font-weight: 300;
  color: #000000;
}
.privacyContent p {
  margin-bottom: 50px;
}
.privacyContentTitle {
  font-family: 'Athiti', sans-serif;
  font-size: 24px;
  line-height: 30px;
  font-weight: 600;
  color: #000000;
  margin-bottom: 10px;
}

@media (max-width: 1600px) {
  .acceptCookieArea {
    height: 80px;
    bottom: -80px;
  }

  .privacyContent,
  .privacyContent p,
  .privacyContent li {
    font-size: 18px;
    line-height: 28px;
  }
  .privacyContent p {
    margin-bottom: 40px;
  }
  .privacyContentTitle {
    font-size: 22px;
    line-height: 28px;
  }
}
@media (max-width: 1366px) {
  .acceptCookieArea {
    height: 80px;
    bottom: -80px;
  }

  .privacyContent,
  .privacyContent p,
  .privacyContent li {
    font-size: 16px;
    line-height: 24px;
  }
  .privacyContent p {
    margin-bottom: 40px;
  }
  .privacyContentTitle {
    font-size: 22px;
    line-height: 28px;
  }
}
@media screen and (max-width: 767px), screen and (max-width:900px) and (orientation:landscape) {
  .acceptCookieArea {
    height: 250px;
    bottom: -250px;
  }
  .acceptCookieContent {
    width: 100%;
    height: 100%;
    padding: 25px 25px;
    margin: 0 auto;
    display: block;
    font-size: 22px;
    line-height: 28px;
  }
  .acceptCookieArea-text {
    margin-right: 0;
  }
  .acceptCookieArea-btn {
    margin: 20px auto 20px;
  }
  .acceptCookieClose {
    margin: 0 auto;
  }
  
  .pagePolicy.pageDefaultPaddingTB .sectionTitle {
    text-align: left;
    font-size: 34px;
    line-height: 44px;
  }
  .privacyContent {
    padding: 40px 0 0;
  }
  .privacyContent,
  .privacyContent p,
  .privacyContent li {
    font-size: 20px;
    line-height: 30px;
  }
  .privacyContent p {
    margin-bottom: 40px;
  }
  
}


/*********** MAIN ***********/
.mainPage {
  width: 100%;
  left: 0;
  transition: left .4s ease-in-out;
}
.mainPage.openTopMenuDiv {
  position: absolute;
  left: -50%;
}
.mainPage.mobileMovingLeft {
}
.mainPage.mobileMovingTop {
}
.sectionPage {
  width: 100%;
}
.sectionPageInner {
  width: 100%;
}

.sectionBgWhite {
  background-color: #ffffff;
}
.sectionBgGrey {
  background-color: #F5F5F7;
}

.btn-theme {
  font-family: 'Athiti', sans-serif;
  display: inline-block;
  padding: 14px 25px;
  font-size: 24px;
  line-height: 24px;
  font-weight: 600;
  color:#8F4CB2;
  background-color: #ffffff;
  border: 2px solid #8F4CB2;
  transition: all .2s ease-in-out;
  cursor: pointer;
}
.btn-theme:hover {
  color:#ffffff;
  background-color: #8F4CB2;
  border: 2px solid #8F4CB2;
}

.btn-more {
  position: relative;
  display: inline-block;
  font-family: 'Pridi';
  font-size: 1.111rem;
  font-weight: 300;
  color: #777777;
  padding-right: 65px;
  cursor: pointer;
}
.btn-more:hover {
  text-decoration: underline;
}
.btn-more::after {
  position: absolute;
  content: "";
  width: 60px;
  height: 5px;
  background-color: #F58423;
  right: 0;
  bottom: 7px;
}
.btn-more.linePurple::after {
  background-color: #A961F5;
}

.btn-sac-orange {
  color: #000;
  background-color: #F58402;
  border-color: #F58402;
}
.btn-ethnic-purple {
  color: #ffffff;
  background-color: #A961F5;
  border-color: #A961F5;
}

.btn-loadMore {
  position: relative;
}
.btn-loadMore > span {
  display: none;
  width: 14px;
  margin-left: 15px;
}
.btn-loadMore::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 12px;
  margin-left: 15px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% auto;
  filter: brightness(0) invert(1);
}

.btn-theme-submit {
  position: relative;
  overflow: hidden;
  padding: 14px 50px;
  border: none;
  color: transparent;
}
.btn-theme-submit::before {
  position: absolute;
  content: attr(data-txt);
  top: 0;
  left: 0;
  color:#ffffff;
  background-color: #29CFBF;
  border: none;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s ease-in-out;
}
.btn-theme-submit::after {
  position: absolute;
  content: attr(data-txt);
  bottom: 0;
  transform: translateY(100%);
  left: 0;
  color:#ffffff;
  background-color: #F58423;
  border: none;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s ease-in-out;
}
.btn-theme-submit:hover {
  border: none;
}
.btn-theme-submit:hover::before {
  transform: translateY(-100%);
}
.btn-theme-submit:hover::after {
  transform: translateY(0);
}

.btn-theme-cancel {
  position: relative;
  overflow: hidden;
  padding: 14px 50px;
  border: none;
  color: transparent;
}
.btn-theme-cancel::before {
  position: absolute;
  content: attr(data-txt);
  top: 0;
  left: 0;
  color:#ffffff;
  background-color: rgba(119, 119, 119, .8);
  border: none;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s ease-in-out;
}
.btn-theme-cancel::after {
  position: absolute;
  content: attr(data-txt);
  bottom: 0;
  transform: translateY(100%);
  left: 0;
  color:#ffffff;
  background-color: #777777;
  border: none;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s ease-in-out;
}
.btn-theme-cancel:hover {
  border: none;
}
.btn-theme-cancel:hover::before {
  transform: translateY(-100%);
}
.btn-theme-cancel:hover::after {
  transform: translateY(0);
}

.btn-theme-submit.btn-disabled {
  opacity: .5;
}
.btn-theme-submit.btn-disabled:hover::before {
  transform: translateY(0);
}
.btn-theme-submit.btn-disabled:hover::after {
  transform: translateY(100%);
}

.sectionTitle {
  font-family: 'Athiti', sans-serif;
  font-size: 50px;
  line-height: 50px;
  color:#000000;
  font-weight: 700;
}
.sectionControlLeft {
  padding-left: 80px;
}
.sectionControlRight {
  padding-right: 80px;
}
.sectionControlBoth {
  padding-left: 80px;
  padding-right: 80px;
}
.sectionControlWidth {
  width: 100%;
  max-width: 1620px;
  padding: 0 80px;
  margin: 0 auto;
}
.sectionControlWidth.widerWidth {
  max-width: 1650px;
  padding: 0 65px;
}

.btnBackToTop {
  width: 62px;
  position: fixed;
  bottom: -62px;
  right: 22px;
  z-index: 90;
  transition: bottom .4s ease-in-out;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btnBackToTop .goto-top-img {
  width: 43px;
}
.btnBackToTop.actived {
  /*bottom: 92px;*/
  bottom: 97px;
}

.listImgCover {
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: #ffffff;
}
.listImgCoverControlSize  {
  width: 100%;
  position: relative;
}
.listImgCoverDefault {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.listImgCoverAutoBg {
  /*width: 48%;*/
  width: 58%;
}
.listNoImg {
  background-color: rgba(0, 0, 0, .1);
}

.filterMapArea {
  position: fixed;
  width: 100%;
  bottom: 0;
  height: calc(100vh - 105px);
  background-color: #ffffff;
  z-index: 90;
  transform: translateY(100%);
  transition: transform .4s ease-in-out;
}
.filterMapArea.actived {
  transform: translateY(0);
}
.filterMapAreaInner {
  position: relative;
  width: 100%;
  height: 100%;
}
.btnClose-filterMapArea {
  cursor: pointer;
  width: 24px;
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 100;
}

#googlemap {
  height: 100%;
}

.showCountItemListTxt {
  font-size: 1.4rem;
  font-weight: 300;
  margin-left: 10px;
}

a.mapLink, a.mapLink:hover, a.mapLink:focus {
  color: #000000;
  text-decoration: underline;
  font-weight: 700;
}

@media (max-width: 1600px) {
  .btn-theme {
    padding: 14px 25px;
    font-size: 22px;
    line-height: 22px;
  }
  .sectionTitle {
    font-size: 40px;
    line-height: 40px;
  }
  .sectionControlLeft {
    padding-left: 80px;
  }
  .sectionControlRight {
    padding-right: 80px;
  }
  .sectionControlBoth {
    padding-left: 80px;
    padding-right: 80px;
  }

  .sectionControlWidth.widerWidth {
    padding: 0 35px;
  }
}
@media (max-width: 1366px) {
  .btn-theme {
    padding: 14px 25px;
    font-size: 20px;
    line-height: 20px;
  }
  .sectionTitle {
    font-size: 30px;
    line-height: 30px;
  }
  .sectionControlLeft {
    padding-left: 45px;
  }
  .sectionControlRight {
    padding-right: 45px;
  }
  .sectionControlBoth {
    padding-left: 45px;
    padding-right: 45px;
  }
}
@media screen and (max-width: 767px), screen and (max-width:900px) and (orientation:landscape) {
  .mainPage.mobileMovingLeft {
    position: absolute;
    left: -50%;
  }
  .mainPage.mobileMovingTop {
    position: absolute;
    top: -50%;
  }
  
  .btn-theme {
    padding: 14px 25px;
    font-size: 20px;
    line-height: 20px;
  }
  .btn-more {
    font-size: 1.111rem;
    padding-right: 50px;
  }
  .btn-more::after {
    width: 44px;
    height: 4px;
    bottom: 7px;
  }

  .sectionTitle {
    font-size: 30px;
    line-height: 30px;
  }
  .sectionControlLeft {
    padding-left: 20px;
  }
  .sectionControlRight {
    padding-right: 20px;
  }
  .sectionControlBoth {
    padding-left: 20px;
    padding-right: 20px;
  }
  .sectionControlWidth {
    padding: 0 20px;
  }
  .sectionControlWidth.widerWidth {
    padding: 0 20px;
  }

  .showCountItemListTxt {
    display: block;
    margin-top: 5px;
  }
}


/********* FORM **********/
.themeForm input[type=text],
.themeForm input[type=password] {
  font-size: 18px;
  line-height: 22px;
  font-weight: 300;
  width: 100%;
  padding: 14px;
  background-color: transparent;
  border: 1px solid rgba(112, 112, 112, .25);
  outline: none;
  color: #000000;
}
.themeForm input[type=text]::placeholder,
.themeForm input[type=password]::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #777777;
  opacity: 1; /* Firefox */
}
.themeForm input[type=text]:-ms-input-placeholder,
.themeForm input[type=password]:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #777777;
}
.themeForm input[type=text]::-ms-input-placeholder,
.themeForm input[type=password]::-ms-input-placeholder { /* Microsoft Edge */
  color: #777777;
}
.themeForm input.txtError,
.themeForm select.txtError {
  border-color: #ff0000;
}

.themeForm textarea {
  font-size: 18px;
  line-height: 22px;
  font-weight: 300;
  width: 100%;
  padding: 14px;
  background-color: transparent;
  border: 1px solid rgba(112, 112, 112, .25);
  outline: none;
  color: #000000;
  height: 100px;
}
.themeForm textarea::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #777777;
  opacity: 1; /* Firefox */
}
.themeForm textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #777777;
}
.themeForm textarea::-ms-input-placeholder { /* Microsoft Edge */
  color: #777777;
}

.themeForm .row {
  margin-left: -5px;
  margin-right: -5px;
}
.themeForm .fieldItem {
  padding-left: 5px;
  padding-right: 5px;
  margin-bottom: 10px;
}
.themeForm .fieldItem.addPaddingLeft {
  padding-left: 35px;
}
.themeForm .fieldItem.fieldItemDropFile {
  margin: 20px 0;
}
.themeForm .fieldItem.blankFieldItem {
  display: block;
}

.themeForm .fieldInnerItem {
  margin-top: 10px;
}
.initHide {
  display: none;
}
.initHide.actived {
  display: block;
}

.fieldItemTitle {
  font-family: 'Athiti', sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 600;
  margin-top: 10px;
}
.fieldItemGroup {
  display: flex;
  justify-content: space-between;
  margin-left: -5px;
  margin-right: -5px;
}
.fieldItemGroup div {
  flex: 1;
  padding: 5px;
  padding-left: 5px;
  padding-right: 5px;
}
.formRemark {
  font-size: 16px;
  line-height: 24px;
  font-weight: 300;
  margin-top: 10px;
}
.formRemark.colorBlack {
  color: #000000;
}

.themeForm select {
  width: 100%;
  padding: 14px;
  background-color: transparent;
  border: 1px solid rgba(112, 112, 112, .25);
  font-size: 18px;
  line-height: 22px;
  font-weight: 300;
  border-radius: 0;
  color: #000000;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('../../images/icon-select-form.png');
  /*background-position: 97% 50%;*/
  background-position: right 10px center;
  background-repeat: no-repeat;
  outline: none;
}
.themeForm select option {
  background-color: #ffffff;
  color: #000000;
}

.fileContainerCover {
  position: relative;
  width: 100%;
  max-width: 600px;
  font-size: 22px;
  line-height: 24px;
  font-weight: 300;
}
.fileContainer {
  width: 100%;
  height: 170px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px dashed #29CFBF;
  z-index: 1;
  text-align: center;
  padding: 0 40px;
}
.fileContainer.txtError {
  border-color: #ff0000;
}
.fileContainerCover input[type=file] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  opacity: 0;
  background-color: transparent;
  outline: none;
  z-index: 5;
}
.fileContainerImg {
  width: 45px;
  margin: 0 auto 10px;
}

/* The container */
label.radioContainer {
	display: inline-block;
	position: relative;
	padding-left: 35px;
	margin-bottom: 5px;
	margin-right: 50px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
  user-select: none;
  font-family: 'Athiti', sans-serif;
  font-size: 24px;
  line-height: 26px;
  font-weight: 600;
}
/* Hide the browser's default radio button */
.radioContainer input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}
/* Create a custom radio button */
.checkmark {
	position: absolute;
	top: 1px;
	left: 0;
	height: 24px;
	width: 24px;
	background-color: #ffffff;
	border-radius: 50%;
	border: 1px solid #707070;
}
/* On mouse-over, add a grey background color */
.radioContainer:hover input ~ .checkmark {
  /*background-color: transparent;*/
}
/* When the radio button is checked, add a blue background */
.radioContainer input:checked ~ .checkmark {
  /*background-color: transparent;
  border-color: #707070;*/
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}
/* Show the indicator (dot/circle) when checked */
.radioContainer input:checked ~ .checkmark:after {
	display: block;
}
/* Style the indicator (dot/circle) */
.radioContainer .checkmark:after {
	top: 5px;
	left: 5px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background:#29CFBF;
}
.radioContainer:hover .checkmark:after {
  display: block;
	background:rgba(41, 207, 191, .4);
}
.radioContainer:hover input:checked ~ .checkmark:after {
  display: block;
	background:rgba(41, 207, 191, 1);
}

/* Customize the label (the container) */
.checkboxContainer {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 10px;
  cursor: pointer;
  font-family: 'Athiti', sans-serif;
  font-size: 1.111rem;
  font-weight: 600;
  color: #000000;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.checkboxContainer.smallerFont {
  font-size: 1.111rem;
}
.checkboxContainer .ligtherTxt {
  font-weight: 400;
}
/* Hide the browser's default checkbox */
.checkboxContainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
/* Create a custom checkbox */
.checkboxmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 24px;
  width: 24px;
  background-color: transparent;
  border: 1px solid rgba(112, 112, 112, .5);
}
/* On mouse-over, add a grey background color */
.checkboxContainer:hover input ~ .checkboxmark {
  background-color: transparent;
}
/* When the checkbox is checked, add a blue background */
.checkboxContainer input:checked ~ .checkboxmark {
  background-color: transparent;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkboxmark:after {
  content: "";
  position: absolute;
  display: none;
}
/* Show the checkmark when checked */
.checkboxContainer input:checked ~ .checkboxmark:after {
  display: block;
}
/* Style the checkmark/indicator */
.checkboxContainer .checkboxmark:after {
  left: 7px;
  top: 2px;
  width: 9px;
  height: 15px;
  border: solid #29CFBF;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

select.titleListOption {
  border: none;
  border-bottom: 1px solid #ffffff;
  background-position: right 0 center;
  border-radius: 0;
  background-color: transparent;
  filter: brightness(0) invert(1);
  padding-left: 0;
  outline: none !important;
}
select.titleListOption:focus {
  box-shadow: none;
  outline: 0;
}

.form-select-lg optgroup[label] {
  font-weight: 300;
}

.pageNotFoundContent {
  padding: 100px 0 100px;
  text-align: center;
}

@media (max-width: 1600px) {
  .fileContainerCover {
    max-width: 600px;
    font-size: 22px;
    line-height: 24px;
  }
  label.radioContainer {
    padding-left: 35px;
    margin-bottom: 5px;
    margin-right: 50px;
    font-size: 22px;
    line-height: 26px;
  }

  .checkboxContainer.smallerFont {
    font-size: 1rem;
  }
}
@media (max-width: 1366px) {
  .themeForm input[type=text],
  .themeForm input[type=password] {
    font-size: 16px;
    line-height: 22px;
  }
  .themeForm textarea {
    font-size: 16px;
    line-height: 22px;
  }
  .themeForm select {
    font-size: 16px;
    line-height: 22px;
  }

  .fileContainerCover {
    max-width: 600px;
    font-size: 20px;
    line-height: 22px;
  }
  label.radioContainer {
    padding-left: 35px;
    margin-bottom: 5px;
    margin-right: 50px;
    font-size: 20px;
    line-height: 26px;
  }

  .checkboxContainer.smallerFont {
    font-size: 1rem;
  }
}
@media screen and (max-width: 767px), screen and (max-width:900px) and (orientation:landscape) {
  .fileContainerCover {
    max-width: 600px;
    font-size: 22px;
    line-height: 24px;
  }
  label.radioContainer {
    padding-left: 35px;
    margin-bottom: 20px;
    margin-right: 50px;
    font-size: 22px;
    line-height: 26px;
  }
  .themeForm .fieldItem.addPaddingLeft {
    padding-left: 5px;
  }
  .themeForm .fieldItem.blankFieldItem {
    display: none;
  }
}

/*********** HOME ***********/
.homeBanner {
  width: 100%;
}
.homeBannerInner {
  width: 100%;
  padding: 0 0;
}
.homeBannerCarouselCover .owl-theme .owl-dots {
  position: absolute;
  width: 100%;
  bottom: 30px;
}
.homeBannerCarouselCover .owl-dot {
  /*margin: 0 7.5px;*/
  margin: 0 10px;
}
.homeBannerCarouselCover .owl-theme .owl-dots .owl-dot span {
  /*width: 20px;
  height: 20px;*/
  width: 12px;
  height: 12px;
  margin: 0 0;
  background: #FFFFFF;
  border-radius: 50%;
}
.homeBannerCarouselCover .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
  background: #F58423;
}

.homeHighlight {
  width: 100%;
  background-color: #F4F4F6;
}
.homeHighlightInner {
  width: 100%;
  /*padding: 30px 0 30px;*/
  padding: 30px 0 20px;
}
.homeHilightCarouselCover .owl-carousel {
  text-align: center;
}
.homeHilightCarouselCover .owl-carousel .owl-stage{
  display: flex;
  text-align: left;
}
.homeHilightCarouselCover .owl-carousel .owl-item {
  transform: translateX(30px);
}
.homeHilightCarouselCover .item {
  width: 470px;
  display: flex;
  height: 100%;
}
.homeHilightCarouselCover .owl-theme .owl-dots {
  display: inline-block;
  /*padding: 0 40px;*/
  padding: 0 20px;
}
.homeHilightCarouselCover .owl-dot {
  margin: 0 10px;
}
.homeHilightCarouselCover .owl-theme .owl-dots .owl-dot span {
  width: 12px;
  height: 12px;
  margin: 0 0;
  background: #D6D6D6;
  border-radius: 50%;
}
.homeHilightCarouselCover .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
  background: #F58423;
}
.homeHilightCarouselCover .owl-carousel .owl-nav button.owl-prev, .homeHilightCarouselCover .owl-carousel .owl-nav button.owl-next {
  outline: none;
  border-radius: 50%;
  transform: translateY(10px);
}
.homeHilightCarouselCover .owl-theme .owl-nav [class*='owl-']:hover {
  background: none;
  color: inherit;
}
.homeHilightCarouselCover .owl-theme .owl-nav {
  height: 20px;
  /*margin-top: 15px;*/
  margin-top: 0px;
}
.homeHighlightItemInner {
  width: 100%;
  display: block;
  background-color: #ffffff;
  transition:box-shadow .6s ease-out;
  margin-bottom: 15px;
}
.homeHighlightItemInner:hover {
  box-shadow:0 .5rem 1rem rgba(0,0,0,.25);
}
.homeHighlightItemImgCover {
  position: relative;
  overflow: hidden;
}
.homeHighlightItemImg {
  position: relative;
  z-index: 1;
}
.homeHighlightItemImgBadge {
  z-index: 10;
  position: absolute;
  top: 0;
  left: 4.6%;
  padding: 12px 8px 2px;
  background-color: #29CFBF;
  color: #000000;
  font-family: 'Athiti';
  font-size: 1.33rem;
  font-weight: 700;
  transform: translateY(-100%);
  opacity: 0;
  transition: .4s ease-in-out;
}
.homeHighlightItemImgBar {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.homeHighlightItemImgBar > div {
  position: absolute;
  background-color: #29CFBF;
  z-index: 5;
  opacity: 0;
  transition: .4s all ease-in-out;
  transform-origin: center;
}
.homeHighlightItemImgBar > div:nth-child(1) {
  width: 0;
  height: 10px;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.homeHighlightItemImgBar > div:nth-child(2) {
  width: 0;
  height: 10px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.homeHighlightItemImgBar > div:nth-child(3) {
  width: 10px;
  height: 0;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.homeHighlightItemImgBar > div:nth-child(4) {
  width: 10px;
  height: 0;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.homeHighlightItemInner:hover .homeHighlightItemImgBadge {
  transform: translateY(0);
  opacity: 1;
}
.homeHighlightItemInner:hover .homeHighlightItemImgBar > div:nth-child(1), 
.homeHighlightItemInner:hover .homeHighlightItemImgBar > div:nth-child(2) {
  width: 100%;
  opacity: 1;
}
.homeHighlightItemInner:hover .homeHighlightItemImgBar > div:nth-child(3), 
.homeHighlightItemInner:hover .homeHighlightItemImgBar > div:nth-child(4) {
  height: 100%;
  opacity: 1;
}
.homeHighlightItemDetail {
  /*padding: 20px 30px 25px;*/
  padding: 15px 15px 15px;
  font-family: 'Pridi';
  font-size: 1.111rem;
  color: #555555;
}
.homeHighlightItemDetail-title {
  font-family: 'Athiti';
  font-size: 1.333rem;
  line-height: 1.3;
  font-weight: 600;
  color: #000000;
  padding-right: 35px;
}
.homeHighlightItemDetail-date {
  margin-top: 10px;
  font-weight: 300;
}
.homeHighlightItemDetail-info {
  margin-top: 8px;
}
.homeHighlightItemDetail-link {
  margin-top: 10px;
}

.owlCarouselCustomNav {
  position: absolute;
  top: 50%;
  width: 100%;
  height: 1px;
}
.owlCarouselCustomNavBtn {
  width: 40px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 3rem;
  color: #f8f9fa;
  -webkit-text-stroke: 1px #000;
}
.owlCarouselCustomNavBtn:hover {
  color: #F58423;
}
.owlCarouselCustomNavBtn.disabled {
  display: none;
}
.owlCarouselCustomNav-prev {
  position: absolute;
  left: 30px;
  transform: translateY(-50%);
}
.owlCarouselCustomNav-next {
  position: absolute;
  right: 30px;
  transform: translateY(-50%);
}
.owlCarouselCustomNavBtn > img {
  width: 20px;
}
.owlCarouselCustomNav.outsideContainer .owlCarouselCustomNav-prev {
  left: -50px;
}
.owlCarouselCustomNav.outsideContainer .owlCarouselCustomNav-next {
  right: -50px;
}

.badgePurple .homeHighlightItemImgBadge {background-color: #A961F5;}
.badgePurple .homeHighlightItemImgBar > div {background-color: #A961F5;}
.badgeGreen .homeHighlightItemImgBadge {background-color: #29CFBF;}
.badgeGreen .homeHighlightItemImgBar > div {background-color: #29CFBF;}
.badgeOrange .homeHighlightItemImgBadge {background-color: #F58423;}
.badgeOrange .homeHighlightItemImgBar > div {background-color: #F58423;}

.homeSection {
  background-color: #F4F4F6;
}
.homeSectionInner {
  padding: 0;
}
.homeSectionTitleArea {
  position: relative;
  /*height: 320px;*/
  height: 324px;
  background-repeat: no-repeat;
  /*background-size: 100% auto;*/
  background-size: cover;
  background-position: right center;
}
.homeSectionTitleTxt {
  display: flex;
  width: 100%;
  height: 100%;
  color: #ffffff;
}
.homeSectionTitleTxt.titleBottom {
  /*align-items: flex-end;*/
  align-items: center;
  /*padding-bottom: 10px;*/
}
.homeSectionTitleTxt h2 {
  color: #ffffff;
}
.homeSectionDetail {
  /*padding: 30px 0 30px;*/
  padding: 30px 0 20px;
}
.homeSectionInfo {
  display: flex;
  justify-content: space-between;
}
.homeSectionInfo-content {
  flex: 1;
  /*max-width: 940px;*/
  padding-right: 20px;
  font-size: 1.111rem;
}
.homeSectionInfo-viewAll {
  width: 20%;
  text-align: right;
}
.homeSectionInfo-viewAll-under {
  display: inline-block;
  margin-left: 35px;
}
.homeSectionList {
  margin-top: 25px;
}
.homeSectionCarouselCover .owl-carousel {
  text-align: center;
}
.homeSectionCarouselCover .owl-carousel .owl-stage{
  display: flex;
  text-align: left;
}
.homeSectionCarouselCover .item {
  display: flex;
  height: 100%;
}
.homeSectionCarouselCover .owl-theme .owl-dots {
  display: inline-block;
  /*padding: 0 40px;*/
  padding: 0 20px;
}
.homeSectionCarouselCover .owl-dot {
  margin: 0 10px;
}
.homeSectionCarouselCover .owl-theme .owl-dots .owl-dot span {
  width: 12px;
  height: 12px;
  margin: 0 0;
  background: #D6D6D6;
  border-radius: 50%;
}
.homeSectionCarouselCover .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
  background: #F58423;
}
.homeSectionCarouselCover .owl-carousel .owl-nav button.owl-prev, .homeSectionCarouselCover .owl-carousel .owl-nav button.owl-next {
  outline: none;
  border-radius: 50%;
  transform: translateY(10px);
}
.homeSectionCarouselCover .owl-theme .owl-nav [class*='owl-']:hover {
  background: none;
  color: inherit;
}
.homeSectionCarouselCover .owl-theme .owl-nav {
  height: 20px;
  /*margin-top: 15px;*/
  margin-top: 0;
}
.homeSectionItemInner {
  width: 100%;
  height: 100%;
  display: block;
  background-color: #ffffff;
  transition:box-shadow .6s ease-out;
  /*margin-bottom: 15px;*/
}
.homeSectionItemInner:hover {
  box-shadow:0 .5rem 1rem rgba(0,0,0,.25);
}
.homeSectionItemImgCover {
  position: relative;
}
.homeSectionItemDetail {
  /*padding: 25px 30px 25px;*/
  padding: 15px 15px 15px;
  font-size: 1.111rem;
  color: #555555;
  position: relative;
}
.homeSectionItemDetail-title {
  font-family: 'Athiti';
  /*font-size: 1.555rem;*/
  font-size: 1.333rem;
  line-height: 1.3;
  font-weight: 600;
  color: #000000;
  padding-right: 35px;
}
.homeSectionItemDetail-subtitle {
  margin-top: 10px;
  font-weight: 300;
}
.homeSectionItemDetail-info {
  margin-top: 10px;
}
.homeSectionItemDetail-link {
  margin-top: 10px;
}

.homeSectionPolicyContent {
  background-image: url('../../images/home/rec_policy.jpg');
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: top center;
  padding-top: 35px;
}
.homeSectionPolicyTitle {
  text-align: center;
  color: #ffffff;
}
.homeSectionPolicyTitle > div {
  display: inline-block;
  margin: 0 15px;
}
.homeSectionPolicyTitle h2,
.homeSectionPolicyTitle a {
  color: #ffffff;
}
.homeSectionPolicyList{
  margin-top: 30px;
  padding-bottom: 30px;
  background-color: #ffffff;
}
.homePolicyItemInner {
  background-color: #ffffff;
  display: flex;
  padding: 50px;
  width: 100%;
  background-image: url('../../images/home/bg-policy.png');
  background-repeat: no-repeat;
  background-position: right 3% bottom;
  background-size: 14% auto;
}
.homePolicyItemInnerImg {
  margin-right: 60px;
  width: 42%;
}
.homePolicyItemInnerContent {
  flex: 1;
  font-size: 1.111rem;
  color: #555555;
}
.homePolicyItemInnerContent-title {
  font-family: 'Athiti';
  font-size: 1.333rem;
  line-height: 1.3;
  font-weight: 600;
  color: #000000;
}
.homePolicyItemInnerContent-date {
  margin-top: 20px;
  font-weight: 300;
}
.homePolicyItemInnerContent-info {
  margin-top: 30px;
}
.homePolicyItemInnerContent-link {
  margin-top: 40px;
}

.MB_homeSectionViewAll {
  display: none;
  text-align: center;
  margin-top: 30px;
}

.homeSearch {
  background-color: #ffffff;
  background-image: url('../../images/home/bg-search.png');
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 46.8% auto;
  padding: 10px 0 20px;
}
.homeSectionDetailTitle {
  text-align: center;
  margin-bottom: 80px;
}
.homeSectionDetailTitle h2 {
  font-weight: 500;
  color: #212529;
}
.homeSearchDivTxt {
  text-align: center;
  color: #A762F4;
  font-size: 1.33rem;
  margin: 40px 0 30px;
}
.homeSearch .contentFilterByCharList {
  max-width: 1080px;
}

.homeMap {
  background-color: #F4F4F6;
  padding: 50px 0 70px;
}
.homeMap .homeSectionDetailTitle {
  margin-bottom: 40px;
}
.homeMapContentCover {
  display: block;
  cursor: pointer;
}
.homeMapContentLoad {
  position: absolute;
  background-color: rgba(0,0,0,.25);
  cursor: pointer;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.homeMapContentLoad .maploader {
  border: 10px solid #00B388;
  border-bottom: 10px solid transparent;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
  margin-left:auto;
  margin-right:auto;
}
.homeMapContentLoad.finish {
  display: none;
}

.homeMapContentIframe {
	position: relative;
	/*padding-bottom: 41%;*/
  padding-bottom: 46.8%;
	/*padding-top: 25px;*/
	height: 0;
  display: none;
}
.homeMapContentIframe iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
  z-index: 10;
}

.homeMapContent.loading .homeMapContentCover {
  display: none;
}
.homeMapContent.loading .homeMapContentIframe {
  display: block;
}

.ethnicMapContentIframe {
  position: relative;
  width: 100%;
  height: 100%;
}
.ethnicMapContentIframe iframe {
	width: 100%;
	height: 100%;
}

.homeSiteSearch {
  width: 100%;
  padding: 10px 0;
}
.homeSiteSearchInner {
}
.homeSiteSearchBox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-color: #F4F4F6;
  padding: 40px 30px;
}
.homeSiteSearchBox > div {
  margin: 0 15px;
}
.homeSiteSearchBox > div.homeSiteSearchBox-input {
  /*width: 33%;*/
  width: 50%;
}

.bothSideTitle {
  /*display: flex;
  align-items: flex-end;
  justify-content: space-between;*/
  display: block;
}
.bothSideTitle h2 {
  display: inline-block;
}
.bothSideTitle .btn-more {
  color: #ffffff;
}

.homeSectionSearchArea {
  padding-bottom: 25px;
}
.homeSectionSearchArea .homeSearchDivTxt {
  text-align: left;
  margin: 25px 0 5px;
}
.homeSectionSearchArea .contentFilterByCharList {
  max-width: 1050px;
  margin: 0;
  justify-content: flex-start;
}
.homeSectionSearchBox {
  display: flex;
  align-items: flex-end;
  width: 100%;
  max-width: 1050px;
}
.homeSectionSearchBox-content {
  flex: 1;
  margin-right: 15px;
}
.homeSectionSearchBox-submit {
  text-align: right;
}
.homeSectionPolicyList .homeSectionSearchArea {
  padding: 35px 50px 0;
}

.homeSectionPolicyControl .homeSectionList {
  margin-top: 25px;
}

@media (max-width: 1600px) {
  .homeBannerCarouselCover .owl-theme .owl-dots {
    bottom: 30px;
  }
  
  .homeHighlightInner {
    /*padding: 30px 0 30px;*/
    padding: 30px 0 20px;
  }
  .homeHilightCarouselCover .owl-carousel .owl-item {
    transform: translateX(30px);
  }
  .homeHilightCarouselCover .item {
    width: 400px;
  }
  .homeHilightCarouselCover .owl-theme .owl-nav {
    height: 20px;
    /*margin-top: 15px;*/
    margin-top: 0px;
  }
  .homeHighlightItemInner {
    margin-bottom: 15px;
  }
  .homeHighlightItemImgBadge {
    top: 0;
    left: 4.6%;
    padding: 12px 8px 2px;
    font-size: 1.33rem;
  }
  .homeHighlightItemImgBar > div:nth-child(1) {
    height: 10px;
  }
  .homeHighlightItemImgBar > div:nth-child(2) {
    height: 10px;
  }
  .homeHighlightItemImgBar > div:nth-child(3) {
    width: 10px;
  }
  .homeHighlightItemImgBar > div:nth-child(4) {
    width: 10px;
  }
  .homeHighlightItemDetail {
    /*padding: 20px 30px 25px;*/
    padding: 15px 15px 15px;
    font-size: 1.111rem;
  }
  .homeHighlightItemDetail-title {
    font-size: 1.333rem;
  }
  .homeHighlightItemDetail-date {
    margin-top: 10px;
  }
  .homeHighlightItemDetail-info {
    margin-top: 8px;
  }
  .homeHighlightItemDetail-link {
    margin-top: 10px;
  }
  
  .owlCarouselCustomNavBtn {
    width: 40px;
    height: 60px;
    font-size: 3rem;
  }
  .owlCarouselCustomNav-prev {
    left: 30px;
  }
  .owlCarouselCustomNav-next {
    right: 30px;
  }
  .owlCarouselCustomNavBtn > img {
    width: 20px;
  }
  .owlCarouselCustomNav.outsideContainer .owlCarouselCustomNav-prev {
    left: -50px;
  }
  .owlCarouselCustomNav.outsideContainer .owlCarouselCustomNav-next {
    right: -50px;
  }
  
  .homeSectionTitleArea {
    height: 270px;
  }
  .homeSectionTitleTxt.titleBottom {
    /*padding-bottom: 10px;*/
  }
  .homeSectionDetail {
    /*padding: 30px 0 30px;*/
    padding: 30px 0 20px;
  }
  .homeSectionInfo-content {
    /*max-width: 940px;*/
    padding-right: 20px;
    font-size: 1.111rem;
  }
  .homeSectionInfo-viewAll {
    width: 20%;
  }
  .homeSectionList {
    margin-top: 25px;
  }
  .homeSectionCarouselCover .owl-theme .owl-nav {
    height: 20px;
    /*margin-top: 15px;*/
    margin-top: 0;
  }
  .homeSectionItemDetail {
    /*padding: 25px 30px 25px;*/
    padding: 15px 15px 15px;
    font-size: 1.111rem;
  }
  .homeSectionItemDetail-title {
    font-size: 1.333rem;
  }
  .homeSectionItemDetail-subtitle {
    margin-top: 10px;
  }
  .homeSectionItemDetail-info {
    margin-top: 10px;
  }
  .homeSectionItemDetail-link {
    margin-top: 10px;
  }
  
  .homeSectionPolicyContent {
    padding-top: 35px;
  }
  .homeSectionPolicyTitle > div {
    margin: 0 15px;
  }
  .homeSectionPolicyList{
    margin-top: 30px;
    padding-bottom: 30px;
  }
  .homePolicyItemInner {
    padding: 50px;
  }
  .homePolicyItemInnerImg {
    margin-right: 60px;
    width: 42%;
  }
  .homePolicyItemInnerContent {
    font-size: 1.111rem;
  }
  .homePolicyItemInnerContent-title {
    font-size: 1.333rem;
  }
  .homePolicyItemInnerContent-date {
    margin-top: 20px;
  }
  .homePolicyItemInnerContent-info {
    margin-top: 30px;
  }
  .homePolicyItemInnerContent-link {
    margin-top: 40px;
  }
}
@media (max-width: 1366px) {
  .homeBannerCarouselCover .owl-theme .owl-dots {
    bottom: 30px;
  }
  
  .homeHighlightInner {
    /*padding: 30px 0 30px;*/
    padding: 30px 0 20px;
  }
  .homeHilightCarouselCover .owl-carousel .owl-item {
    transform: translateX(30px);
  }
  .homeHilightCarouselCover .item {
    width: 370px;
  }
  .homeHilightCarouselCover .owl-theme .owl-nav {
    height: 20px;
    /*margin-top: 15px;*/
    margin-top: 0px;
  }
  .homeHighlightItemInner {
    margin-bottom: 15px;
  }
  .homeHighlightItemImgBadge {
    top: 0;
    left: 4.6%;
    padding: 12px 8px 2px;
    font-size: 1.33rem;
  }
  .homeHighlightItemImgBar > div:nth-child(1) {
    height: 10px;
  }
  .homeHighlightItemImgBar > div:nth-child(2) {
    height: 10px;
  }
  .homeHighlightItemImgBar > div:nth-child(3) {
    width: 10px;
  }
  .homeHighlightItemImgBar > div:nth-child(4) {
    width: 10px;
  }
  .homeHighlightItemDetail {
    /*padding: 20px 30px 25px;*/
    padding: 15px 15px 15px;
    font-size: 1.111rem;
  }
  .homeHighlightItemDetail-title {
    font-size: 1.333rem;
  }
  .homeHighlightItemDetail-date {
    margin-top: 10px;
  }
  .homeHighlightItemDetail-info {
    margin-top: 8px;
  }
  .homeHighlightItemDetail-link {
    margin-top: 10px;
  }
  
  .owlCarouselCustomNavBtn {
    width: 40px;
    height: 60px;
    font-size: 3rem;
  }
  .owlCarouselCustomNav-prev {
    left: 30px;
  }
  .owlCarouselCustomNav-next {
    right: 30px;
  }
  .owlCarouselCustomNavBtn > img {
    width: 20px;
  }
  .owlCarouselCustomNav.outsideContainer .owlCarouselCustomNav-prev {
    left: -50px;
  }
  .owlCarouselCustomNav.outsideContainer .owlCarouselCustomNav-next {
    right: -50px;
  }
  
  .homeSectionTitleArea {
    height: 231px;
  }
  .homeSectionTitleTxt.titleBottom {
    /*padding-bottom: 10px;*/
  }
  .homeSectionDetail {
    /*padding: 30px 0 30px;*/
    padding: 30px 0 20px;
  }
  .homeSectionInfo-content {
    /*max-width: 940px;*/
    padding-right: 20px;
    font-size: 1.111rem;
  }
  .homeSectionInfo-viewAll {
    width: 20%;
  }
  .homeSectionList {
    margin-top: 25px;
  }
  .homeSectionCarouselCover .owl-theme .owl-nav {
    height: 20px;
    /*margin-top: 15px;*/
    margin-top: 0;
  }
  .homeSectionItemDetail {
    /*padding: 25px 30px 25px;*/
    padding: 15px 15px 15px;
    font-size: 1.111rem;
  }
  .homeSectionItemDetail-title {
    font-size: 1.333rem;
  }
  .homeSectionItemDetail-subtitle {
    margin-top: 10px;
  }
  .homeSectionItemDetail-info {
    margin-top: 10px;
  }
  .homeSectionItemDetail-link {
    margin-top: 10px;
  }
  
  .homeSectionPolicyContent {
    padding-top: 35px;
  }
  .homeSectionPolicyTitle > div {
    margin: 0 15px;
  }
  .homeSectionPolicyList{
    margin-top: 30px;
    padding-bottom: 30px;
  }
  .homePolicyItemInner {
    padding: 50px;
  }
  .homePolicyItemInnerImg {
    margin-right: 60px;
    width: 42%;
  }
  .homePolicyItemInnerContent {
    font-size: 1.111rem;
  }
  .homePolicyItemInnerContent-title {
    font-size: 1.333rem;
  }
  .homePolicyItemInnerContent-date {
    margin-top: 20px;
  }
  .homePolicyItemInnerContent-info {
    margin-top: 30px;
  }
  .homePolicyItemInnerContent-link {
    margin-top: 40px;
  }

  .homeSiteSearchBox {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: left;
    padding: 40px 30px;
  }
  .homeSiteSearchBox > div {
    margin: 0 0 15px;
  }
  .homeSiteSearchBox > div:first-child {
    width: 100%;
  }
  .homeSiteSearchBox > div.homeSiteSearchBox-input {
    width: 66%;
    margin-right: 15px;
  }
}
@media screen and (max-width: 767px), screen and (max-width:900px) and (orientation:landscape) {
  .homeBannerCarouselCover .owl-theme .owl-dots {
    bottom: 20px;
  }
  
  .homeHighlightInner {
    /*padding: 30px 0 30px;*/
    padding: 30px 0 20px;
  }
  .homeHilightCarouselCover .owl-carousel .owl-item {
    transform: translateX(20px);
  }
  .homeHilightCarouselCover .item {
    width: 300px;
  }
  .homeHilightCarouselCover .owl-theme .owl-nav {
    height: 20px;
    /*margin-top: 15px;*/
    margin-top: 0px;
  }
  .homeHighlightItemInner {
    margin-bottom: 15px;
  }
  .homeHighlightItemImgBadge {
    top: 0;
    left: 4.6%;
    padding: 12px 8px 2px;
    font-size: 1.33rem;
  }
  .homeHighlightItemImgBar > div:nth-child(1) {
    height: 10px;
  }
  .homeHighlightItemImgBar > div:nth-child(2) {
    height: 10px;
  }
  .homeHighlightItemImgBar > div:nth-child(3) {
    width: 10px;
  }
  .homeHighlightItemImgBar > div:nth-child(4) {
    width: 10px;
  }
  .homeHighlightItemDetail {
    /*padding: 20px 30px 25px;*/
    padding: 15px 15px 15px;
    font-size: 1.111rem;
  }
  .homeHighlightItemDetail-title {
    font-size: 1.333rem;
  }
  .homeHighlightItemDetail-date {
    margin-top: 10px;
  }
  .homeHighlightItemDetail-info {
    margin-top: 8px;
  }
  .homeHighlightItemDetail-link {
    margin-top: 10px;
  }
  
  .owlCarouselCustomNavBtn {
    display: none;
  }
  
  .homeSectionTitleArea {
    height: auto;
    padding: 25px 0;
    position: relative;
  }
  .homeSectionTitleArea::before {
    content: "";
    position: absolute;
    z-index: 5;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .25);
    top: 0;
    left: 0;
  }
  .homeSectionTitleTxt {
    position: relative;
    z-index: 10;
  }
  .homeSectionTitleTxt.titleBottom {
    padding-bottom: 0;
    text-align: center;
  }
  .homeSectionDetail {
    /*padding: 30px 0 30px;*/
    padding: 30px 0 20px;
  }
  .homeSectionInfo {
    display: block;
  }
  .homeSectionInfo-content {
    /*max-width: 940px;*/
    padding-right: 20px;
    font-size: 1.111rem;
  }
  .homeSectionInfo-viewAll {
    display: none;
  }
  .homeSectionInfo-viewAll-under {
    display: none;
  }
  .homeSectionList {
    margin-top: 25px;
  }
  .homeSectionCarouselCover .owl-theme .owl-nav {
    height: 20px;
    /*margin-top: 15px;*/
    margin-top: 0;
  }
  .homeSectionItemDetail {
    /*padding: 25px 30px 25px;*/
    padding: 15px 15px 15px;
    font-size: 1.111rem;
  }
  .homeSectionItemDetail-title {
    font-size: 1.333rem;
  }
  .homeSectionItemDetail-subtitle {
    margin-top: 10px;
  }
  .homeSectionItemDetail-info {
    margin-top: 10px;
  }
  .homeSectionItemDetail-link {
    margin-top: 10px;
  }
  
  .homeSectionPolicyContent {
    padding-top: 35px;
    background-size: auto auto;
  }
  .homeSectionPolicyTitle > div {
    margin: 0 15px;
  }
  .homeSectionPolicyList{
    margin-top: 30px;
    padding-bottom: 30px;
  }
  .homePolicyItemInner {
    padding: 30px;
    display: block;
  }
  .homePolicyItemInnerImg {
    margin-right: 0;
    width: 100%;
  }
  .homePolicyItemInnerContent {
    font-size: 1.111rem;
    margin-top: 30px;
  }
  .homePolicyItemInnerContent-title {
    font-size: 1.333rem;
  }
  .homePolicyItemInnerContent-date {
    margin-top: 20px;
  }
  .homePolicyItemInnerContent-info {
    margin-top: 30px;
  }
  .homePolicyItemInnerContent-link {
    margin-top: 40px;
  }
  .homeSectionPolicyTitle > div.homeSectionPolicyTitle-viewAll {
    display: none;
  }
  .MB_homeSectionViewAll {
    display: block;
  }

  .homeMapContentIframe {
    padding-bottom: 100%;
  }

  .homeSiteSearchBox > div.homeSiteSearchBox-input {
    width: 100%;
    margin-right: 0;
  }
  .homeSiteSearchBox > div.homeSiteSearchBox-input .row > * {
    margin-top: 15px;
  }
  .homeSectionSearchBox {
    display: flex;
    flex-wrap: wrap;
  }
  .homeSectionSearchBox-content {
    width: 100%;
    margin-right: 0;
    margin-bottom: 15px;
  }
  .homeSectionSearchBox-submit {
    width: 100%;
    text-align: left;
  }
}

/*********** PAGE HEADER ***********/
.pageContentHeader {
  background-color: #F4F4F6;
}
.pageContentHeaderAdvanceSearch {
  width: 100%;
  text-align: left;
  background-color: #F1F1F1;
}
.pageContentHeaderAdvanceSearchInner {
  padding: 45px 0 35px;
}
.advanceSearchFormArea .row {
  margin-left: -25px;
  margin-right: -25px;
}
.advanceSearchItem {
  padding: 0 25px;
  margin-bottom: 20px;
}
.advanceSearchBtn {
  text-align: center;
  margin-top: 10px;
}

.headerContentArea {
  margin-bottom: 2rem;
}
.headerTitleArea {
  margin-top: 2rem;
}
.headerTitleSpace {
  height: 62px;
}
.headerSearchArea {
  align-self: flex-end;
}

@media (max-width: 1600px) {
}
@media (max-width: 1366px) {
  .headerTitleSpace {
    height: 55px;
}
}
@media screen and (max-width: 767px), screen and (max-width:900px) and (orientation:landscape) {
  .headerTitleArea {
    margin-top: 1rem;
  }
  .headerTitleSpace {
    height: 0;
  }
  .headerSearchArea {
    margin-top: 15px;
  }
}

/*********** DB OVERVIEW ***********/
.overviewGroupList {
  background-color: #F4F4F6;
}
.overviewGroupListHeader {
  height: 200px;
  /*background-image: url('../../images/bg-title.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left center;*/
  color: #ffffff;
}
.overviewGroupListHeaderArea {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-between;
}
.overviewGroupListHeaderArea > div:last-child {
  text-align: right;
}
.overviewGroupListHeader h3,
.overviewGroupListHeader a {
  color: #ffffff
}
.overviewGroupListHeader .form-select {
  padding-right: 1rem;
}
.overviewGroupListContent {
  padding: 30px 0 30px;
}
.contentListCover {
  padding-bottom: 50px;
}
.contentFilterByCharList {
  width: 100%;
  max-width: 1110px;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  justify-content: center;
}
.contentFilterByCharItem,
a.contentFilterByCharItem {
  display: inline-flex;
  width: 40px;
  height: 42px;
  align-items: center;
  justify-content: center;
  background-color: #BDBFBF;
  color: #ffffff;
  font-size: 1.222rem;
  margin: 5px;
  cursor: pointer;
}
.contentFilterByCharItem:hover {
  text-decoration: underline;
}
.contentFilterByCharItem.actived {
  background-color: #777777;
}
.contentFilterByCharItem.filterAll {
  width: 94px;
}
.contentFilterByCharItem.itemDisabled {
  opacity: .5;
}
.contentFilterByCharItem.itemDisabled:hover,
a.contentFilterByCharItem.itemDisabled:hover {
  text-decoration: none;
}
.contentList {
  margin-top: 30px;
}
.contentList.ethnicList {
  margin-top: 30px;
}
.contentList .row {
  margin-left: -12.5px;
  margin-right: -12.5px;
}
.contentList .row .contentListItem {
  flex: 0 0 auto;
  width: 25%;
  margin-bottom: 25px;
}
.contentListLoadMoreArea {
  margin-top: 30px;
  text-align: center;
  display: none;
}
.overviewGroupListContent {
  padding: 30px 0 30px;
}
.policyList {
  padding-left: 0;
  padding-bottom: 10px;
  list-style: none;
}
.policyList > li {
  position: relative;
  width: 100%;
  padding-left: 48px;
  min-height: 108px;
  display: flex;
  align-items: stretch;
  font-size: 1.222rem;
  color: #777777;
  margin-bottom: 20px;
  background-color: #FFFFFF;
}
.policyList > li::before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 18px;
  height: 100%;
  background-color: #A961F5;
}
.policyList > li > div {
  padding: 10px 0;
  display: inline-flex;
  align-items: center;
}
.policyList > li > div.policyListItemDetail {
  display: flex;
  flex: 1;
}
.policyList > li > div.policyListItem-link {
  width: 108px;
  border-left: 4px solid #F4F4F6;
  font-size: 1rem;
  font-weight: 300;
  color: #555555;
  justify-content: center;
}
.policyList > li > div.policyListItem-link a {
  color: #555555;
}
.policyList > li > div.policyListItem-link a:hover {
  color: #F58423;
}
.policyListItem-name {
  flex: 1;
  padding-right: 40px;
}
.policyListItem-date {
  width: 280px;
  font-size: 1.111rem;
}
.policyListItem-name > div {
  max-width: 950px;
}
.policyListItem-link .downloadIcon {
  /*width: 31px;
  margin: 0 auto 6px;*/
  margin-bottom: -5px;
  font-size: 2rem;
  text-align: center;
}

.contentListLoading {
  width: 100%;
  height: 600px;
}

@media (max-width: 1600px) {
  .policyListItem-date {
    width: 250px;
  }
}
@media (max-width: 1366px) {
  .contentList .row .contentListItem {
    width: 33.3333%;
  }
  .policyListItem-date {
    width: 180px;
  }
}
@media (max-width: 1024px) {
  .policyList > li > div.policyListItemDetail {
    display: block;
  }
  .policyListItem-name {
    padding-right: 20px;
  }
  .policyListItem-date {
    margin-top: 10px;
  }
}
@media (max-width: 1023px) {
  .contentList .row {
    margin-left: -10px;
    margin-right: -10px;
  }
  .contentList .row .contentListItem {
    width: 50%;
  }
}
@media screen and (max-width: 767px), screen and (max-width:900px) and (orientation:landscape) {
  .overviewGroupListHeader {
    height: auto;
    padding: 25px 0;
    position: relative;
  }
  .overviewGroupListHeader::before {
    content: "";
    position: absolute;
    z-index: 5;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .25);
    top: 0;
    left: 0;
  }
  .overviewGroupListHeaderArea {
    display: block;
    text-align: center;
    position: relative;
    z-index: 10;
  }
  .overviewGroupListHeaderArea > div:last-child {
    display: none;
  }
  .overviewGroupListContent {
    padding: 30px 0 30px;
  }
  .contentList {
    margin-top: 0;
  }
  .contentList.ethnicList {
    margin-top: 30px;
  }
  .contentList .row .contentListItem {
    width: 100%;
  }
  .policyList > li {
    flex-wrap: wrap;
    padding-left: 28px;
  }
  .policyList > li::before {
    width: 8px;
  }
  .policyList > li > div.policyListItem-link {
    width: 100%;
    border-left: none;
    justify-content: flex-start;
  }
}

/******** DETAIL *********/
.pageSiteDetail {
  background-color: #F4F4F6;
  background-image: url('../../images/ethnic/bg-page-detail.png');
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 50% auto;
}
.pageDetailContentBottomSpace {
  height: 180px;
}
.pageDetailTextControl,
.pageDetailEditor {
  font-size: 1.222rem;
  color: #555555;
  word-break: break-word;
}
.pageDetailEditor p {
  font-size: 1.222rem;
  font-weight: 300;
}
.pageDetailEditor strong,
.pageDetailEditor b {
  font-weight: 600;
}
.pageDetailEditor a {
  color: #A762F4;
}
.pageDetailIntro {
  font-size: 1.333rem;
  color: #777777;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(112, 112, 112, .5);
}
.pageDetialContent {
  /*padding: 30px 0 80px;*/
  padding: 30px 0 0;
  margin-bottom: 80px;
  display: flex;
  align-items: flex-start;
}
.pageDetialContentNav {
  width: 370px;
  margin-right: 45px;
  /*background-color: #A762F4;
  background-image: url('../../images/ethnic/bg-detail-nav.png');
  background-size: 68% auto;
  background-position: right bottom;
  background-repeat: no-repeat;
  padding: 25px 25px 70px;*/
  font-family: 'Athiti';
  font-size: 1.444rem;
  color: #FFFFFF;
}
.pageDetialContentData {
  flex: 1;
}
.pageDetialContentNav ul {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 0;
}
.pageDetialContentNav ul > li {
  margin-bottom: 8px;
  cursor: pointer;
}
.pageDetialContentNav ul > li::before {
  content: "\2022";
  margin-right: 5px;
}
.pageDetialContentNav ul > li.actived {
  color: #29CFBF;
}
.detailSidebar_inner {
  width: 100%;
  background-color: #A762F4;
  background-image: url('../../images/ethnic/bg-detail-nav.png');
  background-size: 68% auto;
  background-position: right bottom;
  background-repeat: no-repeat;
  padding: 25px 25px 70px;
}
.pageDetialContentDataTagsList {
  padding-top: 40px;
}
.pageDetialContentDataTagsList .bi-tags {
  margin-left: 7px;
  margin-right: 12px;
}
.pageDetialContentDataTagsList .btn {
  margin-bottom: 10px;
}
.pageDetailRelatedList {
  padding: 0 0 50px;
}
.pageDetailRelatedNav {
  margin-top: 30px;
  font-family: 'Athiti';
}
.pageDetailRelatedNav > ul {
  padding-left: 0;
  margin-bottom: 0;
  list-style-type: none;
}
.pageDetailRelatedNav > ul > li {
  display: inline-block;
  margin-right: 25px;
  font-size: 1.333rem;
  font-weight: 600;
  color: rgba(119, 119, 119, .7);
  cursor: pointer;
}
.pageDetailRelatedNav > ul > li:last-child {
  margin-right: 0;
}
.pageDetailRelatedNav > ul > li.actived {
  font-weight: 700;
  color: #F58423;
  text-decoration: underline;
}
.DT_pageDetailNav {
  display: block;
}
.MB_pageDetailNav {
  display: none;
}
.form-select.formSelectTitle {
  border: none;
  border-bottom: 1px solid #ffffff;
  border-radius: 0;
  filter: brightness(0) invert(1);
  background-color: transparent;
  outline: none;
  font-weight: 700;
  padding-left: 0;
}
.form-select.formSelectRelatedTitle {
  border-top: none;
  border-left: none;
  border-right: none;
  padding-left: 0;
  background-color: transparent;
  outline: none;
  font-weight: 700;
}
.pageDetailContentHeader {
  font-family: 'Athiti';
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pageDetailContentHeader > div span.writer::before {
  content: "|";
  margin: 0 10px;
}
.pageDetailPolicyIntro {
  display: flex;
}
.pageDetailPolicyIntro-img {
  width: 22%;
  margin-right: 50px;
}
.pageDetailPolicyIntro-content {
  flex: 1;
  display: flex;
  justify-content: space-between;
}
.pageDetailPolicyIntro-content > div {
  width: 48%;
}
table.pageDetailPolicyIntro-table {
  border: 0;
  width: 100%;
}
table.pageDetailPolicyIntro-table tr {
  vertical-align: top;
}
table.pageDetailPolicyIntro-table td {
  border-bottom: 1px solid rgba(112, 112, 112, .3);
  padding: 15px 0;
  font-size: 1rem;
  font-weight: 300;
  color: #777777;
}
table.pageDetailPolicyIntro-table td.txtSubject {
  font-weight: 600;
  color: #555555;
  width: 35%;
  padding-right: 10px;
}
table.pageDetailPolicyIntro-table tr:last-child td {
  border-bottom: none;
}
.pageDetailSectionTitle {
  font-family: 'Athiti';
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 5px;
}
.pageDetailPolicyFooter {
  display: flex;
  margin-top: 40px;
  padding-bottom: 10px;
  font-weight: 300;
}
.pageDetailPolicyFooter > div {
  width: 33%;
}
.pageDetailPolicyFooter > div > span {
  display: inline-block;
  font-size: 1.222rem;
  font-weight: 600;
  margin-right: 3%;
}
.pageDetailPolicyImage {
  background-color: #F1F1F1;
  padding: 60px 20px;
}
.pageDetailPolicyImage-img {
  width: 100%;
  max-width: 356px;
  margin: 0 auto;
  box-shadow: 0px 10px 30px #0000004D;
}
.pageDetailContentDownload {
  margin-top: 40px;
  font-size: 1.222rem;
  font-weight: 500;
}
.pageDetailContentDownload > a.pageDetailDownloadIcon {
  display: inline-block;
  margin-left: 30px;
  width: 36px;
  transform: translateY(15px);
}

.tabItem {
  display: none;
}
.tabItem.actived {
  display: block;
}

.relatedContentKeyList {
  display: none;
}
.relatedContentKeyList.actived {
  display: flex;
}

.detailSidebar{
  will-change: min-height;
}
.detailSidebar_inner{
  transform: translate(0, 0); /* For browsers don't support translate3d. */
  transform: translate3d(0, 0, 0);
  will-change: position, transform;
}

.btnShareSocial {
  position: relative;
  z-index: 10;
}
.shareSocialListArea {
  position: absolute;
  left: 0;
  top: 0;
  /*width: 260px;
  height: 60px;*/
  width: 250px;
  height: 50px;
  background-color: rgba(255,255,255,.8);
  padding: 5px;
  visibility: hidden;
  z-index: 50;
  border-radius: 4px;
}
.shareSocialListArea.actived {
  visibility: visible;
}

.btnShareSocialItemList {
  position: relative;
  z-index: 10;
  margin-bottom: 10px;
}

.itemListShareArea {
  text-align: right;
  position: absolute;
  right: 5px;
  z-index: 20;
}

@media (max-width: 1600px) {
}
@media (max-width: 1366px) {
  .pageDetialContentNav {
    width: 350px;
    margin-right: 30px;
    /*padding: 25px 20px 60px;*/
  }
  .detailSidebar_inner {
    padding: 25px 20px 60px;
  }
}
@media (max-width: 1024px) {
  .pageDetialContent {
    display: block;
  }
  .pageDetialContentNav {
    width: 100%;
    margin-right: 0;
    padding: 25px 20px 25px;
    background-size: 40% auto;
    margin-bottom: 20px;
    background-color: #A762F4;
    background-image: url('../../images/ethnic/bg-detail-nav.png');
    background-size: 68% auto;
    background-position: right bottom;
    background-repeat: no-repeat;
  }
  .detailSidebar_inner {
    padding: 25px 20px 25px;
  }
  .DT_pageDetailNav {
    display: none;
  }
  .MB_pageDetailNav {
    display: block;
  }
  .pageDetailPolicyIntro-img {
    width: 22%;
    margin-right: 40px;
  }
  .pageDetailPolicyIntro-content {
    display: block;
  }
  .pageDetailPolicyIntro-content > div {
    width: 100%;
  }
  table.pageDetailPolicyIntro-table tr:last-child td {
    border-bottom: 1px solid rgba(112, 112, 112, .3);
  }
  .pageDetailPolicyIntro-content > div:last-child table.pageDetailPolicyIntro-table tr:last-child td {
    border-bottom: none;
  }
  .pageDetailPolicyFooter {
    display: block;
  }
  .pageDetailPolicyFooter > div {
    width: 100%;
  }
}
@media (max-width: 1023px) {
  
}
@media screen and (max-width: 767px), screen and (max-width:900px) and (orientation:landscape) {
  .pageSiteDetail {
    background-size: 90% auto;
  }
  .pageDetailContentBottomSpace {
    height: 120px;
  }
  .pageDetailTextControl {
    font-size: 1.111rem;
  }
  .pageDetailTextControl p {
    font-size: 1.111rem;
  }
  .pageDetailIntro {
    font-size: 1.222rem;
  }
  .pageDetailRelatedNav {
    margin-top: 30px;
    margin-bottom: 30px;
  }
  .pageDetailRelatedNav > ul {
    text-align: center;
    margin-bottom: 15px;
  }
  .pageDetailRelatedNav > ul > li {
    font-size: 1.222rem;
  }
  .pageDetailContentHeader {
    display: block;
    height: auto;
  }
  .pageDetailContentHeader > div span {
    display: block;
  }
  .pageDetailContentHeader > div span.writer::before {
    display: none;
  }
  .pageDetailPolicyIntro {
    display: block;
  }
  .pageDetailPolicyIntro-img {
    width: 100%;
    margin-right: 0;
    margin-bottom: 20px;
  }
  .pageDetailPolicyImage {
    background-color: #F1F1F1;
    padding: 20px 20px;
  }
}
@media print {
  .pageDetialContentNav, 
  .pageDetailRelatedList {
    display: none;
  }
}

/******** SEARCH ********/
.pageSearchContent {
  padding: 0 0 80px;
}
.pageSearch-searchBoxArea {
  width: 100%;
  max-width: 762px;
  position: relative;
  margin: 0 auto;
}
input.searchBox {
  width: 100%;
  height: 67px;
  font-family: 'Athiti';
  font-size: 2.222rem;
  font-weight: 500;
  color: #555555;
  text-align: center;
  border: none;
  border-bottom: 1px solid #777777;
  border-radius: 0;
  background-color: transparent;
  padding-right: 30px;
}
input.searchBox::placeholder {
  color: #777777;
  opacity: 1; /* Firefox */
  padding-left: 30px;
}
.pageSearch-closeSearch {
  position: absolute;
  display: none;
  width: 23px;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  cursor: pointer;
}
input.searchBox:not(:placeholder-shown) ~ .pageSearch-closeSearch {
  display: block;
}
.pageSerachRecommendArea {
  margin-top: 80px;
  text-align: center;
}
.pageSerachRecommendTitle {
  font-family: 'Athiti';
  font-size: 1.666rem;
  font-weight: 600;
  color: #000000;
}
.pageSerachRecommendList {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  font-size: 1.111rem;
  font-weight: 300;
  color: #000000;
}
.pageSerachRecommendList > div {
  width: 26%;
}
.pageSerachCategoryTitle {
  font-family: 'Athiti';
  font-size: 1.444rem;
  font-weight: 600;
  color: #8F4CB2;
}
ul.pageSerachCategoryList {
  margin-top: 20px;
  margin-bottom: 0;
  padding-left: 0;
  list-style-type: none;
}
ul.pageSerachCategoryList > li {
  margin-bottom: 20px;
  cursor: pointer;
}
ul.pageSerachCategoryList > li:hover {
  text-decoration: underline;
}
.searchPageRecommendArea {
  display: none;
}
.searchPageRecommendArea.actived {
  display: block;
}
.searchPageResultArea {
  display: none;
  text-align: left;
}
.searchPageResultArea.actived {
  display: block;
}

@media screen and (max-width: 767px), screen and (max-width:900px) and (orientation:landscape) {
  .pageSearchContent {
    padding: 0 0 40px;
  }
  .pageSerachRecommendArea {
    margin-top: 50px;
    text-align: center;
  }
  .pageSerachRecommendList {
    display: block;
    margin-top: 25px;
  }
  .pageSerachRecommendList > div {
    width: 100%;
    margin-bottom: 25px;
  }
  ul.pageSerachCategoryList {
    margin-top: 15px;
  }
  ul.pageSerachCategoryList > li {
    margin-bottom: 15px;
    cursor: pointer;
  }
}

/******** REGISTER ********/
.pageSiteRegister {
  background-color: #ffffff;
  background-image: url('../../images/ethnic/bg-page-detail.png');
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 50% auto;
}
.registerPage {
  width: 100%;
}
.registerPageInner {
  width: 100%;
  display: block;
}
.registerPageInnerLeft {
  position: relative;
  width: 100%;
  max-width: 650px;
  background-color: #29CFBF;
  border: 15px solid #A762F4;
  padding: 100px 0 100px;
}
.registerPageInnerRight {
  flex: 1;
  padding: 150px 20px 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.registerPageLeftBg {
  position: absolute;
  width: 98.9%;
  right: 0;
  bottom: -10px;
  z-index: 1;
}
.registerPageTitle {
  position: relative;
  display: inline-block;
  background-color: #F58423;
  font-family: 'Athiti', sans-serif;
  font-size: 3.8rem;
  font-weight: 600;
  padding: 10px;
  color: #ffffff;
  z-index: 2;
}
.registerPageSubTitle {
  position: relative;
  width: 100%;
  font-family: 'Athiti', sans-serif;
  font-size: 2.222rem;
  font-weight: 600;
  margin-top: 10px;
  margin-left: 15px;
  color: #ffffff;
  z-index: 2;
}
.registerFromContent {
  width: 100%;
  max-width: 762px;
}
.registerFormTitle {
  font-family: 'Athiti', sans-serif;
  font-size: 2.222rem;
  font-weight: 600;
  color: #000000;
}
.registerForm {
  margin-top: 30px;
}
.registerFormSection {
  padding-bottom: 15px;
  margin-bottom: 15px;
}
.registerForm .confirmPaymentSubmit > a {
  display: inline-block;
  margin-right: 30px;
}

.registerFormSubmitArea {
  margin-top: 40px;
}
.registerFormSubmitArea > a {
  display: inline-block;
  margin-right: 25px;
}

@media (max-width: 1600px) {
  .registerPageInnerLeft {
    max-width: 600px;
    border: 15px solid #A762F4;
    padding: 100px 0 100px;
  }
  .registerPageInnerRight {
    flex: 1;
    padding: 150px 20px 100px;
  }
  .registerPageLeftBg {
    width: 98.9%;
    right: 0;
    bottom: -10px;
  }
  .registerPageTitle {
    font-size: 3.333rem;
    padding: 10px;
  }
  .registerPageSubTitle {
    font-size: 2.111rem;
    margin-top: 10px;
    margin-left: 15px;
  }
  .registerFromContent {
    max-width: 762px;
  }
  .registerFormTitle {
    font-size: 2.111rem;
  }
  .registerForm {
    margin-top: 30px;
  }
  .registerFormSection {
    padding-bottom: 15px;
    margin-bottom: 15px;
  }
  .registerForm .confirmPaymentSubmit > a {
    margin-right: 30px;
  }
}
@media (max-width: 1366px) {
  .registerPageInnerLeft {
    max-width: 500px;
    border: 10px solid #A762F4;
    padding: 80px 0 80px;
  }
  .registerPageInnerRight {
    flex: 1;
    padding: 150px 45px 80px;
  }
  .registerPageLeftBg {
    width: 98.9%;
    right: 0;
    bottom: -8px;
  }
  .registerPageTitle {
    font-size: 3rem;
    padding: 10px;
  }
  .registerPageSubTitle {
    font-size: 2rem;
    margin-top: 10px;
    margin-left: 15px;
  }
  .registerFromContent {
    max-width: 762px;
  }
  .registerFormTitle {
    font-size: 2rem;
  }
  .registerForm {
    margin-top: 30px;
  }
  .registerFormSection {
    padding-bottom: 15px;
    margin-bottom: 15px;
  }
  .registerForm .confirmPaymentSubmit > a {
    margin-right: 20px;
  }
}
@media screen and (max-width: 767px), screen and (max-width:900px) and (orientation:landscape) {
  .pageSiteRegister {
    background-size: 90% auto;
  }
  .registerPageInner {
    display: block;
  }
  .registerPageInnerLeft {
    max-width: unset;
    height: 314px;
    border: 10px solid #8f4cb3;
    padding: 80px 0 80px;
  }
  .registerPageInnerRight {
    flex: 1;
    padding: 150px 20px 100px;
  }
  .registerPageLeftBg {
    width: 100%;
    right: 0;
    bottom: -8px;
  }
  .registerPageTitle {
    font-size: 2.333rem;
    padding: 8px;
  }
  .registerPageSubTitle {
    font-size: 1.222rem;
    margin-top: 10px;
    margin-left: 10px;
  }
  .registerFromContent {
    max-width: 762px;
  }
  .registerFormTitle {
    font-size: 1.333rem;
  }
  .registerForm {
    margin-top: 30px;
  }
  .registerFormSection {
    padding-bottom: 15px;
    margin-bottom: 15px;
  }
  .registerFormMobileSubmit {
    display: flex;
  }
  .registerForm .confirmPaymentSubmit > a {
    display: block;
    flex: 1;
    margin-right: 10px;
  }
  .registerForm .confirmPaymentSubmit > a:last-child {
    margin-right: 0;
  }
  .registerFormMobileSubmit .btn-theme {
    height: 60px;
  }
}

/******** ACCOUNT *********/
.accountPage {
  width: 100%;
}
.accountPageInner {
  width: 100%;
  display: flex;
}
.accountPageInnerLeft {
  width: 100%;
  max-width: 650px;
  background-color: #F5F5F7;
  padding: 100px 0 100px;
  display: flex;
  justify-content: center;
  background-image: url('../../images/account/bg-nav.png');
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: right bottom;
}
.accountPageInnerRight {
  flex: 1;
  padding: 150px 20px 100px;
  display: flex;
  justify-content: center;
}
.accountPageNavBox {
  position: relative;
  width: 100%;
  max-width: 400px;
}
.accountPageNavBoxHeader {
  width: 100%;
  display: flex;
  padding-bottom: 50px;
  border-bottom: 1px solid rgba(112, 112, 112, .25);
}
.accountPageNavBoxHeaderLeft {
}
.accountPageNavBoxHeaderRight {
  flex: 1;
  padding: 10px 0 10px 25px;
  font-family: 'Athiti', sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 600;
  color: #000000;
}
.accountPagePhotoCover {
  width: 138px;
  height: 138px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  border: 10px solid #29CFBF;
}
.accountPagePhotoImg {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.accountPagePhotoEditIcon {
  width: 25px;
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%,-50%);
  cursor: pointer;
}
.accountPagePhotoCover input[type=file] {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.accountPageNavBox-name {
  font-size: 24px;
  line-height: 28px;
  margin-bottom: 10px;
}
.accountPageNavBox-score {
  font-size: 24px;
  line-height: 26px;
  color: #F58423
}
.accountPageNavBoxBody {
  padding: 50px 0 20px;
}
.accountPageNavList > ul > li {
  display: block;
  position: relative;
  padding-left: 34px;
  margin-bottom: 25px;
  font-family: 'Athiti', sans-serif;
  font-size: 20px;
  line-height: 30px;
  font-weight: 600;
  color: #000000;
  transition: color .2s ease-in-out;
}
.accountPageNavList > ul > li:hover,
.accountPageNavList > ul > li.actived {
  color: #8F4CB2;
}
.accountPageNavList > ul > li > a {
  display: flex;
  align-items: center;
}
.accountPageNavList > ul > li > a > span {
  position: absolute;
  left: 0;
}
.accountIconTicket {
  width: 26.67px;
}
.accoutOpenNavTablet {
  display: none;
  font-family: 'Athiti', sans-serif;
  font-size: 22px;
  line-height: 30px;
  font-weight: 600;
  color: #000000;
}
.accountFormContent {
  width: 100%;
  max-width: 762px;
}
.accountFormPhoto {
  padding-bottom: 10px;
}
.accountFormPhotoFileName {
  margin-top: 10px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 300;
}

.accountMobileNavArea {
  position: fixed;
  width: 100%;
  height: calc(100vh - 80px);
  top: 80px;
  left: -100%;
  transition: all .4s ease-in-out;
  z-index: 1160;
  background-color: #F5F5F7;
}
.accountMobileNavArea.actived {
  left: 0;
}
.accountMobileNavAreaInner {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 650px;
  padding: 25px 45px 25px;
  display: flex;
  justify-content: center;
  background-image: url('../../images/account/bg-nav-mb.png');
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: right bottom;
}
.accountMobileNavAreaClose {
  position: absolute;
  top: 25px;
  right: 25px;
  z-index: 20;
}
.accountPageMobileTop {
  display: none;
  width: 100%;
  height: 70px;
  background-color: #A762F4;
  font-family: 'Athiti', sans-serif;
  font-size: 24px;
  line-height: 30px;
  font-weight: 600;
  color: #F5F5F7;
}
.accountPageMobileTopInner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.accountPageMobileTopBack {
  position: absolute;
  width: 50px;
  height: 100%;
  top: 0;
  left: 0;
}
.accountPageMobileTopBackInner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.accountPageMobileTopBackInner > div {
  width: 12px;
}

.accountPageExchangeBtn {
  margin-top: 30px;
}

@media (max-width: 1600px) {
  .accountPageInnerLeft {
    max-width: 600px;
    padding: 100px 0 100px;
  }
  .accountPageInnerRight {
    padding: 150px 20px 100px;
  }
  .accountPageNavBox {
    max-width: 400px;
  }
  .accountPageNavBoxHeader {
    padding-bottom: 50px;
  }
  .accountPageNavBoxHeaderRight {
    padding: 10px 0 10px 25px;
    font-size: 20px;
    line-height: 24px;
  }
  .accountPagePhotoCover {
    width: 138px;
    height: 138px;
    border: 10px solid #29CFBF;
  }
  .accountPagePhotoEditIcon {
    width: 25px;
    top: 80%;
  }
  .accountPageNavBox-name {
    font-size: 24px;
    line-height: 28px;
    margin-bottom: 10px;
  }
  .accountPageNavBox-score {
    font-size: 24px;
    line-height: 26px;
  }
  .accountPageNavBoxBody {
    padding: 50px 0 20px;
  }
  .accountPageNavList > ul > li {
    padding-left: 34px;
    margin-bottom: 25px;
    font-size: 20px;
    line-height: 30px;
  }
  .accountIconTicket {
    width: 26.67px;
  }
  .accountFormContent {
    max-width: 762px;
  }
  .accountFormPhoto {
    padding-bottom: 10px;
  }
  .accountFormPhotoFileName {
    margin-top: 10px;
    font-size: 18px;
    line-height: 24px;
  }
}
@media (max-width: 1366px) {
  .accountPageInnerLeft {
    max-width: 500px;
    padding: 80px 0 80px;
  }
  .accountPageInnerRight {
    padding: 150px 45px 80px;
  }
  .accountPageNavBox {
    max-width: 400px;
  }
  .accountPageNavBoxHeader {
    padding-bottom: 50px;
  }
  .accountPageNavBoxHeaderRight {
    padding: 10px 0 10px 25px;
    font-size: 20px;
    line-height: 24px;
  }
  .accountPagePhotoCover {
    width: 138px;
    height: 138px;
    border: 10px solid #29CFBF;
  }
  .accountPagePhotoEditIcon {
    width: 25px;
    top: 80%;
  }
  .accountPageNavBox-name {
    font-size: 24px;
    line-height: 28px;
    margin-bottom: 10px;
  }
  .accountPageNavBox-score {
    font-size: 24px;
    line-height: 26px;
  }
  .accountPageNavBoxBody {
    padding: 50px 0 20px;
  }
  .accountPageNavList > ul > li {
    padding-left: 34px;
    margin-bottom: 25px;
    font-size: 20px;
    line-height: 30px;
  }
  .accountIconTicket {
    width: 26.67px;
  }
  .accountFormContent {
    max-width: 762px;
  }
  .accountFormPhoto {
    padding-bottom: 10px;
  }
  .accountFormPhotoFileName {
    margin-top: 10px;
    font-size: 18px;
    line-height: 24px;
  }
}
@media screen and (max-width: 767px), screen and (max-width:900px) and (orientation:landscape) {
  .accountPageInnerLeft {
    display: none;
  }
  .accountPageInnerRight {
    padding: 150px 20px 100px;
  }
  .accountPageNavBox {
    max-width: 400px;
  }
  .accountPageNavBoxHeader {
    padding-bottom: 25px;
  }
  .accountPageNavBoxHeaderRight {
    padding: 10px 0 10px 20px;
    font-size: 18px;
    line-height: 22px;
  }
  .accountPageNavBox .accountPagePhotoCover {
    width: 100px;
    height: 100px;
    border: 7px solid #29CFBF;
  }
  .accountPagePhotoEditIcon {
    width: 25px;
    top: 80%;
  }
  .accountPageNavBox-name {
    font-size: 22px;
    line-height: 26px;
    margin-bottom: 10px;
  }
  .accountPageNavBox-score {
    font-size: 22px;
    line-height: 26px;
  }
  .accountPageNavBoxBody {
    padding: 50px 0 20px;
  }
  .accountPageNavList > ul > li {
    padding-left: 34px;
    margin-bottom: 25px;
    font-size: 22px;
    line-height: 30px;
  }
  .accountIconTicket {
    width: 26.67px;
  }
  .accountFormContent {
    max-width: 762px;
  }
  .accountFormPhoto {
    padding-bottom: 10px;
  }
  .accountFormPhotoFileName {
    margin-top: 10px;
    font-size: 18px;
    line-height: 24px;
  }
  .accountPageMobileTop {
    display: block;
  }
}

/****** AUTO COMPLETE ******/
.autocomplete {
  /*the container must be positioned relative:*/
  position: relative;
  display: inline-block;
  width: 100%;
}
.autocomplete-items {
  position: absolute;
  border: none;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 5px;
  right: 0;
  width: calc(100% - 10px);
  height: 300px;
  overflow: auto;
  font-family: 'Pridi', serif;
  font-size: 18px;
  line-height: 22px;
}
.autocomplete-items div {
  padding: 5px 15px;
  cursor: pointer;
  background-color: #ffffff;
  color: #777777;
  border-bottom: none;
}
.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #A762F4;
  color: #ffffff;
}
.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: #A762F4;
  color: #ffffff;
}

@media screen and (max-width: 767px), screen and (max-width:900px) and (orientation:landscape) {
  .autocomplete-items {
    height: 200px;
  }
}

/******* DETAIL FREE ********/
.detailFreeContent {
  width: 100%;
  padding: 120px 0 200px;
}
.detailFreeContentInner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.detailFreeContentLeft {
  width: 100%;
  max-width: 465px;
}
.detailFreeContentRight {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  padding-left: 50px;
}
.detailFreeFormBox {
  width: 100%;
  max-width: 760px;
}
.detailFreeFormBoxTitle {
  margin: 20px 0 20px;
}
.detailFreeFormSection {
  margin-bottom: 20px;
}
.detailFreeFormSection-title {
  font-family: 'Athiti', sans-serif;
  font-size: 26px;
  line-height: 30px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #000000;
}

@media (max-width: 1600px) {
  .detailFreeContent {
    padding: 100px 0 180px;
  }
  .detailFreeContentInner {
    max-width: 1440px;
  }
  .detailFreeContentLeft {
    max-width: 465px;
  }
  .detailFreeContentRight {
    padding-left: 50px;
  }
  .detailFreeFormBox {
    max-width: 760px;
  }
  .detailFreeFormBoxTitle {
    margin: 20px 0 20px;
  }
  .detailFreeFormSection {
    margin-bottom: 20px;
  }
  .detailFreeFormSection-title {
    font-size: 24px;
    line-height: 28px;
    margin-bottom: 20px;
  }
}
@media (max-width: 1366px) {
  .detailFreeContent {
    padding: 80px 0 150px;
  }
  .detailFreeContentInner {
    max-width: 1440px;
  }
  .detailFreeContentLeft {
    max-width: 400px;
  }
  .detailFreeContentRight {
    padding-left: 50px;
  }
  .detailFreeFormBox {
    max-width: 760px;
  }
  .detailFreeFormBoxTitle {
    margin: 20px 0 20px;
  }
  .detailFreeFormSection {
    margin-bottom: 20px;
  }
  .detailFreeFormSection-title {
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 20px;
  }
}
@media (max-width: 767px) {
  .detailFreeContent {
    padding: 20px 0 50px;
  }
  .detailFreeContentInner {
    display: block;
  }
  .detailFreeContentLeft {
    max-width: 465px;
  }
  .detailFreeContentLeftImg {
    margin-top: 30px;
  }
  .detailFreeContentRight {
    padding-left: 0;
    margin-top: 50px;
  }
  .detailFreeFormBox {
    max-width: 760px;
  }
  .detailFreeFormBoxTitle {
    margin: 20px 0 20px;
  }
  .detailFreeFormSection {
    margin-bottom: 20px;
  }
  .detailFreeFormSection-title {
    font-size: 24px;
    line-height: 28px;
    margin-bottom: 20px;
  }
  .pageFreeDetail .confirmPaymentSubmit {
    text-align: center;
  }
}

/******* QUICK CART *********/
.quickCartArea {
  position: fixed;
  width: 100%;
  max-width: 676px;
  height: 100vh;
  z-index: 1160;
  top: 0;
  right: 0;
  background-color: #ffffff;
  display: block;
  transform: translateX(100%);
  transition: all .4s ease-in-out;
}
.quickCartArea.actived {
  transform: translateX(0);
}
.quickCartContainer {
  width: 100%;
  height: 100%;
}
.quickCartContainerHeader {
  width: 100%;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 60px;
  background-color: #F7F7F7;
}
.quickCartListCover {
  width: 100%;
  overflow-y: auto;
  height: calc(100% - 130px);
  padding-bottom: 50px;
}
.quickCartList {
}
/* width */
.quickCartListCover::-webkit-scrollbar {
  width: 8px;
}
/* Track */
.quickCartListCover::-webkit-scrollbar-track {
  background: #F5F5F7;
}
/* Handle */
.quickCartListCover::-webkit-scrollbar-thumb {
  background: #29CFBF;
}
/* Handle on hover */
.quickCartListCover::-webkit-scrollbar-thumb:hover {
  background: #29CFBF;
}
.quickCartContainerHeader-title {
  font-family: 'Athiti', sans-serif;
  font-size: 40px;
  line-height: 44px;
  font-weight: 600;
  color: #000000;
}
.quickCartContainerHeader-close {
  width: 42px;
  height: 42px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  cursor: pointer;
}
.quickCartContainerHeader-closeInner {
  position: relative;
  width: 100%;
  height: 100%;
}
.quickCartContainerHeader-closeInner span {
  width: 100%;
  height: 2px;
  background-color: #777777;
  position: absolute;
}
.quickCartContainerHeader-closeInner span:nth-child(1) {
  top: 50%;
  transform-origin: center;
  transform: rotate(45deg);
}
.quickCartContainerHeader-closeInner span:nth-child(2) {
  top: 50%;
  transform-origin: center;
  transform: rotate(-45deg);
}
.quickCartItem {
  width: 100%;
  border-bottom: 1px solid rgba(112,112,112,.25);
  padding: 60px;
  display: flex;
  font-family: 'Athiti', sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 600;
}
.quickCartItem-left {
  width: 150px;
}
.quickCartItem-center {
  flex: 1;
  padding: 0 30px;
}
.quickCartItem-right {
  width: 100px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
}
.quickCartItemCover {
  position: relative;
  width: 100%;
}
.quickCartItemCoverControlSize {
  width: 100%;
  position: relative;
  z-index: 2;
}
.quickCartItemCoverDefault {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quickCartCoverAutoBg {
  width: 58.6%;
}
.quickCartItem-title {
  font-size: 24px;
  line-height: 28px;
  color: #000000;
  margin-bottom: 10px;
}
.quickCartItem-price {
  font-weight: 700;
  color: #F58423;
  font-size: 30px;
  line-height: 34px;
}
.quickCartItem-remove {
  cursor: pointer;
}
.quickCartBottom {
  margin-top: 40px;
  padding: 0 60px;
  display: none;
}
.quickCartBottom.actived {
  display: flex;
}
.quickCartBottom > div {
  margin-right: 20px;
}

.quickCartMobile {
  display: none;
}
.quickCartMobileBottom,
.quickCartMobileBottom.actived {
  display: none;
}

@media (max-width: 1600px) {
  .quickCartArea {
    max-width: 656px;
  }
  .quickCartContainerHeader {
    height: 90px;
    padding: 0 50px;
  }
  .quickCartListCover {
    height: calc(100% - 110px);
    padding-bottom: 50px;
  }
  .quickCartContainerHeader-title {
    font-size: 32px;
    line-height: 36px;
  }
  .quickCartContainerHeader-close {
    width: 32px;
    height: 32px;
  }
  .quickCartItem {
    padding: 50px;
    font-size: 18px;
    line-height: 22px;
  }
  .quickCartItem-left {
    width: 150px;
  }
  .quickCartItem-center {
    padding: 0 30px;
  }
  .quickCartItem-right {
    width: 100px;
  }
  .quickCartCoverAutoBg {
    width: 58.6%;
  }
  .quickCartItem-title {
    font-size: 22px;
    line-height: 26px;
    margin-bottom: 10px;
  }
  .quickCartItem-price {
    font-size: 28px;
    line-height: 32px;
  }
  .quickCartBottom {
    margin-top: 40px;
    padding: 0 50px;
  }
  .quickCartBottom > div {
    margin-right: 20p;
  }
}
@media (max-width: 1366px) {
  .quickCartArea {
    max-width: 636px;
  }
  .quickCartContainerHeader {
    height: 90px;
    padding: 0 40px;
  }
  .quickCartListCover {
    height: calc(100% - 110px);
    padding-bottom: 50px;
  }
  .quickCartContainerHeader-title {
    font-size: 32px;
    line-height: 36px;
  }
  .quickCartContainerHeader-close {
    width: 32px;
    height: 32px;
  }
  .quickCartItem {
    padding: 40px;
    font-size: 18px;
    line-height: 22px;
  }
  .quickCartItem-left {
    width: 150px;
  }
  .quickCartItem-center {
    padding: 0 30px;
  }
  .quickCartItem-right {
    width: 100px;
  }
  .quickCartCoverAutoBg {
    width: 58.6%;
  }
  .quickCartItem-title {
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 10px;
  }
  .quickCartItem-price {
    font-size: 26px;
    line-height: 30px;
  }
  .quickCartBottom {
    margin-top: 30px;
    padding: 0 40px;
  }
  .quickCartBottom > div {
    margin-right: 20p;
  }
}
@media (max-width: 767px) {
  .quickCartArea {
    max-width: unset;
  }
  .quickCartContainerHeader {
    height: 80px;
    padding: 0 20px;
  }
  .quickCartListCover {
    height: calc(100% - 140px); /*80 + 60*/
    padding-bottom: 50px;
  }
  .quickCartContainerHeader-title {
    font-size: 24px;
    line-height: 28px;
  }
  .quickCartContainerHeader-close {
    width: 28px;
    height: 28px;
  }
  .quickCartItem {
    padding: 20px;
    font-size: 18px;
    line-height: 22px;
  }
  .quickCartItem-left {
    width: 150px;
  }
  .quickCartItem-center {
    padding: 0 0 0 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .quickCartItem-right {
    display: none;
  }
  .quickCartCoverAutoBg {
    width: 58.6%;
  }
  .quickCartItem-title {
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 0;
  }
  .quickCartItem-price {
    font-size: 24px;
    line-height: 28px;
  }
  .quickCartBottom,
  .quickCartBottom.actived {
    display: none;
  }

  .quickCartMobile {
    display: block;
  }
  .quickCartMobileBottom {
    /*position: absolute;*/
    position: sticky;
    position: -webkit-sticky;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    display: none;
    z-index: 20;
  }
  .quickCartMobileBottom.actived {
    display: flex;
  }
  .quickCartMobileBottom > a {
    display: block;
    width: 50%;
    height: 100%;
  }
}

/******* LOGIN BOX *********/
.loginBoxArea {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 1160;
  width: 100%;
  /*max-width: 1226px;
  height: 550px;*/
  max-width: 1060px;
  height: 700px;
  display: none;
  border: 10px solid #8f4cb3;
}
.loginBoxArea.actived {
  display: block;
}
.loginBoxAreaInner {
  display: flex;
  height: 100%;
}
.loginBoxAreaLeft {
  width: auto;
  height: 100%;
  position: relative;
  /*border: 13px solid #8f4cb3;*/
}
.loginBoxAreaLeft-bg {
  width: auto;
  height: 100%;
  display: flex;
  align-items: flex-end;
  background-color: #a762f3;
}
.loginBoxAreaLeft-logo {
  position: absolute;
  top: 0;
  left: 2.7%;
  /*height: 17.6%;*/
  width: 16.18%;
  z-index: 5;
}
.loginBoxAreaLeft-title {
  position: absolute;
  top: 36%;
  left: 0;
  font-family: 'Athiti', sans-serif;
  font-size: 60px;
  line-height: 70px;
  font-weight: 600;
  color: #ffffff;
  background-color: #F58423;
  padding: 10px;
}
.loginBoxAreaLeft-detail {
  position: absolute;
  top: 55%;
  left: 15px;
  font-family: 'Athiti', sans-serif;
  font-size: 30px;
  line-height: 38px;
  font-weight: 600;
  color: #ffffff;
}
.loginBoxAreaRight {
  flex: 1;
  /*border: 13px solid #8f4cb3;*/
  border-left: none;
  /*background-color: #F5F5F7;*/
  background-color: #ffffff;
  padding: 20px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loginBoxAreaRight-title {
  font-size: 1.111rem;
  font-weight: 300;
  color: #555555;
}
.loginBoxAreaRightForm {
  width: 100%;
  margin: 25px auto 0;
}
.loginBoxAreaRightFormItem {
  margin-bottom: 20px;
}
.loginBoxInput,
.loginBoxSubmit {
  width: 100%;
  padding: 15px 15px;
  background-color: transparent;
  border: 1px solid #707070;
  border-radius: 0;
  font-size: 1rem;
  font-weight: 300;
  color: #555555;
  outline: none;
  display: block;
}
.loginBoxInput::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #777777;
  opacity: 1; /* Firefox */
}
.loginBoxInput:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #777777;
}
.loginBoxInput::-ms-input-placeholder { /* Microsoft Edge */
  color: #777777;
}

.loginBoxInput.txtError {
  border-color: #ff0000;
}

.loginBoxSubmit {
  font-family: 'Athiti';
  font-size: 1.333rem;
  font-weight: 600;
  color: #ffffff;
  background-color: #29CFBF;
  border-color: #29CFBF;
  transition: all .2s ease-in-out;
  text-align: center;
}
.loginBoxSubmit:hover {
  background-color: #8f4cb3;
  border-color: #8f4cb3;
  color: #ffffff;
}
.loginBoxAreaRightFormLink {
  padding-top: 25px;
  display: flex;
  justify-content: center;
}
.loginBoxAreaRightFormLink > a {
  display: block;
  font-size: 1.111rem;
  font-weight: 300;
  transition: color .2s ease-in-out;
  margin-right: 15px;
}
.loginBoxAreaRightFormLink > a:hover {
  color: #29CFBF;
}
.loginBoxAreaRightFormLink > a::after {
  content: "|";
  padding-left: 15px;
  color: rgba(112,112,112,.5);
}
.loginBoxAreaRightFormLink > a:last-child {
  margin-right: 0;
}
.loginBoxAreaRightFormLink > a:last-child:after {
  display: none;
}
.loginBoxSocial {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid rgba(112,112,112,.5);
}
.loginBoxSocial > a {
  width: 50%;
  height: 60px;
  margin: 0 10px;
  border: 1px solid rgba(85,85,85,.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.loginBoxSocial > a:first-child {
  margin-left: 0;
}
.loginBoxSocial > a:last-child {
  margin-right: 0;
}
.loginBoxSocial > a > img {
  width: auto;
  height: 100%;
  max-height: 29px;
}
.loginBoxAreaRightClose {
  position: absolute;
  top: 30px;
  right: 30px;
}

.loginBoxAreaRightItem {
  display: none;
}
.loginBoxAreaRightItem.actived {
  display: block;
}
.loginBoxAreaRight-forgot-title {
  font-family: 'Athiti', sans-serif;
  font-size: 30px;
  line-height: 34px;
  font-weight: 600;
  color: #000000;
  margin-bottom: 10px;
  text-align: center;
}

.loginBoxAreaRight-forgot-box {
  display: none;
}
.loginBoxAreaRight-forgot-box.actived {
  display: block;
}
.loginBoxAreaRight-forgot-success {
  display: none;
  padding: 50px 0 50px;
  font-size: 20px;
  line-height: 30px;
  font-weight: 300;
  color: #F58423;
}
.loginBoxAreaRight-forgot-success.actived {
  display: block;
}

@media (max-width: 1600px) {
  .loginBoxArea {
    max-width: 1060px;
    height: 600px;
  }
  .loginBoxAreaLeft {
    /*border: 13px solid #8f4cb3;*/
  }
  .loginBoxAreaLeft-logo {
    left: 2.7%;
    /*height: 17.6%;*/
    width: 16.18%;
  }
  .loginBoxAreaLeft-title {
    top: 36%;
    font-size: 60px;
    line-height: 70px;
    padding: 10px;
  }
  .loginBoxAreaLeft-detail {
    top: 55%;
    left: 15px;
    font-size: 30px;
    line-height: 38px;
  }
  .loginBoxAreaRight {
    /*border: 13px solid #8f4cb3;*/
    border-left: none;
    padding: 20px 40px;
  }
  .loginBoxAreaRightForm {
    margin: 25px auto 0;
  }
  .loginBoxAreaRightFormItem {
    margin-bottom: 20px;
  }
  
  .loginBoxAreaRightFormLink {
    padding-top: 20px;
  }
  .loginBoxAreaRightClose {
    top: 15px;
    right: 15px;
  }
}
@media (max-width: 1366px) {
  .loginBoxArea {
    max-width: 1060px;
    height: 500px;
  }
  .loginBoxAreaLeft {
    /*border: 10px solid #8f4cb3;*/
  }
  .loginBoxAreaLeft-logo {
    left: 2.7%;
    /*height: 17.6%;*/
    width: 16.18%;
  }
  .loginBoxAreaLeft-title {
    top: 36%;
    font-size: 52px;
    line-height: 62px;
    padding: 8px;
  }
  .loginBoxAreaLeft-detail {
    top: 55%;
    left: 15px;
    font-size: 26px;
    line-height: 36px;
  }
  .loginBoxAreaRight {
    /*border: 10px solid #8f4cb3;*/
    border-left: none;
    padding: 20px 40px;
  }
  .loginBoxAreaRightForm {
    margin: 25px auto 0;
  }
  .loginBoxAreaRightFormItem {
    margin-bottom: 20px;
  }
  
  .loginBoxAreaRightFormLink {
    padding-top: 20px;
  }
  .loginBoxAreaRightClose {
    top: 15px;
    right: 15px;
  }
}
@media (max-width: 767px) {
  .loginBoxArea {
    background-color: #ffffff;
    max-width: 1114px;
    height: 100vh;
    top: calc(100% + 100px);
    left: 0;
    transform: translate(0,0);
    overflow-y: auto;
    transition: top .4s ease-in-out;
    display: block;
  }
  .loginBoxArea.actived {
    top: 0;
  }
  .loginBoxAreaInner {
    display: block;
  }
  .loginBoxAreaLeft {
    width: 100%;
    height: 250px;
  }
  .loginBoxAreaLeft-bg {
    width: 100%;
    height: 100%;
    overflow: hidden;
    align-items: flex-start;
  }
  .loginBoxAreaLeft-bg .img-responsive-height {
    width: 100%;
    height: auto;
    max-height: unset;
  }
  .loginBoxAreaLeft-logo {
    left: 2.7%;
    /*height: 17.6%;*/
    width: 16.18%;
  }
  .loginBoxAreaLeft-title {
    top: 36%;
    font-size: 42px;
    line-height: 52px;
    padding: 8px;
  }
  .loginBoxAreaLeft-detail {
    top: 65%;
    left: 10px;
    font-size: 22px;
    line-height: 32px;
  }
  .loginBoxAreaRight {
    background-color: #ffffff;
    border: none;
    padding: 25px 30px 120px;
  }
  .loginBoxAreaRightForm {
    margin: 25px auto 0;
  }
  .loginBoxAreaRightFormItem {
    margin-bottom: 20px;
  }
  
  .loginBoxAreaRightFormLink {
    padding-top: 20px;
  }
  .loginBoxSocial {
    display: block;
    margin-top: 30px;
    padding-top: 30px;
  }
  .loginBoxSocial > a {
    width: 100%;
    margin: 0 auto 15px;
  }
  .loginBoxSocial > a:first-child {
    margin-left: auto;
  }
  .loginBoxSocial > a:last-child {
    margin-right: auto;
  }
  .loginBoxAreaRightClose {
    top: 15px;
    right: 15px;
  }
  .loginBoxAreaRightClose .quickCartContainerHeader-close {
    width: 39px;
    height: 39px;
  }
  .loginBoxAreaRightClose .quickCartContainerHeader-closeInner span {
    background-color: #ffffff;
  }
}

/******* TERMS BOX *********/
.termsBoxArea {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 1010;
  width: 100%;
  max-width: 1000px;
  height: 600px;
  display: none;
  background-color: #ffffff;
}
.termsBoxArea.actived {
  display: block;
}
.termsBoxAreaInner {
  display: flex;
  height: 100%;
  overflow-y: auto;
  padding: 40px;
  background-image: url('../../images/bg-detail-light.png');
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: top left;
}
/* width */
.termsBoxAreaInner::-webkit-scrollbar {
  width: 8px;
}
/* Track */
.termsBoxAreaInner::-webkit-scrollbar-track {
  background: #F5F5F7;
}
/* Handle */
.termsBoxAreaInner::-webkit-scrollbar-thumb {
  background: #29CFBF;
}
/* Handle on hover */
.termsBoxAreaInner::-webkit-scrollbar-thumb:hover {
  background: #29CFBF;
}
.termsBoxClose {
  position: absolute;
  top: 30px;
  right: 30px;
}
.termsBoxAcceptDiv {
  padding-bottom: 40px;
}

@media (max-width: 1600px) {
  .termsBoxArea {
    max-width: 1000px;
    height: 600px;
  }
}
@media (max-width: 1366px) {
  .termsBoxArea {
    max-width: 800px;
    height: 600px;
  }
}
@media screen and (max-width: 767px), screen and (max-width:900px) and (orientation:landscape) {
  .termsBoxArea {
    background-color: #ffffff;
    max-width: 1114px;
    height: 100vh;
    top: calc(100% + 100px);
    left: 0;
    transform: translate(0,0);
    overflow-y: auto;
    transition: top .4s ease-in-out;
    display: block;
  }
  .termsBoxArea.actived {
    top: 0;
  }
  .termsBoxAreaInner {
    display: block;
  }
  .termsBoxAcceptDiv {
    margin-top: 40px;
    padding-bottom: 120px;
  }
  .termsBoxAcceptDiv .btn-theme {
    padding: 14px 15px;
  }
}

/***** ETHNIC GROUP ACCORDION *****/
.accordionEthnicGroup .accordion-item {
  border: none;
}
.accordionEthnicGroup .accordion-header {
  display: none;
}
.accordionEthnicGroup .accordion-body {
  padding: 0;
}

@media (max-width: 1024px) {
  .pageDetialContentNav {
    display: none;
  }
  .accordionEthnicGroup .accordion-item {
    border-bottom: 1px solid rgba(0,0,0,.125);
  }
  .accordionEthnicGroup .accordion-header {
    display: block;
    background-color: #A762F4;
    color: #ffffff;
  }
  .accordionEthnicGroup .accordion-button:not(.collapsed) {
    color: #ffffff;
    background-color: #A762F4;
    box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);
  }
  .accordionEthnicGroup .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    filter: brightness(0) invert(1);
  }
  .accordionEthnicGroup .accordion-body {
    padding: 20px 0;
  }
}