.header { padding: 4px 0 6px; }
.wrap-userInfo .wrap-content {--w:1300px;}
.user-header a { display: inline-block; margin: 0 4px }
.wrap-user .wrap-content { --w: 1000px; }
.user-right { border-radius: 5px; box-shadow: 0 0 14px #4444447d; }
.btn-group-toggle .btn input[type="radio"] { display: none; }
.btn-group-toggle .btn input[type="radio"]:checked + span, .btn-group-toggle .btn.active { background-color: #28a745 !important; color: white; border-color: #28a745; }
.btn-group-toggle { width: 100%; }
.btn-group-toggle .btn-outline-success { font-family: var(--font-medium); font-size: 16px; padding: 10px 10px; }
.btn-group-toggle .btn-outline-success:hover { background: var(--clr-active); border-color: var(--clr-active); color: var(--clr-white); }
.header-btn-login a { background: var(--gradient-btn); padding: 7px 11px; color: var(--clr-primary); display: inline-flex; justify-content: center; align-items: center; gap: 10px; text-transform: uppercase; border-radius: 5px; }
.title-user-center { justify-content: center !important }
.title-user { padding: 20px 15px 12px 15px; border-radius: 5px 5px 0px 0px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between }
.title-user span { font-size: 20px; font-weight: 700; color: var(--m1); }
.title-user a { color: #606164; font-size: 14px; font-weight: 600 }
.form-user { padding: 20px 15px; border-top: none; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px }
form.form-user.validation-member label { display: inline-block;    /* vertical-align: top; */ margin-bottom: 0.25rem; font-size: 14px; color: #333; }
.input-user { margin-bottom: 0.75rem }
.input-user input[type=radio]:focus, .input-user input[type=password]:focus, .input-user input[type=text]:focus, .input-user input:-internal-autofill-selected, .form-control:disabled, .form-control[readonly] { box-shadow: none !important;/* background: #ffffff !important; *//* outline: none !important; *//* border-color: #e5e5e5 !important; *//* -webkit-box-shadow: 0 0 0 30px white inset !important; */ }
.input-user input { font-size: 14px; border-color: #e5e5e5; height: 46px; border-radius: 0 !important; border-top-right-radius: 5px !important; border-bottom-right-radius: 5px !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 }
.input-user input[type=radio], .checkbox-user input[type=checkbox] { height: 16px; width: 16px; border-radius: 50% !important }
.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: 14px; border-top: 1px solid #ddd; padding-top: 0.5rem }
.flex_info { display: flex; justify-content: space-between; flex-wrap: wrap }
.left_info { width: 270px; box-shadow: 0 0 10px #dedede; height: fit-content; border-radius: 5px; overflow: hidden; }
.right_info { width: calc(100% - 290px) }
.list_mananger { padding: 0; margin: 0; list-style: none; border-top: none; border-bottom-left-radius: 7px; border-bottom-right-radius: 7px }
.sty_list1, .sty_list { padding: 10px 0; margin-left: 10px; color: #555; cursor: pointer }
.list_mananger li+li { border-top: 1px solid #efefef; }
.list_mananger li .act { text-decoration: none; color: var(--m1); font-weight: bold; }
.left_info .title-user { padding: 10px; background: var(--m1); display: block; overflow: hidden; }
.left_info .title-user span { color: #FFF; font-weight: 600; font-size: 15px; text-align: center; display: block }
.btn-login { background: var(--clr-main); color: #fff; border: 1px solid var(--clr-main); width: 100%; padding: 10px 10px; font-family: var(--font-medium); text-transform: capitalize; }
.btn-login:hover { background: #FFD451; color: #FFF; border-color: #FFD451; background-color: #FFD451; }
.wrap-user .input-group-text, .right_info .input-group-text { padding: 10px }
.right_info .input-group-text { height: 46px; border-color: #e5e5e5; border-top-right-radius: 0; border-bottom-right-radius: 0; background-color: transparent; color: #898989 }
.wrap-user .input-group-text { background: none; color: #b5b5b5; height: 46px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; border: 1px solid #e5e5e5 }
.thongbao-form { background: #fff2d9; margin-bottom: 10px; padding: 8px 10px; border-radius: 6px }
.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 }
.input-group-text { height: 46px; }
@media(max-width:993px) {
	.wrap-user { width: calc(100% - 20px) }
	.left_info { width: 100% }
	.right_info { width: 100% }
}

/* ? Infomation */
.wrap-userInfo { background: #F9F5FA; }
.user-detail-grid {display: flex;justify-content: space-between;gap: 5px;margin-top: 20px;margin-bottom: 1rem;}
.user-detail-left { width: 26.538462%; position: sticky; top: 100px; }
.user-detail-right {width: 73.076923%;/* height: 10000px; */}
.user-detail-update { background: var(--clr-white); border-radius: 5px; }
.user-detail-update .form-control[readonly] { background: #e9ecef; border-color: #ced4da; }
.user-detail-update input {margin-bottom: 0;}
.user-detail-sticky { position: sticky; top: 100px; border-radius: 5px; overflow: hidden; }
.user-detail-box { background: var(--clr-white); }
.user-detail-photo { margin-bottom: 1rem; }
.user-detail-photo-inner {max-width: 133px;margin-left: auto;margin-right: auto;border-radius: 100%;overflow: hidden;}
.user-detail-content { padding: 20px 10px 10px; background: var(--clr-white); }
.user-detail-content:last-child { border-top: 1px solid #E3E3E3; }
.attr-detail-user { padding-left: 10px; }
.user-detail-status { width: 20px; height: 20px; position: absolute; top: 35px; right: 15px; }
.user-detail-status.stt-test { background: linear-gradient(270deg, #FFEE5C 0%, #FFA13D 100%); }
.user-detail-status.stt-main { background: linear-gradient(270deg, #03DA62 0%, #00A74A 100%); }
.user-detail-status.sst-red { background: #EB0606; }
.attr-content-detail-user.name-user { background: var(--gradient-main); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; width: fit-content; }

/* ? Button */
.user-detail-statistical { display: flex; justify-content: space-between; gap: 12px; }
.user-statistical-item { background: var(--clr-white); border: 1px solid #C4C4C4; padding: 10px; border-radius: 5px; width: 100%; color: var(--clr-primary); font-size: 15px; display: flex; align-items: center; gap: 15px; }
.user-statistical-item:hover { color: var(--clr-primary); }
.user-statistical-icon { display: grid; width: 62px; height: 62px; place-content: center; border-radius: 5px; }
.user-statistical-icon.bg1 { background: var(--gradient-main); }
.user-statistical-icon.bg2 { background: var(--gradient-btn); }
.user-statistical-icon.bg3 { background: var(--gradient-active); }
.user-statistical-content { margin-bottom: 0; }

/* ? Edit */
.delete-photo{
    background-color: var(--bs-primary);
    color: #fff;
    cursor: pointer;
    border-radius: 5px;
    padding: 10px;
    margin: 0px 10px;
}
.photoUpload-zone .photoUpload-detail {
	position: relative;
	text-align: center;
	display: block;
	margin-bottom: 10px;
	padding: 10px;
	/* background-color: #f5f5f5; */
	/* outline: 2px dashed #cdcdcd; */
}
.photoUpload-zone .photoUpload-detail a {
	display: flex;
	justify-content: center;
}
.photoUpload-zone .photoUpload-detail img {
	max-width: 100%;
	margin: auto;
}
.photoUpload-zone .photoUpload-file {
	cursor: pointer;
	background-color: #f5f5f5;
	outline: 2px dashed #cdcdcd;
	outline-offset: 0px;
	padding: 2rem 0.75rem;
	margin-bottom: 1rem;
	border-radius: 0.25rem;
	font-weight: normal !important;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	-webkit-transition: outline-offset 0.15s ease-in-out, background-color 0.15s linear;
	transition: outline-offset 0.15s ease-in-out, background-color 0.15s linear;
	width: 100%;
	text-align: center;
}
.photoUpload-zone .photoUpload-file.drag-over {
	outline-offset: -10px;
	background-color: #fff9f9;
}
.photoUpload-zone .photoUpload-file input {
	display: none;
}
.photoUpload-zone .photoUpload-file i:hover {
	opacity: 0.9;
}
.photoUpload-zone .photoUpload-file i {
	color: #6c7d8f;
	font-size: 55px;
	margin-bottom: 0.75rem;
}
.photoUpload-zone .photoUpload-file p {
	margin: 0;
	color: #767978;
}
.photoUpload-zone .photoUpload-file .photoUpload-drop {
	margin-bottom: 0.5rem;
}
.photoUpload-zone .photoUpload-file .photoUpload-or {
	font-size: 14px;
	margin-bottom: 0.75rem;
}
.photoUpload-zone .photoUpload-file .photoUpload-choose {
	color: #fff;
}
.photoUpload-zone .photoUpload-dimension {
	font-weight: 700;
}

.photoUpload-choose {
	background-color: var(--bs-primary) !important;
}