@charset "utf-8";
/*==========================================================================
  css_login.css - หน้า login (admin/index.php) เท่านั้น

  แยกจาก css.css เพราะ css.css โหลดทุกหน้าในระบบ ส่วนชุดนี้ใช้หน้าเดียว
  path ใน url() อ้างจากตำแหน่งไฟล์นี้ (include/) จึงต้องขึ้นต้นด้วย ../
  โหลดหลัง css.css + bootstrap เสมอ จึงทับ style เดิมได้โดยไม่ต้องใช้ !important
==========================================================================*/

.loginPage{
	/*ไล่สีโทนทองของคณะ - ชั้นล่างเป็นแนวทแยง อีกสองชั้นเป็นแสงนวลมุมบนซ้ายกับเงาอุ่นมุมล่างขวา
	  ใส่ background-color ไว้เป็นตัวสำรองสำหรับเบราว์เซอร์เก่าที่ไม่รองรับ gradient*/
	background-color: #efe2ca;
	background-image:
		radial-gradient(1100px 620px at 12% 8%,  rgba(255,253,248,.95) 0%, rgba(255,253,248,0) 62%),
		radial-gradient(900px 560px at 88% 92%,  rgba(206,175,120,.55) 0%, rgba(206,175,120,0) 58%),
		linear-gradient(135deg, #faf5ea 0%, #f0e3c9 48%, #ddc79f 100%);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
}
.loginWrap{
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 34px 16px;
	box-sizing: border-box;
}
.loginCard{
	display: flex;
	width: 100%;
	max-width: 980px;
	background: #fff;
	border-radius: 26px;
	padding: 16px;
	box-sizing: border-box;
	box-shadow: 0 26px 64px rgba(72,54,28,.18), 0 2px 8px rgba(72,54,28,.06);
}

/*---------- ฝั่งซ้าย : ตราคณะ ----------*/
.loginArt{
	position: relative;
	flex: 0 0 44%;
	max-width: 44%;
	border-radius: 18px;
	padding: 44px 30px;
	box-sizing: border-box;
	overflow: hidden;
	background: linear-gradient(150deg, #7c5c33 0%, #5a4023 58%, #46301a 100%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.loginArt:before{           /*ภาพอาคารจาง ๆ ให้เข้ากับพื้นหลัง*/
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background-image: url("../images/ArchBuilding.jpg");
	background-size: cover;
	background-position: center;
	opacity: .16;
}
.loginBrand{
	position: absolute;
	top: 24px;
	left: 26px;
	font-size: 19px;
	font-weight: 600;
	color: #f0e4cb;
	letter-spacing: .3px;
	z-index: 1;
}
.loginBrand span{ color: #d9b978; }
.loginLogo{
	position: relative;
	width: 190px;
	max-width: 68%;
	height: auto;
	display: block;
	margin: 18px auto 26px auto;
	filter: drop-shadow(0 6px 18px rgba(0,0,0,.22));
}
.loginArtText{
	position: relative;
	color: #f3e8d4;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.6;
}
.loginArtText small{
	display: block;
	margin-top: 8px;
	font-size: 13px;
	font-weight: 300;
	color: rgba(243,232,212,.72);
}

/*---------- ฝั่งขวา : ฟอร์ม ----------*/
.loginForm{
	flex: 1 1 auto;
	padding: 46px 44px 34px 44px;
	box-sizing: border-box;
	min-width: 0;
}
.loginTitle{
	margin: 0;
	font-size: 30px;
	font-weight: 600;
	color: #332d25;
	text-align: center;
}
.loginSub{
	margin: 8px 0 24px 0;
	font-size: 14px;
	font-weight: 300;
	color: #8d8477;
	text-align: center;
}
.loginField{ margin-bottom: 18px; }
.loginLabel{
	display: block;
	margin-bottom: 7px;
	font-size: 13px;
	font-weight: 600;
	color: #6f6659;
}
.loginInput{
	display: flex;
	align-items: center;
	border: 1.5px solid #e6ded0;
	border-radius: 14px;
	background: #fff;
	transition: border-color .15s, box-shadow .15s;
}
.loginInput:focus-within{
	border-color: #c3a46a;
	box-shadow: 0 0 0 4px rgba(195,164,106,.16);
}
.loginInput > i{           /*ไอคอนนำหน้าช่องกรอก - ต้องเป็นลูกโดยตรง ไม่งั้นไปโดนไอคอนในปุ่มดูรหัสผ่าน*/
	width: 48px;
	text-align: center;
	color: #b39a6d;
	font-size: 15px;
	border-right: 1px solid #efe8db;
	line-height: 22px;
}
.loginInput input{
	flex: 1 1 auto;
	min-width: 0;
	height: 50px;
	padding: 0 14px;
	border: 0;
	outline: 0;
	background: transparent;
	font-family: inherit;
	font-size: 15px;
	color: #332d25;
}
.loginInput input::-ms-reveal{ display: none; }
.loginEye{
	border: 0;
	background: transparent;
	color: #b39a6d;
	width: 46px;
	height: 50px;
	cursor: pointer;
	outline: 0;
}
.loginEye:hover{ color: #8a6a3d; }

/*---------- จำฉันไว้ในระบบ ----------*/
.loginRemember{
	display: flex;
	align-items: center;
	margin-top: -4px;
}
.loginRemember input[type="checkbox"]{
	width: 16px;
	height: 16px;
	margin: 0 8px 0 0;
	accent-color: #a8874a;
	cursor: pointer;
}
.loginRemember label{
	margin: 0;
	font-size: 13px;
	font-weight: 400;
	color: #6f6659;
	cursor: pointer;
}

.loginBtn{
	display: block;
	width: 100%;
	height: 52px;
	margin-top: 26px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(135deg, #c3a46a 0%, #a8874a 100%);
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .3px;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(168,135,74,.32);
	transition: filter .15s, transform .05s, box-shadow .15s;
}
.loginBtn:hover{ filter: brightness(1.06); }
.loginBtn:active{ transform: translateY(1px); box-shadow: 0 4px 12px rgba(168,135,74,.3); }

/*---------- ลิงก์กลับหน้าหลัก ----------*/
.loginBack{
	display: block;
	margin-top: 14px;
	font-size: 14px;
	font-weight: 400;
	color: #8d8477;
	text-align: center;
	transition: color .15s;
}
.loginBack:hover,
.loginBack:focus{ color: #a8874a; text-decoration: none; }

.loginHint{
	margin-top: 18px;
	font-size: 13px;
	font-weight: 300;
	color: #8d8477;
	text-align: center;
}
.loginFoot{
	margin-top: 26px;
	padding-top: 16px;
	border-top: 1px solid #f0eae0;
	font-size: 12px;
	font-weight: 300;
	color: #a09788;
	text-align: center;
	line-height: 1.8;
}
.loginFoot a{ color: #a8874a; }
.loginFoot strong{ font-weight: 600; color: #8d8477; }

/*---------- แถบแจ้งเตือน ----------*/
.loginAlert{ margin-bottom: 18px; }
.loginAlert .alert{
	border-radius: 12px;
	border: 0;
	margin: 0;
	padding: 12px 14px;
	font-size: 14px;
	font-weight: 300;
	text-align: left;
}
.loginAlert .alert-danger{ background: #fdecec; color: #a3352f; }
.loginAlert .alert-success{ background: #eaf6ec; color: #2f6b3a; }

/*---------- หน้าปรับปรุงระบบ (DB ล่ม) ----------*/
.loginMaintIcon{
	width: 84px;
	height: 84px;
	margin: 0 auto 22px auto;
	border-radius: 50%;
	background: rgba(195,164,106,.14);
	color: #a8874a;
	font-size: 36px;
	line-height: 84px;
	text-align: center;
}
.loginMaintText{
	margin: 0 0 4px 0;
	font-size: 15px;
	font-weight: 300;
	color: #8d8477;
	line-height: 1.7;
	text-align: center;
}

/*---------- จอแคบ : วางซ้อนกัน ----------*/
@media (max-width: 860px){
	.loginCard{ flex-direction: column; padding: 12px; border-radius: 22px; }
	.loginArt{
		flex: 0 0 auto;
		max-width: 100%;
		padding: 46px 24px 26px 24px;
	}
	.loginLogo{ width: 104px; margin: 6px auto 16px auto; }
	.loginArtText{ font-size: 15px; }
	.loginForm{ padding: 30px 24px 24px 24px; }
	.loginTitle{ font-size: 26px; }
}