/* style.css (เวอร์ชันใหม่ สวยงามและทันสมัย) */

/* นำเข้าฟอนต์ Prompt จาก Google Fonts เพื่อให้ภาษาไทยดูสวยงาม */
@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600&display=swap');

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: 'Prompt', sans-serif; /* ใช้ฟอนต์ Prompt */
}

body { 
    background-color: #f0f2f5; /* สีพื้นหลังเทาอ่อน สบายตา */
    color: #333; 
    line-height: 1.6; 
}

/* --- แถบเมนู (Navigation) --- */
nav { 
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); /* ไล่สีน้ำเงินให้ดูหรูหรา */
    padding: 15px 0; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
    text-align: center; 
    position: sticky;
    top: 0;
    z-index: 100;
}
nav ul { list-style: none; }
nav ul li { display: inline-block; margin: 0 8px; }
nav ul li a { 
    color: #e2e2e2; 
    text-decoration: none; 
    font-weight: 400; 
    padding: 10px 20px; 
    border-radius: 25px; 
    transition: all 0.3s ease; 
}
nav ul li a:hover { 
    background-color: rgba(255,255,255,0.2); 
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* --- กรอบเนื้อหาหลัก (Container) --- */
.container { 
    max-width: 1100px; 
    margin: 40px auto; 
    padding: 40px; 
    background: #e2e2e2; 
    border-radius: 12px; 
    box-shadow: 0 8px 20px rgba(0,0,0,0.05); /* เพิ่มเงาให้กรอบดูลอยขึ้นมา */
}

/* --- หน้าประวัติ (Profile) --- */
.profile-section { 
    display: flex; 
    align-items: center; 
    gap: 50px; 
}
.profile-image { 
    width: 250px; 
    height: 250px; 
    border-radius: 50%; /* ทำรูปให้เป็นวงกลม */
    object-fit: cover; 
    border: 6px solid #f0f2f5; 
    box-shadow: 0 6px 12px rgba(0,0,0,0.15); 
}
.profile-info h1 { 
    color: #1e3c72; 
    margin-bottom: 15px; 
    font-weight: 600; 
    font-size: 2.2rem; 
}
.profile-info p { 
    margin-bottom: 12px; 
    font-size: 1.1rem; 
    color: #444; 
}
.profile-info ul { 
    margin-left: 20px; 
    margin-top: 15px; 
    color: #555; 
}
.profile-info ul li { margin-bottom: 8px; }

/* --- หัวข้อหน้า (Page Title) --- */
.page-title { 
    text-align: center; 
    color: #1e3c72; 
    margin-bottom: 30px; 
    font-size: 1.8rem; 
    font-weight: 600;
}

/* --- ตารางข้อมูล (Tables) --- */
table { 
    width: 100%; 
    border-collapse: collapse; 
    background-color: #fff; 
    border-radius: 10px; 
    overflow: hidden; 
    box-shadow: 0 0 15px rgba(0,0,0,0.05); 
}
/* หัวตาราง */
table th { 
    background-color: #2a5298; 
    color: #fff; 
    padding: 18px 15px; 
    text-align: left; 
    font-weight: 500; 
    font-size: 1rem; 
    letter-spacing: 0.5px;
}
/* ข้อมูลในตาราง */
table td { 
    padding: 16px 15px; 
    border-bottom: 1px solid #f0f0f0; 
    color: #555; 
    vertical-align: middle;
}
/* แถวสุดท้ายไม่ต้องมีเส้นใต้ */
table tr:last-child td { border-bottom: none; }
/* เมื่อเอาเมาส์ชี้ให้เปลี่ยนสีแถว */
table tr:hover td { background-color: #f9fbfc; color: #333; }

/* --- ป้ายสถานะ (Status Badges) --- */
.status-wait, .status-doing, .status-done { 
    padding: 6px 15px; 
    border-radius: 20px; /* ทำให้เป็นทรงแคปซูล */
    font-size: 0.9rem; 
    font-weight: 500; 
    display: inline-block; 
    text-align: center; 
    min-width: 110px;
}
/* รออะไหล่ / รอดำเนินการ (สีเหลือง) */
.status-wait { 
    background-color: #fff3cd; 
    color: #856404; 
    border: 1px solid #ffeeba;
}
/* กำลังดำเนินการ (สีฟ้า) */
.status-doing { 
    background-color: #cce5ff; 
    color: #004085; 
    border: 1px solid #b8daff;
}
/* เสร็จเรียบร้อย (สีเขียว) */
.status-done { 
    background-color: #d4edda; 
    color: #155724; 
    border: 1px solid #c3e6cb;
}

/* --- การแสดงผลบนมือถือ (Responsive) --- */
@media (max-width: 768px) {
    .profile-section { flex-direction: column; text-align: center; gap: 20px; }
    nav ul li { display: block; margin: 10px 0; }
    .container { margin: 15px; padding: 20px; }
    /* ทำให้ตารางเลื่อนซ้ายขวาได้บนมือถือ */
    .table-responsive { overflow-x: auto; display: block; width: 100%; }
    table { display: block; overflow-x: auto; white-space: nowrap; }
}