EDU/Website/NEducation/Content/assets/css/testing-result.css

.testing-result-header {
    background: url('../imgs/background-pin-word.svg') 30px, linear-gradient(to bottom, #FDEBD0 0%, #F39C12 100%);
    background-size: 1314px 320px;
    background-position: center -85px;
    padding: 0px 15px;
}

    .testing-result-header .header-cover {
        max-width: 1070px;
        margin: auto;
        display: flex;
        position: relative;
        min-height: 150px;
        margin-top: 50px;
    }

.testing-result-header-left {
    margin: auto auto auto 0px;
    padding-bottom: 30px;
}

.testing-result-header-right {
    margin: auto 0px auto auto;
}

.testing-result-title {
    font-family: opensanslight;
    font-size: 35px;
    color: #fff;
    margin: 0px;
    margin-bottom: 5px;
}

.testing-result-description {
    font-family: opensansregular;
    font-size: 18px;
    color: #fff;
    margin: 0px;
}

.testing-result-header .testing-result-button {
    display: inline-block;
    width: 159px;
    height: 49px;
    /*    background: var(--color-green-bg);*/
    background: #F39C12;
    color: #fff;
    line-height: 49px;
    border-radius: 30px;
    font-family: opensanssemibold;
    font-size: 15px;
    text-align: center;
    text-decoration: none;
    outline: 0px;
}

    .testing-result-header .testing-result-button.button-ranking {
        background: var(--color-orange);
        margin-left: 30px;
    }

.nav-tabs.testing-result-tabs > li {
    margin: 0px;
    margin-right: 10px;
}

    .nav-tabs.testing-result-tabs > li:last-child {
        margin-right: 0px;
    }

    .nav-tabs.testing-result-tabs > li > a {
        font-family: opensanssemibold;
        color: #fff;
        font-size: 15px;
        padding: 10px 10px;
        margin: 0px;
        border-radius: 0px;
        text-decoration: none;
        outline: 0px;
        border: 0px;
        transition: 0.15s all linear;
        min-width: 115px;
        text-align: center;
        height: unset;
        line-height: unset;
    }

        .nav-tabs.testing-result-tabs > li > a:hover, .nav-tabs.testing-result-tabs > li > a:focus {
            border: 0px;
            background: none;
        }

    .nav-tabs.testing-result-tabs > li.active > a, .nav-tabs.testing-result-tabs > li.active > a:focus, .nav-tabs.testing-result-tabs > li.active > a:hover {
        color: #fff;
        border: 0px;
        background: none;
        font-family: opensanssemibold !important;
    }

.nav-tabs.testing-result-tabs {
    border-bottom: 0px;
    position: absolute;
    left: 0px;
    bottom: 0px;
}

.tab-content .tab-pane {
    padding: 0px;
}

.testing-result-tabs .active-bar {
    width: 0px;
    height: 5px;
    background: #fff;
    position: absolute;
    bottom: 0px;
    left: 0px;
    transition: 0.3s all ease-out, 0.2s width linear;
}

.testing-result-svg .svg-process {
    transform: rotate(-90deg) translate(-184px, 0px);
    transition: all 1s ease-in-out;
}

.testing-result-body {
    padding: 35px 15px;
}

    .testing-result-body .body-cover {
        max-width: var(--max-width);
        margin: auto;
    }

.testing-result-general {
    display: inline-block;
    width: 100%;
    min-height: 480px;
    background: #fff;
    border-radius: 6px;
    padding: 30px 15px;
}

    .testing-result-general .general-title {
        font-family: opensanslight;
        font-size: 20px;
        color: var(--color-default-title);
        margin-bottom: 5px;
        text-align: center;
    }

    .testing-result-general .general-description {
        font-family: opensanslight;
        font-size: 15px;
        color: var(--color-default-title);
        margin-bottom: 40px;
        text-align: center;
    }

        .testing-result-general .general-description .des-number {
            font-family: opensansregular;
        }

    .testing-result-general .general-content {
        display: flex;
    }

.testing-result-percent {
    margin: auto;
    text-align: center;
}

.testing-result-general .general-detail {
    margin: auto;
}

    .testing-result-general .general-detail .detail-item {
        font-family: opensansregular;
        font-size: 13px;
        color: var(--color-default-text);
        margin-bottom: 10px;
    }

    .testing-result-general .general-detail .detail-value {
        font-family: opensanssemibold;
        font-size: 15px;
        margin-left: 5px;
    }

    .testing-result-general .general-detail .detail-icon {
        display: inline-block;
        vertical-align: middle;
        background-image: url('../imgs/learning-icon-bg.svg');
        margin-right: 10px;
    }

        .testing-result-general .general-detail .detail-icon.icon-1 {
            width: 20px;
            height: 25px;
            background-position: 0px -1770px;
        }

        .testing-result-general .general-detail .detail-icon.icon-2 {
            width: 21px;
            height: 17px;
            background-position: 0px -1800px;
        }

        .testing-result-general .general-detail .detail-icon.icon-3 {
            width: 21px;
            height: 17px;
            background-position: 0px -1820px;
        }

        .testing-result-general .general-detail .detail-icon.icon-4 {
            width: 20px;
            height: 20px;
            background-position: 0px -1840px;
        }

        .testing-result-general .general-detail .detail-icon.icon-5 {
            width: 20px;
            height: 20px;
            background-position: 0px -1865px;
        }

@media (max-width: 768px) {
    .testing-result-header-right {
        width: 160px;
    }

    .testing-result-header .testing-result-button.button-ranking {
        margin: 5px 0px;
    }

    .testing-result-header .testing-result-button {
        margin: 5px 0px;
    }

    .testing-result-header .header-cover {
        min-height: 200px;
        margin-top: 30px;
    }

    .testing-result-general {
        margin-bottom: 35px;
    }
}


/* CHART */

.md-result-chart-title {
    font-family: opensanslight;
    font-size: 20px;
    color: #231F20;
    text-align: center;
    margin-bottom: 20px;
}

.md-result-chart-content {
    max-width: 450px;
    margin: 70px auto;
    position: relative;
    height: 310px;
    margin-bottom: 0px;
}

    .md-result-chart-content .md-result-row {
        position: absolute;
        width: calc(100% - 40px);
        height: calc(100% - 50px);
        z-index: 1;
        right: 0px;
        top: 0px;
        display: flex;
        flex-direction: column;
    }

        .md-result-chart-content .md-result-row .row-child {
            display: inline-block;
            background: linear-gradient(to right, #E5E5E5 0px, #E5E5E5 6px, transparent 6px, transparent 10px);
            background-size: 10px 1px;
            background-repeat: repeat no-repeat;
            width: 100%;
            height: 1px;
            margin: auto;
            position: relative;
        }

            .md-result-chart-content .md-result-row .row-child::before {
                content: attr(val);
                font-family: opensanssemibold;
                font-size: 13px;
                color: var(--color-gray);
                position: absolute;
                right: calc(100% + 15px);
                bottom: -3px;
            }

            .md-result-chart-content .md-result-row .row-child:first-child {
                margin-top: 0px;
            }

            .md-result-chart-content .md-result-row .row-child:last-child {
                margin-bottom: 0px;
            }

    .md-result-chart-content .md-result-col {
        position: absolute;
        width: calc(100% - 40px);
        height: 50px;
        z-index: 2;
        right: 0px;
        bottom: 0px;
        display: flex;
    }

        .md-result-chart-content .md-result-col .col-child {
            width: 100%;
            margin: auto;
            font-family: opensanssemibold;
            font-size: 13px;
            color: var(--color-gray);
            text-align: center;
        }

            .md-result-chart-content .md-result-col .col-child.text-black {
                color: var(--color-default-title);
            }

    .md-result-chart-content .md-result-chart {
        position: absolute;
        width: calc(100% - 40px);
        height: calc(100% - 50px);
        z-index: 3;
        right: 0px;
        top: 0px;
        display: flex;
    }

    .md-result-chart-content .md-result-point {
        position: absolute;
        width: calc(100% - 40px);
        height: calc(100% - 50px);
        z-index: 4;
        right: 0px;
        top: 0px;
        display: flex;
    }

        .md-result-chart-content .md-result-point .point-child {
            height: 100%;
            width: 100%;
            margin: auto;
            position: relative;
        }

        .md-result-chart-content .md-result-point .point-item {
            display: inline-block;
            width: 0px;
            height: 0px;
            position: absolute;
            left: 50%;
        }

            .md-result-chart-content .md-result-point .point-item::before {
                content: "";
                display: inline-block;
                width: 15px;
                height: 15px;
                border: 2px solid #fff;
                border-radius: 50%;
                background: #FBC926;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                cursor: pointer;
            }

            .md-result-chart-content .md-result-point .point-item.item-none::before {
                border-color: #FBC926;
                background: #fff;
                cursor: default;
            }

        .md-result-chart-content .md-result-point .point-detail {
            display: inline-block;
            min-width: 60px;
            padding: 2px 10px;
            background: #FCF8EB;
            border: 1px solid #FBC926;
            position: absolute;
            bottom: calc(100% + 15px);
            left: 50%;
            transform: translate(-50%);
            border-radius: 5px;
            cursor: default;
            opacity: 0;
            transition: 0.5s all ease;
        }

        .md-result-chart-content .md-result-point .point-item:hover .point-detail {
            opacity: 1;
        }

        .md-result-chart-content .md-result-point .point-detail::before {
            content: "";
            display: inline-block;
            width: 14px;
            height: 6px;
            border-width: 6px 7px 0px 7px;
            border-style: solid;
            border-color: #FBC926 transparent transparent;
            position: absolute;
            bottom: 0px;
            left: 50%;
            transform: translate(-50%, 100%);
        }

        .md-result-chart-content .md-result-point .point-detail::after {
            content: "";
            display: inline-block;
            width: 14px;
            height: 6px;
            border-width: 6px 7px 0px 7px;
            border-style: solid;
            border-color: #FCF8EB transparent transparent;
            position: absolute;
            bottom: 1px;
            left: 50%;
            transform: translate(-50%, 100%);
        }

        .md-result-chart-content .md-result-point .point-detail p {
            font-family: opensansregular;
            font-size: 14px;
            color: #FFB020;
            margin: 0px;
            text-align: center;
        }

            .md-result-chart-content .md-result-point .point-detail p + p {
                font-family: opensanssemibold;
                margin-top: -5px;
            }

/* END CHART */


/* DETAIL */

.testing-result-list-word {
    margin-left: -15px;
    margin-right: -15px;
}

.testing-result-no-word {
    max-width: 440px;
    margin: 50px auto;
    text-align: center;
    padding: 15px;
}

    .testing-result-no-word .no-word-icon {
        display: block;
        width: 90px;
        height: 90px;
        background: url('../imgs/learning-icon-bg.svg') 0px -1545px;
        margin: 25px auto;
    }

    .testing-result-no-word .no-word-text {
        font-family: opensansregular;
        font-size: 18px;
        color: var(--color-gray);
    }

.testing-result-word-item {
    margin: 0px 15px 30px;
    float: left;
    position: relative;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

    .testing-result-word-item .item-cover {
        position: relative;
        width: 190px;
        height: 230px;
        background: #fff;
        border: 1px solid #E3E4E5;
        border-radius: 6px;
        transition: 0.6s;
        transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
        cursor: pointer;
    }

    .testing-result-word-item.item-green .item-cover {
        border: 0px;
        box-shadow: 0px 0px 10px -1px var(--color-green-bg);
    }

    .testing-result-word-item.item-red .item-cover {
        border: 0px;
        box-shadow: 0px 0px 5px 0px var(--color-wrong);
    }

    .testing-result-word-item.item-flipper .item-cover {
        transform: rotateY(-180deg);
    }

    .testing-result-word-item .item-front {
        position: absolute;
        z-index: 2;
        background: inherit;
        border-radius: inherit;
        padding: 15px;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    .testing-result-word-item .item-back {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        background: inherit;
        border-radius: inherit;
        padding: 15px;
        display: flex;
        transform: rotateY(180deg) translateZ(1px);
        -webkit-transform: rotateY(180deg) translateZ(1px);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    .testing-result-word-item .item-back-cover {
        width: 100%;
        margin: auto;
    }

    .testing-result-word-item .item-sound {
        display: block;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background: url('../imgs/learning-icon-bg.svg') 0px -245px;
        background-color: var(--color-blue-text);
        margin: 0px auto 10px;
        cursor: pointer;
    }

        .testing-result-word-item .item-sound.sound-active {
            animation: 1.5s infinite animateSound;
        }

    .testing-result-word-item .item-example-label {
        font-family: opensansregular;
        font-size: 12px;
        color: #ABABAB;
        text-align: center;
        margin-bottom: 10px;
    }

    .testing-result-word-item .item-example {
        font-family: opensansregular;
        font-size: 13px;
        line-height: 16px;
        color: var(--color-default-text);
        text-align: center;
        margin: 0px;
    }

        .testing-result-word-item .item-example .example-word {
            font-family: opensanssemibold;
            /*background: url('../imgs/icon-underline.svg');
    background-size: 8px 5px;
    background-position: left bottom;
    background-repeat: repeat no-repeat;*/
            padding-bottom: 4px;
        }

    .testing-result-word-item .item-image {
        display: block;
        margin: auto;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        margin-bottom: 15px;
    }

    .testing-result-word-item .item-text {
        font-family: opensanssemibold;
        font-size: 16px;
        line-height: 22px;
        margin-bottom: 10px;
        text-align: center;
        color: var(--color-blue-text);
    }

    .testing-result-word-item.item-green .item-text, .testing-result-word-item.item-red .item-text {
        color: var(--color-default-text);
    }

    .testing-result-word-item .item-text-vi {
        font-family: opensansregular;
        font-size: 13px;
        line-height: 21px;
        margin-bottom: 10px;
        text-align: center;
        color: var(--color-default-text);
    }

    .testing-result-word-item.item-green .item-text-vi, .testing-result-word-item.item-red .item-text-vi {
        color: #ABABAB;
    }

    .testing-result-word-item .item-close {
        display: inline-block;
        width: 15px;
        height: 15px;
        background: url('../imgs/learning-icon-bg.svg') 0px -1640px;
        cursor: pointer;
        position: absolute;
        top: 14px;
        right: 14px;
    }

    .testing-result-word-item .item-tip {
        width: 260px;
        background: #000000;
        border-radius: 10px;
        padding: 20px 30px;
        position: absolute;
        z-index: 10;
        top: 35px;
        left: calc(100% + 15px);
    }

    .testing-result-word-item:nth-of-type(1) {
        z-index: 2;
    }

    .testing-result-word-item .item-tip::before {
        content: "";
        display: inline-block;
        width: 14px;
        height: 30px;
        border-style: solid;
        border-width: 15px 14px 15px 0px;
        border-color: transparent #000 transparent transparent;
        position: absolute;
        right: 100%;
        top: 50%;
        transform: translate(0, -50%);
    }

    .testing-result-word-item .item-tip .tip-title {
        font-family: opensanssemibold;
        font-size: 15px;
        color: #fff;
        margin-bottom: 15px;
    }

    .testing-result-word-item .item-tip .tip-text {
        font-family: opensansregular;
        line-height: 22px;
        font-size: 15px;
        color: #fff;
        margin-bottom: 0px;
    }

#detail {
    max-width: 1100px;
    margin: auto;
}

#comment {
    background: #fff;
    min-height: 400px;
}

    #comment .testing-result-body .body-cover {
        max-width: 875px;
    }

.testing-result-comment-title {
    font-family: opensanslight;
    font-size: 25px;
    color: #000000;
    margin-top: 10px;
    margin-bottom: 30px;
}


/* END DETAIL */

/* Begin MODAL */
@media (min-width: 768px) {
    #modal-message .modal-dialog {
        width: 780px;
        margin-top: 70px;
    }
}

#modal-message .modal-content {
    border-radius: 7px;
    padding: 30px 55px;
    position: relative;
}

