html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after {
  content: "";
  content: none; }

q:before, q:after {
  content: "";
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

.displayMessage {
  animation: flashMessage 5s;
  animation-iteration-count: 1;
  -webkit-animation: flashMessage 5s;
  -webkit-animation-iteration-count: 1;
  -moz-animation: flashMessage 5s;
  -moz-animation-iteration-count: 1;
  -o-animation: flashMessage 5s;
  -o-animation-iteration-count: 1;
  -ms-animation: flashMessage 5s;
  -ms-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

@keyframes flashMessage {
  0% {
    opacity: 0;
    left: -100vw;
    -webkit-transform: translate3d(25%, -120vmin, calc(20vmax + 60vmin)) rotateX(-90deg) rotateY(-15deg) skewY(5deg);
    -ms-transform: translate3d(25%, -120vmin, calc(20vmax + 60vmin)) rotateX(-90deg) rotateY(-15deg) skewY(5deg);
    -o-transform: translate3d(25%, -120vmin, calc(20vmax + 60vmin)) rotateX(-90deg) rotateY(-15deg) skewY(5deg);
    transform: translate3d(25%, -120vmin, calc(20vmax + 60vmin)) rotateX(-90deg) rotateY(-15deg) skewY(5deg); }
  10% {
    opacity: 1;
    left: -15vw; }
  90% {
    opacity: 1;
    left: 5vw; }
  100% {
    opacity: 0;
    left: 100vw;
    -webkit-transform: translate3d(25%, -120vmin, calc(20vmax + 60vmin)) rotateX(-90deg) rotateY(-15deg) skewX(-5deg);
    -ms-transform: translate3d(25%, -120vmin, calc(20vmax + 60vmin)) rotateX(-90deg) rotateY(-15deg) skewX(-5deg);
    -o-transform: translate3d(25%, -120vmin, calc(20vmax + 60vmin)) rotateX(-90deg) rotateY(-15deg) skewX(-5deg);
    transform: translate3d(25%, -120vmin, calc(20vmax + 60vmin)) rotateX(-90deg) rotateY(-15deg) skewX(-5deg); }
  100% {
    display: none; } }
@-moz-keyframes flashMessage {
  0% {
    opacity: 0;
    left: -100vw; }
  10% {
    opacity: 1;
    left: -15vw; }
  90% {
    opacity: 1;
    left: 5vw; }
  100% {
    opacity: 0;
    left: 100vw; }
  100% {
    display: none; } }
@-webkit-keyframes flashMessage {
  0% {
    opacity: 0;
    left: -100vw; }
  10% {
    opacity: 1;
    left: -15vw; }
  90% {
    opacity: 1;
    left: 5vw; }
  100% {
    opacity: 0;
    left: 100vw; }
  100% {
    display: none; } }
@-o-keyframes flashMessage {
  0% {
    opacity: 0;
    left: -100vw; }
  10% {
    opacity: 1;
    left: -15vw; }
  90% {
    opacity: 1;
    left: 5vw; }
  100% {
    opacity: 0;
    left: 100vw; }
  100% {
    display: none; } }
@-ms-keyframes flashMessage {
  0% {
    opacity: 0;
    left: -100vw; }
  10% {
    opacity: 1;
    left: -15vw; }
  90% {
    opacity: 1;
    left: 5vw; }
  100% {
    opacity: 0;
    left: 100vw; }
  100% {
    display: none; } }
.autoWheel {
  animation: wheel_rotate linear 20s;
  animation-iteration-count: infinite;
  -webkit-animation: wheel_rotate linear 20s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation: wheel_rotate linear 20s;
  -moz-animation-iteration-count: infinite;
  -o-animation: wheel_rotate linear 20s;
  -o-animation-iteration-count: infinite;
  -ms-animation: wheel_rotate linear 20s;
  -ms-animation-iteration-count: infinite; }

@keyframes wheel_rotate {
  100% {
    transform: rotate(360deg); } }
@-moz-keyframes wheel_rotate {
  100% {
    -moz-transform: rotate(360deg); } }
@-webkit-keyframes wheel_rotate {
  100% {
    -webkit-transform: rotate(360deg); } }
@-o-keyframes wheel_rotate {
  100% {
    -o-transform: rotate(360deg); } }
@-ms-keyframes wheel_rotate {
  100% {
    -ms-transform: rotate(360deg); } }
.waterAnimate {
  animation: water-waves linear 2s;
  animation-iteration-count: infinite;
  -webkit-animation: water-waves linear 2s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation: water-waves linear 2s;
  -moz-animation-iteration-count: infinite;
  -o-animation: water-waves linear 2s;
  -o-animation-iteration-count: infinite;
  -ms-animation: water-waves linear 2s;
  -ms-animation-iteration-count: infinite; }

@keyframes water-waves {
  to {
    background-position-x: -100%; } }
@-moz-keyframes water-waves {
  to {
    background-position-x: -100%; } }
@-webkit-keyframes water-waves {
  to {
    background-position-x: -100%; } }
@-o-keyframes water-waves {
  to {
    background-position-x: -100%; } }
@-ms-keyframes water-waves {
  to {
    background-position-x: -100%; } }
#content.gioithieu .layer:not(#sunRise) {
  left: 0; }
#content.ketqua #scence_03 {
  left: calc(100vw - 110vw); }
