console.log( 'Code is Poetry' );




<title>ศูนย์บริหารความสุขและความปลอดภัย สพป.ขอนแก่น เขต 4</title>


<style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --primary: #1B4F8A;
    --primary-light: #2E6DB4;
    --primary-dark: #0F2F55;
    --accent: #F5A623;
    --accent-light: #FCD27B;
    --green: #2D8A4E;
    --green-light: #E8F5ED;
    --red: #C0392B;
    --red-light: #FDECEA;
    --sky: #E8F4FD;
    --bg: #F7F9FC;
    --white: #FFFFFF;
    --text: #1A2332;
    --text-muted: #5A6B7D;
    --border: #D8E2ED;
    --shadow: 0 2px 12px rgba(27,79,138,0.10);
    --shadow-lg: 0 8px 32px rgba(27,79,138,0.15);
    --radius: 12px;
    --radius-lg: 20px;
  }

  body {
    font-family: 'Sarabun', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.7;
    font-size: 16px;
  }

  /* NAV */
  nav {
    background: var(--primary-dark);
    padding: 0 2rem;
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 60px;
    gap: 1rem;
  }
  .nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--white);
    text-decoration: none;
  }
  .nav-logo {
    width: 38px; height: 38px;
    background: var(--accent);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Kanit', sans-serif;
    font-weight: 700; font-size: 15px;
    color: var(--primary-dark);
    flex-shrink: 0;
  }
  .nav-title-wrap { display: flex; flex-direction: column; }
  .nav-title { font-family: 'Kanit', sans-serif; font-size: 13px; font-weight: 600; line-height: 1.3; }
  .nav-sub { font-size: 11px; opacity: 0.75; }
  .nav-links { display: flex; gap: 0; }
  .nav-links a {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    font-size: 13px;
    padding: 0 14px;
    height: 60px;
    display: flex; align-items: center;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    white-space: nowrap;
  }
  .nav-links a:hover { color: var(--accent); border-color: var(--accent); }

  /* HERO */
  .hero {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%);
    padding: 5rem 2rem 4rem;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .hero::before {
    content: '';
    position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  }
  .hero-badge {
    display: inline-block;
    background: rgba(245,166,35,0.2);
    border: 1px solid rgba(245,166,35,0.5);
    color: var(--accent-light);
    font-size: 12px; font-weight: 600;
    padding: 4px 16px;
    border-radius: 20px;
    margin-bottom: 1.5rem;
    letter-spacing: 0.5px;
  }
  .hero h1 {
    font-family: 'Kanit', sans-serif;
    font-size: clamp(24px, 4vw, 44px);
    font-weight: 700;
    color: var(--white);
    line-height: 1.3;
    margin-bottom: 0.5rem;
    position: relative;
  }
  .hero h1 span { color: var(--accent); }
  .hero-sub {
    font-size: clamp(14px, 2vw, 18px);
    color: rgba(255,255,255,0.8);
    margin-bottom: 2.5rem;
    position: relative;
  }
  .hero-stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
    position: relative;
  }
  .hero-stat { text-align: center; color: var(--white); }
  .hero-stat-num {
    font-family: 'Kanit', sans-serif;
    font-size: 36px; font-weight: 700;
    color: var(--accent);
    line-height: 1;
  }
  .hero-stat-label { font-size: 13px; opacity: 0.8; margin-top: 4px; }

  /* SECTIONS */
  .section { padding: 4rem 2rem; max-width: 1100px; margin: 0 auto; }
  .section-title {
    font-family: 'Kanit', sans-serif;
    font-size: 26px; font-weight: 600;
    color: var(--primary-dark);
    margin-bottom: 0.4rem;
    display: flex; align-items: center; gap: 10px;
  }
  .section-title::before {
    content: '';
    display: block;
    width: 5px; height: 30px;
    background: var(--accent);
    border-radius: 3px;
    flex-shrink: 0;
  }
  .section-desc { color: var(--text-muted); margin-bottom: 2.5rem; font-size: 15px; }

  /* QUICK ACCESS */
  .quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
  }
  .quick-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 1.5rem 1rem;
    text-align: center;
    text-decoration: none;
    color: var(--text);
    border: 1px solid var(--border);
    transition: all 0.25s;
    cursor: pointer;
  }
  .quick-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-light);
  }
  .quick-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
    margin: 0 auto 12px;
  }
  .quick-card h3 { font-size: 14px; font-weight: 600; line-height: 1.4; }

  /* INFO CARDS */
  .info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
  }
  .info-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
  }
  .info-card-header {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
  }
  .info-icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; flex-shrink: 0;
  }
  .info-card h3 { font-family: 'Kanit', sans-serif; font-size: 17px; font-weight: 600; }
  .info-list { list-style: none; }
  .info-list li {
    padding: 8px 0;
    border-bottom: 1px dashed var(--border);
    font-size: 14px;
    display: flex; align-items: flex-start; gap: 8px;
  }
  .info-list li:last-child { border: none; }
  .info-list li::before { content: '›'; color: var(--primary-light); font-weight: 700; flex-shrink: 0; }

  /* ALERT BANNER */
  .alert-bar {
    background: var(--red-light);
    border-left: 4px solid var(--red);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    display: flex; align-items: flex-start; gap: 12px;
    margin-bottom: 20px;
  }
  .alert-icon { font-size: 22px; flex-shrink: 0; }
  .alert-content h4 { font-weight: 600; font-size: 15px; color: var(--red); }
  .alert-content p { font-size: 13px; color: #7B2D2D; margin-top: 2px; }

  /* STAT ROW */
  .stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 2.5rem;
  }
  .stat-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--border);
    border-top: 4px solid var(--primary);
    box-shadow: var(--shadow);
  }
  .stat-card.green { border-top-color: var(--green); }
  .stat-card.amber { border-top-color: var(--accent); }
  .stat-card.red { border-top-color: var(--red); }
  .stat-num {
    font-family: 'Kanit', sans-serif;
    font-size: 32px; font-weight: 700;
    color: var(--primary);
    line-height: 1;
  }
  .stat-card.green .stat-num { color: var(--green); }
  .stat-card.amber .stat-num { color: #B07A10; }
  .stat-card.red .stat-num { color: var(--red); }
  .stat-label { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
  .stat-change { font-size: 12px; font-weight: 600; margin-top: 6px; }
  .stat-change.up { color: var(--green); }
  .stat-change.down { color: var(--red); }

  /* ACTIVITY TABLE */
  .activity-table {
    width: 100%; border-collapse: collapse; font-size: 14px;
  }
  .activity-table th {
    background: var(--sky);
    color: var(--primary);
    font-weight: 600;
    padding: 10px 16px;
    text-align: left;
    border-bottom: 2px solid var(--primary-light);
    white-space: nowrap;
  }
  .activity-table td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
  }
  .activity-table tr:hover td { background: var(--sky); }
  .badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px; font-weight: 600;
    white-space: nowrap;
  }
  .badge-green { background: var(--green-light); color: #1A5E35; }
  .badge-amber { background: #FEF3CD; color: #7D5A00; }
  .badge-blue { background: var(--sky); color: var(--primary); }
  .badge-red { background: var(--red-light); color: var(--red); }

  /* CONTACT */
  .contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
  }
  .contact-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 1.25rem;
    border: 1px solid var(--border);
    display: flex; align-items: center; gap: 14px;
  }
  .contact-avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--primary);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Kanit', sans-serif;
    font-weight: 700; font-size: 16px;
    color: var(--white);
    flex-shrink: 0;
  }
  .contact-info h4 { font-size: 14px; font-weight: 600; }
  .contact-info p { font-size: 12px; color: var(--text-muted); }
  .contact-info a { font-size: 13px; color: var(--primary-light); text-decoration: none; display: block; margin-top: 4px; }

  /* EMERGENCY */
  .emergency-box {
    background: var(--primary-dark);
    border-radius: var(--radius-lg);
    padding: 2rem;
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
  }
  .emergency-box h3 {
    font-family: 'Kanit', sans-serif;
    font-size: 20px; font-weight: 700;
    color: var(--accent);
    margin-bottom: 6px;
  }
  .emergency-box p { font-size: 14px; opacity: 0.85; }
  .emergency-numbers { display: flex; gap: 16px; flex-wrap: wrap; }
  .emer-num {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--radius);
    padding: 0.75rem 1.25rem;
    text-align: center;
  }
  .emer-num-val {
    font-family: 'Kanit', sans-serif;
    font-size: 24px; font-weight: 700;
    color: var(--accent);
  }
  .emer-num-label { font-size: 12px; opacity: 0.8; margin-top: 2px; }

  /* FOOTER */
  footer {
    background: var(--primary-dark);
    color: rgba(255,255,255,0.7);
    padding: 2rem;
    text-align: center;
    font-size: 13px;
    margin-top: 3rem;
  }
  footer strong { color: var(--accent); }

  /* RESPONSIVE */
  @media (max-width: 640px) {
    nav { padding: 0 1rem; }
    .nav-links { display: none; }
    .hero { padding: 3rem 1rem 2.5rem; }
    .hero-stats { gap: 1.5rem; }
    .section { padding: 2.5rem 1rem; }
    .emergency-box { flex-direction: column; text-align: center; }
  }

  /* SCROLL ANIMATION */
  .fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.5s, transform 0.5s; }
  .fade-in.visible { opacity: 1; transform: none; }
