/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

:root {
    --contest-bg: #a4ccd2;
    --contest-text: #18181b;
    --contest-accent: #0eb4cb;
    --contest-pagi: #cdcdcd;
    --contest-marked: #00821f;
}

html {
    scroll-behavior: smooth;
}

a {
    outline: none;
}

.contest-section.swiper.contest-swiper {
    padding-bottom: 60px;
}

/* .contest-section.swiper.contest-swiper:has(.swiper-button-disabled) {
    padding-bottom: 0;
} */

.swiper-slide {
    text-align: center;
}

.contest-section.contest-swiper .swiper-button-disabled {
    /* display: none; */
    /* filter: grayscale(1); */
    opacity: .77;
    pointer-events: none;
}

.contest-section.swiper.contest-swiper .swiper-button-navigation {
    width: 45px !important;
    height: 45px;
    position: absolute;
    top: auto;
    bottom: 0;
    right: 0;
    width: 100%;
    /* background-color: var(--contest-accent); */
    border-radius: 5px;
}

.contest-section.swiper.contest-swiper .swiper-button-navigation::after {
    display: none;
}

.contest-section.swiper.contest-swiper .swiper-button-navigation.swiper-button-prev {
    left: 0;
}

.contest-section.swiper.contest-swiper .swiper-button-navigation.swiper-button-next {
    right: 0;
}


.contest-section.contest-swiper .swiper-button-navigation svg path {
    fill: #fff;
}

.contest-section.swiper.contest-swiper .swiper-pagination {
    overflow: hidden;
    top: 0;
    left: 50%;
    justify-content: center;
    gap: 10px;
    align-items: center;
    width: calc(100% - 120px);
    height: 16px;
    border-radius: 4px;
    /* background: var(--contest-pagi); */
    transform: translateX(-50%);
}

.contest-section.swiper.contest-swiper .swiper-pagination-bullet {
    padding: 5px;
    border-radius: 0;
    margin: 0;
    width: 100%;
    height: 18px;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    opacity: 1;
    background-color: transparent;
}

.contest-section.swiper.contest-swiper .swiper-pagination-bullet:nth-child(1) {
    background-color: #be1e2d;
}

.contest-section.swiper.contest-swiper .swiper-pagination-bullet:nth-child(2) {
    background-color: #d60d26;
}

.contest-section.swiper.contest-swiper .swiper-pagination-bullet:nth-child(3) {
    background-color: #ee4036;
}

.contest-section.swiper.contest-swiper .swiper-pagination-bullet:nth-child(4) {
    background-color: #f2652b;
}

.contest-section.swiper.contest-swiper .swiper-pagination-bullet:nth-child(5) {
    background-color: #f37427;
}

.contest-section.swiper.contest-swiper .swiper-pagination-bullet:nth-child(6) {
    background-color: #f47c25;
}

.contest-section.swiper.contest-swiper .swiper-pagination-bullet:nth-child(7) {
    background-color: #f58b20;
}

.contest-section.swiper.contest-swiper .swiper-pagination-bullet:nth-child(8) {
    background-color: #f4933b;
}

.contest-section.swiper.contest-swiper .swiper-pagination-bullet:nth-child(9) {
    background-color: #ffa350;
}

.contest-section.swiper.contest-swiper .swiper-pagination-bullet:nth-child(10) {
    background-color: #f9ae69;
}

.contest-section.swiper.contest-swiper .swiper-pagination-bullet[data-marked="true"] {
    background: #A3E635;
    /* background-color: var(--contest-marked); */
    opacity: 1;
}

.contest-section.swiper.contest-swiper .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #ffec00;
    /* background: var(--contest-accent); */
}

.contest-section.swiper.contest-swiper .swiper-pagination-bullet.unmarked-bullet {
    /* background: #f00; */
}

.bricks-button {
    min-width: 200px;
    cursor: pointer;
}

.btn__outline {
    border: 1px solid #231F20;
    border-radius: 5px;
    background-color: transparent;
    color: #231F20;
    padding: 10px 42px;
    min-width: 300px;
    min-height: 96px;
    transition: all .2s ease;
}

@media (max-width: 767px) {
    .btn__outline {
        min-height: 70px;
    }

    .contest-section.swiper.contest-swiper .swiper-pagination {
        font-size: 10px;
        gap: 2px;
    }
}

