@media screen and (min-width: 450px) {
  body, html {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
  
 /* slide anh*/
 .main-container-slide {
    display: flex;
    flex-grow: 1;
}

.main-content-slide {
    margin: 32px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 935px;
    flex-grow: 1;
}

.slide-container-slide {
        height: 618px;
        width: 500px;
        flex-basis: 454px;
        position: absolute;
        top: 30px;
        right: 40%;
        z-index: 10;
    }
  
  .loginModalContainer { 
      margin-left: 60% !important;
      margin-bottom: 100px !important;
      max-height: 500px !important;
      max-width: 350px !important;
  }  
  
  .initModal {
    overflow-y: auto;
  }
  
.slide-content-slide {
    margin: 25px 0 0 155px;
    position: relative;
}

/* Thiết lập các hình ảnh ở cùng một vị trí */
.slide-content-slide img {
    position: absolute;
    inset: 0;
    opacity: 0; /* Ban đầu hình ảnh ẩn */
    visibility: hidden; /* Hình ảnh không chiếm không gian */
    transition: opacity 3s ease-in-out, visibility 0s linear 3s; /* Chuyển tiếp mượt mà, làm chậm opacity */
}

/* Khi hình ảnh được active */
.slide-content-slide img.active {
    opacity: 1; /* Hình ảnh sẽ hiển thị */
    visibility: visible; /* Hình ảnh chiếm không gian */
    transition: opacity 3s ease-in-out, visibility 0s linear 0s; /* Chuyển tiếp mượt mà cho opacity */
}



 /* end slide anh*/
  
  
  .initModal {
    display: flex;
  }
  
  .loginModalContainer {
    height: auto;
    max-height: 580px;
    border-radius: 10px;
    background-color: #ffffff !important;
    padding: 20px 20px 40px 20px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  
  
  .darkmode-mb {display: none;}
  .container-switch {
    position: fixed;
    top: 30px;
    right: 160px;     
}

.switch {
    position: relative;
    display: inline-block;
    width: 40px; /* giảm chiều rộng */
    height: 24px; /* giảm chiều cao */
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: background-color 0.3s;
    border-radius: 20px; /* giảm bán kính viền */
}

.slider::before {
    position: absolute;
    content: "";
    height: 18px; /* giảm chiều cao của vòng tròn */
    width: 18px; /* giảm chiều rộng của vòng tròn */
    border-radius: 50%;
    left: 3px; /* giảm khoảng cách trái */
    top: 3px; /* giảm khoảng cách trên */
    background-color: white;
    transition: transform 0.3s;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:checked + .slider::before {
    transform: translateX(16px); /* Điều chỉnh vị trí khi bật */
}


        /* Chế độ dark mode */
 
        body.dark-mode {
            background-color: #1c1c1d;
            color: #ffffff;
        }

        #phannoidung.dark-mode {
            background-color: #1e1e1e;
            color: #dddddd;
            padding: 20px;
            border-radius: 5px;
            width: 80%;
            text-align: center;
        }
   
       .avenue-messenger.dark-mode {
       background: #19032a;
       border: 1px solid rgba(221, 221, 221, 0.2); /* #ddd với độ mờ 50% */ 
        }
       input.message.dark-mode,
       .message-box.dark-mode {
       background: #4a2b54;
       border: none;  
       Color: #fff;
        }
   
       .messages.dark-mode {
         background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgApeGeZVlW8Cavo7vj9Jl3J5caBWgviSAeVqRDxOMVS__BhEkXWON08itrT6jU-dlXfi9HaYydpBFVdMRfYiImY3Zj0XygdodCIIc8f_ngoWJDa4zpW3islO63rI_JGBrNmLLr0g7yHlgd8YXjhoea3QFdBJxj7NbFoH-6CLIMTJez8wB6BQbdEGzz20rZ/s1600/mess-hong-darkmode.jpg');
        } 
     .send-btn.dark-mode,
     #reaction-heart.dark-mode {
        background-color: #19032a;
        } 
   
       
       .chat-title.dark-mode {
     background-color: #6a0356;
   }
   
   div.emoji-tags-container.dark-mode,
       .emoji-picker.dark-mode {
          background-color: #141414;
          border: none;
   }
   
   h2#online.dark-mode,
   h1#user-name.dark-mode {
     color: #fff;
     text-transform: none;
   }
   
   .container-tbchat.dark-mode
    {
     background-color: #622664;
     color: #fff;
   } 
   .message-box.message.dark-mode {
     color: #fff;
   }
   .noidung-hdsd.dark-mode,
   .tieude-hdsd.dark-mode {
     color: #fff !important;
   }
   
   .message-container.receiver.dark-mode {
     background-color: #622664;
     color: #fff;
   }
   
   
   
   .message-container.sender.dark-mode a:not(:has(img)),
   .message-container.receiver.dark-mode a:not(:has(img)) {
    background-color: inherit;
    color: inherit;
}
   .message-container.sender a:not(:has(img)),
   .message-container.receiver a:not(:has(img)) {             
    background-color: inherit;
    color: inherit;
}
   
   
   
   .avenue-messenger div.agent-face.dark-mode {
    top: -7px;
    right: 250px;
    width: 70px;
}

.agent.circle.dark-mode {
    width: 35px;
    height: 35px;
}

.status-online.dark-mode {
    width: 10px;
    height: 10px;
    top: 42px;
    right: 16px;
}


    div.half.dark-mode {   
        width: 35px;
        height: 20px;
    }


.chat-title.dark-mode {
    flex: 0 1 50px;
    z-index: 2;
    padding-top: 10px;
    padding-bottom: 5px;
    text-align: left;
    border-bottom: 1px solid rgba(204, 204, 204, 0.2);
}

.chat-title h1.dark-mode, 
.chat-title h2.dark-mode{
    margin-left: 75px;
}

.avenue-messenger.dark-mode {
    max-height: 520px !important;
}

.circle.dark-mode {
    border: none;
}
   
 .message-input-container.dark-mode {  
   border-top: none;
 } 
  
  
  .chat-title-menu {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  left: 180px;
  position: absolute;
  top: 55px;
}

  
.icon-wrapper {
  width: 30px; /* Size of the circle */
  height: 30px; /* Size of the circle */
  border-radius: 50%; /* Make it a circle */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent; /* No background by default */
  transition: background-color 0.3s ease; /* Smooth transition for background color */
  cursor: pointer; /* Change the cursor to a pointer when hovering */
}

.icon-wrapper svg {
  display: block;
  width: 16px; /* Icon size */
  height: 16px; /* Icon size */
  fill: rgb(255, 13, 154); /* Icon color */
}

.icon-wrapper:hover {
  background-color: rgba(255, 13, 154, 0.2); /* Background color on hover */
}
  
.voicecall-chat,
.videocall-chat,
.hideboxchatpc {
  display: none;
  }
  
  
  
  
  .chat-title-menu.dark-mode {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  left: 200px;
  position: absolute;
  top: 20px;
    }
  
 .menu .items .menu-item a.dark-mode {
    color: #fff;
  }
  
.voicecall-chat.dark-mode,
.videocall-chat.dark-mode,
.hideboxchatpc.dark-mode {
  display: flex;
  }
  
 .menu .button.dark-mode {
   margin-left: -60px;
   top: 10px;
  }
 .menu .items.dark-mode {
   background: #252728;
  }
  
  .phantren.dark-mode {
   color: #ffffff;
   font-size: 15px; 
  } 
  
  .fas.fa-download.dark-mode,
  .time-musice.dark-mode,
  .scrollingText.dark-mode {
   color: #ffffff;
  }
  
  #searchInput.dark-mode {
   background-color: #16191d; 
   border: 1px solid #cccccc3d; 
   color: #ffffff;  
  }
  
  #searchInput.dark-mode:focus {
   color: #ffffff; 
  }
  
  .vertical-menu-zalo.dark-mode {
   background-color: #121416; 
  }
  
  .menu-item-zalo.dark-mode:hover {
    background-color: #2a2c2e;
  }
  

  .popup-menu-zalo.dark-mode {
    background-color: #22262b;
    color: #fff;
  }
  
  .popup-menu-zalo.dark-mode::before {
    border-right: 12px solid #22262b !important;
  }
  
  .popup-menu-zalo ul li.dark-mode:hover {
    background-color: #2d3136;
  }
  
  .clear-search.dark-mode {
   filter: brightness(0) invert(1); 
  }
  
  
  
  
 .menu {
  position: relative;
}

