/* หน้าทุนการศึกษา scholarship70 — พื้นดำตามแบบ "SPU Web Design scholarship70"
   ข้อความ/รูป/ลิงก์/สี/ขนาดตัวอักษร แก้ใน Elementor ได้ตามปกติ ไฟล์นี้คุมแค่เลย์เอาต์ที่ Elementor ทำเองไม่ได้
   class ที่ใช้: sc7-hero, sc7-levels (+ tul-card), sc7-sec, sc7-grid(-dek/-more), sc7-tall, sc7-wide2, sc7-slides, sc7-snap, sc7-sdm, sc7-faq */
:root {
  --sc7-bg: #161616;
  --sc7-panel: #222222;
  --sc7-row: #1e1e1e;
  --sc7-line: #333333;
  --sc7-pink: #e6007f;
  --sc7-text: #ffffff;
  --sc7-muted: #b5b5b5;
}
body:has(.sc7-hero) { background: var(--sc7-bg); }

/* DB Helvethaica X ตัวหนาจริง (ไฟล์มีในคลังสื่อแล้วทั้ง local และเว็บจริง) — Elementor ลงทะเบียนชื่อ db_helvethaica_x ไว้แค่ตัว Medium
   หัวข้อที่ตั้ง 700 เลยเป็นตัวหนาปลอม (browser ทำเอง ตัวบวม) — ใส่ตัว bd ให้ชื่อเดียวกันที่น้ำหนัก 700 */
@font-face { font-family: db_helvethaica_x; font-weight: 700; font-style: normal; font-display: swap; src: url("/wp-content/uploads/2020/07/db_helvethaica_x_bd_v3.2-webfont.woff") format("woff"); }

