/* พื้นหลังของแถบปุ่ม */
.card-auth {
    width: 100%;
    background: linear-gradient(180deg, #00d8ff 0.57%, #1783db 99.49%);
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    padding: 10px 0;
  }
  
  /* กล่องสำหรับจัดปุ่ม */
  .auth-container {
    display: flex;
    justify-content: space-around; /* จัดปุ่มให้อยู่ห่างกัน */
    align-items: center;
  }
  
  /* สไตล์ของแต่ละปุ่ม */
  .auth-item {
    text-align: center;
    color: white; /* สีข้อความ */
    font-size: 14px;
    font-weight: 600;
  }
  
  /* ไอคอน */
  .auth-icon {
    font-size: 20px; /* ขนาดไอคอน */
    margin-bottom: 5px;
  }
  
  /* ข้อความ */
  .auth-text {
    font-size: 12px; /* ขนาดข้อความ */
  }
  
  /* ลิงก์ */
  .auth-item a {
    text-decoration: none;
    color: white; /* สีข้อความ */
    transition: all 0.3s ease;
  }
  
  /* เอฟเฟกต์เมื่อชี้เมาส์ */
  .auth-item a:hover {
    color: #f1c40f; /* เปลี่ยนสีเป็นเหลืองเมื่อ hover */
  }
  

.blinking-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    animation: blink 1s infinite;
    display: inline-block;
}

.blinking-dot.red {
    background-color: red;
}

.blinking-dot.green {
    background-color: green;
}

@media (min-width: 991px) {

    .card-auth {
        display: none;
    }

}

@media (max-width: 768px) {

    .card-auth {
        width: 100%;
        position: fixed;
        bottom: 0%;
        left: 0%;
    }

    .card-banner img{
        height: 100px;
    }

}

.footer {
    background: linear-gradient(180deg, #00d8ff 0.57%, #1783db 99.49%);
    text-align: center;
    padding: 20px;
    color: white;
    margin-top: 30px;
}

.footer-icons {
    margin-bottom: 20px;
}

.footer-icons img {
    width: 50px;
    height: 50px;
    margin: 0 10px;
    vertical-align: middle;
    border-radius: 50%; 
}

.footer-text {
    font-size: 17px;
    line-height: 1.5;
    color: white;
    margin: 0 auto;
}

.footer-text span {
    color: #ff0000;
}

.footer-copyright {
    margin-top: 15px;
    color: white;
    font-size: 15px;
}

.footer-copyright span {
    color: #ff0000; 
}


.fixed-bottom-right-line {
    width: 50px;
    position: fixed;
    bottom: 5%;
    right: 0;
    margin-right: 15px;
    margin-bottom: 15px;
    background-color: rgba(255, 255, 255, 0.0);
    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
    border-radius: 5px;
    z-index: 1;
}

.fixed-bottom-right-line img {
    width: 100%; 
    height: auto; 
    display: block; 
    object-fit: contain; 
    border-radius: 3px; 
}

@media (max-width: 991px) {

    .fixed-bottom-right-line {
        bottom: 10%;
    }

}

@media (max-width: 768px) {

    .fixed-bottom-right-line {
        bottom: 10%;
    }

}

.auth-buttons {
    display: flex;
    gap: 8px;
    align-items: center; 
  }
  
  .btn-auth {
    padding: 5px 15px; 
    font-size: 12px; 
    font-weight: 500;
    text-align: center;
    border-radius: 5px; 
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); 
  }
  
  .btn-register {
    background-color: blue; 
    color: white; 
    border: none;
    font-size: 14px;
    font-weight: 600;
  }
  
  .btn-register:hover {
    background-color: #007bff;
  }
  
  .btn-login {
    background-color: red; 
    color: white; 
    border: none; 
    font-size: 14px;
    font-weight: 600;
  }
  
  .btn-login:hover {
    background-color: #e14c47; 
    color: white;
  }