/* ============================================================
   1) พื้นฐานของเว็บไซต์
   ============================================================ */

/* ภาพซูมเข้าตอน hover */
.col-scalebox {
  overflow: hidden;
  position: relative;
}
.img-fluidScale {
  max-width: 100%;
  height: auto;
  transform: scale(1);
  transition: transform 1s ease;
}
.img-fluidScale:hover { transform: scale(1.08); }

/* โลโก้ */
#dnn_dnnLOGO_imgLogo { max-width: 500px; }

/* ฟอนต์ swuop (ใช้ https อย่างเดียว เบราว์เซอร์โหลดจาก https ได้ทุกกรณี) */
@font-face {
  font-family: swuop;
  src: url(https://erp.op.swu.ac.th/Portals/23/CSS/Srinakharinwirot-Regular.ttf);
}

/* ข่าว EasyDNNnews (Ozone) ใช้ฟอนต์ swuop */
.eds_news_Ozone.eds_style_custom_swkvfqgdhvi.eds_subCollection_contentBlock .edn__contentBlock_itemList > li,
.eds_news_Ozone.eds_subCollection_contentBlock .edn_verticalList .edn__contentBlock_itemList.edn__contentBlock_visibleItemList > li,
.eds_news_Ozone.eds_subCollection_contentBlock.edn__contentBlock_pageReady .edn_mainWrapper article figure > a,
.eds_news_Ozone.eds_subCollection_contentBlock.edn__contentBlock_pageReady .edn_mainWrapper article h2 > a {
  font-family: swuop;
}

.eds_floatingMenuStyle1 > ul > li::before { background-color: black; }

/* ตัวปรับสีทั้งหน้า (เช่น ไว้อาลัย: เปลี่ยน grayscale(0%) เป็น grayscale(100%)) */
:root { filter: grayscale(0%) brightness(1) contrast(1); }

/* ริบบิ้นมุมซ้ายบน */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 225px;
  height: 100px;
  background-image: url('/Portals/23/Images/ribbon.png?ver=Xl1IzJ7XIdjsDRYiO3RP0A%3d%3d');
  background-repeat: no-repeat;
  background-position: top left;
  background-size: contain;
  z-index: 999999;
  pointer-events: none;
}


/* ============================================================
   2) แบนเนอร์สไลด์ #carouselExampleControls
      แบบ: ปุ่มลูกศร+เลขลำดับมุมล่างขวา / กรอบมินิมอล / ภาพสั่นแยกสีเบา ๆ
   ============================================================ */

/* ขนาดและการครอปภาพ (ซ้ำกับ <style> ในโมดูลแบนเนอร์ จะลบอันนั้นทิ้งก็ได้) */
#carouselExampleControls .carousel-item {
  aspect-ratio: 2048 / 672;
  overflow: hidden;
  background: #f2f2f2;
}
#carouselExampleControls .carousel-item img.edsBB__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
#carouselExampleControls .carousel-item a {
  display: block;
  width: 100%;
  height: 100%;
}

/* ----- กรอบแบบมินิมอล (J) ----- */
#carouselExampleControls {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(67, 10, 28, .14);
}
#carouselExampleControls .carousel-item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .45);
  pointer-events: none;
}

/* ----- ภาพสั่นแยกสีเบา ๆ ตอนเปลี่ยนสไลด์ (L) ----- */
#carouselExampleControls .carousel-item.active img.edsBB__image {
  animation: swu-glitch-lite .6s steps(1, end) 1;
}
@keyframes swu-glitch-lite {
  0%   { transform: translateX(-9px) skewX(-2deg)  scale(1.05); filter: hue-rotate(-35deg) saturate(1.8) contrast(1.15); }
  20%  { transform: translateX(8px)   skewX(1.5deg) scale(1.05); filter: hue-rotate(40deg)  saturate(1.7) brightness(1.1); }
  40%  { transform: translateX(-5px)               scale(1.05); filter: hue-rotate(-20deg) saturate(1.4); }
  60%  { transform: translateX(3px)                scale(1.03); filter: hue-rotate(15deg)  saturate(1.2); }
  80%  { transform: translateX(-1px)               scale(1.01); filter: none; }
  100% { transform: none;                                      filter: none; }
}

