:root {
        --color-primary: #000B3D; /* น้ำเงิน */
        --color-secondary: #E6A4B4; 
        --color-text: #000;
		 --color-textw: #FFF; 
		 --color-bgfaq:  #FFC423;
      }
      body {
        background-color: var(--color-primary); 
        color: var(--color-text);
		 font-family: "IBM Plex Sans Thai", sans-serif;  margin-top: 55px; 
		
      }
	 .bg-white{background-color: var(--color-textw);}
	#about, #faq, #why,#contact,#course,#whatdo {
        scroll-margin-top: 60px;
    }
      .navbar {
        background-color: var(--color-primary); /* Navbar สีชมพูอ่อน */
		 background:  var(--color-primary);color:  var(--color-textw);
		 position: fixed; top:0;width: 100%;opacity: 0.8; z-index: 6;
      }
	  .navbar a{color: var(--color-textw);}
	  
      .navbar-brand img {
        height: 40px;color: #000;
      }
      .nav-link {
		color:  var(--color-textw);
        font-weight: bold;
      }
      .nav-link:hover, .navbar a:hover{
        color: #ffc423 !important;
      }
	 .nav-link:focus {
        color: #ffff00;
      }
	  .navbar-toggler{border: solid 1px #FFF;}
	  .navbar-toggler-icon{color: #FFF;border-bottom: #FFF 1px solid;}
      .hero-section {
        background-color: var(--color-primary);
        color: #000;
        padding: 0; /* ลบ padding ออกเพื่อให้รูปภาพเต็มพื้นที่ */
        text-align: center;
      }
      .hero-image {
        width: 100%;
        height: auto;
        display: block; /* แก้ปัญหาช่องว่างด้านล่างรูปภาพ */
      }
	  footer{background:  var(--color-primary);color: #FFF;text-align:center;height: 50px;font-family: Verdana;font-size: 0.85em;margin-top: 25px;}
	  footer .col-12{padding-top: 20px;}
	  h1,h2{padding-top: 20px;}
	  h2{color: #000;font-weight: bold;}
	  h2 i{color: var(--color-primary);}
	  .btn-action{display:none;}
	  a{color: #000;text-decoration: none;}
	  #contact{font-size: 1.2em;}
	 #action-cta{width: 50px; height: 224px; border-radius: 10px 0 0 6px; background-color: var(--color-textw);display:block;text-align:center;
			  position: fixed; bottom: 10%;right: 0px;opacity: 0.85;padding-top: 10px;font-size: 0.8em;color: #000;font-family: Verdana;
			   box-shadow: 4px 4px 20px 8px #CCC;
		}
	#act-text{width: 45px;height: 45px; background-color: var(--color-primary);color:  var(--color-textw); border-radius: 50%;
				font-size: 0.8em;font-weight: bold;padding-top: 10px; margin: auto;
			 }

	#cloud {width: 84%;height: 350px; position: relative;margin: auto; text-align:center;}
	#timetable ul{text-align:left;width: 80%;margin: auto;}
	#logo-contact{width: 50%;}
	#action-octa{display:none;width: 40px; height: 40px;border-radius: 50%;padding-top: 6px;padding-left: 4px;right:-14px; position: fixed;bottom: 12%;background: #FFF;}
	#atc-close{position: absolute;top: -10px;right: 1px;color: #000;background-color: #FFF;border-radius: 20px;
	z-index: 4;height: 20px;width: 20px;margin: 0;padding:0;}
@media (max-width: 700px) {
  			h2{color: #000;font-size: 1.4em;}
			#btn-tel{left: -25px;text-align:right;padding-right: 10px;}
			#btn-line{right: -25px;text-align: left;padding-left: 10px;}
			#timetable ul{width: 90%;}
			#contact{font-size: 0.85em;}
			#action-cta{width: 60px;z-index: 5;}
			#cloud {width: 250px;height: 380px; z-index: 1;}		
			.navbar ul li{padding-left: 10px;border-bottom: dotted 1px #999;}
}

	  /* Question styles */
.question {
    padding: 2px;
    border-radius: 6px;
    background: white;
    transition: all 0.5s ease;
    margin-bottom: 15px;
    font-size: 1em;text-align:left !important;
}

.question:hover {
    background-color: var(--color-bgfaq);
}

.question.open {
    -webkit-box-shadow: 0px 0px 17px -1px rgba(0,0,0,0.13);
    -moz-box-shadow: 0px 0px 17px -1px rgba(0,0,0,0.13);
    box-shadow: 0px 0px 17px -1px rgba(0,0,0,0.13);
}

.question .faqAnswer { 
    display: none; 
    padding: 8px 20px;
    line-height: 28px;
    color: #000;
    font-size: 1.4em;
}

.question.open:hover {
    background: white;
}

.question h4 {
    border-radius: 6px;
    margin: 0px;
    padding: 10px;
    color: black;
    font-weight: 400;
    font-size: 20px;
    cursor: pointer;
}

.question h4.open {
    border-radius: 6px;
    margin: 0px;
    color: white;
    background-color: var(--color-bgfaq);
    cursor: pointer;
}

.question:hover h4 {
    color: white;
}