body.no-scroll {
	overflow: hidden;
}
.okhub-card{
	max-width:420px;
	margin:24px 0;
	padding:20px;
	border:1px solid #e5e7eb;
	border-radius:8px;
	background:#fff
}
.okhub-card input{
	width:100%;
	padding:10px 12px;
	margin:8px 0;
	border:1px solid #d1d5db;
	border-radius:6px
}
.okhub-card button{
	background:#d11b1b;
	color:#fff;
	border:none;
	padding:10px 14px;
	border-radius:6px;
	cursor:pointer
}
.okhub-msg {
	margin-top: 0;
	padding: 0 0.5rem;
	border-radius: 0.375rem
}
.okhub-msg.error{
	color: #D32F2F;
}
.okhub-msg.success{
	background:#ecfdf5;
	color:#065f46
}
.okhub-link{
	display:inline-block;
	margin-top:8px;
	color:#2563eb;
	text-decoration:underline;
	cursor:pointer
}

.login-page-container{
	/* 	margin-top:4.25rem; */
	height:100vh;
	display: flex;
	align-items: start;
	justify-content: start;
	background: #f7f7f7;
	overflow:hidden
}

.okhub-flow{
	/* 	width:100%;
	align-items: center;
	justify-content: center; */
}

.login-page-section {
	display: flex;
	width: 100%;
	height:100%;
	background: #f7f7f7;
/* 	margin-top:4.25rem; */
}

.login-page-body {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: self-start;
	background: #f7f7f7;
	position: relative;
	justify-content: end;
}

.login-page-body .login-page-body-left {
	width: 100%;
	height: 100%;
	display: flex;
	/*   flex-direction: column;
	align-items: center; */
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0rem;
}

/* .login-page-image__circle{ */
/* 	position: absolute;
top: -18rem;
left: -32.75rem;
height: 0rem;
width: 82.375rem;
height: 82.375rem;
border-radius: 50%; */
/* background: red; */
/*     overflow: hidden;
clip-path: path('M0,0 H700 Q800,250 700,500 H0 Z'); */
/* } */

/* .login-page-body .login-page-body-left .login-page-body-left__img { */
/*   width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
object-fit: cover; */
/* 	padding: 0rem 0rem 19.25rem 32rem; */

/* } */

.login-page-image__circle {
	/*   width: 50rem; */
	width:100%
		height: 100vh;
	/*   overflow: hidden;
	clip-path: url(#clip-shape);
	-webkit-clip-path: url(#clip-shape); */
}

.login-page-body-left__img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* giữ tỉ lệ ảnh, cắt thừa */
	display: block;
}

.login-page-body .login-page-body-right {
	width: 50%;
	display: flex;
	flex-direction: column;
	align-items: self-end;
	justify-content: center;
	z-index: 2;
	margin-top: 8.12rem;
	margin-right: 9.38rem;
}

.login-page-body-right__wrapper {
	display: flex;
	width: 34.375rem;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
	justify-content: center;
}

.login-page-body-right__content {
	display: flex;
	height: auto;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	align-self: stretch;
}

