/* style.css */
:root {
    /* กำหนดสีหลักตามที่ผู้ใช้ต้องการ (Soft Pink / Hot Pink) */
    --primary-color: #ffb1b1; /* Hot Pink */
    --secondary-color: #ffffff; /* white */
    --text-color: #000000; /* White */
    --light-pink: #f9acac; /* Soft Pink สำหรับเน้น */
    --black: #000000; /* สำรอง */
}
{
      font-family: 'Prompt', sans-serif;
    }
    h1 {
      font-family: 'Prompt', sans-serif;
      font-weight: 700;
    }
    h2 {
      font-family: 'Prompt', sans-serif;
      font-weight: 700;
    } 
    h3 {
      font-family: 'Prompt', sans-serif;
      font-weight: 700;
    }
    h4 {
      font-family: 'Prompt', sans-serif;
      font-weight: 700;
    }
    p {
  font-family: 'Prompt', sans-serif;
  font-weight: 400;
    }

    a {
      font-family: 'Prompt', sans-serif;
      font-weight: 700;
    }
    h6 {
      font-family: 'Prompt', sans-serif;
      font-weight: 700;
    }   
 body {

  background: linear-gradient(270deg, #fdd2d2, #ffffff, #f8d9d9);
  background-size: 600% 600%;
  animation: gradientShift 8s ease infinite;
  color: var(--text-color);
  line-height: 1.6;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/* style.css */
/* ... โค้ด CSS ส่วนอื่นๆ ... */

/* เพิ่มโค้ด CSS สำหรับ Dropdown Menu ตรงนี้ */
.nav ul li {
    position: relative; 
    margin-left: 30px;
}

.dropdown-content {
    display: none; 
    position: absolute;
    /* ... โค้ดจัดรูปแบบอื่นๆ ... */
}

.show {
    display: block;
}

/* -------------------- HEADER & NAVIGATION -------------------- */
.header {
    /* ส่วนหัวสีชมพู */
    background-color: var(--primary-color);
    padding: 15px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 5px solid var(--light-pink);
}

.logo a {
    color: var(--secondary-color);
    text-decoration: none;
    font-size: 2em;
    font-weight: bold;
    letter-spacing: 2px;
}

.nav ul {
    list-style: none;
    display: flex;
}

.nav ul li {
    margin-left: 30px;
}

/* การตั้งค่าปุ่มเมนู */
.nav ul li a {
    color: var(--secondary-color);
    text-decoration: none;
    font-size: 1.1em;
    font-weight: bold;
    padding: 5px 10px;
    transition: background-color 0.3s ease;
}

/* Hover Effect สีดำ/ชมพู */
.nav ul li a:hover {
    background-color: var(--secondary-color);
    color: var(--primary-color);
}

/* -------------------- MAIN CONTENT STRUCTURE -------------------- */
.container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

h2 {
    color: var(--primary-color);
    text-align: center;
    font-size: 2.5em;
    border-bottom: 2px solid var(--light-pink);
    padding-bottom: 10px;
    display: block;
    width: fit-content;
    margin: 40px auto;
}

/* Hero Section (ส่วนต้อนรับ) */
.hero-section {
    min-height: 15vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #ffffff;
    margin-bottom: 40px;
    padding: 50px;
    border: 5px solid var(--primary-color);
    border-radius: 10px;
}

.hero-content h1 {
    font-size: 4em;
    margin-bottom: 10px;
    color: var(--light-pink);
    text-shadow: 2px 2px 4px var(--primary-color);
}

/* ปุ่ม Call to Action */
.cta-button {
    display: inline-block;
    padding: 15px 30px;
    background-color: var(--primary-color); 
    color: var(--secondary-color);
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.2s;
}

.cta-button:hover {
    background-color: var(--light-pink);
    transform: scale(1.05);
}

/* Feature Grid (ตารางจุดเด่น) */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.feature-item {
    background-color: #ffffff;
    padding: 25px;
    border-radius: 8px;
    border-left: 5px solid var(--primary-color);
    transition: background-color 0.3s;
}

.feature-item h3 {
    color: var(--primary-color);
    margin-bottom: 10px;
    font-size: 1.5em;
} 

/* -------------------- FOOTER -------------------- */
.footer {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    text-align: center;
    padding: 20px;
    margin-top: 50px;
}

/* -------------------- PAGE SPECIFIC STYLES (Curriculum) -------------------- */
.course-list {
    list-style-type: none;
    max-width: 800px;
    margin: 0 auto;
}

.course-item {
    background-color: #000000;
    border: 2px solid var(--light-pink);
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 5px;
}

.course-item strong {
    color: var(--primary-color);
    display: block;
    font-size: 1.1em;
}

.contact-info {
    text-align: center;
    padding: 50px;
    border: 1px solid var(--primary-color);
    border-radius: 10px;
}
/* style.css: ปรับปรุง UI/UX */

:root {
    --primary-color: #FF69B4; /* Hot Pink */
    --secondary-color: #000000; /* Black */
    --text-color: #FFFFFF; /* White */
    --light-pink: #F4A7B6; /* Soft Pink สำหรับเน้น */
    --dark-grey: #1A1A1A; /* สีเทาเข้มสำหรับพื้นหลัง Card */
    --border-radius: 8px; /* ความมนของมุมปุ่ม/Card */
    --transition-speed: 0.3s; /* ความเร็วในการเปลี่ยน Transition */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Prompt', sans-serif; /* ใช้ฟอนต์ Prompt */
}

body {
    background-color: var(--secondary-color);
    color: var(--text-color);
    line-height: 1.6;
    font-size: 1.1em; /* เพิ่มขนาดฟอนต์โดยรวม */
}

/* -------------------- HEADER & NAVIGATION -------------------- */
.header {
    background-color: var(--dark-grey); /* เปลี่ยน Header เป็นเทาเข้ม */
    padding: 15px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid var(--primary-color); /* เส้นขอบล่างสีชมพู */
}

.logo a {
    color: var(--primary-color); /* โลโก้สีชมพู */
    text-decoration: none;
    font-size: 2em;
    font-weight: bold;
    letter-spacing: 2px;
}
.logo img {
    max-height: 50px; /* เพิ่มขนาดโลโก้ให้ใหญ่ขึ้นเล็กน้อย */
    width: auto;
    display: block;
}

.nav ul {
    list-style: none;
    display: flex;
}

.nav ul li {
    position: relative;
    margin-left: 35px; /* เพิ่มระยะห่างระหว่างเมนู */
}

/* ปุ่มเมนูหลัก */
.nav ul li a {
    color: var(--text-color);
    text-decoration: none;
    font-size: 1.1em;
    font-weight: 500; /* ปรับน้ำหนักฟอนต์ */
    padding: 10px 15px; /* เพิ่มพื้นที่คลิกปุ่ม */
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
    border-radius: var(--border-radius); /* มุมมนของปุ่ม */
    display: block; /* ทำให้ลิงก์ครอบคลุมพื้นที่ปุ่ม */
}

/* Hover Effect ปุ่มเมนูหลัก */
.nav ul li a:hover,
.nav ul li .dropbtn:hover { /* เพิ่ม dropbtn ด้วย */
    background-color: var(--primary-color);
    color: var(--secondary-color);
}
/* Active/Current Page Link (เพิ่มถ้าต้องการเน้นหน้าปัจจุบัน) */
.nav ul li a.current-page {
    background-color: var(--light-pink);
    color: var(--secondary-color);
}


/* -------------------- Dropdown Menu (สำหรับหลักสูตร) -------------------- */
.dropdown-content {
    display: none;
    position: absolute;
    top: calc(100% + 5px); /* เลื่อนลงมาใต้ปุ่มหลักเล็กน้อย */
    left: 0;
    min-width: 220px; /* เพิ่มความกว้างของ Dropdown */
    background-color: var(--dark-grey); /* พื้นหลังเทาเข้ม */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
    z-index: 10;
    border: 1px solid var(--primary-color);
    border-radius: var(--border-radius);
    overflow: hidden; /* ซ่อนส่วนเกินเมื่อมีมุมมน */
}

.dropdown-content a {
    color: var(--text-color);
    padding: 12px 18px; /* เพิ่ม padding */
    text-decoration: none;
    display: block;
    font-weight: 400;
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* เพิ่มเส้นแบ่งย่อย */
}
.dropdown-content a:last-child {
    border-bottom: none; /* ไม่มีเส้นแบ่งที่ลิงก์สุดท้าย */
}

.dropdown-content a:hover {
    background-color: var(--primary-color);
    color: var(--secondary-color);
}

.show {
    display: block;
}


/* -------------------- MAIN CONTENT STRUCTURE -------------------- */
.container {
    max-width: 1200px;
    margin: 50px auto; /* เพิ่มระยะห่างด้านบน/ล่าง */
    padding: 0 30px; /* เพิ่ม padding ด้านข้าง */
}

h2 {
    color: var(--primary-color);
    text-align: center;
    font-size: 3em; /* เพิ่มขนาดหัวข้อ */
    font-weight: 700;
    border-bottom: 3px solid var(--light-pink);
    padding-bottom: 15px;
    display: block;
    width: fit-content;
    margin: 60px auto 40px auto; /* เพิ่มระยะห่าง */
    letter-spacing: 1px;
}

h3 {
    color: var(--light-pink); /* หัวข้อใน Card เป็นชมพูอ่อน */
    margin-bottom: 15px; /* เพิ่มระยะห่าง */
    font-size: 1.8em;
    font-weight: 600;
}

p {
    margin-bottom: 15px; /* เพิ่มระยะห่างระหว่างย่อหน้า */
}

/* -------------------- PRIMARY CALL TO ACTION BUTTON (ปุ่มสี่เหลี่ยม) -------------------- */
.cta-button {
    display: inline-block;
    padding: 18px 35px; /* เพิ่มขนาดปุ่ม */
    background-color: var(--primary-color);
    color: var(--secondary-color);
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2em; /* เพิ่มขนาดตัวอักษรในปุ่ม */
    border-radius: var(--border-radius); /* มุมมน */
    transition: background-color var(--transition-speed) ease, transform 0.2s, box-shadow var(--transition-speed) ease;
    border: none;
    cursor: pointer;
    text-transform: uppercase; /* ตัวพิมพ์ใหญ่ */
    letter-spacing: 1px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* เงาปุ่ม */
}

.cta-button:hover {
    background-color: var(--light-pink); /* เปลี่ยนเป็นชมพูอ่อนเมื่อ hover */
    transform: translateY(-3px); /* เลื่อนขึ้นเล็กน้อย */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4); /* เพิ่มเงา */
    color: var(--secondary-color);
}

/* Secondary Button Style (สำหรับปุ่มรอง, เช่น "ดูรายละเอียดวิชาแผน") */
.cta-button.secondary {
    background-color: var(--dark-grey); /* พื้นหลังเป็นเทาเข้ม */
    color: var(--primary-color); /* ตัวอักษรสีชมพู */
    border: 1px solid var(--primary-color);
    box-shadow: none;
}
.cta-button.secondary:hover {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border-color: var(--primary-color);
}


/* -------------------- Hero Section -------------------- */
.hero-section {
    min-height: 70vh; /* เพิ่มความสูง Hero */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #111;
    margin-bottom: 60px;
    padding: 80px; /* เพิ่ม padding */
    border: 5px solid var(--primary-color);
    border-radius: var(--border-radius);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.hero-content h1 {
    font-size: 5em; /* ขนาดใหญ่ขึ้น */
    margin-bottom: 20px;
    color: var(--light-pink);
    text-shadow: 4px 4px 8px var(--primary-color);
    line-height: 1.2;
}
.hero-content p {
    font-size: 1.4em; /* เพิ่มขนาดข้อความบรรยาย */
    max-width: 800px;
    margin: 0 auto 30px auto;
    color: rgba(255, 255, 255, 0.8);
}


/* -------------------- Card Layout (Features/Portfolio Items) -------------------- */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* ปรับขนาด Card */
    gap: 30px; /* เพิ่มระยะห่างระหว่าง Card */
    margin-top: 50px;
}

.feature-item {
    background-color: var(--dark-grey); /* พื้นหลัง Card เป็นเทาเข้ม */
    padding: 30px; /* เพิ่ม padding ใน Card */
    border-radius: var(--border-radius); /* มุมมน */
    border-left: 5px solid var(--primary-color); /* เส้นด้านซ้ายสีชมพู */
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* เงา Card */
}

.feature-item:hover {
    transform: translateY(-5px); /* เลื่อนขึ้นเมื่อ hover */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); /* เพิ่มเงาเมื่อ hover */
}

