

.texthuongdan {
    text-transform: uppercase;
    letter-spacing: 0.5em;
    display: inline-block;
    border: 4px double rgba(255, 255, 255, 0.25);
    border-width: 4px 0;
    padding: 1.5em 0em;
    position: absolute;
    top: 120%;
    left: 50%;
    width: 40em;
    margin: 0 0 0 -20em;
}

.texthuongdan span {
    font: 700 5vw "Oswald", sans-serif;
    letter-spacing: 0;
    padding: 0.25em 0 0.325em;
    display: block;
    margin: 0 auto;
    text-shadow: 0 0 80px rgba(255, 255, 255, 0.5);

    /* Clip Background Image */
    background: url(./assetbox/img/animated-text-fill.jpg) repeat-y;
    -webkit-background-clip: text;
    background-clip: text;

    /* Animate Background Image */
    -webkit-text-fill-color: transparent;
    -webkit-animation: aitf 80s linear infinite;

    /* Activate hardware acceleration for smoother animations */
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
}

/* Animate Background Image */
@-webkit-keyframes aitf {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}
/* wishing */
#wishing{
    enable-background:new 0 0 400 132;
    margin-top: 12px;
}
.st0{
    fill:none;
    stroke: #FFFFFF;
    stroke-width: 1.5;
    stroke-dasharray: 500;
    stroke-dashoffset: 0;
    animation-delay: 4s;
    animation: drawWish 7s linear;
}
@keyframes drawWish{
    from{
        fill: transparent;
        stroke-dashoffset: 500;
    }to{
        fill: #ffffff;
         stroke-dasharray: 0;
    }
}


  #wishing {
    opacity: 0; /* Ẩn ban đầu */
    transition: opacity 1s ease-in-out; /* Áp dụng hiệu ứng chuyển động trong 1 giây */
  }