/* ===========================================================================
   แท็บ SPU — ใช้กับ widget JetTabs ของ Elementor
   โหลดทุกหน้าผ่าน functions.php ข้อ 6

   วิธีใช้: เลือก widget JetTabs -> Advanced -> CSS Classes -> ใส่ชื่อ class

     spu-tabs-vertical   แท็บแนวตั้ง + ตัวการ์ตูน   (Calendar / Activity / News)
     spu-tabs-social     แท็บแนวนอน + ไอคอนอยู่บน  (Tiktok / Tube / IG / Reels)

   ⚠️ ต้องล้าง Style -> Min Height ใน JetTabs ให้ว่างก่อน
      ไม่งั้นค่าจาก Style panel จะทับ (specificity สูงกว่า)
   =========================================================================== */


/* ###########################################################################
   1) แท็บแนวตั้ง + ตัวการ์ตูน      class:  spu-tabs-vertical
   ########################################################################### */

.spu-tabs-vertical {
  /* ---- ขนาด (วัดจาก Figma หน้าแรก กว้าง 1440) ---- */
  --tab-w:      314px;   /* ความกว้างคอลัมน์แท็บ */
  --tab-h:      104px;   /* ความสูงตอน "ยังไม่เลือก" */
  --tab-h-on:   180px;   /* ความสูงตอน "ถูกเลือก" */
  --tab-gap:    13px;    /* ระยะห่างระหว่างแท็บ */
  --tab-space:  21px;    /* ระยะห่างระหว่างคอลัมน์แท็บกับเนื้อหา */
  --tab-radius: 10px;
  --tab-line:   1px;     /* ความหนาเส้นขอบ */
  --tab-font:   36px;    /* ขนาดชื่อแท็บ */
  --tab-ease:   .3s;

  /* ---- สี ---- */
  --tab-on:     #ff0a8c;
  --tab-off:    transparent;
  --text-on:    #ffffff;
  --text-off:   #ffffff;

  /* ---- ตัวการ์ตูน ---- */
  --mascot-h:   83%;
  --mascot-x:   -12px;   /* ล้นขอบขวา (ติดลบ = ล้นออก) */
  --mascot-y:   18px;    /* ยกขึ้นจากขอบล่าง */
  --text-w:     62%;
}

/* กว้างเต็มช่องเสมอ — ใน Container แนวนอน Elementor ให้ widget กว้างเท่าเนื้อหาข้างใน
   ถ้าไม่ล็อก กดแท็บที่เนื้อหาแคบ (เช่น Magazine) ทั้งชุดจะหดตาม */
.elementor-widget-jet-tabs.spu-tabs-vertical,
.elementor-widget-jet-tabs.spu-tabs-social {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
  align-self: stretch;
}
.spu-tabs-vertical .jet-tabs,
.spu-tabs-social .jet-tabs { width: 100%; }

/* JetTabs ใส่พื้นขาว/เส้นขอบมาให้เองทั้งชุด — ล้างออกให้เห็นพื้นของ section */
.spu-tabs-vertical .jet-tabs,
.spu-tabs-vertical .jet-tabs__control-wrapper,
.spu-tabs-vertical .jet-tabs__content-wrapper,
.spu-tabs-vertical .jet-tabs__content {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.spu-tabs-vertical .jet-tabs { gap: var(--tab-space); }
.spu-tabs-vertical .jet-tabs__content-wrapper { flex: 1 1 auto; min-width: 0; padding: 0 !important; }
.spu-tabs-vertical .jet-tabs__content { padding: 0 !important; }

.spu-tabs-vertical .jet-tabs__control-wrapper {
  flex: 0 0 var(--tab-w) !important;
  width: var(--tab-w) !important;
  max-width: var(--tab-w) !important;
  gap: var(--tab-gap);
  overflow: visible;
}

.spu-tabs-vertical .jet-tabs__control {
  position: relative;
  overflow: hidden;
  height: var(--tab-h) !important;
  min-height: 0 !important;
  max-height: var(--tab-h) !important;
  background: var(--tab-off) !important;
  border: var(--tab-line) solid var(--tab-on) !important;
  border-radius: var(--tab-radius) !important;
  margin: 0;
  padding: 0;
  cursor: pointer;
  transition: height var(--tab-ease) cubic-bezier(.4, 0, .2, 1),
              max-height var(--tab-ease) cubic-bezier(.4, 0, .2, 1),
              background .18s ease;
}

.spu-tabs-vertical .jet-tabs__control.active-tab {
  height: var(--tab-h-on) !important;
  max-height: var(--tab-h-on) !important;
  background: var(--tab-on) !important;
}

.spu-tabs-vertical .jet-tabs__control-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: center;             /* ยังไม่เลือก — ชื่ออยู่กลางแนวตั้ง */
  justify-content: flex-start !important;   /* JetTabs ตั้ง center มาเป็นค่าเริ่มต้นของแต่ละ widget */
  padding: 0 28px;
}

