@charset "utf-8";

/* @Media */
@media only screen and (min-width: 1000px){}
/* ค่าความกว้างต้ำที่สุดที่สามารถใช้ css นี้ได้ คือ 1000px */
@media only screen and (max-width: 1000px){}
/* ค่าความกว้างมากที่สุดที่สามารถใช้ css นี้ได้ คือ 1000px */
@media only screen and (min-width: 400px) and (max-width: 600px){}
/* ค่าความกว้างระหว่าง 400px ถึง 600px ที่สามารถใช้ css นี้ได้ */

body{
    background: #fff;
    font-family: 'Prompt', sans-serif;
    color: #333;
}
    /* Body padding top
    ปรับขอบด้านบนตามขนาดความสูงของ navigate  */
    @media only screen and (min-width: 900px){
    }
a{
    color: #333;
}

/* Image Responsive */
.img_1200,.img_1100,.img_1000,.img_900,.img_800,.img_700,
.img_600,.img_500,.img_400,.img_300,.img_200,.img_100{
    display: block;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    width: 100% !important;
    background: #078588;
}
    .img_1200{ max-width: 1200px }
    .img_1100{ max-width: 1100px }
    .img_1000{ max-width: 1000px }
    .img_900{ max-width: 900px }
    .img_800{ max-width: 800px }
    .img_700{ max-width: 700px }
    .img_600{ max-width: 600px }
    .img_500{ max-width: 500px }
    .img_400{ max-width: 400px }
    .img_300{ max-width: 300px }
    .img_200{ max-width: 200px }
    .img_100{ max-width: 100px }

/* Display None */
.none{
    display: none !important;
}

/* Container */
.container{
    display: block;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    width: 100%;
    /* ตั้งค่าความกว้างสูงสุดของหน้าเว็บ */
    max-width: 1000px;
    max-width: 1200px;
    margin: 0 auto;
    /* ตั้งค่าระยะห่างของขอบจอ */
    padding: 0 20px;

    transition: filter 0.1s linear;
}
/* Space */
.space{
    display: block;
    height: 30px;
    padding: 10px 0px;
}
.space_10,
.space_20,
.space_30{
    display: block;
    height: 10px;
    padding: 0px;
}
    .space_20{ height: 20px }
    .space_30{ height: 30px }
.number{
    display: inline-block;
    width: 30px;
    height: 30px;
    background: #2ea061;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    color: #fff;
}
.number-small{
    display: inline-block;
    vertical-align: top;
    width: 20px;
    height: 20px;
    background: #2ea061;
    margin-top: 5px;
    margin-right: 5px;
    border-radius: 50%;
    font-family: 'prompt';
    font-size: 1.6rem;
    text-align: center;
    line-height: 21px;
    color: #fff;
}
    .number-black{
        background: #555;
        color: #fff !important;
    }
    .number-gray{
        background: #b1b1b1;
        color: #fff;
    }
    .number-purple{
        background: #75668d;
    }
    .number-blue{
        background: #4391ac;
    }


/* LINK */
.link{
    display: inline-block;
    vertical-align: top;
    width: 30px;
    height: 30px;
    background-image: url('../img/ico_link.png');
    background-size: 30px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}


/* Checkbox */
.checkbox{
    display: inline-block;
}
.checkbox-icon{
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
    width: 30px;
    height: 30px;
    background: #aaa;
    border: 5px solid #c7c7c7;
    border-radius: 10px;
    transition: background 0.3s ease;
}
    .checkbox-icon:hover{
        background: #999;
    }
    .checkbox .active{
        background: #2ea061;
    }
    .checkbox .active_purple{
        background: #75668d;
    }
.checkbox-text{
    display: inline-block;
}



/* FORM */
.form{
    display: block;
    max-width: 640px;
    margin: 0 auto;
    padding: 30px 10px;
}
    .form-no_padding{
        padding: 0px;
    }
.form-admin{
    font-family: 'prompt_regular';
    color: #39b1bd;
}
/* Form Title */
.form-title{
    display: block;
    box-sizing: border-box;
    max-width: 1000px;
    margin: 20px auto 10px;
    padding: 0px 10px;
    font-family: 'prompt_medium';
    font-size: 2.2rem;
}
    .form-title span{
        font-family: 'prompt';
        font-size: 1.8rem;
    }
/* Form Row */
.form-row{
    display: block;
    padding-bottom: 15px;
}
    .form-row_no_padding{
        padding-bottom: 0px;
    }
/* Form Text */
.form-text{
    display: block;
    padding: 5px 0px;
}
/* Form Tab */
.form-tab{
    display: block;
    box-sizing: border-box;
    padding: 5px 0px 0px;
}
.form-tab_scoll{
    display: block;
    overflow-x: scroll;
    width: 100%;
    white-space: nowrap;
}
    .form-tab_scoll::-webkit-scrollbar{ width: 0px; height: 0px; } /* Scroll bar */
    .form-tab_scoll::-webkit-scrollbar-track{ background: #333 } /* Scroll BG */
    .form-tab_scoll::-webkit-scrollbar-thumb{ background: #44b576 } /* Scroll Tab */
.form-tab_wrap{
    display: block;
    border-bottom: 1px solid #ccc;
}
.form-tab_button{
    cursor: pointer;
    display: inline-block;
    background: #ddd;
    margin-bottom: -1px;
    padding: 0px 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    /* font-size: 1.8rem; */
    user-select: none;
    transition: background 0.3s ease;
}
    .form-tab_button:hover{
        background: #ccc;
    }
    .form-tab_wrap .active{
        vertical-align: bottom;
        background: #fff;
        padding: 5px 15px 0px;
        border-bottom: 1px solid #fff;
        font-family: 'prompt_medium';
    }
.form-tab_view{
    display: block;
    box-sizing: border-box;
    padding: 10px 0px;
}
/* Form Wrap */
.form-wrap{
    display: block;
    box-sizing: border-box;
    background: #fff;
    margin-top: 10px;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1);
}
.form-space{
    display: block;
    height: 5px;
}
.form-delimiter {
    opacity: 0.5;
    display: block;
    width: 100%;
    height: 1px;
    margin: 15px 0px;
    background-color: #75668d;
    background-image: url('../img/delimiter-desh_white.png');
    background-repeat: repeat;
}
/* Form Dialog */
.form-dialog{
    overflow: hidden;
    /* display: inline-block; */
    display: none;
    box-sizing: border-box;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 999;
    width: 300px;
    background: #fff;
    margin-top: -90px;
    margin-left: -150px;
    padding: 10px 0px 0px;
    border-radius: 15px;
    box-shadow: 0px 3px 15px rgb(0 0 0 / 35%);
}
.form-dialog_icon{
    display: inline-block;
    vertical-align: middle;
    width: 80px;
    height: 80px;
    padding: 10px 0px 0px 10px;
}
.form-dialog_text{
    display: inline-block;
    box-sizing: border-box;
    vertical-align: middle;
    width: calc( 100% - 100px );
    padding: 10px 15px 0px 5px;
    text-align: left;
}
.form-dialog_title{
    display: block;
    font-family: 'prompt_regular';
    font-size: 1.8rem;
    line-height: 26px;
    color: #333;
}
.form-dialog_des{
    display: block;
    padding-top: 5px;
    font-size: 1.6rem;
    line-height: 22px;
    color: #777;
}
.form-dialog_choice{
    display: block;
    padding-top: 10px;
}
.form-dialog_choice_confirm{
    cursor: pointer;
    display: inline-block;
    width: 60%;
    background: #369697;
    padding: 10px 0px;
    text-align: center;
    color: #fff;
}
.form-dialog_choice_cancel{
    cursor: pointer;
    display: inline-block;
    width: 40%;
    background: #eee;
    padding: 10px 0px;
    text-align: center;
    color: #555;
}
/* Form Dialog Row */
.form-dialog_row{
    /* display: block; */
    display: none;
    padding: 10px 10px 20px;
    text-align: center;
}
.form-dialog_row_text{
    display: block;
}
.form-dialog_row_confirm{
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
    background: #ec5858;
    margin-top: 5px;
    padding: 0px 10px;
    border-radius: 5px;
    font-family: 'prompt';
    text-align: center;
    line-height: 30px;
    color: #fff;
    transition: all 0.3s ease;
}
    .form-dialog_row_confirm:hover{
        background: #d33939;
    }
.form-dialog_row_cancel{
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
    background: #eee;
    margin-top: 5px;
    padding: 0px 10px;
    border-radius: 5px;
    font-family: 'prompt';
    text-align: center;
    line-height: 30px;
    transition: all 0.3s ease;
}
    .form-dialog_row_cancel:hover{
        background: #ddd;
    }
/* Form Add */
.form-add{
    display: block;
    text-align: right;
}
.form-add_button{
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    background: #75668d;
    padding: 0px 10px;
    border-radius: 5px;
    font-size: 1.8rem;
    color: #fff;
    transition: all 0.3s ease;
}
    .form-add_button:hover{
        background: #605375;
    }
/* Form Delete */
.form-delete{
    /* display: block; */
    display: none;
    position: relative;
    text-align: right;
}
    .form-delete_hide{
        cursor: pointer;
        display: inline-block;
        vertical-align: middle;
        position: absolute;
        top: 5px;
        left: 0px;
        padding: 0px 3px;
        border-radius: 5px;
        font-size: 1.8rem;
        color: #555;
        transition: all 0.3s ease;
    }
    .form-delete_arrow{
        display: inline-block;
        vertical-align: middle;
        width: 20px;
    }
    .form-delete_button{
        cursor: pointer;
        display: inline-block;
        vertical-align: middle;
        background: #eee;
        padding: 0px 10px;
        border-radius: 5px;
        font-size: 1.8rem;
        color: #222;
        transition: all 0.3s ease;
    }
    .form-delete_button:hover{
        background: #ec5858;
        color: #fff;
    }
/* Form Footer */
.form-footer{
    display: block;
    box-sizing: border-box;
    padding: 10px 20px;
    text-align: center;
}
.form-footer_des{
    display: block;
    font-size: 1.8rem;
    text-align: center;
    color: #555;
}
.form-footer_cancel{
    display: inline-block;
    font-family: 'prompt_medium';
    font-size: 2rem;
    transition: color 0.3s ease;
}
    .form-footer_cancel:hover{
        color: #ff5d5d;
    }
.form-footer_dialog{
    display: inline;
    cursor: pointer;
    font-family: 'prompt_medium';
    font-size: 2rem;
    color: #222;
}
/* Form Icon */
.form-icon{
    display: block;
    padding-top: 15px;
    text-align: center;
}
.form-icon_img{
    display: inline-block;
    width: 200px;
}
.form-icon_text{
    display: block;
    padding-top: 5px;
}
.form-icon_text_name{
    display: block;
    font-family: 'prompt_medium';
    font-size: 2.2rem;
    line-height: 24px;
    color: #333;
}
.form-icon_text_des{
    display: block;
    line-height: 24px;
    font-size: 1.8rem;
    color: #777;
}
.form-icon_del{
    cursor: pointer;
    display: inline-block;
    background: #75668d;
    padding: 2px 10px;
    border-radius: 5px;
    font-family: 'prompt';
    font-size: 1.8rem;
    color: #fff;
    transition: all 0.3s ease;
}
    .form-icon_del:hover{
        background: #605375;
    }
/* Form Icon Dialog */
.form-icon_dialog{
    display: block;
    box-sizing: border-box;
    /* max-width: 300px; */
    margin: 10px auto 0px;
    background: #eee;
    padding: 10px 0px 13px;
    border-radius: 15px;
    text-align: center;

}
.form-icon_dialog_text{
    display: block;
}
.form-icon_dialog_confirm{
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
    background: #ec5858;
    margin-top: 5px;
    padding: 0px 10px;
    border-radius: 5px;
    font-family: 'prompt';
    text-align: center;
    line-height: 30px;
    color: #fff;
    transition: all 0.3s ease;
}
    .form-icon_dialog_confirm:hover{
        background: #d33939;
    }
.form-icon_dialog_cancel{
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
    background: #ddd;
    margin-top: 5px;
    padding: 0px 10px;
    border-radius: 5px;
    font-family: 'prompt';
    text-align: center;
    line-height: 30px;
    transition: all 0.3s ease;
}
    .form-icon_dialog_cancel:hover{
        background: #ccc;
    }
/* Form Image */
.form-image{
    display: block;
}
.form-image_item{
    display: block;
}
    .form-image_item_2_col{
        display: inline-block;
        vertical-align: top;
        width: 50%;
    }
.form-image_show{
    display: inline-block;
    max-width: 100%;
}
.form-image_show{
    display: block;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    padding-bottom: 60%;
    background-size: cover;
    background-position: center;
    border: 2px solid #fff;
}
.form-image_del{
    cursor: pointer;
    display: inline-block;
    position: absolute;
    right: 5px;
    bottom: 5px;
    background: #75668d;
    padding: 0px 10px;
    border-radius: 10px;
    color: #fff;
    transition: background 0.3s ease;
    user-select: none;
}
    .form-image_del:hover{
        background: #605375;
    }
/* Form Image Dialog */
.form-image_dialog{
    display: block;
    box-sizing: border-box;
    /* max-width: 300px; */
    margin: 1px 2px 5px;
    background: #eee;
    padding: 5px 0px 10px;
    border-radius: 15px;
    text-align: center;
}
.form-image_dialog_text{
    display: block;
}
.form-image_dialog_confirm{
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
    background: #ec5858;
    margin-top: 5px;
    padding: 0px 10px;
    border-radius: 5px;
    font-family: 'prompt';
    text-align: center;
    line-height: 30px;
    color: #fff;
    transition: all 0.3s ease;
}
    .form-image_dialog_confirm:hover{
        background: #d33939;
    }
.form-image_dialog_cancel{
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
    background: #ddd;
    margin-top: 5px;
    padding: 0px 10px;
    border-radius: 5px;
    font-family: 'prompt';
    text-align: center;
    line-height: 30px;
    transition: all 0.3s ease;
}
    .form-image_dialog_cancel:hover{
        background: #ccc;
    }
/* Form Number */
.form-number{
    display: inline-block;
    height: 30px;
    background: #75668d;
    font-family: 'prompt';
    padding: 0px 10px;
    border-radius: 10px;
    font-size: 2rem;
    color: #fff;
}
/* Form Description */
.form-description{
    display: block;
    text-align: center;
    margin: 0px -10px;
    background: #f5f5f5;
}
.form-description_img{
    display: inline-block;
    width: 100%;
    max-width: 600px;
}
/* Form Flag */
.form-flag{
    display: inline-block;
    background: #65a6ad;
    padding: 0px 10px;
    border-radius: 5px;
    color: #fff;
}
/* Form History */
.form-history{
    display: block;
    padding-bottom: 10px;
    text-align: center;
}
.form-history_button{
    cursor: pointer;
    display: inline-block;
}
.form-history_button_icon{
    display: inline-block;
    vertical-align: middle;
    width: 30px; 
    height: 30px;
}
.form-history_button_text{
    display: inline-block;
    vertical-align: middle;
}
/* Form Message */
.form-message{
    display: block;
    box-sizing: border-box;
    background: #acd0d0;
    margin-top: 5px;
    padding: 10px;
    border-radius: 10px;
    color: #546d6d;
}
    .form-message_green{
        background: #2ea061 !important;
        color: #fff !important;
    }
    .form-message_red{
        background: #f37171 !important;
        color: #fff !important;
    }
.form-message_icon{
    display: inline-block;
    vertical-align: top;
    width: 30px;
}
    .register_msg_empty,
    .register_msg_password{
        display: none;
    }
/* Form Show */
.form-show{
    display: block;
    padding: 5px 0px 0px;
    font-family: 'prompt_medium';
    text-align: center;
    font-size: 2.2rem;
}
    .form-show span{
        color: #2a9b5d;
    }
/* Form Text */
.form-header{
    display: block;
}
.form-header_title{
    display: block;
    padding: 5px 0px 0px;
    font-family: 'prompt_semibold';
    font-size: 2.6rem;
}
    .form-header_title .number-text_small{
        font-family: 'prompt';
        font-size: 2rem;
    }
    .form-header_title .id{
        box-sizing: border-box;
        width: 50px;
        font-family: 'prompt';
        font-family: 'prompt_medium';
        font-size: 1.8rem;
        color: #987190;
    }
.form-header_icon{
    display: inline-block;
    vertical-align: top;
    width: 30px;
}
.form-header_detail{
    display: inline-block;
    vertical-align: top;
}
/* Form Label */ 
.form-label{
    display: block;
    font-family: 'prompt_medium';
    font-size: 2.2rem;
    line-height: 24px;
    color: #333;
}
    .form-label_center{
        text-align: center;
    }
    .form-label span{
        font-family: 'prompt';
        font-size: 1.8rem;
        color: #777;
    }
    .form-label_red{
        display: inline-block;
        vertical-align: top;
        font-family: 'prompt_medium';
        font-size: 1.8rem;
        color: #ff5858;
    }
.form-label_button{
    cursor: pointer;
    display: inline-block;
    background: #75668d;
    padding: 2px 10px;
    border-radius: 5px;
    font-family: 'prompt';
    font-size: 1.8rem;
    color: #fff;
    transition: all 0.3s ease;
}
    .form-label_button:hover{
        background: #605375;
    }
/* Form Validate */
.form-validate{
    display: block;
    background: #ffb1b1;
    margin-top: 3px;
    padding: 5px 10px;
    border-radius: 5px;
}
/* Form Payment */
.form-payment{
    display: block;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.07);
    margin-top: 10px;
    padding: 5px 10px;
    border-radius: 5px;
}
/* Form Voice */
.form-voice{
    display: block;
    padding-bottom: 5px;
}
.form-voice span{
    display: inline-block;
    padding-left: 10px;
    font-size: 1.8rem;
    color: #555;
}
.form-voice_button{
    cursor: pointer;
    vertical-align: top;
    display: inline-block;
    background: #75668d;
    padding: 0px 10px;
    border-radius: 10px;
    font-size: 1.6rem;
    text-align: center;
    color: #fff;
    transition: all 0.3s ease;
    user-select: none;
}
    .form-voice_button:hover{
        background: #605375;
    }
