body{font-family: 'Prompt', sans-serif;background:#fff;color:#003366} a{color:#c9a634}

/* ===== CSS สำหรับ Mega Menu (เลียนแบบเทพศิรินทร์) ===== */

/* กล่องครอบเมนู Dropdown */
.dropdown {
    float: left;
    overflow: hidden;
}

/* ปรับแต่งปุ่มเมนูหลัก (หัวข้อที่จะชี้) */
.dropdown .dropbtn {
    font-size: 16px;
    border: none;
    outline: none;
    color: #333; /* สีตัวหนังสือเมนูหลัก */
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
    cursor: pointer;
    transition: 0.3s;
}

/* เปลี่ยนสีเมื่อเอาเมาส์ชี้ที่หัวข้อ */
.navbar a:hover, .dropdown:hover .dropbtn {
    color: #ff7a00; /* สีส้มตามธีมเว็บคุณ */
}

/* กล่องเนื้อหาที่จะโผล่ออกมา */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    width: 90%; /* ความกว้างของแผงเมนู (ปรับได้) */
    left: 5%;   /* จัดให้อยู่กึ่งกลาง */
    top: 60px;  /* ระยะห่างจากด้านบน */
    z-index: 1000;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    border-top: 3px solid #ff7a00; /* เส้นสีส้มด้านบน */
    padding: 20px 0;
    border-radius: 0 0 10px 10px;
}

/* แสดงผลเมื่อเอาเมาส์ชี้ */
.dropdown:hover .dropdown-content {
    display: block;
    animation: slideDown 0.3s ease;
}

/* จัดโครงสร้างคอลัมน์ด้านใน */
.column {
    float: left;
    width: 25%; /* แบ่งเป็น 4 ช่องเท่าๆ กัน */
    padding: 10px 30px;
    box-sizing: border-box;
    border-right: 1px solid #eee; /* เส้นแบ่งคอลัมน์จางๆ */
}

.column:last-child {
    border-right: none; /* คอลัมน์สุดท้ายไม่ต้องมีเส้นขวา */
}

/* จัดการแถว */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* หัวข้อเรื่องในแต่ละคอลัมน์ */
.column h3 {
    font-size: 18px;
    color: #003366; /* สีน้ำเงินเข้มตามธีม */
    margin-bottom: 15px;
    font-weight: 600;
    border-bottom: 2px dotted #ddd; /* เส้นประใต้หัวข้อ */
    padding-bottom: 5px;
}

/* ลิงก์เมนูย่อยด้านใน */
.column a {
    float: none;
    color: #666;
    padding: 8px 0;
    text-decoration: none;
    display: block;
    text-align: left;
    font-size: 14px;
    margin: 0;
    transition: 0.2s;
}

/* ลิงก์ย่อยเมื่อเอาเมาส์ชี้ */
.column a:hover {
    background-color: #f1f1f1;
    color: #ff7a00;
    padding-left: 10px; /* ขยับตัวหนังสือไปขวานิดนึงให้ดูมีมิติ */
}

/* ปรับ Mobile Responsive (ถ้าจอเล็กให้ซ่อนคอลัมน์) */
@media screen and (max-width: 800px) {
    .column {
        width: 100%;
        height: auto;
        border-right: none;
        border-bottom: 1px solid #eee;
    }
}

/* หน้าหลัก */
.home {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: #fafafa;
    padding: 40px 20px;}

/* หัวข้อ */
.home h2 {
    font-size: 32px;
    font-weight: 500;
    color: #333;
    margin-bottom: 12px;}

/* ข้อความ */
.home p {
    font-size: 16px;
    color: #666;
    margin-bottom: 28px;}

/* ปุ่ม */
.btn-start {
    text-decoration: none;
    padding: 10px 26px;
    border-radius: 25px;
    background: #32CD32;
    color: #fff;
    font-size: 15px;
    transition: all 0.3s ease;}

.btn-start:hover {
    background: #006400;
    transform: translateY(-2px);}

/* Animation */
.fade-in {
    opacity: 0;
    animation: fadeIn 0.8s ease forwards;}

.delay {animation-delay: 0.3s;}

.delay2 {animation-delay: 0.6s;}

@keyframes fadeIn {
    from {  opacity: 0;
            transform: translateY(10px);	}
    to {    opacity: 1;
            transform: translateY(0);	}}

/* Reset พื้นฐาน */
* { margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Segoe UI", Tahoma, sans-serif;}

/* แถบเมนู */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 28px;
    background: #ffffff;
    border-bottom: 1px solid #e5e5e5;
    animation: slideDown 0.6s ease;	}

/* กลุ่มเมนู */
.nav-left a,
.nav-right a {
    margin-left: 18px;
    text-decoration: none;
    color: #333;
    font-size: 15px;
    position: relative;
    transition: color 0.3s ease;	}

/* เส้นใต้แบบ animation */
.nav-left a::after,
.nav-right a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 2px;
    background: #32CD32;
    transition: width 0.3s ease;	}

.nav-left a:hover::after,
.nav-right a:hover::after {	width: 100%;}

