@charset "UTF-8";
/* normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */
article,
aside,
footer,
header,
nav,
section {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */
figcaption,
figure,
main {
  /* 1 */
  display: block;
}

/**
 * Add the correct margin in IE 8.
 */
figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  background-color: transparent;
  /* 1 */
  -webkit-text-decoration-skip: objects;
  /* 2 */
}

/**
 * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
  font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */
mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */
details,
menu {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Scripting
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
canvas {
  display: inline-block;
}

/**
 * Add the correct display in IE.
 */
template {
  display: none;
}

/* Hidden
   ========================================================================== */
/**
 * Add the correct display in IE 10-.
 */
[hidden] {
  display: none;
}

:root {
  --body-font-family: Roboto, Arial, Helvetica, sans-serif;
  --body-line-height: 1.5;
  --border-radius: .375rem;
  --overlay-1: rgba(0, 0, 0, 0.7);
  --overlay-2: rgba(0, 0, 0, 0.35);
  --box-shadow-down: 0 2px 4px rgba(0, 0, 0, 0.42);
  --box-shadow-up: 0 -2px 4px rgba(0, 0, 0, 0.42);
  --box-shadow: 0 0 4px rgba(0, 0, 0, 0.42);
  --box-shadow-2: 0px 0px 6px rgba(0, 0, 0, 0.87);
  --topbar-height: 1.75rem;
}

*,
::before,
::after {
  box-sizing: border-box;
  border: 0 solid;
  border-color: inherit;
}

pre {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.5;
  white-space: pre-wrap;
}

p {
  margin-top: .5rem;
  margin-bottom: .5rem;
  line-height: 1.5;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  padding: 0;
  color: inherit;
  background-color: transparent;
  outline: none;
  cursor: pointer;
}

img {
  vertical-align: middle;
  width: 100%;
}

iframe {
  display: block;
  width: 100%;
  max-height: 100%;
  border: none;
}

html {
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
}

body {
  font-size: .875rem;
  font-family: var(--body-font-family);
  font-weight: 400;
  line-height: var(--body-line-height);
  color: HSLA(var(--body-text, var(--white-opacity-1)));
  background-color: HSL(var(--body-bg, var(--primary-600)));
}

body > div {
  min-height: 100%;
}

@media (max-width: 1023px) and (orientation: landscape) {
  body {
    padding-left: calc(constant(safe-area-inset-bottom) + .75rem);
    padding-right: calc(constant(safe-area-inset-bottom) + .75rem);
    padding-left: calc(env(safe-area-inset-bottom) + .75rem);
    padding-right: calc(env(safe-area-inset-bottom) + .75rem);
  }
}

.app::before {
  content: "mobile";
  visibility: hidden;
  position: absolute;
}

@media (min-width: 769px) {
  .app::before {
    content: "desktop";
  }
}

.app[data-layout=mobile] {
  min-width: 320px;
}

[data-layout=desktop] [role=mobile-click] {
  pointer-events: none;
}

[data-layout=desktop] [role=mobile-visible] {
  display: none;
}

[data-layout=mobile] [role=desktop-visible] {
  display: none;
}

@media (hover: hover) {
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  /* Scroll 軌道 */
  ::-webkit-scrollbar-track {
    background-color: HSL(var(--custom-scroll-bg, transparent));
  }
  /* Scroll 本身 */
  ::-webkit-scrollbar-thumb {
    background-color: HSL(var(--custom-scroll-thumb-color));
    border-radius: 2em;
    border: 1px solid;
    border-color: HSLA(var(--custom-scroll-thumb-border));
    box-shadow: 0 0 4px HSLA(var(--custom-scroll-thumb-shadow));
  }
  *:hover::-webkit-scrollbar-thumb {
    background-color: HSL(var(--custom-scroll-thumb-color-hover));
  }
}

:root {
  --black: 0, 0%, 0%;
  --black-opacity-1: var(--black), 0.87;
  --black-opacity-2: var(--black), 0.54;
  --black-opacity-3: var(--black), 0.38;
  --black-opacity-4: var(--black), 0.12;
  --white: 0, 0%, 100%;
  --white-opacity-1: var(--white), 1;
  --white-opacity-2: var(--white), 0.7;
  --white-opacity-3: var(--white), 0.3;
  --white-opacity-4: var(--white), 0.12;
  --grey-50: 0, 0%, 98%;
  --grey-100: 0, 0%, 96%;
  --grey-200: 0, 0%, 93%;
  --grey-300: 0, 0%, 88%;
  --grey-400: 0, 0%, 74%;
  --grey-500: 0, 0%, 62%;
  --grey-600: 0, 0%, 46%;
  --grey-700: 0, 0%, 38%;
  --grey-800: 0, 0%, 26%;
  --grey-900: 0, 0%, 13%;
  --primary-100: 232, 37%, 53%;
  --primary-200: 237, 44%, 53%;
  --primary-300: 235, 43%, 36%;
  --primary-400: 235, 47%, 28%;
  --primary-500: 229, 67%, 17%;
  --primary-600: 227, 46%, 14%;
  --secondary-50: 28, 100%, 78%;
  --secondary-100: 27, 96%, 64%;
  --secondary-200: 27, 96%, 60%;
  --secondary-300: 27, 90%, 57%;
  --secondary-400: 28, 69%, 51%;
  --primary-gradient-border: linear-gradient(270deg, HSL(235, 53%, 40%) 9.78%, HSL(234, 64%, 57%) 24.24%, HSL(236, 48%, 39%) 55.96%, HSL(235, 64%, 66%) 81.15%, HSL(235, 51%, 37%) 99.34%);
  --gradient-text: linear-gradient(to right, HSL(41, 100%, 90%) 0%, HSL(34, 59%, 66%) 66.67%, HSL(34, 61%, 71%) 100%);
  --icon-graident-bg: linear-gradient(304.73deg, HSL(218, 100%, 76%) 0%, HSL(233, 97%, 69%) 66.67%, HSL(233, 74%, 58%) 100%);
  --live-score-gradient-header: linear-gradient(110.26deg, HSL(235, 71%, 26%) 2.72%, HSL(241, 73%, 17%) 108%);
  --live-score-gradient-match: linear-gradient(299.35deg, HSL(237, 55%, 34%) 15.87%, HSL(234, 43%, 48%) 86.63%);
  --sports-card-gradient-bg: linear-gradient(328.67deg, #292d7a 0.93%, #4b57be 118.57%);
  --sports-card-gradient-border: linear-gradient(270deg, #252b74 9.78%, #505ab4 24.24%, #353b92 55.96%, #6d75ca 81.15%, #252b74 99.34%);
  --product-gradient-Trapezoid-bg: linear-gradient(270deg, rgba(223, 189, 134, 0.8) 0%, rgba(255, 231, 179, 0.8) 48.11%, rgba(196, 153, 100, 0.8) 88.59%);
  --product-gradient-Trapezoid-dark-bg: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), linear-gradient(270deg, rgba(170, 124, 65, 0.6) 10.9%, rgba(108, 83, 51, 0.6) 50.58%, rgba(139, 105, 60, 0.6) 92.83%);
  --product-gradient-Trapezoid-light-bg: linear-gradient(270deg, #dfbd86 0%, #ffe7b3 48.11%, #c49964 88.59%);
  --product-gradient-light-border: 28, 79%, 74%;
  --product-gradient-bg: 235, 52%, 30%;
  --product-gradient-light-bg: 235, 52%, 44%;
}

:root {
  --custom-scroll-thumb-color: var(--primary-900);
  --custom-scroll-thumb-border: var(--primary-200);
  --custom-scroll-thumb-shadow: var(--black-opacity-4);
  --custom-scroll-thumb-color-hover: var(--primary-400);
}

:root {
  --topbar-text: var(--white);
  --topbar-bg: #a3805c;
  --header-bg: #1f2a41;
  --header-box-shadow: #394460;
  --header-nav-product-bg: var(--primary-500);
  --header-nav-item-hover-text: var(--secondary-50);
  --header-option-dropdown-text: var(--white-opacity-2);
  --footer-bg: #1f2a41;
  --list-item-border: var(--primary-100);
  --list-item-btn-hover: var(--primary-500);
  --list-item-selected-btn-text: var(--secondary-50);
  --dropdown-container-bg: var(--primary-300);
  --dropdown-item-border: var(--primary-100);
  --btn-secondary-color: var(--white-opacity-1);
  --btn-secondary-bg: var(--secondary-200);
  --btn-secondary-hover-bg: var(--secondary-100);
  --modal-header-border: var(--secondary-300);
  --text-primary: var(--primary-300);
  --text-secondary: var(--secondary-300);
  --promotions-swiper-pagination-bullet-active: var(--secondary-200);
  --switch-bar-btn-after-bg: var(--secondary-300);
  --textfield-bg: var(--primary-100);
  --modal-dialog-bg: var(--primary-300);
  --modal-dialog-border: var(--primary-100);
  --checkbox-icon: var(--primary-100);
  --checkbox-checked-icon: var(--secondary-100);
  --live-score-option-bg: var(--primary-400);
  --live-score-tab-bg: var(--primary-500);
  --main-content-bg: var(--primary-500);
  --main-content-border: var(--primary-200);
  --main-content-after-bg-img: linear-gradient(270deg, HSL(235, 53%, 40%) 9.78%, HSL(234, 64%, 57%) 24.24%, HSL(236, 48%, 39%) 55.96%, HSL(235, 64%, 66%) 81.15%, HSL(235, 51%, 37%) 99.34%);
  --ls-match-after-bg-img: linear-gradient(270deg, HSL(235, 53%, 40%) 9.78%, HSL(234, 64%, 57%) 24.24%, HSL(236, 48%, 39%) 55.96%, HSL(235, 64%, 66%) 81.15%, HSL(235, 51%, 37%) 99.34%);
  --ls-match-border: var(--primary-100);
  --ls-match-hover-border: var(--secondary-50);
  --tabs-tab-selected-text: var(--white-opacity-1);
  --tabs-pills-tab-border: var(--primary-100);
  --tabs-pills-tab-selected-text: var(--tabs-tab-selected-text);
  --tabs-pills-tab-selected-bg: var(--primary-100);
  --sports-card-after: linear-gradient(270deg, HSL(235, 53%, 40%) 9.78%, HSL(234, 64%, 57%) 24.24%, HSL(236, 48%, 39%) 55.96%, HSL(235, 64%, 66%) 81.15%, HSL(235, 51%, 37%) 99.34%);
  --side-nav-main-bg: var(--primary-300);
}

.patt-wrap {
  position: relative;
  cursor: pointer;
}

.patt-wrap li, .patt-wrap ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.patt-circ {
  position: relative;
  float: left;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.patt-error .patt-circ.hovered {
  border: 3px solid #BA1B26;
}

.patt-hidden .patt-circ.hovered {
  border: 0;
}

.patt-dots, .patt-lines {
  border-radius: 5px;
  height: 10px;
  position: absolute;
}

.patt-dots {
  width: 10px;
  top: 50%;
  left: 50%;
  margin-top: -5px;
  margin-left: -5px;
}

.patt-lines {
  background: rgba(255, 255, 255, 0.7);
  transform-origin: 5px 5px;
  -ms-transform-origin: 5px 5px;
  -webkit-transform-origin: 5px 5px;
}

.patt-hidden .patt-lines {
  display: none;
}

.mhn-lock-wrap {
  position: relative;
  margin-top: 1rem;
}

.mhn-lock-wrap .mhn-lock-title {
  margin: 0 auto;
  min-height: 2.5rem;
  max-width: 300px;
  text-align: center;
  font-size: 14px;
}

.mhn-lock-wrap .mhn-lock-success {
  color: transparent;
  text-shadow: none;
}

.mhn-lock-wrap .mhn-lock-failure {
  color: red;
}

.mhn-lock {
  margin: -15px auto 0;
  background: 0 0;
}

.patt-wrap {
  margin: auto;
  overflow: hidden;
}

.patt-wrap li {
  -webkit-transition: all .4s ease-in-out 0s;
  transition: all .4s ease-in-out 0s;
}

.patt-dots, .patt-lines {
  -webkit-transition: background .1s ease-in-out 0s;
  transition: background .1s ease-in-out 0s;
}

.patt-circ {
  border: 3px solid rgba(255, 255, 255, 0.1);
}

.patt-dots {
  background-color: white;
}

.patt-lines {
  background-color: rgba(0, 0, 0, 0.1);
}

.patt-circ.hovered {
  border-color: #ddd;
  background-color: rgba(0, 0, 0, 0.05);
}

.patt-error .patt-circ.hovered {
  background: rgba(243, 66, 53, 0.4);
  border-color: rgba(243, 66, 53, 0.8);
}

.patt-error .patt-lines {
  background: rgba(243, 66, 53, 0.5);
}

.patt-success .patt-circ.hovered {
  background: rgba(75, 174, 79, 0.4);
  border-color: rgba(75, 174, 79, 0.8);
}

.patt-success .patt-lines {
  background: rgba(75, 174, 79, 0.5);
}

/**
 * Swiper 8.1.6
 * 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: May 25, 2022
 */
@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 {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
}

.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
}

.swiper-android .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}

.swiper-pointer-events {
  touch-action: pan-y;
}

.swiper-pointer-events.swiper-vertical {
  touch-action: pan-x;
}

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
}

.swiper-slide-invisible-blank {
  visibility: hidden;
}

/* Auto Height */
.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;
}

/* 3D Effects */
.swiper-3d,
.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}

.swiper-3d .swiper-wrapper,
.swiper-3d .swiper-slide,
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-cube-shadow {
  transform-style: preserve-3d;
}

.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom {
  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), transparent);
}

.swiper-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), transparent);
}

.swiper-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
}

.swiper-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
}

/* CSS Mode */
.swiper-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  /* For Firefox */
  -ms-overflow-style: none;
  /* For Internet Explorer and Edge */
}

.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 {
  -webkit-scroll-snap-type: x mandatory;
          scroll-snap-type: x mandatory;
}

.swiper-vertical.swiper-css-mode > .swiper-wrapper {
  -webkit-scroll-snap-type: y mandatory;
          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 {
  -webkit-margin-start: var(--swiper-centered-offset-before);
          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 {
  -webkit-margin-before: var(--swiper-centered-offset-before);
          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);
}

:root {
  --swiper-navigation-size: 44px;
  /*
  --swiper-navigation-color: var(--swiper-theme-color);
  */
}

.swiper-button-prev,
.swiper-button-next {
  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-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}

.swiper-button-prev.swiper-button-hidden,
.swiper-button-next.swiper-button-hidden {
  opacity: 0;
  cursor: auto;
  pointer-events: none;
}

.swiper-button-prev:after,
.swiper-button-next: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 {
  display: none;
}

:root {
  /*
  --swiper-pagination-color: var(--swiper-theme-color);
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-inactive-color: #000;
  --swiper-pagination-bullet-inactive-opacity: 0.2;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  --swiper-pagination-bullet-vertical-gap: 6px;
  */
}

.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}

.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}

/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: 10px;
  left: 0;
  width: 100%;
}

/* Bullets */
.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 {
  transform: scale(1);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  transform: scale(0.66);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  transform: scale(0.33);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(0.66);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  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:only-child {
  display: none !important;
}

.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}

.swiper-vertical > .swiper-pagination-bullets,
.swiper-pagination-vertical.swiper-pagination-bullets {
  right: 10px;
  top: 50%;
  transform: translate3d(0px, -50%, 0);
}

.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
  display: block;
}

.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
}

.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  transition: 200ms transform, 200ms top;
}

.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: 200ms transform, 200ms left;
}

.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms transform, 200ms right;
}

/* Progress */
.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-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: 4px;
  left: 0;
  top: 0;
}