</style>



<!-- NAV -->
<nav>
  <a class="nav-brand" href="#">
    <div class="nav-logo">สพป</div>
    <div class="nav-title-wrap">
      <span class="nav-title">ศูนย์บริหารความสุขและความปลอดภัย</span>
      <span class="nav-sub">สำนักงานเขตพื้นที่การศึกษาประถมศึกษาขอนแก่น เขต 4</span>
    </div>
  </a>
  <div class="nav-links">
    <a href="#overview">ภาพรวม</a>
    <a href="#services">บริการ</a>
    <a href="#activities">กิจกรรม</a>
    <a href="#safety">ความปลอดภัย</a>
    <a href="#contact">ติดต่อ</a>
  </div>
</nav>

<!-- HERO -->
<div class="hero">
  <div class="hero-badge">สพป.ขอนแก่น เขต 4 | ปีการศึกษา 2567</div>
  <h1>ศูนย์บริหาร<span>ความสุขและความปลอดภัย</span></h1>
  <p class="hero-sub">ดูแล ปกป้อง และสร้างความสุขให้แก่นักเรียนและบุคลากรทางการศึกษา</p>
  <div class="hero-stats">
    <div class="hero-stat">
      <div class="hero-stat-num">127</div>
      <div class="hero-stat-label">โรงเรียนในสังกัด</div>
    </div>
    <div class="hero-stat">
      <div class="hero-stat-num">24,500+</div>
      <div class="hero-stat-label">นักเรียนที่ดูแล</div>
    </div>
    <div class="hero-stat">
      <div class="hero-stat-num">1,800+</div>
      <div class="hero-stat-label">บุคลากรทางการศึกษา</div>
    </div>
    <div class="hero-stat">
      <div class="hero-stat-num">4 อำเภอ</div>
      <div class="hero-stat-label">พื้นที่รับผิดชอบ</div>
    </div>
  </div>
