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

/* 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 ; }

.game-ohui { background-image: url("../images/bg.png"); background-size: cover; background-position: center center; position: relative; }
.game-ohui .logo { position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 22.9166666667vw; margin: auto; }
.game-ohui .logo img { display: block; width: 100%; }
.game-ohui .game-header { height: 8%; position: relative; }
.game-ohui .game-body { height: 92%; position: relative; }
.game-ohui .step { display: none; height: 100%; position: relative; }
.game-ohui .step.step-1 { padding-top: 5vw; }
.game-ohui .step.show { display: block; }
.game-ohui .box-welcome { width: 90vw; margin: auto; position: relative; }
.game-ohui .box-welcome .welcome { position: absolute; top: 0; right: 0; height: 100%; width: auto; z-index: 2; }
.game-ohui .box-welcome .asset { position: relative; display: block; width: 100%; mix-blend-mode: screen; }
.game-ohui .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: 700; color: #552b79; }
.game-ohui .questions { height: 100%; }
.game-ohui .questions .question { display: none; }
.game-ohui .questions .question.question-1 { height: 100%; padding-top: 2.5833333333vw; }
.game-ohui .questions .question.question-2 { height: 100%; padding-top: 16.6666666667vw; }
.game-ohui .questions .question.question-3 { height: 100%; padding-top: 16.6666666667vw; }
.game-ohui .questions .question .question-inner { width: 74.3333333333vw; margin: auto; margin-bottom: 5.8333333333vw; position: relative; }
.game-ohui .questions .question .question-inner .bg-question { width: 100%; display: block; mix-blend-mode: overlay; }
.game-ohui .questions .question .question-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: #552b79; }
.game-ohui .questions .question .question-inner .content i { font-weight: 400; font-style: italic; }
.game-ohui .questions .question.show { display: block; opacity: 1; }
.game-ohui .questions .question.show.ani .answers .answer { opacity: 1; visibility: visible; -webkit-transform: translateY(0%); transform: translateY(0%); -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; -webkit-transition-delay: 0; transition-delay: 0; }
.game-ohui .questions .question.show.ani .answers .answer:nth-child(1) { -webkit-transition-delay: 0; transition-delay: 0; }
.game-ohui .questions .question.show.ani .answers .answer:nth-child(2) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }
.game-ohui .questions .question.show.ani .answers .answer:nth-child(3) { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; }
.game-ohui .questions .question.show.ani .answers .answer:nth-child(4) { -webkit-transition-delay: 0.6s; transition-delay: 0.6s; }
.game-ohui .questions .answers .answer { width: 74.6666666667vw; height: 17.5833333333vw; background-image: url("../images/bg-answer.png"); background-size: 100% 100%; position: relative; margin: 0 auto 4.1666666667vw auto; opacity: 0; visibility: hidden; -webkit-transform: translateY(10%); transform: translateY(10%); -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
.game-ohui .questions .answers .answer span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 0; color: #000000; font-size: 5.25vw; font-family: "SVN-Gilroy"; font-weight: 500; padding: 0.8333333333vw 7vw; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
.game-ohui .questions .answers .answer.active { background-image: url("../images/bg-answer-active.png"); }
.game-ohui .questions .answers .answer.active span { color: #ffffff; font-weight: 700; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
.game-ohui .questions .nutrient-answers { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 4.1666666667vw; width: 64.1666666667vw; margin: auto; z-index: 4; position: relative; }
.game-ohui .questions .nutrient-answers .nutri { position: relative; width: 17.5833333333vw; height: 17.5833333333vw; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; background-image: url("../images/nutri.png"); background-size: 100% 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; }
.game-ohui .questions .nutrient-answers .nutri span { font-family: "SVN-Gilroy"; font-size: 2.3333333333vw; font-weight: 700; color: #552b79; text-align: center; }
.game-ohui .results { height: 100%; }
.game-ohui .results .result { padding-top: 20.8333333333vw; }
.game-ohui .results .result .result-inner { width: 74.3333333333vw; margin: auto; margin-bottom: 5.8333333333vw; position: relative; }
.game-ohui .results .result .result-inner .bg-question { width: 100%; display: block; mix-blend-mode: overlay; }
.game-ohui .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: #552b79; }
.game-ohui .results .result .result-inner .content i { font-weight: 400; font-style: italic; }
.game-ohui .results .result .result-inner .content .result-title { font-size: 6.6666666667vw; font-weight: 700; color: #552b79; text-transform: uppercase; margin-bottom: 2.5vw; padding-bottom: 2.5vw; font-family: "SVN-Gilroy"; }
.game-ohui .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(228, 226, 243, 0.8); }
.game-ohui .game-countdown.show { opacity: 1; visibility: visible; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; }
.game-ohui .game-countdown .countdown { font-size: 13.3333333333vw; font-weight: 700; color: #552b79; 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"; }

@media screen and (min-width: 768px) and (max-width: 991px) { .game-ohui .box-welcome { width: 500px; }
  .game-ohui .box-welcome .tutorials { font-size: 28px; }
  .game-ohui .questions .question.question-1 { padding-top: 20px; }
  .game-ohui .questions .question .question-inner { margin-bottom: 20px; width: 350px; }
  .game-ohui .questions .question .question-inner .content { font-size: 24px; }
  .game-ohui .questions .nutrient-answers { width: 300px; gap: 10px; }
  .game-ohui .questions .nutrient-answers .nutri { width: 90px; height: 90px; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; }
  .game-ohui .questions .nutrient-answers .nutri span { font-size: 13px; }
  .game-ohui .ohui-product { width: 320px; }
  .game-ohui .orbit-1 { width: 110px; }
  .game-ohui .orbit-2 { width: 120px; }
  .game-ohui .orbit-3 { width: 140px; height: 160px; }
  .game-ohui .nutrient span { font-size: 13px; } }
.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; }

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

/* Nutrient 1 */
.orbit-1 { width: 17vw; -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: 21.4166666667vw; height: 24.5833333333vw; -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 img { -webkit-animation: counterRotate linear infinite; animation: counterRotate linear infinite; }

.nutrient span { font-family: "SVN-Gilroy"; font-size: 2.3333333333vw; font-weight: 700; color: #552b79; text-align: center; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-animation: counterRotate linear infinite; animation: counterRotate linear infinite; -webkit-animation-direction: reverse; animation-direction: reverse; }

.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-2 .nutrient { -webkit-transform: rotate(300deg) translateX(180%); transform: rotate(300deg) translateX(180%); }

.orbit-3 .nutrient { -webkit-transform: rotate(140deg) translateX(135%); transform: rotate(140deg) translateX(135%); }

@-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); } }
.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); } }