@charset "utf-8";

:root {
  --accent: #ff3b3b;
  --muted: rgba(255,255,255,0.08);
}

#Main{position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; overflow: hidden}
	#Main_BG{position: absolute; width: 100%; height: 100%; top: 0px; left: 0px;  object-fit: cover; z-index: -1}
	#Main_Noidung{; min-height: 100vh; z-index: 10;
		margin: 0 auto; padding: 2rem;
		box-sizing: border-box; 
		display: flex; align-items: center; justify-content: center;}
		#Main_Noidung_1{position: relative; width: 100%; max-width: 720px; max-height: 90vh; 
  			overflow-x: hidden;
			scrollbar-width: none; -ms-overflow-style: none; 
			background: rgba(0,0,0,0.80);
			padding: 1.5rem;
			display: block;
			border: 1px solid rgba(255,255,255,0.25); border-radius: 12px;
			text-align: center;}
			.Avatar{ width: 100%; max-width: 150px;
				padding: 1rem 0rem 0rem 0rem}
			.Avatar_2{width: 100%; max-width: 250px;
				padding: 1rem 0rem 0rem 1rem;}
			.Ten{padding: 1rem 0rem 1rem 0rem;
				font-family: 'Roboto-Bold'; font-size: clamp(16px, 6vw, 36px); color: white}
			.Event{width: 100%; max-width: 600px;
				padding: 1rem 0rem 0rem 0rem}
				.Event:nth-last-of-type(1){padding: 0; margin: 2rem 0rem 2rem 0rem;
					border: solid 2px rgba(255,198,0,1.00); border-radius: 12px;
					overflow: hidden}
			.Event_2{width: 100%; max-width: 600px;
				padding: 1rem 0rem 0rem 0rem}
				.Event_2:nth-last-of-type(1){padding: 0; margin: 1rem 0rem 2rem 0rem;}
			.Cauhoi_Box{}
				.Cauhoi_Box_1{width: 100%;
					padding: 0rem 0rem 0rem 0rem;
					font-family: 'Roboto-Medium'; font-size: clamp(16px, 10vw, 36px); color: rgba(0,255,84,1.00)}
				.Cauhoi_Box_2{width: 100%;
					padding: 1rem 0rem 0rem 0rem;
					display: block;
					font-family: 'Roboto-Medium'; font-size: clamp(16px, 4vw, 36px); color: white}
				.Cauhoi_Box_3{width: 100%;
					padding: 1rem 0rem 0rem 0rem;
					display: flex; align-items: center; justify-content: space-around;
					font-family: 'Roboto-Medium'; font-size: clamp(16px, 4vw, 36px); color: white}
				.Cauhoi_Box_4{width: 100%;
					padding: 1rem 0rem 0rem 0rem;
					display: block;}
					.Sotienvay_Input{width: 100%; max-width: 420px;height: 12px;
						-webkit-appearance:none;
						appearance:none;
						background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 50%, var(--muted) 50%, var(--muted) 100%);
						border-radius: 999px;
						outline:none;}
						/* WebKit thumb */
						.Sotienvay_Input::-webkit-slider-thumb{width:22px; height:22px;
							-webkit-appearance:none;
							appearance:none;
							background: #fff;
							border: 3px solid var(--accent); border-radius:50%;
							box-shadow: 0 4px 12px rgba(255,59,59,0.18);
							cursor: pointer;
							margin-top: -5px;}
						/* Firefox thumb */
						.Sotienvay_Input::-moz-range-thumb{width:22px;height:22px;
							background:#fff;
							border:3px solid var(--accent); border-radius:50%;
							box-shadow: 0 4px 12px rgba(255,59,59,0.18);
							cursor:pointer;}
						/* track in Firefox */
						.Sotienvay_Input::-moz-range-track{
							height:12px;
							background:var(--muted);
							border-radius:999px;}
						/* focus outline */
						.Sotienvay_Input:focus::-webkit-slider-thumb{
							box-shadow: 0 6px 20px rgba(255,59,59,0.32);}
					.Sotienvay_Input_Box{min-width:72px;
						margin: 1rem 2rem 1rem 2rem; padding:.5rem .75rem;
						background: rgba(255,59,59,0.12); 
						box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2);
						border-radius:8px;
						font-weight:700; color: #fff;}
					.LamviecTaiHN_Button{width: 25%;
						padding: 1rem 1rem 1rem 1rem; margin: 2rem 1rem 2rem 1rem;
						background: none;
						border: solid 2px white; border-radius: 12px;}
				.Tientrinh{padding: 1rem 0rem 1rem 0rem;
					font-family: 'Roboto-Bold'; font-size: clamp(24px, 2vw, 24px); color: white}
					.Tientrinh > span {color: red}
				.DienThongtin{margin: 1.5rem 0rem 0rem 0rem;
					display: flex; align-items: stretch; flex-direction: column;
					gap: 1rem;}
					.DienThongtin label{margin: 1rem 0rem .5rem 0rem; 
						display: block;
						font-family: "Roboto-Medium"; font-size: clamp(16px, 2rem, 36px); color: white;
						text-align: left;}
					.DienThongtin input{width: 100%; 
						background: transparent; outline: none; box-sizing: border-box;
						padding: 0.6rem 0.8rem;
						border: 1px solid rgba(255,59,59,0.18); border-radius: 8px;
						font-family: "Roboto-Medium"; font-size: clamp(16px, 2rem, 36px); color: #fff;
						transition: border-color .2s, box-shadow .2s, background .2s;}
					    .DienThongtin input:focus {background: rgba(255,59,59,0.04);
							border-color: #ff3b3b;
							box-shadow: 0 0 6px rgba(255,59,59,0.5);}
							.was-validated input:invalid {border-color: #ff3b3b;
								box-shadow: 0 0 6px rgba(255,59,59,0.6);}
							.DienThongtin input.valid {background: rgba(0,255,0,0.05);
								border-color: #3cff3c;
								box-shadow: 0 0 8px rgba(0,255,0,0.6);}
						.DienThongtin .button-row {margin: .5rem 0rem 0rem 0rem;
							display: flex; justify-content: center; flex-wrap: wrap;
							gap: 40px;}
							.DienThongtin button {padding: .6rem 1.2rem .6rem 1.2rem;
								border: none; border-radius: 8px;
								font-family: "Roboto-Medium"; font-weight: 700; font-size: clamp(12px, 2rem, 24px);
								cursor: pointer;
								transition: background .2s, color .2s, transform .1s;}
								.DienThongtin .btn-submit {background: #ff3b3b;
									color: white;}
								.DienThongtin .btn-reset {background: transparent;
									border: 1px solid #ffbdbd;
									color: white;}
								   .DienThongtin #formMessage {marginp: .8rem 0rem 0rem 0rem;
										color: rgba(255,59,59,0.85);
										display: none;
										text-align: center;}

		#Main_Noidung_2{position: relative; width: 100%; max-width: 720px; max-height: 90vh; 
  			overflow-x: hidden;
			scrollbar-width: none; -ms-overflow-style: none; 
			background: rgba(0,0,0,0.80);
			padding: 1.5rem;
			display: none;
			border: 1px solid rgba(255,255,255,0.25); border-radius: 12px;
			text-align: center;}
		#Main_Noidung_3{position: relative; width: 100%; max-width: 720px; max-height: 90vh; 
  			overflow-x: hidden;
			scrollbar-width: none; -ms-overflow-style: none; 
			background: rgba(0,0,0,0.80);
			padding: 1.5rem;
			display: none;
			border: 1px solid rgba(255,255,255,0.25); border-radius: 12px;
			text-align: center;}
		#Main_Noidung_4{position: relative; width: 100%; max-width: 720px; max-height: 90vh; 
  			overflow-x: hidden;
			scrollbar-width: none; -ms-overflow-style: none; 
			background: rgba(0,0,0,0.80);
			padding: 1.5rem;
			display: none;
			border: 1px solid rgba(255,255,255,0.25); border-radius: 12px;
			text-align: center;}
		#Main_Noidung_5{position: relative; width: 100%; max-width: 720px; max-height: 90vh; 
  			overflow-x: hidden;
			scrollbar-width: none; -ms-overflow-style: none; 
			background: rgba(0,0,0,0.80);
			padding: 1.5rem;
			display: none;
			border: 1px solid rgba(255,255,255,0.25); border-radius: 12px;
			text-align: center;}
		#Main_Noidung_6{position: relative; width: 100%; max-width: 720px; max-height: 90vh; 
  			overflow-x: hidden;
			scrollbar-width: none; -ms-overflow-style: none; 
			background: rgba(0,0,0,0.80);
			padding: 1.5rem;
			display: none;
			border: 1px solid rgba(255,255,255,0.25); border-radius: 12px;
			text-align: center;}