@font-face {
    font-family: "SVN-Bango";
    src: url("../fonts/SVN-Bango/SVN-Bango.eot");
    src: url("../fonts/SVN-Bango/SVN-Bango.eot?#iefix")
        format("embedded-opentype"),
      url("../fonts/SVN-Bango/SVN-Bango.woff2") format("woff2"),
      url("../fonts/SVN-Bango/SVN-Bango.woff") format("woff"),
      url("../fonts/SVN-Bango/SVN-Bango.ttf") format("truetype"),
      url("../fonts/SVN-Bango/SVN-Bango.svg#SVN-Bango") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto/Roboto-Medium.eot");
    src: url("../fonts/Roboto/Roboto-Medium.eot?#iefix")
        format("embedded-opentype"),
      url("../fonts/Roboto/Roboto-Medium.woff2") format("woff2"),
      url("../fonts/Roboto/Roboto-Medium.woff") format("woff"),
      url("../fonts/Roboto/Roboto-Medium.ttf") format("truetype"),
      url("../fonts/Roboto/Roboto-Medium.svg#Roboto-Medium") format("svg");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto/Roboto-Bold.eot");
    src: url("../fonts/Roboto/Roboto-Bold.eot?#iefix") format("embedded-opentype"),
      url("../fonts/Roboto/Roboto-Bold.woff2") format("woff2"),
      url("../fonts/Roboto/Roboto-Bold.woff") format("woff"),
      url("../fonts/Roboto/Roboto-Bold.ttf") format("truetype"),
      url("../fonts/Roboto/Roboto-Bold.svg#Roboto-Bold") format("svg");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto/Roboto-Light.eot");
    src: url("../fonts/Roboto/Roboto-Light.eot?#iefix")
        format("embedded-opentype"),
      url("../fonts/Roboto/Roboto-Light.woff2") format("woff2"),
      url("../fonts/Roboto/Roboto-Light.woff") format("woff"),
      url("../fonts/Roboto/Roboto-Light.ttf") format("truetype"),
      url("../fonts/Roboto/Roboto-Light.svg#Roboto-Light") format("svg");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto/Roboto-Regular.eot");
    src: url("../fonts/Roboto/Roboto-Regular.eot?#iefix")
        format("embedded-opentype"),
      url("../fonts/Roboto/Roboto-Regular.woff2") format("woff2"),
      url("../fonts/Roboto/Roboto-Regular.woff") format("woff"),
      url("../fonts/Roboto/Roboto-Regular.ttf") format("truetype"),
      url("../fonts/Roboto/Roboto-Regular.svg#Roboto-Regular") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
  .fRoboto {
    font-family: "Roboto";
  }
  .f_SVN_Bango {
    font-family: "SVN-Bango";
  }
  .fbevietnamproR {
    font-family: "SVN-Bango";
  }
  .fbevietnamproB {
    font-family: "SVN-Bango";
  }
  .fatf_dragonball {
    font-family: "SVN-Bango";
  }
  a,
  abbr,
  acronym,
  address,
  applet,
  big,
  blockquote,
  body,
  caption,
  cite,
  code,
  dd,
  del,
  dfn,
  div,
  dl,
  dt,
  em,
  fieldset,
  font,
  form,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  html,
  iframe,
  ins,
  kbd,
  label,
  legend,
  li,
  object,
  ol,
  p,
  pre,
  q,
  s,
  samp,
  small,
  span,
  strike,
  strong,
  sub,
  sup,
  table,
  tbody,
  td,
  tfoot,
  th,
  thead,
  tr,
  tt,
  ul,
  var {
    border: 0;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
  }
  :focus {
    outline: 0;
  }
  ol,
  ul {
    list-style: none;
  }
  table {
    border-collapse: separate;
    border-spacing: 0;
  }
  caption,
  td,
  th {
    font-weight: normal;
    text-align: left;
  }
  blockquote:after,
  blockquote:before,
  q:after,
  q:before {
    content: "";
  }
  blockquote,
  q {
    quotes: "" "";
  }
  a img {
    border: 0;
  }
  figure {
    margin: 0;
  }
  article,
  aside,
  details,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  menu,
  nav,
  section {
    display: block;
  }
  article,
  aside,
  details,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  menu,
  nav,
  section {
    display: block;
  }
  ol,
  ul {
    list-style: none;
  }
  blockquote,
  q {
    quotes: none;
  }
  blockquote:after,
  blockquote:before,
  q:after,
  q:before {
    content: "";
    content: none;
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  a:focus,
  a:hover,
  a:hover p,
  select:active,
  select:focus,
  select:hover {
    text-decoration: none;
    outline: none !important;
  }
  a,
  a:link {
    text-decoration: none;
    outline: none !important;
    color: #fff;
  }
  .clearfix:after {
    content: "";
    visibility: hidden;
    display: table;
    clear: both;
  }
  ::-webkit-input-placeholder {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
  }
  ::-moz-placeholder {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
  }
  :-ms-input-placeholder {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
  }
  ::-ms-input-placeholder {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
  }
  ::placeholder {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
  }
  :-ms-input-placeholder {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
  }
  ::-ms-input-placeholder {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
  }
  *,
  .box_sizing_border_box {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .a100 {
    width: 100%;
    height: 100%;
    display: block;
  }
  .cp {
    cursor: pointer;
  }
  .pr {
    position: relative;
  }
  .pa {
    position: absolute;
  }
  .w100percent {
    width: 100%;
  }
  .m__inline {
    margin-inline: auto;
  }
  .flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .aCenter {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .jCenter {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .jBetween {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  button,
  input,
  select {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
  }
  input,
  select {
    font-family: "Roboto";
    font-size: clamp(13px, 3vw, 16px);
    color: #cfcfcf;
  }
  .tUpper {
    text-transform: uppercase;
  }
  .tCenter {
    text-align: center;
  }
  .f-left {
    float: left;
  }
  .f-right {
    float: right;
  }
  .img-res {
    max-width: 100%;
    width: auto;
    height: auto;
  }
  .cWhite {
    color: #ffffff !important;
  }
  .cBlack {
    color: #000 !important;
  }
  .cBlack2 {
    color: #322928 !important;
  }
  .cPage {
    color: #7f7f85 !important;
  }
  .cInput {
    color: #232323 !important;
  }
  .cYellow {
    color: #ffd163 !important;
  }
  .cBlue {
    color: #4580f9 !important;
  }
  .cRed {
    color: #d20000 !important;
  }
  .cGCIP {
    color: #cfcfcf !important;
  }
  .link-under {
    text-decoration: underline !important;
  }
  .tdBtn {
    text-shadow: 1px 0 #cc7f0c, -1px 0 #cc7f0c, 0 1px #cc7f0c, 0 -1px #cc7f0c,
      1px 1px #cc7f0c, -1px -1px #cc7f0c, 1px -1px #cc7f0c, -1px 1px #cc7f0c;
  }
  @media only screen and (min-width: 1225px) {
    .tdBtn {
      text-shadow: 2px 0 #cc7f0c, -2px 0 #cc7f0c, 0 2px #cc7f0c, 0 -2px #cc7f0c,
        2px 2px #cc7f0c, -2px -2px #cc7f0c, 2px -2px #cc7f0c, -2px 2px #cc7f0c;
    }
  }
  @-webkit-keyframes zoomInOut {
    0% {
      -webkit-transform: scale(0.95);
      transform: scale(0.95);
    }
    50% {
      -webkit-transform: scale(1.05);
      transform: scale(1.05);
    }
    to {
      -webkit-transform: scale(0.95);
      transform: scale(0.95);
    }
  }
  @keyframes zoomInOut {
    0% {
      -webkit-transform: scale(0.95);
      transform: scale(0.95);
    }
    50% {
      -webkit-transform: scale(1.05);
      transform: scale(1.05);
    }
    to {
      -webkit-transform: scale(0.95);
      transform: scale(0.95);
    }
  }
  @-webkit-keyframes glowing {
    0% {
      background-color: #b20000;
      -webkit-box-shadow: 0 0 3px #b20000;
    }
    50% {
      background-color: #ff0000;
      -webkit-box-shadow: 0 0 40px #ff0000;
    }
    to {
      background-color: #b20000;
      -webkit-box-shadow: 0 0 3px #b20000;
    }
  }
  @keyframes glowing {
    0% {
      background-color: #b20000;
      -webkit-box-shadow: 0 0 3px #b20000;
    }
    50% {
      background-color: #ff0000;
      -webkit-box-shadow: 0 0 40px #ff0000;
    }
    to {
      background-color: #b20000;
      -webkit-box-shadow: 0 0 3px #b20000;
    }
  }
  @-webkit-keyframes rock-boat {
    0% {
      -webkit-transform: rotate(0) translateY(0);
      transform: rotate(0) translateY(0);
    }
    50% {
      -webkit-transform: rotate(-7deg) translateY(-5px);
      transform: rotate(-7deg) translateY(-5px);
    }
    to {
      -webkit-transform: rotate(0) translateY(0);
      transform: rotate(0) translateY(0);
    }
  }
  @keyframes rock-boat {
    0% {
      -webkit-transform: rotate(0) translateY(0);
      transform: rotate(0) translateY(0);
    }
    50% {
      -webkit-transform: rotate(-7deg) translateY(-5px);
      transform: rotate(-7deg) translateY(-5px);
    }
    to {
      -webkit-transform: rotate(0) translateY(0);
      transform: rotate(0) translateY(0);
    }
  }
  @-webkit-keyframes move {
    0% {
      -webkit-transform: translate(0px, 0px);
      transform: translate(0px, 0px);
    }
    50% {
      -webkit-transform: translate(0px, 5px);
      transform: translate(0px, 5px);
    }
    to {
      -webkit-transform: translate(0px, 0px);
      transform: translate(0px, 0px);
    }
  }
  @keyframes move {
    0% {
      -webkit-transform: translate(0px, 0px);
      transform: translate(0px, 0px);
    }
    50% {
      -webkit-transform: translate(0px, 5px);
      transform: translate(0px, 5px);
    }
    to {
      -webkit-transform: translate(0px, 0px);
      transform: translate(0px, 0px);
    }
  }
  @-webkit-keyframes tada {
    0% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
    10%,
    20% {
      -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
      transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    }
    30%,
    50%,
    70%,
    90% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }
    40%,
    60%,
    80% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }
    to {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }
  @keyframes tada {
    0% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
    10%,
    20% {
      -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
      transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    }
    30%,
    50%,
    70%,
    90% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }
    40%,
    60%,
    80% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }
    to {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }
  .tRight {
    text-align: right;
  }
  .textStrong {
    color: #ff0000;
  }
  .tShadow {
    text-shadow: 4px 0 0 #fff, -3px 0 0 #fff, 0 4px 0 #fff, 0 -3px 0 #fff,
      4px 4px #fff, -3px -3px 0 #fff, 3px -3px 0 #fff, -3px 3px 0 #fff;
  }
  .jCenter {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .jEnd {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }
  html.root__page {
    scroll-behavior: smooth;
    overflow-x: hidden;
    font-size: 62.5%;
  }
  body.h5--game__screen {
    font-family: "bevietnamproR";
    font-size: 1.5rem;
    line-height: 1.5;
    color: #fff;
    background-color: #393939;
    min-height: 100vh;
    max-width: 1920px;
    margin-inline: auto;
    overflow-x: hidden !important;
  }
  .limit__game {
    position: relative;
    width: 100%;
    margin-inline: auto;
  }
  @media only screen and (min-width: 992px) {
    .limit__game {
      max-width: 99.2rem;
    }
  }
  @media only screen and (max-width: 991px) {
    .hideMB {
      display: none !important;
    }
  }
  @media only screen and (min-width: 992px) {
    .hidePC {
      display: none !important;
    }
  }
  .link-hv.active .img-hv,
  .link-hv:hover .img-hv {
    display: inline-block;
  }
  .link-hv .img-ac,
  .link-hv .img-hv {
    width: 100%;
  }
  .link-hv .img-hv {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
  }
  .btn-tranY {
    -webkit-transition: all 0.25s;
    transition: all 0.25s;
  }
  .btn-tranY.active,
  .btn-tranY:hover {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
  .btn-Zoom {
    -webkit-transition: all 0.25s;
    transition: all 0.25s;
  }
  .btn-Zoom.active,
  .btn-Zoom:hover {
    -webkit-transform: scale(1.1) !important;
    transform: scale(1.1) !important;
  }
  .mt-1per {
    margin-top: 1%;
  }
  .mt-2per {
    margin-top: 2%;
  }
  .mt-3per {
    margin-top: 3%;
  }
  .mt-4per {
    margin-top: 4%;
  }
  .pagination {
    margin-top: 10px;
  }
  @media only screen and (min-width: 768px) {
    .pagination {
      margin-top: 20px;
    }
  }
  .pagination ul {
    text-align: center;
  }
  .pagination ul li {
    display: inline-block;
    width: 40px;
    height: 30px;
    line-height: 30px;
    background: #767676;
    font-size: 1.4rem;
    border-radius: 5px;
    margin: 0 2px;
  }
  @media only screen and (min-width: 768px) {
    .pagination ul li {
      width: 5rem;
      height: 3.5rem;
      line-height: 3.5rem;
      font-size: 1.8rem;
    }
  }
  .pagination ul li a {
    color: #fff;
  }
  .pagination ul li.active,
  .pagination ul li:hover {
    background: #2ccefd;
  }
  .slick-custom-dots .slick-dots {
    bottom: -25%;
  }
  .slick-custom-dots .slick-dots li {
    background: #fff;
    border-radius: 10px;
    width: 14px;
    height: 14px;
    margin: 0 3px;
  }
  @media only screen and (min-width: 1225px) {
    .slick-custom-dots .slick-dots li {
      margin: 0 5px;
    }
  }
  .slick-custom-dots .slick-dots li.slick-active {
    background: #ffc333;
  }
  .slick-custom-dots .slick-dots li button {
    width: 14px;
    height: 14px;
  }
  .slick-custom-dots .slick-dots li button:before {
    width: 14px;
    height: 14px;
    content: "";
  }
  .slick-custom-dots.slick-dot-black .slick-dots li {
    background: #fff;
  }
  .slick-arrow {
    width: 30px;
    height: 43px;
    background: url(../images/arrow-left.png) no-repeat center center;
    background-size: contain;
    z-index: 2;
  }
  .slick-arrow:focus,
  .slick-arrow:hover {
    background: url(../images/arrow-left.png) no-repeat center center;
    background-size: contain;
  }
  .slick-arrow.slick-disabled {
    background: transparent;
  }
  .slick-arrow:before {
    content: "";
  }
  @media only screen and (min-width: 1024px) {
    .slick-arrow {
      width: 37px;
      height: 81px;
    }
  }
  .slick-arrow.slick-prev {
    left: -11%;
  }
  @media only screen and (min-width: 1024px) {
    .slick-arrow.slick-prev {
      left: -13%;
    }
  }
  .slick-arrow.slick-next:not(.slick-disabled) {
    right: -11%;
    background: url(../images/arrow-right.png) no-repeat center center;
    background-size: contain;
  }
  @media only screen and (min-width: 1024px) {
    .slick-arrow.slick-next:not(.slick-disabled) {
      right: -13%;
    }
  }
  .slick-arrow.slick-next:not(.slick-disabled):focus,
  .slick-arrow.slick-next:not(.slick-disabled):hover {
    background: url(../images/arrow-right.png) no-repeat center center;
    background-size: contain;
  }
  @-webkit-keyframes fade-in-bottom {
    0% {
      -webkit-transform: translateY(30px);
      transform: translateY(30px);
      opacity: 0;
    }
    to {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1;
    }
  }
  @keyframes fade-in-bottom {
    0% {
      -webkit-transform: translateY(30px);
      transform: translateY(30px);
      opacity: 0;
    }
    to {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1;
    }
  }
  @-webkit-keyframes scaleIn {
    0% {
      -webkit-transform: scale(1.3);
      transform: scale(1.3);
      opacity: 0;
    }
    to {
      -webkit-transform: scale(1);
      transform: scale(1);
      opacity: 1;
    }
  }
  @keyframes scaleIn {
    0% {
      -webkit-transform: scale(1.3);
      transform: scale(1.3);
      opacity: 0;
    }
    to {
      -webkit-transform: scale(1);
      transform: scale(1);
      opacity: 1;
    }
  }
  .out-hv {
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
  }
  .out-hv:hover {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  .bd-black {
    text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000, 2px 2px #000,
      -2px -2px #000, 2px -2px #000, -2px 2px #000;
  }
  .bd-black2 {
    text-shadow: 1.5px 0 #000, -1.5px 0 #000, 0 1.5px #000, 0 -1.5px #000,
      1.5px 1.5px #000, -1.5px -1.5px #000, 1.5px -1.5px #000, -1.5px 1.5px #000;
  }
  .w100per {
    width: 100%;
  }
  .h100per {
    height: 100%;
  }
  .left0 {
    left: 0;
  }
  .top0 {
    top: 0;
  }
  .app--game {
    height: 100vh;
  }
  .bt_yl {
    background: url(../images/bt_yl.png) no-repeat center center;
    background-size: 100% 100%;
  }
  .bt_copy {
    background: url(../images/bt_copy.png) no-repeat center center;
    background-size: 100% 100%;
  }
  .btn_act {
    background: url(../images/btn_act.png) no-repeat center center;
    background-size: 100% 100%;
  }
  .btn_blue {
    background: #4580f9;
  }
  .screen--login {
    background: url(../images/log/bg1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
  }
  @media only screen and (min-width: 1150px) {
    .screen--login {
      background: url(../images/log/bg.jpg);
      background-repeat: no-repeat;
      background-position: center top;
    }
  }
  .box__log {
    width: 90%;
    max-width: 834px;
  }
  @media only screen and (min-width: 1150px) {
    .box__log {
      max-width: 683px;
    }
  }
  .brand__game {
    padding-top: 10%;
  }
  @media only screen and (min-width: 992px) {
    .brand__game {
      padding-top: 50px;
    }
  }
  .brand__game img {
    display: inline-block;
    width: 60vw;
    max-width: 206px;
  }
  @media only screen and (min-width: 1150px) {
    .brand__game img {
      max-width: 168px;
    }
  }
  .box__sl--log {
    margin-top: 22%;
    padding-bottom: 10%;
  }
  @media only screen and (min-width: 1150px) {
    .box__sl--log {
      margin-top: 30px;
      padding-bottom: 30px;
    }
  }
  .step--log {
    font-size: clamp(13px, 3vw, 16px);
  }
  .step--log form {
    background: url(../images/fixed_scroll/bg__fix.png) no-repeat center center;
    background-size: 100% 100%;
  }
  .step1--log {
    font-size: clamp(13px, 3vw, 16px);
  }
  .step1--log form {
    background: url(../images/fixed_scroll/bg2.png) no-repeat center center;
    background-size: 100% 100%;
  }
  .step__body,
  .step__head {
    padding-inline: 5%;
  }
  @media only screen and (min-width: 992px) {
    .step__body,
    .step__head {
      padding-inline: 50px;
    }
  }
  .step__head {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    font-size: clamp(13px, 3.5vw, 18px);
    padding: 0px 1% 10px 5%;
  }
  @media only screen and (min-width: 1150px) {
    .step__head {
      padding: 0px 14px 10px 34px;
    }
  }
  .step__head .name__step {
    color: #232323;
    line-height: 1.3em;
    font-size: clamp(16px, 6vw, 62px);
  }
  @media only screen and (min-width: 1150px) {
    .step__head .name__step {
      font-size: 50px;
    }
  }
  .step__body {
    padding-block: 5% 3%;
    font-size: clamp(13px, 3vw, 24px);
  }
  @media only screen and (min-width: 1150px) {
    .step__body {
      font-size: 20px;
    }
  }
  .step__body .form--input {
    background: #281f1f;
    width: 100%;
    height: 50px;
    margin-bottom: 13px;
    background: url("../images/bg_input.png") no-repeat top center/100% 100%;
    margin: 0 auto;
    max-width: 80%;
    margin-bottom: 17px;
    width: 505px;
    height: 73px;
    max-height: 11vw;
  }
  @media only screen and (min-width: 1150px) {
    .step__body .form--input {
      width: 404px;
      height: 60px;
    }
  }
  .step__body .form--input .input--to {
    font-family: "Roboto";
    width: 100%;
    height: 100%;
    padding-left: 5%;
    color: #fff;
    font-weight: 500;
    font-size: clamp(13px, 4vw, 31px);
  }
  @media only screen and (min-width: 1150px) {
    .step__body .form--input .input--to {
      font-size: 25px;
    }
  }
  .step__body .btn--log__to {
    font-weight: normal;
    width: auto;
    background: url("../images/btn_log.png") no-repeat top center/100% 100%;
    font-size: clamp(13px, 4vw, 35px);
    padding: 2% 4% 5%;
  }
  @media only screen and (min-width: 1150px) {
    .step__body .btn--log__to {
      font-size: 28px;
      padding: 2% 10% 5%;
    }
  }
  .step__body .or--Login:after,
  .step__body .or--Login:before {
    position: absolute;
    content: "";
  }
  .step__body .or--Login span {
    z-index: 2;
  }
  .step__body .log--other__link {
    gap: 0 15px;
  }
  @media only screen and (min-width: 992px) {
    .step__body .log--other__link {
      gap: 0 25px;
    }
  }
  .step__body .log--other__link .alink {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .step__body .log--other__link img {
    display: block;
    width: 12vw;
    max-width: 114px;
  }
  .step__end {
    padding-block: 2% 4%;
    gap: 0 5px;
  }
  .step__end a {
    text-decoration: underline;
  }
  .step__end [type="radio"]:checked + label,
  .step__end [type="radio"]:not(:checked) + label {
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
  }
  .step__end [type="radio"]:checked + label:before,
  .step__end [type="radio"]:not(:checked) + label:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border: 2px solid #4580f9;
    border-radius: 100%;
    background: transparent;
  }
  .step__end [type="radio"]:checked + label:after,
  .step__end [type="radio"]:not(:checked) + label:after {
    content: "";
    width: 12px;
    height: 12px;
    background: #4580f9;
    position: absolute;
    top: 5px;
    left: 5px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
  }
  .step__end [type="radio"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  .step__end [type="radio"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  .sex--plus {
    font-size: clamp(12px, 2.5vw, 14px);
    gap: 0 5px;
    margin-top: 2%;
  }
  .sex--plus img {
    width: 4vw;
    max-width: 27px;
  }
  .showhide--pass {
    position: absolute;
    right: 3%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 23px;
    height: 18px;
    background: url(../images/icons/eye.png) no-repeat center center;
    background-size: contain;
    display: none;
  }
  .close_h5Giftcode {
    padding: 7px 0;
    font-size: clamp(13px, 6vw, 44px);
    display: inline-block;
    width: 6%;
  }
  @media only screen and (min-width: 1150px) {
    .close_h5Giftcode {
      font-size: 35px;
      margin-top: 7px;
      padding: 7px 0;
    }
  }
  .screen--play {
    background: url(../images/play/bg.jpg);
    background-repeat: no-repeat;
    background-position: center top;
  }
  .page--play .ttgo--img__game {
    width: auto;
    max-width: 144px;
    top: 2%;
    right: 2%;
  }
  .page--play .frame--game {
    width: 100%;
    max-width: 600px;
    height: 100%;
    background: #000000;
    -webkit-box-shadow: 0px 3px 10px #000000;
    box-shadow: 0px 3px 10px #000000;
  }
  @media only screen and (min-width: 992px) {
    .page--play .frame--game {
      border-inline: 4px solid #000000;
    }
  }
  .scroll--fixed {
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    position: fixed;
    top: 45%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 370px;
    right: -370px;
  }
  @media only screen and (min-width: 992px) {
    .scroll--fixed {
      width: 538px;
      right: -538px;
      top: 2%;
      -webkit-transform: translateY(0);
      transform: translateY(0);
      margin-top: 138px;
    }
  }
  .scroll--fixed.on {
    right: 5px;
  }
  .scroll--fixed.on .hambuger__scroll--fix {
    right: -100%;
    margin-right: 0;
  }
  .scroll--fixed.left {
    max-width: calc((100% - 630px) / 2);
    display: none;
  }
  .scroll--fixed.left.on {
    left: 5px;
    right: auto;
  }
  @media only screen and (min-width: 1225px) {
    .scroll--fixed.left {
      display: block;
    }
  }
  .scroll--fixed.left .head--scrfixed {
    opacity: 0;
    position: relative;
    z-index: -1;
    visibility: hidden;
    height: 70px;
    max-height: 2vw;
  }
  .scroll--fixed.left .body-scrfixed .head--scrfixed {
    height: auto;
  }
  .scroll--fixed.left .name__step {
    font-size: clamp(27px, 2vw, 40px);
  }
  .scroll--fixed .hambuger__scroll--fix {
    right: 100%;
    top: 2%;
    margin-top: 22px;
    margin-right: 91vw;
  }
  @media only screen and (min-width: 992px) {
    .scroll--fixed .hambuger__scroll--fix {
      right: 100%;
      top: 2%;
      margin-top: 0;
      margin-right: 10%;
    }
  }
  .scroll--fixed .hambuger__scroll--fix img {
    width: 9vw;
    max-width: 114px;
  }
  .scroll--fixed .name__step {
    color: #232323;
    font-size: 20px;
    line-height: 1.3em;
    padding: 7% 27px 7%;
  }
  @media only screen and (min-width: 992px) {
    .scroll--fixed .name__step {
      font-size: 40px;
      padding: 11px 27px 10px;
    }
  }
  .in--scroll__fixed {
    background: url(../images/fixed_scroll/bg__fix.png) no-repeat center center;
    background-size: 100% 100%;
    height: 100%;
    padding-bottom: 10%;
  }
  .in--scroll__fixed .close-scrfixed {
    top: 5%;
    right: 3%;
  }
  .in--scroll__fixed .close-scrfixed img {
    width: auto;
    max-width: 50px;
    display: block;
  }
  .head--scrfixed {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 3% 5%;
  }
  .head--scrfixed .hello--user {
    font-size: 13px;
    display: block;
  }
  @media only screen and (min-width: 992px) {
    .head--scrfixed .hello--user {
      font-size: clamp(13px, 3vw, 25px);
    }
  }
  .head--scrfixed .hello--user span {
    float: left;
  }
  .head--scrfixed .hello--user .tName {
    max-width: 110px;
    margin-left: 6px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  @media only screen and (min-width: 992px) {
    .head--scrfixed .hello--user .tName {
      max-width: 180px;
    }
  }
  .head--scrfixed .hello--user .logout {
    font-size: clamp(10px, 3vw, 15px);
  }
  .head--scrfixed .change--acc {
    text-decoration: underline;
    font-size: 13px;
  }
  @media only screen and (min-width: 992px) {
    .head--scrfixed .change--acc {
      font-size: clamp(13px, 3vw, 20px);
    }
  }
  .list--act-to {
    text-align: center;
  }
  .list--act-to .btn__link-new {
    margin-bottom: 3%;
    padding: 5% 0;
    max-width: 75%;
    font-size: 15px;
  }
  @media only screen and (min-width: 992px) {
    .list--act-to .btn__link-new {
      padding: 0;
      width: 357px;
      height: 56px;
      margin-bottom: 15px;
      font-size: clamp(15px, 4vw, 22px);
    }
  }
  .list--gc__scrfiex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0 8%;
  }
  .list--gc__scrfiex .note__gttt {
    width: 100%;
  }
  .list--gc__scrfiex .code--game {
    gap: 0 5px;
    width: 260px;
    height: 37px;
    margin-bottom: 5%;
    max-width: 49%;
  }
  @media only screen and (min-width: 992px) {
    .list--gc__scrfiex .code--game {
      width: 310px;
      height: 50px;
      margin-bottom: 15px;
      gap: 0 10px;
    }
  }
  .list--gc__scrfiex .code--game .inputCodeGame {
    border: 1px solid #f0ab2e;
    background: #281f1f;
    font-size: 15px;
    width: 100%;
    height: 100%;
    padding: 0 15px;
  }
  @media only screen and (min-width: 992px) {
    .list--gc__scrfiex .code--game .inputCodeGame {
      font-size: clamp(15px, 4vw, 20px);
    }
  }
  .list--gc__scrfiex .code--game .btn--copy {
    border: 1px solid #f0ab2e;
    background: #281f1f;
    width: 37px;
    height: 37px;
  }
  @media only screen and (min-width: 992px) {
    .list--gc__scrfiex .code--game .btn--copy {
      width: 50px;
      height: 50px;
    }
  }
  .list--gc__scrfiex .note__gttt {
    margin-bottom: 3%;
    font-size: 13px;
  }
  @media only screen and (min-width: 992px) {
    .list--gc__scrfiex .note__gttt {
      font-size: clamp(13px, 3vw, 18px);
    }
  }
  .link__fb_gr {
    margin-top: 7%;
    gap: 0 10px;
  }
  @media only screen and (min-width: 992px) {
    .link__fb_gr {
      gap: 0 20px;
    }
  }
  .link__fb_gr .linkTo__fbgr {
    font-size: clamp(13px, 3vw, 16px);
  }
  .link__fb_gr .linkTo__fbgr img {
    width: 15vw;
    max-width: 74px;
  }
  #test {
    color: inherit;
  }
  .notification-box {
    display: none;
    position: fixed;
    top: 10px;
    right: 10px;
    background-color: #4CAF50;
    color: white;
    padding: 15px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

.notification-box.error {
    background-color: #f44336;
}