:root {
       --primary-color: #E252BE;
       --sidebar-width: 240px;
       --sidebar-collapsed-width: 80px;
       --dark-bg: #1E1E2D;
       --text-light: #FFFFFF;
       --text-secondary: #808191;
   }


   body {
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-optical-sizing: auto;
     font-style: normal; 
       background-color: var(--dark-bg);
       color: var(--text-light);
       overflow-x: hidden;
   }

   /* Hide scrollbar for Chrome, Safari and Opera */
   ::-webkit-scrollbar {
       display: none;
   }

   /* Hide scrollbar for IE, Edge and Firefox */
   body {
       -ms-overflow-style: none;
       /* IE and Edge */
       scrollbar-width: none;
       /* Firefox */
   }

   /* Sidebar Styles */
   .templateedit #sidebar {
       height: 100vh;
       width: var(--sidebar-width);
       position: fixed;
       top: 0;
       left: 0;
       padding: 20px;
       background-color: #191927;
       transition: all 0.3s;
       z-index: 999;
       overflow-y: auto;
       -ms-overflow-style: none;
       /* IE and Edge */
       scrollbar-width: none;
       /* Firefox */
   }

   .templateedit #sidebar::-webkit-scrollbar {
       display: none;
   }

   .templateedit #sidebar.collapsed {
       width: var(--sidebar-collapsed-width);
   }

   .templateedit #sidebar .sidebar-heading {
       padding: 15px 15px 15px 0;
   }

   .templateedit #sidebar .sidebar-heading img {
       height: 50px;
   }

   .templateedit .sidebar-section {
       margin-top: 30px;
   }

   .templateedit .sidebar-section-title {
       color: var(--text-secondary);
       font-size: 0.8rem;
       text-transform: uppercase;
       margin-bottom: 15px;
       font-weight: 600;
   }

   .templateedit .nav-item {
       margin-bottom: 10px;
   }

   .templateedit .nav-link {
       color: var(--text-secondary);
       padding: 10px;
       border-radius: 8px;
       display: flex;
       align-items: center;
       transition: all 0.3s;
   }

   .templateedit .nav-link:hover,
   .templateedit .nav-link.active {
       background-color: rgba(255, 255, 255, 0.1);
       color: var(--text-light);
   }

   .templateedit .nav-link i,
   .templateedit .nav-link svg {
       margin-right: 15px;
       font-size: 1.2rem;
       min-width: 20px;
       text-align: center;
   }

   .templateedit .nav-link-text {
       transition: opacity 0.3s;
   }

   .templateedit #sidebar.collapsed .nav-link-text {
       display: none;
   }

   .templateedit .notification-dot {
       width: 8px;
       height: 8px;
       background-color: red;
       border-radius: 50%;
       display: inline-block;
       margin-left: 5px;
   }

   .pagination {
    display: inline-block;
  }
  
  .pagination a {
    color: white;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
  }
  
  .pagination a.active {
    background: radial-gradient(circle, rgba(210, 36, 241, 1) 0%, rgba(252, 70, 167, 1) 100%);
    color: white;
    border-radius: 5px;
  }
  
  .pagination a:hover:not(.active) {
    background-color: #ddd;
    border-radius: 5px;
  } 

  .color-option.active {
    box-shadow: 0 0 0 4px white, 0 0 0 6px black;

}
  

   /* Main Content Styles */
   .templateedit #content {
       margin-left: var(--sidebar-width);
       padding:0 20px;
       transition: all 0.3s;
   }

   .templateedit #content.expanded {
       margin-left: var(--sidebar-collapsed-width);
   }

   .templateedit .page-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 30px;
   }

   .create-photo-btn{
        background: linear-gradient(90deg, #B8CBB8 0%, #B8CBB8 0%, #B465DA 0%, #CF6CC9 33%, #EE609C 66%, #EE609C 100%) !important;

   }

   .templateedit .create-photo-btn {
        background: linear-gradient(90deg, #B8CBB8 0%, #B8CBB8 0%, #B465DA 0%, #CF6CC9 33%, #EE609C 66%, #EE609C 100%) !important;
       border: none;
       border-radius: 25px;
       padding: 10px 20px;
       color: white;
       display: flex;
       align-items: center;
       gap: 10px;
   }

   .templateedit .user-info {
       display: flex;
       align-items: center;
       gap: 15px;
       background-color: rgba(255, 255, 255, 0.1);
       padding: 8px 15px;
       border-radius: 30px;
       position: relative;
   }

   .templateedit .user-info img {
       width: 36px;
       height: 36px;
       border-radius: 50%;
       cursor: pointer;
   }

   .templateedit .user-info-details {
       display: flex;
       flex-direction: column;
       gap: 6px;
   }

   .templateedit .user-points {
       background-color: rgba(255, 255, 255, 0.1);
       padding: 8px 15px;
       border-radius: 30px;
       display: flex;
       align-items: center;
       gap: 10px;
   }

   .templateedit .user-points span {
       color: #ffcc00;;
       font-weight: bold;
   }

   .templateedit .main-heading {
    border-bottom: 1px solid #444444;
    padding-bottom: 40px;
       margin: 40px 0;
       text-align: center;
       /* Added center alignment */
   }

   .templateedit .main-heading h1 {
       font-size: 2.5rem;
       margin-bottom: 15px;
   }

   .templateedit .main-heading h1 span {
       color: var(--primary-color);
   }

   .templateedit .search-bar {
       background-color: rgba(255, 255, 255, 0.1);
       border-radius: 30px;
       padding: 10px 20px;
       display: flex;
       align-items: center;
       gap: 10px;
       margin: 30px 0;
   }

   .templateedit .search-bar input {
       background: transparent;
       border: none;
       color: white;
       flex-grow: 1;
   }

   .templateedit .search-bar input:focus {
       outline: none;
   }

   .templateedit .create-now-btn {
    background: linear-gradient(90deg, #B8CBB8 0%, #B8CBB8 0%, #B465DA 0%, #CF6CC9 33%, #EE609C 66%, #EE609C 100%) !important;
       border: none;
       border-radius: 25px;
       padding: 10px 20px;
       color: white;
   }

   .custom-search-wrapper {
    background: #1d2f49; /* Màu nền bao quanh */
    padding: 10px;
    border-radius: 40px; /* Bo tròn viền ngoài */
    display: inline-block;
}

.custom-search-container {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #1b1e2b;
    padding: 5px;
    border-radius: 40px;
}

.custom-search-bar {
    flex: 1;
    background: transparent;
    padding: 10px 15px;
    border-radius: 30px;
    border: 2px solid #2a2d3e;
    display: flex;
    align-items: center;
    width: 370px;
}

.custom-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: white;
    font-size: 14px;
}

.custom-search-input::placeholder {
    color: #8c8fa5;
}

.custom-search-btn {
    background: linear-gradient(135deg, #ff7eb3, #ff4d97);
    border: none;
    outline: none;
    width: 55px;
    height: 40px;
    border-radius: 25px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.custom-search-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(255, 126, 179, 0.6);
}

.custom-search-btn i {
    color: white;
    font-size: 16px;
}

   

   .templateedit .category-section {
       margin: 40px 0;
   }

   .templateedit .category-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 20px;
   }

   .templateedit .category-nav-buttons {
       display: flex;
       gap: 10px;
   }

 .templateedit .nav-btn {
    background: linear-gradient(90deg, #B8CBB8 0%, #B8CBB8 0%, #B465DA 0%, #CF6CC9 33%, #EE609C 66%, #EE609C 100%) !important;
     border: none;
     width: 36px;
     height: 36px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     transition: background-color 0.3s;
 }

 .templateedit .nav-btn:hover {
     background-color: #e252be;
 }

   .templateedit .category-card {
       position: relative;
       border-radius: 15px;
       overflow: hidden;
       height: 150px;
   }

   .templateedit .category-card img {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }

   .templateedit .category-card-title {
       position: absolute;
       bottom: 10px;
       width: 100%;
       text-align: center;
       color: white;
       font-weight: bold;
       z-index: 2;
   }

   .templateedit .category-card::after {
       content: "";
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
       height: 50%;
       background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
   }

   .templateedit .new-badge {
       position: absolute;
       top: 10px;
       left: 10px;
       background-color: #007bff;
       color: white;
       padding: 2px 10px;
       border-radius: 5px;
       font-size: 0.8rem;
       z-index: 2;
   }

   .templateedit .gallery-section {
       margin: 40px 0;
   }

   .templateedit .gallery-filters {
       display: flex;
       justify-content: flex-end;
       gap: 10px;
       margin-bottom: 20px;
   }

   .templateedit .filter-btn {
       background-color: rgba(255, 255, 255, 0.1);
       border: none;
       border-radius: 25px;
       padding: 8px 15px;
       color: white;
       display: flex;
       align-items: center;
       gap: 5px;
       transition: background-color 0.3s;
   }

   .templateedit .filter-btn:hover {
       background-color: #e252be;
   }

   .templateedit .gallery-container {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 15px;
       padding: 10px;
   }

   @media (max-width: 992px) {
       .templateedit .gallery-container {
           grid-template-columns: repeat(2, 1fr);
       }
   }

   @media (max-width: 576px) {
       .templateedit .gallery-container {
           grid-template-columns: 1fr;
       }
   }

   .templateedit .gallery-container {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 15px;
       padding: 10px;
   }

   @media (max-width: 992px) {
       .templateedit .gallery-container {
           grid-template-columns: repeat(2, 1fr);
       }
   }

   @media (max-width: 576px) {
       .templateedit .gallery-container {
           grid-template-columns: 1fr;
       }
   }

   .templateedit .gallery-card {
       position: relative;
       border-radius: 12px;
       overflow: hidden;
       background-color: #2A2A3C;
       box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
       height: 100%;
       display: flex;
       flex-direction: column;
   }

   .templateedit .gallery-card-img-container {
       position: relative;
   }

   .templateedit .gallery-card img.main-img {
       width: 100%;
       aspect-ratio: 3/4;
       object-fit: cover;
       display: block;
   }

   .templateedit .like-btn {
       position: absolute;
       top: 12px;
       right: 12px;
       background-color: rgba(255, 255, 255, 100% );
       border: none;
       border-radius: 20px;
       padding: 6px 15px;
       display: flex;
       align-items: center;
       color: rgb(0, 0, 0);
       z-index: 2;
       font-size: 18px;
   }

   .templateedit .like-btn i {
       margin-right: 6px;
       font-size: 18px;
   }



   .templateedit .use-photo-btn {
       background-color: rgba(186, 20, 136, 100);
       border: none;
       border-radius: 24px;
       padding: 8px 16px;
       color: white;
       display: flex;
       align-items: center;
       gap: 6px;
       font-size: 16px;
   }

   .templateedit .use-photo-btn i {
       color: #ff66ff;
       font-size: 16px;
   }

   .templateedit .download-btn {
       background-color: rgb(255, 255, 255);
       border: none;
       border-radius: 24px;
       padding: 8px 16px;
       color: rgb(0, 0, 0);
       display: flex;
       align-items: center;
       gap: 6px;
       font-size: 16px;
   }

   .templateedit .download-btn i {
       font-size: 16px;
   }

   .templateedit .card-content {
       padding: 18px;
       flex-grow: 1;
   }

   .templateedit .gallery-card-title {
       margin: 0;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       font-size: 18px;
       font-weight: 600;
       color: white;
   }

   .templateedit .creator-info {
       display: flex;
       align-items: center;
       gap: 10px;
       font-size: 16px;
       color: #cccccc;
       margin-top: 10px;
   }

   .templateedit .creator-info img {
       width: 28px;
       height: 28px;
       border-radius: 50%;
   }

   /* User dropdown */
   .templateedit .user-dropdown {
       position: absolute;
       top: 100%;
       right: 0;
       background-color: #2A2A3C;
       border-radius: 10px;
       box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
       padding: 15px;
       margin-top: 10px;
       z-index: 100;
       min-width: 250px;
       display: none;
   }

   .templateedit .user-dropdown.active {
       display: block;
   }

   .templateedit .dropdown-user-info {
       display: flex;
       align-items: center;
       gap: 15px;
       margin-bottom: 15px;
       padding-bottom: 15px;
       border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   }

   .templateedit .dropdown-user-info img {
       width: 50px;
       height: 50px;
       border-radius: 50%;
   }

   .templateedit .dropdown-menu-items a {
       display: flex;
       align-items: center;
       gap: 10px;
       color: var(--text-light);
       text-decoration: none;
       padding: 10px 5px;
       border-radius: 5px;
       transition: all 0.2s;
   }

   .templateedit .dropdown-menu-items a:hover {
       background-color: rgba(255, 255, 255, 0.1);
   }

   .templateedit .dropdown-menu-items i {
       width: 20px;
       text-align: center;
   }

   /* Mobile Responsive */
   @media (max-width: 768px) {
       .templateedit #sidebar {
           width: var(--sidebar-collapsed-width);
       }

       .templateedit #sidebar.expanded {
           width: var(--sidebar-width);
       }

       .templateedit #content {
           margin-left: var(--sidebar-collapsed-width);
           padding: 15px;
           width: calc(100% - var(--sidebar-collapsed-width));
       }

       .templateedit #content.collapsed {
           margin-left: var(--sidebar-width);
           width: calc(100% - var(--sidebar-width));
       }

       .templateedit .nav-link-text {
           display: none;
       }

       .templateedit #sidebar.expanded .nav-link-text {
           display: inline;
       }

       .templateedit .main-heading h1 {
           font-size: 1.8rem;
       }

       .templateedit .page-header {
           flex-direction: column;
           gap: 15px;
       }

       .templateedit .user-info,
       .templateedit .user-points {
           width: 100%;
       }

       /* Hide user details in mobile view */
       .templateedit .user-info-details {
           display: none;
       }

       /* Center profile image in mobile view */
       .templateedit .user-info {
           justify-content: center;
       }

       /* Adjust dropdown position for mobile */
       .templateedit .user-dropdown {
        min-width: 296px;
           right: 15px;
           left: -100px;
       }
   }

   /* For extra small screens */
   @media (max-width: 576px) {
       .templateedit #content {
           width: 100%;
           margin-left: 0;
           padding: 10px;
       }

       .templateedit #sidebar {
           width: 0;
           padding: 0;
       }

       .templateedit #sidebar.expanded {
           width: 80%;
           padding: 20px;
       }

       .templateedit #content.expanded {
           margin-left: 0;
       }

       .templateedit #content.collapsed {
           margin-left: 0;
           width: 100%;
       }

       .templateedit .main-heading h1 {
           font-size: 1.5rem;
       }

       /* Show mobile menu toggle button */
       .templateedit .mobile-menu-toggle {
           display: block;
           position: fixed;
           top: 15px;
           left: 15px;
           z-index: 1000;
           background-color: var(--primary-color);
           border: none;
           border-radius: 50%;
           width: 40px;
           height: 40px;
           display: flex;
           align-items: center;
           justify-content: center;
           color: white;
       }
   }

   /* Thêm vào file CSS của bạn */
   .templateedit #sidebar.collapsed .sidebar-section-title {
       display: block;
       text-align: center;
       font-size: 0.7rem;
       margin-bottom: 10px;
       white-space: normal;
       line-height: 1;
   }

   /* Màu sắc cho các tiêu đề */
   .templateedit .sidebar-section:nth-of-type(1) .sidebar-section-title {
       color: #808191 !important;
       /* CHUNG - màu xanh lá */
   }

   .templateedit .sidebar-section:nth-of-type(2) .sidebar-section-title {
       color: #808191 !important;
       /* CÔNG CỤ HÌNH ẢNH AI - màu xanh dương */
   }

   .templateedit .sidebar-section:nth-of-type(3) .sidebar-section-title {
       color: #808191 !important;
       /* KHÁC - màu cam */
   }

   /* Khi sidebar thu gọn, ẩn text trong các liên kết nhưng giữ icon */
   .templateedit #sidebar.collapsed .nav-link-text {
       display: none;
   }

   /* Nhưng hiển thị text của tiêu đề */
   .templateedit #sidebar.collapsed .sidebar-section-title {
       display: block;
   }

   /* Căn giữa icon khi sidebar thu gọn */
   .templateedit #sidebar.collapsed .nav-link {
       text-align: center;
       padding: 0.5rem;
   }

   /* Tăng kích thước icon khi sidebar thu gọn */
   .templateedit #sidebar.collapsed .nav-link i {
       font-size: 1.25rem;
       margin-right: 0;
   }

   .templateedit .create-action-btn {
       position: fixed;
       bottom: 20px;
       left: 20px;
       width: 50px;
       height: 50px;
       border-radius: 50%;
       background-color: var(--primary-color);
       color: white;
       border: none;
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
       z-index: 999;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1.2rem;
   }

   /* When sidebar is collapsed */
   .templateedit .sidebar.collapsed+#content .create-action-btn {
       display: block;
   }



    /* Homepage*/

