/*!
 * Fine Arts Department v1 theme child (https://www.finearts.go.th/)
 * Copyright 2024 Fine Arts Department
 */

 @import url('https://fonts.googleapis.com/css2?family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
 @import url("../contact.css");

 body{ font-family: "Prompt", sans-serif; font-weight: 400; font-style: normal; font-size: 16px;}
 
 a { cursor: pointer; color: #0d6efd; }
 a, a:hover { text-decoration: none; }
 :root{--prime-ten:#956cf8;}
 
 a.nav-link{color: #000;}
 .navbar-nav .nav-link.active{color: #FFF; text-decoration: underline solid white; text-underline-offset: 0.7em; }
 @media (min-width: 1400px) { .xxl-mx-auto { margin-right: auto; margin-left: auto;} }
 @media (min-width: 1301px) and (max-width: 1399.98px) { .xxl-mx-auto { margin-right: auto; margin-left: auto;}}
 @media (min-width: 992px) and (max-width: 1300px) { .xl-ms-auto {margin-left: auto;} }
 @media (min-width: 992px) and (max-width: 1100px) { .xl-ms-auto { font-size: 14.5px;} }
 .dropdown-menu .dropdown-item:hover{background-color: #b294f8 !important; }
 
 /* ============ desktop view MouseOver Menu ============ */
 @media all and (min-width: 992px) {
	 .navbar .nav-item .dropdown-menu{ display: none; }
	 .navbar .nav-item:hover .nav-link{ }
	 .navbar .nav-item:hover .dropdown-menu{ display: block; }
	 .navbar .nav-item .dropdown-menu{ margin-top:0; background-color: rgba(164, 127, 252, 1) !important; border: 0; color: #000;}
   .navbar .nav-item .dropdown-menu:hover{}
 }	
 /* ============ desktop view .end// ==================== */
 
 .logo img{filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.5));}
 .logo {margin-top: -30px; position: absolute;}
 @media (max-width: 992px) { .logo {margin-top: 0; position: relative;} }
 @media (min-width: 768px) and (max-width: 991px) {.logo { position: relative !important;}   }
 @media (min-width: 576px) {.md-px-5 {padding-left: 3rem; padding-right: 3rem;} }
 .menu-hamburger {z-index: 1;}
 
 /* Select Language */
 .w-131px{width: 131px;}
 .h-20px{height: 20px;}
 .language-style .select2-search__field {display: none;}
 .select2-search__field {display: none;}
 .language-style .select2-container--default .select2-selection--single{background-color: transparent; border: 0;}
 .language-style .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
   border-color: transparent transparent #444 transparent;}
 .language-style .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: #444 transparent transparent transparent;}
 .select2-search--dropdown{padding: 0;}
 .select2-search--dropdown{background-color: transparent;}
 .select2-dropdown{background-color: transparent;  border: 0;}
 #select2-kt_docs_select2_country-results li {background-color: #a47ffc !important; color: #444;}
 #select2-kt_docs_select2_country-results li:hover {background-color: #b294f8 !important; color: #444;}
 #select2-kt_docs_select2_country-results {border-radius: 8px;}
 #select2-kt_docs_select2_country-results .select2-results__option span{color: #444;}
 
 .textwww{color: #000; font-size: 14px; display: inline-block; align-content: center;}
 .textwww:hover{color: #444;}
 .bg-search{background-color: #a583f8 !important;  border-radius: 30px; border: 0;}
 .bg-search::placeholder {color: white; font-size: 14px;  font-family: "Sarabun", sans-serif;  font-weight: 400; }
 .bg-search:focus::placeholder { color: #333;}
 .bg-lightblue0{ background-image: linear-gradient(to right, rgba(74, 194, 203, .5), rgba(74, 194, 203, .5)), url('../../images/bg-1.png');
	 background-size: cover, cover;  background-position: center, center;  background-repeat: no-repeat, no-repeat;}
 /*.bg-lightblue{background-color: #956cf8 !important;}*/
 .bg-lightblueTriangle {position: relative; z-index: 1;}
 /*.bg-lightblueTriangle { position: absolute; inset: 0 }*/
 .centerTriangle { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); background-color: #54c4cb; }
 .bg-head-img {background-color: #956cf8 !important; background-image: url(../../images/bg-header-purple.png); background-repeat: no-repeat; background-size: cover; background-position:left 0px bottom -40px;}
 
 /*.BACKGROUND*/
 .fancy-feature-nineteen:before {content: ''; position: absolute; width: 100%; height: 40px;  left: 0; bottom: -38px; z-index: -1;
   background: 
	url(../../images/bg-header-purple.png) left 5px bottom 0px / cover no-repeat,
	url(../../images/shape_86_purple.svg) center bottom / cover no-repeat;}
 .fancy-feature-nineteen .shape-three {position: relative;  width: 30px; height: 30px;  left: 20%;  bottom: -40px; background: #6a49f2;}
 @media (max-width: 576px) {
   .fancy-feature-nineteen:before{background: url(../../images/shape_86_purple.svg) center bottom / cover no-repeat;}
   .bg-head-img {background-image: none;}
 }
 
 .w-80{width: 80%;}
 
 /* CUSTOMIZE THE CAROUSEL
 -------------------------------------------------- */
 /* Carousel base class */
 .carousel { margin-bottom: 4rem; }
   /* Since positioning the image, we need to help out the caption */
   .carousel-caption { bottom: 3rem; z-index: 10; }
   /* Declare heights because of positioning of img element */
   .carousel-indicators [data-bs-target]{height: 12px; width: 12px; border-radius: 50%; margin-right: 4px; margin-left: 4px; opacity: 1; border-top:0; border-bottom:0;}
   .carousel-indicators {bottom: -45px; margin-bottom: 0;}
   .carousel{margin-bottom: 0;}
   .carousel-indicators .active{height: 9px; width: 9px; opacity: 1; border: 2px solid white; background-color: transparent;}
 
   /* NEWS Tab
 -------------------------------------------------- */
 .news-tab {border-bottom:0;}
 .news-tab .nav-link{color: #000; padding: 8px 25px 8px 25px; border: 1px solid #e6e6e6;}
 .news-tab .nav-link.active {background-color: #ff6c9d; color: #FFF;border: 1px solid #ff6c9d;}
 .card-text{height: 72px; overflow: hidden;}
 .text-date, .text-view {color:#76777a; font-size: 14px; font-family:"Sarabun";}
 .icon-eye, .icon-date {color:#949494; font-size: 13px;}
 .btn-outline-blue {border-radius: 20px; border: 1px solid #8e6dfa; color: #8e6dfa; padding: 4px 15px 4px 15px;}
 .btn-outline-blue:hover { border: 1px solid #8e6dfa; color: #8e6dfa; background-color: #f3effc;}
 .post-img{border-radius:10px; overflow:hidden; height:300px; object-fit: contain; background-color: #eaeced;}
 .tran4s { transition: .4s ease-in-out;}
 .card-text a{color: #000;}
 .card-text a:hover{color:#0d6efd;}
 .btn-viewall{color: #8e6dfa; font-weight: 500;}
 .btn-viewall:hover{color: #0d6efd;}
 .card{ background-color: transparent;}
 
 .list-news ul {list-style: none; margin-top: 40px;}
 .list-news ul li { padding-left: 30px; padding-top: 15px; padding-bottom: 15px; background-image: url(../../images/pdf.png); background-size: 20px 20px; background-repeat: no-repeat; background-position: 0px 15px; border-bottom: 1px dotted #c2c2c2;}
 .list-news ul li a{ color: #000;}
 .list-news ul li a:hover{color:#0d6efd;}
 .list-download ul {list-style: none; margin-top: 40px;}
 .list-download ul li { padding-left: 30px; padding-top: 15px; padding-bottom: 15px; background-image: url(../../images/pdf2.svg); background-size: 20px 26px; background-repeat: no-repeat; background-position: 0px 15px; border-bottom: 1px dashed #c2c2c2;}
 .list-download ul li a{ color: #000;}
 .list-download ul li a:hover{color:#0d6efd;}
 
   /* general knowledge
 -------------------------------------------------- */
 .fancy-km {background: #f5f5f5;  z-index: 1;}
 .fancy-km:before {
   content: ''; position: absolute; width: 100%; height: 26px; background: url(../../images/shape_87.svg) center top / cover no-repeat;
   left: 0; top: -25px; z-index: -1;}
 .fancy-km:after {
   content: ''; position: absolute; width: 100%; height: 40px; background: url(../../images/shape_88.svg) center bottom / cover no-repeat;
   left: 0; bottom: -38px; z-index: -2;}
 .fancy-km .shape-one {width: 30px; height: 30px; right: 21%; top: -40px; background: #ffca5b;}
 .fancy-km .shape-two {width: 30px; height: 30px; left: 30%; bottom: -40px; background: #ff3371;}
 .fancy-km .shape-three {width: 10px; height: 10px; left: 4%; top: 43%; background: #00d8af; animation: 5s linear infinite jumpThree;}
 .shapes {position: absolute; z-index: -1;}
 
 .title-style-one span { display: inline-block; position: relative; z-index: 1; font-size: 26px;}
 .title-style-one span:before { content: ''; position: absolute; left: 0; bottom: 1px; width: 100%; height: 13px;
   background: rgba(255, 63, 51, .4); z-index: -1;}
 .card-style-ten { border-radius: 10px; width: 100%; border: 1px solid #FFF;}
 .card-style-ten:hover{ border: 1px solid #cfcad4;}
 .tran3s {  transition: .3s ease-in-out;}
 .title-km{ font-weight: 500; font-size: 18px; height: 52px; overflow: hidden;}
 .title-km a{color: #000;}
 .title-km a:hover{color:#04b2c5;}
 .arrow-more {display: block; width: 39px; height: 15px; margin-top: 5px; background-image: url(../../images/icon_arrow_more.svg);  background-repeat: no-repeat;}
 .arrow-more:hover {background-image: url(../../images/icon_arrow_more_purple.svg);  background-repeat: no-repeat;}
 .btn-km { color: #FFF; background-color: #ff6c9d; border-radius: 50px; padding: 5px 30px 5px 30px;}
 .btn-km:hover {background-color: #f886ac;}
 
   /* ebook
 -------------------------------------------------- */
 .title-ebook {font-size: 24px; font-weight: 400;}
 .card-style-sixteen {padding: 25px 25px 35px; border: 1px solid #e9e9e9; border-radius: 10px; overflow: hidden; background-color: #FFF;}
 .card-style-sixteen .icon,.form-style-five .input-group-meta input{height:60px}
 .card-style-sixteen p, .card-style-sixteen p a{color:#000; padding-top: 20px; font-size: 18px; font-weight: 500; height: 75px; overflow: hidden;}
 .card-style-sixteen p a:hover{color:#333;}
 .card-style-sixteen .read-more{width:85px;height:85px;font-size:26px;color:#000;background:#f7f7f7;position:absolute;bottom:-30px;right:-30px;padding:11px 0 0 19px}
 .card-style-sixteen:hover .read-more{color:#fff;background:#ff6c9d;}
 .card-style-sixteen .read-more { width: 85px; height: 85px; font-size: 26px; color: #000; background: #f7f7f7;
   position: absolute; bottom: -30px; right: -30px; padding: 11px 0 0 19px;}
 .card-style-sixteen:hover{border-color:#ff6c9d;}
 .arrow-ebook{font-size: 20px;}
 .card-style-sixteen .eye-view{ position: absolute; bottom: 5px; left: 35px; width: 100px; height: 30px;    text-align: left;}
 
   /* video
 -------------------------------------------------- */
 .fancy-video.bg { background: #956cf8 !important; z-index: 1;}
 .fancy-video.bg:before { content: ''; position: absolute; width: 100%; height: 26px; background: url(../../images/shape_87_purple.svg) center top / cover no-repeat;
 left: 0; top: -25px; z-index: -1;}
 .fancy-video.bg:after {  content: '';  position: absolute; width: 100%; height: 40px; background: url(../../images/shape_86_purple.svg) center bottom / cover no-repeat;
 left: 0; bottom: -38px; z-index: -2;}
 .slick-dots li.slick-active button:before { opacity: 1; color: #ff3f33;}
 .slick-dots li button:before {font-size: 11px; color: #FFF; opacity: 1;}
 .slick-dots li {margin: 0 2px;}
 .fancy-video .slick-next, .fancy-video .slick-prev {display: none !important;}
 /*.fancy-video .slider-wrapper { width: calc(1320px + 30vw); margin: 0 -20px;}*/
 .slick-list.draggable{padding: 0 !important;}
 .fancy-video.bg .shape-two { width: 14px; height: 14px; left: 26%; bottom: -37px; background: #ff9870;}
 .vdo-all{ color: #FFF; }
 .vdo-all:hover { color: #0d6efd; }
 
   /* Footer
 -------------------------------------------------- */
 .footer-style-one { padding: 0 10%;}
 .footer-style-one .top-footer { border: 1px solid #e5e5e5; border-radius: 20px; padding: 50px 50px 50px; z-index: 1; background-color: #FFF;}
 .footer-style-one .shape-three { right: -4%; top: -11%;}
 .footer-style-one .shape-four { left: -6%; bottom: 7%;}
 .icon-footer{color: #48494e;}
 .name-org {font-size: 20px; font-weight: 500;}
 .call{color: #8e6dfa; font-size: 20px;}
 .email a{color: #000;}
 .footer-nav-link {list-style: none;}
 .footer-nav-link a { color: #48494e; font-size: 16px; line-height: 40px; transition: .3s ease-in-out;}
 .footer-nav-link a:hover{color: #0d6efd;}
 .bg-copyright{background-color: #956cf8; padding: 10px 0px 1px; font-size: 12px;}
 .copyright-style-one {padding: 0 8%;}
 .copyright-style-one a {color: #FFF;}
 .copyright-style-one a:hover {color: #0d6efd;}
 .icon-social a {color:#4a4a4f;}
 
 .scroll-top { width: 35px; height: 35px; line-height: 35px; position: fixed; bottom: 50px; right: 5px; z-index: 99; text-align: center;
   color: #fff !important; cursor: pointer; border-radius: 50%; background-color: #7a57d4;}
 .scroll-top:after { position: absolute; z-index: -1; content: ''; top: 100%; left: 5%; height: 10px;  width: 90%;  opacity: 1;
   background: radial-gradient(ellipse at center, rgba(0, 0, 0, .25) 0, rgba(0, 0, 0, 0) 80%);}
 #myBtn {  display: none;  position: fixed;  bottom: 70px;  right: 30px;  z-index: 99;  font-size: 18px; border: none;
   outline: none; background-color: #7a57d4; color: white; cursor: pointer; padding: 15px;border-radius: 50%; }
 #myBtn:hover {  background-color: #9570f5; }
 
 
 /* `sm` applies to x-small devices (portrait phones, less than 576px)
 -------------------------------------------------- */
 @media (max-width: 575.98px) { 
   .footer-style-one .top-footer {padding: 20px 15px 15px;}
   .footer-nav-link { margin: 0; padding: 0;}
   .footer-style-one .shape-four {  left: -26%;  bottom: 4%;}
   .footer-style-one .shape-three { right: 0;top: -6%;}
   .scroll-top{bottom: 102px;}
   }
 
 /* Medium devices (tablets, 768px and up)
 -------------------------------------------------- */
 @media (min-width: 768px) { 
   .footer-nav-link{padding: 0; margin: 0;}
 }
 
 @media (min-width: 576px) and (max-width: 991.98px) { 
   .scroll-top{bottom: 104px;}
   .footer-style-one .shape-four { left: -12%;}
   .footer-nav-link{padding: 0; margin: 0;}
  }
 
 /* Large devices (desktops, 992px and up)
 -------------------------------------------------- */
  @media (min-width: 992px) { 
   .scroll-top{bottom: 68px;}
 }
 
 @media (max-width: 992px) { 
   #myBtn{bottom: 103px; right: 10px;}
 }
 
 /* Accessibility Settings Bar
 -------------------------------------------------- */
 #mic-toolbox-disable-buttons-keyboard, #mic-toolbox-disable-buttons-animations, #mic-toolbox-cursor-big-white, 
 #mic-toolbox-cursor-big-black, #mic-toolbox-zoom-up, #mic-toolbox-content-links, #mic-toolbox-content-headers,
 #mic-toolbox-content-images, #mic-toolbox-fonts-simple {display: none !important;}
 .mic-access-tool-box div:nth-child(n+5){display: none !important;}
 .mic-access-tool-box div:nth-child(7n){display: block !important;}
 .mic-subtitle-span{display: none !important;}
 
 #mic-init-access-tool .mic-access-tool-general-button { background-color: #ff3371 !important;  border: solid 2px #ff3371 !important;}
 
 .bg-body2{background-color: #eae3f5;}
 .bg-body2.mic-toolbox-contrast-monochrome{background-color: #FFF !important;}
 .bg-body-blankpage {background-color: #FFF !important;}
 
 /* PAGE
 -------------------------------------------------- */
 .title-page{ font-size: 24px;}
 .breadcrumb-line { border-bottom: 1px dashed #ddd; width: 100%; min-height: 35px; display: block; font-family: Sarabun; font-size: 14px;}
 .bg-head-blank-page{background-color: #956cf8;}
 .fancy-page:before {content: ''; position: absolute; width: 100%; height: 40px; left: 0; bottom: -38px; z-index: -1; 
   background: url(../../images/shape_86_purple.svg) center bottom / cover no-repeat;}
 
 /* Content tab list - (example: categorie/procurement) */
 .nav-link.active
 {
    background-color:#6a49f2 !important;
    color:#fff !important;
 }

 /* Button Color */
 .btn.btn-primary
 {
  background-color:#6a49f2 !important;
    color:#fff !important;
 }