/* สำหรับ Card ที่มีลิงก์ (เช่น ในหน้า Landing Page หลักสูตร) */
.feature-item a.cta-button {
    margin-top: 20px;
}

/* -------------------- FOOTER -------------------- */
.footer {
    background-color: var(--dark-grey); /* Footer เป็นเทาเข้ม */
    color: var(--text-color);
    text-align: center;
    padding: 30px; /* เพิ่ม padding */
    margin-top: 80px; /* เพิ่มระยะห่างด้านบน */
    border-top: 3px solid var(--primary-color);
}

/* -------------------- Page Specific Styles (Video, Contact) -------------------- */
/* Video Wrapper */
.video-wrapper {
    max-width: 900px;
    margin: 0 auto;
    background-color: var(--dark-grey);
    border: 3px solid var(--primary-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
.video-wrapper iframe, .video-wrapper video {
    display: block; /* แก้ปัญหาช่องว่างด้านล่าง iframe/video */
}

/* Contact Info */
.contact-info {
    text-align: center;
    padding: 60px;
    border: 3px solid var(--primary-color);
    border-radius: var(--border-radius);
    background-color: var(--dark-grey);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
.contact-info p {
    font-size: 1.2em;
    margin-bottom: 10px;
}
.contact-info strong {
    color: var(--primary-color);
    font-size: 1.5em;
    margin-bottom: 20px;
    display: block;
}
.contact-info .cta-button {
    margin-top: 30px;
}