</div>

<!-- ALERT -->
<div style="max-width:1100px;margin: 2rem auto;padding: 0 2rem">
  <div class="alert-bar">
    <div class="alert-icon">⚠️</div>
    <div class="alert-content">
      <h4>ประกาศเฝ้าระวัง: สถานการณ์อุทกภัยในพื้นที่</h4>
      <p>ขอให้โรงเรียนในพื้นที่เสี่ยงประเมินความปลอดภัยและรายงานสถานการณ์ผ่านระบบออนไลน์ภายในวันที่ 15 มิถุนายน 2567</p>
    </div>
  </div>
</div>

<!-- OVERVIEW -->
<div id="overview" class="section fade-in">
  <h2 class="section-title">ภาพรวมสถิติ</h2>
  <p class="section-desc">ข้อมูลสรุปด้านความสุขและความปลอดภัยในสังกัด สพป.ขอนแก่น เขต 4 ประจำปีการศึกษา 2567</p>

  <div class="stat-row">
    <div class="stat-card">
      <div class="stat-num">94%</div>
      <div class="stat-label">โรงเรียนผ่านเกณฑ์ความปลอดภัย</div>
      <div class="stat-change up">▲ 3% จากปีที่แล้ว</div>
    </div>
    <div class="stat-card green">
      <div class="stat-num">87%</div>
      <div class="stat-label">ความพึงพอใจของนักเรียน</div>
      <div class="stat-change up">▲ 5% จากปีที่แล้ว</div>
    </div>
    <div class="stat-card amber">
      <div class="stat-num">12</div>
      <div class="stat-label">กรณีที่ต้องติดตามดูแล</div>
      <div class="stat-change down">▼ 8 กรณีจากไตรมาสก่อน</div>
    </div>
    <div class="stat-card red">
      <div class="stat-num">3</div>
      <div class="stat-label">โรงเรียนที่ต้องปรับปรุงเร่งด่วน</div>
      <div class="stat-change up">▼ 2 แห่งจากปีที่แล้ว</div>
    </div>
  </div>
