.section-intro {

  position: relative; }

  .section-intro img {

    width: 100%;

    height: auto;

    object-fit: cover; }

  .section-intro .intro-content {

    position: absolute;

    top: 20%;

    left: 0;

    right: 0; }

    @media screen and (max-width: 991px) {

      .section-intro .intro-content {

        top: 15%; } }

    @media screen and (max-width: 767px) {

      .section-intro .intro-content {

        position: relative;

        top: unset;

        left: unset;

        padding: 50px 0 30px;

        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 13.02%, #ffffff 70.31%, #ffffff 100%);

        margin-top: -80px; } }

    .section-intro .intro-content .container {

      max-width: 1320px !important; }

    .section-intro .intro-content .box-main-content {

      max-width: 640px; }

      @media screen and (max-width: 1024px) {

        .section-intro .intro-content .box-main-content {

          max-width: 500px; } }

      .section-intro .intro-content .box-main-content h1 {

        color: #2a378b;

        font-family: "Montserrat Black";

        font-size: 42px;

        margin-bottom: 20px; }

        @media screen and (max-width: 1024px) {

          .section-intro .intro-content .box-main-content h1 {

            font-size: 30px; } }

        @media screen and (max-width: 767px) {

          .section-intro .intro-content .box-main-content h1 {

            font-size: 24px;

            margin-bottom: 10px; } }

        @media screen and (max-width: 380px) {

          .section-intro .intro-content .box-main-content h1 {

            font-size: 20px; } }

        @media screen and (max-width: 320px) {

          .section-intro .intro-content .box-main-content h1 {

            font-size: 18px; } }

      .section-intro .intro-content .box-main-content p {

        font-size: 20px;

        font-family: "Montserrat Medium";

        color: #000000; }

        @media screen and (max-width: 1024px) {

          .section-intro .intro-content .box-main-content p {

            font-size: 16px;

            margin-bottom: 10px; } }

      .section-intro .intro-content .box-main-content .btn-next {

        margin-top: 20px;

        background: #2a378b;

        color: #fff;

        font-family: "Montserrat SemiBold";

        font-size: 20px;

        padding: 5px 10px;

        border-radius: 8px; }

        @media screen and (max-width: 1024px) {

          .section-intro .intro-content .box-main-content .btn-next {

            margin-top: 10px;

            font-size: 16px; } }

        @media screen and (max-width: 767px) {

          .section-intro .intro-content .box-main-content .btn-next {

            margin-top: 0; } }



.section-guide {

  height: 800px;

  background-repeat: no-repeat;

  background-size: cover;

  background-position: 100% 100%;

  padding-top: 8%;

  background-image: url(/wp-content/themes/fptheme/assets/images/background-quiz.png);

  display: none; }

  @media screen and (max-width: 1024px) {

    .section-guide {

      height: 550px; } }

  @media screen and (max-width: 767px) {

    .section-guide {

      height: auto;

      padding: 50px 0; } }

  .section-guide .guide-content .guide-content-main {

    max-width: 900px;

    margin: 0 auto; }

    .section-guide .guide-content .guide-content-main h2 {

      color: #2a378b;

      font-family: "Montserrat Black";

      font-size: 42px;

      margin-bottom: 20px;

      text-align: center; }

      @media screen and (max-width: 1024px) {

        .section-guide .guide-content .guide-content-main h2 {

          font-size: 30px; } }

      @media screen and (max-width: 767px) {

        .section-guide .guide-content .guide-content-main h2 {

          font-size: 24px;

          margin-bottom: 10px; } }

    .section-guide .guide-content .guide-content-main p {

      font-size: 20px;

      font-family: "Montserrat Medium";

      color: #000000; }

      @media screen and (max-width: 1024px) {

        .section-guide .guide-content .guide-content-main p {

          font-size: 16px;

          margin-bottom: 10px; } }

    .section-guide .guide-content .guide-content-main .box-level {

      display: flex;

      justify-content: center;

      align-items: center;

      margin-top: 30px; }

      @media screen and (max-width: 767px) {

        .section-guide .guide-content .guide-content-main .box-level {

          display: block;

          text-align: center; } }

      .section-guide .guide-content .guide-content-main .box-level select {

        padding: 0 10px;

        margin-right: 20px;

        border-radius: 8px;

        height: 50px;

        font-family: "Montserrat ExtraBold";

        font-size: 20px;

        background: #fff;

        border: none;

        outline: none;

        box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); }

        @media screen and (max-width: 767px) {

          .section-guide .guide-content .guide-content-main .box-level select {

            margin-right: 0;

            margin-bottom: 20px;

            width: 100%;

            font-size: 16px; } }

        .section-guide .guide-content .guide-content-main .box-level select:focus {

          box-shadow: unset; }

        .section-guide .guide-content .guide-content-main .box-level select option {

          font-family: "Montserrat ExtraBold";

          font-size: 20px; }

          @media screen and (max-width: 767px) {

            .section-guide .guide-content .guide-content-main .box-level select option {

              font-size: 16px; } }

      .section-guide .guide-content .guide-content-main .box-level .btn-start {

        background: #d30303;

        color: #fff;

        font-family: "Montserrat SemiBold";

        font-size: 20px;

        padding: 10px 25px;

        border-radius: 8px;

        box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); }

        @media screen and (max-width: 1024px) {

          .section-guide .guide-content .guide-content-main .box-level .btn-start {

            font-size: 16px; } }