/* Reset and base styles */
.homepage * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.homepage body {
    background-color: #1a1d24;
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Layout */
.homepage .d-flex {
    display: flex;
    min-height: 100vh;
}

/* Sidebar styles */
.homepage .sidebar {
    width: 80px;
    background-color: #13151a;
    position: fixed;
    height: 100vh;
    display: flex;
    flex-direction: column;
    z-index: 1000;
}

.homepage .sidebar-brand {
    padding: 20px;
    text-align: center;
}

.homepage .menu-icon {
    color: #6b7280;
    font-size: 20px;
    cursor: pointer;
}

.homepage .sidebar-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1;
}

.homepage .bottom-nav {
    margin-top: auto;
    padding-bottom: 20px;
}

.homepage .nav-item {
    width: 100%;
}

.homepage .nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0;
    color: #6b7280;
    text-decoration: none;
    transition: all 0.3s ease;
}

.homepage .nav-link i {
    font-size: 20px;
    margin-bottom: 4px;
}

.homepage .nav-link span {
    font-size: 11px;
    display: block;
}

.homepage .nav-item.active .nav-link {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
}

.homepage .nav-link:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.05);
}

/* Main content */
.homepage .main-content {
    flex: 1;
    margin-left: 80px;
    padding: 24px;
}

/* Header styles */
.homepage .content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.homepage .content-header h1 {
    font-size: 24px;
    font-weight: 600;
    color: #ffffff;
}

.homepage .header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Create button */
.homepage .btn-create {
    background-color: #8b5cf6;
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    border: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.3s ease;
}

.homepage .btn-create:hover {
    background-color: #7c3aed;
    color: white;
}

