/* Reset */
html {
  box-sizing: border-box;
  font-size: 16px;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

ol,
ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
}

/* Import font */
@font-face {
  font-family: cubano;
  src: url(fonts/vietnamese_Cubano-Normal.otf);
}

@font-face {
  font-family: AveresTitleRoman;
  src: url(fonts/SVN-AveresTitleRoman-Regular.otf);
}

@font-face {
  font-family: Walsheim;
  src: url(fonts/SVN-WalsheimPro-Bold.otf);
}

@font-face {
  font-family: Walsheim_Regular;
  src: url(fonts/SVN-WalsheimPro-Regular.otf);
}

:root {
  --font-header: "Walsheim";
  --font-number: "AveresTitleRoman";
  --font-text: "Walsheim_Regular", "AveresTitleRoman";
  --color-dark-red: rgb(174, 5, 5);
  --color_pink: #920b56;
  --color_green: #0b9192;
  --color_blue: #555bff;
  --color_blue-dark: #493be0;
  --color_theme: var(--color_blue);
}

body {
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  width: 100vw;
  max-width: 100%;
  background-attachment: fixed;
  background-size: cover;
  background-image: url("images/bg_blue.png");
  display: none;
}

header {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

#xoso_logo {
  position: fixed;
  top: 5px;
  left: 5px;
  width: 221px;
}

#fullscreen {
  position: fixed;
  text-transform: uppercase;
  right: 5px;
  top: 5px;
  cursor: pointer;
  cursor: pointer;
  font-family: var(--font-header);
  color: var(--color_theme);
  border-radius: 10px 0;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
    rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}

h1#xoso_header {
  font-family: var(--font-header);
  color: var(--color_theme);
  color: #ffac05;
  font-size: 7rem;
  margin-top: -1px;
  margin-bottom: 5px;
  margin-left: 1rem;
  /* text-shadow: 2px 7px 5px rgb(243 243 243), 0px -4px 10px rgb(28 5 25); */
  /* text-shadow: 2px 7px 5px rgb(251 251 251 / 30%),
    0px -4px 10px rgb(240 233 233 / 30%); */
  text-shadow: 1px 1px 1px #795548, 1px 2px 1px #795548, 1px 3px 1px #795548,
    1px 4px 1px #795548, 1px 5px 1px #795548, 1px 6px 1px #795548,
    1px 7px 1px #795548, 1px 8px 1px #795548, 1px 9px 1px #795548,
    1px 10px 1px #795548, 1px 18px 6px rgb(16 16 16 / 40%),
    1px 22px 10px rgb(16 16 16 / 20%), 1px 25px 35px rgb(16 16 16 / 20%),
    1px 30px 60px rgb(16 16 16 / 40%);
  /* background: linear-gradient(49deg,rgb(255 221 4),rgb(243 9 9));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; */
}

#xoso_result,
p {
  font-family: var(--font-text);
  font-size: 44px;
  line-height: 70px;
  width: 80%;
  margin: 0 auto;
}

.sub_title {
  font-family: var(--font-header);
  color: var(--color_theme);
  font-size: 1.3rem;
  text-align: center;
}

.xoso_heading {
  font-family: var(--font-header);
  text-transform: uppercase;
}

footer {
  position: fixed;
  right: 5px;
  bottom: 5px;
  cursor: pointer;
}

#button_reset {
  cursor: pointer;
  cursor: pointer;
  font-family: var(--font-header);
  color: var(--color_theme);
  border-radius: 10px 0;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
    rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
  text-transform: uppercase;
}

div#control_restore {
  width: 84px;
  position: absolute;
  bottom: 1px;
  right: -1px;
  height: 100%;
  /* border: 1px solid red; */
  background-color: #795548;
  display: none;
  justify-content: center;
  align-items: center;
  border-radius: 0 7px;
}

button#button_restore {
  font-family: "AveresTitleRoman";
  font-weight: bold;
  cursor: pointer;
  transition: transform 1s;
}

button#button_restore {
  transform: scale(1.1);
}

/* tab */
.tab_control {
  margin-bottom: 5px;
  display: flex;
  /* align-items: center; */
  justify-content: center;
}

.js-tabs {
  margin: 7px;
  max-width: 100%;
}

