.col-scalebox{
overflow:hidden;
position:relative;

}

.img-fluidScale:hover{
   -webkit-transition: all 1s;
    transition-duration: 1s;
    transition-timing-function: ease;
    transition-delay: 0s;
    transition-property: all;
    -webkit-transform: scale(1.08);
  -ms-transform: scale(1.08, 1.08); /* IE 9 */
  transform: scale(1.08, 1.08); 
}
.img-fluidScale{
    max-width:100%;
    height:auto;
   -webkit-transition: all 1s;
    transition-duration: 1s;
    transition-timing-function: ease;
    transition-delay: 0s;
    transition-property: all;
    -webkit-transform: scale(1);
  -ms-transform: scale(1, 1); /* IE 9 */
  transform: scale(1, 1); 
}


#dnn_dnnLOGO_imgLogo {
     max-width: 500px;
}

@font-face {
font-family:swuop;
src: url(https://erp.op.swu.ac.th/Portals/23/CSS/Srinakharinwirot-Regular.ttf);
}


.eds_news_Ozone.eds_style_custom_swkvfqgdhvi.eds_subCollection_contentBlock .edn__contentBlock_itemList > li {
    font-family:swuop;
    src: url(https://erp.op.swu.ac.th/Portals/23/CSS/Srinakharinwirot-Regular.ttf);
}

@font-face {
font-family:swuop;
src: url(http://erp.op.swu.ac.th/Portals/23/CSS/Srinakharinwirot-Regular.ttf);
}


.eds_news_Ozone.eds_style_custom_swkvfqgdhvi.eds_subCollection_contentBlock .edn__contentBlock_itemList > li {
    font-family:swuop;
    src: url(http://erp.op.swu.ac.th/Portals/23/CSS/Srinakharinwirot-Regular.ttf);
}

.eds_news_Ozone.eds_subCollection_contentBlock .edn_verticalList .edn__contentBlock_itemList.edn__contentBlock_visibleItemList > li {
    font-family: swuop;
}
.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 
}

: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;
}

/* ===== สำหรับหน้าเมนู ===== */

.swu-links {
    /* ===== ค่าที่ปรับบ่อย (แก้ตรงนี้ที่เดียว) ===== */
    --c-admin: #7a1230;
    --c-doc: #3c4a7a;
    --c-people: #2f6f62;
    --c-finance: #c98a12;
    --c-health: #c1552c;
    --c-tech: #6b3fa0;
    --ink: #241b16;
    --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;
    font-weight: 500;
    background: #fff;
    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);
    padding: var(--grid-pad);
  }

  /* ===== การ์ด ===== */
  .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: #fff;
    border: 1px solid rgba(122, 18, 48, .06);
    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; }

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

  .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", 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; }
  }
/* ---------- 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); }
}