@font-face {
    font-family: 'sukhumvit_semibold';
    src: url('./../font/sukhumvitset-semibold-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
    margin-bottom: 20px;
    font-family: 'sukhumvit_semibold';
}

p, h1, h2, h3,h4,h5,h6,span {
    font-family: 'sukhumvit_semibold';
}

.font-bold {
    font-family: 'sukhumvit_bold';
}

#tb_StockInfo {
    display: none;
}

.ImgbgDIV {
    width: 150px;
    opacity: 0.7;
    z-index: 1;
}

.txtOnbg {
    z-index: 2;
    position: relative;
}

.QRCodeimg {
    height: 120px;
    max-height: 120px;
}

@keyframes heartbeat {
    0% {
        transform: scale(1);
    }

    14% {
        transform: scale(1.15);
    }

    28% {
        transform: scale(1);
    }

    42% {
        transform: scale(1.10);
    }

    56% {
        transform: scale(1);
    }

    100% {
        transform: scale(1);
    }
}

.heartbeat-text {
    display: inline-block;
    animation: heartbeat 1.4s ease-in-out infinite;
    transform-origin: center;
}

@keyframes electric {
    0%,100% {
        opacity: 1;
        text-shadow: 0 0 8px #00cfff, 0 0 16px #0099ff;
    }

    50% {
        opacity: .8;
        text-shadow: 0 0 14px #00cfff, 0 0 28px #0066ff, 0 0 40px #00cfff;
    }
}

@keyframes bolt {
    0%,100% {
        transform: scale(1) rotate(-5deg);
    }

    50% {
        transform: scale(1.2) rotate(5deg);
    }
}

@keyframes zap-bg {
    0%,100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.electric-th {
    position: relative;
    padding: 10px 8px !important;
    background: linear-gradient(270deg, #001a33, #003366, #0445a3, #003366, #001a33);
    background-size: 400% 400%;
    animation: zap-bg 3s ease infinite;
    overflow: hidden;
}

    .electric-th::after {
        content: '';
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(90deg, transparent, transparent 8px, rgba(0,200,255,.04) 8px, rgba(0,200,255,.04) 9px);
    }

.electric-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    position: relative;
    z-index: 1;
}

.bolt-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
}

.bolt {
    font-size: 1.1em;
    display: inline-block;
    animation: bolt .8s ease-in-out infinite;
    color: #00cfff;
}

.electric-text {
    font-size: .9em;
    font-weight: 700;
    letter-spacing: .06em;
    color: #00cfff;
    animation: electric 2s ease-in-out infinite;
}

.electric-badge {
    font-size: .6em;
    background: rgba(0,200,255,.15);
    border: 1px solid rgba(0,200,255,.4);
    border-radius: 20px;
    padding: 1px 8px;
    color: #7de8ff;
    letter-spacing: .1em;
}