/* General Styling */
:root {
   --primary-blue: #5BC0DE; /* Brighter, more vibrant blue */
   --secondary-yellow: #FFDDA0; /* Soft Yellow remains */
   --text-dark: #333;
   --text-light: #555;
   --background-light: #E0F8F8; /* Light cyan background for a fresh feel */
   --border-color: #B0E0E6;
   --box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
   --hover-effect: translateY(-4px);
   --transition-speed: 0.3s ease;
}

body {
   font-family: 'Sukhumvit Set', 'Helvetica Neue', Arial, sans-serif;
   margin: 0;
   padding: 0;
   background-color: var(--background-light); /* Apply new light cyan background */
   color: var(--text-dark);
   line-height: 1.6;
}

.container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0px;
}

/* Header */
header {
   background-color: var(--primary-blue); /* Apply brighter primary blue */
   color: white;
   padding: 15px 0;
   box-shadow: var(--box-shadow);
   top: 0;
   z-index: 1000;
}
/* Header Specific Styling - for Logo and Title */
header .logo-container {
    display: flex; /* จัดเรียงโลโก้และชื่อให้อยู่ในแนวนอนเดียวกัน */
    align-items: center; /* จัดให้อยู่กึ่งกลางในแนวตั้ง */
    gap: 15px; /* ระยะห่างระหว่างโลโก้กับชื่อ */
}

header .school-logo {
    height: 60px; /* กำหนดความสูงของโลโก้ */
    width: auto; /* รักษาสัดส่วน */
    max-width: 70px; /* จำกัดความกว้างสูงสุด */
    border-radius: 8px; /* เพิ่มขอบมนเล็กน้อยให้โลโก้ (ถ้าเป็นรูปสี่เหลี่ยม) */
}

/* ปรับ h1 ใน header เพื่อให้จัดเรียงได้ดีขึ้น */
header h1 {
    margin: 0;
    font-size: 2.2em;
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.15);
 /* ป้องกันไม่ให้ชื่อเว็บไซต์ขึ้นบรรทัดใหม่ */
}

/* Responsive adjustment for header logo */
@media (max-width: 768px) {
    header .logo-container {
        flex-direction: column; /* บนมือถือ ให้โลโก้อยู่บนชื่อ */
        gap: 15px;
    }
    header .school-logo {
        height: 40px; /* ลดขนาดโลโก้บนมือถือ */
    }
    header h1 {
        font-size: 1em; /* ลดขนาดชื่อบนมือถือ */
    }
}

