Chỉnh sửa giao diện của admin, phân hồ sơ thành 2 cột

frontend/css/style.css

@@ -66,7 +66,6 @@ html, body {
     display: block;
     margin-bottom: 5px;
     font-weight: 600;
-    color: #333;
 }
 
 .form-group input, .form-group select {
@@ -77,15 +76,16 @@ html, body {
 }
 
 .submit-btn {
-    width: 100%;
+    background: transparent !important;
-    padding: 12px;
+    color: #fff;
-    background-color: #28a745;
+    padding: 0 20px;
-    color: white;
+    height: 36px;
-    border: none;
+    border: 1px solid rgba(255, 255, 255, 0.2) !important;
     border-radius: 4px;
     cursor: pointer;
-    font-weight: bold;
+    font-size: 13px;
-    font-size: 16px;
+    transition: background 0.2s;
+    white-space: nowrap;
 }
 
 .submit-btn:hover {
@@ -423,12 +423,40 @@ html, body {
 }
 
 /* Profile Styles */
+.profile-grid {
+    display: grid !important;
+    grid-template-columns: 1fr 1fr !important; /* Ép buộc chia 2 cột đều nhau */
+    gap: 10px 25px !important;
+    margin-bottom: 20px;
+    width: 100% !important;
+}
+
+/* Responsive cho mobile */
+@media (max-width: 768px) {
+    .profile-grid {
+        grid-template-columns: 1fr !important;
+    }
+}
+
+#profile-form .form-group {
+    margin-bottom: 10px;
+}
+
 .profile-header-edit {
     display: flex;
     justify-content: center;
     margin-bottom: 25px;
 }
 
+#profile-form input {
+    background: #2a2a2a !important; /* Đồng bộ màu nền xám tối như admin table */
+    border: 1px solid #444 !important; /* Viền sắc nét hơn */
+    color: #fff !important;
+    padding: 8px 12px !important;
+    border-radius: 4px;
+    font-size: 13px;
+}
+
 .avatar-edit-container {
     position: relative;
     width: 100px;
@@ -465,6 +493,24 @@ html, body {
     transform: scale(1.1);
 }
 
+.profile-submit-btn {
+    width: auto !important;
+    margin: 20px auto 0 !important;
+    display: block !important;
+    background: transparent !important; /* Loại bỏ hoàn toàn nền xanh */
+    border: 1px solid rgba(255, 255, 255, 0.15) !important;
+    color: #fff !important;
+    padding: 8px 25px !important;
+    border-radius: 6px !important;
+    font-weight: 500 !important;
+    font-size: 14px !important;
+    transition: background 0.2s;
+}
+
+.profile-submit-btn:hover {
+    background: rgba(255, 255, 255, 0.08) !important;
+}
+
 /* Storage Progress Bar */
 .storage-info {
     margin-top: 25px;
@@ -1080,6 +1126,71 @@ html, body {
     width: 100%;
 }
 
+/* Admin User Management Header */
+.admin-management-header {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    margin-bottom: 20px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.cleanup-btn {
+    background: transparent; /* Nền trùng màu dashboard */
+    color: #fff;
+    padding: 6px 12px;
+    font-size: 13px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background 0.2s;
+}
+
+.cleanup-btn:hover {
+    background: rgba(255, 255, 255, 0.1); /* Màu xám active của dashboard */
+}
+
+.admin-search-container {
+    display: flex;
+    flex-direction: row; /* Chuyển sang hàng ngang */
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 20px;
+    width: 100%;
+}
+.admin-search-container input {
+    flex: 1; /* Trải dài toàn bộ chiều rộng còn lại */
+    background: rgba(255, 255, 255, 0.1) !important; /* Nền xám như màu active */
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    color: #000 !important; /* Text màu đen */
+    padding: 8px 15px !important;
+    border-radius: 4px;
+    font-size: 14px;
+    height: 36px;
+}
+
+.admin-search-container input::placeholder {
+    color: #555;
+}
+
+.admin-search-btn {
+    background: transparent !important;
+    color: #fff;
+    padding: 0 20px;
+    height: 36px;
+    border: 1px solid rgba(255, 255, 255, 0.2) !important;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 13px;
+    transition: background 0.2s;
+    white-space: nowrap;
+}
+
+.admin-search-btn:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+
 /* Pagination Styles */
 .pagination-container {
     display: flex;

frontend/index.html

@@ -91,7 +91,6 @@
             </div>
             <div id="dashboard-tab-content">
                 <div id="tab-profile" class="dashboard-tab-pane active">
-                    <h3>Thông tin hồ sơ</h3>
                     <form id="profile-form" onsubmit="updateProfile(event)">
                         <div class="profile-header-edit">
                             <div class="avatar-edit-container">
@@ -103,23 +102,25 @@
                                 <input type="file" id="profile-avatar-input" name="avatar" accept="image/*" onchange="previewAvatar(this)" style="display:none;">
                             </div>
                         </div>
-                        <div class="form-group">
+                        <div class="profile-grid"> <!-- Đảm bảo class này được sử dụng -->
-                            <label>Họ và tên</label>
+                            <div class="form-group">
-                            <input type="text" id="profile-fullname" name="fullName" required>
+                                <label>Họ và tên</label>
+                                <input type="text" id="profile-fullname" name="fullName" required>
+                            </div>
+                            <div class="form-group">
+                                <label>Email</label>
+                                <input type="email" id="profile-email" name="email" required>
+                            </div>
+                            <div class="form-group">
+                                <label>Tên đăng nhập (Username)</label>
+                                <input type="text" id="profile-username" name="username" required>
+                            </div>
+                            <div class="form-group">
+                                <label>Mật khẩu mới (để trống nếu không đổi)</label>
+                                <input type="password" id="profile-password" name="password" placeholder="********">
+                            </div>
                         </div>
-                        <div class="form-group">
+                        <button type="submit" class="submit-btn profile-submit-btn">Cập nhật</button>
-                            <label>Email</label>
-                            <input type="email" id="profile-email" name="email" required>
-                        </div>
-                        <div class="form-group">
-                            <label>Tên đăng nhập (Username)</label>
-                            <input type="text" id="profile-username" name="username" required>
-                        </div>
-                        <div class="form-group">
-                            <label>Mật khẩu mới (để trống nếu không đổi)</label>
-                            <input type="password" id="profile-password" name="password" placeholder="********">
-                        </div>
-                        <button type="submit" class="submit-btn">Cập nhật hồ sơ</button>
                     </form>
                 </div>
                 <div id="tab-my-scenes" class="dashboard-tab-pane">
@@ -137,10 +138,10 @@
                     </div>
                 </div>
                 <div id="tab-user-management" class="dashboard-tab-pane admin-only">
-                    <h3>Quản lí người dùng</h3>
+                    <div class="admin-management-header">
-                    <div class="admin-maintenance-header" style="margin-bottom: 20px;">
+     
-                        <button class="edit-btn-large" onclick="openManualCleanupConfirm()" style="background: #17a2b8; width: auto; padding: 10px 20px; font-size: 14px;">
+                        <button class="cleanup-btn" onclick="openManualCleanupConfirm()">
-                            🧹 Dọn dẹp dữ liệu mồ côi
+                            🧹 Dọn dẹp dữ liệu
                         </button>
                     </div>
                     <div class="admin-search-container">