.btn__outline:hover {
    color: white;
}

.btn__outline--blur {
    opacity: .25;
}

.btn__outline--blur:hover {
    opacity: 1;
}


/* GForm */
.gform_wrapper.gravity-theme .gform_body .ginput_container_date input,
.gform_wrapper.gravity-theme .gform_body input:not([type="button"]),
.gform_wrapper.gravity-theme .gform_body select,
.gform_wrapper.gravity-theme .gform_body textarea {
    color: #18181b;
    width: 100%;
    min-height: 42px;
    line-height: 1.2;
    background: #fff;
    padding-inline: 15px;
}

.gform_wrapper.gravity-theme .gform_body input::placeholder,
.gform_wrapper.gravity-theme .gform_body textarea::placeholder {
    color: #000;
    opacity: 1;
}

.gform_wrapper.gravity-theme .gform_body .chosen-container a.chosen-single {
    color: #18181b;
    border: 1px solid #E8E8E8;
    border-radius: 40px;
    padding: 16px;
    min-height: 56px;
    outline: none;
    box-shadow: none;
    background: none !important;
}

.gform_wrapper.gravity-theme .gform_body .chosen-container a.chosen-single span {
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
}

.gform_wrapper.gravity-theme .gform_body .chosen-container-single .chosen-single div {
    width: 10px;
    right: 8px
}

.gform_wrapper.gravity-theme .gform_body .chosen-container-single .chosen-single div b {
    background-position: 0 19px;
}

.gform_wrapper.gravity-theme .gform_body .chosen-container-active.chosen-with-drop .chosen-single div b {
    background-position: -18px 19px;
}

.gform_wrapper.gravity-theme .gform_body .chosen-container-single .chosen-search input[type=text] {
    background-image: url('images/search.svg');
    background-position: calc(100% - 16px) 50%;
    background-size: 16px;
    border-radius: 0 !important;
    height: auto;
    min-height: 0 !important;
    padding: 5px 6px !important;
}

/* contest Form */
.gfield--type-custom_contest .gfield_label,
.gform_wrapper.gravity-theme .gform_validation_errors,
.gform_wrapper.gravity-theme .gfield_validation_message,
.contest-form_wrapper .gform_heading {
    display: none !important;
}

.gform_wrapper.gravity-theme .gfield_error [aria-invalid=true] {
    border: 1px solid #c02b0a;
    box-shadow: 0 0px 15px 2px red;
}

#gform_page_11_1,
#gform_page_5_1,
#gform_page_1_1 {
    padding: 60px 100px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 10px;
}

.gform_wrapper.gravity-theme .gfield_description,
#gform_page_11_1 .form-notice,
#gform_page_5_1 .form-notice,
#gform_page_1_1 .form-notice {
    color: white;
    /* color: var(--contest-text); */
    font-weight: 300;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}

.gform_wrapper.gravity-theme .gfield_description {
    padding-top: 0 !important;
    font-size: 13px !important;
}

.contest-page-1-heading {
    text-align: center;
    color: white;
    /* color: var(--contest-text); */
}

.contest-page-1-heading .brxe-heading {
    font-weight: 700;
    line-height: 1.5;
}

.contest-page-1-heading .brxe-divider {
    width: 15%;
    padding-block: 20px;
    margin-inline: auto;
}

.contest-page-1-heading .brxe-divider .line {
    border-width: 2px;
}

.contest-form_wrapper #gform_fields_1_3 .gfield_label {
    color: #fff;
    display: block !important;
}

.contest-section {
    color: white;
    /* color: var(--contest-text); */
}

.contest-section .contest__question {
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    justify-content: center;
    align-items: center;
    background-image: url('./images/question-bg.png');
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    min-height: 200px;
    padding: 30px 30px;
    margin-top: 40px;
    margin-bottom: 30px;
}

.contest-section .contest__question img {
    max-height: 120px;
    width: auto;
}

.contest__question--title {
    line-height: 1.5;
}

.contest-section .contest__answers--container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 10px;
}

.contest-section .contest__answers--container .contest__answers--answer-wrapper {
    position: relative;
    display: flex;
    align-items: flex-start;
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 250px;
    /* background-color: var(--contest-accent);
    border: 1px solid var(--contest-accent); */
}

