*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Sarabun',sans-serif;
}

body{
background:#eef2f7;
padding:0 40px 40px 40px;
}

.container{
    width:100%;
    margin:0;
}

/* HEADER */
.section-header {
    width: 100%;
    /* background: linear-gradient(90deg, #2c3e50, #3498db); */
    color: #3333CC;
    padding: 15px 25px;
    font-size: 32px;
    font-weight: 600;
    /* border-radius: 10px; */
    margin: 40px 0 15px 0;
    /* box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); */
    text-align: center;
}

/* GRID */

.grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(30%, 300px));
justify-content:center;
gap:30px;
}

/* CARD */
.card{
background:#fff;
width:100%;        /* ให้ยืดตามช่อง Grid */
max-width:380px;  /* แต่ไม่เกิน 380px */
padding:20px;
border-radius:15px;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
transition:.3s;
border-left:6px solid #3498db;
text-align:center;
}

.card:hover{
transform:translateY(-5px);
box-shadow:0 15px 30px rgba(0,0,0,0.15);
}

/* PROFILE IMAGE */
.profile{
margin-bottom:3px;
}

.profile img{
width:150px;
height:150px;
object-fit:cover;
border-radius:30%;
transition:.0s;
}

.profile img:hover{
transform:scale(1.05);
}

.name{
font-size:20px;
font-weight:600;
color:#2c3e50;
margin-bottom:10px;
}

.detail{
font-size:15px;
color:#555;
margin-bottom:5px;
}

.phone{
margin-top:10px;
color:#2980b9;
font-weight:600;
}