.js-tabs__header {
  display: block;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.js-tabs__header li {
  display: inline-block;
  float: left;
}

.js-tabs__title {
  color: var(--color_theme);
  border: 2px solid var(--color_theme);
  cursor: pointer;
  display: block;
  margin-right: 10px;
  padding: 5px 10px;
  transition: all 0.25s;
  font-family: var(--font-number);
  text-decoration: none;
  transition: transform 0.4s;
  border-radius: 0 20px 0 20px;
  font-weight: bolder;
  font-size: 1.3rem;
}

.js-tabs__title:hover {
  transform: scale(1.1);
}

.js-tabs__title-active {
  background: var(--color_theme);
  color: white;
}

.js-tabs__content {
  /* border: 1px solid #ccc; */
  line-height: 1.5;
  margin-top: 1px;
  padding: 1em;
  color: var(--color_theme);
  width: 1200px;
  font-size: 1.2rem;
  margin: 0 auto;
}

#xoso_quay {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#xoso_quay_number {
  height: 210px;
  width: 950px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.xoso_quay_number_each {
  width: 200px;
  height: 200px;
  margin-left: 5px;
  font-family: var(--font-header);
  font-size: 12rem;
  font-weight: bold;
  text-align: center;
  line-height: 205px;
  text-shadow: 2px 7px 5px rgb(251 251 251 / 30%),
    0px -4px 10px rgb(240 233 233 / 30%);
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px,
    rgba(0, 0, 0, 0.22) 0px 15px 12px;
  /* text-shadow: 1px 1px 1px #ffac05, 1px 2px 1px #ffac05, 1px 3px 1px #ffac05, 1px 4px 1px #ffac05, 1px 5px 1px #ffac05, 1px 6px 1px #ffac05, 1px 7px 1px #ffac05, 1px 8px 1px #ffac05, 1px 9px 1px #ffac05, 1px 10px 1px #ffac05, 1px 18px 6px rgb(16 16 16 / 40%), 1px 22px 10px rgb(16 16 16 / 20%), 1px 25px 35px rgb(16 16 16 / 20%), 1px 30px 60px rgb(16 16 16 / 40%);   */
}

#quay_control_button {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  /* background-color: var(--color_theme); */
  line-height: 150px;
  text-align: center;
  font-family: var(--font-header);
  transition: transform 1s;
  cursor: pointer;
  /* box-shadow: rgb(231 210 210 / 25%) 0px 54px 55px,
    rgb(237 234 234 / 12%) 0px -12px 30px, rgb(244 236 236 / 12%) 0px 4px 6px,
    rgb(247 241 241 / 17%) 0px 12px 13px, rgb(0 0 0 / 9%) 0px -3px 5px; */

  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
  color: var(--color_theme);
  font-size: 2rem;
}

#quay_control_button:hover {
  transform: scale(1.1);
  box-shadow: rgb(85, 91, 255) 0px 0px 0px 3px, rgb(31, 193, 27) 0px 0px 0px 6px,
    rgb(255, 217, 19) 0px 0px 0px 9px, rgb(255, 156, 85) 0px 0px 0px 12px,
    rgb(255, 85, 85) 0px 0px 0px 15px;
}

.circle_outer {
  width: 330px;
  height: 330px;
  border: 1px solid #ffb6b9;
  position: relative;
  bottom: -2rem;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 50%;
  display: none;
}

.circle_inner {
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, rgb(255 221 4), rgb(243 9 9));
  border-radius: 50%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  margin: auto;
  animation: circle 24s linear infinite;
  animation-play-state: paused;
}

@keyframes circle {
  0% {
    transform: rotate(90deg) translate(-165px) rotate(90deg);
  }

  100% {
    transform: rotate(465deg) translate(-165px) rotate(-465deg);
  }
}

.circle_inner_buble {
  width: 100px;
  height: 100px;
  background: var(--color_pink);
  background: rgb(243 243 243);
  border-radius: 50%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  margin: auto;
  animation: circlebubble 2s linear infinite;
  box-shadow: #ffb6b9 0px 0px 0px 3px, #ffb6b9 0px 0px 0px 6px,
    #bbded6 0px 0px 0px 9px, #ffb6b9 0px 0px 0px 12px, #61c0bf 0px 0px 0px 15px;
}

@keyframes circlebubble {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(2);
  }

  50% {
    transform: scale(1);
  }

  55% {
    transform: scale(2);
  }

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

#right_reset_control {
  cursor: pointer;
  margin-left: 2rem;
  display: none;
  animation: attention 3s infinite;
}

.whencompleted {
  background-color: var(--color_theme);
  color: white !important;
  /* border: 1px solid white; */
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.getattention {
  animation: attention 2s infinite;
  color: white !important;
  background-color: var(--color_theme);
}

@keyframes attention {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.5);
  }

  50% {
    transform: scale(1);
  }

  55% {
    transform: scale(1.5);
  }

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

#xoso_modal {
  z-index: 10;
  max-width: 100vw;
  width: 100%;
  max-height: 100vh;
  height: 100%;
  background-color: #f4f4dc;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  display: none;
}

