@font-face {
  font-family: big_whaleregular;
  src: url(media/big_whale_regular-webfont.9adebbefe4dac39d25eabbbb06868051.woff2)
      format("woff2"),
    url(media/big_whale_regular-webfont.495b36b9b99ab9f5d3241540d7b2b2a7.woff)
      format("woff");
  font-weight: 400;
  font-style: normal;
}

body,
html {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  width: 100%;
  font-weight: 400;
  z-index: -100;
  background: #fff;
  background: -webkit-radial-gradient(circle, #fff 0, #ffead1 80%);
  background: -moz-radial-gradient(circle, #fff 0, #ffead1 80%);
  background: radial-gradient(circle, #fff 0, #ffead1 80%);
  background-size: 100%;
  font-family: arial;
  margin: 0;
  height: auto;
  padding: 0;
  font-size: 13px;
  -moz-osx-font-smoothing: grayscale;
  -moz-user-select: none;
  text-rendering: optimizelegibility;
  outline: none;
  color: #333;
  line-height: 18px;
}

body.darkTheme {
  background: #3a0475;
  background: -webkit-radial-gradient(circle, #3a0475 0, #000333 80%);
  background: -moz-radial-gradient(circle, #3a0475 0, #000333 80%);
  background: radial-gradient(circle, #3a0475 0, #000333 80%);
}

body.darkTheme .footer {
  border-top: 1px solid #343763;
  color: #fff;
}

body.darkTheme .footer a {
  color: #fff;
}

body .footer {
  border-top: 1px solid #fde0bc;
}

body .footer,
body .footer a {
  color: #000333;
}

li,
ul {
  list-style: none;
}

img,
li,
ul {
  padding: 0;
  margin: 0;
}

button {
  background-color: #00acf2;
  padding: 8px 12px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border: none;
  font-size: 16px;
  color: #fff;
}

button:hover {
  background-color: #f0f0f0;
  cursor: pointer;
  color: #333;
}

abbr,
blockquote,
dd,
dl,
dt,
fieldset,
figure,
form,
h1,
h2,
h3,
h4,
h5,
h6,
hgroup,
input,
legend,
li,
ol,
p,
pre,
ul {
  margin: 0;
  padding: 0;
}

a {
  cursor: pointer;
  color: #333;
  text-decoration: none;
  letter-spacing: 0.3px;
}

a:hover {
  color: #ff00ae;
}

img {
  width: 100%;
}

.bg-img {
  background-position: 50%;
}

.bantinh,
.bg-img {
  background-repeat: no-repeat;
  background-size: cover;
}

.bantinh {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 auto;
  position: relative;
}

@media screen and (min-width: 1025px) {
  .bantinh {
    padding: 24px 0;
    height: 443px;
    top: -webkit-calc(500px - 443px - 32px);
    top: -moz-calc(500px - 443px - 32px);
    top: calc(500px - 443px - 32px);
  }
}

@media screen and (max-width: 1024px) {
  .bantinh {
    padding: 18px 0;
    height: 320px;
    top: -webkit-calc(380px - 320px - 32px);
    top: -moz-calc(380px - 320px - 32px);
    top: calc(380px - 320px - 32px);
  }
}

@media screen and (min-width: 1025px) {
  .bantinh.ban-tinh-08 {
    width: 1163px;
  }
}

@media screen and (max-width: 1024px) {
  .bantinh.ban-tinh-08 {
    width: 840px;
  }
}

@media screen and (min-width: 1025px) {
  .bantinh.ban-tinh-08 .hanghat.hanghat-01 {
    left: -webkit-calc(1038px - 42px);
    left: -moz-calc(1038px - 42px);
    left: calc(1038px - 42px);
  }
}

@media screen and (max-width: 1024px) {
  .bantinh.ban-tinh-08 .hanghat.hanghat-01 {
    left: -webkit-calc(776px - 54px) !important;
    left: -moz-calc(776px - 54px) !important;
    left: calc(776px - 54px) !important;
  }
}

@media screen and (min-width: 1025px) {
  .bantinh.ban-tinh-08 .hanghat.hanghat-02 {
    left: -webkit-calc(902px - 42px);
    left: -moz-calc(902px - 42px);
    left: calc(902px - 42px);
  }
}

@media screen and (max-width: 1024px) {
  .bantinh.ban-tinh-08 .hanghat.hanghat-02 {
    left: -webkit-calc(678px - 54px) !important;
    left: -moz-calc(678px - 54px) !important;
    left: calc(678px - 54px) !important;
  }
}

@media screen and (min-width: 1025px) {
  .bantinh.ban-tinh-08 .hanghat.hanghat-03 {
    left: -webkit-calc(768px - 42px);
    left: -moz-calc(768px - 42px);
    left: calc(768px - 42px);
  }
}

@media screen and (max-width: 1024px) {
  .bantinh.ban-tinh-08 .hanghat.hanghat-03 {
    left: -webkit-calc(580px - 54px) !important;
    left: -moz-calc(580px - 54px) !important;
    left: calc(580px - 54px) !important;
  }
}

@media screen and (min-width: 1025px) {
  .bantinh.ban-tinh-08 .hanghat.hanghat-04 {
    left: -webkit-calc(632px - 42px);
    left: -moz-calc(632px - 42px);
    left: calc(632px - 42px);
  }
}

@media screen and (max-width: 1024px) {
  .bantinh.ban-tinh-08 .hanghat.hanghat-04 {
    left: -webkit-calc(482px - 54px) !important;
    left: -moz-calc(482px - 54px) !important;
    left: calc(482px - 54px) !important;
  }
}

@media screen and (min-width: 1025px) {
  .bantinh.ban-tinh-08 .hanghat.hanghat-05 {
    left: -webkit-calc(498px - 42px);
    left: -moz-calc(498px - 42px);
    left: calc(498px - 42px);
  }
}

@media screen and (max-width: 1024px) {
  .bantinh.ban-tinh-08 .hanghat.hanghat-05 {
    left: -webkit-calc(386px - 54px) !important;
    left: -moz-calc(386px - 54px) !important;
    left: calc(386px - 54px) !important;
  }
}

@media screen and (min-width: 1025px) {
  .bantinh.ban-tinh-08 .hanghat.hanghat-06 {
    left: -webkit-calc(362px - 42px);
    left: -moz-calc(362px - 42px);
    left: calc(362px - 42px);
  }
}

@media screen and (max-width: 1024px) {
  .bantinh.ban-tinh-08 .hanghat.hanghat-06 {
    left: -webkit-calc(288px - 54px) !important;
    left: -moz-calc(288px - 54px) !important;
    left: calc(288px - 54px) !important;
  }
}

@media screen and (min-width: 1025px) {
  .bantinh.ban-tinh-08 .hanghat.hanghat-07 {
    left: -webkit-calc(228px - 42px);
    left: -moz-calc(228px - 42px);
    left: calc(228px - 42px);
  }
}

@media screen and (max-width: 1024px) {
  .bantinh.ban-tinh-08 .hanghat.hanghat-07 {
    left: -webkit-calc(190px - 54px) !important;
    left: -moz-calc(190px - 54px) !important;
    left: calc(190px - 54px) !important;
  }
}

@media screen and (min-width: 1025px) {
  .bantinh.ban-tinh-08 .hanghat.hanghat-08 {
    left: -webkit-calc(92px - 42px);
    left: -moz-calc(92px - 42px);
    left: calc(92px - 42px);
  }
}

@media screen and (max-width: 1024px) {
  .bantinh.ban-tinh-08 .hanghat.hanghat-08 {
    left: -webkit-calc(92px - 54px) !important;
    left: -moz-calc(92px - 54px) !important;
    left: calc(92px - 54px) !important;
  }
}

@media screen and (min-width: 1025px) {
  .bantinh.ban-tinh-07 {
    width: 1028px;
  }
}

@media screen and (max-width: 1024px) {
  .bantinh.ban-tinh-07 {
    width: 743px;
  }
}

@media screen and (min-width: 1025px) {
  .bantinh.ban-tinh-07 .hanghat.hanghat-01 {
    left: -webkit-calc(902px - 42px);
    left: -moz-calc(902px - 42px);
    left: calc(902px - 42px);
  }
}

@media screen and (max-width: 1024px) {
  .bantinh.ban-tinh-07 .hanghat.hanghat-01 {
    left: -webkit-calc(678px - 54px) !important;
    left: -moz-calc(678px - 54px) !important;
    left: calc(678px - 54px) !important;
  }
}

@media screen and (min-width: 1025px) {
  .bantinh.ban-tinh-07 .hanghat.hanghat-02 {
    left: -webkit-calc(768px - 42px);
    left: -moz-calc(768px - 42px);
    left: calc(768px - 42px);
  }
}

@media screen and (max-width: 1024px) {
  .bantinh.ban-tinh-07 .hanghat.hanghat-02 {
    left: -webkit-calc(580px - 54px) !important;
    left: -moz-calc(580px - 54px) !important;
    left: calc(580px - 54px) !important;
  }
}

@media screen and (min-width: 1025px) {
  .bantinh.ban-tinh-07 .hanghat.hanghat-03 {
    left: -webkit-calc(632px - 42px);
    left: -moz-calc(632px - 42px);
    left: calc(632px - 42px);
  }
}

@media screen and (max-width: 1024px) {
  .bantinh.ban-tinh-07 .hanghat.hanghat-03 {
    left: -webkit-calc(482px - 54px) !important;
    left: -moz-calc(482px - 54px) !important;
    left: calc(482px - 54px) !important;
  }
}

@media screen and (min-width: 1025px) {
  .bantinh.ban-tinh-07 .hanghat.hanghat-04 {
    left: -webkit-calc(498px - 42px);
    left: -moz-calc(498px - 42px);
    left: calc(498px - 42px);
  }
}

@media screen and (max-width: 1024px) {
  .bantinh.ban-tinh-07 .hanghat.hanghat-04 {
    left: -webkit-calc(386px - 54px) !important;
    left: -moz-calc(386px - 54px) !important;
    left: calc(386px - 54px) !important;
  }
}

@media screen and (min-width: 1025px) {
  .bantinh.ban-tinh-07 .hanghat.hanghat-05 {
    left: -webkit-calc(362px - 42px);
    left: -moz-calc(362px - 42px);
    left: calc(362px - 42px);
  }
}

@media screen and (max-width: 1024px) {
  .bantinh.ban-tinh-07 .hanghat.hanghat-05 {
    left: -webkit-calc(288px - 54px) !important;
    left: -moz-calc(288px - 54px) !important;
    left: calc(288px - 54px) !important;
  }
}

@media screen and (min-width: 1025px) {
  .bantinh.ban-tinh-07 .hanghat.hanghat-06 {
    left: -webkit-calc(228px - 42px);
    left: -moz-calc(228px - 42px);
    left: calc(228px - 42px);
  }
}

@media screen and (max-width: 1024px) {
  .bantinh.ban-tinh-07 .hanghat.hanghat-06 {
    left: -webkit-calc(190px - 54px) !important;
    left: -moz-calc(190px - 54px) !important;
    left: calc(190px - 54px) !important;
  }
}

@media screen and (min-width: 1025px) {
  .bantinh.ban-tinh-07 .hanghat.hanghat-07 {
    left: -webkit-calc(92px - 42px);
    left: -moz-calc(92px - 42px);
    left: calc(92px - 42px);
  }
}

@media screen and (max-width: 1024px) {
  .bantinh.ban-tinh-07 .hanghat.hanghat-07 {
    left: -webkit-calc(92px - 54px) !important;
    left: -moz-calc(92px - 54px) !important;
    left: calc(92px - 54px) !important;
  }
}

@media screen and (min-width: 1025px) {
  .bantinh.ban-tinh-06 {
    width: 893px;
  }
}

@media screen and (max-width: 1024px) {
  .bantinh.ban-tinh-06 {
    width: 645px;
  }
}

@media screen and (min-width: 1025px) {
  .bantinh.ban-tinh-06 .hanghat.hanghat-01 {
    left: -webkit-calc(768px - 42px);
    left: -moz-calc(768px - 42px);
    left: calc(768px - 42px);
  }
}

@media screen and (max-width: 1024px) {
  .bantinh.ban-tinh-06 .hanghat.hanghat-01 {
    left: -webkit-calc(580px - 54px) !important;
    left: -moz-calc(580px - 54px) !important;
    left: calc(580px - 54px) !important;
  }
}

@media screen and (min-width: 1025px) {
  .bantinh.ban-tinh-06 .hanghat.hanghat-02 {
    left: -webkit-calc(632px - 42px);
    left: -moz-calc(632px - 42px);
    left: calc(632px - 42px);
  }
}

@media screen and (max-width: 1024px) {
  .bantinh.ban-tinh-06 .hanghat.hanghat-02 {
    left: -webkit-calc(482px - 54px) !important;
    left: -moz-calc(482px - 54px) !important;
    left: calc(482px - 54px) !important;
  }
}

@media screen and (min-width: 1025px) {
  .bantinh.ban-tinh-06 .hanghat.hanghat-03 {
    left: -webkit-calc(498px - 42px);
    left: -moz-calc(498px - 42px);
    left: calc(498px - 42px);
  }
}

@media screen and (max-width: 1024px) {
  .bantinh.ban-tinh-06 .hanghat.hanghat-03 {
    left: -webkit-calc(386px - 54px) !important;
    left: -moz-calc(386px - 54px) !important;
    left: calc(386px - 54px) !important;
  }
}

@media screen and (min-width: 1025px) {
  .bantinh.ban-tinh-06 .hanghat.hanghat-04 {
    left: -webkit-calc(362px - 42px);
    left: -moz-calc(362px - 42px);
    left: calc(362px - 42px);
  }
}

@media screen and (max-width: 1024px) {
  .bantinh.ban-tinh-06 .hanghat.hanghat-04 {
    left: -webkit-calc(288px - 54px) !important;
    left: -moz-calc(288px - 54px) !important;
    left: calc(288px - 54px) !important;
  }
}

@media screen and (min-width: 1025px) {
  .bantinh.ban-tinh-06 .hanghat.hanghat-05 {
    left: -webkit-calc(228px - 42px);
    left: -moz-calc(228px - 42px);
    left: calc(228px - 42px);
  }
}

@media screen and (max-width: 1024px) {
  .bantinh.ban-tinh-06 .hanghat.hanghat-05 {
    left: -webkit-calc(190px - 54px) !important;
    left: -moz-calc(190px - 54px) !important;
    left: calc(190px - 54px) !important;
  }
}

@media screen and (min-width: 1025px) {
  .bantinh.ban-tinh-06 .hanghat.hanghat-06 {
    left: -webkit-calc(92px - 42px);
    left: -moz-calc(92px - 42px);
    left: calc(92px - 42px);
  }
}

@media screen and (max-width: 1024px) {
  .bantinh.ban-tinh-06 .hanghat.hanghat-06 {
    left: -webkit-calc(92px - 54px) !important;
    left: -moz-calc(92px - 54px) !important;
    left: calc(92px - 54px) !important;
  }
}

@media screen and (min-width: 1025px) {
  .bantinh.ban-tinh-05 {
    width: 758px;
  }
}

@media screen and (max-width: 1024px) {
  .bantinh.ban-tinh-05 {
    width: 548px;
  }
}

@media screen and (min-width: 1025px) {
  .bantinh.ban-tinh-05 .hanghat.hanghat-01 {
    left: -webkit-calc(632px - 42px);
    left: -moz-calc(632px - 42px);
    left: calc(632px - 42px);
  }
}

@media screen and (max-width: 1024px) {
  .bantinh.ban-tinh-05 .hanghat.hanghat-01 {
    left: -webkit-calc(482px - 54px) !important;
    left: -moz-calc(482px - 54px) !important;
    left: calc(482px - 54px) !important;
  }
}

@media screen and (min-width: 1025px) {
  .bantinh.ban-tinh-05 .hanghat.hanghat-02 {
    left: -webkit-calc(498px - 42px);
    left: -moz-calc(498px - 42px);
    left: calc(498px - 42px);
  }
}

@media screen and (max-width: 1024px) {
  .bantinh.ban-tinh-05 .hanghat.hanghat-02 {
    left: -webkit-calc(386px - 54px) !important;
    left: -moz-calc(386px - 54px) !important;
    left: calc(386px - 54px) !important;
  }
}

@media screen and (min-width: 1025px) {
  .bantinh.ban-tinh-05 .hanghat.hanghat-03 {
    left: -webkit-calc(362px - 42px);
    left: -moz-calc(362px - 42px);
    left: calc(362px - 42px);
  }
}

@media screen and (max-width: 1024px) {
  .bantinh.ban-tinh-05 .hanghat.hanghat-03 {
    left: -webkit-calc(288px - 54px) !important;
    left: -moz-calc(288px - 54px) !important;
    left: calc(288px - 54px) !important;
  }
}

@media screen and (min-width: 1025px) {
  .bantinh.ban-tinh-05 .hanghat.hanghat-04 {
    left: -webkit-calc(228px - 42px);
    left: -moz-calc(228px - 42px);
    left: calc(228px - 42px);
  }
}

@media screen and (max-width: 1024px) {
  .bantinh.ban-tinh-05 .hanghat.hanghat-04 {
    left: -webkit-calc(190px - 54px) !important;
    left: -moz-calc(190px - 54px) !important;
    left: calc(190px - 54px) !important;
  }
}

@media screen and (min-width: 1025px) {
  .bantinh.ban-tinh-05 .hanghat.hanghat-05 {
    left: -webkit-calc(92px - 42px);
    left: -moz-calc(92px - 42px);
    left: calc(92px - 42px);
  }
}

@media screen and (max-width: 1024px) {
  .bantinh.ban-tinh-05 .hanghat.hanghat-05 {
    left: -webkit-calc(92px - 54px) !important;
    left: -moz-calc(92px - 54px) !important;
    left: calc(92px - 54px) !important;
  }
}

@media screen and (min-width: 1025px) {
  .bantinh.ban-tinh-04 {
    width: 623px;
  }
}

@media screen and (max-width: 1024px) {
  .bantinh.ban-tinh-04 {
    width: 450px;
  }
}

@media screen and (min-width: 1025px) {
  .bantinh.ban-tinh-04 .hanghat.hanghat-01 {
    left: -webkit-calc(498px - 42px);
    left: -moz-calc(498px - 42px);
    left: calc(498px - 42px);
  }
}

@media screen and (max-width: 1024px) {
  .bantinh.ban-tinh-04 .hanghat.hanghat-01 {
    left: -webkit-calc(386px - 54px) !important;
    left: -moz-calc(386px - 54px) !important;
    left: calc(386px - 54px) !important;
  }
}

@media screen and (min-width: 1025px) {
  .bantinh.ban-tinh-04 .hanghat.hanghat-02 {
    left: -webkit-calc(362px - 42px);
    left: -moz-calc(362px - 42px);
    left: calc(362px - 42px);
  }
}

@media screen and (max-width: 1024px) {
  .bantinh.ban-tinh-04 .hanghat.hanghat-02 {
    left: -webkit-calc(288px - 54px) !important;
    left: -moz-calc(288px - 54px) !important;
    left: calc(288px - 54px) !important;
  }
}

@media screen and (min-width: 1025px) {
  .bantinh.ban-tinh-04 .hanghat.hanghat-03 {
    left: -webkit-calc(228px - 42px);
    left: -moz-calc(228px - 42px);
    left: calc(228px - 42px);
  }
}

@media screen and (max-width: 1024px) {
  .bantinh.ban-tinh-04 .hanghat.hanghat-03 {
    left: -webkit-calc(190px - 54px) !important;
    left: -moz-calc(190px - 54px) !important;
    left: calc(190px - 54px) !important;
  }
}

@media screen and (min-width: 1025px) {
  .bantinh.ban-tinh-04 .hanghat.hanghat-04 {
    left: -webkit-calc(92px - 42px);
    left: -moz-calc(92px - 42px);
    left: calc(92px - 42px);
  }
}

@media screen and (max-width: 1024px) {
  .bantinh.ban-tinh-04 .hanghat.hanghat-04 {
    left: -webkit-calc(92px - 54px) !important;
    left: -moz-calc(92px - 54px) !important;
    left: calc(92px - 54px) !important;
  }
}

@media screen and (min-width: 1025px) {
  .bantinh.ban-tinh-03 {
    width: 488px;
  }
}

@media screen and (max-width: 1024px) {
  .bantinh.ban-tinh-03 {
    width: 353px;
  }
}

@media screen and (min-width: 1025px) {
  .bantinh.ban-tinh-03 .hanghat.hanghat-01 {
    left: -webkit-calc(362px - 42px);
    left: -moz-calc(362px - 42px);
    left: calc(362px - 42px);
  }
}

@media screen and (max-width: 1024px) {
  .bantinh.ban-tinh-03 .hanghat.hanghat-01 {
    left: -webkit-calc(288px - 54px) !important;
    left: -moz-calc(288px - 54px) !important;
    left: calc(288px - 54px) !important;
  }
}

@media screen and (min-width: 1025px) {
  .bantinh.ban-tinh-03 .hanghat.hanghat-02 {
    left: -webkit-calc(228px - 42px);
    left: -moz-calc(228px - 42px);
    left: calc(228px - 42px);
  }
}

@media screen and (max-width: 1024px) {
  .bantinh.ban-tinh-03 .hanghat.hanghat-02 {
    left: -webkit-calc(190px - 54px) !important;
    left: -moz-calc(190px - 54px) !important;
    left: calc(190px - 54px) !important;
  }
}

@media screen and (min-width: 1025px) {
  .bantinh.ban-tinh-03 .hanghat.hanghat-03 {
    left: -webkit-calc(92px - 42px);
    left: -moz-calc(92px - 42px);
    left: calc(92px - 42px);
  }
}

@media screen and (max-width: 1024px) {
  .bantinh.ban-tinh-03 .hanghat.hanghat-03 {
    left: -webkit-calc(92px - 54px) !important;
    left: -moz-calc(92px - 54px) !important;
    left: calc(92px - 54px) !important;
  }
}

@media screen and (min-width: 1025px) {
  .bantinh.ban-tinh-02 {
    width: 353px;
  }
}

@media screen and (max-width: 1024px) {
  .bantinh.ban-tinh-02 {
    width: 255px;
  }
}

@media screen and (min-width: 1025px) {
  .bantinh.ban-tinh-02 .hanghat.hanghat-01 {
    left: -webkit-calc(228px - 42px);
    left: -moz-calc(228px - 42px);
    left: calc(228px - 42px);
  }
}

@media screen and (max-width: 1024px) {
  .bantinh.ban-tinh-02 .hanghat.hanghat-01 {
    left: -webkit-calc(190px - 54px) !important;
    left: -moz-calc(190px - 54px) !important;
    left: calc(190px - 54px) !important;
  }
}

@media screen and (min-width: 1025px) {
  .bantinh.ban-tinh-02 .hanghat.hanghat-02 {
    left: -webkit-calc(92px - 42px);
    left: -moz-calc(92px - 42px);
    left: calc(92px - 42px);
  }
}

@media screen and (max-width: 1024px) {
  .bantinh.ban-tinh-02 .hanghat.hanghat-02 {
    left: -webkit-calc(92px - 54px) !important;
    left: -moz-calc(92px - 54px) !important;
    left: calc(92px - 54px) !important;
  }
}

.bantinh .hanghat {
  position: absolute;
}

@media screen and (min-width: 1025px) {
  .bantinh .hanghat {
    width: 116px;
    height: -webkit-calc(443px - 24px * 2);
    height: -moz-calc(443px - 24px * 2);
    height: calc(443px - 24px * 2);
  }
}

@media screen and (max-width: 1024px) {
  .bantinh .hanghat {
    width: 80px;
    height: -webkit-calc(320px - 18px * 2);
    height: -moz-calc(320px - 18px * 2);
    height: calc(320px - 18px * 2);
  }
}

@media screen and (min-width: 1025px) {
  .bantinh .hanghat.result-5 .hat-five {
    top: 52px;
  }
}

@media screen and (max-width: 1024px) {
  .bantinh .hanghat.result-5 .hat-five {
    top: 40px;
  }
}

@media screen and (min-width: 1025px) {
  .bantinh .hanghat.result-1 .hat-one .one-1 {
    top: -44px;
  }
}

@media screen and (max-width: 1024px) {
  .bantinh .hanghat.result-1 .hat-one .one-1 {
    top: -38px;
  }
}

@media screen and (min-width: 1025px) {
  .bantinh .hanghat.result-2 .hat-one .one-2 {
    top: -44px;
  }
}

@media screen and (max-width: 1024px) {
  .bantinh .hanghat.result-2 .hat-one .one-2 {
    top: -38px;
  }
}

@media screen and (min-width: 1025px) {
  .bantinh .hanghat.result-3 .hat-one .one-3 {
    top: -44px;
  }
}

@media screen and (max-width: 1024px) {
  .bantinh .hanghat.result-3 .hat-one .one-3 {
    top: -40px;
  }
}

@media screen and (min-width: 1025px) {
  .bantinh .hanghat.result-4 .hat-one .one-1 {
    top: -44px;
  }
}

@media screen and (max-width: 1024px) {
  .bantinh .hanghat.result-4 .hat-one .one-1 {
    top: -38px;
  }
}

@media screen and (min-width: 1025px) {
  .bantinh .hanghat.result-4 .hat-one .one-2 {
    top: -44px;
  }
}

@media screen and (max-width: 1024px) {
  .bantinh .hanghat.result-4 .hat-one .one-2 {
    top: -38px;
  }
}

@media screen and (min-width: 1025px) {
  .bantinh .hanghat.result-4 .hat-one .one-3 {
    top: -44px;
  }
}

@media screen and (max-width: 1024px) {
  .bantinh .hanghat.result-4 .hat-one .one-3 {
    top: -38px;
  }
}

@media screen and (min-width: 1025px) {
  .bantinh .hanghat.result-4 .hat-one .one-4 {
    top: -44px;
  }
}

@media screen and (max-width: 1024px) {
  .bantinh .hanghat.result-4 .hat-one .one-4 {
    top: -38px;
  }
}

.bantinh .hanghat .hat-five {
  position: absolute;
  cursor: pointer;
  -webkit-transition: all 0.15s;
  -moz-transition: all 0.15s;
  transition: all 0.15s;
  padding-top: 0;
}

@media screen and (min-width: 1025px) {
  .bantinh .hanghat .hat-five {
    width: 116px;
    top: 2px;
    height: 55px;
  }
}

@media screen and (max-width: 1024px) {
  .bantinh .hanghat .hat-five {
    top: 0;
    width: 81px;
    height: 38px;
  }
}

.bantinh .hanghat .nut-tron {
  position: absolute;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (min-width: 1025px) {
  .bantinh .hanghat .nut-tron {
    width: 20px;
    height: 20px;
    top: 110px;
    right: -webkit-calc(50% - 20px/2);
    right: -moz-calc(50% - 20px/2);
    right: calc(50% - 20px / 2);
    left: -webkit-calc(50% - 20px/2);
    left: -moz-calc(50% - 20px/2);
    left: calc(50% - 20px / 2);
  }
}

@media screen and (max-width: 1024px) {
  .bantinh .hanghat .nut-tron {
    width: 12px;
    height: 12px;
    top: 80px;
    right: -webkit-calc(50% - 10px/2);
    right: -moz-calc(50% - 10px/2);
    right: calc(50% - 10px / 2);
    left: -webkit-calc(50% - 10px/2);
    left: -moz-calc(50% - 10px/2);
    left: calc(50% - 10px / 2);
  }
}

.bantinh .hanghat .hat-one {
  position: absolute;
  bottom: 0;
  -webkit-transition: all 0.15s;
  -moz-transition: all 0.15s;
  transition: all 0.15s;
}

@media screen and (min-width: 1025px) {
  .bantinh .hanghat .hat-one {
    width: 116px;
  }
}

@media screen and (max-width: 1024px) {
  .bantinh .hanghat .hat-one {
    width: 81px;
  }
}

.bantinh .hanghat .hat-one.active {
  bottom: 44px;
}

.bantinh .hanghat .hat-one .one-1 {
  width: 100%;
  cursor: pointer;
  position: relative;
  -webkit-transition: all 0.15s;
  -moz-transition: all 0.15s;
  transition: all 0.15s;
  top: 0;
}

.bantinh .hanghat .hat-one .one-1 img {
  width: 100%;
  height: auto;
  vertical-align: middle;
}

@media screen and (min-width: 1025px) {
  .bantinh .hanghat .hat-one .one-1 {
    width: 116px;
    height: 55px;
  }
}

@media screen and (max-width: 1024px) {
  .bantinh .hanghat .hat-one .one-1 {
    width: 81px;
    height: 38px;
  }
}

.bantinh .hanghat .hat-one .one-2 {
  width: 100%;
  cursor: pointer;
  position: relative;
  -webkit-transition: all 0.15s;
  -moz-transition: all 0.15s;
  transition: all 0.15s;
  top: 0;
}

.bantinh .hanghat .hat-one .one-2 img {
  width: 100%;
  height: auto;
  vertical-align: middle;
}

@media screen and (min-width: 1025px) {
  .bantinh .hanghat .hat-one .one-2 {
    width: 116px;
    height: 55px;
  }
}

@media screen and (max-width: 1024px) {
  .bantinh .hanghat .hat-one .one-2 {
    width: 81px;
    height: 38px;
  }
}

.bantinh .hanghat .hat-one .one-3 {
  width: 100%;
  cursor: pointer;
  position: relative;
  -webkit-transition: all 0.15s;
  -moz-transition: all 0.15s;
  transition: all 0.15s;
  top: 0;
}

.bantinh .hanghat .hat-one .one-3 img {
  width: 100%;
  height: auto;
  vertical-align: middle;
}

@media screen and (min-width: 1025px) {
  .bantinh .hanghat .hat-one .one-3 {
    width: 116px;
    height: 55px;
  }
}

@media screen and (max-width: 1024px) {
  .bantinh .hanghat .hat-one .one-3 {
    width: 81px;
    height: 38px;
  }
}

.bantinh .hanghat .hat-one .one-4 {
  width: 100%;
  cursor: pointer;
  position: relative;
  -webkit-transition: all 0.15s;
  -moz-transition: all 0.15s;
  transition: all 0.15s;
  top: 0;
}

.bantinh .hanghat .hat-one .one-4 img {
  width: 100%;
  height: auto;
  vertical-align: middle;
}

@media screen and (min-width: 1025px) {
  .bantinh .hanghat .hat-one .one-4 {
    width: 116px;
    height: 55px;
  }
}

@media screen and (max-width: 1024px) {
  .bantinh .hanghat .hat-one .one-4 {
    width: 81px;
    height: 38px;
  }
}

.react-switch-bg {
  background-color: #fccb90;
  border: 2px solid #ffc580;
  -webkit-border-radius: 30%;
  -moz-border-radius: 30%;
  border-radius: 30%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: -moz-box;
  display: flex;
  -moz-box-align: center;
  align-items: center;
}

.react-switch-handle {
  background: #f9f32f !important;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#f9f32f),
    to(#ef8d01)
  ) !important;
  background: -webkit-linear-gradient(top, #f9f32f, #ef8d01) !important;
  background: -moz-linear-gradient(top, #f9f32f 0, #ef8d01 100%) !important;
  background: linear-gradient(180deg, #f9f32f, #ef8d01) !important;
  border: 2px solid #fe7d1f !important;
}