/* ═════════════════════════════════════════════════════════════════════════════
   🪧 หัวหน้าเพจ (page header) — ดีไซน์ใหม่ 2026-09-07 · ทดลองที่หน้า /News ก่อน
      แล้วจะใช้เป็น**มาตรฐานของทุกหน้า** (user สั่ง)
   ⛔ ห้าม inline style ในหน้า Razor — CSP `style-src 'self'` บล็อกเงียบ

   🎯 แนวคิด (แก้ครั้งที่ 2 · 2026-09-07 หลัง user ทัก "ไม่อยากให้มืดทั้งเว็บ"):
      **หัวเพจต้องสว่าง** ต่อเนื่องกับเนื้อหา · ให้แถบเมนูเข้มบาง ๆ เป็นกรอบเว็บอยู่ชั้นเดียว
      🔴 เคยลองทำหัวเพจเข้มต่อจากแถบเมนู แล้วมัน**พลาด 2 อย่าง**:
         ① เข้ม 2 บล็อกซ้อน = ครึ่งบนของทุกหน้ากลายเป็นโทนมืด ทั้งที่เว็บนี้เป็นพาสเทลอุ่น
         ② น้ำเงินเทา (#131c2e) เป็นโทน**เย็น** ชนกับฉากหลังฟ้าอมชมพู + สำเนียงทองที่เป็นโทน**อุ่น**
      ⇒ พื้นหัวเพจใช้ **ขาวอมครีม** (อุ่นเข้าชุดกับทอง) ตัดท้ายด้วยเส้นทองทึบ
      หัวเรื่องได้น้ำหนักจาก **ขนาด + ตัวหนา** ไม่ใช่จากพื้นเข้ม

   🧱 โครงมาตรฐาน — ทุกหน้าใช้ชุดเดียวกันนี้ ไม่ต้องเขียนใหม่ต่อหน้า:
      <header class="phd">
        <div class="phd-in">
          <div class="phd-main">
            <nav class="phd-crumb">…</nav>      ← ทางที่มา (ไม่มีก็ได้)
            <span class="phd-eyebrow">…</span>  ← คำกำกับสั้น ๆ (ไม่มีก็ได้)
            <h1 class="phd-title">…</h1>
            <div class="phd-facts">…</div>      ← ตัวเลข/สถานะย่อย (ไม่มีก็ได้)
          </div>
          <div class="phd-act">…</div>          ← ปุ่มของหน้านั้น (ไม่มีก็ได้)
        </div>
      </header>
   ───────────────────────────────────────────────────────────────────────────── */

/*  🔴 user เคาะ 2026-09-07: **ไม่เอาแสงเรือง** ("ดูเป็น AI มากไป") และ **ลดรายละเอียด**
    ⇒ ตัดออกหมด: แสงทองฟุ้งมุมซ้าย · ลายจุดบนพื้น · เส้นทองไล่เฉด · เงาใต้ตัวหนังสือ
    เหลือพื้นเรียบสีเดียวต่อจากแถบเมนู + เส้นคั่นบาง ๆ เส้นเดียว
    ⛔ อย่าใส่ radial-gradient / text-shadow / เงาทอง กลับเข้ามาในแถบนี้ */
.phd{
  position:relative;
  background:#fffdf8;                 /* ขาวอมครีม — อุ่น เข้าชุดกับสำเนียงทอง */
  padding:20px 0 22px;
  /* 🟡 เส้นทองปิดท้าย (user สั่งเก็บไว้) — เส้นทึบคม ไม่ไล่เฉด ไม่ฟุ้ง */
  border-bottom:2px solid #d9b25f;
}

.phd-in{
  width:min(1220px,94vw);margin:0 auto;
  display:flex;align-items:flex-end;justify-content:space-between;gap:22px;flex-wrap:wrap;
}
.phd-main{min-width:0}

/* ── ทางที่มา ─────────────────────────────────────────────────────────────── */
.phd-crumb{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-size:12px;font-weight:600;color:#8b98a8;
  margin-bottom:11px;
}
.phd-crumb a{color:#8b98a8;text-decoration:none}
.phd-crumb a:hover{color:#a2740f}
.phd-crumb i{font-style:normal;opacity:.5}

/* ── คำกำกับเหนือหัวเรื่อง ────────────────────────────────────────────────── */
/* คำกำกับเหนือหัวเรื่อง — มีคลาสไว้เผื่อหน้าอื่นต้องใช้ แต่**ไม่มีจุดกะพริบ/ไม่มีเงาเรือง**
   (หน้า /News เอาออกแล้วตามที่ user สั่ง) */
.phd-eyebrow{
  display:inline-block;
  padding:3px 10px;margin-bottom:9px;
  border:1px solid #e8d5a4;border-radius:6px;background:#fdf6e3;
  font-size:11.5px;font-weight:800;letter-spacing:.05em;color:#8a6416;
}

/* ── หัวเรื่อง ────────────────────────────────────────────────────────────── */
.phd-title{
  margin:0;
  font-size:clamp(23px,2.7vw,31px);font-weight:900;letter-spacing:-.015em;line-height:1.2;
  color:#1b2233;
}
/* คำที่อยากเน้นในหัวเรื่อง ครอบด้วย <em> — สีทองเข้มเรียบ ไม่ไล่เฉด ไม่มีเงา */
.phd-title em{font-style:normal;color:#a2740f}
/* ⛔ ไม่มี .phd-sub แล้ว — user สั่งตัดคำอธิบายใต้หัวเรื่องออกทั้งระบบ 2026-09-07
   อะไรที่ต้องอธิบายให้ไปอยู่ในเนื้อหา ไม่ใช่ในหัวเพจ */

/* ── ตัวเลข/สถานะย่อยใต้หัวเรื่อง ─────────────────────────────────────────── */
.phd-facts{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:14px}
.phd-fact{
  display:inline-flex;align-items:baseline;gap:6px;
  padding:6px 12px;border-radius:9px;
  border:1px solid #e9e2d2;background:#fff;
}
.phd-fact b{font-size:15px;font-weight:900;color:#1b2233;line-height:1}
.phd-fact span{font-size:11.5px;font-weight:700;color:#7c8a99}

/* ── ปุ่มของหน้า ──────────────────────────────────────────────────────────── */
.phd-act{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding-bottom:3px}
.phd-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:38px;padding:0 16px;border-radius:10px;border:1px solid transparent;
  font-family:inherit;font-size:13.5px;font-weight:800;text-decoration:none;
  white-space:nowrap;cursor:pointer;
  transition:filter .16s ease,background .16s ease,border-color .16s ease,transform .12s ease;
}
.phd-btn-line{border-color:#e2e8f0;background:#fff;color:#334155}
.phd-btn-line:hover{border-color:#d9b25f;background:#fffdf6;color:#1b2233}
.phd-btn-gold{background:#d3a53c;color:#3a2600}
.phd-btn-gold:hover{filter:brightness(1.06)}
.phd-btn:active{transform:translateY(1px)}

/* ── จอเล็ก ───────────────────────────────────────────────────────────────── */
@media (max-width:820px){
  .phd{padding:20px 0 24px}
  .phd-in{align-items:flex-start;gap:16px}
  .phd-act{width:100%}
  .phd-act .phd-btn{flex:1 1 auto}
}

@media (prefers-reduced-motion:reduce){
  .phd-btn:active{transform:none}
}