@keyframes pulsate {

      0%,
      to {
        opacity: 1
      }

      50% {
        opacity: .2
      }
    }

    #spotlight {
      position: fixed;
      top: -1px;
      bottom: -1px;
      width: 100%;
      z-index: 99999;
      color: #fff;
      background-color: #000;
      opacity: 0;
      overflow: hidden;
      -webkit-user-select: none;
      -ms-user-select: none;
      user-select: none;
      transition: opacity .2s ease-out;
      font-family: Arial, sans-serif;
      font-size: 16px;
      font-weight: 400;
      contain: strict;
      touch-action: none;
      pointer-events: none
    }

    #spotlight.show {
      opacity: 1;
      transition: none;
      pointer-events: auto
    }

    #spotlight.white {
      color: #212529;
      background-color: #fff
    }

    #spotlight.white .spl-next,
    #spotlight.white .spl-page~*,
    #spotlight.white .spl-prev,
    #spotlight.white .spl-spinner {
      filter: invert(1)
    }

    #spotlight.white .spl-progress {
      background-color: rgba(0, 0, 0, .35)
    }

    #spotlight.white .spl-footer,
    #spotlight.white .spl-header {
      background-color: rgba(255, 255, 255, .65)
    }

    #spotlight.white .spl-button {
      background: #212529;
      color: #fff
    }

    .spl-footer,
    .spl-header {
      background-color: rgba(0, 0, 0, .45)
    }

    #spotlight .contain,
    #spotlight .cover {
      object-fit: cover;
      height: 100%;
      width: 100%
    }

    #spotlight .contain {
      object-fit: contain
    }

    #spotlight .autofit {
      object-fit: none;
      width: auto;
      height: auto;
      max-height: none;
      max-width: none;
      transition: none
    }

    .spl-scene,
    .spl-spinner,
    .spl-track {
      width: 100%;
      height: 100%;
      position: absolute
    }

    .spl-track {
      contain: strict
    }

    .spl-spinner {
      background-position: center;
      background-repeat: no-repeat;
      background-size: 42px;
      opacity: 0
    }

    .spl-spinner.spin {
      background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzgiIGhlaWdodD0iMzgiIHZpZXdCb3g9IjAgMCAzOCAzOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiNmZmYiPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSAxKSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2Utb3BhY2l0eT0iLjY1Ij48Y2lyY2xlIHN0cm9rZS1vcGFjaXR5PSIuMTUiIGN4PSIxOCIgY3k9IjE4IiByPSIxOCIvPjxwYXRoIGQ9Ik0zNiAxOGMwLTkuOTQtOC4wNi0xOC0xOC0xOCI+PGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIGZyb209IjAgMTggMTgiIHRvPSIzNjAgMTggMTgiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+PC9wYXRoPjwvZz48L2c+PC9zdmc+);
      transition: opacity .2s linear .25s;
      opacity: 1
    }

    .spl-spinner.error {
      background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjMyIiB3aWR0aD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTYsMUExNSwxNSwwLDEsMCwzMSwxNiwxNSwxNSwwLDAsMCwxNiwxWm0wLDJhMTMsMTMsMCwwLDEsOC40NSwzLjE0TDYuMTQsMjQuNDVBMTMsMTMsMCwwLDEsMTYsM1ptMCwyNmExMywxMywwLDAsMS04LjQ1LTMuMTRMMjUuODYsNy41NUExMywxMywwLDAsMSwxNiwyOVoiIGlkPSJiYW5fc2lnbl9jcm9zc2VkX2NpcmNsZSIvPjwvc3ZnPg==);
      background-size: 128px;
      transition: none;
      opacity: .5
    }

    .spl-scene {
      transition: transform .65s cubic-bezier(.1, 1, .1, 1);
      contain: layout size;
      will-change: transform
    }

    .spl-pane>* {
      position: absolute;
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
      left: 50%;
      top: 50%;
      margin: 0;
      padding: 0;
      border: 0;
      transform: translate(-50%, -50%) scale(1);
      transition: transform .65s cubic-bezier(.3, 1, .3, 1), opacity .65s ease;
      contain: layout style;
      will-change: transform, opacity;
      visibility: hidden
    }

    .spl-header,
    .spl-pane,
    .spl-progress {
      position: absolute;
      top: 0
    }

    .spl-pane {
      width: 100%;
      height: 100%;
      transition: transform .65s cubic-bezier(.3, 1, .3, 1);
      contain: layout size;
      will-change: transform, contents
    }

    .spl-header {
      width: 100%;
      height: 50px;
      text-align: right;
      transform: translateY(-100px);
      transition: transform .35s ease;
      overflow: hidden;
      will-change: transform
    }

    #spotlight.menu .spl-footer,
    #spotlight.menu .spl-header,
    .spl-footer:hover,
    .spl-header:hover {
      transform: translateY(0)
    }

    .spl-header div {
      display: inline-block;
      vertical-align: middle;
      white-space: nowrap;
      width: 50px;
      height: 50px;
      opacity: .5
    }

    .spl-progress {
      width: 100%;
      height: 3px;
      background-color: rgba(255, 255, 255, .45);
      transform: translateX(-100%);
      transition: transform linear
    }

    .spl-footer,
    .spl-next,
    .spl-prev {
      position: absolute;
      transition: transform .35s ease;
      will-change: transform
    }

    .spl-footer {
      left: 0;
      right: 0;
      bottom: 0;
      line-height: 20px;
      padding: 20px 20px 0;
      padding-bottom: env(safe-area-inset-bottom, 0);
      text-align: left;
      font-size: 15px;
      font-weight: 400;
      transform: translateY(100%)
    }

    .spl-title {
      font-size: 22px
    }

    .spl-button,
    .spl-description,
    .spl-title {
      margin-bottom: 20px
    }

    .spl-button {
      display: inline-block;
      background: #fff;
      color: #000;
      border-radius: 5px;
      padding: 10px 20px;
      cursor: pointer
    }

    .spl-next,
    .spl-page~*,
    .spl-prev {
      background-position: center;
      background-repeat: no-repeat
    }

    .spl-page {
      float: left;
      width: auto;
      line-height: 50px
    }

    .spl-page~* {
      background-size: 21px;
      float: right
    }

    .spl-fullscreen {
      background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI0IiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyLjUiIHZpZXdCb3g9Ii0xIC0xIDI2IDI2IiB3aWR0aD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTggM0g1YTIgMiAwIDAgMC0yIDJ2M20xOCAwVjVhMiAyIDAgMCAwLTItMmgtM20wIDE4aDNhMiAyIDAgMCAwIDItMnYtM00zIDE2djNhMiAyIDAgMCAwIDIgMmgzIi8+PC9zdmc+)
    }

    .spl-fullscreen.on {
      background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI0IiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyLjUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik04IDN2M2EyIDIgMCAwIDEtMiAySDNtMTggMGgtM2EyIDIgMCAwIDEtMi0yVjNtMCAxOHYtM2EyIDIgMCAwIDEgMi0yaDNNMyAxNmgzYTIgMiAwIDAgMSAyIDJ2MyIvPjwvc3ZnPg==)
    }

    .spl-autofit {
      background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyBoZWlnaHQ9Ijk2cHgiIHZpZXdCb3g9IjAgMCA5NiA5NiIgd2lkdGg9Ijk2cHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggdHJhbnNmb3JtPSJyb3RhdGUoOTAgNTAgNTApIiBmaWxsPSIjZmZmIiBkPSJNNzEuMzExLDgwQzY5LjY3LDg0LjY2LDY1LjIzLDg4LDYwLDg4SDIwYy02LjYzLDAtMTItNS4zNy0xMi0xMlYzNmMwLTUuMjMsMy4zNC05LjY3LDgtMTEuMzExVjc2YzAsMi4yMSwxLjc5LDQsNCw0SDcxLjMxMSAgeiIvPjxwYXRoIHRyYW5zZm9ybT0icm90YXRlKDkwIDUwIDUwKSIgZmlsbD0iI2ZmZiIgZD0iTTc2LDhIMzZjLTYuNjMsMC0xMiw1LjM3LTEyLDEydjQwYzAsNi42Myw1LjM3LDEyLDEyLDEyaDQwYzYuNjMsMCwxMi01LjM3LDEyLTEyVjIwQzg4LDEzLjM3LDgyLjYzLDgsNzYsOHogTTgwLDYwICBjMCwyLjIxLTEuNzksNC00LDRIMzZjLTIuMjEsMC00LTEuNzktNC00VjIwYzAtMi4yMSwxLjc5LTQsNC00aDQwYzIuMjEsMCw0LDEuNzksNCw0VjYweiIvPjwvc3ZnPg==)
    }

    .spl-zoom-in,
    .spl-zoom-out {
      background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI0IiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIxMSIgY3k9IjExIiByPSI4Ii8+PGxpbmUgeDE9IjIxIiB4Mj0iMTYuNjUiIHkxPSIyMSIgeTI9IjE2LjY1Ii8+PGxpbmUgeDE9IjgiIHgyPSIxNCIgeTE9IjExIiB5Mj0iMTEiLz48L3N2Zz4=);
      background-size: 22px
    }

    .spl-zoom-in {
      background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI0IiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIxMSIgY3k9IjExIiByPSI4Ii8+PGxpbmUgeDE9IjIxIiB4Mj0iMTYuNjUiIHkxPSIyMSIgeTI9IjE2LjY1Ii8+PGxpbmUgeDE9IjExIiB4Mj0iMTEiIHkxPSI4IiB5Mj0iMTQiLz48bGluZSB4MT0iOCIgeDI9IjE0IiB5MT0iMTEiIHkyPSIxMSIvPjwvc3ZnPg==)
    }

    .spl-download {
      background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIxNDEuNzMycHgiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDE0MS43MzIgMTQxLjczMiIgd2lkdGg9IjE0MS43MzJweCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjZmZmIj48cGF0aCBkPSJNMTIwLjY3NCwxMjUuMTM4SDIwLjc5M3YxNi41OTRoOTkuODgxVjEyNS4xMzh6IE0xMTkuMDE5LDU4Ljc3NmMtMi41NjEtMi41NjItNi43MTYtMi41NjItOS4yNzUsMEw3Ny4yMSw5MS4zMTJWNi41NjIgICBDNzcuMjEsMi45MzYsNzQuMjY5LDAsNzAuNjQ4LDBjLTMuNjI0LDAtNi41NiwyLjkzNy02LjU2LDYuNTYzdjg0Ljc1TDMxLjk5Miw1OS4yMThjLTIuNTYyLTIuNTY0LTYuNzE1LTIuNTY0LTkuMjc3LDAgICBjLTIuNTY1LDIuNTYyLTIuNTY1LDYuNzE2LDAsOS4yNzlsNDMuMjk0LDQzLjI5M2MwLjE1LDAuMTU0LDAuMzE0LDAuMjk5LDAuNDgxLDAuNDM4YzAuMDc2LDAuMDYyLDAuMTU1LDAuMTEzLDAuMjM0LDAuMTc2ICAgYzAuMDk0LDAuMDY1LDAuMTg2LDAuMTQyLDAuMjc5LDAuMjA2YzAuMDk3LDAuMDYzLDAuMTkyLDAuMTE0LDAuMjg2LDAuMTc0YzAuMDg4LDAuMDU0LDAuMTc0LDAuMTA1LDAuMjY1LDAuMTUzICAgYzAuMSwwLjA1NiwwLjE5OSwwLjEsMC4yOTgsMC4xNDdjMC4wOTcsMC4wNDUsMC4xOSwwLjA5MSwwLjI4MywwLjEzMmMwLjA5OCwwLjA0LDAuMTk2LDAuMDcyLDAuMjk1LDAuMTA1ICAgYzAuMTA0LDAuMDM4LDAuMjA3LDAuMDc4LDAuMzEyLDAuMTA5YzAuMTAxLDAuMDMsMC4xOTcsMC4wNTIsMC4yOTcsMC4wNzdjMC4xMDgsMC4wMjMsMC4yMTQsMC4wNTgsMC4zMjQsMC4wNzggICBjMC4xMTUsMC4wMjEsMC4yMzEsMC4wMzMsMC4zNDYsMC4wNTRjMC4wOTcsMC4wMTUsMC4xOTIsMC4wMzIsMC4yODksMC4wNDJjMC40MywwLjA0MiwwLjg2NSwwLjA0MiwxLjI5NSwwICAgYzAuMS0wLjAxLDAuMTkxLTAuMDI3LDAuMjg5LTAuMDQyYzAuMTE0LTAuMDIxLDAuMjMzLTAuMDI5LDAuMzQ0LTAuMDU0YzAuMTA5LTAuMDIxLDAuMjE3LTAuMDU1LDAuMzI0LTAuMDc4ICAgYzAuMTAyLTAuMDI1LDAuMTk5LTAuMDQ3LDAuMjk5LTAuMDc3YzAuMTA1LTAuMDMxLDAuMjA3LTAuMDcxLDAuMzEyLTAuMTA5YzAuMTAyLTAuMDMsMC4xOTUtMC4wNjIsMC4yOTUtMC4xMDUgICBjMC4wOTYtMC4wNDEsMC4xOTEtMC4wODcsMC4yODMtMC4xMzJjMC4xLTAuMDQ4LDAuMTk5LTAuMDkyLDAuMjk3LTAuMTQ3YzAuMDkxLTAuMDQ4LDAuMTc3LTAuMTA0LDAuMjY0LTAuMTUzICAgYzAuMDk4LTAuMDYsMC4xOTMtMC4xMSwwLjI4Ny0wLjE3NGMwLjA5Ni0wLjA2NCwwLjE4OS0wLjE0MSwwLjI4MS0wLjIwNmMwLjA3Ni0wLjA2MiwwLjE1Ni0wLjExMywwLjIzMy0wLjE3NiAgIGMwLjI0OS0wLjIwNCwwLjQ3OS0wLjQzNywwLjY5NC0wLjY3YzAuMDc2LTAuMDY3LDAuMTU0LTAuMTMxLDAuMjI5LTAuMjAzbDQzLjI5NC00My4yOTYgICBDMTIxLjU4MSw2NS40OTEsMTIxLjU4MSw2MS4zMzcsMTE5LjAxOSw1OC43NzYiLz48L2c+PC9zdmc+);
      background-size: 20px
    }

    .spl-theme {
      background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyBoZWlnaHQ9IjI0cHgiIHZlcnNpb249IjEuMiIgdmlld0JveD0iMiAyIDIwIDIwIiB3aWR0aD0iMjRweCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjZmZmIj48cGF0aCBkPSJNMTIsNGMtNC40MTgsMC04LDMuNTgyLTgsOHMzLjU4Miw4LDgsOHM4LTMuNTgyLDgtOFMxNi40MTgsNCwxMiw0eiBNMTIsMThjLTMuMzE0LDAtNi0yLjY4Ni02LTZzMi42ODYtNiw2LTZzNiwyLjY4Niw2LDYgUzE1LjMxNCwxOCwxMiwxOHoiLz48cGF0aCBkPSJNMTIsN3YxMGMyLjc1NywwLDUtMi4yNDMsNS01UzE0Ljc1Nyw3LDEyLDd6Ii8+PC9nPjwvc3ZnPg==)
    }

    .spl-play {
      background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI0IiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSItMC41IC0wLjUgMjUgMjUiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPjxwb2x5Z29uIGZpbGw9IiNmZmYiIHBvaW50cz0iMTAgOCAxNiAxMiAxMCAxNiAxMCA4Ii8+PC9zdmc+)
    }

    .spl-play.on {
      background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI0IiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSItMC41IC0wLjUgMjUgMjUiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPjxsaW5lIHgxPSIxMCIgeDI9IjEwIiB5MT0iMTUiIHkyPSI5Ii8+PGxpbmUgeDE9IjE0IiB4Mj0iMTQiIHkxPSIxNSIgeTI9IjkiLz48L3N2Zz4=);
      animation: pulsate 1s ease infinite
    }

    .spl-close {
      background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI0IiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIyIDIgMjAgMjAiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48bGluZSB4MT0iMTgiIHgyPSI2IiB5MT0iNiIgeTI9IjE4Ii8+PGxpbmUgeDE9IjYiIHgyPSIxOCIgeTE9IjYiIHkyPSIxOCIvPjwvc3ZnPg==)
    }

    .spl-next,
    .spl-prev {
      top: 50%;
      width: 50px;
      height: 50px;
      opacity: .65;
      background-color: rgba(0, 0, 0, .45);
      border-radius: 100%;
      cursor: pointer;
      margin-top: -25px;
      transform: translateX(-100px);
      background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI0IiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cG9seWxpbmUgcG9pbnRzPSIxNSAxOCA5IDEyIDE1IDYiLz48L3N2Zz4=);
      background-size: 30px
    }

    .spl-prev {
      left: 20px
    }

    .spl-next {
      left: auto;
      right: 20px;
      transform: translateX(100px) scaleX(-1)
    }

    #spotlight.menu .spl-prev {
      transform: translateX(0)
    }

    #spotlight.menu .spl-next {
      transform: translateX(0) scaleX(-1)
    }

    @media (hover:hover) {
      .spl-page~div {
        cursor: pointer;
        transition: opacity .2s ease
      }

      .spl-next:hover,
      .spl-page~div:hover,
      .spl-prev:hover {
        opacity: 1
      }
    }

    @media (max-width:500px) {
      .spl-header div {
        width: 44px
      }

      .spl-footer .spl-title {
        font-size: 20px
      }

      .spl-footer {
        font-size: 14px
      }

      .spl-next,
      .spl-prev {
        width: 35px;
        height: 35px;
        margin-top: -17.5px;
        background-size: 15px 15px
      }

      .spl-spinner {
        background-size: 30px 30px
      }
    }

    .hide-scrollbars {
      overflow: hidden !important
    }

    @keyframes cart-jump {
      0% {
        transform: scale(1);
      }

      30% {
        transform: scale(1.4);
      }

      50% {
        transform: scale(0.9);
      }

      70% {
        transform: scale(1.1);
      }

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

    .cart-jump {
      animation: cart-jump 0.5s ease-in-out;
    }
    @font-face {
      font-family: 'asap';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(//bizweb.dktcdn.net/100/527/383/themes/964940/assets/asap-regular.ttf?1758526059043) format('truetype');
    }

    @font-face {
      font-family: 'asap';
      font-style: normal;
      font-weight: 600;
      font-display: swap;
      src: url(//bizweb.dktcdn.net/100/527/383/themes/964940/assets/asap-semibold.ttf?1758526059043) format('truetype');

    }

    @font-face {
      font-family: ega-iconfont;
      src: url(//bizweb.dktcdn.net/100/527/383/themes/964940/assets/ega-iconfont.woff2?1758526059043) format("woff2");
      font-weight: normal;
      font-style: normal;
      font-display: swap;

    }
    html {
      box-sizing: border-box;
      font-size: 62.5%;
      height: 100%;
    }

    :root {
      /*
     replace font family and font weight
   */
      --font-body-family: 'asap', sans-serif;
      --font-body-weight: 500;
      --font-headings-family: 'asap', sans-serif;
      --font-headings-weight: 700;

      /* For text color */
      --color-foreground: #212121;

      /* For background color */
      --color-background: #FFFFFF;

      --color-background-body: #fff;

      /* For primary color : button, link  */

      --color-primary: #FF8662;

      /* base on design  */
      --color-secondary: #FF8662;

      --color-link: #ff9d02;
      /* For cta color */
      --color-accent: #FFE711;

      --color-neutral-50: #EBEBEB;
      --color-neutral-100: #BFBFBF;
      --color-neutral-200: #999999;
      --color-neutral-300: #666666;
      --color-neutral-400: #464646;


      /* For line border color or shadow color */
      --color-label: var(--color-neutral-200);
      --color-price: #ff3c02;
      --color-price-compare: #929292;
      --color-sale-bg: #ee1926;
      --color-sale: #ffffff;
      --color-addtocart: #ffffff;
      --color-addtocart-bg: #ff3c02;
      --color-coupon-primary: #FF8662;
      --color-coupon-secondary: #212121;

      /* For error state */
      --color-error: #EE1926;

      /* For success state */
      --color-success: #2BAD14;

      /* For warning state */
      --color-warning: #F2BC1B;

      /* header */
      --color-header: var(--color-foreground);
      --color-header-bg: var(--color-background);
      --header-height: 8.4rem;
      --logo-width: 20.4rem;
      --color-cart-bubble: #FFFFFF;
      --color-cart-bubble-bg: #EE1926;
      --color-search: var(--color-primary);
      --color-sub-header-bg: #FF8662;
      --color-sub-header: #ffffff;
      --color-sub-header-link: #ffc902;

      /* Font size for body text */
      --font-size-body: 1.6rem;

      /* Font size for text h1 - h6 */
      --font-size-h1: 4.8rem;
      --font-size-h2: 4rem;
      --font-size-h3: 3.2rem;
      --font-size-h4: 2.8rem;
      --font-size-h5: 2rem;
      --font-size-h6: 1.6rem;

      /*  if any title different
   --font-title-1: 3rem;
   --font-title-2: 2.25rem;
   */

      /* Rounded config */
      --rounded: 0.8rem;
      --rounded-lg: calc(var(--rounded) * 1.5);
      --rounded-sm: calc(var(--rounded) / 2);
      --rounded-xs: calc(var(--rounded) / 4);
      --rounded-full: 9999px;

      --rounded-button: 9999px;
      --rounded-input: 0.4rem;



      /* Spacing */

      /**
      * ---------------------------------------------------------------------
      * SPACING VARIABLES
      *
      * We are using a spacing inspired from frameworks like Tailwind CSS.
      * ---------------------------------------------------------------------
      */
      --spacing-0-5: 0.2rem;
      /* 2px */
      --spacing-1: 0.4rem;
      /* 4px */
      --spacing-1-5: 0.6rem;
      /* 6px */
      --spacing-2: 0.8rem;
      /* 8px */
      --spacing-2-5: 1rem;
      /* 10px */
      --spacing-3: 1.2rem;
      /* 12px */
      --spacing-3-5: 1.4rem;
      /* 14px */
      --spacing-4: 1.6rem;
      /* 16px */
      --spacing-4-5: 1.8rem;
      /* 18px */
      --spacing-5: 2rem;
      /* 20px */
      --spacing-5-5: 2.2rem;
      /* 22px */
      --spacing-6: 2.4rem;
      /* 24px */
      --spacing-6-5: 2.6rem;
      /* 26px */
      --spacing-7: 2.8rem;
      /* 28px */
      --spacing-7-5: 3rem;
      /* 30px */
      --spacing-8: 3.2rem;
      /* 32px */
      --spacing-8-5: 3.4rem;
      /* 34px */
      --spacing-9: 3.6rem;
      /* 36px */
      --spacing-9-5: 3.8rem;
      /* 38px */
      --spacing-10: 4rem;
      /* 40px */
      --spacing-11: 4.4rem;
      /* 44px */
      --spacing-12: 4.8rem;
      /* 48px */
      --spacing-14: 5.6rem;
      /* 56px */
      --spacing-16: 6.4rem;
      /* 64px */
      --spacing-18: 7.2rem;
      /* 72px */
      --spacing-20: 8rem;
      /* 80px */
      --spacing-24: 9.6rem;
      /* 96px */

      /* Container */

      --container-padding: var(--spacing-3);
      --grid-gutter: var(--spacing-2);

      --shadow-l: 0px 2rem 4.8rem 0px rgba(51, 51, 51, 0.20);
      --navigation-width: 40rem;


      --swatch-den: #000000;

      --swatch-trang: #FFFFFF;

      --swatch-xanh-duong: #0000FF;

      --swatch-nau: #A52A2A;

      --swatch-xanh-la: #7FFF00;

      --swatch-socola: #D2691E;

      --swatch-hong: #FF00FF;

      --swatch-vang: #FFD700;

      --swatch-xam: #808080;

      --swatch-xanh-la: #00FF00;

      --swatch-hong: #FF00FF;

      --swatch-do-cam: #FFE4B5;

      --swatch-do: #FF0000;

      --swatch-o-liu: #808000;

      --swatch-cam: #FFA500;

      --swatch-hong: #FFC0CB;

      --swatch-tim: #DDA0DD;

      --swatch-xanh-ngoc: #40E0D0;
    }

    @media(max-width: 767px) {
      :root {
        --logo-width: 11.7rem;
        --header-height: 6.8rem
      }

    }

    body {
      grid-template-columns: 100%;
      min-height: 100%;
      margin: 0;
      font-size: var(--font-size-body);
      letter-spacing: -0.004em;
      line-height: calc(20 / 14);
      font-family: var(--font-body-family);
      font-weight: var(--font-body-weight);
      background-color: var(--color-background-body);
      scroll-behavior: smooth;
    }

    .section {
      padding: var(--section-padding, 0);
      margin: var(--section-margin, 2rem 0 0 0);
    }

    @media(max-width: 975px) {

      .section {
        padding: var(--section-padding-mb, 0);
        margin: var(--section-margin-mb, 2rem 0 0 0);
      }

    }