/* body{
width: 100%;
max-width: 100vw;
overflow: hidden;
height: auto;
overflow-y: scroll;
} */
.itemNhanHang button {
	background-color:var(--library-title);
	margin-top:0.75rem;
}
.container-profile{
	background: #f5f5f5;
}
.containerProfilePage {
	max-width:86.5rem;
	width: 100%;
	margin:0 auto;
	padding-top:6.63rem;
	overflow: hidden;
}
.notLoginded {
	height:52lvh;
	width:100%;
	display:flex;
	align-items:center;
	justify-content:center;
}
#input_group_check label {
	cursor:pointer;
}
#input_group_check_contenta {
	display: flex;
	align-items: center;
	cursor: pointer;
}
#input_group_check_contenta input {
	margin-right: 1rem;
}
#input_group_check input {
	cursor:pointer;
}
.containerProfilePage .breadcrumbProfile {
	display: flex;
	align-items: center;
	margin-bottom: 1.5rem;
}
.containerProfilePage .breadcrumbProfile a {
	color: var(--greyscaletext-80-primary, #262626);
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 600;
	line-height: 120%; /* 1.05rem */
	opacity: 0.5;
	margin-right: 0.25rem;
	text-transform: uppercase;
}
.containerProfilePage .breadcrumbProfile span {
	color: var(--greyscaletext-80-primary, #262626);
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 600;
	line-height: 120%; /* 1.05rem */
	text-transform: uppercase;
}
.followProdilePageInfo .btn-2-container-deco{
	width: 100%;
}
.contentProfilePage {
	display: flex;
	align-items: flex-start;
	margin-bottom:2rem;
}
.divMenuProfilePage {
	width: 21%;
	margin-right: 2%;
}
.mainContentProfilePage {
	width: 77%;

}
/* profile avatar */
.divMenuProfilePage .infoUserPP {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: 1rem;
	box-shadow: 2px 4px 20px 0px rgba(0, 0, 0, 0.02);
	background: white;
	border-radius: var(--Radius-Radius---SM, 0.5rem);
}
.divMenuProfilePage .infoUserPP > span {
	color: var(--greyscaletext-50, #454545);
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 500;
	line-height: 120%; /* 1.05rem */
	display: block;
	padding-bottom: 0.5rem;
	margin-bottom: 0.5rem;
	border-bottom: 1px solid rgba(236, 236, 236, 0.4);
}
.avatarPP {
	display: flex;
	align-items: center;
}
.avatarImgPP {
	position: relative;
	width: 2.9375rem;
	height: 2.9375rem;
	border-radius: 50%;
	border: 1px solid var(--Library-Title, #015121);
	margin-right: 0.5rem;
	margin-left: 1.5rem;
}
.avatarImgPP .avatarUserPP {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}
.penIconPP {
	background: var(--Library-Title, #015121);
	position: absolute;
	width: 1rem;
	height: 1rem;
	padding: 0.26rem;
	border-radius: 50%;
	z-index: 2;
	top: 0;
	right: -8%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.penIconPP:hover {
	background: linear-gradient(
		142deg,
		rgba(1, 81, 33, 1) 0%,
		rgba(0, 113, 255, 1) 100%
	);
}
.nameRankingPP {
	display: flex;
	flex-direction: column;
}
.nameRankingPP > span {
	color: var(--greyscaletext-50, #454545);
	font-size: 1rem;
	font-style: normal;
	font-weight: 500;
	line-height: 120%; /* 1.2rem */
	text-transform: capitalize;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	display: block;
	margin-bottom: 0.38rem;
}
.rankingPP {
	display: flex;
	align-items: center;
	padding: 0.25rem 0.5rem;
	background-color: #015121;
	border-radius: 99rem;
}
.rankingPP img {
	width: 0.75rem;
	height: 0.75rem;
	margin-right: 0.25rem;
}
.rankingPP span {
	color: var(--greyscaletext-0, #fff);
	font-size: 0.75rem;
	font-style: normal;
	font-weight: 500;
	line-height: 120%; /* 0.9rem */
}
/* profile menu */
.menuPP {
	box-shadow: 2px 4px 20px 0px rgba(0, 0, 0, 0.02);
	background: white;
	margin-top: 1.12rem;
	padding: 0.75rem;
	border-radius: 0.5rem;
}
.menuPP .menuItemPP {
	display: flex;
	align-items: center;
	padding: 0.56rem 0.75rem;
	border-radius: 0.375rem;
	transition: 0.3s ease-in;
	margin-bottom: 0.25rem;
}
.menuPP .menuItemPP:last-child {
	margin-bottom: 0;
}
.menuPP .menuItemPP:hover {
	background: var(--Library-Title, #015121);
	transition: 0.3s ease-in;
}
.menuPP .menuItemPP:hover svg path,
.menuPP .menuItemPP:hover svg rect {
	fill: white;
	stroke: white;
}
.menuPP .menuItemPP:hover span {
	color: white;
}
.menuPP .menuItemPP svg {
	margin-right: 0.5rem;
	width: 0.875rem;
	height: 0.875rem;
}
.menuPP .menuItemPP span {
	color: var(--greyscaletext-20-inactive, #a9a9a9);
	font-size: 1rem;
	font-style: normal;
	font-weight: 600;
	line-height: 150%; /* 1.5rem */
}
.menuPPactive {
	background: var(--Library-Title, #015121);
}
.menuPP .menuPPactive svg path,
.menuPP .menuPPactive svg rect {
	fill: white;
	stroke: white;
}
.menuPP .menuPPactive span {
	color: white;
}
/* profile content */

/* change password */
.formChangePasswordContainer {
	padding: 1.75rem 2rem;
	background: white;
	border-radius: 0.5rem;
}
.formChangePasswordContainer > span {
	color: var(--greyscaletext-30, #828282);
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 400;
	line-height: 150%; /* 1.3125rem */
	letter-spacing: 0.00219rem;
	display: block;
	padding-bottom: 0.59rem;
	border-bottom: 1px solid rgba(236, 236, 236, 0.7);
	margin-bottom: 1rem;
}
.formChangePasswordContainer > span strong {
	color: var(--greyscaletext-80-primary, #262626);
	font-size: 1rem;
	font-style: normal;
	font-weight: 600;
	line-height: 150%;
}
.oldPassword,
.newPassword,
.confirmPassword {
	display: flex;
	align-items: center;
	position: relative;
	justify-content: space-between;
}
.oldPassword label,
.newPassword label,
.confirmPassword label {
	color: var(--greyscaletext-80-primary, #262626);
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 400;
	line-height: 120%; /* 1.05rem */
	width: 20%;
}
.oldPassword input,
.newPassword input,
.confirmPassword input {
	width: 75%;
	padding: 0.75rem 1.12rem;
	border: none;
	outline: none;
	border-radius: 0.5rem;
	margin-top: 0.5rem;
	color: var(--greyscaletext-20-inactive, #000000);
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 500;
	line-height: 120%; /* 1.05rem */
	background-color: #f8f8f8;
}
.oldPassword input::placeholder,
.newPassword input::placeholder,
.confirmPassword input::placeholder {
	color: #ccc;
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 500;
	line-height: 120%; /* 1.05rem */
}
.oldPassword svg,
.newPassword svg,
.confirmPassword svg {
	position: absolute;
	right: 1rem;
	top: 40%;
	cursor: pointer;
}
.updatePasswordBtn {
	float: right;
	margin-top: 1.5rem;
	display: flex;
	padding: 0.75rem 2.5rem;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0.625rem;
	border-radius: 0.25rem;
	background: var(--Library-Title, #015121);
	color: var(--greyscaletext-0, #fff);
	font-size: 1rem;
	font-style: normal;
	font-weight: 500;
	line-height: 128.6%;
}
.errorFormpassword {
	color: red;
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 500;
	font-style: italic;
	line-height: 120%; /* 1.05rem */
}
/* Change Profile info */
.profilePageChangeInfoContainer span {
	color: var(--greyscaletext-80-primary, #262626);
	font-size: 1rem;
	font-style: normal;
	font-weight: 600;
	line-height: 150%; /* 1.5rem */
	display: block;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid rgba(236, 236, 236, 0.7);
	margin-bottom: 1.63rem;
}
.profilePageChangeInfoContainer {
	padding: 1.75rem 2rem;
	background-color: white;
	border-radius: 0.5rem;
}

.leftFormChangeInfo .topLeftFormChangeInfo {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}
.nameUserPCI,
.emailUserPCI,
.phoneUserPCI,
.genderRadio {
	width: 45%;
}
.nameUserPCI,
.emailUserPCI {
	margin-bottom: 1.75rem;
}
.nameUserPCI > label,
.emailUserPCI > label,
.phoneUserPCI > label,
.genderRadio > label {
	color: var(--greyscaletext-80-primary, #262626);
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 400;
	line-height: 120%; /* 1.05rem */
	display: inline-block;
	width: 7rem;
}
.nameUserPCI input,
.emailUserPCI input,
.phoneUserPCI input {
	width: 60%;
	padding: 0.75rem 1.12rem;
	border: none;
	outline: none;
	border-radius: 0.5rem;
	margin-top: 0.5rem;
	color: var(--greyscaletext-20-inactive, #000000);
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 500;
	line-height: 120%; /* 1.05rem */
	background-color: #f8f8f8;
}
.nameUserPCI input::placeholder,
.emailUserPCI input::placeholder,
.phoneUserPCI input::placeholder {
	color:#ccc;
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 500;
	line-height: 120%; /* 1.05rem */
}
.genderRadio {
	display: flex;
	align-items: center;
}
.genderRadio > label {
	margin-right: 1rem;
}
.input-group-gender > label input {
	margin-right: 0.5rem;
}
.input-group-gender > label {
	display: flex;
	align-items: center;
}
.input-group-gender {
	margin-right: 1rem;
}
.genderRadio input[type="radio"] {
	appearance: none;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background-clip: content-box;
	border: 1px solid #000;
	background-color: white;
}

.genderRadio input[type="radio"]:checked {
	background-color: #000;
	padding: 4px;
	border: 1px solid #000;
}
.bottomleftFormChangeInfo {
	display: flex;
	margin-top: 1.75rem;
	align-items: center;
}
.dateFormPCI input::placeholder, .monthFormPCI input::placeholder, .yearFormPCI input::placeholder{
	color:#ccc !important;
} 
#dateFormField  input::placeholder ,#dateFormBranch input::placeholder
, #dateFormExperience input::placeholder
{
	color:#ccc !important;

}
.bottomleftFormChangeInfo > label {
	color: var(--greyscaletext-80-primary, #262626);
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 400;
	line-height: 120%; /* 1.05rem */
	display: inline-block;
	width: 7rem;
}
.warrper_cooperate {
	display: flex;
	margin-top: 2rem;
}
.dateFormPCI,
.dateFormField,
.dateFormBranch,
.dateFormExperience,
.monthFormPCI,
.yearFormPCI {
	width: 25.5%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #f8f8f8;
	border-radius: 0.5rem;
	padding: 0.5rem 1.12rem;
	position: relative;
	cursor: pointer;
	margin-right: 2rem;
}
.yearFormPCI {
	margin-right: 0;
}
.dateFormPCI > input,
.monthFormPCI > input,
.yearFormPCI > input {
	width: fit-content;
	align-items: center;
	width: 100%;
	border-radius: 0.25rem;
	background-color: #f8f8f8;
	outline: none;
}
.dateFormPCI > input::placeholder,
.monthFormPCI > input::placeholder,
.yearFormPCI > input::placeholder {
	color: var(--greyscaletext-20-inactive, #a9a9a9);
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 500;
	line-height: 120%; /* 1.05rem */
}
.dateFormPCI > svg,
.monthFormPCI > svg,
.yearFormPCI > svg {
	width: 1rem;
	height: 1rem;
}
.dropdowndatePCi,
.dropdownmonthPCi,
.dropdownyearPCi {
	display: flex;
	position: absolute;
	top: 110%;
	left: 0;
	width: 100%;
	flex-direction: column;
	height: 8rem;
	background-color: #f8f8f8;
	overflow-y: scroll;
	display: none;
	z-index: 10;
	border-radius: 0.5rem;
}
.dropdowndatePCi button,
.dropdownmonthPCi button,
.dropdownyearPCi button {
	color: var(--greyscaletext-80-primary, #262626);
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 400;
	line-height: 120%; /* 1.05rem */
	display: inline-block;
	padding: 0.25rem;
}
.dropdowndatePCi button:hover,
.dropdownyearPCi button:hover,
.dropdownmonthPCi button:hover {
	background-color: #a9a9a9;
}
.containerFormChangeInfo {
	display: flex;
	align-items: center;
	margin-bottom: 2rem;
}
.containerFormChangeInfo .leftFormChangeInfo {
	width: 80%;
}
.containerFormChangeInfo .rightFormChangeInfo {
	width: 20%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.rightFormChangeInfoAvatar {
	width: 7.375rem;
	height: 7.375rem;
	border-radius: 50%;
	position: relative;
	border: 2px solid #b6d4c2;
}
.rightFormChangeInfoAvatar img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}
.rightFormChangeInfoPen {
	cursor: pointer;
	position: absolute;
	z-index: 2;
	width: 1.625rem;
	height: 1.625rem;
	bottom: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--BACKGROUND-ELEVATION-30, #f0f0f0);
}
.savechangeProfilechange {
	float: right;
	margin-top: 1.5rem;
	display: flex;
	padding: 0.75rem 5em;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0.625rem;
	border-radius: 0.25rem;
	background: var(--Library-Title, #015121);
	color: var(--greyscaletext-0, #fff);
	font-size: 1rem;
	font-style: normal;
	font-weight: 500;
	line-height: 128.6%;
}
.errowFormChangeInfo {
	color: red;
	margin-top: 1.5rem;
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 500;
	font-style: italic;
	line-height: 120%; /* 1.05rem */
}
/* đã tải xuống*/
.downloadedProfilePageInfo .btn-1-container {
	display: flex;
	align-items: center;
	margin-bottom: 1.75rem;
}

.downloadedProfilePageInfo .btn-1-container > * + * {
	margin-left: 0.62rem;
}

.downloadedProfilePageInfo .btn-1-container .btn-1 {
	padding: 0.5625rem 2rem 0.5625rem 2rem;
	display: flex;
	align-items: center;
	font-size: 1rem;
	font-style: normal;
	font-weight: 600;
	line-height: 150%;
	position: relative;
	border-radius: 0.25rem;
	box-shadow: 0px 0px 12px 0px rgba(40, 113, 83, 0.08);
	height: 3rem;
	color: var(--library-title);
	background-color: #fff;
	transition: all 0.3s ease;
}

.downloadedProfilePageInfo .btn-1-container .btn-1.btn-1-active {
	color: #fff;
	background-color: var(--library-title);
}

.downloadedProfilePageInfo .btn-1-container .btn-1 .btn-1-icon {
	margin-right: 0.5rem;
}
.downloadedProfilePageInfo
.btn-1-container
.btn-1.btn-1-active
.arrow-down-icon {
	opacity: 1;
}
.downloadedProfilePageInfo .btn-1-container .btn-1 .arrow-down-icon {
	width: 1.5625rem;
	height: 0.625rem;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 90%);
	opacity: 0;
	transition: all 0.3s ease;
}
.contentDownloadPI {
	background-color: white;
	border-radius: 0.5rem;
	padding: 2rem;
}
.MaincontentDownloadPI {
	display: flex;

	flex-wrap: wrap;
}
.contentDownloadPI .collection-item,.contentDownloadPI .document-item {
	width: calc(25% - 0.5rem);
	margin-right: 0.25rem;
	margin-bottom: 1.75rem;
	margin-left: 0.25rem;
}
.contentDownloadPI .document-item {
	justify-content: space-between;
}
.contentDownloadPI .document-item h4 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;  
	overflow: hidden;
}
.document-item .image-container {
	height:19.125rem;
}
.seeMoreDownloadedBtn,
.seeMoreLinhvucBtn,
.seeMoreNghiepvuBtn,
.seeMoreNhanhangBtn {
	border-radius: 0.25rem;
	border: 1px solid var(--foundation-green-dark-hover, #0b4523);
	box-shadow: 0px 0px 20px 0px rgba(198, 255, 189, 0.25);
	text-align: center;
	padding: 0.75rem 1.875rem;
	color: var(--foundation-green-dark-hover, #0b4523);
	text-align: center;
	font-size: 1rem;
	font-style: normal;
	font-weight: 800;
	line-height: 120%; /* 1.2rem */
	width: 100%;
	z-index: -1;
	transition: 0.3s ease;
	cursor: pointer;
}
.seeMoreDownloadedBtn:hover,
.seeMoreLinhvucBtn:hover,
.seeMoreNghiepvuBtn:hover,
.seeMoreNhanhangBtn:hover {
	background-color: #0b4523;
	color: #fff;
	transition: 0.3s ease;
}
/* theo dõi */
.followProdilePageInfo .btn-1-container {
	display: flex;
	align-items: center;
	margin-bottom: 1.75rem;
}

.followProdilePageInfo .btn-1-container > * + * {
	margin-left: 0.62rem;
}

.followProdilePageInfo .btn-1-container .btn-1 {
	padding: 0.5625rem 2rem 0.5625rem 2rem;
	display: flex;
	align-items: center;
	font-size: 1rem;
	font-style: normal;
	font-weight: 600;
	line-height: 150%;
	position: relative;
	border-radius: 0.25rem;
	box-shadow: 0px 0px 12px 0px rgba(40, 113, 83, 0.08);
	height: 3rem;
	color: var(--library-title);
	background-color: #fff;
	transition: all 0.3s ease;
}

.followProdilePageInfo .btn-1-container .btn-1.btn-1-active {
	color: #fff;
	background-color: var(--library-title);
}

.followProdilePageInfo .btn-1-container .btn-1 .btn-1-icon {
	margin-right: 0.5rem;
}
.followProdilePageInfo .btn-1-container .btn-1.btn-1-active .arrow-down-icon {
	opacity: 1;
}
.followProdilePageInfo .btn-1-container .btn-1 .arrow-down-icon {
	width: 1.5625rem;
	height: 0.625rem;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 90%);
	opacity: 0;
	transition: all 0.3s ease;
}
.followProdilePageInfo .btn-2-container {
	display: flex;
	align-items: center;
	position: relative;
	overflow-x:auto;
}

.followProdilePageInfo .btn-2-container > * + * {
	margin-left: 2.69rem;
}

.followProdilePageInfo .btn-2 {
	font-size: 1rem;
	font-style: normal;
	font-weight: 600;
	line-height: 120%;
	color: var(--grey-300);
	position: relative;
	height: 2.12rem;
	display: flex;
	align-items: flex-start;
	transition: all 0.3s ease;
}

.followProdilePageInfo .btn-2.btn-2-active {
	color: var(--grey-900);
}

.followProdilePageInfo .btn-2 .btn-2-deco {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0.1875rem;
	background-color: var(--grey-900);
	opacity: 0;
	transition: all 0.3s ease;
	z-index: 1;
}

.followProdilePageInfo .btn-2.btn-2-active .btn-2-deco {
	opacity: 1;
}

.followProdilePageInfo .btn-2-container-deco {
	position: absolute;
	bottom: 0;
	left: -2.69rem;
	width: 100%;
	height: 0.0625rem;
	background-color: #d8d8d8;
	transform: translateY(-100%);
}
/*  */
.content_select {
	padding: 0.5rem;
}
.content_select:hover {
	background-color: #a9a9a9;
}
.certificateUserPCI,
.SkillUserPCI,
.EXPUserPCI {
	margin-top: 2rem;
	display: flex;
	align-items: center;
}
.certificateUserPCI>label,
.SkillUserPCI>label,
.EXPUserPCI>label{
	width: 11rem;
	color: var(--greyscaletext-80-primary, #262626);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    display: inline-block;
	margin-right: 1rem;
}
.certificateUserPCI>input,
.SkillUserPCI>input,
.EXPUserPCI>input {
	width: 64%;
    padding: 0.75rem 1.12rem;
    border: none;
    outline: none;
    border-radius: 0.5rem;
    color: var(--greyscaletext-20-inactive, #000000);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    background-color: #f8f8f8;
}
.certificateUserPCI>input::placeholder
, .SkillUserPCI>input::placeholder, .EXPUserPCI>input::placeholder{
	color:#ccc !important;
}
.dateFormBranch>input,
.dateFormExperience>input,
.dateFormField>input {
	width: 100%;
    border-radius: 0.25rem;
    background-color: #f8f8f8;
    outline: none;
}

.certificateUserPCI {
	position: relative;
    justify-content: space-between;
}
#informationFile {
	margin-right: 2.5rem;
	flex: 1 0 0;
}
.certificateUserPCI #certificatePCI {
	width: 25%;
    opacity: 0;
    position: absolute;
    top: 0;
    right: 17%;
    z-index: 50;
    cursor: pointer;
}
.certificateUserPCI>.profile_file_fiter {
	padding: 0.75rem 1rem;
	width: 25%;
    height: auto;
	margin-right: 17%;
	border-radius: var(--corner-radius-xSmall, 0.5rem);
    border: 1px dashed var(--color-border-neutral-medium, #a3a3a3);
	display: flex;
	justify-content: center;
	align-items: center;
}
#profile_file_fiter_text span {
	margin: 0;
    padding: 0;
	margin-left: 0.25rem;
	color: #0382d8;
}
.profile_file_fiter svg {
	width: 1.5rem;
	height: 1.5rem;
	margin-right: 0.5rem;
}
#profile_file_fiter_text {
	display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
	display: flex;
}
.input_group_check {
	width: fit-content;
	margin-right: 1rem;
}
.input_group_check>label {
	display: flex;
    align-items: center;
}
.input_group_check>label>input {
	margin-right: 0.5rem;
}
.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
.disabled>input {
	cursor: not-allowed;
}
#EXPlPCI:disabled,
#SkillPCI:disabled,
#certificatePCI:disabled {
	cursor: not-allowed;
}
@media (max-width: 768px) {
	.warrper_cooperate {
		flex-direction: column;
	}
	.dateFormExperience,
	.dateFormBranch,
	.dateFormField {
		width: 100%;
		margin-top: 0.5rem;
	}
	.certificateUserPCI,
	.SkillUserPCI,
	.EXPUserPCI {
		flex-direction: column;
		align-items: start;
	}
	.certificateUserPCI>label,
	.SkillUserPCI>label,
	.EXPUserPCI>label {
		width: 100%;
	}
	.certificateUserPCI>input,
	.SkillUserPCI>input,
	.EXPUserPCI>input {
		margin-top: 0.5rem;
		width: 100%;
	}
	.certificateUserPCI>.profile_file_fiter {
		width: 100%;
		margin-top: 0.5rem;
		margin-bottom: 1rem;
		margin-right: 0;
	}
	.certificateUserPCI>input {
		bottom: 0;
		right: 0;
	}
}
/* item lĩnh vực */
.containerLinhvuc {
	margin-top: 2rem;
	background-color: white;
	padding: 2rem 0 2rem 1rem;
	border-radius: 0.5rem;
}
.itemLinhvuc {
	padding: 0.31rem 0.31rem 1.31rem 0.31rem;
	border: 1.5px solid transparent;
	border-radius: 0.5rem;
	transition: all 0.3s ease;
	cursor: pointer;
}

.swiper-slide-red {
	background: linear-gradient(
		180deg,
		rgba(240, 65, 69, 0.1) 81.34%,
		rgba(240, 65, 69, 0) 110.16%
	);
}

.swiper-slide-yellow {
	background: linear-gradient(
		180deg,
		rgba(255, 143, 39, 0.1) 81.34%,
		rgba(255, 143, 39, 0) 110.16%
	);
}

.swiper-slide-lightgreen {
	background: linear-gradient(
		180deg,
		rgba(1, 193, 192, 0.1) 81.34%,
		rgba(1, 193, 192, 0) 110.16%
	);
}

.swiper-slide-green {
	background: linear-gradient(
		180deg,
		rgba(81, 160, 62, 0.1) 81.34%,
		rgba(49, 187, 15, 0) 110.16%
	);
}

.swiper-slide-blue {
	background: linear-gradient(
		180deg,
		rgba(3, 130, 216, 0.1) 81.34%,
		rgba(3, 130, 216, 0) 110.16%
	);
}

.swiper-slide-brown {
	background: linear-gradient(
		180deg,
		rgba(132, 119, 95, 0.1) 81.34%,
		rgba(132, 119, 95, 0) 110.16%
	);
}

.swiper-slide-orange {
	background: linear-gradient(
		180deg,
		rgba(202, 101, 60, 0.1) 81.34%,
		rgba(202, 101, 60, 0) 110.16%
	);
}

.swiper-slide-gray {
	background: linear-gradient(
		180deg,
		rgba(130, 130, 130, 0.1) 81.34%,
		rgba(130, 130, 130, 0) 110.16%
	);
}

.swiper-slide-red img {
	width: 4.875rem;
	height: 5.43525rem;
}

.swiper-slide-yellow img {
	width: 3.50963rem;
	height: 5.56306rem;
}

.swiper-slide-lightgreen img {
	width: 3.625rem;
	height: 5.92606rem;
}

.swiper-slide-green img {
	width: 4.9375rem;
	height: 5.18669rem;
}

.swiper-slide-blue img {
	width: 4.40394rem;
	height: 5.48306rem;
}

.swiper-slide-brown img {
	width: 5.53044rem;
	height: 4.99606rem;
}

.swiper-slide-orange img {
	width: 5.375rem;
	height: 4.99425rem;
}

.swiper-slide-gray img {
	width: 4.49481rem;
	height: 5.61356rem;
}

.swiper-slide-red:hover {
	border-color: #f04145;
}

.swiper-slide-yellow:hover {
	border-color: var(--orange);
}

.swiper-slide-lightgreen:hover {
	border-color: #01c1c0;
}

.swiper-slide-green:hover {
	border-color: #0c9675;
}

.swiper-slide-blue:hover {
	border-color: #0382d8;
}

.swiper-slide-brown:hover {
	border-color: #84775f;
}

.swiper-slide-orange:hover {
	border-color: #ca653c;
}

.swiper-slide-gray:hover {
	border-color: #828282;
}

.icon-container {
	border-radius: 0.25rem;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 9.25rem;
}
.icon-container img{
	object-fit:contain;
}
.swiper-slide-btn-deco {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: all 0.3s ease;
	z-index: -1;
}

.swiper-slide:hover .swiper-slide-btn-deco {
	opacity: 1;
}

.swiper-slide-red .icon-container {
	background: linear-gradient(180deg, #f27073 0%, #cc373b 100%);
}

.swiper-slide-red .swiper-slide-btn-deco {
	background: linear-gradient(180deg, #fc9496 0%, #f04145 77.31%);
}

.swiper-slide-yellow .icon-container {
	background: linear-gradient(180deg, #ffb979 0%, #cc721f 100%);
}

.swiper-slide-yellow .swiper-slide-btn-deco {
	background: linear-gradient(180deg, #ffb681 0%, #ff6b00 87.14%);
}

.swiper-slide-lightgreen .icon-container {
	background: linear-gradient(180deg, #4adfde 0%, #2ba0a8 100%);
}

.swiper-slide-lightgreen .swiper-slide-btn-deco {
	background: linear-gradient(180deg, #49ebea 0%, #01c1c0 76.75%);
}

.swiper-slide-green .icon-container {
	background: linear-gradient(180deg, #5bdbad 0%, #0c9675 100%);
}

.swiper-slide-green .swiper-slide-btn-deco {
	background: linear-gradient(180deg, #5bdbad 0%, #0c9675 100%);
}

.swiper-slide-blue .icon-container {
	background: linear-gradient(180deg, #58ccd9 0%, #0382d8 100%);
}

.swiper-slide-blue .swiper-slide-btn-deco {
	background: linear-gradient(180deg, #58ccd9 0%, #0382d8 100%);
}

.swiper-slide-brown .icon-container {
	background: linear-gradient(180deg, #cbb691 0%, #84775f 100%);
}

.swiper-slide-brown .swiper-slide-btn-deco {
	background: linear-gradient(180deg, #cbb691 0%, #84775f 100%);
}

.swiper-slide-orange .icon-container {
	background: linear-gradient(180deg, #ff9c74 0%, #ca653c 100%);
}

.swiper-slide-orange .swiper-slide-btn-deco {
	background: linear-gradient(180deg, #ff9c74 0%, #ca653c 100%);
}

.swiper-slide-gray .icon-container {
	background: linear-gradient(180deg, #b9b9b9 0%, #828282 100%);
}

.swiper-slide-gray .swiper-slide-btn-deco {
	background: linear-gradient(180deg, #b9b9b9 0%, #828282 100%);
}

.icon-container svg {
	width: 4.875rem;
	height: 5.43525rem;
}

.swiper-slide-title {
	color: var(--grey-500);
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 500;
	line-height: 120%;
	margin-top: 0.75rem;
	margin-bottom: 0.5rem;
	text-align: center;
}

.follow-btn {
	position: relative;
	padding: 0.25rem 0.875rem 0.25rem 0.625rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 9999px;
	backdrop-filter: blur(3px);
	color: #fff;
	margin: auto;
	font-size: 0.75rem;
	font-style: normal;
	font-weight: 500;
	line-height: 120%;
	overflow: hidden;
}

.follow-btn svg {
	width: 0.5625rem;
	height: 0.5625rem;
	margin-right: 0.25rem;
}

.swiper-slide-red .follow-btn {
	background: #f04145;
}

.swiper-slide-yellow .follow-btn {
	background: var(--orange);
}

.swiper-slide-lightgreen .follow-btn {
	background: #01c1c0;
}

.swiper-slide-green .follow-btn {
	background: #0c9675;
}

.swiper-slide-blue .follow-btn {
	background: #0382d8;
}

.swiper-slide-brown .follow-btn {
	background: #84775f;
}

.swiper-slide-orange .follow-btn {
	background: #ca653c;
}

.swiper-slide-gray .follow-btn {
	background: #828282;
}
.contentLinhvuc,
.contentNghiepvu {
	display: grid;
	grid-template-columns: repeat(6,1fr);
}

.itemLinhvuc,.major-item,.itemNhanHang {
	margin-bottom: 1.5rem;
	margin-right:1rem;
}

/* item nghiep vu */
.containerNghiepvu {
	padding: 2rem 1rem;
	background-color: white;
}
.contentNghiepvu .major-item {
	width: 16%;
	margin-bottom: 1.75rem;
}

.major-item {
	height: 10.375rem;
	border-radius: 0.5rem;
	position: relative;
	padding: 0.75rem 0.75rem 0.94rem 0.75rem;
}

.major-item-follow-content {
	display: flex;
	align-items: center;
}

.major-item-red {
	background: linear-gradient(180deg, #f27073 0%, #cc373b 100%);
}

.major-item-yellow {
	background: linear-gradient(180deg, #ffb979 0%, #cc721f 100%);
}

.major-item-lightgreen {
	background: linear-gradient(180deg, #4adfde 0%, #2ba0a8 100%);
}

.major-item-green {
	background: linear-gradient(180deg, #5bdbad 0%, #0c9675 100%);
}

.major-item-blue {
	background: linear-gradient(180deg, #58ccd9 0%, #0382d8 100%);
}

.major-item-brown {
	background: linear-gradient(180deg, #cbb691 0%, #84775f 100%);
}

.major-item-orange {
	background: linear-gradient(180deg, #ff9c74 0%, #ca653c 100%);
}

.major-item-gray {
	background: linear-gradient(180deg, #b9b9b9 0%, #828282 100%);
}

.major-item-icon {
	position: absolute;
	top: 3rem;
	left: 1.19rem;
}

.major-item-red .major-item-icon > img {
	width: 2.54963rem;
	height: 2.84263rem;
}

.major-item-yellow .major-item-icon > img {
	width: 1.75481rem;
	height: 2.7815rem;
}

.major-item-lightgreen .major-item-icon > img {
	width: 1.8125rem;
	height: 2.96306rem;
}

.major-item-green .major-item-icon > img {
	width: 2.58775rem;
	height: 2.71831rem;
}

.major-item-blue .major-item-icon > img {
	width: 2.3125rem;
	height: 2.87913rem;
}

.major-item-brown .major-item-icon > img {
	width: 2.76519rem;
	height: 2.49806rem;
}

.major-item-orange .major-item-icon > img {
	width: 2.75788rem;
	height: 2.5625rem;
}

.major-item-gray .major-item-icon > img {
	width: 2.24738rem;
	height: 2.80675rem;
}

.major-item .major-item-title {
	position: absolute;
	left: 0.75rem;
	bottom: 0.94rem;
	text-align: start;
	width: 80%;
	height: fit-content;
	font-size: 1rem;
	font-style: normal;
	font-weight: 500;
	line-height: 120%;
	color: var(--elevation-10);
}

.major-item-follow {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	width: 1.5625rem;
	height: 1.5625rem;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #fff;
	border-radius: 9999px;
	transition: all 0.5s ease;
	overflow: hidden;
}

.major-item:hover .major-item-follow {
	width: 5.3125rem;
}

.major-item-follow-content {
	transform: translateX(41%);
	transition: all 0.5s ease;
}

.major-item:hover .major-item-follow-content {
	transform: none;
}

.major-item-follow svg {
	width: 0.8125rem;
	height: 0.8125rem;
	flex: none;
}

.major-item-follow p {
	font-size: 0.75rem;
	font-style: normal;
	font-weight: 500;
	line-height: 120%;
	width: max-content;
	margin-left: 0.38rem;
	transition: all 0.5 ease;
	flex: none;
}

.major-item-red .major-item-follow p,
.major-item-red .major-item-follow svg path {
	color: #f04145;
	stroke: #f04145;
}

.major-item-yellow .major-item-follow p,
.major-item-yellow .major-item-follow svg path {
	color: #ca653c;
	stroke: #ca653c;
}

.major-item-lightgreen .major-item-follow p,
.major-item-lightgreen .major-item-follow svg path {
	color: #01c1c0;
	stroke: #01c1c0;
}

.major-item-green .major-item-follow p,
.major-item-green .major-item-follow svg path {
	color: #0c9675;
	stroke: #0c9675;
}

.major-item-blue .major-item-follow p,
.major-item-blue .major-item-follow svg path {
	color: #0382d8;
	stroke: #0382d8;
}

.major-item-brown .major-item-follow p,
.major-item-brown .major-item-follow svg path {
	color: #84775f;
	stroke: #84775f;
}

.major-item-orange .major-item-follow p,
.major-item-orange .major-item-follow svg path {
	color: #ca653c;
	stroke: #ca653c;
}

.major-item-gray .major-item-follow p,
.major-item-gray .major-item-follow svg path {
	color: #828282;
	stroke: #828282;
}

.major-item-followed .major-item-follow {
	width: 6.75rem;
}

.major-item-followed:hover .major-item-follow {
	width: 6.75rem;
}

.major-item-followed .major-item-follow-content {
	transform: none;
}

.major-item-updating .major-item-icon {
	opacity: 0.5;
}

.major-item-updating .major-item-title {
	font-size: 1rem;
	font-style: normal;
	font-weight: 500;
	line-height: 120%;
	bottom: 2rem;
}

.major-item-updating .major-item-update-icon {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 2.3125rem;
	height: 2.3125rem;
}
/* item Nhan hang */
.containerNhanhang {
	padding: 2rem 1rem;
	background-color: white;
	border-radius: 0.5rem;
}
.contentNhanhang {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.contentNhanhang .itemNhanHang {
	margin-bottom: 1.75rem;
}
.itemNhanHang {
	display: flex;
	flex-direction: column;
}
.itemNhanHang img {
	width: 100%;
	height: 9.4rem;

	border-radius: 0.5rem;
	object-fit: cover;
}
.itemNhanHang span {
	color: var(--greyscaletext-80-primary, #262626);
	font-size: 0.84281rem;
	display: block;
	width: 100%;
	font-style: normal;
	font-weight: 600;
	line-height: 120%; /* 1.01138rem */
	display: -webkit-box;
	-webkit-line-clamp: 1;
	margin-top: 0.63rem;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/*hạng thành viên */
.containerRankUser {
	background: white;
	border-radius: 0.5rem;
	padding: 2rem;
}
.containerRankUser .infoRankUser {
	padding: 1rem 0;
	background: #000;
	background: var(--Foundation-Green-Light, #e7f1eb80);
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.dateJoin,
.rankingUser,
.countFileDownload {
	display: flex;
	align-items: center;
	justify-content: center;
}
.dateJoin img,
.rankingUser img,
.countFileDownload img {
	width: 2.25rem;
	height: 2.25rem;
	object-fit: cover;
	margin-right: 0.5rem;
}
.inforRank {
	display: flex;
	flex-direction: column;
}
.inforRank .labelInfoRank {
	color: var(--Blue-blue-800, #0d1f33);
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 600;
	line-height: 120%; /* 1.05rem */
}
.inforRank .detailInforRank {
	color: var(--greyscaletext-40-tag, #6a6a6a);
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 400;
	line-height: 120%; /* 1.05rem */
}
.infoArchivementRank {
	margin-top: 1.25rem;
}
.archivementNewUser .titleArchivement,
.archivementSilverUser .titleArchivement,
.archivementGoldUser .titleArchivement,
.archivementDiamondUser .titleArchivement {
	border-radius: 0.375rem;
	background: linear-gradient(316deg, #015121 13.8%, #02b74a 105.92%),
		linear-gradient(99deg, #28ac4d 9.91%, #55cf42 51.9%, #51af07 100%);
	box-shadow: 4px 4px 8px 0px rgba(83, 118, 209, 0.1);
	padding: 0.75rem;
	display: flex;
	flex-direction: column;
	margin-bottom: 1rem;
}
.archivementNewUser .titleArchivement span:first-child,
.archivementSilverUser .titleArchivement span:first-child,
.archivementGoldUser .titleArchivement span:first-child,
.archivementDiamondUser .titleArchivement span:first-child {
	color: var(--Grey-scale-White, #fff);
	text-transform: uppercase;
	font-size: 0.75rem;
	font-style: normal;
	font-weight: 500;
	line-height: 120%; /* 0.9rem */
}
.archivementNewUser .titleArchivement span:last-child,
.archivementSilverUser .titleArchivement span:last-child,
.archivementGoldUser .titleArchivement span:last-child,
.archivementDiamondUser .titleArchivement span:last-child {
	display: block;
	margin-top: 0.38rem;
	color: var(--Grey-scale-White, #fff);
	font-size: 1.25rem;
	text-transform: uppercase;
	font-style: normal;
	font-weight: 800;
	line-height: 100%; /* 1.25rem */
}
.archivementSilverUser .titleArchivement {
	background: linear-gradient(99deg, #464646 0%, #535353 50.5%, #d7d7d7 100%);
}
.archivementGoldUser .titleArchivement {
	background: linear-gradient(
		99deg,
		#ffa800 0%,
		rgba(254, 107, 0, 0.73) 51.5%,
		#fbc400 100%
	);
}
.archivementDiamondUser .titleArchivement {
	background: linear-gradient(99deg, #058ff2 0%, #81afff 59%, #00e0ff 100%);
}
.contentArchivement strong:first-child {
	margin-top: 0.5rem;
}
.contentArchivement strong {
	display: block;
	margin-top: 1rem;
	margin-bottom: 0.5rem;
}
.contentArchivement ul {
	padding-left: 1.5rem;
}
.contentArchivement li {
	color: var(--greyscaletext-40-tag, #6a6a6a);
	margin-bottom: 0.5rem;
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 400;
	line-height: 150%; /* 1.3125rem */
	letter-spacing: 0.00219rem;
}
.contentArchivement {
	color: var(--Colors-Primary-Black, #000);
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 600;
	line-height: 120%; /* 1.05rem */
}

/*responsive*/
@media (max-width: 768px) {

	.containerProfilePage {
		padding: 0 1rem;
	}
	.contentProfilePage {
		flex-direction: column;
	}
	.divMenuProfilePage {
		width: 100%;
	}
	.mainContentProfilePage {
		width: 100%;
	}
	/* responsive rank*/
	.containerRankUser .infoRankUser {
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: flex-start;
	}
	.dateJoin {
		width: 50%;
		margin-bottom: 1rem;
	}
	.countFileDownload {
		width: 46%;
	}
	.infoArchivementRank {
		padding: 0.5rem;
	}
	.containerRankUser{
		padding: 0;
	}
	/* responsive form info */
	.leftFormChangeInfo .topLeftFormChangeInfo{
		flex-direction: column;
	}
	.containerFormChangeInfo{
		flex-direction: column-reverse;
	}
	.nameUserPCI, .emailUserPCI, .phoneUserPCI, .genderRadio{
		width: 100%;
	}
	.profilePageChangeInfoContainer{
		padding: 0 1rem;
	}
	.nameUserPCI > label, .emailUserPCI > label, .phoneUserPCI > label, .genderRadio > label {
		width: fit-content;
	}
	.nameUserPCI input, .emailUserPCI input, .phoneUserPCI input{
		width: 100%;
	}
	.nameUserPCI, .emailUserPCI,.phoneUserPCI{
		margin-bottom: 0.5rem;
	}
	.bottomleftFormChangeInfo > label{
		display: block;
		width: 100%;
		margin-bottom: 0.5rem;
	}
	.dateFormPCI, .monthFormPCI, .yearFormPCI{
		width: 30%;
		margin-right: 0.5rem;
	}
	.bottomleftFormChangeInfo{
		flex-wrap: wrap;
	}
	.containerFormChangeInfo .leftFormChangeInfo{
		width: 100%;
		padding-bottom: 1rem;
	}
	.containerFormChangeInfo .rightFormChangeInfo {
		width: 100%;
	}
	.savechangeProfilechange{
		margin-top: 0;
	}
	/* responsive download */
	.downloadedProfilePageInfo .btn-1-container{
		margin-top: 2rem;
	}
	.contentDownloadPI .collection-item{
		width: 47%;
	}
	.contentDownloadPI {
		padding:  1rem;

	}
	/* responsive follow */
	.followProdilePageInfo .btn-1-container .btn-1{
		padding: 0.3rem;
		font-size: 0.8rem;
		margin-top: 2rem;
	}

	.followProdilePageInfo .btn-2-container{
		overflow-x: scroll;
		position: relative;
	}
	.followProdilePageInfo .btn-2-container::-webkit-scrollbar{
		display: none;
	}
	.followProdilePageInfo .btn-2{
		font-size: 0.75rem;
		white-space: nowrap;
	}
	/* responsive lĩnh vực */
	.itemLinhvuc{
		width: 49%;
	}
	.contentNghiepvu .major-item {
		width: 49%;
	}
	.contentNhanhang .itemNhanHang{
		width: 49%;
	}
	.containerLinhvuc,.containerNghiepvu,.containerNhanhang{
		width: 100%;
		overflow: hidden;
	}
	.containerSubmenubtn2 .btn-2-container .btn-2-container-deco {
		width: 0;
	}
}

/*ẩn hiện */
.profilePageChangePass,
.profilePagechangeInfo,
.downloadedProfilePageInfo, 
.followProdilePageInfo,
.containerRankUser 
{
	margin-bottom:2rem;
}
.followProdilePageInfo {
	margin-bottom:0;
}