/* ----- ปุ่มลูกศร + เลขลำดับรวมเป็นแท่งแก้วมุมล่างขวา (I) ----- */
#carouselExampleControls .carousel-inner { counter-reset: swu-slide; }
#carouselExampleControls .carousel-item  { counter-increment: swu-slide; }

#carouselExampleControls .carousel-control-prev,
#carouselExampleControls .carousel-control-next {
  top: auto;
  bottom: 14px;
  width: 38px;
  height: 38px;
  opacity: 1;
  background: rgba(20, 10, 16, .45);
  border: 1px solid rgba(255, 255, 255, .28);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background .25s;
}
#carouselExampleControls .carousel-control-prev { left: auto; right: 62px; border-radius: 999px 0 0 999px; border-right: 0; }
#carouselExampleControls .carousel-control-next { right: 24px; border-radius: 0 999px 999px 0; }
#carouselExampleControls .carousel-control-prev:hover,
#carouselExampleControls .carousel-control-next:hover { background: rgba(122, 18, 48, .85); }
#carouselExampleControls .carousel-control-prev-icon,
#carouselExampleControls .carousel-control-next-icon { width: 14px; height: 14px; }

#carouselExampleControls .carousel-item.active::before {
  content: counter(swu-slide, decimal-leading-zero);
  position: absolute;
  right: 110px;
  bottom: 14px;
  z-index: 4;
  height: 38px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  font: 800 12px/1 "Nunito", sans-serif;
  letter-spacing: 2px;
  color: #fff;
  background: rgba(20, 10, 16, .45);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  #carouselExampleControls .carousel-item.active img.edsBB__image { animation: none; }
}


/* ============================================================
   3) หน้าเมนูลิงก์ (.swu-links)
   ============================================================ */

