body {
	font-family: Arial, sans-serif;
	text-align: center;
	margin-top: 10px;
}
	
.page-container {
max-width: 500px; /* Giới hạn kích thước tối đa của trang */
margin: 0 auto; /* Canh giữa trang */
padding: 0px; /* Thêm padding để tạo khoảng cách với cạnh trang */
text-align: center;
opacity: 0.1;
border: 1px solid #ccc;
}	
	
	


#img_guide{
	position: absolute;
	z-index: 998;
	display: block;
	margin: 0 auto;
	width: 95%;
	max-width: 500px;
	top : 0;
}

#img_changekey {
position: absolute;
z-index: 998;
display: block;
margin: 0 auto;
width: 25%;
max-width: 80px;
left: 50%;
transform: translate(-50%, -50%);
}



#countdown-container_mom {
	
	width: 30%; /* Chiều rộng của khung đếm ngược */
	max-width: 170px; /* Chiều rộng tối đa */
	margin-left: 1%;
	
	position: relative;
	overflow: hidden;
	display: inline-block;			
}

#countdown-container {
	border: 2px solid orange;
	width: 95%; /* Chiều rộng của khung đếm ngược */
	max-width: 170px; /* Chiều rộng tối đa */
	border-radius: 5px;
	position: relative;
	overflow: hidden;
	display: inline-block;			
}
.blinking-border {
	animation: blinkBorder 0.5s infinite alternate;
}
@keyframes blinkBorder {
0%{
border-color: #ccc;
}100% {		
border-color: red;}
}
#countdown-container #countdown {
	
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	color: #333;
}
#countdown-container #indexRound {
   
	position: absolute;
	font-weight: bold;
	top: 10%;
	left: 20%;
	transform: translate(-50%, -50%);
	margin: 0;
	color: #FFA500;
}

#countdown-container #cd_food1,
#countdown-container #cd_food2,
#countdown-container #cd_food3,
#countdown-container #cd_food4,
#countdown-container #cd_food5,
#countdown-container #cd_food6,
#countdown-container #cd_food7,
#countdown-container #cd_food8,
#countdown-container #cd_food9,		
#countdown-container #cd_food10 {
position: absolute;
top: 50%;
left: 50%; /* Điều chỉnh giá trị left ở đây */
transform: translate(-50%, -50%);
width: 100%; /* Chiều rộng của hình ảnh sẽ là 100% của ô */
height: 100%; /* Chiều cao của hình ảnh sẽ là 100% của ô */
object-fit: cover;
display: none;
}



.cell_hot {
height: 35%; /* Chiều cao của cell_hot sẽ bằng với chiều cao của countdown-container */
width: 35%; /* Đảm bảo chiều rộng của cell_hot bằng với chiều rộng của countdown-container */
position: absolute; /* Sử dụng absolute positioning để đảm bảo chiều cao của cell_hot không bị ảnh hưởng bởi nội dung */
bottom: 5%; /* Đặt cell_hot ở dưới cùng của countdown-container */
top: 60%;
left: 50%; /* Đặt cell_hot ở giữa theo chiều ngang */
transform: translateX(-50%); /* Đặt cell_hot ở giữa theo chiều ngang */
display: flex; /* Sử dụng flexbox để xếp các phần tử theo hàng */
flex-direction: column; /* Xếp các phần tử theo chiều dọc */
justify-content: center; /* Căn giữa theo chiều ngang */
align-items: center; /* Căn giữa theo chiều dọc */	


}
.hot_icon {
	width: 50%;
	margin-bottom: -15%; /* Khoảng cách giữa hot icon và food image */
	margin-left: 45%;
}

.food_image {
	width: 100%; /* Đặt chiều rộng cho food image */
	height: auto; /* Đảm bảo tỉ lệ khung hình được giữ nguyên */
}



#tb_itemsLocked {
	border: collapse;
	width: 30%; /* Chiều rộng của khung đếm ngược */
	max-width: 170px; /* Chiều rộng tối đa */
	margin-left: 1%;
	border-radius: 10px;
	position: relative;
	overflow: hidden;
	display: inline-block; /* Thêm để countdown-container và table nằm cùng hàng */
	vertical-align: top; /* Dễ dàng căn chỉnh */
	font-size:1em;
}

