/* ตั้งค่าพื้นฐาน */
* {
     margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* เปลี่ยนมาใช้ฟอนต์ Prompt และกำหนด sans-serif เป็นฟอนต์สำรอง */
    font-family: 'Prompt', sans-serif
}
    

    .logo-circle img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 💡 เปลี่ยนจาก cover เป็น contain เพื่อให้รูปโลโก้หดอยู่ภายในวงกลมพอดี */
    border-radius: 50%;  /* 💡 เพิ่มบรรทัดนี้เพื่อบังคับให้ขอบของรูปภาพโค้งมนตามวงกลมไปด้วย */
}

body {
    background-color: #ffffff;
}

/* แถบด้านบนสุด (Top Bar) */
.top-bar {
    background-color: #333333;
    color: #ffffff;
    padding: 8px 20px;
    font-size: 14px;
    display: flex;
    justify-content: flex-end;
}

.top-bar-right a {
    color: #ffffff;
    text-decoration: none;
    margin-right: 15px;
}

.lang-selector {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.lang-selector img {
    width: 18px;
    height: auto;
}

/* แถบเมนูนำทาง (Navbar) */
.navbar {
     background-color: #b5a494; 
    padding: 20px 40px; /* 💡 ปรับ padding บน-ล่าง จาก 15px เป็น 20px เพื่อเพิ่มพื้นที่ด้านล่างปุ่ม */
    display: flex;
    align-items: center; /* 💡 บังคับให้ทั้งโลโก้และกลุ่มปุ่มอยู่กึ่งกลางแนวตั้งพร้อมกัน */
    justify-content: space-between; 
    gap: 20px;
    flex-wrap: wrap; 
}

/* โลโก้วงกลม */
.logo-circle {
    background-color: #ffffff;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid #dcdcdc;
}

.logo-text-large {
    font-size: 18px;
    font-weight: bold;
    color: #555555;
    line-height: 1.1;
}

.logo-text-small {
    font-size: 8px;
    color: #888888;
}

/* ปุ่มเมนู */
.nav-links {
    display: flex;
    gap: 15px;       /* ระยะห่างระหว่างปุ่ม */
    flex-grow: 1;    /* 💡 สั่งให้กลุ่มปุ่มขยายตัวเพื่อกินพื้นที่ว่างที่เหลือทั้งหมด */
    flex-wrap: wrap;
}

.nav-btn {
    flex-grow: 1;    /* 💡 ไฮไลท์เด็ด: สั่งให้ทุกปุ่มขยายความกว้างเฉลี่ยแบ่งพื้นที่เท่าๆ กันตามความกว้างจอ */
    flex-basis: 0;   /* 💡 บังคับให้ทุกปุ่มเริ่มต้นจาก 0 เพื่อให้เวลาขยายแล้วจะได้ขนาดกว้างเท่ากันเป๊ะ */
    
    background-color: #ffffff;
    color: #333333;
    text-decoration: none;
    padding: 12px 10px; /* ลด Padding ซ้าย-ขวาเหลือ 10px เพื่อให้ปุ่มยืดหดได้เต็มที่อักษรไม่หลุดขอบ */
    border-radius: 10px;
    font-size: 15px; 
    font-weight: 500;
    transition: background-color 0.2s;
    text-align: center;
    white-space: nowrap; 
}

.nav-btn:hover {
    background-color: #f0f0f0;
}

/* ส่วนสไลด์โชว์ (Carousel) */
.carousel-container {
     position: relative;
    width: 90%; /* 💡 เปลี่ยนจาก max-width เป็นใช้ความกว้างแบบเปอร์เซ็นต์เพื่อให้หดขยายตามขนาดจอ */
    max-width: 900px; 
    margin: 50px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-slide {
    width: 100%;
    height: auto; /* 💡 ปล่อยให้ความสูงคำนวณตามอัตราส่วนรูปภาพ */
    aspect-ratio: 16 / 9; /* 💡 ล็อคอัตราส่วนภาพไว้ที่ 16:9 ภาพจะย่อขยายตามจอโดยไม่เบี้ยว */
    border: 1px solid #eaeaea;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f9f9f9;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ปุ่มลูกศรซ้าย-ขวา */
.arrow-btn {
    background: none;
    border: none;
    font-size: 45px;
    font-weight: 300;
    color: #000000;
    cursor: pointer;
    padding: 20px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    user-select: none;
    z-index: 10;
}

.left-arrow {
    left: -70px;
}

.right-arrow {
    right: -70px;
}

/* จุดนำทางด้านล่าง */
.dots-container {
    position: absolute;
    bottom: -40px;
    display: flex;
    gap: 15px;
}

.dot {
    width: 16px;
    height: 16px;
    border: 1.5px solid #000000;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    background-color: #ffffff;
    transition: background-color 0.2s;
}

.dot.active {
    background-color: #000000;
}