.menu .items {
  /* Đặt chiều cao và chiều rộng cho menu */
  height: 0;
  width: 330px;
  overflow: hidden;
  position: absolute;
  text-align: left;
  top: 20px;
  right: 0;
  margin-right: 340px;
  z-index: 11;
  background: #fff;
  border-radius: 10px;
  transition: height 0.3s ease-in-out;
  display: flex;
  flex-direction: column; 
}

.menu .menu-item {
  font-size: 14px;
  text-align: left;
  line-height: 40px;
  color: #111;
  height: 40px;
  padding: 0 20px;
  width: 100%;
}
  
.menu .items .container-items {
  margin-top: 10px;
  }

.menu .button {
  z-index: 12;
  text-align: center;
  color: #333;
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  position: absolute;
  /*
  right: 0;
  padding-right: 10px;
  */
  top: 50px;
  left: 195px;
  cursor: pointer;
 /* transition: 0.3s all ease-in-out;*/
}
  
.menu .button:hover {
    background: #e0e0e0;  /* Thay đổi màu nền khi hover */
    color: #444;  /* Thay đổi màu chữ khi hover */
    transform: scale(1.1);  /* Phóng to nút khi hover */
}  


.menu .button:hover + .items {
  height: 180px; /* Mở menu khi hover */
}

