﻿.survey-detail {
    width: 100%;
    float: left;
}

.survey-content {
    width: 80%;
    float: left;
    background-color: white;
    margin: 0 10%;
    padding: 10px;
    padding-bottom: 30px;
}

    .survey-content h2 {
        width: 100%;
        float: left;
        color: #005f9e;
        text-align: center;
        margin-bottom: 50px;
        text-transform: uppercase;
        font-weight: bold;
        font-size: 40px;
        line-height: 40px;
        margin-bottom: 20px;
    }

.survey-title {
    padding: 0 0 10px 0;
    color: #005f9e;
    z-index: 2;
    font-size: 18px;
    font-weight: bold;
    text-align: left;
    line-height: 1.2;
    width: 100%;
    float: left;
}

.survey-info {
    font-weight: bold;
    width: 100%;
    float: left;
}

.survey-register {
    width: 100%;
    float: left;
    margin-top: 0px;
}

.survey-warraper {
    width: 100%;
    float: left;
    border: 1px solid #118acb;
    border-radius: 5px;
    padding: 10px;
}

/*Start Thông tin khảo sát*/
.khao-sat {
    min-height: 250px;
    margin-top: 10px;
    display: flex;
}

    .khao-sat .khao-sat-ul li {
        margin-top: 10px;
    }

    .khao-sat .flex-box {
        flex: 1;
    }

    .khao-sat .btn-infor-survey {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
    }

        .khao-sat .btn-infor-survey .btn-md {
            margin-bottom: 10px;
        }

.search-survey {
    margin: 20px;
}

@media only screen and (min-width: 651px) and (max-width: 1170px) {
    .khao-sat .btn-infor-survey {
        flex-direction: column-reverse;
    }
}

@media only screen and (min-width: 340px) and (max-width: 650px) {
    .khao-sat {
        display: block;
    }

        .khao-sat .flex-box {
            width: 100%;
            margin-top: 20px;
        }

        .khao-sat .btn-infor-survey {
            flex-direction: column-reverse;
        }
}
/*Start Trang chủ List danh sách khảo sát*/
.list-survey {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

    .list-survey .kekhaiblock {
        width: 25%;
        background: url(/Content/kekhaicds.svg) no-repeat;
        background-size: 42%;
        background-position: right;
        background-color: white !important;
        border-radius: 12px;
        margin: 6px;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
        padding: 25px;
        border-top: 5px solid #4179c6;
    }

    .list-survey .img-bc {
        width: 100%;
        height: 150px;
        margin: 10px 0;
    }

        .list-survey .img-bc img {
            width: 100%;
            height: 100%;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }

@media only screen and (min-width: 468px) and (max-width: 768px) {
    .list-survey .kekhaiblock {
        flex: 1;
        padding: 10px;
    }
}

@media only screen and (min-width: 340px) and (max-width: 467px) {

    .list-survey .kekhaiblock {
        width: 100%;
        padding: 10px;
    }

    .list-survey .img-bc {
        width: 70%;
    }
}

/*Start Join Survey*/
.container .survey-detail {
    float: none;
}

    .container .survey-detail .survey-breadcrumb .title-survey {
        text-align: center;
        margin: 10px;
        font-size: 25px;
    }

.container .survey-detail {
    width: 100%;
    /*float: left;*/
    background-color: #eee;
    margin-bottom: 10px;
}

    .container .survey-detail .survey-content {
        width: 100%;
        background-color: white;
        font-size: 15px;
        display: flex;
        justify-content: center; /* Căn giữa theo chiều ngang */
        align-items: center; /* Căn giữa theo chiều dọc */
        padding: 0;
        /*height: 100%;*/
        margin: 0px 0px 30px 0px;
        float: none;
    }

    .container .survey-detail .survey-list {
        margin-bottom: 40px;
    }


@media only screen and (min-width: 340px) and (max-width: 900px) {
    .container .survey-detail .survey-breadcrumb .title-survey {
        font-size: 20px;
    }

    .container .survey-detail .button-back {
        flex-direction: column-reverse;
    }

        .container .survey-detail .button-back .flex-box {
            width: 100%;
            margin-bottom: 20px;
        }
}
