/* CSS Document */

@import url("fonts.css");



/*  
https://xd.adobe.com/view/05906fcd-eba5-4d4c-a448-33ea5aff7c5b-50c3/
https://xd.adobe.com/view/b6f1f37f-90c8-4482-b533-703733ef8f7a-e3a2/
*/


/* 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; }



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

html {
  /* box-sizing: border-box; */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* overflow-x: hidden;  */
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


:root{
  --white: #fff;
  --black: #000;
  --default:#333; 
  --primary: #E7A339;
  --gray: #ddd;
  --graylight: #F2F0ED;
  --whitelight: #F5F5F5;

  --txt-menu: 16px;

  --txt-title: 50px;
  --text-h1: 2em;
  --text-h2: 1.6em;
  --text-h3: 1.4em;
  --text-p: 18px;
}
@media (max-width: 1599px) {
  :root {
    --txt-title: 40px;
  }
}
@media (max-width: 767px) {
  :root {
    --txt-title: 30px;
    --text-h1: 1.5em;
    --text-p: 16px;
  }
}



/* -- CUSTOM CSS -- */
html, body {width:100%; height:100%; padding:0px; margin:0px}

body{ 
	background-color:#fff; 
}
body{ font-family: 'Kanit', sans-serif; font-size:100%; font-weight:400; color:var(--default); text-decoration:none; }
img {
	border:0px; vertical-align: middle; max-width: 100%; height: auto;
}
.img-responsive { display: block; height: auto; max-width: 100%; }
.img-fluid { max-width: 100%; height: auto; }
strong{ font-weight: 500; }
figure{ margin: 0 0 1rem; }

a,
a:hover{
  text-decoration:none;
  color: inherit;
  outline:0; 
  transition: all 0.1s ease;
}
a:focus {
  text-decoration:none;
  outline:0;
}

.btn.focus, .btn:focus{
	outline:0;
	box-shadow: none;
}
input:focus,
select:focus,
textarea:focus,
button:focus,
.form-control:focus {
  outline: none !important;
  box-shadow: none;
}
input,
select,
textarea{
  background-clip: padding-box;
}





.div-container--fluid{ width: 100%; position: relative; margin: 0 auto; }

.div-container{
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

/* @media (min-width: 576px) {
  .div-container, .div-container--fluid{
    max-width: 540px;
    padding-right: 15px;
    padding-left: 15px;
  }
} */

@media (min-width: 768px) {
  .div-container, .div-container--fluid{
    max-width: 750px;
  }
  .div-container--fluid{ max-width: 100%; padding: 0; }
}

@media (min-width: 992px) {
  .div-container{
    max-width: 970px;
  }
}

@media (min-width: 1200px) {
  .div-container {
    max-width: 1230px;
  }
}
@media (min-width: 1600px) {
  .div-container {
    max-width: 1440px;
  }
}






.text-center{ text-align: center; }
.text-left{ text-align: left; }
.text-right{ text-align: right; }
.mt-60{ margin-top: 3.5rem; }


section{ position: relative; overflow-x: hidden; }

h1, h2, h3, h4, h5, h6{ overflow-wrap: break-word; line-height: 1.3; font-weight: 400; }
p, li{ overflow-wrap: break-word; line-height: 1.6; font-weight: 300; }
i{ line-height: 0; }


@media (max-width: 991px){

  .just-center-m{ justify-content: center !important; }

}


/**********************************************************/
/**********************************************************/

.div-logo{ text-align: center; padding: 20px 0; }
.div-logo a{ display: inline-block; }

.nav-menu{ background-color: var(--primary); padding: 15px 0; }
.nav-menu ul{ display: flex; gap: 30px; justify-content: center; }
.nav-menu ul li a{ font-size: 1.2rem; color: var(--white); font-weight: 400; }
.nav-menu ul li a:hover{ color: var(--black); }

.nav-menu ul li.current a,
.nav-menu ul li.current-menu-parent a,
.nav-menu ul li.current-menu-item a{ font-weight: 600; }


.boxbar-top .div-container{ padding-left: 0; padding-right: 0; }
.boxbar-top .div-logo{ text-align: left; }
.boxbar--search{ position: absolute; top: 30px; right: 15px; width: 70%; }
.boxbar--search .formgroup-search{ margin: 0; float: right; }
.boxbar-icn--search{ display: none; position: absolute; top: 21px; right: 65px; }
.boxbar-close{ display: none; position: absolute; top: 22px; right: 25px; }
.boxbar-close img{ filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(153deg) brightness(105%) contrast(101%); width: 20px; }


.scrolDisabled{
  overflow: hidden;
  /* position: fixed; */
}

@media (max-width: 991px){

  .div-logo{ padding: 13px 0; }
  .div-logo img{ width: 100px; }

  .nav-menu{ position: absolute; height: 100vh; width: 0; transition: opacity 0.3s, left 0.4s, width 0.4s; top: 0; bottom: 0; right: 0; overflow-x: hidden; padding-top: 70px; padding-bottom: 0; opacity: 0; }

  .divnav-header{ position: fixed; background-color: var(--white); box-shadow: 0px 4px 22px rgba(0, 0, 0, 0.06); width: 100%; z-index: 99; padding: 0 15px; top: 0; left: 0; }
  /* .divnav-header.navOpen{ height: 100%; } */
  .divnav-header.navOpen .nav-menu{ width: 260px; opacity: 1; }
  .divnav-header.navOpen .nav-menu ul{ flex-direction: column; padding-left: 20px; padding-right: 20px; gap: 0; }
  .divnav-header.navOpen .nav-menu ul li{ margin-bottom: 20px; }
  /* .divnav-header.navOpen .div-logo{ text-align: left; transition: all 0.5s ease; } */

  
  .boxbar--search{ display: none; width: 100%; right: auto; left: 0; padding: 10px 60px 10px 15px; background-color: var(--white); top: 60px; opacity: 0; transition: all 0.8s ease; position: fixed; }
  .boxbar-icn--search{ display: block; }
  .boxbar--search .formgroup-search{ margin: 0; float: none; max-width: 100%; width: 100%; }
  .boxbar--search.open{ display: block; top: 60px; opacity: 1; transition: all 0.8s ease; z-index: 1005; }
  .boxbar--search.open .boxbar-close{ display: block; }

  .boxbar--search.open .formgroup-search .form--input{ padding: 10px 10px 10px 35px; }
  .boxbar--search.open .formgroup-search .form--btn{ left: 0; right: auto; }


  .content-pd{ padding-top: 62px; }


#nav-icon1 {
  width: 30px;
  height: 30px;
  position: absolute;
  margin: 0;
  top: 15px;
  right: 20px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  z-index: 1005;
}

#nav-icon1 span {
  display: block;
  position: absolute;
  height: 3px;
  width: 30px;
  background: var(--primary);
  border-radius: 10px;
  opacity: 1;
  right: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav-icon1 span:nth-child(1) {
  top: 5px;
}

#nav-icon1 span:nth-child(2) {
  top: 14px;
}

