/* Global Reset (การรีเซ็ตค่าเบื้องต้น) */
* {
    margin: 0;
    /* รีเซ็ตค่า margin ของทุกองค์ประกอบให้เป็น 0 */
    padding: 0;
    /* รีเซ็ตค่า padding ของทุกองค์ประกอบให้เป็น 0 */
    box-sizing: border-box;
    /* การคำนวณขนาดรวมขอบ (border) และ padding */
}

/* คอนเทนเนอร์ */
.container {
    max-width: 1140px;
    /* กำหนดความกว้างสูงสุดของคอนเทนเนอร์ไม่เกิน 1140px */
    margin: 0 auto;
    /* ทำให้คอนเทนเนอร์อยู่กึ่งกลางหน้าจอ (horizontal centering) */
    flex: 1;
}

/* รูปภาพในคอนเทนเนอร์ */
.container img {
    display: flex;
    /* ใช้ flexbox เพื่อจัดการการแสดงผลรูปภาพ */
    width: 25%;
    /* กำหนดให้ความกว้างของรูปภาพเป็น 25% ของคอนเทนเนอร์ */
}

/* การตั้งค่าของโลโก้ */
.logo a {
    font-style: italic;
    /* ทำให้ข้อความในลิงค์ของโลโก้เป็นตัวเอียง */
}

/* การจัดตำแหน่งเมนู */
.nva-con {
    display: flex;
    /* ใช้ flexbox ในการจัดการตำแหน่งของเมนู */
    justify-content: space-between;
    /* จัดการให้มีช่องว่างระหว่างเมนู */
}

/* การตั้งค่าโลโก้ */
.logo a {
    font-size: 2rem;
    /* ขนาดตัวอักษรในลิงค์ของโลโก้ */
    color: #fff;
    /* สีของตัวอักษรเป็นสีขาว */
    text-decoration: none;
    /* ลบการขีดเส้นใต้จากลิงค์ */
}

/* เมนู */
.menu {
    display: flex;
    /* ใช้ flexbox ในการจัดการเมนู */
    list-style: none;
    /* ลบสัญลักษณ์ของรายการในเมนู */
    align-items: center;
    /* จัดให้รายการเมนูอยู่ตรงกลางตามแนวแกนขวาง */
}

.menu li {
    margin: 0 1rem;
    /* กำหนดช่องว่างระหว่างรายการเมนู */
}

.menu li a {
    color: #fff;
    /* สีของตัวอักษรในลิงค์เมนูเป็นสีขาว */
    text-decoration: none;
    /* ลบการขีดเส้นใต้จากลิงค์ */
    font-style: italic;
    /* ทำให้ข้อความในลิงค์เป็นตัวเอียง */
    font-size: 24px;
    /* ขนาดตัวอักษรของลิงค์เมนู */
}

/* ส่วนของ Hero */
.hero {
    background-color: #f0f0f0;
    /* กำหนดสีพื้นหลังของส่วน Hero */
}

.hero-con {
    display: flex;
    /* ใช้ flexbox เพื่อจัดการ layout ของ Hero */
}

.hero-info {
    width: 100%;
    /* ทำให้ข้อมูลใน Hero ใช้ความกว้าง 100% */
    padding: 2rem;
    /* กำหนด padding ให้ข้อมูลใน Hero */
}

.hero-img img {
    padding: 2rem;
    /* กำหนด padding ให้รูปภาพใน Hero */
    width: 100%;
    /* ทำให้รูปภาพใน Hero ใช้ความกว้าง 100% */
}

.hero-info h3 {
    font-size: 2rem;
    /* ขนาดตัวอักษรของหัวข้อใน Hero */
}

.hero-info p {
    margin: 1rem 0;
    /* ช่องว่างระหว่างข้อความใน Hero */
    font-size: 24px;
    /* ขนาดตัวอักษรในข้อความ */
}

.hero-info .hero-btn {
    display: inline-block;
    /* ทำให้ปุ่มอยู่ในแถวเดียวกับข้อความ */
    background: #FF3D54;
    /* สีพื้นหลังของปุ่ม */
    color: white;
    /* สีข้อความของปุ่มเป็นสีขาว */
    padding: 1rem;
    /* กำหนด padding ให้ปุ่ม */
    border-radius: 5px;
    /* ทำมุมปุ่มให้โค้ง */
    text-decoration: none;
    /* ลบการขีดเส้นใต้จากลิงค์ปุ่ม */
}

/* ส่วนของ Blog */
.blog {
    padding: 70px 0;
    /* กำหนดช่องว่างด้านบนและด้านล่างของส่วน Blog */
    background: #f7f7f7;
    /* สีพื้นหลังของ Blog */
    text-align: center;
    /* จัดข้อความให้กึ่งกลาง */
}

.blog-item img {
    width: 100%;
    /* รูปภาพใน Blog ใช้ความกว้าง 100% */
}

