/* =====================================================================
   MSU Mega Menu  –  standalone header + mega submenu
   ใช้ namespace .msu-nav ทั้งหมด ไม่พึ่ง class ของธีม ed-school / Elementor
   ต้องการ: msu-megamenu.js (เปิด/ปิดด้วยคลิก, คีย์บอร์ด, มือถือ) และฟอนต์ Kanit
   ===================================================================== */

.msu-nav {
  /* ---- tokens ---- */
  --msu-navy:        #262B50;
  --msu-navy-2:      #252B53;      /* กล่องโลโก้ */
  --msu-topbar:      #EEEEEE;
  --msu-gold:        #FFCD22;
  --msu-line:        #FFCD22;      /* เส้นใต้เมนูตอน hover / เปิด */
  --msu-hover-bg:    rgba(255, 255, 255, .07);   /* พื้น pill ตอน hover */
  --msu-title:       #9AA0D6;      /* หัวข้อคอลัมน์สีม่วงอ่อน ขีดเส้นใต้ */
  --msu-text:        #FFFFFF;
  --msu-text-dim:    rgba(255, 255, 255, .82);
  --msu-topbar-text: #262B50;
  --msu-mega-width:  1260px;
  --msu-bar-height:  90px;
  --msu-ease:        cubic-bezier(.22, .8, .24, 1);
  --msu-dur:         .26s;

  position: relative;
  z-index: 1000;
  /* ใช้ Mornamchi (ฟอนต์มหาวิทยาลัย) ถ้าโหลด mornamchi.css ไว้ ไม่งั้นตกไป Kanit */
  font-family: "Mornamchi", "Kanit", "Segoe UI", Tahoma, sans-serif;
  font-synthesis: none;
  font-weight: 300;
  color: var(--msu-text);
  line-height: 1.4;
}
/* ---- ชุดสี (เลือกด้วย data-scheme บน .msu-nav) ----
   navy     = สีมหาวิทยาลัย: กรมท่า + โลโก้เหลือง        (ค่าเริ่มต้น)
   charcoal = เทาเข้ม + เหลือง: โลโก้เหลืองบนเทาถ่าน
   light    = เทาอ่อน + เหลือง: กล่องโลโก้เหลือง ใส่โลโก้ขาว ตัวหนังสือเข้ม */
.msu-nav[data-scheme="charcoal"] {
  --msu-navy:        #2F3239;
  --msu-navy-2:      #26292F;
  --msu-topbar:      #E8E9EC;
  --msu-gold:        #F8C820;
  --msu-line:        #F8C820;
  --msu-title:       #C6C9D2;
  --msu-text-dim:    rgba(255, 255, 255, .80);
  --msu-topbar-text: #2F3239;
}
.msu-nav[data-scheme="light"] {
  --msu-navy:        #F1F2F4;      /* แถบเมนู + แผง mega = เทาอ่อน */
  --msu-navy-2:      #F8C820;      /* กล่องโลโก้ = เหลือง */
  --msu-topbar:      #FFFFFF;
  --msu-gold:        #B98A00;      /* ทองเข้ม อ่านได้บนพื้นอ่อน */
  --msu-line:        #F8C820;
  --msu-title:       #7C8190;
  --msu-text:        #24272F;
  --msu-text-dim:    rgba(36, 39, 47, .82);
  --msu-topbar-text: #24272F;
  --msu-hover-bg:    rgba(36, 39, 47, .06);
  --msu-shadow:      0 30px 60px -22px rgba(36, 39, 47, .35), 0 0 0 1px rgba(36, 39, 47, .08);
  --msu-panel-edge:  #E3E5EA;
}
/* main = แถวเดียวตามแบบ แก้ไข-header-1.jpg:
   กล่องโลโก้พื้นขาว (โลโก้ main) ซ้าย + แถบเทาเข้มยาวชิดขอบขวา ใส่เมนูสีขาว, TH / EN, ค้นหา
   แผง mega พื้นเทาอ่อน ตัวหนังสือเข้ม */