/* FORM INPUT */
.form-input{
    display: block;
    box-sizing: border-box;
    width: 100%;
    background: #eee;
    margin-top: 5px;
    padding: 5px 10px;
    border-radius: 5px;
    border: 0px;
    outline: 0px;
    font-family: 'prompt';
    line-height: 30px;
    color: #555;
}
    .form-input::placeholder{
        color: #bbb;
        opacity: 1;
    }
/* Form Input File */
.form-input_file{
    overflow: hidden;
    display: block;
    background: #eee;
    margin-top: 5px;
    padding: 5px 10px;
    border-radius: 5px;
    white-space: nowrap;
}
    .form-file_image{
        display: block;
        text-align: center;
    }
    .form-file_image_link{
        display: inline-block;
        vertical-align: top;
    }
    .form-file_image img{
        max-height: 100px;
    }
    .form-file_image_ref{
        display: inline-block;
        vertical-align: bottom;
        width: 20px;
    }
    .form-file_image_info{
        display: block;
        font-size: 1.6rem;
        color: #7f6ba7;
    }
.form-input_file_label{
    display: inline-block;
    margin-right: 5px;
    padding-right: 10px;
    border-right: 1px solid rgba(0, 0, 0, 0.2);
    font-family: 'prompt_regular';
    font-size: 2rem;
}
/* Form Selection */
.form-selection{
    display: block;
    box-sizing: border-box;
    width: 100%;
    background: #eee;
    margin-top: 5px;
    padding: 5px 10px;
    border-radius: 5px;
    border: 0px;
    outline: 0px;
    font-family: 'prompt';
    line-height: 30px;
    color: #555;
}
.form-selection_row{
    display: inline-block;
    padding-bottom: 10px;
}
.form-selection_text{
    display: inline-block;
    vertical-align: middle;
}
.form-selection_day,
.form-selection_month,
.form-selection_year,
.form-selection_hour,
.form-selection_minute{
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
    background: #eee;
    padding: 5px 5px;
    border-radius: 5px;
    border: 0px;
    outline: 0px;
    font-family: 'prompt';
    line-height: 30px;
    color: #555;
}
/* Form Textarea */
.form-textarea{
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    min-height: 40px;
    background: #eee;
    margin-top: 5px;
    padding: 5px 10px;
    border-radius: 5px;
    border: 0px;
    outline: 0px;
    font-family: 'prompt';
    line-height: 30px;
    color: #555;
}
    .form-textarea::placeholder{
        color: #bbb;
        opacity: 1;
    }
/* Form CheckBox */
.form-checkbox{
    display: block;
    margin-top: 5px;
}
.form-checkbox_item{
    display: block;
    padding: 5px 0px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
    .form-checkbox_item:nth-child(1){
        padding-top: 0px;
    }
    .form-checkbox_item:nth-last-child(1){
        border-bottom: 0px;
        padding-bottom: 0px;
    }
    .form-checkbox_item span{
        font-size: 1.8rem;
        color: #777;
    }
.form-checkbox_text{
    display: inline-block;
    font-family: 'prompt_medium';
    font-size: 2.2rem;
    
}
    .form-checkbox_text_small{
        display: inline-block;
        font-family: 'prompt_regular';
        font-size: 2rem;
    }
    .form-checkbox_text span{
        font-size: 1.8rem;
        font-family: 'prompt';
        line-height: 24px;
        color: #777;
    }
.form-checkbox_button{
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
    width: 30px;
    height: 30px;
    background: #e5e5e5;
    border: 5px solid #e5e5e5;
    border-radius: 10px;
    transition: background 0.3s ease;
}
    .form-checkbox_button:hover{
        background: #ccc;
    }
    .form-checkbox_item .active{
        background: #75668d;
        border: 5px solid #e5e5e5;
    }
    /* .form-checkbox_real{
        display: none;
    } */
/* Form Describe */
.form-des,
.form-des_purple{
    display: block;
    padding-top: 5px;
    font-size: 1.8rem;
    line-height: 24px;
    color: #999;
}
    .form-des_purple{
        color: #7f6ba7;
    }
    .form-des_purple a{
        font-family: 'prompt_medium';
        font-size: 2rem;
        color: #6c5699 !important;
    }
/* Form Tool */
.form-tool{
    display: block;
    padding-top: 5px;
}
.form-tool_button{
    cursor: pointer;
    display: inline-block;
    background: #75668d;
    padding: 0px 10px;
    border-radius: 5px;
    font-size: 1.8rem;
    color: #fff;
}
.form-tool_ex{
    cursor: pointer;
    display: inline-block;
    background: #2ea061;
    padding: 0px 10px;
    border-radius: 5px;
    font-size: 1.8rem;
    color: #fff;
}
/* Form Choice */
.form-choice{
    display: block;
}
.form-choice_lable{
    display: block;
    font-family: 'prompt_medium';
    color: #333;
}
    .form-choice_lable span {
        font-family: 'prompt';
        font-size: 1.6rem;
        color: #777;
    }
.form-choice_list{
    overflow: hidden;
    display: block;
    background: #eee;
    margin-top: 5px;
    border-radius: 5px;
}
    .form-choice_list .active{
        background: #75668d;
        color: #fff;
    }
.form-choice_item{
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
    width: 50%;
    padding: 5px 15px;
    font-size: 1.8rem;
    text-align: center;
}
/* Form Choice Icon */
.form-choice_icon{
    display: block;
    margin-top: 5px;
}
.form-choice_icon_list{
    display: block;
    padding: 10px 0px;
    text-align: center;
}
    .form-choice_icon_list .active{
        background: #75668d !important;
        color: #fff !important;
    }
.form-choice_icon_item{
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    width: calc( 100% - 10px );
    background: #eee;
    margin: 5px;
    padding: 10px 15px;
    border-radius: 20px;
    text-align: center;
    transition: all 0.3s ease;
}
    .form-choice_icon_item:hover{
        background: #ddd;
    }
.form-choice_icon_text{
    display: block;
}
.form-choice_icon_img{
    display: block;
    width: 80px;
}
.form-choice_icon_title{
    display: block;
    padding-top: 5px;
    font-family: 'prompt_medium';
    font-size: 2rem;
}
.form-choice_icon_des{
    display: block;
    font-size: 1.8rem;
    line-height: 24px;
}
.form-choice_icon_arrow{
    display: block;
    line-height: 40px;
    text-align: center;
}
.form-choice_icon_arrow img{
    display: inline-block;
    vertical-align: bottom;
    height: 40px;
}
/* Form Radio Icon */
.form-radio_icon{
    display: block;
    padding-top: 5px;
}
.form-radio_icon_row{
    display: block;
    box-sizing: border-box;
    padding: 5px 0px;
}
.form-radio_icon_wrap{
    display: block;
}
.form-radio_icon_button{
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    background: #e5e5e5;
    background: #ccc;
    border: 5px solid #e5e5e5;
    border-radius: 15px;
    transition: background 0.3s ease;
}
    .form-radio_icon_button:hover{
        background: #aaa;
    }
    .form-radio_icon_row .active{
        /* background: #75668d; */
        background: #2ea061;
        border: 5px solid #e5e5e5;
    }
    .form-radio_icon_real{
        display: none;
    }
.form-radio_icon_img{
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    padding-left: 10px;
}
.form-radio_icon_text{
    display: inline-block;
    vertical-align: middle;
    padding-left: 10px;
}
.form-radio_icon_input{
    display: inline-block;
    box-sizing: border-box;
    vertical-align: middle;
    width: 180px;
    background: #eee;
    margin-left: 10px;
    padding: 5px 10px;
    border-radius: 5px;
    border: 0px;
    outline: 0px;
    font-family: 'prompt';
    line-height: 30px;
    color: #555;
}
    .form-radio_icon_input::placeholder{
        color: #bbb;
        opacity: 1;
    }
@media only screen and (min-width: 430px){
    .form-choice_icon_item{
        max-width: 120px;
    }
}
@media only screen and (min-width: 600px){
    .form-choice_icon_item{
        max-width: 160px;
    }
}
@media only screen and (min-width: 800px){
    .form-radio_icon_row{
        display: inline-block;
        width: 50%;
    }
}
/* Form Authorize */
.form-authorize{
    display: block;
}
    .form-authorize_row{
        padding-bottom: 20px;
    }
    .form-authorize_label{
        padding-bottom: 5px;
        line-height: 24px;
    }
.form-authorize_item{
    display: block;
    padding: 5px 0px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);;
}
    .form-authorize_item:nth-last-child(1){
        border-bottom: 0px;
    }
.form-authorize_item_checkbox,
.form-authorize_item_checkbox_none{
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
    width: 30px;
    height: 30px;
    background: #e5e5e5;
    border: 5px solid #e5e5e5;
    border-radius: 10px;
    transition: background 0.3s ease;
}
    .form-authorize_item_checkbox:hover{
        background: #ccc;
    }
    .form-authorize_item_text .active{
        background: #75668d;
        border: 5px solid #e5e5e5;
    }
    /* .form-authorize_item_checkbox_real{
        display: none;
    } */
.form-authorize_item_text{
    display: inline-block;
    vertical-align: top;
    padding: 0px 10px;
}
/* Form Submit */
.form-submit{
    display: block;
    padding: 15px 0px;
    text-align: center;
}
.form-submit_des{
    display: block;
    padding-bottom: 10px;
    text-align: center;
}
.form-coupon{
    display: block;
}
/* Form Captcha */
.form-captcha{
    display: block;
    position: relative;
}
.form-captcha_image{
    display: inline-block;
    vertical-align: middle;
    width: 160px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.form-captch_input{
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
    width: calc( 100% - 160px );
    background: #eee;
    padding: 5px 50px 5px 10px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border: 0px;
    outline: 0px;
    font-family: 'prompt';
    line-height: 30px;
    color: #555;
}
    .form-captch_input::placeholder{
        color: #bbb;
        opacity: 1;
    }
.form-captch_refresh{
    cursor: pointer;
    display: inline-block;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.03);
    background-image: url('../img/icon-captcha_refresh.png');
    background-size: 40px;
    background-repeat: no-repeat;
    background-position: center;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    transition: background 0.3s ease;
}
    .form-captch_refresh:hover{
        background-color: rgba(0, 0, 0, 0.1);
    }
/* Form Clear */
.form-clear{
    display: block;
    padding-top: 10px;
}
.form-clear_img{
    display: block;
    width: 100px;
    margin: 0px auto;
    padding: 10px 20px;
}
.form-clear_text{
    display: block;
    box-sizing: border-box;
    padding: 0px 10px;
    text-align: center;
}
    .form-clear_text span{
        cursor: pointer;
        /* border-bottom: 1px solid #6c5699; */
        font-family: 'prompt_regular';
        color: #ec5858;
    }
.form-clear_dialog{
    display: block;
    box-sizing: border-box;
    background: rgba(211, 176, 176, 0.18);
    margin: 5px 0px;
    padding: 10px 10px 15px;
    border-radius: 20px;
    font-family: 'prompt_medium';
    text-align: center;
}
.form-clear_dialog_text{
    display: block;
}
.form-clear_dialog_confirm{
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
    background: #ec5858;
    margin-top: 5px;
    padding: 0px 10px;
    border-radius: 5px;
    font-family: 'prompt';
    text-align: center;
    line-height: 30px;
    color: #fff;
    transition: all 0.3s ease;
}
    .form-clear_dialog_confirm:hover{
        background: #d33939;
    }
.form-clear_dialog_cancel{
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
    background: #e5d5d5;
    margin-top: 5px;
    padding: 0px 10px;
    border-radius: 5px;
    font-family: 'prompt';
    text-align: center;
    line-height: 30px;
    transition: all 0.3s ease;
}
    .form-clear_dialog_cancel:hover{
        background: #cbafaf;
        color: #fff;
    }
@media only screen and (min-width: 500px){
    .form-clear_img{
        display: inline-block;
        vertical-align: middle;
    }
    .form-clear_text{
        display: inline-block;
        vertical-align: middle;
        width: calc( 100% - 140px );
        padding-top: 10px;
        text-align: left;
    }
}
/* Form Ebook */
.form-ebook_icon{
    display: block;
    padding: 5px 0px;
    text-align: center;
}
.form-ebook_icon_img{
    display: inline-block;
    width: 200px;
    border: 2px solid #fff;
    border-radius: 7px;
    box-shadow: 0 1px 10px rgb(0 0 0 / 10%), 0 1px 50px rgb(0 0 0 / 10%);
}
.form-ebook_dialog{
    /* display: block; */
    display: none;
    padding: 10px 0px 15px;
    text-align: center;
}
.form-ebook_dialog_text{
    display: block;
}
.form-ebook_dialog_confirm{
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
    background: #ec5858;
    margin-top: 5px;
    padding: 0px 10px;
    border-radius: 5px;
    font-family: 'prompt';
    text-align: center;
    line-height: 30px;
    color: #fff;
    transition: all 0.3s ease;
}
    .form-ebook_dialog_confirm:hover{
        background: #d33939;
    }
.form-ebook_dialog_cancel{
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
    background: #eee;
    margin-top: 5px;
    padding: 0px 10px;
    border-radius: 5px;
    font-family: 'prompt';
    text-align: center;
    line-height: 30px;
    transition: all 0.3s ease;
}
    .form-ebook_dialog_cancel:hover{
        background: #ddd;
    }
/* Form Ebook Cover */
.form-ebook_cover{
    display: block;
    background: #eee;
    padding: 20px 10px;
    border-radius: 10px;
    text-align: center;

}
.form-ebook_cover_img{
    display: inline-block;
    vertical-align: top;
    width: 150px;
    margin: 5px;
    border-radius: 5px;

    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;

}
/* Form Ebook pdf file old */
.form-ebook_pdf_file_old{
    overflow: hidden;
    display: block;
    padding-top: 5px;
    white-space: nowrap;
}
    .form-ebook_pdf_file_old a{
        color: #5eb7b3;
    }
    .form-ebook_pdf_file_old span{
        font-size: 1.8rem;
        color: #777;
    }
/* Form Ebook Index */
.form-ebook_index_title{
    display: block;
    padding: 15px 0px 5px;
    border-bottom: 1px solid #5eb7b3;
    font-family: 'prompt_regular';
    font-size: 2rem;
    color: #5eb7b3;
}
.form-ebook_index_title_text{
    display: inline-block;
    width: calc( 100% - 70px );
}
.form-ebook_index_title_numpage{
    display: inline-block;
    width: 70px;
    text-align: center;
}
.form-ebook_index_empty{
    display: block;
    border-bottom: 1px solid #eee;
    padding: 10px 0px;
    text-align: center;
    color: #aaa;
}
.form-ebook_index_list{
    display: block;
}
.form-ebook_index_item{
    display: block;
    border-bottom: 1px solid #eee;
    padding: 5px 0px;
}
    .form-ebook_index_item_empty{
        display: block;
        background: #eee;
        margin-top: 5px;
        padding: 5px 0px;
        border-radius: 5px;
        text-align: center;
    }