#tb_itemsLocked th, 
#tb_itemsLocked td {
	border: 1px solid pink;
	padding: 2px;
	width: 25%;
	height: 25%;
	text-align: center;
}

#tb_itemsLocked img {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	border: 0;
}

#tb_itemsLocked .itemsLockednum{
	font-size: 1em;
}


#tb_itemsLocked td:nth-child(1),
#tb_itemsLocked td:nth-child(2)		{
	background-color: yellow; /* Màu nền của cột thứ nhất */
}

#tb_itemsLocked td:nth-child(3),
#tb_itemsLocked td:nth-child(4)		{
	background-color: rgba(144, 238, 144); /* Màu nền của cột thứ nhất */
}













#tb_saladTime {
	border: collapse;
	width: 30%; /* Chiều rộng của khung đếm ngược */
	
	max-width: 170px; /* Chiều rộng tối đa */
	
	margin-bottom: 1%;
	border-radius: 10px;
	position: relative;
	overflow: hidden;
	display: inline-block; /* Thêm để countdown-container và table nằm cùng hàng */
	vertical-align: top; /* Dễ dàng căn chỉnh */
}


#tb_saladTime #salad_img_1,
#tb_saladTime #salad_img_2,
#tb_saladTime #salad_img_3,
#tb_saladTime #salad_img_4,
#tb_saladTime #salad_img_5{
	 display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	
}


#tb_saladTime th, 
#tb_saladTime td {
	border: 1px solid pink;
	padding: 2px;
	width: 15%;
}

#tb_saladTime .tb_saladTimenum{
	font-size: 1em;
}


#tb_saladTime td:not(:first-child) { /* Chọn tất cả các ô trừ ô đầu tiên trong mỗi hàng */
	width: 55%; /* Tăng chiều rộng của ô chứa văn bản */
	font-size: 1em; /* Cài đặt kích cỡ chữ */
}

#tb_saladTime tr:nth-child(5) {
	border: 2px solid red; /* Tô màu khung đỏ cho hàng thứ tư */
	background-color: yellow; /* Màu nền của hàng thứ tư */
	font-weight: bold; /* Đặt kiểu chữ đậm cho tất cả các ô trong hàng thứ tư */
	font-style: italic;
	font-size: 1em;

}

 

.page-container .suggest-table {
	border: collapse;
	width: 95%; /* Chiều rộng của khung đếm ngược */
	max-width: 500px; /* Chiều rộng tối đa */           
	border-radius: 10px;
	position: relative;
	overflow: hidden;			
	margin: 0 auto;			
	padding-top:10px;
	
}

/* Đặt kiểu cho ô bảng */
.suggest-table th, 
.suggest-table td {
	border: 1px solid pink;
	padding: 2px;			
	width: 5%;			            
	text-align: center;
	
	
}

@keyframes rainbowBorder {
	0% { border-color: red; }
	14% { border-color: orange; }
	28% { border-color: yellow; }
	42% { border-color: green; }
	57% { border-color: blue; }
	71% { border-color: indigo; }
	85% { border-color: violet; }
	100% { border-color: red; }
}

.rainbow-border {
	animation: rainbowBorder 2s linear infinite;
}

.suggest-table .cell-content{
	font-size:0.5em;
}

.suggest-table .cell-content img {
	max-width: 100%; /* Đặt kích thước tối đa cho chiều rộng của ảnh */
	height: auto; /* Giữ tỷ lệ khung hình */
	display: inline-block;
}


.suggest-table .caption-left {
	white-space: nowrap;			
}

.suggest-table .hidden {
	display: none;
}


.page-container .history{
	border: collapse;
	width: 95%; /* Chiều rộng của khung đếm ngược */
	max-width: 500px; /* Chiều rộng tối đa */           
	border-radius: 10px;
	position: relative;
	overflow: hidden;			
	margin: 0 auto;			
	
}

 /* Đặt kiểu cho ô bảng */
.history th, 
.history td {
	border: 1px solid pink;
	padding: 2px;			
	width: 5%;			            
	text-align: center;
	
}

.history img {
	max-width: 100%; /* Đặt kích thước tối đa cho chiều rộng của ảnh */
	height: auto; /* Giữ tỷ lệ khung hình */
	display: inline-block;
}

