/* ... ส่วน :root, body, .bio-card, .profile-header, .section-title, .skills-grid เหมือนเดิม ... */
:root {
    --pastel-blue: #a0d2eb; --light-blue: #eaf6fb; --white: #ffffff; --dark-text: #4b5267;
    --light-text: #8d97b0; --shadow: rgba(75, 82, 103, 0.15); --font-family: 'Kanit', sans-serif;
}
body {
    font-family: var(--font-family); background-color: var(--light-blue); display: flex;
    justify-content: center; align-items: center; min-height: 100vh; margin: 0; padding: 20px; box-sizing: border-box;
}
.bio-card {
    background-color: var(--white); border-radius: 24px; box-shadow: 0 10px 30px var(--shadow);
    padding: 30px; width: 100%; max-width: 380px; text-align: center;
}
.profile-header { margin-bottom: 20px; }
.profile-pic { width: 100px; height: 100px; border-radius: 50%; border: 4px solid var(--pastel-blue); object-fit: cover; margin-bottom: 15px; }
.profile-header h1 { margin: 0; font-size: 1.8em; font-weight: 500; color: var(--dark-text); }
.subtitle { margin: 5px 0 0; font-size: 1em; color: var(--light-text); font-weight: 300; }
.section-title { font-weight: 500; color: var(--dark-text); margin: 25px 0 15px 0; text-align: left; border-bottom: 2px solid var(--light-blue); padding-bottom: 5px; }
.skills-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 15px; margin-bottom: 10px; }
.skill-icon { position: relative; background: var(--light-blue); height: 50px; border-radius: 12px; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: all 0.3s ease; }
.skill-icon:hover { transform: translateY(-5px); background: var(--pastel-blue); }
.skill-icon i { font-size: 24px; color: var(--dark-text); transition: color 0.3s ease; }
.skill-icon:hover i { color: var(--white); }
.skill-icon span { visibility: hidden; opacity: 0; width: max-content; background-color: var(--dark-text); color: var(--white); text-align: center; border-radius: 6px; padding: 5px 10px; position: absolute; z-index: 1; bottom: 125%; left: 50%; transform: translateX(-50%); transition: opacity 0.3s ease; font-size: 0.85em; }
.skill-icon span::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: var(--dark-text) transparent transparent transparent; }
.skill-icon:hover span { visibility: visible; opacity: 1; }

/* --- ส่วนเครื่องเล่นเพลง --- */
.music-player { padding: 0; }
.track-info { display: flex; align-items: center; text-align: left; background: var(--light-blue); padding: 10px; border-radius: 12px; }
.track-cover { width: 45px; height: 45px; border-radius: 8px; margin-right: 10px; object-fit: cover; }
.track-title { margin: 0; font-weight: 500; font-size: 0.9em; color: var(--dark-text); }
.track-artist { margin: 0; font-size: 0.8em; color: var(--light-text); }

/* --- ส่วนควบคุมเพลง (แก้ไขใหม่) --- */
.controls-wrapper { margin-top: 15px; }
.progress-controls { display: flex; align-items: center; gap: 15px; }
.progress-container { display: flex; align-items: center; flex-grow: 1; gap: 8px; }
.progress-container span { font-size: 0.8em; color: var(--light-text); }

/* --- ปุ่มเล่นเพลง (แก้ไขใหม่) --- */
.control-btn {
    background-color: var(--pastel-blue);
    color: var(--white);
    border: none;
    width: 45px; /* ขยายปุ่ม */
    height: 45px; /* ขยายปุ่ม */
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px; /* ขยายไอคอน */
    flex-shrink: 0;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(160, 210, 235, 0.5); /* เพิ่มเงา */
}
.control-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 15px rgba(160, 210, 235, 0.7);
}

/* --- แถบเลื่อน (ใช้ร่วมกัน) --- */
#seekBar, #volumeSlider {
    flex-grow: 1; -webkit-appearance: none; appearance: none; height: 6px;
    background: var(--light-blue); border-radius: 5px; cursor: pointer; outline: none;
}
#seekBar::-webkit-slider-thumb, #volumeSlider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 15px; height: 15px;
    background: var(--pastel-blue); border-radius: 50%; transition: background 0.3s;
}
#seekBar::-moz-range-thumb, #volumeSlider::-moz-range-thumb {
    width: 15px; height: 15px; background: var(--pastel-blue); border-radius: 50%; border: none;
}

/* --- ส่วนปรับเสียง (แก้ไขใหม่) --- */
.volume-controls {
    display: flex; /* นำกลับมาแสดง */
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}
.volume-controls i { color: var(--light-text); font-size: 0.9em; }
#volumeSlider { max-width: 150px; /* กำหนดความกว้างสูงสุด */ margin: 0 auto; }

/* --- ส่วน Social Links --- */
.social-links {
    border-top: 1px solid var(--light-blue);
    padding-top: 20px;
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 20px;
}
.social-links a {
    color: var(--light-text); text-decoration: none; font-size: 0.9em;
    transition: all 0.3s ease; display: flex; align-items: center; gap: 8px;
}
.social-links a:hover {
    color: var(--dark-text); /* เปลี่ยนสีเมื่อชี้ */
    transform: translateY(-3px);
}
.social-links a i { font-size: 1.4em; } /* ขยายไอคอน */