.container-fivem {
    width: 90%;
    margin: 20px auto;
}

.search-bar {
    display: flex;
    justify-content: space-between;
    background-color: #3b4252;
    padding: 10px;
    border-radius: 8px;
}

.search-bar input {
    width: 80%;
    padding: 10px;
    background-color: #4c566a;
    border: none;
    border-radius: 4px;
    color: #d8dee9;
}

.search-bar button {
    padding: 10px 20px;
    background-color: #81a1c1;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.content {
    display: flex;
    margin-top: 20px;
}

.server-list {
    flex: 3;
    background-color: #3b4252;
    padding: 20px;
    border-radius: 8px;
}

/* ปรับแต่งลิงก์ */
a.server-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* สไตล์ของบล็อก server */
.server {
    display: flex;
	align-items: center; /* จัดให้อยู่ตรงกลางในแนวแกน y */
    justify-content: space-between;
    padding: 10px;
    background-color: #4c566a;
    border-radius: 8px;
    margin-bottom: 10px;
    text-align: left;
    transition: background-color 0.3s ease;
	height: 90px; /* กำหนดความสูงเป็น 90px */
    overflow: hidden; /* ป้องกันไม่ให้เนื้อหาเกินออกจากกล่อง */
}

/* เมื่อชี้เมาส์ */
.server:hover {
    background-color: #88c0d0;
}

/* ปรับตำแหน่งของ server-icon และ server-details */
.server-icon {
    padding: 2%;
    margin-right: 10px;
    flex-shrink: 0;
}

.server-icon img {
    width: 50px; /* ปรับขนาดของรูปให้เข้ากับความสูงใหม่ */
    height: 50px;
}

.server-details {
	flex-grow: 1; /* ให้ส่วนรายละเอียดขยายเพื่อใช้พื้นที่ที่เหลือ */
    margin: 0; /* ลบ margin เพื่อให้ชิด */
    padding: 0; /* ลบ padding เพื่อให้ชิด */
    padding: 2%;
    margin-left: 0;
    padding-left: 0;
    text-align: left;
    color: #ffffff;
}

.server-details h3 {
    margin-bottom: 3px;
    font-size: 14px; /* ปรับขนาดตัวอักษรให้เล็กลง */
}

.server-details p {
    font-size: 12px; /* ปรับขนาดของรายละเอียดให้เล็กลง */
}

.server-stats {
    display: flex;
    align-items: center;
	font-size: 12px; /* ปรับขนาดตัวอักษรของสถิติให้เล็กลง */
    color: #ffffff;
}

.server-stats span {
    margin-right: 10px;
}

.server-stats img {
     width: 20px; /* ปรับขนาดของไอคอนธงให้เล็กลง */
    height: 20px;
}

.featured-servers {
    flex: 1;
    background-color: #3b4252;
    padding: 20px;
    border-radius: 8px;
}

.featured-server {
    margin-bottom: 20px;
}

.featured-server h4 {
    color: #88c0d0;
}

.featured-icon {
    width: 50px;
    height: 50px;
    margin-right: 10px;
}