* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: 'Prompt', sans-serif; /* เปลี่ยนเป็น Prompt ให้เหมือนหน้าอื่นๆ */
}
body { background: #f4f6f9; color: #222; } /* HERO */ .hero { height: 60vh; background: linear-gradient(135deg, #0f2027, #203a43, #2c5364); display: flex; justify-content: center; align-items: center; text-align: center; color: white; } .hero h1 { font-size: 3rem; letter-spacing: 2px; } .hero p { margin-top: 15px; font-size: 1.2rem; opacity: 0.9; } /* SECTION */ section { padding: 70px 10%; text-align: center; } section h2 { font-size: 2rem; margin-bottom: 40px; position: relative; } section h2::after { content: ""; width: 60px; height: 4px; background: #ff7b00; display: block; margin: 10px auto; border-radius: 10px; } /* ABOUT */ .about-box { background: white; padding: 40px; border-radius: 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.08); max-width: 800px; margin: auto; } .about-box ul { margin-top: 20px; text-align: left; } .about-box li { margin-bottom: 10px; } /* CARD STYLE */ .card { background: white; padding: 25px; border-radius: 15px; box-shadow: 0 8px 20px rgba(0,0,0,0.08); transition: 0.3s ease; } .card img { width: 150px; height: 150px; object-fit: cover; border-radius: 50%; margin-bottom: 20px; border: 4px solid #eee; } .card:hover { transform: translateY(-10px); box-shadow: 0 15px 35px rgba(0,0,0,0.15); } /* LARGE CARD */ .large { max-width: 350px; margin: auto; } /* GRID */ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; } /* FOOTER */ footer { background: #0f2027; color: white; padding: 20px; text-align: center; margin-top: 40px; }
/* =========================================
   DARK MODE STYLES สำหรับหน้า Cyber Lab
========================================= */

/* แก้ไขกล่อง About Our Laboratory */
body.dark-mode .about-box,
body[data-theme="dark"] .about-box {
    background: #1a1a1a; /* เปลี่ยนพื้นหลังกล่องเป็นสีเข้ม */
    color: #f5f5f5;      /* เปลี่ยนสีข้อความให้สว่างขึ้น */
    box-shadow: 0 10px 25px rgba(255, 255, 255, 0.05); /* ปรับเงาให้บางลง */
}

/* แก้ไขสีข้อความรายการ (li) และย่อหน้า (p) ในกล่อง About */
body.dark-mode .about-box p,
body[data-theme="dark"] .about-box p,
body.dark-mode .about-box li,
body[data-theme="dark"] .about-box li {
    color: #bbb;
}

/* แก้ไขกล่อง Card ของนักวิจัย / ผู้ช่วยวิจัย */
body.dark-mode .card,
body[data-theme="dark"] .card {
    background: #1a1a1a;
    color: #f5f5f5;
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.05);
}

/* ปรับสีกรอบรูปภาพใน Card ให้เข้ากับโหมดกลางคืน */
body.dark-mode .card img,
body[data-theme="dark"] .card img {
    border-color: #333;
}

/* ปรับสีข้อความตำแหน่ง (p) ใต้ชื่อใน Card */
body.dark-mode .card p,
body[data-theme="dark"] .card p {
    color: #bbb;
}

/* ทำให้รูปภาพในส่วน About เป็น Responsive */
.about img {
    max-width: 100%;     /* บังคับไม่ให้รูปกว้างเกินขนาดหน้าจอ */
    height: auto;        /* รักษาสัดส่วนรูปภาพไม่ให้เบี้ยว */
    border-radius: 15px; /* เพิ่มขอบมนนิดๆ ให้เข้ากับกล่องข้อความด้านล่าง (ใส่หรือไม่ใส่ก็ได้ครับ) */
    margin-bottom: 30px; /* เว้นระยะห่างระหว่างรูปกับหัวข้อ About Our Laboratory */
    display: block;
    margin-left: auto;
    margin-right: auto;  /* จัดรูปให้อยู่กึ่งกลาง */
}