html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-image: url('../img/background_theme_blur.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;

	background-color: #ffffff;

	/* Do not repeat the background image */
	background-attachment: fixed;
}

.portraitClass {
	transform: rotate(-90deg);
	transform-origin: left top;
	width: 100vh;
	height: 100vw;
	overflow-x: hidden;
	position: absolute;
	top: 100vh;
	left: 0;  
}

.container {
	display: flex;
	width: 100%;
	height: 100%;
	/* min-width: 1024px; */
	flex-direction: column;
	overflow: hidden;
	z-index: 100;
}

/* Ẩn iframe ban đầu */
iframe {
    opacity: 0.2;
    visibility: hidden;
    transition: opacity 1s ease, visibility 0s 1s; /* Hiệu ứng mờ dần trong 0.5 giây */
}

/* Khi iframe được hiển thị */
iframe.active {
    opacity: 1; /* Hiện rõ */
    visibility: visible;
    animation: fadeIn 1s ease-out;
}

.wait_div {
	display: flex;
    align-items: center; /* Căn giữa theo chiều dọc */
    justify-content: center; /* Căn giữa theo chiều ngang */
	width: 100%;
	height: 100%;
	position: absolute;
	visibility: visible;
	backdrop-filter: blur(2px);
	border-top-left-radius: 50px;
	border-bottom-left-radius: 50px;
  }
  
 .loader-outside {
	background-color: white;
	border: 1px solid rgb(2, 179, 249);
	margin: auto;
	border-radius: 20px;
	padding: 5px;
}
 
.loader {
	margin: auto;
	border: 5px solid #f3f3f3;
	border-radius: 50%;
	border-top: 5px solid #3498db;
	width: 50px;
	height: 50px;
	-webkit-animation: spin 2s linear infinite;
	/* Safari */
	animation: spin 2s linear infinite;
}

@media only screen and (max-width: 1535px) {
	body {
		overflow-x: scroll;
	}
}

@media only screen and (min-height: 721) {
	body {
		overflow-y: scroll;
	}
}

@keyframes fadeIn {
	from {
	  opacity: 0.2;
	}
	to {
	  opacity: 1;
	}
  }