/* General Body and Font Styles */
body {
	background-image: url(../img/bg.png); /* Đường dẫn đã được cập nhật */
	background-repeat: no-repeat;
	margin: 0;
	background-position: center top;
	background-color: #100b0a;
	color: #FFFFFF;
	font-family: 'Kanit', sans-serif;
	font-size: 13px;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
::-webkit-scrollbar-track-piece {
	background-color: #000;
	-webkit-border-radius: 8px;
}
::-webkit-scrollbar-thumb:horizontal, 
::-webkit-scrollbar-thumb:vertical {
	width: 6px;
	background-color: #7F5A16;
	-webkit-border-radius: 5px;
}
::-webkit-scrollbar-thumb:horizontal:hover, 
::-webkit-scrollbar-thumb:vertical:hover {
	background-color: #8A5100;
}

/* General styles for hoverable navigation buttons */
.nav-btn {
    display: block;
    background-repeat: no-repeat;
    opacity: 80;
    /*transition: transform 0.2s ease-in-out;  Hiệu ứng phóng to mượt mà */
}

.nav-btn:hover {
    /*transform: scale(1.05);  Phóng to nhẹ khi di chuột */
    opacity: 100;
}

/* Specific button styles */
#nav-trangchu { background-image: url('../img/index_02.png'); width: 149px; height: 69px; }
#nav-trangchu:hover { background-image: url('../img/index_02_a2.png'); }

#nav-dangky { background-image: url('../img/index_03.png'); width: 179px; height: 69px; }
#nav-dangky:hover { background-image: url('../img/index_03_a2.png'); }

#nav-taigame { background-image: url('../img/index_04.png'); width: 193px; height: 69px; }
#nav-taigame:hover { background-image: url('../img/index_04_a2.png'); }

#nav-napthe { background-image: url('../img/index_05.png'); width: 166px; height: 69px; }
#nav-napthe:hover { background-image: url('../img/index_05_a2.png'); }

#nav-xephang { background-image: url('../img/index_06.png'); width: 185px; height: 69px; }
#nav-xephang:hover { background-image: url('../img/index_06_a2.png'); }

/* Side buttons */
#btn-dangky-side { background-image: url('../img/index_22.png'); width: 315px; height: 89px; }
#btn-dangky-side:hover { background-image: url('../img/index_22_a2.png'); }

#btn-napthe-side { background-image: url('../img/index_24.png'); width: 315px; height: 89px; }
#btn-napthe-side:hover { background-image: url('../img/index_24_a2.png'); }

/* Right column buttons */
#btn-fanpage { background-image: url('../img/index_31.png'); width: 200px; height: 73px; }
#btn-fanpage:hover { background-image: url('../img/index_31_a2.png'); }

#btn-xephang-right { background-image: url('../img/index_41.png'); width: 200px; height: 73px; }
#btn-xephang-right:hover { background-image: url('../img/index_41_a2.png'); }

#btn-discord { background-image: url('../img/index_43.png'); width: 200px; height: 73px; }
#btn-discord:hover { background-image: url('../img/index_43_a2.png'); }

#btn-group { background-image: url('../img/index_45.png'); width: 200px; height: 73px; }
#btn-group:hover { background-image: url('../img/index_45_a2.png'); }

/* Login Form Button */
.login-button {
    width: 180px;
    height: 40px;
    /* Thiết lập ảnh nền mặc định */
    background-image: url('../img/login.png');
    
    /* Loại bỏ các style mặc định của button */
    background-color: transparent;
    border: none;
    
    /* Đảm bảo ảnh nền không bị lặp lại */
    background-repeat: no-repeat;
    
    /* Biến con trỏ chuột thành hình bàn tay */
    cursor: pointer;
    
    /* Thêm hiệu ứng phóng to nhẹ cho mượt mà */
    transition: transform 0.2s ease-in-out;
}

/* Hiệu ứng khi di chuột vào */
.login-button:hover {
    /* Thay đổi ảnh nền khi hover */
    background-image: url('../img/login-hover.png');
    
    /* Phóng to nhẹ khi di chuột */
    transform: scale(1.05);
}