.msu-nav[data-scheme="main"] {
  --msu-navy:        #2F3239;      /* แถบเมนู = เทาเข้ม */
  --msu-navy-2:      #FFFFFF;      /* กล่องโลโก้ = ขาว */
  --msu-topbar:      #2F3239;
  --msu-gold:        #F8C820;      /* เมนูหน้าปัจจุบัน = เหลืองโลโก้ */
  --msu-line:        #F8C820;
  --msu-title:       #3A3D46;      /* หัวข้อคอลัมน์ในแผง = เทาเข้ม */
  --msu-text:        #FFFFFF;
  --msu-text-dim:    rgba(255, 255, 255, .82);
  --msu-topbar-text: #FFFFFF;
  --msu-hover-bg:    rgba(255, 255, 255, .07);
  --msu-shadow:      0 30px 60px -22px rgba(36, 39, 47, .30), 0 0 0 1px rgba(36, 39, 47, .06);
  --msu-panel-edge:  #E3E5EA;
  --msu-panel-bg:    #F4F5F7;      /* แผง mega */
  --msu-panel-text:  #24272F;
  --msu-panel-link:  rgba(36, 39, 47, .82);
  --msu-panel-hover: #B98A00;
  --msu-bar-height:  84px;
  background: #2F3239;
}
/* แผง mega ของ main: พื้นเทาอ่อน ตัวหนังสือเข้ม (ทั้งเดสก์ท็อปและมือถือ) */
.msu-nav[data-scheme="main"] .msu-mega,
.msu-nav[data-scheme="main"] .msu-mega--narrow { background: var(--msu-panel-bg); color: var(--msu-panel-text); }
.msu-nav[data-scheme="main"] .msu-mega::after { background: var(--msu-panel-bg); }
.msu-nav[data-scheme="main"] .msu-mega__list a { color: var(--msu-panel-link); }
.msu-nav[data-scheme="main"] .msu-mega__list a:hover,
.msu-nav[data-scheme="main"] .msu-mega__list a:focus-visible { color: var(--msu-panel-hover); }
.msu-nav[data-scheme="main"] .msu-mega__title { text-decoration-color: rgba(58, 61, 70, .45); }
.msu-nav *, .msu-nav *::before, .msu-nav *::after { box-sizing: border-box; }
.msu-nav ul { list-style: none; margin: 0; padding: 0; }
.msu-nav a { text-decoration: none; color: inherit; }
.msu-nav a:focus-visible,
.msu-nav button:focus-visible { outline: 2px solid var(--msu-gold); outline-offset: 2px; border-radius: 4px; }