</div>

<!-- SERVICES -->
<div id="services" style="background: #EEF3F9;padding: 4rem 0">
  <div class="section fade-in" style="padding-top: 0;padding-bottom: 0">
    <h2 class="section-title">บริการของศูนย์</h2>
    <p class="section-desc">ศูนย์บริหารความสุขและความปลอดภัยให้บริการครอบคลุม 4 ด้านหลัก</p>

    <div class="quick-grid">
      <a class="quick-card" href="#">
        <div class="quick-icon" style="background:#E8F4FD">🛡️</div>
        <h3>ความปลอดภัยในโรงเรียน</h3>
      </a>
      <a class="quick-card" href="#">
        <div class="quick-icon" style="background:#E8F5ED">🧠</div>
        <h3>สุขภาพจิตนักเรียน</h3>
      </a>
      <a class="quick-card" href="#">
        <div class="quick-icon" style="background:#FEF3CD">🚨</div>
        <h3>แจ้งเหตุฉุกเฉิน</h3>
      </a>
      <a class="quick-card" href="#">
        <div class="quick-icon" style="background:#FDECEA">🏥</div>
        <h3>สุขอนามัยและโภชนาการ</h3>
      </a>
      <a class="quick-card" href="#">
        <div class="quick-icon" style="background:#F0EBF8">📋</div>
        <h3>รายงานและประเมินผล</h3>
      </a>
      <a class="quick-card" href="#">
        <div class="quick-icon" style="background:#E8F4FD">🚗</div>
        <h3>ความปลอดภัยการเดินทาง</h3>
      </a>
      <a class="quick-card" href="#">
        <div class="quick-icon" style="background:#E8F5ED">🌿</div>
        <h3>สิ่งแวดล้อมในโรงเรียน</h3>
      </a>
      <a class="quick-card" href="#">
        <div class="quick-icon" style="background:#FEF3CD">📚</div>
        <h3>พัฒนาครูและบุคลากร</h3>
      </a>
    </div>
  </div>
</div>