.contest-section .contest__answers--container .contest__answers--answer-wrapper::before {
    background-image: url('./images/answer-box.png');
    background-size: contain;
    background-position: top left;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 78px;
    height: auto;
    aspect-ratio: 147 / 160;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.5;
    z-index: 2;
}

.contest-section .contest__answers--container .contest__answers-answer-wrapper--a::before {
    content: 'A';
}

.contest-section .contest__answers--container .contest__answers-answer-wrapper--b::before {
    content: 'B';
}

.contest-section .contest__answers--container .contest__answers-answer-wrapper--c::before {
    content: 'C';
}

.contest-section .contest__answers--container .contest__answers-answer-wrapper--d::before {
    content: 'D';
}

.contest-section .contest__answers--container .contest__answers--answer-wrapper::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 45px;
    background-image: url('./images/answer-bkg.png');
    background-repeat: no-repeat;
    background-position: top left;
    background-size: contain;
    width: clamp(200px, 60%, 405px);
    height: auto;
    aspect-ratio: 608/73;
}

.contest-section .contest__answers--container .contest__answers--answer {
    cursor: pointer;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.2;
    color: #ec1c24;
    background-color: #fff;
    width: calc(100% - 35px);
    height: 100%;
    text-align: left;
    margin-bottom: 0;
    transform: translate(35px, 10px);
    z-index: 1;
    padding: 20px 30px 20px 60px;
    border-radius: 0 50px 50px 50px;
    min-height: 74.5px;
}

.contest-section .contest__answers--container .contest__answers--answer-wrapper input[type="radio"] {
    display: none;
}

.contest__answers--answer-wrapper:has(input[type="radio"]:checked) label {
    /* background-color: var(--contest-marked); */
    background-color: #EFCC3C;
    /* color: #fff; */
}

.contest-form_wrapper .gform_previous_button {
    display: none;
}

.contest-form_wrapper .button {
    width: 100% !important;
    text-align: center;
    color: white !important;
    background-image: linear-gradient(45deg, #fe6300, #ffae15 100%) !important;
    /* background-color: var(--contest-accent) !important; */
    border: none !important;
    padding: 5px;
    margin-left: 0 !important;
    margin-top: 20px;
    border-radius: 5px;
}

.contest-form_wrapper .button[value="Nộp bài"] {
    margin-top: 0;
}

#quiz-timer {
    font-size: 70px;
    color: #fff;
    margin-bottom: 60px;
    line-height: 1;
}

/* gform_page contest-form__exam */
.contest-form__finish .gfield_label {
    text-align: center;
    font-weight: normal !important;
    font-size: 16px !important;
    display: block !important;
    width: 100%;
    color: #fff;
    /* color: var(--contest-text); */
}

.contest-form__finish input {
    text-align: center;
}

div#quiztime {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-bottom: 10px;
}

div#quiztime>span {
    display: block;
    padding: 0 10px;
    position: relative;
    width: 86px;
    height: 86px;
    font-size: 40px;
    font-weight: bold;
    line-height: 86px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
    color: #fff;
    overflow: hidden;
    background: #f00;
    text-align: center;
    margin: 0 5px;
}

div#quiztime>span:before {
    content: "";
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, red));
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    bottom: 0;
}

div#quiztime span.label {
    position: absolute;
    bottom: 5px;
    left: 0;
    right: 0;
    font-size: 10px;
    height: auto;
    line-height: 1;
    letter-spacing: 2px;
    text-transform: uppercase;
}

@media (max-width: 768px) {

    #gform_page_11_1,
    #gform_page_5_1,
    #gform_page_1_1 {
        padding: 60px 20px;
    }

    div#quiztime {
        margin-bottom: 20px;
    }

    .contest-section .contest__answers--container {
        grid-template-columns: 1fr;
    }

    .contest-section .contest__question {
        font-size: 16px;
        margin-top: 30px;
        /* min-height: 150px; */
        background-image: url('./images/mobile-questionAsset.png');
        min-height: 250px;
        padding: 30px 20px;
    }

    .contest-section .contest__answers--container .contest__answers--answer {
        font-size: 14px;
/*         min-height: 73px; */
    }
}

body.logged-in .show-only-logout,
body:not(.logged-in) .show-only-login,
body:not(.home) .show-only-home {
    display: none !important;
}