#nav-icon1 span:nth-child(3) {
  top: 23px;
}

#nav-icon1.open span:nth-child(1) {
  top: 14px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

#nav-icon1.open span:nth-child(2) {
  opacity: 0;
  right: -30px;
}

#nav-icon1.open span:nth-child(3) {
  top: 14px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
  
  
.divnav-header.navOpen #nav-icon1 span{ background-color: var(--white); }



}
@media (max-width: 576px){

  .div-logo{ text-align: left; padding: 10px 0; }
  #nav-icon1{ top: 12px; }
  .content-pd{ padding-top: 55px; }
  .boxbar--search.open{ top: 55px; }
  .boxbar-icn--search{ top: 18px; }

}


/**********************************************************/
/**********************************************************/

.div-footer{ background-color: var(--primary); color: var(--white); }
.ft-row{ display: flex; justify-content: space-between; flex-wrap: wrap; padding: 60px 0; }

.ft-detail{ width: 300px; }
.ft-sitemap{ display: flex; justify-content: center; }
.ft-detail p{ font-size: 18px; font-weight: 400; margin-bottom: 10px; }
.ft-detail li{ margin-bottom: 10px; }
.ft-detail a{ font-size: 16px; font-weight: 300; }
.ft-detail p.ft-email{ display: flex; align-items: center; gap: 5px; font-size: 16px; font-weight: 300; }

.ft-social{ margin-top: 30px; display: flex; gap: 20px; }
.ft-social a{ display: flex; align-items: center; justify-content: center; background-color: var(--white); border-radius: 50%; width: 34px; height: 34px; }
.ft-social a:hover{ background-color: var(--graylight); }
.ft-cer-icon{ max-width: 300px; margin-top: 30px; }
.ft-cer-text{ margin-top: 20px; }

.ft-btn{ margin-top: 20px; }