.swu-links {
    /* ===== ค่าที่ปรับบ่อย (แก้ตรงนี้ที่เดียว) ===== */
    --c-admin: #7a1230;
    --c-doc: #3c4a7a;
    --c-people: #2f6f62;
    --c-finance: #c98a12;
    --c-health: #c1552c;
    --c-tech: #6b3fa0;
    --ink: #241b16;
    --bg: #fff;                          /* พื้นหลังกล่องเมนู */
    --card: #fff;                        /* พื้นหลังการ์ด */
    --line: rgba(122, 18, 48, .06);      /* เส้นขอบการ์ด */
    --line-strong: rgba(122, 18, 48, .22);
    --muted: #7a6d64;                    /* ตัวอักษรรอง */
    --tilt: -25deg;                      /* องศาเอียงโทรโข่ง (ติดลบ = ปากขึ้น) */
    --b: 44px;                           /* ขนาดกรอบไอคอน */
    --s: 26px;                           /* ขนาดไอคอน */
    --cols: 6;                           /* จำนวนคอลัมน์ */
    --gap: 14px;
    --grid-pad: 34px 26px;
    --card-pad: 20px 8px 14px;
    --label: clamp(16px, 1.2vw, 20px);
    --new: 10px;                         /* ขนาดป้าย NEW */
    --ease: cubic-bezier(.22, .9, .32, 1);

    max-width: 1120px;
    margin: 0 auto;
    font-family: "Dosis", "Sarabun", sans-serif;
    color: var(--ink);
    font-weight: 500;
    background: var(--bg);
    border-radius: 22px;
    box-shadow: 0 20px 50px rgba(67, 10, 28, .14);

    & *, & *::before, & *::after { box-sizing: border-box; }

    /* ปรับตามขนาดจอ: แก้แค่ตัวแปร */
    @media (max-width: 900px) {
      --b: 38px; --s: 24px; --cols: 4; --gap: 10px;
      --grid-pad: 20px 16px 24px; --card-pad: 14px 6px 12px;
      --label: 13px; --new: 9px;
    }
    @media (max-width: 560px) {
      --b: 36px; --s: 22px; --cols: 3; --gap: 8px;
      --grid-pad: 16px 12px 20px; --card-pad: 12px 4px 10px;
      --label: 12px; --new: 8.5px;
    }
  }

  .swu-sr {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }

  .swu-links__grid {
    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    gap: var(--gap);
  }

  /* ===== การ์ด ===== */
  .swu-card {
    --accent: var(--c-admin);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--gap) * .5);
    padding: var(--card-pad);
    text-align: center;
    text-decoration: none;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 2px 5px rgba(43, 20, 10, .05), 0 8px 18px rgba(43, 20, 10, .04);
    transition: transform .38s var(--ease), box-shadow .38s var(--ease), border-color .38s;

    &:hover, &:focus-visible {
      will-change: transform, box-shadow;
      transform: scale(1.14);
      z-index: 5;
      border-color: color-mix(in srgb, var(--accent) 35%, transparent);
      box-shadow: 0 12px 22px color-mix(in srgb, var(--accent) 26%, transparent),
                  0 22px 38px color-mix(in srgb, var(--accent) 16%, transparent);
    }
    &:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  }

  .swu-card__badge {
    width: var(--b);
    height: var(--b);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .38s var(--ease);

    & i { font-size: var(--s); color: var(--accent); }
  }
  .swu-card:hover .swu-card__badge { transform: scale(1.08); }

  .swu-card__label {
    font: 800 var(--label)/1.3 "Nunito", "Sarabun", sans-serif;
    overflow-wrap: anywhere;
  }

  /* ป้าย NEW */
  .swu-card__new {
    position: absolute;
    top: -6px;
    left: -6px;
    z-index: 2;
    padding: 1px 7px;
    font: 900 var(--new)/1.4 "Nunito", sans-serif;
    letter-spacing: .5px;
    color: #fff;
    background: linear-gradient(135deg, #ff5a3c, #e0262f);
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(224, 38, 47, .45);
    pointer-events: none;
    animation: swu-new-pulse 1.8s ease-in-out infinite;
  }

  /* ===== SWU Royal: มงกุฎทองเรืองแสง ===== */
  .swu-card--royal .swu-card__badge i {
    color: #d4af37;
    filter: drop-shadow(0 0 3px rgba(255, 215, 0, .65)) drop-shadow(0 0 6px rgba(255, 223, 100, .45));
    animation: royal-glow 2s ease-in-out infinite;
  }

  /* ===== โทรโข่ง: เอียงปากขึ้น + คลื่นเสียงตอน hover ===== */
  .swu-card--horn {
    & .swu-card__badge { position: relative; transform: rotate(var(--tilt)); }
    &:hover .swu-card__badge { transform: rotate(var(--tilt)) scale(1.08); }

    /* ตำแหน่ง/ขนาดคลื่นคำนวณจาก --b และ --s จึงปรับตามจออัตโนมัติ */
    & .swu-card__badge::before,
    & .swu-card__badge::after {
      content: "";
      position: absolute;
      top: 50%;
      left: calc(var(--b) / 2 + var(--s) / 2 + var(--o));
      width: calc(var(--s) * .3 * var(--k));
      height: calc(var(--s) * .62 * var(--k));
      margin-top: calc(var(--s) * -.31 * var(--k));
      border-right: 2.5px solid var(--accent);
      border-radius: 0 100% 100% 0 / 0 50% 50% 0;
      opacity: 0;
      transform-origin: left center;
      pointer-events: none;
    }
    & .swu-card__badge::before { --o: 2px; --k: 1; }
    & .swu-card__badge::after  { --o: 7px; --k: 1.7; }

    &:hover .swu-card__badge::before { animation: horn-wave 1s ease-out infinite; }
    &:hover .swu-card__badge::after  { animation: horn-wave 1s ease-out .25s infinite; }
  }

  /* ===== แอนิเมชัน ===== */
  @keyframes swu-new-pulse { 50% { transform: scale(1.1); } }

  @keyframes royal-glow {
    0%, 100% { filter: drop-shadow(0 0 2px rgba(255, 215, 0, .4)); }
    50%      { filter: drop-shadow(0 0 5px rgba(255, 215, 0, .9)) drop-shadow(0 0 10px rgba(255, 223, 100, .7)); }
  }

  @keyframes horn-wave {
    0%   { opacity: 0; transform: translateX(-4px) scale(.7); }
    30%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(7px) scale(1.1); }
  }

  /* ผู้ใช้ที่ปิดแอนิเมชันในระบบ */
  @media (prefers-reduced-motion: reduce) {
    .swu-links *, .swu-links *::before, .swu-links *::after {
      transition: none !important;
      animation: none !important;
    }
    .swu-card--horn:hover .swu-card__badge::before,
    .swu-card--horn:hover .swu-card__badge::after { opacity: 1; }
  }