.blog-title h3 {
    font-size: 2.5rem;
    /* ขนาดตัวอักษรของหัวข้อ Blog */
    color: #333;
    /* สีตัวอักษรเป็นสีเทาเข้ม */
    margin-bottom: 40px;
    /* ช่องว่างด้านล่างของหัวข้อ Blog */
    font-weight: 700;
    /* ทำให้ข้อความหนา */
}

.blog-con {
    display: grid;
    grid-template-columns: repeat(3, 1fr);/* ✅ บังคับให้มี 3 คอลัมน์เสมอ */
    gap: 20px;
    justify-content: center;
}


.blog-item {
    background: white;
    /* สีพื้นหลังของแต่ละ item ใน Blog */
    border-radius: 10px;
    /* ทำมุมให้โค้ง */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    /* ใส่เงาให้กับ Blog item */
    padding: 25px;
    /* กำหนด padding ภายใน Blog item */
    max-width: 350px;
    /* กำหนดความกว้างสูงสุดให้ Blog item */
    margin-bottom: 30px;
    /* ช่องว่างด้านล่างของ Blog item */
    transition: transform 0.3s ease;
    /* เพิ่มการเคลื่อนไหวเมื่อมีการ hover */
}

.blog-item:hover {
    transform: scale(1.05);
    /* ขยายขนาดของ Blog item เมื่อมีการ hover */
}

.blog-item h4 {
    color: #333;
    /* สีตัวอักษรของหัวข้อ Blog item */
    font-size: 1.5rem;
    /* ขนาดตัวอักษรของหัวข้อ Blog item */
    margin-bottom: 10px;
    /* ช่องว่างด้านล่างของหัวข้อ Blog item */
}

.blog-item p {
    color: #555;
    /* สีตัวอักษรของข้อความใน Blog item */
    font-size: 1rem;
    /* ขนาดตัวอักษรของข้อความใน Blog item */
    line-height: 1.6;
    /* กำหนดความสูงบรรทัด */
}

.blog-btn {
    padding: 8px 20px;
    /* กำหนดขนาด padding ให้ปุ่ม */
    background-color: #FF3D54;
    /* สีพื้นหลังของปุ่ม */
    color: white;
    /* สีข้อความของปุ่ม */
    border-radius: 5px;
    /* ทำมุมปุ่มให้โค้ง */
    text-decoration: none;
    /* ลบการขีดเส้นใต้จากลิงค์ปุ่ม */
    margin-top: 15px;
    /* ช่องว่างด้านบนของปุ่ม */
    font-size: 1rem;
    /* ขนาดตัวอักษรของปุ่ม */
    font-weight: bold;
    /* ทำให้ข้อความในปุ่มหนา */
    transition: background-color 0.3s ease;
    /* เพิ่มการเปลี่ยนสีพื้นหลังเมื่อ hover */
}

.blog-btn:hover {
    background-color: #e12e42;
    /* เปลี่ยนสีพื้นหลังเมื่อ hover */
}

/* ส่วนของ Footer */
.footer-top {
    margin-top: 2rem;
    /* ช่องว่างด้านบนของ Footer */
    padding: 3rem;
    /* กำหนด padding ให้ Footer */
    background-color: rgb(65, 64, 64);
    /* สีพื้นหลังของ Footer */
    color: white;
    /* สีข้อความของ Footer */
}

.footer-top-con {
    display: grid;
    /* ใช้ grid ในการจัดเรียง Footer items */
    grid-template-columns: 1fr 1fr 1fr;
    /* แบ่ง Footer ออกเป็น 3 คอลัมน์ */
    column-gap: 2rem;
    /* ช่องว่างระหว่างคอลัมน์ */
}

.footer-top-item-con {
    display: flex;
    /* ใช้ flexbox เพื่อจัดการ layout ของ items */
    margin: 1rem 0;
    /* ช่องว่างระหว่าง items ของ Footer */
}

.footer-top-item-con .date {
    background: #FF3D54;
    /* สีพื้นหลังของ date */
    color: white;
    /* สีข้อความของ date */
    padding: 0.5rem;
    /* กำหนด padding ให้ date */
    border-radius: 5px;
    /* ทำมุมให้โค้ง */
    text-align: center;
    /* จัดข้อความให้กึ่งกลาง */
    margin-right: 10px;
    /* ช่องว่างด้านขวาของ date */
}

.footer-top {
    margin-top: auto;
    /* ดัน footer ให้ติดอยู่ด้านล่างสุด */
}

/* กำหนดความกว้างให้เท่ากัน */
.dropdown-width,
.question-width {
    width: 100%;
    /* หรือกำหนดค่าคงที่ เช่น 400px */
    max-width: 400px;
    /* ความกว้างสูงสุด */
}

/* จัดตำแหน่งคำถามให้ดูสมดุล */
.question-container {
    margin-top: 20px;
    /* เพิ่มระยะห่างจากส่วนบน */
}

/* สร้างระยะห่างระหว่างคำถาม */
.mb-3 {
    margin-bottom: 15px;
}