.menu .items.active {
  height: 180px; /* Hiển thị menu khi được kích hoạt */
}

.menu .items .menu-item a {
  color: #111;
  text-decoration: none;
  display: block;
}

.menu .items .menu-item a:hover {
  color: #777;
}
  
.border-chat {
  border: 1px solid rgba(0, 0, 0, 0.2);
  width: 90%;
  margin: 10px auto;
  display: block; 
} 
  
 /* chức năng theme mới 2222 */
  
  .avenue-messenger.new-them {
    width: 70%;
    right: 0px;
    border-radius: 0px;
    height: calc(100% - 0px) !important;
    max-height: 750px !important;  
    box-shadow: none;
    
  }
  
   .avenue-messenger div.agent-face.new-them {
    top: -10px;
    right: 0; 
    margin-left: 20px; 
    width: 0px;  
  }
 
  .chat-title.new-them {
    flex: 0 1 50px;
    z-index: 2;
    padding-top: 10px;
    padding-bottom: 5px;
    text-align: left;
    border-bottom: 1px solid rgba(204, 204, 204, 0.2);
  }

   .agent.circle.new-them {
     width: 40px;
    height: 40px;
    }
  
    div.half.new-them {
      width: 0px;
      height: 0px;
      }
  
  .chat-title h1.new-them,
  .chat-title h2.new-them {
    margin-left: 75px;
  }
  
  .status-online.new-them {
    width: 10px;
    height: 10px;
    top: 42px;
    right: -39px;
  }
  
  .menu .button.new-them {
    top: 10px;
    left: 135px;
    display: none;
  }
  
  .menu .items.new-them {
    top: 50px;
    margin-right: 100%;
  }
  
  .chat-title-menu.new-them {
   left: 59vw;
   top: 20px; 
  }
  