<!-- ACTIVITIES -->
<div id="activities" class="section fade-in">
  <h2 class="section-title">กิจกรรมและการดำเนินงาน</h2>
  <p class="section-desc">ติดตามสถานะการดำเนินงานและกิจกรรมล่าสุด</p>

  <div style="border-radius: var(--radius);border: 1px solid var(--border);background: var(--white)">
    <table class="activity-table">
      <thead>
        <tr>
          <th>กิจกรรม / โครงการ</th>
          <th>วันที่</th>
          <th>กลุ่มเป้าหมาย</th>
          <th>สถานะ</th>
          <th>ผู้รับผิดชอบ</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>อบรมครูด้านสุขภาพจิตนักเรียน</td>
          <td>15 มิ.ย. 67</td>
          <td>ครูแนะแนว 127 โรงเรียน</td>
          <td><span class="badge badge-amber">กำลังดำเนินการ</span></td>
          <td>กลุ่มส่งเสริมฯ</td>
        </tr>
        <tr>
          <td>ตรวจประเมินความปลอดภัยอาคารเรียน</td>
          <td>1–30 มิ.ย. 67</td>
          <td>โรงเรียนทุกแห่ง</td>
          <td><span class="badge badge-amber">กำลังดำเนินการ</span></td>
          <td>กลุ่มนโยบายฯ</td>
        </tr>
        <tr>
          <td>โครงการโรงเรียนสุขภาวะ</td>
          <td>1 พ.ค. – 31 ส.ค. 67</td>
          <td>โรงเรียนนำร่อง 20 แห่ง</td>
          <td><span class="badge badge-green">ดำเนินการแล้ว</span></td>
          <td>ศูนย์ความสุขฯ</td>
        </tr>
        <tr>
          <td>ซ้อมแผนอพยพอุบัติเหตุ</td>
          <td>20 มิ.ย. 67</td>
          <td>โรงเรียนขนาดใหญ่ 15 แห่ง</td>
          <td><span class="badge badge-blue">รอดำเนินการ</span></td>
          <td>กลุ่มบริหารฯ</td>
        </tr>
        <tr>
          <td>สำรวจความสุขนักเรียน (Happy Index)</td>
          <td>10–25 มิ.ย. 67</td>
          <td>นักเรียน ป.4–ม.3</td>
          <td><span class="badge badge-amber">กำลังดำเนินการ</span></td>
          <td>กลุ่มส่งเสริมฯ</td>
        </tr>
        <tr>
          <td>อบรมป้องกันการบูลลี่ในโรงเรียน</td>
          <td>5 พ.ค. 67</td>
          <td>ครู 200 คน</td>
          <td><span class="badge badge-green">ดำเนินการแล้ว</span></td>
          <td>ศูนย์ความสุขฯ</td>
        </tr>
        <tr>
          <td>ติดตามโรงเรียนที่ต้องพัฒนาเร่งด่วน</td>
          <td>ต่อเนื่อง</td>
          <td>โรงเรียน 3 แห่ง</td>
          <td><span class="badge badge-red">เร่งด่วน</span></td>
          <td>ผอ.เขต / ทีม</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<!-- SAFETY &amp; HAPPINESS -->
