/* ===========================================================================
   การ์ดข้อความทับรูป (Cover) — ใช้กับ Image Box และ Call to Action ของ Elementor
   โหลดทุกหน้าผ่าน functions.php ข้อ 7

   วิธีใช้ — เลือกได้ 2 แบบ:
     • ใส่ที่ Container ที่ครอบการ์ด   -> ทุก Image Box ข้างในเปลี่ยนพร้อมกัน
     • ใส่ที่ widget ตัวเดียว           -> เปลี่ยนเฉพาะตัวนั้น
     Advanced -> CSS Classes -> spu-cover

   ใส่ต่อท้ายเพื่อเปลี่ยนรูปแบบ:
     spu-cover--tall     สัดส่วน 3:4 (แนวตั้ง)
     spu-cover--wide     สัดส่วน 16:9 (แนวนอน)
     spu-cover--center   ข้อความอยู่กลาง
     spu-cover--pink     ไล่เงาโทนชมพู SPU
     spu-cover--fade     (Call to Action) เพิ่มเงาไล่จากล่าง ซ้อนบน Overlay Color ที่ตั้งเอง
     spu-cover--zoom-off ปิดการซูมรูปตอนชี้เมาส์

   สีทั้งหมดตั้งใน Style panel ของ Elementor ได้ตามปกติ — ไฟล์นี้ไม่ใช้ !important กับสี
   =========================================================================== */

.spu-cover {
  --cv-ratio:   1 / 1;     /* สัดส่วนการ์ด */
  --cv-radius:  14px;      /* มุมโค้ง */
  --cv-pad:     18px 20px; /* ระยะขอบข้อความ */
  --cv-title:   28px;      /* ขนาดหัวข้อ */
  --cv-desc:    16px;      /* ขนาดคำอธิบาย */
  --cv-shade:   rgba(0, 0, 0, .78);   /* เงาเข้มสุดที่ขอบล่าง */
  --cv-fade:    72%;       /* เงาไล่ขึ้นไปถึงไหน */
  --cv-zoom:    1.06;      /* ซูมรูปตอนชี้เมาส์ */
}

/* ###########################################################################
   Image Box
   ########################################################################### */

.spu-cover .elementor-image-box-wrapper,
.spu-cover.elementor-widget-image-box .elementor-image-box-wrapper {
  position: relative;
  display: block !important;        /* ล้างการจัดเรียงซ้าย/ขวาของ Elementor */
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: var(--cv-ratio);
  border-radius: var(--cv-radius);
  text-align: left;
}

/* รูป — ขยายเต็มการ์ด */
.spu-cover .elementor-image-box-img {
  position: absolute !important;
  inset: 0;
  z-index: 0;
  width: 100% !important;
  height: 100%;
  margin: 0 !important;
  line-height: 0;
}
.spu-cover .elementor-image-box-img a,
.spu-cover .elementor-image-box-img img {
  display: block;
  width: 100%;
  height: 100%;
}
.spu-cover .elementor-image-box-img img {
  object-fit: cover;
  border-radius: 0 !important;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}

/* เงาไล่จากล่างขึ้นบน ให้ตัวหนังสืออ่านออก
   Image Box ไม่มีช่อง Overlay Color ใน Elementor — เปลี่ยนสีได้ใน Custom CSS ของ widget:
     selector { --cv-shade: rgba(120, 0, 66, .85); }
   ไม่อยากได้เงาเลย:  selector { --cv-shade: transparent; }                        */
.spu-cover .elementor-image-box-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top,
              var(--cv-shade) 0%,
                            transparent var(--cv-fade));
}

/* ข้อความ — วางทับมุมซ้ายล่าง */
.spu-cover .elementor-image-box-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: var(--cv-pad);
}

/* สีตัวหนังสือ — ค่าเริ่มต้นขาว ตั้งใน Style panel แล้วจะชนะ */
.spu-cover .elementor-image-box-title {
  color: #fff;
  font-size: var(--cv-title);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 2px !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}
.spu-cover .elementor-image-box-title a { color: inherit !important; }

.spu-cover .elementor-image-box-description {
  color: rgba(255, 255, 255, .9);
  font-size: var(--cv-desc);
  line-height: 1.35;
  margin: 0 !important;
}