/* ---------- hero ---------- */
.e-con.sc7-hero { position: relative; overflow: hidden; }
.e-con.sc7-hero::after {   /* ไล่สีลงพื้นดำด้านล่าง */
  content: ""; position: absolute; inset: auto 0 0 0; height: 34%;
  background: linear-gradient(to bottom, rgba(22, 22, 22, 0), var(--sc7-bg) 92%);
  pointer-events: none; z-index: 0;
}
.sc7-hero > .e-con-inner { position: relative; z-index: 1; align-items: center; }
.sc7-hero .sc7-hero-l, .sc7-hero .sc7-hero-r { flex: 0 0 26%; width: 26%; position: relative; z-index: 2; }
.sc7-hero .sc7-hero-l { margin-right: -7%; align-self: flex-start; margin-top: 4%; }
.sc7-hero .sc7-hero-r { margin-left: -9%; align-self: flex-start; margin-top: 190px; }   /* ต่ำกว่าปุ่มสมัครเรียน/โซเชียลของ header */
.sc7-hero .sc7-hero-img { flex: 0 0 62%; width: 62%; position: relative; z-index: 1; }
.sc7-hero .sc7-hero-img img { width: 100%; height: auto; display: block; filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .45)); }
.sc7-hero .sc7-logo img { width: 210px; filter: brightness(0) invert(1); }   /* โลโก้สีเทา -> ขาว */
.sc7-hero .sc7-tag .elementor-heading-title,
.sc7-hero .sc7-dek .elementor-heading-title,
.sc7-hero .sc7-amt .elementor-heading-title { text-shadow: 0 4px 22px rgba(60, 0, 60, .35); white-space: nowrap; }
.sc7-hero .sc7-amt .elementor-heading-title { letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* ---------- การ์ดระดับ (แบบเดียวกับหน้าค่าเทอม/กองทุน/คณะ — สำเนากฎ .tul-card จาก spu-tuition.css) ----------
   ข้อความ/ลิงก์/สี/ขนาดตั้งใน Elementor — CSS นี้ทำแค่: ทับขอบล่าง hero, ความสูงเท่ากัน, เบลอพื้นหลัง, ขยับตอน hover */
.e-con.sc7-levels { display: block; padding: 0; position: relative; z-index: 2; margin-top: -70px; }
.sc7-levels > .tul-grid { margin-inline: auto; }
.sc7-levels .tul-card, .sc7-levels .tul-card .elementor-widget-container, .sc7-levels .tul-card .elementor-button-wrapper { height: 100%; }
.sc7-levels .tul-card .elementor-button { display: flex; align-items: flex-start; justify-content: center; height: 100%; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.sc7-levels .tul-card .elementor-button:focus-visible { outline: 3px solid #7aa7ff; outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .sc7-levels .tul-card .elementor-button { transition: box-shadow .2s, color .2s, transform .2s; }
  .sc7-levels .tul-card .elementor-button:hover { transform: translateY(-3px); box-shadow: 0 0 26px rgb(255 63 191 / .5); }
}

/* ---------- หัวข้อ + ตารางแบนเนอร์ ---------- */
.sc7-sec .sc7-h2 .elementor-heading-title { color: var(--sc7-text); }
.sc7-sec .sc7-h2 { margin-bottom: 0; }
.e-con.sc7-grid { grid-template-rows: none !important; grid-auto-rows: auto; grid-auto-flow: row dense !important; }
.sc7-grid > .elementor-widget-image { margin: 0 !important; min-width: 0; }
.sc7-grid > .elementor-widget-image > .elementor-widget-container,
.sc7-grid > .elementor-widget-image a { display: block; height: 100%; }
.sc7-grid img,
.sc7-snap img {
  display: block; width: 100% !important; max-width: none !important; height: 100% !important;
  aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.sc7-grid a:hover img, .sc7-snap a:hover img, .sc7-sdm a:hover img { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, .5); }
.sc7-grid .sc7-tall { grid-row: span 2; }
.sc7-grid .sc7-tall img { aspect-ratio: auto; }
.sc7-grid .sc7-wide2 { grid-column: span 2; }
.sc7-grid .sc7-wide2 img { aspect-ratio: auto; }

/* สไลด์แบนเนอร์ 1140x450 — สูงตามสัดส่วนรูปทุกจอ */
.sc7-slides .elementor-slides-wrapper,
.sc7-slides .swiper-slide { height: auto !important; aspect-ratio: 1140 / 450; }
.sc7-slides .elementor-swiper, .sc7-slides .swiper { border-radius: 6px; overflow: hidden; }
.sc7-slides .swiper-slide-bg { background-size: cover !important; background-position: center !important; }


/* ---------- รวมทุน 40,000: ตารางเห็นครบทุกใบ (ไม่เป็นสไลด์) ----------
   จอคอมพ์/แท็บเล็ต 4 คอลัมน์: รูป SDM ใหญ่ 2x3 ช่องด้านซ้าย + การ์ดทุนสี่เหลี่ยมเรียงต่อ + ปุ่มกว้าง 2 ช่อง "สมัครเรียนเพื่อรับทุน" (spu-scholarship.js)
   มือถือ 2 คอลัมน์: SDM เต็มกว้าง แล้วการ์ดทีละ 2
   container เดิมของ Elementor (sc7-port-l / sc7-snap) ใช้ display:contents ให้ทุกรูปเป็นช่องของตารางเดียวกัน */
.sc7-port .e-con.sc7-port-row {
  display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: stretch;
}
.sc7-port .sc7-port-l, .sc7-port .e-con.sc7-snap { display: contents !important; }
.sc7-port .sc7-port-l > .elementor-widget-heading { grid-column: 1 / -1; margin-bottom: 4px; }
.sc7-port .sc7-port-row > .sc7-sdm { grid-column: 1 / span 2; grid-row: span 3; width: auto; margin: 0; }
.sc7-port .sc7-sdm > .elementor-widget-container, .sc7-port .sc7-sdm a { display: block; height: 100%; }
.sc7-port .sc7-sdm img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; display: block; transition: transform .25s ease, box-shadow .25s ease; }
.sc7-port .sc7-snap > .elementor-widget-image { margin: 0 !important; width: auto !important; min-width: 0; }
.sc7-port .sc7-snap img { border-radius: 3px !important; }   /* ขอบมนเท่ารูป SDM (Elementor ตั้งมุมรูปไว้ 0 ในแต่ละ widget) */
.sc7-port .sc7-sdm { order: 1; }   /* SDM ต่อจากหัวข้อ ก่อนการ์ดเล็ก (ใน HTML อยู่ท้าย) */
.sc7-port .sc7-port-l > .elementor-widget-heading { order: 0; }
.sc7-port .sc7-snap > *, .sc7-port .sc7-cta { order: 2; }
.sc7-port a.sc7-cta {   /* "a" + .sc7-port นำหน้า — Site Settings ของ Elementor ตั้งขนาดตัวอักษรลิงก์ไว้ 16px */
  grid-column: span 2; display: grid; place-content: center; gap: 10px; padding: 16px; border-radius: 3px;   /* กว้าง 2 ช่อง: SDM 6 + การ์ด 12 + ปุ่ม 2 = 20 ช่อง เต็ม 4x5 */
  background: var(--sc7-pink, #e6007e); color: #fff !important; text-align: center; text-decoration: none !important;
  font-family: "DB HELVETHAICA X BD COND", db_helvethaica_x, "Noto Sans Thai", sans-serif; font-size: clamp(26px, 3vw, 44px); line-height: 1.1;
  transition: transform .25s ease, box-shadow .25s ease, background .2s;
}
.sc7-port a.sc7-cta small { display: block; margin-top: 6px; font-family: "Noto Sans Thai", sans-serif; font-size: 15px; opacity: .9; }
.sc7-port a.sc7-cta:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, .5); background: #ff1493; }
.sc7-port a.sc7-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 767px) {
  .sc7-port .e-con.sc7-port-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sc7-port .sc7-port-row > .sc7-sdm { grid-column: 1 / -1; grid-row: auto; }
  .sc7-port .sc7-sdm img { height: auto; }
}

