body{
	
}

.container0 {
	top:0px;
	left:0px;
	margin:0;
	padding:0;
	position:fixed;
	width:100%;
	height:100%;
	z-index: 99;
	background-image: url('img/adidaphat.png');
    background-position: center; /* Căn giữa ảnh */
    background-repeat: no-repeat; /* Không lặp lại ảnh */
	animation: fadeEffect 20s ease-in-out infinite;
}

/*
.container1 {
	position: fixed;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle at center, #ff0080, #ff8c00, #40e0d0);
	background-size: 200% 200%;
}


.container1::before {
	content: "";
	position: fixed;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: rgba(150, 150, 0, 0.5); 
	filter: blur(20px);
	z-index: 98;
	animation: fadeEffect 20s ease-in-out infinite;
}

@keyframes moveGlow {
  0% { background-position: center; }
  100% { background-size: 300% 300%; }
}

@keyframes pulse {
  0% {
    width: 100px;
    height: 100px;
    opacity: 0.8;
  }
  100% {
    width: 400px;
    height: 400px;
    opacity: 0;
  }
}*/

@media (orientation: portrait) {
  .container0 {
    background-size: 100% auto;
  }
}

@media (orientation: landscape) {
  .container0 {
    background-size: auto 100%;
  }
}

.container{
	align-items: center;     /* Centers vertically */
	text-align: center;
	justify-content: center;
	position: relative; /*absolute;*/
	width:100%;
	height:100%;
}

.main {	
	display:block; /*absolute;*/
    width: 100%;
	height:auto;
	background-image: url('img/bgmid.png');
	background-size: 100% auto; /* Rộng 100%, cao tự động */
	background-repeat: repeat-y; /* Chỉ lặp lại theo chiều dọc */
}



.middle{
	height:100%;
}

.top {
	width: 100%;
	top:0px;
	z-index:2;
}
		
.bottom {
	width: 100%;
}

.content{
	z-index:2;
}

.contentnammo{
	width: 220px;
}
.contentnhattam{
	width: 220px;
}

.contentcophattu{
	width: 80px;
}

.img-circle {
	border: #5F0309 3px solid;
	border-radius: 50%;
	width: 100px;
	height: 140px;
	object-fit: cover; /* Giữ ảnh không bị bóp méo */
	width:100px;
	z-index:1;
}

.contentvangsanh{
	width: 220px;
}

#name, #nick {
	text-shadow: -1px -1px 1px rgba(255,255,255,0.1), 1px  1px 1px rgba(0,0,0,0.5);
}

.contentdetail{
	width: 220px;
	vertical-align: bottom;
	text-align: center;
	padding: 20px 40px;
	font-weight: bold;
	color:#5F0309;
	border-radius: 8px;
	font-size:12px;
	line-height: 1.5;
	letter-spacing: -0.5px;
	display: inline-block;
}
.contentbuddha{
	height:100%;
	animation: fadeEffect 30s ease-in-out infinite;
}

/* Định nghĩa hiệu ứng mờ dần sang rõ nét */
@keyframes fadeEffect {
	0% {
		opacity: 0; /* Lúc bắt đầu: Ẩn hoàn toàn */
	}
	60% {
		opacity: 0; /* Ở giữa chu kỳ: Hiện rõ nét */
	}
	80% {
		opacity: 1; /* Ở giữa chu kỳ: Hiện rõ nét */
	}
	100% {
		opacity: 0; /* Kết thúc chu kỳ: Ẩn hoàn toàn để quay lại bước 0% */
	}
}

.contentsenphai{
	width:62px;
	/*filter: saturate(1) brightness(1);*/
	filter: invert(73%) sepia(70%) saturate(6000%) hue-rotate(358deg) brightness(79%) contrast(42%);
}

.contentsentrai{
	width:62px;
	/*filter: saturate(1) brightness(1);*/
	filter: invert(73%) sepia(70%) saturate(6000%) hue-rotate(358deg) brightness(79%) contrast(42%);
}

.bgsidebar {
	width: 100%;
	height:100%;
	position: fixed;
	z-index:2;
	justify-content: space-between; /* Pushes content to opposite edges */
    align-items: top;            /* Centers them vertically */
	display:none;
}
.contentsidebarleft{
	left:20px;
}
.contentsidebarright{
	right:20px;
}
.sidebar{
	width:50px;
}

.poem{
	height:300px;
	width:60px;
	/*filter: saturate(1.5) brightness(1.5);*/
	filter: invert(73%) sepia(70%) saturate(6000%) hue-rotate(358deg) brightness(79%) contrast(42%);
}

.poem{
	padding: 10px 0;
	width:55px;
}

@media (orientation: portrait) {
  .container0 {
    background-size: 90% auto;
  }
}

@media (orientation: landscape) {
  .container0 {
    background-size: auto 100%;
  }
}

@media (min-width: 1024px) {

	.master {
		width: 1024px;
	}
	.main {
		width: 1024px;
	}
	.contentsenphai{
		width:120px;
	}
	.contentsentrai{
		width:120px;
	}
	.bgsidebar {
		width:1024px;
	}
	.contentnammo{
		width: 400px;
	}
	.contentnhattam{
		width: 400px;
	}
	.contentcophattu{
		width:140px;
	}
	.contentvangsanh{
		width:400px;
	}
	.contentdetail{
		width:400px;
		font-size:20px;
		letter-spacing: 0.6px;
		line-height: 1.4;
	}
	.poem{
		padding: 10px 0;
		width:85px;
	}
	.poem{
		padding: 10px 0;
		width:85px;
	}
	.poem{
		padding: 10px 0;
		width:85px;
	}
	.poem{
		padding: 10px 0;
		width:85px;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.master {
		width: 100%;
	}
	.main {
		width: 100%;
	}
	.bgsidebar {
		width:100%;
	}
	.contentsenphai{
		width:80px;
	}
	.contentsentrai{
		width:80px;
	}
	.contentnammo{
		width: 460px;
	}
	.contentnhattam{
		width: 460px;
	}
	.contentcophattu{
		width:160px;
	}
	.contentvangsanh{
		width:460px;
	}
	.contentdetail{
		width:460px;
		font-size:22px;
		letter-spacing: 1px;
	}
}

@media (min-width: 576px) and (max-width: 767px){
	.master {
		width: 100%;
	}
	.main {
		width: 100%;
	}	
	.bottom {
		width:100%;
	}
	.bgsidebar {
		width:100%;
	}
	.contentsenphai{
		width:72px;
		filter: saturate(1) brightness(1);
	}

	.contentsentrai{
		width:72px;
		filter: saturate(1) brightness(1);
	}
	.contentnammo{
		width: 330px;
	}
	.contentnhattam{
		width: 330px;
	}
	.contentcophattu{
		width:120px;
	}
	.contentvangsanh{
		width:330px;
	}
	.contentdetail{
		width:330px;
		font-size:18px;
		letter-spacing: -0.5px;
	}
}