/* ถ้าใส่ลิงก์ไว้ ทำให้กดได้ทั้งการ์ด ไม่ใช่แค่ตัวหนังสือ */
.spu-cover .elementor-image-box-title a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
}

/* ชี้เมาส์ — รูปซูมเบาๆ */
.spu-cover .elementor-image-box-wrapper:hover .elementor-image-box-img img {
  transform: scale(var(--cv-zoom));
}

/* กด Tab มาถึงการ์ด ต้องเห็นว่าอยู่ตรงไหน */
.spu-cover .elementor-image-box-wrapper:focus-within {
  outline: 3px solid #e6007e;
  outline-offset: 3px;
}


/* ###########################################################################
   Call to Action (skin: Cover)
   ########################################################################### */

/* Call to Action มีช่องตั้งค่าครบใน Elementor อยู่แล้ว ไฟล์นี้จึงแตะแค่มุมโค้ง
   ที่เหลือตั้งเองใน Style panel:
     Box -> Min Height          ความสูงการ์ด
     Box -> Vertical Position   ตำแหน่งข้อความ (เลือก Bottom)
     Box -> Alignment           ชิดซ้าย/กลาง/ขวา
     Box -> Padding             ระยะขอบข้อความ
     Hover Effects -> Overlay Color   สีทับรูป (อย่าลืมลดความทึบ)            */
.spu-cover .elementor-cta {
  border-radius: var(--cv-radius);
  overflow: hidden;
}

/* สี Overlay — ไม่แตะ ให้ตั้งเองที่ Style -> Hover Effects -> Overlay Color
   (ทั้งปกติ และตอนชี้เมาส์) */

/* ถ้าอยากได้เงาไล่จากล่างเพิ่มทับสีที่ตั้งไว้ ใส่ class  spu-cover--fade
   ใช้ background-image จึงซ้อนอยู่บนสีที่ตั้งใน Elementor ได้ ไม่ทับกัน */
.spu-cover--fade .elementor-cta__bg-overlay {
  background-image: linear-gradient(to top,
                    var(--cv-shade) 0%,
                                        transparent var(--cv-fade));
}

/* สีตัวหนังสือ — ค่าเริ่มต้นขาว แต่ตั้งใน Style panel แล้วจะชนะ (ไม่ใช้ !important) */
.spu-cover .elementor-cta__title {
  color: #fff;
  font-size: var(--cv-title);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 2px;
}

.spu-cover .elementor-cta__description {
  color: rgba(255, 255, 255, .9);
  font-size: var(--cv-desc);
  margin: 0;
}


/* ###########################################################################
   รูปแบบเสริม
   ########################################################################### */

.spu-cover--tall   { --cv-ratio: 3 / 4; }
.spu-cover--wide   { --cv-ratio: 16 / 9; }
.spu-cover--pink   { --cv-shade: rgba(120, 0, 66, .85); }
.spu-cover--zoom-off { --cv-zoom: 1; }

.spu-cover--center .elementor-image-box-content {
  text-align: center;
}


/* ---- จอเล็ก ------------------------------------------------------------ */