.swiper-vertical > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-vertical,
.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
  width: 4px;
  height: 100%;
  left: 0;
  top: 0;
}

.swiper-pagination-lock {
  display: none;
}

/* Scrollbar */
.swiper-scrollbar {
  border-radius: 10px;
  position: relative;
  -ms-touch-action: none;
  background: rgba(0, 0, 0, 0.1);
}

.swiper-horizontal > .swiper-scrollbar {
  position: absolute;
  left: 1%;
  bottom: 3px;
  z-index: 50;
  height: 5px;
  width: 98%;
}

.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 {
  cursor: move;
}

.swiper-scrollbar-lock {
  display: none;
}

.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.swiper-zoom-container > img,
.swiper-zoom-container > svg,
.swiper-zoom-container > canvas {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.swiper-slide-zoomed {
  cursor: move;
}

/* Preloader */
:root {
  /*
  --swiper-preloader-color: var(--swiper-theme-color);
  */
}

.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:not(.swiper-watch-progress) .swiper-lazy-preloader,
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
  animation: swiper-preloader-spin 1s infinite linear;
}

.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}

.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}

@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* a11y */
.swiper .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}

.swiper-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}

.swiper-grid > .swiper-wrapper {
  flex-wrap: wrap;
}

.swiper-grid-column > .swiper-wrapper {
  flex-wrap: wrap;
  flex-direction: column;
}

.swiper-fade.swiper-free-mode .swiper-slide {
  transition-timing-function: ease-out;
}

.swiper-fade .swiper-slide {
  pointer-events: none;
  transition-property: opacity;
}

