@import url("news.css");
@import url("vdo.css");

* {font-family: 'Kanit','Roboto', sans-serif;}

body{min-height: 100vh; position: relative;}
main {padding-bottom: 300px;}
.container {padding: 0 20px;}
h1,h2,h3,h4,h5,h6,span,div,p,label {font-size: 1rem; font-weight: 300;}
a {text-decoration: none; color: #000;}
a:hover {color: #000;}
.form-check-input:checked {background-color: var(--green); border-color: var(--gray);}

:root {
    --green:#2c6f39;
    --green-light: #e9f7e9;
    --green-card: #deedde;
    --violet: #662387;
    --yellow: #fbf050;
    --gray: #656565;
    --bg-card: #f7f4f9;
    --white: #fff;
    --list: #fcfcfc;
    --title-article: #2d2c2d;

    --font-chk: 0.7rem;
    --font-smaller: 0.8rem;
    --font-small: 0.9rem;
    --font-title: 1.2rem;
    --font-header: 1.8rem;
    --font-w: 200;
      
}

.wrap-greenlight {background-color: var(--green-light);}
.list {background-color: var(--list);}
.violet {color: var(--violet);}
.gray {color: var(--gray);}
.yellow {color: var(--yellow);}
.font-w {font-weight: 200;}
.font-chk {font-size: var(--font-chk);}
.font-smaller {font-size: var(--font-smaller);}
.font-small {font-size: var(--font-small);}
.font-title {font-size: var(--font-title); font-weight: bold;}
.font-titled {font-size: var(--font-title);}
.font-header {font-size: var(--font-header);}

.bg-green {background-color: var(--green);}
.link-next {font-size: var(--font-smaller); color: var(--green); padding-top: 5px;}
.show-date {font-size: var(--font-smaller); color: var(--gray);}
.title-article {font-size: var(--font-title); font-weight: bold; color: var(--title-article);}
.bg-card {background-color: var(--bg-card);}
.font-fund {color: var(--font-small);}
.card-body {padding: 15px;}
/* input::placeholder {color: #A7A7A7;} */
::placeholder {color: #A7A7A7!important; opacity: 1; /* Firefox */}
:-ms-input-placeholder{ color: #A7A7A7; /* Internet Explorer 10-11 */}
::-ms-input-placeholder { color: #A7A7A7; /* Microsoft Edge */}

.btn-violet button{background-color: var(--violet); color: var(--white); width: 100%;}
.btn-violet button:hover {background-color: var(--violet); color: var(--white);}

/***************************** navbar *****************************/
.navbar {position: -webkit-sticky; top: 0; z-index: 999; background-color: var(--white); width: 100%;}
.navbar .navbar-brand img {width: 75px;}
.navbar input {border: unset;}
.brand-name {margin-right: 200px;}
.flag {width: 40px; height: 30px; margin-left: 10px;}
.flag img {width: 100%; height: 100%; object-fit: cover;}
.navbar .fa-bars {font-size: 35px; object-fit: cover; cursor: pointer;}
.navbar input {width: 100%; padding: 5px;}
.navbar input[type=search]:focus {outline: none;}
.navbar-nav .nav-scroll {font-size: 0.6rem;}
.navbar-nav h1 {font-size: var(--font-title); font-weight: bold;}

/***************************** navbar id *****************************/
/* #navbar {position: fixed; top: 0px; width: 100%; display: block; transition: top 0.3s; padding: 0;} */
/***************************** navbar scroll *****************************/
#navbar-scroll {position: fixed; top: -150px; width: 100%; display: block; transition: top 0.3s; padding: 0;}
#navbar-scroll .nav h1 {font-size: var(--font-small);}
#navbar-scroll .nav h2 {font-size: var(--font-smaller);}
#navbar-scroll .navbar-brand img {width: 53px;}
#navbar-scroll input {width: 85%;}
#navbar-scroll input[type=search]:focus {outline: none;}

/***************************** sidenav *****************************/
#sidebar {display: none; z-index: 1000; position: fixed; top: 0; cursor: pointer; height: 100vh; background: rgba(255, 255, 255, 0.9); overflow: hidden;}
#sidebar .nav h1 {font-size: var(--font-small);}
#sidebar .nav h2 {font-size: var(--font-small);}
#sidebar .navbar-brand img {width: 60px;}
#sidebar .sidebar-menu li {padding: 8px;}
#sidebar .side-nav {background-color: white; box-shadow: 0px 0px 10px 0.3px #ccc; height: 100vh;}
#sidebar .side-nav .close i {margin-right: 30%;}
#sidebar .fa-rectangle-xmark {font-size: 3rem;}

.flug-sidenav {margin: 5% 0 0 50%;}

/***************************** carousel *****************************/
/* .carousel-item {height: 40%;}
.carousel-item img {width: 100%; height: 100%;} */

.splide__slide img {width: 100%; height: auto;}
.splide__arrow {background-color: var(--white)!important; border-radius: 28%!important; border: 1px!important;}

/***************************** activity *****************************/
.activity .wrap-img {width: 100%; height: 100%;}
.activity .wrap-img img {width: 100%; height: 100%; text-align: center; object-fit: cover;}
.activity button{background-color: var(--violet); color: var(--white); font-weight: var(--font-w);}
.activity button:hover {background-color: var(--violet); color: var(--white);}
.activate {font-size: 0.8rem; padding-right: 7px; color: var(--violet);}
/* .activate:hover {text-decoration: underline; color: var(--violet);} */

/***************************** news ****************************/
.news .card-title {display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
.news .wrap-img {width: 100%; text-align: center;}
.news .wrap-img img {width: 100%; height: 100%;}

/*********************************** openhouse ***********************************/
.openhouse a:hover {color: #000;}
.openhouse .wrap-img {width: 100%; height: 350px; text-align: center;}
.openhouse .wrap-img img {width: 80%; height: 100%; object-fit: cover;}
.openhouse .card-title {height: 50px; font-size: var(--font-title);}
.openhouse .card {position: relative;}
.openhouse .card .no {position: absolute; top: 0; left: 0; width: 100px; background-color: var(--violet); text-align: center; padding: 15px 0;} 

/*********************************** mission ***********************************/
.mission .mission-card {width: 45%; margin: 0 auto;}
.mission .mission-card .card-body {background-color: var(--green-light);}
.mission .mission-card .card-title {font-size: var(--font-header); font-weight: bold; color: var(--title-article);}
.mission .mission-card .card-text {color: var(--gray); font-size: var(--font-small);}
.mission .fund .card {background-color: var(--green-card); border: unset;}
.mission .fund .card-body {border-left: 5px solid var(--green);}
.mission .fund .wrap-img {width: 60px; height: 60px;}
.mission .fund .wrap-img img{width: 100%; height: 100%; object-fit: cover;}
.mission .fund .detail {height: 130px;}

/*********************************** services ***********************************/
.service {padding: 70px 0;}
.service .card-body .img {width: 130px; height: 130px;}
.service .card-body .img img {width: 100%; height: 100%; object-fit: cover;}
.service h6 {padding-top: 20px;}
.service .type {text-align: center; color: var(--title-article);}
.service .type .wrap-img {width: 100px; height: 100px; margin: auto;} 
.service .type .wrap-img img {width: 80%; height: 80%;}

/*********************************** footer ***********************************/
footer {position: absolute; bottom: 0; width: 100%; background-color: var(--green); color: var(--white); font-size: var(--font-small); font-weight: normal; padding: 45px 0; z-index: 100;}
footer h6 {font-size: var(--font-small); text-decoration: underline;}
footer h5 {font-size: var(--font-small);}

/*********************************** scroll to top ***********************************/
#arrow {z-index: 5; width: 38px; height: 38px; border-radius: 13px; position: fixed; right: 35px; bottom: 25px; text-align: center; display: flex; align-items: center; justify-content: center; background-color: white; cursor: pointer;}

/*********************************** question-website ***********************************/
.question-website {width: 300px; height: 160px; background-color: #377d44; position: fixed; bottom: 5px; right: 31px; z-index: 105;}
.question-website .text-title {font-size: var(--font-small); font-weight: 200; display: block;}
.question-website .click-question {border: 1px solid white; background-color: transparent; border-radius: 10px; font-size: var(--font-small); font-weight: 200;}
.question-website .fa-file-invoice {font-size: 60px;}
.question-website .wrap {width: 200px;}


/********************** @media ***********************/
@media (max-width: 576px) {
	.activity .activate {display: block; padding: 10px 0; width: 100%; float: left;}
    .activity .activate span {float: right;} 
    .news .card-title {font-size: var(--font-smaller);}
    main {padding-bottom: 400px;}  
}

@media (max-width: 768px) {
	#sidebar .side-nav {padding-left: 10px;}
    #sidebar .side-nav .close i {margin-right: 10%;}
	/* #navbar-scroll {position: fixed; top: -110px;}   */
    .openhouse .wrap-img img {width: 75%;}
}

@media (max-width: 992px) {
    #navbar .nav h1 {font-size: var(--font-small);}
    #navbar .nav h2 {font-size: var(--font-smaller);}
    #navbar .navbar-brand img {width: 53px;}
	.news-detail .side-detail .wrap-img {height: 100%;}
    /* .container{ width: 95%; max-width: fit-content !important;}  */
    .mission .mission-card {width: 100%;}
    .mission .card-title, .news .card-title, .openhouse .card-title {font-size: unset;}
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .openhouse .wrap-img {height: 250px;}   
}