/* ---------------------------------------------------------------- top bar */
.msu-nav__top {
  background: var(--msu-topbar);
  color: var(--msu-topbar-text);
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
  padding: 0 clamp(16px, 4vw, 90px) 0 16px;
  font-weight: 400;
  font-size: 15px;
}
.msu-nav__langs { display: flex; gap: 8px; }
.msu-nav__lang {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 4px 10px; border-radius: 999px; opacity: .72;
  transition: opacity .2s var(--msu-ease), background-color .2s var(--msu-ease);
}
.msu-nav__lang svg, .msu-nav__lang img { width: 20px; height: 15px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); display: block; }
.msu-nav__lang:hover, .msu-nav__lang[aria-current="true"] { opacity: 1; background: rgba(38, 43, 80, .08); }
/* ปุ่มทุกปุ่มใน header: ล้างสไตล์ button ของธีม (ed-school ใส่ padding 11px 24px + พื้นเทา + สีขาว) */
.msu-nav button {
  appearance: none; -webkit-appearance: none;
  margin: 0; padding: 0; border: 0; border-radius: 0;
  background: transparent; color: inherit; font: inherit; line-height: 1;
  box-shadow: none; text-shadow: none; min-width: 0; min-height: 0;
}
.msu-nav button:hover, .msu-nav button:focus { background: transparent; color: inherit; outline: none; }
.msu-nav__search-btn {
  flex: 0 0 auto;
  width: 34px; height: 34px; border: 0; background: transparent; color: var(--msu-topbar-text); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  transition: background-color .2s var(--msu-ease), transform .2s var(--msu-ease);
}
.msu-nav__search-btn svg { display: block; width: 17px; height: 17px; flex: 0 0 auto; overflow: visible; }
.msu-nav__search-btn:hover { background: rgba(38, 43, 80, .1); transform: scale(1.06); }
.msu-nav__search {
  position: absolute; left: 0; right: 0; top: 0; z-index: 5;
  background: #fff; border-bottom: 3px solid var(--msu-gold);
  box-shadow: 0 24px 48px -16px rgba(21, 27, 84, .35);
  display: flex; align-items: center; padding: 14px clamp(16px, 4vw, 90px);
  opacity: 0; visibility: hidden; transform: translateY(-10px); pointer-events: none;
  transition: opacity var(--msu-dur) var(--msu-ease), transform var(--msu-dur) var(--msu-ease), visibility 0s linear var(--msu-dur);
}
.msu-nav.is-search-open .msu-nav__search { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
.msu-nav__search input {
  flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 20px; font-weight: 300;
  color: var(--msu-navy); padding: 12px 8px;
}
.msu-nav__search-close {
  width: 36px; height: 36px; border: 0; background: transparent; color: var(--msu-navy); cursor: pointer; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; transition: background-color .2s, transform .2s var(--msu-ease);
}
.msu-nav__search-close:hover { background: rgba(38, 43, 80, .08); transform: rotate(90deg); }

/* ---------------------------------------------------------------- main bar */
.msu-nav__bar {
  position: relative;
  background: var(--msu-navy);
  min-height: var(--msu-bar-height);
  display: flex;
  align-items: stretch;
}
.msu-nav__logo {
  background: var(--msu-navy-2);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 44px 10px 24px;
  flex: 0 0 auto;
}
/* โลโก้เป็นรูป PNG 391×68 สองเวอร์ชัน: ขาว / เหลือง – แสดงตามชุดสี */
.msu-nav__logo-img { display: block; height: 58px; width: auto; max-width: 100%; }
.msu-nav__logo-img--white, .msu-nav__logo-img--main { display: none; }
.msu-nav[data-scheme="light"] .msu-nav__logo-img--white { display: block; }
.msu-nav[data-scheme="light"] .msu-nav__logo-img--yellow { display: none; }
.msu-nav[data-scheme="main"] .msu-nav__logo-img--main { display: block; }
.msu-nav[data-scheme="main"] .msu-nav__logo-img--yellow { display: none; }

/* ชื่อภาษา: ปกติแสดงชื่อเต็ม (ไทย / English), ชุด main แสดงตัวย่อ (TH / EN) */
.msu-nav__lang-short { display: none; }
.msu-nav[data-scheme="main"] .msu-nav__lang-name,
.msu-nav[data-scheme="main"] .msu-nav__lang img,
.msu-nav[data-scheme="main"] .msu-nav__lang svg { display: none; }
.msu-nav[data-scheme="main"] .msu-nav__lang-short { display: inline; }
/* TH | EN แบบ pill บนแถบเทาเข้ม: ภาษาที่ใช้อยู่เป็นพื้นขาวทึบ ตัวหนังสือเทาเข้ม */
.msu-nav[data-scheme="main"] .msu-nav__langs {
  display: inline-flex; gap: 2px; padding: 3px;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: rgba(255, 255, 255, .08);
}
.msu-nav[data-scheme="main"] .msu-nav__lang {
  padding: 4px 12px; opacity: 1; font-size: 13px; font-weight: 500; letter-spacing: .06em;
  color: rgba(255, 255, 255, .7); border-radius: 999px; background: transparent;
}
.msu-nav[data-scheme="main"] .msu-nav__lang:hover { color: #FFFFFF; background: rgba(255, 255, 255, .12); }
.msu-nav[data-scheme="main"] .msu-nav__lang[aria-current="true"] { color: #2F3239; background: #FFFFFF; font-weight: 600; }

.msu-nav__menu { flex: 1; display: flex; justify-content: center; align-items: stretch; padding: 0 16px; }
.msu-nav__list { display: flex; align-items: stretch; }
.msu-nav__item { position: static; display: flex; align-items: center; }   /* static → mega ยึดกับ .msu-nav__bar */
/* hover แบบที่ชอบ: pill พื้นจาง ๆ + เส้นใต้สีทองวิ่งจากซ้าย + chevron หมุน */
.msu-nav__link {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0 2px;
  padding: 14px 14px 16px;
  border-radius: 10px;
  white-space: nowrap;                 /* ห้ามตัดคำในชื่อเมนู */
  font-size: 16px; font-weight: 300; color: var(--msu-text);
  background: transparent; border: 0; cursor: pointer; font-family: inherit;
  transition: color var(--msu-dur) var(--msu-ease), background-color var(--msu-dur) var(--msu-ease);
}
.msu-nav__link::before {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 9px; height: 2px;
  background: var(--msu-line); border-radius: 2px;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .34s var(--msu-ease);
}
.msu-nav__item:hover > .msu-nav__link,
.msu-nav__item.is-open > .msu-nav__link { color: var(--msu-text); background: var(--msu-hover-bg); }
.msu-nav__item:hover > .msu-nav__link::before,
.msu-nav__item.is-open > .msu-nav__link::before { transform: scaleX(1); }
/* หน้าปัจจุบัน: ตัวหนังสือสีทอง + เส้นใต้จาง ๆ */
.msu-nav__item[aria-current="page"] > .msu-nav__link { color: var(--msu-gold); }
.msu-nav__item[aria-current="page"] > .msu-nav__link::before { transform: scaleX(1); opacity: .55; }
/* chevron */
.msu-nav__chev { width: 10px; height: 10px; flex: 0 0 auto; transition: transform var(--msu-dur) var(--msu-ease); opacity: .85; }
.msu-nav__item:hover > .msu-nav__link .msu-nav__chev,
.msu-nav__item.is-open > .msu-nav__link .msu-nav__chev { transform: rotate(180deg); opacity: 1; }

/* ---------------------------------------------------------------- mega panel */
.msu-mega {
  /* JS (msu-megamenu.js) ตั้ง --msu-mega-left ให้แผงอยู่กึ่งกลางใต้เมนูที่เปิด
     และ --msu-caret-x ให้ลูกศรชี้ที่เมนู; ถ้าไม่มี JS จะ fallback เป็นกึ่งกลางหน้า */
  position: absolute;
  top: 100%;
  left: var(--msu-mega-left, 50%);
  width: min(var(--msu-mega-width), calc(100vw - 32px));
  transform: translate(var(--msu-mega-tx, -50%), 10px);
  background: var(--msu-navy);
  color: var(--msu-text);
  box-shadow: var(--msu-shadow, 0 30px 60px -22px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .04));
  border-top: 1px solid var(--msu-panel-edge, transparent);
  padding: 14px 14px 26px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--msu-dur) var(--msu-ease), transform var(--msu-dur) var(--msu-ease), visibility 0s linear var(--msu-dur);
  will-change: opacity, transform;
  z-index: 10;
}
.msu-mega--narrow { --msu-mega-width: 640px; }
/* ความกว้างแผงตามจำนวนคอลัมน์ (walker/JS ใส่ class msu-mega--cols-N ให้) – แผงที่มีคอลัมน์น้อยจะไม่กว้างโล่ง */
.msu-mega--cols-1 { --msu-mega-width: 360px; }
.msu-mega--cols-2 { --msu-mega-width: 680px; }
.msu-mega--cols-3 { --msu-mega-width: 980px; }
.msu-mega--cols-4 { --msu-mega-width: 1260px; }
.msu-mega--cols-1 .msu-mega__inner, .msu-mega--cols-2 .msu-mega__inner { gap: 0 48px; }
.msu-mega--cols-1, .msu-mega--cols-2 { padding: 18px 28px 28px; }
.msu-mega--cols-1 .msu-mega__title, .msu-mega--cols-2 .msu-mega__title { margin-top: 10px; }
.msu-mega--cols-1 .msu-mega__list a, .msu-mega--cols-2 .msu-mega__list a { padding-top: 4px; padding-bottom: 4px; }
/* แผงที่ใช้ Elementor template เป็นเนื้อหา (WordPress: Description = elementor:ID) */
.msu-mega--elementor { padding: 0; }
.msu-mega--elementor .elementor { color: inherit; }
.msu-mega::before {            /* สะพานให้เมาส์ข้ามช่องว่างได้ */
  content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
}
.msu-mega::after {             /* ลูกศรเล็กชี้ที่เมนูที่เปิด */
  content: ""; position: absolute; top: -6px; left: var(--msu-caret-x, 50%);
  width: 12px; height: 12px; background: var(--msu-navy);
  border-left: 1px solid var(--msu-panel-edge, transparent); border-top: 1px solid var(--msu-panel-edge, transparent);
  transform: translateX(-50%) rotate(45deg);
}
.msu-nav__item:hover > .msu-mega,
.msu-nav__item.is-open > .msu-mega,
.msu-nav__item:focus-within > .msu-mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(var(--msu-mega-tx, -50%), 0);
  transition: opacity var(--msu-dur) var(--msu-ease), transform var(--msu-dur) var(--msu-ease), visibility 0s;
}
.msu-mega__inner {
  display: grid;
  grid-template-columns: repeat(var(--msu-cols, 4), minmax(0, 1fr));
  gap: 0 28px;
}
.msu-mega__col {
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s var(--msu-ease), transform .3s var(--msu-ease);
}
.msu-nav__item:hover .msu-mega__col,
.msu-nav__item.is-open .msu-mega__col,
.msu-nav__item:focus-within .msu-mega__col { opacity: 1; transform: none; }
.msu-mega__col:nth-child(2) { transition-delay: .05s; }
.msu-mega__col:nth-child(3) { transition-delay: .10s; }
.msu-mega__col:nth-child(4) { transition-delay: .15s; }