.message-left {
    width: 230px;
    padding: 0px 15px;
    float: left;
}

.message-right {
    width: calc(100% - 230px);
    padding-left: 40px;
    padding-top: 15px;
    float: right;
}

.message-left .message-image {
    text-align: center;
    margin-bottom: 20px;
}

    .message-left .message-image img {
        max-width: 200px;
        width: 100%;
    }

.message-title {
    font-family: uvnvanbold;
    font-size: 25px;
    line-height: 30px;
    color: var(--color-result-fail);
    text-align: center;
    margin: 0px;
}

.message-container.message-pass .message-title {
    color: var(--color-blue-text);
}

.message-container.message-excellent .message-title {
    color: #FFC200;
}

.message-container.message-good .message-title {
    color: #71B200;
}

.message-value {
    font-family: opensansregular;
    font-size: 15px;
    line-height: 18px;
    color: var(--color-result-fail);
    margin-bottom: 20px;
    padding-left: 20px;
}

.message-container.message-pass .message-value {
    color: var(--color-blue-text);
}

.message-container.message-excellent .message-value {
    color: #FFC200;
}

.message-container.message-good .message-value {
    color: #75BA24;
}

.message-value .message-percent {
    font-family: opensanssemibold;
    font-size: 40px;
    line-height: 35px;
    margin-left: 15px;
    vertical-align: bottom;
}

