@font-face {
    font-family: 'UTMEdwardian';
    src: url('public/template/frontend/template/ve-moi/font/UTMEdwardian.ttf') format('truetype');
}

@font-face {
    font-family: 'UTMEdwardianB';
    src: url('public/template/frontend/template/ve-moi/font/UTMEdwardianB.ttf') format('truetype');
}

/* @font-face {
    font-family: 'UTMEdwardianB';
    src: url('public/template/frontend/template/ve-moi/font/UVNPhuongTay.TTF') format('truetype');
} */

body {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: #c94b4b;
    background: -webkit-linear-gradient(to right, #4b134f, #c94b4b);
    background: linear-gradient(to right, #4b134f, #c94b4b);
    font-family: Inter, 'Segoe UI', sans-serif;
}

.flex {
    display: flex;
}

.flex-column {
    flex-direction: column;
}

.justify-center {
    justify-content: center;
}

.align-center {
    align-items: center;
}

.input-row {
    display: flex;
}

.input-row>.row-name {
    padding: 20px 0;
    width: 600px;
}

#id_input_name {
    font-family: 'UTMEdwardianB';
    outline: none;
    padding: 0 20px;
    font-size: 24px;
    margin-right: 5px;
    width: 80%;
}

#id_upload {
    width: 20%;
}

.canvas-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#id_main_canvas {
    width: 100%;
    height: auto;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.horizontal {
    margin-top: 35px;
}

#id_width_pos {
    width: 801px;
    margin-bottom: 10px;
}

#label-zoom,
#label-width,
#label-height {
    font-size: 15px;
    text-transform: uppercase;
    color: #fff;
}

.download-btn>#download {
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 50px;
    width: fit-content;
    background: #159957;
    background: -webkit-linear-gradient(to right, #155799, #159957);
    background: linear-gradient(to right, #155799, #159957);
}



.upload_btn {
    width: 25%;
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    border-radius: 100px;
    background: #642B73;
    background: -webkit-linear-gradient(to right, #C6426E, #642B73);
    background: linear-gradient(to right, #C6426E, #642B73);
    text-align: center;
    cursor: pointer;
    padding: 0.9rem;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}

.hidden_img {
    display: none;
}

.vertical_silder {
    height: 100%;
    -webkit-appearance: slider-vertical;
    margin-bottom: 10px;
}

@media (max-width: 3000px) {
    .canvas-row>#id_main_canvas {
        width: 100% !important;
    }

    #id_width_pos {
        width: 1070px;
    }
}

@media (max-width: 1920.1px) {
    .canvas-row>#id_main_canvas {
        width: 60% !important;
    }

    #id_width_pos {
        width: 801px;
    }
}

@media (max-width: 1399.98px) {
    .canvas-row>#id_main_canvas {
        width: 60% !important;
    }
}

@media (max-width: 1199.98px) {
    .canvas-row {
        flex-direction: column;
    }

    .canvas-row>#id_main_canvas {
        width: 100% !important;
        order: 0;
    }

    .canvas-row>.left {
        margin-top: 2rem;
        order: 1
    }

    .canvas-row>.right {
        margin-top: 2rem;
        order: 2
    }

    .vertical_silder,
    #id_width_pos {
        width: 75%;
    }

    .horizontal {
        width: 100%;
        margin-top: 2rem;
    }

    .download-btn>#download {
        margin-top: 2rem;
    }
}

@media (max-width: 575.98px) {
    .container {
        padding-bottom: 1rem;
    }

    .canvas-row {
        flex-direction: column;
    }

    .canvas-row>#id_main_canvas {
        width: 100% !important;
        order: 0;
    }

    .canvas-row>.left {
        margin-top: 1rem;
        order: 1
    }

    .canvas-row>.right {
        margin-top: 1rem;
        order: 2
    }

    .vertical_silder,
    #id_width_pos {
        width: 75%;
    }

    .horizontal {
        width: 100%;
        margin-top: 1rem;
    }

    .download-btn>#download {
        margin-top: 1rem;
    }
}

.info_input {
    border: none;
    padding: 0 6px;
    border-radius: 100px;
    font-size: 16px;
    height: 40px;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
    margin-right: 10px;

}

.full_name {
    width: 100%;
}

#id_input_facebook,
#id_input_phone,
#id_input_area {
    width: 100%;
    /* Đặt chiều rộng là 100% cho 3 ô mới */
}

.input-row {
    flex-direction: column;
    /* Đổi hướng của flex container thành cột */
    align-items: center;
    /* Căn giữa các ô trong cột */
}

#id_input_name,
#id_input_facebook,
#id_input_phone,
#id_input_area {
    width: 100%;
    /* Đặt chiều rộng là 100% cho tất cả các ô trong cột */
    margin-bottom: 10px;
    /* Tạo khoảng cách giữa các ô */
}

@media (max-width: 575.98px) {
    .input-row {
        flex-direction: column;
        align-items: flex-start;
        /* Căn trái các ô trong cột */
    }

    #id_input_name,
    #id_input_facebook,
    #id_input_phone,
    #id_input_area {
        width: 100%;
        margin-bottom: 10px;
    }
}

/*dropdow*/

/* CSS cho dropdown */
#backgroundDropdown {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    color: #333;
}

/* CSS cho các tùy chọn trong dropdown */
#backgroundDropdown option {
    background-color: #fff;
    color: #333;
}


/* CSS cho dropdown và nút upload trên điện thoại */
@media (max-width: 575.98px) {

    #backgroundDropdown,
    .upload_btn {
        width: 100%;
        margin-top: 10px;
        /* Khoảng cách giữa dropdown và nút upload */
    }
}



a:link,
a:visited {
    background-color: #037011;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 10px;
    border-radius: 10px;
}

a:hover,
a:active {
    background-color: red;
}