.msu-mega__title {
  margin: 8px 0 14px;
  font-size: 18px; font-weight: 400; color: var(--msu-title);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.msu-mega__title + .msu-mega__title { margin-top: 4px; }
.msu-mega__list + .msu-mega__title { margin-top: 26px; }
.msu-mega__list li { margin: 0; }
.msu-mega__list a {
  position: relative; display: inline-block;
  padding: 2px 0 2px 0; font-size: 15px; color: var(--msu-text-dim);
  transition: color .2s var(--msu-ease), transform .25s var(--msu-ease), padding-left .25s var(--msu-ease);
}
.msu-mega__list a::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 5px; height: 5px; border-radius: 50%;
  background: var(--msu-gold); transform: translateY(-50%) scale(0); transition: transform .25s var(--msu-ease);
}
.msu-mega__list a:hover, .msu-mega__list a:focus-visible { color: var(--msu-gold); padding-left: 12px; }
.msu-mega__list a:hover::before, .msu-mega__list a:focus-visible::before { transform: translateY(-50%) scale(1); }

/* จอกลาง (1101–1400px): ย่อระยะและขนาดตัวอักษรเล็กน้อยให้ 7 เมนูอยู่บรรทัดเดียว */
@media (max-width: 1400px) and (min-width: 1101px) {
  .msu-nav__logo { padding: 10px 28px 10px 20px; }
  .msu-nav__logo-img { height: 50px; }
  .msu-nav__menu { padding: 0 8px; }
  .msu-nav__link { padding: 14px 10px 16px; margin: 0 1px; font-size: 15px; gap: 5px; }
  .msu-nav__link::before { left: 10px; right: 10px; }
}
@media (max-width: 1240px) and (min-width: 1101px) {
  .msu-nav__logo-img { height: 44px; }
  .msu-nav__link { padding: 14px 8px 16px; font-size: 14px; }
  .msu-nav__link::before { left: 8px; right: 8px; }
}