.form-ebook_index_text{
    display: inline-block;
    width: calc( 100% - 75px );
    margin-right: 5px;
}
.form-ebook_index_input_numpage{
    display: inline-block;
    width: 70px;
    margin-top: 0px;
    text-align: center;
}
/* Form Ebook Preface */
.form-ebook_preface{
    display: block;
}
.form-ebook_preface_item{
    display: block;
}
@media only screen and (min-width: 500px){
    .form-ebook_index_title_text{
        width: calc( 100% - 100px );
    }
    .form-ebook_index_title_numpage{
        width: 100px;
    }
    .form-ebook_index_text{
        width: calc( 100% - 105px );
    }
    .form-ebook_index_input_numpage{
        width: 100px;
    }
}
/* BUTTON ปุ่ม */
.button{
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
    background: #4391ac;
    padding: 10px 20px;
    border-radius: 10px;
    border: 0px;
    outline: 0px;
    font-family: 'prompt_medium';
    font-size: 2.2rem;
    color: #fff !important;
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.15);
    user-select: none;
    transition: all 0.3s ease;
}
    .button-text_light{
        font-family: 'prompt' !important;
    }
    .button-text_regular{
        font-family: 'prompt_regular' !important;
    }
    .button-small{
        padding: 5px 20px;
        font-family: 'prompt_regular';
        font-size: 2rem;
    }
    .button:hover{
        background: #1c6881;
    }
    .button:active{
        background: #3090b1;
    }
    /* Button Purple ปุ่มสีม่วง */
    .button-purple{
        background: #75668d;
    }
    .button-purple:hover{
        background: #605375;
    }
    .button-green{
        background: #2ea061;
    }
    .button-green:hover{
        background: #2d8655;
    }
    .button-lemon{
        background: #7b9a77;
    }
    .button-lemon:hover{
        background: #60885b;
    }
/* TEXT COLOR */
.text_green{
    color: #44b576 !important;
}
.text_green b{
    color: #2a9b5d !important;
}
.text_lemon{
    color: #7b9a77 !important;
}
.text_lemon b{
    color: #60885b !important;
}



.symbol {
    vertical-align: top;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin: 5px;
    font-family: 'prompt';
    font-size: 2.4rem;
    text-align: center;
    line-height: 24px;
    background-image: url(../img/_symbol_plus.png);
    background-repeat: no-repeat;
    background-position: center;
    background-color: #1d9e5e;
    background-size: 100%;
}



/* DELIMITER ตัวคั่น */
.delimiter{
    display: block;
    max-width: 600px;
    margin: 0 auto;
    padding: 50px 0px;
}
    .delimiter::before{
        content: '';
        display: block;
        border-top: 1px dashed rgba(0, 0, 0, 0.2);
    }



/* MESSAGE */
.message{
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 10px;
    text-align: center;
}
.message-box{
    display: block;
    box-sizing: border-box;
    background: #b0d6d4;
    padding: 10px;
    border-radius: 10px;
}
    .message-box_warring{
        background: #ffe6c7 !important;
    }
.message-title{
    display: block;
    font-family: 'prompt_medium';
    font-size: 2.4rem;
}
.message-des{
    display: block;
}



/* HEADER */
.header{
    display: block;
    padding-top: 40px;
}
.header-icon{
    display: block;
    text-align: center;
}
    /* Header Icon ของแต่ละหน้า */
    .header-icon_cart{
        display: inline-block;
        width: 200px;
    }
    .header-icon_shop{
        display: inline-block;
        width: 100%;
        max-width: 600px;
    }
    .header-icon_register{
        max-width: 200px;
        border-radius: 50%;
        background: #7ec9a3;
        margin-bottom: 20px;
    } 
.header-title{
    display: block;
    text-align: center;
}
.header-title_text{
    display: block;
    font-family: 'prompt_semibold';
    font-size: 2.7rem;
    transition: all 0.3s ease;
}
    .header-title_text span{
        font-family: 'prompt';
        font-size: 1.6rem;
    }
.header-title_des{
    display: block;
    max-width: 600px;
    margin: 0 auto;
    padding-top: 5px;
    color: #555;
}
    .header-title_des span{
        font-family: 'prompt_regular';
        color: #333;
    }
    .header-title_des a{
        display: inline-block;
        font-family: 'prompt_medium';
        color: #1d9e5e;
    }



/* HEADER-NAV */
.header-nav{
    display: block;
    height: 50px;
}
@media only screen and (min-width: 900px){
    .header-nav{
        height: 60px;
    }
}



/* FOOTER */
.footer{
    display: block;
    padding-top: 30px;
}
/* Footer Contact */
.footer-contact{
    display: block;
    text-align: center;
    padding: 10px 0px 20px;
}
.footer-contact_social{
    display: block;
}
.footer-contact_social_link{
    display: inline-block;
    vertical-align: middle;
    padding: 10px;
}
.footer-contact_social_icon{
    display: inline-block;
    vertical-align: top;
    height: 40px;
}
.footer-contact_tel{
    display: block;
    /* display: none; */
    padding-top: 10px;
    font-size: 2.2rem;
}
/* Footer Copyright */
.footer-copyright{
    display: block;
    padding: 15px 0px;
    border-top: 1px solid #e5e5e5;
    text-align: center;
}
    .footer-copyright span{
        font-size: 1.6rem;
        color: #44b576;
    }
/* Footer Wrap */
.footer-wrap{
    display: block;
    padding: 10px 0px 20px;
}
.footer-message{
    display: block;
    box-sizing: border-box;
    max-width: 600px;
    margin: 0 auto;
    padding: 10px 0px 20px;
    text-align: center;
}
    .footer-message span{
        display: inline-block;
        font-family: 'prompt_medium';
        color: #44b576;
    }
/* Footer Nav */
.footer-nav{
    display: block;
    text-align: center;
    padding-bottom: 5px;
}
.footer-nav_item{
    display: inline-block;
}
    .footer-nav_item::before {
        content: "|";
        display: inline-block;
        /* box-sizing: border-box; */
        width: 10px;
        padding-left: 10px;
        font-family: 'prompt';
        text-align: center;
        color: #555;
        transform: scale(0.5, 0.7);
    }
    .footer-nav_item:nth-child(1)::before {
        content: "";
        width: 0px;
        padding-left: 0px;
    }
.footer-nav_link{
    display: inline-block;
    padding: 5px 0px;
}
@media only screen and (min-width: 1000px){
    .footer-nav_item::before {
        width: 30px;
        padding-left: 10px;
    }
}



/* PASSWORD */
.password_alert{
    display: block;
    padding: 30px 0px;
    text-align: center;
}



/* INFO */
.info{
    display: block;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}
.info-header{
    display: block;
    text-align: center;
}
.info-header_title{
    display: block;
    font-family: 'prompt_semibold';
    font-size: 2.4rem;
    line-height: 34px;
}
.info-header_dev{
    display: block;
}
.info-list{
    display: block;
    padding: 10px 0px;
}
.info-list_item{
    display: block;
    padding: 5px 0px;
}
.info-list_item p{
    display: block;
    padding-top: 10px;
    text-indent: 30px;
}



/* BANK */
.bank{
    display: block;
}
.bank-item{
    display: block;
}
.bank-item_icon{
    display: block;
    width: 100%;
    max-width: 70px;
}
.bank-item_text{
    display: block;
    padding-top: 10px;
    text-align: center;
}
.bank-item_name{
    display: block;
    font-family: 'prompt_medium';
    font-size: 2.2rem;
}
.bank-item_number{
    display: block;
}
.bank-item_account{
    display: block;
}
@media only screen and (min-width: 460px){
    .bank-item_icon{
        display: inline-block;
        vertical-align: middle;
    }
    .bank-item_text{
        display: inline-block;
        box-sizing: border-box;
        vertical-align: middle;
        padding-top: 0px;
        padding-left: 10px;
        width: calc( 100% - 70px );
        text-align: left;
    }
}



/* Profile - Tutorial */
.profile-tutorial{
    display: block;
}
.profile-tutorial_cover{
    display: block;
    width: 100%;
    max-width: 600px;
    margin: 20px auto 10px;
}
.profile-tutorial_title{
    display: block;
    padding: 10px 0px;
    font-family: 'prompt_medium';
    font-size: 2.4rem;
}
.profile-tutorial_tab{
    overflow: hidden;
    display: block;
    background: #fff;
    margin: 10px 0px;
    border-radius: 10px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    transition: all 0.3s ease;
}
    .profile-tutorial_tab:hover{
        background: #f5f5f5;
    }
.profile-tutorial_tab_title{
    cursor: pointer;
    display: block;
    padding: 10px 15px;
    border-radius: 10px;
    text-align: left;
}
    .profile-tutorial_tab_title::after{
        content: '';
        vertical-align: bottom;
        display: inline-block;
        width: 30px;
        height: 30px;
        background-image: url('../img/icon-arrow_slide_bottom_b.png');
        background-size: 30px 30px;
        background-position: center;
        background-repeat: no-repeat;
        background-color: rgba(0, 0, 0, 0.03);
        border-radius: 50%;
    }
.profile-tutorial_tab_detail{
    display: block;
    padding: 0px 10px 10px;
    /* background: #00000007; */
}
.profile-tutorial_tab_video{
    background: #333;

    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
}
.profile-tutorial_tab_video iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.profile-tutorial_tab_tool{
    display: block;
    padding: 10px 0px 0px;
}
.profile-tutorial_tab_tool p{
    display: block;
    text-align: left;
    padding: 0px 10px 10px;
}
.profile-tutorial_tab_button{
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
    background: #4391ac;
    padding: 5px 15px;
    border-radius: 10px;
    border: 0px;
    outline: 0px;
    font-family: 'prompt';
    font-size: 2rem;
    color: #fff !important;
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.15);
    user-select: none;
    transition: all 0.3s ease;
}
/* Tutorial Icon */
.profile-tutorial_icon{
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    max-width: 240px;
    min-height: 180px;
    background: #fff;
    margin: 5px;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
}
    .profile-tutorial_icon:hover{
        background: #f5f5f5;
    }
.profile-tutorial_icon_img{
    display: block;
    width: 100px;
    height: 100px;
}
.profile-tutorial .number{
    background: #81a997;
}

.profile-shelf_free{
    display: inline-block;
}
.profile-shelf_free_icon{
    display: block;
    width: 150px;
    height: 150px;
}



/* Profile - Rule */
.profile-rule{
    display: block;
    padding-top: 20px;
}
.profile-rule_link{
    display: inline-block;
}
.profile-rule_icon{
    display: inline-block;
    vertical-align: middle;
    width: 50px;
}
.profile-rule_text{
    display: inline-block;
    vertical-align: middle;
    padding-right: 10px;
    font-family: 'prompt_medium';
}
.profile-payment{
    display: block;
    padding-top: 30px;
}
/* Profile-Table */
.profile-payment_table{
    display: block;
    box-sizing: border-box;
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
    padding: 0px 20px;
}
.profile-payment_row{
    display: block;
    padding: 15px 0px;
    border-top: 1px solid #eee;
}
    .profile-payment_row:nth-child(1){
        border-top: 0px;
    }
    .profile-payment_row b{
        font-family: 'prompt_medium';
        font-weight: normal;
    }
.profile-payment_row_title{
    display: block;
    padding-bottom: 5px;
    font-family: 'prompt_medium';
    color: #1d9e5e;
}
.profile-payment_row_item{
    display: block;
    padding: 0px 10px;
}
.profile-payment_row_money{
    display: block;
    padding-top: 5px;
    font-family: 'prompt_medium';
    /* color: #4391ac; */
}



/* SEARCH */
.search{
    display: block;
    padding: 10px;
    text-align: center;
}
/* Search Des */
.search-des{
    display: block;
    padding-top: 5px;
    font-size: 1.8rem;
    color: #777;
}
/* Search Bar */
.search-bar{
    display: inline-block;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    max-width: 400px;
    /* background: #fff; */
    padding: 5px;
    border-radius: 10px;
}
.search-bar_input{
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
    width: calc( 100% - 60px );
    background: #fff;
    /* background: #f5f5f5; */
    padding: 5px 10px;
    border: 0px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    outline: 0px;
    font-family: 'prompt';
    text-align: center;
    line-height: 30px;
    color: #555;
}
.search-bar_submit{
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
    width: 60px;
    height: 40px;
    background-color: #96a894;
    background-image: url('../img/icon-tool_search.png');
    background-size: 40px 40px;
    background-position: center;
    background-repeat: no-repeat;
    border: 0px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    transition: all 0.3s ease;
}
    .search-bar_submit:hover{
        background-color: #7c887b;
    }
    .search-bar_submit_purple{
        background-color: #75668d;
    }
    .search-bar_submit_purple:hover{
        background-color: #605375;
    }
/* Search Option */
.search-option{
    display: block;
    text-align: center;
}
.search-option_popup{
    display: inline-block;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    max-width: 400px;
    background: #fff;
    padding: 5px;
    border-radius: 10px;
}
    .search-option_popup::before{
        content: '';
        transform: rotate(45deg);
        display: inline-block;
        position: absolute;
        left: 50%;
        bottom: -10px;
        z-index: 1;
        width: 50px;
        height: 50px;
        background: #fff;
        margin-left: -25px;
        border-radius: 10px;
    }
.search-option_wrap{
    display: block;
    position: relative;
    z-index: 2;
    background: #fff;
}
/* Search Option Selector */
.search-option_selector{
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
    position: relative;
    width: 120px;
    text-align: center;
}
.search-option_selector_button{
    cursor: pointer;
    display: block;
    position: relative;
    padding: 5px 15px;
    border-radius: 10px;
    user-select: none;
}
    .search-option_selector_button:hover{
        background: rgba(0,0,0,0.05);
    }
.search-option_selector_text{
    display: inline-block;
    padding-right: 20px;
}
.search-option_selector_arrow{
    content: '';
    transform: rotate(45deg);
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 17px;
    width: 10px;
    height: 10px;
    margin-top: -7px;
    border-right: 1px solid #555;
    border-bottom: 1px solid #555;
    transition: all 0.1s linear;
}
/* Search Selector Popup */
.search-option_selector_popup{
    display: none;
    /* display: inline-block; */
    position: absolute;
    top: 55px;
    left: 0px;
    width: 240px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.15);
}
    .search-option_selector_popup::before {
        content: '';
        transform: rotate(45deg);
        display: inline-block;
        position: absolute;
        z-index: 1;
        top: -6px;
        left: 40px;
        width: 48px;
        height: 48px;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.15);
        transition: all 0.3s ease;
    }
.search-option_selector_popup_wrap{
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 2;
    border-radius: 10px;
}
.search-option_selector_list{
    display: block;
    overflow-y: auto;
    max-height: 240px;
    background: #fff;
}
.search-option_selector_link{
    cursor: pointer;
    display: block;
    box-sizing: border-box;
    padding: 10px 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    text-align: center;
    color: #333;
    transition: all 0.3s ease;
}
    .search-option_selector_link:hover{
        background: #ffe7bc;
    }
    .search-option_selector_link:nth-last-child(1){
        border-bottom: 0px;
    }
    .search-option_selector_link span{
        display: inline-block;
        vertical-align: super;
        padding-left: 5px;
        font-size: 1.4rem;
        line-height: 14px;
        color: #2ea061;
    }
.search-option_selector_link_empty{
    display: block;
    box-sizing: border-box;
    padding: 15px 15px;
    text-align: center;
    color: #333;
    user-select: none;
}
/* Search Option Deliniter */
.search-option_selector_delimiter{
    display: inline-block;
    vertical-align: middle;
    width: 1px;
    height: 25px;
    background: rgba(0,0,0,0.15);
    margin: 0 5px;
}
.search-option_selector_input{
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
    width: calc( 100% - 131px );
    background: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    border: 0px;
    outline: 0px;
    font-family: 'prompt';
    text-align: center;
    line-height: 30px;
    color: #555;
}
    .search-option_selector_input::placeholder{
        color: #555;
        opacity: 1;
    }
/* Search Option Submit */
.search-option_submit{
    display: block;
    padding-top: 20px;
    text-align: center;
}
.search-option_submit_button{
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    width: 50px;
    height: 50px;
    background-color: #4391ac;
    background-image: url('../img/icon-tool_search.png');
    background-size: 40px 40px;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
    border: 0px;
    transition: all 0.3s ease;
}
    .search-option_submit_button:hover{
        background-color: #1f657c;
    }
    .search-button_lemon{
        background-color: #7b9a77;
    }
    .search-button_lemon:hover{
        background-color: #60885b;
    }
@media only screen and (min-width: 600px){
    .search-option_selector_popup{
        left: 50%;
        margin-left: -120px;
    }
    .search-option_selector_popup::before {
        left: 50%;
        margin-left: -24px;
    }
}