<div id="safety" class="section fade-in" style="padding-top: 0">
  <h2 class="section-title">ข้อมูลเชิงลึก</h2>
  <p class="section-desc">ด้านความปลอดภัยและสุขภาวะที่ต้องติดตามดูแลอย่างต่อเนื่อง</p>

  <div class="info-grid">
    <div class="info-card">
      <div class="info-card-header">
        <div class="info-icon" style="background:#E8F4FD">🛡️</div>
        <div>
          <h3>ความปลอดภัยทางกายภาพ</h3>
          <p style="font-size:13px;color:var(--text-muted)">อาคาร สิ่งแวดล้อม และการเดินทาง</p>
        </div>
      </div>
      <ul class="info-list">
        <li>ตรวจสอบความมั่นคงแข็งแรงของอาคารเรียน</li>
        <li>ประเมินความปลอดภัยของสนามเด็กเล่นและลานกิจกรรม</li>
        <li>ดูแลระบบไฟฟ้าและสาธารณูปโภค</li>
        <li>ความปลอดภัยของยานพาหนะรับส่งนักเรียน</li>
        <li>ระบบกล้องวงจรปิดและรั้วรอบโรงเรียน</li>
      </ul>
    </div>

    <div class="info-card">
      <div class="info-card-header">
        <div class="info-icon" style="background:#E8F5ED">🧠</div>
        <div>
          <h3>สุขภาพจิตและความสุข</h3>
          <p style="font-size:13px;color:var(--text-muted)">สุขภาวะและความเป็นอยู่ที่ดี</p>
        </div>
      </div>
      <ul class="info-list">
        <li>โปรแกรมสำรวจดัชนีความสุขนักเรียน (Happy Index)</li>
        <li>ระบบช่วยเหลือนักเรียนที่มีปัญหาสุขภาพจิต</li>
        <li>ป้องกันและแก้ไขปัญหาการกลั่นแกล้ง (Bullying)</li>
        <li>ส่งเสริมสัมพันธภาพระหว่างนักเรียนกับครู</li>
        <li>สนับสนุนงานแนะแนวและจิตวิทยาโรงเรียน</li>
      </ul>
    </div>

    <div class="info-card">
      <div class="info-card-header">
        <div class="info-icon" style="background:#FDECEA">🏥</div>
        <div>
          <h3>สุขอนามัยและโภชนาการ</h3>
          <p style="font-size:13px;color:var(--text-muted)">อาหารกลางวันและสุขภาพกาย</p>
        </div>
      </div>
      <ul class="info-list">
        <li>ตรวจสอบคุณภาพอาหารกลางวันตามมาตรฐาน</li>
        <li>ติดตามภาวะโภชนาการนักเรียน (น้ำหนัก/ส่วนสูง)</li>
        <li>ความสะอาดและถูกสุขลักษณะของห้องครัว</li>
        <li>ส่งเสริมการออกกำลังกายและสุขภาพ</li>
        <li>ป้องกันโรคติดต่อและโรคระบาดในโรงเรียน</li>
      </ul>
    </div>

    <div class="info-card">
      <div class="info-card-header">
        <div class="info-icon" style="background:#FEF3CD">⚡</div>
        <div>
          <h3>แผนรับมือเหตุฉุกเฉิน</h3>
          <p style="font-size:13px;color:var(--text-muted)">ภัยพิบัติและเหตุการณ์ไม่คาดฝัน</p>
        </div>
      </div>
      <ul class="info-list">
        <li>แผนอพยพและซ้อมหนีไฟประจำปี</li>
        <li>รับมืออุทกภัยและภัยธรรมชาติตามฤดูกาล</li>
        <li>ระบบแจ้งเตือนภัยและสื่อสารฉุกเฉิน</li>
        <li>เจ้าหน้าที่ปฐมพยาบาลและอุปกรณ์ฉุกเฉิน</li>
        <li>ประสานงานกับหน่วยงานท้องถิ่นและองค์กรช่วยเหลือ</li>
      </ul>
    </div>
  </div>
</div>

<!-- EMERGENCY -->
<div style="max-width:1100px;margin: 0 auto;padding: 0 2rem 3rem">
  <div class="emergency-box fade-in">
    <div>
      <h3>🚨 สายด่วนฉุกเฉิน</h3>
      <p>ติดต่อได้ตลอด 24 ชั่วโมง สำหรับเหตุการณ์เร่งด่วน</p>
    </div>
    <div class="emergency-numbers">
      <div class="emer-num">
        <div class="emer-num-val">043-xxx-xxx</div>
        <div class="emer-num-label">ศูนย์ความสุขฯ</div>
      </div>
      <div class="emer-num">
        <div class="emer-num-val">191</div>
        <div class="emer-num-label">ตำรวจ</div>
      </div>
      <div class="emer-num">
        <div class="emer-num-val">1669</div>
        <div class="emer-num-label">การแพทย์ฉุกเฉิน</div>
      </div>
      <div class="emer-num">
        <div class="emer-num-val">1300</div>
        <div class="emer-num-label">สายด่วนเด็ก</div>
      </div>
    </div>
  </div>
</div>

