/* SERVER RENTAL PANEL STYLES */
#server-rental {
    background: linear-gradient(90deg, #ff5733, #ffbd69); /* ไล่สีจากส้มไปเหลือง */
    color: #fff; /* สีข้อความขาว */
    border-radius: 8px; /* ขอบโค้งมน */
    overflow: hidden; /* ป้องกันข้อความล้นกรอบ */
    position: relative; /* ตำแหน่งสัมพันธ์ */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* เงาเล็กน้อยใต้กรอบ */
}

.server-banner {
    font-size: 1.2rem; /* ขนาดฟอนต์ */
    font-weight: bold; /* ความหนาฟอนต์ */
    white-space: nowrap; /* ไม่ตัดข้อความขึ้นบรรทัดใหม่ */
    overflow: hidden; /* ป้องกันข้อความล้น */
    box-sizing: border-box; /* รวม padding และ border ในขนาด element */
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.server-banner h4 {
    display: inline-block;
    padding-left: 100%; /* เริ่มต้นจากด้านขวา */
    animation: marquee 30s linear infinite; /* เลื่อนช้าๆ ใช้เวลา 30 วินาทีต่อรอบ */
    margin: 0;
    animation-delay: 0s; /* เริ่มทันที */
    animation-timing-function: linear; /* วิ่งต่อเนื่อง ไม่มีสะดุด */
}

/* ANIMATION MARQUEE */
@keyframes marquee {
    0% { transform: translateX(100%); } /* เริ่มจากขอบขวา */
    100% { transform: translateX(-100%); } /* เลื่อนไปซ้ายสุด */
}

/* ข้อความสำคัญ */
.server-banner span.text-danger {
    color: #ffeb3b; /* สีเหลืองเน้นข้อความ */
    font-weight: bold;
}

/* หยุดข้อความเมื่อโฮเวอร์ */
.server-banner h4:hover {
    animation-play-state: paused;
}