/* PRODUCT */
.product{
    display: block;
    background: rgba(0, 0, 0, 0.07);
    padding: 10px 0px;
}
.product-container{
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0px 1px;
}
/* Product Search */
.product-search{
    /* display: block; */
    display: none;
    box-sizing: border-box;
    padding: 30px 10px 0px;
    text-align: center;
}
.product-search_wrap{
    display: inline-block;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    max-width: 400px;
    /* background: #eee; */
    /* padding: 5px; */
    border-radius: 10px;
}
.product-search_input{
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
    width: calc( 100% - 60px );
    background: #eee;
    /* background: #f5f5f5; */
    padding: 5px 10px;
    border: 0px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    outline: 0px;
    font-family: 'prompt';
    text-align: center;
    line-height: 30px;
    color: #555;
}
.product-search_submit{
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
    width: 60px;
    height: 40px;
    background-color: #a99669;
    background-image: url(../img/icon-tool_search.png);
    background-size: 40px 40px;
    background-position: center;
    background-repeat: no-repeat;
    border: 0px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    transition: all 0.3s ease;
}
/* Product Tab */
.product-tab{
    display: block;
    padding: 20px 0px 0px;
    text-align: center;
}
.product-tab_wrap{
    display: block;
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 98;
    width: 100%;
    background: #fff;

    /* background: red; */
}
.product-tab_list{
    display: block;
}
.product-tab_delimiter{
    display: inline-block;
    vertical-align: middle;
    width: 1px;
    height: 20px;
    background: rgba(0, 0, 0, 0.15);
    margin-top: -10px;
}
.product-tab_item{
    display: inline-block;
    box-sizing: border-box;
    vertical-align: middle;
    padding: 10px 0px;
    border-bottom: 3px solid #fff;
}
    .product-tab_list .active{
        border-bottom: 3px solid #d0b574 !important;
    }
/* Product Tab Popup */
.product-tab_popup{
    display: none;
    /* display: inline-block; */
    position: absolute;
    z-index: 2;
    top: 60px;
    left: 50%;
    width: 230px;
    background: #fff;
    margin-left: -115px;
    border-radius: 20px;
    box-shadow: 0px 3px 15px rgb(0 0 0 / 35%);
}
    .product-tab_popup::before {
        content: '';
        transform: rotate(45deg);
        display: inline-block;
        position: absolute;
        z-index: 1;
        top: -7px;
        left: 50%;
        width: 50px;
        height: 50px;
        background: #fff;
        margin-left: -25px;
        border-radius: 10px;
        box-shadow: 0px 3px 15px rgb(0 0 0 / 35%);
    }
.product-tab_popup_wrap{
    display: block;
    overflow: hidden;
    position: relative;
    z-index: 2;
    background: #fff;
    border-radius: 20px;
}
.product-tab_popup_list{
    display: block;
    overflow-y: auto;
    max-height: 240px;
}
.product-tab_popup_item{
    display: block;
    background: #fff;
    padding: 10px 15px;
    border-top: 1px solid #eee;
}
    .product-tab_popup_item:nth-child(1){
        border-top: 0px;
    }
    .product-tab_popup_item:hover{
        background: #ffe7bc;
    }
/* Product Tab Link */
.product-tab_link{
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    padding: 5px 10px;
    border-radius: 10px;
    transition: all 0.3s ease;
}
    .product-tab_link:hover{
        background: rgba(0, 0, 0, 0.07);
    }
.product-tab_group{
    padding-right: 30px;
}
    .product-tab_group::before{
        content: '';
        transform: rotate(45deg);
        display: inline-block;
        position: absolute;
        top: 50%;
        right: 10px;
        width: 10px;
        height: 10px;
        margin-top: -7px;
        border-right: 1px solid rgba(0, 0, 0, 0.5);
        border-bottom: 1px solid rgba(0, 0, 0, 0.5);
        transition: all 0.1s linear;
    }
/* Product Space */
.product-space{
    display: block;
    padding: 10px 0px;
}
/* Product List */
.product-list{
    display: block;
    box-sizing: border-box;
    padding: 30px 0px;
    text-align: center;
}
.product-list_delimiter{
    display: block;
    border-top: 1px solid #ddd;
    margin: 20px 0px;
}
.product-list_empty{
    display: block;
    width: 100%;
    background: #eee;
    max-width: 300px;
    margin: 50px auto;
    padding: 15px 10px;
    border-radius: 10px;
}
.product-title{
    display: block;
    padding: 0px 0px 10px;
}
    .product-title_label{
        display: inline-block;
        box-sizing: border-box;
        background: #a99669;
        padding: 5px 10px;
        border-radius: 10px;
        font-family: 'prompt_medium';
        font-size: 2.2rem;
        text-align: left;
        color: #fff;
    }
.product-item{
    overflow: hidden;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
    width: calc( 50% - 4px );
    max-width: 300px;
    margin: 2px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 1px 3px rgb(0 0 0 / 10%);
    transition: all 0.3s ease;
}
    .product-item:hover{
        box-shadow: 0px 2px 5px rgb(0 0 0 / 30%);
    }
.product-item_link{
    display: block;
}
.product-item_thumbnail{
    display: block;
    overflow: hidden;
    /* max-height: 150px; */
    padding-top: 10px;
}
    .product-item_thumbnail_img{
        display: block;
        /* width: 100%; */
        /* max-width: 200px; */
        height: 200px;
    }
.product-item_detail{
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    max-width: 300px;
    padding: 5px 10px;
}
.product-item_title{
    display: block;
    font-family: 'prompt_semibold';
    font-size: 1.8rem;
    text-align: center;
    line-height: 26px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.product-item_checked{
    display: inline-block;
    vertical-align: top;
    width: 20px;
    height: 20px;
    background-color: #2ea061;
    background-image: url('../img/icon-checked_40x40.png');
    background-size: 100%;
    margin: 5px 0px;
    border-radius: 50%;
}
.product-item_special{
    display: inline-block;
    vertical-align: top;
    width: 20px;
    height: 20px;
    background-color: #ffba25;
    background-image: url('../img/icon-special_40x40.png');
    background-size: 100%;
    margin: 5px 0px;
    border-radius: 50%;
}
.product-item_des{
    display: block;
    font-size: 1.6rem;
    line-height: 24px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.product-item_price{
    display: block;
    font-size: 1.8rem;
    line-height: 20px;
    text-align: center;
}
    .product-item_price b{
        font-family: 'prompt_medium';
        font-size: 1.8rem;
        font-weight: normal;
        color: #222;
    }
.product-item_price_text{
    display: none;
}
.product-item_price_real{
    display: inline-block;
    position: relative;
    font-size: 1.6rem;
    color: #999;
}
    .product-item_price_real::before{
        content: '';
        display: inline-block;
        position: absolute;
        top: 50%;
        left: 0px;
        width: 100%;
        border-top: 1px solid #999;
        transform: rotate(-10deg);
    }
.product-item_price_discount{
    display: inline-block;
    font-size: 1.8rem;
    color: #333;
}
    .product-item_price_discount span{
        font-family: 'prompt_medium';
        font-size: 2rem;
        color: #f5643f;
    }
@media only screen and (min-width: 500px){
    .product-container{
        padding: 0px 5px;
    }
    .product-item{
        width: calc( 50% - 10px );
        margin: 5px;
        border-radius: 15px;
    }
    .product-item_thumbnail{
        max-height: 200px;
    }
    .product-item_detail{
        padding: 10px 15px;
    }
    .product-item_title{
        font-size: 2rem;
        line-height: 28px;
    }
    .product-item_des{
        display: block;
        font-size: 1.8rem;
        line-height: 26px;
    }
    .product-item_price{
        padding-top: 5px;
    }
    .product-item_price_text{
        display: inline-block;
        font-family: 'prompt_medium';
    }
}
@media only screen and (min-width: 600px){
    .product-item{
        width: calc( 50% - 20px );
        margin: 10px;
    }
    .product-item_detail{
        padding: 15px 20px;
    }
}
@media only screen and (min-width: 900px){
    .product-search{
        display: block;
    }
}



/* PRODUCT SHOW */
.product_show{
    display: block;
    padding: 30px 0px;
    text-align: center;
}
/* Product Show Thumbnail */
.product_show-thumbnail{
    display: block;
}
.product_show-item_thumbnail_img{
    display: block;
    width: 220px;
}
/* Product Show Detail */
.product_show-detail{
    display: block;
    padding-top: 20px;
}
.product_show-detail_title{
    display: block;
    font-family: 'prompt_semibold';
    font-size: 2.4rem;
}
.product_show-detail_des{
    display: block;
    padding-top: 10px;
}
.product_show-detail_link{
    display: block;
    padding: 10px 0px;
}
@media only screen and (min-width: 600px){
    .product_show{
        padding: 50px 0px;
    }
    .product_show-thumbnail{
        display: inline-block;
        vertical-align: middle;
        width: 260px;
    }
    .product_show-detail{
        display: inline-block;
        vertical-align: middle;
        box-sizing: border-box;
        width: calc( 100% - 260px );
        max-width: 550px;
        padding-top: 30px;
        padding-left: 50px;
        padding-bottom: 30px;
        text-align: left;
    }
}



/* COMMENT */
.comment{
    display: block;
    padding: 30px 0px;
}
.comment-container{
    display: block;
    padding: 0px 10px;
    text-align: center;
}
.comment-msg{
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    max-width: 800px;
    background: #fff;
    padding: 20px 10px;
    box-shadow: 0px 0px 50px rgb(0 0 0 / 15%);
    border-radius: 20px;
}
.comment-msg_title{
    display: block;
    text-align: center;
    font-family: 'prompt_semibold';
    font-size: 2.4rem;
}
    .comment-msg_title_big{
        font-size: 2.8rem;
    }
.comment-msg_list{
    display: block;
    padding-top: 20px;
}
    .comment-msg_list .active{
        display: inline-block;
    }
.comment-msg_item{
    display: inline-block;
    display: none;
}
.comment-msg_text{
    overflow-y: auto;
    display: block;
    box-sizing: border-box;
    max-height: 300px;
    text-align: left;
}
    .comment-msg_text::-webkit-scrollbar{
        width: 2px;
        height: 2px;
    }
    .comment-msg_text::-webkit-scrollbar-track{
        background: rgba(0, 0, 0, 0.1);
    }
    .comment-msg_text::-webkit-scrollbar-thumb{
        background: #44b576;
    }
    .comment-msg_text p{
        display: block;
        padding: 10px;
        text-indent: 50px;
    }
    .comment-msg_text em{
        display: block;
        box-sizing: border-box;
        width: 80%;
        margin: 0 auto;
        padding: 5px 0px;
        font-family: 'prompt_regular';
        font-size: 2.2rem;
        text-align: center;
    }
    .comment-msg_text em::before{
        content: '" ';
    }
    .comment-msg_text em::after{
        content: ' "';
    }
.comment-msg_name{
    display: block;
    padding-top: 20px;
    font-family: 'prompt_medium';
    font-size: 2rem;
    color: #44b576;
}
.comment-msg_position{
    display: block;
    font-size: 1.8rem;
    color: #555;
}
/* Comment Slide */
.comment-slide{
    display: block;
    padding: 10px 0px;
    text-align: center;
    user-select: none;
}
.comment-slide_left,
.comment-slide_right{
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: middle;
    width: 50px;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.03);
    border-radius: 50%;

    /* background */
    background-size: 40px 40px;
    background-repeat: no-repeat;

    transition: all 0.3s ease;
}
    .comment-slide_left:hover,
    .comment-slide_right:hover{
        background-color: rgba(0, 0, 0, 0.1);
    }
    .comment-slide_left{
        background-image: url('../img/icon-numpage_arrow_left_b.png');
        background-position: center right;
    }
    .comment-slide_right{
        background-image: url('../img/icon-numpage_arrow_right_b.png');
        background-position: center left;
    }
.comment-slide_text{
    display: inline-block;
    vertical-align: middle;
    padding: 0px 10px;
}
@media only screen and (min-width: 600px){
    .comment-container{
        padding: 0px 20px;
    }
    .comment-msg{
        padding: 40px 20px;
    }
}



/* TABLE */
.table{
    display: block;
    padding: 20px 0px;
}
.table-des{
    display: block;
    width: 100%;
    max-width: 600px;
    margin: 20px auto 10px;
    font-family: 'prompt_medium';
    font-size: 2.2rem;
    text-align: center;
}
    .table-des span{
        font-family: 'prompt';
        font-size: 2rem;
    }
.table-error{
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 600px;
    background: rgba(255, 0, 0, 0.1);
    margin: 0 auto 20px;
    padding: 10px 20px;
    border-radius: 10px;
}
.table-error_title{
    display: block;
    font-family: 'prompt_medium';
    font-size: 2.2rem;
}
/* Table Empty
ใช้ในกรณี ไม่มีข้อมูลอยู่ในฐานข้อมูล */
.table-empty{
    display: block;
    background: #f5f5f5;
    padding: 5px 7px;
    border: 3px solid #fff;
    border-radius: 10px;
    font-size: 2rem;
    text-align: center;
    color: #aaaaaa;
}
.table-view{
    display: block;
    box-sizing: border-box;
    padding: 30px 10px;
    background: #e5eaf1;
}
/* Table Header */
.table-header{
    display: block;
    max-width: 600px;
    margin: 0 auto;
    padding-bottom: 10px;
    text-align: center;
}
    .table-header .number{
        display: inline-block;
        width: 30px;
        height: 30px;
        background: #4e9e72;
        border-radius: 50%;
        line-height: 32px;
        text-align: center;
        color: #fff;
    }
.table-header_title{
    display: block;
    font-family: 'prompt_medium';
    font-size: 2.4rem;
    line-height: 34px;
}
.table-header_des{
    display: block;
    color: #555;
}
    .table-header_des .number{
        display: inline-block;
        width: 30px;
        height: 30px;
        background: #333;
        border-radius: 50%;
        line-height: 32px;
        text-align: center;
        color: #fff;
    }
.table-header_button{
    display: block;
    padding: 5px 0px;
}
/* Table Show All */
.table-show_all{
    display: block;
    padding: 0px 0px 20px;
    text-align: center;
}
.table-show_all_link{
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
    background: #8691a1;
    padding: 10px 20px;
    border-radius: 10px;
    border: 0px;
    outline: 0px;
    font-family: 'prompt_medium';
    font-size: 2.2rem;
    color: #fff !important;
    box-shadow: 0px 3px 5px 0px rgb(0 0 0 / 15%);
    user-select: none;
    transition: all 0.3s ease;
}
    .table-show_all_link:hover{
        background: #697586;
    }
/* Table Selector */
.table-selector{
    display: block;
    position: relative;
    padding-top: 10px;
    text-align: center;
}
.table-selector_current{
    cursor: pointer;
    display: block;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    background: rgba(0, 0, 0, 0.05);
    max-width: 360px;
    margin: 0 auto;
    padding: 5px 10px 10px;
    border-radius: 15px;
    text-align: left;
    transition: all 0.3s ease;
}
    .table-selector_current:hover{
        background: rgba(0, 0, 0, 0.1);
    }
    .table-selector_current::after{
        content: '';
        position: absolute;
        top: 50%;
        right: 10px;
        width: 40px;
        height: 40px;
        background-color: rgba(0, 0, 0, 0.05);
        background-image: url('../img/arrow_black-bottom.png');
        background-size: 40px;
        background-position: center;
        margin-top: -20px;
        border-radius: 50%;
    }
.table-selector_current_icon{
    display: inline-block;
    vertical-align: middle;
    width: 100px;
}
.table-selector_current_text{
    display: inline-block;
    box-sizing: border-box;
    vertical-align: middle;
    width: calc( 100% - 150px );
    padding-left: 10px;
    text-align: left;
}
    .table-selector_current_text .hidden{
        background: #75668d;
    }
.table-selector_popup{
    /* display: inline-block; */
    display: none;
    box-sizing: border-box;
    position: absolute;
    
    z-index: 98;
    /* width: 100%; */
    max-width: 600px;

    top: 150px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;

    padding: 0px;

    background: #fff;
    box-shadow: 0px 3px 15px rgb(0 0 0 / 35%);
    border-radius: 20px;
}
    .table-selector_popup::before {
        content: '';
        transform: rotate(45deg);
        display: inline-block;
        position: absolute;
        z-index: 1;
        top: -7px;
        left: 50%;
        width: 50px;
        height: 50px;
        background: #fff;
        margin-left: -25px;
        border-radius: 10px;
        box-shadow: 0px 3px 15px rgb(0 0 0 / 35%);
    }
.table-selector_wrap{
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 2;
    background: #fff;
    border-radius: 20px;
    padding: 10px;
}
/* Table Selector Scroll */
.table-selector_scroll{
    display: block;
    overflow-y: auto;
    max-height: 340px;
    padding-top: 5px;
}
/* Selector Search */
.table-selector_search{
    display: block;
}
.table-selector_search_input{
    margin-top: 0px;
    margin-bottom: 10px;
    border-radius: 10px;
    text-align: center;
}
.table-selector_search_box{
    display: inline-block;
    vertical-align: top;
    width: 100%;
}
.table-selector_search_title{
    display: block;
    font-size: 2rem;
    text-align: left;
}
.table-selector_search_delimiter{
    display: block;
    width: 80%;
    height: 1px;
    background: #ddd;
    margin: 10px auto 0px;
}
/* Table Selector Item */
.table-selector_item{
    display: inline-block;
    vertical-align: top;
    max-width: 150px;
    margin: 10px 5px;
    white-space: normal;
}
.table-selector_item_icon{
    display: block;
    width: 100px;
}
.table-selector_item_text{
    display: block;
}
    .table-selector_item_text .hidden{
        background: #75668d;
    }
.table-selector_des{
    display: block;
    padding-top: 10px;
    text-align: center;
}
/* Table Text */
.table-text{
    display: block;
    max-width: 700px;
    margin: 0 auto;
    padding: 10px 0px;
}
.table-text_des{
    display: block;
    text-align: center;
}
    .table-text_des span{
        display: inline-block;
        font-family: 'prompt_medium';
        font-size: 2rem;
        color: #222;
    }
.table-title{
    display: block;
    box-sizing: border-box;
    max-width: 1000px;
    margin: 0px auto;
    padding: 0px 10px;
    font-family: 'prompt_medium';
    font-size: 2.2rem;
    line-height: 26px;
}
    .table-title span{
        font-family: 'prompt';
        font-size: 1.8rem;
        color: #555;
    }
/* Table Flag */
.table-flag{
    display: block;
    box-sizing: border-box;
    max-width: 1000px;
    margin: 0px auto;
    padding: 0px 10px;
}
.table-flag_text{
    display: inline-block;
    box-sizing: border-box;
    background: #2ea061;
    padding: 5px 10px;
    border-radius: 10px;
    font-family: 'prompt_medium';
    font-size: 2.2rem;
    color: #fff;
}
/* Table Body (New)
แบบแยกเป็นส่วนๆ */
/* .table-body{
    display: block;
    max-width: 1000px;
    margin: 10px auto;
}
.table-row{
    display: block;
    box-sizing: border-box;
    background: #f5f5f5;
    margin: 5px 0px;
    padding: 5px;
    border-radius: 10px;
    border: 5px solid #fff;
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1);
} */
/* Table Body (Old) */
.table-body{
    display: block;
    box-sizing: border-box;
    max-width: 1000px;
    background: #fff;
    margin: 10px auto;
    padding: 3px;
    border-radius: 10px;
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1);
}
.table-row{
    display: block;
    box-sizing: border-box;
    background: #f5f5f5;
    padding: 5px 7px;
    border: 3px solid #fff;
    border-radius: 10px;
    transition: background 0.2s ease;
}
    .table-row:hover{
        background: #eee;
    }
