@charset "UTF-8";
#app { position: relative; width: 100vw; min-height: 100vh; height: 100vh; overflow: auto; }

/* 1. Use a more intuitive box-sizing model */
*, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; }

/* 2. Remove default margins and paddings */
* { margin: 0; padding: 0; }

/* 3. Allow percentage-based heights and smooth scrolling */
html, body { height: 100%; scroll-behavior: smooth; }

/* 4. Improve media defaults */
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }

/* 5. Inherit fonts for inputs and buttons */
input, button, textarea, select { font: inherit; }

/* 6. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

:root { --base: 1080 ; }

#app { opacity: 0; }

.landscape { width: 100vw; height: 100vh; position: relative; overflow: hidden; }

.rotate-device { background-color: #f1ce8f; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: fixed; visibility: hidden; z-index: -1; opacity: 0; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }

.landscape .rotate-device { z-index: 999; visibility: visible; opacity: 1; }

.landscape .rotate-device img { width: 120px; display: block; }

.portrait #app { opacity: 1; }

.game-qa { background-image: url("../images/bg.png"); background-size: cover; background-position: center center; position: relative; }
.game-qa.page-questions { background-image: url("../images/bg-questions.png"); }
.game-qa .logo { position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 22.9166666667vw; margin: auto; }
.game-qa .logo img { display: block; width: 100%; }
.game-qa .game-header { height: 19.5vw; position: absolute; top: 0; left: 0; width: 100%; }
.game-qa .game-body { min-height: 100vh; position: relative; padding-top: 19.5vw; }
.game-qa .step { display: none; height: 100%; position: absolute; top: 0; left: 0; width: 100%; z-index: 1; }
.game-qa .step.step-1 { padding-top: 5vw; }
.game-qa .step.step-2 { padding-top: 23.3333333333vw; }
.game-qa .step.step-3 { padding-top: 23.3333333333vw; }
.game-qa .step.show { display: block; }
.game-qa .box-welcome { width: 76.3333333333vw; height: 64.5vw; margin: auto; position: relative; background-image: url("../images/bg-tutorials.png"); position: absolute; top: 45%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 2; background-size: 100% 100%; }
.game-qa .box-welcome .asset { position: relative; display: block; width: 100%; mix-blend-mode: screen; }
.game-qa .box-welcome .tutorials { position: absolute; top: 45%; left: 0; width: 100%; text-align: center; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-family: "SVN-Gilroy"; font-size: 5vw; font-weight: 500; color: #000000; }
.game-qa .box-welcome .result-content { position: absolute; top: 43%; left: 0; width: 100%; text-align: center; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-family: "SVN-Gilroy"; font-size: 5.4166666667vw; line-height: 1.3; font-weight: 500; color: #000000; }
.game-qa .questions { background-image: url("../images/bg-box.png"); width: 82.8333333333vw; min-height: 130.8333333333vw; background-size: 100% 100%; margin: auto; padding: 3.9166666667vw 5vw 7.25vw 8vw; }
.game-qa .questions .question { display: none; opacity: 0; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; visibility: hidden; }
.game-qa .questions .question.show { display: block; visibility: hidden; -webkit-transform: translateY(5%); transform: translateY(5%); }
.game-qa .questions .question.show.ani { opacity: 1; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; visibility: visible; -webkit-transform: translateY(0%); transform: translateY(0%); }
.game-qa .questions .question-inner { border: 2px solid #ffffff; border-radius: 2.9166666667vw; min-height: 52.8333333333vw; padding: 3.9166666667vw 3.9166666667vw 3.9166666667vw 3.9166666667vw; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-image: url("../images/bg-q.png"); background-size: cover; background-position: center center; margin-bottom: 2.9166666667vw; }
.game-qa .questions .question-inner .content { font-family: "SVN-Gilroy"; font-size: 5vw; font-weight: 700; color: #000000; text-align: center; line-height: 1.25; }
.game-qa .questions .answers .people { border-radius: 2.9166666667vw; overflow: hidden; opacity: 0; display: none; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; margin-bottom: 2.9166666667vw; }
.game-qa .questions .answers .people.show { display: block; }
.game-qa .questions .answers .people.show.ani { opacity: 1; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
.game-qa .questions .answers .answer { border: 2px solid #ffffff; border-radius: 2.9166666667vw; background-image: url("../images/bg-a.png"); background-size: cover; background-position: top left; min-height: 14.1666666667vw; width: 100%; margin-bottom: 2.9166666667vw; padding: 3.1666666667vw 3.75vw 3.1666666667vw 10vw; position: relative; }
.game-qa .questions .answers .answer span { font-family: "SVN-Gilroy"; font-size: 5vw; font-weight: 4500; color: #000000; text-align: left; line-height: 1.25; }
.game-qa .questions .answers .answer .key { font-weight: 700; position: absolute; top: 3.1666666667vw; left: 3.75vw; }
.game-qa .questions .answers .answer.active { background-color: #ebc88f; background-image: unset; }
.game-qa .questions .answers .answer.active span { font-weight: 700; }
.game-qa .results { margin-top: 10vw; }
.game-qa .results .result { width: 82.8333333333vw; margin: auto; padding: 3.9166666667vw 5vw 7.25vw 8vw; }
.game-qa .results .result .result-inner { border: 2px solid #ffffff; border-radius: 2.9166666667vw; min-height: 37.5vw; padding: 3.9166666667vw 3.9166666667vw 3.9166666667vw 3.9166666667vw; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-image: url("../images/bg-q.png"); background-size: cover; background-position: center center; position: relative; background-color: #ebc88f; }
.game-qa .results .result .result-inner .bg-question { width: 100%; }
.game-qa .results .result .result-inner .content { position: absolute; top: 50%; left: 0; width: 100%; -webkit-transform: translateY(-50%); transform: translateY(-50%); text-align: center; transform: translateY(-50%); font-family: "SVN-Gilroy"; font-size: 5vw; font-weight: 700; color: #ffffff; }
.game-qa .results .result .result-inner .content i { font-weight: 400; font-style: italic; }
.game-qa .results .result .result-inner .content .result-title { font-size: 6.6666666667vw; font-weight: 700; color: #ffffff; text-transform: uppercase; margin-bottom: 2.5vw; padding-bottom: 2.5vw; font-family: "SVN-Gilroy"; }
.game-qa .game-countdown { opacity: 0; visibility: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; z-index: 9999; background-color: rgba(219, 168, 78, 0.8); }
.game-qa .game-countdown.show { opacity: 1; visibility: visible; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; }
.game-qa .game-countdown .countdown { font-size: 13.3333333333vw; font-weight: 700; color: #000000; text-transform: uppercase; margin-bottom: 2.5vw; padding-bottom: 2.5vw; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-family: "SVN-Gilroy"; }

.ohui-product { position: relative; width: 52.1666666667vw; height: auto; margin: auto; overflow: visible; margin-bottom: 3.3333333333vw; }

/* Sản phẩm ở giữa */
.ohui-elip { width: 100%; display: block; height: auto; position: relative; z-index: 2; }

