.auth-modal .modal-dialog {
   max-width: 850px;
 }

 .auth-modal .modal-content {
   border: none;
   overflow: hidden;
 }

 .auth-modal-image {
   background-color: #fff4d8;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 40px;
 }

 .auth-modal-image img {
   max-width: 100%;
   height: auto;
 }

 .auth-modal-form {
   padding: 40px 60px;
   position: relative;
 }


.auth-modal-close {
    position: absolute;
    top: 6px;
    right: 20px;
    width: 32px;
    height: 32px;
    background-color: #fde68a;
    border-radius: 50%;
    border: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px; 
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.auth-modal-close:hover {
    opacity: 0.8;
}

 .auth-modal-title {
   text-align: center;
   color: #ff7e5f;
   font-weight: 800;
   font-size: 32px;
   margin-bottom: 30px;
 }

 .auth-modal-input {
   border-radius: 15px;
   padding: 25px 25px;
   font-size: 16px;
   border: 1px solid black;
   background-color: #fff;
 }

 .auth-modal-input:focus {
   background-color: white;
   border-color: #ff7e5f;
   box-shadow: 0 0 0 2px rgba(255, 126, 95, 0.25);
 }

 .auth-modal-button {
   background-color: #ff7e5f;
   color: white;
   border: none;
   border-radius: 15px;
   padding: 15px;
   font-size: 18px;
   font-weight: 700;
   cursor: pointer;
   transition: background-color 0.3s ease;
 }

 .auth-modal-button:hover {
   background-color: #e66a50;
 }

 .auth-modal-links {
   margin-top: 20px;
 }

 .auth-modal-links p {
   margin-bottom: 8px;
   font-size: 15px;
 }

 .auth-modal-links a {
   color: #ff7e5f;
   text-decoration: none;
   font-weight: 700;
 }

 .auth-modal-links a:hover {
   text-decoration: underline;
 }

 /* Responsive cho màn hình mobile */
 @media (max-width: 767px) {
   .auth-modal-image {
     display: none;
   }

   .auth-modal-form {
     padding: 30px;
   }
 }