.table-row_button{
    cursor: pointer;
    display: inline-block;
    border-radius: 5px;
    padding: 0px 10px;
    font-size: 1.8rem;
    color: #999;
    transition: all 0.3s ease;
    background: rgba(0, 0, 0, 0.05);
    user-select: none;
}
    .table-row_button:hover{
        background: rgba(0, 0, 0, 0.08);
        color: #555;
    }
.table-row_detail{
    cursor: pointer;
    display: inline-block;
    border-radius: 5px;
    padding: 0px 10px;
    font-family: 'prompt_regular';
    font-size: 1.8rem;
    color: #555;
    transition: all 0.3s ease;
    /* background: rgba(0, 0, 0, 0.05); */
}
    .table-row_detail:hover{
        color: #078588;
    }
    /* Table Row Color */
    .table-row_purple,
    .table-row_purple:hover{
        background: #ece6f5;
    }
    .table-row_gloden,
    .table-row_gloden:hover{
        background: #d9d7d1;
    }
    .table-row_defective,
    .table-row_defective:hover{
        background: #ebd9d9;
    }
    .table-row_gloden .button_payment_detail{
        color: #777;
        background-color: rgba(0, 0, 0, 0.07);
    }
/* Table Hilight */
.table-hilight{
    display: inline-block;
    font-family: 'prompt_medium';
}
.table-hilight_all{
    display: inline-block;
    font-family: 'prompt_medium';
    color: #222;
}
.table-hilight_error{
    display: inline-block;
    font-family: 'prompt_medium';
    color: #fc7676;
}
.table-hilight_path{
    display: inline-block;
    color: #ddd;
}
.table-hilight_link{
    cursor: pointer;
    display: inline-block;
    transition: all 0.3s ease;
}
    .table-hilight_link:hover{
        color: #50b7b2;
    }
.table-datetime{
    display: inline-block;
    font-size: 1.4rem;
    color: #aaa;
}
/* Table Filter */
.table-filter{
    display: block;
    padding: 10px 0px;
    text-align: center;
}
.table-filter_selecter{
    cursor: pointer;
    position: relative;
    display: inline-block;
    background: rgba(0, 0, 0, 0.05);
    padding: 15px 60px 15px 20px;
    border-radius: 15px;
    user-select: none;
    transition: all 0.3s ease;
}
    .table-filter_selecter:hover{
        background: rgba(0, 0, 0, 0.1);
    }
    .table-filter_selecter::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 10px;
        width: 40px;
        height: 40px;
        background-color: rgba(0, 0, 0, 0.05);
        background-image: url(../img/arrow_black-bottom.png);
        background-size: 40px;
        background-position: center;
        margin-top: -20px;
        border-radius: 50%;
    }
.table-filter_popup{
    display: none;
    /* display: inline-block; */
    box-sizing: border-box;
    position: absolute;
    top: 75px;
    left: 50%;
    z-index: 2;
    width: 280px;
    background: #fff;
    margin-left: -140px;
    border-radius: 10px;
    
    box-shadow: 0px 3px 15px rgb(0 0 0 / 35%);
}
    .table-filter_popup::before{
        content: '';
        transform: rotate(45deg);
        display: inline-block;
        position: absolute;
        z-index: 1;
        top: -7px;
        left: 50%;
        width: 50px;
        height: 50px;
        background: #fff;
        margin-left: -25px;
        border-radius: 10px;
        box-shadow: 0px 3px 15px rgb(0 0 0 / 35%);
    }
.table-filter_popup_wrap{
    display: block;
    position: relative;
    z-index: 1;
    background: #fff;
    padding: 5px;
    border-radius: 10px;
}
.table-filter_popup_list{
    display: block;
    position: relative;
    z-index: 1;
    overflow-y: auto;
    max-height: 250px;
    background: #f5f5f5;
}
.table-filter_popup_item{
    display: block;
    padding: 10px 15px;
    background: rgba(0, 0, 0, 0);
    border-bottom: 1px solid #e5e5e5;
    transition: all 0.3s ease;
}
    .table-filter_popup_item:nth-last-child(1){
        border-bottom: 0px;
    }
    .table-filter_popup_item:hover{
        background: rgba(0, 0, 0, 0.05);
    }
/* Table Tree */
.table-tree{
    display: block;
}
.table-tree_title{
    cursor: pointer;
    display: block;
    box-sizing: border-box;
    position: relative;
    /* padding: 5px; */
    /* background: rgba(0, 0, 0, 0.05); */
    border-radius: 10px;
    /* font-family: 'prompt_medium'; */
    font-size: 2.2rem;
}
    .table-tree_title .number{
        font-family: 'prompt';
        font-size: 2rem;
    }
    .table-tree_title::after{
        content: '';
        transform: rotate(45deg);
        display: inline-block;
        position: absolute;
        top: 5px;
        right: 5px;
        width: 10px;
        height: 10px;
        border-right: 1px solid #999;
        border-bottom: 1px solid #999;
    }
.table-tree_root{
    display: block;
    display: none;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.05);
    margin: 5px 0px 2px;
    padding: 5px;
    border-radius: 10px;
}
    .table-tree_root .number{
        background: #75668d;
    }