<!-- CONTACT -->
<div id="contact" class="section fade-in" style="padding-top: 0">
  <h2 class="section-title">ผู้รับผิดชอบและติดต่อ</h2>
  <p class="section-desc">ทีมงานศูนย์บริหารความสุขและความปลอดภัย สพป.ขอนแก่น เขต 4</p>

  <div class="contact-grid">
    <div class="contact-card">
      <div class="contact-avatar" style="background: var(--primary-dark)">ผอ</div>
      <div class="contact-info">
        <h4>ผู้อำนวยการเขตพื้นที่</h4>
        <p>สพป.ขอนแก่น เขต 4</p>
        <a href="tel:043000000">043-000-0000</a>
      </div>
    </div>
    <div class="contact-card">
      <div class="contact-avatar" style="background: var(--green)">รผอ</div>
      <div class="contact-info">
        <h4>รองผู้อำนวยการเขต</h4>
        <p>กลุ่มส่งเสริมการจัดการศึกษา</p>
        <a href="tel:043000001">043-000-0001</a>
      </div>
    </div>
    <div class="contact-card">
      <div class="contact-avatar" style="background: var(--accent);color: var(--primary-dark)">ศก</div>
      <div class="contact-info">
        <h4>ผู้รับผิดชอบศูนย์</h4>
        <p>ศูนย์บริหารความสุขและความปลอดภัย</p>
        <a href="tel:043000002">043-000-0002</a>
      </div>
    </div>
    <div class="contact-card">
      <div class="contact-avatar" style="background: #7B3FA0">นก</div>
      <div class="contact-info">
        <h4>นักจิตวิทยาโรงเรียน</h4>
        <p>สุขภาพจิตนักเรียนและบุคลากร</p>
        <a href="tel:043000003">043-000-0003</a>
      </div>
    </div>
    <div class="contact-card">
      <div class="contact-avatar" style="background: #2196A6">IT</div>
      <div class="contact-info">
        <h4>เจ้าหน้าที่เทคโนโลยี</h4>
        <p>ระบบแจ้งเหตุและรายงานออนไลน์</p>
        <a href="mailto:khk4@kk4.go.th">khk4@kk4.go.th</a>
      </div>
    </div>
    <div class="contact-card">
      <div class="contact-avatar" style="background: #C0392B">พย</div>
      <div class="contact-info">
        <h4>พยาบาลวิชาชีพ</h4>
        <p>สุขอนามัยโรงเรียน</p>
        <a href="tel:043000004">043-000-0004</a>
      </div>
    </div>
  </div>

  <div style="margin-top: 2rem;background: var(--white);border-radius: var(--radius-lg);border: 1px solid var(--border);padding: 1.5rem;display: flex;flex-wrap: wrap;gap: 2rem;align-items: center">
    <div>
      <p style="font-size: 14px;font-weight: 600;color: var(--primary);margin-bottom: 4px">📍 ที่ตั้ง</p>
      <p style="font-size: 14px;color: var(--text-muted)">สำนักงานเขตพื้นที่การศึกษาประถมศึกษาขอนแก่น เขต 4<br>อำเภอน้ำพอง จังหวัดขอนแก่น 40310</p>
    </div>
    <div>
      <p style="font-size: 14px;font-weight: 600;color: var(--primary);margin-bottom: 4px">🕐 เวลาทำการ</p>
      <p style="font-size: 14px;color: var(--text-muted)">วันจันทร์ – วันศุกร์<br>เวลา 08.30 – 16.30 น.</p>
    </div>
    <div>
      <p style="font-size: 14px;font-weight: 600;color: var(--primary);margin-bottom: 4px">🌐 เว็บไซต์</p>
      <p style="font-size: 14px"><a href="http://www.kk4.go.th" style="color: var(--primary-light)">www.kk4.go.th</a></p>
    </div>
  </div>
</div>

<!-- FOOTER -->
<footer>
  <p>
    <strong>ศูนย์บริหารความสุขและความปลอดภัย สพป.ขอนแก่น เขต 4</strong><br>
    สำนักงานเขตพื้นที่การศึกษาประถมศึกษาขอนแก่น เขต 4 | อำเภอน้ำพอง จังหวัดขอนแก่น<br>
    <span style="opacity:0.6;font-size:12px;margin-top:6px;display:block">© 2567 สพป.ขอนแก่น เขต 4 | พัฒนาโดยกลุ่มส่งเสริมการจัดการศึกษา</span>
  </p>
</footer>


const obs = new IntersectionObserver(entries =&gt; {
  entries.forEach(e =&gt; { if (e.isIntersecting) e.target.classList.add('visible'); });
}, { threshold: 0.1 });
document.querySelectorAll('.fade-in').forEach(el =&gt; obs.observe(el));