/* Quỹ đạo quay */
.orbit { position: absolute; top: 50%; left: 50%; -webkit-transform-origin: center center; transform-origin: center center; -webkit-animation: rotateOrbit linear infinite; animation: rotateOrbit linear infinite; }
.orbit.pause { -webkit-animation-play-state: paused; animation-play-state: paused; }

/* Nutrient */
.nutrient { position: absolute; }

/* Nutrient 1 */
.orbit-1 { width: 19.1666666667vw; -webkit-animation-duration: 16s; animation-duration: 16s; }

/* Nutrient 2 */
.orbit-2 { width: 19.1666666667vw; -webkit-animation-duration: 16s; animation-duration: 16s; }

/* Nutrient 3 */
.orbit-3 { width: 17.5vw; -webkit-animation-duration: 16s; animation-duration: 16s; }

/* Animation quay quanh tâm */
@-webkit-keyframes rotateOrbit { from { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); z-index: 1; }
  to { -webkit-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); z-index: 1; } }
@keyframes rotateOrbit { from { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); z-index: 1; }
  to { -webkit-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); z-index: 1; } }
/* Giữ nutrient luôn thẳng */
.nutrient span { font-family: "SVN-Gilroy"; font-size: 2.3333333333vw; font-weight: 700; color: #552b79; text-align: center; position: absolute; top: 50%; left: 50%; }

.orbit-1 .nutrient img { -webkit-animation-duration: 12s; animation-duration: 12s; }

.orbit-2 .nutrient img { -webkit-animation-duration: 12s; animation-duration: 12s; }

.orbit-3 .nutrient img { -webkit-animation-duration: 12s; animation-duration: 12s; }

.orbit-1 .nutrient { -webkit-transform: rotate(40deg) translateX(120%); transform: rotate(40deg) translateX(120%); }
.orbit-1 .nutrient span { -webkit-transform: translate(-50%, -50%) rotate(-40deg); transform: translate(-50%, -50%) rotate(-40deg); -webkit-animation: counterRotateReverse1 linear infinite; animation: counterRotateReverse1 linear infinite; -webkit-animation-duration: 16s; animation-duration: 16s; }
.orbit-1.pause .nutrient span { -webkit-animation-play-state: paused; animation-play-state: paused; }

.orbit-2 .nutrient { -webkit-transform: rotate(300deg) translateX(180%); transform: rotate(300deg) translateX(180%); }
.orbit-2 .nutrient span { -webkit-transform: translate(-50%, -50%) rotate(-300deg); transform: translate(-50%, -50%) rotate(-300deg); -webkit-animation: counterRotateReverse2 linear infinite; animation: counterRotateReverse2 linear infinite; -webkit-animation-duration: 16s; animation-duration: 16s; }
.orbit-2.pause .nutrient span { -webkit-animation-play-state: paused; animation-play-state: paused; }

.orbit-3 .nutrient { -webkit-transform: rotate(180deg) translateX(135%); transform: rotate(180deg) translateX(135%); }
.orbit-3 .nutrient span { -webkit-transform: translate(-50%, -50%) rotate(-180deg); transform: translate(-50%, -50%) rotate(-180deg); -webkit-animation: counterRotateReverse3 linear infinite; animation: counterRotateReverse3 linear infinite; -webkit-animation-duration: 16s; animation-duration: 16s; }
.orbit-3.pause .nutrient span { -webkit-animation-play-state: paused; animation-play-state: paused; }

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

@keyframes counterRotate { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  to { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } }
@-webkit-keyframes counterRotateReverse1 { from { -webkit-transform: translate(-50%, -50%) rotate(-40deg); transform: translate(-50%, -50%) rotate(-40deg); }
  to { -webkit-transform: translate(-50%, -50%) rotate(-360deg); transform: translate(-50%, -50%) rotate(-360deg); } }
@keyframes counterRotateReverse1 { from { -webkit-transform: translate(-50%, -50%) rotate(-40deg); transform: translate(-50%, -50%) rotate(-40deg); }
  to { -webkit-transform: translate(-50%, -50%) rotate(-360deg); transform: translate(-50%, -50%) rotate(-360deg); } }
@-webkit-keyframes counterRotateReverse2 { from { -webkit-transform: translate(-50%, -50%) rotate(-300deg); transform: translate(-50%, -50%) rotate(-300deg); }
  to { -webkit-transform: translate(-50%, -50%) rotate(-660deg); transform: translate(-50%, -50%) rotate(-660deg); } }
@keyframes counterRotateReverse2 { from { -webkit-transform: translate(-50%, -50%) rotate(-300deg); transform: translate(-50%, -50%) rotate(-300deg); }
  to { -webkit-transform: translate(-50%, -50%) rotate(-660deg); transform: translate(-50%, -50%) rotate(-660deg); } }
@-webkit-keyframes counterRotateReverse3 { from { -webkit-transform: translate(-50%, -50%) rotate(-180deg); transform: translate(-50%, -50%) rotate(-180deg); }
  to { -webkit-transform: translate(-50%, -50%) rotate(-540deg); transform: translate(-50%, -50%) rotate(-540deg); } }
@keyframes counterRotateReverse3 { from { -webkit-transform: translate(-50%, -50%) rotate(-180deg); transform: translate(-50%, -50%) rotate(-180deg); }
  to { -webkit-transform: translate(-50%, -50%) rotate(-540deg); transform: translate(-50%, -50%) rotate(-540deg); } }
.shake { -webkit-animation: shake 0.4s; animation: shake 0.4s; }

@-webkit-keyframes shake { 0% { -webkit-transform: translateX(0); transform: translateX(0); }
  20% { -webkit-transform: translateX(-8px); transform: translateX(-8px); }
  40% { -webkit-transform: translateX(8px); transform: translateX(8px); }
  60% { -webkit-transform: translateX(-8px); transform: translateX(-8px); }
  80% { -webkit-transform: translateX(8px); transform: translateX(8px); }
  100% { -webkit-transform: translateX(0); transform: translateX(0); } }

@keyframes shake { 0% { -webkit-transform: translateX(0); transform: translateX(0); }
  20% { -webkit-transform: translateX(-8px); transform: translateX(-8px); }
  40% { -webkit-transform: translateX(8px); transform: translateX(8px); }
  60% { -webkit-transform: translateX(-8px); transform: translateX(-8px); }
  80% { -webkit-transform: translateX(8px); transform: translateX(8px); }
  100% { -webkit-transform: translateX(0); transform: translateX(0); } }
.e { position: absolute; -webkit-animation: floatAnimation 6s ease-in-out infinite; animation: floatAnimation 6s ease-in-out infinite; }
.e.e-1 { width: 17.6666666667vw; top: 10%; left: 80%; }
.e.e-2 { width: 47.8333333333vw; top: 70%; left: -25vw; opacity: 0.8; z-index: 0; -webkit-filter: blur(2px); filter: blur(2px); -webkit-animation-delay: .3s; animation-delay: .3s; }
.e.e-3 { width: 47.8333333333vw; top: 70%; right: -25vw; opacity: 0.8; z-index: 0; -webkit-filter: blur(2px); filter: blur(2px); }
.e.e-4 { width: 18.75vw; top: 20%; left: -7.5vw; -webkit-animation-delay: .3s; animation-delay: .3s; }
.e.e-5 { width: 17.6666666667vw; top: 5%; left: 80%; -webkit-animation-delay: .5s; animation-delay: .5s; }

@-webkit-keyframes floatAnimation { 0% { -webkit-transform: translateY(0px); transform: translateY(0px); }
  50% { -webkit-transform: translateY(10px); transform: translateY(10px);
    /* Moves it down 20 pixels */ }
  100% { -webkit-transform: translateY(0px); transform: translateY(0px);
    /* Returns to the original position */ } }

@keyframes floatAnimation { 0% { -webkit-transform: translateY(0px); transform: translateY(0px); }
  50% { -webkit-transform: translateY(10px); transform: translateY(10px);
    /* Moves it down 20 pixels */ }
  100% { -webkit-transform: translateY(0px); transform: translateY(0px);
    /* Returns to the original position */ } }

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