.table-tree_text{
    display: block;
    padding: 5px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
    .table-tree_text:nth-last-child(1){
        border-bottom: 0px;
    }
.table-tree_link{
    display: inline-block;
    border-radius: 5px;
    padding: 0px 10px;
    font-size: 1.8rem;
    color: #999;
    transition: all 0.3s ease;
}
    .table-tree_link:hover{
        background: rgba(0, 0, 0, 0.07);
        color: #555;
    }
/* Table Detail */
.table-detail_member{
    display: block;
}
.table-detail_member_thumbnail{
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    width: 70px;
    height: 70px;
    border-radius: 10px;
}
.table-detail_member_text{
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    width: calc( 100% - 70px );
    padding-top: 5px;
    padding-left: 10px;
}
.table-detail_member_title{
    display: block;
    white-space: nowrap;
    font-family: 'prompt_medium';
    font-size: 2rem;
    line-height: 20px;
}
    .table-detail_member_title span{
        display: inline-block;
        vertical-align: super;
        box-sizing: border-box;
        width: 50px;
        margin-top: -5px;
        padding-left: 5px;
        font-family: 'prompt';
        font-size: 1.2rem;
        color: #987190;
    }
.table-detail_member_des{
    display: block;
    padding-top: 2px;
    font-size: 1.6rem;
    line-height: 20px;
    color: #777;
}
.table-detail_member_tel{
    display: block;
    padding-top: 2px;
    font-size: 1.4rem;
    line-height: 20px;
    color: #777;
}
.table-detail_member_link{
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    margin-top: 5px;
    border-top: 1px solid #e5e5e5;
    font-size: 1.4rem;
    line-height: 20px;
    color: #777;
}
/* Table Detail One */
.table-detail{
    display: block;
}
.table-detail_text{
    display: inline-block;
    width: calc( 100% - 60px );
}
.table-detail_text_title{
    display: inline-block;
    font-family: 'prompt_medium';
}
.table-detail_tool{
    display: inline-block;
    width: 60px;
    text-align: right;
}
.table-detail_button{
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    background: rgba(0, 0, 0, 0.07);
    padding: 0px 10px;
    border-radius: 10px;
    font-size: 1.6rem;
    color: #555;
    transition: all 0.5s ease;
}
.table-detail_button:hover {
    background: #75668d;
    color: #fff;
}
.table-detail_button:hover {
    background: #75668d;
    color: #fff;
}
/* Table Detail One */
.table-detail_one{
    display: block;
}
.table-detail_one_text{
    display: block;
    padding-bottom: 10px;
}
.table-detail_one_tool{
    display: block;
    padding-top: 5px;
    border-top: 1px solid #e5e5e5;
    text-align: right;
}
.table-detail_one_button{
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    background: rgba(0, 0, 0, 0.07);
    padding: 0px 10px;
    border-radius: 10px;
    font-size: 1.6rem;
    color: #555;
    transition: all 0.5s ease;
}
.table-detail_one_button:hover {
    background: #75668d;
    color: #fff;
}
.table-detail_one_button:hover {
    background: #75668d;
    color: #fff;
}
/* Table Detail Two */
.table-detail_two{
    display: block;
}
.table-detail_two_text{
    display: block;
    padding-bottom: 10px;
}
/* Table detail two Banner */
.table-detail_two_banner_img{
    display: block;
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
    padding-bottom: 10px;
}
    .table-detail_two_banner_img img{
        display: block;
        width: 100%;
        border-radius: 10px;
    }
.table-detail_two_banner_text{
    display: block;
}
.table-detail_two_banner_name{
    display: block;
    font-family: 'prompt_medium';
}
    .table-detail_two_banner_name span{
        font-family: 'prompt';
        color: #333;
    }
.table-detail_two_banner_link{
    display: block;
    font-family: 'prompt_medium';
    /* color: #2ea061; */
}
    .table-detail_two_banner_link span{
        font-family: 'prompt';
        color: #333;
    }
.table-detail_two_banner_get{
    display: block;
    font-family: 'prompt_medium';
    /* color: #2ea061; */
}
    .table-detail_two_banner_get span{
        font-family: 'prompt';
        color: #333;
    }
.table-detail_two_banner_list{
    display: block;
}
.table-detail_two_banner_title{
    display: block;
    font-family: 'prompt_medium';
    /* color: #2ea061; */
}
.table-detail_two_banner_item,
.table-detail_two_banner_empty{
    display: inline-block;
    padding: 0px 10px;
    border-radius: 10px;
    color: #fff;
}
    .table-detail_two_banner_list .gray{
        background: #aaa;
    }
    .table-detail_two_banner_list .blue{
        background: #579da1;
    }
    .table-detail_two_banner_list .green{
        background: #6ba570;
    }
@media only screen and (min-width: 600px){
    .table-detail_two_banner_img{
        display: inline-block;
        vertical-align: top;
        width: 100px;
        height: 100px;
        padding-bottom: 0px;
    }
        .table-detail_two_banner_img img{
            width: 100px;
            height: 100px;
        }
    .table-detail_two_banner_text{
        display: inline-block;
        vertical-align: top;
        box-sizing: border-box;
        width: calc( 100% - 140px );
        padding-left: 10px;
    }
}
.table-detail_two_tool{
    display: block;
    padding-top: 5px;
    border-top: 1px solid #e5e5e5;
    text-align: right;
}
.table-detail_two_button{
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    background: rgba(0, 0, 0, 0.07);
    padding: 0px 10px;
    border-radius: 10px;
    font-size: 1.6rem;
    color: #555;
    transition: all 0.5s ease;
}
.table-detail_two_button:hover {
    background: #75668d;
    color: #fff;
}
.table-detail_two_button:hover {
    background: #75668d;
    color: #fff;
}
/* TABLE EBOOK */
.table-detail_ebook{
    display: block;
}
.table-detail_ebook_text{
    display: block;
    padding-bottom: 5px;
}
    .table-detail_ebook_text_en{
        font-family: 'prompt_medium' !important;
        font-size: 2rem;
    }
    .table-detail_ebook_text_id{
        display: inline-block;
        vertical-align: super;
        box-sizing: border-box;
        width: 50px;
        padding-left: 5px;
        font-family: 'prompt';
        font-size: 1.2rem;
        color: #987190;
    }
.table-detail_ebook_text_number{
    box-sizing: border-box;
    width: unset !important;
    min-width: 30px;
    border-radius: 10px !important;
    padding: 0px 5px;
}
.table-detail_ebook_text_thai{
    display: block;
    font-size: 1.8rem;
}
.table-detail_ebook_text_spell{
    display: block;
    font-size: 1.8rem;
    color: #078588 ;
}
    .table-detail_ebook_text_spell b{
        color: #ffa671 !important
    }
.table-detail_ebook_text_des{
    display: block;
    font-size: 1.8rem;
    color: #555;
}
    .table-detail_ebook_text_des .blue{
        font-family: 'prompt_medium' !important;
        color: #5aaeb7;
    }
    .table-detail_ebook_text_des .red{
        color: #e75f5f;
    }
.table-detail_ebook_tool{
    display: block;
    padding-top: 5px;
    border-top: 1px solid #e5e5e5;
    text-align: left;
}
.table-detail_ebook_tool_left{
    display: inline-block;
    width: calc( 100% - 70px );
    text-align: left;
}
.table-detail_ebook_tool_right{
    display: inline-block;
    width: 70px;
    text-align: right;
}
.table-detail_ebook_tool_button{
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    background: rgba(0, 0, 0, 0.07);
    padding: 0px 10px;
    border-radius: 10px;
    font-size: 1.6rem;
    color: #555;
    transition: all 0.5s ease;
}
    .table-detail_ebook_tool_button:hover{
        background: rgba(0, 0, 0, 0.15);
    }
    .table-detail_ebook_tool .button_purple{
        background: #cbdcde;
        color: #667273;
    }
    .table-detail_ebook_tool .button_purple:hover{
        background: #a7c5c9;
        color: #475152;
    }
/* Responsive */
@media only screen and (min-width: 600px){
    .table-detail_one_text{
        display: inline-block;
        width: calc( 100% - 60px );
        padding-bottom: 0px;
    }
    .table-detail_one_tool{
        display: inline-block;
        width: 60px;
        padding-top: 0px;
        border-top: 0px;
    }
    .table-detail_two_text{
        display: inline-block;
        width: calc( 100% - 100px );
        padding-bottom: 0px;
    }
    .table-detail_two_tool{
        display: inline-block;
        width: 100px;
        padding-top: 0px;
        border-top: 0px;
    }
}
/* Table Payment */
.table-payment_button_detail{
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    width: 40px;
    height: 30px;
    background-image: url('../img/payment_icon_detail.png');
    background-size: 40px 30px;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    transition: all 0.3s ease;
}
    .table-payment_button_detail:hover{
        background-color: rgba(0, 0, 0, 0.1);
    }
.table-detail_payment{
    overflow: hidden;
    /* display: block; */
    display: none;
    background: rgba(0, 0, 0, 0.05);
    margin-top: 5px;
    /* padding: 5px 10px; */
    border-radius: 10px;
}
.table-detail_payment_row{
    display: block;
    box-sizing: border-box;
    padding: 0px 10px;
}
    .table-detail_payment_row_green{
        padding-top: 5px;
        color: #2ea061;
    }
    .table-detail_payment_row b{
        font-family: 'prompt_medium';
        font-weight: normal;
    }
.table-detail_payment_nubmer,
.table-detail_payment_nubmer_approve{
    display: inline-block;
    /* width: 30px; */
    height: 30px;
    background: #75668d;
    border-radius: 10px;
    text-align: center;
    padding: 0px 5px;
    line-height: 30px;
    color: #fff;
}
    .table-detail_payment_nubmer_approve{
        background: #9d906b;
    }
.table-detail_payment_new,
.table-detail_payment_gloden,
.table-detail_payment_defective{
    display: inline-block;
    height: 20px;
    background: #ffdc8e;
    border-radius: 5px;
    padding: 0px 5px;
    font-size: 1.4rem;
    text-align: center;
    line-height: 20px;
    color: #9d7916;
}
.table-detail_payment_gloden{
    background: #9d906b;
    color: #fff;
}
.table-detail_payment_defective{
    background: #ad8a8a;
    color: #fff;
}
.table-detail_payment_error{
    display: inline-block;
    background: #fd7474;
    border-radius: 5px;
    padding: 0px 5px;
    font-size: 1.8rem;
    text-align: center;
    line-height: 20px;
    color: #ffffff;
}
.table-detail_payment_title{
    display: block;
    font-family: 'prompt_medium';
}
.table-detail_payment_item{
    display: block;
}
.table-detail_payment_item_qty{
    display: inline-block;
    font-family: 'prompt';
    font-size: 1.6rem;
    color: #8f7e50;
}
.table-detail_payment_item_button{
    cursor: pointer;
    display: inline-block;
    background: #75668d;
    padding: 0px 10px;
    border-radius: 5px;
    font-size: 1.6rem;
    line-height: 26px;
    color: #fff;
    transition: all 0.3s ease;
}
    .table-detail_payment_item_button:hover{
        background: #605375;
    }
.table-detail_payment_shipping{
    display: block;
    /* padding: 5px 0px; */
    font-family: 'prompt_medium';
    color: #333;
}
    .table-detail_payment_shipping span{
        /* padding: 5px 0px; */
        font-family: 'prompt';
        font-size: 1.8rem;
        color: #333;
    }
.table-detail_payment_sum{
    display: block;
    /* padding: 0px 0px 5px; */
    font-family: 'prompt_medium';
    color: #2ea061;
}
.table-detail_payment_slip_img{
    /* display: block; */
    display: none;
    height: 500px;
    margin: 10px 0px;
    border: 1px solid #fff;
    box-shadow: 0 10px 10px rgb(0 0 0 / 10%), 0 10px 10px rgb(0 0 0 / 10%);
    user-select: none;
}
.table-detail_payment_confirm{
    display: block;
    padding: 5px 10px 10px;
}
.table-detail_payment_confirm_button,
.table-detail_payment_confirm_error{
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
    background: #2ea061;
    padding: 5px 10px;
    border-radius: 10px;
    border: 0px;
    outline: 0px;
    font-family: 'prompt_medium';
    font-size: 2rem;
    color: #fff !important;
    box-shadow: 0px 3px 5px 0px rgb(0 0 0 / 15%);
    user-select: none;
    transition: all 0.3s ease;
}
    .table-detail_payment_confirm_error{
        background: rgba(0, 0, 0, 0.1);
        font-family: 'prompt_medium';
        font-size: 1.8rem;
        color: #222 !important;
        box-shadow: none;
    }
    .table-detail_payment_confirm_error:hover{
        background: rgb(255, 82, 82);
        color: #fff !important;
    }
.table-detail_payment_button{
    cursor: pointer;
    display: inline-block;
    /* background: #2ea061; */
    background: #75668d;
    padding: 0px 10px;
    border-radius: 10px;
    color: #fff;
    user-select: none;
}
    .table-detail_payment_button_error{
        background: #fd7474;
    }
.table-detail_payment_del{
    display: block;
    box-sizing: border-box;
    text-align: right;
    background: rgba(0, 0, 0, 0.05);
    padding: 5px 10px;
}
    .table-detail_payment_del span{
        font-size: 1.6rem;
        color: #555;
    }
.table-detail_payment_del_button{
    cursor: pointer;
    display: inline-block;
    font-size: 1.8rem;
    color: #ff2828;
    transition: all 0.3s ease;
    text-decoration-line: underline;
    text-decoration-color: rgba(0, 0, 0, 0);
    user-select: none;
}
    .table-detail_payment_del_button:hover{
        text-decoration-color: #cf2929;
        color: #cf2929;
    }
.table-detail_payment_del_dialog{
    /* display: block; */
    display: none;
    padding: 5px 10px 10px;
    border-radius: 10px;

    background: rgba(0, 0, 0, 0.07);
}
.table-detail_payment_del_confirm{
    cursor: pointer;
    display: inline-block;
    background: #fd7474;
    padding: 0px 10px;
    border-radius: 10px;
    color: #fff;
    user-select: none;
}
.table-detail_payment_del_cancel{
    cursor: pointer;
    display: inline-block;
    background: #8d8b8f;
    padding: 0px 10px;
    border-radius: 10px;
    color: #fff;
    user-select: none;
}
.table-detail_payment_status{
    display: block;
    font-family: 'prompt_medium';
}
.table-detail_payment_status_selection{
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
    max-width: 260px;
    background: rgba(0, 0, 0, 0.07);
    padding: 0px 10px;
    border-radius: 5px;
    border: 0px;
    outline: 0px;
    font-family: 'prompt';
    line-height: 30px;
    color: #555;
}
.table-member_slip{
    /* display: block; */
    display: none;
    height: 500px;
    margin: 20px;
    border: 1px solid #fff;
    box-shadow: 0 10px 10px rgb(0 0 0 / 10%), 0 10px 10px rgb(0 0 0 / 10%);
}
/* Table Tool */
.table-tool{
    display: block;
    padding: 5px 0px;
}
.table-tool_option{
    display: inline-block;
    vertical-align: middle;
    width: calc( 100% - 60px );
}
.table-tool_option_delimiter{
    display: inline-block;
    vertical-align: top;
    width: 1px;
    height: 20px;
    background: #c7c7c7;
    margin-top: 5px;
}
.table-tool_option_link{
    display: inline-block;
    vertical-align: top;
}
.table-tool_option_icon{
    display: inline-block;
    vertical-align: top;
    width: 30px;
    height: 30px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}
    .table-tool_option_icon_copy{
        cursor: pointer;
        display: inline-block;
        vertical-align: top;
        width: 20px;
        height: 20px;
        background-color: #a8cdc9 !important;
        border-radius: 5px;
    }
.table-tool_option_link .ban{
        background-color: #ff6565;
    }
.table-tool_option_send{
    display: inline-block;
}
.table-tool_option_send_select{
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
    width: 30px;
    height: 30px;
    background: #c7c7c7;
    border: 5px solid #dcdcdc;
    border-radius: 10px;
    transition: background 0.3s ease;
}
    .table-tool_option_send_select:hover{
        background: #aaa;
    }
    .table-tool_option_send .active{
        background: #75668d;
    }
.table-tool_option_send_icon{
    display: none;
    vertical-align: top;
    width: 40px;
    height: 30px;
}
.table-tool_option_send_text{
    display: inline-block;
    vertical-align: top;
    font-size: 1.6rem;
}
/* Table Tool Edit */
.table-tool_edit{
    display: inline-block;
    vertical-align: middle;
    width: 60px;
    text-align: right;
}
.table-tool_button{
    display: inline-block;
    vertical-align: top;
    background: rgba(0, 0, 0, 0.07);
    padding: 0px 10px;
    border-radius: 10px;
    font-size: 1.6rem;
    color: #555;
    transition: all 0.5s ease;
}
    .table-tool_button:hover{
        background: #75668d;
        color: #fff;
    }
    .table-tool_button_fail{
        background: #ff8181 !important;
        color: #fff !important;
    }
/* Table List */
.table-list{
    display: block;
    padding: 5px 0px 0px;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    font-size: 1.8rem;
}
.table-list_title{
    display: block;
    padding: 5px 0px 0px;
    font-family: 'prompt_medium';
    font-size: 2.2rem;
    color: #75668d;
}
.table-list_time{
    display: block;
    margin-top: 10px;
    padding: 0px 0px 0px 10px;
    border-left: 5px solid #1d9e5e;
    font-size: 1.8rem;
}
    .table-list_time b{
        font-family: 'prompt_medium';
        font-weight: normal;
        font-size: 2rem;
        color: #1d9e5e;
    }
.table-list_item{
    display: block;
    padding: 0px 5px;
    padding-left: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
    .table-list_item:nth-last-child(1){
        border-bottom: 0px;
        margin-bottom: 0px;
    }
.table-list_warning{
    display: inline-block;
    background: #ff7171;
    padding: 0px 10px;
    border-radius: 5px;
    color: #fff;
}
.table-list_text{
    display: block;
    line-height: 24px;
}
.table-list_button,
.table-list_button_gray{
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
    background: #75668d;
    padding: 0px 10px;
    border-radius: 10px;
    border: 0px;
    outline: 0px;
    font-size: 2rem;
    color: #fff !important;
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.15);
    user-select: none;
    transition: all 0.3s ease;
}
    .table-list_button_gray{
        background: #2ea061;
    }
.table-list_text_title{
    display: block;
}
.table-list_sum{
    display: block;
    padding: 5px 10px 5px;
    font-family: 'prompt_medium';
    font-size: 2rem;
}
.table-list_tool{
    display: block;
    padding-top: 5px;
    text-align: right;
}
.table-list_tool_time{
    display: inline-block;
    font-size: 1.4rem;
    color: #aaa;
}
.table-list_tool_money{
    display: inline-block;
    padding-left: 10px;
    font-family: 'prompt';
    font-size: 2rem;
}
/* Table List Address ชั่วคราว */
.table-list_address{
    display: block;
    box-sizing: border-box;
    background: #e0dbe6;
    padding: 10px;
    border-radius: 10px;
}
.table-list_address_slip{
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    background: #a79db3;
    border-radius: 10px;
    padding: 0px 10px;
    font-size: 2rem;
    color: #fff;
}
    .table-list_address_slip_fail{
        background: #ff8181 !important;
    }
.table-list_address_money{
    display: inline-block;
    vertical-align: top;
    font-size: 2.2rem;
    color: #726780;
}
.table-list_address_hr{
    border: 0px;
    border-top: 1px solid #d0c7da;
}
.table-list_address_text{
    display: block;
}
/* Table Search */
.table-search{
    display: block;
    padding: 0px !important;
}
.table-search_form{
    display: block;
    box-sizing: border-box;
    position: relative;
    background: #f5f5f5;
    padding-right: 50px;
    border-radius: 10px;
    transition: all 0.3s ease;
}
.table-search_input{
    display: block;
    box-sizing: border-box;
    width: 100%;
    background: rgba(0, 0, 0, 0);
    padding: 5px 15px;
    border: 0px;
    outline: 0px;
    font-family: 'prompt';
    line-height: 30px;
    text-align: left;
    color: #555;
    transition: all 0.3s ease;
}
.table-search_submit{
    cursor: pointer;
    display: inline-block;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 50px;
    height: 40px;
    background-image: url('../img/icon-tool_search.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #4391ac;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border: 0px;
    outline: 0px;
    transition: all 0.3s ease;
    user-select: none;
}
    .table-search_submit:hover{
        background-color: #1f657c;
    }
    .table-search .admin{
        background-color: #75668d;
    }
    .table-search .admin:hover{
        background-color: #605375;
    }
/* Responsive : Table Search */
@media only screen and (min-width: 500px){
    .table-search_form{
        padding-right: 70px;
    }
    .table-search_submit{
        width: 70px;
    }
}
/* Table Voice */
.table-voice{
    display: block;
}
.table-voice_text{
    display: block;
}
.table-voice_text_en{
    display: block;
    font-family: 'prompt_medium';
    font-size: 2rem;
}
.table-voice_text_en .number{
    display: inline-block;
    box-sizing: border-box;
    background: #4391ac;
    min-width: 30px;
    width: unset;
    border-radius: 10px;
    padding: 0px 5px;
    font-size: 1.6rem;
    text-align: center;
    color: #fff;
}
    .number_lemon{
        background: #7b9a77 !important;
    }
.table-voice_text_spell{
    display: block;
    font-size: 2rem;
    color: #4391ac;
}
    .table-voice_text_spell b{
        font-family: 'prompt_semibold';
        color: #28748e;
    }
    .text_spell_color{
        color: #078588 !important;
    }
    .text_spell_color b{
        color: #ffa671 !important;
    }
.table-voice_text_th{
    display: block;
    font-size: 1.8rem;
    color: #777;
}
.table-voice_edit{
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.1);
    padding: 0px 5px;
    border-radius: 5px;
    font-family: 'prompt';
    font-size: 1.8rem;
    color: #777;
    transition: all 0.3s ease;
}
    .table-voice_edit:hover{
        background-color: rgba(0, 0, 0, 0.2);
    }
.table-voice_category{
    display: inline-block;
    vertical-align: super;
    padding-left: 5px;
    font-size: 1.4rem;
    line-height: 14px;
    color: #2ea061;
}
/* Table voice Tool */
.table-voice_tool{
    display: block;
    padding-top: 5px;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    text-align: right;
}
/* Table Voice Tool Speed */
.table-voice_tool_speed{
    display: inline-block;
    vertical-align: top;
    position: relative;
    font-size: 1.8rem;
    color: #777;
}
.table-voice_tool_speed_label{
    display: inline-block;
}
.table-voice_tool_speed_current{
    display: inline-block;
}
.table-voice_tool_speed_button{
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    position: relative;
    padding: 0px 23px 0px 5px;
    border-radius: 10px;
    color: #55707c;

    transition: all 0.3s ease;
}
    .table-voice_tool_speed_button::after{
        content: '';
        display: inline-block;
        position: absolute;
        top: 50%;
        right: 8px;
        width: 7px;
        height: 7px;
        margin-top: -5px;
        border-right: 1px solid #435963;
        border-bottom: 1px solid #435963;

        transform: rotate(45deg);
        transition: all 0.1s linear;
    }
    .table-voice_tool_speed_button:hover{
        background: #c5d4da;
    }
.table-voice_tool_speed_list{
    /* display: inline-block; */
    display: none;
    position: absolute;
    top: 30px;
    left: 50%;
    width: 70px;
    background: #fff;
    margin-left: -35px;
    border-radius: 10px;
    box-shadow: 0px 3px 15px rgb(0 0 0 / 35%);
}
    .table-voice_tool_speed_list::before{
        content: '';
        transform: rotate(45deg);
        display: inline-block;
        position: absolute;
        top: -7px;
        left: 50%;
        z-index: 1;
        width: 30px;
        height: 30px;
        background: #fff;
        margin-left: -15px;
        border-radius: 10px;
    }
.table-voice_tool_speed_item{
    display: block;
    position: relative;
    z-index: 2;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    text-align: center;
}
    .table-voice_tool_speed_item:nth-child(1){
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
    .table-voice_tool_speed_item:nth-last-child(1){
        border-bottom: 0px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
    .table-voice_tool_speed_item:hover{
        background: #c5d4da;
    }
/* Table Voice Tool Button */
.table-voice_tool_button{
    cursor: pointer;
    vertical-align: top;
    display: inline-block;
    background: #c5d4da;
    padding: 0px 10px;
    border-radius: 10px;
    font-size: 1.6rem;
    text-align: center;
    color: #55707c;
    transition: all 0.3s ease;
    user-select: none;
}
    .table-voice_tool_button:hover{
        background: #759aa8;
        color: #fff;
    }
@media only screen and (min-width: 600px){
    .table-voice_text{
        display: inline-block;
        vertical-align: middle;
        width: calc( 100% - 150px );
    }
    .table-voice_tool{
        display: inline-block;
        vertical-align: middle;
        width: 150px;
        padding-top: 0px;
        border-top: 0px;
    }
    .table-voice_tool_speed{
        padding-bottom: 5px;
    }
}
/* table-work */
.table-work{
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 600px;
    background-color: #fff;
    margin: 0 auto;
    padding: 5px;
    border-radius: 10px;

    box-shadow: 0px 3px 5px 0px rgb(0 0 0 / 10%);
}
.table-work_list{
    display: block;
    overflow: hidden;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.03);
}
.table-work_item{
    display: block;
    padding: 10px;
    border-bottom: 1px solid #eee;
}
    .table-work_item.active{
        background-color: #e7e4ea;
        border-bottom: 0px;
    }
    .table-work_item:nth-last-child(1){
        border-bottom: 0px;
    }
.table-work_item_name{
    display: block;
}
    .table-work_item_name span{
        font-size: 1.6rem;
        color: #777;
    }
.table-work_item_des{
    display: block;
    padding-top: 3px;
    font-size: 1.6rem;
    line-height: 20px;
    color: #777;
}
/* Table Ebook */
.table-ebook{
    display: block;
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;

    /* background: rgba(0, 0, 0, 0.1); */
}
/* Table Ebook Error */
.table-ebook_error{
    /* display: block; */
    display: none;
    box-sizing: border-box;
    background: #e9d9d9;
    padding: 5px 10px;
    border-radius: 10px;
    margin: 5px 0px 2px;
}
.table-ebook_error_button{
    cursor: pointer;
    display: inline-block;
    transition: all 0.3s ease;
}
    .table-ebook_error_button:hover{
        color: #fc7676;
    }
.table-ebook_error_row{
    display: block;
}
/* Table Ebook Empty */
.table-ebook_empty{
    display: block;
    box-sizing: border-box;
    max-width: 400px;
    width: 100%;
    background: rgba(0, 0, 0, 0.1);
    margin: 20px auto 0px;
    padding: 10px;
    text-align: center;
}
.table-ebook_header_button{
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: middle;
    background: #75668d;
    padding: 10px 20px;
    /* border-radius: 10px; */
    border: 0px;
    outline: 0px;
    font-family: 'prompt_medium';
    font-size: 2.2rem;
    color: #fff !important;
    box-shadow: 0px 3px 5px 0px rgb(0 0 0 / 15%);
    user-select: none;
    transition: all 0.3s ease;
}
    .table-ebook_header_button:hover{
        background: #605375;
    }
    .table-ebook_header_button_left{
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }
    .table-ebook_header_button_right{
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
    }
    .table-ebook_header_button_delimiter{
        display: inline-block;
        box-sizing: border-box;
        vertical-align: middle;
        width: 1px;
        height: 50px;
    }
.table-ebook_des{
    display: block;
    padding-top: 10px;
    text-align: center;
    font-size: 1.8rem;
}
.table-ebook_list{
    display: block;
    text-align: center;
    padding: 10px 0px;
}
.table-ebook_item{
    display: inline-block;
    vertical-align: top;
    position: relative;
    max-width: 150px;
    margin: 15px 10px;
}
.table-ebook_item_creator{
    display: inline-block;
    position: absolute;
    top: -20px;
    right: -20px;
    width: 50px;
    height: 50px;
}
.table-ebook_item_icon{
    display: inline-block;
    width: 120px;
}
.table-ebook_item_name{
    display: block;
}
    .table-ebook_item_name span{
        display: inline-block;
        font-size: 1.6rem;
    }
    .table-ebook_item_name .number_hidden{
        background: #75668d;
    }
    .table-ebook_item .hidden{
        color: #7f6ba7;
    }
    .table-ebook_item .publish{
        color: #519b5d;
    }
.table-ebook_item_tool{
    display: block;
    height: 20px;
    padding-top: 5px;
}
.table-ebook_item_tool_link{
    display: inline-block;
    vertical-align: top;
    font-size: 1.8rem;
    line-height: 20px;
}
.table-ebook_item_tool_delimiter{
    display: inline-block;
    vertical-align: top;
    width: 1px;
    height: 20px;
    background: rgba(0, 0, 0, 0.3);
    line-height: 20px;
    margin: 0px 5px;
}
/* Table Ebook Category */
.table-ebook_title{
    display: block;
    box-sizing: border-box;
    padding: 5px;
    font-family: 'prompt_medium';
    font-size: 2.2rem;
    color: #7f6ba7;
}
/* Table Ebook Sound */
.table-ebook_sound{
    display: block;
}
.table-ebook_sound_header{
    display: block;
    padding-bottom: 30px;
    text-align: center;
}
.table-ebook_sound_header_item{
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    position: relative;
    background: rgba(0, 0, 0, 0.05);
    padding: 10px;
    border-radius: 15px;
    transition: all 0.3s ease;
    user-select: none;
}
    .table-ebook_sound_header_item:hover{
        background: rgba(0, 0, 0, 0.1);
    }
.table-ebook_sound_header_title{
    display: block;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    font-family: 'prompt_medium';
    font-size: 4rem;
    line-height: 50px;
    color: #75668d;
}
.table-ebook_sound_header_count{
    display: block;
}
.table-ebook_sound_header_arrow{
    display: inline-block;
    position: absolute;
    bottom: -40px;
    left: 50%;
    width: 40px;
    margin-left: -20px;
}
.table-ebook_sound_textarea{
    width: calc( 100% - 6px);
    min-width: calc( 100% - 6px);
    margin: 3px;
    background: #f5f5f5;
}
/* Table Product */
.table-product{
    display: block;
    box-sizing: border-box;
    padding: 30px 10px 10px;
    text-align: center;
}
.table-product_title{
    display: block;
    box-sizing: border-box;
    font-family: 'prompt_medium';
    font-size: 2.4rem;
    /* text-align: left; */
}
.table-product_item{
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
    width: 100%;
    max-width: 300px;
    padding: 20px 20px;
    text-align: center;
}
.table-product_item_icon{
    display: inline-block;
    width: 150px;
}
.table-product_item_text{
    display: block;
}
.table-product_item_name{
    display: block;
    font-family: 'prompt_medium';
    font-size: 2.2rem;
    text-align: center;
}
.table-product_item_des{
    display: block;
    padding-bottom: 5px;
}
.table-product_item_button{
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
    background: #2ea061;
    padding: 5px 15px;
    border-radius: 10px;
    border: 0px;
    outline: 0px;
    font-family: 'prompt';
    font-size: 2.2rem;
    color: #fff !important;
    box-shadow: 0px 3px 5px 0px rgb(0 0 0 / 15%);
    user-select: none;
    transition: all 0.3s ease;
}
    .table-product_item_button:hover{
        background: #2d8655;
    }
    .table-product_item_button:active{
        background: #11c15f;
    }



/* TAB */
.tab{
    display: block;
    padding-top: 20px;
    text-align: center;
}
.tab-scroll{
    display: block;
    overflow-x: scroll;
    width: 100%;
    padding: 10px 0px;
}
    .tab-scroll::-webkit-scrollbar{ width: 0px; height: 0px; } /* Scroll bar */
    .tab-scroll::-webkit-scrollbar-track{ background: #333 } /* Scroll BG */
    .tab-scroll::-webkit-scrollbar-thumb{ background: #44b576 } /* Scroll Tab */
.tab-wrap{
    /* overflow: hidden; */
    display: inline-block;
    vertical-align: top;
    border-radius: 10px;
    white-space: nowrap;
}
.tab-button{
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    position: relative;
    background: #f7f7f7;
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1);
    padding: 5px 15px;
    border-right: 1px solid #e5e5e5;
    font-family: 'prompt_medium';
    transition: all 0.1s ease;
    user-select: none;
}
    .tab-button:nth-child(1){
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }
    .tab-button:nth-last-child(1){
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
    }
    .tab-button span{
        display: inline-block;
        vertical-align: top;
        font-family: 'prompt';
        font-size: 1.6rem;
    }
    .tab-button:hover{
        background: #e9ecf0;
    }
    .tab-button:nth-last-child(1){
        border-right: 0px;
    }
    .tab-scroll .active{
        background: #818ea2;
        border-right: 0px;
        color: #fff;
    }
/* Tab Button Alert */
.tab-button_alert{
    display: inline-block;
    box-sizing: border-box;
    position: absolute;
    top: -5px;
    right: -5px;
    z-index: 100;
    background: #2ea061;
    min-width: 20px;
    height: 20px;
    padding: 0px 5px;
    border-radius: 10px;
    font-family: 'prompt';
    font-size: 1.6rem;
    text-align: center;
    line-height: 20px;
    color: #fff;
}
    .tab-button_alert_purple{
        background: #75668d;
    }
    .tab-button_alert_golden{
        background: #a99045;
    }
    .tab-button_alert_yellow{
        background: #ff8f64;
    }
    .tab-button_alert_blue{
        background: #6299a3;
    }



/* FILTER */
.filter{
    display: block;
    padding: 10px 0px 20px;
    text-align: center;
    
}
.filter-delimiter{
    display: block;
    max-width: 300px;
    border-top: 1px solid rgba(0,0,0,0.1);
    margin: 20px auto;
}
/* Filter Mini */
.filter-mini{
    display: inline-block;
    padding: 10px 0px;
    /* border-bottom: 1px solid rgba(0, 0, 0, 0.10); */
}
.filter-mini_des{
    display: block;
    padding-top: 5px;
    color: #555;
}
.filter-mini_item{
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: middle;
    position: relative;
    padding: 5px 15px;
    border-radius: 10px;
}
    .filter-mini_all:hover,
    .filter-mini_selection:hover{
        background: rgba(0,0,0,0.05);
    }
.filter-mini_all{
    font-family: 'prompt_medium';
    color: #222;
}
.filter-mini_delimiter{
    cursor: default;
    width: 1px;
    height: 30px;
    padding: 0px;
    background: rgba(0, 0, 0, 0.15);
}
.filter-mini_selection{
    padding-right: 30px;
}
    .filter-mini_selection_text{
        display: inline-block;
    }
    .filter-mini_selection_arrow{
        display: inline-block;
        position: absolute;
        top: 10px;
        right: 5px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        transition: all 0.3s ease;
    }
/* Filter Mini Popup */
.filter-mini_popup{
    display: none;
    /* display: inline-block; */
    position: absolute;
    top: 55px;
    left: 50%;
    width: 280px;
    background: #fff;
    margin-left: -195px;
    border-radius: 10px;
    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.15);
}
    .filter-mini_popup::before {
        content: '';
        transform: rotate(45deg);
        display: inline-block;
        position: absolute;
        z-index: 1;
        top: -5px;
        left: 50%;
        width: 50px;
        height: 50px;
        background: #fff;
        margin-left: 30px;
        border-radius: 10px;
        box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.15);
        transition: all 0.3s ease;
    }
.filter-mini_popup_wrap{
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 2;
    border-radius: 10px;
}
.filter-mini_popup_list{
    display: block;
    overflow-y: auto;
    max-height: 300px;
    background: #fff;
}
.filter-mini_popup_link{
    display: block;
    box-sizing: border-box;
    padding: 10px 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    text-align: left;
    color: #333;
    transition: all 0.3s ease;
}
    .filter-mini_popup_link:hover{
        background: #ffe7bc;
    }
    .filter-mini_popup_link:nth-last-child(1){
        border-bottom: 0px;
    }
    .filter-mini_popup_link .number{
        display: inline-block;
        width: 20px;
        height: 20px;
        background: #4e9e72;
        border-radius: 50%;
        font-size: 1.6rem;
        line-height: 20px;
        text-align: center;
        color: #fff;
    }
.filter-mini_popup_link_empty{
    display: block;
    box-sizing: border-box;
    padding: 15px 15px;
    text-align: center;
    color: #333;
    user-select: none;
}
.filter-mini_popup_title{
    display: block;
    padding: 10px 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    font-family: 'prompt_medium';
    font-size: 2.4rem;
    text-align: left;
    color: #333;
    transition: all 0.3s ease;

    background-color: #eeeeee;
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23aaaaaa' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}
@media only screen and (min-width: 400px){
    .filter-mini_popup {
        width: 360px;
        margin-left: -235px;
    }
}
@media only screen and (min-width: 440px){
    .filter-mini_popup {
        width: 400px;
        margin-left: -255px;
    }
}



/* FILTER ICON */
.filter-icon{
    display: block;
    box-sizing: border-box;
    max-width: 640px;
    margin: 0 auto;
    padding: 10px 20px 0px;
    text-align: center;
}
.filter-icon_item{
    display: block;
    max-width: 120px;
    margin: 0 auto;
    padding: 10px;
}
.filter-icon_link{
    display: block;
}
.filter-icon_img{
    display: block;
    width: 100px;
}
@media only screen and (min-width: 360px){
    .filter-icon_item{
        display: inline-block;
        vertical-align: top;
    }
}



/* NUMPAGE   */
.numpage{
    display: block;
    text-align: center;
}
.numpage-text{
    display: inline-block;
    vertical-align: middle;
    padding: 5px 10px;
    color: #333;
}
.numpage-back,
.numpage-next{
    opacity: 0.7;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: rgba(0, 0, 0, 0.07);
    border-radius: 50%;
    font-size: 1.8rem;
    line-height: 40px;
    color: #777;
    transition: all 0.3s ease;
}
    .numpage-back:hover,
    .numpage-next:hover{
        background-color: rgba(0, 0, 0, 0.2);
    }
    .numpage-back{ background-image: url('../img/icon-numpage_arrow_left_b.png') }
    .numpage-next{ background-image: url('../img/icon-numpage_arrow_right_b.png') }
/* Numpage Navigate */
.numpage-nav{
    cursor: pointer;
    display: inline-block;
    position: relative;
    width: 30px;
    height: 40px;
}
.numpage-nav_icon{
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
    width: 30px;
    height: 40px;
}
/* Numpage Popup */
.numpage-nav_popup{
    display: none;
    /* display: inline-block; */
    position: absolute;
    left: 50%;
    bottom: 50px;
    width: 200px;
    background: #fff;
    margin-left: -100px;
    border-radius: 20px;
    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.15);
}
    .numpage-nav_popup::before{
        content: '';
        transform: rotate(45deg);
        display: inline-block;
        position: absolute;
        z-index: 1;
        bottom: -5px;
        left: 50%;
        width: 50px;
        height: 50px;
        background: #fff;
        margin-left: -25px;
        border-radius: 10px;
        box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.1);
    }