.copyright{ border-top: 1px solid rgb(221,221,221,0.3); padding: 20px 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.copyright p{ font-size: 14px; font-weight: 300; }

.copyright-left{ display: flex; gap: 6px; flex-wrap: wrap; }


/* @media (min-width: 1200px){ */

  .ft-detail a:hover{ color: var(--black); }
  .ft-cer-text a:hover{ color: var(--black); }

/* } */
@media (max-width: 1199px){

  .div-footer{ padding-bottom: 65px; }

}
@media (max-width: 991px){

  .div-footer{ padding-bottom: 65px; }
  .ft-row{ padding: 40px 0; }
  .ft-col{ width: 50%; }
  .ft-detail{ width: 100%; }
  .ft-detail p{ font-size: 20px; }
  .copyright{ flex-direction: column-reverse; }

}
@media (max-width: 576px){

  .ft-col{ width: 100%; }
  .ft-sitemap{ justify-content: flex-start; margin: 30px 0; }

}


.div-navfooter{ display: none; }
@media (max-width: 1199px){
  .div-navfooter{ display: block; position: fixed; bottom: 0; left: 0; right: 0; width: 100%; background-color: var(--primary); padding: 0 20px; z-index: 10003; border-top: 1px solid rgb(221, 221, 221, 0.3); }
  .div-navfooter .navfooter--list{ display: flex; align-items: center; justify-content: space-between; max-width: 600px; margin: 0 auto; }

  .navfooter--item{ display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; font-size: 14px; color: var(--white) !important; }
  .navfooter--item.menu__home{ background-color: #FFE6BF; border: 3px solid var(--white); border-radius: 50%; width: 70px; height: 70px; position: relative; bottom: 7px; margin-top: -12px; }
  .navfooter--item.active{ opacity: 0.5; }
  .navfooter--item img{ width: 20px; }
  .navfooter--item.menu__home img{ max-width: 35px; width: auto; }

  .navfooter--item:hover{ color: var(--default) !important; }
  .navfooter--item:not(.menu__home):hover img{ filter: invert(69%) sepia(5%) saturate(0%) hue-rotate(151deg) brightness(96%) contrast(99%); }
}



/**********************************************************/
/**********************************************************/


/*
 *  Owl Carousel - nav arrow
*/
.owl-carousel .owl-stage-outer{ z-index: 9; }
.owl-carousel .owl-nav{ 
  position:absolute; width:100%; top: 50%; height: 55px; margin-top: -27.5px;
}
.owl-carousel .owl-nav button.owl-prev{
  background: url('../images/icon/arrow-prev.svg') no-repeat 0 0; background-size: cover;
  text-indent:-9999px;
  width:55px;
  height:55px;
  left: -80px;
  position:absolute;z-index:101;
  border-radius: 0;
  padding: 0;
  margin:0;
}
.owl-carousel .owl-nav button.owl-next{
  background: url('../images/icon/arrow-next.svg') no-repeat 0 0; background-size: cover;
  text-indent:-9999px;
  width:55px;
  height:55px;
  right: -80px;
  position:absolute;z-index:101;
  border-radius: 0;
  padding: 0;
  margin:0;
}
.owl-carousel .owl-nav button.owl-prev:hover{
  background: url('../images/icon/arrow-prev.svg') no-repeat 0 0; background-size: cover;
}

.owl-carousel .owl-nav button.owl-next:hover{
  background: url('../images/icon/arrow-next.svg') no-repeat 0 0; background-size: cover;
}

/* .owl-theme .owl-nav .disabled{ display: none; } */

.owl-carousel.off {
  display: block;
}

.owl-theme .owl-dots{ width: 100%; text-align: center; z-index: 9; }
.owl-theme .owl-dots{ margin-top: 10px; }
.owl-theme .owl-dots .owl-dot span{ background: var(--default); width: 6px; height: 6px; border-radius: 50%; margin: 5px; }
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span{ background: var(--primary); }
.owl-theme .owl-nav.disabled + .owl-dots{ margin-top: 10px; }


@media (max-width: 1299px){

  .owl-carousel .owl-nav button.owl-prev{ left: -60px; }
  .owl-carousel .owl-nav button.owl-next{ right: -60px; }

}
@media (max-width: 1199px){

  .owl-carousel .owl-nav button.owl-prev{ left: -40px; }
  .owl-carousel .owl-nav button.owl-next{ right: -40px; }

}





/**********************************************************/
/**********************************************************/


.section-page{ padding: 100px 0; }
.section-banner{ padding-top: 50px; padding-bottom: 50px; }
.section-pagedetail{ padding-top: 50px; padding-bottom: 100px; }
.section-article{ padding-top: 50px; padding-bottom: 100px; }

@media (max-width: 1199px){

  .section-page,
  .section-pagedetail{ padding-top: 50px; padding-bottom: 50px; }
  .section-banner{ padding-top: 30px; padding-bottom: 30px; }
  .section-article{ padding-bottom: 50px; }

}
@media (max-width: 991px){

  .section-article{ padding-top: 30px; padding-bottom: 50px; }

}


.box-title{ font-weight: 400; }
.box-title span{ color: var(--primary); }

.title-banner{ font-size: 60px; }

.div-title-info{ position: relative; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; margin-bottom: 40px; }
.div-title-info::after{ content: ''; position: absolute; left: 0; bottom: 26px; width: 100%; height: 1px; background-color: var(--primary); }
.title-info{ font-size: var(--txt-title); line-height: 1.3; display: inline-block; position: relative; z-index: 5; padding: 0 15px; }

.divbartop{ background-repeat: no-repeat; background-position: center; background-size: cover; width: 100%; height: 360px; display: flex; align-items: center; }
.bar-province{ background-image: url('../images/province/imgbar.jpg'); }
.divbartop .title-info{ padding: 0; color: var(--white); margin-bottom: 10px; }
.divbartop .div-breadcrumb,
.divbartop .div-breadcrumb ul li a{ color: var(--white);}


@media (max-width: 1599px){

  .title-banner{ font-size: 50px; }

  .div-title-info::after{ bottom: 21px; }

}
@media (max-width: 991px){

  .divbartop{ height: 280px; }
  .divbartop .div-breadcrumb ul{ justify-content: flex-start; }

}
@media (max-width: 767px){

  .title-banner{ font-size: 40px; }

  .title-info{ padding: 0 10px; }
  .div-title-info{ margin-bottom: 30px; }
  .div-title-info::after{ bottom: 15px; }
  .icon-info img{ width: 80%; }

  .divbartop{ height: 200px; }

}



.bg-F2F0ED{ background-color: var(--graylight); }
.bg-F5F5F5{ background-color: var(--whitelight); }
.bg-fff{ background-color: var(--white); }

hr { border: none; }
.line--dashed { margin: 2.5em 0; border: none; height: 2px; background: var(--default); background: repeating-linear-gradient(90deg,#555,#555 10px,transparent 10px,transparent 16px); opacity: 0.5; }
.line--dashed.m5{ margin: 4.375em 0; }

@media (max-width: 991px){

  .line--dashed{ margin: 2em 0; }
  .line--dashed.m5{ margin: 3.125em 0; }

}


.btn{ display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; font-size: 18px; line-height: 1; padding: 15px 30px; }

.btn--readmore{ background-color: var(--primary); border: 1px solid var(--primary); color: var(--white); }

.btn--white{ background-color: var(--white); border: 1px solid var(--white); color: var(--black); }


figure{ overflow: hidden; border-radius: 5px; }
figure img{ transition: 0.5s ease-in-out; border-radius: 5px; }
figure a{ display: block; }

/* @media (min-width: 1200px){ */

  .btn--readmore:hover{ background-color: var(--white); color: var(--primary); }
  .btn--white:hover{ background-color: var(--primary); }
  figure a:hover img{ transform: scale(1.2); transition: 0.5s ease-in-out; }

/* } */

/**********************************************************/
/*************************** home *************************/
/**********************************************************/

.box--search{ margin: 30px 0; }
.formgroup-search{ position: relative; display: flex; align-items: center; justify-content: center; max-width: 540px; width: 90%; margin: 0 auto; }
.formgroup-search .form--input{ font-family: 'Kanit', sans-serif; font-size: 16px; line-height: 1; color: var(--black); padding: 10px 40px 10px 20px; border: 1px solid var(--gray); border-radius: 5px; width: 100%; }
.formgroup-search .form--input::placeholder{ color: #aaa; }
.formgroup-search .form--btn{ position: absolute; right: 0; top: 0; background-color: transparent; border: 0; padding: 13px; padding-left: 10px; cursor: pointer; }



.home--banner{ max-width: 1080px; width: 90%; margin: 0 auto; }
.home--banner .banner--img{ position: relative; width: 100%; padding-top: 56.25%; overflow: hidden; }
.home--banner .banner--img img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 5px; object-fit: cover; object-position: center; }


.home-box--hightlight{ display: flex; flex-wrap: wrap; }
.hightlight-img{ width: 60%; }
.hightlight-img figure{ margin: 0; }
.hightlight-detail{ width: 40%; padding-left: 5%; }
.hightlight-detail .box-textcat{ margin-top: 6px; }


.lable--datetime{ margin-bottom: 10px; }
.lable--tag{ background-color: var(--primary); padding: 3px 10px; display: inline-flex; color: var(--white); font-weight: 500; border-radius: 5px; margin-bottom: 10px; }
.hightlight-header{ font-size: 1.875em; margin-bottom: 15px; }
.hightlight-intro{ font-size: 1.25em; }
.hightlight--btn{  margin-top: 20px; text-align: right; }

.home-vdo--hightlight{ max-width: 1080px; width: 90%; margin: 0 auto; }
.home-vdo--hightlight figure{ border-radius: 20px; }
.home-vdo--hightlight figure img{ border-radius: 20px; }
.hightlight-intro{  
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* @media (min-width: 1200px){ */

  .lable--tag:hover{ color: var(--black); }
  .hightlight-header a:hover{ color: var(--primary); }

/* } */
@media (max-width: 1199px){

  .hightlight-header{ font-size: 1.5em; }
  .hightlight-intro{ 
    font-size: 1.2em;   
  }

}
@media (max-width: 991px){

  .hightlight-img{ width: 100%; margin-bottom: 1.2rem; }
  .hightlight-detail{ width: 100%; padding-left: 0; }
  .hightlight--btn{ display: none; }

  .lable--datetime, .lable--tag{ font-size: 14px; }

  .home-vdo--hightlight, .home--banner{ width: 100%; }
  .home--banner .banner--img img{ border-radius: 0; }

  .home-vdo--hightlight figure{ border-radius: 10px; }
  .home-vdo--hightlight figure img{ border-radius: 10px; }

}
@media (max-width: 576px){

  .formgroup-search .form--input{ padding-left: 15px; font-size: 15px; }
  .lable--datetime, .lable--tag{ font-size: 13px; }

}
@media (max-width: 360px){

  .formgroup-search .form--input{ padding-left: 10px; }

}



.div--province .province--row{ display: flex; flex-wrap: wrap; gap: 50px; justify-content: center; }
.div--province .province--col{ width: 30%; }
.province--row .province--col figure{ position: relative; width: 100%; padding-top: 56.25%; overflow: hidden; margin: 0; }
.province--row .province--col figure img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.province--row .province--col figure figcaption{ position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); font-size: 40px; font-weight: 500; color: var(--white); text-align: center; }



/* @media (min-width: 1200px){ */

  .province--row .province--col:hover img{ transform: scale(1.3); transition: 0.5s ease-in-out; }

/* } */
@media (max-width: 1599px){

  .province--row .province--col figure figcaption{ font-size: 34px; }

}
@media (max-width: 1199px){

  .div--province .province--row{ gap: 40px; }
  .province--row .province--col figure figcaption{ font-size: 30px; }

}
@media (max-width: 991px){

  /* .div--province .province--row{ gap: 35px; } */
  .div--province .province--row{ gap: 0; }
  .province--row .province--col{ margin: 12px; }
  .province--row .province--col figure figcaption{ font-size: 26px; }

}
@media (max-width: 767px){

  .div--province .province--row{ gap: 14px; }
  .div--province .province--col{ width: calc(50% - 7px); margin: 0; }
  .province--row .province--col figure figcaption{ font-size: 20px; }

}



/**********************************************************/
/**********************************************************/
/**********************************************************/

.news-card--row{ display: flex; flex-wrap: wrap; gap: 50px 24px; }
.news-card--col{ width: calc(25% - 18px); }
.news-header{ font-size: 1.25em; line-height: 1.3; font-weight: 400; }

.news--btn{ text-align: center; margin-top: 60px; }


.divbox-related .news-card--col{ width: calc(33% - 14px); }

.divbox-latest{ display: flex; flex-direction: column; gap: 30px; }
.divbox-latest .news-card--row{ gap: 30px 20px; }
.divbox-latest .news-card--col{ width: 100%; }

.news-card figure img{ width: 100%; }


/* @media (min-width: 1200px){ */

  .news-header a:hover{ color: var(--primary); }

/* } */
@media (max-width: 1199px){

  .news-card--row{gap: 50px 20px; }
  .news-card--col{ width: calc(25% - 15px); }
 
  .news-header{ font-size: 1.1em; }

  .divbox-related .news-card--col{ width: calc(33% - 12px); }

}
@media (max-width: 991px){

  /* .news-card--row{gap: 30px 20px; } */
  .news-card--row{gap: 0; margin-right: -10px; margin-left: -10px; }
  .news-card--col{ width: 50%; padding-right: 10px; padding-left: 10px; margin-bottom: 30px; }
  .news--btn{ margin-top: 40px; }

  /* .divbox-latest .news-card--col{ width: calc(33% - 12px); } */
  .divbox-latest .news-card--row{ gap: 0; }
  .divbox-latest .news-card--col{ width: 33%; }
  .divbox-related .news-card--col{ width: 33%; }

}
@media (max-width: 767px){

  /* .news-card--row{gap: 30px 14px; }
  .news-card--col{ width: calc(50% - 7px); } */
  .news-header{ font-size: 1em; }
 

}
@media (max-width: 576px){

  /* .news-card--row{gap: 30px; }
  .news-card--col{ width: 100%; } */
 
  /* .divbox-related .news-card--col{ width: calc(50% - 7px); } */
  .divbox-related .news-card--col{ width: 50%; }
  .divbox-latest .news-card--col{ width: 100%; }

}



.divProvince--row{ display: flex; flex-wrap: wrap; }
.divProvince--col{ width: 100%; display: flex; }

.province--header{ position: relative; width: 460px; }
.province--img{ width: 400px; }
.province--img img{ width: 100%; }

.divProvince--detail{ width: calc(100% - 460px); }
.txt--header{ font-size: 38px; color: var(--primary); padding-bottom: 15px; margin-bottom: 20px; border-bottom: 1px solid var(--gray); width: 100%; }

/* .province--list{ display: flex; flex-wrap: wrap; }
.province--list ul{ list-style: none; width: 25%; }
.province--list li{ position: relative; padding-left: 15px; margin-bottom: 5px; font-size: 20px; margin-bottom: 10px; }
.province--list li::before{ content: ''; position: absolute; top: 9px; left: 0; background-image: url('../images/icon/arrow.svg'); background-repeat: no-repeat; background-size: cover; width: 7px; height: 11px; }
.province--list li a:hover{ color: var(--primary); } */
.province--list ul{   display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column; 
}
.province--list li{ position: relative; padding-left: 15px; margin-bottom: 5px; font-size: 20px; margin-bottom: 10px; }
.province--list li::before{ content: ''; position: absolute; top: 9px; left: 0; background-image: url('../images/icon/arrow.svg'); background-repeat: no-repeat; background-size: cover; width: 7px; height: 11px; }
.province--list li a:hover{ color: var(--primary); } 


@media (max-width: 1199px){

  .province--header{ width: 330px; }
  .province--img{ width: 300px; }
  .divProvince--detail{ width: calc(100% - 330px); }
  .txt--header{ font-size: 30px; }
 
}
@media (max-width: 991px){

  .province--header{ width: 100%; }
  .divProvince--detail{ width: 100%; }
  .province--img{ position: relative; width: 100%; padding-top: 56.25%; overflow: hidden; margin-bottom: 20px; }
  .province--img img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }

}
@media (max-width: 576px){

  /* .province--list ul{ width: 50%; } */
  .province--list ul{ 
    grid-template-rows: repeat(10, auto);
  }
  .province--list li{ font-size: 18px; }
 
}



/**********************************************************/


.vdo-card{ position: relative; margin-bottom: 1rem; overflow: hidden; border-radius: 5px; }
.vdo-card::after{ content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-image: url('../images/icon/icon-video.svg'); background-repeat: no-repeat; background-size: cover; width: 40px; height: 40px; opacity: 1; z-index: 5; transition: all 0.3s ease; }
.vdo-card:hover::after{ z-index: -9; opacity: 0; transition: all 0.3s ease; }
.vdo-card img{ transition: 0.5s ease-in-out; border-radius: 5px; }
.vdo-card:hover img{ transform: scale(1.1); transition: 0.5s ease-in-out; }

.video-container,
body.single-post .wp-block-embed__wrapper {
  position: relative; 
  padding-bottom: 56.25%; 
  height: 0; 
  overflow: hidden; 
  max-width: 100%; border-radius: 5px;
}
.video-container iframe,
body.single-post .wp-block-embed__wrapper iframe {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%;
}




/**********************************************************/
/**********************************************************/
/**********************************************************/


.pageNumber {
  width: 100%;
  padding: 60px 0 0 0;
  text-align: center;
}
.pageNumber .nav-links a.page-numbers, .pageNumber .nav-links span{
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--primary);
  font-size: 16px;
  width: 45px;
  height: 45px;
  margin: 0 5px;
  background-color: var(--white);
  text-align: center; border-radius: 8px;
  border: 1px solid var(--primary); border-radius: 50%;
}
.pageNumber .nav-links a.page-numbers:hover,
.pageNumber .nav-links a.page-numbers.current,
.pageNumber .nav-links span.current {
  color: var(--white);
  background-color: var(--primary); border-color: var(--primary);
}

/* .pageNumber .nav-links a.next, 
.pageNumber .nav-links a.prev{ width: 0px; height:0px; } */


@media (max-width: 576px){

  .pageNumber .nav-links a.page-numbers, .pageNumber .nav-links span{ font-size: 14px; width: 35px; height: 35px; margin: 0 3px; }

}




/**********************************************************/
/*************************** article **********************/
/**********************************************************/

.article--row{ 
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  position: relative;
}
.article-col--left{
  position: relative;
  width: 100%;
  -ms-flex: 0 0 67%;
  flex: 0 0 67%;
  max-width: 67%;
}
.article-col--right{
  position: relative;
  width: 100%;
  -ms-flex: 0 0 33%;
  flex: 0 0 33%;
  max-width: 33%;
  padding-left: 50px;
}

@media (max-width: 991px){

  .article-col--left, .article-col--right{
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 0px;
  }

}



.div-breadcrumb{ margin-bottom: 10px; position: relative; }
/* .div-breadcrumb::after{ content: ''; position: absolute; top: 15px; left: 0; background-image: url('../images/icon/icon-home.svg'); width: 13px; height: 11px; background-repeat: no-repeat; background-size: cover; } */
.div-breadcrumb ul{ display: flex; flex-wrap: wrap; margin-left: 0 !important; }
.div-breadcrumb ul li{ position: relative; padding-left: 20px; font-size: 14px; list-style: none; }
.div-breadcrumb ul li::before{ content: '/'; position: absolute; left: 8px; }
.div-breadcrumb ul li:first-child{ padding-left: 0; }
.div-breadcrumb ul li:first-child::before{ display: none; }
.div-breadcrumb ul li a{ text-decoration: none; color: var(--black); }
.div-breadcrumb ul li a:hover{ color: var(--primary); }


.article--bar{ display: flex; justify-content: space-between; align-items: center; margin: 0px 0 15px; }
.article--date{ font-size: 14px; font-weight: 300; }
.article--share{ display: flex; align-items: center; font-size: 14px; }
.article--share a{ display: inline-flex; align-items: center; justify-content: center; margin-left: 10px; }
/*.article--share a:hover{ opacity: 0.9; }*/
/* .article--date .hide{ display: none; } */


.article-detail{ width: 100%; }
.article-detail.singledetail{ max-width: 860px; margin: 0 auto; }
.article-detail figure{ margin-bottom: 30px; border-radius: 0; }
.article-detail img{ max-width: 100%; height: auto; border-radius: 0; }
.article-detail p{ margin-bottom: 30px; }
.article-detail p, .article-detail li{ font-size: var(--text-p); }
.article-detail ul{ list-style: disc; margin-left: 20px; margin-bottom: 30px; }
.article-detail ol{ list-style: decimal; margin-left: 20px; margin-bottom: 30px; }
.article-detail p:last-child,
.article-detail ul:last-child,
.article-detail ol:last-child{ margin-bottom: 0; }
.article-detail a{ color: var(--primary); }
.article-detail a:hover{ color: var(--black); }

.article-detail h1, .article-detail h2, .article-detail h3{ margin-bottom: 10px; font-weight: 500; }
.article-detail h1{ font-size: var(--text-h1); }
.article-detail h2{ font-size: var(--text-h2); }
.article-detail h3{ font-size: var(--text-h3); }


.article--contact p{ margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.article--contact a{ color: var(--default); font-weight: 300; text-decoration: none; }
.article--contact a:hover{ color: var(--primary); }


.article-meta .meta_tags{ font-size: 18px; font-weight: 500; }
.article-meta .meta_tags a{ display: inline-block; font-size: 1rem; font-weight: 500; color: var(--primary); background-color: var(--white); border: 1px solid var(--primary); padding: 5px 10px; border-radius: 5px; margin: 3px; text-decoration: none; }
.article-meta .meta_tags a:hover{ background-color: var(--primary); color: var(--white); text-decoration: none; }
.article-meta .meta_tags i img{ width: 28px; }


.article--reporter{ margin-top: 30px; padding: 30px; background-color: var(--whitelight); border-radius: 5px; margin-bottom: 40px; }
.article--reporter .box_profile{ display: flex; align-items: center; flex-wrap: wrap; }
.article--reporter .box_profile .box_profile-img{ width: 80px; margin-right: 20px; }
.article--reporter .box_profile .box_profile-img img{ border-radius: 50%; object-fit: cover; object-position: top; width: 80px; height: 80px; }
.article--reporter .box_profile .box_profile-name{ width: calc(100% - 100px); }
.article--reporter .box_profile .box_profile-name p{ font-size: 16px; font-weight: 300; }
.article--reporter .box_profile .box_profile-name a{ color: var(--primary); font-weight: 500; }
.article--reporter .box_profile .box_profile-name .profilename{ font-size: 22px; font-weight: 500; color: var(--primary); margin-bottom: 5px; display: block; text-decoration: none; }
.article--reporter .box_profile .box_profile-name a:hover{ text-decoration: underline; }
.article--reporter .box_profile .box_title{ text-align: center; margin-bottom: 20px; width: 100%; }
.article--reporter .box_profile .box_title p{ font-weight: 500; }


.div--slidebar{ margin-bottom: 30px; }
.slidebar--title{ display: flex; align-items: center; gap: 5px; font-size: 30px; line-height: 1.3; padding-bottom: 5px; border-bottom: 2px solid var(--primary); margin-bottom: 20px; font-weight: 400; }

.div-category--list{ list-style: none; }
.div-category--list li{ position: relative; padding-left: 15px; margin-bottom: 5px; }
.div-category--list li::before{ content: ''; position: absolute; top: 6px; left: 0; background-image: url('../images/icon/arrow.svg'); background-repeat: no-repeat; background-size: cover; width: 7px; height: 11px; }
.div-category--list li a:hover{ color: var(--primary); }



@media (max-width: 991px){
  
  .div-breadcrumb ul{ justify-content: center; }
  .article-detail h1{ text-align: center; }
  
  .div--slidebar{ margin-top: 30px; margin-bottom: 0; }

}
@media (max-width: 576px){

  .article--bar{ flex-direction: column; gap: 15px; }

  .article--social a{ width: 30px; height: 30px; }
  .article--social a i{ font-size: 18px; }

  .article--reporter{ padding: 20px; }
  .article--reporter .box_profile{ flex-direction: column; }
  .article--reporter .box_profile .box_profile-name{ width: 100%; text-align: center; }
  .article--reporter .box_profile .box_profile-img{ margin-right: 0; margin-bottom: 20px; }

}




/**********************************************************/
/**********************************************************/
/**********************************************************/


/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 10; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  /* Fade in the background */
  /* -webkit-animation-name: fadeIn; 
  -webkit-animation-duration: 0.4s;
  animation-name: fadeIn;
  animation-duration: 0.4s */
}

/* Modal Content */
.modal-content {
  position: fixed; max-width: 900px; width: 90%;
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  background-color: #fff; border-radius: 5px;
  /* -webkit-animation-name: slideIn;
  -webkit-animation-duration: 0.4s;
  animation-name: slideIn;
  animation-duration: 0.4s */
}

.modal.addopen{ display: block; }

/* The Close Button */
.close { cursor: pointer; }
.close:hover img{ filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(153deg) brightness(105%) contrast(101%); }

.modal-header {
  padding: 6px 16px; height: 55px;
  background-color: var(--primary);
  display: flex; justify-content: space-between; align-items: center;
  border-top-left-radius: 5px; border-top-right-radius: 5px;
}
.modal-header .title-header{ font-size: 30px; color: var(--white); }

.modal-body {padding: 50px; }

.divModal-content{ display: flex; flex-wrap: wrap; }
.divModal-img{ width: 446px; }
.divModal-img img{ max-width: 100%; height: auto; width: 100%; }
.divModal-detail{ width: calc(100% - 446px); padding-left: 40px; }
.divModal-detail .title{ font-size: 24px; color: var(--primary); padding-bottom: 10px; border-bottom: 1px solid var(--gray); margin-bottom: 20px; }
/* .divModal-list{ display: flex; } */
.divModal-list ul{ list-style: disc; padding-left: 20px;
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(10, auto);
  grid-auto-flow: column; 
}
.divModal-list ul li a:hover{ color: var(--primary); }

@media (max-width: 1199px){

  .modal-header .title-header{ font-size: 24px; }

}
@media (max-width: 991px){

  .modal-body {padding: 30px; }
  .divModal-img{ width: 340px; }
  .divModal-detail{ width: calc(100% - 340px); padding-left: 30px; }
  .divModal-detail .title{ font-size: 20px; margin-bottom: 10px; padding-bottom: 6px; }

  .divModal-list ul li{ margin-bottom: 6px; }

}
@media (max-width: 767px){

  .divModal-img,
  .divModal-detail{ width: 50%; }

}
@media (max-width: 576px){

  .modal-body{ padding: 20px; }
  .modal-header{ height: 45px; }
  .modal-header .title-header{ font-size: 20px; }
  .divModal-img{ width: 100%; }
  .divModal-detail{ width: 100%; padding-left: 0; }

  .divModal-img figure{ position: relative; width: 100%; padding-top: 56.25%; overflow: hidden; }
  .divModal-img img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }

}




/* Add Animation */
@-webkit-keyframes slideIn {
  from {bottom: -300px; opacity: 0} 
  to {bottom: 0; opacity: 1}
}

@keyframes slideIn {
  from {bottom: -300px; opacity: 0}
  to {bottom: 0; opacity: 1}
}

@-webkit-keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}

@keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}




