@charset "utf-8";

:root {
    --animate-delay: 0.25s;
}

body {
    height: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    background-color: var(--color-bg-primary);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    overflow: auto;
    transition: all;
}

p {
    color: #041020;
}

/* ---------------------------------------- */
.Wrapper-content {
    background-image: url(../img/top_bg.gif);
    background-size: 15px;
    height: 100%;
    min-height: calc(100vh - 60px);
    display: flex;
    align-items: start;
    flex-direction: column;
}

.form-border .form-label {
    font-size: 0.9375rem;
    font-weight: 500;
    color: #041020;
}

.top-margin {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.content_bgc_1 {

    /* margin-top: -7vw; */
    background: #fffef9 url(../images/decorate.webp) repeat-y top center;
    background-size: 110% auto;
    position: relative;

}

.form-border {
    /* border: #c2c2c2 1px solid; */
    padding: 1rem 0.9375rem;
    background: linear-gradient(to top, white 0%, #6c9e7a17 100%);
    border-right: solid 2px #6c9e7a;
    border-left: solid 2px #6c9e7a;
    border-bottom: solid 2px #6c9e7a;
    border-bottom-right-radius: .25rem;
    border-bottom-left-radius: .25rem;
}

.bi {
    font-size: 1.125rem;
}

.form-control,
.form-select {
    font-size: 0.9375rem;
}

.form-border ol li {
    color: #061023;
    font-size: 0.9375rem;
    padding: 0.25rem 0;
}

.form-control:focus {
    border-color: transparent !important;
    outline: 0;
    box-shadow: none !important;
}

.form-border button {

    font-size: 0.9375rem;

}

.form_btn_1 {
    background-color: #ffc100 !important;
    color: white;
    font-weight: bold;
    border: none !important;
}

.form_btn_1:focus {

    border: none;
}

.form-border span,
.form-border label,
.form-border input {
    font-size: 0.9375rem;
}


.form-border p {
    font-size: 0.9375rem;
}


.form_btn_1:hover {
    color: white !important;
}

.link-button {
    width: 100%;
    background-color: #fff;
    opacity: 1;
    border: 1px solid #699a76;
    border-radius: 0.375rem;
    padding: 0.375rem 0.75rem;
    text-align: center;
    font-size: 16px;
    color: #326149;
    font-weight: 600;
    transition: all ease-in-out .2s;
}

.preview-zone {
    /* width: 100%; */
    border: 1px solid transparent;
    background-color: #0000001a;
    border-radius: 0.375rem;
    padding: 0.375rem 0.75rem;
    text-align: center;
    font-size: 16px;
    color: #04102071;
    font-weight: 600;
}

.link-button[class*="yellow_"] {
    background-color: #fff000;
}

.link-button:hover {
    opacity: .8;
}

.col-group-video-card_2 .link-button_w {
    opacity: 1;
    margin: 9px 0 0;
    border-radius: .25rem;
    padding: 0.75rem 1rem;
    background-color: #e9493f;
    text-align: center;
    font-size: 18px;
    color: #fff;
    font-weight: 500;
    transition: all ease-in-out .2s;
}

.col-group-video-card_2 .link-button_w.click_ {
    opacity: .8;
    background-color: #c2c2c2;
    color: #000;
}

.col-group-video-card_2 .link-button_w:hover {
    transform: unset;
    opacity: .8;
}

.Wrapper-toeic-c .link-button_more {
    opacity: 1;
    border-radius: 50rem;
    padding: 9px 20px;
    background-color: #fff000;
    text-align: center;
    font-size: 18px;
    color: #041020;
    font-weight: 600;
    transition: all ease-in-out .2s;
}

.Wrapper-toeic-c .link-button_more:hover {
    opacity: .87;
}

.link-button_ok {
    opacity: 1;
    width: 100%;
    border-radius: 25rem;
    padding: 9px 20px;
    background-color: #112c61;
    text-align: center;
    font-size: 16px;
    border: 1px solid #112c61;
    color: #fff;
    font-weight: 500;
    transition: all ease-in-out .2s;
}

.link-button_ok:hover {
    opacity: .87;
    color: #fff;
}

.form-right-title p {
    font-size: 1.125rem;
    color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
    margin: 0;
}

.form-left-title {
    background-color: #326149;

}

.form-right-title {
    background-color: #699a76;

}

.feedback-background {
    aspect-ratio: 16/9;
    max-width: 100%;
    border-radius: .25rem;
    margin-bottom: 3rem
}

.Wrapper-content:has(.top-margin-2) {
    align-items: center;
    flex-direction: unset;
}

.gotoindex,
.gotoindex:active {
    top: 363px;
    left: calc(50% - 313px);
    background: #fd816d;
    border: unset;
    font-size: 0.9375rem;
}

.gotoindex:hover {
    background: #ee725f;
    color: #fff;
}

.Wrapper-content .gotoindex:focus {
    background: #ee725f;
    color: #fff;
}

/* -------------------------- */
.modal-header.kong {
    background-color: #fd4b6e;
}

.modal-header.kong p {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
}

.modal-body.kong .h3 {
    color: #fd4b6e;
    font-weight: 600;
    font-size: 0.9375rem;
}

.modal-body.kong p {
    color: #fd4b6e;
    font-size: 16px;
}

.modal-body.kong li {
    color: #061023;
    font-size: 0.9375rem;
}

.modal-body.kong .coupon_ {
    font-size: 18px;
    padding: 0 3px;
}

@media (max-width: 1399.98px) {

    .gotoindex,
    .gotoindex:active {
        top: 313px;
        left: calc(50% - 269px);
        background: #fd816d;
        border: unset;
    }

}

@media (max-width: 1199.98px) {

    .gotoindex,
    .gotoindex:active {
        top: 325px;
        left: calc(50% - 285px);
        background: #fd816d;
        border: unset;
    }
}

@media (min-width: 992px) {}

@media (max-width: 991.98px) {

    .gotoindex,
    .gotoindex:active {
        top: 290px;
        left: calc(50% - 257px);
        background: #fd816d;
        border: unset;
    }

}

@media (max-width: 767.98px) {

    .gotoindex,
    .gotoindex:active {
        top: 215px;
        left: calc(50% - 190px);
        background: #fd816d;
        border: unset;
    }

}

@media (max-width:575.98px) {
    .Wrapper-content {
        background-image: url(../img/top_bg.gif);
        background-size: 15px;
        height: 100%;
        min-height: auto;
        display: flex;
        align-items: start;
        flex-direction: column;
    }

    .feedback-background {
        aspect-ratio: 9 / 13;
        max-width: 100%;
        border-radius: .25rem;
        margin-top: .8rem;
        margin-bottom: .8rem;
    }

    .top-margin {
        margin-top: 0.9375rem;
    }

    .gotoindex,
    .gotoindex:active {
        top: 78vw;
        left: 16vw;
        background: #fd816d;
        border: unset;
    }
}

@media (max-width:360px) {}