.message-detail {
    min-height: 95px;
    padding: 15px 20px;
    border-radius: 5px;
    background: #FFE9E9;
    margin-bottom: 15px;
    display: flex;
}

.message-container.message-pass .message-detail {
    background: #E2F4F7;
}

.message-container.message-excellent .message-detail {
    background: #FFF2CF;
}

.message-container.message-good .message-detail {
    background: #E3FFDE;
}

.message-detail .detail-cover {
    width: 100%;
    margin: auto;
}

.message-detail .detail-item {
    font-family: opensansregular;
    font-size: 14px;
    line-height: 21px;
    color: #58595B;
    margin: 0px;
}

.message-detail .text-fail {
    font-family: opensanssemibold;
    color: var(--color-result-fail);
}

.message-detail .text-pass {
    font-family: opensanssemibold;
    color: var(--color-blue-text);
}

.message-detail .text-blue-bold {
    font-family: opensansbold;
    color: var(--color-blue-text);
}

.message-button {
    text-align: center;
}

    .message-button .button-item {
        display: inline-block;
        width: 150px;
        height: 48px;
        line-height: 48px;
        text-align: center;
        text-decoration: none;
        border-radius: 30px;
        color: #fff;
        margin: 10px;
        font-family: opensanssemibold;
        font-size: 13px;
        background: var(--color-red);
    }

        .message-button .button-item.button-retest {
            background: var(--color-green-bg);
        }

@media (max-width: 768px) {
    .message-left {
        width: 100%;
        float: none;
    }

    .message-right {
        width: 100%;
        padding-left: 0px;
        float: none;
    }

    #modal-message .modal-content {
        padding: 30px;
    }
}


/* End MODAL */