/* ===== โครงหน้า: ช่องค้นหา / หัวข้อกลุ่ม / การ์ดในกล่อง .swu-item ===== */
.swu-links [hidden] { display: none !important; }

.swu-links__body {
  padding: var(--grid-pad);
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap) * 2);
}

.swu-search {
  position: relative;
  display: block;
  max-width: 380px;

  & i {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--muted);
    pointer-events: none;
  }
  & input {
    width: 100%;
    padding: 10px 16px 10px 40px;
    font: 500 15px/1.4 "Dosis", "Sarabun", sans-serif;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    transition: border-color .25s, box-shadow .25s;

    &::placeholder { color: var(--muted); }
    &:focus {
      outline: none;
      border-color: var(--c-admin);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-admin) 22%, transparent);
    }
  }
}

.swu-group__title {
  margin: 0 0 calc(var(--gap) * .9);
  padding-left: 10px;
  font: 800 15px/1.2 "Nunito", "Sarabun", sans-serif;
  letter-spacing: .3px;
  color: var(--muted);
  border-left: 3px solid var(--c-admin);
}

.swu-item {
  position: relative;
  display: flex;

  & > .swu-card { width: 100%; }
}

/* ผลย่อการ์ดข้างเคียงตอน hover */
.swu-item:has(.swu-card:hover) + .swu-item .swu-card { transform: scale(.96) translateX(4px); }
.swu-item:has(+ .swu-item .swu-card:hover) .swu-card { transform: scale(.96) translateX(-4px); }

/* ปุ่มปักหมุด */
.swu-pin {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 8;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 13px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s, color .2s, background .2s;

  &:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
  &:focus-visible { outline: 2px solid var(--c-admin); outline-offset: 1px; }
  &[aria-pressed="true"] { opacity: 1; color: #d4a017; }
}
.swu-item:hover .swu-pin,
.swu-item:focus-within .swu-pin { opacity: 1; }
@media (hover: none) {
  .swu-pin { opacity: .55; }
  .swu-pin[aria-pressed="true"] { opacity: 1; }
}

.swu-empty {
  margin: 0;
  padding: 24px 0;
  text-align: center;
  color: var(--muted);
}

/* ===== Dark mode =====
   เปิดใช้โดยใส่ data-theme="dark" (มืดเสมอ) หรือ data-theme="auto" (ตามการตั้งค่าเครื่อง)
   ที่ <div class="swu-links"> ค่าเริ่มต้น "light" = สว่างเหมือนเดิม */
.swu-links[data-theme="dark"] {
  --bg: #17110f;
  --card: #221a17;
  --ink: #f3ebe6;
  --muted: #b3a59b;
  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .22);
  --c-admin: #e07a96;
  --c-doc: #8fa3e0;
  --c-people: #5fc2ad;
  --c-finance: #e3b04a;
  --c-health: #ef8a62;
  --c-tech: #b48ae3;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
}
@media (prefers-color-scheme: dark) {
  .swu-links[data-theme="auto"] {
    --bg: #17110f;
    --card: #221a17;
    --ink: #f3ebe6;
    --muted: #b3a59b;
    --line: rgba(255, 255, 255, .08);
    --line-strong: rgba(255, 255, 255, .22);
    --c-admin: #e07a96;
    --c-doc: #8fa3e0;
    --c-people: #5fc2ad;
    --c-finance: #e3b04a;
    --c-health: #ef8a62;
    --c-tech: #b48ae3;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
  }
}


/* ===== รองรับ HTML แบบเก่า (การ์ดอยู่ใน .swu-links__grid โดยตรง ไม่มี .swu-links__body / .swu-item) =====
   ถ้าใช้ HTML แบบใหม่ที่มีช่องค้นหา/กลุ่ม/ปักหมุด บล็อกนี้ไม่มีผลอะไร */