/* ---------------------------------------------------------------- mobile */
.msu-nav .msu-nav__burger {          /* specificity สูงกว่า .msu-nav button {margin:0} เพื่อให้ margin-left:auto ดันไปชิดขวา */
  display: none; margin-left: auto; margin-right: 12px; align-self: center;
  width: 44px; height: 44px; border: 0; background: transparent; color: var(--msu-text); cursor: pointer; border-radius: 10px;
  transition: background-color .2s;
}
.msu-nav__burger:hover { background: rgba(255, 255, 255, .08); }
.msu-nav__burger span { display: block; width: 22px; height: 2px; background: currentColor; margin: 5px auto; border-radius: 2px; transition: transform .25s var(--msu-ease), opacity .2s; }
.msu-nav.is-menu-open .msu-nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.msu-nav.is-menu-open .msu-nav__burger span:nth-child(2) { opacity: 0; }
.msu-nav.is-menu-open .msu-nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1100px) {
  .msu-nav__bar { flex-wrap: wrap; --msu-bar-height: 72px; }
  .msu-nav__logo { padding: 8px 20px; }
  .msu-nav__logo-img { height: 42px; }
  .msu-nav .msu-nav__burger { display: block; }
  .msu-nav__menu {
    flex-basis: 100%; padding: 0;
    display: grid; grid-template-rows: 0fr;               /* เลื่อนเปิดแบบนุ่ม */
    transition: grid-template-rows .35s var(--msu-ease);
  }
  .msu-nav.is-menu-open .msu-nav__menu { grid-template-rows: 1fr; }
  .msu-nav__list { min-height: 0; overflow: hidden; flex-direction: column; align-items: stretch; padding-bottom: 0; }
  .msu-nav.is-menu-open .msu-nav__list { padding-bottom: 10px; }
  .msu-nav__item { position: relative; flex-direction: column; }
  .msu-nav__link { width: 100%; justify-content: space-between; padding: 13px 20px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 16px; }
  .msu-nav__link::before { display: none; }
  .msu-nav__item:hover > .msu-nav__link { color: var(--msu-text); }
  .msu-nav__item.is-open > .msu-nav__link { color: var(--msu-gold); }
  .msu-nav__item:hover > .msu-nav__link .msu-nav__chev { transform: none; }
  .msu-nav__item.is-open > .msu-nav__link .msu-nav__chev { transform: rotate(180deg); }
  /* mega → accordion */
  .msu-mega, .msu-mega--narrow {
    position: static; width: auto; transform: none; box-shadow: none; padding: 0 20px;
    background: rgba(0, 0, 0, .18);
    display: grid; grid-template-rows: 0fr; opacity: 1; visibility: visible; pointer-events: auto;
    transition: grid-template-rows .35s var(--msu-ease), padding .35s var(--msu-ease);
  }
  .msu-nav__item:hover > .msu-mega, .msu-nav__item:focus-within > .msu-mega { grid-template-rows: 0fr; padding-bottom: 0; }
  .msu-nav__item.is-open > .msu-mega { grid-template-rows: 1fr; padding-bottom: 16px; }
  .msu-mega::before, .msu-mega::after { display: none; }
  .msu-mega__inner { min-height: 0; overflow: hidden; grid-template-columns: 1fr; gap: 0; }
  .msu-mega__col, .msu-nav__item:hover .msu-mega__col { opacity: 1; transform: none; transition: none; }
  .msu-mega__title { margin: 14px 0 6px; font-size: 16px; }
  .msu-mega__list a { display: block; padding: 6px 0; }
  .msu-mega__list a:hover { padding-left: 12px; }
}
/* === สำเนาแบบ class สำหรับ JS auto-fit (.msu-nav--compact) – เนื้อหาเดียวกับ @media ด้านบน === */
.msu-nav--compact .msu-nav__bar {flex-wrap: wrap; --msu-bar-height: 72px; }
.msu-nav--compact .msu-nav__logo {padding: 8px 20px; }
.msu-nav--compact .msu-nav__logo-img {height: 42px; }
.msu-nav--compact .msu-nav__burger {display: block; }
.msu-nav--compact .msu-nav__menu {flex-basis: 100%; padding: 0; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--msu-ease); }
.msu-nav--compact.is-menu-open .msu-nav__menu {grid-template-rows: 1fr; }
.msu-nav--compact .msu-nav__list {min-height: 0; overflow: hidden; flex-direction: column; align-items: stretch; padding-bottom: 0; }
.msu-nav--compact.is-menu-open .msu-nav__list {padding-bottom: 10px; }
.msu-nav--compact .msu-nav__item {position: relative; flex-direction: column; }
.msu-nav--compact .msu-nav__link {width: 100%; justify-content: space-between; padding: 13px 20px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 16px; }
.msu-nav--compact .msu-nav__link::before {display: none; }
.msu-nav--compact .msu-nav__item:hover > .msu-nav__link {color: var(--msu-text); }
.msu-nav--compact .msu-nav__item.is-open > .msu-nav__link {color: var(--msu-gold); }
.msu-nav--compact .msu-nav__item:hover > .msu-nav__link .msu-nav__chev {transform: none; }
.msu-nav--compact .msu-nav__item.is-open > .msu-nav__link .msu-nav__chev {transform: rotate(180deg); }
.msu-nav--compact .msu-mega, .msu-nav--compact .msu-mega--narrow {position: static; width: auto; transform: none; box-shadow: none; padding: 0 20px; background: rgba(0, 0, 0, .18); display: grid; grid-template-rows: 0fr; opacity: 1; visibility: visible; pointer-events: auto; transition: grid-template-rows .35s var(--msu-ease), padding .35s var(--msu-ease); }
.msu-nav--compact .msu-nav__item:hover > .msu-mega, .msu-nav--compact .msu-nav__item:focus-within > .msu-mega {grid-template-rows: 0fr; padding-bottom: 0; }
.msu-nav--compact .msu-nav__item.is-open > .msu-mega {grid-template-rows: 1fr; padding-bottom: 16px; }
.msu-nav--compact .msu-mega::before, .msu-nav--compact .msu-mega::after {display: none; }
.msu-nav--compact .msu-mega__inner {min-height: 0; overflow: hidden; grid-template-columns: 1fr; gap: 0; }
.msu-nav--compact .msu-mega__col, .msu-nav--compact .msu-nav__item:hover .msu-mega__col {opacity: 1; transform: none; transition: none; }
.msu-nav--compact .msu-mega__title {margin: 14px 0 6px; font-size: 16px; }
.msu-nav--compact .msu-mega__list a {display: block; padding: 6px 0; }
.msu-nav--compact .msu-mega__list a:hover {padding-left: 12px; }