.section-question {

  display: none;

  background-image: url(/wp-content/themes/fptheme/assets/images/background-quiz.png);

  background-repeat: no-repeat;

  background-size: cover;

  background-position: 100% 100%;

  padding: 100px 0 150px; }

  @media screen and (max-width: 767px) {

    .section-question {

      padding: 50px 0; } }

  .section-question .box-question {

    text-align: center;

    margin-bottom: 50px; }

    @media screen and (max-width: 767px) {

      .section-question .box-question {

        margin-bottom: 30px; } }

    .section-question .box-question h3 {

      font-size: 30px;

      color: #414042;

      font-family: "Montserrat Bold";

      margin-bottom: 20px; }

      @media screen and (max-width: 1024px) {

        .section-question .box-question h3 {

          font-size: 24px; } }

      @media screen and (max-width: 767px) {

        .section-question .box-question h3 {

          font-size: 20px; } }

    .section-question .box-question .box-image {

      max-width: 250px;

      margin: 0 auto 20px; }

      @media screen and (max-width: 767px) {

        .section-question .box-question .box-image {

          max-width: 65%; } }

    .section-question .box-question .custom-audio .audio-element {

      display: none; }

    .section-question .box-question .custom-audio .audio-button {

      padding: 5px 40px;

      border-radius: 40px;

      background: #fff;

      box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); }

      @media screen and (max-width: 767px) {

        .section-question .box-question .custom-audio .audio-button {

          padding: 2px 30px; } }

      .section-question .box-question .custom-audio .audio-button i {

        font-size: 24px;

        color: #959eb1; }

        @media screen and (max-width: 767px) {

          .section-question .box-question .custom-audio .audio-button i {

            font-size: 20px; } }

  @media screen and (max-width: 767px) {

    .section-question .box-answer {

      margin-bottom: 20px; } }

  .section-question .box-answer .answer-image {

    text-align: center; }

  .section-question .box-answer .answer-item {

    text-align: center;

    margin-top: 30px; }

    @media screen and (max-width: 767px) {

      .section-question .box-answer .answer-item {

        margin-top: 10px; } }

    .section-question .box-answer .answer-item .answer-value {

      font-size: 30px;

      color: #414042;

      background: #fff;

      border-radius: 8px;

      box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);

      padding: 0;

      width: 150px;

      height: 50px;

      font-family: "Montserrat ExtraBold";

      transition: all 0.3s linear; }

      .section-question .box-answer .answer-item .answer-value.selected {

        background: #5fd7bc; }

      .section-question .box-answer .answer-item .answer-value:hover {

        background: #5fd7bc; }

      @media screen and (max-width: 767px) {

        .section-question .box-answer .answer-item .answer-value {

          font-size: 20px;

          width: 100px;

          height: 40px; } }

  .section-question .btn-wrapper {

    text-align: center;

    margin-top: 50px; }

    .section-question .btn-wrapper .btn-next {

      background: #d30303;

      color: #fff;

      font-family: "Montserrat SemiBold";

      font-size: 28px;

      padding: 10px 35px;

      border-radius: 40px;

      box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); }

      @media screen and (max-width: 1024px) {

        .section-question .btn-wrapper .btn-next {

          font-size: 16px; } }

  .section-question .box-answer-primary {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    align-items: center;

    margin-right: -50px; }

    @media screen and (max-width: 767px) {

      .section-question .box-answer-primary {

        margin-right: -30px; } }

    .section-question .box-answer-primary .answer-item {

      width: calc(50% - 50px);

      margin-right: 50px;

      margin-bottom: 50px;

      max-width: 500px; }

      @media screen and (max-width: 767px) {

        .section-question .box-answer-primary .answer-item.long {

          width: 100% !important; }

          .section-question .box-answer-primary .answer-item.long .answer-value {

            width: 100% !important; } }

      @media screen and (max-width: 767px) {

        .section-question .box-answer-primary .answer-item {

          width: calc(50% - 30px);

          margin-right: 30px;

          margin-bottom: 30px; } }

      .section-question .box-answer-primary .answer-item:nth-child(odd) {

        text-align: right; }

      .section-question .box-answer-primary .answer-item .answer-value {

        font-size: 24px;

        color: #414042;

        background: #f5f5f7;

        border-radius: 8px;

        box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);

        padding: 10px 20px;

        width: 100%;

        font-family: "Montserrat ExtraBold";

        transition: all 0.3s linear; }

        .section-question .box-answer-primary .answer-item .answer-value.selected {

          background: #5fd7bc; }

        .section-question .box-answer-primary .answer-item .answer-value:hover {

          background: #5fd7bc; }

        @media screen and (max-width: 1024px) {

          .section-question .box-answer-primary .answer-item .answer-value {

            font-size: 20px; } }

        @media screen and (max-width: 767px) {

          .section-question .box-answer-primary .answer-item .answer-value {

            font-size: 16px;

            width: 100%;

            padding: 4px 12px; } }



.section-form {

  display: none;

  background-image: url(/wp-content/themes/fptheme/assets/images/background-quiz.png);

  background-repeat: no-repeat;

  background-size: cover;

  background-position: 100% 100%;

  padding: 100px 0 150px; }

  @media screen and (max-width: 767px) {

    .section-form {

      padding: 50px 0; } }

  .section-form .box-form {

    max-width: 1100px;

    margin: 0 auto;

    background-image: url(/wp-content/themes/fptheme/assets/images/background-form.png);

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center center;

    padding: 80px 70px;

    border-radius: 20px; }

    @media screen and (max-width: 767px) {

      .section-form .box-form {

        padding: 30px 10px 50px; } }

    .section-form .box-form p {

      color: #fff;

      font-size: 24px;

      font-family: "Montserrat Bold";

      text-align: center;

      margin-bottom: 30px; }

      @media screen and (max-width: 767px) {

        .section-form .box-form p {

          font-size: 18px;

          margin-bottom: 20px; } }

    .section-form .box-form .form-content {

      position: relative;

      max-width: 780px;

      margin: 0 auto;

      padding: 40px 60px;

      background: rgba(255, 255, 255, 0.6);

      backdrop-filter: blur(8px);

      border-top-left-radius: 40px;

      border-top-right-radius: 40px; }

      @media screen and (max-width: 767px) {

        .section-form .box-form .form-content {

          border-top-left-radius: 24px;

          border-top-right-radius: 24px;

          padding: 30px 15px; } }

      .section-form .box-form .form-content .form-group {

        margin-bottom: 30px; }

        @media screen and (max-width: 767px) {

          .section-form .box-form .form-content .form-group {

            margin-bottom: 24px; } }

        .section-form .box-form .form-content .form-group:nth-last-of-type(2) {

          margin-bottom: 0; }

        .section-form .box-form .form-content .form-group .error-text {

          font-size: 14px;

          font-family: "Montserrat Medium";

          color: red; }

        .section-form .box-form .form-content .form-group .ps-relative {

          position: relative; }

          .section-form .box-form .form-content .form-group .ps-relative i {

            font-size: 20px;

            color: #969fb2;

            position: absolute;

            top: 18px;

            left: 25px; }

            @media screen and (max-width: 767px) {

              .section-form .box-form .form-content .form-group .ps-relative i {

                font-size: 16px;

                top: 17px; } }

        .section-form .box-form .form-content .form-group input {

          background: #fff;

          border: none;

          outline: none;

          border-radius: 40px;

          padding: 13px 0 13px 60px;

          font-family: "Montserrat Regular";

          font-size: 20px;

          color: #969fb2; }

          @media screen and (max-width: 767px) {

            .section-form .box-form .form-content .form-group input {

              font-size: 16px;

              padding: 13px 0 13px 50px; } }

          .section-form .box-form .form-content .form-group input:focus {

            box-shadow: none; }

          .section-form .box-form .form-content .form-group input::placeholder {

            /* Chrome, Firefox, Opera, Safari 10.1+ */

            color: #969fb2;

            opacity: 1;

            /* Firefox */

            font-family: "Montserrat Regular";

            font-size: 20px; }

            @media screen and (max-width: 767px) {

              .section-form .box-form .form-content .form-group input::placeholder {

                font-size: 16px; } }

          .section-form .box-form .form-content .form-group input:-ms-input-placeholder {

            /* Internet Explorer 10-11 */

            color: #969fb2;

            font-family: "Montserrat Regular";

            font-size: 20px; }

            @media screen and (max-width: 767px) {

              .section-form .box-form .form-content .form-group input:-ms-input-placeholder {

                font-size: 16px; } }

          .section-form .box-form .form-content .form-group input::-ms-input-placeholder {

            /* Microsoft Edge */

            color: #969fb2;

            font-family: "Montserrat Regular";

            font-size: 20px; }

            @media screen and (max-width: 767px) {

              .section-form .box-form .form-content .form-group input::-ms-input-placeholder {

                font-size: 16px; } }

      .section-form .box-form .form-content .button-wrapper .btn-register {

        background: #d30303;

        color: #ffff;

        border-radius: 40px;

        padding: 10px 20px;

        font-size: 20px;

        font-family: "Montserrat Bold";

        position: absolute;

        bottom: -25px;

        left: 50%;

        transform: translateX(-50%); }

        @media screen and (max-width: 767px) {

          .section-form .box-form .form-content .button-wrapper .btn-register {

            font-size: 16px; } }



.section-result {

  display: none;

  background-image: url(/wp-content/themes/fptheme/assets/images/background-quiz.png);

  background-repeat: no-repeat;

  background-size: cover;

  background-position: 100% 100%;

  padding: 100px 0 150px; }

  @media screen and (max-width: 767px) {

    .section-result {

      padding: 50px 0; } }

  .section-result .box-result {

    max-width: 1100px;

    margin: 0 auto;

    background: #fff;

    border: 8px solid #d7e0fd;

    border-radius: 24px;

    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); }

    .section-result .box-result .box-image {

      text-align: center; }

      .section-result .box-result .box-image img {

        border-radius: 24px; }

        @media screen and (max-width: 767px) {

          .section-result .box-result .box-image img {

            width: 60%; } }

    .section-result .box-result .box-content {

      padding: 50px 50px 50px 0;

      text-align: center; }

      @media screen and (max-width: 1024px) {

        .section-result .box-result .box-content {

          padding: 20px 20px 20px 0; } }

      @media screen and (max-width: 767px) {

        .section-result .box-result .box-content {

          padding: 20px 10px; } }

      @media screen and (max-width: 350px) {

        .section-result .box-result .box-content {

          padding: 10px 5px; } }

      .section-result .box-result .box-content h3 {

        font-size: 36px;

        color: #414042;

        font-family: "Montserrat Black";

        margin-bottom: 10px; }

        @media screen and (max-width: 767px) {

          .section-result .box-result .box-content h3 {

            font-size: 24px; } }

        @media screen and (max-width: 350px) {

          .section-result .box-result .box-content h3 {

            font-size: 20px; } }

      .section-result .box-result .box-content p {

        font-size: 20px;

        color: #414042;

        font-family: "Montserrat Regular";

        margin-bottom: 10px; }

        @media screen and (max-width: 767px) {

          .section-result .box-result .box-content p {

            font-size: 16px; } }

        @media screen and (max-width: 350px) {

          .section-result .box-result .box-content p {

            font-size: 14px; } }

      .section-result .box-result .box-content .score {

        font-size: 36px;

        font-family: "Montserrat ExtraBold";

        color: #414042;

        margin-bottom: 10px; }

        @media screen and (max-width: 767px) {

          .section-result .box-result .box-content .score {

            font-size: 24px; } }

        @media screen and (max-width: 350px) {

          .section-result .box-result .box-content .score {

            font-size: 20px; } }

      .section-result .box-result .box-content .result {

        font-size: 20px;

        color: #414042;

        font-family: "Montserrat Bold";

        margin-bottom: 10px; }

        @media screen and (max-width: 767px) {

          .section-result .box-result .box-content .result {

            font-size: 16px; } }

        @media screen and (max-width: 350px) {

          .section-result .box-result .box-content .result {

            font-size: 14px; } }

      .section-result .box-result .box-content .result_detail {

        font-size: 20px;

        color: #414042;

        font-family: "Montserrat Regular";

        font-style: italic; }

        @media screen and (max-width: 767px) {

          .section-result .box-result .box-content .result_detail {

            font-size: 16px; } }

        @media screen and (max-width: 350px) {

          .section-result .box-result .box-content .result_detail {

            font-size: 14px; } }



.page-template-page-test-primary .section-question .btn-wrapper {

  margin-top: 0; }



@media screen and (max-width: 1400px) {

  .page-template-page-test-kindy .section-question {

    padding: 50px 0 80px; } }

@media screen and (max-width: 767px) {

  .page-template-page-test-kindy .section-question {

    padding: 30px 0; } }

@media screen and (max-width: 1300px) {

  .page-template-page-test-kindy .section-question .box-question {

    margin-bottom: 30px; } }

@media screen and (max-width: 767px) {

  .page-template-page-test-kindy .section-question .box-question {

    margin-bottom: 20px; } }

@media screen and (max-width: 380px) {

  .page-template-page-test-kindy .section-question .box-question h3 {

    font-size: 16px; } }

@media screen and (max-width: 767px) {

  .page-template-page-test-kindy .section-question .box-question audio {

    height: 30px; } }

@media screen and (max-width: 1600px) {

  .page-template-page-test-kindy .section-question .box-answer .answer-image {

    max-width: 250px;

    margin: 0 auto; } }

@media screen and (max-width: 1400px) {

  .page-template-page-test-kindy .section-question .box-answer .answer-image {

    max-width: 200px; } }

@media screen and (max-width: 767px) {

  .page-template-page-test-kindy .section-question .box-answer .answer-image {

    max-width: 150px; } }

@media screen and (max-width: 380px) {

  .page-template-page-test-kindy .section-question .box-answer .answer-image {

    max-width: 100px; } }

@media screen and (max-width: 767px) {

  .page-template-page-test-kindy .section-question .box-answer .answer-item .answer-value {

    width: 80px;

    height: 30px; } }

@media screen and (max-width: 767px) {

  .page-template-page-test-kindy .section-question .btn-wrapper {

    margin-top: 0; } }

@media screen and (max-width: 767px) {

  .page-template-page-test-kindy .section-question .btn-wrapper .btn-next {

    padding: 6px 24px; } }



@media screen and (max-width: 1600px) {

  .page-template-page-test-primary .section-question {

    padding: 50px 0 80px; } }

@media screen and (max-width: 1300px) {

  .page-template-page-test-primary .section-question {

    padding: 30px 0 80px; } }

@media screen and (max-width: 767px) {

  .page-template-page-test-primary .section-question {

    padding: 30px 0 50px; } }

@media screen and (max-width: 1400px) {

  .page-template-page-test-primary .section-question .box-question {

    margin-bottom: 30px; } }

@media screen and (max-width: 767px) {

  .page-template-page-test-primary .section-question .box-question {

    margin-bottom: 20px; } }

.page-template-page-test-primary .section-question .box-question h3 {

  font-size: 24px; }

  @media screen and (max-width: 767px) {

    .page-template-page-test-primary .section-question .box-question h3 {

      font-size: 20px;

      margin-bottom: 10px; } }

  @media screen and (max-width: 380px) {

    .page-template-page-test-primary .section-question .box-question h3 {

      font-size: 16px; } }

.page-template-page-test-primary .section-question .box-question .box-image {

  max-width: 200px; }

  @media screen and (max-width: 767px) {

    .page-template-page-test-primary .section-question .box-question .box-image {

      max-width: 180px; } }

  @media screen and (max-width: 380px) {

    .page-template-page-test-primary .section-question .box-question .box-image {

      max-width: 150px; } }

@media screen and (max-width: 1400px) {

  .page-template-page-test-primary .section-question .box-answer-primary {

    margin-right: -30px; } }

@media screen and (max-width: 767px) {

  .page-template-page-test-primary .section-question .box-answer-primary {

    margin-right: -20px; } }

@media screen and (max-width: 1400px) {

  .page-template-page-test-primary .section-question .box-answer-primary .answer-item {

    width: calc(50% - 30px);

    margin-right: 30px;

    margin-bottom: 30px; } }

@media screen and (max-width: 767px) {

  .page-template-page-test-primary .section-question .box-answer-primary .answer-item {

    width: calc(50% - 20px);

    margin-right: 20px;

    margin-bottom: 20px; } }

@media screen and (max-width: 1400px) {

  .page-template-page-test-primary .section-question .btn-wrapper .btn-next {

    font-size: 24px; } }

@media screen and (max-width: 1024px) {

  .page-template-page-test-primary .section-question .btn-wrapper .btn-next {

    font-size: 16px; } }

@media screen and (max-width: 767px) {

  .page-template-page-test-primary .section-question .btn-wrapper .btn-next {

    padding: 6px 24px; } }



/*# sourceMappingURL=test-online.css.map */