#content.ketqua #scence_02 {
  left: calc(100vw - 150vw); }
#content.ketqua #scence_01 {
  left: calc(100vw - 200vw); }
#content.ketqua #scence_fireFly {
  left: calc(100vw - 210vw); }
#content.ketqua #pagesContent {
  left: calc(100vw - 220vw); }

@font-face {
  font-family: "Dancing Script";
  src: url(../fonts/DancingScript-Regular.ttf) format("truetype"), url(../fonts/DancingScript-Bold.ttf) format("truetype"); }
@font-face {
  font-family: "Cormorant Unicase";
  src: url(../fonts/CormorantUnicase-Light.ttf) format("truetype"), url(../fonts/CormorantUnicase-Medium.ttf) format("truetype"), url(../fonts/CormorantUnicase-Redular.ttf) format("truetype"), url(../fonts/CormorantUnicase-SemiBold.ttf) format("truetype"), url(../fonts/CormorantUnicase-Bold.ttf) format("truetype"); }
@font-face {
  font-family: "Cormorant Upright";
  src: url(../fonts/CormorantUpright-Light.ttf) format("truetype"), url(../fonts/CormorantUpright-Medium.ttf) format("truetype"), url(../fonts/CormorantUpright-Redular.ttf) format("truetype"), url(../fonts/CormorantUpright-SemiBold.ttf) format("truetype"), url(../fonts/CormorantUpright-Bold.ttf) format("truetype"); }
::-webkit-scrollbar {
  width: 4px; }

/* Track */
::-webkit-scrollbar-track {
  /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3) */
  width: 10px;
  /*display:none */
  background: transparent; }

/* Handle */
::-webkit-scrollbar-thumb {
  background-color: #331e1e;
  /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5) */ }

::-webkit-scrollbar-thumb:window-inactive {
  /*background: rgba(255,0,0,0.4) */ }

body {
  font-size: 3vmin;
  font-family: "Cormorant Upright", serif;
  font-weight: 600;
  color: #462626;
  background: -webkit-linear-gradient(top, white 0%, #fb729d 100%);
  background: -o-linear-gradient(top, white 0%, #fb729d 100%);
  background: -moz-linear-gradient(top, white 0%, #fb729d 100%);
  background: linear-gradient(top, white 0%, #fb729d 100%);
  position: relative;
  height: 100vh;
  font-size: 1.5vmax;
  line-height: 1.5;
  overflow: hidden; }

a {
  color: #fd7895;
  text-decoration: none; }
.message a {
    color: #1281C4;
}

.topLogo {
  position: absolute;
  width: 30vmin;
  top: 58%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }
  .topLogo img {
    max-width: 100%; }

#content {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: hidden; }

#loadingProcess {
  position: fixed;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  background: #462626;
  z-index: 3; }
  #loadingProcess:before {
    content: "";
    position: absolute;
    background: url("../imgs/texturePaper.png") repeat center;
    opacity: 0.05;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0; }
  #loadingProcess:after {
    content: "";
    position: absolute;
    top: 11%;
    bottom: 11%;
    left: 11%;
    right: 11%;
    border: dotted 2px rgba(70, 38, 38, 0.5);
    pointer-events: none; }
  #loadingProcess div {
    position: absolute;
    top: 10%;
    bottom: 10%;
    left: 10%;
    right: 10%;
    background: url("../imgs/waterColorBG.jpg") no-repeat center;
    background-size: cover;
    padding: 5%;
    text-align: center;
    font-size: 150%; }
    #loadingProcess div p {
      position: absolute;
      top: 40%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }

