@push('style')
  <style>
    @keyframes rotate {
      100% {
        transform: rotate(360deg)
      }
    }

    .organiaLoader {
      max-width: 600px;
      height: 300px;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      margin: auto
    }

    /* .organiaLoader:after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: .7;
        animation: rotate 15s infinite linear
      } */

    .loaderO {
      position: absolute;
      top: 35%;
      left: 0;
      right: 0;
      margin: 0 auto;
      transform: translateY(-50%);
      z-index: 1;
      line-height: 18px
    }

    .loaderO span {
      font-family: Be Vietnam Pro, sans-serif;
      font-size: 24px;
      line-height: 14px;
      font-weight: 700;
      color: #004DA9;
      display: inline-block;
      transition: all 0.5s;
      animation: animate 2s infinite
    }

    .loaderO span:nth-child(1) {
      animation-delay: 0.1s
    }

    .loaderO span:nth-child(2) {
      animation-delay: 0.2s
    }

    .loaderO span:nth-child(3) {
      animation-delay: 0.3s
    }

    .loaderO span:nth-child(4) {
      animation-delay: 0.4s
    }

    .loaderO span:nth-child(5) {
      animation-delay: 0.5s
    }

    .loaderO span:nth-child(6) {
      animation-delay: 0.6s
    }

    .loaderO span:nth-child(7) {
      animation-delay: 0.7s
    }

    .loaderO span:nth-child(8) {
      animation-delay: 0.8s
    }

    .loaderO span:nth-child(9) {
      animation-delay: 0.9s
    }

    .loaderO span:nth-child(10) {
      animation-delay: 1s
    }

    .loaderO span:nth-child(11) {
      animation-delay: 1.1s
    }

    @keyframes animate {
      0% {
        color: #004DA9;
        transform: translateY(0);
        margin-left: 0
      }

      25% {
        color: #004DA9;
        transform: translateY(-15px);
        margin-left: 5px;
        text-shadow: 0 15px 5px #004DA9;
      }

      100% {
        color: #004DA9;
        transform: translateY(0);
        margin-left: 0
      }
    }

    #loading-screen {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9999;
      width: 100vw;
      height: 100vh;
      background-color: #B9E3ED;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 1;
      visibility: visible;
      transition: opacity 0.5s ease, visibility 0.5s ease;
    }

    #loading-screen.hide {
      opacity: 0;
      visibility: hidden;
    }

    img.logo-loading {
      width: 300px;
      height: auto;
      margin-bottom: 32px;
    }
  </style>
@endpush

<div id="loading-screen">
  <div class="organiaLoader">
    <div class="loaderO ">
      {{-- <span>S</span>
      <span>i</span>
      <span>ê</span>
      <span>u</span>
      <span>H</span>
      <span>ọ</span>
      <span>c</span> --}}
      <div class="d-flex flex-column justify-content-center align-items-center">
        {{-- <img src="{{ asset('img/logo-sieu-hoc.png') }}" alt="" class="logo-loading"> --}}
        <img src="{{ asset('img/logo-sieuhoc-svg.svg') }}" alt="" class="logo-loading">
        <div class="text-center">
          <span>Siêu</span>
          <span>Học</span>
          <span>-</span>
          <span>Học</span>
          <span>Siêu</span>
          <span>Dễ</span>
          <span>-</span>
          <span>Thành</span>
          <span>Công</span>
          <span>Siêu</span>
          <span>Tốc</span>
        </div>
      </div>
    </div>
  </div>
</div>