/**********************************************************/
/**********************************************************/
/**********************************************************/

body.author-travel .div-title-info::after{ bottom: auto; top: 145px; }
body.author-travel .div-title-info .icon-info img{ border-radius: 50%; }
body.author-travel .div-title-info p{ max-width: 410px; }


@media (max-width: 1599px){

  body.author-travel .div-title-info::after{ bottom:auto; top: 137px; }

}
@media (max-width: 767px){

  body.author-travel .div-title-info::after{ bottom:auto; top: 110px; }

}


.google_ads, .google-auto-placed{ margin-top: 30px; margin-bottom: 30px; }
.p-search-result{ font-size: 22px; padding-top: 20px; }

/* .posted-on .hide{ display: none; }
body.post-template-default .posted-on .hide{ display: inline-block; } */
.posted-on .updated{ display: none; }


#cookie-notice, #cookie-notice .cn-button:not(.cn-button-custom){ font-family: 'Kanit', sans-serif; }
#cookie-notice .cn-button:not(.cn-button-custom){ font-weight: 500; color: #fff; border-radius: 5px; }


.btncopy{  min-width: 100px; border-radius: 20px; font-size: 0.75rem; font-weight: 300; display: inline-block; color: var(--white) !important; height: 34px; padding: 5px 12px 5px 30px; position: relative; }
.btncopy::before{ content: ''; position: absolute; background-size: cover; background-repeat: no-repeat; background-position: center; left: 12px; width: 15px; height: 12px; filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(153deg) brightness(105%) contrast(101%); }

