/* หน้าแรกเว็บศิษย์เก่า — สีและฟอนต์ตามเว็บหลัก (ชมพู #e6007e/#ff0080, หัวข้อ DB Helvethaica X, เนื้อหา Sarabun) */
.alh {
  --alh-pink: #e6007e;
  --alh-hot: #ff2d95;
  --alh-hot2: #ff5fb0;
  --alh-cream: #fff1c1;
  --alh-yellow: #ffd23f;
  --alh-purple: #5b2a86;
  --alh-ink: #3a3238;
  --alh-mute: #7d7379;
  --alh-line: #f6e1ee;
  --alh-soft: #fff5fa;
  --alh-head: db_helvethaica_x, "Noto Sans Thai", sans-serif;
  --alh-body: Sarabun, "Noto Sans Thai", sans-serif;
  color: var(--alh-ink);
  font-family: var(--alh-body);
  background: #fff;
}
.alh a { text-decoration: none; }

/* ---------- hero (header ของเว็บหลักลอยทับด้านบน -> เว้นที่ให้) ---------- */
.alh-hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 150px 24px 120px;
  background: linear-gradient(135deg, var(--alh-hot) 0%, var(--alh-pink) 55%, var(--alh-hot2) 100%);
  color: #fff; text-align: center;
}
.alh-hero__inner { position: relative; max-width: 880px; margin: 0 auto; display: grid; gap: 14px; justify-items: center; }
.alh p.alh-hero__eyebrow { margin: 0; font: 700 16px/1 var(--alh-body); letter-spacing: .22em; color: var(--alh-cream); opacity: .9; }
.alh h1.alh-hero__title { margin: 0; font: 700 clamp(44px, 7vw, 84px)/.95 var(--alh-head); color: var(--alh-cream); text-wrap: balance; }
.alh p.alh-hero__lead { margin: 4px 0 10px; font: 400 clamp(18px, 2vw, 22px)/1.5 var(--alh-body); }
.alh-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.alh-hero__deco { position: absolute; z-index: -1; pointer-events: none; }
.alh-hero__deco--sq { width: 150px; height: 150px; left: -40px; bottom: 30px; border: 18px solid var(--alh-yellow); transform: rotate(-14deg); box-shadow: 14px 14px 0 var(--alh-purple); }
.alh-hero__deco--ring { width: 220px; height: 220px; right: -60px; top: 90px; border-radius: 50%; border: 22px solid rgb(255 255 255 / .22); }
.alh-hero__deco--heart { right: 14%; bottom: 36px; font-size: 64px; line-height: 1; color: #fff; transform: rotate(12deg); opacity: .95; }

/* ---------- ปุ่ม ---------- */
.alh-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 26px; border-radius: 999px; font: 600 17px/1.2 var(--alh-body); transition: transform .15s, box-shadow .15s, background-color .15s; }
.alh .alh-btn--light { background: #fff; color: var(--alh-pink); box-shadow: 0 6px 18px rgb(120 0 60 / .25); }
.alh .alh-btn--ghost { background: transparent; color: #fff; border: 2px solid rgb(255 255 255 / .85); }
.alh .alh-btn--pink { background: var(--alh-pink); color: #fff; box-shadow: 0 6px 16px rgb(230 0 126 / .3); }
.alh .alh-btn:hover { transform: translateY(-2px); }
.alh .alh-btn--ghost:hover { background: rgb(255 255 255 / .14); }
.alh .alh-btn:focus-visible, .alh-link:focus-visible, .alh-hd__card:focus-visible, .alh-fac a:focus-visible { outline: 3px solid var(--alh-yellow); outline-offset: 3px; }

/* ---------- การ์ดบริการ (ทับขอบล่าง hero แบบการ์ด hub ของเว็บหลัก) ---------- */
.alh-links {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
  max-width: 1140px; margin: -64px auto 0; padding: 0 24px;
}
.alh-link {
  display: grid; gap: 6px; align-content: start;
  padding: 22px 20px; border-radius: 20px; background: #fff;
  border: 2px solid #ffd0ea; box-shadow: 0 10px 28px rgb(230 0 126 / .14);
  color: var(--alh-ink); transition: transform .15s, border-color .15s;
}
.alh-link:hover { transform: translateY(-4px); border-color: var(--alh-pink); }
.alh-link__ic { width: 34px; height: 34px; fill: none; stroke: var(--alh-pink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.alh-link__t { font: 700 24px/1.1 var(--alh-head); color: var(--alh-pink); }
.alh-link__d { font: 400 15px/1.45 var(--alh-body); color: var(--alh-mute); }

/* ---------- section ---------- */
.alh-sec { max-width: 1140px; margin: 0 auto; padding: 72px 24px 8px; }
.alh-sec__head { display: grid; gap: 6px; margin-bottom: 26px; text-align: center; }
.alh h2.alh-sec__title { margin: 0; font: 700 clamp(30px, 3.6vw, 42px)/1.1 var(--alh-head); color: var(--alh-pink); text-wrap: balance; }
.alh p.alh-sec__sub { margin: 0; font: 400 17px/1.5 var(--alh-body); color: var(--alh-mute); }
.alh-sec__more { margin: 28px 0 0; text-align: center; }

/* ทำเนียบดุษฎีบัณฑิต */
/* ข่าวศิษย์เก่า (ดึงจากเว็บข่าว) — การ์ด 3 คอลัมน์ รูป 768×490 */
.alh-news { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.alh-news__card { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: 18px; background: #fff; border: 1px solid var(--alh-line); box-shadow: 0 6px 18px rgb(58 50 56 / .07); color: var(--alh-ink); transition: transform .15s, box-shadow .15s; }
.alh-news__card:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgb(230 0 126 / .16); }
.alh-news__card:focus-visible { outline: 3px solid var(--alh-yellow); outline-offset: 3px; }
.alh-news__pic { display: block; aspect-ratio: 768 / 490; background: var(--alh-soft); overflow: hidden; }
.alh .alh-news__pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.alh-news__card:hover .alh-news__pic img { transform: scale(1.04); }
.alh-news__body { display: grid; gap: 8px; align-content: start; padding: 14px 18px 18px; }
.alh-news__date { justify-self: start; padding: 2px 10px; border-radius: 999px; background: #ffe6f3; color: var(--alh-pink); font: 600 13px/1.6 var(--alh-body); font-variant-numeric: tabular-nums; }
.alh-news__title { font: 600 17px/1.45 "Noto Sans Thai", sans-serif; color: var(--alh-ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.alh-news__card:hover .alh-news__title { color: var(--alh-pink); }

/* แบบ Pinterest (masonry): คอลัมน์ CSS + รูปตามสัดส่วนจริง การ์ดสูงไม่เท่ากัน เรียงลงทีละคอลัมน์ */
.alh-hd { column-count: 4; column-gap: 18px; }
.alh-hd__card { display: grid; break-inside: avoid; margin-bottom: 18px; overflow: hidden; border-radius: 18px; background: #fff; border: 1px solid var(--alh-line); box-shadow: 0 6px 18px rgb(58 50 56 / .07); color: var(--alh-ink); transition: transform .15s, box-shadow .15s; }
.alh-hd__card:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgb(230 0 126 / .16); }
.alh-hd__pic { display: block; background: var(--alh-soft); overflow: hidden; }
.alh .alh-hd__img { display: block; width: 100%; height: auto; }
.alh-hd__pic--none { aspect-ratio: 4 / 3; background: linear-gradient(135deg, #ffe3f1, #fff5d6); }
.alh-hd__body { display: grid; gap: 6px; align-content: start; padding: 14px 16px 16px; }
.alh-hd__name { font: 600 18px/1.35 "Noto Sans Thai", sans-serif; color: var(--alh-ink); }   /* เข้าชุดหัวข้อคณะหน้าค่าเทอม (Noto 18px) */
.alh-hd__deg { font: 400 14px/1.45 var(--alh-body); color: var(--alh-mute); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.alh-hd__year { justify-self: start; padding: 2px 10px; border-radius: 999px; background: #ffe6f3; color: var(--alh-pink); font: 600 13px/1.6 var(--alh-body); font-variant-numeric: tabular-nums; }

/* ศิษย์เก่าแต่ละคณะ */
.alh-sec--fac { padding-bottom: 8px; }   /* ไม่ใช่ section สุดท้ายแล้ว — เสียงศิษย์เก่าอยู่ท้ายสุด */
.alh-fac { list-style: none; margin: 0 auto; padding: 0; max-width: 820px; display: grid; gap: 10px; }
.alh-fac a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 22px; border-radius: 14px; background: var(--alh-soft); border: 1px solid var(--alh-line); color: var(--alh-ink); font: 600 17px/1.35 var(--alh-body); transition: background-color .15s, color .15s; }
.alh-fac a span { color: var(--alh-pink); font-size: 20px; }
.alh-fac a:hover { background: #ffe6f3; color: var(--alh-pink); }

/* ---------- จอเล็ก ---------- */
@media (max-width: 1024px) {
  .alh-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alh-hd { column-count: 3; }
  .alh-news { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .alh-hero { padding: 120px 16px 100px; }
  .alh-hero__deco--sq { width: 90px; height: 90px; border-width: 12px; left: -36px; bottom: 18px; }
  .alh-hero__deco--ring { width: 140px; height: 140px; border-width: 14px; right: -50px; top: 70px; }
  .alh-hero__deco--heart { font-size: 40px; right: 8%; bottom: 20px; }
  .alh-btn { min-height: 46px; padding: 10px 20px; font-size: 16px; }
  .alh-links { gap: 10px; padding: 0 16px; margin-top: -54px; }
  .alh-link { padding: 16px 14px; border-radius: 16px; }
  .alh-link__t { font-size: 21px; }
  .alh-link__d { font-size: 13.5px; }
  .alh-sec { padding: 52px 16px 8px; }
  .alh-hd { column-count: 2; column-gap: 12px; }
  .alh-news { grid-template-columns: 1fr; gap: 14px; }
  .alh-news__title { font-size: 16px; }
  .alh-hd__card { margin-bottom: 12px; }
  .alh-hd__body { padding: 10px 12px 12px; }
  .alh-hd__name { font-size: 16px; }
  .alh-hd__deg { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .alh * { transition: none !important; } }

/* =====================================================================
   หน้ารวมทำเนียบ (หมวด) + หน้ารายบุคคล — 22 ต.ค. 2026
   ===================================================================== */
.alh-hero--sm { padding: 158px 24px 64px; }   /* header ของเว็บหลักลอยทับ สูงราว 130px */
.alh-hero--sm .alh-hero__inner { gap: 10px; }
.alh h1.alh-hero--sm, .alh .alh-hero--sm h1.alh-hero__title { font-size: clamp(36px, 5vw, 58px); line-height: 1.05; }
.alh-hero--thin { padding: 154px 24px 28px; }
.alh-crumb { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; font: 400 15px/1.4 var(--alh-body); color: var(--alh-cream); }
.alh .alh-crumb a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(255 255 255 / .45); }
.alh .alh-crumb a:hover { text-decoration-color: #fff; }

/* ค้นหา + กรองปี */
.alh-sec--arch { padding-top: 36px; padding-bottom: 80px; }
.alh-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 26px; }
.alh-filter__q { flex: 1 1 320px; }
.alh .alh-filter input, .alh .alh-filter select {
  width: 100%; min-height: 48px; padding: 10px 20px; border-radius: 999px; border: 2px solid #ffd0ea; background: #fff;
  font: 400 16px/1.3 var(--alh-body); color: var(--alh-ink);
}
.alh-filter__y { flex: 0 0 180px; }
.alh .alh-filter input:focus, .alh .alh-filter select:focus { outline: none; border-color: var(--alh-pink); box-shadow: 0 0 0 4px rgb(230 0 126 / .14); }
.alh p.alh-filter__count { margin: 0 0 0 auto; font: 600 16px/1 var(--alh-body); color: var(--alh-pink); font-variant-numeric: tabular-nums; }
.alh-hd__card[hidden] { display: none; }
.alh-empty { margin: 30px 0; text-align: center; color: var(--alh-mute); font-size: 17px; }

/* การ์ดไม่มีรูป */
.alh-hd__card--text { background: linear-gradient(160deg, #fff 0%, var(--alh-soft) 100%); }
.alh-hd__card--text .alh-hd__body { padding-top: 6px; }
.alh-hd__badge { display: grid; place-items: center; width: 46px; height: 46px; margin: 18px 16px 4px; border-radius: 50%; background: var(--alh-pink); }
.alh-hd__badge svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.alh-hd__role { font: 400 14px/1.45 var(--alh-body); color: var(--alh-ink); }

/* หน้ารายบุคคล */
.alh-person { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 40px; align-items: start; max-width: 1100px; margin: 48px auto 0; padding: 0 24px; }
.alh-person__pic { overflow: hidden; border-radius: 22px; background: var(--alh-soft); box-shadow: 0 14px 34px rgb(58 50 56 / .14); }
.alh .alh-person__img { display: block; width: 100%; height: auto; }
.alh-person__pic--none { display: grid; place-items: center; aspect-ratio: 4 / 5; background: linear-gradient(160deg, #ffe3f1, #fff5d6); }
.alh-person__pic--none svg { width: 38%; height: auto; fill: none; stroke: var(--alh-pink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.alh-person__body { display: grid; gap: 12px; align-content: start; }
.alh p.alh-person__eyebrow { margin: 0; font: 600 15px/1.3 var(--alh-body); letter-spacing: .04em; color: var(--alh-pink); }
.alh h1.alh-person__name { margin: 0; font: 700 clamp(32px, 4vw, 46px)/1.1 var(--alh-head); color: var(--alh-ink); text-wrap: balance; }
.alh p.alh-person__deg { margin: 4px 0 0; font: 600 19px/1.5 "Noto Sans Thai", sans-serif; color: var(--alh-ink); }
.alh p.alh-person__fac { margin: 0; font: 400 16px/1.5 var(--alh-body); color: var(--alh-mute); }
.alh-person__roles { margin: 6px 0 10px; padding: 16px 20px 16px 38px; border-radius: 16px; background: var(--alh-soft); border: 1px solid var(--alh-line); display: grid; gap: 6px; }
.alh-person__roles li { font: 400 16px/1.55 var(--alh-body); color: var(--alh-ink); }
.alh-person__roles li::marker { color: var(--alh-pink); }
.alh-sec--more { padding-bottom: 80px; }

@media (max-width: 767px) {
  .alh-hero--sm { padding: 116px 16px 48px; }
  .alh-hero--thin { padding: 104px 16px 20px; }
  .alh-filter__y { flex: 1 1 100%; }
  .alh p.alh-filter__count { margin: 0; }
  .alh-person { grid-template-columns: 1fr; gap: 22px; margin-top: 28px; padding: 0 16px; }
  .alh-person__pic { max-width: 340px; }
  .alh-hd__badge { width: 40px; height: 40px; margin: 14px 12px 2px; }
}

/* masonry เรียงซ้าย->ขวา (เปิดโดย alumni-masonry.js — ไม่มี JS ใช้ CSS columns ด้านบน) */
.alh-hd { --alh-gap: 18px; }
.alh-hd.is-masonry { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 4px; column-gap: var(--alh-gap); column-count: auto; }
.alh-hd.is-masonry > .alh-hd__card { margin-bottom: 0; align-self: start; }
@media (max-width: 1024px) { .alh-hd.is-masonry { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .alh-hd { --alh-gap: 12px; } .alh-hd.is-masonry { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =====================================================================
   พื้นหลัง hero ทดลอง 4 แบบ (?bg=1..4) — 22 ต.ค. 2026 · ปิดการเคลื่อนไหวเมื่อผู้ใช้ตั้ง "ลดการเคลื่อนไหว"
   ===================================================================== */
/* 1) ไล่สีเคลื่อนไหวช้าๆ ชมพู -> บานเย็น -> ม่วง */
.alh-hero--bg1 { background: linear-gradient(120deg, #ff2d95, #e6007e, #a8128f, #ff5fb0, #ff7a59, #ff2d95); background-size: 320% 320%; animation: alh-flow 16s ease-in-out infinite alternate; }
@keyframes alh-flow { 0% { background-position: 0% 40%; } 100% { background-position: 100% 60%; } }

/* 2) รูปทรงลอย (ของเดิม + จุด ดาว สามเหลี่ยม) */
.alh-hero--bg2 .alh-hero__deco--sq { animation: alh-bob 7s ease-in-out infinite; }
.alh-hero--bg2 .alh-hero__deco--ring { animation: alh-pulse 9s ease-in-out infinite; }
.alh-hero--bg2 .alh-hero__deco--heart { animation: alh-bob 5s ease-in-out infinite reverse; }
.alh-hero__deco--dot { border-radius: 50%; }
.alh-hero__deco--d1 { width: 22px; height: 22px; left: 18%; top: 34%; background: var(--alh-yellow); animation: alh-float 8s ease-in-out infinite; }
.alh-hero__deco--d2 { width: 14px; height: 14px; right: 22%; top: 28%; background: #fff; animation: alh-float 6s ease-in-out infinite -2s; }
.alh-hero__deco--d3 { width: 34px; height: 34px; left: 30%; bottom: 22%; border: 6px solid rgb(255 255 255 / .55); animation: alh-float 10s ease-in-out infinite -4s; }
.alh-hero__deco--star { right: 8%; top: 42%; font-size: 40px; line-height: 1; color: var(--alh-yellow); animation: alh-spin 14s linear infinite; }
.alh-hero__deco--tri { left: 8%; top: 30%; width: 0; height: 0; border-left: 26px solid transparent; border-right: 26px solid transparent; border-bottom: 44px solid var(--alh-purple); animation: alh-spin 18s linear infinite reverse; }
@keyframes alh-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -16px; } }
@keyframes alh-float { 0%, 100% { translate: 0 0; } 33% { translate: 12px -18px; } 66% { translate: -10px 10px; } }
@keyframes alh-pulse { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: 1.12; opacity: .7; } }
@keyframes alh-spin { to { rotate: 360deg; } }

/* 3) หมวกบัณฑิต + ประกายลอยขึ้น (สร้างด้วย alumni-hero.js) */
.alh-sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.alh-sky i { position: absolute; bottom: -60px; display: block; color: #fff; opacity: 0; animation: alh-rise linear infinite; }
.alh-sky i svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.alh-sky i.is-spark { color: var(--alh-cream); }
@keyframes alh-rise { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: .9; } 85% { opacity: .75; } 100% { transform: translateY(-620px) rotate(var(--r, 25deg)); opacity: 0; } }

/* 4) ผนังรูปดุษฎีบัณฑิตเลื่อนช้าๆ ใต้ชั้นสีชมพู */
.alh-hero--bg4 { background: var(--alh-pink); }
.alh-wall { position: absolute; inset: 0; z-index: -2; display: grid; align-content: center; gap: 14px; opacity: .55; filter: grayscale(.2); }
.alh-hero--bg4::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg, rgb(255 45 149 / .86), rgb(230 0 126 / .78) 55%, rgb(168 18 143 / .86)); }
.alh-wall__row { overflow: hidden; }
.alh-wall__track { display: flex; gap: 14px; width: max-content; animation: alh-slide 70s linear infinite; }
.alh-wall__row--1 .alh-wall__track { animation-direction: reverse; animation-duration: 85s; }
.alh .alh-wall__img { display: block; width: 150px; height: 190px; object-fit: cover; border-radius: 16px; }
@keyframes alh-slide { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .alh-hero--bg1, .alh-hero--bg2 .alh-hero__deco, .alh-sky i, .alh-wall__track { animation: none !important; }
  .alh-sky { display: none; }
}

/* =====================================================================
   เสียงจากศิษย์เก่า (testimonial) — ซ้าย: หัวข้อ+ปุ่ม (ค้างตอนเลื่อน) · ขวา: การ์ดคำพูดซ้อนลงมา — 22 ต.ค. 2026
   ===================================================================== */
.alh-voice { padding-bottom: 88px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
.alh-voice__intro { position: sticky; top: 120px; display: grid; gap: 14px; justify-items: start; padding-top: 18px; }
.alh p.alh-voice__eyebrow { margin: 0; padding: 4px 14px; border-radius: 999px; background: #fff1c1; color: #b35a00; font: 600 14px/1.4 var(--alh-body); letter-spacing: .04em; }
.alh h2.alh-voice__title { margin: 0; font: 700 clamp(34px, 4vw, 48px)/1.1 var(--alh-head); color: var(--alh-ink); text-wrap: balance; }
.alh-voice__title span { color: var(--alh-pink); }
.alh p.alh-voice__lead { margin: 0; font: 400 17px/1.6 var(--alh-body); color: var(--alh-mute); max-width: 34ch; }
.alh .alh-btn--line { gap: 10px; background: #fff; color: var(--alh-pink); border: 2px solid #ffd0ea; min-height: 46px; padding: 8px 10px 8px 22px; }
.alh .alh-btn--line span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--alh-pink); color: #fff; font-size: 16px; }
.alh .alh-btn--line:hover { border-color: var(--alh-pink); }
.alh p.alh-voice__note { margin: 6px 0 0; padding: 10px 14px; border-radius: 12px; background: #fff7d6; border: 1px dashed #e0b400; font-size: 14px; color: #6b5300; }

.alh-voice__list { display: grid; gap: 18px; }
.alh-voice__card { position: relative; margin: 0; padding: 22px 26px 20px; border-radius: 20px; background: linear-gradient(160deg, #fff 0%, #fbf3ff 100%); border: 1px solid #efe1fb; box-shadow: 0 8px 22px rgb(91 42 134 / .08); }
.alh-voice__card.is-demo { opacity: .75; border-style: dashed; }
/* ดาว: เอาออกแล้ว 22 ต.ค. 2026 (ผู้ใช้สั่ง) */
.alh blockquote.alh-voice__quote { margin: 0 0 16px; padding: 0; border: 0; font: italic 400 16px/1.65 var(--alh-body); color: var(--alh-ink); }
.alh-voice__who { display: flex; align-items: center; gap: 12px; }
.alh .alh-voice__avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: 0 0 46px; }
.alh-voice__avatar--none { display: grid; place-items: center; background: var(--alh-pink); color: #fff; font: 700 20px/1 var(--alh-head); }
.alh-voice__name { display: block; font: 600 16px/1.3 "Noto Sans Thai", sans-serif; color: var(--alh-ink); }
.alh-voice__role { display: block; font: 400 14px/1.4 var(--alh-body); color: var(--alh-mute); }
.alh-voice__mark { position: absolute; right: 22px; bottom: 6px; font: 700 72px/1 Georgia, serif; color: #f1d7f7; pointer-events: none; }

@media (max-width: 900px) {
  .alh-voice { grid-template-columns: 1fr; gap: 24px; }
  .alh-voice__intro { position: static; padding-top: 0; }
}
@media (max-width: 767px) {
  .alh-voice__card { padding: 18px 18px 16px; }
  .alh-voice__mark { font-size: 56px; right: 14px; }
}

/* เสียงศิษย์เก่า: พื้นหลังไล่สีเต็มจอ ขาว -> ชมพูอ่อน -> ม่วงอ่อน (ผู้ใช้ขอ 22 ต.ค. 2026) */
.alh-voice { position: relative; isolation: isolate; margin-top: 56px; padding-top: 72px; }
.alh-voice::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  background:
    radial-gradient(60% 70% at 85% 20%, rgb(255 95 176 / .22), transparent 70%),
    radial-gradient(50% 60% at 10% 90%, rgb(168 18 143 / .14), transparent 70%),
    linear-gradient(180deg, #fff 0%, #fff3fa 38%, #f6ecff 100%);
}
.alh { overflow-x: clip; }   /* กันพื้นหลัง 100vw ทำให้หน้าเลื่อนข้างได้ */
.alh-voice__card { background: linear-gradient(160deg, rgb(255 255 255 / .96) 0%, rgb(255 255 255 / .82) 100%); backdrop-filter: blur(2px); }
@media (max-width: 767px) { .alh-voice { margin-top: 40px; padding-top: 48px; } }

/* =====================================================================
   ศิษย์เก่าแต่ละคณะ — แท็บซ้าย (ข่าวจาก API เว็บคณะ) · มือถือ: แท็บเป็นแถวเลื่อนข้างด้านบน — 22 ต.ค. 2026
   ===================================================================== */
.alh-ftab { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 28px; align-items: start; }
.alh-ftab__list { position: sticky; top: 120px; display: grid; gap: 6px; padding: 10px; border-radius: 20px; background: var(--alh-soft); border: 1px solid var(--alh-line); }
.alh .alh-ftab__tab {
  display: block; width: 100%; padding: 11px 16px; border: 0; border-radius: 12px; background: transparent; text-align: left; cursor: pointer;
  font: 500 15px/1.35 "Noto Sans Thai", sans-serif; color: var(--alh-ink); transition: background-color .15s, color .15s;
}
.alh .alh-ftab__tab:hover { background: #ffe6f3; color: var(--alh-pink); }
.alh .alh-ftab__tab[aria-selected="true"] { background: var(--alh-pink); color: #fff; font-weight: 600; box-shadow: 0 6px 14px rgb(230 0 126 / .25); }
.alh .alh-ftab__tab:focus-visible { outline: 3px solid var(--alh-yellow); outline-offset: 2px; }
.alh-ftab__panel { min-height: 320px; }
.alh-ftab__panel:focus-visible { outline: 3px solid var(--alh-yellow); outline-offset: 4px; border-radius: 16px; }
.alh-ftab__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.alh p.alh-ftab__more { margin: 20px 0 0; }
.alh p.alh-ftab__loading, .alh p.alh-ftab__empty { margin: 0; padding: 60px 20px; text-align: center; color: var(--alh-mute); border-radius: 18px; background: var(--alh-soft); }

@media (max-width: 900px) {
  .alh-ftab { grid-template-columns: 1fr; gap: 16px; }
  .alh-ftab__list { position: static; display: flex; gap: 8px; overflow-x: auto; padding: 6px; scrollbar-width: none; scroll-snap-type: x proximity; }
  .alh-ftab__list::-webkit-scrollbar { display: none; }
  .alh .alh-ftab__tab { flex: 0 0 auto; width: auto; white-space: nowrap; padding: 9px 16px; border-radius: 999px; scroll-snap-align: start; }
}
@media (max-width: 600px) { .alh-ftab__grid { grid-template-columns: 1fr; gap: 14px; } }

/* ศิษย์เก่าแต่ละคณะ: หัวข้อชิดซ้าย ตรงแนวแท็บ (ผู้ใช้สั่ง 22 ต.ค. 2026) */
.alh-sec--fac .alh-sec__head { text-align: left; justify-items: start; }

/* แท็บคณะ: รูปตามสัดส่วนจริง + masonry (ผู้ใช้สั่ง 22 ต.ค. 2026) */
.alh-ftab__grid { --alh-gap: 18px; }
.alh-ftab .alh-news__pic { aspect-ratio: auto; }
.alh .alh-ftab .alh-news__pic img { height: auto; }
.alh-ftab__grid.is-masonry { grid-auto-rows: 4px; row-gap: 0; column-gap: var(--alh-gap); }
.alh-ftab__grid.is-masonry > .alh-news__card { align-self: start; }
@media (max-width: 600px) { .alh-ftab__grid { --alh-gap: 14px; } }

/* ศิษย์เก่าแต่ละคณะ: พื้นหลังเต็มจอ ไล่จากดำ -> ชมพูบางๆ (ผู้ใช้ขอ 22 ต.ค. 2026)
   ปลายล่างสีเดียวกับต้น section เสียงศิษย์เก่า ต่อกันไม่มีรอย · แท็บเป็นการ์ดขาวทึบ อ่านได้ทั้งช่วงมืดและสว่าง */
.alh-sec--fac { position: relative; isolation: isolate; margin-top: 72px; padding-top: 80px; padding-bottom: 72px; }
.alh-sec--fac::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  background:
    radial-gradient(45% 38% at 88% 6%, rgb(255 45 149 / .30), transparent 70%),
    radial-gradient(40% 30% at 6% 30%, rgb(168 18 143 / .28), transparent 70%),
    linear-gradient(180deg, #120b10 0%, #1f0d19 22%, #4a0f33 42%, #b54a86 62%, #f3c6de 80%, #fff3fa 100%);
}
.alh-sec--fac h2.alh-sec__title { color: var(--alh-hot2); }
.alh-sec--fac p.alh-sec__sub { color: rgb(255 255 255 / .74); }
.alh-sec--fac .alh-ftab__list { background: #fff; border-color: rgb(255 255 255 / .6); box-shadow: 0 14px 34px rgb(0 0 0 / .28); }
.alh-sec--fac .alh-news__card { border-color: rgb(255 255 255 / .5); box-shadow: 0 10px 26px rgb(0 0 0 / .22); }
.alh-sec--fac p.alh-ftab__loading, .alh-sec--fac p.alh-ftab__empty { background: rgb(255 255 255 / .92); }
.alh-voice { margin-top: 0; }
.alh-voice::before { background:
    radial-gradient(60% 70% at 85% 20%, rgb(255 95 176 / .22), transparent 70%),
    radial-gradient(50% 60% at 10% 90%, rgb(168 18 143 / .14), transparent 70%),
    linear-gradient(180deg, #fff3fa 0%, #fff3fa 38%, #f6ecff 100%); }
@media (max-width: 767px) { .alh-sec--fac { margin-top: 48px; padding-top: 56px; padding-bottom: 48px; } .alh-voice { margin-top: 0; } }

/* แท็บคณะ: ไม่ต้องตามติดตอนเลื่อน (ผู้ใช้สั่ง 22 ต.ค. 2026) */
.alh-sec--fac .alh-ftab__list { position: static; }
/* เสียงศิษย์เก่า: เลื่อนแสงชมพูลงจากขอบบน ไม่ให้เห็นรอยต่อกับ section คณะ (มือถือเห็นชัด) */
.alh-voice::before { background:
    radial-gradient(60% 55% at 85% 50%, rgb(255 95 176 / .20), transparent 70%),
    radial-gradient(50% 50% at 10% 92%, rgb(168 18 143 / .14), transparent 70%),
    linear-gradient(180deg, #fff3fa 0%, #fff3fa 30%, #f6ecff 100%); }

/* หน้าค้นหา / 404 (templates/search.php, 404.php) */
.alh .alh-empty a { color: var(--alh-pink); text-decoration: underline; text-underline-offset: 3px; }
.alh--404 .alh-sec--arch { max-width: 720px; padding-bottom: 72px; }
.alh--404 .alh-filter { margin: 0; }