/* ถูกเลือก — ชื่อลงไปมุมซ้ายล่าง ให้ที่ตัวการ์ตูนด้านบนขวา */
.spu-tabs-vertical .jet-tabs__control.active-tab .jet-tabs__control-inner {
  align-items: flex-end;
  padding-bottom: 20px;
}

.spu-tabs-vertical .jet-tabs__label-text {
  position: relative;
  z-index: 2;
  max-width: none;                 /* ยังไม่เลือก ใช้ความกว้างเต็มแท็บ */
  color: var(--text-off) !important;
  font-weight: 600;
  font-size: var(--tab-font);
  line-height: 1.1;
}

/* JetTabs ใส่ฟอนต์ Global มาให้ด้วย selector 6 class — ต้องมากกว่าถึงจะชนะ (ที่นี่ 7)
   (ยังน้อยกว่า selector ของ Style panel ดังนั้นตั้งฟอนต์ใน Elementor ได้ตามปกติ) */
.elementor-widget-jet-tabs.spu-tabs-vertical .jet-tabs > .jet-tabs__control-wrapper > .jet-tabs__control .jet-tabs__control-inner .jet-tabs__label-text {
  font-size: var(--tab-font);
  font-weight: 600;
  line-height: 1.1;
}

/* ชี้เมาส์แท็บที่ยังไม่เลือก */
.spu-tabs-vertical .jet-tabs__control:not(.active-tab):hover {
  background: rgb(255 10 140 / .12) !important;
}

.spu-tabs-vertical .jet-tabs__control.active-tab .jet-tabs__label-text {
  color: var(--text-on) !important;
  max-width: var(--text-w);        /* ถูกเลือก เว้นที่ให้ตัวการ์ตูน */
}

.spu-tabs-vertical .jet-tabs__label-icon { display: none !important; }

.spu-tabs-vertical .jet-tabs__label-image {
  position: absolute;
  bottom: var(--mascot-y);
  right: var(--mascot-x);
  top: auto;
  left: auto;
  height: var(--mascot-h);
  width: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  z-index: 0;
  pointer-events: none;
}

/* ตัวการ์ตูนโผล่เฉพาะแท็บที่ถูกเลือก */
.spu-tabs-vertical .jet-tabs__control:not(.active-tab) .jet-tabs__label-image {
  display: none;
}

/* แท็บเล็ต — คอลัมน์แท็บแคบลง */
@media (max-width: 1024px) {
  .spu-tabs-vertical { --tab-w: 230px; --tab-h: 76px; --tab-h-on: 160px; --tab-font: 26px; --tab-space: 14px; }
}

