/* =========================================
   สไตล์สำหรับ Footer SPU Library
   ========================================= */
.spu-serif { font-family: 'Kanit', sans-serif; font-weight: 600; }
.spu-mono { font-family: 'Kanit', sans-serif; letter-spacing: 0.04em; }

.spu-shelf {
  display: flex; align-items: flex-end; gap: 3px;
  height: 34px; overflow: hidden; padding: 0 4px;
}
.spu-shelf span {
  display: block; width: 9px; border-radius: 2px 2px 0 0;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
  transform: translateY(0);
}
.spu-shelf:hover span { transform: translateY(-5px); }
.spu-shelf span:nth-child(3n+1) { transition-delay: 0ms; }
.spu-shelf span:nth-child(3n+2) { transition-delay: 40ms; }
.spu-shelf span:nth-child(3n+3) { transition-delay: 80ms; }

.spu-link { color: #AEB4CC; transition: color .25s ease; }
.spu-link:hover { color: #F4EFE4; }
.spu-icon-badge {
  width: 32px; height: 32px; border-radius: 9999px; display: flex; align-items: center; justify-content: center;
  background: #171B2C; color: #E3B34C; flex-shrink: 0; border: 1px solid #232842;
}
.spu-social {
  width: 34px; height: 34px; border-radius: 9999px; display: flex; align-items: center; justify-content: center;
  background: #171B2C; color: #9199B8; border: 1px solid #232842; transition: all .25s ease;
}
.spu-social:hover { background: #EB008B; color: #fff; border-color: #EB008B; transform: translateY(-2px); }

.spu-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.spu-heading-icon {
  width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: #fff; font-size: 13px; box-shadow: 0 6px 14px -6px rgba(0,0,0,.5);
}
.spu-map-wrap {
  border: 1px solid #232842; border-radius: 14px; overflow: hidden; position: relative;
  box-shadow: 0 12px 30px -12px rgba(0,0,0,.6);
}
.spu-map-wrap::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(227, 179, 76, 0); transition: box-shadow .3s ease;
}
.spu-map-wrap:hover::after { box-shadow: inset 0 0 0 1px rgba(227, 179, 76, .5); }

.spu-directions {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #E3B34C;
  margin-top: 10px; transition: gap .2s ease;
}
.spu-directions:hover { gap: 10px; color: #f0c86b; }

#spu-top {
  width: 40px; height: 40px; border-radius: 9999px; background: #171B2C; border: 1px solid #232842;
  display: flex; align-items: center; justify-content: center; color: #9199B8; transition: all .25s ease;
}
#spu-top:hover { background: #E3B34C; color: #10131F; border-color: #E3B34C; }

@media (prefers-reduced-motion: reduce) {
  .spu-shelf span, .spu-social, .spu-directions, #spu-top { transition: none !important; }
}