/* ---------- แบนเนอร์ส่วนลด + ทุนอื่นๆ ---------- */
.sc7-fee img { width: 100%; height: auto; border-radius: 6px; }
.sc7-other-txt, .sc7-other-txt * { color: #d9d9d9 !important; }
.sc7-other-txt a { color: #ff5fb8 !important; }

/* ---------- SEO + FAQ (แท็บแนวตั้ง) ---------- */
.e-con.sc7-faq { background-image: none !important; }
.sc7-faq .e-con, .sc7-tabs, .sc7-tabs .e-n-tabs { background-color: transparent !important; background-image: none !important; }
.sc7-faq .elementor-heading-title { color: var(--sc7-text) !important; }
.sc7-faq .elementor-widget-text-editor, .sc7-faq .elementor-widget-text-editor * { color: #d0d0d0 !important; }
.sc7-faq .elementor-widget-text-editor a { color: #ff5fb8 !important; }
.sc7-tabs .e-n-tabs { --n-tabs-title-gap: 0px; gap: 22px; }
.sc7-tabs .e-n-tabs-heading { background: var(--sc7-panel); align-self: flex-start; padding: 8px 0; min-width: 200px; flex-direction: column; }
.sc7-tabs .e-n-tab-title {
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  color: #8e8e8e !important; padding: 16px 22px !important; justify-content: center; text-align: center;
  font-size: 20px; font-weight: 700; position: relative;
}
.sc7-tabs .e-n-tab-title * { color: inherit !important; }
.sc7-tabs .e-n-tab-title[aria-selected="true"] { color: #fff !important; }
.sc7-tabs .e-n-tab-title[aria-selected="true"]::after {
  content: ""; position: absolute; top: 8px; bottom: 8px; right: 0; width: 4px; background: var(--sc7-pink);
}
.sc7-tabs .e-n-tabs-content > .e-con { background: transparent !important; border: 0 !important; padding: 0 !important; }
/* JetTabs accordion */
.sc7-faq .jet-accordion__item, .sc7-faq .jet-toggle { background: var(--sc7-row) !important; border: 0 !important; border-radius: 0 !important; margin: 0 0 6px !important; }
.sc7-faq .jet-toggle__control { background: var(--sc7-row) !important; padding: 18px 20px !important; }
.sc7-faq .jet-toggle__label-text { color: #fff !important; font-size: 19px !important; font-weight: 700 !important; }
.sc7-faq .jet-toggle__label-icon, .sc7-faq .jet-toggle__icon {
  background: transparent !important; color: #fff !important; border: 2px solid #fff; border-radius: 50%;
}
.sc7-faq .jet-toggle__content { background: #2a2a2a !important; }
.sc7-faq .jet-toggle__content-inner, .sc7-faq .jet-toggle__content-inner * { color: #d6d6d6 !important; }
/* ตารางสรุปทุน */
.sc7-faq table { border-collapse: collapse; width: 100%; background: transparent; }
.sc7-faq table th, .sc7-faq table td { border: 1px solid var(--sc7-line) !important; color: #e0e0e0 !important; background: transparent !important; padding: 10px 12px; }
.sc7-faq table thead th, .sc7-faq table thead td { background: var(--sc7-pink) !important; color: #fff !important; }
/* หัวแถว (ชื่อทุน th scope=row) — พื้นเข้มเหมือนเซลล์ ลิงก์ชมพู (เดิมพื้นชมพู + ลิงก์ชมพู อ่านไม่ออก) */
.sc7-faq table tbody th { text-align: left; font-weight: 600; }
.sc7-faq table tr:nth-child(even) td, .sc7-faq table tbody tr:nth-child(even) th { background: #1d1d1d !important; }
.sc7-faq table tbody th a { text-decoration: none; }
.sc7-faq table tbody th a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- แท็บเล็ต ---------- */
@media (max-width: 1024px) {
  .sc7-hero .sc7-logo img { width: 150px; }
  .e-con.sc7-levels { margin-top: -50px; }
}

/* ---------- มือถือ ---------- */
@media (max-width: 767px) {
  .sc7-hero > .e-con-inner {
    display: grid !important; grid-template-columns: 1fr 1fr; grid-template-areas: "l r" "img img"; align-items: start; row-gap: 0;
  }
  .sc7-hero .sc7-hero-l, .sc7-hero .sc7-hero-r { width: auto; margin: 0; flex: none; }
  .sc7-hero .sc7-hero-l { grid-area: l; align-items: flex-start !important; }
  .sc7-hero .sc7-hero-r { grid-area: r; margin-top: 14px; }
  .sc7-hero .sc7-hero-img { grid-area: img; width: 108%; margin: -8px -4% 0; }
  .sc7-hero .sc7-logo img { width: 104px; }
  .e-con.sc7-levels { margin-top: -40px; }
  .sc7-levels .tul-card .elementor-button { align-items: center; }
  .sc7-tabs .e-n-tabs { gap: 14px; }
  .sc7-tabs .e-n-tabs-heading { flex-direction: row; min-width: 0; width: 100%; padding: 0; }
  .sc7-tabs .e-n-tab-title { flex: 1 1 0; padding: 12px 6px !important; font-size: 15px; }
  .sc7-tabs .e-n-tab-title[aria-selected="true"]::after { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 4px; }
  .sc7-faq .jet-toggle__label-text { font-size: 16px !important; }
  .sc7-faq table { display: block; overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {

  .sc7-grid img, .sc7-snap img, .sc7-sdm img, .sc7-cta { transition: none; }
}

/* แท็บ FAQ บนมือถือ: 3 แท็บพอดีจอ ไม่เลื่อนข้าง */
@media (max-width: 767px) {
  .sc7-tabs .e-n-tabs-heading { overflow: visible !important; }
  .sc7-tabs .e-n-tab-title { white-space: normal !important; line-height: 1.2; font-size: 14px; }
}

/* ---------- ปุ่มไปส่วนอื่น (ค่าเทอม / กองทุน / ทุน / คณะ) — แบบเดียวกับแท็บหน้าค่าเทอม ---------- */
.e-con.sc7-nav { width: fit-content !important; max-width: 100%; }
.sc7-nav .elementor-button { white-space: nowrap; min-height: 40px; line-height: 1.25; display: inline-flex; align-items: center; justify-content: center; }   /* ขนาดเท่าแท็บหน้าค่าเทอม */
.sc7-nav .elementor-button:focus-visible { outline: 3px solid #7aa7ff; outline-offset: 2px; }
@media (max-width: 767px) {
  .e-con.sc7-nav { display: grid !important; grid-template-columns: 1fr 1fr; width: 100% !important; border-radius: 20px !important; }
  .sc7-nav .elementor-widget-button, .sc7-nav .elementor-button { width: 100%; }
  .sc7-nav .elementor-button { white-space: normal; border-radius: 14px !important; }
}
/* นีออน: ตัวอักษรเรืองแสงตอนชี้ / หน้าปัจจุบัน (สีพื้น ขอบ เงา ตั้งใน Elementor) */
.e-con.sc7-nav { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sc7-nav .elementor-button:hover, .sc7-nav .elementor-button:focus-visible { text-shadow: 0 0 10px rgb(255 63 191 / .8); }
.sc7-nav .is-current .elementor-button { text-shadow: 0 0 8px rgb(255 255 255 / .55); }
@media (prefers-reduced-motion: no-preference) { .sc7-nav .elementor-button { transition: color .2s, background-color .2s, text-shadow .2s; } }