/* ---------------------------------------------------------------- scheme main : layout แถวเดียว */
@media (min-width: 1101px) {
  .msu-nav[data-scheme="main"] { display: flex; align-items: stretch; }
  .msu-nav[data-scheme="main"] .msu-nav__bar { flex: 1 1 auto; order: 1; min-width: 0; background: transparent; }
  .msu-nav[data-scheme="main"] .msu-nav__top {
    order: 2; height: auto; padding: 0 clamp(16px, 3vw, 48px) 0 8px; gap: 14px;
    background: transparent; position: static;
  }
  /* กล่องโลโก้พื้นขาว สูงเต็มแถบ */
  .msu-nav[data-scheme="main"] .msu-nav__logo { background: #FFFFFF; padding: 10px 32px 10px clamp(16px, 3vw, 48px); }
  .msu-nav[data-scheme="main"] .msu-nav__logo-img { height: 52px; }
  .msu-nav[data-scheme="main"] .msu-nav__menu { justify-content: center; }
  .msu-nav[data-scheme="main"] .msu-nav__link { font-weight: 300; }
  .msu-nav[data-scheme="main"] .msu-nav__link::before { bottom: 12px; }
  .msu-nav[data-scheme="main"] .msu-nav__search-btn { color: #FFFFFF; }
  .msu-nav[data-scheme="main"] .msu-nav__search-btn:hover { background: rgba(255, 255, 255, .12); }
  .msu-nav[data-scheme="main"] .msu-nav__search { top: 0; bottom: 0; padding-top: 0; padding-bottom: 0; }
  .msu-nav[data-scheme="main"] .msu-mega { border-top: 1px solid var(--msu-panel-edge); }
  .msu-nav[data-scheme="main"] .msu-mega::after { border-color: var(--msu-panel-edge); }
}
@media (max-width: 1400px) and (min-width: 1101px) {
  .msu-nav[data-scheme="main"] .msu-nav__logo-img { height: 46px; }
  .msu-nav[data-scheme="main"] .msu-nav__logo { padding-right: 18px; }
}
@media (max-width: 1100px) {
  .msu-nav[data-scheme="main"] .msu-nav__top { border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .msu-nav[data-scheme="main"] .msu-nav__logo { background: #FFFFFF; }
  .msu-nav[data-scheme="main"] .msu-nav__link { border-top-color: rgba(255, 255, 255, .1); }
  .msu-nav[data-scheme="main"] .msu-nav__item.is-open > .msu-nav__link { color: var(--msu-gold); }
  .msu-nav[data-scheme="main"] .msu-mega__title { color: var(--msu-title); }
}
/* === สำเนาแบบ class สำหรับ JS auto-fit (.msu-nav--compact) – เนื้อหาเดียวกับ @media ด้านบน === */
.msu-nav--compact[data-scheme="main"] .msu-nav__top {border-bottom: 1px solid rgba(255, 255, 255, .12); }
.msu-nav--compact[data-scheme="main"] .msu-nav__logo {background: #FFFFFF; }
.msu-nav--compact[data-scheme="main"] .msu-nav__link {border-top-color: rgba(255, 255, 255, .1); }
.msu-nav--compact[data-scheme="main"] .msu-nav__item.is-open > .msu-nav__link {color: var(--msu-gold); }
.msu-nav--compact[data-scheme="main"] .msu-mega__title {color: var(--msu-title); }


/* ---------------------------------------------------------------- ธีม ed-school ซ่อน .wh-header เมื่อจอ ≤1100px */
/* header ของเรา (shortcode ใน Elementor template) อยู่ใน .wh-header ของธีม ต้องบังคับให้แสดงบนมือถือ/แท็บเล็ต */
.wh-header:has(.msu-nav) { display: block !important; }

/* ---------------------------------------------------------------- full-bleed ใน WordPress / Elementor */
/* 1) ล้าง padding/ความกว้างของ wrapper Elementor ที่ครอบ shortcode [msu_header] อัตโนมัติ
      (ต้องใช้เบราว์เซอร์ที่รองรับ :has() – Chrome/Edge 105+, Safari 15.4+, Firefox 121+)
      ถ้าไม่รองรับ ให้ตั้งใน Elementor เอง: Section › Columns Gap = No Gap และ Column › Padding = 0 */
.elementor-section:has(.msu-nav) > .elementor-container { max-width: 100% !important; }
.elementor-column:has(> .elementor-widget-wrap > .elementor-widget-shortcode .msu-nav) > .elementor-widget-wrap,
.elementor-widget-shortcode:has(.msu-nav) > .elementor-widget-container { padding: 0 !important; margin: 0 !important; }
.elementor-widget-shortcode:has(.msu-nav) { margin: 0 !important; }
/* 2) ทางเลือก: ดึง header ให้เต็มจอเมื่อถูกครอบด้วย container ที่จำกัดความกว้าง (เช่น .cbp-container)
      ใช้ [msu_header full="1"] หรือเติม class msu-nav--bleed เอง */
.msu-nav--bleed {
  width: auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
/* กัน scrollbar แนวนอนที่อาจเกิดจาก 50vw (ใส่ให้เมื่อใช้ bleed) */
body:has(.msu-nav--bleed) { overflow-x: clip; }

/* ---------------------------------------------------------------- Revolution Slider ใต้ header ให้เต็มจอพอดี */
/* ใส่ class "msu-rs-full" ที่ Section ของสไลด์ (Elementor › Section › Advanced › CSS Classes)
   ใช้กับ Slider Layout = Full-Width และ Stretch Section = No
   บังคับให้ rs-module กว้าง 100vw และกึ่งกลางหน้าต่าง แทนค่าที่ RevSlider คำนวณขาดไป ~2% */
.msu-rs-full rs-module-wrap { width: 100vw !important; left: 50% !important; margin-left: -50vw !important; }
.msu-rs-full rs-module { width: 100vw !important; }
.msu-rs-full > .elementor-container > .elementor-column > .elementor-widget-wrap { padding: 0 !important; }
body:has(.msu-rs-full) { overflow-x: clip; }


/* ---------------------------------------------------------------- auto-fit (JS เพิ่ม class ให้เมื่อเมนูล้น) */
/* ขั้นที่ 1  .msu-nav--tight   : ย่อระยะ/ตัวอักษรของเมนูบนเดสก์ท็อป */
.msu-nav.msu-nav--tight .msu-nav__link { padding: 14px 8px 16px; margin: 0; font-size: 14px; gap: 4px; }
.msu-nav.msu-nav--tight .msu-nav__link::before { left: 8px; right: 8px; }
.msu-nav.msu-nav--tight .msu-nav__chev { width: 9px; height: 9px; }
.msu-nav.msu-nav--tight .msu-nav__logo { padding-right: 16px; }
.msu-nav.msu-nav--tight .msu-nav__logo-img { height: 44px; }
.msu-nav.msu-nav--tight .msu-nav__menu { padding: 0 6px; }
.msu-nav.msu-nav--tight .msu-nav__top { gap: 8px; padding-right: 16px; }
/* ขั้นที่ 2  .msu-nav--compact : ยังล้นอยู่ → สลับเป็น hamburger เหมือนมือถือ (กฎอยู่ในสำเนาด้านบน) */
.msu-nav--compact[data-scheme="main"] { display: block; }
.msu-nav--compact[data-scheme="main"] .msu-nav__top { order: 0; height: 40px; padding: 0 16px; }
.msu-nav--compact[data-scheme="main"] .msu-nav__bar { order: 0; }
.msu-nav--compact .msu-nav__link { white-space: normal; }
/* accordion ในโหมด compact: ยกเลิก transform/left ของแผงเดสก์ท็อป (กฎ .is-open ของเดสก์ท็อปมี specificity สูงกว่าสำเนาด้านบน) */
.msu-nav--compact .msu-nav__item > .msu-mega,
.msu-nav--compact .msu-nav__item:hover > .msu-mega,
.msu-nav--compact .msu-nav__item.is-open > .msu-mega,
.msu-nav--compact .msu-nav__item:focus-within > .msu-mega {
  position: static; left: auto; transform: none; width: auto; opacity: 1; visibility: visible; pointer-events: auto; z-index: auto;
}
.msu-nav--compact .msu-nav__item.is-open > .msu-mega { grid-template-rows: 1fr; padding-bottom: 16px; }
/* รายการเมนูเต็มความกว้าง (scheme main ตั้ง justify-content:center ไว้สำหรับเดสก์ท็อป) */
.msu-nav--compact .msu-nav__menu, .msu-nav--compact[data-scheme="main"] .msu-nav__menu { justify-content: stretch; display: grid; }
.msu-nav--compact .msu-nav__list { width: 100%; }
.msu-nav--compact .msu-nav__item { align-items: stretch; }   /* ให้แผง accordion กว้างเต็มแถว ไม่หดตามเนื้อหา */
/* header ไม่กว้างเกินหน้าต่าง แม้ body จะล้นจากเนื้อหาอื่น */
.msu-nav { max-width: 100vw; }

/* ---------------------------------------------------------------- a11y */
@media (prefers-reduced-motion: reduce) {
  .msu-nav *, .msu-nav *::before, .msu-nav *::after { transition-duration: .01ms !important; transition-delay: 0s !important; }
}