diff --git a/demo-audio-2/css/library.css b/demo-audio-2/css/library.css
new file mode 100644
index 0000000..0a6f636
--- /dev/null
+++ b/demo-audio-2/css/library.css
@@ -0,0 +1,3055 @@
+/**
+ * Swiper 8.4.4
+ * Most modern mobile touch slider and framework with hardware accelerated transitions
+ * https://swiperjs.com
+ *
+ * Copyright 2014-2022 Vladimir Kharlampidi
+ *
+ * Released under the MIT License
+ *
+ * Released on: October 12, 2022
+ */
+.swiper-slide,
+.swiper-wrapper {
+  height: 100%;
+  position: relative;
+  transition-property: transform;
+  width: 100%;
+}
+.swiper-android .swiper-slide,
+.swiper-pagination,
+.swiper-wrapper {
+  transform: translate3d(0, 0, 0);
+}
+.swiper-fade.swiper-free-mode .swiper-slide,
+.swiper-free-mode > .swiper-wrapper {
+  transition-timing-function: ease-out;
+}
+@font-face {
+  font-family: swiper-icons;
+  src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA");
+  font-weight: 400;
+  font-style: normal;
+}
+:root {
+  --swiper-theme-color: #007aff;
+  --swiper-navigation-size: 44px;
+}
+.swiper {
+  margin-left: auto;
+  margin-right: auto;
+  position: relative;
+  overflow: hidden;
+  list-style: none;
+  padding: 0;
+  z-index: 1;
+}
+.swiper-vertical > .swiper-wrapper {
+  flex-direction: column;
+}
+.swiper-wrapper {
+  z-index: 1;
+  display: flex;
+  box-sizing: content-box;
+}
+.swiper-pointer-events {
+  touch-action: pan-y;
+}
+.swiper-pointer-events.swiper-vertical {
+  touch-action: pan-x;
+}
+.swiper-slide {
+  flex-shrink: 0;
+}
+.swiper-slide-invisible-blank {
+  visibility: hidden;
+}
+.swiper-autoheight,
+.swiper-autoheight .swiper-slide {
+  height: auto;
+}
+.swiper-autoheight .swiper-wrapper {
+  align-items: flex-start;
+  transition-property: transform, height;
+}
+.swiper-backface-hidden .swiper-slide {
+  transform: translateZ(0);
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+.swiper-3d,
+.swiper-3d.swiper-css-mode .swiper-wrapper {
+  perspective: 1200px;
+}
+.swiper-3d .swiper-cube-shadow,
+.swiper-3d .swiper-slide,
+.swiper-3d .swiper-slide-shadow,
+.swiper-3d .swiper-slide-shadow-bottom,
+.swiper-3d .swiper-slide-shadow-left,
+.swiper-3d .swiper-slide-shadow-right,
+.swiper-3d .swiper-slide-shadow-top,
+.swiper-3d .swiper-wrapper {
+  transform-style: preserve-3d;
+}
+.swiper-3d .swiper-slide-shadow,
+.swiper-3d .swiper-slide-shadow-bottom,
+.swiper-3d .swiper-slide-shadow-left,
+.swiper-3d .swiper-slide-shadow-right,
+.swiper-3d .swiper-slide-shadow-top {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 10;
+}
+.swiper-3d .swiper-slide-shadow {
+  background: rgba(0, 0, 0, 0.15);
+}
+.swiper-3d .swiper-slide-shadow-left {
+  background-image: linear-gradient(
+    to left,
+    rgba(0, 0, 0, 0.5),
+    rgba(0, 0, 0, 0)
+  );
+}
+.swiper-3d .swiper-slide-shadow-right {
+  background-image: linear-gradient(
+    to right,
+    rgba(0, 0, 0, 0.5),
+    rgba(0, 0, 0, 0)
+  );
+}
+.swiper-3d .swiper-slide-shadow-top {
+  background-image: linear-gradient(
+    to top,
+    rgba(0, 0, 0, 0.5),
+    rgba(0, 0, 0, 0)
+  );
+}
+.swiper-3d .swiper-slide-shadow-bottom {
+  background-image: linear-gradient(
+    to bottom,
+    rgba(0, 0, 0, 0.5),
+    rgba(0, 0, 0, 0)
+  );
+}
+.swiper-css-mode > .swiper-wrapper {
+  overflow: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
+  display: none;
+}
+.swiper-css-mode > .swiper-wrapper > .swiper-slide {
+  scroll-snap-align: start start;
+}
+.swiper-horizontal.swiper-css-mode > .swiper-wrapper {
+  scroll-snap-type: x mandatory;
+}
+.swiper-vertical.swiper-css-mode > .swiper-wrapper {
+  scroll-snap-type: y mandatory;
+}
+.swiper-centered > .swiper-wrapper::before {
+  content: "";
+  flex-shrink: 0;
+  order: 9999;
+}
+.swiper-centered.swiper-horizontal
+  > .swiper-wrapper
+  > .swiper-slide:first-child {
+  margin-inline-start: var(--swiper-centered-offset-before);
+}
+.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
+  height: 100%;
+  min-height: 1px;
+  width: var(--swiper-centered-offset-after);
+}
+.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
+  margin-block-start: var(--swiper-centered-offset-before);
+}
+.swiper-centered.swiper-vertical > .swiper-wrapper::before {
+  width: 100%;
+  min-width: 1px;
+  height: var(--swiper-centered-offset-after);
+}
+.swiper-centered > .swiper-wrapper > .swiper-slide {
+  scroll-snap-align: center center;
+}
+.swiper-virtual .swiper-slide {
+  -webkit-backface-visibility: hidden;
+  transform: translateZ(0);
+}
+.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  pointer-events: none;
+}
+.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
+  height: 1px;
+  width: var(--swiper-virtual-size);
+}
+.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
+  width: 1px;
+  height: var(--swiper-virtual-size);
+}
+.swiper-button-next,
+.swiper-button-prev {
+  position: absolute;
+  top: 50%;
+  width: calc(var(--swiper-navigation-size) / 44 * 27);
+  height: var(--swiper-navigation-size);
+  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
+  z-index: 10;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--swiper-navigation-color, var(--swiper-theme-color));
+}
+.swiper-button-next.swiper-button-disabled,
+.swiper-button-prev.swiper-button-disabled {
+  opacity: 0.35;
+  cursor: auto;
+  pointer-events: none;
+}
+.swiper-button-next.swiper-button-hidden,
+.swiper-button-prev.swiper-button-hidden {
+  opacity: 0;
+  cursor: auto;
+  pointer-events: none;
+}
+.swiper-navigation-disabled .swiper-button-next,
+.swiper-navigation-disabled .swiper-button-prev,
+.swiper-pagination-bullet:only-child,
+.swiper-pagination-disabled > .swiper-pagination,
+.swiper-pagination.swiper-pagination-disabled,
+.swiper-scrollbar-disabled > .swiper-scrollbar,
+.swiper-scrollbar.swiper-scrollbar-disabled {
+  display: none !important;
+}
+.swiper-button-next:after,
+.swiper-button-prev:after {
+  font-family: swiper-icons;
+  font-size: var(--swiper-navigation-size);
+  text-transform: none !important;
+  letter-spacing: 0;
+  font-variant: initial;
+  line-height: 1;
+}
+.swiper-button-prev,
+.swiper-rtl .swiper-button-next {
+  left: 10px;
+  right: auto;
+}
+.swiper-button-prev:after,
+.swiper-rtl .swiper-button-next:after {
+  content: "prev";
+}
+.swiper-button-next,
+.swiper-rtl .swiper-button-prev {
+  right: 10px;
+  left: auto;
+}
+.swiper-button-next:after,
+.swiper-rtl .swiper-button-prev:after {
+  content: "next";
+}
+.swiper-button-lock,
+.swiper-pagination-lock,
+.swiper-scrollbar-lock {
+  display: none;
+}
+.swiper-pagination {
+  position: absolute;
+  text-align: center;
+  transition: opacity 0.3s;
+  z-index: 10;
+}
+.swiper-pagination.swiper-pagination-hidden {
+  opacity: 0;
+}
+.swiper-horizontal > .swiper-pagination-bullets,
+.swiper-pagination-bullets.swiper-pagination-horizontal,
+.swiper-pagination-custom,
+.swiper-pagination-fraction {
+  bottom: 10px;
+  left: 0;
+  width: 100%;
+}
+.swiper-pagination-bullets-dynamic {
+  overflow: hidden;
+  font-size: 0;
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+  transform: scale(0.33);
+  position: relative;
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active,
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
+  transform: scale(1);
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next,
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
+  transform: scale(0.66);
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next,
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
+  transform: scale(0.33);
+}
+.swiper-pagination-bullet {
+  width: var(
+    --swiper-pagination-bullet-width,
+    var(--swiper-pagination-bullet-size, 8px)
+  );
+  height: var(
+    --swiper-pagination-bullet-height,
+    var(--swiper-pagination-bullet-size, 8px)
+  );
+  display: inline-block;
+  border-radius: 50%;
+  background: var(--swiper-pagination-bullet-inactive-color, #000);
+  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
+}
+button.swiper-pagination-bullet {
+  border: none;
+  margin: 0;
+  padding: 0;
+  box-shadow: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+.swiper-pagination-clickable .swiper-pagination-bullet {
+  cursor: pointer;
+}
+.swiper-pagination-bullet-active {
+  opacity: var(--swiper-pagination-bullet-opacity, 1);
+  background: var(--swiper-pagination-color, var(--swiper-theme-color));
+}
+.swiper-pagination-vertical.swiper-pagination-bullets,
+.swiper-vertical > .swiper-pagination-bullets {
+  right: 10px;
+  top: 50%;
+  transform: translate3d(0, -50%, 0);
+}
+.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
+.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
+  margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
+  display: block;
+}
+.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
+.swiper-vertical
+  > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
+  top: 50%;
+  transform: translateY(-50%);
+  width: 8px;
+}
+.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic
+  .swiper-pagination-bullet,
+.swiper-vertical
+  > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic
+  .swiper-pagination-bullet {
+  display: inline-block;
+  transition: transform 0.2s, top 0.2s;
+}
+.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
+.swiper-pagination-horizontal.swiper-pagination-bullets
+  .swiper-pagination-bullet {
+  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
+}
+.swiper-horizontal
+  > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
+.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
+  left: 50%;
+  transform: translateX(-50%);
+  white-space: nowrap;
+}
+.swiper-horizontal
+  > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic
+  .swiper-pagination-bullet,
+.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic
+  .swiper-pagination-bullet {
+  transition: transform 0.2s, left 0.2s;
+}
+.swiper-horizontal.swiper-rtl
+  > .swiper-pagination-bullets-dynamic
+  .swiper-pagination-bullet {
+  transition: transform 0.2s, right 0.2s;
+}
+.swiper-pagination-progressbar {
+  background: rgba(0, 0, 0, 0.25);
+  position: absolute;
+}
+.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
+  background: var(--swiper-pagination-color, var(--swiper-theme-color));
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  transform: scale(0);
+  transform-origin: left top;
+}
+.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
+  transform-origin: right top;
+}
+.swiper-horizontal > .swiper-pagination-progressbar,
+.swiper-pagination-progressbar.swiper-pagination-horizontal,
+.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,
+.swiper-vertical
+  > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
+  width: 100%;
+  height: 4px;
+  left: 0;
+  top: 0;
+}
+.swiper-horizontal
+  > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
+.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,
+.swiper-pagination-progressbar.swiper-pagination-vertical,
+.swiper-vertical > .swiper-pagination-progressbar {
+  width: 4px;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+.swiper-scrollbar {
+  border-radius: 10px;
+  position: relative;
+  -ms-touch-action: none;
+  background: rgba(0, 0, 0, 0.1);
+}
+.swiper-horizontal > .swiper-scrollbar,
+.swiper-scrollbar.swiper-scrollbar-horizontal {
+  position: absolute;
+  left: 1%;
+  bottom: 3px;
+  z-index: 50;
+  height: 5px;
+  width: 98%;
+}
+.swiper-scrollbar.swiper-scrollbar-vertical,
+.swiper-vertical > .swiper-scrollbar {
+  position: absolute;
+  right: 3px;
+  top: 1%;
+  z-index: 50;
+  width: 5px;
+  height: 98%;
+}
+.swiper-scrollbar-drag {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: 10px;
+  left: 0;
+  top: 0;
+}
+.swiper-scrollbar-cursor-drag,
+.swiper-slide-zoomed {
+  cursor: move;
+}
+.swiper-zoom-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+.swiper-zoom-container > canvas,
+.swiper-zoom-container > img,
+.swiper-zoom-container > svg {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+.swiper-lazy-preloader {
+  width: 42px;
+  height: 42px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-left: -21px;
+  margin-top: -21px;
+  z-index: 10;
+  transform-origin: 50%;
+  box-sizing: border-box;
+  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
+  border-radius: 50%;
+  border-top-color: transparent;
+}
+.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,
+.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {
+  animation: 1s linear infinite swiper-preloader-spin;
+}
+.swiper-lazy-preloader-white {
+  --swiper-preloader-color: #fff;
+}
+.swiper-lazy-preloader-black {
+  --swiper-preloader-color: #000;
+}
+@keyframes swiper-preloader-spin {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.swiper .swiper-notification {
+  position: absolute;
+  left: 0;
+  top: 0;
+  pointer-events: none;
+  opacity: 0;
+  z-index: -1000;
+}
+.swiper-free-mode > .swiper-wrapper {
+  margin: 0 auto;
+}
+.swiper-grid > .swiper-wrapper {
+  flex-wrap: wrap;
+}
+.swiper-grid-column > .swiper-wrapper {
+  flex-wrap: wrap;
+  flex-direction: column;
+}
+.swiper-fade .swiper-slide {
+  pointer-events: none;
+  transition-property: opacity;
+}
+.swiper-cube .swiper-slide .swiper-slide,
+.swiper-fade .swiper-slide .swiper-slide,
+.swiper-flip .swiper-slide .swiper-slide {
+  pointer-events: none;
+}
+.swiper-cube .swiper-slide-active,
+.swiper-cube .swiper-slide-active .swiper-slide-active,
+.swiper-fade .swiper-slide-active,
+.swiper-fade .swiper-slide-active .swiper-slide-active,
+.swiper-flip .swiper-slide-active,
+.swiper-flip .swiper-slide-active .swiper-slide-active {
+  pointer-events: auto;
+}
+.swiper-cards,
+.swiper-cube,
+.swiper-flip {
+  overflow: visible;
+}
+.swiper-cube .swiper-slide {
+  pointer-events: none;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  z-index: 1;
+  visibility: hidden;
+  transform-origin: 0 0;
+  width: 100%;
+  height: 100%;
+}
+.swiper-cube.swiper-rtl .swiper-slide {
+  transform-origin: 100% 0;
+}
+.swiper-cube .swiper-slide-active,
+.swiper-cube .swiper-slide-next,
+.swiper-cube .swiper-slide-next + .swiper-slide,
+.swiper-cube .swiper-slide-prev {
+  pointer-events: auto;
+  visibility: visible;
+}
+.swiper-cube .swiper-slide-shadow-bottom,
+.swiper-cube .swiper-slide-shadow-left,
+.swiper-cube .swiper-slide-shadow-right,
+.swiper-cube .swiper-slide-shadow-top,
+.swiper-flip .swiper-slide-shadow-bottom,
+.swiper-flip .swiper-slide-shadow-left,
+.swiper-flip .swiper-slide-shadow-right,
+.swiper-flip .swiper-slide-shadow-top {
+  z-index: 0;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+.swiper-cube .swiper-cube-shadow {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.6;
+  z-index: 0;
+}
+.swiper-cube .swiper-cube-shadow:before {
+  content: "";
+  background: #000;
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  filter: blur(50px);
+}
+.swiper-flip .swiper-slide {
+  pointer-events: none;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  z-index: 1;
+}
+.swiper-creative .swiper-slide {
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  overflow: hidden;
+  transition-property: transform, opacity, height;
+}
+.swiper-cards .swiper-slide {
+  transform-origin: center bottom;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  overflow: hidden;
+}
+
+/**
+  * Fancybox v3.5.7
+  * Copyright 2013-2018 David Deutsch
+  * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
+  */
+body.compensate-for-scrollbar {
+  overflow: hidden;
+}
+.fancybox-active {
+  height: auto;
+}
+.fancybox-is-hidden {
+  left: -9999px;
+  margin: 0;
+  position: absolute !important;
+  top: -9999px;
+  visibility: hidden;
+}
+.fancybox-container {
+  -webkit-backface-visibility: hidden;
+  height: 100%;
+  left: 0;
+  outline: none;
+  position: fixed;
+  -webkit-tap-highlight-color: transparent;
+  top: 0;
+  -ms-touch-action: manipulation;
+  touch-action: manipulation;
+  transform: translateZ(0);
+  width: 100%;
+  z-index: 99992;
+}
+.fancybox-container * {
+  box-sizing: border-box;
+}
+.fancybox-bg,
+.fancybox-inner,
+.fancybox-outer,
+.fancybox-stage {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+.fancybox-outer {
+  -webkit-overflow-scrolling: touch;
+  overflow-y: auto;
+}
+.fancybox-bg {
+  background: #1e1e1e;
+  opacity: 0;
+  transition-duration: inherit;
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.47, 0, 0.74, 0.71);
+}
+.fancybox-is-open .fancybox-bg {
+  opacity: 0.9;
+  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
+}
+.fancybox-caption,
+.fancybox-infobar,
+.fancybox-navigation .fancybox-button,
+.fancybox-toolbar {
+  direction: ltr;
+  opacity: 0;
+  position: absolute;
+  transition: opacity 0.25s ease, visibility 0s ease 0.25s;
+  visibility: hidden;
+  z-index: 99997;
+}
+.fancybox-show-caption .fancybox-caption,
+.fancybox-show-infobar .fancybox-infobar,
+.fancybox-show-nav .fancybox-navigation .fancybox-button,
+.fancybox-show-toolbar .fancybox-toolbar {
+  opacity: 1;
+  transition: opacity 0.25s ease 0s, visibility 0s ease 0s;
+  visibility: visible;
+}
+.fancybox-infobar {
+  color: #ccc;
+  font-size: 13px;
+  -webkit-font-smoothing: subpixel-antialiased;
+  height: 44px;
+  left: 0;
+  line-height: 44px;
+  min-width: 44px;
+  mix-blend-mode: difference;
+  padding: 0 10px;
+  pointer-events: none;
+  top: 0;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.fancybox-toolbar {
+  right: 0;
+  top: 0;
+}
+.fancybox-stage {
+  direction: ltr;
+  overflow: visible;
+  transform: translateZ(0);
+  z-index: 99994;
+}
+.fancybox-is-open .fancybox-stage {
+  overflow: hidden;
+}
+.fancybox-slide {
+  -webkit-backface-visibility: hidden;
+  display: none;
+  height: 100%;
+  left: 0;
+  outline: none;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  padding: 44px;
+  position: absolute;
+  text-align: center;
+  top: 0;
+  transition-property: transform, opacity;
+  white-space: normal;
+  width: 100%;
+  z-index: 99994;
+}
+.fancybox-slide:before {
+  content: "";
+  display: inline-block;
+  font-size: 0;
+  height: 100%;
+  vertical-align: middle;
+  width: 0;
+}
+.fancybox-is-sliding .fancybox-slide,
+.fancybox-slide--current,
+.fancybox-slide--next,
+.fancybox-slide--previous {
+  display: block;
+}
+.fancybox-slide--image {
+  overflow: hidden;
+  padding: 44px 10px;
+}
+.fancybox-slide--image:before {
+  display: none;
+}
+.fancybox-slide--html {
+  padding: 6px;
+}
+.fancybox-content {
+  background: #fff;
+  display: inline-block;
+  margin: 0;
+  max-width: 100%;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  padding: 44px;
+  position: relative;
+  text-align: left;
+  vertical-align: middle;
+}
+.fancybox-slide--image .fancybox-content {
+  animation-timing-function: cubic-bezier(0.5, 0, 0.14, 1);
+  -webkit-backface-visibility: hidden;
+  background: transparent;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  left: 0;
+  max-width: none;
+  overflow: visible;
+  padding: 0;
+  position: absolute;
+  top: 0;
+  transform-origin: top left;
+  transition-property: transform, opacity;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  z-index: 99995;
+}
+.fancybox-can-zoomOut .fancybox-content {
+  cursor: zoom-out;
+}
+.fancybox-can-zoomIn .fancybox-content {
+  cursor: zoom-in;
+}
+.fancybox-can-pan .fancybox-content,
+.fancybox-can-swipe .fancybox-content {
+  cursor: grab;
+}
+.fancybox-is-grabbing .fancybox-content {
+  cursor: grabbing;
+}
+.fancybox-container [data-selectable="true"] {
+  cursor: text;
+}
+.fancybox-image,
+.fancybox-spaceball {
+  background: transparent;
+  border: 0;
+  height: 100%;
+  left: 0;
+  margin: 0;
+  max-height: none;
+  max-width: none;
+  padding: 0;
+  position: absolute;
+  top: 0;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  width: 100%;
+}
+.fancybox-spaceball {
+  z-index: 1;
+}
+.fancybox-slide--iframe .fancybox-content,
+.fancybox-slide--map .fancybox-content,
+.fancybox-slide--pdf .fancybox-content,
+.fancybox-slide--video .fancybox-content {
+  height: 100%;
+  overflow: visible;
+  padding: 0;
+  width: 100%;
+}
+.fancybox-slide--video .fancybox-content {
+  background: #000;
+}
+.fancybox-slide--map .fancybox-content {
+  background: #e5e3df;
+}
+.fancybox-slide--iframe .fancybox-content {
+  background: #fff;
+}
+.fancybox-iframe,
+.fancybox-video {
+  background: transparent;
+  border: 0;
+  display: block;
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  width: 100%;
+}
+.fancybox-iframe {
+  left: 0;
+  position: absolute;
+  top: 0;
+}
+.fancybox-error {
+  background: #fff;
+  cursor: default;
+  max-width: 400px;
+  padding: 40px;
+  width: 100%;
+}
+.fancybox-error p {
+  color: #444;
+  font-size: 16px;
+  line-height: 20px;
+  margin: 0;
+  padding: 0;
+}
+.fancybox-button {
+  background: rgba(30, 30, 30, 0.6);
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  cursor: pointer;
+  display: inline-block;
+  height: 44px;
+  margin: 0;
+  padding: 10px;
+  position: relative;
+  transition: color 0.2s;
+  vertical-align: top;
+  visibility: inherit;
+  width: 44px;
+}
+.fancybox-button,
+.fancybox-button:link,
+.fancybox-button:visited {
+  color: #ccc;
+}
+.fancybox-button:hover {
+  color: #fff;
+}
+.fancybox-button:focus {
+  outline: none;
+}
+.fancybox-button.fancybox-focus {
+  outline: 1px dotted;
+}
+.fancybox-button[disabled],
+.fancybox-button[disabled]:hover {
+  color: #888;
+  cursor: default;
+  outline: none;
+}
+.fancybox-button div {
+  height: 100%;
+}
+.fancybox-button svg {
+  display: block;
+  height: 100%;
+  overflow: visible;
+  position: relative;
+  width: 100%;
+}
+.fancybox-button svg path {
+  fill: currentColor;
+  stroke-width: 0;
+}
+.fancybox-button--fsenter svg:nth-child(2),
+.fancybox-button--fsexit svg:first-child,
+.fancybox-button--pause svg:first-child,
+.fancybox-button--play svg:nth-child(2) {
+  display: none;
+}
+.fancybox-progress {
+  background: #ff5268;
+  height: 2px;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transform: scaleX(0);
+  transform-origin: 0;
+  transition-property: transform;
+  transition-timing-function: linear;
+  z-index: 99998;
+}
+.fancybox-close-small {
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  color: #ccc;
+  cursor: pointer;
+  opacity: 0.8;
+  padding: 8px;
+  position: absolute;
+  right: -12px;
+  top: -44px;
+  z-index: 401;
+}
+.fancybox-close-small:hover {
+  color: #fff;
+  opacity: 1;
+}
+.fancybox-slide--html .fancybox-close-small {
+  color: currentColor;
+  padding: 10px;
+  right: 0;
+  top: 0;
+  color: #fff;
+  background-color: red;
+}
+.fancybox-slide--html .fancybox-close-small-bottom {
+  bottom: 0;
+  top: unset;
+  width: 100%;
+  font-size: 16px;
+}
+.fancybox-slide--image.fancybox-is-scaling .fancybox-content {
+  overflow: hidden;
+}
+.fancybox-is-scaling .fancybox-close-small,
+.fancybox-is-zoomable.fancybox-can-pan .fancybox-close-small {
+  display: none;
+}
+.fancybox-navigation .fancybox-button {
+  background-clip: content-box;
+  height: 100px;
+  opacity: 0;
+  position: absolute;
+  top: calc(50% - 50px);
+  width: 70px;
+}
+.fancybox-navigation .fancybox-button div {
+  padding: 7px;
+}
+.fancybox-navigation .fancybox-button--arrow_left {
+  left: 0;
+  left: env(safe-area-inset-left);
+  padding: 31px 26px 31px 6px;
+}
+.fancybox-navigation .fancybox-button--arrow_right {
+  padding: 31px 6px 31px 26px;
+  right: 0;
+  right: env(safe-area-inset-right);
+}
+.fancybox-caption {
+  background: linear-gradient(
+    0deg,
+    rgba(0, 0, 0, 0.85) 0,
+    rgba(0, 0, 0, 0.3) 50%,
+    rgba(0, 0, 0, 0.15) 65%,
+    rgba(0, 0, 0, 0.075) 75.5%,
+    rgba(0, 0, 0, 0.037) 82.85%,
+    rgba(0, 0, 0, 0.019) 88%,
+    transparent
+  );
+  bottom: 0;
+  color: #eee;
+  font-size: 14px;
+  font-weight: 400;
+  left: 0;
+  line-height: 1.5;
+  padding: 75px 44px 25px;
+  pointer-events: none;
+  right: 0;
+  text-align: center;
+  z-index: 99996;
+}
+@supports (padding: max(0px)) {
+  .fancybox-caption {
+    padding: 75px max(44px, env(safe-area-inset-right))
+      max(25px, env(safe-area-inset-bottom))
+      max(44px, env(safe-area-inset-left));
+  }
+}
+.fancybox-caption--separate {
+  margin-top: -50px;
+}
+.fancybox-caption__body {
+  max-height: 50vh;
+  overflow: auto;
+  pointer-events: all;
+}
+.fancybox-caption a,
+.fancybox-caption a:link,
+.fancybox-caption a:visited {
+  color: #ccc;
+  text-decoration: none;
+}
+.fancybox-caption a:hover {
+  color: #fff;
+  text-decoration: underline;
+}
+.fancybox-loading {
+  animation: a 1s linear infinite;
+  background: transparent;
+  border: 4px solid #888;
+  border-bottom-color: #fff;
+  border-radius: 50%;
+  height: 50px;
+  left: 50%;
+  margin: -25px 0 0 -25px;
+  opacity: 0.7;
+  padding: 0;
+  position: absolute;
+  top: 50%;
+  width: 50px;
+  z-index: 99999;
+}
+@keyframes a {
+  to {
+    transform: rotate(1turn);
+  }
+}
+.fancybox-animated {
+  transition-timing-function: cubic-bezier(0, 0, 0.25, 1);
+}
+.fancybox-fx-slide.fancybox-slide--previous {
+  opacity: 0;
+  transform: translate3d(-100%, 0, 0);
+}
+.fancybox-fx-slide.fancybox-slide--next {
+  opacity: 0;
+  transform: translate3d(100%, 0, 0);
+}
+.fancybox-fx-slide.fancybox-slide--current {
+  opacity: 1;
+  transform: translateZ(0);
+}
+.fancybox-fx-fade.fancybox-slide--next,
+.fancybox-fx-fade.fancybox-slide--previous {
+  opacity: 0;
+  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+}
+.fancybox-fx-fade.fancybox-slide--current {
+  opacity: 1;
+}
+.fancybox-fx-zoom-in-out.fancybox-slide--previous {
+  opacity: 0;
+  transform: scale3d(1.5, 1.5, 1.5);
+}
+.fancybox-fx-zoom-in-out.fancybox-slide--next {
+  opacity: 0;
+  transform: scale3d(0.5, 0.5, 0.5);
+}
+.fancybox-fx-zoom-in-out.fancybox-slide--current {
+  opacity: 1;
+  transform: scaleX(1);
+}
+.fancybox-fx-rotate.fancybox-slide--previous {
+  opacity: 0;
+  transform: rotate(-1turn);
+}
+.fancybox-fx-rotate.fancybox-slide--next {
+  opacity: 0;
+  transform: rotate(1turn);
+}
+.fancybox-fx-rotate.fancybox-slide--current {
+  opacity: 1;
+  transform: rotate(0deg);
+}
+.fancybox-fx-circular.fancybox-slide--previous {
+  opacity: 0;
+  transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0);
+}
+.fancybox-fx-circular.fancybox-slide--next {
+  opacity: 0;
+  transform: scale3d(0, 0, 0) translate3d(100%, 0, 0);
+}
+.fancybox-fx-circular.fancybox-slide--current {
+  opacity: 1;
+  transform: scaleX(1) translateZ(0);
+}
+.fancybox-fx-tube.fancybox-slide--previous {
+  transform: translate3d(-100%, 0, 0) scale(0.1) skew(-10deg);
+}
+.fancybox-fx-tube.fancybox-slide--next {
+  transform: translate3d(100%, 0, 0) scale(0.1) skew(10deg);
+}
+.fancybox-fx-tube.fancybox-slide--current {
+  transform: translateZ(0) scale(1);
+}
+@media (max-height: 576px) {
+  .fancybox-slide {
+    padding-left: 6px;
+    padding-right: 6px;
+  }
+  .fancybox-slide--image {
+    padding: 6px 0;
+  }
+  .fancybox-close-small {
+    right: -6px;
+  }
+  .fancybox-slide--image .fancybox-close-small {
+    background: #4e4e4e;
+    color: #f2f4f6;
+    height: 36px;
+    opacity: 1;
+    padding: 6px;
+    right: 0;
+    top: 0;
+    width: 36px;
+  }
+  .fancybox-caption {
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+  @supports (padding: max(0px)) {
+    .fancybox-caption {
+      padding-left: max(12px, env(safe-area-inset-left));
+      padding-right: max(12px, env(safe-area-inset-right));
+    }
+  }
+}
+.fancybox-share {
+  background: #f4f4f4;
+  border-radius: 3px;
+  max-width: 90%;
+  padding: 30px;
+  text-align: center;
+}
+.fancybox-share h1 {
+  color: #222;
+  font-size: 35px;
+  font-weight: 700;
+  margin: 0 0 20px;
+}
+.fancybox-share p {
+  margin: 0;
+  padding: 0;
+}
+.fancybox-share__button {
+  border: 0;
+  border-radius: 3px;
+  display: inline-block;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 40px;
+  margin: 0 5px 10px;
+  min-width: 130px;
+  padding: 0 15px;
+  text-decoration: none;
+  transition: all 0.2s;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  white-space: nowrap;
+}
+.fancybox-share__button:link,
+.fancybox-share__button:visited {
+  color: #fff;
+}
+.fancybox-share__button:hover {
+  text-decoration: none;
+}
+.fancybox-share__button--fb {
+  background: #3b5998;
+}
+.fancybox-share__button--fb:hover {
+  background: #344e86;
+}
+.fancybox-share__button--pt {
+  background: #bd081d;
+}
+.fancybox-share__button--pt:hover {
+  background: #aa0719;
+}
+.fancybox-share__button--tw {
+  background: #1da1f2;
+}
+.fancybox-share__button--tw:hover {
+  background: #0d95e8;
+}
+.fancybox-share__button svg {
+  height: 25px;
+  margin-right: 7px;
+  position: relative;
+  top: -1px;
+  vertical-align: middle;
+  width: 25px;
+}
+.fancybox-share__button svg path {
+  fill: #fff;
+}
+.fancybox-share__input {
+  background: transparent;
+  border: 0;
+  border-bottom: 1px solid #d7d7d7;
+  border-radius: 0;
+  color: #5d5b5b;
+  font-size: 14px;
+  margin: 10px 0 0;
+  outline: none;
+  padding: 10px 15px;
+  width: 100%;
+}
+.fancybox-thumbs {
+  background: #ddd;
+  bottom: 0;
+  display: none;
+  margin: 0;
+  -webkit-overflow-scrolling: touch;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+  padding: 2px 2px 4px;
+  position: absolute;
+  right: 0;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  top: 0;
+  width: 212px;
+  z-index: 99995;
+}
+.fancybox-thumbs-x {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+.fancybox-show-thumbs .fancybox-thumbs {
+  display: block;
+}
+.fancybox-show-thumbs .fancybox-inner {
+  right: 212px;
+}
+.fancybox-thumbs__list {
+  font-size: 0;
+  height: 100%;
+  list-style: none;
+  margin: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 0;
+  position: absolute;
+  position: relative;
+  white-space: nowrap;
+  width: 100%;
+}
+.fancybox-thumbs-x .fancybox-thumbs__list {
+  overflow: hidden;
+}
+.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar {
+  width: 7px;
+}
+.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-track {
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+}
+.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-thumb {
+  background: #2a2a2a;
+  border-radius: 10px;
+}
+.fancybox-thumbs__list a {
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  background-color: rgba(0, 0, 0, 0.1);
+  background-position: 50%;
+  background-repeat: no-repeat;
+  background-size: cover;
+  cursor: pointer;
+  float: left;
+  height: 75px;
+  margin: 2px;
+  max-height: calc(100% - 8px);
+  max-width: calc(50% - 4px);
+  outline: none;
+  overflow: hidden;
+  padding: 0;
+  position: relative;
+  -webkit-tap-highlight-color: transparent;
+  width: 100px;
+}
+.fancybox-thumbs__list a:before {
+  border: 3px solid #ff5268;
+  bottom: 0;
+  content: "";
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  z-index: 99991;
+}
+.fancybox-thumbs__list a:focus:before {
+  opacity: 0.5;
+}
+.fancybox-thumbs__list a.fancybox-thumbs-active:before {
+  opacity: 1;
+}
+@media (max-width: 576px) {
+  .fancybox-thumbs {
+    width: 110px;
+  }
+  .fancybox-show-thumbs .fancybox-inner {
+    right: 110px;
+  }
+  .fancybox-thumbs__list a {
+    max-width: calc(100% - 10px);
+  }
+}
+
+/*!
+  * MMenu
+  */
+/*!
+  * jQuery mmenu v7.2.2
+  * @requires jQuery 1.7.0 or later
+  *
+  * mmenu.frebsite.nl
+  *  
+  * Copyright (c) Fred Heusschen
+  * www.frebsite.nl
+  *
+  * License: CC-BY-NC-4.0
+  * http://creativecommons.org/licenses/by-nc/4.0/
+  */
+.mm-menu {
+  --mm-line-height: 20px;
+  --mm-listitem-size: 44px;
+  --mm-navbar-size: 44px;
+  --mm-offset-top: 0;
+  --mm-offset-right: 0;
+  --mm-offset-bottom: 0;
+  --mm-offset-left: 0;
+  --mm-color-border: rgba(0, 0, 0, 0.1);
+  --mm-color-button: rgba(0, 0, 0, 0.3);
+  --mm-color-text: rgba(0, 0, 0, 0.75);
+  --mm-color-text-dimmed: rgba(0, 0, 0, 0.3);
+  --mm-color-background: #f3f3f3;
+  --mm-color-background-highlight: rgba(0, 0, 0, 0.05);
+  --mm-color-background-emphasis: rgba(255, 255, 255, 0.4);
+  --mm-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+}
+.mm-hidden {
+  display: none !important;
+}
+.mm-wrapper {
+  overflow-x: hidden;
+  position: relative;
+}
+.mm-menu {
+  background: #f3f3f3;
+  border-color: rgba(0, 0, 0, 0.1);
+  color: rgba(0, 0, 0, 0.75);
+  background: var(--mm-color-background);
+  border-color: var(--mm-color-border);
+  color: var(--mm-color-text);
+  line-height: 20px;
+  line-height: var(--mm-line-height);
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  display: block;
+  padding: 0;
+  margin: 0;
+  position: absolute;
+  z-index: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  top: var(--mm-offset-top);
+  right: var(--mm-offset-right);
+  bottom: var(--mm-offset-bottom);
+  left: var(--mm-offset-left);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.mm-menu a,
+.mm-menu a:active,
+.mm-menu a:hover,
+.mm-menu a:link,
+.mm-menu a:visited {
+  color: inherit;
+  text-decoration: none;
+}
+[dir="rtl"] .mm-menu {
+  direction: rtl;
+}
+.mm-panels,
+.mm-panels > .mm-panel {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 0;
+}
+.mm-panel,
+.mm-panels {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  background: #f3f3f3;
+  border-color: rgba(0, 0, 0, 0.1);
+  color: rgba(0, 0, 0, 0.75);
+  background: var(--mm-color-background);
+  border-color: var(--mm-color-border);
+  color: var(--mm-color-text);
+}
+.mm-panels {
+  overflow: hidden;
+}
+.mm-panel {
+  -webkit-overflow-scrolling: touch;
+  overflow: scroll;
+  overflow-x: hidden;
+  overflow-y: auto;
+  width: 100%;
+  padding: 0 20px;
+  -webkit-transform: translate3d(100%, 0, 0);
+  transform: translate3d(100%, 0, 0);
+  -webkit-transition: -webkit-transform 0.4s ease;
+  transition: -webkit-transform 0.4s ease;
+  -o-transition: transform 0.4s ease;
+  transition: transform 0.4s ease;
+  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
+}
+.mm-panel:not(.mm-hidden) {
+  display: block;
+}
+.mm-panel:after,
+.mm-panel:before {
+  content: "";
+  display: block;
+  height: 20px;
+}
+.mm-panel_has-navbar {
+  padding-top: 44px;
+  padding-top: var(--mm-navbar-size);
+}
+.mm-panel_opened {
+  z-index: 1;
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+}
+.mm-panel_opened-parent {
+  -webkit-transform: translate3d(-30%, 0, 0);
+  transform: translate3d(-30%, 0, 0);
+}
+.mm-panel_highest {
+  z-index: 2;
+}
+.mm-panel_noanimation {
+  -webkit-transition: none !important;
+  -o-transition: none !important;
+  transition: none !important;
+}
+.mm-panel_noanimation.mm-panel_opened-parent {
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+}
+[dir="rtl"] .mm-panel:not(.mm-panel_opened) {
+  -webkit-transform: translate3d(-100%, 0, 0);
+  transform: translate3d(-100%, 0, 0);
+}
+[dir="rtl"] .mm-panel.mm-panel_opened-parent {
+  -webkit-transform: translate3d(30%, 0, 0);
+  transform: translate3d(30%, 0, 0);
+}
+.mm-listitem_vertical > .mm-panel {
+  -webkit-transform: none !important;
+  -ms-transform: none !important;
+  transform: none !important;
+  display: none;
+  width: 100%;
+  padding: 10px 0 10px 10px;
+}
+.mm-listitem_vertical > .mm-panel:after,
+.mm-listitem_vertical > .mm-panel:before {
+  content: none;
+  display: none;
+}
+.mm-listitem_opened > .mm-panel {
+  display: block;
+}
+.mm-listitem_vertical > .mm-listitem__btn {
+  height: 44px;
+  height: var(--mm-listitem-size);
+  bottom: auto;
+}
+.mm-listitem_vertical .mm-listitem:last-child:after {
+  border-color: transparent;
+}
+.mm-listitem_opened > .mm-listitem__btn:after {
+  -webkit-transform: rotate(225deg);
+  -ms-transform: rotate(225deg);
+  transform: rotate(225deg);
+  right: 19px;
+}
+.mm-btn {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  width: 44px;
+  padding: 0;
+}
+.mm-btn:after,
+.mm-btn:before {
+  border-color: rgba(0, 0, 0, 0.1);
+  border-color: var(--mm-color-button);
+  border-width: 2px;
+  border-style: solid;
+}
+.mm-btn_close:after,
+.mm-btn_close:before {
+  content: "";
+  -webkit-box-sizing: content-box;
+  box-sizing: content-box;
+  display: block;
+  width: 5px;
+  height: 5px;
+  margin: auto;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+.mm-btn_close:before {
+  border-right: none;
+  border-bottom: none;
+  right: 18px;
+}
+.mm-btn_close:after {
+  border-left: none;
+  border-top: none;
+  right: 25px;
+}
+.mm-btn_next:after,
+.mm-btn_prev:before {
+  content: "";
+  border-bottom: none;
+  border-right: none;
+  -webkit-box-sizing: content-box;
+  box-sizing: content-box;
+  display: block;
+  width: 8px;
+  height: 8px;
+  margin: auto;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+}
+.mm-btn_prev:before {
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+  left: 23px;
+  right: auto;
+}
+.mm-btn_next:after {
+  -webkit-transform: rotate(135deg);
+  -ms-transform: rotate(135deg);
+  transform: rotate(135deg);
+  right: 23px;
+  left: auto;
+}
+[dir="rtl"] .mm-btn_next:after {
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+  left: 23px;
+  right: auto;
+}
+[dir="rtl"] .mm-btn_prev:before {
+  -webkit-transform: rotate(135deg);
+  -ms-transform: rotate(135deg);
+  transform: rotate(135deg);
+  right: 23px;
+  left: auto;
+}
+[dir="rtl"] .mm-btn_close:after,
+[dir="rtl"] .mm-btn_close:before {
+  right: auto;
+}
+[dir="rtl"] .mm-btn_close:before {
+  left: 25px;
+}
+[dir="rtl"] .mm-btn_close:after {
+  left: 18px;
+}
+.mm-navbar {
+  background: #f3f3f3;
+  border-color: rgba(0, 0, 0, 0.1);
+  color: rgba(0, 0, 0, 0.3);
+  background: var(--mm-color-background);
+  border-color: var(--mm-color-border);
+  color: var(--mm-color-text-dimmed);
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  text-align: center;
+  display: none;
+  height: 44px;
+  height: var(--mm-navbar-size);
+  padding: 0 44px;
+  margin: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  opacity: 1;
+  -webkit-transition: opacity 0.4s ease;
+  -o-transition: opacity 0.4s ease;
+  transition: opacity 0.4s ease;
+}
+.mm-navbar > * {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  display: block;
+  padding: 12px;
+  padding: calc((var(--mm-navbar-size) - var(--mm-line-height)) * 0.5);
+  padding-left: 0;
+  padding-right: 0;
+}
+.mm-navbar a,
+.mm-navbar a:hover {
+  text-decoration: none;
+  font-size: 18px;
+  color: var(--color-primary) !important;
+  font-weight: 700;
+}
+.mm-navbar__title {
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.mm-navbar__btn {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 1;
+}
+.mm-navbar__btn:first-child {
+  text-align: left;
+  left: 0;
+}
+.mm-navbar__btn:last-child {
+  text-align: right;
+  right: 0;
+}
+.mm-panel_has-navbar .mm-navbar {
+  display: block;
+}
+[dir="rtl"] .mm-navbar__btn:first-child {
+  text-align: right;
+  right: 0;
+  left: auto;
+}
+[dir="rtl"] .mm-navbar__btn:last-child {
+  text-align: left;
+  left: 0;
+  right: auto;
+}
+.mm-listitem,
+.mm-listview {
+  list-style: none;
+  display: block;
+  padding: 0;
+  margin: 0;
+}
+.mm-listitem {
+  color: #000;
+  font-weight: 500;
+  border-color: rgba(0, 0, 0, 0.1);
+  border-color: var(--mm-color-border);
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+.mm-listitem:after {
+  content: "";
+  border-color: inherit;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  display: block;
+  position: absolute;
+  left: 20px;
+  right: 0;
+  bottom: 0;
+}
+.mm-listitem a,
+.mm-listitem a:hover {
+  text-decoration: none;
+}
+.mm-listitem__btn,
+.mm-listitem__text {
+  color: inherit;
+  display: block;
+  padding-top: 12px;
+  padding-top: calc((var(--mm-listitem-size) - var(--mm-line-height)) / 2);
+  padding-bottom: 12px;
+  padding-bottom: calc((var(--mm-listitem-size) - var(--mm-line-height)) / 2);
+}
+.mm-listitem__text {
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  padding-left: 20px;
+  padding-right: 10px;
+  -webkit-box-flex: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  -ms-flex-preferred-size: 10%;
+  flex-basis: 10%;
+}
+.mm-listitem__btn {
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.4);
+  tap-highlight-color: rgba(255, 255, 255, 0.4);
+  -webkit-tap-highlight-color: var(--mm-color-background-emphasis);
+  tap-highlight-color: var(--mm-color-background-emphasis);
+  background: rgba(3, 2, 1, 0);
+  border-color: inherit;
+  width: auto;
+  padding-right: 54px;
+  position: relative;
+}
+.mm-listitem__btn:not(.mm-listitem__text) {
+  border-left-width: 1px;
+  border-left-style: solid;
+}
+.mm-listitem_selected > .mm-listitem__text {
+  background: rgba(255, 255, 255, 0.4);
+  background: var(--mm-color-background-emphasis);
+}
+.mm-listitem_opened > .mm-listitem__btn,
+.mm-listitem_opened > .mm-panel {
+  background: rgba(0, 0, 0, 0.05);
+  background: var(--mm-color-background-highlight);
+}
+.mm-panels > .mm-panel > .mm-listview {
+  margin: 20px -20px;
+}
+.mm-panels > .mm-panel > .mm-listview:first-child,
+.mm-panels > .mm-panel > .mm-navbar + .mm-listview {
+  margin-top: -20px;
+}
+.mm-listitem_divider {
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0.05);
+  background: var(--mm-color-background-highlight);
+  font-size: 75%;
+  text-transform: uppercase;
+  min-height: 20px;
+  min-height: var(--mm-line-height);
+  padding: 6.5px;
+  padding: calc(
+    ((var(--mm-listitem-size) * 0.75) - var(--mm-line-height)) * 0.5
+  );
+  padding-right: 10px;
+  padding-left: 20px;
+}
+.mm-listitem_spacer {
+  padding-top: 44px;
+  padding-top: var(--mm-listitem-size);
+}
+.mm-listitem_spacer > .mm-btn_next {
+  top: 44px;
+  top: var(--mm-listitem-size);
+}
+[dir="rtl"] .mm-listitem:after {
+  left: 0;
+  right: 20px;
+}
+[dir="rtl"] .mm-listitem__text {
+  padding-left: 10px;
+  padding-right: 20px;
+}
+[dir="rtl"] .mm-listitem__btn {
+  padding-left: 54px;
+  border-left-width: 0;
+  border-left-style: none;
+}
+[dir="rtl"] .mm-listitem__btn:not(.mm-listitem__text) {
+  padding-right: 0;
+  border-right-width: 1px;
+  border-right-style: solid;
+}
+.mm-page {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  position: relative;
+}
+.mm-slideout {
+  -webkit-transition: -webkit-transform 0.4s ease;
+  transition: -webkit-transform 0.4s ease;
+  -o-transition: transform 0.4s ease;
+  transition: transform 0.4s ease;
+  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
+  z-index: 1;
+}
+.mm-wrapper_opened {
+  overflow-x: hidden;
+  position: relative;
+}
+.mm-wrapper_background .mm-page {
+  background: inherit;
+}
+.mm-menu_offcanvas {
+  display: none;
+  position: fixed;
+  right: auto;
+  z-index: 0;
+}
+.mm-menu_offcanvas.mm-menu_opened {
+  display: block;
+}
+.mm-menu_offcanvas {
+  width: 80%;
+  min-width: 240px;
+  max-width: 440px;
+}
+.mm-wrapper_opening .mm-menu_offcanvas.mm-menu_opened ~ .mm-slideout {
+  -webkit-transform: translate3d(80vw, 0, 0);
+  transform: translate3d(80vw, 0, 0);
+}
+@media all and (max-width: 300px) {
+  .mm-wrapper_opening .mm-menu_offcanvas.mm-menu_opened ~ .mm-slideout {
+    -webkit-transform: translate3d(240px, 0, 0);
+    transform: translate3d(240px, 0, 0);
+  }
+}
+@media all and (min-width: 550px) {
+  .mm-wrapper_opening .mm-menu_offcanvas.mm-menu_opened ~ .mm-slideout {
+    -webkit-transform: translate3d(440px, 0, 0);
+    transform: translate3d(440px, 0, 0);
+  }
+}
+.mm-wrapper__blocker {
+  background: rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+  display: none;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 2;
+}
+.mm-wrapper_blocking {
+  overflow: hidden;
+}
+.mm-wrapper_blocking body {
+  overflow: hidden;
+}
+.mm-wrapper_blocking .mm-wrapper__blocker {
+  display: block;
+}
+.mm-sronly {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  -webkit-clip-path: inset(50%) !important;
+  clip-path: inset(50%) !important;
+  white-space: nowrap !important;
+  width: 1px !important;
+  min-width: 1px !important;
+  height: 1px !important;
+  min-height: 1px !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  position: absolute !important;
+}
+
+/* STYLE GLOBAL */
+.color-primary {
+  color: var(--color-primary);
+}
+.color-secondary {
+  color: var(--color-secondary);
+}
+.color-white {
+  color: var(--white);
+  font-style: normal;
+}
+.color-black {
+  color: var(--black);
+}
+.color-gray {
+  color: var(--gray);
+}
+.color-gray-2 {
+  color: var(--gray-2);
+}
+.bg-primary {
+  background-color: var(--color-primary);
+}
+.bg-secondary {
+  background-color: var(--color-secondary);
+}
+.bg-white {
+  background-color: var(--white);
+}
+.box-shadow {
+  -webkit-box-shadow: var(--box-shadow);
+  box-shadow: var(--box-shadow);
+}
+a {
+  text-decoration: none;
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
+}
+input::-webkit-input-placeholder,
+textarea::-webkit-input-placeholder {
+  font-family: inherit;
+}
+input::-moz-placeholder,
+textarea::-moz-placeholder {
+  font-family: inherit;
+}
+input:-ms-input-placeholder,
+textarea:-ms-input-placeholder {
+  font-family: inherit;
+}
+input::-ms-input-placeholder,
+textarea::-ms-input-placeholder {
+  font-family: inherit;
+}
+input::-webkit-input-placeholder,
+textarea::-webkit-input-placeholder {
+  font-family: inherit;
+}
+input::-moz-placeholder,
+textarea::-moz-placeholder {
+  font-family: inherit;
+}
+input:-ms-input-placeholder,
+textarea:-ms-input-placeholder {
+  font-family: inherit;
+}
+input::-ms-input-placeholder,
+textarea::-ms-input-placeholder {
+  font-family: inherit;
+}
+input::-webkit-input-placeholder,
+textarea::-webkit-input-placeholder {
+  font-family: inherit;
+}
+input::-moz-placeholder,
+textarea::-moz-placeholder {
+  font-family: inherit;
+}
+input:-ms-input-placeholder,
+textarea:-ms-input-placeholder {
+  font-family: inherit;
+}
+input::-ms-input-placeholder,
+textarea::-ms-input-placeholder {
+  font-family: inherit;
+}
+input,
+input::placeholder,
+select,
+textarea,
+textarea::placeholder {
+  font-family: inherit;
+}
+.line-clamp-1 {
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 1;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.line-clamp-2 {
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.line-clamp-3 {
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 3;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.text-center {
+  text-align: center;
+}
+.text-left {
+  text-align: left;
+}
+.text-right {
+  text-align: right;
+}
+.text-uppercase {
+  text-transform: uppercase;
+}
+.text-line-through {
+  text-decoration: line-through;
+}
+.text-32 {
+  font-size: 32px;
+  line-height: 36px;
+}
+.text-28 {
+  font-size: 28px;
+  line-height: 32px;
+}
+.text-24 {
+  font-size: 24px;
+  line-height: 28px;
+}
+.text-20 {
+  font-size: 20px;
+  line-height: 24px;
+}
+.text-18 {
+  font-size: 18px;
+  line-height: 22px;
+}
+.text-16 {
+  font-size: 16px;
+  line-height: 20px;
+}
+.text-15 {
+  font-size: 15px;
+  line-height: 19px;
+}
+.text-14 {
+  font-size: 14px;
+  line-height: 18px;
+}
+.text-13 {
+  font-size: 13px;
+  line-height: 17px;
+}
+.text-12 {
+  font-size: 12px;
+  line-height: 16px;
+}
+.text-10 {
+  font-size: 10px;
+  line-height: 14px;
+}
+.font-weight-900 {
+  font-weight: 900;
+}
+.font-weight-700 {
+  font-weight: 700;
+}
+.font-weight-600 {
+  font-weight: 600;
+}
+.font-weight-500 {
+  font-weight: 500;
+}
+.font-weight-400 {
+  font-weight: 400;
+}
+.font-weight-300 {
+  font-weight: 300;
+}
+.grid {
+  display: -ms-grid;
+  display: grid;
+  gap: 12px;
+}
+.grid--1-cols {
+  -ms-grid-columns: (1fr) [1];
+  grid-template-columns: repeat(1, 1fr);
+}
+.grid--2-cols {
+  -ms-grid-columns: (1fr) [2];
+  grid-template-columns: repeat(2, 1fr);
+}
+.grid--3-cols {
+  -ms-grid-columns: (1fr) [3];
+  grid-template-columns: repeat(3, 1fr);
+}
+.grid--4-cols {
+  -ms-grid-columns: (1fr) [4];
+  grid-template-columns: repeat(4, 1fr);
+}
+.grid--5-cols {
+  -ms-grid-columns: (1fr) [5];
+  grid-template-columns: repeat(5, 1fr);
+}
+.grid--2-rows {
+  -ms-grid-rows: (1fr) [2];
+  grid-template-rows: repeat(2, 1fr);
+}
+.row {
+  display: -ms-flexbox;
+  display: -webkit-box;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -6px;
+  margin-left: -6px;
+}
+.no-gutters {
+  margin-right: 0;
+  margin-left: 0;
+}
+.no-gutters > .col,
+.no-gutters > [class*="col-"] {
+  padding-right: 0;
+  padding-left: 0;
+}
+.col,
+.col-1,
+.col-10,
+.col-11,
+.col-12,
+.col-2,
+.col-3,
+.col-4,
+.col-5,
+.col-6,
+.col-7,
+.col-8,
+.col-9,
+.col-auto,
+.col-sm,
+.col-sm-1,
+.col-sm-10,
+.col-sm-11,
+.col-sm-12,
+.col-sm-2,
+.col-sm-3,
+.col-sm-4,
+.col-sm-5,
+.col-sm-6,
+.col-sm-7,
+.col-sm-8,
+.col-sm-9,
+.col-sm-auto {
+  position: relative;
+  width: 100%;
+  padding-right: 6px;
+  padding-left: 6px;
+}
+.col {
+  -ms-flex-preferred-size: 0;
+  flex-basis: 0;
+  -ms-flex-positive: 1;
+  -webkit-box-flex: 1;
+  flex-grow: 1;
+  max-width: 100%;
+}
+.row-cols-1 > * {
+  -ms-flex: 0 0 100%;
+  -webkit-box-flex: 0;
+  flex: 0 0 100%;
+  max-width: 100%;
+}
+.row-cols-2 > * {
+  -ms-flex: 0 0 50%;
+  -webkit-box-flex: 0;
+  flex: 0 0 50%;
+  max-width: 50%;
+}
+.row-cols-3 > * {
+  -ms-flex: 0 0 33.333333%;
+  -webkit-box-flex: 0;
+  flex: 0 0 33.333333%;
+  max-width: 33.333333%;
+}
+.row-cols-4 > * {
+  -ms-flex: 0 0 25%;
+  -webkit-box-flex: 0;
+  flex: 0 0 25%;
+  max-width: 25%;
+}
+.row-cols-5 > * {
+  -ms-flex: 0 0 20%;
+  -webkit-box-flex: 0;
+  flex: 0 0 20%;
+  max-width: 20%;
+}
+.row-cols-6 > * {
+  -ms-flex: 0 0 16.666667%;
+  -webkit-box-flex: 0;
+  flex: 0 0 16.666667%;
+  max-width: 16.666667%;
+}
+.col-auto {
+  -ms-flex: 0 0 auto;
+  -webkit-box-flex: 0;
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+}
+.col-1 {
+  -ms-flex: 0 0 8.333333%;
+  -webkit-box-flex: 0;
+  flex: 0 0 8.333333%;
+  max-width: 8.333333%;
+}
+.col-2 {
+  -ms-flex: 0 0 16.666667%;
+  -webkit-box-flex: 0;
+  flex: 0 0 16.666667%;
+  max-width: 16.666667%;
+}
+.col-3 {
+  -ms-flex: 0 0 25%;
+  -webkit-box-flex: 0;
+  flex: 0 0 25%;
+  max-width: 25%;
+}
+.col-4 {
+  -ms-flex: 0 0 33.333333%;
+  -webkit-box-flex: 0;
+  flex: 0 0 33.333333%;
+  max-width: 33.333333%;
+}
+.col-5 {
+  -ms-flex: 0 0 41.666667%;
+  -webkit-box-flex: 0;
+  flex: 0 0 41.666667%;
+  max-width: 41.666667%;
+}
+.col-6 {
+  -ms-flex: 0 0 50%;
+  -webkit-box-flex: 0;
+  flex: 0 0 50%;
+  max-width: 50%;
+}
+.col-7 {
+  -ms-flex: 0 0 58.333333%;
+  -webkit-box-flex: 0;
+  flex: 0 0 58.333333%;
+  max-width: 58.333333%;
+}
+.col-8 {
+  -ms-flex: 0 0 66.666667%;
+  -webkit-box-flex: 0;
+  flex: 0 0 66.666667%;
+  max-width: 66.666667%;
+}
+.col-9 {
+  -ms-flex: 0 0 75%;
+  -webkit-box-flex: 0;
+  flex: 0 0 75%;
+  max-width: 75%;
+}
+.col-10 {
+  -ms-flex: 0 0 83.333333%;
+  -webkit-box-flex: 0;
+  flex: 0 0 83.333333%;
+  max-width: 83.333333%;
+}
+.col-11 {
+  -ms-flex: 0 0 91.666667%;
+  -webkit-box-flex: 0;
+  flex: 0 0 91.666667%;
+  max-width: 91.666667%;
+}
+.col-12 {
+  -ms-flex: 0 0 100%;
+  -webkit-box-flex: 0;
+  flex: 0 0 100%;
+  max-width: 100%;
+}
+.offset-1 {
+  margin-left: 8.333333%;
+}
+.offset-2 {
+  margin-left: 16.666667%;
+}
+.offset-3 {
+  margin-left: 25%;
+}
+.offset-4 {
+  margin-left: 33.333333%;
+}
+.offset-5 {
+  margin-left: 41.666667%;
+}
+.offset-6 {
+  margin-left: 50%;
+}
+.offset-7 {
+  margin-left: 58.333333%;
+}
+.offset-8 {
+  margin-left: 66.666667%;
+}
+.offset-9 {
+  margin-left: 75%;
+}
+.offset-10 {
+  margin-left: 83.333333%;
+}
+.offset-11 {
+  margin-left: 91.666667%;
+}
+.d-flex {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.align-items-center {
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+.align-items-start {
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: flex-start;
+}
+.align-items-end {
+  -webkit-box-align: end;
+  -ms-flex-align: end;
+  align-items: flex-end;
+}
+.align-items-baseline {
+  -webkit-box-align: baseline;
+  -ms-flex-align: baseline;
+  align-items: baseline;
+}
+.justify-content-center {
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+.justify-content-between {
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+.justify-content-around {
+  -ms-flex-pack: distribute;
+  justify-content: space-around;
+}
+.flex-column {
+  -ms-flex-direction: column;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  flex-direction: column;
+}
+.flex-row {
+  -ms-flex-direction: row;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  flex-direction: row;
+}
+.flex-1 {
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+.flex-wrap {
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+.m-0 {
+  margin: 0 !important;
+}
+.mt-0,
+.my-0 {
+  margin-top: 0 !important;
+}
+.mr-0,
+.mx-0 {
+  margin-right: 0 !important;
+}
+.mb-0,
+.my-0 {
+  margin-bottom: 0 !important;
+}
+.ml-0,
+.mx-0 {
+  margin-left: 0 !important;
+}
+.m-1 {
+  margin: 4px !important;
+}
+.mt-1,
+.my-1 {
+  margin-top: 4px !important;
+}
+.mr-1,
+.mx-1 {
+  margin-right: 4px !important;
+}
+.mb-1,
+.my-1 {
+  margin-bottom: 4px !important;
+}
+.ml-1,
+.mx-1 {
+  margin-left: 4px !important;
+}
+.m-2 {
+  margin: 8px !important;
+}
+.mt-2,
+.my-2 {
+  margin-top: 8px !important;
+}
+.mr-2,
+.mx-2 {
+  margin-right: 8px !important;
+}
+.mb-2,
+.my-2 {
+  margin-bottom: 8px !important;
+}
+.ml-2,
+.mx-2 {
+  margin-left: 8px !important;
+}
+.m-3 {
+  margin: 16px !important;
+}
+.mt-3,
+.my-3 {
+  margin-top: 16px !important;
+}
+.mr-3,
+.mx-3 {
+  margin-right: 16px !important;
+}
+.mb-3,
+.my-3 {
+  margin-bottom: 16px !important;
+}
+.ml-3,
+.mx-3 {
+  margin-left: 16px !important;
+}
+.m-4 {
+  margin: 24px !important;
+}
+.mt-4,
+.my-4 {
+  margin-top: 24px !important;
+}
+.mr-4,
+.mx-4 {
+  margin-right: 24px !important;
+}
+.mb-4,
+.my-4 {
+  margin-bottom: 24px !important;
+}
+.ml-4,
+.mx-4 {
+  margin-left: 24px !important;
+}
+.m-5 {
+  margin: 48px !important;
+}
+.mt-5,
+.my-5 {
+  margin-top: 48px !important;
+}
+.mr-5,
+.mx-5 {
+  margin-right: 48px !important;
+}
+.mb-5,
+.my-5 {
+  margin-bottom: 48px !important;
+}
+.ml-5,
+.mx-5 {
+  margin-left: 48px !important;
+}
+.m-12px {
+  margin: 12px !important;
+}
+.mt-12px,
+.my-12px {
+  margin-top: 12px !important;
+}
+.mr-12px,
+.mx-12px {
+  margin-right: 12px !important;
+}
+.mb-12px,
+.my-12px {
+  margin-bottom: 12px !important;
+}
+.ml-12px,
+.mx-12px {
+  margin-left: 12px !important;
+}
+.m-32px {
+  margin: 32px !important;
+}
+.mt-32px,
+.my-32px {
+  margin-top: 32px !important;
+}
+.mr-32px,
+.mx-32px {
+  margin-right: 32px !important;
+}
+.mb-32px,
+.my-32px {
+  margin-bottom: 32px !important;
+}
+.ml-32px,
+.mx-32px {
+  margin-left: 32px !important;
+}
+.p-0 {
+  padding: 0 !important;
+}
+.pt-0,
+.py-0 {
+  padding-top: 0 !important;
+}
+.pr-0,
+.px-0 {
+  padding-right: 0 !important;
+}
+.pb-0,
+.py-0 {
+  padding-bottom: 0 !important;
+}
+.pl-0,
+.px-0 {
+  padding-left: 0 !important;
+}
+.p-1 {
+  padding: 4px !important;
+}
+.pt-1,
+.py-1 {
+  padding-top: 4px !important;
+}
+.pr-1,
+.px-1 {
+  padding-right: 4px !important;
+}
+.pb-1,
+.py-1 {
+  padding-bottom: 4px !important;
+}
+.pl-1,
+.px-1 {
+  padding-left: 4px !important;
+}
+.p-2 {
+  padding: 8px !important;
+}
+.pt-2,
+.py-2 {
+  padding-top: 8px !important;
+}
+.pr-2,
+.px-2 {
+  padding-right: 8px !important;
+}
+.pb-2,
+.py-2 {
+  padding-bottom: 8px !important;
+}
+.pl-2,
+.px-2 {
+  padding-left: 8px !important;
+}
+.p-3 {
+  padding: 16px !important;
+}
+.pt-3,
+.py-3 {
+  padding-top: 16px !important;
+}
+.pr-3,
+.px-3 {
+  padding-right: 16px !important;
+}
+.pb-3,
+.py-3 {
+  padding-bottom: 16px !important;
+}
+.pl-3,
+.px-3 {
+  padding-left: 16px !important;
+}
+.p-4 {
+  padding: 24px !important;
+}
+.pt-4,
+.py-4 {
+  padding-top: 24px !important;
+}
+.pr-4,
+.px-4 {
+  padding-right: 24px !important;
+}
+.pb-4,
+.py-4 {
+  padding-bottom: 24px !important;
+}
+.pl-4,
+.px-4 {
+  padding-left: 24px !important;
+}
+.p-5 {
+  padding: 48px !important;
+}
+.pt-5,
+.py-5 {
+  padding-top: 48px !important;
+}
+.pr-5,
+.px-5 {
+  padding-right: 48px !important;
+}
+.pb-5,
+.py-5 {
+  padding-bottom: 48px !important;
+}
+.pl-5,
+.px-5 {
+  padding-left: 48px !important;
+}
+.p-12px {
+  padding: 12px !important;
+}
+.pt-12px,
+.py-12px {
+  padding-top: 12px !important;
+}
+.pr-12px,
+.px-12px {
+  padding-right: 12px !important;
+}
+.pb-12px,
+.py-12px {
+  padding-bottom: 12px !important;
+}
+.pl-12px,
+.px-12px {
+  padding-left: 12px !important;
+}
+.p-32px {
+  padding: 32px !important;
+}
+.pt-32px,
+.py-32px {
+  padding-top: 32px !important;
+}
+.pr-32px,
+.px-32px {
+  padding-right: 32px !important;
+}
+.pb-32px,
+.py-32px {
+  padding-bottom: 32px !important;
+}
+.pl-32px,
+.px-32px {
+  padding-left: 32px !important;
+}
+.w-100 {
+  width: 100% !important;
+}
+.h-100 {
+  height: 100% !important;
+}
+.w-auto {
+  width: auto !important;
+}
+.h-auto {
+  height: auto !important;
+}
+.m-auto {
+  margin: 0 auto;
+}
+.d-block {
+  display: block !important;
+}
+.hide {
+  display: none !important;
+}
+.d-none {
+  display: none !important;
+}
+.max-height-none {
+  max-height: unset !important;
+}
+.min-width-0 {
+  min-width: 0;
+}
+.overflow-hidden {
+  overflow: hidden;
+}
+.overflow-auto {
+  overflow: auto;
+}
+.p-relative {
+  position: relative !important;
+}
+.ws-pre-line {
+  white-space: pre-line;
+}
+.list {
+  list-style: none;
+}
+.hover-primary:hover {
+  color: var(--color-primary);
+}
+.hover-secondary:hover {
+  color: var(--color-secondary);
+}
+.hover-underline:hover {
+  text-decoration: underline;
+}
+.r-180deg {
+  -webkit-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+.gap-0 {
+  gap: 0;
+}
+.gap-2 {
+  gap: 2px;
+}
+.gap-4 {
+  gap: 4px;
+}
+.gap-8 {
+  gap: 8px;
+}
+.gap-12 {
+  gap: 12px;
+}
+.gap-16 {
+  gap: 16px;
+}
+.gap-24 {
+  gap: 24px;
+}
+.gap-32 {
+  gap: 32px;
+}
+.static-html a,
+.static-html b,
+.static-html h1,
+.static-html h2,
+.static-html h3,
+.static-html h4,
+.static-html h5,
+.static-html h6,
+.static-html ol,
+.static-html p,
+.static-html span,
+.static-html strong,
+.static-html ul {
+  margin: revert;
+  padding: revert;
+}
+.static-html img {
+  display: block;
+  margin: 0 auto;
+  width: -webkit-min-content;
+  width: -moz-min-content;
+  width: min-content;
+  height: auto;
+  max-width: 100%;
+}
+.shake-animation {
+  -webkit-animation: shake 1.5s infinite;
+  animation: shake 1.5s infinite;
+}
+.circle {
+  stroke-dasharray: 76;
+  stroke-dashoffset: 76;
+  -webkit-animation: 0.5s forwards draw;
+  animation: 0.5s forwards draw;
+}
+.tick {
+  stroke-dasharray: 18;
+  stroke-dashoffset: 18;
+  -webkit-animation: 0.5s 0.6s forwards draw;
+  animation: 0.5s 0.6s forwards draw;
+}
+@-webkit-keyframes draw {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes draw {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+@-webkit-keyframes shake {
+  0% {
+    -webkit-transform: rotate(0) scale(1) skew(1deg);
+  }
+  10% {
+    -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
+  }
+  20% {
+    -webkit-transform: rotate(25deg) scale(1) skew(1deg);
+  }
+  30% {
+    -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
+  }
+  40% {
+    -webkit-transform: rotate(25deg) scale(1) skew(1deg);
+  }
+  50% {
+    -webkit-transform: rotate(0) scale(1) skew(1deg);
+  }
+  100% {
+    -webkit-transform: rotate(0) scale(1) skew(1deg);
+  }
+}
+@keyframes shake {
+  0% {
+    -webkit-transform: rotate(0) scale(1) skew(1deg);
+  }
+  10% {
+    -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
+  }
+  20% {
+    -webkit-transform: rotate(25deg) scale(1) skew(1deg);
+  }
+  30% {
+    -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
+  }
+  40% {
+    -webkit-transform: rotate(25deg) scale(1) skew(1deg);
+  }
+  50% {
+    -webkit-transform: rotate(0) scale(1) skew(1deg);
+  }
+  100% {
+    -webkit-transform: rotate(0) scale(1) skew(1deg);
+  }
+}
+.loading-progress {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 96%;
+  height: 450px;
+}
+.loading-progress .circle {
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+  -webkit-animation: colorfull-spin 2s alternate infinite;
+  animation: colorfull-spin 2s alternate infinite;
+  position: absolute;
+}
+.loading-progress .circle:first-child {
+  -webkit-animation-delay: 0.1s;
+  animation-delay: 0.1s;
+  background: -o-linear-gradient(45deg, #337aff, #572ff3, #e81f6c, #f1c726);
+  background: linear-gradient(45deg, #337aff, #572ff3, #e81f6c, #f1c726);
+  background-size: 200%;
+  width: 180px;
+  height: 180px;
+}
+.loading-progress .circle:nth-child(2) {
+  -webkit-animation-delay: 0.2s;
+  animation-delay: 0.2s;
+  background: -o-linear-gradient(45deg, #337aff, #572ff3, #e81f6c, #f1c726);
+  background: linear-gradient(45deg, #337aff, #572ff3, #e81f6c, #f1c726);
+  background-size: 200%;
+  width: 160px;
+  height: 160px;
+}
+.loading-progress .circle:nth-child(3) {
+  -webkit-animation-delay: 0.3s;
+  animation-delay: 0.3s;
+  background: -o-linear-gradient(45deg, #337aff, #572ff3, #e81f6c, #f1c726);
+  background: linear-gradient(45deg, #337aff, #572ff3, #e81f6c, #f1c726);
+  background-size: 200%;
+  width: 140px;
+  height: 140px;
+}
+.loading-progress .circle:nth-child(4) {
+  -webkit-animation-delay: 0.4s;
+  animation-delay: 0.4s;
+  background: -o-linear-gradient(45deg, #337aff, #572ff3, #e81f6c, #f1c726);
+  background: linear-gradient(45deg, #337aff, #572ff3, #e81f6c, #f1c726);
+  background-size: 200%;
+  width: 120px;
+  height: 120px;
+}
+.loading-progress .circle:nth-child(5) {
+  -webkit-animation-delay: 0.5s;
+  animation-delay: 0.5s;
+  background: -o-linear-gradient(45deg, #337aff, #572ff3, #e81f6c, #f1c726);
+  background: linear-gradient(45deg, #337aff, #572ff3, #e81f6c, #f1c726);
+  background-size: 200%;
+  width: 100px;
+  height: 100px;
+}
+.loading-progress .circle:nth-child(6) {
+  -webkit-animation-delay: 0.6s;
+  animation-delay: 0.6s;
+  background: -o-linear-gradient(45deg, #337aff, #572ff3, #e81f6c, #f1c726);
+  background: linear-gradient(45deg, #337aff, #572ff3, #e81f6c, #f1c726);
+  background-size: 200%;
+  width: 80px;
+  height: 80px;
+}
+.loading-progress .circle:nth-child(7) {
+  -webkit-animation-delay: 0.7s;
+  animation-delay: 0.7s;
+  background: -o-linear-gradient(45deg, #337aff, #572ff3, #e81f6c, #f1c726);
+  background: linear-gradient(45deg, #337aff, #572ff3, #e81f6c, #f1c726);
+  background-size: 200%;
+  width: 60px;
+  height: 60px;
+}
+.loading-progress .circle:nth-child(8) {
+  -webkit-animation-delay: 0.8s;
+  animation-delay: 0.8s;
+  background: -o-linear-gradient(45deg, #337aff, #572ff3, #e81f6c, #f1c726);
+  background: linear-gradient(45deg, #337aff, #572ff3, #e81f6c, #f1c726);
+  background-size: 200%;
+  width: 40px;
+  height: 40px;
+}
+@-webkit-keyframes colorfull-spin {
+  0% {
+    border-radius: 50%;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    background-position: 0 50%;
+  }
+  20% {
+    border-radius: 50%;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  90% {
+    border-radius: 5%;
+    -webkit-transform: rotate(90deg);
+    transform: rotate(90deg);
+  }
+  100% {
+    border-radius: 5%;
+    -webkit-transform: rotate(90deg);
+    transform: rotate(90deg);
+    background-position: 0 50%;
+  }
+}
+@keyframes colorfull-spin {
+  0% {
+    border-radius: 50%;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    background-position: 0 50%;
+  }
+  20% {
+    border-radius: 50%;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  90% {
+    border-radius: 5%;
+    -webkit-transform: rotate(90deg);
+    transform: rotate(90deg);
+  }
+  100% {
+    border-radius: 5%;
+    -webkit-transform: rotate(90deg);
+    transform: rotate(90deg);
+    background-position: 0 50%;
+  }
+}
diff --git a/demo-audio-2/css/style_pc.css b/demo-audio-2/css/style_pc.css
new file mode 100644
index 0000000..cee90b4
--- /dev/null
+++ b/demo-audio-2/css/style_pc.css
@@ -0,0 +1,998 @@
+:root {
+  --color-primary: #ff5c00;
+  --color-secondary: #1f1f1f;
+  --white: #fff;
+  --black: #000;
+  --gray: #b7b7b7;
+  --gray-2: #999999;
+  --box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2);
+  --marker-color: #d9d9d9;
+}
+*,
+::after,
+::before {
+  padding: 0;
+  margin: 0;
+  -webkit-box-sizing: inherit;
+  box-sizing: inherit;
+}
+html {
+  font-size: 16px;
+}
+body {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  font-family: "Inter", sans-serif;
+  color: #000;
+  min-width: 1220px;
+  word-break: break-word;
+  line-height: 1.3;
+  font-weight: 400;
+  background-color: #fff;
+}
+.container {
+  max-width: 1220px;
+  width: 100%;
+  padding: 0 10px;
+  margin: 0 auto;
+}
+.box-w {
+  border-radius: 15px;
+  background-color: #fff;
+  padding: 12px;
+}
+.alert-mess {
+  text-align: center;
+  padding: 50px 30px;
+  font-size: 20px;
+  font-weight: 500;
+  color: red;
+}
+.paging {
+  padding: 56px 10px 32px;
+  text-align: center;
+}
+.paging-link.active,
+.paging-link:hover {
+  color: #fff;
+  background: var(--color-secondary);
+  font-weight: 500;
+  border-color: var(--color-secondary);
+}
+.paging-link {
+  display: -webkit-inline-box !important;
+  display: -ms-inline-flexbox !important;
+  display: inline-flex !important;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin-right: 8px;
+  border-radius: 5px;
+  color: #fff;
+  font-size: 16px;
+  line-height: 20px;
+  text-decoration: none;
+  background: #fff;
+  text-transform: capitalize;
+  width: 34px;
+  height: 34px;
+  color: #000;
+}
+.routing ol {
+  margin: 0;
+  list-style: none;
+}
+.routing-link {
+  position: relative;
+  font-size: 14px;
+  font-weight: 400;
+  padding: 0 10px;
+  color: #888;
+  text-decoration: none;
+}
+.routing-link:first-child {
+  padding-left: 0;
+}
+.routing-link:last-child {
+  color: #333;
+  max-width: 700px;
+  overflow: hidden;
+  white-space: nowrap;
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+}
+.routing-link:not(:last-child)::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  right: 0;
+  -webkit-transform: translateY(-50%) rotate(25deg);
+  -ms-transform: translateY(-50%) rotate(25deg);
+  transform: translateY(-50%) rotate(25deg);
+  width: 1px;
+  height: 80%;
+  border-right: 1px solid #dfdfdf;
+}
+.success-form {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 99999;
+  background: rgba(0, 0, 0, 0.5);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+.success-form .cart-success {
+  width: 500px;
+  height: 300px;
+  background: #fff;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: fixed;
+}
+.success-form .success-form-svg {
+  display: block;
+  height: 80px;
+  width: 80px;
+  color: var(--color-primary);
+}
+.success-form .text-cart-success {
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 1.6;
+  padding-top: 30px;
+}
+.cart:hover .cart-ttip {
+  display: block;
+}
+.cart-ttip {
+  display: none;
+  position: absolute;
+  background-color: #fff;
+  border-radius: 10px;
+  width: 400px;
+  height: auto;
+  right: 0;
+  top: 24px;
+  z-index: 3;
+  -webkit-box-shadow: 0 1px 6px rgb(0 0 0 / 25%);
+  box-shadow: 0 1px 6px rgb(0 0 0 / 25%);
+}
+.cart-ttip .cart-ttip-price-button {
+  border-radius: 5px;
+  padding: 10px;
+  background: var(--color-primary);
+  text-align: center;
+  margin: 0 12px 12px;
+}
+.cart-ttip .cart-ttip-item-container {
+  max-height: 300px;
+  overflow: auto;
+}
+.cart-ttip .cart-ttip-item-container .compare-item {
+  height: auto;
+  margin: 0;
+  max-width: unset;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+.cart-ttip .cart-ttip .header-null-cart {
+  width: 100% !important;
+  text-align: center;
+  padding: 30px;
+  color: #000;
+  font-weight: 600;
+}
+.cart-ttip .header-cart-item-price {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin-top: 10px;
+}
+.cart-ttip .cart-ttip-price,
+.compare-item,
+.header-nav-menu a {
+  display: -webkit-box;
+  display: -ms-flexbox;
+}
+.cart-ttip .header-cart-item-price p {
+  font-weight: 700;
+  width: auto;
+}
+.cart-ttip .cart-ttip-price {
+  padding: 10px 20px 10px 10px;
+  border-top: 3px solid var(--color-primary);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: end !important;
+  -ms-flex-pack: end !important;
+  justify-content: flex-end !important;
+  gap: 6px;
+}
+.cart-ttip .cart-ttip-price p {
+  color: #000;
+  width: auto;
+  padding: 0;
+  margin: 0;
+}
+.cart-ttip .cart-ttip-price p:first-child {
+  font-size: 15px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+.cart-ttip .cart-ttip-price p:nth-child(2) {
+  font-size: 13px;
+  font-weight: 200;
+  color: var(--color-primary);
+  margin-left: 0 !important;
+}
+.cart-ttip .cart-ttip-price p:last-child {
+  font-size: 15px;
+  font-weight: 700;
+}
+.cart-ttip .compare-item {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  -webkit-box-shadow: 0 1px 8px rgb(0 0 0 / 25%);
+  box-shadow: 0 1px 8px rgb(0 0 0 / 25%);
+  padding: 10px;
+  border-radius: 10px;
+  max-width: 360px;
+  background: #fff;
+}
+.cart-ttip .compare-item img {
+  width: 80px;
+  border: 5px;
+}
+.cart-ttip .compare-item .compare-item-text {
+  display: inline-block;
+  padding: 0 10px;
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+.cart-ttip .compare-item .compare-item-text p {
+  background: 0 0;
+  color: #000;
+  padding: 0;
+  width: 100%;
+  word-break: break-word;
+  line-height: 24px;
+  margin-left: 0;
+}
+.cart-ttip .header-null-cart {
+  width: 100%;
+  text-align: center;
+  padding: 24px;
+  color: #000;
+  font-size: 14px;
+  font-weight: 600;
+}
+.static-icons {
+  background-image: url(../images/static-icons-map-pc.png);
+  background-repeat: no-repeat;
+  display: inline-block;
+  background-size: 240px 227px;
+}
+.static-icons-static-icon-category-grid {
+  width: 23px;
+  height: 20px;
+  background-position: -2px -2px;
+}
+.static-icons-static-icon-category-list {
+  width: 23px;
+  height: 20px;
+  background-position: -30px -2px;
+}
+.static-icons-static-icon-feature-calendar {
+  width: 32px;
+  height: 32px;
+  background-position: -57px -2px;
+}
+.static-icons-static-icon-feature-calendar-orange {
+  width: 36px;
+  height: 36px;
+  background-position: -94px -2px;
+}
+.static-icons-static-icon-feature-delivery {
+  width: 32px;
+  height: 26px;
+  background-position: -135px -2px;
+}
+.static-icons-static-icon-feature-delivery-orange {
+  width: 46px;
+  height: 36px;
+  background-position: -2px -33px;
+}
+.static-icons-static-icon-feature-phone {
+  width: 32px;
+  height: 32px;
+  background-position: -135px -33px;
+}
+.static-icons-static-icon-feature-wallet {
+  width: 32px;
+  height: 31px;
+  background-position: -53px -70px;
+}
+.static-icons-static-icon-fire {
+  width: 21px;
+  height: 30px;
+  background-position: -90px -70px;
+}
+.static-icons-static-icon-header-cart {
+  width: 20px;
+  height: 20px;
+  background-position: -116px -70px;
+}
+.static-icons-static-icon-header-cart-pro {
+  width: 20px;
+  height: 20px;
+  background-position: -141px -70px;
+}
+.static-icons-static-icon-header-cart-pro-big {
+  width: 26px;
+  height: 25px;
+  background-position: -2px -95px;
+}
+.static-icons-static-icon-header-delivery {
+  width: 24px;
+  height: 20px;
+  background-position: -166px -70px;
+}
+.static-icons-static-icon-header-phone {
+  width: 24px;
+  height: 24px;
+  background-position: -116px -95px;
+}
+.static-icons-static-icon-header-search {
+  width: 20px;
+  height: 20px;
+  background-position: -145px -95px;
+}
+.static-icons-static-icon-header-user {
+  width: 22px;
+  height: 24px;
+  background-position: -33px -120px;
+}
+.static-icons-static-icon-location {
+  width: 13px;
+  height: 14px;
+  background-position: -172px -2px;
+}
+.static-icons-static-icon-phone-ct {
+  width: 14px;
+  height: 14px;
+  background-position: -172px -21px;
+}
+.static-icons-static-icon-phone-ct-orange {
+  width: 26px;
+  height: 28px;
+  background-position: -60px -120px;
+}
+.static-icons-static-icon-red-gift {
+  width: 16px;
+  height: 16px;
+  background-position: -53px -40px;
+}
+.static-icons-static-icon-review-user {
+  width: 31px;
+  height: 31px;
+  background-position: -145px -120px;
+}
+.static-icons-static-icon-social-fb {
+  width: 42px;
+  height: 42px;
+  background-position: -191px -2px;
+}
+.static-icons-static-icon-social-fb-orange {
+  width: 34px;
+  height: 34px;
+  background-position: -195px -49px;
+}
+.static-icons-static-icon-social-gg-news {
+  width: 42px;
+  height: 42px;
+  background-position: -195px -88px;
+}
+.static-icons-static-icon-social-gg-news-orange {
+  width: 34px;
+  height: 34px;
+  background-position: -91px -135px;
+}
+.static-icons-static-icon-social-instagram {
+  width: 42px;
+  height: 42px;
+  background-position: -181px -135px;
+}
+.static-icons-static-icon-social-instagram-orange {
+  width: 34px;
+  height: 34px;
+  background-position: -2px -182px;
+}
+.static-icons-static-icon-social-twitter {
+  width: 42px;
+  height: 42px;
+  background-position: -41px -182px;
+}
+.static-icons-static-icon-social-youtube {
+  width: 42px;
+  height: 42px;
+  background-position: -88px -182px;
+}
+.static-icons-static-icon-star-orange {
+  width: 13px;
+  height: 12px;
+  background-position: -75px -50px;
+}
+.static-icons-static-icon-thunder {
+  width: 27px;
+  height: 41px;
+  background-position: -135px -182px;
+}
+@-webkit-keyframes gradient-bg-antimation {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+@keyframes gradient-bg-antimation {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+.heading-primary .title {
+  font-size: 32px;
+  line-height: 38px;
+  font-weight: 700;
+  padding: 24px 0;
+}
+.heading-primary .offsite-wrapper {
+  width: 100%;
+  flex: 1;
+  line-height: 24px;
+  border-bottom: 2px solid var(--color-secondary);
+  text-align: right;
+}
+.heading-primary .view-more {
+  position: relative;
+  display: inline-block;
+  color: var(--color-primary);
+  transform: translateY(-2px);
+  line-height: 20px;
+  margin-right: 4px;
+}
+.heading-primary .view-more::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border-bottom: 1px solid var(--color-primary);
+}
+.global-time-deal {
+  font-size: 20px;
+  line-height: 30px;
+  gap: 4px;
+}
+.global-time-deal p {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  background: #171717;
+  border-radius: 5px;
+  min-width: 26px;
+  line-height: 36px;
+  padding: 0 4px;
+}
+.header {
+  box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.25);
+}
+.header .header-top .row {
+  height: 40px;
+}
+.header .header-bottom .row {
+  height: 105px;
+}
+.header .header-bottom .category .image {
+  height: 25px;
+}
+.header .header-bottom .function .icon {
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #ebe9eb;
+  border-radius: 5px;
+}
+.homepage .swiper-section-hero .swiper-pagination-bullet {
+  width: 14px;
+  height: 14px;
+  border: 2px solid #fff;
+  background-color: transparent;
+  opacity: 1;
+}
+.homepage .swiper-section-hero .swiper-pagination-bullet-active {
+  background-color: var(--color-primary);
+  border-color: transparent;
+}
+.homepage .swiper-section-hero .wrapper-content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.homepage .swiper-section-hero .wrapper-content .title {
+  font-size: 64px;
+  line-height: 78px;
+  font-weight: 600;
+  max-width: 484px;
+  margin: 0 auto;
+}
+.homepage .swiper-section-hero .wrapper-content .text {
+  font-size: 20px;
+  line-height: 24px;
+  max-width: 666px;
+  margin: 12px auto 0;
+}
+.homepage .section-brand {
+  border-radius: 15px;
+}
+.homepage .section-brand .swiper {
+  margin: 0 30px;
+  padding: 30px 0;
+}
+/*  */
+.homepage .section-deal .heading-deal {
+  background-color: var(--color-primary);
+  border-radius: 15px;
+  padding: 10px 16px;
+  color: white;
+  margin-bottom: 20px;
+}
+.homepage .section-deal .heading-deal .wrapper-title {
+  font-size: 40px;
+  line-height: 48px;
+  font-weight: 900;
+}
+.homepage .section-deal .product-deal .wrapper-deal {
+  height: 20px;
+  width: 100%;
+}
+.homepage .section-deal .product-deal .wrapper-deal .deal-line {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  border-radius: 10px;
+  background: linear-gradient(270deg, #ffb800 0%, #ff7a30 100%);
+}
+.homepage .section-deal .product-deal .wrapper-deal .deal-line.total {
+  opacity: 0.3;
+}
+.homepage .section-deal .product-deal .wrapper-deal .deal-line.remaining {
+  background: -o-repeating-linear-gradient(
+    left,
+    #ffb800 0,
+    #ff7a30 50%,
+    #ffb800 100%
+  );
+  background: repeating-linear-gradient(
+    to right,
+    #ffb800 0,
+    #ff7a30 50%,
+    #ffb800 100%
+  );
+  background-size: 200% auto;
+  background-position: 0 100%;
+  -webkit-animation: 2s linear infinite forwards gradient-bg-antimation;
+  animation: 2s linear infinite forwards gradient-bg-antimation;
+}
+.homepage .section-deal .product-deal .wrapper-deal .static-icons {
+  position: absolute;
+  bottom: 2px;
+  left: 0;
+}
+.homepage .section-deal .product-deal .wrapper-deal .sold {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.homepage .section-deal .product-deal .p-deal-featured .p-cart {
+  height: 50px;
+  border: 1px solid var(--color-primary);
+  border-radius: 10px;
+}
+.homepage .section-deal .product-deal .p-deal-featured .p-image {
+  border-radius: 25px;
+  border: 4px solid var(--color-primary);
+}
+.homepage .section-deal .product-deal .p-deal-other .p-image {
+  max-width: 124px;
+  width: 100%;
+  padding-bottom: 0;
+  border-radius: 8px;
+}
+.homepage .section-deal .product-deal .p-deal-other .swiper {
+  height: 392px;
+}
+
+.homepage .section-deal .banner-deal-image {
+  position: relative;
+  border-radius: 15px;
+  overflow: hidden;
+  display: block;
+}
+.homepage .section-deal .banner-deal-image .overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.homepage .section-deal .banner-deal-image .wrapper-content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: #fff;
+  max-width: 335px;
+  width: 100%;
+  text-align: center;
+}
+.homepage .section-deal .banner-deal-image .wrapper-content .title {
+  font-size: 36px;
+  line-height: 44px;
+  font-weight: 600px;
+}
+.homepage .section-deal .banner-deal-image .wrapper-content .btn {
+  padding: 13px 33px;
+  width: max-content;
+  margin: 0 auto;
+  border-radius: 10px;
+}
+
+/*  */
+.homepage .section-category .category-child {
+  border-bottom: 1px solid #d9d9d9;
+}
+.homepage .section-category .category-child .list {
+  gap: 50px;
+}
+.homepage .section-category .category-child .item {
+  position: relative;
+  cursor: pointer;
+  padding-bottom: 10px;
+  transform: translateY(1px);
+}
+.homepage .section-category .category-child .item.selected {
+  color: var(--color-primary);
+}
+.homepage .section-category .category-child .item.selected::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border-bottom: 1px solid var(--color-primary);
+}
+.homepage .section-customer .list {
+  margin: 12px 0 38px;
+}
+.homepage .section-customer .customer-product-review {
+  border-top: 1px solid var(--color-primary);
+}
+
+.homepage .section-customer .customer-product-image {
+  border-radius: 15px;
+}
+
+/*  */
+.p-item .p-image {
+  position: relative;
+  padding-bottom: 100%;
+  overflow: hidden;
+  display: flex;
+}
+.p-item .p-img {
+  margin: auto 0;
+  bottom: 0;
+  right: 0;
+  top: 0;
+  left: 0;
+  position: absolute;
+}
+.p-item .p-name {
+  display: block;
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 600;
+  margin: 12px 0 8px;
+}
+.p-item .p-price-sale {
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: 700;
+  color: var(--color-primary);
+}
+.p-item .p-price-stock {
+  font-size: 14px;
+  line-height: 24px;
+  font-weight: 500;
+  color: #b7b7b7;
+  text-decoration: line-through;
+  margin-left: 8px;
+}
+.p-item .p-summary {
+  font-size: 13px;
+  line-height: 18px;
+  max-width: 190px;
+}
+.p-item .p-cart {
+  width: 40px;
+  height: 40px;
+  border: 1px solid var(--color-primary);
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.footer .footer-top .features {
+  border-top: 1px solid #f0f0f0;
+  height: 110px;
+}
+.footer .footer-mid {
+  background-color: #f0f0f0;
+}
+.footer .footer-mid .row {
+  height: 180px;
+}
+.footer .footer-bottom {
+  padding: 30px 0 40px;
+}
+.footer .footer-bottom .list li:not(:last-child) {
+  margin-bottom: 8px;
+}
+.footer .footer-bottom .list a:hover {
+  color: var(--color-primary);
+}
+.footer .footer-bottom .ministry-of-industry-and-trade {
+  max-width: 140px;
+  margin-top: 30px;
+}
+.footer .copy-right {
+  border-top: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+/*  */
+.category-page .banner .overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.3);
+  font-size: 40px;
+  line-height: 48px;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #fff;
+}
+.category-page .sort {
+  border-bottom: 1px solid #f0f0f0;
+}
+.category-page .sort .sort-by-collection select {
+  width: 156px;
+  height: 36px;
+  border-radius: 8px;
+  background-color: #f0f0f0;
+  outline: 0;
+  border: 0;
+  padding: 4px;
+}
+.category-page .filter {
+  background-color: #f0f0f0;
+  border-radius: 15px;
+  padding: 16px 8px;
+}
+.category-page .filter .filter-item {
+  border-top: 1px solid #1f1f1f;
+  padding-top: 12px;
+}
+.category-page .filter .filter-item .list .check-box {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  background-color: #ffffff;
+  border-radius: 3px;
+}
+
+/*  */
+.color-green {
+  color: #64c800;
+}
+.color-blue {
+  color: #0079c8;
+}
+.gray-line {
+  width: 100%;
+  height: 1px;
+  border-bottom: 1px solid #e1e1e1;
+}
+.detail-page .section-product .pro-name {
+  font-size: 32px;
+  line-height: 40px;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+.detail-page .section-product .pro-sub-title {
+  line-height: 26px;
+}
+.detail-page .section-product .pro-price .title {
+  font-size: 16px;
+  line-height: 20px;
+  font-weight: 700;
+  display: inline-block;
+  width: 90px;
+}
+.detail-page .section-product .pro-status .pro-status-item {
+  padding: 8px 12px;
+  background: #f0f0f0;
+  border-radius: 8px;
+  display: inline-block;
+}
+.detail-page .section-product .pro-gift .title {
+  font-size: 16px;
+  line-height: 26px;
+  font-weight: 700;
+  color: var(--color-primary);
+}
+.detail-page .section-product .pro-gift .list {
+  position: relative;
+  padding: 16px;
+  background: #f0f0f0;
+  border-radius: 15px;
+}
+.detail-page .section-product .pro-gift .list::after {
+  position: absolute;
+  content: "";
+  top: -12px;
+  left: 60px;
+  width: 20px;
+  height: 12px;
+  clip-path: polygon(50% 0%, 0 100%, 100% 100%);
+  background: #f0f0f0;
+}
+.detail-page .section-product .pro-gift .list .item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+.detail-page .section-product .pro-gift .list .marker {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: var(--color-primary);
+  font-size: 12px;
+  line-height: 13px;
+  font-weight: 700;
+  color: #fff;
+}
+.detail-page .section-product .pro-cart .pro-cart-quantity {
+  max-width: 72px;
+  width: 100%;
+  height: 50px;
+  background: #f0f0f0;
+  border-radius: 5px;
+  outline: 0;
+  border: 0;
+  padding: 12px 18px;
+  font-size: 16px;
+  font-weight: 700;
+}
+.detail-page .section-product .pro-cart .pro-cart-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 245px;
+  width: 100%;
+  height: 50px;
+  border-radius: 25px;
+  border: 1px solid var(--color-primary);
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.detail-page .section-review .review-form {
+  padding: 20px 12px 30px;
+  border: 1px solid #e1e1e1;
+  border-radius: 15px;
+}
+.detail-page .section-review .review-form .review-form-item {
+  margin-bottom: 20px;
+}
+.detail-page .section-review .review-form .review-form-item .r-input {
+  background: #ffffff;
+  border: 1px solid #d9d9d9;
+  border-radius: 10px;
+  height: 42px;
+  width: 100%;
+  font-size: 14px;
+  line-height: 18px;
+  padding: 10px;
+  outline-color: #d7d7d7;
+}
+.detail-page .section-review .review-form .review-form-item textarea.r-input {
+  height: 106px;
+  resize: none;
+  margin-bottom: -4px;
+}
+
+.detail-page .section-review .review-form .review-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 212px;
+  height: 42px;
+  background: #1f1f1f;
+  border-radius: 10px;
+  font-size: 16px;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #fff;
+}
diff --git a/demo-audio-2/images/audio-logo.png b/demo-audio-2/images/audio-logo.png
new file mode 100644
index 0000000..55734c6
Binary files /dev/null and b/demo-audio-2/images/audio-logo.png differ
diff --git a/demo-audio-2/images/favicon.png b/demo-audio-2/images/favicon.png
new file mode 100644
index 0000000..5dc9b48
Binary files /dev/null and b/demo-audio-2/images/favicon.png differ
diff --git a/demo-audio-2/images/icons/static-icon-category-grid.png b/demo-audio-2/images/icons/static-icon-category-grid.png
new file mode 100644
index 0000000..e111e9a
Binary files /dev/null and b/demo-audio-2/images/icons/static-icon-category-grid.png differ
diff --git a/demo-audio-2/images/icons/static-icon-category-list.png b/demo-audio-2/images/icons/static-icon-category-list.png
new file mode 100644
index 0000000..b1cfe09
Binary files /dev/null and b/demo-audio-2/images/icons/static-icon-category-list.png differ
diff --git a/demo-audio-2/images/icons/static-icon-feature-calendar-orange.png b/demo-audio-2/images/icons/static-icon-feature-calendar-orange.png
new file mode 100644
index 0000000..d7dbc37
Binary files /dev/null and b/demo-audio-2/images/icons/static-icon-feature-calendar-orange.png differ
diff --git a/demo-audio-2/images/icons/static-icon-feature-calendar.png b/demo-audio-2/images/icons/static-icon-feature-calendar.png
new file mode 100644
index 0000000..0b256a2
Binary files /dev/null and b/demo-audio-2/images/icons/static-icon-feature-calendar.png differ
diff --git a/demo-audio-2/images/icons/static-icon-feature-delivery-orange.png b/demo-audio-2/images/icons/static-icon-feature-delivery-orange.png
new file mode 100644
index 0000000..d573d64
Binary files /dev/null and b/demo-audio-2/images/icons/static-icon-feature-delivery-orange.png differ
diff --git a/demo-audio-2/images/icons/static-icon-feature-delivery.png b/demo-audio-2/images/icons/static-icon-feature-delivery.png
new file mode 100644
index 0000000..aee71e9
Binary files /dev/null and b/demo-audio-2/images/icons/static-icon-feature-delivery.png differ
diff --git a/demo-audio-2/images/icons/static-icon-feature-phone.png b/demo-audio-2/images/icons/static-icon-feature-phone.png
new file mode 100644
index 0000000..244a4ea
Binary files /dev/null and b/demo-audio-2/images/icons/static-icon-feature-phone.png differ
diff --git a/demo-audio-2/images/icons/static-icon-feature-wallet.png b/demo-audio-2/images/icons/static-icon-feature-wallet.png
new file mode 100644
index 0000000..3b9ea35
Binary files /dev/null and b/demo-audio-2/images/icons/static-icon-feature-wallet.png differ
diff --git a/demo-audio-2/images/icons/static-icon-fire.png b/demo-audio-2/images/icons/static-icon-fire.png
new file mode 100644
index 0000000..d68c1cb
Binary files /dev/null and b/demo-audio-2/images/icons/static-icon-fire.png differ
diff --git a/demo-audio-2/images/icons/static-icon-header-cart-pro-big.png b/demo-audio-2/images/icons/static-icon-header-cart-pro-big.png
new file mode 100644
index 0000000..dfd42df
Binary files /dev/null and b/demo-audio-2/images/icons/static-icon-header-cart-pro-big.png differ
diff --git a/demo-audio-2/images/icons/static-icon-header-cart-pro.png b/demo-audio-2/images/icons/static-icon-header-cart-pro.png
new file mode 100644
index 0000000..bf3a8b8
Binary files /dev/null and b/demo-audio-2/images/icons/static-icon-header-cart-pro.png differ
diff --git a/demo-audio-2/images/icons/static-icon-header-cart.png b/demo-audio-2/images/icons/static-icon-header-cart.png
new file mode 100644
index 0000000..47cf4ff
Binary files /dev/null and b/demo-audio-2/images/icons/static-icon-header-cart.png differ
diff --git a/demo-audio-2/images/icons/static-icon-header-delivery.png b/demo-audio-2/images/icons/static-icon-header-delivery.png
new file mode 100644
index 0000000..68dbeef
Binary files /dev/null and b/demo-audio-2/images/icons/static-icon-header-delivery.png differ
diff --git a/demo-audio-2/images/icons/static-icon-header-phone.png b/demo-audio-2/images/icons/static-icon-header-phone.png
new file mode 100644
index 0000000..7e8fbf6
Binary files /dev/null and b/demo-audio-2/images/icons/static-icon-header-phone.png differ
diff --git a/demo-audio-2/images/icons/static-icon-header-search.png b/demo-audio-2/images/icons/static-icon-header-search.png
new file mode 100644
index 0000000..b8caada
Binary files /dev/null and b/demo-audio-2/images/icons/static-icon-header-search.png differ
diff --git a/demo-audio-2/images/icons/static-icon-header-user.png b/demo-audio-2/images/icons/static-icon-header-user.png
new file mode 100644
index 0000000..c17b50e
Binary files /dev/null and b/demo-audio-2/images/icons/static-icon-header-user.png differ
diff --git a/demo-audio-2/images/icons/static-icon-location.png b/demo-audio-2/images/icons/static-icon-location.png
new file mode 100644
index 0000000..2ab1b62
Binary files /dev/null and b/demo-audio-2/images/icons/static-icon-location.png differ
diff --git a/demo-audio-2/images/icons/static-icon-phone-ct-orange.png b/demo-audio-2/images/icons/static-icon-phone-ct-orange.png
new file mode 100644
index 0000000..8dad5f8
Binary files /dev/null and b/demo-audio-2/images/icons/static-icon-phone-ct-orange.png differ
diff --git a/demo-audio-2/images/icons/static-icon-phone-ct.png b/demo-audio-2/images/icons/static-icon-phone-ct.png
new file mode 100644
index 0000000..92a3ef1
Binary files /dev/null and b/demo-audio-2/images/icons/static-icon-phone-ct.png differ
diff --git a/demo-audio-2/images/icons/static-icon-red-gift.png b/demo-audio-2/images/icons/static-icon-red-gift.png
new file mode 100644
index 0000000..3a81069
Binary files /dev/null and b/demo-audio-2/images/icons/static-icon-red-gift.png differ
diff --git a/demo-audio-2/images/icons/static-icon-review-user.png b/demo-audio-2/images/icons/static-icon-review-user.png
new file mode 100644
index 0000000..9ee785c
Binary files /dev/null and b/demo-audio-2/images/icons/static-icon-review-user.png differ
diff --git a/demo-audio-2/images/icons/static-icon-social-fb-orange.png b/demo-audio-2/images/icons/static-icon-social-fb-orange.png
new file mode 100644
index 0000000..16ce5a8
Binary files /dev/null and b/demo-audio-2/images/icons/static-icon-social-fb-orange.png differ
diff --git a/demo-audio-2/images/icons/static-icon-social-fb.png b/demo-audio-2/images/icons/static-icon-social-fb.png
new file mode 100644
index 0000000..4a44c75
Binary files /dev/null and b/demo-audio-2/images/icons/static-icon-social-fb.png differ
diff --git a/demo-audio-2/images/icons/static-icon-social-gg-news-orange.png b/demo-audio-2/images/icons/static-icon-social-gg-news-orange.png
new file mode 100644
index 0000000..7c9deb6
Binary files /dev/null and b/demo-audio-2/images/icons/static-icon-social-gg-news-orange.png differ
diff --git a/demo-audio-2/images/icons/static-icon-social-gg-news.png b/demo-audio-2/images/icons/static-icon-social-gg-news.png
new file mode 100644
index 0000000..97c1027
Binary files /dev/null and b/demo-audio-2/images/icons/static-icon-social-gg-news.png differ
diff --git a/demo-audio-2/images/icons/static-icon-social-instagram-orange.png b/demo-audio-2/images/icons/static-icon-social-instagram-orange.png
new file mode 100644
index 0000000..acef936
Binary files /dev/null and b/demo-audio-2/images/icons/static-icon-social-instagram-orange.png differ
diff --git a/demo-audio-2/images/icons/static-icon-social-instagram.png b/demo-audio-2/images/icons/static-icon-social-instagram.png
new file mode 100644
index 0000000..bbaab48
Binary files /dev/null and b/demo-audio-2/images/icons/static-icon-social-instagram.png differ
diff --git a/demo-audio-2/images/icons/static-icon-social-twitter.png b/demo-audio-2/images/icons/static-icon-social-twitter.png
new file mode 100644
index 0000000..302fda8
Binary files /dev/null and b/demo-audio-2/images/icons/static-icon-social-twitter.png differ
diff --git a/demo-audio-2/images/icons/static-icon-social-youtube.png b/demo-audio-2/images/icons/static-icon-social-youtube.png
new file mode 100644
index 0000000..0278ba4
Binary files /dev/null and b/demo-audio-2/images/icons/static-icon-social-youtube.png differ
diff --git a/demo-audio-2/images/icons/static-icon-star-orange.png b/demo-audio-2/images/icons/static-icon-star-orange.png
new file mode 100644
index 0000000..da8f7bc
Binary files /dev/null and b/demo-audio-2/images/icons/static-icon-star-orange.png differ
diff --git a/demo-audio-2/images/icons/static-icon-thunder.png b/demo-audio-2/images/icons/static-icon-thunder.png
new file mode 100644
index 0000000..6fd0f68
Binary files /dev/null and b/demo-audio-2/images/icons/static-icon-thunder.png differ
diff --git a/demo-audio-2/images/icons/static-icons-map-pc.png b/demo-audio-2/images/icons/static-icons-map-pc.png
new file mode 100644
index 0000000..ebe270f
Binary files /dev/null and b/demo-audio-2/images/icons/static-icons-map-pc.png differ
diff --git a/demo-audio-2/images/star_rating_2022.png b/demo-audio-2/images/star_rating_2022.png
new file mode 100644
index 0000000..c4cba66
Binary files /dev/null and b/demo-audio-2/images/star_rating_2022.png differ
diff --git a/demo-audio-2/images/star_sprite.png b/demo-audio-2/images/star_sprite.png
new file mode 100644
index 0000000..58409ed
Binary files /dev/null and b/demo-audio-2/images/star_sprite.png differ
diff --git a/demo-audio-2/images/static-banner-category-img-1.jpg b/demo-audio-2/images/static-banner-category-img-1.jpg
new file mode 100644
index 0000000..5e0491a
Binary files /dev/null and b/demo-audio-2/images/static-banner-category-img-1.jpg differ
diff --git a/demo-audio-2/images/static-banner-category-img-1.png b/demo-audio-2/images/static-banner-category-img-1.png
new file mode 100644
index 0000000..74a7acb
Binary files /dev/null and b/demo-audio-2/images/static-banner-category-img-1.png differ
diff --git a/demo-audio-2/images/static-banner-hero-img-1.jpg b/demo-audio-2/images/static-banner-hero-img-1.jpg
new file mode 100644
index 0000000..4923e07
Binary files /dev/null and b/demo-audio-2/images/static-banner-hero-img-1.jpg differ
diff --git a/demo-audio-2/images/static-banner-hero-img-1.png b/demo-audio-2/images/static-banner-hero-img-1.png
new file mode 100644
index 0000000..01c75ae
Binary files /dev/null and b/demo-audio-2/images/static-banner-hero-img-1.png differ
diff --git a/demo-audio-2/images/static-banner-review-img-1.png b/demo-audio-2/images/static-banner-review-img-1.png
new file mode 100644
index 0000000..9f9f57d
Binary files /dev/null and b/demo-audio-2/images/static-banner-review-img-1.png differ
diff --git a/demo-audio-2/images/static-banner-review-img-2.png b/demo-audio-2/images/static-banner-review-img-2.png
new file mode 100644
index 0000000..68ada90
Binary files /dev/null and b/demo-audio-2/images/static-banner-review-img-2.png differ
diff --git a/demo-audio-2/images/static-banner-review-img-3.png b/demo-audio-2/images/static-banner-review-img-3.png
new file mode 100644
index 0000000..ed3d284
Binary files /dev/null and b/demo-audio-2/images/static-banner-review-img-3.png differ
diff --git a/demo-audio-2/images/static-banner-sale-img-1.png b/demo-audio-2/images/static-banner-sale-img-1.png
new file mode 100644
index 0000000..916c36c
Binary files /dev/null and b/demo-audio-2/images/static-banner-sale-img-1.png differ
diff --git a/demo-audio-2/images/static-banner-sale-img-2.png b/demo-audio-2/images/static-banner-sale-img-2.png
new file mode 100644
index 0000000..99268d7
Binary files /dev/null and b/demo-audio-2/images/static-banner-sale-img-2.png differ
diff --git a/demo-audio-2/images/static-banner-sale-img-3.png b/demo-audio-2/images/static-banner-sale-img-3.png
new file mode 100644
index 0000000..24005d1
Binary files /dev/null and b/demo-audio-2/images/static-banner-sale-img-3.png differ
diff --git a/demo-audio-2/images/static-brand-img-1.png b/demo-audio-2/images/static-brand-img-1.png
new file mode 100644
index 0000000..21bea65
Binary files /dev/null and b/demo-audio-2/images/static-brand-img-1.png differ
diff --git a/demo-audio-2/images/static-brand-img-2.png b/demo-audio-2/images/static-brand-img-2.png
new file mode 100644
index 0000000..624a93b
Binary files /dev/null and b/demo-audio-2/images/static-brand-img-2.png differ
diff --git a/demo-audio-2/images/static-brand-img-3.png b/demo-audio-2/images/static-brand-img-3.png
new file mode 100644
index 0000000..f06c37c
Binary files /dev/null and b/demo-audio-2/images/static-brand-img-3.png differ
diff --git a/demo-audio-2/images/static-brand-img-4.png b/demo-audio-2/images/static-brand-img-4.png
new file mode 100644
index 0000000..89a1554
Binary files /dev/null and b/demo-audio-2/images/static-brand-img-4.png differ
diff --git a/demo-audio-2/images/static-brand-img-5.png b/demo-audio-2/images/static-brand-img-5.png
new file mode 100644
index 0000000..a6ac273
Binary files /dev/null and b/demo-audio-2/images/static-brand-img-5.png differ
diff --git a/demo-audio-2/images/static-brand-img-6.png b/demo-audio-2/images/static-brand-img-6.png
new file mode 100644
index 0000000..b71662a
Binary files /dev/null and b/demo-audio-2/images/static-brand-img-6.png differ
diff --git a/demo-audio-2/images/static-category-icon-1.png b/demo-audio-2/images/static-category-icon-1.png
new file mode 100644
index 0000000..50a4758
Binary files /dev/null and b/demo-audio-2/images/static-category-icon-1.png differ
diff --git a/demo-audio-2/images/static-category-icon-2.png b/demo-audio-2/images/static-category-icon-2.png
new file mode 100644
index 0000000..fe37cfa
Binary files /dev/null and b/demo-audio-2/images/static-category-icon-2.png differ
diff --git a/demo-audio-2/images/static-category-icon-3.png b/demo-audio-2/images/static-category-icon-3.png
new file mode 100644
index 0000000..7937569
Binary files /dev/null and b/demo-audio-2/images/static-category-icon-3.png differ
diff --git a/demo-audio-2/images/static-category-icon-4.png b/demo-audio-2/images/static-category-icon-4.png
new file mode 100644
index 0000000..61c3a33
Binary files /dev/null and b/demo-audio-2/images/static-category-icon-4.png differ
diff --git a/demo-audio-2/images/static-category-icon-5.png b/demo-audio-2/images/static-category-icon-5.png
new file mode 100644
index 0000000..d9b505e
Binary files /dev/null and b/demo-audio-2/images/static-category-icon-5.png differ
diff --git a/demo-audio-2/images/static-category-icon-6.png b/demo-audio-2/images/static-category-icon-6.png
new file mode 100644
index 0000000..96721c7
Binary files /dev/null and b/demo-audio-2/images/static-category-icon-6.png differ
diff --git a/demo-audio-2/images/static-icons-map-pc.png b/demo-audio-2/images/static-icons-map-pc.png
new file mode 100644
index 0000000..ebe270f
Binary files /dev/null and b/demo-audio-2/images/static-icons-map-pc.png differ
diff --git a/demo-audio-2/images/static-image-bct.png b/demo-audio-2/images/static-image-bct.png
new file mode 100644
index 0000000..dc4b1d0
Binary files /dev/null and b/demo-audio-2/images/static-image-bct.png differ
diff --git a/demo-audio-2/images/static-image-pro-1.png b/demo-audio-2/images/static-image-pro-1.png
new file mode 100644
index 0000000..4c31ac2
Binary files /dev/null and b/demo-audio-2/images/static-image-pro-1.png differ
diff --git a/demo-audio-2/index.html b/demo-audio-2/index.html
new file mode 100644
index 0000000..8692eaa
--- /dev/null
+++ b/demo-audio-2/index.html
@@ -0,0 +1,1293 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
+    rel="stylesheet">
+
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
+
+  <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
+
+  <link rel="stylesheet" href="/css/library.css">
+  <link rel="stylesheet" href="/css/style_pc.css">
+
+</head>
+
+<body>
+  <!-- HEADER -->
+  <header class="header">
+    <!-- HEADER TOP -->
+    <div class="header-top bg-secondary">
+      <div class="container">
+        <div class="row align-items-center">
+          <div class="col-3">
+            <div class="wrapper d-flex align-items-center">
+              <i class="static-icons static-icons-static-icon-header-delivery"></i>
+              <span class="text-14 color-white ml-2">Freeship cho đơn hàng từ 1.000.000đ</span>
+            </div>
+          </div>
+          <div class="col-3 offset-5">
+            <div class="wrapper d-flex align-items-center">
+              <i class="static-icons static-icons-static-icon-header-phone"></i>
+              <span class="text-14 color-white ml-2">
+                Hotline 24/7:
+                <a href="tel:1900xxxx" class="font-weight-700">1900 XXXX</a></span>
+            </div>
+          </div>
+          <div class="col-1">
+            <div class="wrapper d-flex align-items-center">
+              <i class="static-icons static-icons-static-icon-header-user"></i>
+              <span class="text-14 color-white">Tài khoản</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- HEADER BOTTOM -->
+    <div class="header-bottom">
+      <div class="container">
+        <div class="row align-items-center">
+          <div class="col-2">
+            <a href="/" class="logo">
+              <img src="/images/audio-logo.png" alt="Logo" class="d-flex w-100">
+            </a>
+          </div>
+          <div class="col-9 category">
+            <ul class="list d-flex align-items-center justify-content-around">
+              <li class="item">
+                <a href="javascript:;">
+                  <div class="image mb-2">
+                    <img src="/images/static-category-icon-1.png" alt="category icon" class="d-flex h-100 m-auto">
+                  </div>
+                  <p class="text text-14 text-uppercase">Hi-end</p>
+                </a>
+              </li>
+              <li class="item">
+                <a href="javascript:;">
+                  <div class="image mb-2">
+                    <img src="/images/static-category-icon-2.png" alt="category icon" class="d-flex h-100 m-auto">
+                  </div>
+                  <p class="text text-14 text-uppercase">Hi-end</p>
+                </a>
+              </li>
+              <li class="item">
+                <a href="javascript:;">
+                  <div class="image mb-2">
+                    <img src="/images/static-category-icon-3.png" alt="category icon" class="d-flex h-100 m-auto">
+                  </div>
+                  <p class="text text-14 text-uppercase">Hi-end</p>
+                </a>
+              </li>
+              <li class="item">
+                <a href="javascript:;">
+                  <div class="image mb-2">
+                    <img src="/images/static-category-icon-4.png" alt="category icon" class="d-flex h-100 m-auto">
+                  </div>
+                  <p class="text text-14 text-uppercase">Hi-end</p>
+                </a>
+              </li>
+              <li class="item">
+                <a href="javascript:;">
+                  <div class="image mb-2">
+                    <img src="/images/static-category-icon-5.png" alt="category icon" class="d-flex h-100 m-auto">
+                  </div>
+                  <p class="text text-14 text-uppercase">Hi-end</p>
+                </a>
+              </li>
+              <li class="item">
+                <a href="javascript:;">
+                  <div class="image mb-2">
+                    <img src="/images/static-category-icon-6.png" alt="category icon" class="d-flex h-100 m-auto">
+                  </div>
+                  <p class="text text-14 text-uppercase">Hi-end</p>
+                </a>
+              </li>
+            </ul>
+          </div>
+          <div class="col-1 function">
+            <a href="javascript:;" class="icon p-relative">
+              <i class="static-icons static-icons-static-icon-header-search"></i>
+            </a>
+            <a href="/cart" class="icon">
+              <i class="static-icons static-icons-static-icon-header-cart"></i>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </header>
+
+  <!-- BREADCRUMB -->
+  <section class="section-breadcrumb routing py-12px">
+    <div class="global-breadcrumb container">
+      <ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="list-style-none d-flex">
+        <li class="routing-link" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
+          <a href="/" itemprop="item" class="nopad-l">
+            <span itemprop="name">Trang chủ</span>
+          </a>
+          <meta itemprop="position" content="1">
+        </li>
+        <li class="routing-link" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
+          <a href="/linh-kien-may-tinh" itemprop="item" class="nopad-l">
+            <span itemprop="name"> Linh kiện máy tính </span>
+          </a>
+          <meta itemprop="position" content="2">
+        </li>
+      </ol>
+    </div>
+  </section>
+
+  <!-- HOMEPAGE -->
+  <div class="homepage d-none">
+    <!-- SECTION HERO -->
+    <div class="section-hero">
+      <div class="swiper swiper-section-hero">
+        <div class="swiper-wrapper">
+          <div class="swiper-slide">
+            <img src="/images/static-banner-hero-img-1.png" alt="Banner" class="d-flex w-100">
+            <div class="wrapper-content text-center color-white">
+              <h4 class="title">MUSIC IS YOUR TIME MACHINE</h4>
+              <p class="text">
+                We hold our notes longer, better, and higher. We put the mental in instrumental and the cool in
+                musicool.
+              </p>
+            </div>
+          </div>
+          <div class="swiper-slide">
+            <img src="/images/static-banner-hero-img-1.png" alt="Banner" class="d-flex w-100">
+          </div>
+        </div>
+
+        <div class="swiper-pagination"></div>
+      </div>
+    </div>
+
+    <div class="container">
+      <!-- SECTION BRAND -->
+      <div class="section-brand bg-secondary mt-12px">
+        <div class="swiper swiper-section-banner">
+          <div class="swiper-wrapper">
+            <div class="swiper-slide">
+              <img src="/images/static-brand-img-1.png" alt="Brand" class="d-flex w-100">
+            </div>
+            <div class="swiper-slide">
+              <img src="/images/static-brand-img-2.png" alt="Brand" class="d-flex w-100">
+            </div>
+            <div class="swiper-slide">
+              <img src="/images/static-brand-img-3.png" alt="Brand" class="d-flex w-100">
+            </div>
+            <div class="swiper-slide">
+              <img src="/images/static-brand-img-4.png" alt="Brand" class="d-flex w-100">
+            </div>
+            <div class="swiper-slide">
+              <img src="/images/static-brand-img-5.png" alt="Brand" class="d-flex w-100">
+            </div>
+            <div class="swiper-slide">
+              <img src="/images/static-brand-img-6.png" alt="Brand" class="d-flex w-100">
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- SECTION DEAL -->
+      <div class="section-deal mt-12px">
+        <!-- HEADING -->
+        <div class="heading-deal row align-items-center">
+          <div class="col-4">
+            <div class="wrapper-title d-flex align-items-center gap-8">
+              <i class="title">Flash Sale</i>
+              <i class="static-icons static-icons-static-icon-thunder"></i>
+              <i class="time">15.02</i>
+            </div>
+          </div>
+          <div class="col-6 d-flex align-items-center gap-8">
+            <span>Kết thúc trong</span>
+            <div class="global-time-deal d-flex align-items-center font-weight-700 color-white">
+              <p>9</p>
+              <p>9</p>
+              <span>:</span>
+              <p>9</p>
+              <p>9</p>
+              <span>:</span>
+              <p>9</p>
+              <p>9</p>
+              <span>:</span>
+              <p>9</p>
+              <p>9</p>
+            </div>
+          </div>
+          <div class="col-2 text-right">
+            <a href="javascript:;" class="view-more">Xem tất cả +</a>
+          </div>
+        </div>
+
+        <!-- PRODUCT -->
+        <div class="product-deal row">
+          <div class="col-8">
+            <div class="p-deal-featured grid grid--2-cols align-items-end">
+              <div class="p-info text-right">
+                <a href="">
+                  <h3 class="p-name text-24 font-weight-600 mb-4">Lorem ipsum is placeholder text commonly used</h3>
+                </a>
+
+                <p class="p-price-sale text-32 font-weight-700 color-primary mb-1">72.880.000₫</p>
+
+                <p class="p-price-stock text-24 font-weight-500 color-gray-2 text-line-through">82.880.000₫</p>
+
+                <p class="p-summary font-weight-300 my-4">
+                  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+                    labore et dolore magna aliqua. Ut enim ad minim veniam ...</span>
+                </p>
+
+                <div class="wrapper-deal p-relative mb-4">
+                  <div class="deal-line total"></div>
+                  <div class="deal-line remaining"></div>
+                  <i class="static-icons static-icons-static-icon-fire"></i>
+                  <p class="sold text-12 color-white">Đã bán 30</p>
+                </div>
+
+                <a href="" class="p-cart d-flex align-items-center justify-content-center gap-8">
+                  <i class="static-icons static-icons-static-icon-header-cart-pro-big"></i>
+                  <span class="text-20 font-weight-500 color-primary text-uppercase">Cho vào giỏ hàng</span>
+                </a>
+
+              </div>
+              <div class="p-image">
+                <a href="">
+                  <img src="/images/static-image-pro-1.png" alt="Deal" class="d-flex w-100">
+                </a>
+              </div>
+            </div>
+          </div>
+          <div class="col-4">
+            <div class="p-deal-other">
+              <div class="swiper swiper-deal-list">
+                <div class="swiper-wrapper">
+                  <!-- SWIPER SLIDE -->
+                  <div class="swiper-slide">
+                    <div class="p-item d-flex gap-16">
+                      <a href="" class="p-image">
+                        <img src="/images/static-image-pro-1.png" alt="Deal" class="p-img d-flex w-100">
+                      </a>
+                      <div class="p-info">
+                        <a href="">
+                          <h3 class="p-name mt-1">Lorem ipsum is placeholder text commonly used</h3>
+                        </a>
+                        <p class="p-price">
+                          <span class="p-price-sale">72.880.000₫</span>
+                          <span class="p-price-stock">82.880.000₫</span>
+                        </p>
+                        <div class="wrapper d-flex align-items-end gap-32 mt-2">
+                          <div class="wrapper-deal p-relative flex-1 mb-2">
+                            <div class="deal-line total"></div>
+                            <div class="deal-line remaining"></div>
+                            <i class="static-icons static-icons-static-icon-fire"></i>
+                            <p class="sold text-12 color-white">Đã bán 30</p>
+                          </div>
+
+                          <a href="javascript:;" class="p-cart">
+                            <i class="static-icons static-icons-static-icon-header-cart-pro"></i>
+                          </a>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <!-- SWIPER SLIDE -->
+                  <div class="swiper-slide">
+                    <div class="p-item d-flex gap-16">
+                      <a href="" class="p-image">
+                        <img src="/images/static-image-pro-1.png" alt="Deal" class="p-img d-flex w-100">
+                      </a>
+                      <div class="p-info">
+                        <a href="">
+                          <h3 class="p-name mt-1">Lorem ipsum is placeholder text commonly used</h3>
+                        </a>
+                        <p class="p-price">
+                          <span class="p-price-sale">72.880.000₫</span>
+                          <span class="p-price-stock">82.880.000₫</span>
+                        </p>
+                        <div class="wrapper d-flex align-items-end gap-32 mt-2">
+                          <div class="wrapper-deal p-relative flex-1 mb-2">
+                            <div class="deal-line total"></div>
+                            <div class="deal-line remaining"></div>
+                            <i class="static-icons static-icons-static-icon-fire"></i>
+                            <p class="sold text-12 color-white">Đã bán 30</p>
+                          </div>
+
+                          <a href="javascript:;" class="p-cart">
+                            <i class="static-icons static-icons-static-icon-header-cart-pro"></i>
+                          </a>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <!-- SWIPER SLIDE -->
+                  <div class="swiper-slide">
+                    <div class="p-item d-flex gap-16">
+                      <a href="" class="p-image">
+                        <img src="/images/static-image-pro-1.png" alt="Deal" class="p-img d-flex w-100">
+                      </a>
+                      <div class="p-info">
+                        <a href="">
+                          <h3 class="p-name mt-1">Lorem ipsum is placeholder text commonly used</h3>
+                        </a>
+                        <p class="p-price">
+                          <span class="p-price-sale">72.880.000₫</span>
+                          <span class="p-price-stock">82.880.000₫</span>
+                        </p>
+                        <div class="wrapper d-flex align-items-end gap-32 mt-2">
+                          <div class="wrapper-deal p-relative flex-1 mb-2">
+                            <div class="deal-line total"></div>
+                            <div class="deal-line remaining"></div>
+                            <i class="static-icons static-icons-static-icon-fire"></i>
+                            <p class="sold text-12 color-white">Đã bán 30</p>
+                          </div>
+
+                          <a href="javascript:;" class="p-cart">
+                            <i class="static-icons static-icons-static-icon-header-cart-pro"></i>
+                          </a>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- BANNER -->
+        <div class="banner-deal mt-4">
+          <div class="row">
+            <div class="col-4">
+              <a href="javascript:;" class="banner-deal-image">
+                <img src="/images/static-banner-sale-img-1.png" alt="Deal" class="d-flex w-100">
+                <div class="overlay"></div>
+                <div class="wrapper-content">
+                  <p class="title mb-2">Save Up To 30%</p>
+                  <span class="text">Lorem ipsum dolor sit amet, consectetur</span>
+                  <p class="btn text-20 font-weight-500 mt-3 bg-primary">MUA NGAY</p>
+                </div>
+              </a>
+            </div>
+            <div class="col-4">
+              <a href="javascript:;" class="banner-deal-image">
+                <img src="/images/static-banner-sale-img-2.png" alt="Deal" class="d-flex w-100">
+                <div class="overlay"></div>
+                <div class="wrapper-content">
+                  <p class="title mb-2">Save Up To 30%</p>
+                  <span class="text">Lorem ipsum dolor sit amet, consectetur</span>
+                  <p class="btn text-20 font-weight-500 mt-3 bg-primary">MUA NGAY</p>
+                </div>
+              </a>
+            </div>
+            <div class="col-4">
+              <a href="javascript:;" class="banner-deal-image">
+                <img src="/images/static-banner-sale-img-3.png" alt="Deal" class="d-flex w-100">
+                <div class="overlay"></div>
+                <div class="wrapper-content">
+                  <p class="title mb-2">Save Up To 30%</p>
+                  <span class="text">Lorem ipsum dolor sit amet, consectetur</span>
+                  <p class="btn text-20 font-weight-500 mt-3 bg-primary">MUA NGAY</p>
+                </div>
+              </a>
+            </div>
+          </div>
+        </div>
+
+      </div>
+
+      <!-- SECTION CATEGORY -->
+      <div class="section-category mt-12px pb-4">
+        <div class="category-box">
+          <div class="heading-primary d-flex align-items-center gap-24">
+            <h2 class="title">Âm Thanh Hi-End</h2>
+            <div class="offsite-wrapper">
+              <a href="javascript:;" class="view-more">Xem tất cả +</a>
+            </div>
+          </div>
+
+          <div class="category-child mb-3">
+            <ul class="list d-flex align-items-center justify-content-center text-18 color-gray-2">
+              <li class="item hover-primary selected">Đầu phát Hi-end</li>
+              <li class="item hover-primary">DAC, Clock, Upsampler...</li>
+            </ul>
+          </div>
+
+          <div class="category-product grid grid--4-cols">
+            <div class="p-item">
+              <a href="" class="p-image">
+                <img src="/images/static-image-pro-1.png" alt="Product" class="p-img d-flex w-100">
+              </a>
+              <a href="">
+                <h3 class="p-name">Lorem ipsum is placeholder text commonly used</h3>
+              </a>
+              <div class="p-price d-flex">
+                <div class="p-price-sale">72.880.000₫</div>
+                <div class="p-price-stock">82.880.000₫</div>
+              </div>
+              <div class="p-wrapper d-flex align-items-center justify-content-between mt-2">
+                <div class="p-summary">
+                  <span class="ws-pre-line">+ Giá tốt nhất khi liên hệ ngay
+                    + Hỗ trợ kỹ thuật 24/7
+                    + Bảo hành chính hãng</span>
+                </div>
+                <a href="javascript:;" class="p-cart">
+                  <i class="static-icons static-icons-static-icon-header-cart-pro"></i>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- SECTION CUSTOMER -->
+      <div class="section-customer">
+        <div class="heading-primary d-flex align-items-center gap-24">
+          <h2 class="title">Khách hàng đã mua gần đây</h2>
+          <div class="offsite-wrapper">
+            <a href="javascript:;" class="view-more">Xem tất cả +</a>
+          </div>
+        </div>
+
+        <ul class="list row">
+          <li class="item col-4">
+            <div class="row">
+              <div class="col-6">
+                <img src="/images/static-banner-review-img-1.png" alt="Review"
+                  class="customer-product-image d-flex w-100">
+              </div>
+              <div class="col-6">
+                <div class="customer-product-review">
+                  <div class="star py-2">
+                    <i class="static-icons static-icons-static-icon-star-orange"></i>
+                    <i class="static-icons static-icons-static-icon-star-orange"></i>
+                    <i class="static-icons static-icons-static-icon-star-orange"></i>
+                    <i class="static-icons static-icons-static-icon-star-orange"></i>
+                    <i class="static-icons static-icons-static-icon-star-orange"></i>
+                  </div>
+                  <div class="review text-14 mb-2">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                    et dolore magna aliqua. Ut enim ad minim veniam ...
+                  </div>
+                  <div class="basic-info d-flex align-items-center gap-8">
+                    <i class="static-icons static-icons-static-icon-review-user"></i>
+                    <p class="text-12">
+                      <b class="d-block">Nguyễn Thị Hồng Nhung</b>
+                      0383100 ***
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li class="item col-4">
+            <div class="row">
+              <div class="col-6">
+                <img src="/images/static-banner-review-img-1.png" alt="Review"
+                  class="customer-product-image d-flex w-100">
+              </div>
+              <div class="col-6">
+                <div class="customer-product-review">
+                  <div class="star py-2">
+                    <i class="static-icons static-icons-static-icon-star-orange"></i>
+                    <i class="static-icons static-icons-static-icon-star-orange"></i>
+                    <i class="static-icons static-icons-static-icon-star-orange"></i>
+                    <i class="static-icons static-icons-static-icon-star-orange"></i>
+                    <i class="static-icons static-icons-static-icon-star-orange"></i>
+                  </div>
+                  <div class="review text-14 mb-2">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                    et dolore magna aliqua. Ut enim ad minim veniam ...
+                  </div>
+                  <div class="basic-info d-flex align-items-center gap-8">
+                    <i class="static-icons static-icons-static-icon-review-user"></i>
+                    <p class="text-12">
+                      <b class="d-block">Nguyễn Thị Hồng Nhung</b>
+                      0383100 ***
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li class="item col-4">
+            <div class="row">
+              <div class="col-6">
+                <img src="/images/static-banner-review-img-1.png" alt="Review"
+                  class="customer-product-image d-flex w-100">
+              </div>
+              <div class="col-6">
+                <div class="customer-product-review">
+                  <div class="star py-2">
+                    <i class="static-icons static-icons-static-icon-star-orange"></i>
+                    <i class="static-icons static-icons-static-icon-star-orange"></i>
+                    <i class="static-icons static-icons-static-icon-star-orange"></i>
+                    <i class="static-icons static-icons-static-icon-star-orange"></i>
+                    <i class="static-icons static-icons-static-icon-star-orange"></i>
+                  </div>
+                  <div class="review text-14 mb-2">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                    et dolore magna aliqua. Ut enim ad minim veniam ...
+                  </div>
+                  <div class="basic-info d-flex align-items-center gap-8">
+                    <i class="static-icons static-icons-static-icon-review-user"></i>
+                    <p class="text-12">
+                      <b class="d-block">Nguyễn Thị Hồng Nhung</b>
+                      0383100 ***
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+
+    </div>
+  </div>
+
+  <!-- CATEGORY PAGE -->
+  <div class="category-page d-none">
+    <div class="container">
+      <!-- BANNER -->
+      <div class="banner p-relative mb-3">
+        <img src="/images/static-banner-category-img-1.png" alt="Banner" class="d-flex w-100">
+        <h1 class="overlay d-flex align-items-center justify-content-center">Hi-end</h1>
+      </div>
+
+      <!-- MAIN CONTENT -->
+      <div class="main-content row">
+        <div class="col-9">
+          <!-- SORT -->
+          <div class="sort d-flex align-items-center justify-content-between pb-2">
+            <div class="wrapper-sort d-flex align-items-center gap-16">
+              <div class="sort-by-display d-flex gap-8">
+                <a href="" class="d-flex"><i class="static-icons static-icons-static-icon-category-grid"></i></a>
+                <a href="" class="d-flex"><i class="static-icons static-icons-static-icon-category-list"></i></a>
+              </div>
+              <p class="total-product">Tổng 865 sản phẩm</p>
+            </div>
+
+            <div class="sort-by-collection">
+              <select name="" id="">
+                <option value="">Sắp xếp theo</option>
+                <option value="">Giá giảm dần</option>
+                <option value="">Giá tăng dần</option>
+                <option value="">Mới nhất</option>
+                <option value="">Lượt xem</option>
+              </select>
+            </div>
+          </div>
+
+          <!-- PRODUCT LIST -->
+          <div class="product-list mt-3 pt-1 grid grid--3-cols">
+            <div class="p-item">
+              <a href="" class="p-image">
+                <img src="/images/static-image-pro-1.png" alt="Product" class="p-img d-flex w-100">
+              </a>
+              <a href="">
+                <h3 class="p-name">Lorem ipsum is placeholder text commonly used</h3>
+              </a>
+              <div class="p-price d-flex">
+                <div class="p-price-sale">72.880.000₫</div>
+                <div class="p-price-stock">82.880.000₫</div>
+              </div>
+              <div class="p-wrapper d-flex align-items-center justify-content-between mt-2">
+                <div class="p-summary">
+                  <span class="ws-pre-line">+ Giá tốt nhất khi liên hệ ngay
+                    + Hỗ trợ kỹ thuật 24/7
+                    + Bảo hành chính hãng</span>
+                </div>
+                <a href="javascript:;" class="p-cart">
+                  <i class="static-icons static-icons-static-icon-header-cart-pro"></i>
+                </a>
+              </div>
+            </div>
+          </div>
+
+          <div class="paging paging-category">
+            <a href="javascript:;" class="paging-link active">1</a>
+            <a href="javascript:;" class="paging-link">2</a>
+            <a href="javascript:;" class="paging-link">3</a>
+            <a href="javascript:;" class="paging-link">4</a>
+            <a href="javascript:;" class="paging-link">5</a>
+          </div>
+        </div>
+
+        <!-- FILTER -->
+        <div class="col-3">
+          <div class="filter">
+            <h2 class="title text-20 text-uppercase font-weight-700">Tìm kiếm theo</h2>
+
+            <!-- FILTER LIST -->
+            <ol class="filter-list list">
+              <!-- FILTER ITEM -->
+              <li class="filter-item mt-12px">
+                <h4 class="filter-name text-16 text-uppercase font-weight-700 mb-2">Theo hãng</h4>
+
+                <ul class="list">
+                  <li class="item">
+                    <a href="javascript:;" class="d-flex align-items-center gap-8 mb-1">
+                      <i class="check-box"></i>
+                      <span>Accuphase (33)</span>
+                    </a>
+                  </li>
+                  <li class="item">
+                    <a href="javascript:;" class="d-flex align-items-center gap-8 mb-1">
+                      <i class="check-box"></i>
+                      <span>Accuphase (33)</span>
+                    </a>
+                  </li>
+                  <li class="item">
+                    <a href="javascript:;" class="d-flex align-items-center gap-8 mb-1">
+                      <i class="check-box"></i>
+                      <span>Accuphase (33)</span>
+                    </a>
+                  </li>
+                  <li class="item">
+                    <a href="javascript:;" class="d-flex align-items-center gap-8 mb-1">
+                      <i class="check-box"></i>
+                      <span>Accuphase (33)</span>
+                    </a>
+                  </li>
+                </ul>
+              </li>
+
+              <!-- FILTER ITEM -->
+              <li class="filter-item mt-12px">
+                <h4 class="filter-name text-16 text-uppercase font-weight-700 mb-2">Theo hãng</h4>
+
+                <ul class="list">
+                  <li class="item">
+                    <a href="javascript:;" class="d-flex align-items-center gap-8 mb-1">
+                      <i class="check-box"></i>
+                      <span>Accuphase (33)</span>
+                    </a>
+                  </li>
+                  <li class="item">
+                    <a href="javascript:;" class="d-flex align-items-center gap-8 mb-1">
+                      <i class="check-box"></i>
+                      <span>Accuphase (33)</span>
+                    </a>
+                  </li>
+                  <li class="item">
+                    <a href="javascript:;" class="d-flex align-items-center gap-8 mb-1">
+                      <i class="check-box"></i>
+                      <span>Accuphase (33)</span>
+                    </a>
+                  </li>
+                  <li class="item">
+                    <a href="javascript:;" class="d-flex align-items-center gap-8 mb-1">
+                      <i class="check-box"></i>
+                      <span>Accuphase (33)</span>
+                    </a>
+                  </li>
+                </ul>
+              </li>
+            </ol>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- DETAIL PAGE -->
+  <div class="detail-page">
+    <div class="container">
+      <!-- SECTION PRODUCT -->
+      <div class="section-product row">
+        <!-- IMAGE THUMB -->
+        <div class="col-5">
+          <div class="pro-thumbs">
+            <div class="swiper gallery-top mb-3">
+              <div class="swiper-wrapper">
+                <!-- SLIDE -->
+                <div class="swiper-slide">
+                  <a data-fancybox="gallery" title="Click để phóng to" href="/images/static-image-pro-1.png">
+                    <img src="/images/static-image-pro-1.png" alt="Sản phẩm" class="d-flex w-100" />
+                  </a>
+                </div>
+                <!-- SLIDE -->
+                <div class="swiper-slide">
+                  <a data-fancybox="gallery" title="Click để phóng to" href="/images/static-image-pro-1.png">
+                    <img src="/images/static-image-pro-1.png" alt="Sản phẩm" class="d-flex w-100" />
+                  </a>
+                </div>
+                <!-- SLIDE -->
+                <div class="swiper-slide">
+                  <a data-fancybox="gallery" title="Click để phóng to" href="/images/static-image-pro-1.png">
+                    <img src="/images/static-image-pro-1.png" alt="Sản phẩm" class="d-flex w-100" />
+                  </a>
+                </div>
+              </div>
+            </div>
+
+            <div thumbsSlider="" class="swiper gallery-thumbs product-images-slider">
+              <div class="swiper-wrapper">
+                <!-- SLIDE -->
+                <div class="swiper-slide">
+                  <img src="/images/static-image-pro-1.png" alt="Sản phẩm" class="d-flex w-100" />
+                </div>
+                <!-- SLIDE -->
+                <div class="swiper-slide">
+                  <img src="/images/static-image-pro-1.png" alt="Sản phẩm" class="d-flex w-100" />
+                </div>
+                <!-- SLIDE -->
+                <div class="swiper-slide">
+                  <img src="/images/static-image-pro-1.png" alt="Sản phẩm" class="d-flex w-100" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- INFO -->
+        <div class="col-6 offset-1">
+          <!--  -->
+          <h1 class="pro-name">Loa đứng Loa Cột Floor Standing Hi-end</h1>
+          <!--  -->
+          <p class="pro-sub-title text-16 font-weight-300">
+            Thương hiệu: <span class="color-primary">Fischer - Fischer</span>
+            <span class="ml-4">Star</span>
+            <span class="text-14 font-weight-400 color-blue ml-1">1 đánh giá</span>
+          </p>
+          <div class="gray-line mb-12px"></div>
+          <!--  -->
+          <div class="pro-price">
+            <p class="pro-price-sale mb-2">
+              <b class="title">Giá bán:</b>
+              <span class="text-28 font-weight-700 color-primary">189.900.000₫</span>
+            </p>
+            <p class="pro-price-stock mb-2">
+              <b class="title">Giá cũ:</b>
+              <del class="text-20 color-gray-2">189.900.000₫</del>
+            </p>
+            <p class="pro-price-saleoff mb-2">
+              <b class="title">Tiết kiệm:</b>
+              <span class="text-20">10.900.000₫</span>
+              <span class="text-16 color-primary ml-1">(-10%)</span>
+            </p>
+          </div>
+          <!--  -->
+          <div class="pro-status font-weight-300 my-3">
+            <span class="pro-status-item mr-1">Bảo hành: <b class="font-weight-600">12 tháng</b></span>
+            <span class="pro-status-item color-green font-weight-600">Còn hàng</span>
+          </div>
+          <!--  -->
+          <div class="pro-gift">
+            <p class="title mb-2">
+              <i class="static-icons static-icons-static-icon-red-gift mr-1"></i>
+              Quà khuyến mại
+            </p>
+
+            <ol class="list">
+              <li class="item">
+                <span class="marker">1</span>
+                Lì xì 1.000.000đ
+              </li>
+              <li class="item">
+                <span class="marker">2</span>
+                Miễn phí công lắp đặt
+              </li>
+            </ol>
+          </div>
+          <!--  -->
+          <div class="pro-cart d-flex align-items-center justify-content-between my-3">
+            <input type="number" name="product quantity" class="pro-cart-quantity" value="1" min="1">
+            <a href="" class="pro-cart-btn bg-primary color-white">Mua ngay</a>
+            <a href="" class="pro-cart-btn color-primary">
+              <i class="static-icons static-icons-static-icon-phone-ct-orange mr-2"></i>
+              Liên hệ ngay
+            </a>
+          </div>
+          <div class="gray-line mb-12px"></div>
+          <!--  -->
+          <div class="pro-social d-flex align-items-center gap-16">
+            <p class="text-16 font-weight-300">Chia sẻ:</p>
+            <ul class="list d-flex align-items-center gap-8">
+              <li>
+                <a href="javascript:;">
+                  <i class="static-icons static-icons-static-icon-social-fb-orange"></i>
+                </a>
+              </li>
+              <li>
+                <a href="javascript:;">
+                  <i class="static-icons static-icons-static-icon-social-gg-news-orange"></i>
+                </a>
+              </li>
+              <li>
+                <a href="javascript:;">
+                  <i class="static-icons static-icons-static-icon-social-instagram-orange"></i>
+                </a>
+              </li>
+            </ul>
+          </div>
+          <!--  -->
+          <div class="pro-features my-3">
+            <ul class="list text-13 row">
+              <li class="col-6 d-flex align-items-center gap-12">
+                <i class="static-icons static-icons-static-icon-feature-delivery-orange"></i>
+                <p class="wrapper">
+                  <b class="d-block text-uppercase mb-1">Miễn phí vận chuyển</b>
+                  <span class="font-weight-300">Tất cả các đơn hàng trên 1.000.000đ</span>
+                </p>
+              </li>
+              <li class="col-6 d-flex align-items-center gap-12">
+                <i class="static-icons static-icons-static-icon-feature-delivery-orange"></i>
+                <p class="wrapper">
+                  <b class="d-block text-uppercase mb-1">Đổi trả dễ dàng</b>
+                  <span class="font-weight-300">1 đổi 1 trong 15 ngày</span>
+                </p>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div class="gray-line mb-12px"></div>
+
+      <!-- SECTION PRODUCT SAME CATEOGRY -->
+      <div class="section-product-same-category">
+        <h2 class="text-20 font-weight-700 text-uppercase my-4">Sản phẩm thường được mua cùng</h2>
+        <div class="product-list mb-5">
+          <div class="swiper swiper-relative-product">
+            <div class="swiper-wrapper grid grid--4-cols" id="js-product-same-category-list">
+              <div class="p-item">
+                <a href="" class="p-image">
+                  <img src="/images/static-image-pro-1.png" alt="Product" class="p-img d-flex w-100">
+                </a>
+                <a href="">
+                  <h3 class="p-name">Lorem ipsum is placeholder text commonly used</h3>
+                </a>
+                <div class="p-price d-flex">
+                  <div class="p-price-sale">72.880.000₫</div>
+                  <div class="p-price-stock">82.880.000₫</div>
+                </div>
+                <div class="p-wrapper d-flex align-items-center justify-content-between mt-2">
+                  <div class="p-summary">
+                    <span class="ws-pre-line">+ Giá tốt nhất khi liên hệ ngay
+                      + Hỗ trợ kỹ thuật 24/7
+                      + Bảo hành chính hãng</span>
+                  </div>
+                  <a href="javascript:;" class="p-cart">
+                    <i class="static-icons static-icons-static-icon-header-cart-pro"></i>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="gray-line mb-12px"></div>
+
+      <!-- SECTION PRODUCT SAME PRICE -->
+      <div class="section-product-same-price">
+        <h2 class="text-20 font-weight-700 text-uppercase my-4">Sản phẩm tương tự</h2>
+        <div class="product-list mb-5">
+          <div class="swiper swiper-relative-product">
+            <div class="swiper-wrapper grid grid--4-cols" id="js-product-same-price-list">
+              <div class="p-item">
+                <a href="" class="p-image">
+                  <img src="/images/static-image-pro-1.png" alt="Product" class="p-img d-flex w-100">
+                </a>
+                <a href="">
+                  <h3 class="p-name">Lorem ipsum is placeholder text commonly used</h3>
+                </a>
+                <div class="p-price d-flex">
+                  <div class="p-price-sale">72.880.000₫</div>
+                  <div class="p-price-stock">82.880.000₫</div>
+                </div>
+                <div class="p-wrapper d-flex align-items-center justify-content-between mt-2">
+                  <div class="p-summary">
+                    <span class="ws-pre-line">+ Giá tốt nhất khi liên hệ ngay
+                      + Hỗ trợ kỹ thuật 24/7
+                      + Bảo hành chính hãng</span>
+                  </div>
+                  <a href="javascript:;" class="p-cart">
+                    <i class="static-icons static-icons-static-icon-header-cart-pro"></i>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="gray-line mb-12px"></div>
+
+      <!-- SECTION DESCRIPTION -->
+      <div class="section-description my-3 row">
+        <div class="col-2">
+          <h2 class="text-16 font-weight-400 text-uppercase">Mô tả</h2>
+        </div>
+        <div class="col-10">
+          <div class="content static-html">
+            Loa Gauder Akustik Darc 140 | Audio Hoàng Hải.
+
+            Loa Gauder Akustik Darc 140 là loại loa đứng âm bass phản xạ 3 đường tiếng. Hệ thống loa âm bass được mở
+            rộng, loa tầm trung bằng gốm và loa tweeter bằng gốm hoặc kim cương. Đế Darc 140 bằng nhôm cực kỳ chắc chắn,
+            có thể điều chỉnh linh hoạt thông qua các chi tiết thiết kế ở phía dưới đế loa.
+
+            Người nghe sẽ bị ấn tượng ngay từ cái nhìn đầu tiên bởi âm lượng từ cặp loa này phát ra cực kỳ lớn, rất dễ
+            dàng lấp đầy cả căn phòng rộng hơn 50m2. Dải trung của hệ thống lại sở hữu chất âm trong, rõ hơn hẳn so với
+            dải trầm, đồng thời thể hiện sự đồng nhất rõ rệt giữa khoảng trên và khoảng dưới, khiến cho việc thể hiện
+            các nhạc cụ bộ dây cũng như giọng vocal cực kỳ xuất sắc. Quãng âm cao cũng được thể hiện rất mượt mà, rất
+            tốt nhưng không để lại được nhiều ấn tượng giống như âm trung.
+
+            Gauder Akustik Darc 140 có bộ lọc chéo siêu mỏng (> 60 dB / octave).Cầu loa BiWiring với các giắc đấu nối
+            WBT-Nextgen nổi tiếng, đã làm nên tên tuổi của Gauder Akustik. Hệ thống cân bằng 6 lần ở mức thấp và mức
+            cao. Bộ phân tần được trang bị độc quyền với các thành phần của Mundorf.
+
+            Thùng loa vẫn sử dụng cùng nguyên lý xếp chồng (Rib-Construction) các khung xương bằng nhôm dày 1,57 inch
+            xen kẽn với lớp vật liệu hấp thu rung động. DARC 140 dùng đến 4 củ loa bass, trong đó 2 được bố trí phía
+            trên, 2 ở phía dưới; Phần củ loa mid và treb được đặt ở giữa thân loa, ngang tầm tai. Toàn bộ các củ loa này
+            đều do Accuton chế tạo theo yêu cầu kỹ thuật riêng từ chủ hãng – Tiến sĩ vật lý Roland Gauder - mọi thứ đều
+            được Sản xuất tại Đức.
+          </div>
+        </div>
+      </div>
+      <div class="gray-line mb-12px"></div>
+
+      <!-- SECTION SPEC -->
+      <div class="section-spec my-3 row">
+        <div class="col-2">
+          <h2 class="text-16 font-weight-400 text-uppercase">Thông số kỹ thuật</h2>
+        </div>
+        <div class="col-10">
+          <div class="content static-html">
+            <table class="attributes">
+              <tbody>
+                <tr class="option-item">
+                  <td class="op_name"><strong>CPU</strong></td>
+                  <td>
+                    <div class="wordWrap">Intel Core i7&nbsp;12700H</div>
+                  </td>
+                </tr>
+                <tr class="option-item">
+                  <td class="op_name"><strong>RAM</strong></td>
+                  <td>
+                    <div class="wordWrap">16GB DDR5</div>
+                  </td>
+                </tr>
+                <tr class="option-item">
+                  <td class="op_name"><strong>Ổ cứng</strong></td>
+                  <td>
+                    <div class="wordWrap">1TB SSD&nbsp;</div>
+                  </td>
+                </tr>
+                <tr class="option-item">
+                  <td class="op_name"><strong>Màn hình</strong></td>
+                  <td>
+                    <div class="wordWrap">16 Inch QHD+</div>
+                  </td>
+                </tr>
+                <tr class="option-item">
+                  <td class="op_name"><strong>Card đồ họa</strong></td>
+                  <td>
+                    <div class="wordWrap">Nvidia&nbsp;RTX3060</div>
+                  </td>
+                </tr>
+                <tr class="option-item">
+                  <td class="op_name"><strong>Hệ điều hành</strong></td>
+                  <td>
+                    <div class="wordWrap">Win 11</div>
+                  </td>
+                </tr>
+                <tr class="option-item">
+                  <td class="op_name"><strong>Màu sắc</strong></td>
+                  <td>
+                    <div class="wordWrap">Đen</div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+      <div class="gray-line mb-12px"></div>
+
+      <!-- SECTION REVIEW -->
+      <div class="section-review row">
+        <div class="col-2">
+          <h2 class="text-16 font-weight-400 text-uppercase">Thảo luận (0)</h2>
+        </div>
+        <div class="col-10">
+          <h4 class="text-16 font-weight-700 mb-2">Chia sẻ suy nghĩ của bạn! Cho chúng tôi biết bạn nghĩ gì...</h4>
+          <a href="javascript:;" class="d-block mb-4">Để lại một đánh giá</a>
+
+          <div class="review-form">
+            <div class="review-star mb-3">
+              <p class="text-16 font-weight-700">Bạn đánh giá về sản phẩm này thế nào? *</p>
+            </div>
+
+            <div class="review-content">
+              <div class="review-form-item">
+                <label for="r-review" class="d-block mb-2 text-14 font-weight-700">Review *</label>
+                <textarea name="review" id="r-review" cols="30" rows="10" class="r-input"
+                  placeholder="Hãy nói cho chúng tôi biết suy nghĩ của bạn về sản phẩm này"></textarea>
+              </div>
+
+              <div class="review-form-item">
+                <label for="r-name" class="d-block mb-2 text-14 font-weight-700">Họ Tên *</label>
+                <input type="text" name="name" id="r-name" class="r-input">
+              </div>
+
+              <div class="review-form-item">
+                <label for="r-email" class="d-block mb-2 text-14 font-weight-700">Email *</label>
+                <input type="email" name="email" id="r-email" class="r-input">
+              </div>
+            </div>
+
+            <a href="" class="review-btn">Lưu đánh giá</a>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+
+  <!-- FOOTER -->
+  <footer class="footer mt-4">
+    <!-- FOOTER TOP -->
+    <div class="footer-top">
+      <div class="container">
+        <ul class="features row list d-flex align-items-center">
+          <li class="col-3">
+            <p class="item d-flex align-items-center gap-8">
+              <i class="static-icons static-icons-static-icon-feature-delivery"></i>
+              <span class="text-13">
+                <b class="d-block font-weight-700">Miễn phí vận chuyển</b>
+                Tất cả các đơn hàng trên 1.000.000đ
+              </span>
+            </p>
+          </li>
+          <li class="col-3">
+            <p class="item d-flex align-items-center gap-8">
+              <i class="static-icons static-icons-static-icon-feature-calendar"></i>
+              <span class="text-13">
+                <b class="d-block font-weight-700">Đổi trả dễ dàng</b>
+                1 đổi 1 trong 15 ngày
+              </span>
+            </p>
+          </li>
+          <li class="col-3">
+            <p class="item d-flex align-items-center gap-8">
+              <i class="static-icons static-icons-static-icon-feature-wallet"></i>
+              <span class="text-13">
+                <b class="d-block font-weight-700">Thanh toán tiện lợi</b>
+                Trả tiền mặt, CK, trả góp 0%
+              </span>
+            </p>
+          </li>
+          <li class="col-3">
+            <p class="item d-flex align-items-center gap-8">
+              <i class="static-icons static-icons-static-icon-feature-phone"></i>
+              <span class="text-13">
+                <b class="d-block font-weight-700">Hỗ trợ nhiệt tình</b>
+                Tư vấn, giải đáp mọi thắc mắc
+              </span>
+            </p>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <!-- FOOTER MID -->
+    <div class="footer-mid">
+      <div class="container">
+        <div class="row align-items-center">
+          <div class="col-2">
+            <a href="/" class="logo">
+              <img src="/images/audio-logo.png" alt="Logo" class="d-flex w-100">
+            </a>
+          </div>
+          <div class="col-6">
+            <p class="text-13">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+              dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+              ea commodo consequat.</p>
+          </div>
+          <div class="col-3 offset-1">
+            <div class="wrapper d-flex align-items-center justify-content-between">
+              <a href="javascript:;" class="d-flex">
+                <i class="static-icons static-icons-static-icon-social-fb"></i>
+              </a>
+              <a href="javascript:;" class="d-flex">
+                <i class="static-icons static-icons-static-icon-social-gg-news"></i>
+              </a>
+              <a href="javascript:;" class="d-flex">
+                <i class="static-icons static-icons-static-icon-social-youtube"></i>
+              </a>
+              <a href="javascript:;" class="d-flex">
+                <i class="static-icons static-icons-static-icon-social-twitter"></i>
+              </a>
+              <a href="javascript:;" class="d-flex">
+                <i class="static-icons static-icons-static-icon-social-instagram"></i>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- FOOTER BOTTOM -->
+    <div class="footer-bottom bg-secondary text-13 color-white">
+      <div class="container">
+        <div class="row">
+          <div class="col-3">
+            <h3 class="text-13 font-weight-700 text-uppercase mb-12px">Liên hệ</h3>
+            <ul class="list">
+              <li>
+                <a href="javascript:;" class="d-flex align-items-center gap-12">
+                  <i class="static-icons static-icons-static-icon-location"></i>
+                  <span>XX Tràng Thi - Hoàn Kiếm - Hà Nội</span>
+                </a>
+              </li>
+              <li>
+                <a href="tel:02438524.524" class="d-flex align-items-center gap-12">
+                  <i class="static-icons static-icons-static-icon-phone-ct"></i>
+                  <span>Hotline: 0243.8.524.524</span>
+                </a>
+              </li>
+              <li>
+                <a href="tel:0988034960" class="d-flex align-items-center gap-12">
+                  <i class="static-icons static-icons-static-icon-phone-ct"></i>
+                  <span>Điện thoại: 0988.034.960</span>
+                </a>
+              </li>
+            </ul>
+            <div class="ministry-of-industry-and-trade">
+              <img src="/images/static-image-bct.png" alt="Bộ công thương" class="d-flex w-100">
+            </div>
+          </div>
+          <div class="col-3">
+            <h3 class="text-13 font-weight-700 text-uppercase mb-12px">THÔNG TIN HỮU ÍCH</h3>
+            <ul class="list">
+              <li>
+                <a href="javascript:;" class="d-flex align-items-center gap-12">
+                  <span>Giới thiệu</span>
+                </a>
+              </li>
+              <li>
+                <a href="javascript:;" class="d-flex align-items-center gap-12">
+                  <span>Tuyển dụng</span>
+                </a>
+              </li>
+              <li>
+                <a href="javascript:;" class="d-flex align-items-center gap-12">
+                  <span>Tin tức</span>
+                </a>
+              </li>
+              <li>
+                <a href="javascript:;" class="d-flex align-items-center gap-12">
+                  <span>Ý kiến khách hàng</span>
+                </a>
+              </li>
+              <li>
+                <a href="javascript:;" class="d-flex align-items-center gap-12">
+                  <span>Chính sách bảo mật thông tin</span>
+                </a>
+              </li>
+              <li>
+                <a href="javascript:;" class="d-flex align-items-center gap-12">
+                  <span>Liên hệ</span>
+                </a>
+              </li>
+            </ul>
+          </div>
+          <div class="col-3">
+            <h3 class="text-13 font-weight-700 text-uppercase mb-12px">HỖ TRỢ MUA HÀNG</h3>
+            <ul class="list">
+              <li>
+                <a href="javascript:;" class="d-flex align-items-center gap-12">
+                  <span>Hướng dẫn mua hàng trực tuyến</span>
+                </a>
+              </li>
+              <li>
+                <a href="javascript:;" class="d-flex align-items-center gap-12">
+                  <span>Các hình thức thanh toán</span>
+                </a>
+              </li>
+              <li>
+                <a href="javascript:;" class="d-flex align-items-center gap-12">
+                  <span>Tại sao chọn mua hàng online</span>
+                </a>
+              </li>
+              <li>
+                <a href="javascript:;" class="d-flex align-items-center gap-12">
+                  <span>Các hình thức mua hàng</span>
+                </a>
+              </li>
+              <li>
+                <a href="javascript:;" class="d-flex align-items-center gap-12">
+                  <span>Chính sách vận chuyển</span>
+                </a>
+              </li>
+              <li>
+                <a href="javascript:;" class="d-flex align-items-center gap-12">
+                  <span>Chính sách bảo trì, bảo hành</span>
+                </a>
+              </li>
+              <li>
+                <a href="javascript:;" class="d-flex align-items-center gap-12">
+                  <span>Chính sách đổi trả hàng</span>
+                </a>
+              </li>
+            </ul>
+          </div>
+          <div class="col-3">
+            <h3 class="text-13 font-weight-700 text-uppercase mb-12px">THÔNG TIN KHUYẾN MẠI</h3>
+            <ul class="list">
+              <li>
+                <a href="javascript:;" class="d-flex align-items-center gap-12">
+                  <span>Thông tin khuyến mại</span>
+                </a>
+              </li>
+              <li>
+                <a href="javascript:;" class="d-flex align-items-center gap-12">
+                  <span>Sản phẩm khuyến mại</span>
+                </a>
+              </li>
+              <li>
+                <a href="javascript:;" class="d-flex align-items-center gap-12">
+                  <span>Sản phẩm bán chạy</span>
+                </a>
+              </li>
+              <li>
+                <a href="javascript:;" class="d-flex align-items-center gap-12">
+                  <span>Sản phẩm mới</span>
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- COPYRIGHT -->
+    <div class="copy-right bg-secondary color-white">
+      <div class="container">
+        <h5 class="text-13 text-center font-weight-300 py-3">
+          Bản quyền thuộc về Best Audio | Thiết kế website bởi Hurasoft
+        </h5>
+      </div>
+    </div>
+
+  </footer>
+
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
+  <script src="/js/library.js"></script>
+  <script src="/js/main_pc.js"></script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/demo-audio-2/js/library.js b/demo-audio-2/js/library.js
new file mode 100644
index 0000000..4e7a9c4
--- /dev/null
+++ b/demo-audio-2/js/library.js
@@ -0,0 +1,81 @@
+/**
+ * Swiper 8.4.4
+ * Most modern mobile touch slider and framework with hardware accelerated transitions
+ * https://swiperjs.com
+ *
+ * Copyright 2014-2022 Vladimir Kharlampidi
+ *
+ * Released under the MIT License
+ *
+ * Released on: October 12, 2022
+ */
+
+!function (e, t) { "object" == typeof exports && "undefined" != typeof module ? module.exports = t() : "function" == typeof define && define.amd ? define(t) : (e = "undefined" != typeof globalThis ? globalThis : e || self).Swiper = t() }(this, (function () { "use strict"; function e(e) { return null !== e && "object" == typeof e && "constructor" in e && e.constructor === Object } function t(s, a) { void 0 === s && (s = {}), void 0 === a && (a = {}), Object.keys(a).forEach((i => { void 0 === s[i] ? s[i] = a[i] : e(a[i]) && e(s[i]) && Object.keys(a[i]).length > 0 && t(s[i], a[i]) })) } const s = { body: {}, addEventListener() { }, removeEventListener() { }, activeElement: { blur() { }, nodeName: "" }, querySelector: () => null, querySelectorAll: () => [], getElementById: () => null, createEvent: () => ({ initEvent() { } }), createElement: () => ({ children: [], childNodes: [], style: {}, setAttribute() { }, getElementsByTagName: () => [] }), createElementNS: () => ({}), importNode: () => null, location: { hash: "", host: "", hostname: "", href: "", origin: "", pathname: "", protocol: "", search: "" } }; function a() { const e = "undefined" != typeof document ? document : {}; return t(e, s), e } const i = { document: s, navigator: { userAgent: "" }, location: { hash: "", host: "", hostname: "", href: "", origin: "", pathname: "", protocol: "", search: "" }, history: { replaceState() { }, pushState() { }, go() { }, back() { } }, CustomEvent: function () { return this }, addEventListener() { }, removeEventListener() { }, getComputedStyle: () => ({ getPropertyValue: () => "" }), Image() { }, Date() { }, screen: {}, setTimeout() { }, clearTimeout() { }, matchMedia: () => ({}), requestAnimationFrame: e => "undefined" == typeof setTimeout ? (e(), null) : setTimeout(e, 0), cancelAnimationFrame(e) { "undefined" != typeof setTimeout && clearTimeout(e) } }; function r() { const e = "undefined" != typeof window ? window : {}; return t(e, i), e } class n extends Array { constructor(e) { "number" == typeof e ? super(e) : (super(...e || []), function (e) { const t = e.__proto__; Object.defineProperty(e, "__proto__", { get: () => t, set(e) { t.__proto__ = e } }) }(this)) } } function l(e) { void 0 === e && (e = []); const t = []; return e.forEach((e => { Array.isArray(e) ? t.push(...l(e)) : t.push(e) })), t } function o(e, t) { return Array.prototype.filter.call(e, t) } function d(e, t) { const s = r(), i = a(); let l = []; if (!t && e instanceof n) return e; if (!e) return new n(l); if ("string" == typeof e) { const s = e.trim(); if (s.indexOf("<") >= 0 && s.indexOf(">") >= 0) { let e = "div"; 0 === s.indexOf("<li") && (e = "ul"), 0 === s.indexOf("<tr") && (e = "tbody"), 0 !== s.indexOf("<td") && 0 !== s.indexOf("<th") || (e = "tr"), 0 === s.indexOf("<tbody") && (e = "table"), 0 === s.indexOf("<option") && (e = "select"); const t = i.createElement(e); t.innerHTML = s; for (let e = 0; e < t.childNodes.length; e += 1)l.push(t.childNodes[e]) } else l = function (e, t) { if ("string" != typeof e) return [e]; const s = [], a = t.querySelectorAll(e); for (let e = 0; e < a.length; e += 1)s.push(a[e]); return s }(e.trim(), t || i) } else if (e.nodeType || e === s || e === i) l.push(e); else if (Array.isArray(e)) { if (e instanceof n) return e; l = e } return new n(function (e) { const t = []; for (let s = 0; s < e.length; s += 1)-1 === t.indexOf(e[s]) && t.push(e[s]); return t }(l)) } d.fn = n.prototype; const c = { addClass: function () { for (var e = arguments.length, t = new Array(e), s = 0; s < e; s++)t[s] = arguments[s]; const a = l(t.map((e => e.split(" ")))); return this.forEach((e => { e.classList.add(...a) })), this }, removeClass: function () { for (var e = arguments.length, t = new Array(e), s = 0; s < e; s++)t[s] = arguments[s]; const a = l(t.map((e => e.split(" ")))); return this.forEach((e => { e.classList.remove(...a) })), this }, hasClass: function () { for (var e = arguments.length, t = new Array(e), s = 0; s < e; s++)t[s] = arguments[s]; const a = l(t.map((e => e.split(" ")))); return o(this, (e => a.filter((t => e.classList.contains(t))).length > 0)).length > 0 }, toggleClass: function () { for (var e = arguments.length, t = new Array(e), s = 0; s < e; s++)t[s] = arguments[s]; const a = l(t.map((e => e.split(" ")))); this.forEach((e => { a.forEach((t => { e.classList.toggle(t) })) })) }, attr: function (e, t) { if (1 === arguments.length && "string" == typeof e) return this[0] ? this[0].getAttribute(e) : void 0; for (let s = 0; s < this.length; s += 1)if (2 === arguments.length) this[s].setAttribute(e, t); else for (const t in e) this[s][t] = e[t], this[s].setAttribute(t, e[t]); return this }, removeAttr: function (e) { for (let t = 0; t < this.length; t += 1)this[t].removeAttribute(e); return this }, transform: function (e) { for (let t = 0; t < this.length; t += 1)this[t].style.transform = e; return this }, transition: function (e) { for (let t = 0; t < this.length; t += 1)this[t].style.transitionDuration = "string" != typeof e ? `${e}ms` : e; return this }, on: function () { for (var e = arguments.length, t = new Array(e), s = 0; s < e; s++)t[s] = arguments[s]; let [a, i, r, n] = t; function l(e) { const t = e.target; if (!t) return; const s = e.target.dom7EventData || []; if (s.indexOf(e) < 0 && s.unshift(e), d(t).is(i)) r.apply(t, s); else { const e = d(t).parents(); for (let t = 0; t < e.length; t += 1)d(e[t]).is(i) && r.apply(e[t], s) } } function o(e) { const t = e && e.target && e.target.dom7EventData || []; t.indexOf(e) < 0 && t.unshift(e), r.apply(this, t) } "function" == typeof t[1] && ([a, r, n] = t, i = void 0), n || (n = !1); const c = a.split(" "); let p; for (let e = 0; e < this.length; e += 1) { const t = this[e]; if (i) for (p = 0; p < c.length; p += 1) { const e = c[p]; t.dom7LiveListeners || (t.dom7LiveListeners = {}), t.dom7LiveListeners[e] || (t.dom7LiveListeners[e] = []), t.dom7LiveListeners[e].push({ listener: r, proxyListener: l }), t.addEventListener(e, l, n) } else for (p = 0; p < c.length; p += 1) { const e = c[p]; t.dom7Listeners || (t.dom7Listeners = {}), t.dom7Listeners[e] || (t.dom7Listeners[e] = []), t.dom7Listeners[e].push({ listener: r, proxyListener: o }), t.addEventListener(e, o, n) } } return this }, off: function () { for (var e = arguments.length, t = new Array(e), s = 0; s < e; s++)t[s] = arguments[s]; let [a, i, r, n] = t; "function" == typeof t[1] && ([a, r, n] = t, i = void 0), n || (n = !1); const l = a.split(" "); for (let e = 0; e < l.length; e += 1) { const t = l[e]; for (let e = 0; e < this.length; e += 1) { const s = this[e]; let a; if (!i && s.dom7Listeners ? a = s.dom7Listeners[t] : i && s.dom7LiveListeners && (a = s.dom7LiveListeners[t]), a && a.length) for (let e = a.length - 1; e >= 0; e -= 1) { const i = a[e]; r && i.listener === r || r && i.listener && i.listener.dom7proxy && i.listener.dom7proxy === r ? (s.removeEventListener(t, i.proxyListener, n), a.splice(e, 1)) : r || (s.removeEventListener(t, i.proxyListener, n), a.splice(e, 1)) } } } return this }, trigger: function () { const e = r(); for (var t = arguments.length, s = new Array(t), a = 0; a < t; a++)s[a] = arguments[a]; const i = s[0].split(" "), n = s[1]; for (let t = 0; t < i.length; t += 1) { const a = i[t]; for (let t = 0; t < this.length; t += 1) { const i = this[t]; if (e.CustomEvent) { const t = new e.CustomEvent(a, { detail: n, bubbles: !0, cancelable: !0 }); i.dom7EventData = s.filter(((e, t) => t > 0)), i.dispatchEvent(t), i.dom7EventData = [], delete i.dom7EventData } } } return this }, transitionEnd: function (e) { const t = this; return e && t.on("transitionend", (function s(a) { a.target === this && (e.call(this, a), t.off("transitionend", s)) })), this }, outerWidth: function (e) { if (this.length > 0) { if (e) { const e = this.styles(); return this[0].offsetWidth + parseFloat(e.getPropertyValue("margin-right")) + parseFloat(e.getPropertyValue("margin-left")) } return this[0].offsetWidth } return null }, outerHeight: function (e) { if (this.length > 0) { if (e) { const e = this.styles(); return this[0].offsetHeight + parseFloat(e.getPropertyValue("margin-top")) + parseFloat(e.getPropertyValue("margin-bottom")) } return this[0].offsetHeight } return null }, styles: function () { const e = r(); return this[0] ? e.getComputedStyle(this[0], null) : {} }, offset: function () { if (this.length > 0) { const e = r(), t = a(), s = this[0], i = s.getBoundingClientRect(), n = t.body, l = s.clientTop || n.clientTop || 0, o = s.clientLeft || n.clientLeft || 0, d = s === e ? e.scrollY : s.scrollTop, c = s === e ? e.scrollX : s.scrollLeft; return { top: i.top + d - l, left: i.left + c - o } } return null }, css: function (e, t) { const s = r(); let a; if (1 === arguments.length) { if ("string" != typeof e) { for (a = 0; a < this.length; a += 1)for (const t in e) this[a].style[t] = e[t]; return this } if (this[0]) return s.getComputedStyle(this[0], null).getPropertyValue(e) } if (2 === arguments.length && "string" == typeof e) { for (a = 0; a < this.length; a += 1)this[a].style[e] = t; return this } return this }, each: function (e) { return e ? (this.forEach(((t, s) => { e.apply(t, [t, s]) })), this) : this }, html: function (e) { if (void 0 === e) return this[0] ? this[0].innerHTML : null; for (let t = 0; t < this.length; t += 1)this[t].innerHTML = e; return this }, text: function (e) { if (void 0 === e) return this[0] ? this[0].textContent.trim() : null; for (let t = 0; t < this.length; t += 1)this[t].textContent = e; return this }, is: function (e) { const t = r(), s = a(), i = this[0]; let l, o; if (!i || void 0 === e) return !1; if ("string" == typeof e) { if (i.matches) return i.matches(e); if (i.webkitMatchesSelector) return i.webkitMatchesSelector(e); if (i.msMatchesSelector) return i.msMatchesSelector(e); for (l = d(e), o = 0; o < l.length; o += 1)if (l[o] === i) return !0; return !1 } if (e === s) return i === s; if (e === t) return i === t; if (e.nodeType || e instanceof n) { for (l = e.nodeType ? [e] : e, o = 0; o < l.length; o += 1)if (l[o] === i) return !0; return !1 } return !1 }, index: function () { let e, t = this[0]; if (t) { for (e = 0; null !== (t = t.previousSibling);)1 === t.nodeType && (e += 1); return e } }, eq: function (e) { if (void 0 === e) return this; const t = this.length; if (e > t - 1) return d([]); if (e < 0) { const s = t + e; return d(s < 0 ? [] : [this[s]]) } return d([this[e]]) }, append: function () { let e; const t = a(); for (let s = 0; s < arguments.length; s += 1) { e = s < 0 || arguments.length <= s ? void 0 : arguments[s]; for (let s = 0; s < this.length; s += 1)if ("string" == typeof e) { const a = t.createElement("div"); for (a.innerHTML = e; a.firstChild;)this[s].appendChild(a.firstChild) } else if (e instanceof n) for (let t = 0; t < e.length; t += 1)this[s].appendChild(e[t]); else this[s].appendChild(e) } return this }, prepend: function (e) { const t = a(); let s, i; for (s = 0; s < this.length; s += 1)if ("string" == typeof e) { const a = t.createElement("div"); for (a.innerHTML = e, i = a.childNodes.length - 1; i >= 0; i -= 1)this[s].insertBefore(a.childNodes[i], this[s].childNodes[0]) } else if (e instanceof n) for (i = 0; i < e.length; i += 1)this[s].insertBefore(e[i], this[s].childNodes[0]); else this[s].insertBefore(e, this[s].childNodes[0]); return this }, next: function (e) { return this.length > 0 ? e ? this[0].nextElementSibling && d(this[0].nextElementSibling).is(e) ? d([this[0].nextElementSibling]) : d([]) : this[0].nextElementSibling ? d([this[0].nextElementSibling]) : d([]) : d([]) }, nextAll: function (e) { const t = []; let s = this[0]; if (!s) return d([]); for (; s.nextElementSibling;) { const a = s.nextElementSibling; e ? d(a).is(e) && t.push(a) : t.push(a), s = a } return d(t) }, prev: function (e) { if (this.length > 0) { const t = this[0]; return e ? t.previousElementSibling && d(t.previousElementSibling).is(e) ? d([t.previousElementSibling]) : d([]) : t.previousElementSibling ? d([t.previousElementSibling]) : d([]) } return d([]) }, prevAll: function (e) { const t = []; let s = this[0]; if (!s) return d([]); for (; s.previousElementSibling;) { const a = s.previousElementSibling; e ? d(a).is(e) && t.push(a) : t.push(a), s = a } return d(t) }, parent: function (e) { const t = []; for (let s = 0; s < this.length; s += 1)null !== this[s].parentNode && (e ? d(this[s].parentNode).is(e) && t.push(this[s].parentNode) : t.push(this[s].parentNode)); return d(t) }, parents: function (e) { const t = []; for (let s = 0; s < this.length; s += 1) { let a = this[s].parentNode; for (; a;)e ? d(a).is(e) && t.push(a) : t.push(a), a = a.parentNode } return d(t) }, closest: function (e) { let t = this; return void 0 === e ? d([]) : (t.is(e) || (t = t.parents(e).eq(0)), t) }, find: function (e) { const t = []; for (let s = 0; s < this.length; s += 1) { const a = this[s].querySelectorAll(e); for (let e = 0; e < a.length; e += 1)t.push(a[e]) } return d(t) }, children: function (e) { const t = []; for (let s = 0; s < this.length; s += 1) { const a = this[s].children; for (let s = 0; s < a.length; s += 1)e && !d(a[s]).is(e) || t.push(a[s]) } return d(t) }, filter: function (e) { return d(o(this, e)) }, remove: function () { for (let e = 0; e < this.length; e += 1)this[e].parentNode && this[e].parentNode.removeChild(this[e]); return this } }; function p(e, t) { return void 0 === t && (t = 0), setTimeout(e, t) } function u() { return Date.now() } function h(e, t) { void 0 === t && (t = "x"); const s = r(); let a, i, n; const l = function (e) { const t = r(); let s; return t.getComputedStyle && (s = t.getComputedStyle(e, null)), !s && e.currentStyle && (s = e.currentStyle), s || (s = e.style), s }(e); return s.WebKitCSSMatrix ? (i = l.transform || l.webkitTransform, i.split(",").length > 6 && (i = i.split(", ").map((e => e.replace(",", "."))).join(", ")), n = new s.WebKitCSSMatrix("none" === i ? "" : i)) : (n = l.MozTransform || l.OTransform || l.MsTransform || l.msTransform || l.transform || l.getPropertyValue("transform").replace("translate(", "matrix(1, 0, 0, 1,"), a = n.toString().split(",")), "x" === t && (i = s.WebKitCSSMatrix ? n.m41 : 16 === a.length ? parseFloat(a[12]) : parseFloat(a[4])), "y" === t && (i = s.WebKitCSSMatrix ? n.m42 : 16 === a.length ? parseFloat(a[13]) : parseFloat(a[5])), i || 0 } function m(e) { return "object" == typeof e && null !== e && e.constructor && "Object" === Object.prototype.toString.call(e).slice(8, -1) } function f(e) { return "undefined" != typeof window && void 0 !== window.HTMLElement ? e instanceof HTMLElement : e && (1 === e.nodeType || 11 === e.nodeType) } function g() { const e = Object(arguments.length <= 0 ? void 0 : arguments[0]), t = ["__proto__", "constructor", "prototype"]; for (let s = 1; s < arguments.length; s += 1) { const a = s < 0 || arguments.length <= s ? void 0 : arguments[s]; if (null != a && !f(a)) { const s = Object.keys(Object(a)).filter((e => t.indexOf(e) < 0)); for (let t = 0, i = s.length; t < i; t += 1) { const i = s[t], r = Object.getOwnPropertyDescriptor(a, i); void 0 !== r && r.enumerable && (m(e[i]) && m(a[i]) ? a[i].__swiper__ ? e[i] = a[i] : g(e[i], a[i]) : !m(e[i]) && m(a[i]) ? (e[i] = {}, a[i].__swiper__ ? e[i] = a[i] : g(e[i], a[i])) : e[i] = a[i]) } } } return e } function v(e, t, s) { e.style.setProperty(t, s) } function w(e) { let { swiper: t, targetPosition: s, side: a } = e; const i = r(), n = -t.translate; let l, o = null; const d = t.params.speed; t.wrapperEl.style.scrollSnapType = "none", i.cancelAnimationFrame(t.cssModeFrameID); const c = s > n ? "next" : "prev", p = (e, t) => "next" === c && e >= t || "prev" === c && e <= t, u = () => { l = (new Date).getTime(), null === o && (o = l); const e = Math.max(Math.min((l - o) / d, 1), 0), r = .5 - Math.cos(e * Math.PI) / 2; let c = n + r * (s - n); if (p(c, s) && (c = s), t.wrapperEl.scrollTo({ [a]: c }), p(c, s)) return t.wrapperEl.style.overflow = "hidden", t.wrapperEl.style.scrollSnapType = "", setTimeout((() => { t.wrapperEl.style.overflow = "", t.wrapperEl.scrollTo({ [a]: c }) })), void i.cancelAnimationFrame(t.cssModeFrameID); t.cssModeFrameID = i.requestAnimationFrame(u) }; u() } let b, x, y; function E() { return b || (b = function () { const e = r(), t = a(); return { smoothScroll: t.documentElement && "scrollBehavior" in t.documentElement.style, touch: !!("ontouchstart" in e || e.DocumentTouch && t instanceof e.DocumentTouch), passiveListener: function () { let t = !1; try { const s = Object.defineProperty({}, "passive", { get() { t = !0 } }); e.addEventListener("testPassiveListener", null, s) } catch (e) { } return t }(), gestures: "ongesturestart" in e } }()), b } function C(e) { return void 0 === e && (e = {}), x || (x = function (e) { let { userAgent: t } = void 0 === e ? {} : e; const s = E(), a = r(), i = a.navigator.platform, n = t || a.navigator.userAgent, l = { ios: !1, android: !1 }, o = a.screen.width, d = a.screen.height, c = n.match(/(Android);?[\s\/]+([\d.]+)?/); let p = n.match(/(iPad).*OS\s([\d_]+)/); const u = n.match(/(iPod)(.*OS\s([\d_]+))?/), h = !p && n.match(/(iPhone\sOS|iOS)\s([\d_]+)/), m = "Win32" === i; let f = "MacIntel" === i; return !p && f && s.touch && ["1024x1366", "1366x1024", "834x1194", "1194x834", "834x1112", "1112x834", "768x1024", "1024x768", "820x1180", "1180x820", "810x1080", "1080x810"].indexOf(`${o}x${d}`) >= 0 && (p = n.match(/(Version)\/([\d.]+)/), p || (p = [0, 1, "13_0_0"]), f = !1), c && !m && (l.os = "android", l.android = !0), (p || h || u) && (l.os = "ios", l.ios = !0), l }(e)), x } function T() { return y || (y = function () { const e = r(); return { isSafari: function () { const t = e.navigator.userAgent.toLowerCase(); return t.indexOf("safari") >= 0 && t.indexOf("chrome") < 0 && t.indexOf("android") < 0 }(), isWebView: /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(e.navigator.userAgent) } }()), y } Object.keys(c).forEach((e => { Object.defineProperty(d.fn, e, { value: c[e], writable: !0 }) })); var $ = { on(e, t, s) { const a = this; if (!a.eventsListeners || a.destroyed) return a; if ("function" != typeof t) return a; const i = s ? "unshift" : "push"; return e.split(" ").forEach((e => { a.eventsListeners[e] || (a.eventsListeners[e] = []), a.eventsListeners[e][i](t) })), a }, once(e, t, s) { const a = this; if (!a.eventsListeners || a.destroyed) return a; if ("function" != typeof t) return a; function i() { a.off(e, i), i.__emitterProxy && delete i.__emitterProxy; for (var s = arguments.length, r = new Array(s), n = 0; n < s; n++)r[n] = arguments[n]; t.apply(a, r) } return i.__emitterProxy = t, a.on(e, i, s) }, onAny(e, t) { const s = this; if (!s.eventsListeners || s.destroyed) return s; if ("function" != typeof e) return s; const a = t ? "unshift" : "push"; return s.eventsAnyListeners.indexOf(e) < 0 && s.eventsAnyListeners[a](e), s }, offAny(e) { const t = this; if (!t.eventsListeners || t.destroyed) return t; if (!t.eventsAnyListeners) return t; const s = t.eventsAnyListeners.indexOf(e); return s >= 0 && t.eventsAnyListeners.splice(s, 1), t }, off(e, t) { const s = this; return !s.eventsListeners || s.destroyed ? s : s.eventsListeners ? (e.split(" ").forEach((e => { void 0 === t ? s.eventsListeners[e] = [] : s.eventsListeners[e] && s.eventsListeners[e].forEach(((a, i) => { (a === t || a.__emitterProxy && a.__emitterProxy === t) && s.eventsListeners[e].splice(i, 1) })) })), s) : s }, emit() { const e = this; if (!e.eventsListeners || e.destroyed) return e; if (!e.eventsListeners) return e; let t, s, a; for (var i = arguments.length, r = new Array(i), n = 0; n < i; n++)r[n] = arguments[n]; "string" == typeof r[0] || Array.isArray(r[0]) ? (t = r[0], s = r.slice(1, r.length), a = e) : (t = r[0].events, s = r[0].data, a = r[0].context || e), s.unshift(a); return (Array.isArray(t) ? t : t.split(" ")).forEach((t => { e.eventsAnyListeners && e.eventsAnyListeners.length && e.eventsAnyListeners.forEach((e => { e.apply(a, [t, ...s]) })), e.eventsListeners && e.eventsListeners[t] && e.eventsListeners[t].forEach((e => { e.apply(a, s) })) })), e } }; var S = { updateSize: function () { const e = this; let t, s; const a = e.$el; t = void 0 !== e.params.width && null !== e.params.width ? e.params.width : a[0].clientWidth, s = void 0 !== e.params.height && null !== e.params.height ? e.params.height : a[0].clientHeight, 0 === t && e.isHorizontal() || 0 === s && e.isVertical() || (t = t - parseInt(a.css("padding-left") || 0, 10) - parseInt(a.css("padding-right") || 0, 10), s = s - parseInt(a.css("padding-top") || 0, 10) - parseInt(a.css("padding-bottom") || 0, 10), Number.isNaN(t) && (t = 0), Number.isNaN(s) && (s = 0), Object.assign(e, { width: t, height: s, size: e.isHorizontal() ? t : s })) }, updateSlides: function () { const e = this; function t(t) { return e.isHorizontal() ? t : { width: "height", "margin-top": "margin-left", "margin-bottom ": "margin-right", "margin-left": "margin-top", "margin-right": "margin-bottom", "padding-left": "padding-top", "padding-right": "padding-bottom", marginRight: "marginBottom" }[t] } function s(e, s) { return parseFloat(e.getPropertyValue(t(s)) || 0) } const a = e.params, { $wrapperEl: i, size: r, rtlTranslate: n, wrongRTL: l } = e, o = e.virtual && a.virtual.enabled, d = o ? e.virtual.slides.length : e.slides.length, c = i.children(`.${e.params.slideClass}`), p = o ? e.virtual.slides.length : c.length; let u = []; const h = [], m = []; let f = a.slidesOffsetBefore; "function" == typeof f && (f = a.slidesOffsetBefore.call(e)); let g = a.slidesOffsetAfter; "function" == typeof g && (g = a.slidesOffsetAfter.call(e)); const w = e.snapGrid.length, b = e.slidesGrid.length; let x = a.spaceBetween, y = -f, E = 0, C = 0; if (void 0 === r) return; "string" == typeof x && x.indexOf("%") >= 0 && (x = parseFloat(x.replace("%", "")) / 100 * r), e.virtualSize = -x, n ? c.css({ marginLeft: "", marginBottom: "", marginTop: "" }) : c.css({ marginRight: "", marginBottom: "", marginTop: "" }), a.centeredSlides && a.cssMode && (v(e.wrapperEl, "--swiper-centered-offset-before", ""), v(e.wrapperEl, "--swiper-centered-offset-after", "")); const T = a.grid && a.grid.rows > 1 && e.grid; let $; T && e.grid.initSlides(p); const S = "auto" === a.slidesPerView && a.breakpoints && Object.keys(a.breakpoints).filter((e => void 0 !== a.breakpoints[e].slidesPerView)).length > 0; for (let i = 0; i < p; i += 1) { $ = 0; const n = c.eq(i); if (T && e.grid.updateSlide(i, n, p, t), "none" !== n.css("display")) { if ("auto" === a.slidesPerView) { S && (c[i].style[t("width")] = ""); const r = getComputedStyle(n[0]), l = n[0].style.transform, o = n[0].style.webkitTransform; if (l && (n[0].style.transform = "none"), o && (n[0].style.webkitTransform = "none"), a.roundLengths) $ = e.isHorizontal() ? n.outerWidth(!0) : n.outerHeight(!0); else { const e = s(r, "width"), t = s(r, "padding-left"), a = s(r, "padding-right"), i = s(r, "margin-left"), l = s(r, "margin-right"), o = r.getPropertyValue("box-sizing"); if (o && "border-box" === o) $ = e + i + l; else { const { clientWidth: s, offsetWidth: r } = n[0]; $ = e + t + a + i + l + (r - s) } } l && (n[0].style.transform = l), o && (n[0].style.webkitTransform = o), a.roundLengths && ($ = Math.floor($)) } else $ = (r - (a.slidesPerView - 1) * x) / a.slidesPerView, a.roundLengths && ($ = Math.floor($)), c[i] && (c[i].style[t("width")] = `${$}px`); c[i] && (c[i].swiperSlideSize = $), m.push($), a.centeredSlides ? (y = y + $ / 2 + E / 2 + x, 0 === E && 0 !== i && (y = y - r / 2 - x), 0 === i && (y = y - r / 2 - x), Math.abs(y) < .001 && (y = 0), a.roundLengths && (y = Math.floor(y)), C % a.slidesPerGroup == 0 && u.push(y), h.push(y)) : (a.roundLengths && (y = Math.floor(y)), (C - Math.min(e.params.slidesPerGroupSkip, C)) % e.params.slidesPerGroup == 0 && u.push(y), h.push(y), y = y + $ + x), e.virtualSize += $ + x, E = $, C += 1 } } if (e.virtualSize = Math.max(e.virtualSize, r) + g, n && l && ("slide" === a.effect || "coverflow" === a.effect) && i.css({ width: `${e.virtualSize + a.spaceBetween}px` }), a.setWrapperSize && i.css({ [t("width")]: `${e.virtualSize + a.spaceBetween}px` }), T && e.grid.updateWrapperSize($, u, t), !a.centeredSlides) { const t = []; for (let s = 0; s < u.length; s += 1) { let i = u[s]; a.roundLengths && (i = Math.floor(i)), u[s] <= e.virtualSize - r && t.push(i) } u = t, Math.floor(e.virtualSize - r) - Math.floor(u[u.length - 1]) > 1 && u.push(e.virtualSize - r) } if (0 === u.length && (u = [0]), 0 !== a.spaceBetween) { const s = e.isHorizontal() && n ? "marginLeft" : t("marginRight"); c.filter(((e, t) => !a.cssMode || t !== c.length - 1)).css({ [s]: `${x}px` }) } if (a.centeredSlides && a.centeredSlidesBounds) { let e = 0; m.forEach((t => { e += t + (a.spaceBetween ? a.spaceBetween : 0) })), e -= a.spaceBetween; const t = e - r; u = u.map((e => e < 0 ? -f : e > t ? t + g : e)) } if (a.centerInsufficientSlides) { let e = 0; if (m.forEach((t => { e += t + (a.spaceBetween ? a.spaceBetween : 0) })), e -= a.spaceBetween, e < r) { const t = (r - e) / 2; u.forEach(((e, s) => { u[s] = e - t })), h.forEach(((e, s) => { h[s] = e + t })) } } if (Object.assign(e, { slides: c, snapGrid: u, slidesGrid: h, slidesSizesGrid: m }), a.centeredSlides && a.cssMode && !a.centeredSlidesBounds) { v(e.wrapperEl, "--swiper-centered-offset-before", -u[0] + "px"), v(e.wrapperEl, "--swiper-centered-offset-after", e.size / 2 - m[m.length - 1] / 2 + "px"); const t = -e.snapGrid[0], s = -e.slidesGrid[0]; e.snapGrid = e.snapGrid.map((e => e + t)), e.slidesGrid = e.slidesGrid.map((e => e + s)) } if (p !== d && e.emit("slidesLengthChange"), u.length !== w && (e.params.watchOverflow && e.checkOverflow(), e.emit("snapGridLengthChange")), h.length !== b && e.emit("slidesGridLengthChange"), a.watchSlidesProgress && e.updateSlidesOffset(), !(o || a.cssMode || "slide" !== a.effect && "fade" !== a.effect)) { const t = `${a.containerModifierClass}backface-hidden`, s = e.$el.hasClass(t); p <= a.maxBackfaceHiddenSlides ? s || e.$el.addClass(t) : s && e.$el.removeClass(t) } }, updateAutoHeight: function (e) { const t = this, s = [], a = t.virtual && t.params.virtual.enabled; let i, r = 0; "number" == typeof e ? t.setTransition(e) : !0 === e && t.setTransition(t.params.speed); const n = e => a ? t.slides.filter((t => parseInt(t.getAttribute("data-swiper-slide-index"), 10) === e))[0] : t.slides.eq(e)[0]; if ("auto" !== t.params.slidesPerView && t.params.slidesPerView > 1) if (t.params.centeredSlides) (t.visibleSlides || d([])).each((e => { s.push(e) })); else for (i = 0; i < Math.ceil(t.params.slidesPerView); i += 1) { const e = t.activeIndex + i; if (e > t.slides.length && !a) break; s.push(n(e)) } else s.push(n(t.activeIndex)); for (i = 0; i < s.length; i += 1)if (void 0 !== s[i]) { const e = s[i].offsetHeight; r = e > r ? e : r } (r || 0 === r) && t.$wrapperEl.css("height", `${r}px`) }, updateSlidesOffset: function () { const e = this, t = e.slides; for (let s = 0; s < t.length; s += 1)t[s].swiperSlideOffset = e.isHorizontal() ? t[s].offsetLeft : t[s].offsetTop }, updateSlidesProgress: function (e) { void 0 === e && (e = this && this.translate || 0); const t = this, s = t.params, { slides: a, rtlTranslate: i, snapGrid: r } = t; if (0 === a.length) return; void 0 === a[0].swiperSlideOffset && t.updateSlidesOffset(); let n = -e; i && (n = e), a.removeClass(s.slideVisibleClass), t.visibleSlidesIndexes = [], t.visibleSlides = []; for (let e = 0; e < a.length; e += 1) { const l = a[e]; let o = l.swiperSlideOffset; s.cssMode && s.centeredSlides && (o -= a[0].swiperSlideOffset); const d = (n + (s.centeredSlides ? t.minTranslate() : 0) - o) / (l.swiperSlideSize + s.spaceBetween), c = (n - r[0] + (s.centeredSlides ? t.minTranslate() : 0) - o) / (l.swiperSlideSize + s.spaceBetween), p = -(n - o), u = p + t.slidesSizesGrid[e]; (p >= 0 && p < t.size - 1 || u > 1 && u <= t.size || p <= 0 && u >= t.size) && (t.visibleSlides.push(l), t.visibleSlidesIndexes.push(e), a.eq(e).addClass(s.slideVisibleClass)), l.progress = i ? -d : d, l.originalProgress = i ? -c : c } t.visibleSlides = d(t.visibleSlides) }, updateProgress: function (e) { const t = this; if (void 0 === e) { const s = t.rtlTranslate ? -1 : 1; e = t && t.translate && t.translate * s || 0 } const s = t.params, a = t.maxTranslate() - t.minTranslate(); let { progress: i, isBeginning: r, isEnd: n } = t; const l = r, o = n; 0 === a ? (i = 0, r = !0, n = !0) : (i = (e - t.minTranslate()) / a, r = i <= 0, n = i >= 1), Object.assign(t, { progress: i, isBeginning: r, isEnd: n }), (s.watchSlidesProgress || s.centeredSlides && s.autoHeight) && t.updateSlidesProgress(e), r && !l && t.emit("reachBeginning toEdge"), n && !o && t.emit("reachEnd toEdge"), (l && !r || o && !n) && t.emit("fromEdge"), t.emit("progress", i) }, updateSlidesClasses: function () { const e = this, { slides: t, params: s, $wrapperEl: a, activeIndex: i, realIndex: r } = e, n = e.virtual && s.virtual.enabled; let l; t.removeClass(`${s.slideActiveClass} ${s.slideNextClass} ${s.slidePrevClass} ${s.slideDuplicateActiveClass} ${s.slideDuplicateNextClass} ${s.slideDuplicatePrevClass}`), l = n ? e.$wrapperEl.find(`.${s.slideClass}[data-swiper-slide-index="${i}"]`) : t.eq(i), l.addClass(s.slideActiveClass), s.loop && (l.hasClass(s.slideDuplicateClass) ? a.children(`.${s.slideClass}:not(.${s.slideDuplicateClass})[data-swiper-slide-index="${r}"]`).addClass(s.slideDuplicateActiveClass) : a.children(`.${s.slideClass}.${s.slideDuplicateClass}[data-swiper-slide-index="${r}"]`).addClass(s.slideDuplicateActiveClass)); let o = l.nextAll(`.${s.slideClass}`).eq(0).addClass(s.slideNextClass); s.loop && 0 === o.length && (o = t.eq(0), o.addClass(s.slideNextClass)); let d = l.prevAll(`.${s.slideClass}`).eq(0).addClass(s.slidePrevClass); s.loop && 0 === d.length && (d = t.eq(-1), d.addClass(s.slidePrevClass)), s.loop && (o.hasClass(s.slideDuplicateClass) ? a.children(`.${s.slideClass}:not(.${s.slideDuplicateClass})[data-swiper-slide-index="${o.attr("data-swiper-slide-index")}"]`).addClass(s.slideDuplicateNextClass) : a.children(`.${s.slideClass}.${s.slideDuplicateClass}[data-swiper-slide-index="${o.attr("data-swiper-slide-index")}"]`).addClass(s.slideDuplicateNextClass), d.hasClass(s.slideDuplicateClass) ? a.children(`.${s.slideClass}:not(.${s.slideDuplicateClass})[data-swiper-slide-index="${d.attr("data-swiper-slide-index")}"]`).addClass(s.slideDuplicatePrevClass) : a.children(`.${s.slideClass}.${s.slideDuplicateClass}[data-swiper-slide-index="${d.attr("data-swiper-slide-index")}"]`).addClass(s.slideDuplicatePrevClass)), e.emitSlidesClasses() }, updateActiveIndex: function (e) { const t = this, s = t.rtlTranslate ? t.translate : -t.translate, { slidesGrid: a, snapGrid: i, params: r, activeIndex: n, realIndex: l, snapIndex: o } = t; let d, c = e; if (void 0 === c) { for (let e = 0; e < a.length; e += 1)void 0 !== a[e + 1] ? s >= a[e] && s < a[e + 1] - (a[e + 1] - a[e]) / 2 ? c = e : s >= a[e] && s < a[e + 1] && (c = e + 1) : s >= a[e] && (c = e); r.normalizeSlideIndex && (c < 0 || void 0 === c) && (c = 0) } if (i.indexOf(s) >= 0) d = i.indexOf(s); else { const e = Math.min(r.slidesPerGroupSkip, c); d = e + Math.floor((c - e) / r.slidesPerGroup) } if (d >= i.length && (d = i.length - 1), c === n) return void (d !== o && (t.snapIndex = d, t.emit("snapIndexChange"))); const p = parseInt(t.slides.eq(c).attr("data-swiper-slide-index") || c, 10); Object.assign(t, { snapIndex: d, realIndex: p, previousIndex: n, activeIndex: c }), t.emit("activeIndexChange"), t.emit("snapIndexChange"), l !== p && t.emit("realIndexChange"), (t.initialized || t.params.runCallbacksOnInit) && t.emit("slideChange") }, updateClickedSlide: function (e) { const t = this, s = t.params, a = d(e).closest(`.${s.slideClass}`)[0]; let i, r = !1; if (a) for (let e = 0; e < t.slides.length; e += 1)if (t.slides[e] === a) { r = !0, i = e; break } if (!a || !r) return t.clickedSlide = void 0, void (t.clickedIndex = void 0); t.clickedSlide = a, t.virtual && t.params.virtual.enabled ? t.clickedIndex = parseInt(d(a).attr("data-swiper-slide-index"), 10) : t.clickedIndex = i, s.slideToClickedSlide && void 0 !== t.clickedIndex && t.clickedIndex !== t.activeIndex && t.slideToClickedSlide() } }; var M = { getTranslate: function (e) { void 0 === e && (e = this.isHorizontal() ? "x" : "y"); const { params: t, rtlTranslate: s, translate: a, $wrapperEl: i } = this; if (t.virtualTranslate) return s ? -a : a; if (t.cssMode) return a; let r = h(i[0], e); return s && (r = -r), r || 0 }, setTranslate: function (e, t) { const s = this, { rtlTranslate: a, params: i, $wrapperEl: r, wrapperEl: n, progress: l } = s; let o, d = 0, c = 0; s.isHorizontal() ? d = a ? -e : e : c = e, i.roundLengths && (d = Math.floor(d), c = Math.floor(c)), i.cssMode ? n[s.isHorizontal() ? "scrollLeft" : "scrollTop"] = s.isHorizontal() ? -d : -c : i.virtualTranslate || r.transform(`translate3d(${d}px, ${c}px, 0px)`), s.previousTranslate = s.translate, s.translate = s.isHorizontal() ? d : c; const p = s.maxTranslate() - s.minTranslate(); o = 0 === p ? 0 : (e - s.minTranslate()) / p, o !== l && s.updateProgress(e), s.emit("setTranslate", s.translate, t) }, minTranslate: function () { return -this.snapGrid[0] }, maxTranslate: function () { return -this.snapGrid[this.snapGrid.length - 1] }, translateTo: function (e, t, s, a, i) { void 0 === e && (e = 0), void 0 === t && (t = this.params.speed), void 0 === s && (s = !0), void 0 === a && (a = !0); const r = this, { params: n, wrapperEl: l } = r; if (r.animating && n.preventInteractionOnTransition) return !1; const o = r.minTranslate(), d = r.maxTranslate(); let c; if (c = a && e > o ? o : a && e < d ? d : e, r.updateProgress(c), n.cssMode) { const e = r.isHorizontal(); if (0 === t) l[e ? "scrollLeft" : "scrollTop"] = -c; else { if (!r.support.smoothScroll) return w({ swiper: r, targetPosition: -c, side: e ? "left" : "top" }), !0; l.scrollTo({ [e ? "left" : "top"]: -c, behavior: "smooth" }) } return !0 } return 0 === t ? (r.setTransition(0), r.setTranslate(c), s && (r.emit("beforeTransitionStart", t, i), r.emit("transitionEnd"))) : (r.setTransition(t), r.setTranslate(c), s && (r.emit("beforeTransitionStart", t, i), r.emit("transitionStart")), r.animating || (r.animating = !0, r.onTranslateToWrapperTransitionEnd || (r.onTranslateToWrapperTransitionEnd = function (e) { r && !r.destroyed && e.target === this && (r.$wrapperEl[0].removeEventListener("transitionend", r.onTranslateToWrapperTransitionEnd), r.$wrapperEl[0].removeEventListener("webkitTransitionEnd", r.onTranslateToWrapperTransitionEnd), r.onTranslateToWrapperTransitionEnd = null, delete r.onTranslateToWrapperTransitionEnd, s && r.emit("transitionEnd")) }), r.$wrapperEl[0].addEventListener("transitionend", r.onTranslateToWrapperTransitionEnd), r.$wrapperEl[0].addEventListener("webkitTransitionEnd", r.onTranslateToWrapperTransitionEnd))), !0 } }; function P(e) { let { swiper: t, runCallbacks: s, direction: a, step: i } = e; const { activeIndex: r, previousIndex: n } = t; let l = a; if (l || (l = r > n ? "next" : r < n ? "prev" : "reset"), t.emit(`transition${i}`), s && r !== n) { if ("reset" === l) return void t.emit(`slideResetTransition${i}`); t.emit(`slideChangeTransition${i}`), "next" === l ? t.emit(`slideNextTransition${i}`) : t.emit(`slidePrevTransition${i}`) } } var k = { slideTo: function (e, t, s, a, i) { if (void 0 === e && (e = 0), void 0 === t && (t = this.params.speed), void 0 === s && (s = !0), "number" != typeof e && "string" != typeof e) throw new Error(`The 'index' argument cannot have type other than 'number' or 'string'. [${typeof e}] given.`); if ("string" == typeof e) { const t = parseInt(e, 10); if (!isFinite(t)) throw new Error(`The passed-in 'index' (string) couldn't be converted to 'number'. [${e}] given.`); e = t } const r = this; let n = e; n < 0 && (n = 0); const { params: l, snapGrid: o, slidesGrid: d, previousIndex: c, activeIndex: p, rtlTranslate: u, wrapperEl: h, enabled: m } = r; if (r.animating && l.preventInteractionOnTransition || !m && !a && !i) return !1; const f = Math.min(r.params.slidesPerGroupSkip, n); let g = f + Math.floor((n - f) / r.params.slidesPerGroup); g >= o.length && (g = o.length - 1); const v = -o[g]; if (l.normalizeSlideIndex) for (let e = 0; e < d.length; e += 1) { const t = -Math.floor(100 * v), s = Math.floor(100 * d[e]), a = Math.floor(100 * d[e + 1]); void 0 !== d[e + 1] ? t >= s && t < a - (a - s) / 2 ? n = e : t >= s && t < a && (n = e + 1) : t >= s && (n = e) } if (r.initialized && n !== p) { if (!r.allowSlideNext && v < r.translate && v < r.minTranslate()) return !1; if (!r.allowSlidePrev && v > r.translate && v > r.maxTranslate() && (p || 0) !== n) return !1 } let b; if (n !== (c || 0) && s && r.emit("beforeSlideChangeStart"), r.updateProgress(v), b = n > p ? "next" : n < p ? "prev" : "reset", u && -v === r.translate || !u && v === r.translate) return r.updateActiveIndex(n), l.autoHeight && r.updateAutoHeight(), r.updateSlidesClasses(), "slide" !== l.effect && r.setTranslate(v), "reset" !== b && (r.transitionStart(s, b), r.transitionEnd(s, b)), !1; if (l.cssMode) { const e = r.isHorizontal(), s = u ? v : -v; if (0 === t) { const t = r.virtual && r.params.virtual.enabled; t && (r.wrapperEl.style.scrollSnapType = "none", r._immediateVirtual = !0), h[e ? "scrollLeft" : "scrollTop"] = s, t && requestAnimationFrame((() => { r.wrapperEl.style.scrollSnapType = "", r._swiperImmediateVirtual = !1 })) } else { if (!r.support.smoothScroll) return w({ swiper: r, targetPosition: s, side: e ? "left" : "top" }), !0; h.scrollTo({ [e ? "left" : "top"]: s, behavior: "smooth" }) } return !0 } return r.setTransition(t), r.setTranslate(v), r.updateActiveIndex(n), r.updateSlidesClasses(), r.emit("beforeTransitionStart", t, a), r.transitionStart(s, b), 0 === t ? r.transitionEnd(s, b) : r.animating || (r.animating = !0, r.onSlideToWrapperTransitionEnd || (r.onSlideToWrapperTransitionEnd = function (e) { r && !r.destroyed && e.target === this && (r.$wrapperEl[0].removeEventListener("transitionend", r.onSlideToWrapperTransitionEnd), r.$wrapperEl[0].removeEventListener("webkitTransitionEnd", r.onSlideToWrapperTransitionEnd), r.onSlideToWrapperTransitionEnd = null, delete r.onSlideToWrapperTransitionEnd, r.transitionEnd(s, b)) }), r.$wrapperEl[0].addEventListener("transitionend", r.onSlideToWrapperTransitionEnd), r.$wrapperEl[0].addEventListener("webkitTransitionEnd", r.onSlideToWrapperTransitionEnd)), !0 }, slideToLoop: function (e, t, s, a) { if (void 0 === e && (e = 0), void 0 === t && (t = this.params.speed), void 0 === s && (s = !0), "string" == typeof e) { const t = parseInt(e, 10); if (!isFinite(t)) throw new Error(`The passed-in 'index' (string) couldn't be converted to 'number'. [${e}] given.`); e = t } const i = this; let r = e; return i.params.loop && (r += i.loopedSlides), i.slideTo(r, t, s, a) }, slideNext: function (e, t, s) { void 0 === e && (e = this.params.speed), void 0 === t && (t = !0); const a = this, { animating: i, enabled: r, params: n } = a; if (!r) return a; let l = n.slidesPerGroup; "auto" === n.slidesPerView && 1 === n.slidesPerGroup && n.slidesPerGroupAuto && (l = Math.max(a.slidesPerViewDynamic("current", !0), 1)); const o = a.activeIndex < n.slidesPerGroupSkip ? 1 : l; if (n.loop) { if (i && n.loopPreventsSlide) return !1; a.loopFix(), a._clientLeft = a.$wrapperEl[0].clientLeft } return n.rewind && a.isEnd ? a.slideTo(0, e, t, s) : a.slideTo(a.activeIndex + o, e, t, s) }, slidePrev: function (e, t, s) { void 0 === e && (e = this.params.speed), void 0 === t && (t = !0); const a = this, { params: i, animating: r, snapGrid: n, slidesGrid: l, rtlTranslate: o, enabled: d } = a; if (!d) return a; if (i.loop) { if (r && i.loopPreventsSlide) return !1; a.loopFix(), a._clientLeft = a.$wrapperEl[0].clientLeft } function c(e) { return e < 0 ? -Math.floor(Math.abs(e)) : Math.floor(e) } const p = c(o ? a.translate : -a.translate), u = n.map((e => c(e))); let h = n[u.indexOf(p) - 1]; if (void 0 === h && i.cssMode) { let e; n.forEach(((t, s) => { p >= t && (e = s) })), void 0 !== e && (h = n[e > 0 ? e - 1 : e]) } let m = 0; if (void 0 !== h && (m = l.indexOf(h), m < 0 && (m = a.activeIndex - 1), "auto" === i.slidesPerView && 1 === i.slidesPerGroup && i.slidesPerGroupAuto && (m = m - a.slidesPerViewDynamic("previous", !0) + 1, m = Math.max(m, 0))), i.rewind && a.isBeginning) { const i = a.params.virtual && a.params.virtual.enabled && a.virtual ? a.virtual.slides.length - 1 : a.slides.length - 1; return a.slideTo(i, e, t, s) } return a.slideTo(m, e, t, s) }, slideReset: function (e, t, s) { return void 0 === e && (e = this.params.speed), void 0 === t && (t = !0), this.slideTo(this.activeIndex, e, t, s) }, slideToClosest: function (e, t, s, a) { void 0 === e && (e = this.params.speed), void 0 === t && (t = !0), void 0 === a && (a = .5); const i = this; let r = i.activeIndex; const n = Math.min(i.params.slidesPerGroupSkip, r), l = n + Math.floor((r - n) / i.params.slidesPerGroup), o = i.rtlTranslate ? i.translate : -i.translate; if (o >= i.snapGrid[l]) { const e = i.snapGrid[l]; o - e > (i.snapGrid[l + 1] - e) * a && (r += i.params.slidesPerGroup) } else { const e = i.snapGrid[l - 1]; o - e <= (i.snapGrid[l] - e) * a && (r -= i.params.slidesPerGroup) } return r = Math.max(r, 0), r = Math.min(r, i.slidesGrid.length - 1), i.slideTo(r, e, t, s) }, slideToClickedSlide: function () { const e = this, { params: t, $wrapperEl: s } = e, a = "auto" === t.slidesPerView ? e.slidesPerViewDynamic() : t.slidesPerView; let i, r = e.clickedIndex; if (t.loop) { if (e.animating) return; i = parseInt(d(e.clickedSlide).attr("data-swiper-slide-index"), 10), t.centeredSlides ? r < e.loopedSlides - a / 2 || r > e.slides.length - e.loopedSlides + a / 2 ? (e.loopFix(), r = s.children(`.${t.slideClass}[data-swiper-slide-index="${i}"]:not(.${t.slideDuplicateClass})`).eq(0).index(), p((() => { e.slideTo(r) }))) : e.slideTo(r) : r > e.slides.length - a ? (e.loopFix(), r = s.children(`.${t.slideClass}[data-swiper-slide-index="${i}"]:not(.${t.slideDuplicateClass})`).eq(0).index(), p((() => { e.slideTo(r) }))) : e.slideTo(r) } else e.slideTo(r) } }; var z = { loopCreate: function () { const e = this, t = a(), { params: s, $wrapperEl: i } = e, r = i.children().length > 0 ? d(i.children()[0].parentNode) : i; r.children(`.${s.slideClass}.${s.slideDuplicateClass}`).remove(); let n = r.children(`.${s.slideClass}`); if (s.loopFillGroupWithBlank) { const e = s.slidesPerGroup - n.length % s.slidesPerGroup; if (e !== s.slidesPerGroup) { for (let a = 0; a < e; a += 1) { const e = d(t.createElement("div")).addClass(`${s.slideClass} ${s.slideBlankClass}`); r.append(e) } n = r.children(`.${s.slideClass}`) } } "auto" !== s.slidesPerView || s.loopedSlides || (s.loopedSlides = n.length), e.loopedSlides = Math.ceil(parseFloat(s.loopedSlides || s.slidesPerView, 10)), e.loopedSlides += s.loopAdditionalSlides, e.loopedSlides > n.length && e.params.loopedSlidesLimit && (e.loopedSlides = n.length); const l = [], o = []; n.each(((e, t) => { d(e).attr("data-swiper-slide-index", t) })); for (let t = 0; t < e.loopedSlides; t += 1) { const e = t - Math.floor(t / n.length) * n.length; o.push(n.eq(e)[0]), l.unshift(n.eq(n.length - e - 1)[0]) } for (let e = 0; e < o.length; e += 1)r.append(d(o[e].cloneNode(!0)).addClass(s.slideDuplicateClass)); for (let e = l.length - 1; e >= 0; e -= 1)r.prepend(d(l[e].cloneNode(!0)).addClass(s.slideDuplicateClass)) }, loopFix: function () { const e = this; e.emit("beforeLoopFix"); const { activeIndex: t, slides: s, loopedSlides: a, allowSlidePrev: i, allowSlideNext: r, snapGrid: n, rtlTranslate: l } = e; let o; e.allowSlidePrev = !0, e.allowSlideNext = !0; const d = -n[t] - e.getTranslate(); if (t < a) { o = s.length - 3 * a + t, o += a; e.slideTo(o, 0, !1, !0) && 0 !== d && e.setTranslate((l ? -e.translate : e.translate) - d) } else if (t >= s.length - a) { o = -s.length + t + a, o += a; e.slideTo(o, 0, !1, !0) && 0 !== d && e.setTranslate((l ? -e.translate : e.translate) - d) } e.allowSlidePrev = i, e.allowSlideNext = r, e.emit("loopFix") }, loopDestroy: function () { const { $wrapperEl: e, params: t, slides: s } = this; e.children(`.${t.slideClass}.${t.slideDuplicateClass},.${t.slideClass}.${t.slideBlankClass}`).remove(), s.removeAttr("data-swiper-slide-index") } }; function L(e) { const t = this, s = a(), i = r(), n = t.touchEventsData, { params: l, touches: o, enabled: c } = t; if (!c) return; if (t.animating && l.preventInteractionOnTransition) return; !t.animating && l.cssMode && l.loop && t.loopFix(); let p = e; p.originalEvent && (p = p.originalEvent); let h = d(p.target); if ("wrapper" === l.touchEventsTarget && !h.closest(t.wrapperEl).length) return; if (n.isTouchEvent = "touchstart" === p.type, !n.isTouchEvent && "which" in p && 3 === p.which) return; if (!n.isTouchEvent && "button" in p && p.button > 0) return; if (n.isTouched && n.isMoved) return; const m = !!l.noSwipingClass && "" !== l.noSwipingClass, f = e.composedPath ? e.composedPath() : e.path; m && p.target && p.target.shadowRoot && f && (h = d(f[0])); const g = l.noSwipingSelector ? l.noSwipingSelector : `.${l.noSwipingClass}`, v = !(!p.target || !p.target.shadowRoot); if (l.noSwiping && (v ? function (e, t) { return void 0 === t && (t = this), function t(s) { if (!s || s === a() || s === r()) return null; s.assignedSlot && (s = s.assignedSlot); const i = s.closest(e); return i || s.getRootNode ? i || t(s.getRootNode().host) : null }(t) }(g, h[0]) : h.closest(g)[0])) return void (t.allowClick = !0); if (l.swipeHandler && !h.closest(l.swipeHandler)[0]) return; o.currentX = "touchstart" === p.type ? p.targetTouches[0].pageX : p.pageX, o.currentY = "touchstart" === p.type ? p.targetTouches[0].pageY : p.pageY; const w = o.currentX, b = o.currentY, x = l.edgeSwipeDetection || l.iOSEdgeSwipeDetection, y = l.edgeSwipeThreshold || l.iOSEdgeSwipeThreshold; if (x && (w <= y || w >= i.innerWidth - y)) { if ("prevent" !== x) return; e.preventDefault() } if (Object.assign(n, { isTouched: !0, isMoved: !1, allowTouchCallbacks: !0, isScrolling: void 0, startMoving: void 0 }), o.startX = w, o.startY = b, n.touchStartTime = u(), t.allowClick = !0, t.updateSize(), t.swipeDirection = void 0, l.threshold > 0 && (n.allowThresholdMove = !1), "touchstart" !== p.type) { let e = !0; h.is(n.focusableElements) && (e = !1, "SELECT" === h[0].nodeName && (n.isTouched = !1)), s.activeElement && d(s.activeElement).is(n.focusableElements) && s.activeElement !== h[0] && s.activeElement.blur(); const a = e && t.allowTouchMove && l.touchStartPreventDefault; !l.touchStartForcePreventDefault && !a || h[0].isContentEditable || p.preventDefault() } t.params.freeMode && t.params.freeMode.enabled && t.freeMode && t.animating && !l.cssMode && t.freeMode.onTouchStart(), t.emit("touchStart", p) } function O(e) { const t = a(), s = this, i = s.touchEventsData, { params: r, touches: n, rtlTranslate: l, enabled: o } = s; if (!o) return; let c = e; if (c.originalEvent && (c = c.originalEvent), !i.isTouched) return void (i.startMoving && i.isScrolling && s.emit("touchMoveOpposite", c)); if (i.isTouchEvent && "touchmove" !== c.type) return; const p = "touchmove" === c.type && c.targetTouches && (c.targetTouches[0] || c.changedTouches[0]), h = "touchmove" === c.type ? p.pageX : c.pageX, m = "touchmove" === c.type ? p.pageY : c.pageY; if (c.preventedByNestedSwiper) return n.startX = h, void (n.startY = m); if (!s.allowTouchMove) return d(c.target).is(i.focusableElements) || (s.allowClick = !1), void (i.isTouched && (Object.assign(n, { startX: h, startY: m, currentX: h, currentY: m }), i.touchStartTime = u())); if (i.isTouchEvent && r.touchReleaseOnEdges && !r.loop) if (s.isVertical()) { if (m < n.startY && s.translate <= s.maxTranslate() || m > n.startY && s.translate >= s.minTranslate()) return i.isTouched = !1, void (i.isMoved = !1) } else if (h < n.startX && s.translate <= s.maxTranslate() || h > n.startX && s.translate >= s.minTranslate()) return; if (i.isTouchEvent && t.activeElement && c.target === t.activeElement && d(c.target).is(i.focusableElements)) return i.isMoved = !0, void (s.allowClick = !1); if (i.allowTouchCallbacks && s.emit("touchMove", c), c.targetTouches && c.targetTouches.length > 1) return; n.currentX = h, n.currentY = m; const f = n.currentX - n.startX, g = n.currentY - n.startY; if (s.params.threshold && Math.sqrt(f ** 2 + g ** 2) < s.params.threshold) return; if (void 0 === i.isScrolling) { let e; s.isHorizontal() && n.currentY === n.startY || s.isVertical() && n.currentX === n.startX ? i.isScrolling = !1 : f * f + g * g >= 25 && (e = 180 * Math.atan2(Math.abs(g), Math.abs(f)) / Math.PI, i.isScrolling = s.isHorizontal() ? e > r.touchAngle : 90 - e > r.touchAngle) } if (i.isScrolling && s.emit("touchMoveOpposite", c), void 0 === i.startMoving && (n.currentX === n.startX && n.currentY === n.startY || (i.startMoving = !0)), i.isScrolling) return void (i.isTouched = !1); if (!i.startMoving) return; s.allowClick = !1, !r.cssMode && c.cancelable && c.preventDefault(), r.touchMoveStopPropagation && !r.nested && c.stopPropagation(), i.isMoved || (r.loop && !r.cssMode && s.loopFix(), i.startTranslate = s.getTranslate(), s.setTransition(0), s.animating && s.$wrapperEl.trigger("webkitTransitionEnd transitionend"), i.allowMomentumBounce = !1, !r.grabCursor || !0 !== s.allowSlideNext && !0 !== s.allowSlidePrev || s.setGrabCursor(!0), s.emit("sliderFirstMove", c)), s.emit("sliderMove", c), i.isMoved = !0; let v = s.isHorizontal() ? f : g; n.diff = v, v *= r.touchRatio, l && (v = -v), s.swipeDirection = v > 0 ? "prev" : "next", i.currentTranslate = v + i.startTranslate; let w = !0, b = r.resistanceRatio; if (r.touchReleaseOnEdges && (b = 0), v > 0 && i.currentTranslate > s.minTranslate() ? (w = !1, r.resistance && (i.currentTranslate = s.minTranslate() - 1 + (-s.minTranslate() + i.startTranslate + v) ** b)) : v < 0 && i.currentTranslate < s.maxTranslate() && (w = !1, r.resistance && (i.currentTranslate = s.maxTranslate() + 1 - (s.maxTranslate() - i.startTranslate - v) ** b)), w && (c.preventedByNestedSwiper = !0), !s.allowSlideNext && "next" === s.swipeDirection && i.currentTranslate < i.startTranslate && (i.currentTranslate = i.startTranslate), !s.allowSlidePrev && "prev" === s.swipeDirection && i.currentTranslate > i.startTranslate && (i.currentTranslate = i.startTranslate), s.allowSlidePrev || s.allowSlideNext || (i.currentTranslate = i.startTranslate), r.threshold > 0) { if (!(Math.abs(v) > r.threshold || i.allowThresholdMove)) return void (i.currentTranslate = i.startTranslate); if (!i.allowThresholdMove) return i.allowThresholdMove = !0, n.startX = n.currentX, n.startY = n.currentY, i.currentTranslate = i.startTranslate, void (n.diff = s.isHorizontal() ? n.currentX - n.startX : n.currentY - n.startY) } r.followFinger && !r.cssMode && ((r.freeMode && r.freeMode.enabled && s.freeMode || r.watchSlidesProgress) && (s.updateActiveIndex(), s.updateSlidesClasses()), s.params.freeMode && r.freeMode.enabled && s.freeMode && s.freeMode.onTouchMove(), s.updateProgress(i.currentTranslate), s.setTranslate(i.currentTranslate)) } function I(e) { const t = this, s = t.touchEventsData, { params: a, touches: i, rtlTranslate: r, slidesGrid: n, enabled: l } = t; if (!l) return; let o = e; if (o.originalEvent && (o = o.originalEvent), s.allowTouchCallbacks && t.emit("touchEnd", o), s.allowTouchCallbacks = !1, !s.isTouched) return s.isMoved && a.grabCursor && t.setGrabCursor(!1), s.isMoved = !1, void (s.startMoving = !1); a.grabCursor && s.isMoved && s.isTouched && (!0 === t.allowSlideNext || !0 === t.allowSlidePrev) && t.setGrabCursor(!1); const d = u(), c = d - s.touchStartTime; if (t.allowClick) { const e = o.path || o.composedPath && o.composedPath(); t.updateClickedSlide(e && e[0] || o.target), t.emit("tap click", o), c < 300 && d - s.lastClickTime < 300 && t.emit("doubleTap doubleClick", o) } if (s.lastClickTime = u(), p((() => { t.destroyed || (t.allowClick = !0) })), !s.isTouched || !s.isMoved || !t.swipeDirection || 0 === i.diff || s.currentTranslate === s.startTranslate) return s.isTouched = !1, s.isMoved = !1, void (s.startMoving = !1); let h; if (s.isTouched = !1, s.isMoved = !1, s.startMoving = !1, h = a.followFinger ? r ? t.translate : -t.translate : -s.currentTranslate, a.cssMode) return; if (t.params.freeMode && a.freeMode.enabled) return void t.freeMode.onTouchEnd({ currentPos: h }); let m = 0, f = t.slidesSizesGrid[0]; for (let e = 0; e < n.length; e += e < a.slidesPerGroupSkip ? 1 : a.slidesPerGroup) { const t = e < a.slidesPerGroupSkip - 1 ? 1 : a.slidesPerGroup; void 0 !== n[e + t] ? h >= n[e] && h < n[e + t] && (m = e, f = n[e + t] - n[e]) : h >= n[e] && (m = e, f = n[n.length - 1] - n[n.length - 2]) } let g = null, v = null; a.rewind && (t.isBeginning ? v = t.params.virtual && t.params.virtual.enabled && t.virtual ? t.virtual.slides.length - 1 : t.slides.length - 1 : t.isEnd && (g = 0)); const w = (h - n[m]) / f, b = m < a.slidesPerGroupSkip - 1 ? 1 : a.slidesPerGroup; if (c > a.longSwipesMs) { if (!a.longSwipes) return void t.slideTo(t.activeIndex); "next" === t.swipeDirection && (w >= a.longSwipesRatio ? t.slideTo(a.rewind && t.isEnd ? g : m + b) : t.slideTo(m)), "prev" === t.swipeDirection && (w > 1 - a.longSwipesRatio ? t.slideTo(m + b) : null !== v && w < 0 && Math.abs(w) > a.longSwipesRatio ? t.slideTo(v) : t.slideTo(m)) } else { if (!a.shortSwipes) return void t.slideTo(t.activeIndex); t.navigation && (o.target === t.navigation.nextEl || o.target === t.navigation.prevEl) ? o.target === t.navigation.nextEl ? t.slideTo(m + b) : t.slideTo(m) : ("next" === t.swipeDirection && t.slideTo(null !== g ? g : m + b), "prev" === t.swipeDirection && t.slideTo(null !== v ? v : m)) } } function A() { const e = this, { params: t, el: s } = e; if (s && 0 === s.offsetWidth) return; t.breakpoints && e.setBreakpoint(); const { allowSlideNext: a, allowSlidePrev: i, snapGrid: r } = e; e.allowSlideNext = !0, e.allowSlidePrev = !0, e.updateSize(), e.updateSlides(), e.updateSlidesClasses(), ("auto" === t.slidesPerView || t.slidesPerView > 1) && e.isEnd && !e.isBeginning && !e.params.centeredSlides ? e.slideTo(e.slides.length - 1, 0, !1, !0) : e.slideTo(e.activeIndex, 0, !1, !0), e.autoplay && e.autoplay.running && e.autoplay.paused && e.autoplay.run(), e.allowSlidePrev = i, e.allowSlideNext = a, e.params.watchOverflow && r !== e.snapGrid && e.checkOverflow() } function D(e) { const t = this; t.enabled && (t.allowClick || (t.params.preventClicks && e.preventDefault(), t.params.preventClicksPropagation && t.animating && (e.stopPropagation(), e.stopImmediatePropagation()))) } function G() { const e = this, { wrapperEl: t, rtlTranslate: s, enabled: a } = e; if (!a) return; let i; e.previousTranslate = e.translate, e.isHorizontal() ? e.translate = -t.scrollLeft : e.translate = -t.scrollTop, 0 === e.translate && (e.translate = 0), e.updateActiveIndex(), e.updateSlidesClasses(); const r = e.maxTranslate() - e.minTranslate(); i = 0 === r ? 0 : (e.translate - e.minTranslate()) / r, i !== e.progress && e.updateProgress(s ? -e.translate : e.translate), e.emit("setTranslate", e.translate, !1) } let N = !1; function B() { } const H = (e, t) => { const s = a(), { params: i, touchEvents: r, el: n, wrapperEl: l, device: o, support: d } = e, c = !!i.nested, p = "on" === t ? "addEventListener" : "removeEventListener", u = t; if (d.touch) { const t = !("touchstart" !== r.start || !d.passiveListener || !i.passiveListeners) && { passive: !0, capture: !1 }; n[p](r.start, e.onTouchStart, t), n[p](r.move, e.onTouchMove, d.passiveListener ? { passive: !1, capture: c } : c), n[p](r.end, e.onTouchEnd, t), r.cancel && n[p](r.cancel, e.onTouchEnd, t) } else n[p](r.start, e.onTouchStart, !1), s[p](r.move, e.onTouchMove, c), s[p](r.end, e.onTouchEnd, !1); (i.preventClicks || i.preventClicksPropagation) && n[p]("click", e.onClick, !0), i.cssMode && l[p]("scroll", e.onScroll), i.updateOnWindowResize ? e[u](o.ios || o.android ? "resize orientationchange observerUpdate" : "resize observerUpdate", A, !0) : e[u]("observerUpdate", A, !0) }; var X = { attachEvents: function () { const e = this, t = a(), { params: s, support: i } = e; e.onTouchStart = L.bind(e), e.onTouchMove = O.bind(e), e.onTouchEnd = I.bind(e), s.cssMode && (e.onScroll = G.bind(e)), e.onClick = D.bind(e), i.touch && !N && (t.addEventListener("touchstart", B), N = !0), H(e, "on") }, detachEvents: function () { H(this, "off") } }; const Y = (e, t) => e.grid && t.grid && t.grid.rows > 1; var R = { addClasses: function () { const e = this, { classNames: t, params: s, rtl: a, $el: i, device: r, support: n } = e, l = function (e, t) { const s = []; return e.forEach((e => { "object" == typeof e ? Object.keys(e).forEach((a => { e[a] && s.push(t + a) })) : "string" == typeof e && s.push(t + e) })), s }(["initialized", s.direction, { "pointer-events": !n.touch }, { "free-mode": e.params.freeMode && s.freeMode.enabled }, { autoheight: s.autoHeight }, { rtl: a }, { grid: s.grid && s.grid.rows > 1 }, { "grid-column": s.grid && s.grid.rows > 1 && "column" === s.grid.fill }, { android: r.android }, { ios: r.ios }, { "css-mode": s.cssMode }, { centered: s.cssMode && s.centeredSlides }, { "watch-progress": s.watchSlidesProgress }], s.containerModifierClass); t.push(...l), i.addClass([...t].join(" ")), e.emitContainerClasses() }, removeClasses: function () { const { $el: e, classNames: t } = this; e.removeClass(t.join(" ")), this.emitContainerClasses() } }; var W = { init: !0, direction: "horizontal", touchEventsTarget: "wrapper", initialSlide: 0, speed: 300, cssMode: !1, updateOnWindowResize: !0, resizeObserver: !0, nested: !1, createElements: !1, enabled: !0, focusableElements: "input, select, option, textarea, button, video, label", width: null, height: null, preventInteractionOnTransition: !1, userAgent: null, url: null, edgeSwipeDetection: !1, edgeSwipeThreshold: 20, autoHeight: !1, setWrapperSize: !1, virtualTranslate: !1, effect: "slide", breakpoints: void 0, breakpointsBase: "window", spaceBetween: 0, slidesPerView: 1, slidesPerGroup: 1, slidesPerGroupSkip: 0, slidesPerGroupAuto: !1, centeredSlides: !1, centeredSlidesBounds: !1, slidesOffsetBefore: 0, slidesOffsetAfter: 0, normalizeSlideIndex: !0, centerInsufficientSlides: !1, watchOverflow: !0, roundLengths: !1, touchRatio: 1, touchAngle: 45, simulateTouch: !0, shortSwipes: !0, longSwipes: !0, longSwipesRatio: .5, longSwipesMs: 300, followFinger: !0, allowTouchMove: !0, threshold: 0, touchMoveStopPropagation: !1, touchStartPreventDefault: !0, touchStartForcePreventDefault: !1, touchReleaseOnEdges: !1, uniqueNavElements: !0, resistance: !0, resistanceRatio: .85, watchSlidesProgress: !1, grabCursor: !1, preventClicks: !0, preventClicksPropagation: !0, slideToClickedSlide: !1, preloadImages: !0, updateOnImagesReady: !0, loop: !1, loopAdditionalSlides: 0, loopedSlides: null, loopedSlidesLimit: !0, loopFillGroupWithBlank: !1, loopPreventsSlide: !0, rewind: !1, allowSlidePrev: !0, allowSlideNext: !0, swipeHandler: null, noSwiping: !0, noSwipingClass: "swiper-no-swiping", noSwipingSelector: null, passiveListeners: !0, maxBackfaceHiddenSlides: 10, containerModifierClass: "swiper-", slideClass: "swiper-slide", slideBlankClass: "swiper-slide-invisible-blank", slideActiveClass: "swiper-slide-active", slideDuplicateActiveClass: "swiper-slide-duplicate-active", slideVisibleClass: "swiper-slide-visible", slideDuplicateClass: "swiper-slide-duplicate", slideNextClass: "swiper-slide-next", slideDuplicateNextClass: "swiper-slide-duplicate-next", slidePrevClass: "swiper-slide-prev", slideDuplicatePrevClass: "swiper-slide-duplicate-prev", wrapperClass: "swiper-wrapper", runCallbacksOnInit: !0, _emitClasses: !1 }; function q(e, t) { return function (s) { void 0 === s && (s = {}); const a = Object.keys(s)[0], i = s[a]; "object" == typeof i && null !== i ? (["navigation", "pagination", "scrollbar"].indexOf(a) >= 0 && !0 === e[a] && (e[a] = { auto: !0 }), a in e && "enabled" in i ? (!0 === e[a] && (e[a] = { enabled: !0 }), "object" != typeof e[a] || "enabled" in e[a] || (e[a].enabled = !0), e[a] || (e[a] = { enabled: !1 }), g(t, s)) : g(t, s)) : g(t, s) } } const j = { eventsEmitter: $, update: S, translate: M, transition: { setTransition: function (e, t) { const s = this; s.params.cssMode || s.$wrapperEl.transition(e), s.emit("setTransition", e, t) }, transitionStart: function (e, t) { void 0 === e && (e = !0); const s = this, { params: a } = s; a.cssMode || (a.autoHeight && s.updateAutoHeight(), P({ swiper: s, runCallbacks: e, direction: t, step: "Start" })) }, transitionEnd: function (e, t) { void 0 === e && (e = !0); const s = this, { params: a } = s; s.animating = !1, a.cssMode || (s.setTransition(0), P({ swiper: s, runCallbacks: e, direction: t, step: "End" })) } }, slide: k, loop: z, grabCursor: { setGrabCursor: function (e) { const t = this; if (t.support.touch || !t.params.simulateTouch || t.params.watchOverflow && t.isLocked || t.params.cssMode) return; const s = "container" === t.params.touchEventsTarget ? t.el : t.wrapperEl; s.style.cursor = "move", s.style.cursor = e ? "grabbing" : "grab" }, unsetGrabCursor: function () { const e = this; e.support.touch || e.params.watchOverflow && e.isLocked || e.params.cssMode || (e["container" === e.params.touchEventsTarget ? "el" : "wrapperEl"].style.cursor = "") } }, events: X, breakpoints: { setBreakpoint: function () { const e = this, { activeIndex: t, initialized: s, loopedSlides: a = 0, params: i, $el: r } = e, n = i.breakpoints; if (!n || n && 0 === Object.keys(n).length) return; const l = e.getBreakpoint(n, e.params.breakpointsBase, e.el); if (!l || e.currentBreakpoint === l) return; const o = (l in n ? n[l] : void 0) || e.originalParams, d = Y(e, i), c = Y(e, o), p = i.enabled; d && !c ? (r.removeClass(`${i.containerModifierClass}grid ${i.containerModifierClass}grid-column`), e.emitContainerClasses()) : !d && c && (r.addClass(`${i.containerModifierClass}grid`), (o.grid.fill && "column" === o.grid.fill || !o.grid.fill && "column" === i.grid.fill) && r.addClass(`${i.containerModifierClass}grid-column`), e.emitContainerClasses()), ["navigation", "pagination", "scrollbar"].forEach((t => { const s = i[t] && i[t].enabled, a = o[t] && o[t].enabled; s && !a && e[t].disable(), !s && a && e[t].enable() })); const u = o.direction && o.direction !== i.direction, h = i.loop && (o.slidesPerView !== i.slidesPerView || u); u && s && e.changeDirection(), g(e.params, o); const m = e.params.enabled; Object.assign(e, { allowTouchMove: e.params.allowTouchMove, allowSlideNext: e.params.allowSlideNext, allowSlidePrev: e.params.allowSlidePrev }), p && !m ? e.disable() : !p && m && e.enable(), e.currentBreakpoint = l, e.emit("_beforeBreakpoint", o), h && s && (e.loopDestroy(), e.loopCreate(), e.updateSlides(), e.slideTo(t - a + e.loopedSlides, 0, !1)), e.emit("breakpoint", o) }, getBreakpoint: function (e, t, s) { if (void 0 === t && (t = "window"), !e || "container" === t && !s) return; let a = !1; const i = r(), n = "window" === t ? i.innerHeight : s.clientHeight, l = Object.keys(e).map((e => { if ("string" == typeof e && 0 === e.indexOf("@")) { const t = parseFloat(e.substr(1)); return { value: n * t, point: e } } return { value: e, point: e } })); l.sort(((e, t) => parseInt(e.value, 10) - parseInt(t.value, 10))); for (let e = 0; e < l.length; e += 1) { const { point: r, value: n } = l[e]; "window" === t ? i.matchMedia(`(min-width: ${n}px)`).matches && (a = r) : n <= s.clientWidth && (a = r) } return a || "max" } }, checkOverflow: { checkOverflow: function () { const e = this, { isLocked: t, params: s } = e, { slidesOffsetBefore: a } = s; if (a) { const t = e.slides.length - 1, s = e.slidesGrid[t] + e.slidesSizesGrid[t] + 2 * a; e.isLocked = e.size > s } else e.isLocked = 1 === e.snapGrid.length; !0 === s.allowSlideNext && (e.allowSlideNext = !e.isLocked), !0 === s.allowSlidePrev && (e.allowSlidePrev = !e.isLocked), t && t !== e.isLocked && (e.isEnd = !1), t !== e.isLocked && e.emit(e.isLocked ? "lock" : "unlock") } }, classes: R, images: { loadImage: function (e, t, s, a, i, n) { const l = r(); let o; function c() { n && n() } d(e).parent("picture")[0] || e.complete && i ? c() : t ? (o = new l.Image, o.onload = c, o.onerror = c, a && (o.sizes = a), s && (o.srcset = s), t && (o.src = t)) : c() }, preloadImages: function () { const e = this; function t() { null != e && e && !e.destroyed && (void 0 !== e.imagesLoaded && (e.imagesLoaded += 1), e.imagesLoaded === e.imagesToLoad.length && (e.params.updateOnImagesReady && e.update(), e.emit("imagesReady"))) } e.imagesToLoad = e.$el.find("img"); for (let s = 0; s < e.imagesToLoad.length; s += 1) { const a = e.imagesToLoad[s]; e.loadImage(a, a.currentSrc || a.getAttribute("src"), a.srcset || a.getAttribute("srcset"), a.sizes || a.getAttribute("sizes"), !0, t) } } } }, _ = {}; class V { constructor() { let e, t; for (var s = arguments.length, a = new Array(s), i = 0; i < s; i++)a[i] = arguments[i]; if (1 === a.length && a[0].constructor && "Object" === Object.prototype.toString.call(a[0]).slice(8, -1) ? t = a[0] : [e, t] = a, t || (t = {}), t = g({}, t), e && !t.el && (t.el = e), t.el && d(t.el).length > 1) { const e = []; return d(t.el).each((s => { const a = g({}, t, { el: s }); e.push(new V(a)) })), e } const r = this; r.__swiper__ = !0, r.support = E(), r.device = C({ userAgent: t.userAgent }), r.browser = T(), r.eventsListeners = {}, r.eventsAnyListeners = [], r.modules = [...r.__modules__], t.modules && Array.isArray(t.modules) && r.modules.push(...t.modules); const n = {}; r.modules.forEach((e => { e({ swiper: r, extendParams: q(t, n), on: r.on.bind(r), once: r.once.bind(r), off: r.off.bind(r), emit: r.emit.bind(r) }) })); const l = g({}, W, n); return r.params = g({}, l, _, t), r.originalParams = g({}, r.params), r.passedParams = g({}, t), r.params && r.params.on && Object.keys(r.params.on).forEach((e => { r.on(e, r.params.on[e]) })), r.params && r.params.onAny && r.onAny(r.params.onAny), r.$ = d, Object.assign(r, { enabled: r.params.enabled, el: e, classNames: [], slides: d(), slidesGrid: [], snapGrid: [], slidesSizesGrid: [], isHorizontal: () => "horizontal" === r.params.direction, isVertical: () => "vertical" === r.params.direction, activeIndex: 0, realIndex: 0, isBeginning: !0, isEnd: !1, translate: 0, previousTranslate: 0, progress: 0, velocity: 0, animating: !1, allowSlideNext: r.params.allowSlideNext, allowSlidePrev: r.params.allowSlidePrev, touchEvents: function () { const e = ["touchstart", "touchmove", "touchend", "touchcancel"], t = ["pointerdown", "pointermove", "pointerup"]; return r.touchEventsTouch = { start: e[0], move: e[1], end: e[2], cancel: e[3] }, r.touchEventsDesktop = { start: t[0], move: t[1], end: t[2] }, r.support.touch || !r.params.simulateTouch ? r.touchEventsTouch : r.touchEventsDesktop }(), touchEventsData: { isTouched: void 0, isMoved: void 0, allowTouchCallbacks: void 0, touchStartTime: void 0, isScrolling: void 0, currentTranslate: void 0, startTranslate: void 0, allowThresholdMove: void 0, focusableElements: r.params.focusableElements, lastClickTime: u(), clickTimeout: void 0, velocities: [], allowMomentumBounce: void 0, isTouchEvent: void 0, startMoving: void 0 }, allowClick: !0, allowTouchMove: r.params.allowTouchMove, touches: { startX: 0, startY: 0, currentX: 0, currentY: 0, diff: 0 }, imagesToLoad: [], imagesLoaded: 0 }), r.emit("_swiper"), r.params.init && r.init(), r } enable() { const e = this; e.enabled || (e.enabled = !0, e.params.grabCursor && e.setGrabCursor(), e.emit("enable")) } disable() { const e = this; e.enabled && (e.enabled = !1, e.params.grabCursor && e.unsetGrabCursor(), e.emit("disable")) } setProgress(e, t) { const s = this; e = Math.min(Math.max(e, 0), 1); const a = s.minTranslate(), i = (s.maxTranslate() - a) * e + a; s.translateTo(i, void 0 === t ? 0 : t), s.updateActiveIndex(), s.updateSlidesClasses() } emitContainerClasses() { const e = this; if (!e.params._emitClasses || !e.el) return; const t = e.el.className.split(" ").filter((t => 0 === t.indexOf("swiper") || 0 === t.indexOf(e.params.containerModifierClass))); e.emit("_containerClasses", t.join(" ")) } getSlideClasses(e) { const t = this; return t.destroyed ? "" : e.className.split(" ").filter((e => 0 === e.indexOf("swiper-slide") || 0 === e.indexOf(t.params.slideClass))).join(" ") } emitSlidesClasses() { const e = this; if (!e.params._emitClasses || !e.el) return; const t = []; e.slides.each((s => { const a = e.getSlideClasses(s); t.push({ slideEl: s, classNames: a }), e.emit("_slideClass", s, a) })), e.emit("_slideClasses", t) } slidesPerViewDynamic(e, t) { void 0 === e && (e = "current"), void 0 === t && (t = !1); const { params: s, slides: a, slidesGrid: i, slidesSizesGrid: r, size: n, activeIndex: l } = this; let o = 1; if (s.centeredSlides) { let e, t = a[l].swiperSlideSize; for (let s = l + 1; s < a.length; s += 1)a[s] && !e && (t += a[s].swiperSlideSize, o += 1, t > n && (e = !0)); for (let s = l - 1; s >= 0; s -= 1)a[s] && !e && (t += a[s].swiperSlideSize, o += 1, t > n && (e = !0)) } else if ("current" === e) for (let e = l + 1; e < a.length; e += 1) { (t ? i[e] + r[e] - i[l] < n : i[e] - i[l] < n) && (o += 1) } else for (let e = l - 1; e >= 0; e -= 1) { i[l] - i[e] < n && (o += 1) } return o } update() { const e = this; if (!e || e.destroyed) return; const { snapGrid: t, params: s } = e; function a() { const t = e.rtlTranslate ? -1 * e.translate : e.translate, s = Math.min(Math.max(t, e.maxTranslate()), e.minTranslate()); e.setTranslate(s), e.updateActiveIndex(), e.updateSlidesClasses() } let i; s.breakpoints && e.setBreakpoint(), e.updateSize(), e.updateSlides(), e.updateProgress(), e.updateSlidesClasses(), e.params.freeMode && e.params.freeMode.enabled ? (a(), e.params.autoHeight && e.updateAutoHeight()) : (i = ("auto" === e.params.slidesPerView || e.params.slidesPerView > 1) && e.isEnd && !e.params.centeredSlides ? e.slideTo(e.slides.length - 1, 0, !1, !0) : e.slideTo(e.activeIndex, 0, !1, !0), i || a()), s.watchOverflow && t !== e.snapGrid && e.checkOverflow(), e.emit("update") } changeDirection(e, t) { void 0 === t && (t = !0); const s = this, a = s.params.direction; return e || (e = "horizontal" === a ? "vertical" : "horizontal"), e === a || "horizontal" !== e && "vertical" !== e || (s.$el.removeClass(`${s.params.containerModifierClass}${a}`).addClass(`${s.params.containerModifierClass}${e}`), s.emitContainerClasses(), s.params.direction = e, s.slides.each((t => { "vertical" === e ? t.style.width = "" : t.style.height = "" })), s.emit("changeDirection"), t && s.update()), s } changeLanguageDirection(e) { const t = this; t.rtl && "rtl" === e || !t.rtl && "ltr" === e || (t.rtl = "rtl" === e, t.rtlTranslate = "horizontal" === t.params.direction && t.rtl, t.rtl ? (t.$el.addClass(`${t.params.containerModifierClass}rtl`), t.el.dir = "rtl") : (t.$el.removeClass(`${t.params.containerModifierClass}rtl`), t.el.dir = "ltr"), t.update()) } mount(e) { const t = this; if (t.mounted) return !0; const s = d(e || t.params.el); if (!(e = s[0])) return !1; e.swiper = t; const i = () => `.${(t.params.wrapperClass || "").trim().split(" ").join(".")}`; let r = (() => { if (e && e.shadowRoot && e.shadowRoot.querySelector) { const t = d(e.shadowRoot.querySelector(i())); return t.children = e => s.children(e), t } return s.children ? s.children(i()) : d(s).children(i()) })(); if (0 === r.length && t.params.createElements) { const e = a().createElement("div"); r = d(e), e.className = t.params.wrapperClass, s.append(e), s.children(`.${t.params.slideClass}`).each((e => { r.append(e) })) } return Object.assign(t, { $el: s, el: e, $wrapperEl: r, wrapperEl: r[0], mounted: !0, rtl: "rtl" === e.dir.toLowerCase() || "rtl" === s.css("direction"), rtlTranslate: "horizontal" === t.params.direction && ("rtl" === e.dir.toLowerCase() || "rtl" === s.css("direction")), wrongRTL: "-webkit-box" === r.css("display") }), !0 } init(e) { const t = this; if (t.initialized) return t; return !1 === t.mount(e) || (t.emit("beforeInit"), t.params.breakpoints && t.setBreakpoint(), t.addClasses(), t.params.loop && t.loopCreate(), t.updateSize(), t.updateSlides(), t.params.watchOverflow && t.checkOverflow(), t.params.grabCursor && t.enabled && t.setGrabCursor(), t.params.preloadImages && t.preloadImages(), t.params.loop ? t.slideTo(t.params.initialSlide + t.loopedSlides, 0, t.params.runCallbacksOnInit, !1, !0) : t.slideTo(t.params.initialSlide, 0, t.params.runCallbacksOnInit, !1, !0), t.attachEvents(), t.initialized = !0, t.emit("init"), t.emit("afterInit")), t } destroy(e, t) { void 0 === e && (e = !0), void 0 === t && (t = !0); const s = this, { params: a, $el: i, $wrapperEl: r, slides: n } = s; return void 0 === s.params || s.destroyed || (s.emit("beforeDestroy"), s.initialized = !1, s.detachEvents(), a.loop && s.loopDestroy(), t && (s.removeClasses(), i.removeAttr("style"), r.removeAttr("style"), n && n.length && n.removeClass([a.slideVisibleClass, a.slideActiveClass, a.slideNextClass, a.slidePrevClass].join(" ")).removeAttr("style").removeAttr("data-swiper-slide-index")), s.emit("destroy"), Object.keys(s.eventsListeners).forEach((e => { s.off(e) })), !1 !== e && (s.$el[0].swiper = null, function (e) { const t = e; Object.keys(t).forEach((e => { try { t[e] = null } catch (e) { } try { delete t[e] } catch (e) { } })) }(s)), s.destroyed = !0), null } static extendDefaults(e) { g(_, e) } static get extendedDefaults() { return _ } static get defaults() { return W } static installModule(e) { V.prototype.__modules__ || (V.prototype.__modules__ = []); const t = V.prototype.__modules__; "function" == typeof e && t.indexOf(e) < 0 && t.push(e) } static use(e) { return Array.isArray(e) ? (e.forEach((e => V.installModule(e))), V) : (V.installModule(e), V) } } function F(e, t, s, i) { const r = a(); return e.params.createElements && Object.keys(i).forEach((a => { if (!s[a] && !0 === s.auto) { let n = e.$el.children(`.${i[a]}`)[0]; n || (n = r.createElement("div"), n.className = i[a], e.$el.append(n)), s[a] = n, t[a] = n } })), s } function U(e) { return void 0 === e && (e = ""), `.${e.trim().replace(/([\.:!\/])/g, "\\$1").replace(/ /g, ".")}` } function K(e) { const t = this, { $wrapperEl: s, params: a } = t; if (a.loop && t.loopDestroy(), "object" == typeof e && "length" in e) for (let t = 0; t < e.length; t += 1)e[t] && s.append(e[t]); else s.append(e); a.loop && t.loopCreate(), a.observer || t.update() } function Z(e) { const t = this, { params: s, $wrapperEl: a, activeIndex: i } = t; s.loop && t.loopDestroy(); let r = i + 1; if ("object" == typeof e && "length" in e) { for (let t = 0; t < e.length; t += 1)e[t] && a.prepend(e[t]); r = i + e.length } else a.prepend(e); s.loop && t.loopCreate(), s.observer || t.update(), t.slideTo(r, 0, !1) } function Q(e, t) { const s = this, { $wrapperEl: a, params: i, activeIndex: r } = s; let n = r; i.loop && (n -= s.loopedSlides, s.loopDestroy(), s.slides = a.children(`.${i.slideClass}`)); const l = s.slides.length; if (e <= 0) return void s.prependSlide(t); if (e >= l) return void s.appendSlide(t); let o = n > e ? n + 1 : n; const d = []; for (let t = l - 1; t >= e; t -= 1) { const e = s.slides.eq(t); e.remove(), d.unshift(e) } if ("object" == typeof t && "length" in t) { for (let e = 0; e < t.length; e += 1)t[e] && a.append(t[e]); o = n > e ? n + t.length : n } else a.append(t); for (let e = 0; e < d.length; e += 1)a.append(d[e]); i.loop && s.loopCreate(), i.observer || s.update(), i.loop ? s.slideTo(o + s.loopedSlides, 0, !1) : s.slideTo(o, 0, !1) } function J(e) { const t = this, { params: s, $wrapperEl: a, activeIndex: i } = t; let r = i; s.loop && (r -= t.loopedSlides, t.loopDestroy(), t.slides = a.children(`.${s.slideClass}`)); let n, l = r; if ("object" == typeof e && "length" in e) { for (let s = 0; s < e.length; s += 1)n = e[s], t.slides[n] && t.slides.eq(n).remove(), n < l && (l -= 1); l = Math.max(l, 0) } else n = e, t.slides[n] && t.slides.eq(n).remove(), n < l && (l -= 1), l = Math.max(l, 0); s.loop && t.loopCreate(), s.observer || t.update(), s.loop ? t.slideTo(l + t.loopedSlides, 0, !1) : t.slideTo(l, 0, !1) } function ee() { const e = this, t = []; for (let s = 0; s < e.slides.length; s += 1)t.push(s); e.removeSlide(t) } function te(e) { const { effect: t, swiper: s, on: a, setTranslate: i, setTransition: r, overwriteParams: n, perspective: l, recreateShadows: o, getEffectParams: d } = e; let c; a("beforeInit", (() => { if (s.params.effect !== t) return; s.classNames.push(`${s.params.containerModifierClass}${t}`), l && l() && s.classNames.push(`${s.params.containerModifierClass}3d`); const e = n ? n() : {}; Object.assign(s.params, e), Object.assign(s.originalParams, e) })), a("setTranslate", (() => { s.params.effect === t && i() })), a("setTransition", ((e, a) => { s.params.effect === t && r(a) })), a("transitionEnd", (() => { if (s.params.effect === t && o) { if (!d || !d().slideShadows) return; s.slides.each((e => { s.$(e).find(".swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left").remove() })), o() } })), a("virtualUpdate", (() => { s.params.effect === t && (s.slides.length || (c = !0), requestAnimationFrame((() => { c && s.slides && s.slides.length && (i(), c = !1) }))) })) } function se(e, t) { return e.transformEl ? t.find(e.transformEl).css({ "backface-visibility": "hidden", "-webkit-backface-visibility": "hidden" }) : t } function ae(e) { let { swiper: t, duration: s, transformEl: a, allSlides: i } = e; const { slides: r, activeIndex: n, $wrapperEl: l } = t; if (t.params.virtualTranslate && 0 !== s) { let e, s = !1; e = i ? a ? r.find(a) : r : a ? r.eq(n).find(a) : r.eq(n), e.transitionEnd((() => { if (s) return; if (!t || t.destroyed) return; s = !0, t.animating = !1; const e = ["webkitTransitionEnd", "transitionend"]; for (let t = 0; t < e.length; t += 1)l.trigger(e[t]) })) } } function ie(e, t, s) { const a = "swiper-slide-shadow" + (s ? `-${s}` : ""), i = e.transformEl ? t.find(e.transformEl) : t; let r = i.children(`.${a}`); return r.length || (r = d(`<div class="swiper-slide-shadow${s ? `-${s}` : ""}"></div>`), i.append(r)), r } Object.keys(j).forEach((e => { Object.keys(j[e]).forEach((t => { V.prototype[t] = j[e][t] })) })), V.use([function (e) { let { swiper: t, on: s, emit: a } = e; const i = r(); let n = null, l = null; const o = () => { t && !t.destroyed && t.initialized && (a("beforeResize"), a("resize")) }, d = () => { t && !t.destroyed && t.initialized && a("orientationchange") }; s("init", (() => { t.params.resizeObserver && void 0 !== i.ResizeObserver ? t && !t.destroyed && t.initialized && (n = new ResizeObserver((e => { l = i.requestAnimationFrame((() => { const { width: s, height: a } = t; let i = s, r = a; e.forEach((e => { let { contentBoxSize: s, contentRect: a, target: n } = e; n && n !== t.el || (i = a ? a.width : (s[0] || s).inlineSize, r = a ? a.height : (s[0] || s).blockSize) })), i === s && r === a || o() })) })), n.observe(t.el)) : (i.addEventListener("resize", o), i.addEventListener("orientationchange", d)) })), s("destroy", (() => { l && i.cancelAnimationFrame(l), n && n.unobserve && t.el && (n.unobserve(t.el), n = null), i.removeEventListener("resize", o), i.removeEventListener("orientationchange", d) })) }, function (e) { let { swiper: t, extendParams: s, on: a, emit: i } = e; const n = [], l = r(), o = function (e, t) { void 0 === t && (t = {}); const s = new (l.MutationObserver || l.WebkitMutationObserver)((e => { if (1 === e.length) return void i("observerUpdate", e[0]); const t = function () { i("observerUpdate", e[0]) }; l.requestAnimationFrame ? l.requestAnimationFrame(t) : l.setTimeout(t, 0) })); s.observe(e, { attributes: void 0 === t.attributes || t.attributes, childList: void 0 === t.childList || t.childList, characterData: void 0 === t.characterData || t.characterData }), n.push(s) }; s({ observer: !1, observeParents: !1, observeSlideChildren: !1 }), a("init", (() => { if (t.params.observer) { if (t.params.observeParents) { const e = t.$el.parents(); for (let t = 0; t < e.length; t += 1)o(e[t]) } o(t.$el[0], { childList: t.params.observeSlideChildren }), o(t.$wrapperEl[0], { attributes: !1 }) } })), a("destroy", (() => { n.forEach((e => { e.disconnect() })), n.splice(0, n.length) })) }]); const re = [function (e) { let t, { swiper: s, extendParams: a, on: i, emit: r } = e; function n(e, t) { const a = s.params.virtual; if (a.cache && s.virtual.cache[t]) return s.virtual.cache[t]; const i = a.renderSlide ? d(a.renderSlide.call(s, e, t)) : d(`<div class="${s.params.slideClass}" data-swiper-slide-index="${t}">${e}</div>`); return i.attr("data-swiper-slide-index") || i.attr("data-swiper-slide-index", t), a.cache && (s.virtual.cache[t] = i), i } function l(e) { const { slidesPerView: t, slidesPerGroup: a, centeredSlides: i } = s.params, { addSlidesBefore: l, addSlidesAfter: o } = s.params.virtual, { from: d, to: c, slides: p, slidesGrid: u, offset: h } = s.virtual; s.params.cssMode || s.updateActiveIndex(); const m = s.activeIndex || 0; let f, g, v; f = s.rtlTranslate ? "right" : s.isHorizontal() ? "left" : "top", i ? (g = Math.floor(t / 2) + a + o, v = Math.floor(t / 2) + a + l) : (g = t + (a - 1) + o, v = a + l); const w = Math.max((m || 0) - v, 0), b = Math.min((m || 0) + g, p.length - 1), x = (s.slidesGrid[w] || 0) - (s.slidesGrid[0] || 0); function y() { s.updateSlides(), s.updateProgress(), s.updateSlidesClasses(), s.lazy && s.params.lazy.enabled && s.lazy.load(), r("virtualUpdate") } if (Object.assign(s.virtual, { from: w, to: b, offset: x, slidesGrid: s.slidesGrid }), d === w && c === b && !e) return s.slidesGrid !== u && x !== h && s.slides.css(f, `${x}px`), s.updateProgress(), void r("virtualUpdate"); if (s.params.virtual.renderExternal) return s.params.virtual.renderExternal.call(s, { offset: x, from: w, to: b, slides: function () { const e = []; for (let t = w; t <= b; t += 1)e.push(p[t]); return e }() }), void (s.params.virtual.renderExternalUpdate ? y() : r("virtualUpdate")); const E = [], C = []; if (e) s.$wrapperEl.find(`.${s.params.slideClass}`).remove(); else for (let e = d; e <= c; e += 1)(e < w || e > b) && s.$wrapperEl.find(`.${s.params.slideClass}[data-swiper-slide-index="${e}"]`).remove(); for (let t = 0; t < p.length; t += 1)t >= w && t <= b && (void 0 === c || e ? C.push(t) : (t > c && C.push(t), t < d && E.push(t))); C.forEach((e => { s.$wrapperEl.append(n(p[e], e)) })), E.sort(((e, t) => t - e)).forEach((e => { s.$wrapperEl.prepend(n(p[e], e)) })), s.$wrapperEl.children(".swiper-slide").css(f, `${x}px`), y() } a({ virtual: { enabled: !1, slides: [], cache: !0, renderSlide: null, renderExternal: null, renderExternalUpdate: !0, addSlidesBefore: 0, addSlidesAfter: 0 } }), s.virtual = { cache: {}, from: void 0, to: void 0, slides: [], offset: 0, slidesGrid: [] }, i("beforeInit", (() => { s.params.virtual.enabled && (s.virtual.slides = s.params.virtual.slides, s.classNames.push(`${s.params.containerModifierClass}virtual`), s.params.watchSlidesProgress = !0, s.originalParams.watchSlidesProgress = !0, s.params.initialSlide || l()) })), i("setTranslate", (() => { s.params.virtual.enabled && (s.params.cssMode && !s._immediateVirtual ? (clearTimeout(t), t = setTimeout((() => { l() }), 100)) : l()) })), i("init update resize", (() => { s.params.virtual.enabled && s.params.cssMode && v(s.wrapperEl, "--swiper-virtual-size", `${s.virtualSize}px`) })), Object.assign(s.virtual, { appendSlide: function (e) { if ("object" == typeof e && "length" in e) for (let t = 0; t < e.length; t += 1)e[t] && s.virtual.slides.push(e[t]); else s.virtual.slides.push(e); l(!0) }, prependSlide: function (e) { const t = s.activeIndex; let a = t + 1, i = 1; if (Array.isArray(e)) { for (let t = 0; t < e.length; t += 1)e[t] && s.virtual.slides.unshift(e[t]); a = t + e.length, i = e.length } else s.virtual.slides.unshift(e); if (s.params.virtual.cache) { const e = s.virtual.cache, t = {}; Object.keys(e).forEach((s => { const a = e[s], r = a.attr("data-swiper-slide-index"); r && a.attr("data-swiper-slide-index", parseInt(r, 10) + i), t[parseInt(s, 10) + i] = a })), s.virtual.cache = t } l(!0), s.slideTo(a, 0) }, removeSlide: function (e) { if (null == e) return; let t = s.activeIndex; if (Array.isArray(e)) for (let a = e.length - 1; a >= 0; a -= 1)s.virtual.slides.splice(e[a], 1), s.params.virtual.cache && delete s.virtual.cache[e[a]], e[a] < t && (t -= 1), t = Math.max(t, 0); else s.virtual.slides.splice(e, 1), s.params.virtual.cache && delete s.virtual.cache[e], e < t && (t -= 1), t = Math.max(t, 0); l(!0), s.slideTo(t, 0) }, removeAllSlides: function () { s.virtual.slides = [], s.params.virtual.cache && (s.virtual.cache = {}), l(!0), s.slideTo(0, 0) }, update: l }) }, function (e) { let { swiper: t, extendParams: s, on: i, emit: n } = e; const l = a(), o = r(); function c(e) { if (!t.enabled) return; const { rtlTranslate: s } = t; let a = e; a.originalEvent && (a = a.originalEvent); const i = a.keyCode || a.charCode, r = t.params.keyboard.pageUpDown, d = r && 33 === i, c = r && 34 === i, p = 37 === i, u = 39 === i, h = 38 === i, m = 40 === i; if (!t.allowSlideNext && (t.isHorizontal() && u || t.isVertical() && m || c)) return !1; if (!t.allowSlidePrev && (t.isHorizontal() && p || t.isVertical() && h || d)) return !1; if (!(a.shiftKey || a.altKey || a.ctrlKey || a.metaKey || l.activeElement && l.activeElement.nodeName && ("input" === l.activeElement.nodeName.toLowerCase() || "textarea" === l.activeElement.nodeName.toLowerCase()))) { if (t.params.keyboard.onlyInViewport && (d || c || p || u || h || m)) { let e = !1; if (t.$el.parents(`.${t.params.slideClass}`).length > 0 && 0 === t.$el.parents(`.${t.params.slideActiveClass}`).length) return; const a = t.$el, i = a[0].clientWidth, r = a[0].clientHeight, n = o.innerWidth, l = o.innerHeight, d = t.$el.offset(); s && (d.left -= t.$el[0].scrollLeft); const c = [[d.left, d.top], [d.left + i, d.top], [d.left, d.top + r], [d.left + i, d.top + r]]; for (let t = 0; t < c.length; t += 1) { const s = c[t]; if (s[0] >= 0 && s[0] <= n && s[1] >= 0 && s[1] <= l) { if (0 === s[0] && 0 === s[1]) continue; e = !0 } } if (!e) return } t.isHorizontal() ? ((d || c || p || u) && (a.preventDefault ? a.preventDefault() : a.returnValue = !1), ((c || u) && !s || (d || p) && s) && t.slideNext(), ((d || p) && !s || (c || u) && s) && t.slidePrev()) : ((d || c || h || m) && (a.preventDefault ? a.preventDefault() : a.returnValue = !1), (c || m) && t.slideNext(), (d || h) && t.slidePrev()), n("keyPress", i) } } function p() { t.keyboard.enabled || (d(l).on("keydown", c), t.keyboard.enabled = !0) } function u() { t.keyboard.enabled && (d(l).off("keydown", c), t.keyboard.enabled = !1) } t.keyboard = { enabled: !1 }, s({ keyboard: { enabled: !1, onlyInViewport: !0, pageUpDown: !0 } }), i("init", (() => { t.params.keyboard.enabled && p() })), i("destroy", (() => { t.keyboard.enabled && u() })), Object.assign(t.keyboard, { enable: p, disable: u }) }, function (e) { let { swiper: t, extendParams: s, on: a, emit: i } = e; const n = r(); let l; s({ mousewheel: { enabled: !1, releaseOnEdges: !1, invert: !1, forceToAxis: !1, sensitivity: 1, eventsTarget: "container", thresholdDelta: null, thresholdTime: null } }), t.mousewheel = { enabled: !1 }; let o, c = u(); const h = []; function m() { t.enabled && (t.mouseEntered = !0) } function f() { t.enabled && (t.mouseEntered = !1) } function g(e) { return !(t.params.mousewheel.thresholdDelta && e.delta < t.params.mousewheel.thresholdDelta) && (!(t.params.mousewheel.thresholdTime && u() - c < t.params.mousewheel.thresholdTime) && (e.delta >= 6 && u() - c < 60 || (e.direction < 0 ? t.isEnd && !t.params.loop || t.animating || (t.slideNext(), i("scroll", e.raw)) : t.isBeginning && !t.params.loop || t.animating || (t.slidePrev(), i("scroll", e.raw)), c = (new n.Date).getTime(), !1))) } function v(e) { let s = e, a = !0; if (!t.enabled) return; const r = t.params.mousewheel; t.params.cssMode && s.preventDefault(); let n = t.$el; if ("container" !== t.params.mousewheel.eventsTarget && (n = d(t.params.mousewheel.eventsTarget)), !t.mouseEntered && !n[0].contains(s.target) && !r.releaseOnEdges) return !0; s.originalEvent && (s = s.originalEvent); let c = 0; const m = t.rtlTranslate ? -1 : 1, f = function (e) { let t = 0, s = 0, a = 0, i = 0; return "detail" in e && (s = e.detail), "wheelDelta" in e && (s = -e.wheelDelta / 120), "wheelDeltaY" in e && (s = -e.wheelDeltaY / 120), "wheelDeltaX" in e && (t = -e.wheelDeltaX / 120), "axis" in e && e.axis === e.HORIZONTAL_AXIS && (t = s, s = 0), a = 10 * t, i = 10 * s, "deltaY" in e && (i = e.deltaY), "deltaX" in e && (a = e.deltaX), e.shiftKey && !a && (a = i, i = 0), (a || i) && e.deltaMode && (1 === e.deltaMode ? (a *= 40, i *= 40) : (a *= 800, i *= 800)), a && !t && (t = a < 1 ? -1 : 1), i && !s && (s = i < 1 ? -1 : 1), { spinX: t, spinY: s, pixelX: a, pixelY: i } }(s); if (r.forceToAxis) if (t.isHorizontal()) { if (!(Math.abs(f.pixelX) > Math.abs(f.pixelY))) return !0; c = -f.pixelX * m } else { if (!(Math.abs(f.pixelY) > Math.abs(f.pixelX))) return !0; c = -f.pixelY } else c = Math.abs(f.pixelX) > Math.abs(f.pixelY) ? -f.pixelX * m : -f.pixelY; if (0 === c) return !0; r.invert && (c = -c); let v = t.getTranslate() + c * r.sensitivity; if (v >= t.minTranslate() && (v = t.minTranslate()), v <= t.maxTranslate() && (v = t.maxTranslate()), a = !!t.params.loop || !(v === t.minTranslate() || v === t.maxTranslate()), a && t.params.nested && s.stopPropagation(), t.params.freeMode && t.params.freeMode.enabled) { const e = { time: u(), delta: Math.abs(c), direction: Math.sign(c) }, a = o && e.time < o.time + 500 && e.delta <= o.delta && e.direction === o.direction; if (!a) { o = void 0, t.params.loop && t.loopFix(); let n = t.getTranslate() + c * r.sensitivity; const d = t.isBeginning, u = t.isEnd; if (n >= t.minTranslate() && (n = t.minTranslate()), n <= t.maxTranslate() && (n = t.maxTranslate()), t.setTransition(0), t.setTranslate(n), t.updateProgress(), t.updateActiveIndex(), t.updateSlidesClasses(), (!d && t.isBeginning || !u && t.isEnd) && t.updateSlidesClasses(), t.params.freeMode.sticky) { clearTimeout(l), l = void 0, h.length >= 15 && h.shift(); const s = h.length ? h[h.length - 1] : void 0, a = h[0]; if (h.push(e), s && (e.delta > s.delta || e.direction !== s.direction)) h.splice(0); else if (h.length >= 15 && e.time - a.time < 500 && a.delta - e.delta >= 1 && e.delta <= 6) { const s = c > 0 ? .8 : .2; o = e, h.splice(0), l = p((() => { t.slideToClosest(t.params.speed, !0, void 0, s) }), 0) } l || (l = p((() => { o = e, h.splice(0), t.slideToClosest(t.params.speed, !0, void 0, .5) }), 500)) } if (a || i("scroll", s), t.params.autoplay && t.params.autoplayDisableOnInteraction && t.autoplay.stop(), n === t.minTranslate() || n === t.maxTranslate()) return !0 } } else { const s = { time: u(), delta: Math.abs(c), direction: Math.sign(c), raw: e }; h.length >= 2 && h.shift(); const a = h.length ? h[h.length - 1] : void 0; if (h.push(s), a ? (s.direction !== a.direction || s.delta > a.delta || s.time > a.time + 150) && g(s) : g(s), function (e) { const s = t.params.mousewheel; if (e.direction < 0) { if (t.isEnd && !t.params.loop && s.releaseOnEdges) return !0 } else if (t.isBeginning && !t.params.loop && s.releaseOnEdges) return !0; return !1 }(s)) return !0 } return s.preventDefault ? s.preventDefault() : s.returnValue = !1, !1 } function w(e) { let s = t.$el; "container" !== t.params.mousewheel.eventsTarget && (s = d(t.params.mousewheel.eventsTarget)), s[e]("mouseenter", m), s[e]("mouseleave", f), s[e]("wheel", v) } function b() { return t.params.cssMode ? (t.wrapperEl.removeEventListener("wheel", v), !0) : !t.mousewheel.enabled && (w("on"), t.mousewheel.enabled = !0, !0) } function x() { return t.params.cssMode ? (t.wrapperEl.addEventListener(event, v), !0) : !!t.mousewheel.enabled && (w("off"), t.mousewheel.enabled = !1, !0) } a("init", (() => { !t.params.mousewheel.enabled && t.params.cssMode && x(), t.params.mousewheel.enabled && b() })), a("destroy", (() => { t.params.cssMode && b(), t.mousewheel.enabled && x() })), Object.assign(t.mousewheel, { enable: b, disable: x }) }, function (e) { let { swiper: t, extendParams: s, on: a, emit: i } = e; function r(e) { let s; return e && (s = d(e), t.params.uniqueNavElements && "string" == typeof e && s.length > 1 && 1 === t.$el.find(e).length && (s = t.$el.find(e))), s } function n(e, s) { const a = t.params.navigation; e && e.length > 0 && (e[s ? "addClass" : "removeClass"](a.disabledClass), e[0] && "BUTTON" === e[0].tagName && (e[0].disabled = s), t.params.watchOverflow && t.enabled && e[t.isLocked ? "addClass" : "removeClass"](a.lockClass)) } function l() { if (t.params.loop) return; const { $nextEl: e, $prevEl: s } = t.navigation; n(s, t.isBeginning && !t.params.rewind), n(e, t.isEnd && !t.params.rewind) } function o(e) { e.preventDefault(), (!t.isBeginning || t.params.loop || t.params.rewind) && (t.slidePrev(), i("navigationPrev")) } function c(e) { e.preventDefault(), (!t.isEnd || t.params.loop || t.params.rewind) && (t.slideNext(), i("navigationNext")) } function p() { const e = t.params.navigation; if (t.params.navigation = F(t, t.originalParams.navigation, t.params.navigation, { nextEl: "swiper-button-next", prevEl: "swiper-button-prev" }), !e.nextEl && !e.prevEl) return; const s = r(e.nextEl), a = r(e.prevEl); s && s.length > 0 && s.on("click", c), a && a.length > 0 && a.on("click", o), Object.assign(t.navigation, { $nextEl: s, nextEl: s && s[0], $prevEl: a, prevEl: a && a[0] }), t.enabled || (s && s.addClass(e.lockClass), a && a.addClass(e.lockClass)) } function u() { const { $nextEl: e, $prevEl: s } = t.navigation; e && e.length && (e.off("click", c), e.removeClass(t.params.navigation.disabledClass)), s && s.length && (s.off("click", o), s.removeClass(t.params.navigation.disabledClass)) } s({ navigation: { nextEl: null, prevEl: null, hideOnClick: !1, disabledClass: "swiper-button-disabled", hiddenClass: "swiper-button-hidden", lockClass: "swiper-button-lock", navigationDisabledClass: "swiper-navigation-disabled" } }), t.navigation = { nextEl: null, $nextEl: null, prevEl: null, $prevEl: null }, a("init", (() => { !1 === t.params.navigation.enabled ? h() : (p(), l()) })), a("toEdge fromEdge lock unlock", (() => { l() })), a("destroy", (() => { u() })), a("enable disable", (() => { const { $nextEl: e, $prevEl: s } = t.navigation; e && e[t.enabled ? "removeClass" : "addClass"](t.params.navigation.lockClass), s && s[t.enabled ? "removeClass" : "addClass"](t.params.navigation.lockClass) })), a("click", ((e, s) => { const { $nextEl: a, $prevEl: r } = t.navigation, n = s.target; if (t.params.navigation.hideOnClick && !d(n).is(r) && !d(n).is(a)) { if (t.pagination && t.params.pagination && t.params.pagination.clickable && (t.pagination.el === n || t.pagination.el.contains(n))) return; let e; a ? e = a.hasClass(t.params.navigation.hiddenClass) : r && (e = r.hasClass(t.params.navigation.hiddenClass)), i(!0 === e ? "navigationShow" : "navigationHide"), a && a.toggleClass(t.params.navigation.hiddenClass), r && r.toggleClass(t.params.navigation.hiddenClass) } })); const h = () => { t.$el.addClass(t.params.navigation.navigationDisabledClass), u() }; Object.assign(t.navigation, { enable: () => { t.$el.removeClass(t.params.navigation.navigationDisabledClass), p(), l() }, disable: h, update: l, init: p, destroy: u }) }, function (e) { let { swiper: t, extendParams: s, on: a, emit: i } = e; const r = "swiper-pagination"; let n; s({ pagination: { el: null, bulletElement: "span", clickable: !1, hideOnClick: !1, renderBullet: null, renderProgressbar: null, renderFraction: null, renderCustom: null, progressbarOpposite: !1, type: "bullets", dynamicBullets: !1, dynamicMainBullets: 1, formatFractionCurrent: e => e, formatFractionTotal: e => e, bulletClass: `${r}-bullet`, bulletActiveClass: `${r}-bullet-active`, modifierClass: `${r}-`, currentClass: `${r}-current`, totalClass: `${r}-total`, hiddenClass: `${r}-hidden`, progressbarFillClass: `${r}-progressbar-fill`, progressbarOppositeClass: `${r}-progressbar-opposite`, clickableClass: `${r}-clickable`, lockClass: `${r}-lock`, horizontalClass: `${r}-horizontal`, verticalClass: `${r}-vertical`, paginationDisabledClass: `${r}-disabled` } }), t.pagination = { el: null, $el: null, bullets: [] }; let l = 0; function o() { return !t.params.pagination.el || !t.pagination.el || !t.pagination.$el || 0 === t.pagination.$el.length } function c(e, s) { const { bulletActiveClass: a } = t.params.pagination; e[s]().addClass(`${a}-${s}`)[s]().addClass(`${a}-${s}-${s}`) } function p() { const e = t.rtl, s = t.params.pagination; if (o()) return; const a = t.virtual && t.params.virtual.enabled ? t.virtual.slides.length : t.slides.length, r = t.pagination.$el; let p; const u = t.params.loop ? Math.ceil((a - 2 * t.loopedSlides) / t.params.slidesPerGroup) : t.snapGrid.length; if (t.params.loop ? (p = Math.ceil((t.activeIndex - t.loopedSlides) / t.params.slidesPerGroup), p > a - 1 - 2 * t.loopedSlides && (p -= a - 2 * t.loopedSlides), p > u - 1 && (p -= u), p < 0 && "bullets" !== t.params.paginationType && (p = u + p)) : p = void 0 !== t.snapIndex ? t.snapIndex : t.activeIndex || 0, "bullets" === s.type && t.pagination.bullets && t.pagination.bullets.length > 0) { const a = t.pagination.bullets; let i, o, u; if (s.dynamicBullets && (n = a.eq(0)[t.isHorizontal() ? "outerWidth" : "outerHeight"](!0), r.css(t.isHorizontal() ? "width" : "height", n * (s.dynamicMainBullets + 4) + "px"), s.dynamicMainBullets > 1 && void 0 !== t.previousIndex && (l += p - (t.previousIndex - t.loopedSlides || 0), l > s.dynamicMainBullets - 1 ? l = s.dynamicMainBullets - 1 : l < 0 && (l = 0)), i = Math.max(p - l, 0), o = i + (Math.min(a.length, s.dynamicMainBullets) - 1), u = (o + i) / 2), a.removeClass(["", "-next", "-next-next", "-prev", "-prev-prev", "-main"].map((e => `${s.bulletActiveClass}${e}`)).join(" ")), r.length > 1) a.each((e => { const t = d(e), a = t.index(); a === p && t.addClass(s.bulletActiveClass), s.dynamicBullets && (a >= i && a <= o && t.addClass(`${s.bulletActiveClass}-main`), a === i && c(t, "prev"), a === o && c(t, "next")) })); else { const e = a.eq(p), r = e.index(); if (e.addClass(s.bulletActiveClass), s.dynamicBullets) { const e = a.eq(i), n = a.eq(o); for (let e = i; e <= o; e += 1)a.eq(e).addClass(`${s.bulletActiveClass}-main`); if (t.params.loop) if (r >= a.length) { for (let e = s.dynamicMainBullets; e >= 0; e -= 1)a.eq(a.length - e).addClass(`${s.bulletActiveClass}-main`); a.eq(a.length - s.dynamicMainBullets - 1).addClass(`${s.bulletActiveClass}-prev`) } else c(e, "prev"), c(n, "next"); else c(e, "prev"), c(n, "next") } } if (s.dynamicBullets) { const i = Math.min(a.length, s.dynamicMainBullets + 4), r = (n * i - n) / 2 - u * n, l = e ? "right" : "left"; a.css(t.isHorizontal() ? l : "top", `${r}px`) } } if ("fraction" === s.type && (r.find(U(s.currentClass)).text(s.formatFractionCurrent(p + 1)), r.find(U(s.totalClass)).text(s.formatFractionTotal(u))), "progressbar" === s.type) { let e; e = s.progressbarOpposite ? t.isHorizontal() ? "vertical" : "horizontal" : t.isHorizontal() ? "horizontal" : "vertical"; const a = (p + 1) / u; let i = 1, n = 1; "horizontal" === e ? i = a : n = a, r.find(U(s.progressbarFillClass)).transform(`translate3d(0,0,0) scaleX(${i}) scaleY(${n})`).transition(t.params.speed) } "custom" === s.type && s.renderCustom ? (r.html(s.renderCustom(t, p + 1, u)), i("paginationRender", r[0])) : i("paginationUpdate", r[0]), t.params.watchOverflow && t.enabled && r[t.isLocked ? "addClass" : "removeClass"](s.lockClass) } function u() { const e = t.params.pagination; if (o()) return; const s = t.virtual && t.params.virtual.enabled ? t.virtual.slides.length : t.slides.length, a = t.pagination.$el; let r = ""; if ("bullets" === e.type) { let i = t.params.loop ? Math.ceil((s - 2 * t.loopedSlides) / t.params.slidesPerGroup) : t.snapGrid.length; t.params.freeMode && t.params.freeMode.enabled && !t.params.loop && i > s && (i = s); for (let s = 0; s < i; s += 1)e.renderBullet ? r += e.renderBullet.call(t, s, e.bulletClass) : r += `<${e.bulletElement} class="${e.bulletClass}"></${e.bulletElement}>`; a.html(r), t.pagination.bullets = a.find(U(e.bulletClass)) } "fraction" === e.type && (r = e.renderFraction ? e.renderFraction.call(t, e.currentClass, e.totalClass) : `<span class="${e.currentClass}"></span> / <span class="${e.totalClass}"></span>`, a.html(r)), "progressbar" === e.type && (r = e.renderProgressbar ? e.renderProgressbar.call(t, e.progressbarFillClass) : `<span class="${e.progressbarFillClass}"></span>`, a.html(r)), "custom" !== e.type && i("paginationRender", t.pagination.$el[0]) } function h() { t.params.pagination = F(t, t.originalParams.pagination, t.params.pagination, { el: "swiper-pagination" }); const e = t.params.pagination; if (!e.el) return; let s = d(e.el); 0 !== s.length && (t.params.uniqueNavElements && "string" == typeof e.el && s.length > 1 && (s = t.$el.find(e.el), s.length > 1 && (s = s.filter((e => d(e).parents(".swiper")[0] === t.el)))), "bullets" === e.type && e.clickable && s.addClass(e.clickableClass), s.addClass(e.modifierClass + e.type), s.addClass(t.isHorizontal() ? e.horizontalClass : e.verticalClass), "bullets" === e.type && e.dynamicBullets && (s.addClass(`${e.modifierClass}${e.type}-dynamic`), l = 0, e.dynamicMainBullets < 1 && (e.dynamicMainBullets = 1)), "progressbar" === e.type && e.progressbarOpposite && s.addClass(e.progressbarOppositeClass), e.clickable && s.on("click", U(e.bulletClass), (function (e) { e.preventDefault(); let s = d(this).index() * t.params.slidesPerGroup; t.params.loop && (s += t.loopedSlides), t.slideTo(s) })), Object.assign(t.pagination, { $el: s, el: s[0] }), t.enabled || s.addClass(e.lockClass)) } function m() { const e = t.params.pagination; if (o()) return; const s = t.pagination.$el; s.removeClass(e.hiddenClass), s.removeClass(e.modifierClass + e.type), s.removeClass(t.isHorizontal() ? e.horizontalClass : e.verticalClass), t.pagination.bullets && t.pagination.bullets.removeClass && t.pagination.bullets.removeClass(e.bulletActiveClass), e.clickable && s.off("click", U(e.bulletClass)) } a("init", (() => { !1 === t.params.pagination.enabled ? f() : (h(), u(), p()) })), a("activeIndexChange", (() => { (t.params.loop || void 0 === t.snapIndex) && p() })), a("snapIndexChange", (() => { t.params.loop || p() })), a("slidesLengthChange", (() => { t.params.loop && (u(), p()) })), a("snapGridLengthChange", (() => { t.params.loop || (u(), p()) })), a("destroy", (() => { m() })), a("enable disable", (() => { const { $el: e } = t.pagination; e && e[t.enabled ? "removeClass" : "addClass"](t.params.pagination.lockClass) })), a("lock unlock", (() => { p() })), a("click", ((e, s) => { const a = s.target, { $el: r } = t.pagination; if (t.params.pagination.el && t.params.pagination.hideOnClick && r && r.length > 0 && !d(a).hasClass(t.params.pagination.bulletClass)) { if (t.navigation && (t.navigation.nextEl && a === t.navigation.nextEl || t.navigation.prevEl && a === t.navigation.prevEl)) return; const e = r.hasClass(t.params.pagination.hiddenClass); i(!0 === e ? "paginationShow" : "paginationHide"), r.toggleClass(t.params.pagination.hiddenClass) } })); const f = () => { t.$el.addClass(t.params.pagination.paginationDisabledClass), t.pagination.$el && t.pagination.$el.addClass(t.params.pagination.paginationDisabledClass), m() }; Object.assign(t.pagination, { enable: () => { t.$el.removeClass(t.params.pagination.paginationDisabledClass), t.pagination.$el && t.pagination.$el.removeClass(t.params.pagination.paginationDisabledClass), h(), u(), p() }, disable: f, render: u, update: p, init: h, destroy: m }) }, function (e) { let { swiper: t, extendParams: s, on: i, emit: r } = e; const n = a(); let l, o, c, u, h = !1, m = null, f = null; function g() { if (!t.params.scrollbar.el || !t.scrollbar.el) return; const { scrollbar: e, rtlTranslate: s, progress: a } = t, { $dragEl: i, $el: r } = e, n = t.params.scrollbar; let l = o, d = (c - o) * a; s ? (d = -d, d > 0 ? (l = o - d, d = 0) : -d + o > c && (l = c + d)) : d < 0 ? (l = o + d, d = 0) : d + o > c && (l = c - d), t.isHorizontal() ? (i.transform(`translate3d(${d}px, 0, 0)`), i[0].style.width = `${l}px`) : (i.transform(`translate3d(0px, ${d}px, 0)`), i[0].style.height = `${l}px`), n.hide && (clearTimeout(m), r[0].style.opacity = 1, m = setTimeout((() => { r[0].style.opacity = 0, r.transition(400) }), 1e3)) } function v() { if (!t.params.scrollbar.el || !t.scrollbar.el) return; const { scrollbar: e } = t, { $dragEl: s, $el: a } = e; s[0].style.width = "", s[0].style.height = "", c = t.isHorizontal() ? a[0].offsetWidth : a[0].offsetHeight, u = t.size / (t.virtualSize + t.params.slidesOffsetBefore - (t.params.centeredSlides ? t.snapGrid[0] : 0)), o = "auto" === t.params.scrollbar.dragSize ? c * u : parseInt(t.params.scrollbar.dragSize, 10), t.isHorizontal() ? s[0].style.width = `${o}px` : s[0].style.height = `${o}px`, a[0].style.display = u >= 1 ? "none" : "", t.params.scrollbar.hide && (a[0].style.opacity = 0), t.params.watchOverflow && t.enabled && e.$el[t.isLocked ? "addClass" : "removeClass"](t.params.scrollbar.lockClass) } function w(e) { return t.isHorizontal() ? "touchstart" === e.type || "touchmove" === e.type ? e.targetTouches[0].clientX : e.clientX : "touchstart" === e.type || "touchmove" === e.type ? e.targetTouches[0].clientY : e.clientY } function b(e) { const { scrollbar: s, rtlTranslate: a } = t, { $el: i } = s; let r; r = (w(e) - i.offset()[t.isHorizontal() ? "left" : "top"] - (null !== l ? l : o / 2)) / (c - o), r = Math.max(Math.min(r, 1), 0), a && (r = 1 - r); const n = t.minTranslate() + (t.maxTranslate() - t.minTranslate()) * r; t.updateProgress(n), t.setTranslate(n), t.updateActiveIndex(), t.updateSlidesClasses() } function x(e) { const s = t.params.scrollbar, { scrollbar: a, $wrapperEl: i } = t, { $el: n, $dragEl: o } = a; h = !0, l = e.target === o[0] || e.target === o ? w(e) - e.target.getBoundingClientRect()[t.isHorizontal() ? "left" : "top"] : null, e.preventDefault(), e.stopPropagation(), i.transition(100), o.transition(100), b(e), clearTimeout(f), n.transition(0), s.hide && n.css("opacity", 1), t.params.cssMode && t.$wrapperEl.css("scroll-snap-type", "none"), r("scrollbarDragStart", e) } function y(e) { const { scrollbar: s, $wrapperEl: a } = t, { $el: i, $dragEl: n } = s; h && (e.preventDefault ? e.preventDefault() : e.returnValue = !1, b(e), a.transition(0), i.transition(0), n.transition(0), r("scrollbarDragMove", e)) } function E(e) { const s = t.params.scrollbar, { scrollbar: a, $wrapperEl: i } = t, { $el: n } = a; h && (h = !1, t.params.cssMode && (t.$wrapperEl.css("scroll-snap-type", ""), i.transition("")), s.hide && (clearTimeout(f), f = p((() => { n.css("opacity", 0), n.transition(400) }), 1e3)), r("scrollbarDragEnd", e), s.snapOnRelease && t.slideToClosest()) } function C(e) { const { scrollbar: s, touchEventsTouch: a, touchEventsDesktop: i, params: r, support: l } = t, o = s.$el; if (!o) return; const d = o[0], c = !(!l.passiveListener || !r.passiveListeners) && { passive: !1, capture: !1 }, p = !(!l.passiveListener || !r.passiveListeners) && { passive: !0, capture: !1 }; if (!d) return; const u = "on" === e ? "addEventListener" : "removeEventListener"; l.touch ? (d[u](a.start, x, c), d[u](a.move, y, c), d[u](a.end, E, p)) : (d[u](i.start, x, c), n[u](i.move, y, c), n[u](i.end, E, p)) } function T() { const { scrollbar: e, $el: s } = t; t.params.scrollbar = F(t, t.originalParams.scrollbar, t.params.scrollbar, { el: "swiper-scrollbar" }); const a = t.params.scrollbar; if (!a.el) return; let i = d(a.el); t.params.uniqueNavElements && "string" == typeof a.el && i.length > 1 && 1 === s.find(a.el).length && (i = s.find(a.el)), i.addClass(t.isHorizontal() ? a.horizontalClass : a.verticalClass); let r = i.find(`.${t.params.scrollbar.dragClass}`); 0 === r.length && (r = d(`<div class="${t.params.scrollbar.dragClass}"></div>`), i.append(r)), Object.assign(e, { $el: i, el: i[0], $dragEl: r, dragEl: r[0] }), a.draggable && t.params.scrollbar.el && t.scrollbar.el && C("on"), i && i[t.enabled ? "removeClass" : "addClass"](t.params.scrollbar.lockClass) } function $() { const e = t.params.scrollbar, s = t.scrollbar.$el; s && s.removeClass(t.isHorizontal() ? e.horizontalClass : e.verticalClass), t.params.scrollbar.el && t.scrollbar.el && C("off") } s({ scrollbar: { el: null, dragSize: "auto", hide: !1, draggable: !1, snapOnRelease: !0, lockClass: "swiper-scrollbar-lock", dragClass: "swiper-scrollbar-drag", scrollbarDisabledClass: "swiper-scrollbar-disabled", horizontalClass: "swiper-scrollbar-horizontal", verticalClass: "swiper-scrollbar-vertical" } }), t.scrollbar = { el: null, dragEl: null, $el: null, $dragEl: null }, i("init", (() => { !1 === t.params.scrollbar.enabled ? S() : (T(), v(), g()) })), i("update resize observerUpdate lock unlock", (() => { v() })), i("setTranslate", (() => { g() })), i("setTransition", ((e, s) => { !function (e) { t.params.scrollbar.el && t.scrollbar.el && t.scrollbar.$dragEl.transition(e) }(s) })), i("enable disable", (() => { const { $el: e } = t.scrollbar; e && e[t.enabled ? "removeClass" : "addClass"](t.params.scrollbar.lockClass) })), i("destroy", (() => { $() })); const S = () => { t.$el.addClass(t.params.scrollbar.scrollbarDisabledClass), t.scrollbar.$el && t.scrollbar.$el.addClass(t.params.scrollbar.scrollbarDisabledClass), $() }; Object.assign(t.scrollbar, { enable: () => { t.$el.removeClass(t.params.scrollbar.scrollbarDisabledClass), t.scrollbar.$el && t.scrollbar.$el.removeClass(t.params.scrollbar.scrollbarDisabledClass), T(), v(), g() }, disable: S, updateSize: v, setTranslate: g, init: T, destroy: $ }) }, function (e) { let { swiper: t, extendParams: s, on: a } = e; s({ parallax: { enabled: !1 } }); const i = (e, s) => { const { rtl: a } = t, i = d(e), r = a ? -1 : 1, n = i.attr("data-swiper-parallax") || "0"; let l = i.attr("data-swiper-parallax-x"), o = i.attr("data-swiper-parallax-y"); const c = i.attr("data-swiper-parallax-scale"), p = i.attr("data-swiper-parallax-opacity"); if (l || o ? (l = l || "0", o = o || "0") : t.isHorizontal() ? (l = n, o = "0") : (o = n, l = "0"), l = l.indexOf("%") >= 0 ? parseInt(l, 10) * s * r + "%" : l * s * r + "px", o = o.indexOf("%") >= 0 ? parseInt(o, 10) * s + "%" : o * s + "px", null != p) { const e = p - (p - 1) * (1 - Math.abs(s)); i[0].style.opacity = e } if (null == c) i.transform(`translate3d(${l}, ${o}, 0px)`); else { const e = c - (c - 1) * (1 - Math.abs(s)); i.transform(`translate3d(${l}, ${o}, 0px) scale(${e})`) } }, r = () => { const { $el: e, slides: s, progress: a, snapGrid: r } = t; e.children("[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y], [data-swiper-parallax-opacity], [data-swiper-parallax-scale]").each((e => { i(e, a) })), s.each(((e, s) => { let n = e.progress; t.params.slidesPerGroup > 1 && "auto" !== t.params.slidesPerView && (n += Math.ceil(s / 2) - a * (r.length - 1)), n = Math.min(Math.max(n, -1), 1), d(e).find("[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y], [data-swiper-parallax-opacity], [data-swiper-parallax-scale]").each((e => { i(e, n) })) })) }; a("beforeInit", (() => { t.params.parallax.enabled && (t.params.watchSlidesProgress = !0, t.originalParams.watchSlidesProgress = !0) })), a("init", (() => { t.params.parallax.enabled && r() })), a("setTranslate", (() => { t.params.parallax.enabled && r() })), a("setTransition", ((e, s) => { t.params.parallax.enabled && function (e) { void 0 === e && (e = t.params.speed); const { $el: s } = t; s.find("[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y], [data-swiper-parallax-opacity], [data-swiper-parallax-scale]").each((t => { const s = d(t); let a = parseInt(s.attr("data-swiper-parallax-duration"), 10) || e; 0 === e && (a = 0), s.transition(a) })) }(s) })) }, function (e) { let { swiper: t, extendParams: s, on: a, emit: i } = e; const n = r(); s({ zoom: { enabled: !1, maxRatio: 3, minRatio: 1, toggle: !0, containerClass: "swiper-zoom-container", zoomedSlideClass: "swiper-slide-zoomed" } }), t.zoom = { enabled: !1 }; let l, o, c, p = 1, u = !1; const m = { $slideEl: void 0, slideWidth: void 0, slideHeight: void 0, $imageEl: void 0, $imageWrapEl: void 0, maxRatio: 3 }, f = { isTouched: void 0, isMoved: void 0, currentX: void 0, currentY: void 0, minX: void 0, minY: void 0, maxX: void 0, maxY: void 0, width: void 0, height: void 0, startX: void 0, startY: void 0, touchesStart: {}, touchesCurrent: {} }, g = { x: void 0, y: void 0, prevPositionX: void 0, prevPositionY: void 0, prevTime: void 0 }; let v = 1; function w(e) { if (e.targetTouches.length < 2) return 1; const t = e.targetTouches[0].pageX, s = e.targetTouches[0].pageY, a = e.targetTouches[1].pageX, i = e.targetTouches[1].pageY; return Math.sqrt((a - t) ** 2 + (i - s) ** 2) } function b(e) { const s = t.support, a = t.params.zoom; if (o = !1, c = !1, !s.gestures) { if ("touchstart" !== e.type || "touchstart" === e.type && e.targetTouches.length < 2) return; o = !0, m.scaleStart = w(e) } m.$slideEl && m.$slideEl.length || (m.$slideEl = d(e.target).closest(`.${t.params.slideClass}`), 0 === m.$slideEl.length && (m.$slideEl = t.slides.eq(t.activeIndex)), m.$imageEl = m.$slideEl.find(`.${a.containerClass}`).eq(0).find("picture, img, svg, canvas, .swiper-zoom-target").eq(0), m.$imageWrapEl = m.$imageEl.parent(`.${a.containerClass}`), m.maxRatio = m.$imageWrapEl.attr("data-swiper-zoom") || a.maxRatio, 0 !== m.$imageWrapEl.length) ? (m.$imageEl && m.$imageEl.transition(0), u = !0) : m.$imageEl = void 0 } function x(e) { const s = t.support, a = t.params.zoom, i = t.zoom; if (!s.gestures) { if ("touchmove" !== e.type || "touchmove" === e.type && e.targetTouches.length < 2) return; c = !0, m.scaleMove = w(e) } m.$imageEl && 0 !== m.$imageEl.length ? (s.gestures ? i.scale = e.scale * p : i.scale = m.scaleMove / m.scaleStart * p, i.scale > m.maxRatio && (i.scale = m.maxRatio - 1 + (i.scale - m.maxRatio + 1) ** .5), i.scale < a.minRatio && (i.scale = a.minRatio + 1 - (a.minRatio - i.scale + 1) ** .5), m.$imageEl.transform(`translate3d(0,0,0) scale(${i.scale})`)) : "gesturechange" === e.type && b(e) } function y(e) { const s = t.device, a = t.support, i = t.params.zoom, r = t.zoom; if (!a.gestures) { if (!o || !c) return; if ("touchend" !== e.type || "touchend" === e.type && e.changedTouches.length < 2 && !s.android) return; o = !1, c = !1 } m.$imageEl && 0 !== m.$imageEl.length && (r.scale = Math.max(Math.min(r.scale, m.maxRatio), i.minRatio), m.$imageEl.transition(t.params.speed).transform(`translate3d(0,0,0) scale(${r.scale})`), p = r.scale, u = !1, 1 === r.scale && (m.$slideEl = void 0)) } function E(e) { const s = t.zoom; if (!m.$imageEl || 0 === m.$imageEl.length) return; if (t.allowClick = !1, !f.isTouched || !m.$slideEl) return; f.isMoved || (f.width = m.$imageEl[0].offsetWidth, f.height = m.$imageEl[0].offsetHeight, f.startX = h(m.$imageWrapEl[0], "x") || 0, f.startY = h(m.$imageWrapEl[0], "y") || 0, m.slideWidth = m.$slideEl[0].offsetWidth, m.slideHeight = m.$slideEl[0].offsetHeight, m.$imageWrapEl.transition(0)); const a = f.width * s.scale, i = f.height * s.scale; if (!(a < m.slideWidth && i < m.slideHeight)) { if (f.minX = Math.min(m.slideWidth / 2 - a / 2, 0), f.maxX = -f.minX, f.minY = Math.min(m.slideHeight / 2 - i / 2, 0), f.maxY = -f.minY, f.touchesCurrent.x = "touchmove" === e.type ? e.targetTouches[0].pageX : e.pageX, f.touchesCurrent.y = "touchmove" === e.type ? e.targetTouches[0].pageY : e.pageY, !f.isMoved && !u) { if (t.isHorizontal() && (Math.floor(f.minX) === Math.floor(f.startX) && f.touchesCurrent.x < f.touchesStart.x || Math.floor(f.maxX) === Math.floor(f.startX) && f.touchesCurrent.x > f.touchesStart.x)) return void (f.isTouched = !1); if (!t.isHorizontal() && (Math.floor(f.minY) === Math.floor(f.startY) && f.touchesCurrent.y < f.touchesStart.y || Math.floor(f.maxY) === Math.floor(f.startY) && f.touchesCurrent.y > f.touchesStart.y)) return void (f.isTouched = !1) } e.cancelable && e.preventDefault(), e.stopPropagation(), f.isMoved = !0, f.currentX = f.touchesCurrent.x - f.touchesStart.x + f.startX, f.currentY = f.touchesCurrent.y - f.touchesStart.y + f.startY, f.currentX < f.minX && (f.currentX = f.minX + 1 - (f.minX - f.currentX + 1) ** .8), f.currentX > f.maxX && (f.currentX = f.maxX - 1 + (f.currentX - f.maxX + 1) ** .8), f.currentY < f.minY && (f.currentY = f.minY + 1 - (f.minY - f.currentY + 1) ** .8), f.currentY > f.maxY && (f.currentY = f.maxY - 1 + (f.currentY - f.maxY + 1) ** .8), g.prevPositionX || (g.prevPositionX = f.touchesCurrent.x), g.prevPositionY || (g.prevPositionY = f.touchesCurrent.y), g.prevTime || (g.prevTime = Date.now()), g.x = (f.touchesCurrent.x - g.prevPositionX) / (Date.now() - g.prevTime) / 2, g.y = (f.touchesCurrent.y - g.prevPositionY) / (Date.now() - g.prevTime) / 2, Math.abs(f.touchesCurrent.x - g.prevPositionX) < 2 && (g.x = 0), Math.abs(f.touchesCurrent.y - g.prevPositionY) < 2 && (g.y = 0), g.prevPositionX = f.touchesCurrent.x, g.prevPositionY = f.touchesCurrent.y, g.prevTime = Date.now(), m.$imageWrapEl.transform(`translate3d(${f.currentX}px, ${f.currentY}px,0)`) } } function C() { const e = t.zoom; m.$slideEl && t.previousIndex !== t.activeIndex && (m.$imageEl && m.$imageEl.transform("translate3d(0,0,0) scale(1)"), m.$imageWrapEl && m.$imageWrapEl.transform("translate3d(0,0,0)"), e.scale = 1, p = 1, m.$slideEl = void 0, m.$imageEl = void 0, m.$imageWrapEl = void 0) } function T(e) { const s = t.zoom, a = t.params.zoom; if (m.$slideEl || (e && e.target && (m.$slideEl = d(e.target).closest(`.${t.params.slideClass}`)), m.$slideEl || (t.params.virtual && t.params.virtual.enabled && t.virtual ? m.$slideEl = t.$wrapperEl.children(`.${t.params.slideActiveClass}`) : m.$slideEl = t.slides.eq(t.activeIndex)), m.$imageEl = m.$slideEl.find(`.${a.containerClass}`).eq(0).find("picture, img, svg, canvas, .swiper-zoom-target").eq(0), m.$imageWrapEl = m.$imageEl.parent(`.${a.containerClass}`)), !m.$imageEl || 0 === m.$imageEl.length || !m.$imageWrapEl || 0 === m.$imageWrapEl.length) return; let i, r, l, o, c, u, h, g, v, w, b, x, y, E, C, T, $, S; t.params.cssMode && (t.wrapperEl.style.overflow = "hidden", t.wrapperEl.style.touchAction = "none"), m.$slideEl.addClass(`${a.zoomedSlideClass}`), void 0 === f.touchesStart.x && e ? (i = "touchend" === e.type ? e.changedTouches[0].pageX : e.pageX, r = "touchend" === e.type ? e.changedTouches[0].pageY : e.pageY) : (i = f.touchesStart.x, r = f.touchesStart.y), s.scale = m.$imageWrapEl.attr("data-swiper-zoom") || a.maxRatio, p = m.$imageWrapEl.attr("data-swiper-zoom") || a.maxRatio, e ? ($ = m.$slideEl[0].offsetWidth, S = m.$slideEl[0].offsetHeight, l = m.$slideEl.offset().left + n.scrollX, o = m.$slideEl.offset().top + n.scrollY, c = l + $ / 2 - i, u = o + S / 2 - r, v = m.$imageEl[0].offsetWidth, w = m.$imageEl[0].offsetHeight, b = v * s.scale, x = w * s.scale, y = Math.min($ / 2 - b / 2, 0), E = Math.min(S / 2 - x / 2, 0), C = -y, T = -E, h = c * s.scale, g = u * s.scale, h < y && (h = y), h > C && (h = C), g < E && (g = E), g > T && (g = T)) : (h = 0, g = 0), m.$imageWrapEl.transition(300).transform(`translate3d(${h}px, ${g}px,0)`), m.$imageEl.transition(300).transform(`translate3d(0,0,0) scale(${s.scale})`) } function $() { const e = t.zoom, s = t.params.zoom; m.$slideEl || (t.params.virtual && t.params.virtual.enabled && t.virtual ? m.$slideEl = t.$wrapperEl.children(`.${t.params.slideActiveClass}`) : m.$slideEl = t.slides.eq(t.activeIndex), m.$imageEl = m.$slideEl.find(`.${s.containerClass}`).eq(0).find("picture, img, svg, canvas, .swiper-zoom-target").eq(0), m.$imageWrapEl = m.$imageEl.parent(`.${s.containerClass}`)), m.$imageEl && 0 !== m.$imageEl.length && m.$imageWrapEl && 0 !== m.$imageWrapEl.length && (t.params.cssMode && (t.wrapperEl.style.overflow = "", t.wrapperEl.style.touchAction = ""), e.scale = 1, p = 1, m.$imageWrapEl.transition(300).transform("translate3d(0,0,0)"), m.$imageEl.transition(300).transform("translate3d(0,0,0) scale(1)"), m.$slideEl.removeClass(`${s.zoomedSlideClass}`), m.$slideEl = void 0) } function S(e) { const s = t.zoom; s.scale && 1 !== s.scale ? $() : T(e) } function M() { const e = t.support; return { passiveListener: !("touchstart" !== t.touchEvents.start || !e.passiveListener || !t.params.passiveListeners) && { passive: !0, capture: !1 }, activeListenerWithCapture: !e.passiveListener || { passive: !1, capture: !0 } } } function P() { return `.${t.params.slideClass}` } function k(e) { const { passiveListener: s } = M(), a = P(); t.$wrapperEl[e]("gesturestart", a, b, s), t.$wrapperEl[e]("gesturechange", a, x, s), t.$wrapperEl[e]("gestureend", a, y, s) } function z() { l || (l = !0, k("on")) } function L() { l && (l = !1, k("off")) } function O() { const e = t.zoom; if (e.enabled) return; e.enabled = !0; const s = t.support, { passiveListener: a, activeListenerWithCapture: i } = M(), r = P(); s.gestures ? (t.$wrapperEl.on(t.touchEvents.start, z, a), t.$wrapperEl.on(t.touchEvents.end, L, a)) : "touchstart" === t.touchEvents.start && (t.$wrapperEl.on(t.touchEvents.start, r, b, a), t.$wrapperEl.on(t.touchEvents.move, r, x, i), t.$wrapperEl.on(t.touchEvents.end, r, y, a), t.touchEvents.cancel && t.$wrapperEl.on(t.touchEvents.cancel, r, y, a)), t.$wrapperEl.on(t.touchEvents.move, `.${t.params.zoom.containerClass}`, E, i) } function I() { const e = t.zoom; if (!e.enabled) return; const s = t.support; e.enabled = !1; const { passiveListener: a, activeListenerWithCapture: i } = M(), r = P(); s.gestures ? (t.$wrapperEl.off(t.touchEvents.start, z, a), t.$wrapperEl.off(t.touchEvents.end, L, a)) : "touchstart" === t.touchEvents.start && (t.$wrapperEl.off(t.touchEvents.start, r, b, a), t.$wrapperEl.off(t.touchEvents.move, r, x, i), t.$wrapperEl.off(t.touchEvents.end, r, y, a), t.touchEvents.cancel && t.$wrapperEl.off(t.touchEvents.cancel, r, y, a)), t.$wrapperEl.off(t.touchEvents.move, `.${t.params.zoom.containerClass}`, E, i) } Object.defineProperty(t.zoom, "scale", { get: () => v, set(e) { if (v !== e) { const t = m.$imageEl ? m.$imageEl[0] : void 0, s = m.$slideEl ? m.$slideEl[0] : void 0; i("zoomChange", e, t, s) } v = e } }), a("init", (() => { t.params.zoom.enabled && O() })), a("destroy", (() => { I() })), a("touchStart", ((e, s) => { t.zoom.enabled && function (e) { const s = t.device; m.$imageEl && 0 !== m.$imageEl.length && (f.isTouched || (s.android && e.cancelable && e.preventDefault(), f.isTouched = !0, f.touchesStart.x = "touchstart" === e.type ? e.targetTouches[0].pageX : e.pageX, f.touchesStart.y = "touchstart" === e.type ? e.targetTouches[0].pageY : e.pageY)) }(s) })), a("touchEnd", ((e, s) => { t.zoom.enabled && function () { const e = t.zoom; if (!m.$imageEl || 0 === m.$imageEl.length) return; if (!f.isTouched || !f.isMoved) return f.isTouched = !1, void (f.isMoved = !1); f.isTouched = !1, f.isMoved = !1; let s = 300, a = 300; const i = g.x * s, r = f.currentX + i, n = g.y * a, l = f.currentY + n; 0 !== g.x && (s = Math.abs((r - f.currentX) / g.x)), 0 !== g.y && (a = Math.abs((l - f.currentY) / g.y)); const o = Math.max(s, a); f.currentX = r, f.currentY = l; const d = f.width * e.scale, c = f.height * e.scale; f.minX = Math.min(m.slideWidth / 2 - d / 2, 0), f.maxX = -f.minX, f.minY = Math.min(m.slideHeight / 2 - c / 2, 0), f.maxY = -f.minY, f.currentX = Math.max(Math.min(f.currentX, f.maxX), f.minX), f.currentY = Math.max(Math.min(f.currentY, f.maxY), f.minY), m.$imageWrapEl.transition(o).transform(`translate3d(${f.currentX}px, ${f.currentY}px,0)`) }() })), a("doubleTap", ((e, s) => { !t.animating && t.params.zoom.enabled && t.zoom.enabled && t.params.zoom.toggle && S(s) })), a("transitionEnd", (() => { t.zoom.enabled && t.params.zoom.enabled && C() })), a("slideChange", (() => { t.zoom.enabled && t.params.zoom.enabled && t.params.cssMode && C() })), Object.assign(t.zoom, { enable: O, disable: I, in: T, out: $, toggle: S }) }, function (e) { let { swiper: t, extendParams: s, on: a, emit: i } = e; s({ lazy: { checkInView: !1, enabled: !1, loadPrevNext: !1, loadPrevNextAmount: 1, loadOnTransitionStart: !1, scrollingElement: "", elementClass: "swiper-lazy", loadingClass: "swiper-lazy-loading", loadedClass: "swiper-lazy-loaded", preloaderClass: "swiper-lazy-preloader" } }), t.lazy = {}; let n = !1, l = !1; function o(e, s) { void 0 === s && (s = !0); const a = t.params.lazy; if (void 0 === e) return; if (0 === t.slides.length) return; const r = t.virtual && t.params.virtual.enabled ? t.$wrapperEl.children(`.${t.params.slideClass}[data-swiper-slide-index="${e}"]`) : t.slides.eq(e), n = r.find(`.${a.elementClass}:not(.${a.loadedClass}):not(.${a.loadingClass})`); !r.hasClass(a.elementClass) || r.hasClass(a.loadedClass) || r.hasClass(a.loadingClass) || n.push(r[0]), 0 !== n.length && n.each((e => { const n = d(e); n.addClass(a.loadingClass); const l = n.attr("data-background"), c = n.attr("data-src"), p = n.attr("data-srcset"), u = n.attr("data-sizes"), h = n.parent("picture"); t.loadImage(n[0], c || l, p, u, !1, (() => { if (null != t && t && (!t || t.params) && !t.destroyed) { if (l ? (n.css("background-image", `url("${l}")`), n.removeAttr("data-background")) : (p && (n.attr("srcset", p), n.removeAttr("data-srcset")), u && (n.attr("sizes", u), n.removeAttr("data-sizes")), h.length && h.children("source").each((e => { const t = d(e); t.attr("data-srcset") && (t.attr("srcset", t.attr("data-srcset")), t.removeAttr("data-srcset")) })), c && (n.attr("src", c), n.removeAttr("data-src"))), n.addClass(a.loadedClass).removeClass(a.loadingClass), r.find(`.${a.preloaderClass}`).remove(), t.params.loop && s) { const e = r.attr("data-swiper-slide-index"); if (r.hasClass(t.params.slideDuplicateClass)) { o(t.$wrapperEl.children(`[data-swiper-slide-index="${e}"]:not(.${t.params.slideDuplicateClass})`).index(), !1) } else { o(t.$wrapperEl.children(`.${t.params.slideDuplicateClass}[data-swiper-slide-index="${e}"]`).index(), !1) } } i("lazyImageReady", r[0], n[0]), t.params.autoHeight && t.updateAutoHeight() } })), i("lazyImageLoad", r[0], n[0]) })) } function c() { const { $wrapperEl: e, params: s, slides: a, activeIndex: i } = t, r = t.virtual && s.virtual.enabled, n = s.lazy; let c = s.slidesPerView; function p(t) { if (r) { if (e.children(`.${s.slideClass}[data-swiper-slide-index="${t}"]`).length) return !0 } else if (a[t]) return !0; return !1 } function u(e) { return r ? d(e).attr("data-swiper-slide-index") : d(e).index() } if ("auto" === c && (c = 0), l || (l = !0), t.params.watchSlidesProgress) e.children(`.${s.slideVisibleClass}`).each((e => { o(r ? d(e).attr("data-swiper-slide-index") : d(e).index()) })); else if (c > 1) for (let e = i; e < i + c; e += 1)p(e) && o(e); else o(i); if (n.loadPrevNext) if (c > 1 || n.loadPrevNextAmount && n.loadPrevNextAmount > 1) { const e = n.loadPrevNextAmount, t = Math.ceil(c), s = Math.min(i + t + Math.max(e, t), a.length), r = Math.max(i - Math.max(t, e), 0); for (let e = i + t; e < s; e += 1)p(e) && o(e); for (let e = r; e < i; e += 1)p(e) && o(e) } else { const t = e.children(`.${s.slideNextClass}`); t.length > 0 && o(u(t)); const a = e.children(`.${s.slidePrevClass}`); a.length > 0 && o(u(a)) } } function p() { const e = r(); if (!t || t.destroyed) return; const s = t.params.lazy.scrollingElement ? d(t.params.lazy.scrollingElement) : d(e), a = s[0] === e, i = a ? e.innerWidth : s[0].offsetWidth, l = a ? e.innerHeight : s[0].offsetHeight, o = t.$el.offset(), { rtlTranslate: u } = t; let h = !1; u && (o.left -= t.$el[0].scrollLeft); const m = [[o.left, o.top], [o.left + t.width, o.top], [o.left, o.top + t.height], [o.left + t.width, o.top + t.height]]; for (let e = 0; e < m.length; e += 1) { const t = m[e]; if (t[0] >= 0 && t[0] <= i && t[1] >= 0 && t[1] <= l) { if (0 === t[0] && 0 === t[1]) continue; h = !0 } } const f = !("touchstart" !== t.touchEvents.start || !t.support.passiveListener || !t.params.passiveListeners) && { passive: !0, capture: !1 }; h ? (c(), s.off("scroll", p, f)) : n || (n = !0, s.on("scroll", p, f)) } a("beforeInit", (() => { t.params.lazy.enabled && t.params.preloadImages && (t.params.preloadImages = !1) })), a("init", (() => { t.params.lazy.enabled && (t.params.lazy.checkInView ? p() : c()) })), a("scroll", (() => { t.params.freeMode && t.params.freeMode.enabled && !t.params.freeMode.sticky && c() })), a("scrollbarDragMove resize _freeModeNoMomentumRelease", (() => { t.params.lazy.enabled && (t.params.lazy.checkInView ? p() : c()) })), a("transitionStart", (() => { t.params.lazy.enabled && (t.params.lazy.loadOnTransitionStart || !t.params.lazy.loadOnTransitionStart && !l) && (t.params.lazy.checkInView ? p() : c()) })), a("transitionEnd", (() => { t.params.lazy.enabled && !t.params.lazy.loadOnTransitionStart && (t.params.lazy.checkInView ? p() : c()) })), a("slideChange", (() => { const { lazy: e, cssMode: s, watchSlidesProgress: a, touchReleaseOnEdges: i, resistanceRatio: r } = t.params; e.enabled && (s || a && (i || 0 === r)) && c() })), a("destroy", (() => { t.$el && t.$el.find(`.${t.params.lazy.loadingClass}`).removeClass(t.params.lazy.loadingClass) })), Object.assign(t.lazy, { load: c, loadInSlide: o }) }, function (e) { let { swiper: t, extendParams: s, on: a } = e; function i(e, t) { const s = function () { let e, t, s; return (a, i) => { for (t = -1, e = a.length; e - t > 1;)s = e + t >> 1, a[s] <= i ? t = s : e = s; return e } }(); let a, i; return this.x = e, this.y = t, this.lastIndex = e.length - 1, this.interpolate = function (e) { return e ? (i = s(this.x, e), a = i - 1, (e - this.x[a]) * (this.y[i] - this.y[a]) / (this.x[i] - this.x[a]) + this.y[a]) : 0 }, this } function r() { t.controller.control && t.controller.spline && (t.controller.spline = void 0, delete t.controller.spline) } s({ controller: { control: void 0, inverse: !1, by: "slide" } }), t.controller = { control: void 0 }, a("beforeInit", (() => { t.controller.control = t.params.controller.control })), a("update", (() => { r() })), a("resize", (() => { r() })), a("observerUpdate", (() => { r() })), a("setTranslate", ((e, s, a) => { t.controller.control && t.controller.setTranslate(s, a) })), a("setTransition", ((e, s, a) => { t.controller.control && t.controller.setTransition(s, a) })), Object.assign(t.controller, { setTranslate: function (e, s) { const a = t.controller.control; let r, n; const l = t.constructor; function o(e) { const s = t.rtlTranslate ? -t.translate : t.translate; "slide" === t.params.controller.by && (!function (e) { t.controller.spline || (t.controller.spline = t.params.loop ? new i(t.slidesGrid, e.slidesGrid) : new i(t.snapGrid, e.snapGrid)) }(e), n = -t.controller.spline.interpolate(-s)), n && "container" !== t.params.controller.by || (r = (e.maxTranslate() - e.minTranslate()) / (t.maxTranslate() - t.minTranslate()), n = (s - t.minTranslate()) * r + e.minTranslate()), t.params.controller.inverse && (n = e.maxTranslate() - n), e.updateProgress(n), e.setTranslate(n, t), e.updateActiveIndex(), e.updateSlidesClasses() } if (Array.isArray(a)) for (let e = 0; e < a.length; e += 1)a[e] !== s && a[e] instanceof l && o(a[e]); else a instanceof l && s !== a && o(a) }, setTransition: function (e, s) { const a = t.constructor, i = t.controller.control; let r; function n(s) { s.setTransition(e, t), 0 !== e && (s.transitionStart(), s.params.autoHeight && p((() => { s.updateAutoHeight() })), s.$wrapperEl.transitionEnd((() => { i && (s.params.loop && "slide" === t.params.controller.by && s.loopFix(), s.transitionEnd()) }))) } if (Array.isArray(i)) for (r = 0; r < i.length; r += 1)i[r] !== s && i[r] instanceof a && n(i[r]); else i instanceof a && s !== i && n(i) } }) }, function (e) { let { swiper: t, extendParams: s, on: a } = e; s({ a11y: { enabled: !0, notificationClass: "swiper-notification", prevSlideMessage: "Previous slide", nextSlideMessage: "Next slide", firstSlideMessage: "This is the first slide", lastSlideMessage: "This is the last slide", paginationBulletMessage: "Go to slide {{index}}", slideLabelMessage: "{{index}} / {{slidesLength}}", containerMessage: null, containerRoleDescriptionMessage: null, itemRoleDescriptionMessage: null, slideRole: "group", id: null } }), t.a11y = { clicked: !1 }; let i = null; function r(e) { const t = i; 0 !== t.length && (t.html(""), t.html(e)) } function n(e) { e.attr("tabIndex", "0") } function l(e) { e.attr("tabIndex", "-1") } function o(e, t) { e.attr("role", t) } function c(e, t) { e.attr("aria-roledescription", t) } function p(e, t) { e.attr("aria-label", t) } function u(e) { e.attr("aria-disabled", !0) } function h(e) { e.attr("aria-disabled", !1) } function m(e) { if (13 !== e.keyCode && 32 !== e.keyCode) return; const s = t.params.a11y, a = d(e.target); t.navigation && t.navigation.$nextEl && a.is(t.navigation.$nextEl) && (t.isEnd && !t.params.loop || t.slideNext(), t.isEnd ? r(s.lastSlideMessage) : r(s.nextSlideMessage)), t.navigation && t.navigation.$prevEl && a.is(t.navigation.$prevEl) && (t.isBeginning && !t.params.loop || t.slidePrev(), t.isBeginning ? r(s.firstSlideMessage) : r(s.prevSlideMessage)), t.pagination && a.is(U(t.params.pagination.bulletClass)) && a[0].click() } function f() { return t.pagination && t.pagination.bullets && t.pagination.bullets.length } function g() { return f() && t.params.pagination.clickable } const v = (e, t, s) => { n(e), "BUTTON" !== e[0].tagName && (o(e, "button"), e.on("keydown", m)), p(e, s), function (e, t) { e.attr("aria-controls", t) }(e, t) }, w = () => { t.a11y.clicked = !0 }, b = () => { requestAnimationFrame((() => { requestAnimationFrame((() => { t.a11y.clicked = !1 })) })) }, x = e => { if (t.a11y.clicked) return; const s = e.target.closest(`.${t.params.slideClass}`); if (!s || !t.slides.includes(s)) return; const a = t.slides.indexOf(s) === t.activeIndex, i = t.params.watchSlidesProgress && t.visibleSlides && t.visibleSlides.includes(s); a || i || (t.isHorizontal() ? t.el.scrollLeft = 0 : t.el.scrollTop = 0, t.slideTo(t.slides.indexOf(s), 0)) }, y = () => { const e = t.params.a11y; e.itemRoleDescriptionMessage && c(d(t.slides), e.itemRoleDescriptionMessage), e.slideRole && o(d(t.slides), e.slideRole); const s = t.params.loop ? t.slides.filter((e => !e.classList.contains(t.params.slideDuplicateClass))).length : t.slides.length; e.slideLabelMessage && t.slides.each(((a, i) => { const r = d(a), n = t.params.loop ? parseInt(r.attr("data-swiper-slide-index"), 10) : i; p(r, e.slideLabelMessage.replace(/\{\{index\}\}/, n + 1).replace(/\{\{slidesLength\}\}/, s)) })) }, E = () => { const e = t.params.a11y; t.$el.append(i); const s = t.$el; e.containerRoleDescriptionMessage && c(s, e.containerRoleDescriptionMessage), e.containerMessage && p(s, e.containerMessage); const a = t.$wrapperEl, r = e.id || a.attr("id") || `swiper-wrapper-${n = 16, void 0 === n && (n = 16), "x".repeat(n).replace(/x/g, (() => Math.round(16 * Math.random()).toString(16)))}`; var n; const l = t.params.autoplay && t.params.autoplay.enabled ? "off" : "polite"; var o; let d, u; o = r, a.attr("id", o), function (e, t) { e.attr("aria-live", t) }(a, l), y(), t.navigation && t.navigation.$nextEl && (d = t.navigation.$nextEl), t.navigation && t.navigation.$prevEl && (u = t.navigation.$prevEl), d && d.length && v(d, r, e.nextSlideMessage), u && u.length && v(u, r, e.prevSlideMessage), g() && t.pagination.$el.on("keydown", U(t.params.pagination.bulletClass), m), t.$el.on("focus", x, !0), t.$el.on("pointerdown", w, !0), t.$el.on("pointerup", b, !0) }; a("beforeInit", (() => { i = d(`<span class="${t.params.a11y.notificationClass}" aria-live="assertive" aria-atomic="true"></span>`) })), a("afterInit", (() => { t.params.a11y.enabled && E() })), a("slidesLengthChange snapGridLengthChange slidesGridLengthChange", (() => { t.params.a11y.enabled && y() })), a("fromEdge toEdge afterInit lock unlock", (() => { t.params.a11y.enabled && function () { if (t.params.loop || t.params.rewind || !t.navigation) return; const { $nextEl: e, $prevEl: s } = t.navigation; s && s.length > 0 && (t.isBeginning ? (u(s), l(s)) : (h(s), n(s))), e && e.length > 0 && (t.isEnd ? (u(e), l(e)) : (h(e), n(e))) }() })), a("paginationUpdate", (() => { t.params.a11y.enabled && function () { const e = t.params.a11y; f() && t.pagination.bullets.each((s => { const a = d(s); t.params.pagination.clickable && (n(a), t.params.pagination.renderBullet || (o(a, "button"), p(a, e.paginationBulletMessage.replace(/\{\{index\}\}/, a.index() + 1)))), a.is(`.${t.params.pagination.bulletActiveClass}`) ? a.attr("aria-current", "true") : a.removeAttr("aria-current") })) }() })), a("destroy", (() => { t.params.a11y.enabled && function () { let e, s; i && i.length > 0 && i.remove(), t.navigation && t.navigation.$nextEl && (e = t.navigation.$nextEl), t.navigation && t.navigation.$prevEl && (s = t.navigation.$prevEl), e && e.off("keydown", m), s && s.off("keydown", m), g() && t.pagination.$el.off("keydown", U(t.params.pagination.bulletClass), m), t.$el.off("focus", x, !0), t.$el.off("pointerdown", w, !0), t.$el.off("pointerup", b, !0) }() })) }, function (e) { let { swiper: t, extendParams: s, on: a } = e; s({ history: { enabled: !1, root: "", replaceState: !1, key: "slides", keepQuery: !1 } }); let i = !1, n = {}; const l = e => e.toString().replace(/\s+/g, "-").replace(/[^\w-]+/g, "").replace(/--+/g, "-").replace(/^-+/, "").replace(/-+$/, ""), o = e => { const t = r(); let s; s = e ? new URL(e) : t.location; const a = s.pathname.slice(1).split("/").filter((e => "" !== e)), i = a.length; return { key: a[i - 2], value: a[i - 1] } }, d = (e, s) => { const a = r(); if (!i || !t.params.history.enabled) return; let n; n = t.params.url ? new URL(t.params.url) : a.location; const o = t.slides.eq(s); let d = l(o.attr("data-history")); if (t.params.history.root.length > 0) { let s = t.params.history.root; "/" === s[s.length - 1] && (s = s.slice(0, s.length - 1)), d = `${s}/${e}/${d}` } else n.pathname.includes(e) || (d = `${e}/${d}`); t.params.history.keepQuery && (d += n.search); const c = a.history.state; c && c.value === d || (t.params.history.replaceState ? a.history.replaceState({ value: d }, null, d) : a.history.pushState({ value: d }, null, d)) }, c = (e, s, a) => { if (s) for (let i = 0, r = t.slides.length; i < r; i += 1) { const r = t.slides.eq(i); if (l(r.attr("data-history")) === s && !r.hasClass(t.params.slideDuplicateClass)) { const s = r.index(); t.slideTo(s, e, a) } } else t.slideTo(0, e, a) }, p = () => { n = o(t.params.url), c(t.params.speed, n.value, !1) }; a("init", (() => { t.params.history.enabled && (() => { const e = r(); if (t.params.history) { if (!e.history || !e.history.pushState) return t.params.history.enabled = !1, void (t.params.hashNavigation.enabled = !0); i = !0, n = o(t.params.url), (n.key || n.value) && (c(0, n.value, t.params.runCallbacksOnInit), t.params.history.replaceState || e.addEventListener("popstate", p)) } })() })), a("destroy", (() => { t.params.history.enabled && (() => { const e = r(); t.params.history.replaceState || e.removeEventListener("popstate", p) })() })), a("transitionEnd _freeModeNoMomentumRelease", (() => { i && d(t.params.history.key, t.activeIndex) })), a("slideChange", (() => { i && t.params.cssMode && d(t.params.history.key, t.activeIndex) })) }, function (e) { let { swiper: t, extendParams: s, emit: i, on: n } = e, l = !1; const o = a(), c = r(); s({ hashNavigation: { enabled: !1, replaceState: !1, watchState: !1 } }); const p = () => { i("hashChange"); const e = o.location.hash.replace("#", ""); if (e !== t.slides.eq(t.activeIndex).attr("data-hash")) { const s = t.$wrapperEl.children(`.${t.params.slideClass}[data-hash="${e}"]`).index(); if (void 0 === s) return; t.slideTo(s) } }, u = () => { if (l && t.params.hashNavigation.enabled) if (t.params.hashNavigation.replaceState && c.history && c.history.replaceState) c.history.replaceState(null, null, `#${t.slides.eq(t.activeIndex).attr("data-hash")}` || ""), i("hashSet"); else { const e = t.slides.eq(t.activeIndex), s = e.attr("data-hash") || e.attr("data-history"); o.location.hash = s || "", i("hashSet") } }; n("init", (() => { t.params.hashNavigation.enabled && (() => { if (!t.params.hashNavigation.enabled || t.params.history && t.params.history.enabled) return; l = !0; const e = o.location.hash.replace("#", ""); if (e) { const s = 0; for (let a = 0, i = t.slides.length; a < i; a += 1) { const i = t.slides.eq(a); if ((i.attr("data-hash") || i.attr("data-history")) === e && !i.hasClass(t.params.slideDuplicateClass)) { const e = i.index(); t.slideTo(e, s, t.params.runCallbacksOnInit, !0) } } } t.params.hashNavigation.watchState && d(c).on("hashchange", p) })() })), n("destroy", (() => { t.params.hashNavigation.enabled && t.params.hashNavigation.watchState && d(c).off("hashchange", p) })), n("transitionEnd _freeModeNoMomentumRelease", (() => { l && u() })), n("slideChange", (() => { l && t.params.cssMode && u() })) }, function (e) { let t, { swiper: s, extendParams: i, on: r, emit: n } = e; function l() { if (!s.size) return s.autoplay.running = !1, void (s.autoplay.paused = !1); const e = s.slides.eq(s.activeIndex); let a = s.params.autoplay.delay; e.attr("data-swiper-autoplay") && (a = e.attr("data-swiper-autoplay") || s.params.autoplay.delay), clearTimeout(t), t = p((() => { let e; s.params.autoplay.reverseDirection ? s.params.loop ? (s.loopFix(), e = s.slidePrev(s.params.speed, !0, !0), n("autoplay")) : s.isBeginning ? s.params.autoplay.stopOnLastSlide ? d() : (e = s.slideTo(s.slides.length - 1, s.params.speed, !0, !0), n("autoplay")) : (e = s.slidePrev(s.params.speed, !0, !0), n("autoplay")) : s.params.loop ? (s.loopFix(), e = s.slideNext(s.params.speed, !0, !0), n("autoplay")) : s.isEnd ? s.params.autoplay.stopOnLastSlide ? d() : (e = s.slideTo(0, s.params.speed, !0, !0), n("autoplay")) : (e = s.slideNext(s.params.speed, !0, !0), n("autoplay")), (s.params.cssMode && s.autoplay.running || !1 === e) && l() }), a) } function o() { return void 0 === t && (!s.autoplay.running && (s.autoplay.running = !0, n("autoplayStart"), l(), !0)) } function d() { return !!s.autoplay.running && (void 0 !== t && (t && (clearTimeout(t), t = void 0), s.autoplay.running = !1, n("autoplayStop"), !0)) } function c(e) { s.autoplay.running && (s.autoplay.paused || (t && clearTimeout(t), s.autoplay.paused = !0, 0 !== e && s.params.autoplay.waitForTransition ? ["transitionend", "webkitTransitionEnd"].forEach((e => { s.$wrapperEl[0].addEventListener(e, h) })) : (s.autoplay.paused = !1, l()))) } function u() { const e = a(); "hidden" === e.visibilityState && s.autoplay.running && c(), "visible" === e.visibilityState && s.autoplay.paused && (l(), s.autoplay.paused = !1) } function h(e) { s && !s.destroyed && s.$wrapperEl && e.target === s.$wrapperEl[0] && (["transitionend", "webkitTransitionEnd"].forEach((e => { s.$wrapperEl[0].removeEventListener(e, h) })), s.autoplay.paused = !1, s.autoplay.running ? l() : d()) } function m() { s.params.autoplay.disableOnInteraction ? d() : (n("autoplayPause"), c()), ["transitionend", "webkitTransitionEnd"].forEach((e => { s.$wrapperEl[0].removeEventListener(e, h) })) } function f() { s.params.autoplay.disableOnInteraction || (s.autoplay.paused = !1, n("autoplayResume"), l()) } s.autoplay = { running: !1, paused: !1 }, i({ autoplay: { enabled: !1, delay: 3e3, waitForTransition: !0, disableOnInteraction: !0, stopOnLastSlide: !1, reverseDirection: !1, pauseOnMouseEnter: !1 } }), r("init", (() => { if (s.params.autoplay.enabled) { o(); a().addEventListener("visibilitychange", u), s.params.autoplay.pauseOnMouseEnter && (s.$el.on("mouseenter", m), s.$el.on("mouseleave", f)) } })), r("beforeTransitionStart", ((e, t, a) => { s.autoplay.running && (a || !s.params.autoplay.disableOnInteraction ? s.autoplay.pause(t) : d()) })), r("sliderFirstMove", (() => { s.autoplay.running && (s.params.autoplay.disableOnInteraction ? d() : c()) })), r("touchEnd", (() => { s.params.cssMode && s.autoplay.paused && !s.params.autoplay.disableOnInteraction && l() })), r("destroy", (() => { s.$el.off("mouseenter", m), s.$el.off("mouseleave", f), s.autoplay.running && d(); a().removeEventListener("visibilitychange", u) })), Object.assign(s.autoplay, { pause: c, run: l, start: o, stop: d }) }, function (e) { let { swiper: t, extendParams: s, on: a } = e; s({ thumbs: { swiper: null, multipleActiveThumbs: !0, autoScrollOffset: 0, slideThumbActiveClass: "swiper-slide-thumb-active", thumbsContainerClass: "swiper-thumbs" } }); let i = !1, r = !1; function n() { const e = t.thumbs.swiper; if (!e || e.destroyed) return; const s = e.clickedIndex, a = e.clickedSlide; if (a && d(a).hasClass(t.params.thumbs.slideThumbActiveClass)) return; if (null == s) return; let i; if (i = e.params.loop ? parseInt(d(e.clickedSlide).attr("data-swiper-slide-index"), 10) : s, t.params.loop) { let e = t.activeIndex; t.slides.eq(e).hasClass(t.params.slideDuplicateClass) && (t.loopFix(), t._clientLeft = t.$wrapperEl[0].clientLeft, e = t.activeIndex); const s = t.slides.eq(e).prevAll(`[data-swiper-slide-index="${i}"]`).eq(0).index(), a = t.slides.eq(e).nextAll(`[data-swiper-slide-index="${i}"]`).eq(0).index(); i = void 0 === s ? a : void 0 === a ? s : a - e < e - s ? a : s } t.slideTo(i) } function l() { const { thumbs: e } = t.params; if (i) return !1; i = !0; const s = t.constructor; if (e.swiper instanceof s) t.thumbs.swiper = e.swiper, Object.assign(t.thumbs.swiper.originalParams, { watchSlidesProgress: !0, slideToClickedSlide: !1 }), Object.assign(t.thumbs.swiper.params, { watchSlidesProgress: !0, slideToClickedSlide: !1 }); else if (m(e.swiper)) { const a = Object.assign({}, e.swiper); Object.assign(a, { watchSlidesProgress: !0, slideToClickedSlide: !1 }), t.thumbs.swiper = new s(a), r = !0 } return t.thumbs.swiper.$el.addClass(t.params.thumbs.thumbsContainerClass), t.thumbs.swiper.on("tap", n), !0 } function o(e) { const s = t.thumbs.swiper; if (!s || s.destroyed) return; const a = "auto" === s.params.slidesPerView ? s.slidesPerViewDynamic() : s.params.slidesPerView; let i = 1; const r = t.params.thumbs.slideThumbActiveClass; if (t.params.slidesPerView > 1 && !t.params.centeredSlides && (i = t.params.slidesPerView), t.params.thumbs.multipleActiveThumbs || (i = 1), i = Math.floor(i), s.slides.removeClass(r), s.params.loop || s.params.virtual && s.params.virtual.enabled) for (let e = 0; e < i; e += 1)s.$wrapperEl.children(`[data-swiper-slide-index="${t.realIndex + e}"]`).addClass(r); else for (let e = 0; e < i; e += 1)s.slides.eq(t.realIndex + e).addClass(r); const n = t.params.thumbs.autoScrollOffset, l = n && !s.params.loop; if (t.realIndex !== s.realIndex || l) { let i, r, o = s.activeIndex; if (s.params.loop) { s.slides.eq(o).hasClass(s.params.slideDuplicateClass) && (s.loopFix(), s._clientLeft = s.$wrapperEl[0].clientLeft, o = s.activeIndex); const e = s.slides.eq(o).prevAll(`[data-swiper-slide-index="${t.realIndex}"]`).eq(0).index(), a = s.slides.eq(o).nextAll(`[data-swiper-slide-index="${t.realIndex}"]`).eq(0).index(); i = void 0 === e ? a : void 0 === a ? e : a - o == o - e ? s.params.slidesPerGroup > 1 ? a : o : a - o < o - e ? a : e, r = t.activeIndex > t.previousIndex ? "next" : "prev" } else i = t.realIndex, r = i > t.previousIndex ? "next" : "prev"; l && (i += "next" === r ? n : -1 * n), s.visibleSlidesIndexes && s.visibleSlidesIndexes.indexOf(i) < 0 && (s.params.centeredSlides ? i = i > o ? i - Math.floor(a / 2) + 1 : i + Math.floor(a / 2) - 1 : i > o && s.params.slidesPerGroup, s.slideTo(i, e ? 0 : void 0)) } } t.thumbs = { swiper: null }, a("beforeInit", (() => { const { thumbs: e } = t.params; e && e.swiper && (l(), o(!0)) })), a("slideChange update resize observerUpdate", (() => { o() })), a("setTransition", ((e, s) => { const a = t.thumbs.swiper; a && !a.destroyed && a.setTransition(s) })), a("beforeDestroy", (() => { const e = t.thumbs.swiper; e && !e.destroyed && r && e.destroy() })), Object.assign(t.thumbs, { init: l, update: o }) }, function (e) { let { swiper: t, extendParams: s, emit: a, once: i } = e; s({ freeMode: { enabled: !1, momentum: !0, momentumRatio: 1, momentumBounce: !0, momentumBounceRatio: 1, momentumVelocityRatio: 1, sticky: !1, minimumVelocity: .02 } }), Object.assign(t, { freeMode: { onTouchStart: function () { const e = t.getTranslate(); t.setTranslate(e), t.setTransition(0), t.touchEventsData.velocities.length = 0, t.freeMode.onTouchEnd({ currentPos: t.rtl ? t.translate : -t.translate }) }, onTouchMove: function () { const { touchEventsData: e, touches: s } = t; 0 === e.velocities.length && e.velocities.push({ position: s[t.isHorizontal() ? "startX" : "startY"], time: e.touchStartTime }), e.velocities.push({ position: s[t.isHorizontal() ? "currentX" : "currentY"], time: u() }) }, onTouchEnd: function (e) { let { currentPos: s } = e; const { params: r, $wrapperEl: n, rtlTranslate: l, snapGrid: o, touchEventsData: d } = t, c = u() - d.touchStartTime; if (s < -t.minTranslate()) t.slideTo(t.activeIndex); else if (s > -t.maxTranslate()) t.slides.length < o.length ? t.slideTo(o.length - 1) : t.slideTo(t.slides.length - 1); else { if (r.freeMode.momentum) { if (d.velocities.length > 1) { const e = d.velocities.pop(), s = d.velocities.pop(), a = e.position - s.position, i = e.time - s.time; t.velocity = a / i, t.velocity /= 2, Math.abs(t.velocity) < r.freeMode.minimumVelocity && (t.velocity = 0), (i > 150 || u() - e.time > 300) && (t.velocity = 0) } else t.velocity = 0; t.velocity *= r.freeMode.momentumVelocityRatio, d.velocities.length = 0; let e = 1e3 * r.freeMode.momentumRatio; const s = t.velocity * e; let c = t.translate + s; l && (c = -c); let p, h = !1; const m = 20 * Math.abs(t.velocity) * r.freeMode.momentumBounceRatio; let f; if (c < t.maxTranslate()) r.freeMode.momentumBounce ? (c + t.maxTranslate() < -m && (c = t.maxTranslate() - m), p = t.maxTranslate(), h = !0, d.allowMomentumBounce = !0) : c = t.maxTranslate(), r.loop && r.centeredSlides && (f = !0); else if (c > t.minTranslate()) r.freeMode.momentumBounce ? (c - t.minTranslate() > m && (c = t.minTranslate() + m), p = t.minTranslate(), h = !0, d.allowMomentumBounce = !0) : c = t.minTranslate(), r.loop && r.centeredSlides && (f = !0); else if (r.freeMode.sticky) { let e; for (let t = 0; t < o.length; t += 1)if (o[t] > -c) { e = t; break } c = Math.abs(o[e] - c) < Math.abs(o[e - 1] - c) || "next" === t.swipeDirection ? o[e] : o[e - 1], c = -c } if (f && i("transitionEnd", (() => { t.loopFix() })), 0 !== t.velocity) { if (e = l ? Math.abs((-c - t.translate) / t.velocity) : Math.abs((c - t.translate) / t.velocity), r.freeMode.sticky) { const s = Math.abs((l ? -c : c) - t.translate), a = t.slidesSizesGrid[t.activeIndex]; e = s < a ? r.speed : s < 2 * a ? 1.5 * r.speed : 2.5 * r.speed } } else if (r.freeMode.sticky) return void t.slideToClosest(); r.freeMode.momentumBounce && h ? (t.updateProgress(p), t.setTransition(e), t.setTranslate(c), t.transitionStart(!0, t.swipeDirection), t.animating = !0, n.transitionEnd((() => { t && !t.destroyed && d.allowMomentumBounce && (a("momentumBounce"), t.setTransition(r.speed), setTimeout((() => { t.setTranslate(p), n.transitionEnd((() => { t && !t.destroyed && t.transitionEnd() })) }), 0)) }))) : t.velocity ? (a("_freeModeNoMomentumRelease"), t.updateProgress(c), t.setTransition(e), t.setTranslate(c), t.transitionStart(!0, t.swipeDirection), t.animating || (t.animating = !0, n.transitionEnd((() => { t && !t.destroyed && t.transitionEnd() })))) : t.updateProgress(c), t.updateActiveIndex(), t.updateSlidesClasses() } else { if (r.freeMode.sticky) return void t.slideToClosest(); r.freeMode && a("_freeModeNoMomentumRelease") } (!r.freeMode.momentum || c >= r.longSwipesMs) && (t.updateProgress(), t.updateActiveIndex(), t.updateSlidesClasses()) } } } }) }, function (e) { let t, s, a, { swiper: i, extendParams: r } = e; r({ grid: { rows: 1, fill: "column" } }), i.grid = { initSlides: e => { const { slidesPerView: r } = i.params, { rows: n, fill: l } = i.params.grid; s = t / n, a = Math.floor(e / n), t = Math.floor(e / n) === e / n ? e : Math.ceil(e / n) * n, "auto" !== r && "row" === l && (t = Math.max(t, r * n)) }, updateSlide: (e, r, n, l) => { const { slidesPerGroup: o, spaceBetween: d } = i.params, { rows: c, fill: p } = i.params.grid; let u, h, m; if ("row" === p && o > 1) { const s = Math.floor(e / (o * c)), a = e - c * o * s, i = 0 === s ? o : Math.min(Math.ceil((n - s * c * o) / c), o); m = Math.floor(a / i), h = a - m * i + s * o, u = h + m * t / c, r.css({ "-webkit-order": u, order: u }) } else "column" === p ? (h = Math.floor(e / c), m = e - h * c, (h > a || h === a && m === c - 1) && (m += 1, m >= c && (m = 0, h += 1))) : (m = Math.floor(e / s), h = e - m * s); r.css(l("margin-top"), 0 !== m ? d && `${d}px` : "") }, updateWrapperSize: (e, s, a) => { const { spaceBetween: r, centeredSlides: n, roundLengths: l } = i.params, { rows: o } = i.params.grid; if (i.virtualSize = (e + r) * t, i.virtualSize = Math.ceil(i.virtualSize / o) - r, i.$wrapperEl.css({ [a("width")]: `${i.virtualSize + r}px` }), n) { s.splice(0, s.length); const e = []; for (let t = 0; t < s.length; t += 1) { let a = s[t]; l && (a = Math.floor(a)), s[t] < i.virtualSize + s[0] && e.push(a) } s.push(...e) } } } }, function (e) { let { swiper: t } = e; Object.assign(t, { appendSlide: K.bind(t), prependSlide: Z.bind(t), addSlide: Q.bind(t), removeSlide: J.bind(t), removeAllSlides: ee.bind(t) }) }, function (e) { let { swiper: t, extendParams: s, on: a } = e; s({ fadeEffect: { crossFade: !1, transformEl: null } }), te({ effect: "fade", swiper: t, on: a, setTranslate: () => { const { slides: e } = t, s = t.params.fadeEffect; for (let a = 0; a < e.length; a += 1) { const e = t.slides.eq(a); let i = -e[0].swiperSlideOffset; t.params.virtualTranslate || (i -= t.translate); let r = 0; t.isHorizontal() || (r = i, i = 0); const n = t.params.fadeEffect.crossFade ? Math.max(1 - Math.abs(e[0].progress), 0) : 1 + Math.min(Math.max(e[0].progress, -1), 0); se(s, e).css({ opacity: n }).transform(`translate3d(${i}px, ${r}px, 0px)`) } }, setTransition: e => { const { transformEl: s } = t.params.fadeEffect; (s ? t.slides.find(s) : t.slides).transition(e), ae({ swiper: t, duration: e, transformEl: s, allSlides: !0 }) }, overwriteParams: () => ({ slidesPerView: 1, slidesPerGroup: 1, watchSlidesProgress: !0, spaceBetween: 0, virtualTranslate: !t.params.cssMode }) }) }, function (e) { let { swiper: t, extendParams: s, on: a } = e; s({ cubeEffect: { slideShadows: !0, shadow: !0, shadowOffset: 20, shadowScale: .94 } }); const i = (e, t, s) => { let a = s ? e.find(".swiper-slide-shadow-left") : e.find(".swiper-slide-shadow-top"), i = s ? e.find(".swiper-slide-shadow-right") : e.find(".swiper-slide-shadow-bottom"); 0 === a.length && (a = d(`<div class="swiper-slide-shadow-${s ? "left" : "top"}"></div>`), e.append(a)), 0 === i.length && (i = d(`<div class="swiper-slide-shadow-${s ? "right" : "bottom"}"></div>`), e.append(i)), a.length && (a[0].style.opacity = Math.max(-t, 0)), i.length && (i[0].style.opacity = Math.max(t, 0)) }; te({ effect: "cube", swiper: t, on: a, setTranslate: () => { const { $el: e, $wrapperEl: s, slides: a, width: r, height: n, rtlTranslate: l, size: o, browser: c } = t, p = t.params.cubeEffect, u = t.isHorizontal(), h = t.virtual && t.params.virtual.enabled; let m, f = 0; p.shadow && (u ? (m = s.find(".swiper-cube-shadow"), 0 === m.length && (m = d('<div class="swiper-cube-shadow"></div>'), s.append(m)), m.css({ height: `${r}px` })) : (m = e.find(".swiper-cube-shadow"), 0 === m.length && (m = d('<div class="swiper-cube-shadow"></div>'), e.append(m)))); for (let e = 0; e < a.length; e += 1) { const t = a.eq(e); let s = e; h && (s = parseInt(t.attr("data-swiper-slide-index"), 10)); let r = 90 * s, n = Math.floor(r / 360); l && (r = -r, n = Math.floor(-r / 360)); const d = Math.max(Math.min(t[0].progress, 1), -1); let c = 0, m = 0, g = 0; s % 4 == 0 ? (c = 4 * -n * o, g = 0) : (s - 1) % 4 == 0 ? (c = 0, g = 4 * -n * o) : (s - 2) % 4 == 0 ? (c = o + 4 * n * o, g = o) : (s - 3) % 4 == 0 && (c = -o, g = 3 * o + 4 * o * n), l && (c = -c), u || (m = c, c = 0); const v = `rotateX(${u ? 0 : -r}deg) rotateY(${u ? r : 0}deg) translate3d(${c}px, ${m}px, ${g}px)`; d <= 1 && d > -1 && (f = 90 * s + 90 * d, l && (f = 90 * -s - 90 * d)), t.transform(v), p.slideShadows && i(t, d, u) } if (s.css({ "-webkit-transform-origin": `50% 50% -${o / 2}px`, "transform-origin": `50% 50% -${o / 2}px` }), p.shadow) if (u) m.transform(`translate3d(0px, ${r / 2 + p.shadowOffset}px, ${-r / 2}px) rotateX(90deg) rotateZ(0deg) scale(${p.shadowScale})`); else { const e = Math.abs(f) - 90 * Math.floor(Math.abs(f) / 90), t = 1.5 - (Math.sin(2 * e * Math.PI / 360) / 2 + Math.cos(2 * e * Math.PI / 360) / 2), s = p.shadowScale, a = p.shadowScale / t, i = p.shadowOffset; m.transform(`scale3d(${s}, 1, ${a}) translate3d(0px, ${n / 2 + i}px, ${-n / 2 / a}px) rotateX(-90deg)`) } const g = c.isSafari || c.isWebView ? -o / 2 : 0; s.transform(`translate3d(0px,0,${g}px) rotateX(${t.isHorizontal() ? 0 : f}deg) rotateY(${t.isHorizontal() ? -f : 0}deg)`), s[0].style.setProperty("--swiper-cube-translate-z", `${g}px`) }, setTransition: e => { const { $el: s, slides: a } = t; a.transition(e).find(".swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left").transition(e), t.params.cubeEffect.shadow && !t.isHorizontal() && s.find(".swiper-cube-shadow").transition(e) }, recreateShadows: () => { const e = t.isHorizontal(); t.slides.each((t => { const s = Math.max(Math.min(t.progress, 1), -1); i(d(t), s, e) })) }, getEffectParams: () => t.params.cubeEffect, perspective: () => !0, overwriteParams: () => ({ slidesPerView: 1, slidesPerGroup: 1, watchSlidesProgress: !0, resistanceRatio: 0, spaceBetween: 0, centeredSlides: !1, virtualTranslate: !0 }) }) }, function (e) { let { swiper: t, extendParams: s, on: a } = e; s({ flipEffect: { slideShadows: !0, limitRotation: !0, transformEl: null } }); const i = (e, s, a) => { let i = t.isHorizontal() ? e.find(".swiper-slide-shadow-left") : e.find(".swiper-slide-shadow-top"), r = t.isHorizontal() ? e.find(".swiper-slide-shadow-right") : e.find(".swiper-slide-shadow-bottom"); 0 === i.length && (i = ie(a, e, t.isHorizontal() ? "left" : "top")), 0 === r.length && (r = ie(a, e, t.isHorizontal() ? "right" : "bottom")), i.length && (i[0].style.opacity = Math.max(-s, 0)), r.length && (r[0].style.opacity = Math.max(s, 0)) }; te({ effect: "flip", swiper: t, on: a, setTranslate: () => { const { slides: e, rtlTranslate: s } = t, a = t.params.flipEffect; for (let r = 0; r < e.length; r += 1) { const n = e.eq(r); let l = n[0].progress; t.params.flipEffect.limitRotation && (l = Math.max(Math.min(n[0].progress, 1), -1)); const o = n[0].swiperSlideOffset; let d = -180 * l, c = 0, p = t.params.cssMode ? -o - t.translate : -o, u = 0; t.isHorizontal() ? s && (d = -d) : (u = p, p = 0, c = -d, d = 0), n[0].style.zIndex = -Math.abs(Math.round(l)) + e.length, a.slideShadows && i(n, l, a); const h = `translate3d(${p}px, ${u}px, 0px) rotateX(${c}deg) rotateY(${d}deg)`; se(a, n).transform(h) } }, setTransition: e => { const { transformEl: s } = t.params.flipEffect; (s ? t.slides.find(s) : t.slides).transition(e).find(".swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left").transition(e), ae({ swiper: t, duration: e, transformEl: s }) }, recreateShadows: () => { const e = t.params.flipEffect; t.slides.each((s => { const a = d(s); let r = a[0].progress; t.params.flipEffect.limitRotation && (r = Math.max(Math.min(s.progress, 1), -1)), i(a, r, e) })) }, getEffectParams: () => t.params.flipEffect, perspective: () => !0, overwriteParams: () => ({ slidesPerView: 1, slidesPerGroup: 1, watchSlidesProgress: !0, spaceBetween: 0, virtualTranslate: !t.params.cssMode }) }) }, function (e) { let { swiper: t, extendParams: s, on: a } = e; s({ coverflowEffect: { rotate: 50, stretch: 0, depth: 100, scale: 1, modifier: 1, slideShadows: !0, transformEl: null } }), te({ effect: "coverflow", swiper: t, on: a, setTranslate: () => { const { width: e, height: s, slides: a, slidesSizesGrid: i } = t, r = t.params.coverflowEffect, n = t.isHorizontal(), l = t.translate, o = n ? e / 2 - l : s / 2 - l, d = n ? r.rotate : -r.rotate, c = r.depth; for (let e = 0, t = a.length; e < t; e += 1) { const t = a.eq(e), s = i[e], l = (o - t[0].swiperSlideOffset - s / 2) / s, p = "function" == typeof r.modifier ? r.modifier(l) : l * r.modifier; let u = n ? d * p : 0, h = n ? 0 : d * p, m = -c * Math.abs(p), f = r.stretch; "string" == typeof f && -1 !== f.indexOf("%") && (f = parseFloat(r.stretch) / 100 * s); let g = n ? 0 : f * p, v = n ? f * p : 0, w = 1 - (1 - r.scale) * Math.abs(p); Math.abs(v) < .001 && (v = 0), Math.abs(g) < .001 && (g = 0), Math.abs(m) < .001 && (m = 0), Math.abs(u) < .001 && (u = 0), Math.abs(h) < .001 && (h = 0), Math.abs(w) < .001 && (w = 0); const b = `translate3d(${v}px,${g}px,${m}px)  rotateX(${h}deg) rotateY(${u}deg) scale(${w})`; if (se(r, t).transform(b), t[0].style.zIndex = 1 - Math.abs(Math.round(p)), r.slideShadows) { let e = n ? t.find(".swiper-slide-shadow-left") : t.find(".swiper-slide-shadow-top"), s = n ? t.find(".swiper-slide-shadow-right") : t.find(".swiper-slide-shadow-bottom"); 0 === e.length && (e = ie(r, t, n ? "left" : "top")), 0 === s.length && (s = ie(r, t, n ? "right" : "bottom")), e.length && (e[0].style.opacity = p > 0 ? p : 0), s.length && (s[0].style.opacity = -p > 0 ? -p : 0) } } }, setTransition: e => { const { transformEl: s } = t.params.coverflowEffect; (s ? t.slides.find(s) : t.slides).transition(e).find(".swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left").transition(e) }, perspective: () => !0, overwriteParams: () => ({ watchSlidesProgress: !0 }) }) }, function (e) { let { swiper: t, extendParams: s, on: a } = e; s({ creativeEffect: { transformEl: null, limitProgress: 1, shadowPerProgress: !1, progressMultiplier: 1, perspective: !0, prev: { translate: [0, 0, 0], rotate: [0, 0, 0], opacity: 1, scale: 1 }, next: { translate: [0, 0, 0], rotate: [0, 0, 0], opacity: 1, scale: 1 } } }); const i = e => "string" == typeof e ? e : `${e}px`; te({ effect: "creative", swiper: t, on: a, setTranslate: () => { const { slides: e, $wrapperEl: s, slidesSizesGrid: a } = t, r = t.params.creativeEffect, { progressMultiplier: n } = r, l = t.params.centeredSlides; if (l) { const e = a[0] / 2 - t.params.slidesOffsetBefore || 0; s.transform(`translateX(calc(50% - ${e}px))`) } for (let s = 0; s < e.length; s += 1) { const a = e.eq(s), o = a[0].progress, d = Math.min(Math.max(a[0].progress, -r.limitProgress), r.limitProgress); let c = d; l || (c = Math.min(Math.max(a[0].originalProgress, -r.limitProgress), r.limitProgress)); const p = a[0].swiperSlideOffset, u = [t.params.cssMode ? -p - t.translate : -p, 0, 0], h = [0, 0, 0]; let m = !1; t.isHorizontal() || (u[1] = u[0], u[0] = 0); let f = { translate: [0, 0, 0], rotate: [0, 0, 0], scale: 1, opacity: 1 }; d < 0 ? (f = r.next, m = !0) : d > 0 && (f = r.prev, m = !0), u.forEach(((e, t) => { u[t] = `calc(${e}px + (${i(f.translate[t])} * ${Math.abs(d * n)}))` })), h.forEach(((e, t) => { h[t] = f.rotate[t] * Math.abs(d * n) })), a[0].style.zIndex = -Math.abs(Math.round(o)) + e.length; const g = u.join(", "), v = `rotateX(${h[0]}deg) rotateY(${h[1]}deg) rotateZ(${h[2]}deg)`, w = c < 0 ? `scale(${1 + (1 - f.scale) * c * n})` : `scale(${1 - (1 - f.scale) * c * n})`, b = c < 0 ? 1 + (1 - f.opacity) * c * n : 1 - (1 - f.opacity) * c * n, x = `translate3d(${g}) ${v} ${w}`; if (m && f.shadow || !m) { let e = a.children(".swiper-slide-shadow"); if (0 === e.length && f.shadow && (e = ie(r, a)), e.length) { const t = r.shadowPerProgress ? d * (1 / r.limitProgress) : d; e[0].style.opacity = Math.min(Math.max(Math.abs(t), 0), 1) } } const y = se(r, a); y.transform(x).css({ opacity: b }), f.origin && y.css("transform-origin", f.origin) } }, setTransition: e => { const { transformEl: s } = t.params.creativeEffect; (s ? t.slides.find(s) : t.slides).transition(e).find(".swiper-slide-shadow").transition(e), ae({ swiper: t, duration: e, transformEl: s, allSlides: !0 }) }, perspective: () => t.params.creativeEffect.perspective, overwriteParams: () => ({ watchSlidesProgress: !0, virtualTranslate: !t.params.cssMode }) }) }, function (e) { let { swiper: t, extendParams: s, on: a } = e; s({ cardsEffect: { slideShadows: !0, transformEl: null, rotate: !0, perSlideRotate: 2, perSlideOffset: 8 } }), te({ effect: "cards", swiper: t, on: a, setTranslate: () => { const { slides: e, activeIndex: s } = t, a = t.params.cardsEffect, { startTranslate: i, isTouched: r } = t.touchEventsData, n = t.translate; for (let l = 0; l < e.length; l += 1) { const o = e.eq(l), d = o[0].progress, c = Math.min(Math.max(d, -4), 4); let p = o[0].swiperSlideOffset; t.params.centeredSlides && !t.params.cssMode && t.$wrapperEl.transform(`translateX(${t.minTranslate()}px)`), t.params.centeredSlides && t.params.cssMode && (p -= e[0].swiperSlideOffset); let u = t.params.cssMode ? -p - t.translate : -p, h = 0; const m = -100 * Math.abs(c); let f = 1, g = -a.perSlideRotate * c, v = a.perSlideOffset - .75 * Math.abs(c); const w = t.virtual && t.params.virtual.enabled ? t.virtual.from + l : l, b = (w === s || w === s - 1) && c > 0 && c < 1 && (r || t.params.cssMode) && n < i, x = (w === s || w === s + 1) && c < 0 && c > -1 && (r || t.params.cssMode) && n > i; if (b || x) { const e = (1 - Math.abs((Math.abs(c) - .5) / .5)) ** .5; g += -28 * c * e, f += -.5 * e, v += 96 * e, h = -25 * e * Math.abs(c) + "%" } if (u = c < 0 ? `calc(${u}px + (${v * Math.abs(c)}%))` : c > 0 ? `calc(${u}px + (-${v * Math.abs(c)}%))` : `${u}px`, !t.isHorizontal()) { const e = h; h = u, u = e } const y = c < 0 ? "" + (1 + (1 - f) * c) : "" + (1 - (1 - f) * c), E = `\n        translate3d(${u}, ${h}, ${m}px)\n        rotateZ(${a.rotate ? g : 0}deg)\n        scale(${y})\n      `; if (a.slideShadows) { let e = o.find(".swiper-slide-shadow"); 0 === e.length && (e = ie(a, o)), e.length && (e[0].style.opacity = Math.min(Math.max((Math.abs(c) - .5) / .5, 0), 1)) } o[0].style.zIndex = -Math.abs(Math.round(d)) + e.length; se(a, o).transform(E) } }, setTransition: e => { const { transformEl: s } = t.params.cardsEffect; (s ? t.slides.find(s) : t.slides).transition(e).find(".swiper-slide-shadow").transition(e), ae({ swiper: t, duration: e, transformEl: s }) }, perspective: () => !0, overwriteParams: () => ({ watchSlidesProgress: !0, virtualTranslate: !t.params.cssMode }) }) }]; return V.use(re), V }));
+//# sourceMappingURL=swiper-bundle.min.js.map
+
+/**
+ * LAZY LOADING
+ */
+
+function _extends() { return (_extends = Object.assign || function (t) { for (var e = 1; e < arguments.length; e++) { var n = arguments[e]; for (var o in n) Object.prototype.hasOwnProperty.call(n, o) && (t[o] = n[o]) } return t }).apply(this, arguments) } function _typeof(t) { return (_typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (t) { return typeof t } : function (t) { return t && "function" == typeof Symbol && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t })(t) } !function (t, e) { "object" === ("undefined" == typeof exports ? "undefined" : _typeof(exports)) && "undefined" != typeof module ? module.exports = e() : "function" == typeof define && define.amd ? define(e) : t.LazyLoad = e() }(this, function () { "use strict"; var t = "undefined" != typeof window, e = t && !("onscroll" in window) || "undefined" != typeof navigator && /(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent), n = t && "IntersectionObserver" in window, o = t && "classList" in document.createElement("p"), r = { elements_selector: "img", container: e || t ? document : null, threshold: 300, thresholds: null, data_src: "src", data_srcset: "srcset", data_sizes: "sizes", data_bg: "bg", class_loading: "loading", class_loaded: "loaded", class_error: "error", load_delay: 0, auto_unobserve: !0, callback_enter: null, callback_exit: null, callback_reveal: null, callback_loaded: null, callback_error: null, callback_finish: null }, a = function (t, e) { return t.getAttribute("data-" + e) }, s = function (t, e, n) { var o = "data-" + e; null !== n ? t.setAttribute(o, n) : t.removeAttribute(o) }, i = function (t) { return "true" === a(t, "was-processed") }, c = function (t, e) { return s(t, "ll-timeout", e) }, l = function (t) { return a(t, "ll-timeout") }, u = function (t, e) { var n, o = new t(e); try { n = new CustomEvent("LazyLoad::Initialized", { detail: { instance: o } }) } catch (t) { (n = document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized", !1, !1, { instance: o }) } window.dispatchEvent(n) }; var d = function (t, e) { t && t(e) }, f = function (t, e) { t._loadingCount += e, 0 === t._elements.length && 0 === t._loadingCount && d(t._settings.callback_finish) }, _ = function (t) { for (var e, n = [], o = 0; e = t.children[o]; o += 1)"SOURCE" === e.tagName && n.push(e); return n }, v = function (t, e, n) { n && t.setAttribute(e, n) }, b = function (t, e) { v(t, "sizes", a(t, e.data_sizes)), v(t, "srcset", a(t, e.data_srcset)), v(t, "src", a(t, e.data_src)) }, g = { IMG: function (t, e) { var n = t.parentNode; n && "PICTURE" === n.tagName && _(n).forEach(function (t) { b(t, e) }); b(t, e) }, IFRAME: function (t, e) { v(t, "src", a(t, e.data_src)) }, VIDEO: function (t, e) { _(t).forEach(function (t) { v(t, "src", a(t, e.data_src)) }), v(t, "src", a(t, e.data_src)), t.load() } }, m = function (t, e) { var n, o, r = e._settings, s = t.tagName, i = g[s]; if (i) return i(t, r), f(e, 1), void (e._elements = (n = e._elements, o = t, n.filter(function (t) { return t !== o }))); !function (t, e) { var n = a(t, e.data_src), o = a(t, e.data_bg); n && (t.style.backgroundImage = 'url("'.concat(n, '")')), o && (t.style.backgroundImage = o) }(t, r) }, h = function (t, e) { o ? t.classList.add(e) : t.className += (t.className ? " " : "") + e }, p = function (t, e, n) { t.addEventListener(e, n) }, y = function (t, e, n) { t.removeEventListener(e, n) }, E = function (t, e, n) { y(t, "load", e), y(t, "loadeddata", e), y(t, "error", n) }, w = function (t, e, n) { var r = n._settings, a = e ? r.class_loaded : r.class_error, s = e ? r.callback_loaded : r.callback_error, i = t.target; !function (t, e) { o ? t.classList.remove(e) : t.className = t.className.replace(new RegExp("(^|\\s+)" + e + "(\\s+|$)"), " ").replace(/^\s+/, "").replace(/\s+$/, "") }(i, r.class_loading), h(i, a), d(s, i), f(n, -1) }, k = function (t, e) { var n = function n(r) { w(r, !0, e), E(t, n, o) }, o = function o(r) { w(r, !1, e), E(t, n, o) }; !function (t, e, n) { p(t, "load", e), p(t, "loadeddata", e), p(t, "error", n) }(t, n, o) }, I = ["IMG", "IFRAME", "VIDEO"], L = function (t, e) { var n = e._observer; z(t, e), n && e._settings.auto_unobserve && n.unobserve(t) }, x = function (t) { var e = l(t); e && (clearTimeout(e), c(t, null)) }, A = function (t, e) { var n = e._settings.load_delay, o = l(t); o || (o = setTimeout(function () { L(t, e), x(t) }, n), c(t, o)) }, z = function (t, e, n) { var o = e._settings; !n && i(t) || (I.indexOf(t.tagName) > -1 && (k(t, e), h(t, o.class_loading)), m(t, e), function (t) { s(t, "was-processed", "true") }(t), d(o.callback_reveal, t), d(o.callback_set, t)) }, O = function (t) { return !!n && (t._observer = new IntersectionObserver(function (e) { e.forEach(function (e) { return function (t) { return t.isIntersecting || t.intersectionRatio > 0 }(e) ? function (t, e) { var n = e._settings; d(n.callback_enter, t), n.load_delay ? A(t, e) : L(t, e) }(e.target, t) : function (t, e) { var n = e._settings; d(n.callback_exit, t), n.load_delay && x(t) }(e.target, t) }) }, { root: (e = t._settings).container === document ? null : e.container, rootMargin: e.thresholds || e.threshold + "px" }), !0); var e }, N = function (t, e) { this._settings = function (t) { return _extends({}, r, t) }(t), this._loadingCount = 0, O(this), this.update(e) }; return N.prototype = { update: function (t) { var n = this, o = this._settings, r = t || o.container.querySelectorAll(o.elements_selector); this._elements = function (t) { return t.filter(function (t) { return !i(t) }) }(Array.prototype.slice.call(r)), !e && this._observer ? this._elements.forEach(function (t) { n._observer.observe(t) }) : this.loadAll() }, destroy: function () { var t = this; this._observer && (this._elements.forEach(function (e) { t._observer.unobserve(e) }), this._observer = null), this._elements = null, this._settings = null }, load: function (t, e) { z(t, this, e) }, loadAll: function () { var t = this; this._elements.forEach(function (e) { L(e, t) }) } }, t && function (t, e) { if (e) if (e.length) for (var n, o = 0; n = e[o]; o += 1)u(t, n); else u(t, e) }(N, window.lazyLoadOptions), N });
+//# sourceMappingURL=lazyload.min.js.map
+
+/*!
+ * jQuery mmenu v7.2.2
+ * @requires jQuery 1.7.0 or later
+ *
+ * mmenu.frebsite.nl
+ *
+ * Copyright (c) Fred Heusschen
+ * www.frebsite.nl
+ *
+ * License: CC-BY-NC-4.0
+ * http://creativecommons.org/licenses/by-nc/4.0/
+ */
+!function (h) { var n, p, o, a, t, f = "mmenu", e = "7.2.2"; h[f] && h[f].version > e || (h[f] = function (t, e, n) { return this.$menu = t, this._api = ["bind", "getInstance", "initPanels", "openPanel", "closePanel", "closeAllPanels", "setSelected"], this.opts = e, this.conf = n, this.vars = {}, this.cbck = {}, this.mtch = {}, "function" == typeof this.___deprecated && this.___deprecated(), this._initWrappers(), this._initAddons(), this._initExtensions(), this._initHooks(), this._initMenu(), this._initPanels(), this._initOpened(), this._initAnchors(), this._initMatchMedia(), "function" == typeof this.___debug && this.___debug(), this }, h[f].version = e, h[f].uniqueId = 0, h[f].wrappers = {}, h[f].addons = {}, h[f].defaults = { hooks: {}, extensions: [], wrappers: [], navbar: { add: !0, title: "Menu", titleLink: "parent" }, onClick: { setSelected: !0 }, slidingSubmenus: !0 }, h[f].configuration = { classNames: { divider: "Divider", inset: "Inset", nolistview: "NoListview", nopanel: "NoPanel", panel: "Panel", selected: "Selected", spacer: "Spacer", vertical: "Vertical" }, clone: !1, language: null, openingInterval: 25, panelNodetype: "ul, ol, div", transitionDuration: 400 }, h[f].prototype = { getInstance: function () { return this }, initPanels: function (t) { this._initPanels(t) }, openPanel: function (t, e) { if (this.trigger("openPanel:before", t), t && t.length && (t.is("." + p.panel) || (t = t.closest("." + p.panel)), t.is("." + p.panel))) { var n = this; if ("boolean" != typeof e && (e = !0), t.parent("." + p.listitem + "_vertical").length) t.parents("." + p.listitem + "_vertical").addClass(p.listitem + "_opened").children("." + p.panel).removeClass(p.hidden), this.openPanel(t.parents("." + p.panel).not(function () { return h(this).parent("." + p.listitem + "_vertical").length }).first()), this.trigger("openPanel:start", t), this.trigger("openPanel:finish", t); else { if (t.hasClass(p.panel + "_opened")) return; var i = this.$pnls.children("." + p.panel), s = this.$pnls.children("." + p.panel + "_opened"); if (!h[f].support.csstransitions) return s.addClass(p.hidden).removeClass(p.panel + "_opened"), t.removeClass(p.hidden).addClass(p.panel + "_opened"), this.trigger("openPanel:start", t), void this.trigger("openPanel:finish", t); i.not(t).removeClass(p.panel + "_opened-parent"); for (var a = t.data(o.parent); a;)(a = a.closest("." + p.panel)).parent("." + p.listitem + "_vertical").length || a.addClass(p.panel + "_opened-parent"), a = a.data(o.parent); i.removeClass(p.panel + "_highest").not(s).not(t).addClass(p.hidden), t.removeClass(p.hidden); var r = function () { s.removeClass(p.panel + "_opened"), t.addClass(p.panel + "_opened"), t.hasClass(p.panel + "_opened-parent") ? (s.addClass(p.panel + "_highest"), t.removeClass(p.panel + "_opened-parent")) : (s.addClass(p.panel + "_opened-parent"), t.addClass(p.panel + "_highest")), n.trigger("openPanel:start", t) }, l = function () { s.removeClass(p.panel + "_highest").addClass(p.hidden), t.removeClass(p.panel + "_highest"), n.trigger("openPanel:finish", t) }; e && !t.hasClass(p.panel + "_noanimation") ? setTimeout(function () { n.__transitionend(t, function () { l() }, n.conf.transitionDuration), r() }, n.conf.openingInterval) : (r(), l()) } this.trigger("openPanel:after", t) } }, closePanel: function (t) { this.trigger("closePanel:before", t); var e = t.parent(); e.hasClass(p.listitem + "_vertical") && (e.removeClass(p.listitem + "_opened"), t.addClass(p.hidden), this.trigger("closePanel", t)), this.trigger("closePanel:after", t) }, closeAllPanels: function (t) { this.trigger("closeAllPanels:before"), this.$pnls.find("." + p.listview).children().removeClass(p.listitem + "_selected").filter("." + p.listitem + "_vertical").removeClass(p.listitem + "_opened"); var e = this.$pnls.children("." + p.panel), n = t && t.length ? t : e.first(); this.$pnls.children("." + p.panel).not(n).removeClass(p.panel + "_opened").removeClass(p.panel + "_opened-parent").removeClass(p.panel + "_highest").addClass(p.hidden), this.openPanel(n, !1), this.trigger("closeAllPanels:after") }, togglePanel: function (t) { var e = t.parent(); e.hasClass(p.listitem + "_vertical") && this[e.hasClass(p.listitem + "_opened") ? "closePanel" : "openPanel"](t) }, setSelected: function (t) { this.trigger("setSelected:before", t), this.$menu.find("." + p.listitem + "_selected").removeClass(p.listitem + "_selected"), t.addClass(p.listitem + "_selected"), this.trigger("setSelected:after", t) }, bind: function (t, e) { this.cbck[t] = this.cbck[t] || [], this.cbck[t].push(e) }, trigger: function () { var t = Array.prototype.slice.call(arguments), e = t.shift(); if (this.cbck[e]) for (var n = 0, i = this.cbck[e].length; n < i; n++)this.cbck[e][n].apply(this, t) }, matchMedia: function (t, e, n) { var i = { yes: e, no: n }; this.mtch[t] = this.mtch[t] || [], this.mtch[t].push(i) }, i18n: function (t) { return h[f].i18n(t, this.conf.language) }, _initHooks: function () { for (var t in this.opts.hooks) this.bind(t, this.opts.hooks[t]) }, _initWrappers: function () { this.trigger("initWrappers:before"); for (var t = 0; t < this.opts.wrappers.length; t++) { var e = h[f].wrappers[this.opts.wrappers[t]]; "function" == typeof e && e.call(this) } this.trigger("initWrappers:after") }, _initAddons: function () { var t; for (t in this.trigger("initAddons:before"), h[f].addons) h[f].addons[t].add.call(this), h[f].addons[t].add = function () { }; for (t in h[f].addons) h[f].addons[t].setup.call(this); this.trigger("initAddons:after") }, _initExtensions: function () { this.trigger("initExtensions:before"); var e = this; for (var t in this.opts.extensions.constructor === Array && (this.opts.extensions = { all: this.opts.extensions }), this.opts.extensions) this.opts.extensions[t] = this.opts.extensions[t].length ? p.menu + "_" + this.opts.extensions[t].join(" " + p.menu + "_") : "", this.opts.extensions[t] && function (t) { e.matchMedia(t, function () { this.$menu.addClass(this.opts.extensions[t]) }, function () { this.$menu.removeClass(this.opts.extensions[t]) }) }(t); this.trigger("initExtensions:after") }, _initMenu: function () { this.trigger("initMenu:before"); this.conf.clone && (this.$orig = this.$menu, this.$menu = this.$orig.clone(), this.$menu.add(this.$menu.find("[id]")).filter("[id]").each(function () { h(this).attr("id", p.mm(h(this).attr("id"))) })), this.$menu.attr("id", this.$menu.attr("id") || this.__getUniqueId()), this.$pnls = h('<div class="' + p.panels + '" />').append(this.$menu.children(this.conf.panelNodetype)).prependTo(this.$menu), this.$menu.addClass(p.menu).parent().addClass(p.wrapper), this.trigger("initMenu:after") }, _initPanels: function (t) { this.trigger("initPanels:before", t), t = t || this.$pnls.children(this.conf.panelNodetype); var i = h(), s = this, a = function (t) { t.filter(s.conf.panelNodetype).each(function (t) { var e = s._initPanel(h(this)); if (e) { s._initNavbar(e), s._initListview(e), i = i.add(e); var n = e.children("." + p.listview).children("li").children(s.conf.panelNodetype).add(e.children("." + s.conf.classNames.panel)); n.length && a(n) } }) }; a(t), this.trigger("initPanels:after", i) }, _initPanel: function (t) { this.trigger("initPanel:before", t); if (t.hasClass(p.panel)) return t; if (this.__refactorClass(t, this.conf.classNames.panel, p.panel), this.__refactorClass(t, this.conf.classNames.nopanel, p.nopanel), this.__refactorClass(t, this.conf.classNames.inset, p.listview + "_inset"), t.filter("." + p.listview + "_inset").addClass(p.nopanel), t.hasClass(p.nopanel)) return !1; var e = t.hasClass(this.conf.classNames.vertical) || !this.opts.slidingSubmenus; t.removeClass(this.conf.classNames.vertical); var n = t.attr("id") || this.__getUniqueId(); t.is("ul, ol") && (t.removeAttr("id"), t.wrap("<div />"), t = t.parent()), t.attr("id", n), t.addClass(p.panel + " " + p.hidden); var i = t.parent("li"); return e ? i.addClass(p.listitem + "_vertical") : t.appendTo(this.$pnls), i.length && (i.data(o.child, t), t.data(o.parent, i)), this.trigger("initPanel:after", t), t }, _initNavbar: function (t) { if (this.trigger("initNavbar:before", t), !t.children("." + p.navbar).length) { var e = t.data(o.parent), n = h('<div class="' + p.navbar + '" />'), i = this.__getPanelTitle(t, this.opts.navbar.title), s = ""; if (e && e.length) { if (e.hasClass(p.listitem + "_vertical")) return; if (e.parent().is("." + p.listview)) var a = e.children("a, span").not("." + p.btn + "_next"); else a = e.closest("." + p.panel).find('a[href="#' + t.attr("id") + '"]'); var r = (e = (a = a.first()).closest("." + p.panel)).attr("id"); switch (i = this.__getPanelTitle(t, h("<span>" + a.text() + "</span>").text()), this.opts.navbar.titleLink) { case "anchor": s = a.attr("href"); break; case "parent": s = "#" + r }n.append('<a class="' + p.btn + " " + p.btn + "_prev " + p.navbar + '__btn" href="#' + r + '" />') } else if (!this.opts.navbar.title) return; this.opts.navbar.add && t.addClass(p.panel + "_has-navbar"), n.append('<a class="' + p.navbar + '__title"' + (s.length ? ' href="' + s + '"' : "") + ">" + i + "</a>").prependTo(t), this.trigger("initNavbar:after", t) } }, _initListview: function (t) { this.trigger("initListview:before", t); var e = this.__childAddBack(t, "ul, ol"); this.__refactorClass(e, this.conf.classNames.nolistview, p.nolistview); var n = e.not("." + p.nolistview).addClass(p.listview).children().addClass(p.listitem); this.__refactorClass(n, this.conf.classNames.selected, p.listitem + "_selected"), this.__refactorClass(n, this.conf.classNames.divider, p.listitem + "_divider"), this.__refactorClass(n, this.conf.classNames.spacer, p.listitem + "_spacer"), n.children("a, span").not("." + p.btn).addClass(p.listitem + "__text"); var i = t.data(o.parent); if (i && i.is("." + p.listitem) && !i.children("." + p.btn).length) { var s = i.children("a, span").first(), a = h('<a class="' + p.btn + " " + p.btn + "_next " + p.listitem + '__btn" href="#' + t.attr("id") + '" />'); a.insertAfter(s), s.is("span") && (a.addClass(p.listitem + "__text").html(s.html()), s.remove()) } this.trigger("initListview:after", t) }, _initOpened: function () { this.trigger("initOpened:before"); var t = this.$pnls.find("." + p.listitem + "_selected").removeClass(p.listitem + "_selected").last().addClass(p.listitem + "_selected"), e = t.length ? t.closest("." + p.panel) : this.$pnls.children("." + p.panel).first(); this.openPanel(e, !1), this.trigger("initOpened:after") }, _initAnchors: function () { this.trigger("initAnchors:before"); var c = this; t.$body.on(a.click + "-oncanvas", "a[href]", function (t) { var e = h(this), n = e.attr("href"), i = c.$menu.find(e).length, s = e.is("." + p.listitem + " > a"), a = e.is('[rel="external"]') || e.is('[target="_blank"]'); if (i && 1 < n.length && "#" == n.slice(0, 1)) try { var r = c.$menu.find(n); if (r.is("." + p.panel)) return c[e.parent().hasClass(p.listitem + "_vertical") ? "togglePanel" : "openPanel"](r), void t.preventDefault() } catch (t) { } var l = { close: null, setSelected: null, preventDefault: "#" == n.slice(0, 1) }; for (var o in h[f].addons) { var d = h[f].addons[o].clickAnchor.call(c, e, i, s, a); if (d) { if ("boolean" == typeof d) return void t.preventDefault(); "object" == typeof d && (l = h.extend({}, l, d)) } } i && s && !a && (c.__valueOrFn(e, c.opts.onClick.setSelected, l.setSelected) && c.setSelected(h(t.target).parent()), c.__valueOrFn(e, c.opts.onClick.preventDefault, l.preventDefault) && t.preventDefault(), c.__valueOrFn(e, c.opts.onClick.close, l.close) && c.opts.offCanvas && "function" == typeof c.close && c.close()) }), this.trigger("initAnchors:after") }, _initMatchMedia: function () { var n = this; for (var i in this.mtch) !function () { var e = i, t = window.matchMedia(e); n._fireMatchMedia(e, t), t.addListener(function (t) { n._fireMatchMedia(e, t) }) }() }, _fireMatchMedia: function (t, e) { for (var n = e.matches ? "yes" : "no", i = 0; i < this.mtch[t].length; i++)this.mtch[t][i][n].call(this) }, _getOriginalMenuId: function () { var t = this.$menu.attr("id"); return this.conf.clone && t && t.length && (t = p.umm(t)), t }, __api: function () { var n = this, i = {}; return h.each(this._api, function (t) { var e = this; i[e] = function () { var t = n[e].apply(n, arguments); return void 0 === t ? i : t } }), i }, __valueOrFn: function (t, e, n) { if ("function" == typeof e) { var i = e.call(t[0]); if (void 0 !== i) return i } return "function" != typeof e && void 0 !== e || void 0 === n ? e : n }, __getPanelTitle: function (t, e) { var n; return "function" == typeof this.opts.navbar.title && (n = this.opts.navbar.title.call(t[0])), void 0 === n && (n = t.data(o.title)), void 0 !== n ? n : "string" == typeof e ? this.i18n(e) : this.i18n(h[f].defaults.navbar.title) }, __refactorClass: function (t, e, n) { return t.filter("." + e).removeClass(e).addClass(n) }, __findAddBack: function (t, e) { return t.find(e).add(t.filter(e)) }, __childAddBack: function (t, e) { return t.children(e).add(t.filter(e)) }, __filterListItems: function (t) { return t.not("." + p.listitem + "_divider").not("." + p.hidden) }, __filterListItemAnchors: function (t) { return this.__filterListItems(t).children("a").not("." + p.btn + "_next") }, __openPanelWoAnimation: function (t) { t.hasClass(p.panel + "_noanimation") || (t.addClass(p.panel + "_noanimation"), this.__transitionend(t, function () { t.removeClass(p.panel + "_noanimation") }, this.conf.openingInterval), this.openPanel(t)) }, __transitionend: function (e, n, t) { var i = !1, s = function (t) { void 0 !== t && t.target != e[0] || (i || (e.off(a.transitionend), e.off(a.webkitTransitionEnd), n.call(e[0])), i = !0) }; e.on(a.transitionend, s), e.on(a.webkitTransitionEnd, s), setTimeout(s, 1.1 * t) }, __getUniqueId: function () { return p.mm(h[f].uniqueId++) } }, h.fn[f] = function (n, i) { !function () { if (h[f].glbl) return; t = { $wndw: h(window), $docu: h(document), $html: h("html"), $body: h("body") }, p = {}, o = {}, a = {}, h.each([p, o, a], function (t, i) { i.add = function (t) { t = t.split(" "); for (var e = 0, n = t.length; e < n; e++)i[t[e]] = i.mm(t[e]) } }), p.mm = function (t) { return "mm-" + t }, p.add("wrapper menu panels panel nopanel navbar listview nolistview listitem btn hidden"), p.umm = function (t) { return "mm-" == t.slice(0, 3) && (t = t.slice(3)), t }, o.mm = function (t) { return "mm-" + t }, o.add("parent child title"), a.mm = function (t) { return t + ".mm" }, a.add("transitionend webkitTransitionEnd click scroll resize keydown mousedown mouseup touchstart touchmove touchend orientationchange"), h[f]._c = p, h[f]._d = o, h[f]._e = a, h[f].glbl = t }(), n = h.extend(!0, {}, h[f].defaults, n), i = h.extend(!0, {}, h[f].configuration, i); var s = h(); return this.each(function () { var t = h(this); if (!t.data(f)) { var e = new h[f](t, n, i); e.$menu.data(f, e.__api()), s = s.add(e.$menu) } }), s }, h[f].i18n = (n = {}, function (t, e) { switch (typeof t) { case "object": return "string" == typeof e && (void 0 === n[e] && (n[e] = {}), h.extend(n[e], t)), n; case "string": return "string" == typeof e && void 0 !== n[e] && n[e][t] || t; case "undefined": default: return n } }), h[f].support = { touch: "ontouchstart" in window || navigator.msMaxTouchPoints || !1, csstransitions: "undefined" == typeof Modernizr || void 0 === Modernizr.csstransitions || Modernizr.csstransitions }) }(jQuery);
+!function (r) { var s, i, o, a, t = "mmenu", p = "offCanvas"; r[t].addons[p] = { setup: function () { if (this.opts[p]) { var e = this.opts[p], i = this.conf[p]; a = r[t].glbl, this._api = r.merge(this._api, ["open", "close", "setPage"]), "object" != typeof e && (e = {}), e = this.opts[p] = r.extend(!0, {}, r[t].defaults[p], e), "string" != typeof i.page.selector && (i.page.selector = "> " + i.page.nodetype), this.vars.opened = !1; var o = [s.menu + "_offcanvas"]; this.bind("initMenu:after", function () { var e = this; this._initBlocker(), this.setPage(a.$page), this["_initWindow_" + p](), this.$menu.addClass(o.join(" ")).parent("." + s.wrapper).removeClass(s.wrapper), this.$menu[i.menu.insertMethod](i.menu.insertSelector); var t = window.location.hash; if (t) { var n = this._getOriginalMenuId(); n && n == t.slice(1) && setTimeout(function () { e.open() }, 1e3) } }), this.bind("setPage:after", function (e) { a.$blck && a.$blck.children("a").attr("href", "#" + e.attr("id")) }), this.bind("open:start:sr-aria", function () { this.__sr_aria(this.$menu, "hidden", !1) }), this.bind("close:finish:sr-aria", function () { this.__sr_aria(this.$menu, "hidden", !0) }), this.bind("initMenu:after:sr-aria", function () { this.__sr_aria(this.$menu, "hidden", !0) }), this.bind("initBlocker:after:sr-text", function () { a.$blck.children("a").html(this.__sr_text(this.i18n(this.conf.screenReader.text.closeMenu))) }) } }, add: function () { s = r[t]._c, i = r[t]._d, o = r[t]._e, s.add("slideout page no-csstransforms3d"), i.add("style") }, clickAnchor: function (e, t) { var n = this; if (this.opts[p]) { var i = this._getOriginalMenuId(); if (i && e.is('[href="#' + i + '"]')) { if (t) return this.open(), !0; var o = e.closest("." + s.menu); if (o.length) { var r = o.data("mmenu"); if (r && r.close) return r.close(), n.__transitionend(o, function () { n.open() }, n.conf.transitionDuration), !0 } return this.open(), !0 } if (a.$page) return (i = a.$page.first().attr("id")) && e.is('[href="#' + i + '"]') ? (this.close(), !0) : void 0 } } }, r[t].defaults[p] = { blockUI: !0, moveBackground: !0 }, r[t].configuration[p] = { menu: { insertMethod: "prependTo", insertSelector: "body" }, page: { nodetype: "div", selector: null, noSelector: [], wrapIfNeeded: !0 } }, r[t].prototype.open = function () { if (this.trigger("open:before"), !this.vars.opened) { var e = this; this._openSetup(), setTimeout(function () { e._openFinish() }, this.conf.openingInterval), this.trigger("open:after") } }, r[t].prototype._openSetup = function () { var e = this, t = this.opts[p]; this.closeAllOthers(), a.$page.each(function () { r(this).data(i.style, r(this).attr("style") || "") }), a.$wndw.trigger(o.resize + "-" + p, [!0]); var n = [s.wrapper + "_opened"]; t.blockUI && n.push(s.wrapper + "_blocking"), "modal" == t.blockUI && n.push(s.wrapper + "_modal"), t.moveBackground && n.push(s.wrapper + "_background"), a.$html.addClass(n.join(" ")), setTimeout(function () { e.vars.opened = !0 }, this.conf.openingInterval), this.$menu.addClass(s.menu + "_opened") }, r[t].prototype._openFinish = function () { var e = this; this.__transitionend(a.$page.first(), function () { e.trigger("open:finish") }, this.conf.transitionDuration), this.trigger("open:start"), a.$html.addClass(s.wrapper + "_opening") }, r[t].prototype.close = function () { if (this.trigger("close:before"), this.vars.opened) { var t = this; this.__transitionend(a.$page.first(), function () { t.$menu.removeClass(s.menu + "_opened"); var e = [s.wrapper + "_opened", s.wrapper + "_blocking", s.wrapper + "_modal", s.wrapper + "_background"]; a.$html.removeClass(e.join(" ")), a.$page.each(function () { var e = r(this).data(i.style); r(this).attr("style", e) }), t.vars.opened = !1, t.trigger("close:finish") }, this.conf.transitionDuration), this.trigger("close:start"), a.$html.removeClass(s.wrapper + "_opening"), this.trigger("close:after") } }, r[t].prototype.closeAllOthers = function () { a.$body.find("." + s.menu + "_offcanvas").not(this.$menu).each(function () { var e = r(this).data(t); e && e.close && e.close() }) }, r[t].prototype.setPage = function (e) { this.trigger("setPage:before", e); var t = this, n = this.conf[p]; e && e.length || (e = a.$body.find(n.page.selector).not("." + s.menu).not("." + s.wrapper + "__blocker"), n.page.noSelector.length && (e = e.not(n.page.noSelector.join(", "))), 1 < e.length && n.page.wrapIfNeeded && (e = e.wrapAll("<" + this.conf[p].page.nodetype + " />").parent())), e.addClass(s.page + " " + s.slideout).each(function () { r(this).attr("id", r(this).attr("id") || t.__getUniqueId()) }), a.$page = e, this.trigger("setPage:after", e) }, r[t].prototype["_initWindow_" + p] = function () { a.$wndw.off(o.keydown + "-" + p).on(o.keydown + "-" + p, function (e) { if (a.$html.hasClass(s.wrapper + "_opened") && 9 == e.keyCode) return e.preventDefault(), !1 }); var i = 0; a.$wndw.off(o.resize + "-" + p).on(o.resize + "-" + p, function (e, t) { if (1 == a.$page.length && (t || a.$html.hasClass(s.wrapper + "_opened"))) { var n = a.$wndw.height(); (t || n != i) && (i = n, a.$page.css("minHeight", n)) } }) }, r[t].prototype._initBlocker = function () { var t = this, e = this.opts[p], n = this.conf[p]; this.trigger("initBlocker:before"), e.blockUI && (a.$blck || (a.$blck = r('<div class="' + s.wrapper + "__blocker " + s.slideout + '" />').append("<a />")), a.$blck.appendTo(n.menu.insertSelector).off(o.touchstart + "-" + p + " " + o.touchmove + "-" + p).on(o.touchstart + "-" + p + " " + o.touchmove + "-" + p, function (e) { e.preventDefault(), e.stopPropagation(), a.$blck.trigger(o.mousedown + "-" + p) }).off(o.mousedown + "-" + p).on(o.mousedown + "-" + p, function (e) { e.preventDefault(), a.$html.hasClass(s.wrapper + "_modal") || (t.closeAllOthers(), t.close()) }), this.trigger("initBlocker:after")) } }(jQuery);
+!function (n) { var s, o, i = "mmenu", e = "screenReader"; n[i].addons[e] = { setup: function () { var r = this, t = this.opts[e], a = this.conf[e]; n[i].glbl, "boolean" == typeof t && (t = { aria: t, text: t }), "object" != typeof t && (t = {}), (t = this.opts[e] = n.extend(!0, {}, n[i].defaults[e], t)).aria && (this.bind("initAddons:after", function () { this.bind("initMenu:after", function () { this.trigger("initMenu:after:sr-aria") }), this.bind("initNavbar:after", function () { this.trigger("initNavbar:after:sr-aria", arguments[0]) }), this.bind("openPanel:start", function () { this.trigger("openPanel:start:sr-aria", arguments[0]) }), this.bind("close:start", function () { this.trigger("close:start:sr-aria") }), this.bind("close:finish", function () { this.trigger("close:finish:sr-aria") }), this.bind("open:start", function () { this.trigger("open:start:sr-aria") }), this.bind("initOpened:after", function () { this.trigger("initOpened:after:sr-aria") }) }), this.bind("updateListview", function () { this.$pnls.find("." + s.listview).children().each(function () { r.__sr_aria(n(this), "hidden", n(this).is("." + s.hidden)) }) }), this.bind("openPanel:start", function (t) { var i = this.$menu.find("." + s.panel).not(t).not(t.parents("." + s.panel)), n = t.add(t.find("." + s.listitem + "_vertical ." + s.listitem + "_opened").children("." + s.panel)); this.__sr_aria(i, "hidden", !0), this.__sr_aria(n, "hidden", !1) }), this.bind("closePanel", function (t) { this.__sr_aria(t, "hidden", !0) }), this.bind("initPanels:after", function (t) { var i = t.find("." + s.btn).each(function () { r.__sr_aria(n(this), "owns", n(this).attr("href").replace("#", "")) }); this.__sr_aria(i, "haspopup", !0) }), this.bind("initNavbar:after", function (t) { var i = t.children("." + s.navbar); this.__sr_aria(i, "hidden", !t.hasClass(s.panel + "_has-navbar")) }), t.text && "parent" == this.opts.navbar.titleLink && this.bind("initNavbar:after", function (t) { var i = t.children("." + s.navbar), n = !!i.children("." + s.btn + "_prev").length; this.__sr_aria(i.children("." + s.title), "hidden", n) })), t.text && (this.bind("initAddons:after", function () { this.bind("setPage:after", function () { this.trigger("setPage:after:sr-text", arguments[0]) }), this.bind("initBlocker:after", function () { this.trigger("initBlocker:after:sr-text") }) }), this.bind("initNavbar:after", function (t) { var i = t.children("." + s.navbar), n = this.i18n(a.text.closeSubmenu); i.children("." + s.btn + "_prev").html(this.__sr_text(n)) }), this.bind("initListview:after", function (t) { var i = t.data(o.parent); if (i && i.length) { var n = i.children("." + s.btn + "_next"), e = this.i18n(a.text[n.parent().is("." + s.listitem + "_vertical") ? "toggleSubmenu" : "openSubmenu"]); n.append(r.__sr_text(e)) } })) }, add: function () { s = n[i]._c, o = n[i]._d, n[i]._e, s.add("sronly") }, clickAnchor: function (t, i) { } }, n[i].defaults[e] = { aria: !0, text: !0 }, n[i].configuration[e] = { text: { closeMenu: "Close menu", closeSubmenu: "Close submenu", openSubmenu: "Open submenu", toggleSubmenu: "Toggle submenu" } }, n[i].prototype.__sr_aria = function (t, i, n) { t.prop("aria-" + i, n)[n ? "attr" : "removeAttr"]("aria-" + i, n) }, n[i].prototype.__sr_role = function (t, i) { t.prop("role", i)[i ? "attr" : "removeAttr"]("role", i) }, n[i].prototype.__sr_text = function (t) { return '<span class="' + s.sronly + '">' + t + "</span>" } }(jQuery);
+!function (n) { var e, r, s, t = "mmenu", i = "scrollBugFix"; n[t].addons[i] = { setup: function () { var o = this.opts[i]; this.conf[i]; s = n[t].glbl, n[t].support.touch && this.opts.offCanvas && this.opts.offCanvas.blockUI && ("boolean" == typeof o && (o = { fix: o }), "object" != typeof o && (o = {}), (o = this.opts[i] = n.extend(!0, {}, n[t].defaults[i], o)).fix && (this.bind("open:start", function () { this.$pnls.children("." + e.panel + "_opened").scrollTop(0) }), this.bind("initMenu:after", function () { this["_initWindow_" + i]() }))) }, add: function () { e = n[t]._c, n[t]._d, r = n[t]._e }, clickAnchor: function (o, t) { } }, n[t].defaults[i] = { fix: !0 }, n[t].prototype["_initWindow_" + i] = function () { var o = this; n(document).off(r.touchmove + "-" + i).on(r.touchmove + "-" + i, function (o) { s.$html.hasClass(e.wrapper + "_opened") && o.preventDefault() }); var t = !1; s.$body.off(r.touchstart + "-" + i).on(r.touchstart + "-" + i, "." + e.panels + "> ." + e.panel, function (o) { s.$html.hasClass(e.wrapper + "_opened") && (t || (t = !0, 0 === o.currentTarget.scrollTop ? o.currentTarget.scrollTop = 1 : o.currentTarget.scrollHeight === o.currentTarget.scrollTop + o.currentTarget.offsetHeight && (o.currentTarget.scrollTop -= 1), t = !1)) }).off(r.touchmove + "-" + i).on(r.touchmove + "-" + i, "." + e.panels + "> ." + e.panel, function (o) { s.$html.hasClass(e.wrapper + "_opened") && n(this)[0].scrollHeight > n(this).innerHeight() && o.stopPropagation() }), s.$wndw.off(r.orientationchange + "-" + i).on(r.orientationchange + "-" + i, function () { o.$pnls.children("." + e.panel + "_opened").scrollTop(0).css({ "-webkit-overflow-scrolling": "auto" }).css({ "-webkit-overflow-scrolling": "touch" }) }) } }(jQuery);
+
+// FORMAT PRICE
+function formatCurrency(a) {
+  var b = parseFloat(a)
+    .toFixed(2)
+    .replace(/(\d)(?=(\d{3})+\.)/g, "$1.")
+    .toString();
+  var len = b.length;
+  b = b.substring(0, len - 3);
+  return b;
+}
+
+// CONVERT STRING TO NUMBER
+function strToNumber(str) {
+  str += "";
+  while (str.indexOf(".") > 0) {
+    str = str.replace(".", "");
+  }
+  var result = parseFloat(str);
+  return isNaN(result) ? 0 : result;
+}
+
+// CHECK EMAIL ADDRESS
+function validateEmail(sEmail) {
+  var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
+  if (filter.test(sEmail)) {
+    return true;
+  }
+  else {
+    return false;
+  }
+}
+
+// CHECK MOBILE PHONE 10 DIGITAL
+function validateTelMobile(tel) {
+  vnf_regex_tel = /((09|03|07|08|05)+([0-9]{8})\b)/g;
+  if (vnf_regex_tel.test(tel)) {
+    return true;
+  }
+  else {
+    return false;
+  }
+}
\ No newline at end of file
diff --git a/demo-audio-2/js/main_pc.js b/demo-audio-2/js/main_pc.js
new file mode 100644
index 0000000..8c5355b
--- /dev/null
+++ b/demo-audio-2/js/main_pc.js
@@ -0,0 +1,116 @@
+// HOMEAPGE FUNC
+function homepageHandler() {
+  swiperSectionHero();
+  swiperSectionBrand();
+  swiperDealList();
+}
+
+homepageHandler();
+
+// SWIPER SECTION HERO
+function swiperSectionHero() {
+  new Swiper(".swiper-section-hero", {
+    spaceBetween: 12,
+    rewind: true,
+    speed: 1000,
+    autoplay: {
+      delay: 2500,
+      disableOnInteraction: false,
+      pauseOnMouseEnter: "true",
+    },
+    pagination: {
+      el: ".swiper-pagination",
+      clickable: true,
+    },
+  });
+}
+
+function swiperSectionBrand() {
+  new Swiper(".swiper-section-banner", {
+    spaceBetween: 20,
+    slidesPerView: 6,
+    rewind: true,
+    speed: 1000,
+    autoplay: {
+      delay: 2500,
+      disableOnInteraction: false,
+      pauseOnMouseEnter: "true",
+    },
+  });
+}
+
+function swiperDealList() {
+  new Swiper(".swiper-deal-list", {
+    direction: 'vertical',
+    spaceBetween: 10,
+    slidesPerView: 3,
+    rewind: true,
+    speed: 1000,
+    autoplay: {
+      delay: 2500,
+      disableOnInteraction: false,
+      pauseOnMouseEnter: "true",
+    },
+  });
+}
+
+// PRODUCT DETAIL
+// PRODUCT THUMBNAIL
+let galleryThumbs = new Swiper(".gallery-thumbs", {
+  spaceBetween: 12,
+  slidesPerView: 5,
+  slideToClickedSlide: true,
+  freeMode: true,
+  watchSlidesProgress: true,
+  centerInsufficientSlides: true,
+});
+
+let galleryTop = new Swiper(".gallery-top", {
+  spaceBetween: 12,
+  slidesPerView: 1,
+  speed: 1000,
+  autoplay: {
+    delay: 2500,
+    disableOnInteraction: false,
+    pauseOnMouseEnter: "true",
+  },
+  thumbs: {
+    swiper: galleryThumbs,
+  },
+  // AUTO SILDED AT FISRT AND END
+  on: {
+    slideChange: function () {
+      let activeIndex = this.activeIndex + 1;
+
+      let activeSlide = document.querySelector(
+        `.gallery-thumbs .swiper-slide:nth-child(${activeIndex})`
+      );
+      let nextSlide = document.querySelector(
+        `.gallery-thumbs .swiper-slide:nth-child(${activeIndex + 1})`
+      );
+      let prevSlide = document.querySelector(
+        `.gallery-thumbs .swiper-slide:nth-child(${activeIndex - 1})`
+      );
+
+      if (
+        nextSlide &&
+        !nextSlide.classList.contains("swiper-slide-visible")
+      ) {
+        this.thumbs.swiper.slideNext();
+      } else if (
+        prevSlide &&
+        !prevSlide.classList.contains("swiper-slide-visible")
+      ) {
+        this.thumbs.swiper.slidePrev();
+      }
+    },
+  },
+});
+
+// FANCY-BOX
+$('[data-fancybox="gallery"]').fancybox({
+  thumbs: {
+    autoStart: true
+  }
+});
+
diff --git a/demo-audio-2/test.html b/demo-audio-2/test.html
new file mode 100644
index 0000000..9c620bd
--- /dev/null
+++ b/demo-audio-2/test.html
@@ -0,0 +1,170 @@
+<script>
+  // DEAL TIME DOWN
+  function dealTimeDown() {
+    // SET TIMER
+    let timeDealLeft = parseInt($(".box-deal .p-item").first().attr("data-time"));
+    const timer = setInterval(timeDown, 1000);
+
+    function timeDown() {
+      // GET TIME LEFT PER SECOND
+      let timeLeft = timeDealLeft;
+      timeDealLeft = timeLeft - 1;
+
+      if ($(".global-time-deal").length) $(".global-time-deal").html(renderTimeLeft(timeLeft));
+      if (timeLeft === 0) {
+        clearInterval(timer);
+      }
+    }
+  }
+
+  // RENDER HOMEPAGE TIME LEFT
+  function renderTimeLeft(timeLeft) {
+    const sec = String(timeLeft % 60).padStart(2, 0);
+    const min = String(Math.trunc((timeLeft / 60) % 60)).padStart(2, 0);
+    const hour = String(Math.trunc(timeLeft / 3600) % 24).padStart(2, 0);
+    const day = String(Math.trunc(timeLeft / 86400) % 3600).padStart(2, 0);
+
+    const firstLetterSec = Math.floor(sec / 10);
+    const secondLetterSec = sec % 10;
+    const firstLetterMin = Math.floor(min / 10);
+    const secondLetterMin = min % 10;
+    const firstLetterHour = Math.floor(hour / 10);
+    const secondLetterHour = hour % 10;
+    const firstLetterDay = Math.floor(day / 10);
+    const secondLetterDay = day % 10;
+
+    return `
+      <p>${firstLetterDay}</p>
+      <p>${secondLetterDay}</p>
+      <span>:</span>
+      <p>${firstLetterHour}</p>
+      <p>${secondLetterHour}</p>
+      <span>:</span>
+      <p>${firstLetterMin}</p>
+      <p>${secondLetterMin}</p>
+      <span>:</span>
+      <p>${firstLetterSec}</p>
+      <p>${secondLetterSec}</p>
+    `;
+  }
+
+  // GET HOT-DEAL PRODUCT
+  function getDealProduct() {
+    let params = {
+      action_type: "list",
+      type: "active",
+      show: 10,
+    }
+
+    let target = "#js-deal-box";
+
+    Hura.Ajax.get("deal", params).then(function (data) {
+      console.log(data.list);
+      let html = Hura.Template.parse(productDealTpl, data.list);
+      Hura.Template.render(target, html);
+
+      saleTimeDown();
+      dealLineWidth();
+    });
+  }
+
+  // RESET IMAGE IN PAGE DEAL
+  function resetImagePageDeal() {
+    if ($(".page-deal").length > 0) {
+      $(".p-item .p-img").each(function () {
+        let firstChild = $(this).children(":first");
+        let lastChild = $(this).find(".swiper-lazy-preloader");
+        let imageDataSrc = firstChild.attr("data-src");
+        firstChild.attr("src", imageDataSrc);
+        lastChild.css("display", "none");
+      })
+    }
+  }
+
+  // CUSTOM BOTTOM LINE PRODUCT DEAL
+  function dealLineWidth() {
+    $(".js-line-deal-left").each(function () {
+      let quantityDealLeft = parseInt($(this).parent().attr("data-quantity-left"));
+      let quantityDealTotal = parseInt($(this).parent().attr("data-quantity-sale-total"));
+
+      if (quantityDealLeft >= 0) {
+        let lineDealWidth = quantityDealLeft / quantityDealTotal * 100 + "%";
+        $(this).css("width", lineDealWidth);
+      } else {
+        $(this).css("width", 0);
+      }
+    })
+  }
+</script>
+
+<script>
+  const product_deal_featured_tpl = `
+    <div class="p-info text-right">
+      <a href="{%= item.product_info.productUrl %}">
+        <h3 class="p-name text-24 font-weight-600 mb-4">{%= item.product_info.productName %}</h3>
+      </a>
+      <p class="p-price-sale text-32 font-weight-700 color-primary mb-1">{%= formatCurrency(item.product_info.sale_rules.price) %}₫</p>
+      <p class="p-price-stock text-24 font-weight-500 color-gray-2 text-line-through">
+        {% if (item.product_info.marketPrice > 0) { %}
+        {%= formatCurrency(item.product_info.marketPrice) %}₫
+        {% } else { %}
+        {%= formatCurrency(item.product_info.sale_rules.normal_price) %}₫
+        {% } %}
+      </p>
+      <p class="p-summary font-weight-300 my-4">
+        <span>{%= item.product_info.productSummary %}</span>
+      </p>
+      <div class="wrapper-deal p-relative mb-4" data-deal-left="{%= item.quantity - item.sale_quantity %}" data-deal-total="{%= item.quantity %}">
+        <div class="deal-line total"></div>
+        <div class="deal-line remaining"></div>
+        <i class="static-icons static-icons-static-icon-fire"></i>
+        <p class="sold text-12 color-white">Đã bán {%= item.sale_quantity %}</p>
+      </div>
+      <a href="javascript:addCart({%= item.product_info.productId %});" class="p-cart d-flex align-items-center justify-content-center gap-8">
+        <i class="static-icons static-icons-static-icon-header-cart-pro-big"></i>
+        <span class="text-20 font-weight-500 color-primary text-uppercase">Cho vào giỏ hàng</span>
+      </a>
+    </div>
+
+    <div class="p-image">
+      <a href="{%= item.product_info.productUrl %}">
+        <img src="{%= item.product_info.productImage.large %}" alt="{%= item.product_info.productName %}" class="d-flex w-100">
+      </a>
+    </div>
+  `;
+
+  const product_deal_list_tpl = `
+    <div class="p-item d-flex gap-16">
+      <a href="{%= item.product_info.productUrl %}" class="p-image">
+        <img src="{%= item.product_info.productImage.large %}" alt="{%= item.product_info.productName %}" class="p-img d-flex w-100">
+      </a>
+      <div class="p-info">
+        <a href="{%= item.product_info.productUrl %}">
+          <h3 class="p-name mt-1">{%= item.product_info.productName %}</h3>
+        </a>
+        <p class="p-price">
+          <span class="p-price-sale">{%= formatCurrency(item.product_info.sale_rules.price) %}₫</span>
+          <span class="p-price-stock">
+            {% if (item.product_info.marketPrice > 0) { %}
+            {%= formatCurrency(item.product_info.marketPrice) %}₫
+            {% } else { %}
+            {%= formatCurrency(item.product_info.sale_rules.normal_price) %}₫
+            {% } %}
+          </span>
+        </p>
+        <div class="wrapper d-flex align-items-end gap-32 mt-2">
+          <div class="wrapper-deal p-relative flex-1 mb-2" data-deal-left="{%= item.quantity - item.sale_quantity %}" data-deal-total="{%= item.quantity %}">
+            <div class="deal-line total"></div>
+            <div class="deal-line remaining js-line-deal-left"></div>
+            <i class="static-icons static-icons-static-icon-fire"></i>
+            <p class="sold text-12 color-white">Đã bán {%= item.sale_quantity %}</p>
+          </div>
+
+          <a href="javascript:addCart({%= item.product_info.productId %});" class="p-cart">
+            <i class="static-icons static-icons-static-icon-header-cart-pro"></i>
+          </a>
+        </div>
+      </div>
+    </div>
+  `;
+</script>
\ No newline at end of file