button#xoso_modal_close {
  position: absolute;
  top: 5px;
  right: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: transform 0.5s;
}

button#xoso_modal_close:hover {
  transform: scale(1.05);
}

#xoso_modal_result {
  width: 950px;
  height: 100vh;
  margin: 0 auto;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
}

button#xoso_modal_save_and_run {
  height: 50px;
  font-family: var(--font-number);
  font-weight: bold;
  font-size: 2rem;
  padding: 1px 15px;
  border: 2px solid brown;
  color: brown;
  border-radius: 0px 10px;
  margin-top: 2rem;
  cursor: pointer;
  line-height: 50px;
  transition: transform 0.5s;
}

button#xoso_modal_save_and_run:hover {
  transform: scale(1.05);
}

#xoso_modal_result_display {
  display: flex;
  flex-direction: row;
}

#xoso_modal_result_current>h3 {
  font-family: var(--font-number);
  font-size: 3rem;
  margin-bottom: 5rem;
}

.xoso_quay_modal_number {
  width: 100%;
  font-family: var(--font-number);
  font-size: 12rem;
  font-weight: bold;
  line-height: 205px;
  text-shadow: 2px 7px 5px rgb(251 251 251 / 30%),
    0px -4px 10px rgb(240 233 233 / 30%);
  box-shadow: rgb(0 0 0 / 30%) 0px 19px 38px, rgb(0 0 0 / 22%) 0px 15px 12px;
  letter-spacing: 30px;
  text-align: center;
  padding: 5px;
  padding-left: 31px;
  animation: rotating 1100ms linear;
}

@keyframes rotating {
  0% {
    transform: rotate(0deg);
  }

  60% {
    transform: rotate(720deg);
  }

  65% {
    transform: scale(2.5);
  }

  75% {
    transform: scale(1);
  }

  88% {
    transform: scale(2.5);
  }

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

#xoso_display_result {
  position: fixed;
  bottom: 40px;
  left: 1px;
  width: 440px;
  height: auto;
  max-height: calc(100vh - 50px);
  border-radius: 0 5px 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-direction: column;
}

.xoso_display_result_inner {
  width: 440px;
  min-height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Left-side panel: colored left borders per prize tier */
.xoso_display_result_inner:nth-child(1) {
  border-left: 4px solid #78909C;
}

.xoso_display_result_inner:nth-child(2) {
  border-left: 4px solid #FF9800;
}

.xoso_display_result_inner:nth-child(3) {
  border-left: 4px solid #2196F3;
}

.xoso_display_result_inner:nth-child(4) {
  border-left: 4px solid #F44336;
}

/* Prize header text colors per tier */
.xoso_display_result_inner:nth-child(1) .xoso_display_result_inner_header {
  color: #78909C;
}

.xoso_display_result_inner:nth-child(2) .xoso_display_result_inner_header {
  color: #FF9800;
}

.xoso_display_result_inner:nth-child(3) .xoso_display_result_inner_header {
  color: #2196F3;
}

.xoso_display_result_inner:nth-child(4) .xoso_display_result_inner_header {
  color: #F44336;
}

.xoso_display_result_inner_header {
  font-size: 15px;
  text-transform: uppercase;
  font-family: var(--font-header);
  width: 80px;
  height: 80px;
  text-align: center;
  font-weight: bold;
  color: transparent;
  /* padding: 25px 11px; */
  line-height: 31px;
  border-radius: 50%;
  /* border: 2px solid white; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.xoso_display_result_inner_right {
  width: 270px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.xoso_display_result_inner_right>div {
  width: 63px;
  height: 27px;
  margin: 2px 2px;
  text-align: center;
  line-height: 27px;
  color: #000;
  font-family: var(--font-number);
  color: #f9f4f4;
  font-size: 1.45rem;
  background-color: var(--color_theme);
  font-weight: bold;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.boardcss,
.buttonClass {
  font-family: "cubano", sans-serif;
  font-size: 16px;
  letter-spacing: 2px;
  text-decoration: none;
  text-transform: uppercase;
  color: #000;
  color: #0b9192;
  border: 3px solid;
  padding: 0.25em 0.5em;
  box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px,
    5px 5px 0px 0px;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: transform 1s;
}

.buttonClass {
  cursor: pointer;
}

.buttonClass:hover {
  transform: scale(1.1);
}

.xoso_header_sub {
  margin: auto;
  font-family: var(--font-header);
  color: var(--color_theme);
  color: #f9f9f9;
  font-size: 2.5rem;
  height: 60px;
  margin-top: 1px;
  margin-bottom: 15px;
  margin-left: 1rem;
  /* text-shadow: 2px 7px 5px rgb(243 243 243), 0px -4px 10px rgb(28 5 25); */
  text-shadow: 2px 7px 5px #030bfa, 0px -4px 10px #070ff5;
  text-transform: uppercase;
}

.button_result {
  cursor: pointer;
  font-family: var(--font-header);
  color: var(--color_theme);
  border-radius: 10px 0;
  box-shadow: rgb(60 64 67 / 30%) 0px 1px 2px 0px,
    rgb(60 64 67 / 15%) 0px 2px 6px 2px;
  text-transform: uppercase;
  display: inline;
}

/* result modal - final */

div#xoso_overlay_result_inner_render {
  margin-top: 2rem;
  /* line-height: 35rem; */
  height: 100%;
  width: 100%;
}