.numpage-nav_list{
    display: block;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    z-index: 2;
    background: #fff;
}
.numpage-nav_wrap{
    display: block;
    overflow-y: auto;
    max-height: 170px;
}
.numpage-nav_link{
    display: block;
    box-sizing: border-box;
    padding: 10px 20px;
    border-bottom: 1px solid #e5e5e5;
    text-align: center;
    transition: all 0.3s ease;
}
    .numpage-nav_link:nth-last-child(1){
        border-bottom: 1px solid rgba(255, 255, 255, 1);   
    }
    .numpage-nav_link:hover{
        background: #ffe7bc;
    }
.numpage-nav_jump{
    display: block;
    position: relative;
    z-index: 3;
    height: 50px;
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
    .numpage-nav_jump::before{
        content: '';
        display: inline-block;
        position: absolute;
        z-index: 5;
        top: -2px;
        left: 0px;
        width: 100%;
        height: 1px;
        background: rgba(0, 0, 0, 0.09);
    }
    .numpage-nav_jump::after{
        content: '';
        display: inline-block;
        position: absolute;
        z-index: 5;
        top: -3px;
        left: 0px;
        width: 100%;
        height: 1px;
        background: rgba(0, 0, 0, 0.05);
    }
.numpage-nav_jump_wrap{
    display: block;
    overflow: hidden;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
.numpage-nav_jump_link{
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
    background: #fff;
    padding: 10px 0px;
    font-size: 1.8rem;
    transition: all 0.1s ease;
}
    .numpage-nav_jump_link:hover{
        background: #ffe7bc;
    }
    .numpage-nav_jump_link:nth-child(1){
        width: 90px;
    }
    .numpage-nav_jump_link:nth-child(3){
        width: 109px;
    }
.numpage-nav_jump_delimiter{
    display: inline-block;
    vertical-align: middle;
    width: 1px;
    height: 30px;
    background: #ccc;
}



/* WARNING */
.warning{
    display: block;
    padding: 40px 0px 0px;
    text-align: center;
}
.warning-title{
    display: block;
    font-family: 'prompt_medium';
    font-size: 2.4rem;
    color: #eb4848;
}
.warning-text{
    display: inline-block;
    width: 100%;
    max-width: 600px;
    color: #f16161;
}
.warning-message{
    display: block;
    padding-top: 10px;
    font-family: 'prompt_medium';
    text-align: center;
    color: #f16161;
}
.warning-button{
    display: block;
    padding-top: 20px;
}



/* CREATE */
.create{
    display: block;
}
.create-button{
    display: block;
    padding: 20px 0px 0px;
    text-align: center;
}
.create-button_des{
    display: block;
    padding-top: 5px;
    font-size: 1.6rem;
    text-align: center;
    color: #ff9a57;
}



/* QR-CORD */
.qr-code{
    display: none;
    /* display: inline-block; */
    box-sizing: border-box;
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    z-index: 999;
    width: calc( 100% - 20px );
    max-width: 300px;
    background: #fff;
    margin: 5% auto;
    padding: 20px;
    border-radius: 20px;
    text-align: center;

    box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.1);
}
.qr-code_img{
    display: block;
    width: 250px;
}
.qr-code_text{
    display: block;
    max-width: 300px;
    margin: 0 auto;
    padding: 5px 0px 5px;
}
.qr-code_title{
    display: block;
    font-family: 'prompt_semibold';
    font-size: 2.4rem;
    color: #44b576;
}
.qr-code_des{
    display: block;
    padding-top: 5px;
    line-height: 26px;
    color: #555;
}
.qr-code_link{
    cursor: pointer;
    display: block;
    box-sizing: border-box;
    background: #44b576;
    padding: 5px 50px;
    border-radius: 10px;
    font-family: 'prompt_regular';
    color: #fff;
    transition: all 0.3s ease;
    user-select: none;
}
    .qr-code_link:hover{
        background: #30995f;
    }
.qr-code_close{
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
    position: absolute;
    bottom: -30px;
    right: 20px;
    z-index: 1;
    width: 60px;
    background: #8471a1;
    padding: 0px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    font-family: 'prompt';
    color: #fff;
    transition: all 0.3s ease;
    user-select: none;
}
    .qr-code_close:hover{
        background: #605375;
    }



/* BAR */
.bar{
    display: block;
    padding: 20px 0px 10px;
    border-bottom: 1px solid #eee;
}
/* Bar Item */
.bar-item{
    display: inline-block;
    vertical-align: middle;
    padding: 5px 5px;
}
.bar-item_delimiter{
    display: inline-block;
    vertical-align: middle;
    width: 1px;
    height: 30px;
    background: #ddd;
    margin: 0px 5px;
}
/* Bar Profile */
.bar-profile{
    display: inline-block;
    box-sizing: border-box;
    vertical-align: middle;
    width: calc( 100% - 40px );
}
.bar-profile_link{
    display: inline-block;
    vertical-align: middle;
}
.bar-profile_photo{
    display: inline-block;
    box-sizing: border-box;
    vertical-align: middle;
    width: 60px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1);
}
.bar-profile_text{
    display: inline-block;
    box-sizing: border-box;
    vertical-align: middle;
    width: calc( 100% - 60px );
    padding-left: 10px;
}
.bar-profile_name{
    display: block;
    font-family: 'prompt_medium';
    font-size: 2rem;
}
.bar-profile_des{
    display: block;
    font-size: 1.6rem;
    line-height: 20px;
    color: #777;
}
/* Bar History */
.bar-history{
    display: inline-block;
    box-sizing: border-box;
    vertical-align: middle;
    width: 40px;
    text-align: right;
}
.bar-history_button{
    cursor: pointer;
    display: inline-block;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.07);
    border-radius: 50%;
    transition: all 0.1s ease;
    user-select: none;
}
    .bar-history_button:hover{
        background: rgba(0, 0, 0, 0.15);
    }
