@charset "utf-8";

/* CSS Document */
:root {
    --font-family-text: "Open Sans", sans-serif;
    --font-family-title: "Open Sans", sans-serif;
    --font-family-kieua: 'Festive', cursive;
    --font-family-kieub: 'Yeseva One', cursive;
    --font-family-kieuc: 'Charm', cursive;
    --small-size-a: 1vw;
    --small-size-b: 1.1vw;
    --text-size-a: 1.2vw;
    --text-size-b: 1.3vw;
    --title-size-a: 1.4vw;
    --title-size-b: 1.5vw;
    --big-size-a: 2vw;
    --big-size-b: 2.8vw;
    --big-size-c: 3.6vw;

    --color-texta: white;
    --color-textb: black;
    --color-textc: black;
    --color-textd: black;

    --color-text_a: red;
    --color-text_a_hover: red;

    --color-text_title: black;
    --color-text_li_hover: rgb(255, 102, 0);
    --color-text_menudd: rgb(255, 255, 255);

    --background-color_menu: rgba(255, 255, 255, 0);
    --background-color_menudd: rgba(0, 0, 0, 1);

    --background-color_footer: rgba(0, 0, 0, 1);
    --background-color_header: rgba(0, 0, 0, 1);
    --background-color_content: rgba(0, 0, 0, 1);

    --background-color_li: rgb(255, 102, 0);
    --background-color_li_hover: rgb(255, 255, 255);

    --background-color_bordera: rgb(255, 102, 0);
    --background-color_borderb: rgb(255, 102, 0);
    --background-color_borderc: rgb(255, 102, 0);

    --background-color_thea: rgb(255, 102, 0);
    --background-color_theb: rgb(255, 102, 0);
    --background-color_thec: rgb(255, 102, 0);
    --background-color_thed: rgb(255, 102, 0);
}

* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

/*--------------------định dạng bo cuc--------------------*/
#bocuc {
    width: 100%;
    display: grid;
    grid-template-columns: 100%;
    overflow: hidden;
}

#header {
    display: grid;
    grid-template-columns: 100%;
}

#content {
    display: grid;
    grid-template-columns: 100%;
}

#footer {
    display: grid;
    grid-template-columns: 100%;
}

/*--------------------display hiển thị nội dung----------------*/
.display_flex_cc {
    display: flex;
    justify-content: center;
    align-items: center;
}

.display_flex_cs {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.display_flex_ce {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.display_flex_sc {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.display_flex_ec {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/*
--------------------------font style-----------------------------
font-family: 'Lobster', cursive;
font-family: "Open Sans", sans-serif;
font-family: 'Roboto Slab', serif;
font-family: 'Muli', sans-serif;
font-family: 'Festive', cursive;
font-family: 'Yeseva One', cursive;
font-family: 'Charm', cursive;
*/
.font_cn {
    font-size: var(--small-size-a);
    font-family: var(--font-family-text);
}

.font_cn1 {
    font-size: var(--small-size-b);
    font-family: var(--font-family-text);
}

.font_ct {
    font-size: var(--text-size-a);
    font-family: var(--font-family-text);
}

.font_ct1 {
    font-size: var(--text-size-b);
    font-family: var(--font-family-text);
    font-weight: bold;
}

.font_cl {
    font-size: var(--title-size-a);
    font-family: var(--font-family-text);
}

.font_cl2 {
    font-size: var(--title-size-b);
    font-family: var(--font-family-text);
}

.font_k {
    font-size: var(--big-size-b);
    font-family: var(--font-family-kieua);
}

.font_k1 {
    font-size: var(--big-size-b);
    font-family: var(--font-family-kieub);
}

.font_k2 {
    font-size: var(--big-size-b);
    font-family: var(--font-family-kieuc);
}

/*---------------------------------------input-----------------------------------------*/
.input_submit {
    outline: none;
    text-outline: none;
    background-color: rgba(0, 153, 0, 1);
    color: rgba(255, 255, 255, 1);
    border: none;
    cursor: pointer;
    padding: 0.6vw 1vw 0.6vw 1vw;
    width: -webkit-fill-available;
    width: -moz-fill-available;
    width: -o-fill-available;
}

.input_text {
    padding: 0.6vw;
    width: 100%;
    border: 0.1vw solid rgba(153, 153, 153, 0.6);
}

/*---------------------------------------image-----------------------------------------*/
.image_full_width {
    width: 100%;
    height: auto;
}

.image_background_resize {
    background-image: none;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.image_background_resizec {
    background-image: none;
    background-position: left;
    background-repeat: no-repeat;
    background-size: contain;
}

/*---------------------------------------button-----------------------------------------*/
.button_login {
    padding: 0.5vw 1vw 0.5vw 1vw;
    border-radius: 0.2vw;
    background-color: rgba(51, 153, 204, 1);
    color: white;
}

.button_login:hover {
    background-color: var();
    cursor: pointer;
    transition-duration: 1s;
}

.button_register {
    padding: 0.5vw 1vw 0.5vw 1vw;
    border-radius: 0.2vw;
    margin-right: 1vw;
}

/*---------------------------------------scrool-----------------------------------------*/
#cuon::-webkit-scrollbar {
    width: 6px;
    background-color: rgb(60, 64, 154);
}

#cuon::-webkit-scrollbar-thumb {
    background-color: rgba(251, 204, 19, 1);

}



/*------------------------------Ipad dọc(768 x 1024)---------------------------------------------------------*/
@media screen and (max-width: 1024px) {
    :root {
        --small-size-a: 1vw;
        --small-size-b: 1.5vw;
        --text-size-a: 1.7vw;
        --text-size-b: 2.4vw;
        --title-size-a: 4.8vw;
        --title-size-b: 5.2vw;
        --big-size-a: 2.6vw;
        --big-size-b: 2.6vw;
        --big-size-c: 2.2vw;
    }

    input[type=text],
    input[type=date],
    input[type=submit],
    input[type=number] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    .fix_you iframe {
        width: 100%;
        height: 40vh;
    }

    .fix_you img {
        width: 100% !important;
        height: auto !important;
    }

}

/*--------------------Di động----------------------------------------------------------------------------------*/
@media screen and (max-width: 780px) {
    :root {
        --small-size-a: 3vw;
        --small-size-b: 3.2vw;
        --text-size-a: 3.6vw;
        --text-size-b: 3.8vw;
        --title-size-a: 4.8vw;
        --title-size-b: 5.2vw;
        --big-size-a: 2.6vw;
        --big-size-b: 2.6vw;
        --big-size-c: 2.2vw;
    }

    input[type=text],
    input[type=date],
    input[type=submit],
    input[type=number] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    .fix_you iframe {
        width: 100%;
        height: 40vh;
    }

    .fix_you img {
        width: 100% !important;
        height: auto !important;
    }

    .input_submit {
        outline: none;
        text-outline: none;
        background-color: rgba(0, 153, 0, 1);
        color: rgba(255, 255, 255, 1);
        border: none;
        cursor: pointer;
        padding: 2.6vw 3vw 2.6vw 3vw;
        width: -webkit-fill-available;
        width: -moz-fill-available;
        width: -o-fill-available;
    }

    .input_text {
        padding: 1.6vw;
        width: 100%;
        border: 0.1vw solid rgba(153, 153, 153, 0.6);
    }

}