/* ตารางค่าเทอมแบบใหม่ — [spu_tuition] (inc/spu-tuition.php) */
.spu-tu {
  --tu-ink: #3a3238;
  --tu-mute: #8c8389;
  --tu-line: #efe9e1;
  --tu-pink: #ff3fbf;
  --tu-gold: #f5b400;
  --tu-head: "SPU Cond Bold", "DB HELVETHAICA X BD COND", "Noto Sans Thai", sans-serif;
  --tu-cols: 1.95fr 1fr 1fr 1fr 1.2fr;
  max-width: 1300px;
  margin: 0 auto;
  padding: 24px 20px 28px;
  background: #fff;
  border-radius: 28px;
  color: var(--tu-ink);
  font-variant-numeric: tabular-nums;
}
.spu-tu *, .spu-tu *::before, .spu-tu *::after { box-sizing: border-box; }
.spu-tu [hidden] { display: none !important; }
.spu-tu button { font: inherit; color: inherit; cursor: pointer; }

/* ---------- แถบตัวเลือก ---------- */
.tu-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px 16px;
  align-items: center;
  margin-bottom: 18px;
}
.tu-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.tu-lbl { font-weight: 600; }
.tu-dd { position: relative; }
.spu-tu .tu-chip, .spu-tu .tu-fac-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 6px 18px;
  border-radius: 999px; font-weight: 600; line-height: 1.2;
}
.spu-tu .tu-chip { background: #fff0fa; border: 1px solid #ffb3e6; color: var(--tu-ink); }
.tu-ico {
  width: 18px; height: 18px; flex: none;
  background:
    radial-gradient(circle, var(--tu-pink) 60%, transparent 62%) 0 0 / 9px 9px,
    radial-gradient(circle, #ff8ad8 60%, transparent 62%) 9px 0 / 9px 9px,
    radial-gradient(circle, #ff8ad8 60%, transparent 62%) 0 9px / 9px 9px,
    radial-gradient(circle, var(--tu-pink) 60%, transparent 62%) 9px 9px / 9px 9px;
  background-repeat: no-repeat;
}
.spu-tu[data-view="all"] .tu-ico {
  background: linear-gradient(var(--tu-pink) 0 0) 2px 3px / 14px 2px no-repeat,
              linear-gradient(var(--tu-pink) 0 0) 2px 8px / 14px 2px no-repeat,
              linear-gradient(var(--tu-pink) 0 0) 2px 13px / 14px 2px no-repeat;
}
.spu-tu .tu-fac-btn { border: 0; background: var(--fac-c, #f5453f); color: var(--fac-t, #fff); }
.spu-tu .tu-fac-btn::after { content: ""; width: 7px; height: 7px; margin-left: 4px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
.tu-menu {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0;
  min-width: 100%; max-height: 360px; overflow: auto;
  margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 1px solid var(--tu-line); border-radius: 16px;
  box-shadow: 0 12px 32px rgb(58 50 56 / .14);
}
.tu-menu li { padding: 9px 14px; border-radius: 10px; white-space: nowrap; cursor: pointer; }
.tu-menu li:hover, .tu-menu li:focus-visible { background: #fff0fa; outline: none; }
.tu-menu li[aria-selected="true"] { font-weight: 700; }
.tu-fac-menu li::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; background: var(--c); }

.tu-seg, .tu-tabs {
  display: inline-flex; gap: 4px; padding: 4px;
  border: 1px solid #fbe9c9; border-radius: 999px; background: #fff;
  justify-self: end;
}
.spu-tu .tu-seg button, .spu-tu .tu-tabs :is(button, a) {
  min-height: 40px; padding: 6px 22px; border: 0; border-radius: 999px;
  background: transparent; font-weight: 600; white-space: nowrap;
}
.spu-tu .tu-tabs { grid-column: 1 / -1; }
.spu-tu .tu-tabs :is(button, a) { display: inline-flex; align-items: center; justify-content: center; color: #b9b1b6; text-decoration: none; }
.spu-tu .tu-tabs a:hover { color: var(--tu-pink); }
/* ปุ่มปีการศึกษา (มีเมื่อเปิดรับมากกว่า 1 ปี) — หน้าตาเดียวกับปุ่มวุฒิ */
.tu-yr { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid #fbe9c9; border-radius: 999px; background: #fff; }
.spu-tu .tu-yr button { min-height: 40px; padding: 6px 18px; border: 0; border-radius: 999px; background: transparent; color: var(--tu-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.spu-tu .tu-yr button:is(:hover, :focus) { background: #fff0fa; color: var(--tu-pink); }
.spu-tu .tu-yr button[aria-pressed="true"], .spu-tu .tu-yr button[aria-pressed="true"]:is(:hover, :focus) { background: var(--tu-pink); color: #fff; }
.spu-tu .tu-yr button:focus-visible { outline: 3px solid #7aa7ff; outline-offset: 2px; }
.spu-tu[hidden] { display: none !important; }
.spu-tu .tu-seg button { color: var(--tu-ink); }
/* hover/focus: ธีม Hello (reset.css) ตั้งปุ่มทุกปุ่มเป็นตัวขาว+พื้นแดง ต้องตั้งสีเองทุกสถานะ ไม่งั้นตัวหนังสือจมหาย */
.spu-tu .tu-seg button:is(:hover, :focus),
.spu-tu .tu-tabs :is(button, a):is(:hover, :focus) { background: #fff0fa; color: var(--tu-pink); }
.spu-tu .tu-seg button[aria-pressed="true"],
.spu-tu .tu-tabs button[aria-selected="true"],
.spu-tu .tu-seg button[aria-pressed="true"]:is(:hover, :focus),
.spu-tu .tu-tabs button[aria-selected="true"]:is(:hover, :focus) { background: var(--tu-pink); color: #fff; }
.spu-tu button:focus-visible, .tu-card:focus-visible { outline: 3px solid #7aa7ff; outline-offset: 2px; }

/* ---------- คณะ + ตาราง ---------- */
.tu-fac { display: grid; grid-template-columns: minmax(0, 373fr) minmax(0, 910fr); gap: 6px; align-items: start; }
.tu-fband { display: none; }
.tu-card {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 373 / 694; background: var(--c);
  color: var(--t); text-decoration: none;
}
.tu-card-img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* รูปที่มีตัวหนังสือในรูปแล้ว (ติ๊ก "รูปการ์ดมีตัวหนังสือ" ในหลังบ้าน) -> ข้อความ HTML เก็บไว้ให้ screen reader/SEO */
.tu-card-img.has-text + .tu-card-txt {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.tu-card-txt { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 28px 22px 26px; }
/* รูปไม่มีตัวหนังสือ -> วางข้อความทับรูป */
.tu-card.is-overlay .tu-card-txt { position: absolute; inset: 0; background: linear-gradient(rgb(0 0 0 / .32), transparent 45%); }
.tu-card-txt strong { font-family: var(--tu-head); font-size: 30px; line-height: 1.15; }
.tu-card-en { font-family: db_helvethaica_x, "Noto Sans Thai", sans-serif; font-size: 26px; line-height: 1.1; font-weight: 700; }
.tu-card-tag { font-size: 15px; line-height: 1.5; }
.tu-card-txt em {
  align-self: flex-start; margin-top: auto; padding: 10px 18px; border-radius: 999px;
  background: rgb(20 10 15 / .72); color: #fff; font-style: normal; font-size: 15px;
}

.tu-head {
  display: grid; grid-template-columns: var(--tu-cols); gap: 4px;
  font-weight: 700; text-align: center; color: color-mix(in srgb, var(--c) 45%, #2b2226);
}
.tu-head > div, .tu-y1 > span, .tu-y1 > div > span { background: var(--h); }
.tu-head > div:first-child, .tu-all { display: grid; place-items: center; min-height: 70px; padding: 6px; }
.tu-head .tu-y1 { grid-column: span 3; display: grid; gap: 3px; background: none; }
.tu-y1 > span { padding: 4px; }
.tu-y1 > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.tu-y1 > div > span { padding: 8px 4px; }
.tu-all { grid-auto-flow: column; gap: 8px; }

.tu-major {
  margin-top: 8px; padding: 10px;
  border: 1px solid var(--tu-line); border-radius: 18px; background: #fff;
}
.spu-tu .tu-mname {
  margin: 0; padding: 9px 14px; border-radius: 10px;
  background: var(--c); color: var(--t);
  font-family: var(--tu-head); font-size: 20px; line-height: 1.25; font-weight: 700; text-align: center;
}
.tu-row {
  display: grid; grid-template-columns: var(--tu-cols); gap: 4px; align-items: center;
  min-height: 64px; padding: 8px 0; border-top: 1px solid #ecebea;
}
.tu-mname + .tu-row { margin-top: 6px; border-top-width: 2px; }
.tu-label span { display: inline-block; padding: 6px 10px; border-radius: 999px; font-size: 14px; line-height: 1.3; }
.tu-full .tu-label span { background: #f3f3ff; color: #2c2ce0; }
.tu-loan .tu-label span { background: #eef8ee; color: #137a13; }
.tu-loan.is-pending .tu-label span { background: #f2f2f2; color: #6b6b6b; }
.tu-cell { display: grid; justify-items: center; text-align: center; line-height: 1.25; }
.tu-cell b { font-size: 16px; }
.tu-sp, .tu-from { font-size: 11px; color: #555; }
.tu-price { color: var(--tu-gold); font-size: 17px; }
.tu-special .tu-lines { display: grid; gap: 4px; justify-items: center; }
.tu-special .tu-lines p { margin: 0; }
.tu-special { grid-template-columns: 1.95fr 3fr 1.2fr; }
.tu-empty, .tu-soon { margin: 12px 0 0; padding: 28px 16px; border: 1px dashed var(--tu-line); border-radius: 18px; text-align: center; color: var(--tu-mute); }
.tu-soon a { color: var(--tu-pink); font-weight: 600; }
.spu-tu .tu-plan-btn {
  display: block; margin: 6px 0 0 auto; padding: 4px 12px;
  border: 1px solid var(--tu-line); border-radius: 999px; background: #fff;
  font-size: 13px; color: var(--tu-mute);
}
.spu-tu .tu-plan-btn::before { content: "🔍\FE0E"; margin-right: 4px; }
.spu-tu .tu-plan-btn:is(:hover, :focus) { background: #fff; color: var(--tu-ink); border-color: var(--c); }

/* ---------- ตารางกองทุนกู้ยืม (แท็บ loan) ---------- */
.spu-tu[data-tab="loan"] .tu-seg { visibility: hidden; }   /* 1 แถวมีทั้ง ม.6 และ ปวส. อยู่แล้ว */
.tu-fhead, .tu-frow { --tu-cols: 1.15fr 1.1fr 1fr 1fr .9fr .9fr .9fr; }
.tu-fhead > div:nth-child(-n+2) { display: grid; place-items: center; min-height: 70px; padding: 6px; }
.tu-fhead .tu-g2 { grid-column: span 2; }
.tu-fhead .tu-g3 { grid-column: span 3; }
.tu-fhead .tu-g2 > div { grid-template-columns: repeat(2, 1fr); }
.tu-frow { min-height: 72px; }
.tu-frow .tu-cell b { font-size: 16px; }
.tu-ok { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-style: normal; }
.tu-ok.is-yes { background: #13b000; }
.tu-ok.is-yes::before { content: ""; width: 10px; height: 6px; margin-top: -3px; border: solid #fff; border-width: 0 0 3px 3px; transform: rotate(-45deg); }
.tu-ok.is-no { background: #d5d5d5; }
.tu-ok.is-no::before, .tu-ok.is-no::after { content: ""; grid-area: 1 / 1; width: 11px; height: 2px; background: #fff; transform: rotate(45deg); }
.tu-ok.is-no::after { transform: rotate(-45deg); }
.tu-ok.is-transfer { background: #24c08c; border-radius: 7px; }
.tu-ok.is-transfer::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: #fff; }
.tu-legend-fund { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-bottom: 14px; padding: 12px 18px; }
.tu-legend-fund li { gap: 8px; font-size: 14px; }
.tu-legend-fund .tu-ok { width: 20px; height: 20px; }
.tu-fnote { margin: 12px 4px 0; font-size: 13px; color: var(--tu-mute); }

/* มุมมองทั้งหมด: เรียงทุกคณะ แต่ละคณะเหมือนตอนเลือกทีละคณะ (การ์ดรูปคณะซ้าย + ตารางขวา)
   การ์ดเลื่อนตามตอนเลื่อนผ่านตารางยาวๆ (sticky) จะได้รู้ว่ากำลังดูคณะไหน */
.spu-tu[data-view="all"] .tu-only-fac { display: none; }
.spu-tu[data-view="all"] .tu-fac:not(.is-lead) { margin-top: 40px; }
.spu-tu[data-view="all"] .tu-card { position: sticky; top: 110px; }
.spu-tu[data-view="all"] .tu-fac.is-empty { display: none; }

/* ---------- เกณฑ์การรับ: คำอธิบายไอคอน ---------- */
.tu-legend { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 14px 48px; margin: 0; padding: 18px 22px; list-style: none; border: 1px dashed #c9b6ff; border-radius: 16px; }
.tu-legend li { display: flex; align-items: center; gap: 10px; }
.tu-legend i { width: 20px; height: 20px; border-radius: 50%; flex: none; display: grid; place-items: center; font-style: normal; font-size: 12px; color: #fff; }
.lg-no { background: #d6d6d6; } .lg-no::before { content: "✕"; }
.lg-yes { background: #18b300; } .lg-yes::before { content: "✓"; }
.lg-transfer { background: #24c08c; border-radius: 5px !important; } .lg-transfer::before { content: "⇄"; }
.lg-off { background: #2d3b8f; } .lg-off::before { content: "◐"; color: #ffcc33; }
.lg-sun { background: #ffc93b; } .lg-sun::before { content: "☀"; color: #fff7d6; }
.lg-online { background: #e2007a; } .lg-online::before { content: "⌁"; }

/* ---------- popup ตลอดหลักสูตร ---------- */
.tu-dialog {
  width: min(940px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  padding: 0; border: 0; border-radius: 22px; background: #fff; color: var(--tu-ink);
}
.tu-dialog::backdrop { background: rgb(30 18 28 / .55); }
.tu-dlg-head { position: relative; padding: 24px 64px 22px 28px; background: var(--c); color: var(--t); border-radius: 0 0 0 0; }
.spu-tu .tu-dlg-head h3 { margin: 0; font-family: var(--tu-head); font-size: 30px; line-height: 1.2; color: inherit; }
.tu-dlg-major { margin: 4px 0 14px; font-weight: 600; }
.tu-dlg-seg { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid rgb(255 255 255 / .7); border-radius: 999px; }
.spu-tu .tu-dlg-seg button { padding: 6px 14px; border: 0; border-radius: 999px; background: #fff; color: #aaa; font-weight: 600; }
.spu-tu .tu-dlg-seg button[aria-pressed="true"] { background: color-mix(in srgb, var(--c) 70%, #000); color: #fff; }
.spu-tu .tu-dlg-close { position: absolute; top: 14px; right: 16px; width: 44px; height: 44px; border: 0; background: none; color: inherit; font-size: 40px; line-height: 1; }
.tu-dlg-body { padding: 14px 16px 22px; overflow-x: auto; }
.tu-plan { width: 100%; min-width: 620px; border-collapse: separate; border-spacing: 4px; text-align: center; }
.tu-plan th { padding: 14px 6px; background: color-mix(in srgb, var(--c) 18%, #fff); color: color-mix(in srgb, var(--c) 80%, #000); font-weight: 700; }
.tu-plan th.is-pay { background: #c6ffc0; color: #137a13; }
.tu-plan td { padding: 7px 6px; background: #f3f3f3; }
.tu-plan .is-kys, .tu-plan .is-disc { color: #e00000; }
.tu-plan .is-pay { color: #137a13; font-weight: 700; }
.tu-plan tfoot td { padding: 12px 6px; font-weight: 700; }
.tu-plan tfoot td:first-child { background: color-mix(in srgb, var(--c) 18%, #fff); color: color-mix(in srgb, var(--c) 80%, #000); text-align: left; padding-left: 20px; }
.tu-note { margin: 10px 4px 0; font-size: 13px; color: var(--tu-mute); }

/* ---------- พื้นหน้า: ครีมตามแบบ ---------- */
body:has(.spu-tu) { background: #fffdf3; }

/* ---------- hero #DEK70 [spu_tuition_hero] ---------- */
/* container ของ Elementor ที่ครอบ hero / การ์ด / รูปแบบชำระ: ไม่เอา padding และไม่พึ่ง post CSS ของ Elementor */
/* display:block — ถ้าเป็น flex column, container-type ของ .tuh-in ทำให้ความสูงคำนวณผิด (มือถือ hero โดนบีบ) */
.e-con.tu-hero-wrap, .e-con.tu-pay-wrap { display: block; padding: 0; }
.spu-tu-hero {
  container-type: inline-size;
  background: #f60260; color: #fff; overflow: hidden;
}
/* header แบบหน้า home ลอยทับ (position:absolute) -> เว้นที่ด้านบนตามแบบ (160/1441) แต่ไม่น้อยกว่าความสูงแคปซูล */
.tuh-top { position: relative; max-width: 1441px; height: max(136px, min(160px, 11.1cqw)); margin: 0 auto; }
.tuh-tl { position: absolute; left: 0; bottom: 0; width: min(166px, 11.52cqw); height: auto; }
.tuh-tr { position: absolute; right: 0; top: 0; width: min(151px, 10.48cqw); height: auto; }
.tuh-in {
  container-type: inline-size; position: relative;
  max-width: 1441px; margin: 0 auto; aspect-ratio: 1441 / 473;
}
.tuh-art {
  position: absolute; left: 0; top: 0; width: 42.33%; height: auto;
  -webkit-mask-image: linear-gradient(#000 86%, transparent); mask-image: linear-gradient(#000 86%, transparent);
}
.tuh-deco { position: absolute; right: 0; top: 7.4%; width: 10.48%; height: auto; }
.tuh-txt { position: absolute; left: 43.7%; top: 3%; right: 12%; font-family: db_helvethaica_x, "DB HELVETHAICA X BD COND", "Noto Sans Thai", sans-serif; line-height: 1.1; }
.spu-tu-hero p { margin: 0; color: inherit; }
.tuh-head { display: grid; }
.tuh-tag { font-family: Prompt, "Noto Sans Thai", sans-serif; font-weight: 700; font-size: 8.4cqw; line-height: 1; letter-spacing: -.01em; color: #f8f2c9; }
.tuh-title { margin-top: .9cqw; font-size: max(22px, 3.4cqw); }
.tuh-price { margin-top: 1.2cqw !important; font-size: max(14px, 1.7cqw); line-height: 1.2; }
.tuh-price b { font-size: max(28px, 3.9cqw); font-weight: 700; vertical-align: -.12em; }
.tuh-unit { vertical-align: .9em; font-size: max(12px, 1.5cqw); }
.tuh-loan { margin-top: 1cqw !important; font-size: max(13px, 1.5cqw); }
.tuh-loan b { font-size: max(16px, 1.95cqw); color: #ffe94d; }
.tuh-note { margin-top: 1cqw !important; font-size: max(11px, .85cqw); opacity: .9; }

/* ---------- รูปแบบการลงทะเบียน [spu_tuition_pay] ---------- */
.spu-tu-pay { max-width: 1145px; margin: 56px auto 0; padding: 0 16px; text-align: center; }
.spu-tu-pay .tup-title { margin: 0; color: #ff3fbf; font-family: db_helvethaica_x, "Noto Sans Thai", sans-serif; font-size: 34px; line-height: 1.2; font-weight: 700; }
.spu-tu-pay .tup-sub { margin: 6px 0 0; color: #3a3238; font-weight: 600; font-size: 18px; }
.tup-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 265px)); justify-content: center; gap: 30px; margin: 14px 0 0; padding: 0; list-style: none; }
.tup-card { display: grid; justify-items: center; align-content: start; gap: 6px; padding: 12px 16px 22px; background: #fff; border-radius: 20px; box-shadow: 0 2px 14px rgb(120 90 60 / .06); }
.tup-n { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; font-weight: 700; font-size: 18px; color: #2b2226; }
.tup-1 .tup-n { background: #cdeee3; } .tup-2 .tup-n { background: #ffefc6; } .tup-3 .tup-n { background: #e7d6fb; }
.spu-tu-pay .tup-card h3 { margin: 8px 0 0; font-size: 17px; font-weight: 700; color: #3a3238; }
.tup-amt { margin-top: 8px; font-family: db_helvethaica_x, "Noto Sans Thai", sans-serif; font-size: 38px; line-height: 1.1; }
.tup-1 .tup-amt { color: #13a383; } .tup-2 .tup-amt { color: #f7b500; } .tup-3 .tup-amt { color: #7a1fd6; }
.spu-tu-pay .tup-card p { max-width: 220px; margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: #6b6268; }
.spu-tu-pay .tup-line { height: 4px; margin: 34px 0 0; border: 0; border-radius: 2px; background: linear-gradient(90deg, #2bb3a3, #6d3fd1 55%, #ff1a8c); opacity: 1; }
.tu-pay-wrap + .e-con .spu-tu, .spu-tu-pay ~ .spu-tu { margin-top: 30px; }
.tul-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 18px; }
.spu-tu-links .tul-btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 22px; border-radius: 999px;
  background: #fff; border: 1.5px solid #ff6fd8; color: #c4007f; font-weight: 600; text-decoration: none;
  box-shadow: 0 0 14px rgb(255 63 191 / .18);
}
.spu-tu-links .tul-btn::after { content: "↗"; margin-left: 8px; font-size: .9em; }
.spu-tu-links .tul-btn:hover { background: #fff0fa; }
.spu-tu-links .tul-btn:focus-visible { outline: 3px solid #7aa7ff; outline-offset: 2px; }

/* ---------- รูปแบบการลงทะเบียน แบบ widget Elementor (.tu-pay-el, tools/pay-to-elementor.php) ----------
   สี/ฟอนต์/ขนาดตั้งในแผง Elementor — CSS นี้ทำแค่: จัดตัวหนังสือในวงกลมเลข, เส้นไล่สี, การ์ดแนวนอนบนมือถือ */
.tu-pay-el .tup-n .elementor-heading-title { text-align: center; }
.tu-pay-el .tup-n { align-self: center; aspect-ratio: 1; }
/* วงกลมเลข: ให้พื้นสี (ตั้งใน Elementor > Advanced > Background) เต็มวง */
.tu-pay-el .tup-n > .elementor-widget-container { width: 100%; height: 100%; display: grid; place-items: center; }
.tu-pay-el .tup-desc p { max-width: 220px; margin: 0 auto; }
.tu-pay-el .tup-title .elementor-heading-title { text-wrap: balance; }
.tu-pay-el .tup-line { background: linear-gradient(90deg, #2bb3a3, #6d3fd1 55%, #ff1a8c); border-radius: 2px; }
@media (max-width: 767px) {
  .tu-pay-el .tup-card { display: grid !important; grid-template-columns: 44px 1fr; grid-template-areas: "n t" "n a" "d d"; align-items: center; column-gap: 12px; row-gap: 2px; }
  .tu-pay-el .tup-card > .tup-n { grid-area: n; width: 44px !important; height: 44px; }
  .tu-pay-el .tup-card > .tup-h { grid-area: t; }
  .tu-pay-el .tup-card > .tup-amt { grid-area: a; }
  .tu-pay-el .tup-card > .tup-desc { grid-area: d; }
  .tu-pay-el .tup-card > .tup-h .elementor-heading-title, .tu-pay-el .tup-card > .tup-amt .elementor-heading-title,
  .tu-pay-el .tup-card > .tup-desc, .tu-pay-el .tup-card > .tup-desc p { text-align: left; max-width: none; margin-left: 0; }
}

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

/* ---------- ตารางกองทุนกู้ยืมหลัก [spu_tuition_loan] ---------- */
.spu-lt {
  --lt-line: #efe9e1; --lt-ink: #3a3238; --lt-mute: #8c8389; --lt-pink: #ff3fbf;
  max-width: 1300px; margin: 30px auto 0; padding: 24px 20px 26px;
  background: #fff; border-radius: 28px; color: var(--lt-ink); font-variant-numeric: tabular-nums;
}
.spu-lt *, .spu-lt *::before, .spu-lt *::after { box-sizing: border-box; }
/* ปุ่มไปส่วนอื่น — หน้าตาเดียวกับแท็บของตารางค่าเทอม */
.lt-nav {
  display: flex; gap: 4px; width: fit-content; max-width: 100%; margin: 0 0 18px auto; padding: 4px;
  border: 1px solid #fbe9c9; border-radius: 999px; background: #fff;
}
.lt-nav > * {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 6px 22px;
  border-radius: 999px; font-weight: 600; white-space: nowrap; text-decoration: none; color: #b9b1b6;
}
.spu-lt .lt-nav a { color: #b9b1b6; text-decoration: none; }
.spu-lt .lt-nav a:hover { color: var(--lt-pink); }
.lt-nav a:focus-visible { outline: 3px solid #7aa7ff; outline-offset: 2px; }
.lt-nav [aria-current="page"] { background: var(--lt-pink); color: #fff; }
@media (prefers-reduced-motion: no-preference) { .lt-nav a { transition: color .2s; } }
.lt-top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; }
.spu-lt .lt-title { margin: 0; font-family: db_helvethaica_x, "Noto Sans Thai", sans-serif; font-size: 28px; line-height: 1.2; color: var(--lt-ink); }
.lt-sum { margin: 4px 0 0; color: var(--lt-mute); }
.lt-search input {
  width: min(320px, 100%); min-height: 44px; padding: 8px 18px 8px 40px; border: 1.5px solid #ffc6ea; border-radius: 999px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='%23c4007f' stroke-width='2'/%3E%3Cpath d='m15.5 15.5 5 5' stroke='%23c4007f' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 14px 50% / 18px no-repeat;
  font: inherit; color: var(--lt-ink);
}
.lt-search input:focus { outline: 3px solid #7aa7ff; outline-offset: 1px; }
.lt-jump { display: flex; gap: 8px; margin: 16px 0 0; padding-bottom: 4px; overflow-x: auto; scrollbar-width: thin; }
.lt-jump a {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--lt-line); background: #fff; color: var(--lt-ink); text-decoration: none; font-size: 14px; white-space: nowrap;
}
.lt-jump a::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.lt-jump a small { color: var(--lt-mute); }
.lt-jump a:hover { border-color: var(--c); }
.lt-legend { margin: 14px 0 12px; }
.lt-wrap { overflow: clip; border: 1px solid var(--lt-line); border-radius: 18px; }
.lt-table { width: 100%; border-collapse: collapse; text-align: center; }
.lt-table thead th { position: sticky; top: 0; z-index: 2; padding: 10px 6px; background: #fde1f4; color: #6b1a52; font-weight: 700; font-size: 15px; line-height: 1.25; border-bottom: 1px solid #f6c9e6; }
.lt-table thead tr:first-child th { height: 40px; }
.lt-table thead tr:nth-child(2) th { top: 40px; font-size: 14px; }
/* ล็อกอินอยู่: แถบ admin ของ WordPress (32px) ทับด้านบน */
body.admin-bar .lt-table thead th { top: 32px; }
body.admin-bar .lt-table thead tr:nth-child(2) th { top: 72px; }
.lt-table thead small { font-weight: 400; }
.lt-table .lt-name { text-align: left; padding-left: 16px; width: 34%; }
.lt-fac th {
  padding: 10px 16px; text-align: left; background: var(--h); color: color-mix(in srgb, var(--ink) 82%, #000);
  font-family: db_helvethaica_x, "Noto Sans Thai", sans-serif; font-size: 19px; border-left: 6px solid var(--c);
  scroll-margin-top: 110px;
}
.lt-table tbody { scroll-margin-top: 100px; }
.lt-fac a { margin-left: 8px; font-family: inherit; font-size: 13px; color: inherit; opacity: .8; }
.lt-row th, .lt-row td { padding: 12px 6px; border-top: 1px solid var(--lt-line); background: transparent !important; }   /* ไม่เอาแถวสลับสีของธีม */
.lt-row th { font-weight: 600; }
.lt-row:hover { background: #fffaf0; }
.lt-row td:nth-child(2), .lt-row td:nth-child(3) { font-weight: 700; white-space: nowrap; }
.lt-none { margin: 0; padding: 24px; text-align: center; color: var(--lt-mute); }

@media (max-width: 767px) {
  .spu-lt { padding: 16px 12px; border-radius: 20px; }
  .spu-lt .lt-title { font-size: 22px; }
  .lt-nav { display: grid; grid-template-columns: 1fr 1fr; width: 100%; border-radius: 20px; }
  .lt-nav > * { min-width: 0; padding: 6px 8px; font-size: 14px; white-space: normal; text-align: center; border-radius: 14px; }
  .lt-search, .lt-search input { width: 100%; }
  .lt-wrap { border: 0; border-radius: 0; overflow: visible; }
  .lt-table, .lt-table tbody { display: block; }
  .lt-table thead { display: none; }
  .lt-fac { display: block; margin-top: 14px; }
  .lt-fac th { display: block; border-radius: 10px; }
  /* 1 สาขา = 1 การ์ด: ชื่อ / ลักษณะ + วงเงิน / ✓✕ 5 ช่อง */
  .lt-row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px 4px; margin-top: 8px; padding: 12px; border: 1px solid var(--lt-line); border-radius: 14px; }
  .lt-row th, .lt-row td { border: 0; padding: 0; }
  .lt-row .lt-name { grid-column: 1 / -1; width: auto; padding: 0 0 6px; border-bottom: 1px solid var(--lt-line); }
  .lt-row td:nth-child(2), .lt-row td:nth-child(3) { grid-column: span 5; }
  .lt-row td:nth-child(n+4) { grid-column: span 2; }
  .lt-row td { display: grid; justify-items: center; gap: 3px; }
  .lt-row td::before { content: attr(data-col); font-size: 10.5px; line-height: 1.2; color: var(--lt-mute); font-weight: 400; }
}

/* ---------- ตารางคณะ/สาขาที่เปิดรับ [spu_tuition_majors] (ใช้ฐานเดียวกับ .spu-lt) ---------- */
.ma-legend img, .ma-chip img { width: 20px; height: 20px; flex: none; }
.ma-legend { display: flex; flex-wrap: wrap; gap: 10px 24px; padding: 12px 18px; }
.ma-legend li { gap: 8px; font-size: 14px; }
.ma-legend .tu-ok { width: 20px; height: 20px; }
.ma-table td { text-align: left; }
.ma-table td:nth-child(2) { text-align: center; }
.ma-table thead th:nth-child(n+3) { width: 27%; }
.ma-chip { display: inline-flex; align-items: center; gap: 6px; margin: 3px 10px 3px 0; font-size: 14px; white-space: nowrap; }
.ma-chip.is-no { color: var(--lt-mute); }
.ma-chip .tu-ok { width: 20px; height: 20px; }
@media (max-width: 767px) {
  .ma-table .lt-row td:nth-child(2) { grid-column: 1 / -1; }
  .ma-table .lt-row td:nth-child(n+3) { grid-column: span 5; justify-items: start; align-content: start; align-self: start; }
  .ma-table .lt-row td:nth-child(2) { justify-items: start; }
  .ma-chip { white-space: normal; font-size: 13px; }
}

/* ---------- ปุ่ม ✎ แก้ไข (เห็นเฉพาะตอนล็อกอิน) + กล่องอธิบายใน Elementor ---------- */
.tu-edit {
  display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: 6px; vertical-align: middle;
  border-radius: 50%; background: #fff; border: 1.5px solid #ff6fd8; color: #c4007f !important;
  font: 700 13px/1 system-ui, sans-serif; text-decoration: none !important; box-shadow: 0 1px 4px rgb(0 0 0 / .12);
}
.tu-edit:hover { background: #ff3fbf; color: #fff !important; }
.tu-edit:focus-visible { outline: 3px solid #7aa7ff; outline-offset: 2px; }
.tu-fac { position: relative; }
/* มุมขวาบนของการ์ดคณะ (คอลัมน์การ์ด = 373/1283 ของกว้างที่เหลือหลังหัก gap 6px) */
.tu-fac > .tu-edit { position: absolute; top: 10px; left: calc((100% - 6px) * 373 / 1283 - 40px); z-index: 3; margin: 0; width: 30px; height: 30px; font-size: 15px; }
@media (max-width: 1024px) { .tu-fac > .tu-edit { left: 200px; } }
@media (max-width: 767px) {
  .tu-fac > .tu-edit { left: auto; right: 10px; }
  .tu-edit { width: 32px; height: 32px; font-size: 15px; }   /* ขนาดกดด้วยนิ้ว */
}
.tu-editor-note {
  display: grid; gap: 4px; max-width: 1300px; margin: 0 auto 12px; padding: 12px 16px;
  border: 2px dashed #ff6fd8; border-radius: 14px; background: #fff0fa; color: #5b1747; font-size: 14px; line-height: 1.5;
}
.tu-editor-note a { color: #c4007f; font-weight: 700; }
@media print { .tu-edit, .tu-editor-note { display: none !important; } }

/* ---------- การ์ดระดับการศึกษา [spu_tuition_levels] ---------- */
/* container ของ Elementor ที่ครอบการ์ด: ดึงขึ้นไปทับขอบล่าง hero 30px ตามแบบ */
/* ตั้ง display/padding เองด้วย ไม่พึ่ง post CSS ของ Elementor (ไฟล์นั้นไม่มี ?ver= เพราะ Hummingbird ตัดทิ้ง เบราว์เซอร์อาจถือของเก่า) */
.e-con.tu-levels-wrap { display: block; padding: 0; position: relative; z-index: 2; margin-top: -30px; }
.spu-tu-levels {
  display: grid; grid-template-columns: repeat(4, minmax(0, 204px)); justify-content: center; gap: 21px;
  margin: 0 auto; padding: 0 16px;
}
.spu-tu-levels .tu-level {
  display: grid; place-items: start center; padding-top: 50px;
  height: 147px; border: 1.5px solid #ff6fd8; border-radius: 20px;
  background: linear-gradient(180deg, rgb(255 255 255 / .72), #fff 40%);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 0 18px rgb(255 63 191 / .32);
  color: #5b1747; text-decoration: none;
  font-family: "SPU Cond Bold", "DB HELVETHAICA X BD COND", "Noto Sans Thai", sans-serif;
  font-size: 30px; line-height: 1.2; text-align: center;
}
.spu-tu-levels .tu-level:hover { box-shadow: 0 0 26px rgb(255 63 191 / .5); color: #c4007f; }
.spu-tu-levels .tu-level:focus-visible { outline: 3px solid #7aa7ff; outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .spu-tu-levels .tu-level { transition: box-shadow .2s, color .2s, transform .2s; }
  .spu-tu-levels .tu-level:hover { transform: translateY(-3px); }
}

/* ---------- แท็บเล็ต ---------- */
@media (max-width: 1024px) {
  .spu-tu { --tu-cols: 1.6fr 1fr 1fr 1fr 1.15fr; padding: 20px 14px; }
  .tu-fac { grid-template-columns: 240px minmax(0, 1fr); }
  .tu-bar { grid-template-columns: 1fr; }
  .tu-seg, .tu-tabs { justify-self: start; }
  .tu-cell b { font-size: 14px; } .tu-price { font-size: 15px; }
}

/* ---------- มือถือ ---------- */
@media (max-width: 767px) {
  .spu-tu { padding: 16px 12px; border-radius: 20px; }
  .tu-pick { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 10px; }   /* ป้าย + ปุ่ม แถวละคู่ */
  .tu-pick > .tu-yr, .tu-pick > .tu-dd { justify-self: start; }
  .tu-seg, .tu-tabs { display: flex; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .spu-tu .tu-seg button { flex: 1 1 0; min-width: max-content; padding: 6px 10px; }
  .spu-tu .tu-tabs { display: grid; grid-template-columns: repeat(4, 1fr); overflow: visible; }
  .spu-tu .tu-tabs :is(button, a) { min-width: 0; text-align: center; padding: 6px 2px; font-size: 13px; line-height: 1.2; white-space: normal; }
  .tu-fac { grid-template-columns: 1fr; gap: 10px; }
  .tu-card { aspect-ratio: auto; height: 220px; }
  .tu-card-img { object-position: top; }
  .tu-head { display: none !important; }
  .tu-row { grid-template-columns: repeat(4, 1fr); gap: 6px 4px; }
  .tu-label { grid-column: 1 / -1; }
  /* กองทุน: ลักษณะ + วงเงิน บรรทัดแรก, ✓/✕ 5 ช่องบรรทัดสอง */
  .tu-frow { grid-template-columns: repeat(10, 1fr); }
  .tu-frow > .tu-cell:nth-child(-n+2) { grid-column: span 5; }
  .tu-frow > .tu-cell:nth-child(n+3) { grid-column: span 2; }
  .tu-frow .tu-cell::before { font-size: 10.5px; text-align: center; }
  .tu-cell::before { content: attr(data-col); font-size: 11px; color: var(--tu-mute); }
  .tu-special { grid-template-columns: 3fr 1fr; }
  .tu-special .tu-lines { grid-column: 1; }
  .spu-tu .tu-mname { font-size: 18px; }
  .spu-tu[data-view="all"] .tu-card { position: relative; top: auto; }   /* การ์ดอยู่บนตาราง ไม่ลอยตาม */
  .spu-tu[data-view="all"] .tu-fac:not(.is-lead) { margin-top: 28px; }
  .tu-legend { grid-template-columns: repeat(2, auto); gap: 12px 20px; }
  .spu-tu .tu-dlg-head h3 { font-size: 22px; }
  .tu-dlg-head { padding: 18px 56px 16px 18px; }
  .e-con.tu-levels-wrap { margin-top: 16px; }
  .spu-tu-pay { margin-top: 36px; }
  .spu-tu-pay .tup-title { font-size: 24px; text-wrap: balance; }
  .spu-tu-pay .tup-sub { font-size: 16px; }
  /* การ์ด 3 ใบ: เรียงเป็นแถวแนวนอน (วงกลม | หัวข้อ+ยอด | คำอธิบาย) ประหยัดความสูง */
  .tup-cards { grid-template-columns: 1fr; gap: 10px; }
  .tup-card { grid-template-columns: 44px 1fr; grid-template-areas: "n t" "n a" "d d"; justify-items: start; align-items: center; gap: 2px 12px; padding: 12px 16px 14px; text-align: left; }
  .tup-n { grid-area: n; width: 44px; height: 44px; font-size: 16px; }
  .spu-tu-pay .tup-card h3 { grid-area: t; margin: 0; font-size: 15px; }
  .tup-amt { grid-area: a; margin: 0; font-size: 26px; }
  .spu-tu-pay .tup-card p { grid-area: d; max-width: none; margin: 6px 0 0; font-size: 12.5px; }
  .spu-tu-pay .tup-line { margin-top: 24px; }
  /* วุฒิ: ปุ่ม ม.6 ยาว ให้กว้างกว่า */
  .spu-tu .tu-seg { display: grid; grid-template-columns: 1.7fr 1fr; overflow: visible; }
  .spu-tu .tu-seg button { min-width: 0; padding: 6px 8px; font-size: 14px; white-space: normal; }
  .tu-fac-menu { max-width: calc(100vw - 40px); }
  .tu-fac-menu li { white-space: normal; }
  /* popup: ปุ่มสลับขึ้น 2 บรรทัดได้ ตารางแบบย่อ (ไม่มีคอลัมน์ปี) */
  .tu-dlg-seg { display: grid; grid-template-columns: 1fr 1fr; width: 100%; border-radius: 16px; }
  .spu-tu .tu-dlg-seg button { min-width: 0; padding: 6px 8px; font-size: 13px; line-height: 1.25; white-space: normal; border-radius: 12px; }
  .tu-plan { border-spacing: 1px; table-layout: fixed; font-size: 11.5px; }
  .tu-plan thead th:first-child { width: 36px; }
  .tu-dlg-body { padding: 10px 8px 16px; }
  .tu-plan { min-width: 0; border-spacing: 2px; font-size: 12px; }
  .tu-plan th { padding: 8px 2px; font-size: 12px; }
  .tu-plan td { padding: 6px 2px; }
  .tu-plan tfoot td { padding: 8px 2px; }
  .tu-plan tfoot td:first-child { padding-left: 6px; }
  /* แถบ "ข้อมูลค่าเทอม ณ วันที่ ..." (fixed ล่างจอ, หน้า term70) ให้เหลือบรรทัดเดียว */
  .elementor-element-4567e8a { --padding-top: 6px; --padding-bottom: 6px; }
  .elementor-element-4567e8a :is(p, .elementor-widget-text-editor) { margin: 0; font-size: 13px !important; line-height: 1.35 !important; }
  .spu-tu-levels { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .spu-tu-levels .tu-level { height: 84px; padding-top: 0; place-items: center; font-size: 22px; border-radius: 16px; }
}

/* hero: จอแคบกว่า 900px สัดส่วนแบบเดสก์ท็อปเตี้ยเกิน -> เรียงข้อความบน รูปล่าง */
@media (max-width: 900px) {
  .tuh-in { container-type: normal; aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; padding-top: 28px; }
  .tuh-txt { position: static; padding: 0 16px; text-align: center; }
  .tuh-tag { font-size: 64px; }
  .tuh-title { margin-top: 6px; font-size: 30px; }
  .tuh-price { margin-top: 10px !important; font-size: 16px; }
  .tuh-price b { font-size: 36px; }
  .tuh-unit { font-size: 14px; }
  .tuh-loan { margin-top: 8px !important; font-size: 15px; }
  .tuh-loan b { font-size: 19px; }
  .tuh-note { margin-top: 6px !important; font-size: 12px; }
  .tuh-art { position: static; order: 2; width: min(100%, 420px); margin-top: 12px; }
  .tuh-deco { display: none; }
}
@media (min-width: 768px) and (max-width: 900px) {
  .tuh-art { width: 400px; }
}
/* มือถือ: header (☰ · โลโก้ · สมัครเรียน) สูง ~68px */
@media (max-width: 767px) {
  .tuh-top { height: 76px; }
  .tuh-tl, .tuh-tr { display: none; }
  .tuh-in { padding-top: 8px; }
}

@media (prefers-reduced-motion: no-preference) {
  .spu-tu .tu-seg button, .spu-tu .tu-tabs :is(button, a) { transition: background-color .2s, color .2s; }
}