:root{
      --bg: #f5f7fb;
      --card: #ffffff;
      --accent: #2b7cff;
      --muted: #6b7280;
      --shadow: 0 6px 18px rgba(43, 124, 255, 0.08);
      --radius: 12px;
    }

    *{box-sizing: border-box}
    body{
      font-family: "Noto Sans Thai", sans-serif;
      background: var(--bg);
      margin: 0;
      color: #1f2937;
    }

    .container{

      margin: 0 auto;
    }

    h1{
      text-align: center;
      margin: 6px 0 28px;
      font-weight: 600;
      color: #153a66;
    }

   /* Director (หัวหน้างาน 1 คน) */
    .director {
      display: grid;
      justify-content:center;
      gap: 50px;
      margin-bottom: 28px;
    }

    .dir-card {
      background: var(--card);
      padding: 18px;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      display: flex;
      align-items: center;
      gap: 18px;
      width: 760px;              /* ? คงที่ */
      height: auto;
      flex-shrink: 0;            /* ? ป้องกันไม่ให้ย่อ */
    }

    .dir-photo{
      width: 220px;
      height: 100%;
      border-radius: 12px;
      overflow: hidden;
      flex-shrink: 0;
    }
    .dir-photo img{
      width:100%;
      height:100%;
      object-fit: cover;
      display:block;
    }

    .dir-info h2{
      margin: 0 0 4px;
      font-size: 20px;
      color:#153a66;
    }
    .dir-info h3{
      margin: 0 0 4px;
      font-size: 20px;
      color:#153a66;
    }
    .dir-info h4{
      margin: 0 0 4px;
      font-size: 16px;
      color:#153a66;
    }
    .dir-info p {
      margin: 2px 0;
      color: var(--muted);
      font-size: 14px;
    }
    .dir-contact{
      margin-top: 8px;
      display: flex;
      gap: 12px;
      align-items: center;
    }
    .phone-badge{
      background: linear-gradient(90deg,#e9f2ff,#f7fbff);
      border: 1px solid #dbeafe;
      padding: 6px 10px;
      border-radius: 8px;
      font-weight: 600;
      color: var(--accent);
      font-size: 14px;
    }

    .subheads{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 50px;
      margin-bottom: 28px;
      padding-left:90px;
    }
    .sub-card{
      background: var(--card);
      padding: 14px;
      border-radius: 12px;
      box-shadow: var(--shadow);
      display:flex;
      gap:12px;
      align-items:center;
      width: 700px;      /* หรือใช้ % ก็ได้ เช่น 45% */
      height: auto;  
      flex-shrink: 0;
    }
    .sub-photo{ 
      width:220px; 
      height:100%; 
      border-radius:10px; 
      overflow:hidden; 
      flex-shrink:0; 
    }
    .sub-photo img{ 
      width:100%; 
      height:100%; 
      object-fit:cover; 
      display:block; 
    }
    .sub-info h3{ 
      margin: 0 0 4px;
      font-size: 20px;
      color:#153a66;
    }
    .sub-info h4{ 
      margin: 0 0 4px;
      font-size:16px; 
      color:#153a66;
    }
    .sub-info p{ 
      margin: 0 0 4px; 
      color:var(--muted); 
      font-size:13px; 
      color:#153a66;
    }

    /* Staff grid (4 คน) */
    .staff-grid {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      padding-left: 90px;
    }
    .staff-group {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 16px;
      flex: 1;
    }
    .staff-group.right {
      justify-items: end; /* ให้ฝั่งขวาชิดขวา */

    }
    .staff-card{
      background: var(--card);
      padding: 12px;
      border-radius: 16px;
      box-shadow: var(--shadow);
      text-align: center;
      display:flex;
      flex-direction:column;
      gap:10px;
      min-height: 220px; 
    }
    .staff-photo {
      width: 195px;          /* ความกว้างคงที่ */
      height: 220px;         /* กำหนดความสูงคงที่ */
      overflow: hidden;
      border-radius: 8px;
      margin: 0 auto;        /* จัดตรงกลาง horizontal */
    }

    .staff-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;     /* ครอบเต็ม container และ crop เท่ากัน */
      display: block;
    }
    .staff-name{ 
      font-weight:600; 
      font-size: 14px;
      color:#153a66;
      margin-bottom: 0;      /* ลบช่องว่างด้านล่าง */
      line-height: 0; 
    }
    .staff-pos{ 
      font-size: 14px; 
      color: var(--muted); 
      margin-top: 0px;       /* ลดช่องว่างด้านบน */
     }
    .staff-desc{ 
      font-size:13px; 
      color: #4e5259; 
      margin-top:-20px; 
      flex-grow:1;
      text-align:left;
      padding-left:1px;
    }
    .staff-phone{ 
      margin-top:2px; 
      font-weight:600;
      font-size: 15px;  
      color:var(--accent); 
    }

    .staff-grid2 {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      padding-left: 60px;
      padding-right: -60px;
    }
    .staff-card2{
      background: var(--card);
      padding: 12px;
      border-radius: 16px;
      box-shadow: var(--shadow);
      text-align: center;
      display:flex;
      flex-direction:column;
      gap:10px;
      min-height: 220px; 
    }
    .staff-photo2 {
      width: 170px;          /* ความกว้างคงที่ */
      height: 220px;         /* กำหนดความสูงคงที่ */
      overflow: hidden;
      border-radius: 8px;
      margin: 0 auto;        /* จัดตรงกลาง horizontal */
    }

    .staff-photo2 img {
      width: 100%;
      height: 100%;
      object-fit: cover;     /* ครอบเต็ม container และ crop เท่ากัน */
      display: block;
    }


    /* small screens */
    @media (max-width: 1000px){
      .staff-grid{ grid-template-columns: repeat(2, 1fr); }
      .subheads{ grid-template-columns: 1fr; }
      .dir-card{ max-width: 900px; }
    }
    @media (max-width: 560px){
      body{ padding: 16px; }
      .staff-grid{ grid-template-columns: 1fr; }
      .dir-card{ flex-direction: row; gap:12px; }
      .dir-photo{ width:88px; height:88px; }
    }

    /* small visual helpers */
    .label{
      font-size:12px;
      color:var(--muted);
      margin-bottom:4px;
    }