#lb_inputKey {
	position: fixed;
	top: 30%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #f9f9f9;
	font-size:2vw;
	padding: 5px;
	border: 1px solid black;
	border-radius: 5px;
	display: none;
	opacity: 1;
	z-index: 9999;
}
#lb_inputKey {
	text-align: center; /* Căn nội dung trong div theo trục ngang */
}

#lb_inputKey button {
	margin-top: 10px; /* Khoảng cách từ nút button đến phần tử trên nó */
}  
	
.highlight {
	color: red;
}

.highlight2 {
	color: rgb(205, 133, 63);
}

.highlight3 {
	color: #FF1493;
}
.highlight4 {
	 color: #8B0000;
}
.highlight5 {
	 color: #FFA500;
}
.highlight6 {
	color: Gray;
}
.highlight7 {
	color: #DCDCDC;
}
.highlight_sp {
		background-color: #F08080; /* Màu nền đỏ nhạt (Light Coral) */
		color: white; /* Màu chữ trắng */
		padding: 3px;
		border-radius: 1px;
		margin-top: 5px;
	}

	/* Hiệu ứng đổi màu chữ */
	.highlight_sp {
		animation: colorChange 4s infinite; /* Thay đổi màu chữ trong vòng 4 giây */
	}

	@keyframes colorChange {
		0% { color: white; }
		25% { color: yellow; }
		50% { color: green; }
		75% { color: blue; }
		100% { color: red; }
	}

	/* Tạo hiệu ứng phát sáng cho chữ */
	.highlight-glow {
		background-color: #F08080; /* Màu nền đỏ nhạt */
		color: white; /* Màu chữ trắng */
		padding: 3px;
		border-radius: 1px;
		box-shadow: 0 0 10px rgba(255, 105, 97, 0.8); /* Hiệu ứng phát sáng */
	}

	#menu_suggest,
	#menu_statistic	
	{
		margin-top: 2%;
		margin-bottom: 2%;
	}
	#menu_start
	{
		margin-top: 0.5%;
		margin-bottom: 1%;
	}

	.button-container {
		display: flex;
		gap: 5px; /* Khoảng cách giữa các button */
		justify-content: flex-start; /* Xếp các button sang phía trái */
		padding-left: 3%;
	}
	
	.button {
		width: 20px; /* Chiều rộng cố định của button */
		height: 20px; /* Chiều cao của button */   
		background-size: cover; /* Đảm bảo ảnh bao phủ toàn bộ background của button */
		background-position: center; /* Đặt ảnh ở giữa */
		background-repeat: no-repeat; /* Không lặp lại ảnh */
		color: black; /* Màu chữ của button */
		border: 1px solid black; /* Xóa border mặc định của button */
	   
		cursor: pointer; /* Con trỏ chuột thành hình bàn tay khi di chuột vào button */
		font-size: 14px; /* Kích thước chữ */
		position: relative; /* Để đảm bảo nội dung bên trong không bị ảnh hưởng */
		text-align: center; /* Canh giữa chữ */
		overflow: hidden; /* Ẩn phần nội dung bị tràn ra ngoài button */
	
		background-color: red;
	}
	
	.button:hover {
		background-color: #45a049; /* Màu nền khi hover */
	}
			
		#extra_btn_1,
		#extra_btn_3{
			background-image: url('http://103.238.234.155:6868/img/extra/add.png');
		}
		#extra_btn_2,
		#extra_btn_4{
			background-image: url('http://103.238.234.155:6868/img/extra/sub.png');
		}
		
		#extra_btn_3,
		#extra_btn_4{
			background-color: #FF1493
		}


		.tooltip {
            display: none;
            position: absolute;
            border: 1px solid #ccc;
            background-color: #fff;
            padding: 10px;
            z-index: 1000;
			background: #DCDCDC;
        }

        .tooltip table {
            border-collapse: collapse;
            width: 100%;
        }

        .tooltip table, .tooltip th, .tooltip td {
            border: 1px solid black;
        }

        .tooltip th, .tooltip td {
            padding: 8px;
            text-align: center;
        }
		.tooltip img.icon {
            width: 16px;  /* Chiều rộng của icon */
            height: 16px; /* Chiều cao của icon */
            vertical-align: middle;  /* Căn giữa với nội dung text */
            margin-left: 2px; /* Khoảng cách giữa giá trị và icon */
        }

		
	#menu_hdsd{
		text-align: right;
		text-decoration: underline;
		font-style: italic;
	}