@media (max-width: 767px) {
  .spu-cover { --cv-title: 22px; --cv-desc: 14px; --cv-pad: 14px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .spu-cover .elementor-image-box-img img { transition: none; }
  .spu-cover .elementor-image-box-wrapper:hover .elementor-image-box-img img { transform: none; }
}


/* ###########################################################################
   Bento — การ์ดหลายขนาดในตาราง        class:  spu-bento  (ใส่ที่ Container)
   ---------------------------------------------------------------------------
   ข้างในใส่ Image หรือ Image Box ได้ (Image Box ใส่ spu-cover คู่ด้วย ข้อความจะทับรูป)
   การ์ดใหญ่ — ใส่ class ที่ widget:
     bento-tall   สูง 2 แถว
     bento-wide   กว้าง 2 คอลัมน์
   รูปแบบคอลัมน์สำเร็จรูป (ใส่ต่อท้าย spu-bento):
     spu-bento--hub   4 คอลัมน์  (ALUMNI / AWARD / PARTNER / Review / CIWE)
     spu-bento--go    1 : 1 : 2   (GO INTER)
     spu-bento--mid   1 : 1.3 : 1 (การ์ดใหญ่อยู่กลาง — DUAL DEGREE)
     spu-bento--end   1 : 1 : 1.3 (การ์ดใหญ่อยู่ขวา — เรียนข้ามศาสตร์ / Learn to Earn)
   ปรับเองได้:  selector { --bento-row: 300px; --bento-gap: 10px; }
   ########################################################################### */

.spu-bento {
  --bento-cols:   1fr 1fr 1fr 1fr;
  --bento-row:    260px;     /* ความสูงต่อแถว */
  --bento-gap:    14px;
  --bento-radius: 0px;

  display: grid !important;
  grid-template-columns: var(--bento-cols);
  grid-auto-rows: var(--bento-row);
  grid-auto-flow: row dense;
  gap: var(--bento-gap) !important;
  padding: 0 !important;
}
.spu-bento > .elementor-element {
  width: auto !important;
  max-width: none !important;
  min-width: 0;
  min-height: 0;
  margin: 0 !important;
}
.spu-bento > .bento-tall { grid-row: span 2; }
.spu-bento > .bento-wide { grid-column: span 2; }

/* ให้ widget เต็มช่องของตาราง */
.spu-bento > .elementor-element > .elementor-widget-container { height: 100%; }
.spu-bento .elementor-widget-image a,
.spu-bento .elementor-widget-image figure { display: block; height: 100%; margin: 0; }
.spu-bento .elementor-widget-image img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: cover;
  border-radius: var(--bento-radius);
  transition: filter .2s ease;
}
.spu-bento .elementor-widget-image a:hover img { filter: brightness(1.08); }
.spu-bento .elementor-widget-image a:focus-visible { outline: 3px solid #e6007e; outline-offset: 2px; }

/* Image Box + spu-cover — ใช้ความสูงของช่องแทนสัดส่วนรูป */
.spu-bento.spu-cover .elementor-image-box-wrapper,
.spu-bento .spu-cover .elementor-image-box-wrapper {
  aspect-ratio: auto;
  height: 100%;
  border-radius: var(--bento-radius);
}

.spu-bento--hub { --bento-cols: 326fr 322fr 388fr 326fr; --bento-row: 326px; --bento-gap: 12px; --cv-title: 40px; --cv-pad: 18px 22px; --cv-fade: 45%; }
.spu-bento--go  { --bento-cols: 1fr 1fr 2fr;    --bento-row: 258px; }
.spu-bento--mid { --bento-cols: 1fr 1.28fr 1fr; }
.spu-bento--end { --bento-cols: 1fr 1fr 1.29fr; }
.spu-bento--we      { --bento-row: 336px; --bento-gap: 16px; --cv-pad: 18px 22px; --cv-fade: 50%; }
.spu-bento--gallery { --bento-row: 337px; --bento-gap: 14px; }

/* ช่องข้อความในตาราง (เช่น "ที่ SPU เรา...") — ใส่ class  bento-note  ที่ Heading */
.spu-bento > .bento-note {
  display: flex !important;
  align-items: center;
  padding: 0 36px !important;
  background: #222224;
}
.spu-bento > .bento-note em { color: #ff0080; font-style: normal; }

@media (max-width: 1024px) {
  .spu-bento { --bento-row: 200px; --bento-gap: 10px; }
  .spu-bento--hub { --bento-row: 240px; --cv-title: 30px; }
}

/* มือถือ — 2 คอลัมน์ การ์ดกว้างเต็มแถว */
@media (max-width: 767px) {
  .spu-bento,
  .spu-bento--hub, .spu-bento--go, .spu-bento--mid, .spu-bento--end {
    --bento-cols: 1fr 1fr;
    --bento-row:  150px;
    --bento-gap:  8px;
  }
  .spu-bento--hub { --cv-title: 22px; --cv-pad: 10px 12px; }
  .spu-bento > .bento-wide { grid-column: 1 / -1; }
  .spu-bento > .bento-note { padding: 16px 14px !important; }

  /* ลำดับตามแบบ mobile */
  .spu-bento--hub > :nth-child(5) { order: -1; }            /* CIWE ขึ้นก่อน */
  .spu-bento--hub > :nth-child(4) { order: 1; }             /* Review */
  .spu-bento--hub > :nth-child(3) { order: 2; }             /* PARTNER */
  .spu-bento--hub > :nth-child(2) { order: 3; }             /* AWARD */
  .spu-bento--go  > :nth-child(3) { order: 1; grid-column: 1 / -1; }   /* รูปใหญ่ลงล่าง เต็มแถว */
  .spu-bento--we  { --bento-row: 168px; }
}


/* ###########################################################################
   แถวเลื่อนซ้ายขวาบนมือถือ        class:  spu-scroll-x  (ใส่ที่ Container)
   ---------------------------------------------------------------------------
   จอคอมพ์ — เหมือนเดิมทุกอย่าง
   มือถือ   — ของข้างในเรียงเป็นแถวเดียว ปัดซ้ายขวาได้ หยุดทีละใบ
   ปรับความกว้างต่อใบ:  selector { --sx-w: 60%; }
   ใส่  spu-scroll-x--center  ด้วย ถ้าอยากให้เปิดมาเห็นใบกลางก่อน (การ์ดมาสคอต)
   ########################################################################### */

.spu-scroll-x { --sx-w: 72%; --sx-gap: 10px; }

@media (max-width: 767px) {
  .spu-scroll-x,
  .spu-scroll-x > .e-con-inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: var(--sx-gap) !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .spu-scroll-x > .e-con-inner { overflow: visible; }
  .spu-scroll-x::-webkit-scrollbar { display: none; }

  .spu-scroll-x > .elementor-element,
  .spu-scroll-x > .e-con-inner > .elementor-element {
    flex: 0 0 var(--sx-w) !important;
    width: var(--sx-w) !important;
    max-width: none !important;
    min-width: 0;
    scroll-snap-align: center;
  }
}

/* ขนาดสำเร็จรูป */
.spu-scroll-x--mascot { --sx-w: 42%; --sx-gap: 8px; }   /* การ์ดมาสคอต เห็นใบกลาง + ซ้ายขวาโดนขอบจอตัด ให้รู้ว่าเลื่อนได้ */
.spu-scroll-x--half   { --sx-w: 45%; }                  /* โปสเตอร์ เห็น 2 ใบเต็ม + ใบที่ 3 โดนขอบจอตัด ให้รู้ว่าเลื่อนได้ */
@media (max-width: 767px) {
  /* แถวโปสเตอร์ชนขอบจอ (ชดเชย padding 20px ของ section) ไม่งั้นใบถัดไปหายตรงขอบแถว ดูเหมือนจบแค่นั้น · ระยะห่างเหลือแค่ gap */
  .e-con.spu-scroll-x--half {
    width: calc(100% + 40px) !important;
    max-width: none !important;
    margin-inline: -20px !important;
    padding: 10px 20px !important;
    scroll-padding-inline: 20px;
  }
  .spu-scroll-x--half > .e-con { padding: 0 !important; }
}
/* โปสเตอร์ WHY? SPU เป็นรูปจัตุรัส: Elementor ล็อกสูง 220px + cover ทำให้ซ้ายขวาถูกตัด */
@media (max-width: 1024px) {
  .spu-scroll-x--half img { height: auto !important; aspect-ratio: 1 / 1; }
}

@media (max-width: 1024px) {
  /* รูปมาสคอตสูงไม่เท่ากัน: ดันเนื้อหาชิดล่างการ์ด ชื่อทุกใบจะอยู่แนวเดียวกัน */
  .spu-scroll-x--mascot .elementor-widget-image-box,
  .spu-scroll-x--mascot .elementor-widget-image-box > .elementor-widget-container { flex: 1 1 auto; display: flex; flex-direction: column; }
  .spu-scroll-x--mascot .elementor-image-box-wrapper { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; }
  .spu-scroll-x--mascot .elementor-image-box-img { align-self: center; text-align: center; margin-bottom: 4px !important; }   /* เดิมติดลบ เท้ามาสคอตทับชื่อ */
  .spu-scroll-x--mascot .elementor-image-box-title { margin-bottom: 5px !important; white-space: nowrap; }   /* สระล่างไทย (ู ุ) ชิดคำรอง */
  .spu-scroll-x--mascot .elementor-image-box-description { letter-spacing: .2px; white-space: nowrap; }
  .e-con-inner > .e-con.spu-mascot-hero { padding-bottom: 10px !important; }   /* Elementor ไม่ตั้งระยะล่างใบนี้ คำรองชิดขอบการ์ด */
}
@media (min-width: 768px) and (max-width: 1024px) {
  .spu-scroll-x--mascot > .e-con-inner { gap: 10px !important; }
  .spu-scroll-x--mascot .elementor-image-box-title { font-size: 19px !important; line-height: 1.3 !important; }
  .spu-scroll-x--mascot .elementor-image-box-description { font-size: 10.5px !important; line-height: 1.3 !important; }
  .spu-scroll-x--mascot .spu-mascot-hero .elementor-image-box-title { font-size: 26px !important; line-height: 1.2 !important; }
  .spu-scroll-x--mascot .spu-mascot-hero .elementor-image-box-description { font-size: 16px !important; }
  /* รูปมาสคอตสัดส่วนต่างกัน: ใช้ความสูงเท่ากันแทนความกว้าง ไม่งั้นใบปริญญาตรีเล็กกว่าเพื่อน */
  .spu-scroll-x--mascot .elementor-image-box-img { width: auto !important; }
  .spu-scroll-x--mascot .elementor-image-box-img img { width: auto !important; height: 76px !important; }
  .spu-scroll-x--mascot .spu-mascot-hero .elementor-image-box-img img { height: 112px !important; }
}

@media (max-width: 767px) {
  /* การ์ดมาสคอต — ตัวการ์ตูนยื่นเหนือการ์ด ต้องเว้นที่ด้านบนไม่ให้แถวเลื่อนตัดหัว */
  .spu-scroll-x--mascot {
    padding-top: 64px !important;   /* เว้นที่ให้ตัวการ์ตูนยื่นเหนือการ์ด (ใบ DEK70 ยื่น ~50px) ไม่ให้แถวเลื่อนตัดหัว */
    margin-top: calc(var(--margin-top, 0px) - 64px) !important;
    padding-bottom: 6px !important;
    /* iOS Safari: แถวเลื่อนไม่ตั้งชั้นเอง z-index 800 ของการ์ดไม่มีผล แบนเนอร์ (z 1-2) เลยวาดทับ ตัดหัวมาสคอตและขอบบนการ์ด
       -> ตั้งชั้นเหนือแบนเนอร์ · พื้นดำเริ่มที่ขอบล่างแบนเนอร์ ไม่บังรูป
       ห้ามใส่ pointer-events: none ที่แถวนี้ iOS จะปัดแถวไม่ได้ · แถบล่างแบนเนอร์ที่แถวทับอยู่จึงกดไม่ได้ (ส่วนนี้เฟดเป็นดำอยู่แล้ว) */
    z-index: 3;
    isolation: isolate;
    background-color: transparent !important;
    /* พื้นดำเริ่มทับขอบล่างแบนเนอร์ 10px (ช่วงนี้แบนเนอร์ดำสนิทอยู่แล้ว) — ความสูงแบนเนอร์เป็นเศษพิกเซล ถ้าชนกันพอดีจะเห็นเส้นรอยต่อ */
    background-image: linear-gradient(transparent calc(54px - var(--margin-top, 0px)), #000 0);
  }
  .spu-scroll-x--mascot .elementor-image-box-img {
    width: 84% !important;
  }
  /* การ์ดทุกใบสูงเท่ากัน: Elementor ตั้ง margin-top 20px ให้ 2 ใบริม (แบบจอคอม) และชื่อ 25px ตกบรรทัด */
  .spu-scroll-x--mascot > .e-con,
  .spu-scroll-x--mascot > .e-con-inner > .e-con { margin-top: 0 !important; }
  .spu-scroll-x--mascot > .e-con:not(.spu-mascot-hero) .elementor-image-box-title,
  .spu-scroll-x--mascot > .e-con-inner > .e-con:not(.spu-mascot-hero) .elementor-image-box-title { font-size: 18px !important; line-height: 1.3 !important; white-space: nowrap; }
  .spu-scroll-x--mascot > .e-con:not(.spu-mascot-hero) .elementor-image-box-description,
  .spu-scroll-x--mascot > .e-con-inner > .e-con:not(.spu-mascot-hero) .elementor-image-box-description { font-size: 10px !important; line-height: 1.3 !important; white-space: nowrap; }
  .spu-scroll-x--mascot .spu-mascot-hero .elementor-image-box-title { font-size: 22px !important; line-height: 1.2 !important; }
  .spu-scroll-x--mascot .spu-mascot-hero .elementor-image-box-description { font-size: 15px !important; line-height: 1.3 !important; white-space: nowrap; }

  /* ปุ่มลิงก์ 6 ช่อง (class spu-quick) — 3 คอลัมน์ ช่องเตี้ยลงตามแบบ */
  .spu-quick .elementor-widget-icon-box .elementor-icon { font-size: 22px !important; padding: 9px !important; }
  .spu-quick .elementor-icon-box-wrapper { gap: 4px; }
  .spu-quick .elementor-icon-box-icon { margin-bottom: 4px !important; }
  .spu-quick .elementor-icon-box-title { font-size: 12px !important; line-height: 1.25 !important; margin: 0 !important; }
  .spu-quick .elementor-icon-box-description { font-size: 8px !important; line-height: 1.2 !important; }
  .spu-quick img { max-width: 100% !important; height: auto; }
  .spu-quick > .e-con:nth-child(-n+6) { padding: 10px 4px !important; min-height: 0 !important; }
}

@media (max-width: 767px) {
  .spu-scroll-x { cursor: grab; }
  .spu-scroll-x.is-dragging { cursor: grabbing; scroll-snap-type: none; }
  .spu-scroll-x.is-dragging * { pointer-events: none; }
}


/* ---- ชื่อการ์ดที่มีลิงก์ ------------------------------------------------- */
/* ใส่ลิงก์ให้ Image Box แล้ว Elementor ห่อชื่อด้วย <a> และ Site Settings ตั้งขนาดลิงก์ไว้ 16px
   ชื่อการ์ดเลยหดเหลือ 16px — ให้ลิงก์ใช้ขนาด/ฟอนต์เดียวกับชื่อการ์ด (ที่ตั้งใน Style panel) */
.spu-cover .elementor-image-box-title a,
.spu-scroll-x .elementor-image-box-title a {
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit;
  color: inherit !important;
  text-decoration: none;
}

/* กดได้ทั้งการ์ด — ลิงก์ขยายขึ้นไปถึงขอบบน (การ์ดตัดส่วนเกินด้วย overflow: hidden)
   เดิม ::before เต็มแค่กล่องข้อความด้านล่าง เพราะกล่องข้อความวางแบบ absolute */
.spu-cover .elementor-image-box-title a::before {
  inset: -2000px 0 0 0 !important;
}


/* ---- เฟดดำขอบล่างแบนเนอร์บนสุด ------------------------------------------ */
/* แบนเนอร์ (section 923a68b) ไล่เป็นดำจนกลืนกับพื้นดำของแถวการ์ดมาสคอต (#000)
   แถวการ์ดซ้อนขึ้นมา 20px แต่รูปแบนเนอร์อยู่ชั้นบนกว่า จึงต้องคลุมถึงขอบล่างสุด และดำสนิทตั้งแต่ก่อนถึงขอบ 20px */
[data-id="923a68b"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 20%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgb(0 0 0 / 0) 0%, rgb(0 0 0 / .1) 22%, rgb(0 0 0 / .35) 45%,
    rgb(0 0 0 / .7) 66%, #000 calc(100% - 20px));
}

/* มือถือ: รูปแบนเนอร์ 600×700 — Elementor ล็อกสูง 400px ทุกจอ cover เลยตัดบนล่าง จอกว้างยิ่งโดนตัดมาก (Pro Max 440 หาย 22%)
   -> ความสูงตามสัดส่วนรูป เห็นเต็มรูปทุกรุ่น · :last-child เพราะบางสไลด์มี 2 กล่อง (คอม + มือถือ) กล่องคอมสูง 0 บนมือถือ
   บางสไลด์กล่องมือถือซ้อนอยู่ข้างในอีกชั้น ต้องตั้งทั้งสองชั้น ไม่งั้นรูปสูง 400px มีแถบดำใต้รูป */
@media (max-width: 767px) {
  [data-id="923a68b"] .swiper-slide > .e-con:last-child,
  [data-id="923a68b"] .swiper-slide > .e-con > .e-con:last-child { --min-height: calc(100vw * 7 / 6) !important; }
}

/* ---- การ์ดมาสคอตแบบกระจกเบลอ (glass) ---------------------------------- */
/* การ์ดทุกใบใน spu-scroll-x--mascot: พื้นโปร่งแสง + เบลอสิ่งที่อยู่หลัง (แบนเนอร์ด้านบน / พื้นดำด้านล่าง)
   ทับสีพื้นขาวที่ตั้งไว้ใน Elementor — คืนเป็นการ์ดขาวได้โดยลบบล็อกนี้ (30 ต.ค.) */
.spu-scroll-x--mascot > .e-con,
.spu-scroll-x--mascot > .e-con-inner > .e-con {
  background-color: rgb(255 255 255 / .12) !important;
  background-image: linear-gradient(155deg, rgb(255 255 255 / .38) 0%, rgb(255 255 255 / .08) 38%, rgb(255 255 255 / .03) 100%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(170%);
          backdrop-filter: blur(16px) saturate(170%);
  border: 1px solid rgb(255 255 255 / .35) !important;
  box-shadow: 0 18px 40px rgb(0 0 0 / .35), inset 0 1px 0 rgb(255 255 255 / .55), inset 0 -1px 0 rgb(255 255 255 / .08);
  transition: background-color .3s ease, border-color .3s ease, transform .3s ease;
}
.spu-scroll-x--mascot > .e-con:hover,
.spu-scroll-x--mascot > .e-con-inner > .e-con:hover {
  background-color: rgb(255 255 255 / .2) !important;
  border-color: rgb(255 255 255 / .55) !important;
}
.spu-scroll-x--mascot .elementor-image-box-description { color: #fff !important; text-shadow: 0 1px 6px rgb(0 0 0 / .45); }
.spu-scroll-x--mascot .elementor-image-box-title { text-shadow: 0 1px 8px rgb(0 0 0 / .35); }
/* กดได้ทั้งใบ: ขยายพื้นที่กดของลิงก์ชื่อให้เต็มการ์ด · รูปมาสคอตอยู่เหนือชั้นนี้ แอนิเมชันตอนชี้รูปจึงยังทำงาน */
.spu-scroll-x--mascot .elementor-widget-image-box { position: static; }
.spu-scroll-x--mascot .elementor-image-box-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.spu-scroll-x--mascot .elementor-image-box-img a { position: relative; z-index: 2; }
.spu-scroll-x--mascot .elementor-image-box-title a:focus-visible { outline: none; }
.spu-scroll-x--mascot .elementor-image-box-title a:focus-visible::after { outline: 3px solid #fff; outline-offset: -3px; border-radius: 16px; }

/* คำในหัวข้อหน้าแรกกดได้ ไปที่เดียวกับปุ่มลูกศร (ssh-prod/lib/heading-links.php) — หน้าตาเหมือนข้อความเดิม */
a.spu-head-link, a.spu-head-link:hover, a.spu-head-link:focus { color: inherit !important; font: inherit; text-decoration: none; }
a.spu-head-link { cursor: pointer; }
/* ปุ่มลิงก์ด่วน: Elementor ตั้งชื่อ 24px ที่ตัวลิงก์ จอโน้ตบุ๊กชื่อตกบรรทัด ("ปริญญาโท-/เอก") -> ลดตามจอ สูงสุด 20px (ชื่อยาวสุดกว้าง 144px) */
@media (min-width: 768px) {
  .spu-quick .elementor-icon-box-title a,
  .spu-quick .spu-qtile-title { font-size: clamp(14px, 1.5vw, 20px) !important; }
}
/* ระยะจากปุ่มดูทั้งหมด (แท็บ SPU HUB) ถึงการ์ด ALUMNI/AWARD: Elementor ตั้ง 28px + gap 20px ห่างเกินไป เหลือ 36px */
.e-con.spu-bento--hub { margin-top: 16px !important; }

/* ---- การ์ดมาสคอตใบเด่น ------------------------------------------------- */
/* ใส่ class  spu-mascot-hero  ที่ Container ของการ์ดใบที่อยากให้ใหญ่กว่าใบอื่น
   กว้างกว่า 30% และสูงกว่าโดยยื่นขึ้นไปด้านบน 30px (จอคอมพ์/แท็บเล็ต) */
@media (min-width: 768px) {
  .e-con-inner:has(> .spu-mascot-hero) > .e-con,
  .e-con:has(> .spu-mascot-hero) > .e-con { flex: 1 1 0 !important; min-width: 0; width: auto !important; max-width: none !important; }   /* Elementor จำกัดความกว้างแต่ละใบไว้ด้วย max-width */
  .e-con-inner:has(> .spu-mascot-hero) > .e-con.spu-mascot-hero,   /* ต้องแรงกว่ากฎของใบอื่นด้านบน */
  .e-con:has(> .spu-mascot-hero) > .e-con.spu-mascot-hero {
    flex: 1.3 1 0 !important;
    margin-top: -30px !important;
    padding-left: 10px !important;    /* ให้ระยะในเท่าใบอื่น (Elementor ตั้ง 10px) — ไม่งั้นสัดส่วนกว้างเพี้ยน */
    padding-right: 10px !important;
    z-index: 801;
  }
}

/* SPU Showcase (กล่องขวา class spu-showcase) — สไลด์สัดส่วน 4:3 เสมอ ภาพ 4:3 จึงไม่ถูกตัดทุกจอ
   จอที่สองฝั่งวางข้างกัน (768px ขึ้นไป): ขนาดใหญ่สุดที่ใส่ในพื้นที่ใต้หัวข้อได้ วางชิดล่าง (ตรงกับแบนเนอร์เล็กฝั่งซ้าย) + ชิดขวา
   มือถือ: เต็มความกว้าง สัดส่วน 4:3
   ภาพสไลด์: ทำไฟล์ 1280 x 960 (ดูหน้า สเปกภาพหน้าแรก SPU) */
.spu-showcase > .elementor-widget-slides .elementor-swiper,
.spu-showcase > .elementor-widget-slides .elementor-slides-wrapper,
.spu-showcase > .elementor-widget-slides .swiper-wrapper,
.spu-showcase > .elementor-widget-slides .swiper-slide { height: 100% !important; }
@media (min-width: 768px) {
  /* กล่องขวาเป็น container ขนาดตามความสูงฝั่งซ้าย -> สไลด์ 4:3 ใหญ่สุดที่ใส่ได้ใต้หัวข้อ
     หัวข้อ + สไลด์ วางชิดล่างด้วยกัน หัวข้อจึงติดอยู่เหนือสไลด์เสมอ
     --sc-head = ความสูงหัวข้อ "SPU Showcase" (ตัวอักษร 45px / แท็บเล็ต 35px) · --sc-gap = ระยะหัวข้อถึงสไลด์ */
  .spu-showcase { container-type: size; justify-content: flex-end !important; --sc-head: 45px; --sc-gap: 20px; }
  .spu-showcase > :is(.elementor-widget-slides, .elementor-widget-shortcode) {   /* shortcode = [spu_showcase_slider] ดึงจาก /showcase/ */
    flex: none; align-self: flex-end;
    height: min(calc(100cqh - var(--sc-head) - var(--sc-gap)), 75cqw);
    width: min(100cqw, calc((100cqh - var(--sc-head) - var(--sc-gap)) * 4 / 3));
  }
  .spu-showcase > :is(.elementor-widget-slides, .elementor-widget-shortcode) > .elementor-widget-container { height: 100%; }   /* ไม่ยุ่ง display ของ Swiper — ไม่งั้นคำนวณความกว้างสไลด์เป็น 0 */
}
@media (min-width: 768px) {
  /* สไลด์บทความ [spu_showcase_slider]: กว้างเต็มคอลัมน์ ไม่เหลือช่องว่างข้างฝั่งซ้าย · รูปปกกว้าง 2:1 + หัวข้อ จึงไม่ต้องล็อก 4:3 */
  .spu-showcase > .elementor-widget-shortcode { width: 100cqw; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .spu-showcase { --sc-head: 35px; }
}
@media (max-width: 767px) {
  /* aspect-ratio ใช้ไม่ได้ที่นี่ — กล่องขวาสูงแค่เท่าหัวข้อ widget เลยหดเป็น 0 -> คิดความสูงจากความกว้างกล่องแทน */
  .spu-showcase { container-type: inline-size; }
  .spu-showcase > :is(.elementor-widget-slides, .elementor-widget-shortcode) { flex: 0 0 auto; height: 75cqw; }
  .spu-showcase > :is(.elementor-widget-slides, .elementor-widget-shortcode) > .elementor-widget-container { height: 100%; }
}