/* Container cho phần user-header trong dropdown */
 /* === Dropdown chung === */
 .user-menu .dropdown-menu {
     min-width: 280px;
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
     /* position: absolute !important; tách khỏi cha */
     position: fixed !important;
     /* cố định theo viewport */
     padding: 0;
     z-index: 2000 !important;
     inset: auto auto auto auto;
     /* fix vị trí */
 }

 .navbar-expand .navbar-nav .dropdown-menu {
     position: absolute;
 }

 .dropdown-menu.show {
     display: block;
 }

 .dropdown-menu-end[data-bs-popper] {
     right: 0;
     left: auto;
 }

 .dropdown-menu[data-bs-popper] {
     /* top: 50px; */
     right: 1px;
     margin-top: var(--bs-dropdown-spacer);
 }

 .dropdown-menu-lg {
     min-width: 280px;
     max-width: 300px;
     padding: 0;
 }

 .dropdown-menu-end {
     --bs-position: end;
 }

 /* === Header xanh === */
 .user-menu .user-header {
     background: linear-gradient(135deg, #007bff, #0062cc);
     /* xanh đậm nhạt */
     color: #fff;
     text-align: center;
     padding: 12px 0px;
     text-decoration: none;
 }

 /* Avatar trong header */
 .user-menu .user-header img.user-image {
     width: 90px;
     height: 90px;
     border-radius: 50%;
     object-fit: cover;
     box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
     margin-bottom: 10px;
 }

 /* Tên + ngày tháng */
 .user-menu .user-header p {
     margin: 0;
     font-size: 16px;
     font-weight: 600;
     line-height: 1.4;
 }

 .user-menu .user-header p small {
     display: block;
     font-size: 13px;
     margin-top: 5px;
     color: rgba(255, 255, 255, 0.85);
 }

 /* === Footer === */
 .user-menu .user-footer {
     padding: 5px 5px;
     background: #fff;
     border-top: 1px solid #eee;
 }

 .user-menu .user-footer .btn {
     width: 100%;
     border-radius: 10px;
     background: #d3e7fb;
     font-size: 14px;
     font-weight: 500;
     padding: 8px 0;
     transition: 0.2s;
 }

 /* Hover effect */
 .user-menu .user-footer .btn:hover {
     background: #007bff;
     color: #fff;
 }

 .text-user {
     color: #1b5383;
     font-size: 12px;
     font-weight: 800;
     white-space: nowrap;
     /* không xuống dòng */
     overflow: hidden;
     /* ẩn phần vượt quá */
     text-overflow: ellipsis;
     /* hiển thị dấu "..." */
     text-decoration: none;
 }

 .pull-right1 {
     float: right !important;
 }

 .header-top .language a:hover {
     text-decoration: none;
 }

 /* Popup style */
 .modal {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.6);
     justify-content: center;
     align-items: center;
     z-index: 9999;
     opacity: 0;
     transition: opacity 0.3s ease;
     /* hiệu ứng fade */
 }

 /* Khi bật modal */
 .modal.show {
     display: flex !important;
     opacity: 1;
 }

 /* Nội dung popup */
 .modal-content-popup {
     background: #fff;
     padding: 20px;
     width: 300px;
     border-radius: 10px;
     position: relative;
     transform: translateY(-40px);
     /* bắt đầu lệch lên */
     opacity: 0;
     transition: all 0.3s ease;
     /* hiệu ứng trượt + mờ */
 }

 /* Khi bật modal thì nội dung xuất hiện */
 .modal.show .modal-content-popup {
     transform: translateY(0);
     opacity: 1;
 }

 form input {
     width: 100%;
     padding: 10px;
     margin-bottom: 10px;
     /* tạo khoảng cách */
     border: 1px solid #ccc;
     border-radius: 5px;
 }

 .close-popup {
     position: absolute;
     top: -10px;
     right: 5px;
     cursor: pointer;
     font-size: 25px;
     font-weight: bold;
     color: #333;
     /* đổi màu tùy ý */
     transition: all 0.3s ease;
 }

 .close-popup:hover {
     color: #e74c3c;
     /* màu đỏ khi hover */
 }

 .tabs {
     display: flex;
     gap: 10px;
     margin-bottom: 15px;
 }

 .tab-btn {
     flex: 1;
     padding: 10px;
     cursor: pointer;
     border: none;
     background: #eee;
 }

 .tab-btn.active {
     background: #007bff;
     color: #fff;
 }

 .tab {
     display: none;
 }

 .tab.active {
     display: block;
 }

 #msg {
     margin-top: 10px;
     font-size: 14px;
     color: red;
 }

 .input-group {
     position: relative;
     margin-bottom: 10px;
     width: 100%;
 }

 .input-group i {
     position: absolute;
     left: 10px;
     top: 38%;
     transform: translateY(-50%);
     color: #555;
 }

 .input-group input {
     width: 100%;
     padding: 10px 10px 10px 35px;
     border: 1px solid #ccc;
     border-radius: 5px;
 }

 .agree-label {
     display: inline-flex;
     /* gọn gàng, không chiếm full width */
     align-items: center;
     /* căn giữa theo chiều dọc */
     font-size: 14px;
     margin: 5px 0;
     white-space: nowrap;
     /* ngăn chữ xuống dòng */
 }

 .agree-label input[type="checkbox"] {
     margin: 0 6px 0 0;
     /* sát chữ, cách phải 6px */
 }

 .agree-label a {
     color: #007bff;
     text-decoration: none;
 }

 .agree-label a:hover {
     text-decoration: underline;
 }

 #openLoginSmall {
     display: none;
 }

 @media screen and (max-width: 768px) {
     #openLoginLarge {
         display: none;
     }

     #openLoginSmall {
         display: inline-block;
     }
 }

 .password-wrapper {
     position: relative;
     display: flex;
     align-items: center;
 }

 .password-wrapper input {
     width: 100%;
     padding-right: 40px;
     /* chừa khoảng cho icon */
 }

 .toggle-password {
     position: absolute;
     right: 32px;
     top: 19px;
     cursor: pointer;
     user-select: none;
     font-size: 15px;
     color: #666;
 }

 .toggle-password:hover {
     color: #000;
 }
 @media screen and (max-width: 430px) {
    .user-menu .dropdown-menu  {
         max-width: 100%;
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
     /* position: absolute !important; tách khỏi cha */
     position: fixed !important;
     /* cố định theo viewport */
     padding: 0;
     z-index: 2000 !important;
     inset: auto auto auto auto;
     /* fix vị trí */

    }
    .dropdown-menu[data-bs-popper] {
     /* top: 50px; */
     right: 1px;
     margin-top: var(--bs-dropdown-spacer);
 }
  .dropdown-menu.show {
     display: block;
 }
 .dropdown-menu-end[data-bs-popper] {
     right: 0;
     left: auto;
     width: 100%
 }
  .dropdown-menu-lg {
     min-width: 280px;
     max-width: 300px;
     padding: 0;
 }
 /* === Header xanh === */
 .user-menu .user-header {
     background: linear-gradient(135deg, #007bff, #0062cc);
     /* xanh đậm nhạt */
     color: #fff;
     text-align: center;
     padding: 12px 0px;
     text-decoration: none;
 }
 /* Avatar trong header */
 .user-menu .user-header img.user-image {
     width: 90px;
     height: 90px;
     border-radius: 50%;
     object-fit: cover;
     box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
     margin-bottom: 10px;
 }

 /* Tên + ngày tháng */
 .user-menu .user-header p {
     margin: 0;
     font-size: 24px;
     font-weight: bold;
     line-height: 1.4;
     color: #ffffff;
 }

 .user-menu .user-header p small {
     display: block;
     font-size: 16px;
     margin-top: 5px;
     color: rgba(255, 255, 255, 0.85);
 }

 /* === Footer === */
 .user-menu .user-footer {
     padding: 5px 5px;
     background: #fff;
     border-top: 1px solid #eee;
 }

 .user-menu .user-footer .btn {
     width: 100%;
     border-radius: 10px;
     background: #d3e7fb;
     font-size: 14px;
     font-weight: 500;
     padding: 8px 0;
     transition: 0.2s;
 }

 /* Hover effect */
 .user-menu .user-footer .btn:hover {
     background: #007bff;
     color: #fff;
 }

 .text-user {
     color: #1b5383;
     font-size: 12px;
     font-weight: 800;
     white-space: nowrap;
     /* không xuống dòng */
     overflow: hidden;
     /* ẩn phần vượt quá */
     text-overflow: ellipsis;
     /* hiển thị dấu "..." */
     text-decoration: none;
 }
}