/* ==========================================================================
   Header สองชั้น (เดสก์ท็อป ≥1100px): ชื่อหน่วยงานแถวบน / เมนูหลักแถวล่าง
   แก้ปัญหาชื่อหน่วยงานสั้น-ยาวบีบเมนู (หรือเมนูบีบชื่อ) — เพิ่มท้ายไฟล์เพื่อทับกฎเดิม
   ถ้าจะย้อนกลับ: ลบบล็อกนี้ทั้งบล็อก
   ========================================================================== */

/* ตัดคำเฉพาะเมื่อจำเป็น (anywhere ทำให้ชื่อหดเหลือตัวอักษรเดียวใน flex) */
.u-brand__name { overflow-wrap: break-word; }

@media (min-width: 1100px) {
  .u-header__inner { flex-wrap: wrap; gap: 0 40px; min-height: 0; }

  /* แถวบน: โลโก้ + ชื่อ ใช้ความกว้างเต็ม */
  .u-brand { flex: 1 1 100%; padding-block: 14px 10px; }
  .u-brand__name { font-size: clamp(20px, 1.1vw + 8px, 24px); }

  /* แถวล่าง: เมนูหลักเต็มความกว้าง ถ้าล้นให้ขึ้นบรรทัดใหม่แทนการล้นจอ */
  .u-nav { flex: 1 1 100%; margin-inline-start: 0; border-top: 1px solid var(--u-line); }
  .u-nav__list { flex-wrap: wrap; }
  .u-nav__link { min-height: 48px; }

  /* ความสูงแผง mega menu = พื้นที่ที่เหลือจริงใต้ header
     (JS ตั้งค่า --u-mega-top ตอนเปิดเมนู/เลื่อนหน้า; 202px คือค่าสำรองเมื่อยังไม่มี JS) */
  .u-mega__box {
    grid-template-rows: minmax(0, 1fr); /* ให้คอลัมน์ในแผงเลื่อนได้เมื่อเนื้อหายาวเกินความสูง */
    max-height: calc(100vh - var(--u-mega-top, 202px) - 16px);
    max-height: calc(100dvh - var(--u-mega-top, 202px) - 16px);
  }

  /* แถบเลื่อนที่มองเห็นตลอด (macOS ซ่อนแถบเลื่อนเป็นค่าเริ่มต้น ผู้ใช้จึงไม่รู้ว่ามีเนื้อหาต่อ) */
  .u-mega__panes::-webkit-scrollbar,
  .u-mega__rail::-webkit-scrollbar,
  .u-mega__feat::-webkit-scrollbar { width: 10px; }
  .u-mega__panes::-webkit-scrollbar-track,
  .u-mega__rail::-webkit-scrollbar-track,
  .u-mega__feat::-webkit-scrollbar-track { background: var(--u-tint); border-radius: 10px; }
  .u-mega__panes::-webkit-scrollbar-thumb,
  .u-mega__rail::-webkit-scrollbar-thumb,
  .u-mega__feat::-webkit-scrollbar-thumb { background: var(--u-c1); border-radius: 10px; border: 2px solid var(--u-tint); }
}
/* Firefox ไม่รู้จัก ::-webkit-scrollbar */
@supports not selector(::-webkit-scrollbar) {
  @media (min-width: 1100px) {
    .u-mega__panes, .u-mega__rail, .u-mega__feat { scrollbar-width: thin; scrollbar-color: var(--u-c1) var(--u-tint); }
  }
}

/* (ปิดไว้ — ยังไม่ได้ตัดสินใจ) ย่อแถวชื่อเมื่อ header ติดขอบบนตอนเลื่อนลง
   หมายเหตุ: จะเกิดการกระโดดของเนื้อหาประมาณ 40px ตอนเริ่มติดขอบ
@container u-hdr scroll-state(stuck: top) {
  @media (min-width: 1100px) {
    .u-brand { padding-block: 6px 4px; }
    .u-brand__logo { height: 40px; }
    .u-brand__sub { display: none; }
  }
}
*/

/* ฉากมืดของ mega menu: จางเร็วขึ้น (เดิม 0.25s) เพื่อไม่ให้รู้สึกว่าเมนูค้างตอนเมาส์ออก */
@media (min-width: 1100px) {
  .u-veil { transition: opacity 0.12s, visibility 0.12s; }
}

/* mega menu: พื้นที่โปร่งใสซ้าย-ขวาของแผง (กล่อง .u-mega เต็มความกว้างจอ) ไม่ควรรับเมาส์
   ไม่เช่นนั้นเมาส์ที่ขยับออกด้านข้างยังนับว่าอยู่ใน header และเมนูไม่ปิด */
@media (min-width: 1100px) {
  .u-mega { pointer-events: none; }
  .u-mega__box { pointer-events: auto; }
}

/* ลดขนาดตัวอักษรเมนูหลัก (ไม่กระทบ mega menu) */
@media (min-width: 1100px) {
  .u-nav > .u-nav__list > .u-nav__item > .u-nav__link {
    font-size: 15px;   /* ปรับตามต้องการ */
  }
}