.login-box::before{
	content: "";
	display: block;
	height: 10px;
	background: #FFAAAA;
	border-radius: 20px 20px 0 0;
	margin: -40px -35px 30px -35px;
}


*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body{
	font-family: Arial, sans-serif;
	background: linear-gradient(
		135deg,
		#fff5f5,
		#ffeaea
	);
	min-height: 100vh;
}

/* KHUNG NGOÀI */
.login-wrapper{
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 30px;
}

/* HỘP FORM */
.login-box{
	width: 420px;
	background: white;
	padding: 40px 35px;
	border-radius: 25px;
	box-shadow: 0 8px 25px rgba(0,0,0,0.12);

	/* đồng bộ màu web */
	border-top: 8px solid #FFAAAA;
}

/* REGISTER rộng hơn */
.register-box{
	width: 480px;
}

/* TITLE */
.login-box h2{
	text-align: center;
	color: #ff8c8c;
	font-size: 32px;
	margin-bottom: 8px;
}

.subtitle{
	text-align: center;
	color: #777;
	margin-bottom: 30px;
	font-size: 15px;
}

/* INPUT */
.input-group{
	position: relative;
	margin-bottom: 20px;
}

.input-group i{
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	color: #ff8c8c;
	font-size: 18px;
}

.input-group input{
	width: 100%;
	padding: 14px 15px 14px 48px;
	border: 2px solid #ffd1d1;
	border-radius: 35px;
	outline: none;
	font-size: 15px;
	transition: 0.3s;
	background: #fffafa;
}

.input-group input:focus{
	border-color: #FFAAAA;
	box-shadow: 0 0 8px rgba(255,170,170,0.4);
}

/* OPTIONS */
.options{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 25px;
	font-size: 14px;
}

.options a{
	text-decoration: none;
	color: #ff8c8c;
	font-weight: bold;
}

.options a:hover{
	text-decoration: underline;
}

/* BUTTON */
button{
	width: 100%;
	padding: 15px;
	border: none;
	border-radius: 35px;
	background: #FFAAAA;
	color: white;
	font-size: 17px;
	font-weight: bold;
	cursor: pointer;
	transition: 0.3s;
}

button:hover{
	background: #ff8c8c;
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(255,170,170,0.4);
}
.btn{
	display: block;
	width: 100%;
	text-align: center;
	padding: 15px;
	border-radius: 35px;
	background: #FFAAAA;
	color: white;
	font-size: 17px;
	font-weight: bold;
	text-decoration: none;
	transition: 0.3s;
}

.btn:hover{
	background: #ff8c8c;
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(255,170,170,0.4);
}

/* CHUYỂN FORM */
.change-form{
	text-align: center;
	margin-top: 25px;
	color: #666;
}

.change-form a{
	color: #ff8c8c;
	font-weight: bold;
	text-decoration: none;
}

.change-form a:hover{
	text-decoration: underline;
}
/* REGISTER */
.register-box{
	width: 480px;
}