header .container {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

header h1 {
   margin: 0;
   font-size: 1.8em;
   color: white;
   text-shadow: 1px 1px 2px rgba(0,0,0,0.15);
}

nav ul {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
}

nav ul li {
   margin-left: 10px;
}

nav ul li a {
   color: white;
   text-decoration: none;
   font-weight: bold;
   font-size: 1.1em;
   padding: 5px 0;
   transition: var(--transition-speed);
   position: relative;
}

nav ul li a::after {
   content: '';
   position: absolute;
   width: 0;
   height: 2px;
   display: block;
   margin-top: 5px;
   right: 0;
   background: var(--secondary-yellow);
   transition: width var(--transition-speed) ease;
   -webkit-transition: width var(--transition-speed) ease;
}

nav ul li a:hover::after {
   width: 100%;
   left: 0;
   background: var(--secondary-yellow);
}

nav ul li a:hover {
   color: var(--secondary-yellow);
}

/* Main Content */
main {
   padding: 30px 0;
}

.section-title {
   text-align: center;
   font-size: 2.5em;
   color: var(--primary-blue); /* Apply brighter primary blue */
   margin-bottom: 40px;
   padding-bottom: 10px;
   position: relative;
}

.section-title::after {
   content: '';
   position: absolute;
   width: 80px;
   height: 4px;
   background-color: var(--secondary-yellow);
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   border-radius: 2px;
}

.card {
   background-color: white;
   border-radius: 10px;
   box-shadow: var(--box-shadow);
   padding: 25px;
   margin-bottom: 25px;
   transition: transform var(--transition-speed);
}

.card:hover {
   transform: var(--hover-effect);
}

/* Homepage Specific */
.welcome-section {
   text-align: center;
   padding: 50px 0;
   background-color: white;
   border-radius: 10px;
   margin-bottom: 30px;
   box-shadow: var(--box-shadow);
}

.welcome-section h2 {
   color: var(--primary-blue); /* Apply brighter primary blue */
   font-size: 3em;
   margin-bottom: 15px;
}

.welcome-section p {
   font-size: 1.2em;
   color: var(--text-light);
   max-width: 800px;
   margin: 0 auto;
}










/* ITA Section */
.ita-section .grid-container {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 20px;
}

.ita-section .grid-item {
   background-color: var(--secondary-yellow);
   padding: 20px;
   border-radius: 8px;
   text-align: center;
   font-weight: bold;
   color: var(--text-dark);
   box-shadow: var(--box-shadow);
   transition: var(--transition-speed);
}

.ita-section .grid-item:hover {
   transform: var(--hover-effect);
   background-color: #FFC06C; /* Slightly darker yellow on hover */
}

.ita-main-topics {
   display: flex;
   justify-content: space-around;
   flex-wrap: wrap;
   margin-bottom: 30px;
   gap: 20px;
}

.ita-main-topics .card {
   flex: 1;
   min-width: 280px;
   text-align: center;
   background-color: var(--primary-blue); /* Apply brighter primary blue */
   color: white;
   font-size: 1.1em;
   font-weight: bold;
   padding: 30px;
}

.ita-main-topics .card:hover {
   background-color: #4AACC8; /* Slightly darker blue on hover */
}

.ita-sub-topics {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 20px;
}

.ita-sub-topics .card {
   background-color: white;
   color: var(--text-dark);
   font-size: 1em;
   padding: 20px;
   border: 1px solid var(--border-color);
}

/* News Section */
.news-section {
   text-align: center;
}

.news-section .facebook-embed {
   max-width: 500px; /* Adjust as needed */
   margin: 0 auto;
   background-color: white;
   border-radius: 10px;
   box-shadow: var(--box-shadow);
   overflow: hidden; /* Ensures embed doesn't overflow rounded corners */
}

/* School Info Page */
.info-columns {
   display: flex;
   flex-wrap: wrap;
   gap: 30px;
   justify-content: center;
}

.info-columns .column {
   flex: 1;
   min-width: 45%; /* Adjust for 2 columns */
   background-color: white;
   padding: 30px;
   border-radius: 10px;
   box-shadow: var(--box-shadow);
}

.info-columns .column h3 {
   color: var(--primary-blue); /* Apply brighter primary blue */
   font-size: 1.8em;
   margin-bottom: 15px;
}

.info-columns .column p, .info-columns .column ul {
   color: var(--text-light);
   font-size: 1.1em;
   line-height: 1.8;
}

.info-columns .column ul {
   list-style: none;
   padding: 0;
}

.info-columns .column ul li:before {
   content: "•";
   color: var(--secondary-yellow);
   font-weight: bold;
   display: inline-block;
   width: 1em;
   margin-left: -1em;
}

.info-image {
   text-align: center;
   margin-bottom: 20px;
}

.info-image img {
   max-width: 100%;
   height: auto;
   border-radius: 10px;
   box-shadow: var(--box-shadow);
}


/* Location Page */
.map-container {
   text-align: center;
   margin-bottom: 30px;
}

.map-container iframe {
   width: 100%;
   max-width: 800px;
   height: 450px;
   border: 0;
   border-radius: 10px;
   box-shadow: var(--box-shadow);
}

.service-area-list {
   display: flex;
   flex-direction: column;
   align-items: center;
}

.service-area-list .card {
   width: 100%;
   max-width: 600px;
   text-align: center;
}

.service-area-list ul {
   list-style: none;
   padding: 0;
   margin-top: 15px;
}

.service-area-list ul li {
   font-size: 1.1em;
   margin-bottom: 8px;
   color: var(--text-light);
}

.service-area-list ul li::before {
   content: "•";
   color: var(--secondary-yellow);
   font-weight: bold;
   display: inline-block;
   width: 1em;
   margin-left: -1em;
}


/* Personnel Page */
.personnel-grid {
   display: grid;
   gap: 30px;
}

.personnel-category {
   margin-bottom: 40px;
}

.personnel-category h3 {
   font-size: 2em;
   color: var(--primary-blue); /* Apply brighter primary blue */
   text-align: center;
   margin-bottom: 25px;
}

.personnel-cards {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 25px;
   justify-content: center;
}

.personnel-card {
   background-color: white;
   border-radius: 10px;
   box-shadow: var(--box-shadow);
   padding: 20px;
   text-align: center;
   transition: transform var(--transition-speed);
}

.personnel-card:hover {
   transform: var(--hover-effect);
}

.personnel-card img {
   width: 150px;
   height: 150px;
   border-radius: 50%;
   object-fit: cover;
   margin-bottom: 15px;
   border: 3px solid var(--primary-blue); /* Apply brighter primary blue */
   box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.personnel-card h4 {
   color: var(--text-dark);
   margin-bottom: 5px;
   font-size: 1.3em;
}

.personnel-card p {
   color: var(--text-light);
   font-size: 1em;
}

/* Footer */
footer {
   background-color: var(--primary-blue); /* Apply brighter primary blue */
   color: white;
   padding: 20px 0;
   text-align: center;
   margin-top: 50px;
   box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.05);
}

footer p {
   margin: 5px 0;
   font-size: 0.95em;
}

/* Responsive Design */
@media (max-width: 768px) {
   header .container {
       flex-direction: column;
       text-align: center;
   }

   nav ul {
       flex-direction: column;
       margin-top: 15px;
   }

   nav ul li {
       margin: 5px 0;
   }

   .welcome-section h2 {
       font-size: 2.2em;
   }

   .section-title {
       font-size: 2em;
   }

   .info-columns .column {
       min-width: 90%;
   }

   .personnel-cards {
       grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   }
}

@media (max-width: 480px) {
   header h1 {
       font-size: 1.8em;
   }

   .welcome-section h2 {
       font-size: 1.8em;
   }

   .welcome-section p {
       font-size: 1em;
   }

   .slider-images img {
       height: 250px;
   }

   .section-title {
       font-size: 1.8em;
   }

   .ita-main-topics .card {
       padding: 20px;
   }

   .ita-sub-topics {
       grid-template-columns: 1fr;
   }

   .personnel-card img {
       width: 100px;
       height: 100px;
   }
}