/* ===========================================================================
   Header แบบ mobile — template MainHeader (#23091)
   โหลดทุกหน้าผ่าน functions.php ข้อ 13

     spu-header-bar   กล่องเมนูหลัก (Container)
     spu-burger       ปุ่ม ☰ (Nav Menu แบบ Dropdown — ซ่อนบนจอคอมพ์/แท็บเล็ต)
     spu-apply        ปุ่ม "สมัครเรียน" (Button — ซ่อนบนจอคอมพ์/แท็บเล็ต)

   จอคอมพ์ไม่โดนไฟล์นี้ — ทุกอย่างอยู่ใน @media มือถือ
   =========================================================================== */

@media (max-width: 767px) {
  /* ไม่มีกล่องขาว — ลอยบนภาพสไลด์ตามแบบ */
  .spu-header-bar {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 6px 10px !important;
    min-height: 0 !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  /* 3 ช่อง: ☰ | โลโก้ | ปุ่ม */
  .spu-header-bar > .e-con {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0;
    padding: 0 !important;
    justify-content: center;
  }
  .spu-header-bar > .e-con:nth-child(1) { align-items: flex-start !important; }
  .spu-header-bar > .e-con:nth-child(2) { align-items: center !important; flex-grow: 1.2 !important; }
  .spu-header-bar > .e-con:nth-child(3) { align-items: flex-end !important; }

  .spu-header-bar .elementor-widget-theme-site-logo { width: auto !important; }
  .spu-header-bar .elementor-widget-theme-site-logo img {
    width: auto !important;
    max-width: 96px !important;
    max-height: 46px;
    object-fit: contain;
  }

  /* ปุ่ม ☰ */
  .spu-burger { width: auto !important; position: static !important; }
  .spu-burger .elementor-menu-toggle { padding: 6px !important; margin: 0 !important; }

  /* เมนูที่กางลงมา — เต็มความกว้างจอ ใต้ header */
  .spu-burger .elementor-nav-menu--dropdown {
    border-radius: 0 0 16px 16px;
    box-shadow: 0 12px 28px rgb(0 0 0 / .18);
    overflow: hidden;
  }
  .spu-burger .elementor-nav-menu--dropdown a {
    padding: 14px 22px !important;
    font-size: 16px;
    border-bottom: 1px solid #f0f0f2;
  }

  /* ปุ่มสมัครเรียน */
  .spu-apply { width: auto !important; }
  .spu-apply .elementor-button {
    white-space: nowrap;
    line-height: 1.2;
    box-shadow: 0 4px 12px rgb(238 29 59 / .35);
  }
}


/* ===========================================================================
   ปุ่มโซเชียลข้าง header  [spu_social_dock]  — จอคอมพ์
   ปิด: ปุ่มกลมขาว ไอคอนเล็ก 4 ช่อง วางชิดขวาของกล่องเมนู
   เปิด: ไอคอนโซเชียลเรียงลงมาทีละอัน + ปุ่มปิดด้านล่าง
   =========================================================================== */

.spu-dock {
  --dk-size:   78px;      /* ปุ่มกลมตอนปิด (ย่อ 10% จาก 86) */
  --dk-item:   48px;      /* ไอคอนแต่ละอันตอนเปิด (22 ต.ค. 2026 ผู้ใช้ให้ลดลง: 58 -> 48) */
  --dk-gap:    9px;

  position: absolute;
  left: calc(100% + 10px);
  top: calc(100% - var(--dk-size) / 2);   /* กึ่งกลางปุ่มอยู่ที่ขอบล่างของแถบเมนู ตามแบบ */
  z-index: 60;
  width: var(--dk-size);
}
/* widget ที่ห่อ shortcode ไม่กินที่ในกล่องเมนู */
.elementor-widget-shortcode:has(> .elementor-widget-container > .elementor-shortcode > .spu-dock),
.elementor-widget-shortcode:has(.spu-dock) { position: static !important; width: 0 !important; margin: 0 !important; }

.spu-dock__toggle {
  all: unset;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: var(--dk-size);
  height: var(--dk-size);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 20px rgb(0 0 0 / .18), 0 0 0 4px rgb(255 255 255 / .35);
  cursor: pointer;
  transition: transform .2s ease, opacity .2s ease;
}
.spu-dock__toggle:hover { transform: scale(1.06); }
/* reset.css ของ Hello: button:hover/:focus { background:#c36 } ชนะสีขาว (specificity สูงกว่า) — ตอนกดปิด JS คืนโฟกัสมาที่ปุ่มนี้ จึงค้างเป็นชมพู */
.spu-dock .spu-dock__toggle:is(:hover, :focus, :active) { background: #fff; color: inherit; }
.spu-dock__toggle:focus-visible { outline: 3px solid #e6007e; outline-offset: 3px; }

.spu-dock__mini {
  display: grid;
  grid-template-columns: repeat(2, 24px);
  gap: 3px;
}
.spu-dock__mini i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  font-size: 22px;
  line-height: 1;
}
.spu-dock__mini .is-fb { color: #1877f2; }
.spu-dock__mini .is-yt { color: #ff0000; }
.spu-dock__mini .is-tt { color: #111; text-shadow: -1px -1px 0 #25f4ee, 1px 1px 0 #fe2c55; }
/* brands.min.css ของ Elementor ไม่มี fa-tiktok (มีแค่ใน all.min.css) — ใส่รหัสไอคอนเอง ฟอนต์ Font Awesome 5 Brands มีรูปนี้อยู่แล้ว */
.spu-dock .fa-tiktok::before { content: "\e07b"; }
.spu-dock__mini .is-ig {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.spu-dock__mini .is-line { color: #06c755; }

/* ---- ตอนเปิด ---- */
.spu-dock__list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: calc((var(--dk-size) - var(--dk-item)) / 2);   /* ไอคอนแรกตรงกลางปุ่มกลม = แนวเดียวกับปุ่มสมัครเรียน */
  left: calc((var(--dk-size) - var(--dk-item)) / 2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--dk-gap);
}
.spu-dock__list[hidden] { display: none; }
.spu-dock__list li {
  margin: 0;
  animation: spu-dock-in .32s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(var(--i) * 40ms);
}
@keyframes spu-dock-in {
  from { opacity: 0; transform: translateY(-14px) scale(.85); }
  to   { opacity: 1; transform: none; }
}

.spu-dock.is-open .spu-dock__toggle { opacity: 0; pointer-events: none; transform: scale(.8); }

.spu-dock a.spu-dock__item {   /* "a" นำหน้า — Site Settings ของ Elementor ตั้งขนาดตัวอักษรลิงก์ไว้ 16px */
  display: grid;
  place-items: center;
  width: var(--dk-item);
  height: var(--dk-item);
  border-radius: 50%;
  color: #fff !important;
  font-size: calc(var(--dk-item) * .5);   /* ไอคอนกินครึ่งวงกลม ตามแบบ */
  text-decoration: none;
  box-shadow: 0 6px 16px rgb(0 0 0 / .22);
  transition: transform .18s ease, filter .18s ease;
}
.spu-dock__item:hover { transform: scale(1.08); filter: brightness(1.06); }
.spu-dock__item:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.spu-dock a.spu-dock__item.is-fb   { background: #1877f2; font-size: calc(var(--dk-item) * .56); }
.spu-dock a.spu-dock__item.is-yt   { background: #ff0000; }
.spu-dock a.spu-dock__item.is-ig   { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.spu-dock a.spu-dock__item.is-line { background: #06c755; font-size: calc(var(--dk-item) * .6); }
.spu-dock a.spu-dock__item.is-x    { background: #000; }
.spu-dock__item svg { width: 44%; height: 44%; }
.spu-dock a.spu-dock__item.is-in   { background: #0a66c2; }
.spu-dock a.spu-dock__item.is-tt   { background: #111; text-shadow: -2px -2px 0 #25f4ee, 2px 2px 0 #fe2c55; }
.spu-dock a.spu-dock__item.is-dc   { background: #5865f2; }

.spu-dock__close {
  all: unset;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #3a3a3e;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgb(0 0 0 / .25);
}
.spu-dock__close:hover { background: #55555a; }
.spu-dock__close:focus-visible { outline: 3px solid #e6007e; outline-offset: 3px; }

/* จอไม่กว้างพอวางข้างกล่องเมนู — ย้ายมาใต้ขอบขวาของกล่อง */
@media (max-width: 1320px) {
  .spu-dock { left: auto; right: 6px; top: calc(100% - var(--dk-size) / 2 + 14px); --dk-size: 63px; --dk-item: 42px; --dk-gap: 8px; }
  .spu-dock__mini { grid-template-columns: repeat(2, 19px); gap: 3px; }
  .spu-dock__mini i { width: 19px; height: 19px; font-size: 17px; }

}

@media (max-width: 767px) { .spu-dock { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .spu-dock__list li { animation: none; }
}

/* ปุ่ม "สมัครเรียน" สีชมพูเรืองแสง — อยู่ซ้ายของปุ่มโซเชียล ใต้แถบเมนู */
.spu-dock a.spu-dock__apply {
  position: absolute;
  right: calc(100% + 16px);
  top: 50%;
  transform: translateY(-50%);
  height: 48px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  padding: 0 38px;
  border-radius: 99px;
  border: 2px solid rgb(255 255 255 / .55);
  background: linear-gradient(180deg, #ff5cc0 0%, #ff2fa3 55%, #f0148c 100%);
  color: #fff !important;
  font-size: 21px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 0 18px rgb(255 70 170 / .75), 0 6px 16px rgb(230 0 126 / .35);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.spu-dock a.spu-dock__apply:hover {
  transform: translateY(-50%) scale(1.04);
  filter: brightness(1.05);
  box-shadow: 0 0 26px rgb(255 70 170 / .9), 0 8px 20px rgb(230 0 126 / .4);
}
.spu-dock a.spu-dock__apply:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@media (max-width: 1320px) {
  .spu-dock a.spu-dock__apply { height: 42px; padding: 0 28px; font-size: 18px; right: calc(100% + 12px); }
}


/* ===========================================================================
   ปุ่ม "สมัครเรียน" — สีแดงแบบ CTA การตลาด + แสงวิ่งรอบขอบ (แบบ D, เลือก 14 ต.ค. 2026)
   ใช้ทั้งปุ่มจอคอมพ์ (spu-dock__apply) และปุ่มมือถือ (spu-apply)
     ::before  = เส้นแสงสีขาว-ทองที่หมุนวนรอบขอบ
     ::after   = พื้นสีแดงไล่เฉด (วางทับตรงกลาง เหลือเห็นแสงแค่ที่ขอบ)
   เปลี่ยนสีพื้นที่ --cta-1/2/3, สีแสงที่ --cta-ring, ความเร็วที่ --cta-speed
   =========================================================================== */

.spu-dock a.spu-dock__apply,
.spu-apply .elementor-button {
  --cta-1: #ff4d4d;       /* แดงสว่าง ด้านบน */
  --cta-2: #f01c2e;       /* แดงหลัก */
  --cta-3: #c4001c;       /* แดงเข้ม ด้านล่าง */
  --cta-glow: 255 30 50;  /* สีแสงฟุ้งรอบปุ่ม (R G B) */
  --cta-ring: #ffd7a8;    /* สีหางของเส้นแสง */
  --cta-speed: 2.6s;      /* หมุนครบรอบกี่วินาที */

  isolation: isolate;
  overflow: visible;
  background: transparent !important;
  border: 2px solid transparent !important;
  color: #fff !important;
  font-weight: 700;
  text-shadow: 0 1px 2px rgb(120 0 10 / .35);
  box-shadow: 0 0 18px rgb(var(--cta-glow) / .6), 0 6px 16px rgb(150 0 20 / .35) !important;
}

/* เส้นแสงหมุนรอบขอบ */
.spu-dock a.spu-dock__apply::before,
.spu-apply .elementor-button::before {
  content: "";
  position: absolute;
  inset: -4px;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from var(--spu-cta-ang),
              #fff 0deg, var(--cta-ring) 40deg, transparent 90deg,
              transparent 270deg, #fff 360deg);
  animation: spu-cta-spin var(--cta-speed) linear infinite;
}

/* พื้นสีแดง */
.spu-dock a.spu-dock__apply::after,
.spu-apply .elementor-button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, var(--cta-1) 0%, var(--cta-2) 55%, var(--cta-3) 100%);
}

@property --spu-cta-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes spu-cta-spin { to { --spu-cta-ang: 360deg; } }

/* ชี้เมาส์ — หมุนเร็วขึ้น ยกขึ้น สว่างขึ้น */
.spu-dock a.spu-dock__apply:hover::before,
.spu-apply .elementor-button:hover::before { animation-duration: 1.2s; }
.spu-dock a.spu-dock__apply:hover {
  transform: translateY(calc(-50% - 2px)) scale(1.05);
  filter: brightness(1.06) saturate(1.1);
  box-shadow: 0 0 26px rgb(var(--cta-glow) / .8), 0 8px 20px rgb(150 0 20 / .4) !important;
}
.spu-dock a.spu-dock__apply:active { transform: translateY(-50%) scale(.98); }
.spu-apply .elementor-button:hover { transform: translateY(-1px) scale(1.04); filter: brightness(1.06); }

@media (prefers-reduced-motion: reduce) {
  .spu-dock a.spu-dock__apply::before,
  .spu-apply .elementor-button::before { animation: none; }
}

/* ปุ่มมือถือต้องเป็นกรอบอ้างอิงของเส้นแสง (ปุ่มจอคอมพ์เป็น absolute อยู่แล้ว ห้ามเปลี่ยน) */
.spu-apply .elementor-button { position: relative; }


/* ===========================================================================
   ตำแหน่งปุ่ม (16 ต.ค. 2026)
     อยู่นอกแถบเมนู ทางขวา เรียงเป็นคอลัมน์:
       [สมัครเรียน]  กึ่งกลางแนวตั้งตรงกับแถบเมนูพอดี
       (โซเชียล)     อยู่ใต้ปุ่มสมัครเรียน
     จอแคบจนข้างแถบไม่มีที่ (≤1320px) — ทั้งคอลัมน์ย้ายลงไปอยู่ใต้ปลายขวาของแถบ
   =========================================================================== */
.spu-dock {
  --dk-apply-h: 48px;     /* ความสูงปุ่มสมัครเรียน */
  --dk-stack:   10px;     /* ระยะ ปุ่มสมัครเรียน → ปุ่มโซเชียล */

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--dk-stack);
  left: calc(100% + 8px);
  right: auto;
  top: calc(50% - var(--dk-apply-h) / 2);   /* กลางปุ่มสมัครเรียน = กลางแถบ */
  bottom: auto;
  width: auto;
}
.spu-dock a.spu-dock__apply {
  position: relative;
  top: auto;
  right: auto;
  transform: none;
  height: var(--dk-apply-h);
  padding: 0 30px;
  flex: 0 0 auto;
}
.spu-dock a.spu-dock__apply:hover  { transform: translateY(-2px) scale(1.05); }
.spu-dock a.spu-dock__apply:active { transform: scale(.98); }

.spu-dock__toggle { position: relative; left: auto; top: auto; flex: 0 0 auto; }

/* แถวไอคอนตอนกาง — แทนที่ปุ่มโซเชียล (ใต้ปุ่มสมัครเรียน) */
.spu-dock__list {
  top: calc(var(--dk-apply-h) + var(--dk-stack) + (var(--dk-size) - var(--dk-item)) / 2);
  left: 50%;
  transform: translateX(-50%);
}

@media (max-width: 1320px) {
  .spu-dock {
    --dk-apply-h: 42px;
    left: auto;
    right: 4px;
    top: calc(100% + 10px);
  }
  .spu-dock a.spu-dock__apply { padding: 0 24px; }
}


/* ===========================================================================
   ลอยติดจอ (sticky) — เลื่อนหน้าลงจนแถบเมนูพ้นจอแล้ว ปุ่มสมัครเรียน + โซเชียล
   ย้ายไปลอยที่มุมขวาบนของจอ (ชิดขอบเนื้อหา 1500px) ตามไปตลอด
   เลื่อนกลับขึ้นบนสุด กลับไปอยู่ข้างแถบเมนูเหมือนเดิม  (JS: assets/spu-hub.js)
   =========================================================================== */
.spu-dock.is-stuck {
  position: fixed;
  top: 18px;
  bottom: auto;
  left: auto;
  right: max(16px, calc((100vw - 1500px) / 2));
  animation: spu-dock-drop .35s cubic-bezier(.2, .8, .2, 1) both;
}
/* ตอนลอย: หน้าทั่วไปชิดบน 24px · หน้าที่มีหัวตารางค้างด้านบน — ค่าเทอม (.spu-tu) กองทุน/คณะ (.spu-lt) —
   ลงมาใต้หัวตาราง (16 + 75px) ไม่บังคอลัมน์ขวา — 22 ต.ค. 2026 ผู้ใช้เลือกแบบ ก */
.spu-dock.is-stuck { top: 24px; }
body:has(.spu-tu, .spu-lt) .spu-dock.is-stuck { top: 104px; }
@keyframes spu-dock-drop {
  from { opacity: 0; transform: translateY(-18px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .spu-dock.is-stuck { animation: none; }
}


/* ===========================================================================
   ฟอนต์ปุ่มสมัครเรียน — DB Helvethaica X Bd Cond (ฟอนต์แบรนด์ ชุดเดียวกับหัวข้อทั้งหน้า)
   ประกาศ @font-face เองที่นี่ เพราะ Elementor โหลดฟอนต์นี้เฉพาะหน้าที่มี widget ใช้
   header นี้ใช้หลายหน้า จะได้ขึ้นฟอนต์เดียวกันทุกหน้า
   =========================================================================== */
@font-face {
  font-family: "SPU Cond Bold";
  src: url("/wp-content/uploads/2022/06/DB-HELVETHAICA-X-BD-COND-V3.2.woff") format("woff");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

.spu-dock a.spu-dock__apply,
.spu-apply .elementor-button,
.spu-apply .elementor-button .elementor-button-text {
  font-family: "SPU Cond Bold", "DB HELVETHAICA X BD COND", "Noto Sans Thai", sans-serif !important;
  font-weight: normal !important;      /* ฟอนต์หนาอยู่แล้ว ไม่ให้เบราว์เซอร์ทำหนาซ้อน */
  letter-spacing: .02em;
  line-height: 1 !important;
}
/* ฟอนต์แคบ ต้องใหญ่ขึ้นให้ตัวหนังสือสูงพอๆ กับเดิม */
.spu-dock a.spu-dock__apply { font-size: 28px; padding-top: 2px; }
.spu-apply .elementor-button { font-size: 20px !important; }
@media (max-width: 1320px) {
  .spu-dock a.spu-dock__apply { font-size: 24px; }
}

/* เมนูหลักจอคอมพ์ (header ใหม่): มีเมนูย่อยแล้วลูกศร ▾ กินที่ -> ไม่ให้ตกบรรทัด, ระยะห่างยืดตามจอ */
@media (min-width: 1025px) {
  .elementor-location-header .elementor-nav-menu--main > .elementor-nav-menu { flex-wrap: nowrap; }
  .elementor-location-header .elementor-nav-menu--main > .elementor-nav-menu > li > a.elementor-item {
    padding-inline: clamp(8px, .9vw, 15px); white-space: nowrap;
  }
  .elementor-location-header .elementor-nav-menu--main > .elementor-nav-menu > li > a .sub-arrow { padding-left: 6px; }
}
/* เมนูย่อย (ดึงมาจากเมนูเว็บหลัก): กล่องมุมโค้ง + เงา ให้เข้ากับแถบเมนูแคปซูล */
@media (min-width: 1025px) {
  .elementor-location-header .elementor-nav-menu--main .sub-menu {
    border-radius: 14px; padding: 6px 0; box-shadow: 0 10px 30px rgba(20, 20, 60, .18); overflow: visible;
  }
  .elementor-location-header .elementor-nav-menu--main .sub-menu a.elementor-sub-item { white-space: nowrap; }
}