.login-page-body-right__content-title {
	color: var(--Color-Body-text-100, #1a1a1a);
	font-family: "Shopee Display", sans-serif;
	font-size: 2.4375rem;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	align-self: stretch;
}

.login-page-body-right__content-desc {
	color: var(--Color-Body-text-60, rgba(26, 26, 26, 0.6));
	font-family: "Shopee Display", sans-serif;
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 400;
	line-height: 140%; /* 1.225rem */
	align-self: stretch;
}

.login-page-body-right__form {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.875rem;
	align-self: stretch;
}

.login-page-body-right__form-group {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	align-self: stretch;
}

/* .login-form {
display: flex;
width: 100%;
flex-direction: column;
align-items: flex-start;
gap: 1.25rem;
align-self: stretch;
} */

.login-page-body-right__form-eye {
	position: absolute;
	cursor: pointer;
	top: 50%;
	right: 1rem;
	width: 1.25rem;
	height: 1.25rem;
	transform: translateY(-50%);
	transition: opacity 0.3s ease;
	opacity: 0;
	pointer-events: none;
}

.login-page-body-right__form-eye.active {
	opacity: 1;
	pointer-events: auto;
}

.login-page-body-right__form-label {
	display: flex;
	align-items: flex-start;
	gap: 0.25rem;
	align-self: stretch;
	color: var(--Color-Body-text-75, rgba(26, 26, 26, 0.75));
	font-family: "Shopee Display", sans-serif;
	font-size: 1rem;
	font-style: normal;
	font-weight: 500;
	line-height: 140%; /* 1.4rem */
}

.required-label {
	color: red;
	width: 0.4375rem;
	height: 0.6875rem;
}

.login-page-body-right__form-eye-group {
	display: flex;
	width: 100%;
	position: relative;
	z-index: 1;
}

.login-page-body-right__form-input {
	display: flex;
	padding: 0.875rem;
	align-items: center;
	gap: 0.625rem;
	align-self: stretch;
	border-radius: 6.25rem;
	border: 0.6px solid var(--Color-Stroke-01, rgba(26, 26, 26, 0.25));
	background: #fff;
	color: rgba(26, 26, 26, 0.3);
	font-family: "Shopee Display", sans-serif;
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 400;
	line-height: 140%; /* 1.225rem */
	flex: 1 0 0;
	color: #1a1a1a;
	height:3rem;

}

.login-page-body-right__form-input:focus{
	border: 0.6px solid var(--Color-Body-text-100, #1A1A1A);
}

.login-page-body-right__form-btn-group {
	display: flex;
	justify-content: space-between;
	align-items: center;
	align-self: stretch;
}

.login-page-body-right__checkbox-label{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:0.5rem;
	cursor:pointer;
}

.login-page-body-right__checkbox {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	position: relative;
}
.login-page-body-right__checkbox-label .checkbox-icon-wrapper {
	position: relative;
	width: 1.5rem;
	height: 1.5rem;
}
.login-page-body-right__checkbox-label .checkbox-icon-wrapper > img {
	position: absolute;
	width: 100%;
	height: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.login-page-body-right__checkbox-label > input[type="checkbox"] + .checkbox-icon-wrapper .active,
.login-page-body-right__checkbox-label > input[type="checkbox"]:checked + .checkbox-icon-wrapper .inactive {
	display: none;
}
.login-page-body-right__checkbox-label > input[type="checkbox"] + .checkbox-icon-wrapper .inactive,
.login-page-body-right__checkbox-label > input[type="checkbox"]:checked + .checkbox-icon-wrapper .active {
	display: block;
}

/* Ẩn checkbox mặc định */

.login-page-body-right__checkbox-input{
	overflow:hidden;
	display: none; /* ẩn checkbox mặc định */
}

.checkbox-icon {
	display: inline-block;
	vertical-align: middle;
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
}

/* SVG checked ban đầu ẩn */
.checkbox-icon.checked {
	display: none;
}

/* Khi checkbox được check thì đổi icon */
.login-page-body-right__checkbox-input:checked ~ .default {
	display: none;
}
.login-page-body-right__checkbox-input:checked ~ .checked {
	display: inline-block;
}



.login-page-body-right__forgot-pass {
	color: #1a75bf;

	/* PC/16/16: Medium */
	font-family: "Shopee Display", sans-serif;
	font-size: 1rem;
	font-style: normal;
	font-weight: 500;
	line-height: 140%; /* 1.4rem */
	cursor: pointer;
}

.login-page-body-right__btn {
	display: flex;
	padding: 0.625rem 1.25rem;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	align-self: stretch;
	border-radius: 62.5rem;
	background: var(--Color-Brand-Red, #D32F2F);
	color: #fff;

	/* PC/16/16: Medium */
	font-family: "Shopee Display", sans-serif;
	font-size: 1rem;
	font-style: normal;
	font-weight: 500;
	line-height: 140%; /* 1.4rem */
	width: 100%;
	height:2.625rem;
	transition: background 0.3s ease-out;
}

.login-page-body-right__btn:hover{
	background:#b30616;

}

.error-message {
	color: #d32131;
	font-size: 1rem;
	padding: 0rem 0.5rem;
	display: none;
}

.error-message-show{
	opacity: 1;
	visibility: visible;
}

.login-page-body-right__form-input.error {
	border: 1px solid red;
	height:3rem;
}

.toggle-password {
	display: none;
}

.hidden {
	display: none;
}

.login-forgot-pass-wrapper{
	color: #000;
	/* PC/16/16: Regular */
	font-family: "Shopee Display", sans-serif;
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 400;
	line-height: 140%; /* 1.4rem */
}

.forgot-pass__login{
	color: var(--Color-Body-text-60, rgba(26, 26, 26, 0.60));

	/* PC/16/16: Regular */
	font-family: "Shopee Display", sans-serif;
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 400;
	line-height: 140%; /* 1.4rem */
}



/* Forgot Pass */
.forgot-pass-page {
	display: none;
}

.form-forgot-pass {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
	align-self: stretch;
	width: 100%;
}

.login-forgot-pass-wrapper{
	display:flex;
	gap:0.125rem;
}

/* Authentic */
.authentic-page {
	display: none;
}
.authentic-page__content {
	height: auto !important;
}

.authentication-email-wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	align-self: stretch;
	width: 100%;
}

.authentication-email {
	display: flex;
	width: 100%;
	align-items: center;
	gap: 0.5rem;
}

.authentic-icon {
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
}

.authentic-email__text {
	color: var(--Color-Body-text-60, rgba(26, 26, 26, 0.6));
	font-family: "Shopee Display", sans-serif;
	font-size: 1rem;
	font-style: normal;
	font-weight: 400;
	line-height: 140%; /* 1.4rem */
}

.authentic__form-group {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-end;
	gap: 0.5rem;
	align-self: stretch;
	width: 100%;
}

.authentic__form-input-group {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	flex: 1 0 0;
	width: 100%;
}

.authentic__form-input {
}

.btn-resend {
	display: flex;
	height: 3rem;
	padding: 0.625rem 1.25rem;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	border-radius: 62.5rem;
	border: 1px solid var(--Color-Brand-Red, #d32131);
	color: var(--Color-Brand-Red, #d32131);
	/* PC/16/16: Medium */
	font-family: "Shopee Display", sans-serif;
	font-size: 1rem;
	font-style: normal;
	font-weight: 500;
	line-height: 140%; /* 1.4rem */
}

.btn-resend.disabled-btn {
	background: #F7F7F7;
	cursor: not-allowed;
	color: #EEC1C5;
	border: 1px solid #EEC1C5;
}

/* Change password */

.change-password-page {
	display: none;
}

.change-password-page__content {
	height: auto !important;
}

.change-password-form {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
	align-self: stretch;
	width: 100%;
}

/* popup */

.popup-login-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	justify-content: center;
	align-items: center;
	z-index: 9999;
}

.popup-login {
	display: flex;
	width: 24.5rem;
	padding: 1.25rem;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
	border-radius: 0.75rem;
	background: #fff;
}

.popup-login__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	align-self: stretch;
	width: 100%;
}

.popup-login__img {
	display: flex;
	width: 2.5rem;
	height: 2.5rem;
	justify-content: center;
	align-items: center;
}

.popup-login__text {
	color: #000;
	text-align: center;
	font-family: "Shopee Display", sans-serif;
	font-size: 1.5rem;
	font-style: normal;
	font-weight: 700;
	line-height: 1.75rem; /* 116.667% */
}

.popup-login__desc {
	color: var(--Color-Body-text-60, rgba(26, 26, 26, 0.6));
	text-align: center;

	/* PC/16/16: Regular */
	font-family: "Shopee Display", sans-serif;
	font-size: 1rem;
	font-style: normal;
	font-weight: 400;
	line-height: 140%; /* 1.4rem */
}

.popup-login__confirm {
	display: flex;
	padding: 0.625rem 1.25rem;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	flex: 1 0 0;
	border-radius: 62.5rem;
	background: var(--Color-Brand-Red, #d32f2f);
	color: #fff;

	/* PC/16/16: Medium */
	font-family: "Shopee Display", sans-serif;
	font-size: 1rem;
	font-style: normal;
	font-weight: 500;
	line-height: 140%; /* 1.4rem */
	width: 100%;
	height:2.625rem;
	transition: background 0.3s ease-out;
}

.popup-login__confirm:hover{
	background: #b30616;
}

@media screen and (max-width: 639.98px) {
	.login-page-section {
		width: 100%;
		height: auto;
		margin-top: 3.89168rem;
	}
	.login-page-container {
		margin-top:0;
		height: 100vh;
		display: flex;
		align-items: start;
		justify-content: start;
		background: #f7f7f7;
		overflow: hidden;
	}

	.login-page-body .login-page-body-right{
		margin-top:0rem;
		margin-right:0rem;
		align-items:center;
		justify-content:center;
	}


	.login-page-body {
		width: 100%;
	}
	.login-page-body-left {
		display: none !important;
		width: 100% !important;
	}
	.login-page-body-right {
		width: 100% !important;
	}

	.login-page-body-right__wrapper {
		padding: 1.5rem 1rem 0 1rem;
		flex-direction: column;
		align-items: flex-start;
		gap: 1.25rem;
		align-self: stretch;
		width: 100% !important;
	}

	.login-page-body-right__content {
		gap: 1.25rem;
		height: auto !important;
	}
	.login-page-body-right__content-title {
		font-size: 1.5rem;
	}
	.login-page-body-right__content-desc {
		font-size: 0.875rem;
	}

	.login-page-body-right__form {
		gap: 0.875rem;
		margin-bottom: 0.5rem;
	}

	.login-page-body-right__form-group {
		gap: 0.75rem;
	}

	.btn-resend{
		margin-bottom:0.5rem
	}
	.login-page-body-right__form-label {
		font-size: 0.875rem;
	}
	.login-page-body-right__form-input {
		padding: 0.75rem;
		align-items: center;
		gap: 0.625rem;
		align-self: stretch;
		font-size: 0.875rem;
		height:2.625rem
	}

	.login-page-body-right__form-input.error{
		height:2.625rem;
	}
	.login-page-body-right__btn {
		font-size: 0.875rem;
		height:2.25rem;
	}

	.login-page-body-right__checkbox-input {
		width: 1.25rem;
		height: 1.25rem;
		fill: var(--Color-Body-text-75, rgba(26, 26, 26, 0.75));
	}
	.login-page-body-right__checkbox-label {
		font-size: 0.875rem;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
	}
	.login-page-body-right__forgot-pass {
		font-size: 0.875rem;
	}

	.error-message {
		font-size: 0.875rem;
	}

	.okhub-flow{
		width:100%;
		align-items: center;
		justify-content: center;
	}

	/* Forgot Pass */

	/* Authentic */
	.authentic__form-group {
		display: flex;
		flex-direction: column;
	}

	.btn-resend {
		display: flex;
		padding: 0.5rem 1rem;
		justify-content: center;
		align-items: center;
		gap: 0.5rem;
		color: var(--Color-Brand-Red, #d32131);
		font-family: "Shopee Display", sans-serif;
		font-size: 0.875rem;
		font-style: normal;
		font-weight: 500;
		line-height: 140%; /* 1.225rem */
		height:2.25rem
	}

	/* popup */
	.popup-login {
		width: 90%;
		padding: 1rem;
	}
	.popup-login__text {
		font-size: 1.25rem;
	}
	.popup-login__desc {
		font-size: 1rem;
	}
	.popup-login__confirm {
		font-size: 1rem;
		height:2.5rem;
	}
}