#sunRise {
  position: absolute;
  height: 80vmin;
  width: 80vmin;
  border-radius: 50%;
  text-align: center;
  top: -40vmin;
  left: calc(50vw - 40vmin);
  font-size: 3vmin;
  background: -webkit-linear-gradient(bottom, white 0%, #fb729d 100%);
  background: -o-linear-gradient(bottom, white 0%, #fb729d 100%);
  background: -moz-linear-gradient(bottom, white 0%, #fb729d 100%);
  background: linear-gradient(bottom, white 0%, #fb729d 100%); }
  #sunRise #campTitle {
    position: absolute;
    bottom: 18%;
    z-index: 1;
    width: 100%; }
    #sunRise #campTitle .campName {
      font-size: 250%;
      font-family: "Dancing Script", cursive; }
    #sunRise #campTitle .campSlogan {
      font-size: 120%; }

.layer {
  position: absolute;
  bottom: 0;
  z-index: 2;
  -webkit-transition: left 1s, right 1s;
  -o-transition: left 1s, right 1s;
  transition: left 1s, right 1s; }

#scence_03 {
  z-index: 1;
  height: 80vh;
  width: 110vw;
  left: calc(50vw - 55vw);
  background: url(../imgs/mountain_01.png) no-repeat bottom, -webkit-linear-gradient(bottom, white 40%, transparent 90%);
  background: url(../imgs/mountain_01.png) no-repeat bottom, -o-linear-gradient(bottom, white 40%, transparent 90%);
  background: url(../imgs/mountain_01.png) no-repeat bottom, -moz-linear-gradient(bottom, white 40%, transparent 90%);
  background: url(../imgs/mountain_01.png) no-repeat bottom, linear-gradient(bottom, white 40%, transparent 90%);
  background-size: auto 80vh; }

#scence_02 {
  height: 70vh;
  width: 150vw;
  left: calc(50vw - 75vw);
  background: url(../imgs/mountain_02.png) repeat-x bottom, -webkit-linear-gradient(bottom, white 40%, transparent 90%);
  background: url(../imgs/mountain_02.png) repeat-x bottom, -o-linear-gradient(bottom, white 40%, transparent 90%);
  background: url(../imgs/mountain_02.png) repeat-x bottom, -moz-linear-gradient(bottom, white 40%, transparent 90%);
  background: url(../imgs/mountain_02.png) repeat-x bottom, linear-gradient(bottom, white 40%, transparent 90%);
  background-size: auto 70vh; }

#scence_01 {
  height: 40vh;
  width: 200vw;
  left: calc(50vw - 100vw);
  background: url(../imgs/mountain_03.png) repeat-x bottom, -webkit-linear-gradient(bottom, white 40%, transparent 90%);
  background: url(../imgs/mountain_03.png) repeat-x bottom, -o-linear-gradient(bottom, white 40%, transparent 90%);
  background: url(../imgs/mountain_03.png) repeat-x bottom, -moz-linear-gradient(bottom, white 40%, transparent 90%);
  background: url(../imgs/mountain_03.png) repeat-x bottom, linear-gradient(bottom, white 40%, transparent 90%);
  background-size: auto 40vh; }
  #scence_01:before {
    content: "";
    position: absolute;
    bottom: 8vh;
    height: 80vh;
    width: 60vh;
    left: calc(100vw - 80vh);
    background: url(../imgs/sakuraTree.png) no-repeat center bottom;
    background-size: contain; }