/* Points info */
.homepage .point-info {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

.homepage .point-info span {
    color: #ffa500;
    font-weight: 600;
}

/* User info section */
.homepage .user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 40px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.homepage .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.homepage .user-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.homepage .name-and-status {
    display: flex;
    align-items: center;
    gap: 8px;
}

.homepage .user-name {
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
}

.homepage .user-action {
    background-color: rgba(40, 70, 110, 0.8);
    color: #ffffff;
    padding: 2px 12px;
    border-radius: 4px;
    font-size: 12px;
}

.homepage .user-email {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

/* Settings card */
.homepage .settings-card {
    background-color: #2c303a;
    border-radius: 12px;
    padding: 32px;
}

.homepage .card-header {
    margin-bottom: 32px;
}

.homepage .card-header h2 {
    font-size: 18px;
    margin-bottom: 8px;
    color: #ffffff;
}

.homepage .card-header p {
    color: #6b7280;
    font-size: 14px;
}

/* Profile photo section */
.homepage .profile-photo {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 32px;
}

.homepage .profile-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.homepage .photo-actions {
    display: flex;
    gap: 12px;
}

/* Form styles */
.homepage .settings-form label {
    display: block;
    color: #6b7280;
    margin-bottom: 8px;
    font-size: 14px;
}

.homepage .form-control {
    background-color: #1a1d24;
    border: 1px solid #3f4450;
    color: #ffffff;
    padding: 12px 16px;
    border-radius: 6px;
    width: 100%;
    font-size: 14px;
}

.homepage .form-control:focus {
    border-color: #8b5cf6;
    outline: none;
    box-shadow: none;
}

.homepage .input-group {
    display: flex;
    gap: 12px;
}

.homepage .input-group .form-control {
    flex: 1;
}

/* Button styles */
.homepage .btn {
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.homepage .btn-primary {
    background-color: #8b5cf6;
    color: white;
    border: none;
}

.homepage .btn-primary:hover {
    background-color: #7c3aed;
}

.homepage .btn-outline {
    background-color: transparent;
    border: 1px solid #3f4450;
    color: #ffffff;
}

.homepage .btn-outline:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Delete account section */
.homepage .delete-account {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid #3f4450;
}

.homepage .delete-account h3 {
    font-size: 18px;
    color: #ffffff;
    margin-bottom: 8px;
}

.homepage .delete-account p {
    color: #6b7280;
    font-size: 14px;
    margin-bottom: 24px;
}

.homepage .btn-danger {
    background-color: #dc2626;
    color: white;
    border: none;
}

.homepage .btn-danger:hover {
    background-color: #b91c1c;
}

/* Responsive styles */
@media (max-width: 992px) {
    .homepage .header-right {
        flex-wrap: wrap;
        gap: 12px;
    }

    .homepage .profile-photo {
        flex-direction: column;
        align-items: flex-start;
    }

    .homepage .photo-actions {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .homepage .main-content {
        padding: 16px;
    }

    .homepage .content-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .homepage .header-right {
        width: 100%;
    }

    .homepage .settings-card {
        padding: 24px;
    }

    .homepage .photo-actions {
        flex-direction: column;
    }

    .homepage .photo-actions button {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .homepage .point-info {
        display: none;
    }

    .homepage .user-info {
        width: 100%;
    }

    .homepage .input-group {
        flex-direction: column;
    }

    .homepage .input-group button {
        width: 100%;
    }
}

/* Notification */

.Notification :root {
    --sidebar-width: 240px;
    --sidebar-collapsed-width: 65px;
    --main-dark: #272835;
    --hover-color: rgba(255, 255, 255, 0.1);
}

.Notification .sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background-color: var(--main-dark);
    border-right: 7px solid rgba(17, 11, 11, 0.1);
    transition: width 0.3s ease;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scrollbar-width: none;
}

.Notification .sidebar::-webkit-scrollbar {
    display: none;
}

.Notification .sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
}

.Notification .logo-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
}

.Notification .logo {
    max-width: 80%;
    max-height: 80px;
    height: auto;
    object-fit: contain;
}

.Notification .sidebar-item {
    display: flex;
    align-items: center;
    padding: 8px 15px;
    color: #ffffff;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
}

.Notification .sidebar-item:hover {
    background-color: var(--hover-color);
}

.Notification .sidebar-item i {
    width: 20px;
    text-align: center;
}

.Notification .sidebar-item span {
    margin-left: 10px;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.Notification .collapsed .sidebar-item span {
    opacity: 0;
    visibility: hidden;
}

.Notification .main-content {
    margin-left: var(--sidebar-width);
    padding: 20px;
    min-height: 100vh;
    transition: margin-left 0.3s ease;
}

.Notification .main-content.collapsed {
    margin-left: var(--sidebar-collapsed-width);
}

/*bên trái thu ra đóng vào*/
.Notification .sidebar-item {
    display: flex;
    align-items: center;
    padding: 8px 21px;
    color: #ffffff;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
}

.Notification .sidebar-item:hover {
    background-color: var(--hover-color);
}

.Notification .sidebar-item i {
    width: 20px;
    text-align: center;
}

.Notification .sidebar-item span {
    margin-left: 10px;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.Notification .collapsed .sidebar-item span {
    opacity: 0;
    visibility: hidden;
}

.Notification .section-title {
    color: #6c757d;
    font-size: 0.75em;
    padding: 8px 15px;
    text-transform: uppercase;
    white-space: nowrap;
}

.Notification .collapsed .section-title {
    text-align: center;
    padding: 8px 0;
}

.Notification .section-divider {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1);
    margin: 5px 0;
}

.Notification .create-button {
    margin: 10px;
    padding: 8px;
    border-radius: 12px;
    background: linear-gradient(to right, #e83e8c, #6f42c1);
    border: none;
    color: white;
    display: flex;
    align-items: center;
    width: calc(100% - 20px);
    transition: width 0.3s ease;
}

.Notification .collapsed .create-button {
    width: 45px;
    margin: 10px auto;
    justify-content: center;
}

.Notification .create-button i {
    width: 20px;
    text-align: center;
}

.Notification .create-button span {
    margin-left: 10px;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.Notification .collapsed .create-button span {
    opacity: 0;
    visibility: hidden;
}

.Notification .rocket-button {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    background: linear-gradient(to right, #e83e8c, #6f42c1);
    border: none;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.Notification .main-content {
    margin-left: var(--sidebar-width);
    padding: 20px;
    min-height: 100vh;
    transition: margin-left 0.3s ease;
}

.Notification .main-content.collapsed {
    margin-left: var(--sidebar-collapsed-width);
}

/* Compact spacing for section items */
.Notification .section-items {
    padding: 5px 0;
}

/*Xong bên trái */
/*Bên nội dung chính*/
/* Reset mặc định */
.Notification * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  
}

.Notification body {
    background-color: #1A1B25;
    color: white;
    padding: 10px;
}

/* ===== HEADER ===== */
.Notification .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1A1B25;
    padding: 0px;
    border-radius: 8px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
    position: relative;
    top: -20px;
    /* Kéo header lên nhiều hơn */
}

/* Nút tạo ảnh */
/* Nút tạo ảnh */
.Notification .create-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    /* Tăng khoảng cách giữa chữ và icon */
    background: linear-gradient(135deg, #ff758c, #ff7eb3);
    color: white;
    padding: 10px 28px;
    /* Tăng padding để nút lớn hơn */
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    /* Tăng kích thước chữ */
    transition: all 0.3s ease-in-out;
    white-space: nowrap;
    min-width: 180px;
    /* Tăng chiều rộng tối thiểu */
}

/* Vòng tròn chứa mũi tên */
.Notification .create-btn .arrow-container {
    width: 36px;
    /* Tăng kích thước */
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ff758c, #a060ff);
    border-radius: 50%;
    /* Bo tròn */
    transition: transform 0.3s ease-in-out;
}

/* Mũi tên */
.Notification .create-btn .arrow-container svg {
    width: 20px;
    /* Tăng kích thước mũi tên */
    height: 20px;
}

/* Hover */
.Notification .create-btn:hover .arrow-container {
    transform: scale(1.1);
    /* Tăng nhẹ kích thước khi hover */
}


/* User info */
.Notification .profile-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    /* Đảm bảo không bị tràn khi thu nhỏ */
    justify-content: flex-end;
    gap: 10px;
}
 .Notification * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 .Notification body {
     font-family: Arial, sans-serif;
     background-color: #262626;
     padding: 20px;
 }

 /* User dropdown container */
 .Notification .user-dropdown {
     position: relative;
     display: inline-block;
     background-color: #1e1e1e;
     border-radius: 4px;
 }

 /* User info container */
 .Notification .user-info {
     display: flex;
     align-items: center;
     cursor: pointer;
     color: white;
     padding: 8px;
 }

 /* User avatar */
 .Notification .user-avatar {
     width: 32px;
     height: 32px;
     border-radius: 50%;
     object-fit: cover;
 }

 /* User details */
 .Notification .user-details {
     margin-left: 10px;
     transition: all 0.3s ease;
 }

 /* User name */
 .Notification .user-name {
     font-weight: bold;
     display: flex;
     align-items: center;
     font-size: 14px;
 }

 /* VIP badge */
 .Notification .vip-badge {
     background-color: #4e8cff;
     color: white;
     padding: 1px 5px;
     border-radius: 3px;
     font-size: 11px;
     margin-left: 5px;
 }

 /* User email */
 .Notification .user-email {
     font-size: 11px;
     opacity: 0.7;
 }

 /* Dropdown menu */
 .Notification .dropdown-menu {
     position: absolute;
     top: 100%;
     right: 0;
     background-color: #1e1e1e;
     border-radius: 4px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
     margin-top: 5px;
     min-width: 200px;
     display: none;
     z-index: 100;
     overflow: hidden;
 }

 /* Show dropdown menu when active */
 .Notification .dropdown-menu.active {
     display: block;
 }

 /* Dropdown items */
 .Notification .dropdown-item {
     padding: 10px 15px;
     display: flex;
     align-items: center;
     color: #f1f1f1;
     text-decoration: none;
     transition: background-color 0.2s;
     font-size: 13px;
 }

 .Notification .dropdown-item:hover {
     background-color: #333;
 }

 /* Item separator */
 .Notification .dropdown-item:not(:last-child) {
     border-bottom: 1px solid #333;
 }

 /* Item icon */
 .Notification .dropdown-item i {
     margin-right: 10px;
     color: #888;
     width: 16px;
     text-align: center;
 }

 /* Logout item */
 .Notification .dropdown-item.logout {
     color: #ff4d4d;
 }

 /* Arrow for language option */
 .Notification .dropdown-item .arrow {
     margin-left: auto;
     font-size: 12px;
 }

 /* Responsive styles */
 @media (max-width: 768px) {
     .Notification .user-details {
         display: none;
     }

    .Notification  .dropdown-toggle.active .user-details {
         display: none;
     }
 }
/* Khi màn hình nhỏ hơn 768px (Mobile) */
@media (max-width: 768px) {
    .Notification .profile-container {
        flex-direction: column;
        align-items: flex-end;
        /* Căn phải */
        text-align: right;
    }

    .Notification .user-info {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
    }

    .Notification .user-avatar {
        width: 30px;
        height: 30px;
    }

    .Notification .user-name {
        font-size: 13px;
    }

    .Notification .user-email {
        font-size: 12px;
    }

    .Notification .points {
        font-size: 14px;
    }
}

.Notification .points span {
    color: #ffcc00;
    /* Màu vàng */
    font-weight: bold;
}

.Notification .user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 8px 15px;
    border-radius: 20px;
}

.Notification .user-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
}

.Notification .user-name {
    font-size: 14px;
    font-weight: bold;
}

.Notification .user-email {
    font-size: 12px;
    color: #ccc;
}

.Notification .vip-badge {
    background-color: #ffcc00;
    color: #1f1f27;
    font-size: 12px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
}

/* ===== MAIN CONTENT ===== */
.Notification .main-content {
    margin-top: 20px;
}

.Notification .page-title {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 15px;
}

/* Wrapper chính */
.Notification .content-wrapper {
    display: flex;
    gap: 20px;
}

/* ===== NAVIGATION MENU ===== */
.Notification .nav-menu {
    width: 250px;
    background: #1A1B25;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
}

.Notification .nav-item {
    display: flex;
    align-items: center;
    padding: 10px;
    gap: 10px;
    text-decoration: none;
    color: #bbb;
    font-weight: 600;
    border-radius: 6px;
    transition: background 0.3s;
}

.Notification .nav-item.active,
.Notification .nav-item:hover {
    background: #ffffff;
    color: rgb(0, 0, 0);
}

.Notification .nav-icon {
    width: 20px;
    height: 20px;
}

/* ===== NOTIFICATION LIST ===== */
.Notification .notification-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* Tạo khoảng cách giữa các thông báo */
}

/* Card thông báo */
.Notification .notification-card {
    background: #1A1B25;
    /* Giữ màu nền */
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
    border: 1px solid #252538;
}

/* Ngày gửi */
.Notification .notification-date {
    font-size: 14px;
    color: #bbbbbb;
    /* Màu xám nhạt hơn */
    font-weight: normal;
}

/* Tiêu đề thông báo */
.Notification .notification-title {
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    /* Giữ màu vàng nổi bật */
}

/* Nội dung thông báo */
.Notification .notification-content {
    font-size: 14px;
    color: #dddddd;
    /* Màu chữ nhạt hơn so với tiêu đề */
    line-height: 1.5;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
    .Notification .content-wrapper {
        flex-direction: column;
    }

    .Notification .nav-menu {
        width: 100%;
        display: flex;
        overflow-x: auto;
        padding: 10px 5px;
    }

    .Notification .nav-item {
        flex: 1;
        justify-content: center;
        padding: 10px 5px;
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .Notification .header {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .Notification .create-btn {
        width: 50%;
        justify-content: center;
    }

    .Notification .user-info {
        flex-direction: column;
        text-align: center;
    }

    .Notification .notification-title {
        font-size: 14px;
    }

    .Notification .notification-content {
        font-size: 12px;
    }
}

/* Landingpage */
.landingpage :root {
    --primary-color: #FF1493;
    --dark-bg: #1a1a1a;
}

.landingpage body {
    background-color: #131316;
    color: white;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Base styles */
.landingpage .primary-navigation {
    width: 100%;
    background-color: #000;
    padding: 15px 0;
}

.landingpage .nav-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    flex-direction: column;
}

.landingpage .primary-navigation {
    width: 100%;
    background-color: #000;
    padding: 15px 0;
}

.landingpage .nav-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Brand section - now contains all elements */
.landingpage .brand-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.landingpage .brand-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    font-size: 1.25rem;
}

.landingpage .brand-logo img {
    height: 40px;
    margin-right: 10px;
}

.landingpage .menu-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
}

.landingpage .menu-icon,
.landingpage .menu-icon:before,
.landingpage .menu-icon:after {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #fff;
    position: relative;
}

.landingpage .menu-icon:before,
.landingpage .menu-icon:after {
    content: '';
    position: absolute;
}

.landingpage .menu-icon:before {
    top: -8px;
}

.landingpage .menu-icon:after {
    bottom: -8px;
}

/* Menu section */
.landingpage .menu-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: auto;
    /* Push menu to the right of logo */
    margin-right: 20px;
    /* Space between menu and toggle button */
}