.swu-links > .swu-links__grid { padding: var(--grid-pad); }
.swu-links__grid > .swu-card:hover + .swu-card      { transform: scale(.96) translateX(4px); }
.swu-links__grid > .swu-card:has(+ .swu-card:hover) { transform: scale(.96) translateX(-4px); }


/* ============================================================
   4) เอฟเฟกต์ไอคอนของการ์ดเมนู (ตอน hover)
   ============================================================ */

/* ---------- M-Transfer: ลูกศรซ้าย-ขวาวิ่งสลับกัน ----------
   ใช้ลูกศร 2 ตัวแยกกัน (บน = ไปขวา, ล่าง = ไปซ้าย) ให้ขยับสวนกันเท่ากัน */
.swu-card .fa-right-left {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
}

.swu-card .fa-right-left::before,
.swu-card .fa-right-left::after {
  position: absolute;
  left: .2em;                 /* จัดให้อยู่กึ่งกลางกรอบ */
  font-size: .6em;            /* ขนาดลูกศรเทียบกับไอคอนเดิม */
  line-height: 1;
}
.swu-card .fa-right-left::before { content: "\f061"; top: .02em;    }   /* ลูกศรขวา */
.swu-card .fa-right-left::after  { content: "\f060"; bottom: .02em; }   /* ลูกศรซ้าย */

.swu-card:hover .fa-right-left::before { animation: swu-run-right .6s ease-in-out infinite alternate; }
.swu-card:hover .fa-right-left::after  { animation: swu-run-left  .6s ease-in-out infinite alternate; }

@keyframes swu-run-right { from { transform: translateX(-.22em); } to { transform: translateX(.22em); } }
@keyframes swu-run-left  { from { transform: translateX(.22em); }  to { transform: translateX(-.22em); } }


/* ---------- IT Services: แสงสีฟ้าเบา ๆ ---------- */
.swu-card .fa-microchip { position: relative; z-index: 1; transition: filter .4s; }

.swu-card:has(.fa-microchip) .swu-card__badge { position: relative; }
.swu-card:has(.fa-microchip) .swu-card__badge::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, .45) 0%, rgba(56, 189, 248, 0) 70%);
  opacity: 0;
  transition: opacity .4s;
}

.swu-card:hover .fa-microchip { filter: drop-shadow(0 0 5px rgba(56, 189, 248, .85)); }
.swu-card:hover:has(.fa-microchip) .swu-card__badge::before {
  opacity: 1;
  animation: swu-blue-glow 1.6s ease-in-out infinite;
}

@keyframes swu-blue-glow {
  50% { transform: scale(1.18); opacity: .6; }
}


/* ---------- Budget: เหรียญเด้งขึ้น ---------- */
.swu-card:has(.fa-sack-dollar) .swu-card__badge { position: relative; }