.nav-left a:hover,
.nav-right a:hover {color: #32CD32;	}

/* ปุ่ม Register */
.register {
    padding: 6px 14px;
    border: 1px solid #32CD32;
    border-radius: 20px;
    transition: all 0.3s ease;	}

.register:hover {
    background: #32CD32;
    color: #fff !important;	}

/* Logout สีอ่อน */
.logout {  color: #888;	}

.logout:hover {  color: #e74c3c;	}

/* Animation ตอนโหลด */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);	}
    to {
        opacity: 1;
        transform: translateY(0);	}}


.navbar{
    position: sticky;
    top: 0;
    background: #fff;
    padding: 12px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
    z-index: 1000;	}

.navbar a{
    margin-left: 15px;
    text-decoration: none;
    color: #333;
    transition: .3s;	}

.navbar a:hover{  color: #32CD32;	}

.welcome{
    margin-right: 10px;
    color: #1e3c72;
    font-weight: 500;	}

.logo img{
    height: 36px;          /* เท่ากับความสูง navbar */
    width: auto;
    vertical-align: middle;	}

/* ถ้า navbar หด โลโก้ก็หดตาม */
.navbar.shrink .logo img{    height: 28px;	}

.logo img{  transition: .3s ease;	}


/* ===== Hero ===== */
.hero{
    height: 80vh;
    background: linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),
                url("../images/bg2.jfif") center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;	}

.hero h1{
    font-size: 3rem;
    margin-bottom: 15px;	}

.hero p{
    font-size: 1.2rem;
    margin-bottom: 25px;	}

/* ===== Buttons ===== */
.btn-primary{
    background: #32CD32;
    color: #fff;
    padding: 14px 28px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    transition: .3s;	}

.btn-primary:hover{
    background: #32CD32;	}

.btn-outline{
    border: 2px solid #32CD32;
    color: #32CD32;
    padding: 12px 26px;
    border-radius: 30px;
    text-decoration: none;
    transition: .3s;	}

.btn-outline:hover{
    background: #32CD32;
    color: #fff;	}

/* ===== Features ===== */
.features{
    padding: 80px 10%;
    text-align: center;
    background: #fff;	}

.features h2{
    color: #1e3c72;
    margin-bottom: 40px;	}

.feature-list{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
    gap: 25px;	}

.feature-box{
    background: #f9f9f9;
    padding: 30px;
    border-radius: 20px;
    transition: .3s;	}

.feature-box:hover{
    transform: translateY(-6px);
    box-shadow: 0 10px 20px rgba(0,0,0,.08);	}

/* ===== CTA ===== */
.cta{
    background: #1e3c72;
    color: #fff;
    text-align: center;
    padding: 70px 20px;	}

.cta h2{    margin-bottom: 20px;	}

.contact-box{
    display: flex;
    flex-direction: column;   /* บน → กลาง → ล่าง */
    justify-content: center;  /* จัดกลางแนวตั้ง */
    align-items: center;      /* จัดกลางแนวนอน */
    text-align: center;       /* ตัวอักษรกึ่งกลาง */
    gap: 6px;                 /* ระยะห่างแต่ละบรรทัด */
}


/* ===== Search Overlay  ===== */
.overlay {
  height: 100%;
  width: 100%;
  display: none; /* ซ่อนไว้ก่อน */
  position: fixed;
  z-index: 9999; /* ให้อยู่บนสุดเสมอ */
  top: 0;
  left: 0;
  background-color: rgba(0,0,0, 0.9); /* สีดำโปร่งแสง 90% */
}

/* เนื้อหาในกล่องค้นหา */
.overlay-content {
  position: relative;
  top: 40%; /* ให้อยู่กึ่งกลางจอ */
  width: 80%;
  text-align: center;
  margin-top: 30px;
  margin: auto;
}

/* ปุ่มปิด (X) */
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
  cursor: pointer;
  color: white;
  transition: 0.3s;
}

.overlay .closebtn:hover {
  color: #ff7a00; /* สีส้มธีมเว็บคุณ */
}

/* ช่องกรอกข้อความ */
.overlay input[type=text] {
  padding: 15px;
  font-size: 24px; /* ตัวหนังสือใหญ่ๆ */
  border: none;
  float: left;
  width: 80%; /* ความกว้างช่องกรอก */
  background: white;
  border-radius: 30px 0 0 30px; /* โค้งมนซ้าย */
  outline: none;
}

/* ปุ่มกดค้นหา */
.overlay button {
  float: left;
  width: 10%; /* ความกว้างปุ่ม */
  padding: 15px;
  background: #ff7a00; /* สีส้ม */
  font-size: 24px;
  border: none;
  cursor: pointer;
  color: white;
  border-radius: 0 30px 30px 0; /* โค้งมนขวา */
  transition: 0.3s;
}

.overlay button:hover {
  background: #e96c00;
}

/* จัดเรียงเมนูแนวนอนสำหรับจอคอม */
.menu-links {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* ซ่อนปุ่ม ☰ ในหน้าจอคอม */
.hamburger-btn {
    display: none; 
    font-size: 1.8rem;
    color: #333;
    margin-left: 15px;
    cursor: pointer;
}



/* จัดให้ โลโก้ และ กล่องเมนู อยู่บรรทัดเดียวกันในหน้าจอคอม */
.nav-left {
    display: flex;
    align-items: center;
}

/* เพิ่มให้ Navbar หลักกางออกเต็มพื้นที่ซ้าย-ขวา */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 15px; /* ระยะห่างระหว่างชื่อ Hi Admin กับปุ่ม ☰ */
}