.swiper-fade .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-fade .swiper-slide-active,
.swiper-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-cube {
  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-slide .swiper-slide {
  pointer-events: none;
}

.swiper-cube.swiper-rtl .swiper-slide {
  transform-origin: 100% 0;
}

.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-next,
.swiper-cube .swiper-slide-prev,
.swiper-cube .swiper-slide-next + .swiper-slide {
  pointer-events: auto;
  visibility: visible;
}

.swiper-cube .swiper-slide-shadow-top,
.swiper-cube .swiper-slide-shadow-bottom,
.swiper-cube .swiper-slide-shadow-left,
.swiper-cube .swiper-slide-shadow-right {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.swiper-cube .swiper-cube-shadow {
  position: absolute;
  left: 0;
  bottom: 0px;
  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;
  -webkit-filter: blur(50px);
          filter: blur(50px);
}

.swiper-flip {
  overflow: visible;
}

.swiper-flip .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
}

.swiper-flip .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-flip .swiper-slide-active,
.swiper-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-flip .swiper-slide-shadow-top,
.swiper-flip .swiper-slide-shadow-bottom,
.swiper-flip .swiper-slide-shadow-left,
.swiper-flip .swiper-slide-shadow-right {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.swiper-creative .swiper-slide {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
  transition-property: transform, opacity, height;
}

.swiper-cards {
  overflow: visible;
}

.swiper-cards .swiper-slide {
  transform-origin: center bottom;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
}

@font-face {
  font-family: "iconfont";
  src: url("../images/ui/iconfont.woff?49428") format("woff");
}

.icon {
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  /* speak: none; only necessary if not using the private unicode range (firstGlyph option) */
  text-decoration: none;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon::before {
  font-family: "iconfont";
}

.icon--arrow-left::before {
  content: "\EA01";
}

.icon--arrow-right::before {
  content: "\EA02";
}

.icon--cancel::before {
  content: "\EA03";
}

.icon--checkbox-on::before, .checkbox :checked ~ .icon--checkbox::before {
  content: "\EA04";
}

.icon--checkbox::before {
  content: "\EA05";
}

.icon--clear::before {
  content: "\EA06";
}

.icon--close::before {
  content: "\EA07";
}

.icon--desktop::before {
  content: "\EA08";
}

.icon--done::before {
  content: "\EA09";
}

.icon--download::before {
  content: "\EA0A";
}

.icon--filter::before {
  content: "\EA0B";
}

.icon--gesture-password::before {
  content: "\EA0C";
}

.icon--gototop::before {
  content: "\EA0D";
}

.icon--keypad::before {
  content: "\EA0E";
}

.icon--lock::before {
  content: "\EA0F";
}

.icon--menu::before {
  content: "\EA10";
}

.icon--mobile::before {
  content: "\EA11";
}

.icon--my-account::before {
  content: "\EA12";
}

.icon--pause::before {
  content: "\EA13";
}

.icon--play::before {
  content: "\EA14";
}

.icon--refresh::before {
  content: "\EA15";
}

.icon--shield::before {
  content: "\EA16";
}

.icon--visibility-off::before {
  content: "\EA17";
}

.icon--visibility::before {
  content: "\EA18";
}

.icon--wap::before {
  content: "\EA19";
}

.icon--sport1::before {
  content: "\EA1A";
}

.icon--sport2::before {
  content: "\EA1B";
}

.icon--sport5::before {
  content: "\EA1C";
}

.icon--sport50::before {
  content: "\EA1D";
}

.icon--sport997::before {
  content: "\EA1E";
}

.icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-self: center;
  line-height: 1;
  font-size: 1.5rem;
  position: relative;
}

.icon + .text, .icon + .icon, .icon + .label {
  margin-left: .5rem;
}

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: .125rem .5rem;
  min-height: 36px;
  border-radius: .25rem;
  text-align: center;
  outline: none;
  cursor: pointer;
}

.btn--icon {
  padding: 0;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}

.btn--primary {
  color: HSLA(var(--white-opacity-1));
  background-color: HSL(var(--primary-200));
}

.btn--primary:hover {
  background-color: HSL(var(--primary-100));
}

.btn--secondary {
  color: HSLA(var(--btn-secondary-color));
  background-color: HSL(var(--btn-secondary-bg));
}

.btn--secondary:hover {
  background-color: HSL(var(--btn-secondary-hover-bg));
}

.btn--gototop {
  border-radius: 100%;
  background-image: var(--icon-graident-bg);
  position: fixed;
  z-index: 2;
  right: 1rem;
  bottom: 1rem;
  opacity: var(--opacity);
}

.btn--gototop[data-open="true"] {
  bottom: 1rem;
  transition: bottom 1s ease;
}

.btn--gototop[data-open="false"] {
  bottom: -10%;
  transition: bottom 1s ease;
}

.btn--submit {
  background-color: HSL(var(--primary-200));
}

.btn--submit .text {
  color: HSLA(var(--white-opacity-1));
}

.btn--submit:hover {
  -webkit-filter: brightness(1.1);
          filter: brightness(1.1);
}

.btn--nav {
  display: flex;
}

.btn--nav .iconani-nav {
  width: 18px;
  height: 18px;
  position: relative;
}

.btn--nav .iconani-nav__stick {
  display: block;
  background-color: HSL(var(--white));
  position: absolute;
  width: 18px;
  height: .125rem;
  top: 50%;
  transform: translateY(50%);
}

[data-open="false"] .btn--nav .iconani-nav__stick:nth-child(1) {
  animation: nav_close_down .4s forwards;
}

[data-open="false"] .btn--nav .iconani-nav__stick:nth-child(2) {
  transform: translateY(50%);
}

[data-open="false"] .btn--nav .iconani-nav__stick:nth-child(3) {
  animation: nav_close_up .4s forwards;
}

[data-open="true"] .btn--nav .iconani-nav__stick:nth-child(1), [data-open="true"] .btn--nav .iconani-nav__stick:nth-child(2) {
  animation: nav_open_down .4s forwards;
}

[data-open="true"] .btn--nav .iconani-nav__stick:nth-child(3) {
  animation: nav_open_up .4s forwards;
}

@keyframes nav_open_down {
  0% {
    transform: translateY(calc( 50% - (.25rem + .125rem))) rotate(0);
  }
  50% {
    transform: translateY(50%) rotate(0);
  }
  100% {
    transform: translateY(50%) rotate(-45deg);
  }
}

@keyframes nav_open_up {
  0% {
    transform: translateY(calc( 50% + .25rem)) rotate(0);
  }
  50% {
    transform: translateY(50%) rotate(0);
  }
  100% {
    transform: translateY(50%) rotate(45deg);
  }
}

@keyframes nav_close_down {
  0% {
    transform: translateY(50%) rotate(-45deg);
  }
  50% {
    transform: translateY(50%) rotate(0);
  }
  100% {
    transform: translateY(calc( 50% - (.25rem + .125rem))) rotate(0);
  }
}

@keyframes nav_close_up {
  0% {
    transform: translateY(50%) rotate(45deg);
  }
  50% {
    transform: translateY(50%) rotate(0);
  }
  100% {
    transform: translateY(calc( 50% + (.25rem + .125rem))) rotate(0);
  }
}

.btn[data-disable="true"] {
  pointer-events: none;
  color: HSLA(var(--grey-400));
  background-color: HSL(var(--grey-300));
}

.btn + .btn, .btn + .dropdown {
  margin-left: .5rem;
}

.text,
[class^="text-"] {
  word-break: break-word;
}

.text:empty,
[class^="text-"]:empty {
  margin: 0 !important;
  padding: 0 !important;
}

.text + .icon,
.text + .badge,
.text + .btn,
.text + .lang, .text jb6e + .dropdown,
.text + .text,
[class^="text-"] + .icon,
[class^="text-"] + .badge,
[class^="text-"] + .btn,
[class^="text-"] + .lang,
[class^="text-"] jb6e + .dropdown,
[class^="text-"] + .text {
  margin-left: .5rem;
}

.text-primary {
  color: HSL(var(--text-primary));
}

.text-highlight {
  color: HSL(var(--text-secondary));
}

.text--small {
  font-size: .75rem;
}

[data-layout="desktop"] .text--small {
  font-size: .875rem;
}

.checkbox,
.radio {
  display: inline-flex;
  align-items: center;
  margin: 0;
  min-width: 0;
  vertical-align: middle;
  font-weight: normal;
  outline: none;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  border-color: transparent;
  background-origin: border-box;
}

.checkbox input,
.radio input {
  width: 0;
  height: 0;
  margin: 0;
  opacity: 0;
  -webkit-appearance: none;
          appearance: none;
}

.checkbox input[type="checkbox"],
.radio input[type="checkbox"] {
  margin: 0;
}

.checkbox input[type="radio"],
.radio input[type="radio"] {
  margin: 0;
}

.checkbox .text,
.radio .text {
  color: HSL(var(--white-opacity-1));
}

.checkbox .icon--checkbox {
  color: HSL(var(--checkbox-icon));
}

.checkbox :checked ~ .icon--checkbox {
  color: HSL(var(--checkbox-checked-icon));
}

.checkbox + .checkbox,
.radio + .checkbox {
  margin-left: 1rem;
}

.textfield {
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  padding: 0;
  background-color: transparent;
  border-width: 1px;
  border-color: transparent;
  border-radius: .375rem;
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.textfield:focus, .textfield[data-focus="true"] {
  background-color: inherit;
  border-width: 1px;
  border-color: HSL(var(--secondary-100));
}

input.textfield__input {
  flex: 1 1 auto;
  width: inherit;
  height: inherit;
  padding: 0 .75rem;
  color: HSL(var(--white-opacity-1));
  text-align: left;
  border: none;
  border-radius: inherit;
  background: none;
  outline: none;
  resize: none;
}

input.textfield__input::-webkit-input-placeholder {
  color: HSLA(var(--white), 0.6);
}

input.textfield__input:disabled::-webkit-input-placeholder {
  color: HSL(var(--white-opacity-1)) !important;
}

input.textfield__input:disabled ~ * {
  background-color: HSLA(var(--primary-100), 0.5) !important;
}

input.textfield__input:disabled ~ .c-btn {
  pointer-events: none;
  opacity: .24 !important;
}

input.textfield__input:disabled ~ .c-btn::before {
  display: none;
}

input.textfield__input:invalid ~ .textfield__bg {
  border-width: 1px;
  border-color: red;
}

input.textfield__input:-webkit-autofill, input.textfield__input:-webkit-autofill:hover, input.textfield__input:-webkit-autofill:focus, input.textfield__input:-webkit-autofill:active {
  -webkit-text-fill-color: HSLA(var(--input-autofill-text, var(--white-opacity-1)));
  -webkit-box-shadow: 0 0 0px 1000px HSLA(var(--input-autofill-bg, var(--primary-100))) inset;
  transition: background-color 5000s ease-in-out 0s;
  border-radius: 0;
  width: auto;
}

.textfield__bg {
  background-color: HSL(var(--textfield-bg));
  border-radius: inherit;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

.textfield__icon {
  height: 22px;
  padding: 0 .75rem;
  border-right-width: 1px;
  border-right-color: HSL(var(--white-opacity-1));
}

.textfield .btn {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  margin-right: .75rem;
  position: relative;
}

.textfield .btn[data-selected="true"] .icon--visibility {
  opacity: 1;
  visibility: visible;
}

.textfield .btn[data-selected="true"] .icon--visibility-off {
  opacity: 0;
  visibility: hidden;
}

.textfield .btn .icon {
  position: absolute;
}

.textfield .btn .icon--visibility {
  opacity: 0;
  visibility: hidden;
}

.textfield .btn .icon--visibility-off {
  opacity: 1;
  visibility: visible;
}

.textfield .btn .icon + .icon {
  margin-left: 0;
}

.textfield .icon {
  font-size: 1.375rem;
}

.tabs {
  display: flex;
}

.tabs .tab[data-selected="true"] {
  color: HSL(var(--tabs-tab-selected-text));
}

.tabs .tab[data-selected="true"] .btn:hover {
  cursor: default;
}

.tabs__content {
  flex: 1;
  display: flex;
}

.tabs__content .btn {
  flex: 1;
}

.tabs .tab {
  flex: 1;
  display: flex;
  color: HSL(var(--white-opacity-2));
  white-space: nowrap;
  transition: ease .2s;
}

.tabs .tab::after {
  transition: ease .2s;
}

.tabs--pills .tab {
  border-width: 1px;
  border-color: HSL(var(--tabs-pills-tab-border));
  border-radius: var(--border-radius);
}

.tabs--pills .tab[data-selected="true"] {
  pointer-events: none;
  color: HSL(var(--tabs-pills-tab-selected-text));
  background-color: HSL(var(--tabs-pills-tab-selected-bg));
}

.tabs--pills .tab + .tab {
  margin-left: .5rem;
}

.tabs--pills .icon {
  font-size: 1.25rem;
}

.tabs--pills .icon + .text {
  margin-left: .25rem;
}

.tabs--underline {
  border-bottom: 1px solid HSL(var(--white-opacity-4));
}

.tabs--underline .tab {
  position: relative;
}

.tabs--underline .tab::after {
  content: "";
  display: block;
  height: 2px;
  margin: auto;
  background-color: HSL(var(--secondary-300));
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0px;
  transform: scaleX(0);
}

.tabs--underline .tab[data-selected="true"]::after {
  transform: scaleX(1);
}

.tabs--date[data-open="false"] {
  display: none;
  visibility: visible;
}

.tabs--date .tab {
  padding-bottom: .375rem;
}

.tabs--date .btn {
  flex-direction: column;
  line-height: 1.2;
}

.tabs--date .text + .text {
  margin-left: 0;
}

[data-layout="desktop"] .tabs--pills .tab {
  min-height: 42px;
  font-size: 1.125rem;
}

[data-layout="desktop"] .tabs--pills .tab:hover {
  background-color: HSLA(var(--primary-300), 0.5);
}

[data-layout="desktop"] .tabs--pills .tab[data-selected="true"]:hover {
  background-color: HSL(var(--primary-100));
}

[data-layout="desktop"] .tabs--underline .tab {
  font-size: 1.375rem;
}

[data-layout="desktop"] .tabs--underline .tab:hover {
  opacity: .9;
  transform: scale(0.9);
}

[data-layout="desktop"] .tabs--underline .tab[data-selected="true"]:hover {
  opacity: 1;
  transform: scale(1);
}

[data-layout="mobile"] .tabs__content {
  overflow-x: auto;
  max-width: 100%;
}

[data-layout="mobile"] .tabs .tab {
  font-size: 1rem;
}

.switch-bar {
  display: flex;
}

.switch-bar .btn {
  color: HSL(var(--white-opacity-2));
  border-radius: 0;
  position: relative;
}

.switch-bar .btn:hover .text {
  opacity: .9;
  transform: scale(0.9);
}

.switch-bar .btn::after {
  content: "";
  display: block;
  height: 2px;
  margin: auto;
  background-color: HSL(var(--switch-bar-btn-after-bg));
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0px;
  transform: scaleX(0);
  transition: ease .2s;
}

.switch-bar .btn[data-selected="true"] {
  color: HSL(var(--white-opacity-1));
  cursor: default;
}

.switch-bar .btn[data-selected="true"]:hover .text {
  transform: scale(1);
}

.switch-bar .btn[data-selected="true"]::after {
  transform: scaleX(1);
}

.switch-bar .btn + .btn::before {
  content: '';
  display: block;
  height: 50%;
  width: 1px;
  background-color: HSL(var(--white-opacity-4));
  position: absolute;
  left: -4vw;
}

.switch-bar .btn .text {
  transition: ease .3s;
}

[data-layout="desktop"] .switch-bar .btn {
  min-height: 3.125rem;
  font-size: 1.25rem;
}

[data-layout="mobile"] .switch-bar .btn {
  font-size: 1rem;
}

.dropdown {
  display: inline-flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
  vertical-align: middle;
  color: inherit;
  background-color: inherit;
  z-index: 2;
}

.dropdown__container {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
  min-width: 180px;
  margin: 1.375rem 0;
  padding: 0;
  color: HSL(var(--white-opacity-1));
  background-color: HSL(var(--dropdown-container-bg));
  border-radius: .375rem;
  box-shadow: 0 2px 4px HSL(var(--black-opacity-2));
  transition: ease 0.2s;
  visibility: hidden;
  opacity: 0;
}

.dropdown__container::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -.75rem;
  left: .875rem;
  background-color: transparent;
  border-width: 0 .625rem 1rem;
  border-color: transparent transparent HSL(var(--dropdown-container-bg));
}

.dropdown[data-open="true"] .dropdown__container {
  visibility: visible;
  opacity: 1;
}

.dropdown__list {
  display: flex;
  flex-direction: column;
  min-height: 1px;
  max-height: 50vh;
  background-color: inherit;
  border-radius: inherit;
  overflow-y: auto;
}

.dropdown__item {
  flex: 0 0 auto;
  background-color: inherit;
  padding: 0;
  border-top-width: 1px;
  border-top-color: HSL(var(--dropdown-item-border));
}

.dropdown__item:first-child {
  border-top: 0;
}

.dropdown__item[data-selected="true"] .text {
  color: HSL(var(--secondary-50));
}

.dropdown__item .btn {
  width: 100%;
  border-radius: 0;
}

.dropdown__item .btn .text {
  width: inherit;
}

.dropdown--primary {
  color: HSLA(var(--white-opacity-1));
  background-color: HSL(var(--primary-100));
}

.dropdown--primary .dropdown__item .btn:hover {
  background-color: HSL(var(--primary-500));
}

.dropdown + .icon, .dropdown + .text, .dropdown + .btn, .dropdown + .badge, .dropdown + .dropdown {
  margin-left: .5rem;
}

.tooltip {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: .375rem .5rem;
  background-color: var(--tooltip-bg, #fff9e6);
  color: HSLA(var(--tooltip-text, var(--black-opacity-1)));
  visibility: hidden;
  opacity: 0;
  position: absolute;
  left: 0;
  z-index: 1;
  -webkit-filter: drop-shadow(0 0 0.125rem rgba(0, 0, 0, 0.38));
          filter: drop-shadow(0 0 0.125rem rgba(0, 0, 0, 0.38));
  border-radius: .25rem;
  transition: ease 0.2s;
}

.tooltip__content {
  padding: .5rem;
}

.tooltip__content [class*="c-text"] + [class*="c-text"] {
  margin-top: .25rem;
}

.tooltip__content .c-checkbox {
  margin-top: .25rem;
}

.tooltip::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: calc(50% - (0.625rem / 2));
  height: 0.625rem;
  width: 0.625rem;
  background-color: inherit;
  transform: rotate(45deg);
}

.tooltip[data-open="true"] {
  visibility: visible;
  opacity: 1;
}

.tooltip > * {
  position: relative;
  z-index: 1;
}

.tooltip > .c-icon {
  align-self: stretch;
}

.tooltip .c-text {
  display: block;
  align-self: stretch;
  padding: .125rem 0;
  text-align: left;
}

.tooltip > .c-btn + .c-text {
  margin-left: .5rem;
}

.tooltip .c-btn--clear {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
}

.tooltip--top, [class*="tooltip--top"] {
  bottom: 100%;
  margin-bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.tooltip--top::before, [class*="tooltip--top"]::before {
  top: 100%;
  margin-top: -0.3125rem;
}

.tooltip--top[data-open="true"], [data-open="true"][class*="tooltip--top"] {
  margin-bottom: .25rem;
}

.tooltip--bottom, [class*="tooltip--bottom"] {
  top: 100%;
  margin-top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.tooltip--bottom::before, [class*="tooltip--bottom"]::before {
  bottom: 100%;
  margin-bottom: -0.3125rem;
}

.tooltip--bottom[data-open="true"], [data-open="true"][class*="tooltip--bottom"] {
  margin-top: .25rem;
}

.tooltip--hr-left {
  left: 0;
  transform: translateX(-100%);
}

.tooltip--hr-left::before {
  margin-top: -0.3125rem;
  margin-right: -0.3125rem;
  left: auto;
  right: 0;
  top: 50%;
  transform: rotate(-45deg);
}

.tooltip--hr-right {
  right: 0;
  transform: translateX(100%);
}

.tooltip--hr-right::before {
  margin-top: -0.3125rem;
  margin-left: -0.3125rem;
  left: 0;
  top: 50%;
  transform: rotate(-45deg);
}

.tooltip--top-left, .tooltip--bottom-left {
  left: 0;
  transform: translateX(0);
}

.tooltip--top-left::before, .tooltip--bottom-left::before {
  left: 1.25rem;
}

.tooltip--top-right, .tooltip--bottom-right {
  left: auto;
  right: 0;
  transform: translateX(0);
}

.tooltip--top-right::before, .tooltip--bottom-right::before {
  left: auto;
  right: 1.25rem;
}

.flag {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  background-image: url("../images/ui/language_flags.png?61383");
  background-size: 100% auto;
  border-radius: 50%;
  border-width: 1px;
  border-color: HSL(var(--white-opacity-1));
}

.flag--vn {
  background-position-y: 0;
}

.flag--en {
  background-position-y: 33.33%;
}

.flag--ch {
  background-position-y: 66.66%;
}

.flag--jp {
  background-position-y: 100%;
}

.flag + .text, .flag + .icon {
  margin-left: .5rem;
}

.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transition: ease 0.2s;
  z-index: 99;
}

.modal:after {
  content: '';
  display: block;
  background-color: HSLA(var(--black), 0.6);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
}

.modal[data-open="true"] {
  visibility: visible;
  opacity: 1;
}

.modal[data-open="false"] {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.modal__dialog {
  display: flex;
  flex-direction: column;
  width: 90%;
  padding: 2rem 0;
  background-color: HSL(var(--modal-dialog-bg), 0.8);
  border-width: 1px;
  border-color: HSL(var(--modal-dialog-border));
  border-radius: .375rem;
  position: relative;
}

.modal__close {
  position: absolute;
  margin-top: -6rem;
  right: -.25rem;
}

.modal__close .icon {
  font-size: 36px;
}

.modal__header {
  display: flex;
  justify-content: center;
  padding-bottom: 0.5rem;
  margin: 0 auto 1rem;
  font-size: 1.25rem;
  border-bottom: 2px solid HSL(var(--modal-header-border));
}

.modal__body {
  flex: 1;
  display: flex;
  justify-content: center;
  min-height: 0;
  padding: 1.5rem 1.25rem;
  text-align: center;
}

.modal__footer {
  display: flex;
  justify-content: center;
  padding: 1.5rem 1.25rem;
}

.modal--um .modal__close {
  position: absolute;
  right: -.25rem;
}

.modal--um .modal__dialog {
  min-height: 260px;
}

.modal--um .modal__header {
  font-weight: 700;
}

.modal--um .modal__body {
  flex: 0 1 auto;
  flex-wrap: wrap;
  padding: 0 1rem;
  color: HSL(var(--modal-um-body-text));
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 400;
}

.modal--um [class*="text-"] {
  flex: 1 0 auto;
  display: inline-flex;
}

.modal--um .text-highlight {
  font-weight: 700;
}

.modal--um .text-group .text-highlight {
  font-size: 1.125rem;
}

.modal--um .text-gmt {
  align-items: center;
}

.modal--um .text-col {
  flex-direction: column;
}

.modal--um .text-col [class*="text-"] {
  justify-content: flex-end;
}

.modal--um .text-col:nth-child(2) {
  margin: 0 .25rem;
}

.modal--um .text + .text {
  margin-left: 0;
}

.modal--um p {
  margin: 0;
}

.modal--um p + p {
  margin-top: .25rem;
}

.modal--um p:last-child {
  font-size: 1.125rem;
}

[data-layout="desktop"] .modal--um .modal__dialog, [data-layout="desktop"] .modal--login .modal__dialog {
  width: 400px;
}

[data-layout="desktop"] .modal__close .btn {
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;
}

[data-layout="desktop"] .modal__close .btn .icon {
  font-size: 50px;
}

[data-layout="desktop"] .modal__header .text {
  font-size: 1.375rem;
}

[data-layout="mobile"] .modal__close {
  margin-top: -3rem;
}

[data-layout="mobile"] .modal--um .modal__close {
  margin-top: -5rem;
}

[data-layout="mobile"] .modal--um .modal__dialog {
  max-width: 350px;
}

[data-layout="mobile"] .modal--um .modal__body {
  font-size: .875rem;
}

[data-layout="mobile"] .modal--um p:last-child {
  font-size: 1rem;
}

.platform-list,
.language-list {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  padding: 1.25rem .75rem;
}

.platform-list__header .text,
.language-list__header .text {
  opacity: .8;
}

.platform-list__item,
.language-list__item {
  display: flex;
  border-top-width: 1px;
  border-top-color: HSL(var(--list-item-border));
}

.platform-list__item:first-child,
.language-list__item:first-child {
  border-top: 0;
}

.platform-list__item:last-child .btn,
.language-list__item:last-child .btn {
  border-bottom-left-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}

.platform-list__item[data-selected="true"] .btn,
.language-list__item[data-selected="true"] .btn {
  pointer-events: none;
  color: HSL(var(--list-item-selected-btn-text));
}

.platform-list__item[data-selected="true"] .btn .icon,
.language-list__item[data-selected="true"] .btn .icon {
  visibility: visible;
  opacity: 1;
}

.platform-list__item[data-selected="false"] .icon--done,
.language-list__item[data-selected="false"] .icon--done {
  display: none;
  opacity: 0;
  visibility: hidden;
}

.platform-list__item .btn,
.language-list__item .btn {
  flex: 1;
  padding: .75rem .375rem;
  border-radius: 0;
  transition: ease .2s;
}

.platform-list__item .btn .text,
.language-list__item .btn .text {
  flex: 1;
  text-align: left;
}

.platform-list__item .btn .icon:not(.icon--done):not(.icon--arrow-right),
.language-list__item .btn .icon:not(.icon--done):not(.icon--arrow-right) {
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 1rem;
  color: HSL(var(--white-opacity-1));
  border-radius: 50%;
  background-image: var(--icon-graident-bg);
}

.platform-list__item .btn .icon:last-child,
.language-list__item .btn .icon:last-child {
  font-size: 1rem;
}

[data-layout="desktop"] .platform-list, [data-layout="desktop"]
.language-list {
  padding: 0;
}

[data-layout="desktop"] .platform-list__header, [data-layout="desktop"]
.language-list__header {
  padding: .5rem .75rem;
}

[data-layout="desktop"] .platform-list__item[data-selected="true"] .btn:hover, [data-layout="desktop"]
.language-list__item[data-selected="true"] .btn:hover {
  background-color: HSL(var(--primary-300));
}

[data-layout="desktop"] .platform-list__item .btn:hover, [data-layout="desktop"]
.language-list__item .btn:hover {
  background-color: HSL(var(--list-item-btn-hover));
}

[data-layout="mobile"] .platform-list__header, [data-layout="mobile"]
.language-list__header {
  padding-bottom: 1rem;
}

.preloader {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 1rem;
}

.preloader__spiner {
  display: inline-flex;
  position: relative;
  width: 36px;
  height: 36px;
  align-self: center;
  font-size: 0;
  border-color: HSLA(var(--preloader-border, var(--primary-100)));
  /* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
  animation: container-rotate 1568ms linear infinite;
}

@keyframes container-rotate {
  to {
    transform: rotate(360deg);
  }
}

.preloader__circles {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  border-color: inherit;
  opacity: 1;
  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

@keyframes fill-unfill-rotate {
  12.5% {
    transform: rotate(135deg);
  }
  25% {
    transform: rotate(270deg);
  }
  37.5% {
    transform: rotate(405deg);
  }
  50% {
    transform: rotate(540deg);
  }
  62.5% {
    transform: rotate(675deg);
  }
  75% {
    transform: rotate(810deg);
  }
  87.5% {
    transform: rotate(945deg);
  }
  to {
    transform: rotate(1080deg);
  }
}

.preloader__circle-1, .preloader__circle-2 {
  display: inline-block;
  position: relative;
  width: 50%;
  height: 100%;
  overflow: hidden;
  border-color: inherit;
}

.preloader__circle-1::before, .preloader__circle-2::before {
  content: "";
  width: 200%;
  height: 100%;
  box-sizing: border-box;
  border-width: 3px;
  border-style: solid;
  border-color: inherit;
  border-bottom-color: transparent !important;
  border-radius: 50%;
  animation: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
}

.preloader__circle-1::before {
  left: 0;
  border-right-color: transparent !important;
  transform: rotate(129deg);
  animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.preloader__circle-2::before {
  left: -100%;
  border-left-color: transparent !important;
  transform: rotate(-129deg);
  animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

@keyframes left-spin {
  from {
    transform: rotate(130deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  to {
    transform: rotate(130deg);
  }
}

@keyframes right-spin {
  from {
    transform: rotate(-130deg);
  }
  50% {
    transform: rotate(5deg);
  }
  to {
    transform: rotate(-130deg);
  }
}

.preloader--overlay {
  flex: 1;
  background-color: HSLA(var(--body-bg, var(--primary-600)));
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

.preloader--overlay[data-open="false"] {
  transition: all .2s ease;
  opacity: 0;
  visibility: hidden;
}

.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
}

.main {
  flex: 1;
  min-height: 0;
}

.main__content {
  background-color: HSL(var(--main-content-bg));
}

.main [class*="tabs--"] {
  justify-content: center;
}

[data-layout="desktop"] .main {
  max-width: 1366px;
  margin: 2.25rem auto 2.75rem;
  padding-left: .75rem;
  padding-right: .75rem;
}

[data-layout="desktop"] .main__content {
  margin: 1rem 0;
  border-width: 1px;
  border-color: HSL(var(--main-content-border));
  border-radius: var(--border-radius);
  position: relative;
}

[data-layout="desktop"] .main__content:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  margin-bottom: -10px;
  border-radius: var(--border-radius);
  background-image: var(--main-content-after-bg-img);
}

[data-layout="desktop"] .main .tabs__content {
  max-width: calc( 100% - 40%);
}

@media (min-width: 769px) and (max-width: 1023px) {
  [data-layout="desktop"] .main .tabs__content {
    max-width: calc( 100% - 30%);
  }
}

[data-layout="desktop"] .main .tabs--underline.tabs--date .tab {
  margin: 0 2vw;
}

[data-layout="desktop"] .main .tabs--underline .tab:first-child[role="mobile-visible"] {
  display: none;
}

[data-layout="mobile"] .main__content {
  margin: .5rem;
  padding: .375rem;
  border-radius: var(--border-radius);
}

[data-layout="mobile"] .main .tabs--underline.tabs--date .tab {
  margin: 0 .375rem;
}

.footer {
  display: flex;
  justify-content: center;
  padding: .375rem 0;
  min-height: 45px;
  background-color: var(--footer-bg);
}

.footer__main {
  display: flex;
  align-items: center;
  text-align: center;
}

.footer__main .text {
  color: HSL(var(--grey-400));
}

.topbar {
  flex: 1 1 auto;
  display: flex;
  width: 100%;
  min-height: var(--topbar-height);
  color: var(--topbar-text);
  background-color: var(--topbar-bg);
}

.announce {
  display: flex;
  align-items: center;
  max-width: 1366px;
  margin: auto;
  width: 100%;
  padding: 0 0.5rem;
}

.announce__content {
  flex: 1;
  max-height: 22px;
  text-align: center;
  overflow: hidden;
}

[data-layout="mobile"] .announce__content {
  text-align: left;
}

.announce .text {
  flex: 1;
}

.topbar + .header + .side-nav[data-open="true"] .btn--nav {
  top: 0;
}

.topbar + .header + .side-nav .btn--nav {
  top: var(--topbar-height);
}

.header {
  display: flex;
  justify-content: center;
  min-height: 52px;
  position: relative;
}

.header__main {
  flex: 1;
  display: flex;
  max-width: 1366px;
  justify-content: center;
  padding: .25rem .75rem;
}

.header-logo {
  display: flex;
  align-items: center;
  --logo-default-width: 180px;
  --logo-default-height: 60px;
}

.header-logo::before {
  content: "";
  display: inline-block;
  line-height: 1;
  min-width: var(--header-logo-width);
  height: var(--header-logo-height);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}

.header-nav {
  flex: 1 1 auto;
}

.header-nav__product {
  display: flex;
  justify-content: center;
  padding: 0;
  background-color: HSL(var(--header-nav-product-bg));
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transition: ease 0.2s;
  z-index: 2;
}

.header-nav__product.is-hover {
  max-height: 360px;
  padding: 1.75rem 0;
}

.header-nav__main {
  display: flex;
  margin: auto;
}

.header-nav__item {
  flex: 0 0 auto;
  display: flex;
}

.header-nav__item .btn .text {
  text-align: center;
  white-space: nowrap;
  transition: ease .2s;
}

.header-option {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  margin-left: auto;
}

.header-option .dropdown {
  flex: 0 0 auto;
  align-items: center;
  margin-left: 0;
  padding: 0 1vw;
  transition: ease .2s;
}

@media (min-width: 1024px) and (max-width: 1366px) {
  .header-option .dropdown {
    padding: 0 .75vw;
  }
}

.header-option .dropdown .btn--icon {
  width: 28px;
  height: 28px;
  min-width: inherit;
  min-height: inherit;
  border-radius: 50%;
  background-image: var(--icon-graident-bg);
}

.header-option .dropdown .btn--icon .icon {
  font-size: 1.25rem;
}

.header-option .dropdown .btn--icon .flag {
  width: inherit;
  height: inherit;
}

.header-option .dropdown .text {
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 1;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  font-size: .75rem;
  margin-top: 0.125rem;
  color: HSLA(var(--header-option-dropdown-text));
}

.header-option .dropdown + .dropdown {
  border-left-width: 1px;
  border-left-color: HSL(var(--primary-300));
}

.header-option > .btn {
  min-height: 32px;
  font-size: 1rem;
}

.header-menu {
  display: flex;
  align-items: center;
  margin-left: .5rem;
}

.header-menu .btn {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
}

.header .is-hover {
  visibility: visible;
  opacity: 1;
}

[data-layout="desktop"] .header {
  min-height: 70px;
  background-color: var(--header-bg);
  box-shadow: inset 0px -0.5px 0px var(--header-box-shadow);
}

[data-layout="desktop"] .header-nav {
  display: flex;
}

[data-layout="desktop"] .header-nav__item .btn {
  padding: 0 .5vw;
}

[data-layout="desktop"] .header-nav__item:hover {
  color: HSL(var(--header-nav-item-hover-text));
}

[data-layout="desktop"] .header-nav__item .text {
  font-size: 1rem;
}

@media (min-width: 769px) and (max-width: 1023px) {
  [data-layout="desktop"] .header-nav {
    display: none;
  }
}

[data-layout="desktop"] .header-logo::before {
  min-width: var(--header-logo-width);
  height: var(--header-logo-height);
}

@media (min-width: 1024px) and (max-width: 1366px) {
  [data-layout="desktop"] .header-logo::before {
    min-width: 130px;
  }
}

[data-layout="desktop"] .header-option .platform-list__item .btn, [data-layout="desktop"] .header-option .language-list__item .btn {
  padding: .25rem .75rem;
}

[data-layout="desktop"] .header-option .dropdown > .btn:hover {
  -webkit-filter: brightness(125%);
          filter: brightness(125%);
}

[data-layout="desktop"] .header-option .dropdown .text {
  display: inline-flex;
}

@media (min-width: 1366px) {
  [data-layout="desktop"] .header-option .dropdown {
    padding: 0 1rem;
  }
  [data-layout="desktop"] .header-option .dropdown__container {
    left: .5rem;
  }
}

[data-layout="desktop"] .header-option > .btn {
  padding: .5rem 1vw;
}

@media (min-width: 1024px) and (max-width: 1366px) {
  [data-layout="desktop"] .header-option > .btn {
    padding-right: .5vw;
    padding-left: .5vw;
  }
}

[data-layout="mobile"] .header {
  min-height: 60px;
}

[data-layout="mobile"] .header-logo::before {
  min-width: var(--header-logo-width);
  height: var(--header-logo-height);
}

[data-layout="mobile"] .header-option {
  flex-wrap: wrap;
  justify-content: center;
  margin-right: calc( 50px * 0.75);
  min-width: 15%;
}

[lang="cs"] [data-layout="mobile"] .header-option, [lang="ch"] [data-layout="mobile"] .header-option, [lang="zhcn"] [data-layout="mobile"] .header-option {
  min-width: 13.5%;
}

[lang="jp"] [data-layout="mobile"] .header-option {
  min-width: 21%;
}

[lang="vn"] [data-layout="mobile"] .header-option, [lang="vi-VN"] [data-layout="mobile"] .header-option, [lang="id-ID"] [data-layout="mobile"] .header-option {
  min-width: 25%;
}

[data-layout="mobile"] .header-option > .btn {
  padding: 0 0.75rem;
}

.dropdown + .btn {
  margin-left: 0;
}

[data-layout="mobile"] .header-option > .text {
  flex: 0 0 auto;
  display: flex;
  order: -1;
  width: 100%;
  min-height: 20px;
  position: relative;
  top: -.125rem;
}

[data-layout="mobile"] .header-option > .text::before {
  content: attr(data-value);
  display: inline-flex;
  justify-content: center;
  padding: 0 0.25rem;
  color: HSL(var(--header-login-text-before-text, var(--white-opacity-1)));
  line-height: 1.15;
  white-space: nowrap;
  background-color: HSL(var(--header-login-text-before-bg, var(--primary-500)));
  position: absolute;
  top: 2px;
  right: 50%;
  transform: translate(50%, 0);
  z-index: 1;
}

[data-layout="mobile"] .header-option > .text::after {
  content: '';
  display: inline-flex;
  background-color: HSL(var(--header-login-text-before-text, var(--white-opacity-1)));
  margin: auto;
  width: calc(100% - 0.5rem);
  height: 1px;
  position: absolute;
  top: 11px;
  left: 0;
  right: 0;
}

[lang="jp"] .header-nav__item .btn, [lang="vn"] .header-nav__item .btn, [lang="vi-VN"] .header-nav__item .btn {
  padding-left: .375vw;
  padding-right: .375vw;
}

[lang="jp"] .header-nav__item .text, [lang="vn"] .header-nav__item .text, [lang="vi-VN"] .header-nav__item .text {
  font-size: .875rem;
}

[lang="jp"] .header-option > .btn, [lang="vn"] .header-option > .btn, [lang="vi-VN"] .header-option > .btn {
  padding-left: .5vw;
  padding-right: .5vw;
}

@media (min-width: 1024px) and (max-width: 1366px) {
  [lang="jp"] .header-option > .btn, [lang="vn"] .header-option > .btn, [lang="vi-VN"] .header-option > .btn {
    font-size: .75rem;
  }
}

@media (max-width: 414px) {
  [lang="jp"] .header-option > .btn, [lang="vn"] .header-option > .btn, [lang="vi-VN"] .header-option > .btn {
    padding-left: .375rem;
    padding-right: .375rem;
    font-size: .75rem;
  }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  [lang="en"] .header-nav__item .text {
    font-size: .875rem;
  }
  [lang="vn"] .header-nav__item .text, [lang="vi-VN"] .header-nav__item .text {
    font-size: .75rem;
  }
  [lang="vn"] .header-option .dropdown, [lang="vi-VN"] .header-option .dropdown {
    max-width: 72px;
    text-align: center;
    line-height: 1.15;
  }
}

.side-nav {
  flex: 0 1 auto;
  display: flex;
  justify-content: flex-end;
  font-size: 1rem;
  transition: ease .2s;
}

.side-nav[data-open="true"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.side-nav[data-open="true"] .btn--nav {
  height: 50px;
  position: fixed;
  right: .25rem;
  z-index: 4;
}

.side-nav[data-open="true"] .side-nav__main {
  transform: translateX(0);
}

.side-nav[data-open="true"]:after {
  content: '';
  display: block;
  min-height: 100vh;
  background-color: HSLA(var(--black), 0.6);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: auto;
  -webkit-backdrop-filter: blur(1px);
          backdrop-filter: blur(1px);
  z-index: 2;
}

.side-nav[data-open="false"] .side-nav__main {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(100%);
}

.side-nav__main {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  min-width: 60%;
  max-width: 75%;
  padding-top: 50px;
  padding-bottom: calc(constant(safe-area-inset-bottom) + 1rem);
  padding-bottom: calc(env(safe-area-inset-bottom) + 1rem);
  background-color: HSL(var(--side-nav-main-bg));
  overflow-y: auto;
  transition: ease .2s;
  position: fixed;
  bottom: 0;
  top: 0;
  z-index: 3;
}

.side-nav__header {
  display: flex;
  justify-content: flex-end;
  padding: .875rem 1rem;
}

.side-nav__header .btn {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
}

.side-nav .platform-list, .side-nav .language-list {
  border-top-width: 1px;
  border-top-color: HSL(var(--primary-100));
}

.side-nav .platform-list__item, .side-nav .language-list__item {
  border-top: 0;
}

.side-nav .btn--nav {
  width: 50px;
  height: calc( 60px - .25rem);
  position: absolute;
  top: 0;
  right: .25rem;
  transition: all .2s;
}

.side-nav .btn--nav[data-visible="false"] {
  opacity: 0;
  pointer-events: none;
}

.side-nav .btn--nav[data-visible="true"] {
  opacity: 1;
}

.promotions {
  overflow: hidden;
}

.promotions.swiper-container-3d .swiper-slide-shadow-right, .promotions.swiper-container-3d .swiper-slide-shadow-left {
  background-image: none;
}

.promotions .swiper-slide {
  max-width: 980px !important;
  background-size: cover;
  background-position: center;
}

@media (max-width: 991px) {
  .promotions .swiper-slide {
    max-width: 100% !important;
  }
}

.promotions .swiper-slide img {
  display: block;
  width: 100%;
}

.promotions .swiper-slide.swiper-slide-active .swiper__item * {
  box-shadow: 0px 10px 10px HSLA(var(--primary-600));
}

.promotions .swiper-slide.swiper-slide-next::after, .promotions .swiper-slide.swiper-slide-prev::after {
  content: "";
  display: block;
  background-color: HSL(var(--black-opacity-3));
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.promotions .swiper__item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
}

.promotions .swiper__item img {
  border-radius: var(--border-radius);
}

@media screen and (max-width: 991px) {
  .promotions .swiper__item {
    min-height: 8rem;
  }
}

@media screen and (max-width: 768px) {
  .promotions .swiper__item {
    min-height: 4rem;
  }
}

.promotions .swiper-pagination {
  margin-top: .375rem;
  position: relative;
  bottom: 0;
}

.promotions .swiper-pagination-bullet {
  width: 4%;
  height: 3px;
  background-color: HSL(var(--grey-400));
  border-radius: var(--border-radius);
}

.promotions .swiper-pagination-bullet + .swiper-pagination-bullet {
  margin-left: .125rem;
}

.promotions .swiper-pagination-bullet-active {
  background-color: HSL(var(--promotions-swiper-pagination-bullet-active));
}

[data-layout="mobile"] .promotions {
  padding-right: .75rem;
  padding-left: .75rem;
}

[data-layout="desktop"] .promotions {
  margin-bottom: 2.5rem;
  position: relative;
}

[data-layout="desktop"] .promotions:hover [class*="swiper-button-"] {
  opacity: 1;
  transition: .3s all ease-in-out;
}

[data-layout="desktop"] .promotions__swiper-button-prev {
  left: 10%;
}

@media (min-width: 1024px) and (max-width: 1366px) {
  [data-layout="desktop"] .promotions__swiper-button-prev {
    left: 5%;
  }
}

@media (min-width: 769px) and (max-width: 1023px) {
  [data-layout="desktop"] .promotions__swiper-button-prev {
    left: 0;
  }
}

[data-layout="desktop"] .promotions__swiper-button-next {
  right: 10%;
}

@media (min-width: 1024px) and (max-width: 1366px) {
  [data-layout="desktop"] .promotions__swiper-button-next {
    right: 5%;
  }
}

@media (min-width: 769px) and (max-width: 1023px) {
  [data-layout="desktop"] .promotions__swiper-button-next {
    right: 0;
  }
}

[data-layout="desktop"] .promotions [class*="swiper-button-"] {
  display: flex;
  align-items: center;
  height: calc( 100% - 1.25rem);
  color: HSL(var(--white-opacity-1));
  background-image: none;
  position: absolute;
  top: 0;
  z-index: 1;
  text-shadow: var(--box-shadow);
  cursor: pointer;
}

[data-layout="desktop"] .promotions [class*="swiper-button-"] .icon {
  font-size: 1.875rem;
}

[data-layout="desktop"] .promotions [class*="swiper-button-"]:hover {
  color: HSL(var(--secondary-200));
}

[data-layout="desktop"] .promotions .swiper__item {
  min-height: 10rem;
}

[data-layout="desktop"] .promotions .swiper__item:active {
  cursor: pointer;
}

[data-layout="desktop"] .promotions .swiper-pagination-bullet {
  width: 40px;
  height: 4px;
}

.live-score {
  flex: 1;
  flex-direction: column;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.live-score[data-open="true"] {
  display: flex;
}

.live-score[data-open="false"] {
  display: none;
}

.live-score__option {
  flex: 1;
  display: flex;
  justify-content: center;
  width: 100%;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  background-color: HSL(var(--live-score-option-bg));
}

.live-score__option .icon {
  font-size: 1.75rem;
  margin-left: .5rem;
  color: HSL(var(--secondary-100));
}

.live-score__tab {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.live-score__tab .tabs--pills {
  order: -1;
}

.live-score__group {
  display: flex;
}

.live-score__group[data-open="false"] {
  display: none;
}

@media (min-width: 769px) and (max-width: 1023px) {
  [data-layout="desktop"] .live-score {
    padding-right: .25rem;
    padding-left: .25rem;
  }
}

[data-layout="desktop"] .live-score__option {
  margin-bottom: .75rem;
  border-bottom-width: 1px;
}

[data-layout="desktop"] .live-score__option .btn--icon:hover {
  transform: scale(1.1);
  transition: ease .2s;
}

[data-layout="desktop"] .live-score__group {
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0rem .5rem 1rem 1rem;
  padding-right: .5rem;
  max-height: 55vh;
  overflow-y: auto;
  overflow-x: hidden;
}

[data-layout="desktop"] .live-score__tab .tabs--pills {
  margin-bottom: .75rem;
}

[data-layout="desktop"] .live-score__tab .tabs--date {
  margin-bottom: 1rem;
}

[data-layout="mobile"] .live-score__option, [data-layout="mobile"] .live-score__tab {
  position: -webkit-sticky;
  position: sticky;
  z-index: 1;
}

[data-layout="mobile"] .live-score__option {
  border-width: 1px;
  border-color: HSL(var(--primary-200));
  top: 0;
}

[data-layout="mobile"] .live-score__tab {
  top: 2.375rem;
  background-color: HSL(var(--live-score-tab-bg));
}

[data-layout="mobile"] .live-score__tab .tabs--pills {
  padding-top: .5rem;
  margin-bottom: 0.5rem;
}

[data-layout="mobile"] .live-score__tab .tabs--date {
  margin-bottom: .5rem;
}

[data-layout="mobile"] .live-score__group {
  flex-direction: column;
}

.live-score .switch-bar {
  flex: 1;
  justify-content: center;
}

.live-score .switch-bar .btn {
  margin-left: 4vw;
  margin-right: 4vw;
}

[data-layout="desktop"] .live-score .switch-bar .btn {
  flex: 0 0 auto;
}

[data-layout="mobile"] .live-score .switch-bar .btn {
  flex: 1;
}

.live-score .preloader {
  min-height: 600px;
  margin: auto;
}

.ls-match {
  margin-bottom: .875rem;
  position: relative;
  border: 1px solid HSL(var(--ls-match-border));
  border-radius: var(--border-radius);
  background-image: var(--live-score-gradient-match);
  cursor: pointer;
}

.ls-match:after {
  content: '';
  margin-bottom: -5px;
  background-image: var(--ls-match-after-bg-img);
  border-radius: var(--border-radius);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}

.ls-match .text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ls-match .text-time, .ls-match .text {
  position: relative;
}

.ls-match .text-score {
  font-weight: 500;
  color: HSL(var(--secondary-50));
}

.ls-match .text-disable {
  color: HSL(var(--secondary-50));
  opacity: .6;
}

.ls-match .text-vs {
  font-size: 1.375rem;
  font-weight: 500;
  color: HSL(var(--white-opacity-1));
}

.ls-match .text-live {
  font-size: 1rem;
  font-weight: 700;
  color: HSL(var(--secondary-200));
}

.ls-match .team-logo {
  flex: 0 0 auto;
  width: 35px;
  margin: 0 .375rem;
}

.ls-match [class*="ls-match__team"] {
  flex: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 .25rem;
  width: calc(40% - .5rem);
}

.ls-match [class*="ls-match__team"] .text {
  flex: 1;
  line-height: 1.3;
  white-space: pre-wrap;
  -webkit-line-clamp: 2;
}

.ls-match [class*="ls-match__team"] .text-score {
  width: 100%;
}

.ls-match .ls-match__team-home .text-score, .ls-match .ls-match__team-home .text {
  text-align: right;
}

.ls-match .ls-match__team-home .team-logo {
  margin-right: 0px;
}

.ls-match .ls-match__team-away .team-logo {
  margin-left: 0px;
}

.ls-match__header {
  margin: 0 auto;
  width: 235px;
  text-align: center;
  background-image: var(--live-score-gradient-header);
  -webkit-clip-path: polygon(0 0, 100% 0, 96% 100%, 5% 100%);
          clip-path: polygon(0 0, 100% 0, 96% 100%, 5% 100%);
  position: relative;
}

.ls-match__header .text {
  -webkit-line-clamp: 1;
}

.ls-match__main {
  display: flex;
  justify-content: center;
}

.ls-match__info {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 20%;
  text-align: center;
  white-space: nowrap;
}

.live-score__group--sport2 .ls-match__info {
  width: 26%;
}

.ls-match__info .text-time, .ls-match__info .text {
  color: HSL(var(--white-opacity-2));
}

[data-layout="mobile"] .ls-match {
  flex: 1;
}

[data-layout="mobile"] .ls-match__main {
  padding-top: .375rem;
  padding-bottom: .375rem;
}

[data-layout="mobile"] .ls-match__header {
  padding: 0 .875rem;
}

[data-layout="mobile"] .ls-match:last-child {
  margin-bottom: 0px;
}

[data-layout="mobile"] .ls-match .text-time {
  font-size: .75rem;
}

[data-layout="mobile"] .ls-match .text-score {
  font-size: 1.125rem;
  line-height: 1.125rem;
}

[data-layout="mobile"] .ls-match .team-logo {
  width: 22px;
}

[data-layout="mobile"] .ls-match [class*="ls-match__team"] .text {
  font-size: .75rem;
}

[data-layout="mobile"] .ls-match [class*="ls-match__team"] .text-score {
  font-size: 1rem;
}

[data-layout="desktop"] .ls-match {
  flex: 0 0 auto;
  width: calc( 50% - .375rem);
  transition: .2s ease;
  cursor: pointer;
}

[data-layout="desktop"] .ls-match__main {
  height: calc(100% - 27px);
  padding: .5rem 0;
}

[data-layout="desktop"] .ls-match__main [class*="ls-match__team"] .text {
  font-size: 1rem;
}

[data-layout="desktop"] .ls-match__main [class*="ls-match__team"] .text-score {
  font-size: 1.25rem;
}

[data-layout="desktop"] .ls-match__main .text-score {
  line-height: 1;
  font-size: 1.5rem;
}

[data-layout="desktop"] .ls-match__header:before {
  height: 30px;
}

[data-layout="desktop"] .ls-match__header .text {
  font-size: 1.125rem;
  padding: 0 1.125rem;
}

[data-layout="desktop"] .ls-match:hover {
  border-color: HSL(var(--ls-match-hover-border));
}

[data-layout="desktop"] .ls-match:nth-child(odd) {
  margin-right: .375rem;
}

[data-layout="desktop"] .ls-match:nth-child(even) {
  margin-left: .375rem;
}

.select-league {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: HSL(var(--primary-300));
}

.select-league__scorller {
  flex: 1;
  padding: .5rem;
  background-color: HSL(var(--primary-600));
  overflow-y: auto;
}

.select-league__list {
  display: flex;
  flex-wrap: wrap;
}

.select-league__item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc( 50% - .5rem);
  min-height: 40px;
  margin: .25rem;
  padding: .375rem .5rem;
  background-color: HSL(var(--primary-400));
  border-radius: var(--border-radius);
}

.select-league__item[data-selected="true"] {
  background-color: HSL(var(--primary-200));
}

.select-league__item[data-selected="true"] .icon {
  display: flex;
  font-size: 1.25rem;
}

.select-league__item[data-selected="false"] .icon {
  display: none;
}

.select-league__item .text {
  display: -webkit-box;
  width: calc( 100% - 24px);
  text-align: left;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}

.select-league__option {
  flex: 0 0 auto;
  display: flex;
}

.select-league__option .btn {
  margin-left: auto;
  padding: .5rem 2rem;
  font-size: 1.125rem;
}

.select-league__option .text {
  font-size: 1rem;
}

.select-league__option .checkbox + .checkbox {
  margin-left: 1rem;
}

.select-league__tab {
  flex: 0 0 auto;
}

[data-layout="desktop"] .select-league {
  max-height: 50vh;
  right: 0px;
}

[data-layout="desktop"] .select-league__item {
  width: calc( 33.3% - .5rem);
  cursor: pointer;
}

[data-layout="desktop"] .select-league__item:hover {
  background-color: HSL(var(--primary-300));
  transition: all .3s ease-in-out;
}

[data-layout="desktop"] .select-league__item:hover[data-selected="true"] {
  background-color: HSL(var(--primary-200));
}

[data-layout="desktop"] .select-league__option {
  padding: .75rem 0 0;
}

[data-layout="desktop"] .select-league__option .btn {
  font-size: 1.15rem;
  padding: .5rem 3.5rem;
}

[data-layout="mobile"] .select-league__option {
  padding: .75rem .5rem;
  border-top: 1px solid HSL(var(--primary-100));
  padding-bottom: calc(constant(safe-area-inset-bottom) + .75rem);
  padding-bottom: calc(env(safe-area-inset-bottom) + .75rem);
}

.modal--select-league .modal__dialog {
  background-color: HSL(var(--modal-bg, var(--primary-300)), 1);
}

.modal--select-league .modal__header {
  align-items: center;
  border-bottom: 1px solid HSL(var(--primary-100));
}

.modal--select-league .modal__header .text {
  width: calc( 100% - 36px);
  text-align: center;
}

.modal--select-league .modal__footer {
  padding: 0px 1.125rem 1.5rem;
}

[data-layout="desktop"] .modal--select-league .modal__dialog {
  max-width: 800px;
  width: calc(100% - 20%);
}

[data-layout="desktop"] .modal--select-league .modal__header {
  padding: 1.5rem 1.25rem 0;
  border-bottom: 0px;
}

[data-layout="desktop"] .modal--select-league .modal__header .btn--icon {
  display: none;
}

[data-layout="mobile"] .modal--select-league {
  transform: translateX(100%);
  transition: ease .2s;
}

[data-layout="mobile"] .modal--select-league[data-open="true"] {
  transform: translateX(0);
  transition: transform .3s ease-in-out;
}

[data-layout="mobile"] .modal--select-league .modal__dialog {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border-width: 0;
  border-radius: 0;
  overflow-y: auto;
}

[data-layout="mobile"] .modal--select-league .modal__close {
  display: none;
}

[data-layout="mobile"] .modal--select-league .modal__header {
  padding: .5rem 0;
}

[data-layout="mobile"] .modal--select-league .modal__body {
  padding: 0px;
}

.sport-highlights {
  flex: 0 0 auto;
  flex-direction: column;
  width: 100%;
  border-radius: var(--border-radius);
  border-color: HSLA(var(--white-opacity-4));
}

.sport-highlights[data-open="true"] {
  display: flex;
}

.sport-highlights[data-open="false"] {
  display: none;
}

.sport-highlights__list {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.sport-highlights__list .video:last-child {
  margin-bottom: 0px;
  border-bottom-width: 0px;
}

[data-layout="mobile"] .sport-highlights__promo {
  display: contents;
}

[data-layout="mobile"] .sport-highlights__promo .video--promo {
  padding-top: 1rem;
  background-color: HSL(var(--primary-500));
}

[data-layout="mobile"] .sport-highlights__promo .video--promo .video__main {
  width: 100%;
}

[data-layout="desktop"] .sport-highlights {
  flex-direction: row;
  flex-wrap: wrap;
  height: 100%;
}

[data-layout="desktop"] .sport-highlights__promo {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 60%;
  height: 100%;
  padding: 1rem .75rem;
  padding-left: 1.25rem;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

[data-layout="desktop"] .sport-highlights__promo .video {
  flex-direction: column;
  width: 50%;
  position: relative;
}

[data-layout="desktop"] .sport-highlights__promo .video:nth-child(even) {
  padding-right: .75rem;
}

[data-layout="desktop"] .sport-highlights__promo .video:nth-child(even):before {
  content: "";
  display: block;
  position: absolute;
  top: .75rem;
  bottom: .75rem;
  right: 0px;
  width: 1px;
  background-color: HSLA(var(--white-opacity-4));
}

[data-layout="desktop"] .sport-highlights__promo .video:nth-child(2n+3) {
  padding-left: .75rem;
}

[data-layout="desktop"] .sport-highlights__promo .video .video__main {
  width: 100%;
  margin-right: 0px;
}

[data-layout="desktop"] .sport-highlights__promo .video.video--promo {
  width: 100%;
}

[data-layout="desktop"] .sport-highlights__promo .video.video--promo .video__play {
  opacity: 0;
}

[data-layout="desktop"] .sport-highlights__promo .video.video--promo .video__play .btn {
  width: 105px;
  height: 105px;
}

[data-layout="desktop"] .sport-highlights__promo .video.video--promo .video__play .btn .icon {
  font-size: 3.75rem;
}

[data-layout="desktop"] .sport-highlights__promo .video.video--promo:hover .video__play {
  opacity: 1;
}

[data-layout="desktop"] .sport-highlights__list {
  flex-direction: column;
  flex: 0 0 auto;
  width: calc( 40% - 1.5rem);
  max-height: 830px;
  margin: 1rem .75rem;
  padding: 0 .75rem;
  border-left-width: 1px;
  overflow: auto;
}

[data-layout="desktop"] .sport-highlights .video__play .text {
  font-size: 1.125rem;
}

.video {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  width: 100%;
  margin-bottom: .75rem;
  padding-bottom: .75rem;
  border-bottom-width: 1px;
  cursor: pointer;
}

.video[data-selected="true"] {
  cursor: auto;
}

.video[data-selected="true"] .video__play {
  opacity: 1;
}

.video[data-selected="false"] .video__play {
  opacity: 0;
}

.video:hover .video__info .text {
  color: HSL(var(--secondary-50));
  transition: all .3s ease-in-out;
}

.video.video--promo {
  flex-direction: column;
}

.video.video--promo:active {
  cursor: auto;
}

.video.video--promo[data-selected="true"] .video__play .btn[data-selected="true"] .icon--pause {
  opacity: 1;
  visibility: visible;
}

.video.video--promo[data-selected="true"] .video__play .btn[data-selected="true"] .icon--play {
  opacity: 1;
  visibility: hidden;
}

.video.video--promo[data-selected="true"] .video__play .btn[data-selected="false"] .icon--pause {
  opacity: 0;
  visibility: hidden;
}

.video.video--promo[data-selected="true"] .video__play .btn[data-selected="false"] .icon--play {
  opacity: 1;
  visibility: visible;
}

.video.video--promo .video__info .text {
  min-height: 3rem;
  font-size: 1rem;
}

.video__main {
  flex: 0 0 auto;
  width: 40%;
  margin-right: .5rem;
  position: relative;
  overflow: hidden;
}

.video__play {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  left: 0px;
  top: 0px;
  background-color: HSLA(var(--black-opacity-2));
  transition: all .3s ease-in-out;
}

.video__play .btn {
  width: 60px;
  height: 60px;
  border-width: 1px;
  border-color: HSL(var(--btn-video-border, var(--white-opacity-1)));
  border-radius: 50%;
  background-color: HSL(var(--btn-video-bg, var(--black-opacity-2)));
  position: relative;
}

.video__play .btn .icon {
  position: absolute;
}

.video__play .btn .icon + .icon {
  margin-left: 0px;
}

.video__play .btn .icon--pause {
  opacity: 0;
  visibility: hidden;
}

.video__play .btn .icon--play {
  opacity: 1;
  visibility: visible;
}

.video__source {
  padding-bottom: 56%;
}

.video__source * {
  position: absolute;
  border-radius: var(--border-radius);
}

.video__info {
  flex: 1;
  display: flex;
  align-items: center;
  padding: .375rem 0;
}

.video__info .text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news[data-open="true"] {
  display: flex;
}

.news[data-open="false"] {
  display: none;
}

.news img {
  border-radius: var(--border-radius);
}

.news .text {
  display: -webkit-box;
  color: HSLA(var(--white-opacity-1));
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news__group {
  display: flex;
  flex-wrap: wrap;
}

.news__item {
  flex: 0 0 auto;
  width: 50%;
  padding: .375rem 0;
  cursor: pointer;
}

.news__item img {
  position: absolute;
  border-radius: 6px 6px 0 0;
}

.news__content {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.news__img {
  flex: 1;
  display: flex;
  padding-bottom: 55%;
  position: relative;
  overflow: hidden;
}

.news__info {
  height: 55px;
  padding: .375rem;
  border-radius: 0 0 6px 6px;
  background-color: HSLA(var(--white-opacity-4));
}

[data-layout="mobile"] .news__item:first-child {
  width: 100%;
  padding-bottom: .75rem;
  margin-bottom: .5rem;
  border-bottom: 1px solid HSLA(var(--white-opacity-4));
}

[data-layout="mobile"] .news__item:first-child .news__img img {
  border-radius: var(--border-radius);
}

[data-layout="mobile"] .news__item:first-child .news__info {
  background-color: transparent;
}

[data-layout="mobile"] .news__item:first-child .news__info .text {
  font-size: 1rem;
}

[data-layout="mobile"] .news__item:nth-child(2n) {
  padding-right: .375rem;
}

[data-layout="mobile"] .news__item:nth-child(2n+3) {
  padding-left: .375rem;
}

[data-layout="desktop"] .news__item {
  width: 25%;
  padding-bottom: .5rem;
  margin-bottom: .5rem;
  border-bottom: 1px solid HSLA(var(--white-opacity-4));
  cursor: pointer;
}

[data-layout="desktop"] .news__item + .news__item .news__content {
  padding-left: .5rem;
}

[data-layout="desktop"] .news__item .news__info {
  background-color: transparent;
}

[data-layout="desktop"] .news__item:active {
  cursor: auto;
  -webkit-user-select: none;
          user-select: none;
}

[data-layout="desktop"] .news__item:hover .text {
  color: HSLA(var(--secondary-50));
  transition: all .3s ease-in-out;
}

[data-layout="desktop"] .news__item:nth-child(3):after {
  content: "";
  display: none;
}

[data-layout="desktop"] .news__item:nth-child(-n+3) {
  width: 33.3%;
  padding-bottom: .75rem;
}

[data-layout="desktop"] .news__item:nth-child(-n+3) .news__info {
  height: 65px;
  background-color: HSLA(var(--white-opacity-4));
}

[data-layout="desktop"] .news__item:nth-child(-n+3) .news__info .text {
  font-size: 1rem;
}

[data-layout="desktop"] .news__item:nth-child(4n) .news__content {
  padding-left: 0px;
}

[data-layout="desktop"] .news__item:nth-child(4n+3) .news__content {
  padding-right: 0px;
  border-right: 0px;
}

[data-layout="desktop"] .news__content {
  padding-right: .5rem;
  border-right-width: 1px;
  border-right-color: HSLA(var(--white-opacity-4));
}

[data-layout="desktop"] .news__content:nth-child(3) {
  border-right: 0px;
}

[data-layout="desktop"] .news__group {
  padding: .75rem 1rem;
}

.product-sports[data-open="false"] {
  display: none;
}

[data-layout="desktop"] .product-sports {
  padding: 0 .75rem;
}

[data-layout="mobile"] .product-sports[data-open="true"] {
  display: block;
}

.sports-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

[data-layout="desktop"] .sports-list {
  align-items: center;
  max-width: 1366px;
}

.sports-card {
  display: flex;
  border-width: 1px;
  border-radius: var(--border-radius);
  border-color: HSL(var(--sports-card-border, var(--primary-200)));
  background-clip: padding-box;
  background-repeat: no-repeat;
  background-color: HSL(var(--product-gradient-bg));
  background-blend-mode: luminosity;
  position: relative;
  cursor: pointer;
}

.sports-card:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin-bottom: -5px;
  border-radius: var(--border-radius);
  background-image: var(--sports-card-after);
  z-index: -1;
}

.sports-card__title {
  line-height: 1.2;
  font-weight: bold;
  position: absolute;
  z-index: 1;
}

[data-layout="mobile"] .sports-card {
  flex: 0 0 auto;
  width: calc( 50% - .25rem);
  margin-bottom: .75rem;
  background-size: 98% , 100%;
  background-position: 380% 48% , center center;
  background-image: url("data:image/svg+xml;base64, PHN2ZyB3aWR0aD0iMTcxIiBoZWlnaHQ9IjEwNiIgdmlld0JveD0iMCAwIDE3MSAxMDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxtYXNrIGlkPSJtYXNrMCIgbWFzay10eXBlPSJhbHBoYSIgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iMCIgeT0iMCIgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxMDYiPgo8cmVjdCB4PSIwLjUiIHk9IjAuNSIgd2lkdGg9IjEwMy4yMjciIGhlaWdodD0iMTY4Ljk5OSIgcng9IjUuNSIgdHJhbnNmb3JtPSJtYXRyaXgoNC4zNzExNGUtMDggMSAxIC00LjM3MTE0ZS0wOCAwLjMzODg2NyAwLjk5ODA0NykiIGZpbGw9InVybCgjcGFpbnQwX2xpbmVhcikiIHN0cm9rZT0iIzZDNzdERSIvPgo8L21hc2s+CjxnIG1hc2s9InVybCgjbWFzazApIj4KPHBhdGggZD0iTTU5Ljc4MTcgLTM1Ljg2OTNDNzMuNjUxIDIyLjQ1MjQgMTIwLjc2MSAxNDQuNjIzIDE5OC4yNDcgMTY2LjczMUMxODcuOTI0IDEyMi4xNDkgMTQ1Ljc3OSAxOS4yMTQgNTkuNzgxNyAtMzUuODY5M1oiIGZpbGw9InVybCgjcGFpbnQxX2xpbmVhcikiIGZpbGwtb3BhY2l0eT0iMC4yIi8+CjxwYXRoIGQ9Ik0yMS40MzEyIDc2LjY5NjZDNTQuODkyIDExNS4wNDYgMTQwLjE5NyAxODEuMzQyIDIxMy43MjkgMTM5LjcyNUMxODguMzg2IDExMC4xOTIgMTE0LjQ0NyA1Ni4yNDE1IDIxLjQzMTIgNzYuNjk2NloiIGZpbGw9InVybCgjcGFpbnQyX2xpbmVhcikiIGZpbGwtb3BhY2l0eT0iMC4yIi8+CjxwYXRoIGQ9Ik05NC4zMTI1IC0xMTcuNTMzQzk4LjExODEgLTQ0LjMzNjcgMTI3Ljk5OSAxMTcuMDcyIDIxNy4wNzkgMTc3LjEzN0MyMTQuNTA4IDEyMS4zMSAxODYuMzU3IC0xNS43ODMzIDk0LjMxMjUgLTExNy41MzNaIiBmaWxsPSJ1cmwoI3BhaW50M19saW5lYXIpIiBmaWxsLW9wYWNpdHk9IjAuMyIvPgo8cGF0aCBkPSJNNTAuODQyMyAxOS41OTEyQzU4Ljk0NzYgNTguMTg0MSA4OC4yNzU2IDEzOS41ODcgMTQwLjc0NiAxNTYuNDU0QzEzNC43NDEgMTI2Ljk2MiAxMDguMzUzIDU4LjI5OTggNTAuODQyMyAxOS41OTEyWiIgZmlsbD0idXJsKCNwYWludDRfbGluZWFyKSIgZmlsbC1vcGFjaXR5PSIwLjQiLz4KPC9nPgo8ZGVmcz4KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDBfbGluZWFyIiB4MT0iNTIuMTEzNyIgeTE9IjAiIHgyPSI1Mi4xMTM3IiB5Mj0iMTY5Ljk5OSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSIjNDE0ODk3Ii8+CjxzdG9wIG9mZnNldD0iMC42MDQ1MjUiIHN0b3AtY29sb3I9IiMyRjM4OEUiLz4KPHN0b3Agb2Zmc2V0PSIwLjgwOTE0MiIgc3RvcC1jb2xvcj0iIzMyMzk4QiIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM0MzRBOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDFfbGluZWFyIiB4MT0iODcuMDQ1MiIgeTE9Ii0zMC4xMzIxIiB4Mj0iMTczLjcxOSIgeTI9IjkzLjgyNiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSIjNjE2OUNEIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0id2hpdGUiIHN0b3Atb3BhY2l0eT0iMCIvPgo8L2xpbmVhckdyYWRpZW50Pgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50Ml9saW5lYXIiIHgxPSIxNS45MTUxIiB5MT0iODMuNTIwNCIgeDI9IjEwNy45NjEiIHkyPSI4MC4zMTk5IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiMzQTQxOTMiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSJ3aGl0ZSIgc3RvcC1vcGFjaXR5PSIwIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQzX2xpbmVhciIgeDE9Ijk2LjUzOSIgeTE9IjQwLjUxOTUiIHgyPSIxNjEuMzg2IiB5Mj0iMTIxLjkzMSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSIjMzEzODhDIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0id2hpdGUiIHN0b3Atb3BhY2l0eT0iMCIvPgo8L2xpbmVhckdyYWRpZW50Pgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50NF9saW5lYXIiIHgxPSIxNDMuNjAzIiB5MT0iNjkuMDAyMiIgeDI9IjQwLjc3MyIgeTI9IjUwLjg3NiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSIjNjE2OUNEIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzNGNDY5NiIvPgo8L2xpbmVhckdyYWRpZW50Pgo8L2RlZnM+Cjwvc3ZnPgo=");
}

[data-layout="mobile"] .sports-card:first-child {
  width: 100%;
  margin-bottom: .75rem;
  background-size: 103% , 100%;
  background-position: -280% 48% , center center;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDY0IiBoZWlnaHQ9IjM2NSIgdmlld0JveD0iMCAwIDQ2NCAzNjUiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04Ny45MDkyIDgyLjM3MDRDMTE5LjQ2NiAxNDAuNjc4IDIyNi42NTUgMjYyLjgyIDQwMi45NTggMjg0LjkyNEMzNzkuNDcxIDI0MC4zNTIgMjgzLjU3OSAxMzcuNDQxIDg3LjkwOTIgODIuMzcwNFoiIGZpbGw9InVybCgjcGFpbnQwX2xpbmVhcikiIGZpbGwtb3BhY2l0eT0iMC4yIi8+CjxwYXRoIGQ9Ik0wLjY0OTkwMiAxOTQuOTExQzc2Ljc4MjkgMjMzLjI1MiAyNzAuODc2IDI5OS41MzIgNDM4LjE4NCAyNTcuOTI0QzM4MC41MjEgMjI4LjM5OSAyMTIuMjg3IDE3NC40NjEgMC42NDk5MDIgMTk0LjkxMVoiIGZpbGw9InVybCgjcGFpbnQxX2xpbmVhcikiIGZpbGwtb3BhY2l0eT0iMC4yIi8+CjxwYXRoIGQ9Ik0xNjYuNDc2IDAuNzI2MzE4QzE3NS4xMzUgNzMuOTA1NiAyNDMuMTIzIDIzNS4yNzcgNDQ1LjgwNSAyOTUuMzI4QzQzOS45NTcgMjM5LjUxMyAzNzUuOTAzIDEwMi40NTIgMTY2LjQ3NiAwLjcyNjMxOFoiIGZpbGw9InVybCgjcGFpbnQyX2xpbmVhcikiIGZpbGwtb3BhY2l0eT0iMC4zIi8+CjxwYXRoIGQ9Ik02Ny41NjkzIDEzNy44MTlDODYuMDExMiAxNzYuNDAzIDE1Mi43NDEgMjU3Ljc4NiAyNzIuMTI1IDI3NC42NUMyNTguNDYyIDI0NS4xNjQgMTk4LjQyMyAxNzYuNTE5IDY3LjU2OTMgMTM3LjgxOVoiIGZpbGw9InVybCgjcGFpbnQzX2xpbmVhcikiIGZpbGwtb3BhY2l0eT0iMC40Ii8+CjxkZWZzPgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXIiIHgxPSIxNDkuOTQxIiB5MT0iODguMTA2MyIgeDI9IjIwMS43NDMiIHkyPSIyNTYuNzEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzYxNjlDRCIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IndoaXRlIiBzdG9wLW9wYWNpdHk9IjAiLz4KPC9saW5lYXJHcmFkaWVudD4KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDFfbGluZWFyIiB4MT0iLTExLjkwMDciIHkxPSIyMDEuNzM0IiB4Mj0iMTk2LjQ3OCIgeTI9IjE4NS4yNDQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzNBNDE5MyIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IndoaXRlIiBzdG9wLW9wYWNpdHk9IjAiLz4KPC9saW5lYXJHcmFkaWVudD4KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDJfbGluZWFyIiB4MT0iMTcxLjU0MiIgeTE9IjE1OC43NDIiIHgyPSIyMTMuMDIzIiB5Mj0iMjc3LjI1NyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSIjMzEzODhDIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0id2hpdGUiIHN0b3Atb3BhY2l0eT0iMCIvPgo8L2xpbmVhckdyYWRpZW50Pgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50M19saW5lYXIiIHgxPSIyNzguNjI4IiB5MT0iMTg3LjIxOCIgeDI9IjcwLjgzMDQiIHkyPSIxMDMuODU3IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiM2MTY5Q0QiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjM0Y0Njk2Ii8+CjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPC9zdmc+Cg==");
}

[data-layout="mobile"] .sports-card + .sports-card:nth-child(2n+1) {
  margin-left: .5rem;
}

[data-layout="mobile"] .sports-card__title {
  max-width: 90px;
  margin: .375rem 0 0 .5rem;
  background-image: var(--gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-layout="mobile"] .sports-card__title .text {
  word-break: normal;
}

@media (min-width: 550px) {
  [data-layout="mobile"] .sports-card__title {
    max-width: 100%;
    margin-top: .75rem;
    margin-left: .875rem;
  }
  [data-layout="mobile"] .sports-card__title .text {
    font-size: 1.25rem;
  }
}

[data-layout="desktop"] .sports-card {
  flex: 1;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0 .25rem;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjY1IiBoZWlnaHQ9IjUzOSIgdmlld0JveD0iMCAwIDY2NSA1MzkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xNDkuMzA4IDEwNy42OTdDMjU1LjYyNSAxNDYuNDczIDQ3OC4zMzQgMjc4LjE4NSA1MTguNjM2IDQ5NC44MjRDNDM3LjM2NSA0NjUuOTYzIDI0OS43MjEgMzQ4LjEzMyAxNDkuMzA4IDEwNy42OTdaIiBmaWxsPSJ1cmwoI3BhaW50MF9saW5lYXIpIiBmaWxsLW9wYWNpdHk9IjAuMSIvPgo8cGF0aCBkPSJNMzU0LjUxMSAwLjQ3Mzg3N0M0MjQuNDIgOTQuMDI0OSA1NDUuMjcyIDMzMi41MjMgNDY5LjQwNyA1MzguMTA4QzQxNS41NzEgNDY3LjI1NCAzMTcuMjIyIDI2MC41MyAzNTQuNTExIDAuNDczODc3WiIgZmlsbD0idXJsKCNwYWludDFfbGluZWFyKSIgZmlsbC1vcGFjaXR5PSIwLjEiLz4KPHBhdGggZD0iTTAuNDQyMzgzIDIwNC4yMzhDMTQ5Ljc4MSAyMDkuOTY3IDQ3OC4yNiAyNjYuNzY5IDU5Ny40NjkgNDQ4LjE1MUM0ODMuNTU0IDQ0NC40NjQgMjA0LjY2OCAzOTAuNTIgMC40NDIzODMgMjA0LjIzOFoiIGZpbGw9InVybCgjcGFpbnQyX2xpbmVhcikiIGZpbGwtb3BhY2l0eT0iMC4zIi8+CjxwYXRoIGQ9Ik0yNTAuNDA4IDgyLjcwMjFDMzIwLjc2MSAxMDUuMzYzIDQ2OS4xNTMgMTg3LjM2IDQ5OS45MDEgMzM0LjA1N0M0NDYuMTM4IDMxNy4yNjggMzIwLjk3MiAyNDMuNDkzIDI1MC40MDggODIuNzAyMVoiIGZpbGw9InVybCgjcGFpbnQzX2xpbmVhcikiIGZpbGwtb3BhY2l0eT0iMC40Ii8+CjxkZWZzPgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXIiIHgxPSIxNTkuNzY2IiB5MT0iMTgzLjkyMSIgeDI9IjQzOC4zMTUiIHkyPSIzMTAuOTEzIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiM2MTY5Q0QiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSJ3aGl0ZSIgc3RvcC1vcGFjaXR5PSIwIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQxX2xpbmVhciIgeDE9IjM2Ni45NSIgeTE9Ii0xNC45NDgxIiB4Mj0iMzUzLjI0OSIgeTI9IjI0MS45NzciIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzNBNDE5MyIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IndoaXRlIiBzdG9wLW9wYWNpdHk9IjAiLz4KPC9saW5lYXJHcmFkaWVudD4KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDJfbGluZWFyIiB4MT0iMzIzLjE0IiB5MT0iMjA0LjI5NCIgeDI9IjQ4Ni43NTQiIHkyPSIzMzUuNDIiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzMxMzg4QyIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IndoaXRlIiBzdG9wLW9wYWNpdHk9IjAiLz4KPC9saW5lYXJHcmFkaWVudD4KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDNfbGluZWFyIiB4MT0iMzQwLjQ4MSIgeTE9IjM0Mi4wNDciIHgyPSIyNjUuOCIgeTI9IjY1LjgwNjkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzYxNjlDRCIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMzRjQ2OTYiLz4KPC9saW5lYXJHcmFkaWVudD4KPC9kZWZzPgo8L3N2Zz4K");
  cursor: pointer;
  background-size: 360% 360%;
  background-position: 46% 41.5%;
  transition: ease .3s;
}

[data-layout="desktop"] .sports-card:hover {
  background-color: HSL(var(--product-gradient-light-bg));
  border-color: HSL(var(--product-gradient-light-border));
}

[data-layout="desktop"] .sports-card:hover:before {
  background-image: var(--product-gradient-Trapezoid-light-bg);
}

[data-layout="desktop"] .sports-card:before {
  content: '';
  width: calc(100% - 2.5rem);
  height: .5rem;
  margin: 0 auto;
  background-image: var(--product-gradient-Trapezoid-bg);
  box-shadow: 0px 0.5px 1px var(--black-opacity-3);
  transform: perspective(100px) rotateX(340deg);
  position: absolute;
  top: -1px;
}

[data-layout="desktop"] .sports-card__title {
  flex: 1;
  width: calc(100% - 3.5rem);
  margin: 0.125rem 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #533E23;
  bottom: 0;
}

[data-layout="desktop"] .sports-card__title .text {
  font-size: .75rem;
}

@media (min-width: 1366px) {
  [data-layout="desktop"] .sports-card__title .text {
    font-size: .875rem;
  }
}

[data-layout="desktop"] .sports-card__image {
  display: flex;
  justify-content: center;
}

[data-layout="desktop"] .sports-card__image:hover:before {
  background-image: var(--product-gradient-Trapezoid-light-bg);
}

[data-layout="desktop"] .sports-card__image:before {
  content: '';
  margin: 0 auto;
  width: calc(100% - 2.5rem);
  height: 1.375rem;
  background-image: var(--product-gradient-Trapezoid-bg);
  box-shadow: 0px 1px 2px var(--black-opacity-3);
  -webkit-clip-path: polygon(10% 0, 90% 0, 100% 100%, 0% 100%);
          clip-path: polygon(10% 0, 90% 0, 100% 100%, 0% 100%);
  position: absolute;
  bottom: 0px;
}

[data-layout="desktop"] .sports-card__image:after {
  content: '';
  margin: 0 auto;
  width: calc(100% - 2.5rem);
  height: 5px;
  background-image: var(--product-gradient-Trapezoid-dark-bg);
  transform: rotate(-180deg);
  position: absolute;
  bottom: -5px;
}

.login-form {
  width: 100%;
  max-height: 0;
  padding: 0 1.5rem;
  visibility: hidden;
  opacity: 0;
}

.login-form[data-open="true"] {
  max-height: 100%;
  visibility: visible;
  opacity: 1;
}

.login-form__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

.login-form__item [class*="text"] + .text {
  margin-left: 0;
}

.login-form__item [class*="text"] .text {
  color: var(--login-verified-text);
}

.login-form__item[data-disable="true"] {
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
  pointer-events: none;
}

.login-form__item[data-disable="true"] .text {
  opacity: .5;
}

.login-form__item + .login-form__item {
  margin-top: 1rem;
}

.login-form__item--failed {
  flex-direction: column;
  transition: .2s ease;
}

.login-form__item--failed[data-open="true"] {
  visibility: visible;
}

.login-form__item--failed[data-open="false"] {
  height: 0;
  margin-top: 0;
  padding-top: 0;
  visibility: hidden;
  opacity: 0;
}

.login-form--verified {
  flex-direction: column;
}

.login-form--verified .img {
  margin-right: .5rem;
}

.login-form--verified .tooltip--bottom, .login-form--verified [class*="tooltip--bottom"] {
  white-space: nowrap;
}

.login-form .text-void {
  margin: .25rem 0;
  color: red;
}

.login-form .img {
  flex: 0 0 auto;
  display: flex;
}

.login-form .btn--secondary {
  flex: 1;
  min-height: 40px;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}

.login-form .btn--secondary .text {
  font-size: 1.125rem;
}

.login-form .btn--secondary .text::before, .login-form .btn--secondary .text::after {
  content: '';
  transform: skewX(70deg);
  opacity: .32;
}

.login-form .btn--refresh[data-refresh="true"] {
  animation: rotate 1s 1;
}

[data-layout="desktop"] .login-form__item .textfield {
  height: 50px;
}

[data-layout="desktop"] .login-form__item .btn--secondary {
  min-height: 50px;
}

[data-layout="desktop"] .login-form__item .btn--secondary .text {
  font-size: 1.25rem;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.login-gesture {
  width: 100%;
  max-height: 0;
  padding: 0 1.25rem;
  visibility: hidden;
  opacity: 0;
}

.login-gesture[data-open="true"] {
  max-height: 100%;
  visibility: visible;
  opacity: 1;
}

.login-gesture__item {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  padding: 0;
  color: var(--login-gestrure-item-text);
  background-color: transparent;
  border-bottom-width: 1px;
  border-color: HSL(var(--primary-100));
}

.login-gesture__item .icon {
  flex: 0 0 auto;
  height: 22px;
  padding: 0 0.5rem;
}

.login-gesture__item .text {
  flex: 1;
}

.login-gesture .mhn-lock {
  margin-top: .25rem;
}

.login-gesture .mhn-lock-wrap {
  display: flex;
  flex-direction: column;
  margin-top: 0;
}

.login-gesture .mhn-lock-wrap .mhn-lock-success {
  flex: 1;
  color: rgba(75, 174, 79, 0.8);
}

.login-gesture .panel-heading {
  min-height: 0;
  padding: 0;
  font-size: 1rem;
  text-align: center;
}

.login-gesture .mhn-lock-title::before {
  content: ' ';
  display: flex;
  margin-top: 1rem;
}

[data-layout="desktop"] .login-gesture__item .textfield {
  height: 50px;
}

.login-switch {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  -webkit-clip-path: polygon(100% 0, 0 0, 100% 100%);
          clip-path: polygon(100% 0, 0 0, 100% 100%);
  background-color: HSLA(var(--primary-500), 0.8);
  border-width: 1px;
  border-color: HSL(var(--primary-300));
  border-top-right-radius: .375rem;
  position: absolute;
  top: 0;
  right: 0;
}

.login-switch[data-mode="gesture-password"] .btn .icon--gesture-password {
  opacity: 0;
  visibility: hidden;
}

.login-switch[data-mode="gesture-password"] .btn .icon--keypad {
  opacity: 1;
  visibility: visible;
}

.login-switch .btn {
  width: 46px;
  height: 46px;
  min-width: 46px;
  min-height: 46px;
  margin: -.375rem -.375rem 0 0;
  position: relative;
}

.login-switch .btn .icon {
  font-size: 46px;
  position: absolute;
}

.login-switch .btn .icon--keypad {
  opacity: 0;
  visibility: hidden;
}

.login-switch .btn .icon--gesture-password {
  opacity: 1;
  visibility: visible;
}

.login-switch .btn .icon + .icon {
  margin-left: 0;
}

.modal .tooltip[data-open="false"] {
  visibility: hidden;
}

.modal .tooltip[data-open="true"] {
  visibility: visible;
}

.modal .tooltip--top-right {
  flex: 0 0 auto;
  flex-direction: column;
  left: 0;
}

.modal .tooltip--top-right .text + .text {
  margin-left: 0;
}

.modal .tooltip--top-right .text .btn--icon {
  padding: .125rem;
  margin: auto .25rem;
  color: HSLA(var(--white-opacity-1));
  background-color: HSLA(var(--primary-500), 0.8);
  position: relative;
  top: .25rem;
}

.modal .tooltip--top-right .icon--cancel {
  color: var(--black-opacity-3);
}

.modal .tooltip--top-right > .btn--icon {
  position: absolute;
  right: .25rem;
  top: .25rem;
}

.modal .tooltip .btn--icon {
  width: auto;
  height: auto;
  min-width: auto;
  min-height: auto;
}

.modal .tooltip > .btn--icon {
  padding: 0;
  color: var(--tooltip-close);
  background-color: transparent;
}

.gesturePwdPanel .content-scroller {
  padding-top: .5rem;
  padding-bottom: .5rem !important;
}

.gesturePwdPanel .panel {
  margin: 0 .5rem;
  min-height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.gesturePwdPanel .panel .panel-heading {
  min-height: 70px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.gesturePwdPanel .panel .panel-body {
  padding-top: 0;
  padding-bottom: 0;
}

.gesturePwdPanel .panel .panel-footer {
  color: inherit;
}

.gesturePwdPanel .panel .panel-footer.panel-success {
  display: none;
}

.gesturePwdPanel .panel .panel-footer > div {
  padding-left: 0;
  padding-right: 0;
}

.gesturePwdPanel .panel .btn-skip {
  display: none;
}

.gesturePwdPanel .box {
  width: 100%;
}

.gesturePwdPanel .box .box-flex:first-child {
  vertical-align: top;
}

.gesturePwdPanel .box .box-flex:last-child {
  vertical-align: bottom;
}

.gesturePwdPanel.setFirst .btn-skip {
  display: block;
  text-align: right;
}

.gesturePwdPanel.setSuccess .main-bar {
  padding-left: .5rem;
}

.gesturePwdPanel.setSuccess .main-bar > .btn {
  display: block;
}

.gesturePwdPanel.setSuccess .panel-footer.panel-note {
  display: none;
}

.gesturePwdPanel.setSuccess .panel-footer.panel-success {
  display: block;
}

.gesturePwdPanel .loading {
  bottom: 0;
}

.dialogPanel .modal-dialog .modal-footer .col-xs-12.col-sm-12 + .col-xs-12.col-sm-12 {
  padding-top: .625rem;
}

.dialogPanel .modal-dialog .modal-footer .col-xs-12.col-sm-12 + .col-xs-12.col-sm-12 .title {
  text-align: left;
}

.dialogPanel .modal-dialog .modal-footer .col-xs-6.col-sm-6:first-child {
  padding-left: 0;
  padding-right: 5px;
}

.dialogPanel .modal-dialog .modal-footer .col-xs-6.col-sm-6:last-child {
  padding-left: 5px;
  padding-right: 0;
}

.img-gesturePassword {
  display: block;
  height: 100px;
  background-size: contain;
  background-position: center;
}

.img-depositPromo {
  display: block;
  height: 200px;
  background-size: contain;
  background-position: center;
}

.deposit-descript h1 {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.87);
  margin: 5px 14px 0 14px;
  line-height: 1.2em;
}

.deposit-descript p {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.54);
  margin: 0 14px;
}

.patt-holder {
  background: #3382c0;
}

.patt-wrap {
  position: relative;
  cursor: pointer;
}

.patt-wrap li,
.patt-wrap ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.patt-circ {
  position: relative;
  float: left;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.patt-error .patt-circ.hovered {
  border: 3px solid #ba1b26;
}

.patt-hidden .patt-circ.hovered {
  border: 0;
}

.patt-dots,
.patt-lines {
  border-radius: 5px;
  height: 10px;
  position: absolute;
}

.patt-dots {
  width: 10px;
  top: 50%;
  left: 50%;
  margin-top: -5px;
  margin-left: -5px;
}

.patt-lines {
  background: rgba(255, 255, 255, 0.7);
  transform-origin: 5px 5px;
  -ms-transform-origin: 5px 5px;
  -webkit-transform-origin: 5px 5px;
}

.patt-hidden .patt-lines {
  display: none;
}

.mhn-ui-date-time,
.text-center {
  text-align: center;
}

.pull-left {
  float: left;
}

.pull-right {
  float: right;
}

.clearfix:after,
.clearfix:before {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
  display: block;
}

.mhn-lock-wrap .mhn-lock-title {
  text-align: center;
  line-height: 1.2em;
}

.mhn-lock-wrap .mhn-lock-success {
  color: transparent;
  text-shadow: none;
}

.mhn-lock-wrap .mhn-lock-failure {
  color: #FF2B2B;
}

.mhn-lock {
  margin: auto;
  margin-top: -15px;
  margin-bottom: -15px;
  background: 0 0;
}

.patt-wrap {
  margin: auto;
  overflow: hidden;
}

.patt-wrap li {
  transition: all 0.4s ease-in-out 0s;
}

.patt-dots,
.patt-lines {
  transition: background 0.1s ease-in-out 0s;
}

.patt-dots {
  background-color: HSL(var(--white-opacity-2));
}

.patt-lines {
  background-color: HSLA(var(--secondary-100), 0.2);
}

.patt-circ.hovered {
  border-color: HSL(var(--secondary-100));
  background-color: rgba(0, 0, 0, 0.05);
}

.patt-error .patt-circ.hovered {
  background: rgba(243, 66, 53, 0.4);
  border-color: rgba(243, 66, 53, 0.8);
}

.patt-error .patt-lines {
  background: rgba(243, 66, 53, 0.5);
}

.patt-success .patt-circ.hovered {
  background: rgba(75, 174, 79, 0.4);
  border-color: rgba(75, 174, 79, 0.8);
}

.patt-success .patt-lines {
  background: rgba(75, 174, 79, 0.5);
}

.empty__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 300px;
  margin: auto;
  position: relative;
}

.empty--no-event .img {
  position: relative;
}

.empty--no-event .img:nth-child(1) {
  opacity: 0.7;
}

.empty--no-event .img:nth-child(1)::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: HSL(var(--primary-500));
  -webkit-mask-size: 400px;
          mask-size: 400px;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  mix-blend-mode: overlay;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOTkuNTIgMjMyLjExIj48ZyBpZD0i5ZyW5bGkXzIiIGRhdGEtbmFtZT0i5ZyW5bGkIDIiPjxnIGlkPSLlnJblsaRfMi0yIiBkYXRhLW5hbWU9IuWcluWxpCAyIj48cGF0aCBkPSJNMjM5LjgsMTA4LjQyYy4wNi0uMTQsNC4yOS05LjY5LDguMTktMTksMi41OCwxLjU4LDExLjQsNi41NiwxMS40Ny44MS4wOC03LjE5LTcuOTUtMy41NS0xMS0xLjkxLDEuNjktNCwzLjI4LTgsNC40MS0xMSwuNS0xLjMzLDEtMi42MiwxLjUtMy44OCwzLjQ4LDEuODEsMTcuOCw4LjcsMTcuMzksMC0uNTQtMTAuOTEtMTIuODYtMy44Ni0xNi44OS0xLjI2YTE1MC4zNiwxNTAuMzYsMCwwLDEsOC4zOC0xNy41N2MyLjM1LDEuNDUsMTEuNTcsNi43OSwxMS42NC45MS4wOC03LjI0LTguMDgtMy41LTExLjA5LTEuODdBODUuMTYsODUuMTYsMCwwLDEsMjcxLjA1LDQzYzIuNDktMS4zMSwxOC41Mi0xMCwxMi4zMy0xNS03LjI1LTUuODItMTEuMTIsOC4xMS0xMi4yNywxMy4yOGE3OS44NSw3OS44NSwwLDAsMC03LjU2LDEwLjg5Yy0uMTMtNC40My0uODctMTMuMTMtNC42OC0xMC4yNC01LjQxLDQuMDksMS4wOSw5LjksMy43LDExLjkzYTE1Mi42OCwxNTIuNjgsMCwwLDAtOC40OSwxNy44Yy0uMzQtNC42OS0xLjc5LTE4LjI0LTYuODQtMTMuODMtNyw2LjE2LDMuNjksMTMuMzksNi4zNiwxNS0uNTMsMS4zMy0xLjA2LDIuNzEtMS42LDQuMTMtMSwyLjY5LTIuMzgsNi4xMi0zLjg3LDkuNzEtLjE0LTQuNDYtLjktMTIuOTUtNC42Ny0xMC4wOS01LjUyLDQuMTgsMS4zNiwxMC4xNCwzLjg2LDEyLTMuOTQsOS40LTguMjgsMTkuMi04LjM0LDE5LjM0WiIvPjxwYXRoIGQ9Ik0yOTkuNSwxNzNzMS0xMy0xNS41MS0yM2MwLDAtNy01LjI0LTIzLTEwLjlsLS4yMy0uMDgtMS4zNS0uNDgtMS4xNC0uMzktLjE4LS4wNnEtNC0xLjM1LTguMzMtMi42bC0yLjU4LS42OWMyMy03LjY5LDU2LjU0LTIzLjUyLDQ5LjUyLTM2LjQ5YTI1LjgzLDI1LjgzLDAsMCwwLTQuNDYtNi4xMmMtNy4yMSwyLjkzLTIwLjUyLDEwLTM5LjksMjYuNTQtNi4yNCw1LjM2LTExLjQxLDkuNzktMTUuNjgsMTMuNDRsLTEuMzgtLjMxLDE2LjMxLTE0QzI3MC44MSwxMDEuNSwyODQsOTQuMzMsMjkxLjM2LDkxLjMzYy0xOC40MS0xNi00OS43MSwyMi02MC41LDM5LjU4cS0xMi42OS0yLjY2LTI1LjU3LTQuMjMtMTMuMjItMS42NC0yNi41Mi0yLjQ1Yy0xOC40Ni0yMC40NS05LjA4LTU0LjA3LTkuMDgtNTQuMDcsNi44My0zMC4zNCwzLjYtNDAuODEsMy42LTQwLjgxQzE2OS4zMSw5LjI5LDE0NS45MSwwLDE0NS45MSwwYy01LS40Ni00MS40Miw1Ljc2LTQxLjQsNS43OUM1OSwxMi41MSw0NywxNiw0NywxNiwyOC41NywyMy42MiwzNC40Myw0MywzNC40Myw0M2MtLjA3LS42MS0uMTEtMS4xOS0uMTYtMS43OCwzLjcxLDIxLjExLDI2LDE3LjQ1LDI2LDE3LjQ1bDIwLjUxLTUuNTVhODYuMjMsODYuMjMsMCwwLDEtMiwzMC41LDExNy4zOCwxMTcuMzgsMCwwLDAtMywyNy42OEM2My41OCw4Ni40OSw0Mi44Myw1Ni44OSwyNCw2OC42OCwzMS42NCw3NCw0NSw4NS41NSw2My4xNiwxMDkuNjJMNjQuOTQsMTEyYy0uNjYsMC0xLjMyLDAtMiwuMDVMNjIsMTEwLjc5Yy0xOC40NS0yNC4zOC0zMi0zNS44Ni0zOS41OC00MWEzMC43MiwzMC43MiwwLDAsMC02LjM3LDYuMzZjLTYsNy44OSwyLjI4LDE5Ljc1LDE1LDMxLjItMTEuODgtNS43OS0yMy44NC03LjM4LTI5LjIyLDQsNi44LDIuMSwyMS41LDYuNjgsMzYuMTYsMTEuNTktLjIzLjItLjQ3LjQzLS43My42OS0xNC41Mi01LTI5LTkuNi0zNS42Ni0xMS43MS0uMjIuNTQtLjQzLDEuMDktLjYyLDEuNjgtNC4yMywxMi44OSwxMi4xNCwxOC4zNCwyOSwyMC4xNGEzNi4zNCwzNi4zNCwwLDAsMC0zLjksMTAuODNjLTIuMjcsMS4wNi00LjQyLDIuMTYtNi40MywzLjI4QzEwLjQzLDE1Myw0LDE1OC45MSwxLjQzLDE2NS4yYy0uMTYuMzgtLjI5Ljc1LS40MiwxLjEzSDFjLTEuMjksMi43LTEuMDgsNi40OC0uOCw4LjcyaDBsMCwuMTNjMCwuMDYsMCwuMTIsMCwuMTguMTQsMSwuNjEsNC42OC44Niw3LjM5LDAsMCwuMjksNC4yNCwxLjM3LDYuNDdhMjkuMTEsMjkuMTEsMCwwLDAsOCwxMC42N3MxMCwxMC42MywzOC45NSwxOS4zOWMwLDAsMjAuMzQsNy4wOSw1NywxMC44MywwLDAsMzIuNTksNCw3Ny40Mi43LDAsMCw0MS4yOS0yLjMzLDc0LjA2LTE0LjI1LDAsMCwzMi45NC0xMC4zOSwzOS4zNy0yOC4yMywwLDAsMS4xMS0yLjA2LDEuMy03LjA4YTM0Ljg5LDM0Ljg5LDAsMCwxLC40MS00LjRBMTMsMTMsMCwwLDAsMjk5LjUsMTczWiIvPjwvZz48L2c+PC9zdmc+);
          mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOTkuNTIgMjMyLjExIj48ZyBpZD0i5ZyW5bGkXzIiIGRhdGEtbmFtZT0i5ZyW5bGkIDIiPjxnIGlkPSLlnJblsaRfMi0yIiBkYXRhLW5hbWU9IuWcluWxpCAyIj48cGF0aCBkPSJNMjM5LjgsMTA4LjQyYy4wNi0uMTQsNC4yOS05LjY5LDguMTktMTksMi41OCwxLjU4LDExLjQsNi41NiwxMS40Ny44MS4wOC03LjE5LTcuOTUtMy41NS0xMS0xLjkxLDEuNjktNCwzLjI4LTgsNC40MS0xMSwuNS0xLjMzLDEtMi42MiwxLjUtMy44OCwzLjQ4LDEuODEsMTcuOCw4LjcsMTcuMzksMC0uNTQtMTAuOTEtMTIuODYtMy44Ni0xNi44OS0xLjI2YTE1MC4zNiwxNTAuMzYsMCwwLDEsOC4zOC0xNy41N2MyLjM1LDEuNDUsMTEuNTcsNi43OSwxMS42NC45MS4wOC03LjI0LTguMDgtMy41LTExLjA5LTEuODdBODUuMTYsODUuMTYsMCwwLDEsMjcxLjA1LDQzYzIuNDktMS4zMSwxOC41Mi0xMCwxMi4zMy0xNS03LjI1LTUuODItMTEuMTIsOC4xMS0xMi4yNywxMy4yOGE3OS44NSw3OS44NSwwLDAsMC03LjU2LDEwLjg5Yy0uMTMtNC40My0uODctMTMuMTMtNC42OC0xMC4yNC01LjQxLDQuMDksMS4wOSw5LjksMy43LDExLjkzYTE1Mi42OCwxNTIuNjgsMCwwLDAtOC40OSwxNy44Yy0uMzQtNC42OS0xLjc5LTE4LjI0LTYuODQtMTMuODMtNyw2LjE2LDMuNjksMTMuMzksNi4zNiwxNS0uNTMsMS4zMy0xLjA2LDIuNzEtMS42LDQuMTMtMSwyLjY5LTIuMzgsNi4xMi0zLjg3LDkuNzEtLjE0LTQuNDYtLjktMTIuOTUtNC42Ny0xMC4wOS01LjUyLDQuMTgsMS4zNiwxMC4xNCwzLjg2LDEyLTMuOTQsOS40LTguMjgsMTkuMi04LjM0LDE5LjM0WiIvPjxwYXRoIGQ9Ik0yOTkuNSwxNzNzMS0xMy0xNS41MS0yM2MwLDAtNy01LjI0LTIzLTEwLjlsLS4yMy0uMDgtMS4zNS0uNDgtMS4xNC0uMzktLjE4LS4wNnEtNC0xLjM1LTguMzMtMi42bC0yLjU4LS42OWMyMy03LjY5LDU2LjU0LTIzLjUyLDQ5LjUyLTM2LjQ5YTI1LjgzLDI1LjgzLDAsMCwwLTQuNDYtNi4xMmMtNy4yMSwyLjkzLTIwLjUyLDEwLTM5LjksMjYuNTQtNi4yNCw1LjM2LTExLjQxLDkuNzktMTUuNjgsMTMuNDRsLTEuMzgtLjMxLDE2LjMxLTE0QzI3MC44MSwxMDEuNSwyODQsOTQuMzMsMjkxLjM2LDkxLjMzYy0xOC40MS0xNi00OS43MSwyMi02MC41LDM5LjU4cS0xMi42OS0yLjY2LTI1LjU3LTQuMjMtMTMuMjItMS42NC0yNi41Mi0yLjQ1Yy0xOC40Ni0yMC40NS05LjA4LTU0LjA3LTkuMDgtNTQuMDcsNi44My0zMC4zNCwzLjYtNDAuODEsMy42LTQwLjgxQzE2OS4zMSw5LjI5LDE0NS45MSwwLDE0NS45MSwwYy01LS40Ni00MS40Miw1Ljc2LTQxLjQsNS43OUM1OSwxMi41MSw0NywxNiw0NywxNiwyOC41NywyMy42MiwzNC40Myw0MywzNC40Myw0M2MtLjA3LS42MS0uMTEtMS4xOS0uMTYtMS43OCwzLjcxLDIxLjExLDI2LDE3LjQ1LDI2LDE3LjQ1bDIwLjUxLTUuNTVhODYuMjMsODYuMjMsMCwwLDEtMiwzMC41LDExNy4zOCwxMTcuMzgsMCwwLDAtMywyNy42OEM2My41OCw4Ni40OSw0Mi44Myw1Ni44OSwyNCw2OC42OCwzMS42NCw3NCw0NSw4NS41NSw2My4xNiwxMDkuNjJMNjQuOTQsMTEyYy0uNjYsMC0xLjMyLDAtMiwuMDVMNjIsMTEwLjc5Yy0xOC40NS0yNC4zOC0zMi0zNS44Ni0zOS41OC00MWEzMC43MiwzMC43MiwwLDAsMC02LjM3LDYuMzZjLTYsNy44OSwyLjI4LDE5Ljc1LDE1LDMxLjItMTEuODgtNS43OS0yMy44NC03LjM4LTI5LjIyLDQsNi44LDIuMSwyMS41LDYuNjgsMzYuMTYsMTEuNTktLjIzLjItLjQ3LjQzLS43My42OS0xNC41Mi01LTI5LTkuNi0zNS42Ni0xMS43MS0uMjIuNTQtLjQzLDEuMDktLjYyLDEuNjgtNC4yMywxMi44OSwxMi4xNCwxOC4zNCwyOSwyMC4xNGEzNi4zNCwzNi4zNCwwLDAsMC0zLjksMTAuODNjLTIuMjcsMS4wNi00LjQyLDIuMTYtNi40MywzLjI4QzEwLjQzLDE1Myw0LDE1OC45MSwxLjQzLDE2NS4yYy0uMTYuMzgtLjI5Ljc1LS40MiwxLjEzSDFjLTEuMjksMi43LTEuMDgsNi40OC0uOCw4LjcyaDBsMCwuMTNjMCwuMDYsMCwuMTIsMCwuMTguMTQsMSwuNjEsNC42OC44Niw3LjM5LDAsMCwuMjksNC4yNCwxLjM3LDYuNDdhMjkuMTEsMjkuMTEsMCwwLDAsOCwxMC42N3MxMCwxMC42MywzOC45NSwxOS4zOWMwLDAsMjAuMzQsNy4wOSw1NywxMC44MywwLDAsMzIuNTksNCw3Ny40Mi43LDAsMCw0MS4yOS0yLjMzLDc0LjA2LTE0LjI1LDAsMCwzMi45NC0xMC4zOSwzOS4zNy0yOC4yMywwLDAsMS4xMS0yLjA2LDEuMy03LjA4YTM0Ljg5LDM0Ljg5LDAsMCwxLC40MS00LjRBMTMsMTMsMCwwLDAsMjk5LjUsMTczWiIvPjwvZz48L2c+PC9zdmc+);
}

.empty--no-event .img:nth-child(2) {
  position: absolute;
  bottom: 6.5rem;
  right: 0%;
  z-index: 1;
}

.empty--no-event .text:nth-child(3) {
  margin-top: .5rem;
  font-weight: 700;
  font-size: 1.25rem;
  color: HSL(var(--primary-100));
}

.empty--no-event .text:last-child {
  color: HSL(var(--white-opacity-3));
}

.empty .text {
  text-align: center;
}

.empty .text + .text {
  margin-left: 0;
}

[data-layout="desktop"] .empty {
  padding: 10% 0;
}

[data-layout="mobile"] .empty {
  padding: calc( 15% + 2rem) 5% 15%;
}

.header-logo {
  display: flex;
}

.header-logo::before {
  content: "";
  display: inline-block;
  background-image: url("../images/logo_slogan/logo_en.svg?0.4236");
}

[lang="ch"] .header-logo::before, [lang="zh-TW"] .header-logo::before {
  background-image: url("../images/logo_slogan/logo_ch.svg?0.63441");
}

[lang="cs"] .header-logo::before, [lang="zh-CN"] .header-logo::before, [lang="zh-CHS"] .header-logo::before, [lang="zhcn"] .header-logo::before {
  background-image: url("../images/logo_slogan/logo_cs.svg?0.92866");
}

[lang="vn"] .header-logo::before, [lang="vi-VN"] .header-logo::before {
  background-image: url("../images/logo_slogan/logo_vn.svg?0.77762");
}

.header-logo {
  --logo-default-width: 130px;
  --logo-default-height: 70px;
}

[data-layout="desktop"] .header-logo {
  --header-logo-width: var(--logo-default-width);
  --header-logo-height: var(--logo-default-height);
}

[data-layout="mobile"] .header-logo {
  --header-logo-width: calc(var( --logo-default-width) * 0.75);
  --header-logo-height: calc(var( --logo-default-height) * 0.75);
}