@media (max-width: 767px) {
  .spu-tabs-vertical { --tab-font: 18px; --tab-space: 14px; }

  .spu-tabs-vertical .jet-tabs { flex-direction: column; }

  /* มือถือ — แถวเดียว ไม่มีตัวการ์ตูน · ช่องกว้างตามความยาวชื่อแท็บ (Announcement ยาวกว่า News มาก)
     ขนาดตัวอักษรตามความกว้างจอ ให้ 5 ช่องพอดีแถวตั้งแต่จอ 320 */
  .spu-tabs-vertical .jet-tabs__control-wrapper {
    flex: 0 0 auto !important;
    flex-direction: row !important;
    width: 100% !important;
    max-width: none !important;
    gap: 5px;
  }

  .spu-tabs-vertical .jet-tabs__control,
  .spu-tabs-vertical .jet-tabs__control.active-tab {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px !important;
    max-height: 48px !important;
    border-radius: 8px !important;
  }

  .spu-tabs-vertical .jet-tabs__control-inner,
  .spu-tabs-vertical .jet-tabs__control.active-tab .jet-tabs__control-inner {
    align-items: center;
    justify-content: center !important;
    padding: 0 3px;
  }
  /* !important: ค่ามือถือ 13px ตั้งไว้ใน Style panel ของ widget (selector ยาวกว่า) */
  .elementor-widget-jet-tabs.spu-tabs-vertical .jet-tabs > .jet-tabs__control-wrapper > .jet-tabs__control .jet-tabs__control-inner .jet-tabs__label-text {
    font-size: clamp(14px, 4.6vw, 20px) !important;
    line-height: 1.1 !important;
  }
  .spu-tabs-vertical .jet-tabs__label-text,
  .spu-tabs-vertical .jet-tabs__control.active-tab .jet-tabs__label-text {
    max-width: none;
    white-space: nowrap;
    text-align: center;
  }
  .spu-tabs-vertical .jet-tabs__label-image { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .spu-tabs-vertical .jet-tabs__control { transition: background .18s ease; }
}


/* ###########################################################################
   2) แท็บแนวนอน + ไอคอนอยู่บน      class:  spu-tabs-social
   ---------------------------------------------------------------------------
   ตั้งใน JetTabs:  Layout -> Position = Top
                    Layout -> Icon Position = Top
   ขนาดวัดจาก Figma (SPU HUB / GO INTER) ที่จอกว้าง 1440
   เนื้อหาในแต่ละแท็บ (การ์ด / Instagram / YouTube) อยู่ใน spu-hub.css
   ########################################################################### */

.spu-tabs-social {
  --t-max:      1280px;    /* ความกว้างแถวแท็บ + เนื้อหา */
  --t-gap:      14px;      /* ระยะห่างระหว่างแท็บ */
  --t-h:        153px;     /* ความสูงแท็บ */
  --t-radius:   10px;
  --t-icon:     64px;      /* ขนาดไอคอน */
  --t-font:     22px;      /* ขนาดชื่อแท็บ */
  --t-space:    28px;      /* ระยะแท็บ -> เนื้อหา */

  --t-line:     #ff0080;   /* เส้นขอบ + แสงตอนถูกเลือก */
  --t-bg-on:    #333333;   /* พื้นตอนถูกเลือก */
  --t-bg-off:   transparent;
  --t-text:     #ffffff;
}

/* พื้นหลังโปร่งใสทั้งชุด — JetTabs ใส่พื้นขาวมาให้เอง */
.spu-tabs-social,
.spu-tabs-social .jet-tabs,
.spu-tabs-social .jet-tabs__control-wrapper,
.spu-tabs-social .jet-tabs__content-wrapper,
.spu-tabs-social .jet-tabs__content,
.spu-tabs-social .jet-tabs__content-inner {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.spu-tabs-social .jet-tabs__control-wrapper {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap;
  gap: var(--t-gap);
  width: 100% !important;
  max-width: var(--t-max) !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.spu-tabs-social .jet-tabs__content-wrapper {
  width: 100%;
  max-width: var(--t-content, var(--t-max));   /* เนื้อหากว้างกว่าแถวแท็บได้ */
  margin: var(--t-space) auto 0 !important;
  padding: 0 !important;
}
.spu-tabs-social .jet-tabs__content { padding: 0 !important; }

.spu-tabs-social .jet-tabs__control {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0 !important;
  height: var(--t-h);
  margin: 0;
  background: var(--t-bg-off) !important;
  border: 2px solid transparent !important;
  border-radius: var(--t-radius) !important;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.spu-tabs-social .jet-tabs__control:not(.active-tab):hover {
  background: rgb(255 255 255 / .05) !important;
}

.spu-tabs-social .jet-tabs__control.active-tab {
  background: var(--t-bg-on) !important;
  border-color: var(--t-line) !important;
  box-shadow: 0 0 14px -2px var(--t-line) !important;   /* แสงชมพูรอบแท็บ ตามแบบ */
}

/* ไอคอนบน ข้อความล่าง */
.spu-tabs-social .jet-tabs__control-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center !important;
  gap: 14px;
  padding: 10px !important;
  height: 100%;
}

.spu-tabs-social .jet-tabs__label-image {
  width: var(--t-icon);
  height: var(--t-icon);
  object-fit: contain;
  margin: 0 !important;
  flex: 0 0 auto;
}
.spu-tabs-social .jet-tabs__label-icon { margin: 0 !important; font-size: var(--t-icon); }

/* JetTabs ใส่ฟอนต์ Global มาด้วย selector 6 class — ตรงนี้ใช้ 7 จึงชนะ (Style panel ยังชนะได้) */
.elementor-widget-jet-tabs.spu-tabs-social .jet-tabs > .jet-tabs__control-wrapper > .jet-tabs__control .jet-tabs__control-inner .jet-tabs__label-text {
  color: var(--t-text);
  font-size: var(--t-font);
  font-weight: 500;
  line-height: 1.2;
}
.spu-tabs-social .jet-tabs__label-text {
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* แท็บตัวหนังสืออย่างเดียว (GO INTER / DUAL DEGREE) — ใส่ class เพิ่ม  spu-tabs-social--text */
.spu-tabs-social--text { --t-h: 76px; --t-font: 21px; --t-content: none; --t-space: 18px; }

@media (max-width: 1024px) {
  .spu-tabs-social { --t-h: 120px; --t-icon: 48px; --t-font: 18px; --t-gap: 10px; }
}

/* มือถือ — แท็บเลื่อนแนวนอนได้ */
@media (max-width: 767px) {
  .spu-tabs-social { --t-h: 58px; --t-icon: 22px; --t-font: 11px; --t-gap: 6px; --t-space: 14px; --t-radius: 8px; }
  .spu-tabs-social--text { --t-h: 40px; --t-font: 11px; }

  .spu-tabs-social .jet-tabs__control-wrapper {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 6px 2px !important;
  }
  .spu-tabs-social .jet-tabs__control-wrapper::-webkit-scrollbar { display: none; }

  .spu-tabs-social .jet-tabs__control { flex: 1 1 0; min-width: 0; }
  .spu-tabs-social .jet-tabs__control-inner { gap: 4px; padding: 4px 2px !important; }
  .spu-tabs-social .jet-tabs__label-text { white-space: normal; line-height: 1.15; }
}


/* ###########################################################################
   3) สีเส้นขอบประจำแพลตฟอร์ม (ไม่บังคับ)
   ใส่ชื่อในช่อง "Control CSS ID" ของแต่ละแท็บ  เช่น  tab-tiktok
   ########################################################################### */

.spu-tabs-social #tab-tiktok.active-tab    { border-color: #00f2ea !important; }
.spu-tabs-social #tab-youtube.active-tab   { border-color: #ff0000 !important; }
.spu-tabs-social #tab-instagram.active-tab { border-color: #c13584 !important; }
.spu-tabs-social #tab-facebook.active-tab  { border-color: #1877f2 !important; }
.spu-tabs-social #tab-reels.active-tab     { border-color: #e6007e !important; }


/* ###########################################################################
   4) เปลี่ยนโทนสีทั้งชุด (ไม่บังคับ)
   ใส่ต่อท้าย เช่น  class="spu-tabs-vertical spu-tabs--blue"
   ########################################################################### */

.spu-tabs--blue  { --tab-on: #1877c9; --t-line: #1877c9; }
.spu-tabs--green { --tab-on: #12b886; --t-line: #12b886; }
.spu-tabs--gold  { --tab-on: #f5a623; --t-line: #f5a623; }

/* ปุ่ม "ดูทั้งหมด" ใต้รายการในแต่ละแท็บ (SPU Update) — button widget ที่ใส่ class spu-viewall
   ชิดขวา · ฟอนต์ DB Helvethaica X Bold Cond (ตัวเดียวกับปุ่มสมัครเรียน — @font-face "SPU Cond Bold" อยู่ใน spu-header.css)
   ใช้ selector ยาว + !important เพราะสไตล์ปุ่มกลางของ Site Settings (.elementor-kit-22341 .elementor-button) ชนะ */
.elementor-widget-button.spu-viewall,
.elementor-widget-button.spu-viewall .elementor-button-wrapper { text-align: right !important; }
.elementor-widget-button.spu-viewall a.elementor-button {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 22px 8px 26px !important;
  border-radius: 99px !important;
  border: 1.5px solid #e6007e !important;
  background: transparent !important;
  color: #fff !important;
  font-family: "SPU Cond Bold", "DB HELVETHAICA X BD COND", "Prompt", sans-serif !important;
  font-size: 24px !important; font-weight: 400 !important; line-height: 1.2 !important; letter-spacing: .01em;
  transition: background .2s ease, transform .2s ease;
}
.elementor-widget-button.spu-viewall a.elementor-button:hover,
.elementor-widget-button.spu-viewall a.elementor-button:focus-visible { background: #e6007e !important; transform: translateX(2px); }
.elementor-widget-button.spu-viewall .elementor-button-icon { font-size: 15px; display: inline-flex; }
@media (max-width: 767px) {
  .elementor-widget-button.spu-viewall a.elementor-button { font-size: 20px !important; }
}