.bar-history_button_img{
    display: inline-block;
    vertical-align: middle;
    height: 40px;
}
.bar-history_button_text{
    display: none;
    vertical-align: middle;
}
@media only screen and (min-width: 600px){
    /* Topbar Profile */
    .bar-profile{
        width: calc( 100% - 140px );
    }
    .bar-history{
        width: 140px;
    }
    .bar-profile_photo{
        width: 70px;
    }
    .bar-profile_text{
        width: calc( 100% - 70px );
    }
    /* Topbar History */
    .bar-history{
        width: 140px;
    }
    .bar-history_button{
        width: unset;
        background: rgba(0, 0, 0, 0);
        padding: 0px 10px 0px 5px;
        border-radius: 10px;
    }
    .bar-history_button_img{
        height: 30px;
    }
    .bar-history_button_text{
        display: inline-block;
        font-family: 'prompt_medium';
    }
}



/* Shop */
.shop{
    display: block;
}
.shop-show{
    display: block;
    padding: 30px 0px;
    text-align: center;
}
.shop-show_img{
    display: block;
    width: 100%;
    max-width: 300px;
}
.shop-show_text{
    display: block;
    box-sizing: border-box;
    padding: 20px 0px;
    text-align: center;
}
.shop-show_text_title{
    display: block;
    font-family: 'prompt_semibold';
    font-size: 2.8rem;
}
.shop-show_text_des{
    display: block;
    max-width: 700px;
    margin: 0 auto;
    padding: 10px 0px;
}
.shop-show_text_button{
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
    background: #2ea061;
    padding: 10px 30px;
    border-radius: 10px;
    border: 0px;
    outline: 0px;
    font-family: 'prompt_medium';
    font-size: 2.2rem;
    color: #fff;
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.15);
    user-select: none;
    transition: all 0.3s ease;
}
    .shop-show_text_button:hover{
        background: #2d8655;
    }
/* Shop Product */
.shop-product{
    display: block;
    text-align: center;
}
.shop-product_cart_bar{
    display: inline-block;
    box-sizing: border-box;
    position: fixed;
    bottom: 0px;
    left: 0;
    right: 0;
    z-index: 11111;
    width: 100%;
    max-width: 960px;
    background: #fff;
    margin: 0 auto;
    padding: 5px 10px;
    border-top: 1px solid #ddd;
    text-align: center;
}
.shop-product_cart_bar_detail{
    display: inline-block;
    vertical-align: middle;
    width: calc( 100% - 100px );
    max-width: 450px;
    text-align: left;
}
.shop-product_cart_bar_price{
    display: inline-block;
    vertical-align: middle;
    padding-right: 10px;
    font-family: 'prompt_medium';
    font-size: 2.2rem;
}
.shop-product_cart_bar_price span{
    /* display: none; */
    text-decoration: line-through;
    font-family: 'prompt';
    font-size: 1.8rem;
    color: #aaa;
}
.shop-product_cart_bar_qty{
    /* display: inline-block; */
    display: none;
    box-sizing: border-box;
    vertical-align: middle;
    padding: 0px 5px;
    font-size: 1.8rem;
    color: #777;
}
.shop-product_cart_bar_button{
    display: inline-block;
    vertical-align: middle;
    width: 100px;
    text-align: right;
}
.shop-product_cart_bar_add{
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
    background: #2ea061;
    padding: 0px 5px 0px 10px;
    border-radius: 10px;
    border: 0px;
    outline: 0px;
    font-family: 'prompt';
    font-size: 2.2rem;
    text-align: right;
    line-height: 40px;
    color: #fff !important;
    user-select: none;
    transition: all 0.3s ease;
}
    .shop-product_cart_bar_add span{
        display: none;
    }
    .shop-product_cart_bar_add img{
        display: inline-block;
        vertical-align: top;
    }
    .shop-product_cart_bar_add:hover{
        background: #2d8655;
    }
    .shop-product_cart_bar_add:active{
        background: #11c15f;
    }
    .shop-product_cart_bar_add.disable{
        background: #918d8d;
        padding: 0px 10px;
    }
.shop-product_edit{
    display: block;
    padding-top: 10px;
    text-align: right;
}
.shop-product_icon{
    display: block;
    width: 200px;
    padding-bottom: 30px;
}
.shop-product_content{
    display: block;
    padding: 30px 0px;
}
.shop-product_img{
    display: inline-block;
    width: 100%;
    max-width: 800px;
}
.shop-product_detail{
    display: inline-block;
    width: 100%;
    max-width: 800px;
    padding: 20px 0px;
    text-align: left;
}
.shop-product_price{
    display: block;
    padding-top: 20px;
}
.shop-product_price_real{
    display: block;
    padding-top: 5px;
    font-family: 'prompt';
    font-size: 2.6rem;
    color: #ccc;
}
    .shop-product_price_real span{
        text-decoration: line-through;
    }
.shop-product_price_discount{
    display: block;
    font-family: 'prompt_medium';
    font-size: 3.6rem;
}
.shop-product_price_stock{
    display: block;
    padding-top: 10px;
    color: #2ea061;
}
.shop-product_button{
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
    background: #2ea061;
    margin-top: 10px;
    padding: 5px 15px;
    border-radius: 10px;
    border: 0px;
    outline: 0px;
    font-family: 'prompt';
    font-size: 2.2rem;
    color: #fff !important;
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.15);
    user-select: none;
    transition: all 0.3s ease;
}
    .shop-product_button:hover{
        background: #2d8655;
    }
    .shop-product_button:active{
        background: #11c15f;
    }
.shop-product_button_disable{
    background: #918d8d;
}
    .shop-product_button_disable:hover{
        background: #918d8d;
    }
@media only screen and (min-width: 400px){
    .shop-product_cart_bar_qty{
        display: inline-block;
    }
    .shop-product_cart_bar_price{
        padding-right: 0px;
    }
}
@media only screen and (min-width: 860px){
    .shop-show_img{
        display: inline-block;
        vertical-align: middle;
    }
    .shop-show_text{
        display: inline-block;
        vertical-align: middle;
        width: calc( 100% - 350px );
        max-width: 500px;
        padding-left: 50px;
        text-align: left;
    }
}



.textarea-wrap{
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding-top: 10px;
}
.textarea-address{
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 100%;
    height: 150px;
    background: #fff;
    padding: 5px 10px;
    border-radius: 10px;
    border: 1px solid #fff;
    outline: 0px;
    font-family: 'prompt';
    line-height: 30px;
    color: #555;

    white-space: nowrap;
}



/* STAT */
.stat{
    display: block;
    padding: 30px 0px;
}
.stat-list{
    display: block;
    text-align: center;
}
.stat-item{
    display: block;
    padding: 10px 0px;
}
.stat-item_icon{
    display: inline-block;
    vertical-align: middle;
    width: 60px;
}
.stat-item_text{
    display: inline-block;
    vertical-align: middle;
}
.stat-item_count{
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    padding-left: 15px;
    border-left: 1px solid #ddd;
    font-size: 2.2rem;
}



/* ARTICLE */
.article{
    display: block;
    padding: 30px 0px;
}
/* Article - Detail */
.article-detail{
    display: block;
    max-width: 800px;
    margin: 0 auto;
}
.article-detail_img{
    display: block;
    max-width: 900px;
    width: 100%;
    border-radius: 20px;
}
.article-detail h1{
    display: block;
    padding: 40px 0px 10px;
    font-family: 'prompt_semibold';
    font-size: 2.6rem;
    text-align: center;
}
.article-detail h2{
    display: block;
    padding: 20px 0px;
    font-family: 'prompt_semibold';
    font-size: 2.4rem;
    text-align: center;
}
    .article-detail h2 span{
        padding-top: 5px;
        font-family: 'prompt';
        font-size: 2rem;
    }
.article-detail h3{
    display: block;
    padding: 20px 0px 10px;
    font-family: 'prompt_semibold';
    font-size: 2.2rem;
    text-align: left;
}
    .article-detail h3 span{
        padding-top: 5px;
        font-family: 'prompt';
        font-size: 2rem;
    }
.article-detail img{
    display: inline-block;
}
    .article-detail > img{
        display: block;
    }
.article-detail p{
    display: block;
    padding: 10px 0px;
    line-height: 34px;
    text-indent: 30px;
}
    .article-detail p span.symbol{
        color: #fff;
    }
.article-detail ul.list{
    display: block;
    padding: 10px 0px;
}
    .article-detail ul.list > li{
        display: block;
        padding: 3px 0px;
    }
    .article-detail ul.list > li{
        display: block;
        padding: 10px 0px;
        border-bottom: 1px solid #eee;
    }
    .article-detail ul.list > li:nth-last-child(1){
        border-bottom: 0px;
    }
/* Article - List */
.article_list{
    display: block;
    padding: 10px 0px;
    text-align: center;
}
.article_list-empty{
    display: block;
    padding: 30px 0px 0px;
    text-align: center;
    color: #1d9e5e;
}
.article_list-header{
    display: block;
    font-family: 'prompt_semibold';
    font-size: 2.8rem;
}
.article_list-des{
    display: block;
    padding-top: 10px;
}
    .article_list-des a{
        font-family: 'prompt_medium';
        font-size: 2.2rem;
        color: #1d9e5e;
        transition: all 0.3s ease;
    }
    .article_list-des a:hover{
        color: #167546;
    }
.article_list-wrap{
    display: block;
    padding: 20px 0px 0px;
}
.article_list-item{
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
    width: 100%;
    max-width: 260px;
    margin: 10px 0px;
    /* box-shadow: 0px 0px 50px rgb(0 0 0 / 15%); */
    transition: all 0.3s ease;
}
.article_list-item_cover{
    display: block;
    width: 100%;
    max-width: 260px;
    height: 180px;
    border-radius: 20px;
}
.article_list-item_text{
    display: block;
    padding: 10px;
}
.article_list-item_title{
    display: block;
    /* font-family: 'prompt_semibold'; */
    font-size: 2rem;
}
.article_list-item_des{
    display: block;
    font-size: 1.8rem;
    line-height: 24px;
    color: #777;
}

@media only screen and (min-width: 560px){
    .article_list-item{
        margin: 10px 20px
    }
}



/* Banner */
.banner{
    display: block;
    box-sizing: border-box;
    text-align: center;
}
    .banner-container{
        display: block;
        box-sizing: border-box;
        max-width: 960px;
        margin: 0 auto;
    }
/* banner fixed */
.banner_fix{
    display: block;
    display: none;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    z-index: 99;
    text-align: center;
}
.banner-wrap,
.banner_fix-wrap{
    display: inline-block;
    vertical-align: top;
    position: relative;
    box-sizing: border-box;
    border-radius: 10px;
    padding: 30px 20px;
    
    /* border: 5px solid #f3c9cd;
    background: #f3c9cd; */
}
    .banner_fix-wrap{
        padding: 0px 10px;
    }
.banner-link{
    display: inline-block;
    position: relative;
    vertical-align: top;
}
.banner-img{
    display: inline-block;
    vertical-align: top;
    border-radius: 10px;
    width: 100%;
}
.banner-close{
    cursor: pointer;
    display: inline-block;
    position: absolute;
    z-index: 99;
    top: 35px;
    left: 25px;
    width: 30px;
    height: 30px;
    border-radius: 50%;

    background: rgba(0, 0, 0, 0.3);
    color: #fff;
}
    .banner_fix-wrap .banner-close{
        top: 5px;
        left: 15px;
    }
.banner-click{
    display: inline-block;
    position: absolute;
    bottom: -25px;
    right: 10px;
    height: 100px;
}
    .banner_fix-wrap .banner-click{
        /* bottom: -25px;
        right: 20px; */
    }
@media only screen and (min-width: 900px){
    .banner_fix{
        top: 70px;
    }
}



/* Bubble */
.bubble{
    display: block;
    box-sizing: border-box;
    max-width: 800px;
    background: rgb(65,205,185);
    background: linear-gradient(152deg, rgb(255,236,236) 0%, rgb(188,246,255) 100%);

    margin: 20px auto;
    padding: 15px 20px;
    border-radius: 20px;
    font-style: italic;
    line-height: 34px;
    text-align: center;
    color: #222;
}
    .bubble.success{
        background: linear-gradient(152deg, rgb(241,255,227) 0%, rgb(169,227,195) 100%);
    }
    .bubble.warning{
        background: linear-gradient(152deg, rgb(255,248,221) 0%, rgb(255,208,208) 100%);
    }
    .bubble.blue{
        background: #e3f0f1;
    }
    .bubble.pink{
        background: #ffebef;
    }
    .bubble.red{
        background: #ffbcbc;
    }
.bubble > h2{
    display: block;
    padding: 5px 0px;
    font-family: 'prompt_semibold';
    font-size: 2.4rem;
    
    color: #ff787f;
}
.bubble a{
    font-family: 'prompt_regular';
    font-weight: normal;
    font-size: 2.2rem;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-style: solid;
    color: #595a5a;
}
.bubble b{
    font-family: 'prompt_medium';
    font-weight: normal;
    font-size: 2.2rem;
    color: #996d9d;
}
.bubble > p{
    display: block;
    padding: 5px 0px;
}
.bubble > h2::before,
.bubble > h2::after,
.bubble > p::before,
.bubble > p::after{
    content: '';
    display: inline-block;
    vertical-align: top;
    width: 30px;
    height: 30px;
    background-position: center;
    background-size: 30px 30px;
    background-repeat: no-repeat;
    margin-top: -5px;
}
.bubble > h2::before,
.bubble > p::before{
    background-image: url('../img/bubble_double_quotes_before_b.png');
    /* padding-right: 10px; */
}
.bubble > h2::after,
.bubble > p::after{
    background-image: url('../img/bubble_double_quotes_after_b.png');
    /* padding-left: 10px; */
}



/* Prefab */
.prefab{
    display: block;
    padding: 20px 0px 10px;
    text-align: center;
}
.prefab-swich{
    cursor: pointer;
    display: inline-block;
    padding: 5px 20px;
    background: #eee;
    border-radius: 20px;
    user-select: none;
}
.prefab-swich_icon{
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 40px;
}
.prefab-swich_text{
    display: inline-block;
    vertical-align: middle;
    padding: 0px 10px 0px 5px;
}