.voicecall-chat.new-them,
.videocall-chat.new-them,
.hideboxchatpc.new-them {
  display: flex;
  }
  
  .emoji-picker.new-them { 
    right: 0;
    width: 100%;
    max-width: 330px;
   /* margin-bottom: 40px;*/
  }
  
  .emoji-picker .emoji-tags-container.new-them { 
   bottom: 245px;
  }
  
   .chat.new-them { 
     max-height: 720px;
     height: calc(100% - 0px);
     border-radius: 0px !important;
  }
  
  .message-box.new-them { 
    border-radius: 0px;
    margin-left: -10px !important;
    padding: 15px 10px;
    border: none;
    margin: 0px;
    
  }
  
  .container-footer-chat {
    display: flex;
  }
  
  .container-footer-chat.new-them { 
    display: none;
  }
  
  .container-footer-zalo.new-them { 
    display: flex !important;
    margin-left: 20px;
    margin-top: 5px;
  }
  
   .sticker-chatfb-copy,
   .gif-chatfb-copy,
   .upload-images-copy,
   .upload-voice-copy {
    cursor: pointer;
    position: relative;
    margin-right: 10px;
    border-radius: 50%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
  

  .button-container.new-them { 
    height: 55px;
    right: 0px;
  }
  
  #reaction-heart.new-them, 
  .send-btn.new-them {
   border-radius: 0px; 
  }
  
  .message-input-container.new-them {
    padding-top: 0px;
  }
  
  /*#music-container.new-them*/
  .container-music {
   width: 50% !important;
  }
  
  
  #music-container {
   top: 30px;
  }
  
  /* Thanh tìm kiếm */
  .search-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 0px;
    position: relative;
  }

  #searchInput {
    background-color: #ebecf0;
    width: 70%;
    max-width: 400px;
    padding: 8px;
    font-size: 16px;
    border-radius: 5px;
   /* border: 1px solid #ccc;*/
    border: none;
    outline: none;
    font-size: 14px;
    padding-left: 30px;
  }

  #searchInput:focus {
    border-color: #007bff;
  }
  
  #searchInput::placeholder {
  color: #afb5c1;  
  opacity: 0.8;
  font-size: 14px;  
  }
  
  /* Biểu tượng tìm kiếm */
.search-icon {
    position: absolute;
    left: 50px;
    top: 6px;
    cursor: pointer;
    opacity: 0.3;
}

.search-icon i {
    font-size: 14px; 
    color: #afb5c1; 
}
  
  .bangxephang {
    position: absolute;
    justify-content: center;
    left: 40px;
    bottom: 100px;
    top: 15px;
    
  }
  
  .container-search {
    height: 50px;
    margin-left: 40px !important;
  }
  
  /* Biểu tượng xóa */
    .clear-search {
      position: relative;
      right: 25px;
      cursor: pointer;
      font-size: 18px;
      color: #ccc;
      display: none; /* Ẩn biểu tượng xóa khi input rỗng */
      width: 10px;
      height: 10px;
      opacity: 0.5;
    }

    .clear-search:hover {
      color: #007bff;
    }
  
    .vertical-menu-zalo {
        position: fixed;
        left: 0;
        top: 0;
        width: 60px;
        height: 100%;
        background-color: #005ae0;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px 0;
       /* box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);*/
    }

    .menu-item-zalo {
        width: 50px;
        height: 50px;
        margin: 10px 0;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.3s ease;
    }

    .menu-item-zalo:hover {
        background-color: #003bb3;
        border-radius: 10px;
        transform: scale(1.1);
    }

    .menu-item-zalo i {
        font-size: 20px;
        opacity: 0.8;
    }

    .menu-item-zalo.profile-zalo {
        margin-bottom: 20px;
    }

    .profile-pic-zalo {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 2px solid white;
    }

    .separator-zalo {
        width: 40px;
        height: 1px;
        background-color: white;
        margin: 20px 0;
        opacity: 0.5;
    }
  
  
    .popup-menu-zalo {
        position: absolute;
        width: 300px;
        background-color: white;
        border-radius: 0px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
        font-size: 14px;
        color: #333;
        padding: 10px 0;
        left: 0;
        margin-left: 70px;
        z-index: 1;
        bottom: 30px;
        display: none;
        
        
    }

    .popup-menu-zalo::before {
        content: "";
        position: absolute;
        top: 0px;
        left: -12px; 
        width: 0;
        height: 0;
        border-right: 12px solid white;
        border-top: 1px solid transparent;
        border-bottom: 12px solid transparent;
        border-radius: 30px 0 0 30px; 
        z-index: 1;
    }

    .popup-menu-zalo ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .popup-menu-zalo ul li {
        padding: 10px 15px;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

    .popup-menu-zalo ul li:hover {
        background-color: #f2f2f2;
    }
  
    #bottomSheet-face {
      z-index: 11 !important;
    }
  
    #customBottomSheetContainer {
      z-index: 12 !important;
    }
  
  
 }