.btncopy.btnclick{ background-color: var(--primary); }
.btncopy.btnclick::before{ background-image: url('../images/icon/link-solid.svg'); }

.btncopy.btnfinish{ background-color: #000; }
.btncopy.btnfinish::before{ background-image: url('../images/icon/check-solid.svg'); height: 11px; }
.btncopy.btnfinish:hover{ background-color: #000; }
.mb-4{ margin-bottom: 40px; }

/*.search-highlight{
  background-color: #e7a339;
}

*/



.boxchatline{ position: fixed; bottom: 30px; right: 30px; z-index: 9999; }
.boxchatline img{ width: 50px; -webkit-filter: drop-shadow(3px 3px 6px #999);
  filter: drop-shadow(1px 3px 6px #999); }
.boxchatline-txt{ background-color: #fff; color: #333; border-radius: 10px; padding: 10px; text-overflow: ellipsis; text-align: center; position: absolute; top: 50%; right: calc(100% + 5px); transform: translate(-.5em,-50%); box-shadow: 0 1.93465px 7.73859px rgb(0 0 0 / 15%); width: 150px; }
.boxchatline-txt::before{ content: ''; position: absolute; border: 5px solid #fff0; top: 50%; right: calc(0em - 18px); transform: translate(-.5em,-50%); border-left-color: #fff; }


.article--slide{ background-color: #f7f7f7; margin-bottom: 50px; }
.article--slide .slide--image{ width: 75%; margin: 0 auto; }
/* .article--slide img.img-fluid{ object-fit: cover; width: 100%; height: 100%; } */

.slide--image .owl-carousel .owl-nav{ height: 30px; margin-top: -15px; }
.slide--image .owl-carousel .owl-nav button.owl-prev{ width: 30px; height: 30px; left: -15%; }
.slide--image .owl-carousel .owl-nav button.owl-next{ width: 30px; height: 30px; right: -15%; }
.slide--image .owl-theme .owl-dots{ position: absolute; }
.article--slide .item--img{ display: flex; justify-content: center; }
.article--slide img.img-fluid {
  width: auto;
  height: 500px!important;
  object-fit: cover;
  object-position: center;
}


@media (max-width: 1199px){

  .boxchatline{ bottom: 80px; }
  
}
@media (max-width: 767px){

  .article--slide img.img-fluid{ height: auto !important; }
  .article--slide .slide--image{ width: 100%; }
  .slide--image .owl-carousel .owl-nav button.owl-prev{ left: 0; }
  .slide--image .owl-carousel .owl-nav button.owl-next{ right: 0; }

}





/**********************************************************/
/********************** update card ***********************/
/**********************************************************/


.box-card{ background-color: var(--white); border: 1px solid rgb(234, 234, 234); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px; transition: all 0.15s ease-out 0s; border-radius: 8px; height: 100%; }
.box-card a{ display: flex; flex-direction: column; height: 100%; }
.box-card figure img{ width: 100%; border-top-right-radius: 8px; border-top-left-radius: 8px; }
.boxcard--detail{ flex: 1 1 auto; padding: 15px; }
.box-header{ 
  font-size: 1.25em; line-height: 1.3; font-weight: 400; color: var(--default); margin-bottom: 10px; 
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.box-price{ font-size: 18px; font-weight: 600; }
.boxcard--btn{ padding: 10px; text-align: center; padding-bottom: 20px;}
.btn--detail{ background-color: var(--primary); border-radius: 8px; padding: 10px; color: var(--white); border: 1px solid var(--primary); width: 80%; }

.box-card:hover{ box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 15px 0px; }
.box-card:hover .btn--detail{ background-color: var(--white); color: var(--primary); }



@media (max-width: 1199px){

  .box-header{ font-size: 1.1em; }

}
@media (max-width: 767px){

  .box-header{ font-size: 1em; }

}
@media (max-width: 576px){

  .boxcard--detail{ padding: 0 10px; }
  .btn--detail{ width: 100%; font-size: 16px; }

}

@media (max-width: 1199px){

  .owl-boxtab.owl-carousel .owl-stage.pos-right{ left: inherit!important; right: -50px!important; }
  .owl-boxtab.owl-carousel .owl-stage{ left: -50px; }

  /* .slide--travel .owl-carousel .owl-stage { padding-left: 0 !important; } */
  .slide--travel .owl-carousel .owl-stage-outer { overflow: unset; }

}
@media (max-width: 576px){

  .owl-boxtab.owl-carousel .owl-stage.pos-right{ left: inherit!important; right: -30px!important; }
  .owl-boxtab.owl-carousel .owl-stage{ left: -30px; }

}




/* .box-news{ margin-bottom: 30px; } */
.box-news figure{ margin-bottom: 10px; position: relative; }
.box-news figure img{ border-radius: 8px; }

.box-textcat{ font-size: 12px; line-height: 1.3; color: #888; font-weight: 300; }



.box-news.vdo-card figure::after{ content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-image: url('../images/icon/icon-video.svg'); background-repeat: no-repeat; background-size: cover; width: 40px; height: 40px; opacity: 1; z-index: 5; transition: all 0.3s ease; }
.vdo-card:hover figure::after{ z-index: -9; opacity: 0; transition: all 0.3s ease; }



@media (min-width: 1200px){

  .box-news a:hover img{ box-shadow: 0 4px 4px rgba(0,0,0,.2); }
  .box-news a:hover .box-header{ color: var(--primary); }

  .box-textcat a:hover{ color: var(--primary); }

}