.landingpage .menu-wrapper {
    margin-right: 20px;
    /* Space between menu and login button */
}

.landingpage .main-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 12px 20px;
    border-radius: 30px;
    background-color: #111;
    border: 1px solid #333;
}

.landingpage .menu-item {
    margin: 0 15px;
}

.landingpage .menu-item a {
    text-decoration: none;
    color: #888;
    font-weight: 500;
    padding: 8px 15px;
    border-radius: 20px;
    transition: all 0.3s;
    display: block;
    border: 1px solid transparent;
}

.landingpage .menu-item.active a {
    color: #ffffff;
    border-color: #ffffff;
}

.landingpage .menu-item a:hover {
    color: #ffffff;
    background-color: rgba(255, 51, 102, 0.08);
    border-color: #ffffff;
}

/* Login section */
.landingpage .login-section {
    margin: 0;
}

.landingpage .btn-login {
    background: linear-gradient(90deg, #B8CBB8 0%, #B8CBB8 0%, #B465DA 0%, #CF6CC9 33%, #EE609C 66%, #EE609C 100%);
    color: white;
    border: none;
    border-radius: 25px;
    padding: 10px 25px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.landingpage .btn-login i {
    margin-left: 8px;
}

/* Responsive styles */
@media (max-width: 768px) {
  .landingpage .menu-toggle {
        display: block;
    }

   .landingpage .menu-section {
        display: none;
        position: absolute;
        top: 70px;
        /* Adjust based on your nav height */
        left: 0;
        width: 100%;
        background-color: #000;
        flex-direction: column;
        padding: 15px;
        z-index: 100;
    }

   .landingpage .menu-section.active {
        display: flex;
    }

  .landingpage  .menu-wrapper {
        margin-right: 0;
        width: 100%;
    }

  .landingpage  .main-menu {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

  .landingpage  .menu-item {
        margin: 8px 0;
        width: 100%;
        text-align: center;
    }

   .landingpage .login-section {
        margin-top: 15px;
    }
}

.landingpage .btn-login:hover {
    background: linear-gradient(to right, #c13584, #ff69b4);
}

.landingpage .hero-section {
    text-align: center;
    margin-top: 20px;
    padding: 30px;
}

.landingpage .hero-title {
    font-size: 72px;
    font-weight: 600;
}

.landingpage .hero-title p {
    font-size: 72px;
    margin-top: 2px;
    margin-bottom: 3rem;
}

.landingpage .hero-title span {
    color: #ff69b4;
}

.landingpage .search-container {
    display: flex;
    justify-content: center;
    margin-top: 5px;
}

.landingpage .search-bar {
    width: 600px;
    display: flex;
    border-radius: 40px;
    overflow: hidden;
    background-color: #272835;
    padding: 8px;
    align-items: center;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    position: relative;
}

.landingpage .search-bar input {
    flex: 1;
    border: none;
    padding: 15px 15px 15px 50px;
    background: white;
    color: black;
    font-size: 18px;
    outline: none;
    border-radius: 30px;
}

.landingpage .search-bar input::placeholder {
    color: #666;
    font-size: 18px;
}

.landingpage .search-bar button {
    background: linear-gradient(90deg, #B8CBB8 0%, #B8CBB8 0%, #B465DA 0%, #CF6CC9 33%, #EE609C 66%, #EE609C 100%);
    border: none;
    padding: 15px 30px;
    font-size: 18px;
    color: white;
    cursor: pointer;
    transition: 0.3s;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.landingpage .search-bar button:hover {
    background: linear-gradient(to right, #c13584, #ff69b4);
}

.landingpage .search-icon {
    color: black;
    font-size: 20px;
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    background-color: white;
    border-radius: 50%;
    padding: 5px;
}

/* Gallery Grid */
.landingpage .gallery {
    display: grid;
    grid-template-columns: repeat(7, auto);
    gap: 30px;
    /* Giảm khoảng cách tối đa giữa các ảnh */
    align-items: center;
}

.landingpage .header {
    text-align: left;
    margin-bottom: 40px;
}

.landingpage .gallery img {
    width: 100%;
    border-radius: 15px;
    object-fit: cover;
}

.landingpage .gallery img:nth-child(odd) {
    grid-row: span 2;
}

@media (max-width: 992px) {
    .landingpage .navbar-nav {
        flex-direction: column;
        width: 100%;
        text-align: center;
        padding: 15px;
    }

    .landingpage .navbar-nav .nav-item {
        margin: 5px 0;
    }

    .landingpage .btn-login {
        width: 100%;
        justify-content: center;
    }

    .landingpage .gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 3px;
    }
}

/* Steps Section */
.landingpage body {
    background-color: #1a1a22;
    color: white;
    font-family: Arial, sans-serif;
    padding: 20px 0;
}

.landingpage .header {
    text-align: left;
    margin-bottom: 40px;
}

.landingpage .header h1 {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 20px;
    /* Tăng giá trị này từ mặc định */
}

.landingpage .snap-hair {
    color: #ff6b9d;
}

.landingpage .subheader {
    color: #aaa;
    font-size: 0.9rem;
    margin-top: 15px;
    /* Thêm khoảng cách phía trên */
}

.landingpage .step {
    background-color: #252533;
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 20px;
    position: relative;
    transition: all 0.3s ease;
}

.landingpage .step:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.landingpage .step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #ff6b9d;
    color: white;
    border-radius: 50%;
    font-weight: bold;
    position: absolute;
    left: -15px;
    top: 20px;
}

.landingpage .step-content {
    padding-left: 40px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.landingpage .step-title {
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.landingpage .step-description {
    color: #aaa;
    font-size: 0.9rem;
    line-height: 1.5;
}

.landingpage .try-now-container {
    text-align: center;
    margin: 40px 0 20px;
}

.landingpage .try-now-btn {
background: linear-gradient(90deg, #B8CBB8 0%, #B8CBB8 0%, #B465DA 0%, #CF6CC9 33%, #EE609C 66%, #EE609C 100%);
    color: white;
    border: none;
    padding: 12px 80px;
    border-radius: 30px;
    font-weight: bold;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.landingpage .try-now-btn:hover {
    background-color: #ff4b87;
    transform: scale(1.05);
}

.landingpage .video-container {
    background-color: #252533;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    padding-top: 56.25%;
    margin-bottom: 20px;
}

.landingpage .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

@media (max-width: 767px) {
    .landingpage .header {
        text-align: center;
    }

    .landingpage .step-number {
        left: 50%;
        transform: translateX(-50%);
        top: -20px;
    }

    .landingpage .step-content {
        padding-left: 0;
        padding-top: 30px;
        text-align: center;
    }

    .landingpage .header h1 {
        font-size: 1.8rem;
    }
}

/* Portfolio Section */
.landingpage body {
    background-color: #141622;
    color: white;
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 0;
    padding: 0;
}

.landingpage h1 {
    font-size: 28px;
    font-weight: bold;
    margin-top: 40px;
}

.landingpage h1 span {
    color: #d97ab1;
}

/* .landingpage p {
    font-size: 14px;
    color: #ffffff;
    margin-bottom: 20px;
} */



/* .landingpage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.landingpage .btn {
    display: inline-block;
    background: linear-gradient(90deg, #e44c9a, #f98d9c);
    padding: 10px 25px;
    border-radius: 20px;
    color: white;
    text-decoration: none;
    font-weight: bold;
    margin-top: 15px;
} */

/* Testimonials Section */
.landingpage body {
    background-color: #0d0c13;
    /* Giữ nền tối giống ảnh */
    color: white;
    font-family: 'Arial', sans-serif;
}

.landingpage .testimonials {
    max-width: 1326px;
    margin: auto;
    text-align: left;
}

.landingpage h2 {
    font-size: 48px;
    font-weight: bold;
    color: white;
    text-align: left;
    margin-top: 65px;
    /* Căn trái tiêu đề */
}

  .landingpage h2 .highlight {
      color: #e91e63;
  }

  .landingpage .subtext {
      color: #a1a1b5;
      font-size: 16px;
      margin-bottom: 30px;
      text-align: left;
  }

  .landingpage .testimonials-container {
      display: flex;
      flex-wrap: nowrap;
      gap: 20px;
      overflow-x: hidden;
      width: 100%;
      padding-bottom: 10px;
  }

  .landingpage .testimonial {
      background-color: #1a1a2e;
      padding: 20px;
      border-radius: 12px;
      flex: 0 0 calc(33.333% - 14px);
      box-sizing: border-box;
      position: relative;
      border: 1px solid rgba(233, 30, 99, 0.3);
      transition: all 0.3s ease;
  }

  .landingpage .testimonial p {
      font-size: 15px;
      color: white;
      margin-bottom: 20px;
  }

  .landingpage .author {
      display: flex;
      align-items: center;
      margin-top: 15px;
  }

  .landingpage .author img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 10px;
  }

  .landingpage .author div {
      display: flex;
      flex-direction: column;
  }

  .landingpage .author h4 {
      font-size: 14px;
      margin: 0;
      color: white;
  }

  .landingpage .stars {
      font-size: 12px;
      color: gold;
  }

  .landingpage .quote-right {
      position: absolute;
      right: 20px;
      bottom: 20px;
      font-size: 30px;
      opacity: 0.3;
  }

  .landingpage .controls {
      display: flex;
      justify-content: center;
      margin-top: 30px;
  }

  .landingpage .prev,
  .landingpage .next {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      color: white;
      border: none;
      font-size: 18px;
      cursor: pointer;
      margin: 0 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.3s ease;
  }

  .landingpage .prev {
      background-color: #27263d;
  }

  .landingpage .next {
      background-color: #e91e63;
  }

  .landingpage .prev:hover {
      background-color: #e91e63;
  }

  @media (max-width: 992px) {
      .landingpage .testimonial {
          flex: 0 0 calc(50% - 10px);
      }
  }

  @media (max-width: 768px) {
      .landingpage .testimonial {
          flex: 0 0 100%;
      }
  }
/* Process Steps */
.landingpage .snaphair-body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #1a1a25;
    color: white;
    margin: 0;
    padding: 20px;
}

.landingpage .snaphair-container {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
}

.landingpage .snaphair-heading {
    font-size: 32px;
    margin-bottom: 5px;
    text-align: left;
}

.landingpage .snaphair-pink-text {
    color: #ff5c8d;
}

.landingpage .snaphair-subtitle {
    font-size: 14px;
    color: #ccc;
    margin-bottom: 40px;
    text-align: left;
}

.landingpage .snaphair-step-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: relative;
}

.landingpage .snaphair-step {
    display: flex;
    padding: 20px;
    border: 1px solid #333;
    border-radius: 15px;
    background-color: rgba(40, 40, 55, 0.7);
    position: relative;
    max-width: 80%;
}

.landingpage .snaphair-step:nth-child(even) {
    align-self: flex-end;
}

/* Bước 3 căn phải */
.landingpage .snaphair-step:nth-child(3) {
    align-self: flex-end;
}

.landingpage .snaphair-step-number {
    width: 40px;
    height: 40px;
    background-color: #ff5c8d;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 20px;
    margin-right: 15px;
    flex-shrink: 0;
}

.landingpage .snaphair-step-content {
    display: flex;
    flex-direction: column;
}

.landingpage .snaphair-step-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
}

.landingpage .snaphair-step-description {
    font-size: 14px;
    color: #ccc;
}

.landingpage .snaphair-try-now-box {
    background-color: #1a2040;
    border-radius: 15px;
    padding: 15px;
    width: 250px;
    position: absolute;
    left: 50px;
    bottom: 20px;
}

.landingpage .snaphair-try-now-title {
    font-size: 16px;
    color: white;
    text-align: center;
    margin-bottom: 10px;
}

.landingpage .snaphair-try-now-steps {
    font-size: 12px;
    color: #ccc;
    text-align: left;
    /* Thay đổi từ center sang left */
    margin-bottom: 15px;
}

.landingpage .snaphair-try-now-button {
    background-color: #ff5c8d;
    color: white;
    border: none;
    border-radius: 25px;
    padding: 10px 25px;
    font-weight: bold;
    cursor: pointer;
    display: inline-block;
}

.landingpage .snaphair-image-float {
    position: absolute;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.landingpage .snaphair-image-1 {
    width: 80px;
    height: 80px;
    object-fit: cover;
    top: 170px;
    right: 100px;
}

.landingpage .snaphair-image-2 {
    width: 80px;
    height: 80px;
    object-fit: cover;
    top: 90px;
    right: 220px;
}

.landingpage .snaphair-image-3 {
    width: 80px;
    height: 80px;
    object-fit: cover;
    top: 200px;
    right: 280px;
}

.landingpage .snaphair-image-4 {
    width: 80px;
    height: 80px;
    object-fit: cover;
    top: 260px;
    right: 40px;
}

.landingpage .snaphair-image-5 {
    width: 80px;
    height: 80px;
    object-fit: cover;
    top: 100px;
    right: 30px;
}

.landingpage .snaphair-image-6 {
    width: 80px;
    height: 80px;
    object-fit: cover;
    top: 340px;
    left: 300px;
} 

.landingpage .snaphair-buttons-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}
.landingpage .try-now-container {
    text-align: center;
}
/* Footer */
.landingpage footer {
    background-color: white;
    padding: 30px 0;
    /* Giảm padding từ 50px xuống 30px */
    font-family: Arial, sans-serif;
}

.landingpage footer h5 {
    font-weight: bold;
    margin-bottom: 10px;
    /* Giảm margin từ 20px xuống 10px */
    color: #333;
    text-align: left;
    font-size: 18px;
}

 .landingpage footer p {
     font-size: 14px;
     color: #666;
     text-align: left;
     line-height: 1.5;
     margin-bottom: 20px;
     max-width: 620px;
 }

 .landingpage footer ul {
     font-size: 14px;
     color: #666;
     text-align: left;
     list-style: none;
     padding: 0;
 }

.landingpage footer a {
    text-decoration: none;
    color: #666;
    transition: color 0.3s;
    display: block;
    margin-bottom: 6px;
    /* Giảm margin từ 10px xuống 6px */
    font-size: 14px;
}

 .landingpage footer a:hover {
     color: #e95dc0;
 }

 .landingpage footer a[href^="mailto"] {
     display: block;
     font-size: 24px;
     font-weight: bold;
     color: #333;
     margin-bottom: 20px;
 }

 .landingpage .social-icons {
     display: flex;
     gap: 20px;
     margin-bottom: 30px;
 }

 .landingpage .social-icons a {
     font-size: 22px;
     display: inline-block;
 }

 .landingpage .social-icons a:nth-child(1) {
     color: #C13584;
     /* Instagram */
 }

 .landingpage .social-icons a:nth-child(2) {
     color: #25D366;
     /* WhatsApp */
 }

 .landingpage .social-icons a:nth-child(3) {
     color: #FF0000;
     /* YouTube */
 }

 .landingpage .social-icons a:nth-child(4) {
     color: #1DA1F2;
     /* Twitter */
 }

 .landingpage .footer-bottom {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding-top: 20px;
     border-top: 1px solid #eee;
     margin-top: 20px;
     color: #999;
     font-size: 14px;
 }

 .landingpage .footer-bottom div {
     display: flex;
     justify-content: flex-end;
     gap: 40px;
 }

 .landingpage .footer-bottom a {
     color: #999;
     margin-bottom: 0;
 }

 .landingpage .brand-logo {
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: 22px;
     font-weight: bold;
     color: #e95dc0;
     margin-bottom: 20px;
 }

 .landingpage .brand-logo img {
     width: 40px;
     height: 40px;
 }

.landingpage .footer-section {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 20px;
    /* Giảm từ 40px xuống 20px */
    gap: 20px;
    /* Thêm gap giữa các phần */
}

 .landingpage .footer-section>div:first-child {
     flex: 0 0 40%;
     max-width: 40%;
 }

.landingpage .footer-links {
    display: flex;
    flex: 0 0 55%;
    max-width: 55%;
    justify-content: space-between;
    gap: 15px;
    /* Thêm gap giữa các cột */
}

 .landingpage .footer-links>div {
     display: flex;
     flex-direction: column;
 }

 /* Responsive adjustments */
 @media (max-width: 992px) {

     .landingpage .footer-section>div:first-child,
     .landingpage .footer-links {
         flex: 0 0 100%;
         max-width: 100%;
     }

     .landingpage .footer-section>div:first-child {
         margin-bottom: 30px;
     }
 }

 @media (max-width: 768px) {
     .landingpage .footer-links {
         flex-direction: column;
         gap: 30px;
     }

     .landingpage .footer-bottom {
         flex-direction: column;
         align-items: flex-start;
         gap: 20px;
     }

     .landingpage .footer-bottom div {
         flex-wrap: wrap;
         gap: 15px;
     }
 }
/*Hero Section*/
   .landingpage .hero-container {
      position: relative;
      width: 100%;
      height: 400px;
      overflow: hidden;
      margin-top: 70px;
  }

  .landingpage .hero-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.4);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 20px;
      text-align: center;
  }

.landingpage .hero-heading {
    color: white;
    font-size: 2.5rem;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    max-width: 80%;
    margin-bottom: 30px;
    line-height: 1.4;
    /* Thêm line-height để tăng khoảng cách giữa các dòng */
    letter-spacing: 0.5px;
    /* Tăng nhẹ khoảng cách giữa các chữ */
}
  .landingpage .hero-cta {
    background: linear-gradient(90deg, #B8CBB8 0%, #B8CBB8 0%, #B465DA 0%, #CF6CC9 33%, #EE609C 66%, #EE609C 100%);
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 4px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .landingpage .hero-cta:hover {
      background-color: #d33bd3;
  }

  .landingpage .hero-bg {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: brightness(0.8);
  } 

.landingpage footer {
    background-color: #ffffff;
    color: #333;
    padding: 40px 60px;
    font-family: Arial, sans-serif;
    border-top: 1px solid #ddd;
}

.landingpage .footer-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.landingpage .footer-left {
    max-width: 40%;
}

.landingpage .footer-left h2 {
    color: #e95dc0;
    /* Adjusted pink color to match image */
    font-size: 24px;
    /* Increased size */
    font-weight: bold;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.landingpage .footer-left h2 img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
}

.landingpage .footer-left p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
}

.landingpage .footer-left a {
    font-size: 24px;
    /* Larger font for email */
    font-weight: bold;
    color: #333;
    text-decoration: none;
    display: block;
    margin-top: 10px;
    margin-bottom: 20px;
}

.landingpage .footer-social {
    margin-top: 20px;
    display: flex;
    gap: 20px;
}

.landingpage .footer-social a {
    display: inline-block;
    font-size: 22px;
}

/* Social media icon colors */
.landingpage .footer-social a:nth-child(1) {
    color: #C13584;
    /* Instagram */
}

.landingpage .footer-social a:nth-child(2) {
    color: #25D366;
    /* WhatsApp */
}

.landingpage .footer-social a:nth-child(3) {
    color: #FF0000;
    /* YouTube */
}

.landingpage .footer-social a:nth-child(4) {
    color: #1DA1F2;
    /* Twitter */
}

.landingpage .footer-links {
    display: flex;
    justify-content: space-between;
    flex-grow: 1;
    max-width: 40%;
}

.landingpage .footer-links div {
    margin-right: 0px;
}

.landingpage .footer-links h3 {
    font-size: 18px;
    /* Increased size */
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
}

.landingpage .footer-links a {
    display: block;
    font-size: 14px;
    color: #666;
    text-decoration: none;
    margin-bottom: 10px;
    /* Increased spacing */
}

.landingpage .footer-links a:hover {
    color: #e95dc0;
    /* Updated to match logo color */
}

.landingpage .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    font-size: 14px;
    /* Increased size */
    color: #999;
    margin-top: 20px;
    border-top: 1px solid #eee;
    /* Lighter border */
    padding-top: 20px;
    /* More padding */
}

.landingpage .footer-bottom .copyright {
    color: #999;
}

.landingpage .footer-bottom .footer-bottom-links {
    display: flex;
    gap: 25px;
    /* Increased gap between links */
}

.landingpage .footer-bottom a {
    color: #999;
    /* Lighter gray */
    text-decoration: none;
    margin-left: 0;
    /* Remove left margin */
}

.landingpage .footer-bottom a:hover {
    color: #e95dc0;
}

/* Responsive adjustments */
@media (max-width: 992px) {

    .landingpage .footer-left,
    .landingpage .footer-links {
        max-width: 100%;
    }

    .landingpage .footer-left {
        margin-bottom: 30px;
    }
}

@media (max-width: 768px) {
    .landingpage footer {
        padding: 30px 20px;
    }

    .landingpage .footer-links {
        flex-direction: column;
        gap: 30px;
    }

    .landingpage .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .landingpage .footer-bottom .footer-bottom-links {
        flex-wrap: wrap;
        gap: 15px;
    }
}
/* Gradient Bar */
.landingpage .gradient-bar {
    height: 50px;
    background: linear-gradient(90deg, #ff589b, #cf67ff);
    margin-top: -20px;
    position: relative;
    z-index: 10;
}

/* Additional Card Styles */
.landingpage .card {
    background-color: #2a2a2a;
    border: none;
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.3s;
}

.landingpage .card:hover {
    transform: translateY(-5px);
}

.landingpage .card-img-top {
    height: 300px;
    object-fit: cover;
}

.landingpage .card-body {
    padding: 1.25rem;
}

/* ---- grid ---- */

.landingpage .grid {
    position: relative;
    z-index: 0;
}

/* clearfix */
.landingpage .grid:after {
    content: '';
    display: block;
    clear: both;
}

/* ---- grid-item ---- */

.landingpage .grid-item {
    width: 255px;
    height: 120px;
    float: left;

    margin-bottom: 12px;

}

.landingpage .grid-item--width2 {
    width: 400px;
}

.landingpage .grid-item--width3 {
    width: 600px;
}

.landingpage .grid-item--width4 {
    width: 800px;
}

.landingpage .grid-item--height3-2 {
    height: 180px;
}

.landingpage .grid-item--height2 {
    height: 240px;
}

.landingpage .grid-item--height3 {
    height: 360px;
}

.landingpage.grid-item--height4 {
    height: 480px;
}

 .landingpage .grid-item img {
    width: 127%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    /* Đảm bảo ảnh không bị méo */

}

.landingpage body {
    background-color: #13131a;
    color: white;
}

.landingpage .text-pink {
    color: #e573d9;
}

.landingpage .text-muted {
    color: #aaa !important;
}

.landingpage .btn-custom {
    border-radius: 20px;
    padding: 10px 20px;
    border: 1px solid #444;
    color: white;
    background-color: transparent;
    transition: 0.3s;
}

.landingpage .btn-custom:hover,
.landingpage .btn-custom.active {
    background-color: white;
    color: black;
    border-color: white;
}

.landingpage .btn-nav {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    font-size: 18px;
}

.landingpage .btn-prev {
    background-color: #333;
    color: white;
    transition: all 0.3s ease;
}

.landingpage .btn-prev:hover {
    background-color: #ff44e3;
    color: white;
}

.landingpage .btn-next {
    background-color: #ff44e3;
    color: white;
}

.landingpage .card-custom {
    background-color: #1a1a2e;
    border-radius: 12px;
    overflow: hidden;
}

.landingpage.card-custom img {
    width: 100%;
    height: 381px;
    object-fit: cover;
}

.landingpage .card-custom h5 {
    font-weight: bold;
    color: white;
}

.landingpage .card-custom p {
    color: rgb(178, 176, 176);
}

.landingpage .btn-try {
    background: linear-gradient(90deg, #B8CBB8 0%, #B8CBB8 0%, #B465DA 0%, #CF6CC9 33%, #EE609C 66%, #EE609C 100%);
    border: none;
    color: white;
    border-radius: 20px;
    padding: 8px 16px;
    width: 100%;
}


/*Style*/
/* GLOBAL STYLES */
.style body {
    font-family: 'Poppins', sans-serif;
    background-color: #1E1E1E;
    color: white;
    margin: 0;
}

.style .container {
    margin: 20px auto;
}

.style .form-container {
    background-color: #141414;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

/* BANNER STYLING */
.style .banner {
    background: url('assets/banner.jpg') no-repeat center;
    background-size: cover;
    min-height: 400px;
    position: relative;
}

.style .banner::after {
    content: "Tạo ảnh theo phong cách của riêng bạn bằng AI";
    position: absolute;
    bottom: 20px;
    left: 10%;
    right: 10%;
    text-align: center;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 10px;
    border-radius: 10px;
}

/* FORM STYLING */
.style .form-content {
    padding: 30px;
}

.style .form-content h1 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 10px;
    text-align: center;
}

.style .form-content p {
    text-align: center;
    color: #b3b3b3;
    margin-bottom: 20px;
}

.style .btn-primary {
    background: linear-gradient(90deg, #ff007f, #ff5e90);
    border: none;
}

.style .btn-primary:hover {
    background: linear-gradient(90deg, #e60073, #ff4f88);
}

.style .social-btn {
    border: 1px solid #333;
    color: white;
    margin-bottom: 10px;
}

.style .footer-text {
    color: #b3b3b3;
    font-size: 14px;
    text-align: center;
}

/* DASHBOARD PAGE */
.style .dashboard {
    padding: 20px;
}

.style .dashboard h1 {
    color: #ffffff;
    text-align: center;
    margin-bottom: 20px;
}

.style .dashboard-card {
    background: #141414;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    color: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	/* margin: 0; */
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
    font-family: "Oxygen", serif;
	line-height: 1;
    width: 100% !important;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

.bgr-main{
    background-color: black;
}

.sidebar {
    border-radius: 16px;
    width: 48px;
    height: 100vh;
    background: #272835;
    transition: width 0.3s ease;
    overflow: hidden;
    position: fixed;
    left: 11px;
    top: 20px;
}

.sidebar .sidebar-img{
    width: 40px;
    height: 40px;
    margin: 20px 4px;
    border-radius: 5px;
}

.sidebar .nav-link {
    color: white;
    justify-content: center;
    display: flex;
    align-items: center;
    padding: 10px;
    margin: 5px 0;
}

.sidebar .nav-link:hover{
    background-color: #fff;
    color: black;
    border-radius: 50px;
}

.sidebar .menu-text {
    display: none;
    margin-left: 10px;
}

.sidebar ul p{
    color: white;
    text-align: center;
    font-weight: 200;
    font-size: 13px;
    font-family: "Oxygen", serif;
    margin:10px 0;
}

.toggle-btn {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 10px;
    width: 100%;
    text-align: left;
}

.toggle-btn i {
    transition: transform 0.3s ease;
}

.sidebar.expanded .toggle-btn i {
    transform: rotate(180deg);
}


.sidebar.expanded {
    width: 247px;
}

.sidebar.expanded ul p{
    margin: 0 10px; 
    width: 100%;
    text-align: start;
}

.sidebar.expanded .nav-link{
    display: flex;
    justify-content: left;
    margin-left: 10px;
    margin: 5px 0;
}

.sidebar.expanded .nav-link:hover {
    background-color: #fff;
    color: #343a40;
    max-width: 231px;
   border-radius: 10px;
}

.sidebar.expanded .menu-text {
    display: inline;
    font-family: "Oxygen", serif;
    font-size: 14px;
}

.menu-container {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 48px;
    transition: width 0.3s ease;
}

.menu-container.expanded {
    width: 247px;
}

.main-container {
    display: flex;
    transition: margin-left 0.3s ease;
}

.main-content .create-main{
    border: none;
    color: white;
    font-family: "Oxygen", serif;
    padding: 11px 24px;
    border-radius: 25px;
    background: rgb(210,36,241);
    background: radial-gradient(circle, rgba(210,36,241,1) 0%, rgba(252,70,167,1) 100%);
}

.main-content .info{
    border: none;
    padding: 11px;
    border-radius: 25px;
    background: rgb(210,36,241);
    background: radial-gradient(circle, rgba(210,36,241,1) 0%, rgba(252,70,167,1) 100%);
}

.main-content .info i{
    color: white;
}

.main-content {
    margin-top: 20px;
    background-color: #272835;
    flex-grow: 1;
    padding: 20px;
    transition: margin-left 0.3s ease;
}

.main-content .text-pan{
    font-size: 16px;
    font-family: "Oxygen", serif;
    font-weight: 400;
    color: white;
}

.main-content .text-pan strong{
    color: yellow ;
}

.main-content .border-baner{
    background-color: black;
    border: 1px solid black;
    padding: 5px 10px ;
    border-radius: 25px;
}

.main-content .border-baner span{
    color: white;
    font-size: 14px;
    font-family: "Oxygen", serif;
    font-weight: 400;
}

.nav-tabs .nav-link.active {
    border: none;
    background-color: initial;
}

.main-content .list-navs li{
    border: 1px solid black;
    background-color: #1d2f49;
    border-radius: 35px;
    color: white !important;
}

.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
    border-color: initial !important;
}

.nav-tabs .nav-link.active {
    color: black;
    background-color: white;
    border: none;
    border-radius: 35px;    
}



.title-incard{
    font-size: 20px;
    font-family: "Oxygen", serif;
    font-weight: 400;
    color: white;
}

.card {
    background-color: #2a2a3a;
    border: none;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.card:hover {
    transform: scale(1.05);
}

.card img {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    width: 100%;
}

.card-body {
    text-align: center;
}

.btn-danger {
    background-color: #ff4c61;
    border: none;
    transition: background-color 0.3s ease;
}

.btn-danger:hover {
    background-color: #ff1e3a;
}

  
  .tab-content  .card-img-top {
    height: 300px;
    object-fit: cover;
    border-radius: 10px;
  }
  
  .tab-content .btn-light {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
  }

  .tab-content .tym-card{
    border-radius: 25px;
  }

  .tab-content .use-img{
    border-radius: 25px;
    color: white;
    background: rgb(210,36,241);
    background: radial-gradient(circle, rgba(210,36,241,1) 0%, rgba(252,70,167,1) 100%);
  }

.card-body .card-text{
    font-size: 18px;
    color: white;
    font-weight: 400;
}

.card-body .info-name span{
    font-size: 14px;
    color: white;
    font-weight: 400;
    margin: 0 10px;
}
/* Style cho modal */
.modal-content {
    background-color: #1f1f1f !important; /* Màu nền tối */
    border-radius: 12px !important;
    border: none !important;
   }
   
   /* Style cho header modal */
   .modal-header {
    padding: 16px 16px 8px 16px !important;
    border: none !important;
   }
   
   .modal-title {
    font-size: 1rem !important;
    font-weight: 500 !important;
   }
   
   .btn-close-white {
    opacity: 1 !important;
    font-size: 12px !important;
   }
   
   /* Style cho body modal */
   .modal-body {
    padding: 8px 16px 16px 16px !important;
   }
   
   /* Style cho user info */
   .modal-body .user-info {
    font-size: 0.9rem !important;
   }
   
   /* Style cho ảnh chính trong modal */
   .modal-body img.img-fluid {
    border-radius: 8px !important;
    width: 50% !important;
    aspect-ratio: 3/4 !important;
    object-fit: cover !important;
   }
   
   /* Style cho nút thêm khuôn mặt */
   .btn-outline-light {
    background: transparent !important;
    border: 1px dashed rgba(255,255,255,0.5) !important;
    border-radius: 8px !important;
    padding: 10px !important;
    font-size: 0.9rem !important;
    margin: 16px 0 !important;
   }
   
   .btn-outline-light:hover {
    background: rgba(255,255,255,0.1) !important;
   }
   
   /* Style cho nút tạo ảnh */
   .modal-face.btn-primary {
    background: #A855F7 !important; /* Màu tím */
    border: none !important;
    border-radius: 8px !important;
    padding: 10px !important;
    font-size: 0.9rem !important;
   }
   
   .btn-primary:hover {
    background: #9333EA !important; /* Màu tím đậm hơn khi hover */
   }
   
   /* Style cho backdrop modal */
   .modal-backdrop {
    opacity: 0.7 !important;
   }
   
   /* Animation cho modal */
   .modal.fade .modal-dialog {
    transform: scale(0.95);
    transition: transform 0.2s ease-out;
   }
   
   .modal.show .modal-dialog {
    transform: scale(1);
   }

   .add-face{
    color: radial-gradient(circle, rgba(210,36,241,1) 0%, rgba(252,70,167,1) 100%);
   }

   .crt-img{
    border-radius: 25px;
    color: white;
    background: rgb(210,36,241);
    background: radial-gradient(circle, rgba(210,36,241,1) 0%, rgba(252,70,167,1) 100%);
   }

   .modal-face .face-list {
     display: flex; 
      gap: 12px; 
    }
   .modal-face .face-list img {
     width: 80px !important;
     height: 80px !important;
       cursor: pointer;
        border-radius: 10px; 
        transition: transform 0.3s ease, border 0.3s ease;
        object-fit: cover;
     }

     .face-list-1 {
        border-right: 2px solid rgba(255, 255, 255, 0.2);
        padding-right: 15px;
      }
   .modal-face .face-list img:hover {
     transform: scale(1.1);
     }
   .modal-face .face-list img.active { 
    border: 3px solid #ff69b4;
     transform: scale(1.15); }
   .modal-face .selected-face img {
     width: 100%;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(255, 105, 180, 0.4);
     }
   .modal-face .btn-primary { 
    background: #ff69b4; 
    border: none;
     border-radius: 8px;
      padding: 10px; 
      font-size: 16px; 
    }
   .modal-face .btn-primary:hover {
     background: #e0559d; 
    }
   .modal-face .modal-body {
     display: flex;
      gap: 20px; 
    }

    #selectedFace{
        object-fit: contain;
        height: 200px;
        width: 290px;
    }

    .modal-face .name-text-3{
        text-align: start !important;
        margin: 20px 25px;
    }
    .upload-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
      }
      
      .upload-box {
        width: 400px;
        height: 200px;
        background: #141418;
        border-radius: 12px;
        border: 2px dashed rgba(255, 255, 255, 0.2);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: white;
        font-size: 16px;
        text-align: center;
      }
      
      .upload-box:hover {
        border-color: rgba(252, 70, 167, 1);
      }
      
      .upload-box i {
        font-size: 24px;
        margin-bottom: 8px;
      }
      
      .hidden {
        display: none;
      }
      
      #previewImage {
        margin-top: 15px;
        max-width: 100%;
        width: 200px;
        height: auto;
        border-radius: 8px;
      }
      
      .color-picker {
        display: flex;
        justify-content: space-between; /* Phân bố đều các phần tử */
        gap: 10px; /* Khoảng cách giữa các phần tử */
        margin: 15px 0;
      }
      
      .color-option {
        width: 30px; /* Kích thước cố định cho mỗi màu */
        height: 30px;
        border-radius: 50%; /* Tạo hình tròn */
        cursor: pointer;
        transition: transform 0.2s ease;
        border: 2px solid transparent;
      }
      
      .color-option:hover {
        transform: scale(1.1);
      }
      
      .color-option.selected {
        border: 2px solid #333; /* Viền cho màu được chọn */
      }
      
    .use-face{
        border-radius: 25px !important;
        color: white !important;
        background: rgb(210,36,241) !important;
        background: radial-gradient(circle, rgba(210,36,241,1) 0%, rgba(252,70,167,1) 100%) !important;
    }

    .face-selection-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
        padding: 0 1rem;
    }
    
    .face-selection-header h5 {
        color: white;
        font-size: 20px;
        font-weight: 600;
        margin: 0;
    }

    .face-selection-header button {
        color: rgb(210,36,241);
        color: radial-gradient(circle, rgba(210,36,241,1) 0%, rgba(252,70,167,1) 100%);
        font-size: 20px;
        font-weight: 600;
        margin: 0;
    }
    
    .face-selection-header .btn-link {
        color: #ff69b4;
        text-decoration: none;
        font-size: 1rem;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 5px;
        transition: color 0.3s ease;
    }
    
    .face-selection-header .btn-link:hover {
        color: #e0559d;
    }
    
    .face-selection-container {
        background-color: #1E1E1E;
        border-radius: 12px;
        padding: 20px;
    }
    
    .modal-face .face-list-2 {
        display: flex; 
         gap: 12px; 
       }
      .modal-face .face-list-2 img {
        max-width: 50px !important;
        max-height: 50px !important;
        object-fit: cover;
          cursor: pointer;
           border-radius: 10px; 
           transition: transform 0.3s ease, border 0.3s ease;
        }

/* Style cho modal */
.modal-content {
    border-radius: 12px;
    border: none;
}

.modal-header {
    padding: 1rem 1rem 0.5rem;
}

.modal-body {
    padding: 1rem;
}

/* Style cho các phần tử trong modal */
.modal-content .modal-title {
    width: 100%;
    text-align: center;
    font-size: 1.25rem !important;
    color: white;
}


/* Style cho button đóng modal */
.btn-close {
    opacity: 0.5;
}

/* Style cho vùng input */
.form-control {
    padding: 0.75rem;
    border-radius: 6px;
    border: 1px solid #dee2e6;
}

.form-control:focus {
    border-color: #E535AB;
    box-shadow: 0 0 0 0.25rem rgba(229, 53, 171, 0.25);
}

/* Style cho vùng upload */
.border-dashed {
    border-style: dashed !important;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.border-dashed:hover {
    background-color: rgba(0,0,0,0.02);
}

.border-dashed .text-muted {
    font-size: 0.9rem;
}

/* Style cho button mở modal */
.btn-link.text-pink {
    text-decoration: none;
    color: #E535AB;
}

.btn-link.text-pink:hover {
    color: #c41e8f;
}

.btn-link.text-pink i {
    padding: 8px;
    border-radius: 4px;
    color: white;
}

/* Style cho button submit trong modal */
.btn-primary {
    background: #E535AB !important;
    border: none;
    padding: 10px;
    font-weight: 500;
    width: 100%;
}

.btn-primary:hover {
    background: #c41e8f !important;
}

.modal-fade3 .modal-title {
    font-size: 24px !important;
    color: white;
}

.modal-fade3 .modal-body p{
    font-size: 14px !important;
    color: white !important;
    font-weight: 200;
}
.container-custom {
    max-width: 1200px;
    margin: auto;
}
.image-box {
    background: #272835;
    padding: 20px;
    border-radius: 10px;
}
.result-image {
    max-width: 90% !important;
    border-radius: 10px;
}
.btn-custom {
background: linear-gradient(90deg, #B8CBB8 0%, #B8CBB8 0%, #B465DA 0%, #CF6CC9 33%, #EE609C 66%, #EE609C 100%);
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    color: white;
    font-weight: bold;
}
.head-ai .border-baner{
    border: 1px solid white;
    padding: 7px;
    border-radius: 25px;
}
.head-ai .border-baner .name-tx{
    color: white;
}

.head-ai .border-baner .gmail-tx{
    color: white;
    font-size: 14px;
}

.head-ai .text-pan{
    color: white;
}

.head-ai .text-pan strong{
    color: gold;
}

.btn-cust{
    border-radius: 20px;
    color: black;
    font-weight: bold;
    background: linear-gradient(90deg, #B8CBB8 0%, #B8CBB8 0%, #B465DA 0%, #CF6CC9 33%, #EE609C 66%, #EE609C 100%) !important;
}

.box-ig{
    border: 1px solid white;
    padding: 22px;
    border-radius: 10px;
    background-color: black;
}

.form-select{
    color: white !important;
    background-color: black !important;
}
.form-control{
    color: white !important;
}

.user-card {
    display: flex;
    align-items: center;
    background: #24262b;
    padding: 10px;
    border-radius: 10px;
}
.user-card img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}

.user-card span {
    color: white;
}
/* Responsive cho tablet (màn hình nhỏ hơn 768px) */
@media (max-width: 768px) {
    .main-content .text-pan{
        display: none;
    }
    .rp-head{
        flex-direction: column-reverse;
    }
    .main-content .border-baner{
        margin: 20px 0;
    }
    .main-content .list-navs li{
        margin: 10px;
    }

    .none-sm{
        display: none !important;
    }
}

/* Responsive cho mobile (màn hình nhỏ hơn 480px) */
@media (max-width: 480px) {
    .modal-face .face-list{
        width: 100%;
    }
    .modal-face .modal-body{
        flex-direction: column;
    }
    .rp-modal2{
        width: 100%;
    }
    .rp-menu{
        display: none;
    }
    .none-sm{
        display: none !important;
    }

    .mbi-cl{
        flex-direction: column;
    }

    .landingpage .btn-custom {
        display: none;
    }
    .landingpage .grid{
        display: none;
    }

    .landingpage .hero-title{
        display: none;
    }
}  */
/* History */

.History body {
    background-color: #121218;
    color: white;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/* Sidebar styles */
.History .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 240px;
    background-color: #1c1c25;
    display: flex;
    flex-direction: column;
    transition: width 0.3s ease;
    z-index: 1000;
    border-right: 1px solid #2a2a35;
}

.History .sidebar.collapsed {
    width: 70px;
}

.History .sidebar-top {
    flex-direction: column;
    align-items: center;
    padding-bottom: 10px;
}

.History .logo-container {
    margin-bottom: 10px;
    text-align: center;
}

.History .logo {
    width: 40px;
    height: 40px;
}

.History .section-title {
    color: #515151;
    /* Màu đỏ giống nút rocket */
    font-weight: bold;
}

/* Căn giữa các nút ở sidebar-bottom */
.History .sidebar-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Ẩn thanh trượt cho tất cả các trình duyệt */
.History .sidebar-middle {
    /* Ẩn thanh trượt nhưng vẫn giữ chức năng cuộn */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE và Edge */
}

/* Ẩn thanh trượt cho Chrome, Safari và Opera */
.History .sidebar-middle::-webkit-scrollbar {
    display: none;
}

.History .section-items {
    margin-bottom: 15px;
}

.History .sidebar-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.History .sidebar-item:hover {
    background-color: #2a2a35;
}

.History .sidebar-item i {
    width: 20px;
    margin-right: 15px;
}

.History .sidebar.collapsed .sidebar-item span {
    display: none;
}

.History .sidebar-bottom {
    padding: 15px;
    border-top: 1px solid #2a2a35;
    display: flex;
    justify-content: center;
}

.History .rocket-button {
    background-color: #f24e54;
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Main content styles */
.History .main-content {
    margin-left: 240px;
    transition: margin-left 0.3s ease;
    min-height: 100vh;
}

.History .main-content.collapsed {
    margin-left: 70px;
}

/* Header styles */


/* Content styles */
.History .content {
    padding: 20px;
}

.History .page-title {
    font-size: 18px;
    margin-bottom: 20px;
}

.History .stats-card {
    background-color: #1c1c25;
    border-radius: 20px;
    padding: 30px 20px;
    margin-bottom: 20px;
    border: 1px solid rgb(200,13,217);
}

.History .stats-header {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 15px;
}

.History .stats-title {
    font-weight: bold;
    font-size: 16px;
}

.History .share-button {
    background-color: #1c1c25;
    border: 1px solid #2a2a35;
    color: #949494;
    border-radius: 20px;
    padding: 5px 10px;
    font-size: 14px;
}

.History .stats-count {
    display: flex;
    justify-content: space-between;
    text-align: center;
}

.History .stat-item {
    flex: 1;
}

.History .stat-number {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
    color: white;
}

.History .stat-label {
    font-size: 12px;
    color: #949494;
}

.History .filter-container {
    padding-top: 40px;
    border-top: 1px solid #444444;
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.History .filter-dropdown {
    background-color: #1c1c25;
    border: 1px solid #2a2a35;
    color: white;
    border-radius: 20px;
    padding: 8px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 170px;
}

.History .filter-dropdown i {
    margin-left: 10px;
}

.History .work-card {
    background-color: transparent;
    border-radius: 10px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    padding: 10px 0;
}

.History .work-image {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
    margin-right: 15px;
}

.History .work-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.History .work-info {
    flex-grow: 1;
}

.History .work-title {
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 15px;
}

.History .work-date {
    color: #949494;
    font-size: 12px;
    margin-bottom: 5px;
}

.History .work-stats {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #949494;
}

.History .work-stat-item {
    flex: 1;
}

.History .action-buttons {
    display: flex;
    gap: 8px;
}

.History .edit-button {
    background-color: #1c1c25;
    border: 1px solid #2a2a35;
    color: white;
    border-radius: 20px;
    padding: 8px 15px;
    font-size: 13px;
}

.History .delete-button {
    background-color: #f24e54;
    border: none;
    color: white;
    border-radius: 20px;
    padding: 8px 15px;
    font-size: 13px;
}

/* Responsive */
@media (max-width: 992px) {
    .History .work-stats {
        flex-direction: column;
    }

    .History .action-buttons {
        flex-direction: column;
        gap: 5px;
    }
}

@media (max-width: 768px) {
    .History .sidebar {
        width: 70px;
    }

    .History .sidebar .sidebar-item span {
        display: none;
    }

    .History .main-content {
        margin-left: 70px;
    }

    .History .stats-count {
        flex-wrap: wrap;
    }

    .History .stat-item {
        flex: 0 0 50%;
        margin-bottom: 10px;
    }

    .History .filter-container {
        flex-direction: column;
    }
}

@media (max-width: 576px) {
    .History .work-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .History .work-image {
        margin-bottom: 10px;
    }

    .History .action-buttons {
        width: 100%;
        margin-top: 10px;
    }

    .History .edit-button,
    .History .delete-button {
        width: 100%;
        text-align: center;
    }
}


/* Discover */
.Discover .header-container {
    text-align: center;
    padding: 40px 20px;
}
.Discover .header-title {
    color: white;
    font-size: 2.5rem;
    margin-bottom: 15px;
}
.Discover .header-title span {
    color: #FF2C82;
}
.Discover .header-description {
    color: #B0B3C0;
    max-width: 800px;
    margin: 0 auto 30px;
    font-size: 0.8rem;
}
.Discover .divider {
    width: 100%;
    height: 1px;
    background-color: #2C3142;
    margin: 20px 0;
}
.Discover .search-container {
    background-color: #1a1d2b;
    padding: 15px 0;
}
.Discover .search-input {
    background-color: #50566b;
    border: 1px solid #2d3345;
    border-radius: 25px;
    color: white;
    padding: 14px 15px;
    width: 100%;
}
.Discover .search-input:focus {
    box-shadow: none;
    background-color: #232735;
    color: white;
    border-color: #3a425a;
}
.Discover .search-button {
    background-color: #e74ea0;
    border: none;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}
.Discover .search-button:hover {
    background-color: #d0418f;
}
.Discover .nav-button {
    background-color: white;
    color: #16213e;
    border-radius: 20px;
    padding: 8px 15px;
    margin: 0 5px;
    font-size: 14px;
    border: none;
    transition: all 0.3s ease;
}
.Discover .nav-button:hover {
    background-color: #ff66cc;
    color: white;
    cursor: pointer;
}
 /* Thay đổi grid-template-columns từ 4 thành 5 cột */
 .Discover .gallery-container {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: 12px;
     padding: 10px;
 }
  @media (max-width: 992px) {
      .Discover .gallery-container {
          grid-template-columns: repeat(3, 1fr);
      }
  }
   @media (max-width: 576px) {
       .Discover .gallery-container {
           grid-template-columns: repeat(2, 1fr);
       }
   }
        /* Điều chỉnh kích thước ảnh nhỏ hơn */
        .Discover .gallery-card {
            position: relative;
            border-radius: 12px;
            overflow: hidden;
            background-color: #2A2A3C;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            height: 100%;
            display: flex;
            flex-direction: column;
        }
.Discover .gallery-card-img-container {
    position: relative;
}
.Discover .gallery-card img.main-img {
    width: 100%;
    aspect-ratio: 3/4;
    /* Giữ nguyên tỉ lệ */
    object-fit: cover;
    display: block;
}
 .Discover .like-btn {
     position: absolute;
     top: 8px;
     right: 8px;
     background-color: rgba(255, 255, 255, 100%);
     border: none;
     border-radius: 16px;
     padding: 4px 10px;
     display: flex;
     align-items: center;
     color: rgb(0, 0, 0);
     z-index: 2;
     font-size: 14px;
 }
 .Discover .like-btn i {
     margin-right: 4px;
     font-size: 14px;
 }
  .Discover .action-buttons {
      position: absolute;
      bottom: 10px;
      left: 8;
      display: flex;
      justify-content: space-between;
      width: 95%;
    }
.Discover .use-photo-btn {
    background-color: rgba(186, 20, 136, 100);
    border: none;
    border-radius: 20px;
    padding: 6px 12px;
    color: white;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
}
.Discover .use-photo-btn i {
    color: #ff66ff;
    font-size: 14px;
}
.Discover .download-btn {
    background-color: rgb(255, 255, 255);
    border: none;
    border-radius: 20px;
    padding: 6px 12px;
    color: rgb(0, 0, 0);
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
}
.Discover .download-btn i {
    font-size: 14px;
}
.Discover .card-content {
    padding: 14px;
    flex-grow: 1;
    text-align: left;
    /* Đảm bảo nội dung trong card-content được căn lề trái */
}
 /* Ghi đè mạnh mẽ cho tiêu đề */
 .Discover .gallery-card-title,
 .Discover h5.gallery-card-title {
     font-size: 14px;
     /* Giảm kích thước chữ */
     margin: 0;
     text-align: left !important;
     /* Sử dụng !important để ghi đè bất kỳ quy tắc nào khác */
     justify-content: flex-start !important;
     align-items: flex-start !important;
     display: block !important;
     /* Đảm bảo hiển thị dạng block */
     width: 100%;
 }
  .Discover .creator-info {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      color: #cccccc;
      margin-top: 8px;
      text-align: left;
      /* Đảm bảo thông tin người tạo được căn lề trái */
      justify-content: flex-start;
  }
  .Discover .creator-info img {
      width: 24px;
      height: 24px;
      border-radius: 50%;
  }
   /* Thêm breakpoint cho màn hình lớn hơn để đảm bảo hiển thị tốt */
   @media (min-width: 1200px) {
       .Discover .gallery-container {
           grid-template-columns: repeat(5, 1fr);
       }
   }


   /* thêm css */

   @media (max-width: 576px) { /* Bootstrap breakpoint SM */
    .custom-search-bar {    
        width: 280px;
    }
    
}

.wrapper {
    padding: 20px;
}

/* Sidebar */
.sidebar-menu {
    background: #1e1f29;
    padding: 20px;
    border-radius: 12px;
}

.nav-pills .nav-link {
    color: white;

    margin-bottom: 10px;
    border-radius: 10px;
    padding: 12px;
    font-size: 16px;
}

.nav-pills .nav-link.active {
    background: white;
    color: black;
}

/* Nội dung */
.content-area {
    padding: 20px;
}

.notify-card {
    background: #1e1f29;
    border-radius: 12px;
    padding: 15px;
    border: 2px solid #2a2d3e;
    margin-bottom: 10px;
}

.notify-card:hover {
    border: 2px solid #3a3e50;
}

.notify-title {
    margin: 15px 0;
    font-size: 16px;
    font-weight: bold;
}

.notify-card p{
    margin: 10px 0;
}

/* Responsive */
@media (max-width: 768px) {
    .sidebar-menu {
        padding: 15px;
    }

    .content-area {
        padding: 15px;
    }

    .notify-title {
        font-size: 14px;
    }
}


/* Profile styles */
.profile-container {
    position: relative;
    margin-top: -20px;
}

.profile-banner {
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: 10px;
}

.banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-info-container {
    border-bottom: 1px solid #444444;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -50px;
    text-align: center;
}

.profile-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #fff;
    background: #fff;
    margin-bottom: 15px;
}

.avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-name {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 5px;
}

.profile-email {
    color: #6c757d;
    margin-bottom: 20px;
}

.profile-stats {
    margin: 20px 0;
}

.stats-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 0;
    margin: 0;
}

.stats-list li {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 14px;
    color: #fff;
}

.stats-number {
    font-size: 18px;
    font-weight: 600;
    display: block;
    margin-bottom: 5px;
}

.settings-button {
    margin-top: 15px;
    border-radius: 20px;
    padding: 8px 20px;
}

/* CSS cho logo */
.sidebar-logo {
    display: block; /* Hiển thị theo mặc định khi sidebar mở */
}

/* Khi sidebar bị đóng lại (thêm class 'collapsed' vào #sidebar) */
#sidebar.collapsed .sidebar-logo {
    display: none; /* Ẩn logo */
}

/* Hoặc sử dụng opacity để có hiệu ứng mượt hơn */
#sidebar .sidebar-logo {
    opacity: 1;
    transition: opacity 0.3s ease;
}

#sidebar.collapsed .sidebar-logo {
    opacity: 0;
}
.sidebar-logo {
    width: auto;
    max-width: 150px; /* Điều chỉnh theo kích thước logo của bạn */
    overflow: hidden;
    transition: max-width 0.3s ease, opacity 0.3s ease;
}

#sidebar.collapsed .sidebar-logo {
    max-width: 0;
    opacity: 0;
}

body i{
    margin-right: 6px;
}