@charset "UTF-8";

body.dark { background-color: #111; color: #eee; }
/*body.dark img { -webkit-filter: brightness(70%); filter: brightness(70%); }*/
body.dark .CategoryTopPage ul li p { color: #eee;}
body.dark .KeyPointToppage h2{ color: #fff; }
body.dark .ContentToppage h2{ color: #fff; }
body.dark .SearchBoxToppage input[type=text]{ background-color: #cccccc; border: 2px solid #333333; }
body.dark .TitleH1{ color: #fff; }
body.dark .CategoryList ul li p{ color: #eee; }
body.dark .PostsLists ul li a{ color: #eee; }
body.dark .TitleSingle{ color: #eee; }
body.dark .AuthorBox{ color: #333;}

.NavDarkLightMode{ margin: 20px 0; text-align: right; padding-right: 20px;}
.NavDarkLightMode ul{ margin:0; padding:0; list-style:none;}
.nav ul { list-style: none; padding: 0; margin: 0; }
.NavDarkLightMode button { font-weight: bold!important; border: 1px solid #333!important; line-height: 21px!important; padding: 5px 20px 5px 20px!important; background: #333; border-radius: 100px!important; -webkit-transition: background 200ms ease; transition: background 200ms ease; color: #eaeaea; }
.NavDarkLightMode button:hover { background: rgba(51, 51, 51, 0.8); }
.dark-button{ background-color: #222; color: #eee; }
.dark-button:hover{ background-color: #333!important; color: #eee; }
.light-button{ background-color: #eee; color: #222;}
.light-button:hover{ background-color: #fff!important; color: #222;}

.ast-container{ max-width: 900px!important; }
/*.site-content{ background-color: #fff!important;}*/
.site-content .ast-container{ display: block!important;}

/* For Blog Template */
.BlogFont{ font-family: "Kanit", sans-serif;}
.FBFont{ font-family: Segoe UI Historic, Segoe UI, Helvetica, Arial, sans-serif!important; /*font-family: system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif!important; font-family: Helvetica, Arial, sans-serif!important;*/ } 
#ast-scroll-top{ background-color: #0462A7!important;}

/* FeatureToppage */
.FeatureToppage{ max-width: 900px; height: auto; margin: 0 auto;}
.FeatureToppage ul{ margin: 0;}
.FeatureToppage ul li{ height: auto; position: relative; }
.FeatureToppage ul li p{ margin: 0;}
.FeatureToppage ul li .Picture{ width: 100%; height: 500px;}
.FeatureToppage ul li .Picture img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.FeatureToppage ul li .Title{ font-size: 20px; font-weight: 500; color: #fff; line-height: 33px; text-align: center; position: absolute; left: 0; bottom: 0; padding: 120px 20px 40px 20px; width: 100%; height: auto; background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);}
.FeatureToppage .slick-dots li button:before{ font-size: 35px; color: #D9D9D9; opacity: 1;}
.FeatureToppage .slick-dots li.slick-active button:before{ color: #0462A7; opacity: 1;}
.FeatureToppage .slick-dots li{ margin: 0 2px;}
.FeatureToppage .slick-dots{ bottom: 15px;}

/* SearchBoxToppage */
.SearchBoxToppage{ text-align: center; margin: 40px 0 30px 0; }
.SearchBoxToppage input[type=text]{ position: relative; display: inline-block; position: relative; border: 2px solid #848492; padding: 7px 10px 7px 40px!important; background-color: #fff; border-radius: 10px; font-family: "Kanit", sans-serif; }
.SearchBoxToppage input[type=text]:focus{ border: 2px solid #0462A7;}
.SearchBoxToppage .search{ position: relative;}
.SearchBoxToppage .search:before{ width: 20px; height: 20px; background-color: #000; left: 12px; top: 2px; position: absolute; content: ''; background:url(../images/icon-search.svg) center no-repeat; background-size: contain; z-index: 2; }

/* CategoryTopPage */
.CategoryTopPage{ margin: 40px 20px; }
.CategoryTopPage ul{ display: flex; flex-wrap: wrap; justify-content: left; gap: 4%; margin: 0; overflow: auto; }
.CategoryTopPage ul li{ list-style: none; width: 16.8%; margin-bottom: 20px; text-align: center;}
.CategoryTopPage ul li img{ width: auto; height: auto; max-width: 100%; transition: .2s ease; border-radius: 10px; }
.CategoryTopPage ul li:hover img{ transform:scale(1.02); transition: .2s ease; }
.CategoryTopPage ul li p{ margin: 0; margin-top: 4px; font-size: 16px; color: #000; }
.CategoryTopPage ul li:last-child{ display: flex; align-items: center; text-align: center; }
.CategoryTopPage ul li:last-child a{ width: 100%;}

/* KeyPointToppage */
.KeyPointToppage{ margin: 20px 0px 60px 0px; position: relative; }
.KeyPointToppage h2{ font-size: 20px; font-weight: 600; margin-bottom: 15px; }
.KeyPointToppage ul{ margin: 0; padding: 0 30px; }
.KeyPointToppage ul li{ overflow: hidden; background-color: #E6F1F8; border-radius: 10px; font-size: 18px; }
.KeyPointToppage ul li p{ margin: 0;}
.KeyPointToppage ul li .Picture{ margin-bottom: 10px;}
.KeyPointToppage ul li .Picture img{ width: 100%; height: auto; max-width: 100%; border-radius: 10px;}
.KeyPointToppage ul li .Title{ padding: 5px 15px 15px 15px;}
.KeyPointToppage ul li .Description{ padding: 5px 15px;}
.KeyPointToppage ul li a{  color: #000;}
.KeyPointToppage .slick-slide{ margin-left: 15px; margin-right: 15px;}
.KeyPointToppage .slick-list{ margin-left: -15px; margin-right: -15px;}
.KeyPointToppage .slick-prev:before { top: 40%; background-image: url('../images/icon-left-arrow.svg'); background-repeat: no-repeat; background-position: left; background-size: contain; display: inline-block; width: 30px!important; height: 30px!important; content:""; }
.KeyPointToppage .slick-next:before { top: 40%; background-image: url('../images/icon-right-arrow.svg'); background-repeat: no-repeat; background-position: right; background-size: contain; display: inline-block; width: 30px!important; height: 30px!important; content:""; }
.KeyPointToppage .slick-prev, .KeyPointToppage .slick-next{ width: 30px!important; height: 30px!important; top: 50%!important; z-index: 9;}
.KeyPointToppage .slick-track { float: left!important; }
.KeyPointToppage .slick-prev{ left: 0px!important;}
.KeyPointToppage .slick-next{ right: 0px!important;}

/* ContentToppage */
.ContentToppage{ margin: 20px 0px 60px 0px; }
.ContentToppage h2{ margin-left: 20px; margin-right: 20px; font-size: 20px; font-weight: 600; margin-bottom: 15px; }
.ContentToppage .Picture{ width: auto; height: auto; margin-bottom: 15px; text-align: center; }
.ContentToppage .Picture img{ width: auto; height: auto; max-width: 100%; }
.ContentToppage .Descriptions{ margin-bottom: 15px; margin-left: 20px; margin-right: 20px; font-family: "Noto Sans Thai Looped", sans-serif; }
.ContentToppage .Links{ text-align: right; margin-right: 20px; }
.ContentToppage .Links a{ display: inline-block; padding: 5px 25px; color: #fff; background-color: #0462A7; border-radius: 10px; }

.TitleH1{ font-size: 25px; font-weight: 600; color: #000; margin-top: 40px; text-align: center; }

/* CategoryList */
.CategoryList{ margin: 40px 20px;  }
.CategoryList ul{ display: flex; flex-wrap: wrap; justify-content: left; gap: 5%; margin: 0; overflow: auto; }
.CategoryList ul li{ list-style: none; width: 30%; margin-bottom: 40px; text-align: center;}
.CategoryList ul li img{ width: auto; height: auto; max-width: 100%; transition: .2s ease; border-radius: 10px; }
.CategoryList ul li:hover img{ transform:scale(1.02); transition: .2s ease; }
.CategoryList ul li p{ margin: 0; margin-top: 15px; font-size: 20px; color: #000; }

.Notdata{ text-align: center; font-size: 18px; font-weight: 600; color: red;}

/* PostsLists */
.PostsLists{  max-width: 900px; margin: 20px 20px 60px 20px; }
.PostsLists ul{ margin: 0; }
.PostsLists ul li{ margin: 40px 0; list-style: none; }
.PostsLists ul li p{ margin: 0;}
.PostsLists ul li a{ display: flex; justify-content: space-between; align-items: center; gap: 5%; color: #000; position: relative; }
.PostsLists ul li a:after{ position: absolute; content: ''; right: 0; width: 12px; height: 100%; background-image: url('../images/icon-right-arrow.svg'); background-repeat: no-repeat; background-position: center; background-size: contain; }
.PostsLists ul li .Picture{ margin: 0; width: 100%; min-width: 120px; max-width: 120px;}
.PostsLists ul li .Picture img{ width: auto; height: auto; max-width: 100%; border-radius: 15px; }
.PostsLists ul li .Detail{ width: 100%; margin: 0; padding-right: 60px;}
.PostsLists ul li .Detail .Title{ font-size: 18px; font-weight: 500;}
.PostsLists ul li .Detail .Description{ font-size: 15px; font-weight: 400; font-family: "Noto Sans Thai Looped", sans-serif; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; }

/* pagination */
.pagination{ padding: 0; font-size: 14px;}
#pagination { padding: 0; margin: 60px 0px; overflow: hidden; clear: both; }
#pagination ul { position: relative; padding: 0; margin: 0; text-align: center; border-top: 0px; }
#pagination li { display: inline-block; padding: 0; margin: 0 2px; text-align: center; list-style: none; border-radius: 3px; }
#pagination li a { background: #f5f5f5; border-radius: 3px; }
#pagination li a:hover { background: #0462A7; color: #fff; border-radius: 3px; }
#pagination li:first-child:hover { opacity: .6; }
#pagination li span, #pagination li a { position: relative; letter-spacing: .5px; }
#pagination span, #pagination a { display: block; float: left; width: auto; padding: 1px 10px 1px 10px; margin: 0; color: #000;  text-decoration: none; }
#pagination .active { padding: 1px 10px 1px 10px; background: #0462A7; color: #fff; border-radius: 3px; }
#pagination li:first-child span:before, #pagination li:first-child a:before, #pagination li:last-child span:after, #pagination li:last-child a:after { position: absolute; display: block; width: 9px; height: 12px;  margin-top: -7px; content: ""; }
#pagination li:first-child a, #pagination li:first-child span{ background: none; }
#pagination li:first-child span:before, #pagination li:first-child a:before { top: 50%; left: 0; background-size: 9px 16px; }
#pagination li:last-child:hover { opacity: .6; }
#pagination li:last-child a, #pagination li:last-child span { margin: 2px 0px; background: none; }
#pagination li:last-child span:after, #pagination li:last-child a:after { top: 50%; right: 0; background-size: 9px 16px; }

/* Single page */
.TitleSingle{ font-size: 26px; font-weight: 600; color: #000; margin-top: 30px; margin-bottom: 20px; }
.FeatureImage{ margin-top: 40px;}
.FeatureImage img{ width: 100%; height: auto; max-width: 100%; border-radius: 10px;}
.CatLink{ margin: 0;}
.CatLink a{ background-color: #0462A7; color: #fff; padding: 3px 10px; border-radius: 100px; font-size: 13px;}
.CatLink a:hover{ background-color: #E6F1F8; color: #0462A7; }
.SingleDetail{ margin: 30px 0; font-size: 18px; font-weight: 400; font-family: "Noto Sans Thai Looped", sans-serif; }
.SingleDetail p{ margin: 15px 0;}
.SingleDetail img{ display: block; margin: auto; margin-top: 20px; margin-bottom: 20px; border-radius: 10px;}
.SingleDetail ul{margin-left: 30px}
.SingleDetail ul li{list-style:disc;margin-bottom: 10px;}
.SingleDetail iframe { margin: 10px 0; position: relative; top: 0; left: 0; width: 100%; height: 380px; }
.SingleDetail h2{ font-size: 21px;}
.SingleDetail h3{ font-size: 18px;}
.SingleDetail a{ color: #0462A7;}
.AuthorBox{ margin: 10px 0 40px 0; display: flex; justify-content: left; align-items: center; gap: 2%; background-color: #F0F0FF; padding: 30px; border-radius: 10px; font-family: "Noto Sans Thai Looped", sans-serif;}
.AuthorBox .AuthorAvatar{ width: 120px;}
.AuthorBox .AuthorAvatar img{ border-radius: 100px;}
.AuthorBox .AuthorInfors{ width: 100%; }
.AuthorBox .AuthorInfors p{ margin: 0; }
.AuthorBox .AuthorInfors .AuthorName{ font-size: 15px; font-weight: 600; margin-bottom: 5px;}
.AuthorBox .AuthorInfors .AuthorDescription{ font-size: 14px; line-height: 18px;}

.AffiliateBox{ margin: 40px 0 60px 0;}
.AffiliateBox a{ position: relative; display: flex; justify-content: left; align-items: center; gap: 2%; background-color: #0462A7; color: #fff; padding: 15px; border-radius: 10px; font-family: "Noto Sans Thai Looped", sans-serif;}
.AffiliateBox a:before{ width: auto; height: auto; position: absolute; content: 'Recommended'; padding: 0px 10px; font-size: 10px; top: -15px; border-radius: 100px; background-color: #eee; color: #000; }
.AffiliateBox a:hover{ color: #fff;}
.AffiliateBox .AffiliatePhoto{ width: 120px;}
.AffiliateBox .AffiliatePhoto img{ border-radius: 8px;}
.AffiliateBox .AffiliateInfors{ width: 100%; }
.AffiliateBox .AffiliateInfors p{ margin: 0; }
.AffiliateBox .AffiliateInfors .AffiliateTitle{ font-size: 18px; font-weight: 500;}
.Backto{ margin: 40px 0 60px 0; text-align: center; padding-top: 40px; border-top: 1px solid #eee;}
.Backto a{ padding: 10px 20px; font-size: 14px; font-weight: 600; background-color: #0462A7; color: #fff; border-radius: 5px; }
.Backto img{ width: 8px; height: auto; vertical-align: middle; margin-right: 5px; filter: brightness(0) invert(1); }
.Backto a:hover{ background-color: #E6F1F8; color: #0462A7; }
.Backto a:hover img{ filter: brightness(1) invert(0); }

/* -------------------------------------  1023px  ------------------------------------- */
@media(max-width:1023px)
{
    /* KeyPointToppage */
    .KeyPointToppage{ margin: 20px 20px 60px 20px;}
    .KeyPointToppage .slick-prev{ left: 0px!important;}
    .KeyPointToppage .slick-next{ right: 0px!important;}
    .SearchBoxToppage .search:before{ top: 0px;}
    .ContentDetail{ margin: 40px 20px 40px 20px;}
    .AuthorBox{ margin: 40px 20px 40px 20px;}
    .AffiliateBox{ margin: 40px 20px 60px 20px;}
    .Backto{ margin: 40px 20px 60px 20px;}
}

/* -------------------------------------  767px  ------------------------------------- */
@media(max-width:767px)
{
    /* FeatureToppage */
    .FeatureToppage ul li .Picture{ height: 350px;}
}

/* -------------------------------------  640px  ------------------------------------- */
@media(max-width:640px)
{
    /* FeatureToppage */
    .FeatureToppage ul li .Picture{ height: 280px;}

    /* CategoryList */
    .CategoryList ul{ gap: 10%;  }
    .CategoryList ul li{ width: 26%; margin-bottom: 20px; }
    .CategoryList ul li img{ max-width: 90%; }
    .CategoryList ul li p{ margin-top: 10px; font-size: 15px; line-height: 18px; }

    /* PostsLists */
    .PostsLists ul li a{ gap: 5%; }
    .PostsLists ul li a:after{ width: 10px; }
    .PostsLists ul li .Picture{ min-width: 100px; max-width: 100px;}
    .PostsLists ul li .Detail{ width: 100%; margin: 0; padding-right: 50px;}

    /* Single page */
    .TitleSingle{ font-size: 23px; font-weight: 600; }
    .FeatureImage{ margin-bottom: 20px;}
    .SingleDetail{ font-size: 16px; font-weight: 400; }
    .SingleDetail iframe { height: 250px; }
    .AuthorBox{ padding: 20px; gap: 5%; }
    .AuthorBox .AuthorInfors .AuthorName{ font-size: 14px; }
    .AuthorBox .AuthorInfors .AuthorDescription{ font-size: 13px; }
    .AffiliateBox a{ align-items: flex-start;}
    .AffiliateBox .AffiliatePhoto img{ margin-top: 3px; }
    .AffiliateBox .AffiliateInfors .AffiliateTitle{ font-size: 14px; line-height: 19px; }
}

/* -------------------------------------  500px  ------------------------------------- */
@media(max-width:500px)
{
    /* CategoryTopPage */
    .CategoryTopPage{ margin: 40px 10px; }
    .CategoryTopPage ul{ gap: 1%; }
    .CategoryTopPage ul li{ width: 19.2%;}
    .CategoryTopPage ul li img{ max-width: 80%;}
    .CategoryTopPage ul li p{ margin-top: 4px; font-size: 12px; line-height: 16px; }
    .CategoryTopPage ul li:last-child a{ font-size: 13px; font-weight: 500; line-height: 17px;}

    /* KeyPointToppage */
    .KeyPointToppage ul{ margin: 0; padding: 0 10px; }
    .KeyPointToppage ul li{ font-size: 14px; line-height: 21px; }
    .KeyPointToppage ul li .Title{ padding: 5px 10px 15px 10px; font-size: 14px; font-weight: 400; line-height: 18px;}
    .KeyPointToppage .slick-slide{ margin-left: 10px; margin-right: 10px;}
    .KeyPointToppage .slick-list{ margin-left: -10px; margin-right: -10px;}
    .KeyPointToppage .slick-prev:before { width:20px!important; height: 20px!important; }
    .KeyPointToppage .slick-next:before { width: 20px!important; height: 20px!important; }
    .KeyPointToppage .slick-prev, .KeyPointToppage .slick-next{ width: 20px!important; height: 20px!important; }
    .KeyPointToppage .slick-prev{ left: -10px!important;}
    .KeyPointToppage .slick-next{ right: -10px!important;}

    /* PostsLists */
    .PostsLists ul li a{ gap: 5%; }
    .PostsLists ul li a:after{ width: 8px; }
    .PostsLists ul li .Picture{ min-width: 85px; max-width: 85px;}
    .PostsLists ul li .Detail{ padding-right: 30px;}
    .PostsLists ul li .Detail .Title{ font-size: 15px; line-height: 20px; }
    .PostsLists ul li .Detail .Description{ margin-top: 5px; font-size: 13px; line-height: 18px; -webkit-line-clamp: 1; }
}