#scence_fireFly {
  height: 100vh;
  width: 210vw;
  left: calc(50vw - 105vw);
  pointer-events: none; }

#pagesContent {
  height: 100vh;
  width: 220vw;
  left: calc(50vw - 110vw);
  pointer-events: none; }
  #pagesContent:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background: url(../imgs/solidGround.png) repeat-x bottom center;
    background-size: auto 25vh;
    z-index: 1;
    pointer-events: none; }
  #pagesContent > * {
    height: 100vh;
    width: 51.33333vw;
    position: absolute;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    pointer-events: none; }
    #pagesContent > *:nth-child(1) {
      left: calc(50vw);
      z-index: 1; }
    #pagesContent > *:nth-child(2) {
      left: calc(50%); }
    #pagesContent > *:nth-child(3) {
      left: calc(100% - 50vw);
      z-index: 1; }
    #pagesContent > * > * {
      pointer-events: initial; }

#playPage .lighter {
  right: initial;
  left: 10vh;
  z-index: 1; }

#introPage .lighter {
  right: 110%;
  left: initial; }

#resultPage .lighter {
  left: 110%;
  right: initial; }

#video {
    width: 100%;
    display: block;
    margin-bottom: -1px; }

#wheel {
  position: absolute;
  left: calc(50% + 22.5vh);
  bottom: calc(22.5vh + 8vh);
  z-index: 0; }
  #wheel:before {
    content: "";
    position: absolute;
    height: 22.5vh;
    width: 45vh;
    background: url(../imgs/wheelBridge.png) no-repeat center bottom;
    background-size: 100% 100%;
    bottom: -22.5vh;
    left: -22.5vh; }
  #wheel:after {
    content: "";
    position: absolute;
    height: 4.09091vh;
    width: 4.09091vh;
    background-color: #462626;
    border: solid #331e1e 0.40909vh;
    border-radius: 50%;
    pointer-events: none;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }
  #wheel #wheelWater {
    position: absolute;
    height: 22.5vh;
    width: 54vh;
    left: -27vh;
    top: 18vh;
    background: url(../imgs/wheelWater.png) repeat-x;
    background-size: 50% 100%;
    opacity: 0.95;
    -webkit-transition: background-size 12s;
    -o-transition: background-size 12s;
    transition: background-size 12s; }
  #wheel.rotating #wheelWater {
    background-size: 20% 100%;
    -webkit-transition: background-size 5s;
    -o-transition: background-size 5s;
    transition: background-size 5s; }
  #wheel #wheelRotate {
    cursor: pointer;
    width: 45vh;
    height: 45vh;
    left: -22.5vh;
    top: -22.5vh;
    position: absolute; }
  #wheel .wheel-wing {
    position: absolute;
    left: calc(50% - 3.62903vh);
    height: 22.5vh;
    width: 7.25806vh;
    text-align: center;
    color: white;
    background: url("../imgs/wheelWing.png") no-repeat center;
    background-size: 100% 100%;
    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -o-transform-origin: 50% 100%;
    transform-origin: 50% 100%; }
    #wheel .wheel-wing:nth-child(1) {
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg); }
    #wheel .wheel-wing:nth-child(2) {
      -webkit-transform: rotate(18deg);
      -ms-transform: rotate(18deg);
      -o-transform: rotate(18deg);
      transform: rotate(18deg); }
    #wheel .wheel-wing:nth-child(3) {
      -webkit-transform: rotate(36deg);
      -ms-transform: rotate(36deg);
      -o-transform: rotate(36deg);
      transform: rotate(36deg); }
    #wheel .wheel-wing:nth-child(4) {
      -webkit-transform: rotate(54deg);
      -ms-transform: rotate(54deg);
      -o-transform: rotate(54deg);
      transform: rotate(54deg); }
    #wheel .wheel-wing:nth-child(5) {
      -webkit-transform: rotate(72deg);
      -ms-transform: rotate(72deg);
      -o-transform: rotate(72deg);
      transform: rotate(72deg); }
    #wheel .wheel-wing:nth-child(6) {
      -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      -o-transform: rotate(90deg);
      transform: rotate(90deg); }
    #wheel .wheel-wing:nth-child(7) {
      -webkit-transform: rotate(108deg);
      -ms-transform: rotate(108deg);
      -o-transform: rotate(108deg);
      transform: rotate(108deg); }
    #wheel .wheel-wing:nth-child(8) {
      -webkit-transform: rotate(126deg);
      -ms-transform: rotate(126deg);
      -o-transform: rotate(126deg);
      transform: rotate(126deg); }
    #wheel .wheel-wing:nth-child(9) {
      -webkit-transform: rotate(144deg);
      -ms-transform: rotate(144deg);
      -o-transform: rotate(144deg);
      transform: rotate(144deg); }
    #wheel .wheel-wing:nth-child(10) {
      -webkit-transform: rotate(162deg);
      -ms-transform: rotate(162deg);
      -o-transform: rotate(162deg);
      transform: rotate(162deg); }
    #wheel .wheel-wing:nth-child(11) {
      -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      -o-transform: rotate(180deg);
      transform: rotate(180deg); }
    #wheel .wheel-wing:nth-child(12) {
      -webkit-transform: rotate(198deg);
      -ms-transform: rotate(198deg);
      -o-transform: rotate(198deg);
      transform: rotate(198deg); }
    #wheel .wheel-wing:nth-child(13) {
      -webkit-transform: rotate(216deg);
      -ms-transform: rotate(216deg);
      -o-transform: rotate(216deg);
      transform: rotate(216deg); }
    #wheel .wheel-wing:nth-child(14) {
      -webkit-transform: rotate(234deg);
      -ms-transform: rotate(234deg);
      -o-transform: rotate(234deg);
      transform: rotate(234deg); }
    #wheel .wheel-wing:nth-child(15) {
      -webkit-transform: rotate(252deg);
      -ms-transform: rotate(252deg);
      -o-transform: rotate(252deg);
      transform: rotate(252deg); }
    #wheel .wheel-wing:nth-child(16) {
      -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
      -o-transform: rotate(270deg);
      transform: rotate(270deg); }
    #wheel .wheel-wing:nth-child(17) {
      -webkit-transform: rotate(288deg);
      -ms-transform: rotate(288deg);
      -o-transform: rotate(288deg);
      transform: rotate(288deg); }
    #wheel .wheel-wing:nth-child(18) {
      -webkit-transform: rotate(306deg);
      -ms-transform: rotate(306deg);
      -o-transform: rotate(306deg);
      transform: rotate(306deg); }
    #wheel .wheel-wing:nth-child(19) {
      -webkit-transform: rotate(324deg);
      -ms-transform: rotate(324deg);
      -o-transform: rotate(324deg);
      transform: rotate(324deg); }
    #wheel .wheel-wing:nth-child(20) {
      -webkit-transform: rotate(342deg);
      -ms-transform: rotate(342deg);
      -o-transform: rotate(342deg);
      transform: rotate(342deg); }
    #wheel .wheel-wing:before {
      margin-top: 2.25vh;
      content: attr(data-point-value);
      display: block;
      -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      -o-transform: rotate(90deg);
      transform: rotate(90deg);
      font-size: 95%; }
    #wheel .wheel-wing:after {
      content: "";
      position: absolute;
      background: url(../imgs/wheelWing_hover.png) no-repeat center;
      background-size: 100% 100%;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      z-index: -1;
      opacity: 0;
      -webkit-transition: opacity 1s;
      -o-transition: opacity 1s;
      transition: opacity 1s; }
    #wheel .wheel-wing.active:after {
      opacity: 1;
      -webkit-transition: opacity 0s;
      -o-transition: opacity 0s;
      transition: opacity 0s; }

