/* --- Global Styles --- */
body {
    font-family: 'Mulish', 'Sarabun', sans-serif;
    padding-top: 0;
    color: #333;
    font-size: 1.1rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
}

/* --- Navbar Styles --- */
.navbar {
    padding: 20px 0;
    transition: all 0.4s ease;
    background-color: transparent;
}

.navbar .nav-link,
.navbar .navbar-brand {
    color: #ffffff;
    font-weight: 500;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.navbar .nav-link:hover {
    color: #f1c40f !important;
}

.navbar.scrolled {
    background-color: #ffffff;
    padding: 10px 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar.scrolled .nav-link,
.navbar.scrolled .navbar-brand {
    color: #333333;
    text-shadow: none;
}

.navbar.scrolled .nav-link:hover {
    color: #d35400 !important;
}

.dropdown-menu {
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    margin-top: 10px;
}

.dropdown-item {
    font-size: 0.9rem;
    padding: 10px 20px;
}

.dropdown-item:hover {
    background-color: #fdf2e9;
    color: #d35400;
}


/* =========================================
           MOBILE FIX: แก้ไขเฉพาะหน้าจอมือถือ/แท็บเล็ต
           (ขนาดหน้าจอน้อยกว่า 992px) 
        ========================================= */
@media (max-width: 991.98px) {

    /* 1. บังคับพื้นหลังขาวเสมอ */
    .navbar {
        background-color: #ffffff !important;
        padding: 10px 0 !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    /* 2. บังคับตัวหนังสือสีดำเสมอ */
    .navbar .nav-link,
    .navbar .navbar-brand {
        color: #333333 !important;
        text-shadow: none !important;
    }

    /* 3. เปลี่ยนสีไอคอน Hamburger เป็นสีดำ */
    .navbar-toggler {
        border-color: rgba(0, 0, 0, 0.1);
    }

    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }

    /* 4. ปรับ Dropdown ให้ดูแลง่ายขึ้นในมือถือ */
    .navbar-collapse {
        background-color: #ffffff;
        padding: 15px;
        border-radius: 0 0 10px 10px;
    }
}

/* --- Hero Section --- */





.hero-title {
    font-size: 4rem;
    color: #FFFFFF;
    /*color: #2B5DB6;
			-webkit-text-stroke: 5px #ffffff;*/
    text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    margin-bottom: 10px;
}

/* --- Info Box (Glassmorphism) --- */
.hero-info-box {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #222;
    border-radius: 10px;
    padding: 25px;
    height: 100%;
    text-align: left;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s, background 0.3s;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.hero-info-box:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 1);
}

.hero-info-box h5 {
    color: #1860D8;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 10px;
    margin-bottom: 15px;
    font-weight: 700;
}

.bg-text {
    background-image: url("../images/top-bg-all.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    /*background-size: cover;*/
}

/* --- Speakers Section --- */


.speaker-item {
    background: #fff;
    color: #333;
    border: none;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    height: 100%;
}

.speaker-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.speaker-img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    object-position: center;
    /* filter: grayscale(100%) opacity(0.7); */
    transition: filter 0.3s;
}



.speaker-info {
    padding: 25px;
    text-align: left;
}

/* --- Footer --- */
footer {
    background-color: #0d3e75;
    color: #FFFFFF;
    padding: 40px 0;
    font-size: 0.9rem;
}

@media (max-width: 991.98px) {

    /* 1. แก้ไข Menu Bar ให้พื้นขาว ตัวหนังสือดำเสมอ */
    .navbar {
        background-color: #ffffff !important;
        padding: 10px 0 !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .navbar .nav-link,
    .navbar .navbar-brand {
        color: #333333 !important;
        text-shadow: none !important;
    }

    .navbar-toggler {
        border-color: rgba(0, 0, 0, 0.1);
    }

    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }

    .navbar-collapse {
        background-color: #ffffff;
        padding: 15px;
        border-radius: 0 0 10px 10px;
    }

    /* 2. แก้ไข Parallax Background ใน iPhone/iOS */
    /* เปลี่ยนจาก fixed เป็น scroll เพื่อไม่ให้รูปซูมหรือแตก */
    .hero-section,
    .hero-section-content,
    .speakers-section {
        background-attachment: scroll !important;
        background-position: center center !important;
    }

    /* ปรับขนาดตัวหนังสือ Hero ในมือถือให้พอดี */
    .hero-title {
        font-size: 2.5rem;
    }
}

/* =========================================
           IPHONE / MOBILE LANDSCAPE FIX
           แก้ปัญหาภาพพื้นหลังและระยะห่างในแนวนอน
        ========================================= */
@media (max-width: 991.98px) and (orientation: landscape) {

    .hero-section,
    .hero-section-content {
        /* 1. ยกเลิกความสูงแบบ vh เพราะจอมันเตี้ยเกินไป ให้ยืดตามเนื้อหาแทน */
        min-height: auto !important;
        height: auto !important;

        /* 2. ปรับระยะห่าง (Padding) ให้พอดี ไม่ชิดขอบเกินไป */
        padding-top: 100px !important;
        padding-bottom: 60px !important;

        /* 3. บังคับ Background ให้เลื่อนตาม (Scroll) และขยายเต็ม */
        background-attachment: scroll !important;
        background-position: center top !important;
        /* จัดภาพเริ่มจากบน */
        background-size: cover !important;
        background-repeat: no-repeat !important;
    }

    /* ปรับขนาดตัวอักษรหัวข้อลดลงนิดหน่อยในแนวนอน เพื่อไม่ให้กินที่ */
    .hero-title {
        font-size: 2rem !important;
    }
}