.modal_xoso_display_result_inner {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 12px dotted rgb(60 64 67 / 19%);
}

/* Modal panel: colored left borders per prize tier */
.modal_xoso_display_result_inner:nth-child(1) {
  border-left: 4px solid #78909C;
}

.modal_xoso_display_result_inner:nth-child(2) {
  border-left: 4px solid #FF9800;
}

.modal_xoso_display_result_inner:nth-child(3) {
  border-left: 4px solid #2196F3;
}

.modal_xoso_display_result_inner:nth-child(4) {
  border-left: 4px solid #F44336;
}

/* Modal prize header text colors per tier */
.modal_xoso_display_result_inner:nth-child(1) .modal_xoso_display_result_inner_header {
  color: #78909C;
}

.modal_xoso_display_result_inner:nth-child(2) .modal_xoso_display_result_inner_header {
  color: #FF9800;
}

.modal_xoso_display_result_inner:nth-child(3) .modal_xoso_display_result_inner_header {
  color: #2196F3;
}

.modal_xoso_display_result_inner:nth-child(4) .modal_xoso_display_result_inner_header {
  color: #F44336;
}

p.modal_xoso_display_result_inner_header {
  text-transform: uppercase;
  width: 303px;
  font-size: 2.3rem;
  font-family: var(--font-header);
  color: #920b56;
  box-shadow: -8px 4px 0px 0px, -10px -8px 0px 0px, 3px 3px 0px 0px,
    4px 4px 0px 0px, 5px 5px 0px 0px;
  /* margin: 0 5px; */
  text-align: center;
}

.modal_xoso_display_result_inner_right {
  width: 600px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.modal_xoso_display_result_inner_right div {
  width: 110px;
  height: 80px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 4px;
  font-size: 2.5rem;
  box-shadow: rgb(0 0 0 / 40%) 0px 2px 4px, rgb(0 0 0 / 30%) 0px 7px 13px -3px,
    rgb(0 0 0 / 20%) 0px -3px 0px inset;
  font-family: "cubano";
  color: #493be0;
  color: #0b9192;
}

/* <= 1440px */
@media only screen and (max-width: 1440px) {
  #xoso_logo {
    position: fixed;
    top: -8px;
    left: -45px;
    width: 229px;
  }

  h1#xoso_header {
    font-size: 3rem;
    margin-bottom: 0rem;
  }

  .circle_outer {
    bottom: -1rem;
  }

  .xoso_quay_number_each {
    width: 180px;
    height: 180px;
    font-size: 11rem;
    line-height: 188px;
  }

  .sub_title {
    display: none;
  }

  #xoso_quay_number {
    height: 165px;
    width: 780px;
  }

  #xoso_display_result {
    height: 409px;
  }
}

/* <= 1366px */
@media only screen and (max-width: 1366px) {
  /* sorry I dont have time :-)) */
}

/*/* Ipad ngang(1024 x 768) <= 1024px */
@media screen and (max-width: 1024px) {
  /* sorry I dont have time :-)) */
}

/*Ipad dọc(768 x 1024)*/
@media screen and (max-width: 768px) {
  /* sorry I dont have time :-)) */
}

/*Iphone 12/13 PRO*/
@media screen and (max-width: 428px) {
  /* sorry I dont have time :-)) */
}

/*Iphone 6/7/8 PLUS*/
@media screen and (max-width: 414px) {
  /* sorry I dont have time :-)) */
}

/*Iphone 6/7/8*/
@media screen and (max-width: 375px) {
  /* sorry I dont have time :-)) */
}

/*Iphone(480 x 640)*/
/* iPhone 5s */
@media screen and (max-width: 320px) {
  /* sorry I dont have time :-)) */
}

/* Music toggle button */
#music_toggle {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 9999;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

#music_toggle:hover {
  background: rgba(0, 0, 0, 0.7);
}

#music_toggle.playing {
  background: rgba(0, 120, 255, 0.7);
}