.broad {
  position: absolute;
  left: 0;
  top: calc(50% - 50vh);
  background-color: #462626;
  height: 0;
  width: 100%;
  overflow: hidden;
  z-index: 2;
  -webkit-transition: height 1s;
  -o-transition: height 1s;
  transition: height 1s;
  transition-timing-function: cubic-bezier(0.4, -0.4, 0.4, 1.2); }
  .broad.scrollDown, #content.gioithieu #introPage .broad, #content.dangnhap #playPage .broad, #content.danhsach #playPage .broad, #content.ketqua #resultPage .broad {
    height: 85vh;
    -webkit-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.5); }
  .broad:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url("../imgs/texturePaper.png") repeat center;
    opacity: 0.05; }
  .broad:after {
    content: "";
    position: absolute;
    top: 11%;
    bottom: 16%;
    left: 5%;
    right: 5%;
    border: dotted 2px rgba(70, 38, 38, 0.5);
    pointer-events: none; }
  .broad .broadContent {
    background: url("../imgs/waterColorBG.jpg") no-repeat center;
    background-size: cover;
    position: absolute;
    top: 10%;
    bottom: 15%;
    left: 4%;
    right: 4%;
    padding: 3% 2%;
    text-align: center;
    overflow-y: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
    .broad .broadContent .title {
      font-size: 300%;
      font-family: "Dancing Script", cursive;
      margin-bottom: 2vh; }
    .broad .broadContent table {
      width: 100%;
      line-height: 2; }
      .broad .broadContent table tr.noteRow td {
        padding: 2vh;
        font-style: italic; }
      .broad .broadContent table tr:first-child {
        border-bottom: solid 1px #462626;
        font-weight: bold;
        font-size: 90%; }
    .broad .broadContent table#resultTable tr:nth-child(2) {
      color: #0075BE; }
    .broad .broadContent table#resultTable tr.current {
      font-weight: bold;
      font-style: italic;
      font-size: 110%; }
    .broad .broadContent iframe {
      width: 100%;
      height: 75%; }
    .broad .broadContent form {
      text-align: center;
      max-width: 80%;
      margin: 0 auto; }
      .broad .broadContent form input, .broad .broadContent form a {
        text-align: center;
        padding: 1vh 0;
        font-family: inherit;
        font-size: inherit;
        background: transparent;
        border: none;
        border-bottom: solid 0.1vh #462626;
        display: block;
        width: 100%;
        margin: 0 auto;
        margin-top: 4vh;
        outline: none;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }
        .broad .broadContent form input[type="submit"], .broad .broadContent form a[type="submit"] {
          background: transparent;
          width: 80%;
          cursor: pointer;
          border: none;
          font-size: 200%; }
      .broad .broadContent form p.errorMessage {
        margin-top: 4vh;
        font-size: 120%;
        display: none; }
    .broad .broadContent .pageNav {
      margin-top: 2vh; }
  .broad .tupeBottom, .broad .tupeTop {
    position: absolute;
    height: 1.5vh;
    width: calc(100% + 6vh);
    left: -3vh;
    z-index: 0;
    background: -webkit-linear-gradient(top, #fd7895 0%, #462626 100%);
    background: -o-linear-gradient(top, #fd7895 0%, #462626 100%);
    background: -moz-linear-gradient(top, #fd7895 0%, #462626 100%);
    background: linear-gradient(top, #fd7895 0%, #462626 100%); }
    .broad .tupeBottom:after, .broad .tupeTop:after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 3vh;
      right: 3vh;
      background: -webkit-linear-gradient(bottom, #462626 0%, #331e1e 100%);
      background: -o-linear-gradient(bottom, #462626 0%, #331e1e 100%);
      background: -moz-linear-gradient(bottom, #462626 0%, #331e1e 100%);
      background: linear-gradient(bottom, #462626 0%, #331e1e 100%);
      z-index: 1; }
  .broad .tupeBottom {
    bottom: 0;
    background: -webkit-linear-gradient(top, #fd7895 0%, #462626 100%);
    background: -o-linear-gradient(top, #fd7895 0%, #462626 100%);
    background: -moz-linear-gradient(top, #fd7895 0%, #462626 100%);
    background: linear-gradient(top, #fd7895 0%, #462626 100%); }
    .broad .tupeBottom:after {
      background: -webkit-linear-gradient(top, #462626 0%, #331e1e 100%);
      background: -o-linear-gradient(top, #462626 0%, #331e1e 100%);
      background: -moz-linear-gradient(top, #462626 0%, #331e1e 100%);
      background: linear-gradient(top, #462626 0%, #331e1e 100%); }

.lighter {
  position: absolute;
  height: 32vh;
  bottom: 0;
  z-index: 2;
  width: 15vh;
  height: 50vh;
  bottom: 5vh;
  pointer-events: none;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%; }
  .lighter:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../imgs/lighter.png) no-repeat center;
    background-size: 100% 100%; }
  .lighter .lightSign {
    border-radius: 50%;
    height: 35vh;
    width: 35vh;
    position: absolute;
    z-index: 1;
    left: 2vh;
    top: -10vh;
    left: 11vh;
    top: 14vh;
    pointer-events: none;
    background: -webkit-radial-gradient(center, white 0%, rgba(251, 114, 157, 0) 75%);
    background: -o-radial-gradient(center, white 0%, rgba(251, 114, 157, 0) 75%);
    background: -moz-radial-gradient(center, white 0%, rgba(251, 114, 157, 0) 75%);
    background: radial-gradient(center, white 0%, rgba(251, 114, 157, 0) 75%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }
  .lighter.reflect, .lighter + .lighter {
    -webkit-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1); }
  .lighter + .lighter {
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%; }
  .lighter.double {
    width: 25vh; }
    .lighter.double:before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      background: url(../imgs/lighterDouble.png) no-repeat center;
      background-size: 100% 100%; }
    .lighter.double .lightSign {
      left: 21vh; }
    .lighter.double .lightSign:nth-child(2) {
      left: 3vh; }

.notification {
  position: absolute;
  top: 35vh;
  left: 50%;
  width: 80%;
  min-width: 80vw;
  font-size: 120%;
  text-align: center;
  z-index: 1;
  text-shadow: 0px 2px rgba(255, 255, 255, 0.5), 0px 10px 20px rgba(51, 30, 30, 0.2);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }
  .notification .title {
    font-size: 200%;
    display: none; }

#footer {
  position: absolute;
  bottom: 0;
  z-index: 2;
  width: 100%;
  height: 5vh;
  left: 0;
  text-align: center; }

nav.pageNav a.btnToggle[href="javascript:void(0)"] {
  display: none; }
nav.pageNav a {
  color: #fd7895;
  text-decoration: none; }
  nav.pageNav a + a {
    margin-left: 2vw; }
  nav.pageNav a[href="#thongtin"]:before {
    content: attr(data-username) " | " attr(data-userpoint); }
.fb_iframe_widget {
  width: 100%;
  background: rgba(255, 255, 255, 0.8); }
  .fb_iframe_widget > span {
    width: inherit !important; }
    .fb_iframe_widget > span > iframe {
      width: inherit !important; }

@media (max-width: 800px) {
  body {
    font-size: 4vmin; }

  #pagesContent > * {
    width: 75vw; }

  #footer {
    background-color: #262020;
    height: auto; }
    #footer nav.pageNav {
      display: none;
      font-size: 180%;
      padding: 2vh; }
      #footer nav.pageNav a {
        display: block;
        padding: 2vh 1vh;
        margin: 0; }
    #footer a.btnToggle {
      position: fixed;
      background: transparent;
      width: 12vmin;
      height: 12vmin;
      right: 5vmin;
      bottom: 5vmin;
      border: solid 2vmin #fd7895;
      border-left: none;
      border-right: none;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box; }
      #footer a.btnToggle:before {
        content: "";
        position: absolute;
        height: 2vmin;
        width: 100%;
        background: #fd7895;
        top: calc(50% - 1vmin);
        left: 0; } }
@media only screen and (max-width: 800px) and (orientation: portrait) {
  #pagesContent > * {
    width: 94vw; }
  #pagesContent:before {
    background-position-x: calc(50% - 22.5vh + 8vw); }
  #pagesContent #wheel {
    left: 58%; }
  #pagesContent #playPage .lighter {
    left: -14vh; } }

/*# sourceMappingURL=import.css.map */