.swu-card:has(.fa-sack-dollar) .swu-card__badge::before,
.swu-card:has(.fa-sack-dollar) .swu-card__badge::after {
  content: "$";
  position: absolute;
  top: 0;
  left: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  display: grid;
  place-items: center;
  font: 900 8px/1 "Nunito", sans-serif;
  color: #8a5a00;
  background: radial-gradient(circle at 35% 30%, #fff3b0, #f2c230 60%, #c98a12);
  border: 1px solid #b8860b;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.swu-card:has(.fa-sack-dollar) .swu-card__badge::before { margin-left: -12px; }
.swu-card:has(.fa-sack-dollar) .swu-card__badge::after  { margin-left: 1px; }

.swu-card:hover:has(.fa-sack-dollar) .swu-card__badge::before { animation: swu-coin-pop 1.1s ease-out infinite; }
.swu-card:hover:has(.fa-sack-dollar) .swu-card__badge::after  { animation: swu-coin-pop 1.1s ease-out .45s infinite; }

@keyframes swu-coin-pop {
  0%   { opacity: 0; transform: translateY(8px)   scale(.4); }
  35%  { opacity: 1; transform: translateY(-12px) scale(1); }
  55%  { opacity: 1; transform: translateY(-7px)  scale(1); }
  100% { opacity: 0; transform: translateY(-2px)  scale(.9); }
}


/* ============================================================
   เอฟเฟกต์ไอคอนตอน hover (ขยับตัวไอคอนอย่างเดียว)
   ============================================================ */

/* ---------- Health Care: หัวใจเต้นตุบ-ตุบ แล้วหยุดพัก ---------- */
.swu-card:hover .fa-heart-pulse {
  animation: swu-heartbeat 1.2s ease-in-out infinite;
}
@keyframes swu-heartbeat {
  0%, 56%, 100% { transform: scale(1); }
  14%           { transform: scale(1.25); }
  28%           { transform: scale(1); }
  42%           { transform: scale(1.18); }
}

/* ---------- Welfare: หัวใจเต้นเบา ๆ ช้ากว่า ---------- */
.swu-card:hover .fa-heart-circle-check {
  animation: swu-heartbeat-soft 1.8s ease-in-out infinite;
}
@keyframes swu-heartbeat-soft {
  0%, 60%, 100% { transform: scale(1); }
  15%           { transform: scale(1.14); }
  30%           { transform: scale(1); }
  45%           { transform: scale(1.1); }
}

/* ---------- Loanwelfare: ลอยขึ้นลงช้า ๆ เหมือนประคอง ---------- */
.swu-card:hover .fa-hand-holding-heart {
  animation: swu-float 1.4s ease-in-out infinite alternate;
}
@keyframes swu-float {
  from { transform: translateY(1px); }
  to   { transform: translateY(-4px); }
}

/* ---------- Dashboard: เข็มวัดแกว่งซ้ายขวา ---------- */
.swu-card:hover .fa-gauge-high {
  transform-origin: 50% 60%;
  animation: swu-gauge-swing .5s ease-in-out infinite alternate;
}
@keyframes swu-gauge-swing {
  from { transform: rotate(-13deg); }
  to   { transform: rotate(13deg); }
}

/* ---------- Vaccine: เอียงแล้วจิ้มลง (ปลายเข็มอยู่ซ้ายล่าง) ---------- */
.swu-card:hover .fa-syringe {
  animation: swu-inject 1.2s ease-in-out infinite;
}
@keyframes swu-inject {
  0%, 100% { transform: none; }
  25%      { transform: rotate(-8deg); }
  45%, 65% { transform: rotate(-8deg) translate(-3px, 4px); }
  85%      { transform: rotate(-4deg); }
}

/* ---------- ESS: เด้งขึ้นพร้อมโบกเอียงทักทาย ---------- */
.swu-card:hover .fa-user {
  animation: swu-greet .9s ease-in-out infinite;
}
@keyframes swu-greet {
  0%, 100% { transform: none; }
  30%      { transform: translateY(-4px) rotate(-9deg); }
  60%      { transform: translateY(0) rotate(7deg); }
}

/* ---------- SSS Admin: เด้งแล้วหมุนเล็กน้อย ---------- */
.swu-card:hover .fa-face-smile {
  animation: swu-smile-bounce 1s ease-in-out infinite;
}
@keyframes swu-smile-bounce {
  0%, 100% { transform: none; }
  30%      { transform: translateY(-6px); }
  60%      { transform: translateY(0) rotate(-14deg); }
  80%      { transform: rotate(8deg); }
}

/* ---------- SLC: กระโดดโยนหมวก ---------- */
.swu-card:hover .fa-graduation-cap {
  animation: swu-cap-toss .9s ease-out infinite;
}
@keyframes swu-cap-toss {
  0%, 100% { transform: none; }
  30%      { transform: translateY(-8px) rotate(-14deg); }
  60%      { transform: translateY(-3px) rotate(8deg); }
}


/* ============================================================
   5) ตัวเลขสถิติแบบ Flip Clock (.swu-stats)
      ใช้คู่กับสคริปต์ใน Page Header Tags — สคริปต์จะเติมคลาส .swu-stats / .swu-stat ให้เอง
      ปรับขนาดตัวเลขที่ .swu-stat__num และขนาดข้อความใต้ตัวเลขที่ .swu-stat__label
   ============================================================ */

/* ---------- กรอบรวม: 4 คอลัมน์เท่ากัน สูงเท่ากัน ไม่มีพื้นหลัง ---------- */
.swu-stats.row {
  --swu-fg: #1f2937;
  --swu-accent: #0ea5e9;
  --swu-accent2: #8b5cf6;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 20px;
  margin: 0;
  padding: 8px 0;
  background: none;
  color: var(--swu-fg);
}
.swu-stats.row::before, .swu-stats.row::after { content: none; display: none; }
.swu-stats *, .swu-stats *::before, .swu-stats *::after { box-sizing: border-box; }

/* ---------- การ์ด (คือ .col-md-3 เดิม) ---------- */
.swu-stats .swu-stat {
  position: relative;
  float: none; flex: none;
  width: auto; max-width: none; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 14px;
  margin: 0;
  padding: 28px 12px 24px;
  text-align: center;
  background: transparent;
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 16px;
  box-shadow: none;
  transition: transform .35s cubic-bezier(.22, .9, .32, 1), box-shadow .35s, border-color .35s;
}
.swu-stats .swu-stat::before {
  content: "";
  position: absolute; top: -1px; left: 15%; right: 15%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--swu-accent), var(--swu-accent2), transparent);
}
.swu-stats .swu-stat:hover {
  transform: translateY(-4px);
  border-color: rgba(14, 165, 233, .45);
  box-shadow: 0 12px 30px rgba(14, 165, 233, .16);
}

