.user-header { } 
.user-header a { display: inline-block; margin: 0 4px; } 
.user-header i { } 
.user-header span { } 
.wrap-user {width:100%;max-width:550px;margin:auto;border-radius: 0.5rem;box-shadow: 0 0 14px #e3e3e3;padding: 5px 25px 25px;background: #fff;} 
.title-user-center { justify-content: center !important; } 
.title-user { padding: 0; margin: 15px 0; border-radius: 0.5rem 0.5rem 0 0; display:flex; justify-content:space-between; align-items: center; } .title-user span { color: var(--color-main); font-size: 30px; font-weight:700; text-transform:uppercase; } 
.title-user a { color: #606164; font-size: 14px; font-weight: 600; } .form-user { padding: 0; border-top: none; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px } .input-user { margin-bottom:0.75rem } 
.input-user input { font-size:14px; border-color: #e5e5e5; height: 46px; border-radius: 0 !important; border-top-right-radius: 0.5rem !important; border-bottom-right-radius: 0.5rem !important; } .button-user { margin-bottom:1rem; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content: center; } 
.form-user-info label { display: block; margin-bottom: 6px; font-weight: 500; } 
.input-user input[type=radio],.checkbox-user input[type=checkbox] { margin-right: 5px; height: 16px; width: 16px; border-radius: 50% !important; vertical-align: middle; !i; !; } 
.checkbox-user input[type=checkbox]:focus { outline: none !important; box-shadow: none !important; } 
.center-botton-user { justify-content: space-between !important; } 
.button-user input { font-size: 14px; } .checkbox-user,.radio-user { cursor:pointer } 
.checkbox-user input { top:calc(50% - 1.25rem / 2); height:auto } .checkbox-user label { font-size:14px; cursor:pointer } 
.checkbox-user label::before,.checkbox-user label::after { top:calc(50% - 1rem / 2) } 
.radio-user { margin-right:1rem } .radio-user:last-child { margin-right:0px } 
.radio-user label::before,.radio-user label::after { top:calc(50% - 1rem / 2) } 
.note-user { font-size: 15px; border-top: 1px solid #dddddd80; padding-top: 1rem; margin-top: 1.5rem; } 
.flex_info { display: flex; justify-content: space-between; flex-wrap: wrap; } 
.left_info { width: 240px; height: fit-content; position: sticky; top: var(--sticky-top); border: 1px solid rgb(51 51 51 / 10%); background: #fff; border-radius: 0.5rem; box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px; } 
.right_info { width: calc(100% - 240px - 20px); border: 1px solid rgb(51 51 51 / 10%); background: #fff; border-radius: 0.5rem; padding: 20px 25px; box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px; } 
.list_mananger { padding: 0; margin: 0; list-style: none; border-top: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-top: 5px; padding-bottom: 5px; } 
.sty_list1, .sty_list { padding: 10px 0; margin-left: 15px; color: #000; cursor: pointer } 
.sty_list.active {color: #f00;font-family: Roboto-B;} 
.list_mananger li a:hover { color: var(--c1); } 
.list_mananger li:last-child { border: 0; } 
.list_mananger i { width: 20px; vertical-align: middle; text-align: center; margin-right: 6px; font-size: 16px; margin-top: -5px; } 
.list_mananger li .act { text-decoration: underline; } 
.left_info .title-user { padding: 10px; background: var(--c1); display: block; margin: 0; } .left_info .title-user span {    color: #333;
    font-size: 18px;
    text-align: center;
    display: block;
    font-family: Roboto-B; } 
.btn-login { background: var(--color-main) !important; color: #fff !important; border: 1px solid var(--color-main) !important; padding: 11.5px 23px; font-weight: 500; !i; !; border-radius: 0.5rem; } 
.btn-login:hover { background: var(--color-hover) !important; border-color: var(--color-hover) !important; } 
.wrap-user .input-group-text,.right_info .input-group-text { padding: 10px; } 
.wrap-user .input-group-text i.fa-regular.fa-phone-volume { transform: rotate(-30deg); } 
.right_info .input-group-text { height: 46px; border-color: #e5e5e5; border-top-right-radius: 0; border-bottom-right-radius: 0; background-color: transparent; color: #333; width: 45px; text-align: center; font-size: 18px; display: flex; align-items: center; justify-content: center; border: 1px solid #e5e5e5; width: 46px; text-align: center; align-items: center; justify-content: center; background: #e5e5e5; } 
.wrap-user .input-group-text { display: flex; background: none; color: #333; height: 46px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; border: 1px solid #e5e5e5; width: 46px; text-align: center; align-items: center; justify-content: center; background: #e5e5e5; font-size: 20px; } 
.thongbao-form { background: #fff2d9; margin-bottom: 10px; padding: 10px 15px; border-radius: 6px; color: red; } 
.flatpickr-calendar.animate.open { background: #ebebeb; box-shadow: 0 0 10px #b1b1b1; } 
.flatpickr-day { transition: 0.3s; } 
.flatpickr-day:hover { background: #7e7e7e; color: #fff; border-radius: 5px; } 
.flatpickr-prev-month.flatpickr-prev-month { right: 2rem !important; top: 1rem; } 
.flatpickr-next-month.flatpickr-next-month { right: 0.5rem !important; top: 1rem; } 
.show-pass { position: absolute; right: 0; width: 41px; height: 100%; top: 0; background: none; z-index: 9999; text-align: center; } 
.show-pass i { font-size: 16px; margin-top: 16px; } 
.error-feedback { display: block; width: 100%; margin-top: .25rem; font-size: .875em; color: #dc3545; } 

.th_info_order { font-weight: bold; padding-bottom: 10px; border-bottom: 1px solid #ccc; } 
.th_info_order, .tr_info_order { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } 
.tr_info_order { padding: 10px 0px; } 
.table_info_order .td:not(:last-child) { width: calc((100% - 40px) / 5); } 
.table_info_order .td:last-child { width: 40px; } 
.combo-order-detail-content { padding-left: 10px; } 
.combo-order-detail-name { font-style: italic; } 
.title-compo-detail, .combo-order-detail { font-size: 13px; } 
.title-user-info-order { text-transform: uppercase; font-weight: bold; font-size: 20px; color: var(--color-sec); } 
.content-user-info-order { list-style: none; margin: 0px; padding: 0px; } 
.content-user-info-order li:not(:last-child) { margin-bottom: 10px; } 
.content-user-info-order i { display: inline-block; width: 170px; } 
.title-user-info { text-transform: uppercase; font-weight: bold; font-size: 20px; margin-bottom: 15px; color: var(--c1); line-height: normal; } 

.title-user-level { display: flex; font-size: 14px; line-height: normal; margin-bottom: 1.2rem; font-weight: 500; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 10px; } 
.title-user-level b { font-size: 14px; font-weight: 600; color: var(--c1); background: green; color: #fff; padding: 4px 12px 3px; border-radius: 100px; } 
.title-user-level b.thuong { background: #136799; } 
.title-user-level b.vip2 { background: red; color: yellow; } 
.input-user:has(.text-danger) input, .input-user:has(.text-danger) .input-group-prepend .input-group-text { border-color: red !important; } 
.table_info_order { display: block; border: 1px solid #33333324; border-radius: 0.5rem; overflow: hidden; } 
.th_info_order { font-weight: bold; padding: 0; border-bottom: 1px solid #ccc; background: var(--c1); border-radius: 0.5rem 0.5rem 0 0; border: none; color: #fff; } 
.th_info_order, .tr_info_order { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; } 
.tr_info_order { padding: 0; font-size: 13px; font-weight: 500; line-height: normal; border-bottom: 1px solid #33333312; } 
.table_info_order .td:not(:last-child) { width: calc((100% - 40px) / 5); padding: 10px; } 
.table_info_order .td:last-child { width: 40px; padding: 10px; color: #333; } 
.combo-order-detail-content { padding-left: 10px; } 
.combo-order-detail-name { font-style: italic; } 
.title-compo-detail, .combo-order-detail { font-size: 13px; } 
.title-user-info-order {text-transform: uppercase;font-weight: bold;font-size: 16px;color: var(--c1);margin-bottom: 0.65rem;} 
.content-user-info-order { list-style: none; margin: 0px; padding: 0px; } 
.content-user-info-order li:not(:last-child) { margin-bottom: 10px; } 
.content-user-info-order i {display: inline-block;width: 150px;font-style: normal;color: #333;} 
.title-user-info {
    text-transform: uppercase;
    font-family: SFU-TradeGothic;
    font-size: 22px;
    margin-bottom: 20px;
    color: #333;
} 
.td.td_mobile.td_info { display: none; } 

.th_info_order a { display: block; color: #333; } 

.table-user-info-order-detail { border: 1px solid #33333342; } 

.table-user-info-order-detail thead { background: var(--c1); border: none; border-radius: 0.5rem 0.5rem 0 0; overflow: hidden; color: #fff; } 

.td-mobile { display: none; } 

td.name_pro { width: 30%; } 

td.name_pro a { display: block; color: #333; line-height: 1.6; font-weight: 500; } 

td.img_pro { width: 10%; } 

td.img_pro a { display: block; border: 1px solid #33333326; border-radius: 0.5rem; overflow: hidden; } 

.fist_discount { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; background: #008700; border-radius: 0.5rem; line-height: normal; margin-bottom: 20px; padding: 10px 15px; } 
.fist_discount__left { flex: 1; } 
.fist_discount__title { font-size: 16px; color: #fff; font-weight: bold; line-height: normal; } 
.fist_discount__detail { font-size: 14px; line-height: normal; font-weight: 400; color: #fafafa; margin-top: 5px; } 
.fist_discount__right { display: block; flex-shrink: 0; color: #fff; background: #017001; padding: 10px 15px; border-radius: 0.5rem; font-weight: 400; transition: all .2s ease; } 
.fist_discount__right:hover { background: darkred; color: #fff; transition: all .2s ease; } 

.up-user-level { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; margin-top: 0; background: var(--c3); width: max-content; border-radius: 0.5rem; padding: 5px 10px; color: #333; line-height: normal; font-size: 13px; user-select: none; transition: all .2s ease; margin-left: auto; } 
.up-user-level:hover { background: var(--c1); color: #fff; transition: all .2s ease; } 
.up-user-level.succes { background: #009500; color: #fff; } 
.name-user-info {
        font-family: Roboto-B;
}
.name-user-info .fa-sort-down{
    vertical-align: 3px;
}
.box_login{
    position: relative;
}
.header-user-content
{
    position: absolute;
    z-index: 999;
    top: 100%;
    left: 0px;
    margin: 0px;
    background: #0075ff;
    padding: 0px;
    box-shadow: 0px 0px 5px #0075ff;
    display: none;
}
.box_login:hover .header-user-content{
    display: block;
}
.header-user-content ul{
    padding: 0px;
    margin: 0px;
}
.header-user-content ul li{
    padding: 10px;
    border-bottom: 1px solid #006be9;
}
.header-user-content ul li a:hover{
    color: #ff0;
}
@media(max-width:993px){
 .wrap-user { width: calc(100% - 20px); } 
 .left_info { width: 100%; } 
 .right_info {width: 100%;margin-top: 10px;} 
 .form-user-info { padding: 0px; } 
 }