/* ขนาดตัวเลข (ปรับที่นี่) */
.swu-stats .swu-stat__num {
  display: block;
  font: 900 clamp(26px, 3.2vw, 42px)/1.2 "Nunito", "Sarabun", sans-serif;
  color: var(--swu-fg);
  min-height: 1.2em;
}
/* ขนาดข้อความใต้ตัวเลข (ปรับที่นี่) */
.swu-stats .swu-stat__label {
  margin: 0;
  font: 700 17px/1.35 "Sarabun", sans-serif;
  color: var(--swu-fg) !important;
}

/* ---------- Flip clock ---------- */
.swu-flips { display: inline-flex; align-items: center; justify-content: center; gap: .07em; }
.swu-flip__sep { padding: 0 .03em; font-weight: 900; }

.swu-flip {
  --dur: 80ms;
  position: relative;
  display: inline-block;
  width: .74em; height: 1.2em;
  perspective: 1.1em;
  color: #fff;
  font-weight: 900;
  text-shadow: 0 0 10px rgba(56, 189, 248, .45);
}
.swu-flip > span {
  position: absolute; left: 0; right: 0; height: 50%;
  overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.swu-flip b {
  position: absolute; left: 0; right: 0;
  height: 200%;
  font: inherit; line-height: 1.2em; text-align: center;
}
.swu-flip__t, .swu-flip__lt {
  top: 0;
  background: linear-gradient(180deg, #364152, #1f2937);
  border-radius: .12em .12em 0 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
.swu-flip__t b, .swu-flip__lt b { top: 0; }
.swu-flip__d, .swu-flip__ld {
  top: 50%;
  background: linear-gradient(180deg, #19212d, #111827);
  border-radius: 0 0 .12em .12em;
}
.swu-flip__d b, .swu-flip__ld b { top: -100%; }
.swu-flip::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 50%;
  height: 2px; margin-top: -1px;
  background: rgba(0, 0, 0, .55);
  z-index: 5;
}
.swu-flip__lt { z-index: 3; transform-origin: 50% 100%; }
.swu-flip__ld { z-index: 2; transform-origin: 50% 0; transform: rotateX(90deg); }
.swu-flip.is-flip .swu-flip__lt { animation: swu-flip-top calc(var(--dur) / 2) ease-in forwards; }
.swu-flip.is-flip .swu-flip__ld { animation: swu-flip-bot calc(var(--dur) / 2) ease-out calc(var(--dur) / 2) forwards; }
@keyframes swu-flip-top { from { transform: rotateX(0); }     to { transform: rotateX(-90deg); } }
@keyframes swu-flip-bot { from { transform: rotateX(90deg); } to { transform: rotateX(0); } }

@media (max-width: 900px) {
  .swu-stats.row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 560px) {
  .swu-stats .swu-stat { padding: 24px 8px 18px; }
  .swu-stats .swu-stat__label { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .swu-stats .swu-stat { transition: none; }
  .swu-stats .swu-stat:hover { transform: none; }
}